/* CSS Document */ * { padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } /* eric */ body { background-color: #E1E5CF; /* background-color: #E9F4D6; */ /* background-color: #F8FFE5; */ /* background-color: #D1D6C7; SAVE */ /* background-color: #E3E6DD; SAVE */ /* background-color: #DADED2; */ /* background-color: #E9F4D6; */ } /* basic content properties */ a { color: #000000; text-decoration: none; border: none; cursor: pointer; } a:hover { color: #A2AC8E; } img { border: none; } /* gets rid of bullets numbering etc */ ul,li, dl, dt { list-style-type: none; } #wrapper { width: 1100px; /* eric */ margin-left: auto; margin-right: auto; background-color: #FFFFFF; } #wrapper>#banner { position: fixed; } #wrapper>#banner_spacer { position: fixed; } /* main banner properties */ #banner { position: absolute; z-index: 2; width: 1100px; height: 105px; background-image: url(../images/banner.jpg); background-position: top left; background-repeat: no-repeat; background-color: #FFFFFF; border-bottom: solid; font-size: 12px; } /* spacing for navigation links */ #banner dl{ padding-left: 30px; float: left; padding-top: 1px; } #banner dt { padding-right: 16px; } /* navigation link properties */ #banner #navBar a { color: #FFFFFF; text-decoration: none; } #banner #navBar a:hover { color: #000000; } #banner #navBar a:active { color: #444444; } /* The next rule highlights the navlink associated with this page This page is set with =, e.g., id="products" or id="about", in HTML tag to highlight products and about pages, respectively. */ #home #navBar .home, #products #navBar .products, #custom #navBar .custom, #about_us #navBar .about_us, #watch #navBar .watch, #press #navBar .press, #site_map #navBar .site_map, #contact_us #navBar .contact_us { color: #444444; } /* logo properties */ #banner .logo { margin: 15px 0 0 30px; } /* breadcrumb properties */ #banner .breadcrumb { height: 13px; z-index: 3; margin-top: 20px; padding-right: 10px; font-size: 10px; text-align: right; } #banner .breadcrumb .link { color: #666666; text-decoration: none; } #banner .breadcrumb .link:hover { color: #A2AC8E; } /* creates space between banner and main content */ #banner_spacer { width: 1100px; height: 30px; position: absolute; background-color: #FFFFFF; top: 105px; z-index: 1; color: #990000; font-size: 10px; } #banner_spacer p { padding-top: 10px; padding-left: 295px; } /* main content container*/ #main_container { width: 1100px; background-color: #FFFFFF; /* eric */ position: absolute; top: 135px; /* adjusted from 137px to 135px so that border dividing left and right appears to not move during scrolling keeping the effect when fixed positioning is supported*/ /*left: 63px; this rule messes up the alignment of the main container, I adjusted the css on the index.html page to handle the spacing of the image container instead */ } /* left side sub container */ #left_content { width: 258px; float: left; font-size: 12px; padding-top: 20px; } /* right side sub container */ #right_content { width: 700px; height: auto; float: left; border-left: solid; font-size: 12px; /* jah multi-column padding-top: 91px; */ padding-top: 20px; } /* left and right menu contents */ /* jah multi-column - start */ #left_content .menu_text, #right_content .menu_thumbnail, #right_content .menu_thumbnail_multicolumn, #right_content .menu_extended_text { height: 120px; margin-bottom: 50px; } #left_content .products_text_image, #right_content .column_headers { height: 21px; /*padding-right: 40px;*/ padding-bottom: 50px; clear: both; } #left_content .products_text_image { float: right; } /* jah multi-column - end */ #left_content #menu_text_container, #right_content #menu_thumbnail_container { border-top: solid #FFFFFF; border-top-width: 1px; padding-left: 40px; /* jah multi-column */ } /* left products sub categories */ #left_content .menu_text { width: 200px; /*padding-right: 40px;*/ float: right; clear: both; } #left_content .menu_text p { padding-top: 50px; text-align: right; } /* right side image properties */ #right_content .menu_thumbnail { width: 200px; padding-right: 40px; /* jah multi-column - changed from left */ clear: both; } /* right side multi-column properties */ /* jah multi-column - start */ #right_content #menu_thumbnail_container .menu_thumbnail_multicolumn, #right_content #menu_thumbnail_container .menu_extended_text { padding-right: 40px; float: left; } #right_content #menu_thumbnail_container .menu_thumbnail_multicolumn { width: 120px; } #right_content #menu_thumbnail_container .menu_extended_text { width: 220px; clear: right; } #right_content #menu_thumbnail_container .menu_extended_text p { width: 220px; padding: 0; margin: 0; text-align:left; line-height: 160%; color: #666666; padding-bottom: 10px; } /* Sample way to override the default multi-column setting on a page-specific basis */ #page0XXX #right_content #menu_thumbnail_container .menu_thumbnail_multicolumn { width: 90px; padding-right: 20px; } #page0XXX #right_content #menu_thumbnail_container .menu_extended_text { width: 1px; padding-right: 200px; } #page0XXX #right_content #menu_thumbnail_container .menu_extended_text p { width: 1px; } #right_content .column_headers { padding-left: 40px; width: 770px; /* jah addition */ float: left; } /* jah multi-column - end */ /* right side paragraph properties */ #right_content p { width: 610px; padding-left: 40px; padding-bottom: 20px; line-height: 180%; text-align: justify; } /* left and right main products */ #left_content .products_left, #right_content .products_right, #left_content .site_map_left, #right_content .site_map_right, #right_content .site_map_right_sub { width: 200px; height: 20px; padding-top: 10px; text-align: right; float: right; clear: both; font-size: 13px; } #left_content .products_left, #left_content .site_map_left { /*padding-right: 40px;*/ text-align: right; float: right; } #right_content .products_right, #right_content .site_map_right, #right_content .site_map_right_sub { padding-left: 40px; text-align: left; float: left; } #right_content .site_map_right_sub { width: 180px; padding-left: 60px; } #right_content .products_image { /* eric - replaced this with content below position: absolute; left: 600px; top: 30px; */ width: 180px; padding-left: 60px; } /* left main sections category */ #left_content .sections_text_image { height: 21px; /*padding-right: 40px;*/ padding-bottom: 53px; float: right; clear: both; } /* left sub sections category */ #left_content .sections_sub, #left_content .sections_sub_error { width: 200px; /*padding-right: 40px;*/ text-align: right; float: right; clear: both; } /* left sub sections error message */ #left_content .sections_sub_error { padding-top: 20px; font-size: 11px; color: #990000; line-height: 180%; } /* left side variable */ #left_content .variable_left { } /* right side variable */ #right_content .variable_right { } /* properties for main tear sheet section */ #main_detail { width: 975px; height: 377px; padding-top: 70px; padding-bottom: 100px; padding-left: 61px; } /* detail thumbnails with vertical line divs */ #thumbnail_container { width: 1042px; height: 120px; padding-right: 29px; padding-left: 29px; } #thumbnail_container .detail_thumbnail, #thumbnail_container .detail_thumbnail_right { width: 90px; } /* used for all thumbnails and vertical lines */ #thumbnail_container .detail_thumbnail, #thumbnail_container .detail_thumbnail_right, #thumbnail_container .vert_line, #thumbnail_container .no_vert_line, #thumbnail_container .vert_line_right, #thumbnail_container .no_vert_line_right { height: 100px; float: left; margin: 20px 0px 0px 0px; text-align: center; } /* for all vertical lines, no_vertical lines and spacing */ #thumbnail_container .vert_line, #thumbnail_container .no_vert_line, #thumbnail_container .vert_line_right, #thumbnail_container .no_vert_line_right { width: 0px; margin-left: 14px; margin-right: 14px; } /* all vertical lines */ #thumbnail_container .vert_line , #thumbnail_container .vert_line_right { border-left: solid; } /* floats right elements to the right */ #thumbnail_container .detail_thumbnail_right, #thumbnail_container .vert_line_right, #thumbnail_container .no_vert_line_right { float: right; } /* contact form properties */ .form_container { width: 480px; padding-left: 40px; padding-top: 50px; font-size: 12px; } .form_container .field_spacing { padding-bottom: 30px; padding-right: 20px; float: left; } .form_container .checkbox { width: 400px; padding-top: 10px; padding-bottom: 10px; } .form_container .checkbox input { padding-right: 10px; } .form_container textarea { font-size: 12px; } /* creates space at the bottom of the page */ #footer { width: 1100px; float: left; height: 30px; clear: both; background-color: #FFFFFF; } /* keywords at the bottom of the page */ #pageText { visibility: hidden; } /* border color properties */ #banner, #right_content, #thumbnail_container .vert_line , #thumbnail_container .vert_line_right { border-color: #A2AC8E; border-width: 1px; } /* left content elements 40 pixel padding right, padding settings were commented out above, if it views correctly in IE, they can be taken out completely */ #left_content .products_text_image, #left_content .menu_text, #left_content .products_left, #left_content .site_map_left, #left_content .sections_text_image, #left_content .sections_sub, #left_content .sections_sub_error { padding-right: 40px; } /* height property for short pages */ #thank_you #right_content, #error #right_content, #under_construction #right_content, #press #right_content, #finishes #right_content { height: 501px; /* 435px */ } /* underline link property on products main page */ /* jah #products .products_left a:hover, #products .products_right a:hover { text-decoration: underline; } */ /* olive link */ .olive_link { color: #A2AC8E; } #toolTip { background-color: #FFFFDD; display:none; position:absolute; color: black; font-size: 11px; border: 1px black solid; padding: 1px 4px 1px 3px; }