/*--------------------- Last Modified 2006.11.10 ---------------------*/ /*-------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------ Copyright Einstein Industries 2006. Used with Permission. May not be duplicated or reproduced. Please check for cross-browser compatibility prior to making changes MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari CSS Document - layout.css /*-------------------------------------------------------------------------------------*/ /* undo some default styling of common (X)HTML browsers /*------------------------------------------------------------------------------------*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, html, label, table, tr, td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset, img, a img, :link img, :visited img { border:0; } address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; color: #000; } h1, h2, h3, h4, h5, h6 { font-size:100%; } q:before, q:after { content:''; } /* ------------------------ GLOBAL ELEMENTS ------------------------ */ /* ------------------------ type selectors ------------------------ */ html { background:#FFFFFF url("../images/bg-html.jpg") top repeat-x; } body { background: url("../images/bg-body.jpg") top center no-repeat; text-align:center; font:13px/16px Arial, Helvetica, sans-serif; color:#000; } blockquote { margin-left:10px; margin-right:10px; } h1 { font-size:1.2em; color:#0b4777; } h2 { font-size:1.1em; color:#0d7dba; } h3 { font-size:1.0em; color:#1ca8d7; } h1 span, h2 span, h3 span { /* Breaks Cufon in IE */ /*display:none;*/ } a:link, a:visited { color:#0d7dba; text-decoration:underline; outline:none; } a:hover, a:active { color:#000; text-decoration:underline; outline:none; } /* ------------------------ classes ------------------------ */ /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ .clear { clear: both; } div.clear { height:.01em; clear:both; overflow:hidden; } div.clear-h2 { height:10px; clear:both; overflow:hidden; } p.back-to-top { text-align:right; display:block; padding-right:15px; background:url("../images/bullet-back-to-top.jpg") right no-repeat; } p.more-info { text-align:right; display:block; } img.img-left { float:left; margin:0px 0px 0px 0px; } img.img-right { float:right; margin:0px 0px 0px 0px; } h3.ivf-center { padding-left:140px; } ol.faqs li { list-style:lower-alpha; } ol.faqs { padding-left:30px; } /* ------------------------ form elements ------------------------ */ form { width:160px; margin:10px 0 15px 0; /* set margin left and right below */ } form label { font-size:.95em; } form br { line-height:0; height:0; } /* defaults vertical spacing between fields */ input, textarea, select { background-color:#ffffff !important; /* to prevent highlighting by Google Toolbar */ border:1px solid #0d7dba; color:#000; width:155px; /* 5 pixles smaller than form width !important */ height:18px; line-height:18px; vertical-align: middle; margin-bottom:4px; /* sets vertical spacing between fields */ padding-top:1px; /* vertically position text in input/textarea field */ padding-left:4px; /* horizontally position text in input/textarea field */ font-family: Arial, Helvetica, sans-serif; font-size:1.0em; } select { width:150px; height: 20px; padding:0; } /* same width as form - !important */ textarea { height:66px; overflow:auto; } #contact_business { display: none; } /* do not remove */ /* ------------------------ SPECIFIC ELEMENTS ------------------------ */ /* ------------------------ main contact form ------------------------ */ #contact-main { margin:20px 0 10px 0; } #contact-main label { width:220px; position:relative; display:block; text-align:right; margin-bottom:10px; font-size:1.0em; } #contact-main label input, #contact-main label textarea, #contact-main label select { width:170px; position:absolute; left:110%; top:-2px; } #contact-main label select { width:175px; } /* fixes display issue - 5px larger than input field */ #contact-main label textarea { height:100px; overflow:auto; } /* ------------------------ submit button form elements ------------------------ */ input.submit, input.submit-contact-main { width:60px; height:20px; cursor:pointer; padding:0; } input.submit-contact-main { margin:95px 0 0 243px; } /* defines placement of contact-main submit button */ input.submit-image, input.submit-contact-main { /* REMOVE IF NOT USED */ background:url("../images/btn-submit.jpg"); width:88px; height:35px; border:none; cursor:pointer; } /* ------------------------------- CONTENT FRAMEWORK ------------------------------- */ /* ------------------------ main framework ------------------------ */ #wrap { width:810px; margin:0 auto; text-align:left; position:relative; } /* ------------------------ masthead framework ------------------------ */ #masthead { position:relative; background:url("../images/masthead.jpg") no-repeat; /*height:109px;*/ height:136px; } /* index page link within #masthead */ #masthead a.home-link { position:absolute; left:0px; width:318px; top:0px; height:109px; } #masthead a.login-link { position:absolute; left:620px; width:170px; top:60px; height:35px; } #masthead a.login-link:hover { /*background: url("../images/masthead.jpg") -620px -169px no-repeat;*/ background: url("../images/masthead.jpg") -620px -196px no-repeat; } #masthead a span { display:none; } #column-center { width: 750px; margin: 0px auto; /*margin-top:30px;*/ margin-top:50px; padding: 0px 30px; } /* ------------------------ column-left framework ------------------------ */ #column-left { width:295px; float:left; padding-bottom: 299px; background: url("../images/col-left-bottom.jpg") bottom no-repeat; } #column-left.products { background-image: none; margin-top: 21px; } body#index #column-left { background: url("../images/img-baby-index.jpg") top no-repeat; padding: 223px 0px 0px 0px; } #column-left p, #column-left h1, #column-left h2, #column-left h3, #column-left ul, #column-left dl { margin:0px 20px 10px 30px; } #column-left form { padding-left:30px; } /* set form margin here */ /* single column list */ #column-left ul { padding-left:5px; } #column-left.products form { padding-left: 0px; } #column-left ul li { background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:10px; /* pushes text to the right to display bg img */ } /* definition list */ #column-left dl { padding-left:5px; } #column-left dl dt { font-weight:bold; color:#99CC00; } #column-left dl dd { background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:10px; /* pushes text to the right to display bg img */ margin-left:5px; } /* ------------------------ column-right framework ------------------------ */ #column-right { width:515px; float:left; } #column-right p, #column-right h1, #column-right h2, #column-right h3, #column-right ul, #column-right dl { margin:0px 20px 10px 3px; } #column-right form { margin-left:0px; } /* single column list */ #column-right ul { padding-left:5px; } #column-right ul li { padding-left:0px; list-style-type: none; margin-left: 30px; text-align: left; list-style-image: url(../images/bullet.jpg); list-style-position: outside; } /* multi column list */ #column-right ul.multi { padding-left:5px; } #column-right ul.multi li { background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:10px; /* pushes text to the right to display bg img */ float:left; width:150px; line-height:20px; } /* definition list */ #column-right dl { padding-left:5px; } #column-right dl dt { font-weight:bold; color:#99CC00; } #column-right dl dd { background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:10px; /* pushes text to the right to display bg img */ margin-left:5px; } /* ------------------------ header framework ------------------------ */ #header-flash { height:300px; } /* sets height for the flash header - REMOVE IF NOT USED */ /* --------------- no flash text styles ----------------------*/ #header-flash p, #header-flash noscript { padding: 5px 0 0 30px; color: #FFFFFF; } #header-flash a:link, #header-flash a:visited { color: #FFFFFF; } #header-flash a:hover, #header-flash a:active { color: #FFFF00; text-decoration: none; } #header-graphic { height:300px; } /* sets height for all non-flash headers */ body#index #header-graphic { background:url("../images/header-index.jpg"); } body#about #header-graphic { background:url("../images/header-about.jpg"); } body#contact #header-graphic { background:url("../images/header-contact.jpg"); } body#thankyou #header-graphic { background:url("../images/header-thankyou.jpg"); } body#sitemap #header-graphic { background:url("../images/header-sitemap.jpg"); } /* ------------------------ subhead framework ------------------------ */ h1 { display: block; font-size: 23px; margin-top: 20px !important; color: #0787be; font-weight: bolder; } #subhead { height:54px; } /* sets height for all subheads */ body#index #subhead { background:url("../images/subhead-index.jpg"); } body#test-search #subhead { background:url("../images/subhead-test-search.jpg"); } body#history #subhead { background:url("../images/subhead-history.jpg"); } body#links #subhead { background:url("../images/subhead-links.jpg"); } body#faqs #subhead { background:url("../images/subhead-faqs.jpg"); } body#physician-services #subhead { background:url("../images/subhead-physician-services.jpg"); } body#test-menu #subhead { background:url("../images/subhead-test-menu.jpg"); } body#test-explained #subhead { background:url("../images/subhead-test-explained.jpg"); } body#specimen-requirements #subhead { background:url("../images/subhead-specimen-requirements.jpg"); } body#fda-donor #subhead { background:url("../images/subhead-fda-donor.jpg"); } body#infertility-panels #subhead { background:url("../images/subhead-infertility-panels.jpg"); } body#contact #subhead { background:url("../images/subhead-contact.jpg"); } body#thankyou #subhead { background:url("../images/subhead-thankyou.jpg"); } body#sitemap #subhead { background:url("../images/subhead-sitemap.jpg"); } /* ------------------------ subhead framework with varying heights ------------------------ */ #news { padding:30px 0px 20px 0px; /* background:url("../images/index-news-bottom.jpg") bottom no-repeat; */ overflow: hidden; } #title-news { background: url("../images/title-news-index.jpg"); height: 30px; margin: 0px 0px 0px 30px; width: 109px; } #news ul { float: right; width: 660px; } #news ul li { float: left; width: 290px; display: inline; margin-left: 15px; line-height: 18px; background:transparent url("../images/bullet.jpg") 0px 6px no-repeat; padding-left: 20px; } #list-left { margin-left:16px; width: 190px; float: left; display:block; } #list-right { margin-left:30px; float: left; width: 190px; display:block; } /* ------------------------ title framework with varying heights ------------------------- */ #title-contact { height:54px; background:url("../images/title-contact.jpg"); } #title-contact2 { height:54px; background:url("../images/title-contact2.jpg"); } #title-our-procedures { height:35px; background:url("../images/title-our-procedures.jpg"); } /* ------------------------------------- Buttons ---------------------------------------- */ #click-to-call { height:186px; display:block; background:url("../images/click-to-call.jpg") no-repeat; position: relative; } #click-to-call a { position: absolute; top: px; left: px; width: px; height: px; } #click-to-call a:hover { background:url("../images/click-to-call.jpg") -100px 0 no-repeat; /* -100px = horizontal img shift, 0px = vertical shift from top */ } #click-to-call span { display:none; } /* ------------------------ services-buttons index ------------------------ */ body#index #services-buttons { background:url("../images/services-buttons-index.jpg") no-repeat; width:810px; height:344px; margin:0; padding:0; } body#index #services-buttons span { display: none; } body#index #services-buttons li, body#index #services-buttons a { height:168px; display:block; } /* change height here also */ body#index #services-buttons li { float:left; list-style:none; _display:inline; position:relative; } body#index #services-buttons-01 { width: 255px; margin-left: 30px; } body#index #services-buttons-02 { width: 255px; } body#index #services-buttons-03 { width: 257px; } body#index #services-buttons-04 { width: 255px; margin-left: 30px; } body#index #services-buttons-05 { width: 255px; } body#index #services-buttons-06 { width: 257px; } /*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */ body#index #services-buttons-01 a:hover { background:url("../images/services-buttons-index.jpg") -30px -344px no-repeat; } body#index #services-buttons-02 a:hover { background:url("../images/services-buttons-index.jpg") -285px -344px no-repeat; } body#index #services-buttons-03 a:hover { background:url("../images/services-buttons-index.jpg") -540px -344px no-repeat; } body#index #services-buttons-04 a:hover { background:url("../images/services-buttons-index.jpg") -30px -512px no-repeat; } body#index #services-buttons-05 a:hover { background:url("../images/services-buttons-index.jpg") -285px -512px no-repeat; } body#index #services-buttons-06 a:hover { background:url("../images/services-buttons-index.jpg") -540px -512px no-repeat; } /* COPIED */ body#index #services-buttons-01 a.hover {background:url("../images/services-buttons-index.jpg") -30px -344px no-repeat;} body#index #services-buttons-02 a.hover {background:url("../images/services-buttons-index.jpg") -285px -344px no-repeat;} body#index #services-buttons-03 a.hover {background:url("../images/services-buttons-index.jpg") -540px -344px no-repeat;} body#index #services-buttons-04 a.hover {background:url("../images/services-buttons-index.jpg") -30px -512px no-repeat;} body#index #services-buttons-05 a.hover {background:url("../images/services-buttons-index.jpg") -285px -512px no-repeat;} body#index #services-buttons-06 a.hover {background:url("../images/services-buttons-index.jpg") -540px -512px no-repeat;} /* ------------------------ services-buttons ------------------------ */ #column-left #services-buttons { background:url("../images/services-buttons-inside.jpg") no-repeat; width:250px; height:878px; margin:10px 0 0 30px; padding:0; } #services-buttons span { display: none; } #services-buttons li, #services-buttons a { width:250px; height:146px; display:block; } /* change height here also */ #column-left #services-buttons li { float:left; list-style:none; _display:inline; position:relative; background:none; padding:0; margin:0; border: solid 0px #000000; } #services-buttons-01 { height:145px; } #services-buttons-02 { height:146px; } #services-buttons-03 { height:146px; } #services-buttons-04 { height:146px; } #services-buttons-05 { height:146px; } #services-buttons-06 { height:146px; } /*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */ #services-buttons-01 a:hover { background:url("../images/services-buttons-inside.jpg") -255px 0px no-repeat; } #services-buttons-02 a:hover { background:url("../images/services-buttons-inside.jpg") -255px -146px no-repeat; } #services-buttons-03 a:hover { background:url("../images/services-buttons-inside.jpg") -255px -292px no-repeat; } #services-buttons-04 a:hover { background:url("../images/services-buttons-inside.jpg") -255px -438px no-repeat; } #services-buttons-05 a:hover { background:url("../images/services-buttons-inside.jpg") -255px -584px no-repeat; } #services-buttons-06 a:hover { background:url("../images/services-buttons-inside.jpg") -255px -730px no-repeat; } /* COPY */ #services-buttons-01 a.hover {background:url("../images/services-buttons-inside.jpg") -255px 0px no-repeat;} #services-buttons-02 a.hover {background:url("../images/services-buttons-inside.jpg") -255px -146px no-repeat;} #services-buttons-03 a.hover {background:url("../images/services-buttons-inside.jpg") -255px -292px no-repeat;} #services-buttons-04 a.hover {background:url("../images/services-buttons-inside.jpg") -255px -438px no-repeat;} #services-buttons-05 a.hover {background:url("../images/services-buttons-inside.jpg") -255px -584px no-repeat;} #services-buttons-06 a.hover {background:url("../images/services-buttons-inside.jpg") -255px -730px no-repeat;} /*-------------- OPTIONAL - Keeps the hover state on each page based on body id ------------- */ body#physician-services #services-buttons-01 { background:url("../images/services-buttons-inside.jpg") -255px 0px no-repeat; } body#diagnostic-testing #services-buttons-02 { background:url("../images/services-buttons-inside.jpg") -255px -145px no-repeat; } body#patient-information #services-buttons-03 { background:url("../images/services-buttons-inside.jpg") -255px -290px no-repeat; } body#research-and-clinical-services #services-buttons-04 { background:url("../images/services-buttons-inside.jpg") -255px -435px no-repeat; } body#fda-donor-screening #services-buttons-05 { background:url("../images/services-buttons-inside.jpg") -255px -580px no-repeat; } body#reproductive-health #services-buttons-06 { background:url("../images/services-buttons-inside.jpg") -255px -725px no-repeat; } /* ------------------------footer framework ------------------------ */ #footer { background: url("../images/bottom-footer.jpg") top no-repeat; padding-top: 90px; width:810px; margin:0 auto; text-align:left; line-height: 2; font-size:12px; overflow: hidden; } #footer p { color:#000; margin:0px 0px 10px 35px; } #footer a:link, #footer a:visited { color:#0b4777; } #footer a:hover, #footer a:active { color:#000; } #footer div.ul-wrap { margin:0px 0px 10px 35px; overflow: hidden; } #footer ul { margin: 0px 0px 0px -7px; width: 700px; } #footer li { /* if your li's float, you can adjust border height w/ line-height */ padding:0 5px 0 7px; /* adjusts the spacing between each li display and border-left */ display: inline; border-left: 1px solid #0b4777; white-space: nowrap; } #footer li.first { border: none; padding-left: 0px; } /* ------------------------ MAIN NAVIGATION FRAMEWORK ------------------------ */ /* ------------------------ horizontal sprite nav ------------------------ */ #nav { /* background:url("../images/nav.png") no-repeat ;*/ width:810px; height:82px; margin:0; padding:0; } #nav span { display: none; } #nav li, #nav a { height:81px; display:block; } /* change height here also */ #nav li { float:left; list-style:none; _display:inline; position:relative; } #nav-01 { width: 63px; margin-left: 26px; } #nav-02 { width: 73px; } #nav-03 { width: 83px; } #nav-04 { width: 55px; } #nav-05 { width: 87px; } /*-------------- (-79px) X position of button / (-83px) height of image from above ------------- */ #nav-01 a:hover { background:url("../images/nav.png") -26px -82px no-repeat #1CADD9; } #nav-02 a:hover { background:url("../images/nav.png") -89px -82px no-repeat #1CADD9; } #nav-03 a:hover { background:url("../images/nav.png") -162px -82px no-repeat #1CADD9; } #nav-04 a:hover { background:url("../images/nav.png") -245px -82px no-repeat #1CADD9; } #nav-05 a:hover { background:url("../images/nav.png") -300px -82px no-repeat #1CADD9; } /*-------------- OPTIONAL - Keeps the hover state on each page based on body id ------------- */ body#index #nav-01 { background:url("../images/nav.png") -26px -82px no-repeat #1CADD9; } body#about-us #nav-02 { background:url("../images/nav.png") -89px -82px no-repeat #1CADD9; } body#resources #nav-03 { background:url("../images/nav.png") -162px -82px no-repeat #1CADD9; } body#faqs #nav-04 { background:url("../images/nav.png") -245px -82px no-repeat #1CADD9; } body#contact #nav-05 { background:url("../images/nav.png") -300px -82px no-repeat #1CADD9; } .none {display:none;} #rss_block { display:block; /* width:400px;*/ width:131px; /*height:30px;*/ height:51px; top:140px; /* left:536px;*/ margin-left:652px; position:absolute; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .contact_us_link{ background:url("../images/contact_us.png") top left no-repeat; height:51px; width:131px; display:block; } #search_form { display:block; width:400px; height:30px; top:130px; left:536px; position:absolute; } #search_form form input {float:left;} #search_form form {width:400px;} input.search { /* REMOVE IF NOT USED */ background:url("../images/btn-search.jpg"); width:85px; height:34px; border:none; cursor:pointer; margin:0 0 0 10px; padding:0; } input#q {color:#147BB6; font-size:10px; padding:4px 0 0 3px; font-weight:bold; height:21px;} p.summary {color:#565656;} #search_results_header {font-size:10px;} div.search_result {margin-top:20px;} span.url {color:#0B4877;} strong.found_query_string {background-color:#deeff6; color:#000;} label.error { color: red; font-size: 10px !important; } label.res { color:#0d7dba; font-size: 11px !important; font-weight: bolder; display: none; margin-left: 30px; } h1#cufon, h2#cufon, h3#cufon { width: 500px; overflow: hidden; font-weight: normal !important; } h1#cufon span, h2#cufon span, h3#cufon span { display:block !important; float: left; } ul.sitemap li { list-style: none !important; padding: 2px !important;} /* Widgets */ #sidebar .products h3.widgettitle { font-size: 20px; margin-left: 0px; background: transparent url("../images/sidebar-hr.gif") no-repeat 0px bottom; margin-bottom: 5px; padding: 0 0 7px 10px; } #column-left.products p, #column-left.products .widget-box p { margin-left: 0px; } #column-left.products .widget-box { width: 260px; padding-left: 10px; margin-bottom: 30px; } #column-left .widget-box .content { width: 91%; margin: auto; color: #333; } /* E-Commerce */