/* Website: http://calthorpepark.hants.sch.uk History: 2005-10-26 -> 2008-03-01 -> 2008-09-06 -> 2009-02-18 -> 2009-04-26 -> 2009-06-24 -> 2009-07-27 -> 2009-10-21 -> 2010-07-24 -> 2010-09-03 Layout Base - Block - Forms - Headings - Inline - Links -- White Links - Lists -- Horizontal Lists Header Content - Graphical Indices Nav Footer - :WISH: Stick this to bottom - :TODO: Footer icons */ /* Layout */ html, body { margin: 0; padding: 0; border: 0; } html { color: #000; font-size: 100%; background: #fff url(/images/nav.gif) 15% 0 repeat-y; overflow-x: hidden; /* IE7 #footer */ overflow-y: scroll; /* avoid layout shift */ } body { font: 0.75em/1.417 Verdana, Helvetica, sans-serif; background: transparent url(/images/sidebar.gif) 72% 0 repeat-y; /* border-right: 3px solid #834860; */ /* Now have clipped photos */ } body.wide { background-image: none; } input, select, textarea { font: 1em Verdana, Helvetica, sans-serif; } #header { float: left; width: 100%; height: 7.25em; position: relative; color: #fff; background: #834860; } #content { clear: both; float: left; left: 16.5%; /* #nav width + 1.5% */ width: 54%; position: relative; overflow: hidden; /* /news/2005/war-child.htm */ } .wide #content { width: 81%; /* #content + 2% gap + #secondary */ } #content .col { float: left; width: 33%; } #secondary { float: right; width: 28%; /* Leftover - 2% */ overflow: hidden; background: #faf6f0; } #nav { float: left; left: -54%; /* #content width */ width: 15%; overflow: hidden; position: relative; color: #fff; background: #834860; } .wide #nav { left: -81%; /* .wide #content width */ } #footer { clear: both; margin: 0 0 0 0; padding: 0.167em 3px 0 1.5%; /* 3px to hide border-right */ left: 15.02%; position: relative; width: 84.98%; width: 83.48%; background: #fff; border-top: 3px solid #834860; } /* Base */ /* - Block */ address, .address, blockquote, dl, ol, ul, p, table { margin: 0 0 1em 0; padding: 0; } address, .address { padding: 0 1.417em; font-style: normal; font-weight: bold; } blockquote { padding: 0 1em; background: #faf6f0; border-left: 1em solid #834860; border-right: 1em solid #834860; } blockquote address { padding: 0; text-align: right; font-style: italic; font-weight: normal; } /* - Forms */ input, label, select, textarea { vertical-align: middle; } /* - Headings */ #header legend { letter-spacing: -0.028em; /* 1px */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; font-family: "Trebuchet MS",Tahoma,Helvetica,sans-serif; } h1, #secondary h2 { margin: 0; font-size: 2em; /* 24px */ line-height: 1.125; /* 27px; */ letter-spacing: -0.042em; /* 1px */ } h2, h3 { margin-top: 0.333em; /* 7px */ font-size: 1.75em; /* 21px */ line-height: 1.286; /* 26px; */ letter-spacing: -0.048em; /* 1px */ } h3 { font-style: italic; } h4, h5, h6 { font-size: 1.333em; /* 13px */ line-height: 1.5; /* 21px; */ line-height: 1.301; /* 17px; */ } h6 { /* /staff/vacancies/ict-technician.htm */ font-style: italic; } h2 samp { /* /news/2009/hpv-vaccine.htm */ font-weight: normal; } caption { text-align: left; } #content h1, #content h2, #content h3, #content h4, #content caption, #content legend { color: #6e2649; /* h5 and h6 are text-coloured */ } #content h1 { margin-top: 0.25em; } #nav h1, #secondary h2 { padding: 0 0 0.125em 0.25em; } /* - Inline */ acronym, abbr { border-bottom: 0; } code { font: 1.083em Consolas,"Courier New",monospace; /* 13px */ } form, fieldset { margin: 0; padding: 0; border: 0; } iframe.map { margin: 0; width: 100%; height: 440px; /* optimal for 1024x768 */ overflow: hidden; border: 0; } img { vertical-align: top; border: 0; } kbd { padding: 0 0.25em; font-family: Tahoma, Helvetica, sans-serif; background: #faf6f0; border: 1px solid #666; border-color: #ccc #666 #333 #bbb; } samp { font: bold 1em "Microsoft Sans Serif","MS Sans Serif",sans-serif; } sup { vertical-align: top; } /* - Links */ a { color: #06289e; text-decoration: none; border-bottom: 1px solid; } a:visited { color: #6e2649; /* #6c486e looked like #6e2649 */ } a:hover, a:active, a:focus { color: #c00; } a img { border: 0; } a.newsletter { font-weight: bold; } h2 a, h3 a { text-decoration: underline; border: 0; } dt a { font-weight: normal; } #content ul a { padding: 0.25em 0 0 0; /* Make gaps clickable */ } /* -- White Links */ #header a, #nav a { color: #edc; } #header a:hover, #header a:focus, #header a:active, #nav a:hover, #nav a:focus, #nav a:active { color: #fff; } #nav a { background: #6e2649; border-bottom: 0; } #nav a:hover, #nav a:focus, #nav a:active { background: #a97e8d; } /* - Lists */ ul { padding: 0 0 0 2em; } ol, dd ol { padding: 0 0 0 3em; } dl dl, dl ol, dl ul, li dl, li ol, li ul { margin: 0; padding: 0 0 0 1.5em; /* /changelog/ */ } li dl { padding: 0; /* /staff/vacancies/art-teacher.htm */ } dt { margin: 0.5em 0 0 0; font-weight: bold; } dt:first-child { margin: 0; /* Keep with preceeding heading */ } dd { margin: 0.083em 0 0 0; padding: 0; } li { margin-top: 0.083em; /* Padding offsets bullets for

...

... in Firefox 2 */ } li:first-child { margin-top: 0; /* Keep with preceeding heading */ } /* -- Horizontal Lists */ #header ul, #header li, #footer ul, #footer li { margin: 0; padding: 0.167em 0.167em 0.25em 0; } #header ul { left: -1px; /* Hide first border-left */ position: relative; } #footer ul { left: -0.5em; /* Hide first padding-left */ position: relative; } #header li, #footer li { display: inline; padding-left: 0.5em; border-left: 1px solid; } #footer li.first { border: 0; } /* -- Tables /letters/2006/09/year-7-clubs.htm /letters/2006/11/gcse-mocks.htm /letters/2008/09/science.htm */ table { text-align: left; empty-cells: hide; border: 0; } th, td { padding: 0.167em; } th { text-align: left; color: #fff; vertical-align: bottom; background: #834860; } tbody th, tbody td { vertical-align: top; font-weight: normal; } tbody td { color: #000; background: #faf6f0; } table.number, table .number { text-align: right; } table.text, table .text { text-align: left; } table.letters, table .letters { text-align: center; } table.img { /* IE6 double margin bug but tables don't work when inline */ float: right; margin: 0 0 0.5em 0.75em; } table.img caption { margin: 0 0 0 0.75em; } /* Header */ #header label, #header input { top: -1.5em; /* Level with skip links */ left: -0.25em; position: relative; } #header fieldset { text-align: right; } #header legend { left: -7px; /* IE6 & IE7 */ width: 100%; position: absolute; text-align: left; } #header legend a, #header p { font: 1.25em/1.111 Garamond,Palatino,Times,serif; } #header legend a { padding-left: 75px; /* Logo */ height: 1.694em; z-index: 1; /* Keep above slogan */ position: absolute; color: #fff; font-size: 3em; border-bottom: 0; background: transparent url(/images/logo.gif) 3px 0 no-repeat; } #header label { background: #834860; /* Obscure links if overlapped */ } #header p { margin: 0; left: 75px; /* Logo */ bottom: 0.25em; position: absolute; font-size: 1.5em; font-style: italic; } /* Content */ #content #breadcrumb { margin: 0.5em 0 0 0; } /* /news/2004/model-un.htm /news/2006/model-un.htm */ #content img { clear: right; float: right; margin: 0 0 0.5em 0.25em; } #content p img { float: none; display: block; margin: 0 auto; } /* - Graphical Indices / /parent/ /student/ */ .index #content h2 { clear: both; padding: 10px 0 0 0; border-top: 1px solid #834860; } .index #content h2 img { clear: none; float: left; margin: 0; padding: 0 0.5em 12px 0; } /* /work/art/2006/ */ .gallery, .gallery li { clear: left; margin: 0; padding: 0; list-style: none; } #content .gallery img { clear: left; float: left; margin-right: 0.5em; } /* Secondary */ #secondary h3 { margin: 0; padding: 0.125em 0.5em 0 0.375em; font-size: 1.333em; font-style: normal; letter-spacing: 0; border-top: 1em solid #fff; } #secondary h3 a { display: block; text-decoration: underline; border: 0; } #secondary h3 img { display: block; margin: 0.25em auto 0 auto; } #secondary ul { margin: 0 0 0.5em 0; padding: 0 0.5em 0 2em; } #secondary p { margin: 0 0 0.5em 0; padding: 0 0.5em; } /* Nav */ #nav ul, #nav li { margin: 0; padding: 0; } #nav a, #nav strong { display: block; height: 1%; /* IE6 */ } #nav a, #nav strong { padding: 3px 0.25em 3px 0.75em; font-weight: bold; } #nav ul ul a, #nav ul ul strong { padding-left: 1.5em; font-weight: normal; } #nav .current strong { /* Current page */ font-style: italic; color: #6e2649; background: #fff; } #nav a strong, #nav ul ul a strong { /* Current section */ padding: 0; font-style: italic; } /* Footer */ /* See also: Horizontal Lists */ #footer p { margin: 0; padding: 0 0.417em 0.75em 0.417em; /* Align with

*/ padding: 0 0.417em 0.75em 0; /* Align with

*/ } /* - Icons */ #footer ul { float: left; } #icons { float: right; padding-right: 0; } #footer p { clear: left; }