/* Theme Name: Yellow Cat Recruitment Theme URI: http://wordpress.org/ Description: Styling for the Yellow Cat Recruitment website. Version: 2.0 Author: Lewis Majendie Author URI: Tags: This theme was designed and built by Lewis Majendie. The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ body {font-size:10px;font-family:Arial, Helvetica, sans-serif;background:#000;margin:0 0 0 0;padding:19px 0 0 0;} /*** MAIN CONTAINERS Inner container has a left padding of 8px and width further reduced by 8px providing a notional padding to brng its right border up to right border of outer containter ***/ div.ruler {height:20px;width:10px;background:orange;} div.container {width:804px;margin:0 auto 0 auto;padding:0 0 0 60px;position:relative;overflow:hidden;background:url(images/right_8w_50h.gif) repeat-y right top;} div.container div.container {width:788px;margin:0 0 0 0;padding:0 0 0 8px;background:#fff url(images/left_8w_50h.gif) repeat-y left top;} /** HEAD **/ div.head {width:100%;height:77px;border-bottom:4px solid #fff000;overflow:hidden;clear:both;background:#000;} div.head span {display:none;} div.head h1 {height:55px;width:235px;padding:0 5px 0 10px;margin:0;background:url(images/logo.gif) no-repeat 15px top;overflow:hidden;float:left;} div.head h1 a {height:100%;width:100%;display:block;} div.head div {height:55px;width:290px;float:left;overflow:hidden;} div.head p {height:55px;width:214px;padding:0 0 0 24px;background:url(images/telephone.gif) no-repeat right 0;float:left;clear:none;/*background:red;*/} div.head div.top_icons {width:99px;height:23px;top:30px;right:0px;padding:3px 0 3px 10px;position:absolute;overflow:hidden;} div.head div.top_icons p {width:23px;height:23px;margin:0 10px 0 0;padding:0;clear:none;float:left;text-align:center;background:none;} div.head div.top_icons p img {width:100%;height:100%;padding:0;margin:0;} /** CONTENT AREA - width = inner container width less margins**/ div.content_area {width:748px;margin:20px 20px 0 20px;padding:5px 0 0 0;background:url(images/faux_divider.gif) repeat-y 118px 0;overflow:hidden;position:relative;} /* NAV Note 80px bottom padding - guarantee space underneath for follow boxif nav is the tallest item on the page */ div.content_area ul.nav {width:120px;padding:0 0 80px 0;margin:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:1.4em;overflow:hidden;float:left;} div.content_area ul.nav li {padding:0 0 0 0;margin:0 0 12px 0;height:1.5em;font-size:1.0em;white-space:nowrap;list-style:none;background:none;} div.content_area ul.nav li a {font-weight:bold;padding-left:18px;text-decoration:none;color:#676666;font-weight:bold;} div.content_area ul.nav li a:hover {background: url(images/little_grey_paw.gif) no-repeat 6px 3px;text-decoration:underline;color:#000;} div.content_area ul.nav li.current_page_item a, div.content_area ul.nav li.current_page_ancestor a, div.content_area ul.nav li.on a {background: url(images/little_black_paw.gif) no-repeat 6px 3px!important;color:#000;} div.content_area ul.nav ul {padding:0;} div.content_area ul.nav ul li {padding:0;margin:12px 0 0 0;} div.content_area ul.secondary {width:100%;padding:0;margin:0 0 10px 0;font-size:1.20em;position:relative;left:-5px;font-family:Georgia, "Times New Roman", Times, serif;overflow:hidden;} div.content_area ul.secondary li {display:inline;font-size:1.0em;height:auto;padding:0 5px 0 5px;margin:0;border-left:1px solid #333333;background:none;position:relative;white-space:nowrap;} div.content_area ul.secondary li a {background:none;padding:0;text-decoration:underline;color:#676666;} div.content_area ul.secondary li.current_page_ancestor a, div.content_area ul.secondary li.current_page_item a, div.content_area ul.secondary li.on a {text-decoration:none;color:#000;} div.content_area ul.tertiary {font-size:1.1em;} /* FOLLOW left is content_area left margin + 8px border width - abs position taken from inner container (pos relative) - not content_area (pos static) Tracks bottom of content - determined by how much there is */ div.content_area div.follow {width:126px;height:80px;left:0;bottom:0;border:1px solid #000;border-right:none;border-top:none;position:absolute;} div.content_area div.follow h2 {height:35px;background:#000 url(images/follow_cat.gif) no-repeat center center;margin:0;padding:0;} div.content_area div.follow h2 span {display:none;} div.content_area div.follow p {height:33px;width:111px;margin:6px auto 0 auto;padding:0 0 0 5px;overflow:hidden;} div.content_area div.follow p a {height:33px;width:32px;margin:0 5px 0 0;float:left;display:block;} div.content_area div.follow p img {display:inline;} /* CONTENT */ div.content {width:570px;margin:0 0 0 30px;float:left;overflow:hidden;position:relative;/*background:red;*/} div.posts_middle, div.home_middle {width:384px;margin-right:25px;}/* special instance of content */ div.home_middle h1 {font-size:14px;padding:0;margin:0px 0 20px 0;text-align:center;font-weight:100;font-family:Arial, Helvetica, sans-serif;} div.home_middle h1 strong {font-size:14px;} /** FEATURED JOBS **/ div.features {width:184px;float:left;margin:0 0 20px 0;padding:0;overflow:hidden;position:relative;background:#999;} div.features h2,div.features h3 {width:100%;height:40px;margin:0;padding:0;} div.features h2 span,div.features h3 span {display:none;} div.features h2 a,div.features h3 a {width:100%;height:100%;display:block;} div.features h2 {background:url(images/featured.gif) no-repeat center top;} div.features h3 {background:url(images/featured.gif) no-repeat center bottom;} div.features div.features {width:162px;float:none;margin:0 auto 0 auto;padding:10px;padding-top:0;background:#fff;} /* FEATURED JOBS CONTENT * H3 should be used for header but user might select another h in the cms editor*/ div.features div.features h1, div.features div.features h2, div.features div.features h4, div.features div.features h5, div.features div.features h3 {padding:10px 0 0 0;margin:0;text-align:left;font-size:1.1em;font-weight:100;font-family:Georgia, "Times New Roman", Times, serif;background:none;width:auto;height:auto;} div.features div.features p {margin:0;padding:0;text-align:left;font-size:1.0em;color:#666666;font-family:Georgia, "Times New Roman", Times, serif;} /* TESTIMONIALS CONTENT AREA div.testimonials is a special instance of class content_area*/ div.testimonials {background:none;overflow:hidden;} div.testimonials p {height:62px;width:128px;background:url(images/icons/REC_Member_audited_80px.jpg) no-repeat center center;margin:0;padding:0;float:left;} div.testimonials p a {display:block;height:100%;width:100%;} div.testimonials div {width:600px;float:left;} div.testimonials div p {text-align:justify;width:auto;height:auto;background:none;font-size:1.2em;font-family:Georgia, "Times New Roman", Times, serif;float:none;} div.testimonials div p.quote {padding:5px 25px 15px 20px;background:url( images/open_quote.gif) no-repeat 0 0;font-style:italic;position:relative;} div.testimonials div p.attr {text-align:right;font-weight:bold;text-align:center;} div.testimonials div p.quote img {display:inline;} /** CORNERS **/ div.corners,div.corners div {width:100%;height:28px;overflow:hidden;} div.corners div {width:50%;float:right;} div.top {background:url(images/top_2920w_28h.gif) no-repeat left top;} div.top div {background:url(images/top_2920w_28h.gif) no-repeat right top;} div.bottom {background:url(images/bottom_2920w_28h.gif) no-repeat left top;} div.bottom div {background:url(images/bottom_2920w_28h.gif) no-repeat right top;} /** CAT **/ div.cat {width:60px;height:209px;position:absolute;left:0;bottom:0;} div.blink_off {background:url(images/big_cat.gif) no-repeat 0 0;} div.blink_on {background:url(images/big_cat_blink.gif) no-repeat 0 0;display:none;} /*** SPECIAL ELEMENTS HOME PAGE BUTTONS: * There are several ways of creating this but this method, using just p tags, images and a tags means a common text editor can build these button panels * Placing the yellow text panel as a background image was not the preferred method since it has to aline vertically with the text - however this method minimises markup and display inner elements of a p tag as blocks which mucks up ie6 and 7 * Note all elements have width - the outer element is given width to solver hasLayout in IE6 * P tag is given bottom padding rather than margin to solve an ie7 issue ***/ p.buttons {margin:2px 2px 0 0;padding:0 0 5px 0;width:126px;height:134px;float:left;line-height:20px;overflow:hidden;clear:none;text-align:center;background:url( images/sector_buttons/text_panel.jpg) no-repeat 0 114px;} p.buttons img {width:112px;height:109px;margin:0 auto 5px auto;padding:0;display:block;} p.buttons a, p.buttons a:hover {width:100%;display:block;text-decoration:none;line-height:20px;} /* SECTOR BUBBLES: */ li.bubble, li.bubble:hover {width:177px;height:72px;line-height:67px;margin:0 10px 10px 0;padding-left:0;text-align:center;float:left;background:url( images/sector_bubble.gif) no-repeat 0 0;font-family:Georgia, "Times New Roman", Times, serif;font-size:11px;} li.bubble a, li.bubble a:hover {width:100%;height:100%;line-height:67px;text-align:center;display:block;text-decoration:none;background:none;color:#000;} /* Two col links: */ li.two_column_list {width:45%;margin:0 2% 0 0!important;padding:0 0 5px 0;background:none!important;float:left;clear:none;text-align:center;} /* Embossed lists: */ div.emboss {width:30%;margin:0 2% 20px 0;padding:0;background:url(images/emboss.jpg) top left no-repeat;overflow:hidden;position:relative;float:left;} div.emboss_half {width:46%;margin-right:3%;} div.emboss_single {width:75%;margin:0 auto 20px auto;float:none;} div.emboss div {height:25px;width:50%;background:url(images/emboss.jpg) top right no-repeat;float:right;margin:0;padding:0;} div.emboss span {height:38px;width:100%;background:url(images/emboss.jpg) bottom left no-repeat;display:block;overflow:hidden;margin:0;padding:0;position:relative;} div.emboss span span {height:38px;width:50%;background:url(images/emboss.jpg) bottom right no-repeat;float:right;} div.emboss ul,div.emboss ol {background:#fff000;width:100%;margin:0;padding:0;clear:right;font-size:1.1em;font-family:Georgia, "Times New Roman", Times, serif;overflow:hidden;} div.emboss li {padding:0 0 0 15px;line-height:2.0em;background:none!important;font-size:1em;color:#000;font-weight:bold;} div.emboss li a {padding:0;margin:0;margin:0!important;background:none!important;color:#000!important;text-decoration:underline;} /* TEAM thumnails: */ p.team_thumb {margin-right:25px;float:left;overflow:hidden;clear:none;text-align:center;font-size:11px;font-weight:bold;} p.team_thumb img {margin:0 0 5px 0;padding:5px;border:2px solid #fff000;display:block;} p.team_thumb a, p.team_thumb a:hover {text-decoration:none;} /* TEAM thumnails with javascript enabled to wrap p's in divs: Note the display:inline; in the paragraph styling - it cures the ie6 double margin bug in floats */ div.team_emboss {width:522px;margin:0 0 20px 0;padding:0;background:url(images/emboss.jpg) top left no-repeat;overflow:hidden;} div.team_emboss div {/*padding-left:10px;*/width:100%;background:#fff000;clear:right;overflow:hidden;position:relative;/*background:green;*/margin-bottom:-10px;} div.team_emboss div.tc {width:50%;height:25px;padding:0;margin:0;float:right;background:url(images/emboss.jpg) top right no-repeat;} div.team_emboss p {width:104px;padding:7px 7px 7px 7px;margin:0 0 10px 10px;background:#fff;font-size:11px;background:#fff;display:inline;text-align:center;float:left;clear:none;} div.team_emboss p img {width:104px;height:128px;padding:0 0 5px 0;margin:0 auto 2px auto;border-bottom:1px solid #ffcc00;border-top:none;border-left:none;border-right:none;} div.team_emboss p a, div.team_emboss p a:hover {text-decoration:none!important;} div.team_emboss span {height:38px;width:100%;background:url(images/emboss.jpg) bottom left no-repeat;display:block;overflow:hidden;clear:both;} div.team_emboss span span {height:38px;width:50%;background:url(images/emboss.jpg) bottom right no-repeat;margin:0;float:right;} div.team_emboss li span {width:auto;background:none;display:inline;height:auto;} /* Topcats: - modified div.team_emboss */ div.top_cats {/*width:567px;*/} div.top_cats p {font-weight:bold;height:210px;} div.top_cats p img {height:156px;} /* Follow us - modified div.team_emboss */ div.follow_us {width:530px;/*margin-left:auto;margin-right:auto;*/} div.follow_us div {width:519px;/*margin-left:auto;margin-right:auto;*/} div.follow_us div p {width:149px;/*line-height:15px;*/} div.follow_us div p img {width:149px;height:115px;margin-bottom:5px;} /* Client testimonials page - modified div.team_emboss */ div.testimonial_box {position:absolute;top:80px;left:0;width:100%;z-index:10;font-family:Georgia, "Times New Roman", Times, serif;display:none; } div.testimonial_box div.team_emboss {width:100%;position:relative;padding:0;} div.testimonial_box div.up_arrow, div.testimonial_box div.down_arrow {position:relative;margin:0;padding:0;height:14px;display:none;} div.testimonial_box div.down_arrow {top:-33px;} div.testimonial_box img {position:relative;} div.testimonial_box div.test_mon_text {margin:0 auto 0 auto;padding:0;width:95%;} div.testimonial_box div.test_mon_text p {background:none;width:100%;margin:0;padding:0;text-align:left;font-size:12px;} div.logos {position:relative;padding:0;margin:10px 0 0 0;width:100%;height:560px;overflow:hidden;} div.logos img {position:absolute;} /* Candidate testimonials page */ div.candidate_thumbs {margin:10px 0 0 0;padding:0;width:100%;overflow:hidden;} div.candidate_thumbs p {margin:0;padding:0;border:2px solid #fff;width:4.2em;float:left;clear:none;overflow:hidden;} div.candidate_thumbs p.thumb_on {border-color:#fff000;} div.candidate_cards {overflow:hidden;margin:0;padding:0;} div.candidate_cards .thanks img {border-left:1px solid #000;padding:0 0 0 5px;} div.candidate_cards .card {float:left;width:250px;padding:0 5px 0 0;} div.candidate_cards .thanks {float:left;width:280px;padding:0;text-align:center;overflow:hidden;} div.candidate_cards .thanks p {float:right;} div.candidate_cards .thanks div {clear:right;} /* ARTICLES - modified div.team_emboss */ div.articles {font-family:Georgia, "Times New Roman", Times, serif;padding-top:20px;} div.articles div {margin-bottom:0px;} div.articles div.team_emboss {width:100%;background:#fff000;} div.articles div.on {display:block!important;} div.articles div.team_emboss div.tc {width:20px;height:25px;float:right;background:url(images/article_corner.png) no-repeat right top;margin-right:0;} div.articles h2 {padding-left:10px;} div.articles ul.year_nav li {width:60px;height:20px;padding:0 0 0 20px;background:url(images/grey_emboss.jpg) no-repeat left top;margin-right:2px;font-size:16px;float:left;clear:none;overflow:hidden;} div.articles ul.year_nav li.archive {width:100px;} div.articles ul.year_nav li span {width:100%;height:100%;text-align:center;padding:0 0 0 2px;margin:0 0 0 0;display:block;background:url(images/grey_emboss.jpg) no-repeat right top;line-height:17px;text-indent:-25px;} div.articles ul.year_nav li.on {height:22px;} div.articles ul.year_nav li:hover, div.articles ul.year_nav li.on {background:url(images/emboss.jpg) no-repeat left top;} div.articles ul.year_nav li:hover span, div.articles ul.year_nav li.on span {background:url(images/emboss.jpg) no-repeat right top;} div.articles ul.year_nav li.on span a {font-weight:bold;} div.articles div.team_emboss ul {padding:0;margin:0 0 0 0;overflow:hidden;width:100%;} div.articles div.team_emboss ul li {font-size:11px;clear:both;overflow:hidden;background:none;text-align:left;padding:0 10px 0 10px;margin:0 0 5px 0;width:auto;} ul.archive_year_nav {overflow:hidden;margin-left:-11px;padding:5px 0 5px 0;border-top:1px solid #999999;border-bottom:1px solid #999999;} ul.archive_year_nav li {background:none;padding:0 10px 0 10px;float:left;border-left:1px solid #999999;} ul.archive_year_nav li:hover {background:none;} div.articles ul li span.article {width:28em;float:left;text-align:left;padding:0;margin:0;overflow:hidden;display:block;} div.articles ul li span.article_link {width:22em;float:right;text-align:right;padding:0 20px 0 0;margin:0;font-size:10px;font-weight:bold;display:block;clear:none;} div.articles ul li a {font-weight:100;} .page_nav {overflow:hidden;clear:both;} p.page_nav {border-top:1px solid #999999;padding-top:5px;} .page_nav span {float:left;width:75%;display:block;} .page_nav span.rgt {width:24%;font-size:12px;line-height:1em;text-align:right;float:right;} .article_by {border-bottom:1px solid #999999;padding-bottom:5px;margin-bottom:20px;margin-top:10px;} .article_by span {font-size:11px;} /*** Job results ***/ div.results {padding:20px 0 0 0;} div.results div.row {overflow:hidden;border-top:2px solid #fff000;clear:both;margin:12px 0 0 0;padding:10px 0 0 0;} div.results h2 {margin:0;padding:0 0 0 0;clear:none;font-size:14px;width:70%;float:left;} div.results h2 span {font-size:0.8em;} div.results h2.salary {float:right;text-align:right;border:none;width:25%;} div.results p {padding-top:5px;} div.results a {text-decoration:underline;color:#666;font-weight:bold;text-decoration:none;} div.results a:hover {color:#000;text-decoration:underline;} /*** Job Details ***/ div.job_detail {border:1px solid #000;margin-bottom:20px;} div.job_detail_body {padding:20px;padding-bottom:0;clear:both;} div.job_detail_summary {overflow:hidden;} div.job_detail_summary h4,div.job_detail_summary p {height:15px;padding:5px 0 5px 10px;line-height:15px;border-bottom:1px solid #000;float:left;font-weight:bold;margin:0;font-size:12px;} div.job_detail_summary h4 {width:100px; background:#FFF000; } div.job_detail_summary p {width:447px; border-left:1px solid #000; clear:none;} div.job_detail_summary h4.details {width:100%;} p.jobs_email {margin:0;padding:0 0 2px 0;font-size:11px;text-align:right; font-weight:bold;} p.jobs_email a {text-decoration:underline;} /*p.jobs_email a:hover {text-decoration:underline;}*/ /*** Contact us columns ***/ ul.contact_columned {overflow:hidden;clear:both;width:100%;} ul.contact_columned li {background:none;margin:0;padding:0;overflow:hidden;clear:both;width:100%;} ul.contact_columned li:hover {background:none;} ul.contact_columned li span {} ul.contact_columned li .left {width:150px;float:left;display:block;clear:none;margin:0;} ul.contact_columned li .right {width:250px;float:left;display:block;clear:none;margin:0;} ul.contact_columned li.northern_line {background: url(images/northern_line.gif) no-repeat top left!important;padding-left:20px!important;} ul.contact_columned li.victoria_line {background: url(images/victoria_line.gif) no-repeat top left!important;padding-left:20px!important;} ul.contact_columned li.central_line {background: url(images/central_line.gif) no-repeat top left!important;padding-left:20px!important;} /*** FORMS STYLING ***/ fieldset,form {padding:0;margin:0;border:none;overflow:hidden;} form.jobs_form p {float:left;width:180px;margin:0 0 10px 8px;padding:0;clear:none;} form.jobs_form p.sub {float:right;margin-right:4px;} form.jobs_form label {width:100%;display:block;} form.jobs_form select {width:100%;display:block;border:1px solid #999999;} form.jobs_form p.search_msg {width:368px;} /*** GENERAL STYLING ***/ h1,h2,h3,h4,h5 {margin:0;padding:0 0 10px 0;float:none;clear:both;font-family:Georgia, "Times New Roman", Times, serif;} h1 {font-size:18px;} h2 {font-size:16px;} h2.small {font-size:14px;} h3,h4 {font-size:14px;} h1 strong {font-size:16px;} p {margin:0 0 20px 0;padding:0;font-size:1.2em;text-align:justify;float:none;clear:both;} p.the_time {font-size:10px;color:#666666;} ul,ol {margin:0 0 15px 0;padding:0;font-size:1.2em;clear:both;} li {padding:0 0 5px 0;} li ul,li ol {margin-top:5px;margin-bottom:-5px;font-size:1em;} ul li {background: url(images/little_black_paw.gif) no-repeat 10px 2px;list-style:none;padding-left:27px;} ul li:hover {background: url(images/little_grey_paw.gif) no-repeat 10px 2px;} ul li ol,ol {margin-left:30px;} ul li ol li,ol li, ul li ol li:hover,ol li:hover {padding-left:0;list-style:decimal;background:none;} .green {font-weight:bold;color:#009900;} .red {font-weight:bold;color:#CC0000;} a {color:#000;font-weight:bold;text-decoration:underline;} img {margin:0;padding:0;border:none;display:block;} span.jq_close img {display:inline;} .yellow_divider {margin:0 0 0 0;padding:12px 0 0 0;border-top:2px solid #fff000;} .headline_button {width:296px;height:22px;top:0;right:0;font-family:Georgia, "Times New Roman", Times, serif;font-size:11px;background:url(images/headline_button.gif) left top no-repeat;position:absolute;} .headline_button a {height:22px;line-height:20px;overflow:hidden;display:block;width:100%;text-align:center;text-decoration:none;}