/* ---------------------------------------------------------------- workforceinitiative.co.uk - Site Specific Styles darrell.wilson@bigredcreative.com - 22/10/2008 -------------------------------------------------------------------*/ /* ------------------- EE Search Marker plugin required style -----------------*/ .marker { background-color: #ff0; } li.search_results {margin-bottom: 1em;} /* ------------------- Gen Page Setup -----------------*/ body {background: #999; margin: 8px 0 0 0;} p {margin: 0 0 1em;} #clearfix {clear: both;} /* ------------------- Main Structural Elements -----------------*/ div#wrapper {width: 960px; margin: 0 auto; position: relative; background-color: #fff; padding-top: 23px;} div#col_left {width: 200px; float: left; margin: 0; padding: 0;} div#col_main {width: 460px; float: left; margin: 0 15px;} div#col_main h2 {margin: 35px 0 5px 0; font-size: 1.8em;} div#col_main h4 {margin: 35px 0 15px 0; font-size: 1.2em;} div#col_right {width: 240px; float: right; margin-right: 20px; background: #fff;} div#col_right ul {margin: 10px 20px 10px 10px; border-bottom: 1px solid #999;} div#col_right ul li {list-style-type: square; margin-bottom: 12px; line-height: 1.2; padding-left: 0; margin-left: 15px;} div#col_right a:link, div#col_right a:visited, div#col_right a:active {font-size: 1.1em; color: #333; text-decoration: none;} div#col_right a:hover {text-decoration: underline; color: #e62c7d;} div#col_right img {margin-top: 12px; border: 1px solid #ccc;} div#footer {width: 960px; margin: 0 auto; padding-bottom: 15px;} #footer p {margin: 5px 10px; color: #fff; font-size: .9em;} #footer p a:link, #footer p a:visited, #footer p a:active {color: #fff;} #footer p a:hover {text-decoration: underline;} #footer p#copyright {float: left; display:inline;} #footer p#credit {float: right; margin-right: 20px; display:inline;} /* ------------------- Sitewide Page Elements -----------------*/ h1#name {background: transparent url(http://workforceinitiative.co.uk/images/interface/logos.jpg) no-repeat top left; height: 217px; width: 160px; margin: 0 auto; padding: 0; text-indent: -5000px;} div#search, div#subscribe {background-color: #cccccc; height: auto;} div#subscribe {padding-bottom: 4px;} #search #submit {background-color: #e41770; height: 20px; width: 33px; border: none; color: #fff; margin: 0; padding: 0; position: relative; top: 2px;} #search label {display: none;} #search fieldset {padding: 0; margin: 0; border: none;} #search #keywords {margin: 12px 3px 10px 10px; width: 175px; color: #565656;} #subscribe fieldset {padding: 10px; margin: 0 11px 10px 11px; border: none; background-color: #f3f3f3;} #subscribe label {display: block; color: #90107B;} #subscribe #email {margin: 3px 0 4px 0; width: 191px; color: #565656;} #subscribeSubmit {background-color: #e41770; height: 20px; width: 54px; border: none; color: #fff; margin: 0; padding: 0; position: relative; top: 2px;} /* ------------------- Home Page -----------------*/ #home h1 {width: 150px;} #home #col_main img {padding-bottom: 18px;} #home #col_main p {font-size: 1em; font-weight: bold; margin: 1em 0; color: #4F4F4F; text-align: justify;} #home div#col_right {width: 250px; float: left; margin-right: 20px; background-color: #fff;} div#feature {margin-top: 5px; width: 460px; float: left; background: #fff url(images/interface/bg/featBoxBG.jpg) left top repeat-x; } div#feature h3 {font-family: Georgia, serif; font-size: 1.6em; margin: 0 15px; color: #90107B; border-bottom: 1px solid #999999; padding: 10px 0 8px 0; font-weight: normal;} div#feature ul#featList {padding: 0; margin: 10px 15px 5px 15px; line-height: 1.2; font-size: 1.1em; list-style-type: none;} div#feature ul#featList li {padding: 5px 0;} #home #col_main div#feature_1 p, #home #col_main div#feature_2 p {color: #575757; margin: 10px; line-height: 1.3;} /* div#latest_items {width: 250px; margin-top: 12px; background: #FFFFFF url(images/interface/bg/mainContentBG.jpg) bottom left repeat-x; border: 1px solid #bbb;} */ div#latest_items {width: 250px; margin-top: 23px; background: #FFFFFF;} #latest_items h3 {font-family: Georgia, serif; font-size: 1.6em; margin: 15px 10px; color: #333; border-bottom: 1px solid #999999; padding-bottom: 5px; font-weight: normal;} .newsDate {font-size: .9em;color: #0F0E0E; font-style: italic;} a#tell-link {display: block; color: #43767D;} div#tellsomeone {width: 189px; margin-left:11px; border-top: 1px solid #43767D; border-bottom: 1px solid #43767D; padding: 5px 0 10px 0; margin-bottom: 10px; margin-top: 10px;} div#tellsomeone p {color: #43767D; padding: 0 10px; font-family: arial; font-size: 12px; margin-bottom: 0;} #feedback h3 {background: #fff url(images/interface/bg/FeedbackBoxBgTop.gif) top left no-repeat; font-family: Georgia, serif; font-size: 1.6em; font-weight: normal; color: #90107B; margin: 0 0 10px 0; padding: 12px;} #feedback {width: 189px; background: #fff url(images/interface/bg/FeedbackBoxBgBot.gif) bottom left no-repeat; margin-left: 11px; padding-bottom: 12px;} #feedback p {padding: 0 10px; margin-bottom: 5px;} /* ------------------- Contact Page -----------------*/ #freeform {width: 300px; margin: 0 auto; padding: 0;} #freeform fieldset {margin: 0; padding: 0; border: none;} #freeform fieldset ol {padding: 0; margin: 0; list-style-type: none;} #freeform fieldset li {padding: 0;} #freeform fieldset.submit, #freeform input.submit {border-style: none; width: auto; background-color: #92107C; color: #fff; float: left; padding: 0; margin: 0;} #freeform label { font-family: Arial, Helvetica, sans-serif; display: block; text-transform: uppercase; font-weight: bold; font-size: .9em; padding: .5em 0 0 0; color: #92107C;} #freeform textarea { height: 60px; padding: 0;} #freeform input, #freeform textarea {border: 1px solid #aaa; background-color: #fff; color: #000; margin: 0 0 3px 0; padding: 3px; width: 300px; cursor: pointer; font-size: .9em;} #contact #freeform {margin: 0; padding: 0;} #contact #freeform textarea {height: 100px;} /* ------------------- Tellsomeone Section -----------------*/ #tell-someone div#col_main h2 {margin-left: 30px; margin-top: 0; color: #fff; background-color: #4C7D84; width: 395px; padding-left: 5px;} div#tell-intro {margin:20px 10px; width:190px; color: #000;} div#tell-intro h4, div#tell-intro p {padding-left: 10px; padding-right: 10px;} div#tell-intro h4 {color: #4C7D84; margin-bottom: 8px; font-size: 1.2em;} div#tell-intro p {font-family: arial; font-size: 1em; line-height: 1.2; margin-bottom: 10px;} div#playlist {width: 400px; margin: 35px auto; padding: 0; position: relative;} div.playlist-entry {clear:both; display:block; margin-bottom:12px; width:400px; height: 120px;} div#playlist a {color:#738F58;} div#playlist a img {float: left; margin-right: 10px;} div#playlist h4 {margin: 0 0 0 135px; line-height: .8; color:#4C7D84; padding: 5px;} div#playlist h4#selected {color: #fff; background-color: #4C7D84;} div#playlist p {line-height: 1.2; margin-left:140px;} #tell-someone #tell-downloads {margin-left: 10px;} #tell-someone #tell-downloads h4 {margin-top: 20px; color: #4C7D84; margin-bottom: 10px; font-size: 1.5em;} #tell-someone #tell-downloads ul, #tell-someone #tell-downloads li {list-style-type: none; margin-left: 0; padding-left: 0;} #tell-someone #tell-downloads a:link, #tell-someone #tell-downloads a:hover, #tell-someone #tell-downloads a:visited {color: #4C7D84;} /* Icons for File downloads - make sure the icons are not cut */ #tell-downloads a[href^="http:"], #tell-downloads a[href^="mailto:"], #tell-downloads a[href^="http:"]:visited, #tell-downloads a[href$=".pdf"], #tell-downloads a[href$=".doc"], #tell-downloads a[href$=".xls"], a[href$=".rss"], #tell-downloads a[href$=".rdf"], #tell-downloads a[href^="aim:"], #tell-downloads a[href$=".ppt"] { padding:0 0 2px 23px; margin:-2px 0; background-repeat: no-repeat; background-position: left top; display: block; } /* External links */ #tell-downloads a[href^="http:"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/external.png); padding-right: 14px; } #tell-downloads a[href^="mailto:"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/email.png); } #tell-downloads a[href^="http:"]:visited { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/visited.png); } /* Files */ #tell-downloads a[href$=".pdf"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/pdf.png); } #tell-downloads a[href$=".doc"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/doc.png); } #tell-downloads a[href$=".ppt"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/ppt.png); } #tell-downloads a[href$=".xls"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/xls.png); } /* Misc */ #tell-downloads a[href$=".rss"], #tell-downloads a[href$=".rdf"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/feed.png); } #tell-downloads a[href^="aim:"] { background-image: url(http://www.workforceinitiative.co.uk/images/interface/icons/im.png); } #tell-downloads a[href^="http://www.workforceinitiative.co.uk"] { background:none; padding:0; margin:0; } /* - - - ADxMenu: BASIC styles - - - */ .menu { width: 190px;/* VERY IMPORTANT! Set this to appropriate value, either here on down in the design section */ } .menu, .menu ul { /* remove all list stylings */ margin: 0; padding: 0; border: 0; list-style-type: none; display: block; } .menu li { margin: 0; padding: 0; border: 0; display: block; position: relative; /* position each LI, thus creating potential IE.win overlap problem */ z-index: 5; /* thus we need to apply explicit z-index here... */ } .menu li:hover { z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */ white-space: normal; /* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */ } .menu ul { visibility: hidden; /* initially hide all submenus. */ position: absolute; z-index: 10; left: 0; /* while hidden, always keep them at the top left corner, */ top: 0; /* to avoid scrollbars as much as possible */ } .menu li:hover>ul { visibility: visible; /* display submenu them on hover */ left: 100%; /* and move them to the right of the item */ } /* -- float.clear -- force containment of floated LIs inside of UL */ .menu:after, .menu ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } .menu, .menu ul { /* IE7 float clear: */ min-height: 0; } /* -- float.clear.END -- */ /* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly! if you do it, make sure you 110% know what you do */ .menu ul { background-image: url(http://workforceinitiative.co.uk/images/interface/empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */ padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; /* background: #f00;*/ /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */ } /* - - - ADxMenu: DESIGN styles - - - */ .menu, .menu ul li { color: #eee; background: #E62C7D; } .menu { width: 190px; margin: 5px 10px 10px 10px; } .menu ul { width: 11em; } .menu a { text-decoration: none; color: #eee; padding: .2em 1em; display: block; } .menu a:hover, .menu li:hover>a { color: #fff; background-color: #992587; } .menu li { /* create borders around each item */ border: 1px solid #fff; border-bottom-width: 2px; } .menu>li + li, .menu ul>li + li { /* and remove the top border on all but first item in the list */ border-top: 0; } .menu li:hover>ul { /* inset submenus, to show off overlapping */ top: 5px; left: 90%; } /* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu placed here to clarify the terminology I use when referencing submenus in posts */ .menu>li:first-child>a, .menu li + li + li li:first-child>a { color: #fff; }