/* ----------------------------------------------- Boucott Hospital - - - - - - - - - - - - - - - - - - - - - - - - Description: Base Setup Styles Filename: boulcott.base.css Author: Hamish Stevenson / Catch Design Limited (www.catchdesign.co.nz) Date: 30 June 2007 Updated: 23 October 2007 ----------------------------------------------- */ /* Importing... ----------------------------------------------- */ /* IE5/Win Only Styles */ @media tty { i{content:"\";/*" "*/}} @import url('boulcott.ie5win.css'); /*";} }/* */ /* =Global Styles ----------------------------------------------- */ * { padding: 0; margin: 0; } body { background: #f1f1f1; margin: 0; padding: 0; font: 63.7%/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; color: #333;} /* =Generic styles */ img { border: 0; padding: 0; } a { text-decoration: underline; color: #990; } a:hover { text-decoration:none; } a img { border: none; background: none; padding: 0; } .hide { display: none; position:absolute; left:-2000px; width:999px;} .alignleft { float: left;} .alignright { float: right;} img.alignleft { float: left; margin: 0 5px 5px 0; } img.alignright { float: right; margin: 5px 0 5px 10px; padding: 4px; border: 1px solid #ccc; } img.alignright:hover { border-color: #999; } .blue { color: blue; } .green { color: green; } .large { font-size: 1.4em; } p { font: 1.2em/1.6 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; margin: 0.2em 0 0.8em 0; } small { font-size: 1.1em; } ul, ol { font: 1.2em/1.5 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; margin: 2px 0 10px 5px; padding: 0 0 0 10px; } li ul { font-size:1.0em; } input, textarea { font: 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; margin:0; } label { font: 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; margin:0; } input.textbox { padding: 3px; } select { font: 10px/1.3 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; } dl, dt, dd { font: 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; } td { font: 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; } th { font: 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; } fieldset { border: 0; margin: 0; padding: 0; } legend { display: none; } h2 { font: normal 1.8em/1.2 "Times New Roman", Times, serif; color: #5e4d3e; margin: 0; padding: 0; } h3 { font: bold 1.1em/1.3 Georgia, "Times New Roman", Times, serif; color: #000; margin: 0; text-transform: uppercase; } h4 { font: bold 1.1em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; color: #333; margin: 0; } /* Hacks that can't be avoided in this file */ /* =Clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* =collapse lists */ #container ul.nav, #container ul.nav li { margin:0; padding:0; list-style:none; } ul.nav, ul.nav li { display:inline;} /* =Structure ----------------------------------------------- */ #container_wrap { width: 100%; background: #fff url(../img/bg_snd_grting_foot.gif) top repeat-x; padding-top: 5px; } #container { width: 860px; margin: 0 auto; background: #fff; padding: 0; position: relative; } .inner { width: 860px; margin: 0 auto; } /* Generic Columns */ .col_1 { float: left; width: 425px; padding-bottom: 15px; } .col_1_a { float: left; width: 170px; } .col_1_b { float: right; width: 240px; } .col_2 { float: right; width: 400px; padding-bottom: 15px; } .col_2_a { float: left; width: 200px; } .col_2_b { float: right; width: 180px; } /* Masthead */ /* Navigation */ #nav_wrap { height: 40px; width: 100%; background: #f0f0f0 url(../img/bg_masthead.gif) top repeat-x; } #nav, #nav a, #nav .current_page_item { background: transparent url(../img/img_primary_nav.gif) no-repeat 0 -80px; overflow: hidden; height: 40px; } #nav { position: relative; display: block; margin: 0 auto; width: 860px; } #nav a, #nav .current_page_item { display: block; position: absolute; top: 0; left: 0; border: 0;} #nav span { display: none; } #prim_nav_1 a, #prim_nav_1 .current_page_item { width: 56px; left: 24px; background-position: -24px -80px;} #prim_nav_1 a:hover, #prim_nav_1 a:focus { background-position: -24px -40px;} #prim_nav_1 a.current_page_item, #prim_nav_1 a:hover.current_page_item { background-position: -24px 0 !important;} #prim_nav_2 a, #prim_nav_2 .current_page_item { width: 84px; left: 100px; background-position: -100px -80px;} #prim_nav_2 a:hover, #prim_nav_2 a:focus { background-position: -100px -40px;} #prim_nav_2 a.current_page_item, #prim_nav_2 a:hover.current_page_item { background-position: -100px 0 !important;} #prim_nav_3 a, #prim_nav_3 .current_page_item { width: 97px; left: 203px; background-position: -203px -80px;} #prim_nav_3 a:hover, #prim_nav_3 a:focus { background-position: -203px -40px;} #prim_nav_3 a.current_page_item, #prim_nav_3 a:hover.current_page_item { background-position: -203px 0 !important;} #prim_nav_4 a, #prim_nav_4 .current_page_item { width: 76px; left: 319px; background-position: -319px -80px;} #prim_nav_4 a:hover, #prim_nav_4 a:focus { background-position: -319px -40px;} #prim_nav_4 a.current_page_item, #prim_nav_4 a:hover.current_page_item { background-position: -319px 0 !important;} #prim_nav_5 a, #prim_nav_5 .current_page_item { width: 86px; left: 414px; background-position: -414px -80px;} #prim_nav_5 a:hover, #prim_nav_5 a:focus { background-position: -414px -40px;} #prim_nav_5 a.current_page_item, #prim_nav_5 a:hover.current_page_item { background-position: -414px 0 !important;} #prim_nav_6 a, #prim_nav_6 .current_page_item { width: 100px; left: 519px; background-position: -519px -80px;} #prim_nav_6 a:hover, #prim_nav_6 a:focus { background-position: -519px -40px;} #prim_nav_6 a.current_page_item, #prim_nav_6 a:hover.current_page_item { background-position: -519px 0 !important;} #prim_nav_7 a, #prim_nav_7 .current_page_item { width: 104px; left: 638px; background-position: -638px -80px;} #prim_nav_7 a:hover, #prim_nav_7 a:focus { background-position: -638px -40px;} #prim_nav_7 a.current_page_item, #prim_nav_7 a:hover.current_page_item { background-position: -638px 0 !important;} #prim_nav_8 a, #prim_nav_8 .current_page_item { width: 75px; left: 760px; background-position: -760px -80px;} #prim_nav_8 a:hover, #prim_nav_8 a:focus { background-position: -760px -40px;} #prim_nav_8 a.current_page_item, #prim_nav_8 a:hover.current_page_item { background-position: -760px 0 !important;} /* Send a greeting */ #greeting_foot { height: 45px; width: 100%; background: url(../img/bg_snd_grting_foot.gif) top repeat-x; margin: 0 auto; } #greeting_foot .inner { position: relative; } #greeting_click_wrap a { position: absolute; top: -1px; right: 0; display: block; width: 180px; height: 24px; background: url(../img/btn_snd_grtng.gif) no-repeat; } #greeting { height: 420px; width: 100%; overflow: hidden; background: #dcd85a url(../img/bg_hdr_msg.gif) top repeat-x; } #greeting .inner { height: 290px; margin-top: 15px; background: url(../img/div_greeting_vert.gif) top center no-repeat; } #greeting #col_left { width: 360px; float: left; } #greeting h2 { padding: 10px 0 0 45px; text-transform: uppercase; font: normal 19px/1.6 "Times New Roman", Times, serif; color: #000; background: url(../img/icon_card.gif) left no-repeat; } #greeting h3 { font: bold 1.2em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; color: #000; text-transform: none; } #greeting p { font-size: 1.1em; color: #333; } #greeting #col_right { width: 400px; float: right; } #greeting #col_right h3 { margin-top: 15px; } .greeting_colour { text-align: center; float: left; margin: 10px 20px 0 0; } .greeting_colour input { margin-top: 5px; } .greeting_colour img { border: 2px solid #333; } input.text_field { width: 280px; padding: 3px; border: 1px solid #999; } input.text_field_alt { width: 120px; padding: 3px; border: 1px solid #999; float: left; margin-right: 5px; } #greeting #col_right textarea { width: 280px; height: 90px; padding: 3px; border: 1px solid #999; } #greeting #col_right select { padding: 1px; width: 70px; border: 1px solid #999; } #greeting #col_right table { margin: 8px 0 20px 0; padding: 0; } #greeting #col_right table td { padding-top: 5px; } td.col1 { padding-right: 10px; } td.col_alt { text-align: right; } #af_feedback p{ font-weight: bold; color: #fff;margin:0;} #af_feedback{background:#999900;padding:5px;padding:5px 10px;} #af_feedback_good p{ font-weight: bold; margin:0;color: #fff;} #af_feedback_good{background:#999900;padding:5px;padding:5px 10px;} /*#af_feedback{float: left;};*/ /* Home feature */ #home_feature { width: 860px; padding: 40px 0 0 0; margin: 0 0 15px 0; clear: both; } #home_feature_img { height: 345px; width: 860px; background: url(../img/rotate/rotate.php) top right no-repeat; } #home_feature .col_1 { text-align: center; } #home_feature h1 { display: block; background: url(../img/logo_home.gif) no-repeat; width: 133px; height: 152px; margin: 0 auto; } #home_quote { display: block; background: url(../img/text_home_intro3.gif) no-repeat; width: 414px; height: 176px; margin: 18px auto 0 auto; } /* Home Content */ #home_content { width: 860px; padding: 30px 0 45px 0; min-height: 300px; background: url(../img/bg_home_content.gif) center top no-repeat; } #home_content h2 { text-transform: uppercase; } #home_content .downloads li a { padding: 0 0 4px 0; } .admissions_form a { display: block; width: 170px; height: 18px; background: url(../img/btn_admission_form.gif) 0 0 no-repeat; margin-bottom:15px; } .admissions_form a:hover { background-position: -170px 0; } .patient_handbook a { display: block; width: 170px; height: 18px; background: url(../img/btn_patient_hbook.gif) 0 0 no-repeat; } .patient_handbook a:hover { background-position: -170px 0; } #home_content .col_1_a h3 { margin-top: 25px; } #home_content .col_1_a .news_teaser { margin: 3px 0 10px 0; } #home_content .col_1_a .news_teaser p { color: #666; margin: 0; } #home_content .col_1_a .news_teaser p.meta { color: #999; } #home_content .col_1_a .news_teaser h4 a { color: #333; font-weight:bold; } #home_content .col_1_a .news_teaser h4 { color: #666; font-weight:normal; } /* Thumbnail images */ #home_content .col_1_b .facility_thumbs { position: relative; height: 239px; width: 239px; background: url(../img/bg_dots_cross.gif) center no-repeat; } #home_content .col_1_b .facility_thumbs img { padding: 2px; border: 1px solid #ccc !important; } #home_content .col_1_b .facility_thumbs img:hover { border: 1px solid #999 !important; } .facility_thumbs img { position: absolute; } img#thumb_1 { top: 0; left: 0; } img#thumb_2 { top: 0; right: 0; } img#thumb_3 { bottom: 0; left: 0; } img#thumb_4 { bottom: 0; right: 0; } #sidebar .facility_thumbs { position: relative; height: 239px; width: 239px; background: url(../img/bg_dots_cross.gif) center no-repeat; } h2.h_alt { background: url(../img/div_small_divider.gif) center top no-repeat; padding: 22px 0 0 0; } #home_content .col_2_b h3 { margin-top: 7px; } #home_content .col_2_b p { font-size: 11px; color: #666; } #home_content .col_2_b .select_box { text-align: center; padding: 9px 0 0 0; width: 170px; height: 36px; background: url(../img/bg_ddown.gif) no-repeat; } #home_content .col_2_b .select_box select { width: 146px; } #home_content .col_2_b .watch_video h3 {background:url(../img/btn_experience_boulcott.jpg) no-repeat 0 0; display:block; width:170px; height:64px; text-indent:-999em; outline:none;margin-bottom:5px;} #home_content .col_2_b .watch_video h3 a {display:block; width:100%; height:100%;} #home_content .col_2_b .watch_video h4 {font-weight:normal; color:#666;} #home_content .col_2_b .watch_video h4 a {font-weight:bold; color:#333;} #sidebar h3.watch_video {background:url(../img/btn_experience_boulcott.jpg) no-repeat 0 0; display:block; width:170px; height:64px; text-indent:-999em; outline:none;margin:25px 0 5px;} #sidebar h3.watch_video a {display:block; width:100%; height:100%;} /* Inside Content */ #inside_main { width: 680px; float: left; margin: 0; z-index: 3; padding-bottom: 20px; } #inside_main .col_1 { width: 160px; } #inside_main .col_2 { width: 485px; float: left; margin-left: 15px; } #inside_main p { color: #666; } #inside_main p.intro { font: 1.4em/1.6 Georgia, "Times New Roman", Times, serif; color: #333; margin-top: 8px; padding: 0 0 30px 0; background: url(../img/div_home_main_divider.gif) center bottom no-repeat; } #inside_main .inside_images p.intro { width: 250px; } #inside_main .col_2 h3 { font: 2.3em/1.1 "Times New Roman", Times, serif; color: #993; text-transform: none; margin: 15px 0 0px 0 !important; padding: 0 !important; } #inside_main .col_2 h4 { font: 1.7em/1.4 "Times New Roman", Times, serif; color: #333; } #inside_main .col_1 ul { list-style: none; margin: 0; padding: 0; } #inside_main .col_1 ul li a { color: #666; font-size: 11px; line-height: 1.9; } #inside_main .col_1 ul li a.current_page_item { color: #000; } #inside_main .col_1 p { font-size: 11px; } #inside_main .col_1 p strong { font-weight: normal; color: #000; } #inside_main .col_2 ul { color: #666; list-style-image: url(../img/bullet.gif); margin-left: 10px; } #inside_main .col_2 .news_teaser p.intro { font: 1.2em/1.4 "Lucida Grande", Geneva, Arial, Helvetica, sans-serif; color: #333; margin-top: 8px; padding: 0; background: none; } #inside_main .col_2 .news_teaser { padding: 10px 0 30px 0; background: url(../img/div_home_main_divider.gif) bottom no-repeat; } #inside_main .single a img { float: right; padding: 5px; border: 1px solid #ccc !important; margin: 0 0 0 10px; } /* Inside Page Images */ .col_2 #images_box { float: right; width: 220px; padding: 0; margin: 10px -15px 10px 10px; } .col_2 #images_box img { margin: 0 0 15px 0; padding: 4px; border: 1px solid #ccc; background: #fff; } .col_2 #images_box img:hover { border: 1px solid #666; } /* Inside headers */ #inside_main h2 { display: block; width: 680px; height: 168px; } #inside_main h2 span { display: none; } #h_aboutus { background: url(../img/h_aboutus.gif) no-repeat; z-index: 10; } #h_specialists { background: url(../img/h_specialists.gif) no-repeat; z-index: 10; } #h_services { background: url(../img/h_services.gif) no-repeat; z-index: 10; } #h_facilities { background: url(../img/h_facilities.gif) no-repeat; z-index: 10; } #h_admissions { background: url(../img/h_admissions.gif) no-repeat; z-index: 10; } #h_contact { background: url(../img/h_contact.gif) no-repeat; z-index: 10; } #h_gpnews { background: url(../img/h_gpnews.gif) no-repeat; z-index: 10; } /* Sidebar */ #sidebar { width: 170px; float: right; padding: 0; } #sidebar h1 a { display: block; background: url(../img/logo_internal.gif) no-repeat; width: 170px; height: 137px; margin: 30px auto 25px auto; } #sidebar .contact_details p { color: #333; } #sidebar p { color: #666; font-size: 11px; } .side_box { width: 155px; background: url(../img/bg_crnr_sidebar.jpg) left top no-repeat; padding: 15px 0 0 15px; margin-bottom:30px; } .side_box ul { list-style: none; margin: 0; padding: 0; } .side_box ul li a { color: #666; font-size: 11px; line-height: 1.9; } .side_box .video_thumb { margin:8px 0 4px; } /* Breadcrums */ #bct { margin: -20px 0 20px 0; } #bct p { font-size: 10px; } /* Footer */ #footer { width: 100%; background: #f1f1f1 url(../img/bg_footer.gif) top repeat-x; padding: 25px 0 0 0; } #footer p { font-size: 1.1em; } #footer a { color: #333; text-decoration: none; } #footer a:hover { text-decoration: underline; } /* Specialists */ #container .specialist_list h3 { padding: 0 0 0 7px !important; background: url(../img/bg_a-z_grad.gif) left no-repeat; color: #fff !important; font: italic 1.5em/1.3 Georgia, "Times New Roman", Times, serif; } .doctor_list { width: 90px; float: left; margin: 5px 5px 5px 0; border: 1px solid #fff; } .doctor_name { width: 84px; padding: 3px; } .doctor_name:hover { background: #DEDA5A; } .doctor_name p { font-size: 10px; line-height: 1.3; } .doctor_name a { color: #000; text-decoration: none; } .doctor_list:hover { border: 1px solid #ccc; background: #DEDA5A; } h3#doctor_title { font: normal 2.5em/1.6 Georgia, "Times New Roman", Times, serif !important; color: #333 !important; border-bottom: 1px dotted #959F91; padding-bottom: 12px; } #doctor_quals { font-size: 12px; text-transform: uppercase; color: #666; font-style: italic; } #doctor_detail { margin-top: 12px; } #doctor_detail p { font: 1.3em/1.6 Georgia, "Times New Roman", Times, serif; } #doctor_detail h4 { font: italic 1.7em/1.4 Georgia, "Times New Roman", Times, serif !important; color: #000 !important; } .doctor_pic { float: right; border-bottom: 1px dotted #ccc; border-left: 1px dotted #ccc; margin: 0 0 5px 13px; } /* Services */ .services h3#service_title { font: normal 2.5em/1.6 Georgia, "Times New Roman", Times, serif !important; color: #333 !important; } .col_2 #services_box { float: right; width: 200px; background: url(../img/bg_crnr_sidebar.jpg) left top no-repeat; padding: 0 10px 0 15px; margin: 0 0 10px 10px; } .col_2 #services_box h3 { font: bold 1.1em/1.3 Georgia, "Times New Roman", Times, serif; color: #000; text-transform: uppercase; } .col_2 #services_box ul { list-style: none; margin: 0; padding: 0; } .col_2 #services_box ul li a { color: #666; font-size: 11px; line-height: 1.9; } /* Contact Page */ #contact_page p.intro { background: none !important; padding-bottom: 0; } .col_2 #contact_box { float: right; width: 200px; background: url(../img/bg_crnr_sidebar.jpg) left top no-repeat; padding: 10px 10px 80px 15px; margin: 0 0 10px 10px; } .col_2 #contact_box p { font-size: 11px; } .col_2 #contact_box p strong { color: #333; } #contact_map_label { background: #eee; padding: 3px 4px 4px 4px; width: 482px; margin: 0 0 5px 0; } #contact_map_label p { margin: 0; font-size: 10px; line-height: 1.3; color: #333; } img#contact_map { padding: 5px; border: 1px solid #ccc !important; } /* Lightbox */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a { outline: none; height: 30px; } #prevLink{ position: absolute; top: 20px; left: 10px; width: 30px; height: 30px; background: transparent url(../img/left_arrow.gif) no-repeat; /* Trick IE into showing hover */ } #nextLink{ position: absolute; top: 20px; right: 10px; width: 30px; height: 30px; background: transparent url(../img/right_arrow.gif) right 0 no-repeat; /* Trick IE into showing hover */ } #prevLink:hover, #prevLink:visited:hover { background: url(../img/left_arrow.gif) left 0 no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../img/right_arrow.gif) right 0 no-repeat; } #imageDataContainer{ color: #fff; font: normal 12px/1.3 "Lucida Grande" Geneva, Arial, Helvetica, sans-serif; background-color: #121212; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; } #imageData{ padding:0 10px; color: #fff; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; padding-top:5px; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 67px; height: 22px; float: right; padding: 0; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } #close_button:hover{cursor:pointer} /*#imageDataContainer{ color: #fff; font: normal 12px/1.3 "Lucida Grande" Geneva, Arial, Helvetica, sans-serif; background-color: #121212; margin: 0 auto; padding: 3px 0; width: 100%; height: 60px; } #imageData { padding: 0 10px; color: #fff; position: relative; } #imageData #imageDetails { width: 200px; margin: 6px auto 0 auto; text-align: center; } #imageData #caption { font-weight: normal; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose { width: 67px; height: 16px; position: absolute; top: 20px; right: 10px; } #imageData #bottomNav { } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }*/