/* ------------------------------------------------------------------- Knowsley Council stylesheet: homepage styles ------------------------------------------------------------------- */ #homepage { padding: .5em 0 0 1em; line-height: 1.5em; } #homepage #leftCol { width: 185px; padding: 1em 0 0; float: left; } #homepage #leftCol .button a { color: #cb1e4a; display: block; background: url(../../../images/template/bg-button-top.png) no-repeat top left; } #homepage #leftCol .button a span { display: block; background: url(../../../images/template/bg-button-top.png) no-repeat top left; } #homepage #leftCol .button a span span { background: url(../../../images/template/bg-button-topright.png) no-repeat top right; } #homepage #leftCol .button a span span span { background: url(../../../images/template/bg-button-btm.png) no-repeat bottom left; } #homepage #leftCol .button a span span span span { text-align: center; font-size: 1.1em; font-weight: bold; padding: .8em; background: url(../../../images/template/bg-button-btmright.png) no-repeat bottom right; } #homepage #leftCol h2 { margin: .8em 0 0; background: url(../../../images/template/home-left-h2bg-top.png) no-repeat top left; } #homepage #leftCol h2 span { cursor: pointer; display: block; background: url(../../../images/template/home-left-h2bg-topright.png) no-repeat top right; } #homepage #leftCol h2 a:active, #homepage #leftCol h2 a:focus { outline: none; } #homepage #leftCol h2 span span { display: block; background: url(../../../images/template/home-left-h2bg-btm.png) no-repeat bottom left; } #homepage #leftCol h2 span span span { background: url(../../../images/template/home-left-h2bg-btmright.png) no-repeat bottom right; } #homepage #leftCol h2 span span span span { } #homepage #leftCol h2 span span span span span { padding: 0 25px 0 0; } #homepage #leftCol h2 span span span span span a { display: block; padding: .6em 0 .6em 32px; font-size: 1.3em; } #homepage #leftCol h2.residents a { color: #e64435; } #homepage #leftCol h2.residents span span span span { background: url(../../../images/template/home-left-h2bg-arrow-reside.png) no-repeat center right; } #homepage #leftCol h2.residents span span span span span { background: url(../../../images/template/home-left-h2bg-icon-residen.png) no-repeat center left; } #homepage #leftCol h2.parents a { color: #e95d0f; } #homepage #leftCol h2.parents span span span span { background: url(../../../images/template/home-left-h2bg-arrow-parent.png) no-repeat center right; } #homepage #leftCol h2.parents span span span span span { background: url(../../../images/template/home-left-h2bg-icon-parents.png) no-repeat center left; } #homepage #leftCol h2.visitors a { color: #72a431; } #homepage #leftCol h2.visitors span span span span { background: url(../../../images/template/home-left-h2bg-arrow-visito.png) no-repeat center right; } #homepage #leftCol h2.visitors span span span span span { background: url(../../../images/template/home-left-h2bg-icon-visitor.png) no-repeat center left; } #homepage #leftCol h2.business a { color: #0492d0; } #homepage #leftCol h2.business span span span span { background: url(../../../images/template/home-left-h2bg-arrow-busine.png) no-repeat center right; } #homepage #leftCol h2.business span span span span span { background: url(../../../images/template/home-left-h2bg-icon-busines.png) no-repeat center left; } #homepage #leftCol h2.lookingforajob a { color: #005597; } #homepage #leftCol h2.lookingforajob span span span span { background: url(../../../images/template/home-left-h2bg-arrow-lookin.png) no-repeat center right; } #homepage #leftCol h2.lookingforajob span span span span span { background: url(../../../images/template/home-left-h2bg-icon-looking.png) no-repeat center left; } #homepage #leftCol h2.yourcouncil a { color: #6d3076; } #homepage #leftCol h2.yourcouncil span span span span { background: url(../../../images/template/home-left-h2bg-arrow-yourco.png) no-repeat center right; } #homepage #leftCol h2.yourcouncil span span span span span { background: url(../../../images/template/home-left-h2bg-icon-yourcou.png) no-repeat center left; } #homepage #leftCol h2 span.off span { background: url(../../../images/template/home-left-h2bg-btm-off.png) no-repeat bottom left; } #homepage #leftCol h2 span.off span span { background: url(../../../images/template/home-left-h2bg-btmright-off.png) no-repeat bottom right; } #homepage #leftCol h2 span.off span span span { background: url(../../../images/template/home-left-h2bg-arrow.png) no-repeat center right; } #homepage #leftCol h2.residents span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-res.png) no-repeat center left; } #homepage #leftCol h2.parents span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-par.png) no-repeat center left; } #homepage #leftCol h2.visitors span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-vis.png) no-repeat center left; } #homepage #leftCol h2.business span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-bus.png) no-repeat center left; } #homepage #leftCol h2.lookingforajob span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-loo.png) no-repeat center left; } #homepage #leftCol h2.yourcouncil span.off span span span span { background: url(../../../images/template/home-left-h2bg-icon-off-you.png) no-repeat center left; } #homepage #leftCol .content { padding: 10px; border: solid #ece9e6; border-width: 0 1px 1px; color: #404040; } #homepage #leftCol .content p { font-size: 1.1em; } #homepage #leftCol .content p.moreInfo { margin: .4em 0 0; text-align: right; } #homepage #leftCol .content p.moreInfo a { padding: 0 8px 0 0; background: url(../../../images/template/home-spot-viewall.png) no-repeat center right; } #homepage #leftCol p.weather { margin: 1.9em 0 0; font-size: 1.1em; } #homepage #leftCol p.weather img { float: right; } #homepage #rightCol { width: 545px; margin: 0 0 0 10px; line-height: 1.5em; float: left; } #homepage #rightCol .buttons { margin: .8em 0 0; float: right; } #homepage #rightCol .buttons li { float: left; } #homepage #rightCol .buttons li a { color: #cb1e4a; display: block; background: url(../../../images/template/bg-button-top.png) no-repeat top left; } #homepage #rightCol .buttons li a span { display: block; background: url(../../../images/template/bg-button-topright.png) no-repeat top right; } #homepage #rightCol .buttons li a span span { background: url(../../../images/template/bg-button-btm.png) no-repeat bottom left; } #homepage #rightCol .buttons li a span span span { text-align: center; font-size: 1.1em; font-weight: bold; padding: .8em; background: url(../../../images/template/bg-button-btmright.png) no-repeat bottom right; } #homepage #rightCol .buttons li.contact a { color: #fff; background: url(../../../images/template/bg-button-red-top.png) no-repeat top left; } #homepage #rightCol .buttons li.contact a span { background: url(../../../images/template/bg-button-red-topright.png) no-repeat top right; } #homepage #rightCol .buttons li.contact a span span { background: url(../../../images/template/bg-button-red-btm.png) no-repeat bottom left; } #homepage #rightCol .buttons li.contact a span span span { background: url(../../../images/template/bg-button-red-btmright.png) no-repeat bottom right; } #homepage #rightCol #h1 { margin: 1em 0 1.5em; border-bottom: 1px solid #ece9e6; } #homepage #rightCol #h1 h1 { font-weight: normal; color: #cb1e4a; background: url(../../../images/template/home-h1-bg1.png) no-repeat top left; float: left; } #homepage #rightCol #h1 h1 span { float: left; font-size: 1.8em; padding: .5em 3em .5em .8em; background: url(../../../images/template/home-h1-bg2.png) no-repeat top right; } #homepage #rightCol #mainFeature { border: solid #dadada; border-width: 1px 1px 3px; } #homepage #rightCol #mainFeature div.image { width: 332px; overflow: hidden; margin: 0 15px 0 0; float: left; } #homepage #rightCol #mainFeature div.image img { margin: 0 0 0 -94px; } #homepage #rightCol #mainFeature div.text { width: 195px; padding: 1em 0 0; float: left; } #homepage #rightCol #mainFeature div.text h2 { line-height: 1.3em; font-size: 2.2em; } #homepage #rightCol #mainFeature div.text h2 a { color: #cb1e4a; } #homepage #rightCol #mainFeature div.text h2 a strong { color: #4bbbeb; } #homepage #rightCol #mainFeature div.text p { margin: .8em 0 0; font-size: 1.1em; } #homepage #rightCol #mainFeature div.text p.button a { font-size: 1em; margin: 1em .5em 0 0; float: right; color: #cb1e4a; } #homepage #rightCol #mainFeature div.text p.button a span { float: right; background: url(../../../images/template/bg-button-top.png) no-repeat top left; } #homepage #rightCol #mainFeature div.text p.button a span span { background: url(../../../images/template/bg-button-topright.png) no-repeat top right; } #homepage #rightCol #mainFeature div.text p.button a span span span { background: url(../../../images/template/bg-button-btm.png) no-repeat bottom left; } #homepage #rightCol #mainFeature div.text p.button a span span span span { text-align: center; font-size: 1.1em; font-weight: bold; padding: .6em 1em; background: url(../../../images/template/bg-button-btmright.png) no-repeat bottom right; } #homepage #rightCol #spotlights { width: 360px; padding: 1px 0 0; float: left; } #homepage #rightCol #spotlights .left { width: 177px; float: left; } #homepage #rightCol #spotlights .right { width: 177px; float: right; } #homepage #rightCol #spotlights .spotlight { margin: 1.5em 0 0; } #homepage #rightCol #spotlights .spotlight .hdr { background: url(../../../images/template/home-spot-hdrbg.png) no-repeat bottom left; cursor: move; border-bottom: 1px solid #ece9e6; } #homepage #rightCol #spotlights .spotlight .hdr div { background: url(../../../images/template/home-spot-hdrbg2.png) no-repeat top left; border-right: 1px solid #ece9e6; } #homepage #rightCol #spotlights .spotlight .hdr h2 { padding: .4em .2em 0 .6em; font-size: 1.6em; font-weight: bold; float: left; color: #404040; } #homepage #rightCol #spotlights .spotlight .hdr p.rss { clear: both; font-size: 1.1em; padding: .3em; text-align: right; } #homepage #rightCol #spotlights .spotlight .hdr ul { background: #dedede url(../../../images/template/home-spot-hdrbg3.png) repeat-x top left; padding: .5em .4em; border-left: 1px solid #ece9e6; float: right; cursor: auto; } #homepage #rightCol #spotlights .spotlight .hdr ul li { display: inline; } #homepage #rightCol #spotlights .spotlight .hdr ul li a:active, #homepage #rightCol #spotlights .spotlight .hdr ul li a:focus { outline: none; } #homepage #rightCol #spotlights .spotlight .content { border-left: 1px solid #ece9e6; border-right: 1px solid #ece9e6; border-bottom: 3px solid #dadada; } #homepage #rightCol #spotlights .spotlight .content p.viewAll { font-size: 1.1em; padding: .2em 10px; text-align: right; } #homepage #rightCol #spotlights .spotlight .content p.viewAll a { padding: 0 8px 0 0; background: url(../../../images/template/home-spot-viewall.png) no-repeat center right; } #homepage #rightCol #spotlights .spotlight.item .hdr h2 { padding: .4em .2em .4em .6em; /*color: #cb1e4a;*/ } #homepage #rightCol #spotlights .spotlight.item .image { width: 175px; overflow: hidden; border: solid #ece9e6; border-width: 0 1px; font-size: 1px; line-height: 1; } #homepage #rightCol #spotlights .spotlight.item .image img { margin: 0 0 0 -45px; } #homepage #rightCol #spotlights .spotlight.item .content { background: #fbfaf9; padding: 1px 10px .4em; } #homepage #rightCol #spotlights .spotlight.item .content p { margin: .3em 0 0; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight.item .content p.viewAll { padding: 0; } #homepage #rightCol #spotlights .spotlight.item.item-white .content { background: #FFF !important; } #homepage #rightCol #spotlights #spotlightNews .hdr { background: #b9244a url(../../../images/template/home-spot-hdrbg-pink.png) no-repeat top left; border-bottom: 1px solid #b9244a; } #homepage #rightCol #spotlights #spotlightNews .hdr div { background: none; border-right: 1px solid #b9244a; } #homepage #rightCol #spotlights #spotlightNews .hdr h2 { color: #FFF; } #homepage #rightCol #spotlights #spotlightNews .hdr p.rss a { color: #FFF; } #homepage #rightCol #spotlights #spotlightNews .hdr ul { background: none; border-left: none; } #homepage #rightCol #spotlights .spotlight .content.news { padding: .4em 0 0; background: #f2f2f2; } #homepage #rightCol #spotlights .spotlight .content.news ul li { font-size: 1.1em; padding: .2em 10px; border-bottom: 1px solid #cfcdcb; } #homepage #rightCol #spotlights .spotlight .content.news ul li a { font-weight: bold; display: block; } #homepage #rightCol #spotlights .spotlight .content.doorstep h3 { margin: .4em 0 0; font-size: 1.4em; } #homepage #rightCol #spotlights .spotlight .content.doorstep fieldset { margin: .8em 0 0; } #homepage #rightCol #spotlights .spotlight .content.doorstep label { width: 60px; margin: .1em 0 0; float: left; text-align: right; font-weight: bold; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight .content.doorstep input { width: 85px; margin: 0 0 .5em 0; font-size: 1.1em; border: 1px solid #c4c4c4; float: right; } #homepage #rightCol #spotlights .spotlight .content.doorstep input.submit { width: auto; margin: 0; border: 0; } #homepage #rightCol #spotlights .spotlight .eventsImage { display: none; } #homepage #rightCol #spotlights .spotlight .content.events { padding: .8em 0 0 8px; } #homepage #rightCol #spotlights .spotlight .content.events .tableHeader { width: 145px; border: solid #dadada; border-width: 4px 4px 0; padding: .2em 4px .3em; float: left; } #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul li img { vertical-align: top; } #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul li.prev { width: 5%; padding: .2em 0 0; float: left; } #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul li.curr { width: 90%; float: left; text-align: center; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight .content.events .tableHeader ul li.next { width: 5%; padding: .2em 0 0; float: right; } #homepage #rightCol #spotlights .spotlight .content.events table { width: 157px; margin: 0 0 0 2px; border-collapse: collapse; background: #dadada; border: 4px solid #dadada; float: left; } #homepage #rightCol #spotlights .spotlight .content.events table thead th { background: #e2e2e2; border: 2px solid #dadada; text-align: center; font-size: 1.1em; padding: .1em 0; color: #333; font-weight: bold; } #homepage #rightCol #spotlights .spotlight .content.events table thead th span { position: absolute; top: 0; left: -9999px; } #homepage #rightCol #spotlights .spotlight .content.events table tbody td { width: 14%; background: #fff; border: 2px solid #dadada; text-align: center; font-size: 1.1em; padding: .1em 0; } #homepage #rightCol #spotlights .spotlight .content.events table tbody td a { color: #cb1e4a; } #homepage #rightCol #spotlights .spotlight .content.events ul.listing { margin: 1em 0 0; } #homepage #rightCol #spotlights .spotlight .content.events ul.listing li { padding: .3em 5px; background: #fcfbfa url(../../../images/template/home-spot-eventslibg.png) repeat-x bottom left; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight .content.events ul.listing li a { font-weight: bold; } #homepage #rightCol #spotlights .spotlight .content.events ul.listing li span { float: right; } #homepage #rightCol #spotlights .spotlight .content.jobs ul li { padding: 1em 10px; border-bottom: 1px solid #f2f0ee; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight .content.jobs ul li a { font-weight: bold; } #homepage #rightCol #spotlights .spotlight .content.customise { background: #FFF; overflow: hidden; height: 61px; } #homepage #rightCol #spotlights .spotlight .content.customise a { float: left; } #homepage #rightCol #spotlights .spotlight .content.customise a.button { color: #cb1e4a; display: inline; margin-right: 9px; margin-top: 10px; background: url(../../../images/template/bg-button-top.png) no-repeat top left; float: right; } #homepage #rightCol #spotlights .spotlight .content.customise a.button span { display: block; background: url(../../../images/template/bg-button-top.png) no-repeat top left; } #homepage #rightCol #spotlights .spotlight .content.customise a.button span span { background: url(../../../images/template/bg-button-topright.png) no-repeat top right; } #homepage #rightCol #spotlights .spotlight .content.customise a.button span span span { background: url(../../../images/template/bg-button-btm.png) no-repeat bottom left; } #homepage #rightCol #spotlights .spotlight .content.customise a.button span span span span { text-align: center; font-size: 1.1em; font-weight: bold; padding: .8em; background: url(../../../images/template/bg-button-btmright.png) no-repeat bottom right; } #homepage #rightCol #spotlights .spotlight.flickr .hdr h2 { padding: .4em .2em .4em .6em; color: #cb1e4a; } #homepage #rightCol #spotlights .spotlight.flickr .content { background: #fbfaf9; padding: 1px 0 .4em 5px; } #homepage #rightCol #spotlights .spotlight.flickr .content p { margin: .3em 0 0 5px; font-size: 1.1em; } #homepage #rightCol #spotlights .spotlight.flickr .content p.image { margin: .3em 0 0; float: left; } #homepage #rightCol #spotlights .spotlight.flickr .content p.viewAll { font-weight: bold; text-align: left; padding: 0; } #homepage #rightCol #subCol { width: 175px; margin: 1.5em 0 0 8px; float: left; } #homepage #rightCol #subCol .relatedContent .content { padding: 0 0 4px; } #homepage #rightCol #subCol p.banner { margin: 2em 0 0; text-align: center; } #footer .top { padding: 41px 0 10px 10px; } /* 1024x768 styles -------------------------------------------------------------------------- */ body.w1024 #homepage #leftCol { width: 208px; } body.w1024 #homepage #rightCol { width: 742px; } body.w1024 #homepage #rightCol #mainFeature div.image { width: 520px; } body.w1024 #homepage #rightCol #mainFeature div.image img { margin: 0; } body.w1024 #homepage #rightCol #mainFeature div.text { width: 205px; } body.w1024 #homepage #rightCol #spotlights { width: 550px; } body.w1024 #homepage #rightCol #spotlights .left { width: 270px; float: left; } body.w1024 #homepage #rightCol #spotlights .right { width: 270px; float: right; } body.w1024 #homepage #rightCol #spotlights .spotlight .hdr p.rss { margin: .5em .4em 0 0; padding: 0; clear: none; float: right; } body.w1024 #homepage #rightCol #spotlights .spotlight.item .image { width: 268px; } body.w1024 #homepage #rightCol #spotlights .spotlight.item .image img { margin: 0; } body.w1024 #homepage #rightCol #spotlights .spotlight .content.doorstep label { width: 60px; } body.w1024 #homepage #rightCol #spotlights .spotlight .content.doorstep input { width: 165px; } body.w1024 #homepage #rightCol #spotlights .spotlight .content.doorstep input.submit { width: auto; } body.w1024 #homepage #rightCol #spotlights .spotlight .eventsImage { margin: 0 10px 0 0; display: block; float: right; border: solid #dadada; border-width: 4px 4px 4px 0; } #spotlightDoorstep .contentOrange { background: #ffe4c6; border-color: #f0d5b8; padding:5px; } #homepage #rightCol #spotlights .spotlight .contentOrange { border-left: 1px solid #ece9e6; border-right: 1px solid #ece9e6; border-bottom: 3px solid #F0D5B8; } /* used by the homepage javascript -------------------------------------------------------------------------- */ #doItOnline .content { background: #ffe4c6; border-color: #f0d5b8; } #doItOnline .content ul li { background: url(../../../images/template/related-arrow-doit.png) no-repeat 2px .2em; } #doItOnline .content h3 { border-top: 1px solid #f0d5b8; } #doItOnline h3 { cursor:pointer; } #doItOnline h3.first { padding-top: 22px; } #doItOnline h3 .moreLinks { color:#009966; display:block; float:right; font-size:.8em; background:transparent url(../../../images/template/home-spot-viewall.png) no-repeat right center; padding:0 8px 0 0; } #doItOnline h3 .moreLinksHover { text-decoration:underline; } #doItOnline .off {display:none;} #doItOnline .dioEdit {background:none;display:block;} #homepage #spotlights .spotlight { width:177px; background:#fff; } body.w1024 #homepage #spotlights .spotlight { width:270px; } #doItOnline .showAllItems li { display:block !important; } body .spotlightsDragPlaceholder { border:3px dashed #dadada; } #doItOnline p.personalise, #doItOnline p.instructions { margin-top: 0; padding-top: 0.4em; } /* Editor styles -------------------------------------------------------------------------- */ .Heading1, h1 { } .Heading2, h2 { } .button { } .viewAll { } .banner { }