/******************************************** Autonomic Materials Global CSS Version: 1.0 Author: Poccuo (http://www.poccuo.com) *******************************************/ /****************************************** GLOBAL SETTINGS *******************************************/ body { font-family: Arial, sans-serif;} h1 { clear: both; font-size: 1.56em; font-weight: bold; color: #1B75BB; margin: 0 0 20px 0;} h2 { clear: both; font-size: .88em; font-weight: bold; color: #1B75BB; margin: 30px 0 6px 0;} h3 {} h4 {} h5 {} h6 {} p, address { color: #666; font-size: 12px; line-height: 18px; margin: 0 0 1em 0;} p a { text-decoration: underline; color: #1B75BB;} p a:hover { text-decoration: none;} b, strong { font-weight: bold;} i, em { font-style: italic;} ul { margin: 0 0 12px 30px;} ul li { list-style-type: disc; color: #666; font-size: 12px; line-height: 18px; margin: 0; padding: 0;} ol { margin: 0 0 12px 30px;} ol li { list-style-type: decimal; color: #666; font-size: 12px; line-height: 18px; margin: 0; padding: 0;} img { margin: 0 0 1em 0;} /****************************************** FOUNDATION SETTINGS *******************************************/ #container { overflow: hidden; height: 1%; margin: 0px auto; width: 900px; background-color: #FFFFFF; } #header { margin: 0 0 5px 0;} #header #logo { margin: 15px 0 5px 5px;} #footer { overflow: hidden; height: 1%; margin: 0px auto; width: 900px; border-top: 1px #CCC solid;} #content { overflow: hidden; height: 1%; background: url("/_images/home/two_col_bkgd.gif") 66px 0 ;} #leftcolumn { width: 583px; float: left; padding: 30px 20px 20px 13px;} #rightcolumn { width: 261px; float: left; padding: 30px 10px 20px 13px; } #onecolumn { width: 880px; float: left; padding: 40px 10px 20px 13px; } /****************************************** MENUS *******************************************/ #header ul#header_menu { width: 900px; overflow: hidden; height: 1%; border-top: 1px #CCC solid; background: url("/_images/_global/menu/background.gif") 0 2px repeat-x; margin: 0; padding: 2px 0 0 0; height: 28px;} #header ul#header_menu li { display: inline;} #header ul#header_menu li a { text-indent: -10000px; display: block; background: url("/_images/_global/menu/sprite.gif") 0 0 repeat-x; float: left; margin: 0; font-size: 1.2em; font-weight: bold; height: 28px; color: #FFF; text-decoration: none;} #header ul#header_menu li.technology a { width: 132px; } #header ul#header_menu li.technology a:hover { width: 132px; background-position: 0 -28px;} #header ul#header_menu li.technology a.active { width: 132px; background-position: 0 -28px;} #header ul#header_menu li.applications a { width: 155px; background-position: -132px 0;} #header ul#header_menu li.applications a:hover { width: 155px; background-position: -132px -28px;} #header ul#header_menu li.applications a.active { width: 155px; background-position: -132px -28px;} #header ul#header_menu li.innovation a { width: 146px; background-position: -287px 0;} #header ul#header_menu li.innovation a:hover { width: 146px; background-position: -287px -28px;} #header ul#header_menu li.innovation a.active { width: 146px; background-position: -287px -28px;} #header ul#header_menu li.our_company a { width: 158px; background-position: -433px 0;} #header ul#header_menu li.our_company a:hover { width: 158px; background-position: -433px -28px;} #header ul#header_menu li.our_company a.active { width: 158px; background-position: -433px -28px;} #header ul#header_menu li.careers a { width: 122px; background-position: -591px 0;} #header ul#header_menu li.careers a:hover { width: 122px; background-position: -591px -28px;} #header ul#header_menu li.careers .active { width: 122px; background-position: -591px -28px;} #header ul#header_menu li.contact a { width: 107px; background-position: -713px 0;} #header ul#header_menu li.contact a:hover { width: 107px; background-position: -713px -28px;} #footer ul#footer_menu { float: left; overflow: hidden; height: 1%; margin: 20px 0 20px 0; width: 600px; } #footer ul#footer_menu li { display: inline; } #footer ul#footer_menu li a { display: block; float: left; font-size: 10px; padding: 5px 10px 5px 5px; color: #1B75BB; text-decoration: none;} #footer ul#footer_menu li a:hover { text-decoration: underline;} #footer #copyright { float: left; clear: both; font-size: 10px; color: #999; margin: 0 20px 30px 5px; width: 300px; padding: 0 0 30px 0;} #search { float: right; clear: right; margin: 20px 20px 0 0; } #search .sbox input { background-color: #FFF; float: left; border: 1px #1B75BB solid; height: 14px; width: 160px; padding: 4px 3px 2px 4px; font: 10px Arial; color: #333; } #search .sbox_r { background: black url('/_images/_global/search/search_r.gif') no-repeat top left; float: left; width: 34px; height: 20px; border: 1px #1B75BB solid; border-left: 0px #5D8D47 solid;} #search input.blur { color: #999; } /****************************************** HOME *******************************************/ #home { overflow: hidden; height: 1%; background: url("/_images/home/two_col_bkgd.gif"); margin: 10px 0 0 0;} #home h1 { clear: both; font-size: 1.26em; font-weight: bold; color: #1B75BB; margin: 0 0 20px 0;} #home h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 30px 0;} #home #leftcolumn { width: 517px; float: left; padding: 10px 20px 20px 13px;} #home #rightcolumn { width: 327px; float: left; padding: 10px 10px 20px 13px; } #home #rightcolumn .highlight_entry { overflow: hidden; height: 1%; margin: 0 0 3px 0;} #home #rightcolumn .highlight_entry img { float: left; margin: 0 10px 0 0 ; } #home #rightcolumn .highlight_entry p { float: left; width: 250px; color: #1B75BB; } /****************************************** TECHNOLOGY *******************************************/ #technology #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 30px 0;} #technology #rightcolumn ul { list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 0 10px; padding: 0; } #technology #rightcolumn ul li { font-size: 11px; line-height: 15px; list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 1em 0; padding: 0; width: 250px;} #technology #how_it_works #rightcolumn ul { display: block; clear: both; margin: -10px 0 30px 10px;} ul#technology_menu { width: 900px; overflow: hidden; height: 1%; background: url("/_images/technology/background.gif") 0 0 repeat-x; height: 40px; margin: 10px 0 10px 0; padding: 0;} ul#technology_menu li { display: inline;} ul#technology_menu li a { text-indent: -10000px; display: block; background: url("/_images/technology/menu_sprite.gif") 0 0 repeat-x; float: left; margin: 0; font-size: 1.2em; font-weight: bold; height: 40px; color: #FFF; text-decoration: none;} ul#technology_menu li#at_a_glance_tab a { width: 133px; border-right: 1px #CCC solid; } ul#technology_menu li#at_a_glance_tab a:hover { width: 133px; background-position: 0 -40px; } ul#technology_menu li#at_a_glance_tab a.active { width: 133px; background-position: 0 -80px; border-left: 1px #CCC solid; border-right: 1px #CCC solid; border-: 1px #CCC solid; border-top: 1px #CCC solid;} ul#technology_menu li#how_it_works_tab a { width: 177px; background-position: -133px 0; border-right: 1px #CCC solid;} ul#technology_menu li#how_it_works_tab a:hover { width: 177px; background-position: -133px -40px;} ul#technology_menu li#how_it_works_tab a.active { width: 177px; background-position: -133px -80px; border-top: 1px #CCC solid; } /****************************************** APPLICATIONS *******************************************/ #applications img { float: left; vertical-align: middle; margin: 2px 7px 0 0;} #applications h3 { clear: both; font-size: .88em; font-weight: bold; color: #1B75BB; margin: 30px 0 1em 0;} #applications #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 1em 0;} #applications #rightcolumn ul { list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 0 10px; padding: 0; } #applications #rightcolumn ul li { font-size: 11px; line-height: 15px; list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 1em 0; padding: 0; width: 250px;} #applications hr { margin: 30px 0 20px 0; border: none; border-top: 1px #CCC solid;} /****************************************** INNOVATION *******************************************/ #innovation #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 1em 0;} #innovation #rightcolumn ul { list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 0 10px; padding: 0; } #innovation #rightcolumn ul li { font-size: 11px; line-height: 15px; list-style-image: url("/_images/_global/li_plus.gif"); margin: 0 0 1em 0; padding: 0; width: 250px;} #innovation #rightcolumn p { font-size: 11px; line-height: 15px;} /****************************************** OUR COMPANY *******************************************/ #our_company h2#first { margin: 0 0 1em 0;} #our_company #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 1em 0;} #our_company #rightcolumn .highlight_entry { overflow: hidden; height: 1%; margin: 0 0 3px 0 ;} #our_company #rightcolumn .highlight_entry img { float: left; margin: 0 10px 0 0; } #our_company #rightcolumn .highlight_entry p { float: left; font-size: 11px; line-height: 15px; width: 195px; color: #1B75BB; } /****************************************** HIGHLIGHTS *******************************************/ #highlights #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 1em 0;} #highlights #rightcolumn .highlight_entry { overflow: hidden; height: 1%; margin: 0 0 3px 0 ;} #highlights #rightcolumn .highlight_entry img { float: left; margin: 0 10px 0 0; } #highlights #rightcolumn .highlight_entry p { float: left; font-size: 11px; line-height: 15px; width: 195px; color: #1B75BB; } /****************************************** CAREERS *******************************************/ #careers #rightcolumn h2 { font-size: .88em; font-weight: bold; color: #1B75BB; margin: 0 0 1em 0;} #careers #rightcolumn .highlight_entry { overflow: hidden; height: 1%; margin: 0 0 3px 0 ;} #careers #rightcolumn .highlight_entry img { float: left; margin: 0 10px 0 0; } #careers #rightcolumn .highlight_entry p { float: left; font-size: 11px; line-height: 15px; width: 300px; color: #1B75BB; } /****************************************** 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: #1B75BB; text-decoration: none;} #contact_container #address p a:hover { text-decoration: underline;} #contact_form_container { width: 600px; background-color: #FFF; } #contact_form_container p { font-size: 0.88em; line-height: 1.42em; color: #666; margin: 20px;} #contact_form_container p a { color: #1B75BB; text-decoration: none;} #contact_form_container p a:hover { text-decoration: underline;} #contact_form_container h2 { font-size: 1.13em; color: #1B75BB; padding: 0 0 10px 0; margin: 18px 20px 0 20px; border-bottom: 1px #ccc solid; } #contact_form_container h2.sent { text-indent: -10000px; background: url("/_images/contact/sent.gif") 0 0 no-repeat; } #contact_form_container h2.contact { text-indent: -10000px; background: url("/_images/contact/contact.gif") 0 0 no-repeat; } #contact_form_container form { margin: 0 20px 10px 20px;} #contact_form_container form .button { float: right; margin: 20px 7px 0 0; color: #FFF; width: 150px; font-size: 0.75em; background-color: #1B75BB; border: none; padding: 4px 0;} #contact_form_container form .button:hover { background-color: #3F9BD5; cursor: pointer; cursor: hand;} #contact_form_container .form_item { clear: both; height: 45px;} #contact_form_container .form_item_textarea { clear: both; } #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 select, #contact_form_container .form_item_textarea select { display: block; float: left; width: 200px; font-size: 0.75em; color: #666; border: 1px #CCC solid; padding: 0 0 0 3px;} #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; padding: 10px 0 0 0; margin: 10px 0 30px 150px; font-style: italic;} #contact_form_container #TB_closeWindow { font-size: 0.76em; position: absolute; top: 20px; left: 540px;} #contact_form_container #TB_closeWindow a { color: #1B75BB; text-decoration: none; } #contact_form_container #TB_closeWindow a:hover { text-decoration: underline; color: #1B75BB; } #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; } #contact_form_container .form_item select.error { border: 1px #F00 solid; } #contact_form_container .form_item_textarea textarea.error { border: 1px #F00 solid; } #contact_form_container .form_item_textarea label.error { font-size: 0.56em; margin: 0 0 0 150px; padding: 0; color: #F00; width: auto;} /****************************************** SPECIAL *******************************************/ .hidden { display: none; } .blue { color: #1B75BB; }