/* main.css Global Stylesheet Created: Creator: Matt Kircher Pixels to Ems ----------------------------------- PX EM PX EM 10 0.625 21 1.313 11 0.689 22 1.375 12 0.750 23 1.438 14 0.875 24 1.500 15 0.938 25 1.563 16 1.000 26 1.625 17 1.064 27 1.688 18 1.125 28 1.750 19 1.188 29 1.813 20 1.250 30 1.875 */ /* Imported Styles --------------------------------------------------------*/ @import url("reset.css"); @import url("clearing.css"); @import url("thickbox.css"); /* General --------------------------------------------------------*/ body{ font-family:Arial, Helvetica, sans-serif; font-size:1em; text-align:center; color:#0060A7; } a{ color:#F59324; font-weight:bold; text-decoration:none; } a:hover{ color:#F59324; } h1{ font-size:2.0em; } h2{ font-size:1.8em; } h3{ font-size:1.6em; } h4{ font-size:1.4em; } h5{ font-size:1.2em; } h6{ font-size:1.0em; } hr{ border:none; color:#90BDF9; background-color:#90BDF9; width:100%; margin:15px 0px; height:1px; } sup, sub{ font-size:0.5625em; position:relative; } sup{ top:-7px; } sub{ top:5px; } form{ padding:25px; background-color:#035591; } fieldset{ padding:15px 0px 10px; } input, select, textarea{ border:2px solid #012947; border-top:none; border-left:none; } input, textarea{ padding:2px 3px; } /* IE6 PNG Fix */ * html #logo a, * html #identity a, * html #bonine_health_info .product_header h2 b{ behavior:url(iepngfix.htc); } /* Classes --------------------------------------------------------*/ /* colors */ /* form */ .required{} .required_field{ color:#FFF2A8 !important; font-weight:bold; } .required_attention{} .warning{} /* general elements */ .side_image{ margin-bottom:10px; border:none !important; } .movie_clip_link a{ display:block; margin:5px 10px 5px 0px; text-align:center !important; } .designing_spaces a{ padding-top:104px; width:147px; background:url(../images/content/designing_spaces_movie.png) top left no-repeat; } /* Wrap --------------------------------------------------------*/ #wrap{ text-align:left; margin:auto; margin-top:25px; margin-bottom:50px; width:800px; padding:0px; } /*IE7*/ * + html .home{ padding-top:25px !important; } /* Header --------------------------------------------------------*/ #header{} #masthead{ height:112px; width:800px; background:url(../images/masthead_bg.jpg) top left no-repeat #FFF; overflow:hidden; position:relative; z-index:100; } /* logo */ #logo{ display:inline; } #logo a{ float:left; display:block; width:248px; height:79px; background:url(../images/logo.png) top left no-repeat transparent; text-indent:-100000px; overflow:hidden; position:relative; top:15px; left:25px; } /*IE6*/ * html #logo a{ background-image:url(../images/logo.gif); } /* identity */ #identity{ float:right; position:relative; width:275px; top:120px; font-size:0.689em; } #identity a{ float:left; display:block; position:relative; top:0px; left:0px; text-indent:-10000px; overflow:hidden; top:-120px; } #identity a.bonine{ background:url(../images/content/masthead_product_bonine.png) top left no-repeat transparent; width:108px; height:95px; z-index:1002; } #identity a.bonine_kids{ background:url(../images/content/masthead_product_bonine_kids.png) top left no-repeat transparent; width:92px; height:96px; z-index:1001; left:-5px; } /* Navigation --------------------------------------------------------*/ /* functional-nav */ #functional-nav{ height:30px; } #functional-nav ul{ float:right; } #functional-nav li{ float:left; font-size:0.689em; margin-right:10px; padding-right:10px; border-right:1px solid #0060A7; } #functional-nav li.end_nav{ border:none; padding-right:0px;} #functional-nav li a{} #functional-nav li a:hover, #functional-nav li.selected a{} /* main-nav */ #main-nav{ height:42px; background:url(../images/main_nav_bg.png) top left no-repeat #FFF; padding-left:25px; margin:10px 0px 10px; } #main-nav ul{ display:inline; } #main-nav li{ float:left; height:28px; padding:7px 27px 6px 0px; margin-right:25px; border-right:2px solid #EE9824; } .subpage #main-nav li{ padding:7px 17px 6px 0px; margin-right:15px; } #main-nav li.end_nav{ padding-right:0px; border-right:none; margin-right:0px; } #main-nav li a{ display:block; background-image:url(../images/main_nav_bg.png); background-repeat:no-repeat; background-color:transparent; height:28px; text-indent:-100000px; overflow:hidden; } #main-nav li a:hover, #main-nav li.selected a{} #main-nav li#mn-home a{ background-position:0px -42px; width:46px; } #main-nav li#mn-original a{ background-position:-46px -42px; width:133px; } #main-nav li#mn-kids a{ background-position:-179px -42px; width:138px; } #main-nav li#mn-faq a{ background-position:-317px -42px; width:41px; } #main-nav li#mn-where a{ background-position:-358px -42px; width:118px; } #main-nav li#mn-contact a{ background-position:-476px -42px; width:97px; } #main-nav li#mn-home.selected a, #main-nav li#mn-home a:hover{ background-position:0px -70px; } #main-nav li#mn-original.selected a, #main-nav li#mn-original a:hover{ background-position:-46px -70px; } #main-nav li#mn-kids.selected a, #main-nav li#mn-kids a:hover{ background-position:-179px -70px; } #main-nav li#mn-faq.selected a, #main-nav li#mn-faq a:hover{ background-position:-317px -70px; } #main-nav li#mn-where.selected a, #main-nav li#mn-where a:hover{ background-position:-358px -70px; } #main-nav li#mn-contact.selected a, #main-nav li#mn-contact a:hover{ background-position:-476px -70px; } /*IE6*/ * html #main-nav{ background:url(../images/main_nav_bg.gif) top left no-repeat #FFF; } * html #main-nav li a{ background-image:url(../images/main_nav_bg.gif); } /* sub-nav */ #sub-nav{} #sub-nav li{} #sub-nav li.end_nav{} #sub-nav li a{} #sub-nav li a:hover, #sub-nav li.selected a{} /* Content --------------------------------------------------------*/ #content{ font-size:0.75em; line-height:1.2em; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6{ margin:7px 0px; } #content ul{ list-style:disc; padding-left:20px; } #content ul li{ margin-bottom:3px; margin-top:3px; } #content p{ margin-bottom:10px; } #content p small{ font-size:0.7272em; font-family:Verdana, Arial, Helvetica, sans-serif; } #main-content{} #sub-content{} .subpage #content{ color:#FFF; } .subpage #main-content{ float:left; width:460px; min-height:400px; margin-right:10px; background-color:#0060A7; padding:20px; } .subpage .fullpage{ float:none !important; width:760px !important; margin-right:0px !important; } /*IE6*/ * html .subpage #main-content{ width:490px !important; } * html .subpage #content div.fullpage{ width:800px !important; } /*IE7*/ * + html .subpage #main-content{ width:490px !important; } * + html .subpage #content div.fullpage{ width:800px !important; } .subpage #sub-content{ float:right; width:290px; } /* home areas */ #home-area1{ height:236px; background:url(../images/content/home_area1_bg.jpg) top left no-repeat #FFF; } #home-area1 h2{ float:left; position:relative; z-index:1004; top:37px; left:20px; } #home-area1 ul{ display:block; background-color:#FFF; width:545px; padding:50px 20px 30px 50px; position:relative; z-index:1003; top:30px; left:-15px; } #home-area1 p{ float:left; position:relative; z-index:1004; top:5px; left:20px; line-height:1em; } /*IE6*/ * html #home-area1 h2{ margin-bottom:-1000px; top:22px; } * html #home-area1 ul{ top:15px; } * html #home-area1 p{ top:-10px; } /*IE7*/ * + html #home-area1 h2{ margin-bottom:-1000px; top:22px; } * + html #home-area1 ul{ top:15px; } * + html #home-area1 p{ top:-10px; } #home-area2{ height:165px; } #home-area2 h3{ display:none; } #home-area2 ul{ display:inline; list-style:none; padding-left:0px !important; } #home-area2 li{ float:left; margin-top:10px !important; } #home-area2 li a{ display:block; width:195px; height:155px; text-align:center; padding-top:5px; color:#FFF; text-indent:-10000px; overflow:hidden; } #home-area2 li a:hover{ color:#FFF; } .home_jump1{ background:url(../images/content/home_jump1_bg.jpg) top left no-repeat #FFF; margin-right:7px; } .home_jump2{ background:url(../images/content/home_jump2_bg.jpg) top left no-repeat #FFF; margin-right:6px; } .home_jump3{ background:url(../images/content/home_jump3_bg.jpg) top left no-repeat #FFF; margin-right:7px; } .home_jump4{ background:url(../images/content/home_jump4_video_bg.jpg) top left no-repeat #FFF; margin-right:0px; } /* health cards */ .health_card{} .health_card div.product_header{} .health_card div.health_info{} .health_card div.health_info h4{ color:#90BDF9; font-size:1.0909em; margin-top:25px !important; } .health_card div.health_info ul{ padding-left:30px; } .health_card div.health_info p, .health_card div.health_info ul{ margin-bottom:7px !important; line-height:1.2em !important; } .active_ingredients{ margin-top:25px; width:100%; } .active_ingredients th{ color:#90BDF9; font-size:1.0909em; padding-bottom:10px; } .active_ingredients th span{ color:#FFF; } .active_ingredients td.ingredient{ width:75%; background:url(../images/content/ingredient_dots.jpg) bottom left repeat-x #0060A7; border-right:5px solid #0060A7; } .active_ingredients td.ingredient span{ display:block; float:left; background-color:#0060A7; padding-right:5px; } .active_ingredients td.purpose{ width:25%; } .product_header h2, .product_header h3{ color:#90BDF9; font-size:1.0909em; } #bonine_health_info .product_header h2{ float:left; width:460px; margin-right:-260px; padding-top:10px; text-transform:uppercase; } #bonine_health_info .product_header h2 b{ float:left; display:block; overflow:hidden; text-indent:-1000px; background:url(../images/content/bonine_logo.png) top left no-repeat #0060A7; width:190px; height:48px; position:relative; top:-10px; } #bonine_health_info .product_header h3{ float:left; position:relative; top:22px; left:-10px; } #bonine_health_info .product_header p{ float:left; width:250px; position:relative; top:15px; left:-10px; font-size:0.818em; line-height:1em; } #bonine_kids_health_info .product_header h2{ float:left; display:block; overflow:hidden; text-indent:-1000px; background:url(../images/content/bonine_kids_logo.png) top left no-repeat #0060A7; width:185px; height:86px; position:relative; top:-10px; } #bonine_kids_health_info .product_header p{ float:left; width:250px; position:relative; top:30px; left:10px; font-size:1.636em; line-height:1.2em; text-align:center; } /* faq */ #faq{ margin:15px 0px; } #faq dt, #faq dd{ cursor:pointer; } #faq dt{ font-weight:bold; margin-bottom:7px; } #faq dd{ padding-left:15px; background:url(../images/content/checkmark.jpg) 0px 0px no-repeat #0060A7; margin-bottom:20px; } #faq dt.hover, #faq dd.hover{ color:#FFF2A8; } /* vendors */ #vendors{ margin:15px 0px; padding-bottom:15px; } #vendors ul{} #vendors li{ float:left; width:33%; list-style:none !important; } #vendors li a{ color:#FFF; } /* contact form */ #contact-area, #thanks-area{} #contact-area div.col1, #contact-area div.col2, #thanks-area div.col1, #thanks-area div.col2{ float:left; } #contact-area div.col1, #thanks-area div.col1{ width:25%; } #contact-area div.col2{ width:70%; margin-left:5%; } #thanks-area div.col2{ background-color:#035591; width:60%; margin-left:5%; padding:25px 5%; } /*IE7*/ * + html #contact-area div.col2{ width:65% !important; } * + html #thanks-area div.col2{ width:55% !important; } #contactForm .area1 div{ width:50%; float:left; margin-bottom:10px; } #contactForm label, #contactForm div span.note{ display:block; } #contactForm label{ margin-bottom:5px; color:#90BDF9; } #contactForm div span.note{ font-size:0.8181em; } #contactForm #formMessage, .recaptchatable{ width:90%; } #contactForm #formMessage, #contactForm #recaptcha, #contactForm #formPermissionLabel{ margin-bottom:12px; } .recaptchatable{ background-color:#FFF; } #contactForm #formPermissionLabel{ font-size:0.818em; font-weight:normal; } #contactForm #formPermissionLabel input{ float:left; margin:0px 10px 10px 0px; } #formSubmit, #formReset{ border:none; background-color:#035591; cursor:pointer; padding:0px; } #formSubmit span, #formReset span{ display:block; background-image:url(../images/content/form_buttons.jpg); background-repeat:no-repeat; background-color:transparent; text-indent:-10000000px; overflow:none; } #formSubmit span{ height:28px; width:145px; background-position:0px 0px; } #formReset span{ height:28px; width:65px; background-position:-145px 0px; } #contactForm #formSubmit, #contactForm #formReset{ margin-top:5px; } /*IE6*/ * html #contactForm #formSubmit{ width:145px; } * html #contactForm #formReset{ width:65px; } /*IE7*/ * + html #contactForm #formSubmit{ width:145px; } * + html #contactForm #formReset{ width:65px; } /* contact-info */ #contact-info{ padding-top:30px; } #contact-info .name{ font-size:1.0909em; margin-bottom:7px; } #contact-info .postal-code, #contact-info tel{ display:block; } #contact-info .country-name{ display:none; } #contact-info .tel{ margin:10px 0px; font-weight:bold; } /* site-map */ #site-map{} #site-map div{ float:left; width:32%; } /* Footer --------------------------------------------------------*/ #footer{ clear:both; font-size:0.625em; height:25px; margin:25px 30px 0px 25px; } /* navigation */ #footer-nav{ float:left; } #footer-nav ul{ display:inline; } #footer-nav li{ float:left; margin-right:7px; padding-right:8px; border-right:1px solid #0060A7; } #footer-nav li.end_nav{ margin-right:0px; padding-right:0px; border:none; } /* copyright */ #copyright{ float:right; } /* validation */ #validation{} /* designed by */ #designed-by{}