/****************************************************/ /* Build css for JMF */ /* Author: James Taylor */ /* Last updated: 11/08/08 */ /* */ /* CONTENTS */ /* 1. Browser reset */ /* 2. Generic classes */ /* 3. Layout */ /* 4. Typography */ /* 5. Forms */ /* 6. Page specific */ /* */ /****************************************************/ /*** 1. Browser reset *** - Neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } a { outline:0; } /*** 2. Generic classes ***/ .container:after { display:block; visibility:hidden; clear:both; height:0; line-height:0; content:"."; } /* Clears floats without extra HTML */ .container { display:inline-block; } html[xmlns] .container { display:block; } /* IE5.5 mac */ * html .container { height:1%; } /* IE6 & under */ .screenreader { position:absolute; left:-9999em; top:-9999em; } .hide { display:none; } .invisible { visibility:hidden; } .floatr {float: right; padding: 0; margin: 0;} div.button {padding: 0; margin-top: 10px; } .clear {clear: both;} /*** 3. Layout ***/ html, body { height:100%; } body { background-color: #fff; font-size:62.5%; font-family:arial, sans-serif; } #outer { position:relative; min-height:100%; height:100%; voice-family:"\"}\""; voice-family:inherit; height:auto; } html>body #outer { height:auto; } #content-wrap { text-align:center; zoom:1; } #site-info-wrap { position: absolute; bottom: 0; width: 100%; text-align: center; background:#b7303f; } #branding, #content, #site-info { margin:auto; width:964px; text-align:left;} #branding { position:relative; height:208px; } #branding h1 { position:absolute; right:0; } #branding h2 { position:absolute; top:-2px; left:0; border:1px solid #fff; width:634px; height:207px; text-indent:-9999em; } #branding dl#nav { position:absolute; top:92px; left:636px; width:327px; } #content { position:relative; padding-bottom:3em; background: url(/images/content_bg.png) repeat-y right; } #content #mainContent { position:relative; float:left; padding:15px 30px; width:576px; } #content #subContent { position:relative; float:left; padding:14px 22px 14px 28px; width:278px; background:#fafafa; } #subContent #latestArticles { padding-bottom: 5em; } #subContent #usefulLinks { padding-bottom: 5em; } #subContent #registerNav { padding-bottom: 1em; } #subContent #basket { padding-bottom: 1em; } #subContent #subNav { padding-bottom: 3em; } #subContent #subNav2 { margin-top: -15px; padding-bottom: 1em; } .line {border-bottom:1px dotted #d5d5d5;} #site-info { padding: 5px 0; background:#b7303f; } /*** 4. Typography ***/ h1,h2,h3,h4,h5,h6 { font-weight:bold; margin-bottom:0.6em; } strong { font-weight: bold; } #content h1 { font-size:2em; color:#b62f3e; } #mainContent h2 { font-size:1.4em; color:#000; } #mainContent ul { list-style:disc inside; padding-left: 1em; text-indent: -1em; } *html #mainContent ul { text-indent:-1.2em; padding-left: 1.1em; } *:first-child+html #mainContent ul { text-indent:-1.2em; padding-left: 1.1em; } #subContent h2 { font-size:1.5em; color:#000; } #subContent #registerNav h3 { position:relative; margin-bottom: -1px; padding:12px 0; border-bottom:1px dotted #d5d5d5; font-size:1.3em; color:#5a5a5a; } #subContent #registerNav h3 a.btn { position:absolute; right:0; top:9px; padding:2px 4px; display:inline-block; border:1px solid #acacac; background:#dddddb; text-decoration:none; } * html #subContent #registerNav h3 a.btn { right: 22px; } #subContent #latestArticles h3 { color:#b62f3e; } #subContent #latestArticles h3 a { font-size: 1.2em; } #subContent #latestArticles p { font-size: 1.2em; } #subContent #subNav h3 { color:#b62f3e; } #subContent #subNav h3 a { font-size: 1.2em; } #subContent #subNav p { font-size: 1.2em; } #subContent #subNav2 h3 { color:#b62f3e; } #subContent #subNav2 h3 a { font-size: 1.2em; } #subContent #subNav2 p { font-size: 1.2em; } #subContent #usefulLinks h3 { font-size: 1.2em; color:#5a5a5a;} #subContent #usefulLinks a { font-size: 1em;} #subContent #usefulLinks p { font-size: 1.2em; color:#b82f41;} #subContent #basket a.submit {color: #000000; float: right; text-decoration: none; padding: 2px 5px 2px 5px; border: 1px solid #d27d92; background: #eecfca; font-size: 1.2em; font-weight:bold; text-transform:uppercase;} #subContent #basket a.submit:hover { color:#b7303f; } #subContent #basket p { font-size: 1.2em; color:#5a5a5a; padding:0; margin-bottom: 10px;} #subContent #basket span { font-size: 1.4em; color:#b82f41; font-weight: bold;} #content p, #content ul, #content ol { font-size:1.3em; color:#5a5a5a; line-height:1.4; margin-bottom:1.4em; } #content a:link { color:#b82f41; } #content a:visited { color:#b82f41; /*#db5459*/ } #content a:active { color:#b82f41; } #content a:hover, #content a:focus { color:#000; } #site-info p.copyright { margin-left:30px; } #site-info p.copyright a { font-size:1.2em; color:#e8c0c1; text-decoration:none; cursor:default; } p.link { color:#b82f41 !important; } /*** 5. Navigation ***/ /* Main Nav */ #branding dl#nav dd { margin-bottom:1px; } #branding dl#nav dd a { display:block; padding:3px 0 0 30px; height:19px; font-size:1.3em; font-weight:bold; letter-spacing:1.1px; text-decoration:none; } #nav #navHome a { color:#b7303f; } #nav #navCandidates a { color:#c24c5a; } #nav #navJobSearch a { color:#bb3b48; } #nav #navResources a { color:#f6dbd4; } #nav #navContactUs a { color:#ecc1b8; } /* Hover link state */ #nav #navHome a:hover { background: url(/images/nav-home-bg.png) no-repeat top left; color: #000; } #nav #navCandidates a:hover { background: url(/images/nav-candidates-bg.png) no-repeat top left; color:#000; } #nav #navJobSearch a:hover { background: url(/images/nav-jobSearch-bg.png) no-repeat top left; color:#000; } #nav #navResources a:hover { background: url(/images/nav-resources-bg.png) no-repeat top left; color:#000; } #nav #navContactUs a:hover { background: url(/images/nav-contactus-bg.png) no-repeat top left; color:#000; } /* Active link state */ #nav dd a.active, #nav dd a.active:hover, #nav dd a.active:focus { color: #fff !important; background: url(/images/nav-active_bg.png) no-repeat left top !important; } /* Breadcrumb Nav */ dl#breadcrumb { font-size:1.1em; color:#a3a3a3; margin-bottom:1em; } dl#breadcrumb dd { display:inline; } /* Register Nav */ #registerNav ul li { display: block; float: left; width:50%; } #registerNav ul li a { display: block; padding: 8px 2px 8px 25px; border-bottom: 1px dotted #d5d5d5; border-right: 1px dotted #d5d5d5; background: url(/images/registerNav_bg.png) no-repeat 3px; font-size: 0.9em; font-weight: bold; text-decoration: none; } #registerNav ul li.even a { border-right: 0; } /* Footer Nav */ #site-info dl { float:right; margin-right: 18px; } #site-info dl dd { display: inline-block; float: left; border-left: 1px solid #e8c0c1; padding:0 5px 0 7px; } #site-info dl dd.first { border-left: 0; } #site-info dl dd a { display: inline-block; float: left; font-size: 1.2em; color:#e8c0c1; } #site-info dl dd a:hover, #site-info dl dd a:focus { color:#fff; } /* In Page Menu */ ul.inPageMenu { list-style-type:none; text-indent:0 !important; padding-left: 0 !important; } ul.inPageMenu li { display: inline-block; margin-bottom:20px; float: left; } ul.inPageMenu li a { float:left; display:block; margin:0 10px 0px 0; width:164px; height:24px; background: url(/images/inPageMenuItem_bg.png) no-repeat; font-weight: bold; text-decoration:none; padding: 5px 0 0 16px; } * html ul.inPageMenu li a { margin-right: 5px; } /*** 6. Forms ***/ #subContent form { padding-bottom:1.5em; border-bottom: 1px dotted #d5d5d5; } form label { display:inline-block; padding-right:4px; font-size: 1.2em; color:#5a5a5a; font-weight:bold; } form fieldset { } form input.txt { margin-right:4px; padding:2px; border: 1px solid #acacac; width:160px; font-size:1.3em; } form input.file { margin-right:4px; padding:2px; border: 1px solid #acacac; width:120px; font-size:1em; } input.submit { padding: 1px 0; border: 1px solid #d27d92; background: #eecfca; font-size: 1.2em; font-weight:bold; text-transform:uppercase; } input.submit:hover, input.submit:focus { color:#b7303f; } form div.fld { padding: 0.8em 0; } form div.chk label { width: 18em !important; } form select.select {margin-right:4px; padding:2px; border: 1px solid #acacac; width:200px; font-size:1.3em;} /*** 7. Page specific ***/ /* Body backgrounds */ #home { background:#fff url(/images/home-bg.png) repeat-x top; } #candidates { background:#fff url(/images/candidates-bg.png) repeat-x top; } #jobSearch { background:#fff url(/images/jobSearch-bg.png) repeat-x top; } #resources { background:#fff url(/images/resources-bg.png) repeat-x top; } #contactUs { background:#fff url(/images/contactUs-bg.png) repeat-x top; } #generic { background:#fff url(/images/generic-bg.png) repeat-x top; } /* Header images */ #home #branding h2 { background:url(/images/header-elephant.jpg) no-repeat; } /* Home */ #home #featuredJobs { position:relative; margin-bottom:1em; padding:1em 0 0.4em; border-top:1px solid #ddd; border-bottom:1px solid #ddd; overflow:hidden; } #home #featuredJobs ul { margin-bottom:0; padding:0 !important; text-indent:0 !important; } #home #featuredJobs ul li { display:block; float:left; margin:0 18px 6px 0; } #home #featuredJobs ul.scroll1 { height: auto !important; overflow:hidden !important; } #home #featuredJobs ul.scroll li { border-right: 1px dotted #a5a5a5; } #home #featuredJobsScroller { height: 150px; overflow:auto; } .scroller { height: 75px !important; overflow:hidden !important; } #home #featuredJobs div.controls { position: absolute; top: 12px; left: 545px; } #home #featuredJobs div.controls a { background:#D9D9CD; font-size:1.2em; padding:0 0.3em; text-decoration:none; color:#fff; font-weight:normal; } #home #featuredJobs ul li div.inner { display: inline; width:auto; white-space: nowrap } #home #featuredJobs ul li img { float:left; margin-right:18px; } #home #featuredJobs ul li h3 { padding-top: 0.6em; color: #b82f41; float:left; } #home #featuredJobs ul li h3 a { font-size: 0.9em; } #home #featuredJobs ul li dl { font-size: 0.85em; float:left; } #home #featuredJobs ul li dt { width:60px; float:left; } #home #featuredJobs ul li dd { color:#b82f41; white-space: nowrap; width:auto; } #home #browseJobs ul li { float:left; display:block; margin:0 1% 2px 0; width:48%; color:#b82f41; } #home #browseJobs ul li a { font-size: 0.9em; font-weight:bold; } #home p.logo { position: absolute; right: 20px; bottom: 20px; } #generic p.logo { position: absolute; right: 20px; bottom: 20px; } #candidates p.logo { position: absolute; right: 20px; bottom: 20px; } #jobSearch p.logo { position: absolute; right: 20px; bottom: 20px; } #resources p.logo { position: absolute; right: 20px; bottom: 20px; } #contactUs p.logo { position: absolute; right: 20px; bottom: 20px; } /* Candidates */ #candidates #frmLogin { padding:0 0 0 15px; margin-bottom: 25px; height: 45px; background: #f6dbd2 url(/images/frmLogin_bg.png) no-repeat top left; } /* IE7 see this one */ *:lang(en) #candidates #frmLogin { padding:0 18px; margin-bottom: 25px; height: 45px; background: #f6dbd2 url(/images/frmLogin_bg.png) no-repeat top left; } /* Other browsers see this one */ #candidates #frmLogin div.fld { width: 44%; float: left; margin-top:-3px; padding: 0; } /* IE7 see this one */ *:lang(en) #candidates #frmLogin div.fld { width: 45%; float: left; margin-top:11px; padding: 0; } /* Other browsers see this one */ #candidates #frmLogin #submit { border: 0; background: #f6dbd2; color:#ab2435; font-weight: bold; font-size: 1.3em; margin: 0px 0 0 -9px; padding: 0; } /* IE7 see this one */ *:lang(en) #candidates #frmLogin #submit { border: 0; background: #f6dbd2; color:#ab2435; font-weight: bold; font-size: 1.3em; margin: 14px 0 0 -3px; padding: 0; } /* Other browsers see this one */ #candidates #frmRegister label { width: 12em; float: left; } #candidates #frmRegister input#submit { margin-top: 1em; } #candidates #frmRegister input.file { width: 165px; } /* Post a vacancy form */ #generic #frmPostVac label { width: 12em; float: left; } #generic #frmPostVac input.txt { margin-right:4px; padding:2px; border: 1px solid #acacac; width:200px; font-size:1.3em; } #generic #frmPostVac input#submit { margin-top: 1em; } #generic #frmPostVac input.file { width: 200px; } #generic #frmPostVac textarea { border: 1px solid #acacac; width: 200px; } /* Contact form */ #contactUs #frmContactUs label { width: 12em; float: left; } #contactUs #frmContactUs input.txt { margin-right:4px; padding:2px; border: 1px solid #acacac; width:200px; font-size:1.3em; } #contactUs #frmContactUs input#submit { margin-top: 1em; } #contactUs #frmContactUs input.file { width: 200px; } #contactUs #frmContactUs textarea { border: 1px solid #acacac; width: 200px; } /* Job Search Results */ #jobSearch .searchInfo { position: relative; } #jobSearch p.pagination { font-size: 1.1em; color:#595959; margin-bottom: 0.6em; } #jobSearch p.pagination em { color: #ac2335; font-weight: bold; } #jobSearch .searchInfo dl { position: absolute; right: 0; top: 0; } * html #jobSearch .searchInfo dl { position: absolute; right: 25px; top: 0; } #jobSearch .searchInfo dl dd { float: left; padding: 0 3px; font-size: 1.1em; } #jobSearch .searchInfo dl dd { border-left: 1px solid #a3a3a3; color:#a3a3a3; } #jobSearch .searchInfo dl dd.first { border:0; } #jobSearch #searchResults { list-style-type:none; text-indent:0; padding:0; border-top: 1px dotted #adadad; } #jobSearch #searchResults li { position: relative; padding: 12px 0; border-bottom: 1px dotted #adadad; } #jobSearch #searchResults li dd.date{ position: absolute; top: 12px; left:0; font-size: 0.9em; } *html #jobSearch #searchResults li dd.date{ position: absolute; left:-15px; } #jobSearch #searchResults li h2 { margin: 18px 0 3px; font-size: 1.1em; } *html #jobSearch #searchResults li h2 { margin: 18px 0 3px -15px; font-size: 1.1em; } *:first-child+html #searchResults li h2 { position:relative; left:-17px; } #jobSearch #searchResults li h2 a { text-decoration: none; } #jobSearch #searchResults li dl { font-size: 0.9em; } #jobSearch #searchResults li dt { float: left; width: 12em; color: #5a5a5a; } #jobSearch #searchResults li dd { margin-bottom: 2px; color: #333; } #jobSearch #searchResults li p { margin: 0; font-size: 0.9em; line-height: 1.7; } /* Job details */ #jobSearch dl.jobInfo { margin-bottom: 0.3em; font-size: 1.2em; } #jobSearch dl.jobInfo dd.date { position:absolute; right: 12px; top: 45px; color: #5a5a5a; } #jobSearch dl.jobInfo dt { float: left; width: 6em; color: #5a5a5a; } #jobSearch dl.jobInfo dd { float: left; width: 9em; color: #333; } #jobSearch dl.jobInfo2 { margin-bottom: 0.3em; font-size: 1.2em; } #jobSearch dl.jobInfo2 dd.date { position:absolute; right: 12px; top: 45px; color: #5a5a5a; } #jobSearch dl.jobInfo2 dt { float: left; width: 12em; color: #5a5a5a; } #jobSearch dl.jobInfo2 dd { float: left; width: 36em; color: #333; } #jobSearch div.controls ul { margin: 24px 0; padding: 5px 0; list-style-type:none; text-indent:0; } #jobSearch div.controls ul li { display: inline; padding: 10px 0; } #jobSearch div.controls ul li.btn a { margin-right: 36px; padding: 3px 6px; border: 1px solid #d27d92; background: #eecfca; font-size: 0.92em; font-weight:bold; text-transform:uppercase; text-decoration:none; } #jobSearch div.controls ul li.btn a:hover, #jobSearch div.controls ul li.btn a:focus { color: #000; } #jobSearch div.controls ul li.add a { display: inline-block; padding-left: 20px; background: url(/images/addToBasket.png) no-repeat left; font-size: 0.9em; } #jobSearch div.controls p { font-size: 1.2em; color: #a82334; } /* Job Search formatting */ #jobSearch #frmSearch label { width: 12em; float: left; font-weight: normal; } #jobSearch #frmSearch label.bold { width: 12em; float: left; font-weight: bold; } #jobSearch #frmSearch input.txt { margin-right:4px; padding:2px; border: 1px solid #acacac; width:200px; font-size:1.3em; } #jobSearch #frmSearch input#submit { margin-top: 1em; } #jobSearch #frmSearch input.chq { margin:0; padding:0; display: inline;} #jobSearch #frmSearch span.label { width: 12.3em; float: left; font-size: 1.2em; color:#5a5a5a; font-weight:bold; margin-top: 10px;} /* Jobs by Email formatting */ #candidates #frmSearch label { width: 12em; float: left; font-weight: normal; } #candidates #frmSearch label.bold { width: 12em; float: left; font-weight: bold; } #candidates #frmSearch input.txt { margin-right:4px; padding:2px; border: 1px solid #acacac; width:200px; font-size:1.3em; } #candidates #frmSearch input#submit { margin-top: 1em; } #candidates #frmSearch input.chq { margin:0; padding:0; display: inline;} #candidates #frmSearch span.label { width: 12.3em; float: left; font-size: 1.2em; color:#5a5a5a; font-weight:bold; margin-top: 10px;} /* resources list formatting */ #resources .searchInfo { position: relative; } #resources p.pagination { font-size: 1.1em; color:#595959; margin-bottom: 0.6em; } #resources p.pagination em { color: #ac2335; font-weight: bold; } #resources .searchInfo dl { position: absolute; right: 0; top: 0; } * html #resources .searchInfo dl { position: absolute; right: 25px; top: 0; } #resources .searchInfo dl dd { float: left; padding: 0 3px; font-size: 1.1em; } #resources .searchInfo dl dd { border-left: 1px solid #a3a3a3; color:#a3a3a3; } #resources .searchInfo dl dd.first { border:0; } #resources #searchResults { list-style-type:none; text-indent:0; padding:0; border-top: 1px dotted #adadad; } #resources #searchResults li { position: relative; padding: 12px 0; border-bottom: 1px dotted #adadad; } #resources #searchResults li dd.date{ position: absolute; top: 12px; left:0; font-size: 0.9em; } *html #resources #searchResults li dd.date{ position: absolute; left:-15px; } #resources #searchResults li h2 { margin: 18px 0 3px; font-size: 1.1em; } *html #resources #searchResults li h2 { margin: 18px 0 3px -15px; font-size: 1.1em; } *:first-child+html #searchResults li h2 { position:relative; left:-17px; } #resources #searchResults li h2 a { text-decoration: none; } #resources #searchResults li h2.nomargin { margin: 0 0 3px; font-size: 1.1em; } *html #resources #searchResults li h2.nomargin { margin: 0 0 3px -15px; font-size: 1.1em; } *:first-child+html #searchResults li h2.nomargin { position:relative; left:-17px; } #resources #searchResults li h2.nomargin a { text-decoration: none; } #resources #searchResults li dl { font-size: 0.9em; } #resources #searchResults li dt { float: left; width: 8em; color: #5a5a5a; } #resources #searchResults li dd { margin-bottom: 2px; color: #333; } #resources #searchResults li p { margin: 0; font-size: 0.9em; line-height: 1.7; } /* resource detail formatting */ #resources dl.jobInfo { margin-bottom: 0.3em; font-size: 1.2em; } #resources dl.jobInfo dd.date { position:absolute; right: 12px; top: 45px; color: #5a5a5a; } #resources dl.jobInfo dt { float: left; width: 6em; color: #5a5a5a; } #resources dl.jobInfo dd { float: left; width: 9em; color: #333; } #resources h2 {color: #ab2435;} /* Sub menu */ .subNav2 ul a { display:block; width:262px; height:22px; background:url(/images/bg-subnav2.png) no-repeat top left; color:#fff !important; font-size:1em; font-weight:bold; padding:5px 0 0 16px; text-decoration:none; margin-bottom:6px; } .subNav2 ul a:hover, .subNav2 ul a:focus { color:#ecc1b8 !important; }