/******************************************** Snap and Buy Global CSS Version: 1.0 Author: Poccuo (http://www.poccuo.com) 8px = 0.50em 9px = 0.56em 10px = 0.63em 11px = 0.69em 12px = 0.75em 13px = 0.81em 14px = 0.88em 15px = 0.94em 16px = 1em 17px = 1.06em 18px = 1.13em 19px = 1.19em 20px = 1.25em 21px = 1.31em 22px = 1.38em 23px = 1.44em 24px = 1.50em 25px = 1.56em 26px = 1.63em 28px = 1.75em 30px = 1.88em 32px = 2.00em 36px = 2.25em 40px = 2.50em *******************************************/ /****************************************** GLOBAL SETTINGS *******************************************/ body { font-size: 100%; line-height: 1.125em; font-family: "Helvetica Neue", Arial, sans-serif; background-color: #F5F5F5;} strong { font-weight: bold;} a { text-decoration: underline; color: #2D6D23;} a:hover { text-decoration: none; color: #5D8D47; } /****************************************** FOUNDATION SETTINGS *******************************************/ #container { overflow: hidden; height: 1%; margin: 0px auto; width: 900px; padding: 20px; background-color: #FFFFFF; } #header { margin: 0 0 10px 0;} #header #logo { float: left; margin: 0 0 30px 0;} #header #translate { float: right; } #header #translate a { font-size: 0.63em; text-decoration: none; color: #888888; } #header #translate a:hover { color: #333333; } #header #translate a img { vertical-align: middle; margin: 0 10px 0 0; text-decoration: none;} #footer { margin: 0px auto; width: 900px; background-color: #F5F5F5; } /****************************************** MENUS *******************************************/ #header ul#header_menu { clear: both; overflow: hidden; height: 1%; border-top: 1px #CCC dotted; border-bottom: 1px #CCC dotted; padding: 3px 0;} #header ul#header_menu li { display: inline; } #header ul#header_menu li a { font-size: 1.13em; display: block; float: left; margin: 0 40px 0 0; padding: 5px; color: #5D8D47; text-decoration: none; text-transform: lowercase;} #header ul#header_menu li a:hover { color: #2D6D23;} #header ul#header_menu li.active a { color: #2D6D23;} #footer ul#footer_menu { float: left; overflow: hidden; height: 1%; margin: 5px 0 40px 0; width: 500px;} #footer ul#footer_menu li { display: inline; } #footer ul#footer_menu li a { display: block; float: left; font-size: 0.69em; padding: 5px 10px 5px 5px; color: #5D8D47; text-decoration: none; text-transform: lowercase;} #footer ul#footer_menu li a:hover { text-decoration: underline;} #footer #copyright { float: right; font-size: 0.69em; color: #999; margin: 10px 0 0 0;} /****************************************** HOME *******************************************/ #home_slideshow { position: relative; cursor: pointer; cursor: hand; height: 400px; width: 900px; } #home_slideshow:hover { background-position: -900px 0; } #home_slideshow .copy { position: absolute; bottom: 0; width: 894px; margin: 3px; } #home_slideshow .copy h2 { font-size: 3.3em; line-height: 1.5em; margin: 0 0 0 15px; color: #FFF; } #home_slideshow .copy p { display: none; font-size: 0.81em; line-height: 1.5em; padding: 0 0 10px 15px; color: #FFF;} #home_slideshow:hover .copy p { display: block;} #homepage_bottom { overflow: hidden; height: 1%; margin: 20px 0; } #homepage_bottom #text { border-top: 1px #CCC dotted; border-bottom: 1px #CCC dotted; height: 135px; width: 440px; float: left; padding: 10px 10px 0 0;} #homepage_bottom #text p { font-size: 0.75em; line-height: 1.45em; color: #888888; } #homepage_bottom #featured_modules .module { float: left; margin: 0 0 0 5px; position: relative; cursor: pointer; cursor: hand; height: 145px; width: 145px; } #homepage_bottom #featured_modules .module:hover { background-position: -145px 0;} #homepage_bottom #featured_modules .module .copy { position: absolute; bottom: 0; width: 139px; height: 60px; margin: 3px; } #homepage_bottom #featured_modules .module:hover { cursor: default; } #homepage_bottom #featured_modules .module .copy h3 { font-size: 1.15em; line-height: 1.1em; margin: 10px; color: #FFF; text-transform: lowercase; } #homepage_bottom #featured_modules .module .copy h3 a { display: none; color: #FFF; text-decoration: none; } #homepage_bottom #featured_modules .module:hover .copy h3 a { display: block; } #homepage_bottom #featured_modules .module:hover .copy h3 a:hover { text-decoration: underline; } /****************************************** WHAT MAKES US DIFFERENT *******************************************/ #what_makes_us_different h1 { font-size: 1.31em; color: #2D6D23; line-height: 1.4em; padding: 20px 0;} .wmud_module { overflow: hidden; height: 1%; margin: 10px 0 0 0; } .wmud_module img { float: left; display: inline; margin: 0 10px 0 0; } .wmud_module .text { float: left; display: inline; width: 590px; border-top: 1px #CCC dotted; padding: 10px 0 0 0;} .wmud_module .text h2 { display: inline; font-size: 1.3em; line-height: 1.15em; margin: 15px 0 10px 0; color: #2D6D23; font-weight: normal; } .wmud_module .text p { display: inline; font-size: 0.75em; line-height: 1.6em; color: #888888;} #featured_module { overflow: hidden; height: 1%; width: 625px; height: 336px; display: block; } .featured_module_slider { width: 593px; background-image: url('/images/global/bkgd_slider.png'); color: #FFF; padding: 8px 16px 8px 16px; left: 0; position: absolute; bottom: 0px;} #featured_module h1 { font-size: 1.31em; margin: 0 0 5px 0; padding: 5px 0 0 0; } #featured_module p { font-size: 0.81em; width: 593px; line-height: 1.50em; border-top: 1px #CCC solid; padding: 12px 0 8px 0; margin: 12px 0 0 0;} /****************************************** HOW IT WORKS *******************************************/ /* Backup */ #how_it_works_slide_container { overflow: hidden; height: 1%; border-top: 1px #CCC dotted; margin: 20px 0 0 0;} #how_it_works_slide_navigation { float: left; display: inline; margin: 20px 0;} #how_it_works_slide_navigation h2 { font-family: "Trebuchet MS"; background-color: #5D8D47; color: #FFF; padding: 15px 15px 10px 15px; width: 270px; font-size: 1.5em; } #how_it_works_slide_navigation ul { background-color: #5D8D47; list-style-type: none; width: 300px; color: #FFF; padding: 8px 0; } #how_it_works_slide_navigation ul a { color: #FFF; display: block; padding: 7px 0 7px 8px; height: 18px; font-size: 11px; border-top: 1px #7DA46C dotted; text-decoration: none;} #how_it_works_slide_navigation ul a:hover { text-decoration: none; } #how_it_works_slide_navigation ul li { list-style-type: none; padding: 0 8px; } #how_it_works_slide_navigation ul li:hover { background: url('http://209.85.112.45/bio-alternative.com/images/_global/how_it_works/nav_arrow_50.gif') no-repeat 10px 0; } #how_it_works_slide_navigation ul li.active { background: url('http://209.85.112.45/bio-alternative.com/images/_global/how_it_works/nav_arrow.gif') no-repeat 10px 0; } #how_it_works_slide_navigation ul li.active:hover { background: url('http://209.85.112.45/bio-alternative.com/images/_global/how_it_works/nav_arrow.gif') no-repeat 10px 0; } #how_it_works_slides { float: left; display: inline; width: 560px; margin: 0 0 20px 0; padding: 20px 0 20px 23px; } #how_it_works_slides img { margin: 0 0 20px 0;} #how_it_works_slides h2 { font-size: 1.31em; line-height: 1.25em; color: #2D6D23; margin: 0 0 10px 0;} #how_it_works_slides p { font-size: 0.75em; line-height: 1.45em; color: #888888;} /* Live */ #how_it_works_features h1 { display: block; width: 420px; float: left; font-size: 1.2em; color: #2D6D23; line-height: 1.4em; padding: 20px 0;} #how_it_works_features #entries { width: 420px; float: left; border-left: 1px #ccc dotted; margin: 20px 0 0 20px; padding: 0 0 0 20px;} #how_it_works_features .feature_entry { overflow: hidden; height: 1%; margin: 0 0 1em 0; padding: 0 0 1em 0; border-bottom: 1px #ccc dotted;} #how_it_works_features .feature_entry h2 { font-size: 0.88em; line-height: 1.15em; color: #2D6D23; font-weight: bold; padding: 0 0 4px 0;} #how_it_works_features .feature_entry p { font-size: 0.75em; line-height: 1.6em; color: #888888;} #how_it_works_features .feature_entry ul, #how_it_works_features .feature_entry ol { font-size: 0.75em; color: #888888; margin: 0 0 2em 0;} #how_it_works_features .feature_entry ul li { list-style-type: disc; margin: 0 0 0 20px;} #how_it_works_features .feature_entry ol li { list-style-type: decimal; margin: 0 0 0 20px;} /****************************************** CONTACT US *******************************************/ #contact_container { overflow: hidden; height: 1%; margin: 10px 0 0 0; } #contact_container #location { float: left; width: 150px; padding: 0 0 0 10px; font-size: 0.75em; font-weight: bold; text-transform: uppercase; } #contact_container #address { float: left; width: 150px; padding: 0 0 0 10px; } #contact_container #map { float: left; width: 640px; } #contact_container #address p { font-size: 0.75em; color: #666; margin: 0 0 10px 0;} #contact_container #address p a { color: #5D8D47; text-decoration: none;} #contact_container #address p a:hover { text-decoration: underline;} #contact_form_container { width: 600px; background-color: #FFF; } #contact_form_container h2 { width: 590px; font-size: 1.13em; color: #2D6D23; padding: 20px 0 10px 0; margin: 0 20px; border-bottom: 1px #ccc dotted; } #contact_form_container p { font-size: 0.75em; color: #666; margin: 20px;} #contact_form_container p a { color: #5D8D47; text-decoration: none;} #contact_form_container p a:hover { text-decoration: underline;} #contact_form_container form { margin: 0 20px 10px 20px;} #contact_form_container form .button { float: right; color: #FFF; width: 150px; font-size: 0.75em; background-color: #2D6D23; border: none; padding: 4px 0;} #contact_form_container form .button:hover { background-color: #5D8D47; cursor: pointer; cursor: hand;} #contact_form_container .form_item { clear: both; height: 45px;} #contact_form_container .form_item_textarea { clear: both; height: 185px;} #contact_form_container .form_item label, #contact_form_container .form_item_textarea label { display: block; float: left; width: 148px; font-size: 0.75em; color: #666; padding: 4px 0 0 0; margin: 0;} #contact_form_container .form_item input, #contact_form_container .form_item_textarea input { display: block; float: left; width: 393px; font-size: 0.75em; color: #666; border: 1px #CCC solid; padding: 5px; } #contact_form_container .form_item_textarea textarea, #contact_form_container .form_item textarea { display: block; float: left; width: 393px; font-size: 0.75em; color: #666; border: 1px #CCC solid; padding: 5px;} #contact_form_container form p.checkbox { display: block; clear: both; margin: 10px 0 30px 150px; font-style: italic;} #contact_form_container #TB_closeWindow { font-size: 0.76em; position: absolute; top: 20px; left: 575px;} #contact_form_container #TB_closeWindow a { color: #2D6D23; text-decoration: none; } #contact_form_container #TB_closeWindow a:hover { text-decoration: underline; color: #5D8D47; } #contact_form_container .form_item label.error { font-size: 0.56em; margin: 0 0 0 150px; padding: 0; color: #F00; width: auto;} #contact_form_container .form_item input.error { border: 1px #F00 solid; } /****************************************** FAQ *******************************************/ #faq h1 { display: block; width: 300px; float: left; font-size: 1.31em; color: #2D6D23; line-height: 1.4em; padding: 20px 0;} #faq_entries { width: 540px; float: left; border-left: 1px #ccc dotted; margin: 20px 0 0 20px; padding: 0 0 0 20px;} .faq_entry { overflow: hidden; height: 1%; margin: 0 0 1em 0; border-bottom: 1px #ccc dotted;} .faq_entry h2 { font-size: 0.88em; font-weight: bold; line-height: 1.3em; margin: 0 0 1em 0; color: #2D6D23; } .faq_entry p { font-size: 0.75em; line-height: 1.45em; color: #888888; margin: 0 0 1em 0; padding: 0 0 1em 0;} .faq_entry ul, .faq_entry ol { font-size: 0.75em; color: #888888; margin: 0 0 2em 0;} .faq_entry ul li { list-style-type: disc; margin: 0 0 0 20px;} .faq_entry ol li { list-style-type: decimal; margin: 0 0 0 20px;} /****************************************** SPECIAL *******************************************/ .clear { clear: both; } .hidden { display: none; }