/* File: styles.css Style Contents: 1. Body CSS 2. Navigation menu 3. Styles for the different box arrangements 4. Footer 5. Copyright */ /* -------------------------------- Body CSS ------------------------------------ */ body { border:0; } * { margin:0; padding:0; } body { text-align:center; } #fixed { margin:0 auto; width:940px; /* you can use px, em or % */ text-align:left; } body { background:#fff; font-family: "Palatino Light", Georgia, "Times New Roman", Times, serif; font-size:100%; color:#000; } a:link { color:#fff799; text-decoration:none; } a:visited { color:#ed1c24; text-decoration:none; } a:hover { color:#000; background:#9d0039; text-decoration:none; } h1 { margin:.8em 0 .2em 0; padding:0; font-family:"Palatino Light", Georgia, "Times New Roman", Times, serif; } h2 { margin:.8em 0 .2em 0; padding:0; font-size:1.25em; font-family:"Palatino Light", Georgia, "Times New Roman", Times, serif; color:#ffffff; } h3 { margin:0 0 0 0; padding:0; font-size:1.25em; font-family:Verdana, Geneva, Helvetica, sans-serif; } p { margin:.4em 0 .8em 0; padding:0; } ol { list-style:none; padding:0; margin:0; } ul { display:block; list-style:square inside; padding:0; margin:0; width:100%; } li.b { display:block; margin:0; padding:0; width:100%; } /* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid #000; } #header p, #header h1, #header h2 { padding:0.4em 15px 0 15px; margin:0; } #header h1{ background:#061a53; /* Background colour for the header bar at the top of the page should be the same colour as the navigation bar. The colour changes on every page via its internal style sheet*/ color:#000; } /* ########## Welcome Page Styles ########## */ #title { /* This is PIC's name in the upper left-hand corner of the page */ margin:0; padding-left:0; background:#000; font-family:"Palatino Light", Georgia, "Times New Roman", Times, serif; color:#fff; } #pagehead { /* This is for the title of the page located below the navigation menu and above the page contents. */ background:#fff no-repeat; margin-left:0; padding:0; width:940px; height:150px; } img { margin:0; } .img { height:auto; width:auto; float:left; } .img img{ display:inline; } .image-left { height:auto; width:auto; float:left; } .image-right { height:auto; width:auto; float:right; } /* --------------------------------------Main navigation menu ------------------------- */ #nav{ clear:both; float:left; margin:0; padding:0 0 0 0; border-bottom:1px solid #000; /* black line below menu */ background:#000; /* Inline styles in the section of every page will change this color as well as the colour of the page's top bar; the colours should be the same.*/ width:940px; font-family:"Palatino Light", Georgia, "Times New Roman", Times, serif; /* Menu font */ font-size:95%; /* Menu text size */ text-align:center; z-index:1000; /* This makes the dropdown menus appear above the page content below */ position:relative; } #nav a { font-weight:bold; color:white; } #nav a { text-decoration:none; } #nav li li a { display:block; font-weight:normal; color:#000; padding:0.2em 10px; } #nav li li a:hover { padding:0.2em 5px; border:5px solid #060; border-width:0 5px; } li { float:left; position:relative; width:10em; text-align:left; cursor:default; background-color:#000; } li.b { float:left; position:relative; display:block; width:100%; text-align:left; } li#first { border-left-width:1em; } li#last { border-right-width:1em; } li ul { display:none; position:absolute; top:100%; left:0; font-weight:normal; background:url(images/nav_bg.png) bottom left no-repeat; padding:0.5em 0 1em 0; border-right:solid 1px #7d6340; } li>ul { top:auto; left:auto; } li li { display:block; float:none; background-color:transparent; border:0; } li:hover ul, li.over ul { display:block; } hr { display:none; } /* #################### Columns and Boxes #################### */ /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* holy grail 3 column settings */ .holygrail { background:#ff9; /* Right column background colour */ } .holygrail .colmid { float:left; width:200%; margin-left:-200px; /* Width of right column */ position:relative; right:100%; background:#fff; /* Centre column background colour */ } .holygrail .colleft { float:left; width:100%; margin-left:-50%; position:relative; left:400px; /* Left column width + right column width */ background:#FFD8B7; /* Left column background colour */ } .holygrail .col1wrap { float:left; width:50%; position:relative; right:200px; /* Width of left column */ padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */ } .holygrail .col1 { margin:0 215px; /* Centre column side padding: Left padding = left column width + centre column left padding width Right padding = right column width + centre column right padding width */ position:relative; left:200%; overflow:hidden; } .holygrail .col2 { float:left; float:right; /* This overrides the float:left above */ width:170px; /* Width of left column content (left column width minus left and right padding) */ position:relative; right:15px; /* Width of the left-had side padding on the left column */ } .holygrail .col3 { float:left; float:right; /* This overrides the float:left above */ width:170px; /* Width of right column content (right column width minus left and right padding) */ margin-right:45px; /* Width of right column right-hand padding + left column left and right padding */ position:relative; left:50%; } /* 3 column blog style settings */ .blogstyle { background:#ff9; /* Right column background colour */ } .blogstyle .colmid { float:left; width:200%; margin-left:-200px; /* Width of right column */ position:relative; right:100%; background:#FFD8B7; /* Centre column background colour */ } .blogstyle .colleft { float:left; width:100%; margin-left:-200px; /* Width of centre column */ background:#fff; /* Left column background colour */ } .blogstyle .col1wrap { float:left; width:50%; padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */ } .blogstyle .col1 { margin:0 15px 0 415px; /* Centre column side padding: Left padding = left column width + centre column left padding width Right padding = right column width + centre column right padding width */ position:relative; left:100%; overflow:hidden; } .blogstyle .col2 { float:right; width:170px; /* Width of left column content (left column width minus left and right padding) */ position:relative; left:185px; /* Width of the left-had side padding on the left column */ } .blogstyle .col3 { float:right; width:170px; /* Width of right column content (right column width minus left and right padding) */ position:relative; left:555px; } /* 2 column left menu settings */ .leftmenu { background:#000; } .leftmenu .colright { float:left; width:200%; position:relative; left:200px; background:#fff; } .leftmenu .col1wrap { float:right; width:50%; position:relative; right:200px; padding-bottom:1em; } .leftmenu .col1 { margin:0 15px 0 215px; position:relative; right:100%; overflow:hidden; } .leftmenu .col2 { float:left; width:170px; position:relative; right:185px; } /* 2 column right menu settings */ .rightmenu { background:#ff9; } .rightmenu .colleft { float:left; width:200%; margin-left:-200px; position:relative; right:100%; background:#fff; } .rightmenu .col1wrap { float:left; width:50%; position:relative; left:50%; padding-bottom:1em; } .rightmenu .col1 { margin:0 15px 0 215px; overflow:hidden; } .rightmenu .col2 { float:right; width:170px; position:relative; left:185px; } /* 1 column full page settings */ .fullpage { background:#fff; } .fullpage .col1 { margin:0 15px; } /* ----------------------------------Footer---------------------------------- */ /* Footer styles */ #footer{ padding:20px 0; background:#000; /* This colour changes on every page, according to the internal style sheet */ color:#fff; font-size:0.875em; } #footer h2{ margin-bottom:10px; border-bottom-color:#98989A; } #footer p, #footer ul, #footer a{ margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal; } #footer .footbox{ display:block; float:right; width:190px; margin:0 0 0 15px; padding:0; } #footer li{ margin-bottom:3px; } #footer .last{ margin:0; } #contact { display:block; float:left; width:400px; padding-left:20px; } /* -----------------------------------Copyright---------------------------*/ #copyright { clear:left; padding:25px 0 0; background:#000; /* This colour changes on every page according to the internal style sheet */ } #copyright p { margin:0; padding:25px 0 0 0; text-align:center; font-size:1em; }