/* Document : skin Created on : 14-Dec-2009, 10:43:58 Author : JP Description: styling of page elements, as separate from typography and layout */ html{background:#666} body{font-size:.9em;} /* -------------------------------- body ------------------------------------ */ body.section #wrapper{background-repeat:no-repeat!important;background-position: 0 200px} body.section #main-content{background-color:#fff;margin-top:200px;padding:0 5px;min-height:510px} body.section #page-title{margin-top:0;margin-left:-5px;margin-right:0} #about-us #wrapper{background-image:url('img/sections/section_heads_about.jpg');} #members #wrapper{background-image:url('img/sections/section_heads_members.jpg');} #exams #wrapper{background-image:url('img/sections/section_heads_exams.jpg');} #training #wrapper{background-image:url('img/sections/section_heads_training.jpg');} #professional-standards #wrapper{background-image:url('img/sections/section_heads_professional_standards.jpg');} #professional-affairs #wrapper{background-image:url('img/sections/section_heads_professional_affairs.jpg');} #policy-publications-and-events #wrapper{background-image:url('img/sections/section_heads_policy.jpg');} #international #wrapper{background-image:url('img/sections/section_heads_international.jpg');} /* ------------------------------- header ----------------------------------- */ #header {background-color:#042149; background-image:url(img/banner-tile.jpg); background-position:top; background-repeat:repeat-x;height:162px;padding:0;margin:0} #header, #header h1 , #header p{position:relative;} #header h1{width:773px;height:80px;margin:0;} #header h1 span{position:absolute;top:10px;left:10px;width:100%;height:100%;background-image:url(img/banner-text.jpg);background-repeat:no-repeat;z-index:2} #header h1 a{color:#ccc} #header h1 em{display:block;font-size:.5em;} #header p,#header p span {position:absolute;height:100%;} #header p {top:0;right:0;width:248px;} #header p span {z-index:1;top:0; right:0;width:248px;background:url(img/banner-right.gif) top left no-repeat;} #header p,#header p a{color:#ccc} #nav li,#footer li{float:left; display:block; margin:0 1em;} /* --------------------------------#nav---------------------------------------*/ #nav, #nav ul{padding:0;margin:0;} #nav{background:#042149 url(img/nav-left.gif) top left no-repeat;border-bottom:1px solid #35598d} #nav ul{margin-left:50px;background:#042149 url(img/nav-tile.jpg) top repeat-x;padding:5px} #nav li{margin:5px; border-left: 1px solid #325f9a} #nav li a{margin:5px} #search-form{clear:left;background:#325f9a url(img/search-tile.jpg) top repeat-x;border-top:6px solid #81b332;padding:5px} #search-form label,#search-form input,#search-form select{display:inline; margin: 0;} #search-form form{float:right} #search-form input[type="text"]{background:#fff url(img/input-tile.jpg) repeat-x;;} #search-form input[type="submit"], #search-form label{border:none;color:#fff; font-weight:bold} #search-form input[type="submit"]{padding-right:20px;background:transparent url('img/arr.gif') right center no-repeat;cursor:pointer} #search-form label:after{content:" > ";color:#ff931e; font-weight:bold} /* --------------------------------#content------------------------------------*/ /*#home #intro,#home .tabs h3,#home #news-list ul,#home #events-list ul{background-repeat:no-repeat} #home #intro,#home #news-list ul, #home #events-list ul{background-image:url('img/corner-s-w-b.gif');background-position:481px 100%} #home .tabs h3{background-image:url('img/corner-s-w-t.gif');}*/ #wrapper,#content,#footer,.button{position:relative;} #breadcrumbs { width:100%; border-bottom:1px solid #ccc; padding:10px 0; margin:0; background-image:url('img/breadcrumbs.jpg'); background-position:0 100%; background-repeat:repeat-x } #breadcrumbs li{ list-style:none; float:left; display:block; padding:0 5px; } /*------------------------------#main-content ---------------------------------*/ #children{margin:0;} #children *{list-style-image:none} #children li, #children li li, #children dt, #children dd{font-size:1em} #children dt{border: 1px solid #aaa;margin:10px 0} #children a{font-weight:bold} .child-title{padding:.5em 1em;background:#f5f5f5;clear:both} #children .child-title a{color:#666 } #children{background:#fff;padding:3px 3px 20px 3px;;border-bottom: 4px solid #f5f5f5} #main-content #children dd{margin-left:0;display:block;font-style:normal} #main-content #children .child-thumb{width:160px;float:left;margin:0 8px 0 0} #children dd a img{padding:3px;border: 1px solid #ddd;width:150px} #children .results-title{background: #eee;border:2px solid #ddd;padding-left:3px} #main-content{position:relative} /*-----------------------------#secondary-content -----------------------------*/ #secondary-content {font-size: 1em; } #secondary-content .group {background:#fff;margin-top:1em} #secondary-content #attachments{padding:0; margin:0;} .med-list h4{border:1px solid #ddd} #news-list,#events-list,#rss-list{margin-left:0} #news-list li,#events-list li,#rss-list li{list-style-type:none} #attachments h4{padding:5px 0 5px 25px;background-position:5px;background-repeat:no-repeat} #img h4{background-image: url(img/camera.png)} #movies h4{background-image: url(img/film.png)} #audio h4{background-image: url(img/sound.png)} #docs h4{background-image: url(img/page_copy.png)} #secondary-content #attachments li{padding:0;list-style-type:none} #events-title,#news-title,#rss-title,.group{border:1px solid #ddd} #events-title,#news-title,#rss-title{} #events-list,#rss-list,#news-list{padding:5px 10px} #attachments li.title ul{padding:0;margin:0;} #attachments .thumbnail-movie{padding:5px 10px} #attachments #img ul li{ padding-left:15px} #attachments img{ margin:5px auto} #attachments #docs ul li{padding:5px} #attachments #docs ul li a{ display:block; padding-left:25px; background-position: 5px 0; _background-position: 5px 5px; background-repeat:no-repeat; } #attachments #docs ul li a.pdf{ background-image: url(img/page_white_acrobat.png);} #attachments #docs ul li a.doc{ background-image: url(img/page_white_word.png);} #attachments #docs ul li a.att{ background-image: url(img/page.png);} /* --------------------------------#meta--------------------------------------- Notes: - the images used for the background (meta-tb and meta-tile) are filtered because of lack of support for .png in some IE < 7. */ #meta *{padding:0;margin:0;background:none;} #meta{position:relative;margin: 0 0 0 5px;} #meta h3,#meta #m-b,#meta .children li a,#meta .children li a:hover,#meta .excerpt,#meta .load_children, #meta .top,#meta .open{background-repeat:no-repeat} #meta ul.children,#meta p{background-position:right} #meta h3,#meta #m-b{background-image:url(img/meta-tb.png);} * html #meta h3{background-image:url(img/meta-tb.gif);} * html #meta #m-b{background-image:none;}/*background image filter for IE: idea was to use but it messes up the JQuery and doesn't move when the div changes size. Stripped out for the minute */ #meta h3{text-indent:-5000px;margin-top:10px;padding:20px 3px 20px 3px;background-position:right top} #meta ul.children,#meta p{background-image:url(img/meta-tile.png);background-repeat:repeat-y;padding-bottom:40px;} * html #meta ul.children,* html #meta p{background-image:url(img/meta-tile.gif);}/*background image filter for IE*/ #meta p{padding:3px 3px 40px 3px;} #meta ul.children p{background:none;padding-bottom:0} #meta ul.children p,#meta .children dt{padding-left:20px;} #meta .child-title dl p{padding-left:12px;} #meta .children dt{padding-left:13px;} #meta .children li, #meta #parent-page{list-style:none;width:90%;border:1px solid #ccc;display:block;margin:0 0 5px 3px;background-color:#fff;padding-bottom:10px;} #meta #parent-page{margin-top:56px;padding-bottom:0;} #meta .children li a,#meta .children li a:hover,#meta #parent-page, #meta #parent-page:hover{display:block;color:#666666;background-image:url(img/orbullet.gif);padding:3px 3px 3px 20px;background-position:3px 7px;background-repeat:no-repeat} #meta .children li a:hover,#meta #parent-page:hover,#meta .children li.active a,#parent-page.active{background-color:#a3cdec;color:#fff} #meta .children li.active dl { display: none !important; } #meta li #parent-page{margin:0 0 -4px 0 !important;border:0 !important;width:auto !important;padding:6px 0 0 20px !important;background-position:3px 10px !important;} #meta .child-title p{color:#888} #meta dd ul.children{background:none;margin:3px} #meta dd .children li{margin:0;border-left:none;border-right:none;background-image:none} #meta dd .children li a,#meta dd .children li a:hover{color:#f5f5f5; padding:3px 3px 3px 25px;background-position:8px 7px;background-color:transparent;color:#666} #meta .child-title dl dt{cursor:pointer;color:#666;} #meta .child-title dl{margin:5px;background-color:#e5e5e5;border:1px solid #ccc;padding:5px 0} #meta .child-title dl dd .children{padding-bottom:0} #meta .children dd .child-title{border:none;background:none;font-size:0.9em;padding-bottom:0} #meta .children dd .child-title a{color:#666} #meta span.excerpt{cursor:pointer;display:block;margin-bottom:-10px;width:100%;height:10px;background-image:url(img/meta-ex.gif);background-position: 50% -1px} #meta span.excerpt.open{background-position: bottom!important;background-image:url(img/meta-ex.gif);} #meta .top,#meta .top.open{border:none;background-position:90%!important} #meta .top{background-image: url(img/collapsed.gif);} #meta .top.open{background-image: url(img/expanded.gif);} #meta #m-b/* absolute positioning is for IE */ {position:absolute;bottom:-20px;display:block;height:30px;width:100%;background-position:right bottom;margin:0;padding:0} /* --------------------------------#footer-------------------------------------*/ #footer{font-size:1em; padding:10px;background-color:#fff} #footer hr{position:absolute} #footer li input{margin:0} /* --------------------------------classes-------------------------------------*/ /*jquery concertina*/ .top{cursor:pointer;border-bottom:1px solid #fff;padding:3px;margin:0;} .top h3,.top h4,.top h5,.top h6{padding:0;margin:0} h3.top,h4.top,h5.top,h6.top{padding:5px;margin:0} /*For the concertina*/ .top *{ border:2px solid #eee;} #secondary-content li.top{background-color:transparent} #secondary-content .top{background-color:#f5f5f5;border:2px solid #eee;} #secondary-content .top *{border:none} .top{background-color:#eee;background-image: url(img/collapsed.gif);background-position: 95% 5px;background-repeat:no-repeat;} .top.open{background-image:url(img/expanded.gif)} /*misc*/ .anchor{display:block;border-bottom:4px solid #eee;padding-bottom:5px} .border-top{border-top:3px solid #eee;padding-top:.5em} #main-content .contents-list{list-style-type:none;display:block;margin-left:0;} #main-content .contents-list a,#main-content .contents-list a:hover{text-decoration:underline;border-bottom:none} #main-content .contents-list li{float:left;display:inline;border-left:2px solid #ccc;padding:5px} #main-content .contents-list:after {content:".";display:block;height:0;clear:both;visibility:hidden;} #main-content .contents-list{display:inline-block;}/* add clearfloat style to it \*/ * html #main-content .contents-list { height: 1%;}#main-content .contents-list {display: block;}/* End hide from IE-mac */ .hide{display:none} .desc{font-style:normal!important} .accessibility {position:absolute !important;left:-1000em !important} .round{-moz-border-radius-topleft :6px;-webkit-border-top-left-radius:6px;-moz-border-radius-topright :6px;-webkit-border-top-right-radius:6px;-moz-border-radius-bottomleft :6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomright :6px;-webkit-border-bottom-right-radius:6px;} /*corners*/ #t_r_c,#t_l_c,.t_r_c,.t_l_c{position:absolute;top:-1px;height:20px;width:20px;background-image: url(img/corner-s-w-t.gif);background-repeat:no-repeat;} #t_r_c,.t_r_c{background-position:0 0;right:-1px;} #t_l_c,.t_l_c{background-position:-20px 100% ;left:-1px} #b_r_c,#b_l_c,.b_r_c,.b_l_c{position:absolute;bottom:-1px;height:20px;width:20px;background-image: url(img/corner-s-w-b.gif);background-repeat:no-repeat;} #b_r_c,.b_r_c{background-position:0 0;right:-1px;} #b_l_c,.b_l_c{background-position:-20px 100% ;left:-1px} /*colors*/ .bg-navy{background-color:#00367e;}.bg-orange{background-color:#ff931e}.bg-green{background-color:#81B332}.bg-black{background-color:#000}.bg-white{background-color:#fff} .txt-white{color:#fff!important}.txt-navy{color:#00367e!important}.txt-orange{color:#ff9900!important}.txt-green{color:#7ac943!important}.txt-black{color:#000!important} /* buttons */ #secondary-content .button *{margin-right:5px;margin-left:0;padding: .5em} #secondary-content .button * *{padding:0;margin:0} #secondary-content .button li{list-style-position:inside} #secondary-content .button{padding:0;margin:10px 0 10px 0;border:1px solid #081f3f;} #secondary-content .button a:link,#secondary-content .button a:visited{color:#ff931e} #secondary-content .button img{padding:0;border:none} #secondary-content .button h3{padding:15px 0 0 0;background:#fff;color:#000;min-height:40px} #secondary-content .button h4,#secondary-content .button h5,#secondary-content .button h6{color:#fff} .button *{margin:0;padding:0} .button h3,.button h2{display:block;text-align:center; padding:10px 0px;font-size:1.8em;} #secondary-content .button h3{font-size:1.2em;} .button h3,.button h2,.button img{ width:100%!important} /* Float Properties*/ .clear {clear: both;}.left,img.thumbleft {float:left;}.right,img.thumbright {float:right;} img.thumb,img.thumbleft,img.thumbright{width:150px;margin:0 1em .5em 1em} img.thumb.left,img.thumbleft{margin-left:0px}img.thumb.right,img.thumbright{margin-right:0px} /* clearfloat */ .clearfloat:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfloat {display:inline-block;}/* Hides from IE-mac \*/ * html .clearfloat { height: 1%;}.clearfloat {display: block;}/* End hide from IE-mac */ .opaque50{/* opacity setting */ filter:alpha(opacity=50);/* ie */ -moz-opacity:0.5;/* old mozilla browser like netscape*/ -khtml-opacity: 0.5;/* for really really old safari */ opacity: 0.5;/* css standard */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* ie 8 */ } .opaque80,body.section #main-content,#secondary-content .button h3{/* opacity setting */ filter:alpha(opacity=80);/* ie */ -moz-opacity:0.8;/* old mozilla browser like netscape*/ -khtml-opacity: 0.8;/* for really really old safari */ opacity: 0.8;/* css standard */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/* ie 8 */ }