/* ------------------------------------------------------------------- Knowsley Council stylesheet: global styles ------------------------------------------------------------------- */ /* Body, general formatting and reusable classes etc -------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 1em; } img, embed, form, fieldset { border: 0; vertical-align: bottom; } body { font: 68.5% "Arial", sans-serif; background: #fff; color: #000; text-align: center; } input, select, textarea { font: 1em "Arial", sans-serif; vertical-align: bottom; } table { border-collapse: collapse; border-spacing: 0; } hr { width: 100%; color: #ccc; background-color: #ccc; border: 0; height: 1px; } ul, ol { list-style: none; } .hide, .skipNav { position: absolute; top: 0; left: -9999px; } .skipNav:hover, .skipNav:active, .skipNav:focus { position: absolute; top: 0; left: 0; background: #000; color: #fff; } .alignLeft { text-align: left; } .alignCenter { text-align: center; } .alignRight { text-align: right; } .floatRight { float: right; } .col2 { width: 49.9%; float: left; } .col3 { width: 33.2%; float: left; } .col4 { width: 24.9%; float: left; } .col5 { width: 19.9%; float: left; } a { color: #096; text-decoration: none; } a:hover { text-decoration: underline; } a:active, a:focus { color: #000; text-decoration: underline; } /* New background style -------------------------------------------------------------------------- */ html, body, form { height: 100%; } #wrapper { min-height: 100%; } body { background: #fff url(../../../../images/new-bg-body.jpg) top center repeat-y; } body.w1024 { background: #fff url(../../../../images/new-bg-body-1024.jpg) top center repeat-y; } /* Header links -------------------------------------------------------------------------- */ #headerLinks { width: 720px; margin: 0 auto -15px; padding: 8px 20px 0; position: absolute; left: 50%; font-size: 1.1em; color: #666; line-height: 1.5em; text-align: right; margin-left: -380px; } #headerLinks ul { display: inline; } #headerLinks ul li { display: inline; } #headerLinks ul li.textSize { padding: 0 0 0 1em; } #headerLinks ul li.textSize ul li { text-transform: uppercase; } #headerLinks ul li.textSize ul li.large { font-size: 1.2em; } #headerLinks ul li.textSize ul li.xlarge { font-size: 1.4em; } #headerLinks ul li.textSize ul li span { position: absolute; top: 0; left: -9999px; } #headerLinks ul li.changeColour { padding: 0 1em; } #headerLinks ul li.changeColour ul li img { vertical-align: middle; } /* Main wrapper and header -------------------------------------------------------------------------- */ #wrapper { /*background: url(/images/bg-wrapper.png) repeat-y top center;*/ background: url(../../../../images/new-bg-wrapper.jpg) top center no-repeat; } #wrapper2 { padding: 22px 0 0 0; /*background: url(/images/template/bg-wrapper2.png) no-repeat top center;*/ } #wrapper3 { width: 760px; margin: 0 auto; background: #fff; text-align: left; } #header { padding: 20px 10px; } #header ul#logos li.knowsley { width: 505px; height: 80px; background: url(../../../../images/template/bg-logo.png) no-repeat bottom right; float: left; } #pgResidents #header ul#logos li.knowsley { width: 557px; background: url(../../../../images/template/bg-logo-residents.png) no-repeat bottom right; } #pgFamilies #header ul#logos li.knowsley { width: 500px; background: url(../../../../images/template/bg-logo-parents.png) no-repeat bottom right; } #header ul#logos li.council { float: right; } #header #servicesAZ { background: #fbfaf9 url(../../../../images/template/bg-servicesaz-top.png) repeat-x top left; font-size: 1.1em; color: #555454; float: left; } #header #servicesAZ .servicesAZ2 { background: url(../../../../images/template/bg-servicesaz-bottom.png) repeat-x bottom left; } #header #servicesAZ .servicesAZ3 { background: url(../../../../images/template/bg-servicesaz-left.png) repeat-y top left; } #header #servicesAZ .servicesAZ4 { background: url(../../../../images/template/bg-servicesaz-right.png) repeat-y top right; } #header #servicesAZ .servicesAZ5 { background: url(../../../../images/template/bg-servicesaz-topleft.png) no-repeat top left; } #header #servicesAZ .servicesAZ6 { background: url(../../../../images/template/bg-servicesaz-topright.png) no-repeat top right; } #header #servicesAZ .servicesAZ7 { background: url(../../../../images/template/bg-servicesaz-bottomright.png) no-repeat bottom right; } #header #servicesAZ .servicesAZ8 { padding: .8em 1.2em; background: url(../../../../images/template/bg-servicesaz-bottomleft.png) no-repeat bottom left; } #header #servicesAZ strong.hdr { float: left; font-weight: normal; } #header #servicesAZ strong.hdr span { position: absolute; top: 0; left: -9999px; } #header #servicesAZ ul { float: left; } #header #servicesAZ ul li { float: left; } #header #servicesAZ ul li a { float: left; display: block; padding: 0 .4em; color: #c92f3a; text-decoration: underline; } #header #servicesAZ ul li a:hover { color: #555454; text-decoration: none; } #header #servicesAZ ul li a:active, #header #servicesAZ ul li a:focus { color: #000; text-decoration: none; } #header #servicesAZ ul li strong.on { float: left; display: block; padding: 0 .4em; } #header #siteSearch fieldset { padding: .2em 0 0; float: right; font-size: 1.1em; text-align: right; } #header #siteSearch fieldset input { width: 120px; border: 1px solid #ebe8e5; vertical-align: middle; } #header #siteSearch fieldset input.submit { width: auto; border: 0; } #header #siteSearch fieldset p { margin: .2em 0 0; } /* Main menu -------------------------------------------------------------------------- */ #mainMenu { padding: 0 10px; line-height: 3em; } #mainMenu ul { border-left: 1px solid #cdcdcd; background: url(../../../../images/template/bg-mainmenu.png) repeat-x bottom left; } #mainMenu ul li { padding: 0 1px; background: #fff; border-right: 1px solid #cdcdcd; float: left; } #mainMenu ul li a { white-space: nowrap; background: url(../../../../images/template/bg-mainmenu.png) repeat-x bottom left; padding: 0 0 8px; float: left; } #mainMenu ul li a span { font-weight: bold; padding: 0 .7em; font-size: 1.2em; float: left; } #mainMenu ul li.home a { color: #ca003f; } #mainMenu ul li.mm0 a { color: #e64435; } #mainMenu ul li.mm1 a { color: #e95d0f; } #mainMenu ul li.mm2 a { color: #72a431; } #mainMenu ul li.mm3 a { color: #0492d0; } #mainMenu ul li.mm4 a { color: #005597; } #mainMenu ul li.mm5 a { color: #6d3076; } #mainMenu ul li.customise { background: url(../../../../images/template/bg-mainmenu-customise.png) repeat-x; } #mainMenu ul li.customise a { color: #666; } #mainMenu ul li.customise a span { font-weight: normal; padding: 0 .8em; font-size: 1.1em; } #mainMenu ul li.home a.on { color: #fff; background: #ca003f url(../../../../images/template/bg-mainmenu-on-1.png) no-repeat bottom center; } #mainMenu ul li.mm0 a.on { color: #fff; background: #e64435 url(../../../../images/template/bg-mainmenu-on-2.png) no-repeat bottom center; } #mainMenu ul li.mm1 a.on { color: #fff; background: #e95d0f url(../../../../images/template/bg-mainmenu-on-3.png) no-repeat bottom center; } #mainMenu ul li.mm2 a.on { color: #fff; background: #72a431 url(../../../../images/template/bg-mainmenu-on-4.png) no-repeat bottom center; } #mainMenu ul li.mm3 a.on { color: #fff; background: #0492d0 url(../../../../images/template/bg-mainmenu-on-5.png) no-repeat bottom center; } #mainMenu ul li.mm4 a.on { color: #fff; background: #005597 url(../../../../images/template/bg-mainmenu-on-6.png) no-repeat bottom center; } #mainMenu ul li.mm5 a.on { color: #fff; background: #6d3076 url(../../../../images/template/bg-mainmenu-on-7.png) no-repeat bottom center; } /* Related content bars -------------------------------------------------------------------------- */ .relatedContent h2 { font-size: 1.6em; padding: .3em 10px; color: #fff; background: #ff8700 url(../../../../images/template/related-corner-home.png) no-repeat top left; position: relative; } #pgParents .relatedContent h2 { background: #e95d0f url(../../../../images/template/related-corner-parents.png) no-repeat top left; } #pgResidents .relatedContent h2 { background: #e64435 url(../../../../images/template/related-corner-residents.png) no-repeat top left; } #pgFamilies .relatedContent h2 { background: #e95d0f url(../../../../images/template/related-corner-families.png) no-repeat top left; } #pgThings .relatedContent h2 { background: #72a431 url(../../../../images/template/related-corner-things.png) no-repeat top left; } #pgBusiness .relatedContent h2 { background: #0492d0 url(../../../../images/template/related-corner-business.png) no-repeat top left; } #pgJobs .relatedContent h2 { background: #005597 url(../../../../images/template/related-corner-jobs.png) no-repeat top left; } #pgYourCouncil .relatedContent h2 { background: #6d3076 url(../../../../images/template/related-corner-yourcouncil.png) no-repeat top left; } .relatedContent .content { margin: 0 0 1em; padding: 4px 0; background: #fffbf7; border: solid #ece9e6; border-width: 0 1px; border-bottom: 3px solid #ddd9d4; } .relatedContent .content h3 { font-size: 1.4em; font-weight: normal; padding: .4em 5px 0; color: #333; border-top: 1px solid #ece9e6; } .relatedContent .content ul { font-size: 1.1em; margin: .4em 0; padding: 0 10px; } .relatedContent .content ul li { padding: 0 0 .2em; background: url(../../../../images/template/related-arrow.png) no-repeat 2px .2em; } .relatedContent .content ul li a { display: block; padding: 0 0 0 20px; } .relatedContent .content p { font-size: 1.1em; margin: .4em 0; padding: 0 10px; } .relatedContent p.viewAll { text-align: right; } .relatedContent p.editList { margin: 0 0 -16px; position: relative; text-align: center; } .relatedContent p.editList a { width: 12em; margin: 0 auto; display: block; color: #cb1e4a; background: url(../../../../images/template/home-editlist-lightorange-bg1.png) no-repeat top left; } .relatedContent p.editList a span { display: block; background: url(../../../../images/template/home-editlist-lightorange-bg2.png) no-repeat top right; } .relatedContent p.editList a span span { display: block; background: url(../../../../images/template/home-editlist-lightorange-bg3.png) no-repeat bottom left; } .relatedContent p.editList a span span span { display: block; background: url(../../../../images/template/home-editlist-lightorange-bg4.png) no-repeat bottom right; font-size: 1.1em; font-weight: bold; padding: 9px 0; } .relatedContent h2 p.editList { margin: 0; width: 3.4em; position: absolute; top: .1em; right: 0; } .relatedContent h2 p.editList a { font-size: .7em; width: auto; margin: 0; background: url(../../../../images/template/home-editlist-orange-bg1.png) no-repeat top left; } .relatedContent h2 p.editList a span { background: url(../../../../images/template/home-editlist-orange-bg2.png) no-repeat top right; } .relatedContent h2 p.editList a span span { background: url(../../../../images/template/home-editlist-orange-bg3.png) no-repeat bottom left; } .relatedContent h2 p.editList a span span span { background: url(../../../../images/template/home-editlist-orange-bg4.png) no-repeat bottom right; font-size: 1em; padding: 3px 0; } #subCol #BBCNewsCol { margin: 1.5em 0 0 3px; } /* Footer -------------------------------------------------------------------------- */ #footer .top { padding: 73px 0 10px 10px; background: url(../../../../images/template/bg-footer.png) no-repeat bottom right; border-bottom: 1px solid #d9d9d9; } #footer .btm { padding: 1em 10px; line-height: 1.5em; color: #333; } #footer .btm ul li { font-size: 1.1em; display: inline; } #footer .btm p { font-size: 1.1em; } #footer .btm a { color: #333; } #footer .btm a:hover, #footer .btm a:active, #footer .btm a:focus { text-decoration: underline; } /* 1024x768 styles -------------------------------------------------------------------------- */ body.w1024 #headerLinks { width: 940px; margin-left: -490px; } body.w1024 #wrapper { /*background: url(/images/template/bg-wrapper-1024.png) repeat-y top center;*/ background: url(../../../../images/new-bg-wrapper-1024.jpg) top center no-repeat; } body.w1024 #wrapper2 { /*background: url(/images/template/bg-wrapper2-1024.png) no-repeat top center;*/ } body.w1024 #wrapper3 { width: 980px; } body.w1024 #header ul#logos li.knowsley { width: 545px; } body.w1024 #header #servicesAZ strong.hdr span { position: static; top: 0; left: 0; } body.w1024 #mainMenu ul li a span { padding: 0 .8em; } /* IE Mac fixes -------------------------------------------------------------------------- */ /*\*//*/ .hide, .skipNav { display: none; visibility: hidden; } /**/ /* Clear fixes -------------------------------------------------------------------------- */ .clearfix:after, #header:after, #header ul#logos:after, #header #servicesAZ .servicesAZ8:after, #mainMenu ul:after, #pageTools:after, #pageTools ul li.contact:after, #internal:after, #internal .genForm div:after, #internal #landingBoxes .row:after, #content .eventsListing ul li:after, #content #sports .left .holder .row:after, #homepage:after, #homepage #rightCol #h1:after, #homepage #rightCol #mainFeature:after, #homepage #rightCol #spotlights .spotlight .hdr div:after, #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul:after, #homepage #rightCol #spotlights .spotlight .content.events ul.listing li:after, #homepage #rightCol #spotlights .spotlight.flickr .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix, #header, #header ul#logos, #header #servicesAZ .servicesAZ8, #mainMenu ul, #pageTools, #pageTools ul li.contact, #internal, #internal .genForm div, #internal #landingBoxes .row, #content .eventsListing ul li, #content #sports .left .holder .row, #homepage, #homepage #rightCol #h1, #homepage #rightCol #mainFeature, #homepage #rightCol #spotlights .spotlight .hdr div, #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul, #homepage #rightCol #spotlights .spotlight .content.events ul.listing li, #homepage #rightCol #spotlights .spotlight.flickr .content { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix, * html #header, * html #header ul#logos, * html #header #servicesAZ .servicesAZ8, * html #mainMenu ul, * html #pageTools, * html #pageTools ul li.contact, * html #internal, * html #internal .genForm div, * html #internal #landingBoxes .row, * html #content .eventsListing ul li, * html #content #sports .left .holder .row, * html #homepage, * html #homepage #rightCol #h1, * html #homepage #rightCol #mainFeature, * html #homepage #rightCol #spotlights .spotlight .hdr div, * html #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul, * html #homepage #rightCol #spotlights .spotlight .content.events ul.listing li, * html #homepage #rightCol #spotlights .spotlight.flickr .content { height: 1%; } .clearfix, #header, #header ul#logos, #header #servicesAZ .servicesAZ8, #mainMenu ul, #pageTools, #pageTools ul li.contact, #internal, #internal .genForm div, #internal #landingBoxes .row, #content .eventsListing ul li, #content #sports .left .holder .row, #homepage, #homepage #rightCol #h1, #homepage #rightCol #mainFeature, #homepage #rightCol #spotlights .spotlight .hdr div, #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul, #homepage #rightCol #spotlights .spotlight .content.events ul.listing li, #homepage #rightCol #spotlights .spotlight.flickr .content { display: block; } /* End hide from IE-mac */