/************************************************ CONTEXT: Boilerplate Template SITE: Moorfields School FILE: layout.css DESCRIPTION: file defines base structure - The layout of the site ************************************************/ /* Highest Level */ html { padding:0; margin: 0; margin-bottom: 40px; background: #F3EDE8 url(../img/bg_layout/page_bg_repeat.png) 60px 110px;} body { padding:0; margin: 0; margin-top:-15px; margin-bottom: 40px; background: url(../img/bg_layout/page_bg.png) top center repeat-x; } div#page { width: 966px; margin: 0 auto; position: relative; } /* Head */ div#head { width: 966px; padding: 0 0 55px 0; margin: 0 auto; background: url(../img/bg_layout/img-bg-page-01.png) bottom left no-repeat; position: relative; z-index: 2; } div#header { width: 966px; margin-top: 15px; padding: 0; overflow: hidden; background: url(../img/bg_layout/img-bg-header-01.jpg) 0 0 no-repeat; } div#header a.email {display: block; width: 225px; height: 22px; font-size:0; border: none; text-decoration: none; position: absolute; top: 50px; left: 630px; } /* Template Area */ div#template { width: 966px; background: url(../img/bg_layout/img-bg-template-01.png) 0 0 repeat-y; margin: 0 auto; padding: 0 0 20px 0; overflow: hidden; } div#template.home { width: 936px; background: url(../img/bg_layout/homepage_bg.png) 0 0 repeat-y; margin: 0 auto; padding: 0; overflow: hidden; padding: 20px 10px 20px 20px;} div#template.home h2 {display:none;} /* Basic 2 Column Layout */ .two-clm div#primary { float: right; width: 705px; overflow: hidden; min-height: 400px; padding: 20px 0 0 0; margin-right:15px; display:inline; position: relative;} .two-clm div#secondary { overflow: hidden; float: left; width: 230px; position: relative; z-index: 10;} .two-clm div#primary img.border { border: 1px solid #8db77b;padding: 1px;} .two-clm div#primary img.photo { margin-left:5px; margin-top: 14px; margin-right: 18px;} .two-clm div#primary a img, .two-clm div#primary a:hover img { border: none; padding:0;} #home-gallery { height: 620px;position: relative; width:608px; z-index: 10; background: url(../img/home_gallery/gallery_bg.png) no-repeat 0 0;} #animated-gallery { height: 182px; width: 645px; position: absolute; bottom: 20px; left: 12px; display:inline; margin:0; padding:0;} #slideshow.home {margin:0; position:relative;height:411px;width:588px;} #slideshow.home IMG {position:absolute;top:12px;left:10px;z-index:8;} #slideshow.home IMG.active {z-index:10;} #slideshow.home IMG.last-active {z-index:9;} #slideshow.page {background: url(../img/bg_content/slideshow_bg.png) no-repeat 0 0; margin:10px 0 20px 0; position:relative;height:395px;width:670px;} #slideshow.page IMG {position:absolute;top:11px;left:11px;z-index:8;} #slideshow.page IMG.active {z-index:10;} #slideshow.page IMG.last-active {z-index:9;} #home-photos {float:left; width: 596px; margin-top: 14px; margin-left: 10px;} #home-photos li {float:left; margin-right:2px; margin-bottom: 0;} #home-photos li a, #home-photos li a:hover {border:none;} #primary .promo, #template.home .promo, #template.home .promo-home {border:none; text-decoration:none; margin:0; padding:0; display: block;} /* Music Player */ #music-player {margin: 0 10px 5px 0;} /* Homepage styles */ #left-block {width: 608px; float: left; margin:0; padding:0; display:inline;} #about-moorfield {float: left; display:inline; margin-bottom: 20px;} #about-moorfield a {display:block; margin:0; padding:0;} #about-moorfield img {display:block; } #curriculum {float: right; display:inline; margin-bottom: 20px; margin-right: 0x;} #curriculum a {display:block; margin:0; padding:0;} #curriculum img {display:block; } .come-by-bus {clear:both; float:left; display: block;} .inspection-report {float:right; display: block;} .leftbox {clear:both; float:left; display: block; margin-top: 5px;} .rightbox {float:right; display: block; margin-top: 5px;} #template.home .weekly-update.promo, #template.home .sport-at-moorfield.promo, #template.home .music-at-moorfield.promo, #template.home .why-moorfield.promo { margin-bottom: 10px; display:block;} #template.home #right-block .twitter {clear:both; float:left; display: block; margin-top: 10px;} #template.home #right-block .facebook {float:right; display: block; margin-top: 15px;} /* Foundation styles */ #primary a.gallery-button {margin-top: -10px; display: block;} /* About Us Styles */ #primary #meet-the-staff {float: left; display:inline; margin-bottom: 10px;} #primary #featured-departments {float: right; display:inline; margin-bottom: 10px; margin-right: 18px;} #primary #featured-departments a {display:block; margin:0; padding:0;} #primary #featured-departments img {display:block;} #wrap-around-care.promo, #wrap-around-care.promo:hover {clear: both; display:block; margin: 10px 0;} /* Curriculum */ #core-subjects {float: left; display:inline; margin-bottom: 10px; margin-top: -5px; margin-left: 7px; } #core-subjects a {display:block; margin:0; padding:0;} #core-subjects img {display:block;} #sport.promo {float: left; display:block; margin-bottom: 10px; margin-left:5px;} #creative-arts {clear:both; float: left; display:block; margin-bottom: 10px;} #clubs {float: left; display:inline; margin-bottom: 10px; margin-left: 8px;} #clubs a {display:block; margin:0; padding:0;} #clubs img {display:block;} /* Parents page */ #right-block {display: inline; float:right; width: 293px; margin: 0 10px 0 5px;} #right-block .moorfield-times {display: block; margin-top: 4px} #right-block .weekly-update {display: block; margin: 10px 0;} #quick-links {display:block;} #quick-links a {display:block; margin:0; padding:0;} #quick-links img {display:block;} /* Staff */ div#primary div.staff img {border: none !important; padding: 0; margin: 0;} #staff-photos, #staff-photos li {margin: 0; padding: 0; list-style: none;} #staff-photos {float:left;width:687px;display:inline;} #staff-photos li {float: left; display: inline;width: 229px;} #governors {float:left; width:710px; margin-top: 20px; padding-left: 20px; display:inline; background: url(../img/bg_content/goveners_bg.png) repeat-y 10px 0;} #governors ul, #governors li {margin:0; padding:0; list-style:none;} #governors ul {float:left;display:inline; width: 200px; height: 100px; padding-right: 20px; margin-right: 10px;} #governors ul.long {height: 150px;} #governors ul li {display: block; font-size: 85%;} #governors ul li.prev {background: url(../img/common/bullets/dash_bullet.png) no-repeat 0 8px; padding-left: 10px;} #governors ul li strong {color:#2d2d2d; font-variant: small-caps; font: 116% Georgia, Times New Roman, Times, serif; background:none; margin:0; padding:0;} #governors ul li.role {color: #ba2b2d; background:none; margin:0 0 10px 0; padding:0;} #governors2 {float:left; width:710px; margin-top: 20px; padding-left: 20px; display:inline; } #governors2 ul, #governors2 li {margin:0; padding:0; list-style:none;} #governors2 ul {float:left;display:inline; width: 300px; padding-right: 20px; margin-right: 10px;} #governors2 ul.long {height: 150px;} #governors2 ul li {display: block; font-size: 95%;} #governors2 ul li.prev {font-variant: small-caps;font: 116% Georgia, Times New Roman, Times, serif; margin:0; padding:0; list-style:none;} #governors2 ul li strong {color:#2d2d2d; font-variant: small-caps; font: 150% Georgia, Times New Roman, Times, serif; background:none; margin:0; padding:0;} #governors2 ul li.role {color: #ba2b2d; background:none; margin:0 0 10px 0; padding:0;} /* Fees */ a.nursery-fees.promo { margin-bottom: 20px;} /* Terms */ h3.hidden {display:none;} #autumn-term {background: url(../img/content/autumn.png) no-repeat 0 0; height: 202px; width: 652px;} #spring-term {background: url(../img/content/spring.png) no-repeat 0 0; height: 188px; width: 652px;} #summer-term {background: url(../img/content/summer.png) no-repeat 0 0; height: 218px; width: 652px;} #next-autumn-term {background: url(../img/content/autumn.png) no-repeat 0 0; height: 202px; width: 652px;} #next-autumn-term {background: url(../img/content/next-autumn.png) no-repeat 0 0; height: 202px; width: 652px;} #next-spring-term {background: url(../img/content/next-spring.png) no-repeat 0 0; height: 188px; width: 652px;} #next-summer-term {background: url(../img/content/next-summer.png) no-repeat 0 0; height: 222px; width: 652px;} #autumn-term-2011 {background: url(../img/content/autumn-term-2011.png) no-repeat 0 0; height: 208px; width: 652px;} #spring-term-2012 {background: url(../img/content/spring-term-2012.png) no-repeat 0 0; height: 200px; width: 652px;} #summer-term-2012 {background: url(../img/content/summer-term-2012.png) no-repeat 0 0; height: 222px; width: 652px;} #autumn-term-2012 {background: url(../img/content/autumn12.png) no-repeat 0 0; height: 208px; width: 652px;} #spring-term-2013 {background: url(../img/content/spring13.png) no-repeat 0 0; height: 195px; width: 652px;} #summer-term-2013 {background: url(../img/content/summer13.png) no-repeat 0 0; height: 222px; width: 652px;} #autumn-term-2013 {background: url(../img/content/autumn13.png) no-repeat 0 0; height: 208px; width: 652px;} #spring-term-2014 {background: url(../img/content/spring14.png) no-repeat 0 0; height: 200px; width: 652px;} #summer-term-2014 {background: url(../img/content/summer14.png) no-repeat 0 0; height: 222px; width: 652px;} #autumn-term-2014 {background: url(../img/content/autumn14.png) no-repeat 0 0; height: 208px; width: 652px;} #spring-term-2015 {background: url(../img/content/spring15.png) no-repeat 0 0; height: 200px; width: 652px;} #summer-term-2015 {background: url(../img/content/summer15.png) no-repeat 0 0; height: 222px; width: 652px;} #autumn-term, #autumn-term-2011, #autumn-term-2012, #autumn-term-2013, #autumn-term-2014, #spring-term, #spring-term-2012, #spring-term-2013, #spring-term-2014, #spring-term-2015, #summer-term, #summer-term-2012, #summer-term-2013, #summer-term-2014, #summer-term-2015, #next-autumn-term, #next-spring-term, #next-summer-term {float:left; margin-bottom: 20px; padding: 50px 0 0 30px; line-height: 28px;} #autumn-term-2011 dt {float:left; width: 150px; color: #562b00; } #spring-term-2012 dt {float:left; width: 150px; color: #28540d;} #summer-term-2012 dt {float:left; width: 150px; color: #562b00;} #autumn-term-2012 dt {float:left; width: 150px; color: #562b00; } #spring-term-2013 dt {float:left; width: 150px; color: #28540d;} #summer-term-2013 dt {float:left; width: 150px; color: #562b00;} #autumn-term-2013 dt {float:left; width: 150px; color: #562b00; } #spring-term-2014 dt {float:left; width: 150px; color: #28540d;} #summer-term-2014 dt {float:left; width: 150px; color: #562b00;} #autumn-term-2014 dt {float:left; width: 150px; color: #562b00; } #spring-term-2015 dt {float:left; width: 150px; color: #28540d;} #summer-term-2015 dt {float:left; width: 150px; color: #562b00;} #autumn-term dt, #spring-term dt, #summer-term dt, #next-autumn-term dt, #next-spring-term dt, #next-summer-term dt {float:left; width: 150px;} #autumn-term dt, #next-autumn-term dt {color: #562b00;} #spring-term dt, #next-spring-term dt {color: #28540d;} #summer-term dt, #next-summer-term dt {color: #562b00;} #autumn-term dd, #autumn-term-2011 dd, #spring-term dd, #spring-term-2012 dd, #summer-term dd, #summer-term-2012 dd, #autumn-term dd, #autumn-term-2012 dd, #spring-term dd, #spring-term-2013 dd, #summer-term dd, #summer-term-2013 dd, #autumn-term dd, #autumn-term-2013 dd, #spring-term dd, #spring-term-2014 dd, #summer-term dd, #summer-term-2014 dd, #autumn-term dd, #autumn-term-2014 dd, #spring-term dd, #spring-term-2015 dd, #summer-term dd, #summer-term-2015 dd, #next-autumn-term dd, #next-spring-term dd, #next-summer-term dd {float:left; width: 500px;} #autumn-term dd, #next-autumn-term dd, #autumn-term-2011 dd, #autumn-term-2012 dd, #autumn-term-2013 dd, #autumn-term-2014 dd {color: #944901;} #spring-term dd, #next-spring-term dd, #spring-term-2012 dd, #spring-term-2013 dd, #spring-term-2014 dd, #spring-term-2015 dd {color: #62943b;} #summer-term dd, #next-summer-term dd, #summer-term-2012 dd, #summer-term-2013 dd, #summer-term-2014 dd, #summer-term-2015 dd {color: #944901;} /* Moorfield Times */ .past-issues { margin: 10px 0 0 10px;} .past-issues li { line-height: 24px;} /* Extra Curricular Clubs */ .clubs-list { clear: both;float: left; margin:0 20px;} .clubs-list li {float:left; width: 220px; margin-bottom: 15px;} /* Lunch Menu */ #lunch-menu { text-align:center; border: 5px double #B30F0D; margin: 20px 50px; padding-bottom: 20px;} #lunch-menu h4 { color: #b30f0d;} #lunch-menu p { font-style: italic;} #lunch-menu .todays-menu { background: url(../img/bg_content/menu_divider.png) no-repeat 220px bottom; padding-bottom: 20px; margin-bottom: 20px;} /* Basic 3 Column Layout */ /* Be aware that a 3 col layout requires a 'wrapper' around '#primary' and an additional '#tertiary' block */ div#template.three-clm div.wrapper { float: left; width: 100%; } div#template.three-clm div#primary { margin: 0 260px;} div#template.three-clm div.sec-wrap { float:left; width:260px; margin-left: -966px; } div#template.three-clm div#tertiary { float:left; width:210px; margin-left: -230px; } /* Foot / Footer */ div#foot { width:966px; margin: 0 auto; padding: 0 0 40px 0; background: url(../img/bg_layout/img-bg-foot-bottom-01.png) bottom left no-repeat; position: relative; z-index: 1; } div#foot div.body { width:946px; height: 145px; margin-left: 10px; background: url(../img/bg_layout/img-bg-foot-body-01.jpg) 0 0 no-repeat;} div#foot div.left { float: left; background: url(../img/bg_layout/img-bg-foot-head-01.png) 0 0 no-repeat; width: 10px; height: 180px;} div#foot div.right { float: right; background: url(../img/bg_layout/img-bg-foot-right-01.png) 0 0 no-repeat; width: 10px; height: 180px;} div#footer { width: 966px; margin: 0 auto; font-size: 80%; } div#footer p { text-align: right;} div#foot .contact-details {float:right; display: block; height: 30px; line-height: 30px; margin:0; padding-right:10px; color:#fff;} div#foot .contact-details span {padding-left:10px;} div#foot .contact-details a, div#foot .contact-details a:link, div#foot .contact-details a:visited, div#foot .contact-details a:hover, div#foot .contact-details a:active {color:#F8F8F8; text-decoration:none; border-bottom:none;} /* Flourishes / Ribbons */ div.top-ribbon-left, div.top-ribbon-right, div.btm-ribbon-left, div.btm-ribbon-right, div.rays { position: absolute; z-index: 1; } div.rays { background: url(../img/bg_layout/img-bg-rays-01.png) 0 0 no-repeat; width: 500px; height: 500px; left: -345px; top: -48px; } div.top-ribbon-left { background: url(../img/bg_layout/img-bg-ribbons-sprite-01.png) top right no-repeat; width: 100px; height: 100px; left: -98px; top: 115px; } div.top-ribbon-right { background: url(../img/bg_layout/img-bg-ribbons-sprite-01.png) 0 -100px no-repeat; width: 110px; height: 100px; right: -108px; top: 115px; } div.btm-ribbon-left { background: url(../img/bg_layout/img-bg-ribbons-sprite-01.png) right -204px no-repeat; width: 100px; height: 100px; left: -98px; bottom: 89px; z-index: 3; } div.btm-ribbon-right { background: url(../img/bg_layout/img-bg-ribbons-sprite-01.png) 0 -306px no-repeat; width: 110px; height: 100px; right: -108px; bottom: 88px; z-index: 3; } /* Links */ #links {float: left; display:inline; margin-bottom: 10px; margin-top: -5px; margin-left: 7px; } #links a:link {text-decoration:none} #links a:visited {text-decoration:none} #links a:hover {text-decoration:none} #links a:active {text-decoration:none} #links img {display:block;}