/*************************/ /* SECTION 1 - MAIN BODY AND SECTION LAYOUTS*/ /*************************/ body {font-size: 62.5%; margin: 0px auto; padding: 0px; font-family: arial, sans-serif; color: #252525; background-image: url(../images/bggradient.gif); background-repeat: repeat-x;} #page-container-1 {position: relative; width: 990px; height: 1000px; top: 0px; margin: 0px auto; padding: 0px; background-image: url(../images/background.jpg); background-repeat: no-repeat;} #splash-container {position: relative; width: 990px; height: 1000px; top: 0px; margin: 0px auto; padding: 0px; } #home-container {position: absolute; top: 200px; left: 33px; width:740px; height: 510px; float: left; } #productsbar-container {position: absolute; top: 790px; left: 5px; width: 948px; height: 175px; margin: 0px auto; padding: 0px; } #sidebar-right-container {position: absolute; top: 290px; left: 775px; height: 520px; width: 220px; overflow: hidden; clear: both; float: left; margin: 0px; padding: 0px; color: #FFFFFF; font-size: 1.0em; } #navflag-container {position: absolute; top: 6px; left: 480px; width: 300px; position: absolute; z-index: 2; background-color: transparent;} #nav1-container {top: 6px; left: 400px; width: 300px; position: absolute; z-index: 3; background-color: transparent;} #footer {position: absolute; overflow: hidden; clear: both; width: 960px; height: 25px; top: 973px; margin: 0px; padding: 0px; color: #FFFFFF; font-size: 11px;} /*************************************/ /* HEADER AND NAVIGATION */ /*************************************/ #header-container {position: absolute; top: 0; left: 0; clear: both; float: left; width: 700px; height: 180px; margin: 0px; padding: 0px; } #button-container {position: absolute; top: 87px; left: 13px; clear: both; float: left; width: 660px; height: 90px; margin: 0px; padding: 0px;} /*----------------------------*/ /* IMAGE BUTTON NAVIGATION */ /*----------------------------*/ #button-image {position: absolute; top: 0; left: 0; width: 660px; height: 100px; } #top-button1 {position: absolute; top: 10px; left: 20px; height: 70px; width: 100px;} #top-button2 {position: absolute; top: 10px; left: 150px; height: 70px; width: 100px;} #top-button3 {position: absolute; top: 10px; left: 280px; height: 70px; width: 100px;} #top-button4 {position: absolute; top: 10px; left: 410px; height: 70px; width: 100px;} #top-button5 {position: absolute; top: 10px; left: 540px; height: 70px; width: 100px;} img {border: none} #nav2 {position: relative; top: 70px; left: 0; width: 660px; padding: 0; color: #fff; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold; white-space:nowrap; list-style-type:none; margin: 0; padding: 12px 0 0 0;} #nav2 ul {display: block; width: 660px; height: 20px; margin: 0 0 0 10px ; padding: 0;} #nav2 li {position: relative; top: 0; left: 0; height: 20px; width: 100px; display: inline; float: left; margin: 0 18px 0 10px; padding: 0; text-align: center; } #nav2 li a {color: #fff; font-family: arial, helvetica, sans-serif; font-weight: bold; white-space:nowrap; list-style-type:none; font-size: 85%; padding: 0; color: #49424c; text-decoration: none; text-transform: none;} #nav2 li a:hover {color:#898989;} #nav2 li.current a {color: #8e2223; } #nav2 li.current a:hover {color: #898989; } /*-----------------------------------*/ /* SPLASH MOVIE */ /*-----------------------------------*/ #swfmovie-container {position: relative; top: 50px; left: 220px; width: 500px; height: 500px; border: 10px #a32121 solid} #skipintro {position: relative; top: 30px; left: 410px; width: 120px; height: 20px; } /*--------------------------*/ /* Navigation - Flags */ /*--------------------------*/ .navflag {margin: 0px; padding: 0px; font-size: 1.0em;} .navflag ul {float: right; margin: 0px; padding: 0px 20px 0px 0px;} .navflag li {display: inline; list-style: none; margin: 0px; padding: 0px;} .navflag li a {margin: 0px; padding: 0px 0px 0px 1px;} .navflag a:hover {color: rgb(0,0,0); text-decoration: none;} .img-navflag {display: inline; height: 14px; margin: 0px; padding: 0px; border: none;} /*----------------------------*/ /* Navigation - Level 1 */ /*----------------------------*/ #nav1 {margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;} #nav1 ul {float: right; margin: 0px; padding: 0px 20px 0px 0px; border-left: solid 1px #FFFFFF; font-weight: bold;} #nav1 li {display: inline; list-style: none; margin: 0px; padding: 0px;} #nav1 li a {display: block; float: left; margin: 0px; padding: 2px 5px 2px 5px; border-right: solid 1px #FFFFFF; color: #FFFFFF; text-decoration: none; font-size: 10px;} #nav1 a:hover, a.selected {color: #959595; text-decoration: none;} /*----------------------------*/ /* 2.4 - Navigation - Level 2 */ /*----------------------------*/ /******************************************************************************/ /* SPECIFIC CLASSES FOR HOME PAGE LAYOUT (With navigation, with sidebar )*/ /******************************************************************************/ #home-main-image {position: absolute; top: 65px; left: 0px; width: 300px; height: 500px; } #home-content {position: absolute; top: 50px; left: 300px; width: 600px; font-size: 100%;} #home-top-txt {position: relative; left: -10px; width: 560px; overflow: hidden; margin: 0px 0 0 5px; padding: 0px;} #home-title {position: relative; left: -5px; height: 25px; width: 340px; margin: 20px 0px 5px 0px; background-color: #ebebeb; } #home-slug {position: relative; top: 0px; left: 120px; width: 600px; height: 40px; } h1.home {height: 22px; width: 340px; margin: 0; padding: 0; background-color: #ebebeb; } h1.slug {margin: 5px 0 0px 0; padding: 0; font-size: 220%;} h2.slug {text-align: center; margin: 0px 0px 0px 0px; padding: 0; font-size: 190%; } /******************************************************************************/ /* SPECIFIC CLASSES FOR LAYOUT #1 (With navigation, with sidebar )*/ /******************************************************************************/ #content1-menu {position: relative; top: 0px; left: -5px; height: 25px; width: 380px; margin: 0px 0px 10px 0px;} #topic-nav {margin: 0px 0 15px 0;} ol#nav3 {height: 1em; list-style: none; margin: 0; padding: 0; } ol#nav3 a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background: #bdf url(../images/tabs.gif); color: #111111; display: block; float: left; height: 2em; padding-left: 10px; text-decoration: none; } ol#nav3 a:hover {background-color: #3af; background-position: 0 -48px; } ol#nav3 a:hover span {background-position: 100% -48px; } ol#nav3 li {float: left; margin: 0 1px 0 0; } ol#nav3 li.current a {background-color: #48f; background-position: 0 -24px; color: #555555; font-weight: bold; } ol#nav3 li.current span {background-position: 100% -24px; } ol#nav3 span {background: url(../images/tabs.gif) 100% 0; display: block; line-height: 2em; padding-right: 10px; } /* Specific styles for full-page content to address IE box model issues with floats */ #content1-full-image-sandbag1 {position: relative; top: 10px; left: -20px; width: 300px; height: 210px; float: right; clear: right; margin: -10px 0px 20px 40px; } #content1-top-txt {margin: 0 30px 0 0;} .content1-full-txt {position: relative; float: left; width: 710px; margin: 10px 0 0px 0;} div.content1-full-title {position: relative; left: 0px; width: 365px; height: 20px; float: left; margin: 0px 0px 5px 0px; } h1.content1-full {height: 22px; margin: 0; padding: 0; width: 365px; background-color: #ebebeb; } div.content1-full-subtitle {position: relative; left: 0px; top: 0; float: left; display: block; width: 365px; height: 22px; line-height: 1.2em; padding: 0; margin: 0px 0px 5px 0px;} h2.content1-full {width: 365px; font-size: 140%; padding: 0px 0 10px 0; height: 10px; margin: 5px 0px 0px 0px; color: #252525; } /* Other content1 styles for topic summary pages*/ #content1-container {position: absolute; top: 220px; left: 33px; width:710px; height: 560px; float: left; border: } #content1-image-sandbag1 {position: relative; top: 10px; left: -20px; width: 300px; height: 210px; float: right; clear: right; margin: 0 0px 20px 0px;; } .content1-text-block {position: relative; float: left; width: 340px; margin: 10px 0 0px 0; } div.content1-title {position: relative; left: 0px; width: 335px; height: 20px; float: left; margin: 0px 0px 5px 0px;} h1.content1 {height: 22px; margin: 0; padding: 0; width: 300px; background-color: #ebebeb; } div.content1-subtitle {position: relative; left: 0px; top: 0; float: left; display: block; width: 335px; height: 22px; line-height: 1.2em; padding: 0; margin: 0px 0px 5px 0px;} #bottom-text-block-container {position: relative; float: left; top: 0; left: 0; width: 710px; margin: 10px 0 0px 0;} #content1-container-2col-left {position: relative; top: 0; left: -7px; overflow: hidden; float: left; margin: 10px 0 0 5px; padding: 0px;} #content1-2col-left-txtbox {margin: 0 0 0 5px;} #content1-container-2col-right {overflow: hidden; float: right; margin: 10px 0 0 0; padding: 0px;} h2.content1 {font-size: 140%; padding: 0px 0 10px 0; height: 10px; margin: 5px 0px 0px 0px; color: #252525; } h3.content1 {font-size: 120%; padding: 5px 0 5px 10px; margin: 0px 0px 0px 0px; color: #252525; } #content1-2col-right-txtbox {margin: 0 0 0 5px;} .faq-question {position: relative; left: 0px; width: 340px; margin: 0px 0px 0px 0px;} #content-video-sandbag {position: relative; top: 10px; left: 0px; width: 480px; height: 385px; float: right; clear: right; margin: 0 20px 20px 30px;} .video-text {position: relative; width: 180px; margin: 0 0 10px 0;} .video-title {position: relative; left: -5px; width: 180px; height: 25px; margin: 5px 0px 5px 0px; background-color: #ebebeb; } .twocollist {width: 150px; float: left; } .learnmore {margin: 0px 0px 0px 5px; margin-left: 180px;} .learnmore a {text-decoration: underline; color: #6d0000;} .learnmore a:hover {color: #252525;} p.faq-answer {font-size: 110%; left: 0px; width: 340px; margin: 0px 0px 0px 7px; } /* CONTACT PAGE*/ #contact-info {position: relative; height: 120px; margin: 10px 0 0px 0; } #contact-info p {font-family: Arial, Helvetica, sans-serif; font-size: 12px; } h2.morefrom {width: 360px; font-size: 140%; padding: 0px 0 10px 0; height: 10px; margin: 5px 0px 15px 0px; color: #252525; background-color: #ebebeb} #address1 {position: relative; width: 240px; height: 120px; float: left; } #address2 {position: relative; width: 240px; height: 120px; float: left; } #phone1 {position: relative; width: 210px; height: 120px; float: left; } /******************************************************/ /* SPECIFIC CLASSES FOR LAYOUT #2 (FEATURES)*/ /******************************************************/ ol#nav3 {height: 1em; list-style: none; margin: 0; padding: 0; } ol#nav3 a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background: #bdf url(../images/tabs.gif); color: #111111; display: block; float: left; height: 2em; padding-left: 10px; text-decoration: none; } ol#nav3 a:hover {background-color: #3af; background-position: 0 -48px; } ol#nav3 a:hover span {background-position: 100% -48px; } ol#nav3 li {float: left; margin: 0 1px 0 0; } ol#nav3 li.current a {background-color: #48f; background-position: 0 -24px; color: #555555; font-weight: bold; } ol#nav3 li.current span {background-position: 100% -24px; } ol#nav3 span {background: url(../images/tabs.gif) 100% 0; display: block; line-height: 2em; padding-right: 10px; } #content2-menu {position: relative; top: 0px; left: -5px; height: 25px; width: 350px; margin: 0px 0px 10px 0px; padding: 0;} #content2-container {position: absolute; top: 220px; left: 33px; width:710px; height: 560px; float: left; } #content2-image-sandbag1 {position: relative; top: 10px; left: 20px; width: 350px; height: 450px; float: right; margin: -10px 0px 20px 0px; } div.content2-title {position: relative; float: left; left: -5px; width: 350px; height: 20px; margin: 0px 0px 5px 0px;} h1.content2 {height: 22px; margin: 0; padding: 0; width: 200px; background-color: #ebebeb; } .content2-subtitle {position: relative; left: 0px; float: left; width: 350px; height: 20px; margin: 0px 0px 5px 0px; padding: 0; } #content2-top-txt {position: relative; float: left; width: 200px; margin: 0 0 10px 0; } /*Articles page*/ div.articles{ font-family: arial,sans serif; font-size: 130%; line-height: 1.3em; margin: 0 0 0.5em; padding: 0;} /*********************************/ /* COMMON PARAMETERS */ /*********************************/ .slogan {position: absolute; top: 15px; left: 620px; width: 160px;} h1.slogantext {font-size: 20px; color: #8e2223; text-align: right; } /*--------------------*/ /* Products Bar */ /*--------------------*/ .productsbar-title {position: absolute; top: 0px; left: 220px; width: 490px; height: 25px; margin: 0px 0px 5px 0px; display: inline;} .productsbar-icon {position: absolute; top: -3px; left: 630px; width: 490px; height: 25px; margin: 0px 0px 5px 0px; display: inline;} .productsbar-product1 {position: absolute; top: 25px; left: 20px; width: 300px; height: 160px;} .productsbar-product2 {position: absolute; top: 25px; left: 325px; width: 300px; height: 160px; } .productsbar-product3 {position: absolute; top: 25px; left: 630px; width: 300px; height: 160px; } .productsbar-description {position: relative; width: 190px; height: 120px; margin: 5px 0 0 10px;} .productsbar-subtitle {position: relative; height: 20px;} .productsbar-image {position: relative; width: 90px; height: 115px; float: right; clear: right; } h1.productsbar {font-size: 130%; padding: 2px 0 0px 10px; margin: 2px 0px 0px 0px; color: #636363; } h2.productsbar {font-size: 110%; padding: 2px 0 5px 10px; margin: 0px 0px 0px 0px; color: #252525; } p.productsbar {font-size: 11px;} h2.productsbar a {text-decoration: underline; color: #6d0000;} h2.productsbar a:hover {color: #252525;} /* Topic Links */ .topiclinks a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #7d7d7d; font-weight: bold;} .topiclinks a:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #8e2223; font-weight: bold;} /* Headings */ h1 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 160%;} h2 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 150%;} h3 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 140%;} h4 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 130%;} h5 {margin: 0px 0px 0.2em 0px; font-weight: bold; font-size: 130%;} h6 {margin: 0px 0px 0.2em 0px;font-weight: bold; font-style: italic; font-size: 130%;} /* Paragraphs */ p {margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.3em; font-family: arial, sans serif; font-size: 130%; } p.readmore {margin: 1.0em 0px 0.5em 0px; padding: 0px; line-height: 1.2em; font-size: 110%; color: rgb(75,75,75); } p.quote {margin: 0em 30px 0.6em 30px; line-height: 120%; font-size: 130%;} /* Quote */ p.quote {clear: left; margin: 0em 30px 0.6em 30px; line-height: 120%; font-size: 110%;} /* Lists */ ul.noindent {margin: 0px 0px 7px 25px; padding: 0px; list-style-type: disc; list-style-position: outside; font-size: 130%; } ul.indent {margin: 0px 0px 7px 15px; padding: 0px 0px 0px 15px; list-style-type: disc; font-family: arial; font-size: 120%;} li {margin-bottom: 5px} ol {margin: 0px 0px 0px 9px; padding: 0px 0px 0px 25px; list-style-type: decimal; list-style-position: outside; font-size: 120%;} ul.linklist-noindent {margin: -0.3em 0px 0.5em 0px; padding: 0px; list-style-type: none; line-height: 1.2em; font-size: 120%; } ul.linklist-indent {margin: -0.3em 0px 0.5em 0px; padding: 0px 0px 0px 10px; list-style-type: none; line-height: 1.2em; font-size: 120%; } /* Tables */ .tablenoheader {width: 400px; padding: 0; margin: 0; } .tablenoheader td {font: 12px "Arial, sans serif"; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; border-left: 1px solid #C1DAD7; background: #fff; padding: 3px 3px 3px 6px; color: #797268;} .tablenoheader td.alt { background: #fcf1f0; color: #797268;} .table {clear: left; margin: 0.5em 0px 0.2em 30px; border: solid 1px rgb(150,150,150); empty-cells: show; border-collapse: collapse; background-color: rgb(233,232,244);} .table tr {margin: 0px; padding: 0px;} .table td {padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); text-align: left; font-size: 120%;} .table th {margin: 0px; padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); empty-cells: show; text-align: left; font-size: 120%; } .table-caption {margin: 0.5em 0px 1.0em 30px; padding: 0px; clear: both; text-align: left; font-size: 120%;} table.alsofrom {clear: left; margin: 0.5em 0px 0.2em 30px; } p.alsofrom a {font-family: arial, sans-serif; font-size: 110%; padding: 2px 0 5px 10px; margin: 0px 0px 0px 0px; color: #6d0000; text-decoration: underline;} p.alsofrom:hover {color: #757575; text-decoration: underline;} /*--------------------*/ /* 6.2 - Sidebar Area */ /*--------------------*/ .sidebar {overflow: hidden; float: right; width: 160px; min-height: 500px; margin: 0px; padding: 0px 0px 10px 0px; text-align: left; color: rgb(75,75,75); } .sidebar-maintitle {margin: 0px 0px 10px 0px; padding: 3px 10px 2px 10px; background-color: rgb(226,206,149); color: rgb(167,75,3); text-transform: uppercase; font-weight: bold; font-size: 120%;} .sidebar-title-noshade {margin: 0px; padding: 2px 10px 3px 10px; border-top: solid 1px rgb(215,215,215); color: rgb(75,75,75); font-weight: bold; font-size: 120%;} .sidebar-title-shade {margin: 0px 0px 0px 0px; padding: 2px 10px 3px 20px; background-color: rgb(232,223,198); color: rgb(75,75,75); font-weight: bold; font-size: 110%;} .sidebar-txtbox-noshade {margin: 0px 0px 10px 0px; padding: 2px 10px 3px 10px;} .sidebar-txtbox-image {margin: 5px 0px 5px 0px; padding: 0px 0px 0px 0px; background-color: rgb(255,255,255); } .sidebar-txtbox-shade {margin: 0px 0px 10px 0px; padding: 2px 10px 3px 10px; background-color: rgb(235,235,235);} .sidebar-txtbox-noshade p {margin: 0px 0px 5px 0px; padding: 0px; line-height: 1.25em; font-size: 110%;} .sidebar-txtbox-shade p {margin: 0px 0px 5px 0px; padding: 0px; line-height: 1.25em; font-size: 110%;} /*--------------------*/ /* 6.3 - Footer Area */ /*--------------------*/ #footer p {margin: 0px; padding: 0px; text-align: center; line-height: 1em; font-size: 100%;} /*-------------------*/ /* 6.4 - Hyperlinks */ /*-------------------*/ .content1 a, .content2 a, .content3 a, .content2-top-txt a, .sidebar-txtbox-shade a {font-weight: bold; color: #610809; text-decoration: underline;} .content1 a:hover, .content2 a:hover, .content3 a:hover, .content2-top-txt a:hover, .sidebar-txtbox-shade a:hover, .sidebar-title-shade a:hover {font-weight: bold; color: #555555; text-decoration: none;} .content1 a:visited, .content2 a:visited, .content3 a:visited, .content2-top-txt a:visited, .sidebar-txtbox-shade a:visited, .sidebar-title-shade a:visited {font-weight: bold; color: #610809;} #footer a {color: rgb(255,255,255); text-decoration: underline;} #footer a:hover {color: rgb(0,0,0); text-decoration: none;} .tablenoheader a {font-family: arial, sans-serif; font-size: 100%; padding: 2px 0 5px 10px; margin: 0px 0px 0px 0px; color: #6d0000; text-decoration: underline;} .tablenoheader a:hover {font-size: 100%; padding: 2px 0 5px 10px; margin: 0px 0px 0px 0px; color: #757575; text-decoration: underline;} /*****************************/ /* SHORT SIDEBAR CONTACT FORM */ /*****************************/ #madeinusa {position: relative; top: 0px; left: 25px;} #sidebar-right-title-shade {position: relative; width: 140px; text-align: center; margin: 10px 5px 10px 15px; padding: 0px 0px 2px 0px; color: #1a1e1f; font-weight: bold; font-size: 140%; overflow: hidden; background-color: #e8c46c; } #sidebar-right-textbox1 {position: relative; width: 160px; text-align: left; margin: 10px 0px 10px 15px; padding: 0px 0px 2px 0px; color: #1a1e1f; overflow: hidden; } .contact-short {position: relative; top: -15px; left: 5px; width: 160px; height: 360px; color: #000000; } .contact-short fieldset {width: 160px; float: left; clear: both; } .contact-short fieldset legend {font-size: 12px; font-family: Verdana; color: #000000;} .contact-short fieldset label {font-family: Verdana; color: #000000; font-size: 10px; width: 110px; display: block;line-height: 18px; margin-top: 5px; } .contact-short input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; width: 140px;} .contact-short p {width: 160px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; margin: 10px 0px -10px 0px;} .contact-short span {display: block; line-height: 100%} p.checkbox-container {height: 20px; width: 160px; clear: both; float: none; line-height: 12px; } .checkbox-lbl {position: relative; top: 0px; width: 180px; float: left; clear: both; margin-left: 20px; line-height: 10px; } input.checkbox {position: relative; top: 0px; width: 10px; float: left; clear: left; display: block; text-align: left; margin-left: 0px; margin-top: -15px; } #sidebar-right-container a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #664922; font-weight: bold;} #sidebar-right-container a:hover {font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline; color: #8e2223; font-weight: bold;} /*****************************/ /* POPUP CONTACT FORM */ /*****************************/ .contact_popup_container {position: absolute; left: 20px; width:630px; height: 640px; top: 3px; margin: 0px auto; padding: 0px; /* border: solid 1px #646464; */} #contact_popup_bg {position: absolute; width:600px; height: 640px; background-image: url(../images/contact_popup_bg.jpg); background-repeat: no-repeat; } #contact_popup_form {position: absolute; top: 80px;} #contact_thankyou {position: relative; width: 350px; text-align: center; margin: 60px 0 20px 90px; color: #8e2223; } #contact_logoimage {position: relative; margin: 30px 0 0 120px} input, select, textarea, label{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; width: 250px; } .submit input { margin-top: 15px; margin-left: 160px; } #theform { width: 600px; height: 650px } #theform fieldset { width: 550px; margin: 5px 0px 5px 20px; float: left; } #theform fieldset legend { font-size: 12px; font-family: Arial; color: #000000; } #theform fieldset ul{ list-style:none; width:450px; } #theform fieldset ul li{ clear:both; } #theform fieldset label{ float:left; width:150px; } #theform fieldset input{ float:left; width: 250px; margin-right:10px; } /*************************/