/* CSS Document */ body { margin:0; padding:0; background:url(../images/body-bg.jpg) repeat-x top; background-color:#000000; } div,h1,h2,h3,p,span,ul,li,img { margin:0; padding:0; list-style:none; border:0; } .clear { clear:both; height:0; } .debug { border:1px dotted red; } .fleft { float:left; margin:0; padding:0; } .fright { float:right; margin:0; padding:0; } /************************ Layout Container Objects ************************/ #main { width:100%; float:left; background:url(../images/main-bg.jpg) no-repeat center top; padding-bottom:65px; } #wrap { width:974px; margin:0 auto; background:url(../images/aniback.gif) repeat-y right; overflow:hidden; clear:both; background-color:#FFFFFF; border-bottom:3px solid #E9E9E9; } /**** Header Section ****/ #header { width:974px; height:225px; float:left; background:url(../images/header-bg.jpg) no-repeat; } #header h1 { display:none; } .phone-number {width:921px; float:left; padding:30px 53px 0px 0px; text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FFFFFF; font-weight:bold; } .black-magic {width:941px; float:left; padding:135px 33px 0px 0px; text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:17px; color:#FFFFFF; font-weight:normal; } /**** Menu Bottom Image Section ****/ #menu-bottom-image { width:920px; float:left; } /**** Content Left ****/ #content-left { width:603px; float:left; background:url(../images/content-left-bg.jpg) repeat-y; } #content-left h2 { width:577px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#1E1E1E; padding:0px 0px 40px 26px; } #content-left p { width:577px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#1E1E1E; padding:0px 0px 40px 26px; } #content-left h2 span { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:21px; font-weight:bold; color:#1E1E1E; } ul.applications { width:210px; float:left; padding:0px 0px 40px 65px; background:url(../images/applications-icon.jpg) no-repeat; } ul.applications li { width:210px; float:left; } ul.applications li.applications-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1E1E1E; } ul.applications li.applications-content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1E1E1E; padding:10px 0px 0px 0px; } ul.benefits { width:270px; float:left; padding:0px 0px 30px 55px; background:url(../images/benefits-icon.jpg) no-repeat; margin-top:-13px;} ul.benefits li { width:270px; float:left; } ul.benefits li.benefits-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1E1E1E; padding:14px 0px 0px 0px; } ul.benefits li.benefits-content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1E1E1E; padding:10px 0px 0px 0px; } ul.features { width:470px; float:left; padding:0px 0px 30px 55px; background:url(../images/features-icon.jpg) no-repeat; margin-top:-13px;} ul.features li { width:470px; float:left; } ul.features li.benefits-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1E1E1E; padding:14px 0px 0px 0px; } ul.features li.features-content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1E1E1E; padding:10px 0px 0px 0px; } p.retread { clear:both; font-size:14px; } p.retread a { color:#C10A0A; font-weight:bold; text-decoration:none; } p.retread a:hover { color:#000; text-decoration:underline; } /**** Submit for product pricing or orders Section ****/ #form { width:317px; min-height:400px; float:left; background:url(../images/form-bg-slice.jpg) repeat-y 0 0; } #form .header { height:100px; background:url(../images/form-header.jpg) no-repeat 0 0; } #form .footer { height:80px; padding:20px 20px 0 0; text-align:right; background:url(../images/form-footer.jpg) no-repeat 0 0; } #form .header > p { padding:60px 40px 0 0; text-align:right; font-style:italic; } #form .domestic { display:block; } #form .foreign { display:none; } #form ul { display:block; padding:0 20px 0 40px; } #form ul li { position:relative; display:block; float:none; clear:both; } #form ul li { color:#1D1D1D; font:normal 12px/23px Verdana, Arial, Helvetica, sans-serif; } #form ul li:after { display:block; float:none; clear:both; height:0; overflow:hidden; visibility:hidden; content:"."; } .ie #form ul li { zoom:1; } #form ul li.country { padding:10px; text-align:center; } #form label { float:left; font-weight:bold; font-size:11px; } #form label span { color:#FF0000; } #form fieldset { margin-bottom:10px; } #form legend { padding:0 10px; font:bold 12px Verdana, Geneva, sans-serif; } .text-field { float:right; width:150px; padding:0 4px; border:1px solid #B7B7B7; background:url(../images/text-field-bg.jpg); } .wide { width:170px; } .radio { font-size:11px; } .select-box { float:right; width:180px; } .textarea { border:1px solid #B7B7B7; } .textarea.address { width:230px; height:40px; margin-bottom:10px; } .textarea.comments { width:250px; height:80px; } #txtCity.text-field { width:170px; } input.error { border:1px solid red !important; } label.error { position:absolute; top:0; left:100px; line-height:16px; color:red; } #form ul li.ta label.error { top:30px; left:100px; line-height:16px; color:red; } #form ul li span.field { position:relative; display:block; float:none; clear:both; } #form ul li span.field:after { display:block; float:none; clear:both; height:0; overflow:hidden; visibility:hidden; content:"."; } .ie #form ul li span.field { zoom:1; } #form ul li span.field > label.error { top:0; left:80px; width:150px; } #form ul li span.ta label.error { top:30px; } /**** Contact Information Section ****/ #contact-information { width:847px; float:left; background:url(../images/contact-information-bg.jpg) no-repeat top; padding:15px 0px 30px 73px; } #contact-information h2 { width:847px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#1E1E1E; padding-bottom:15px; } #contact-information p { width:417px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; } #contact-information p a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#000CFF; text-decoration:none; } #contact-information p a:hover { text-decoration:none; } /**** Footer Section ****/ #footer { width:902px; height:34px; float:left; background:url(../images/footer-bg.jpg) no-repeat; text-align:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#FFFFFF; padding:37px 18px 0px 0px; } #footer a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#FFFFFF; text-decoration:none; } #footer a:hover { text-decoration:underline; } #copyright p.sel { float:left; width:400px; padding:18px 0; } #copyright p.sel { text-align:left; color:#ccc; font:normal 10pt Helvetica,Arial,sans-serif; } #copyright p.sel a { color:#999; } #copyright p.sel a:hover { color:#fff; } #copyright { width:974px; margin:0 auto; padding:18px 0; } #copyright p.patents { float:right; width:500px; } #copyright p.patents { color:#999; font:normal 10pt Helvetica,Arial,sans-serif; } /****26-08-09****/ #content-left p.black-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1E1E1E; padding:0px 0px 10px 26px; } #content-left p.black-content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#1E1E1E; } #content-left p.black-content a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#0000CC; text-decoration:none; } #content-left p.black-content a:hover { text-decoration:underline; } #content-left p.content-text { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; } #content-left p.content-text a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#000CFF; text-decoration:none; } #content-left p.content-text a:hover { text-decoration:none; } ul.costsaving { width:557px; float:left; padding:0px 20px 40px 26px;} ul.costsaving li { width:557px; float:left; } ul.costsaving li.block-heading { width:557px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#333333; padding:0px 0px 10px 0px; } ul.costsaving li.block1 { width:130px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; padding:0 5px 0 0;} ul.costsaving li.block2 { width:139px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; } ul.costsaving li.block3 { width:139px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; } ul.costsaving li.block4 { width:139px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858;} ul.costsaving li.block5 { width:270px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#585858; padding:0 5px 0 0;} ul.costsaving li.block6 { width:418px; float:left; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#333333;} ul.costsaving li.download { width:557px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#261815; } ul.costsaving li.download a { width:557px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#261815; text-decoration:underline; } ul.costsaving li.download a:hover {text-decoration:none;} ul.costsaving li.costsaving-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#1E1E1E; } ul.costsaving li.costsaving-content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#1E1E1E; padding:10px 0px 0px 0px; } ul.costsaving li.tshoot { width:557px; float:left; background:url(../images/table-bg.jpg) repeat-y; } .problem { width:142px!important; float:left; margin:0!important; padding:10px 5px 10px 10px!important; font-weight:normal!important; } .possible { width:175px!important; float:left; margin:0!important; padding:10px 5px 10px 10px!important; font-weight:normal!important; } .solution { width:195px!important; float:left; margin:0!important; padding:10px 5px 10px 10px!important; font-weight:normal!important; } /**** Top Nav Section ****/ #topnav { width:974px; height:30px; float:left; background:url(../images/menu-bg.jpg) repeat-x; text-align:center; padding:11px 0px 0px 0px; } /*#topnav a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#FFFFFF; text-decoration:none; } #topnav a:hover { text-decoration:underline; } */ #navigation { height:30px;width:100%; position: relative; z-index: 120; } #navigation li { float:left; width:240px;} #navigation li a{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; font-weight:normal; color:#FFFFFF; text-decoration:none; height:30px; display:block;} #navigation ul {list-style-type:none; padding:0; margin:0;visibility:hidden; width:0; height:0; overflow:hidden; margin-left:50px; border:2px solid #110F10; border-top:0px; width:220px;} #navigation :hover ul li{width:220px;float:left; background:url(../images/submenubg.jpg) repeat-x; height:32px;} #navigation :hover{position:relative} #navigation :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; left:0px;top:30px; } #navigation :hover ul li a {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#FFFFFF; display:block; text-align:left; padding:7px 0 0 10px; height:25px;} #navigation :hover ul li a:hover { background:#424242;} .videoblock{ margin:0 0 25px 30px; float:left; border:2px solid #999999;} .socialicon{width:220px; float:right; margin:-35px 20px 0 0;} .socialicon img{ margin-left:8px; border:0px;} ul.product { width:600px; float:left; padding:0px 0px 30px 35px;} ul.product li.producthead { width:550px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#1E1E1E; padding:14px 0px 0px 0px; background:none;} ul.product li {width:280px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1E1E1E; margin:10px 0px 0px 0px; background:url(../images/bullet2.jpg) no-repeat; padding-left:15px; } #content-left h3 { width:577px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:21px; font-weight:bold; color:#1E1E1E; padding:0px 0px 20px 26px; } #content-left h4 { width:577px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#1E1E1E; padding:0px 0px 20px 26px; } #content-left p span { width:250px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#1E1E1E; } .datatable{ width:577px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#1E1E1E; padding:0px 0px 20px 26px; } .datatable h4 { width:860px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#1E1E1E; padding:0px 0px 20px 0;} ul.toollink { width:600px; float:left; padding:0px 0px 30px 35px; margin-top:-20px;} ul.toollink li {width:580px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#1E1E1E; margin:15px 0px 0px 0px; background:url(../images/bullet3.jpg) no-repeat; padding-left:25px; } ul.toollink li a{ color:#0033FF; text-decoration:none; font-size:17px;} ul.toollink li a:hover{ text-decoration:underline;} ul.toollink li a.pdfclick{font-size:14px; color:#1E1E1E;} #content-left p.toplink { margin:0; padding-bottom:20px; text-align:right; } #content-left p.toplink a { color:#000; text-decoration:underline; } #content-left p.toplink a:hover{ color:#C10A0A; text-decoration:none;} img.prodpg { margin:0 0 15px 10px; border:1px solid #999; position:relative; z-index:100; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; display:none; position:relative; width:100%; max-width:100%; top:0; z-index:7777; font-family:Verdana, Arial, Helvetica, sans-serif; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: none; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */ .active { background-color: #b11116; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; } .mobile {display:none;} @media only screen and (max-width: 990px) { .mobile {display:block;} .desktop {display:none !important;} #header{display:none !important;} #wrap {background:none; max-width:100%;} div, iframe, .fleft, .applications, p {width:100% !important; float:none !important; margin:0 !important;} #content-left, #copyright {width: auto !important; padding:20px;} #content-left h2, #contact-information, #footer {width:96% !important; padding:2% !important; float:none !important;} li img {width:auto !important;} ul, li {width:auto !important; float:none !important;} #frmRequest {padding:20px;} #form .header {background:none;} .title {font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";} #form .header p {padding:0px !important;} #form {background:#D1D1D1;} #footer {background:none; text-align:center;} #contact-information {background:#fff !important;} .mologo {max-width:300px; height:50px; float:left;} .gologo {display:block !important; padding:0!important; float:left !important; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: nowrap;} #form .footer {background:none;} #content-left p {padding:0px;} img.prodpg {width:100%; margin:0;} ul.costsaving li.tshoot {background:none;} .problem, .possible, .solution {width:30%!important; padding:0!important; float:left !important;} #content-left img {width:100%;} topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } /*.topnav.responsive {position: relative;}*/ .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } .w3-modal {z-index:8300;display:none;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4); font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";} .w3-modal-content{margin:auto;position:relative;padding:0;outline:0;width:70%; background-color:transparent !important; top: 50%; transform: perspective(1px) translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);} .w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit; padding:20px;} .w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit} .w3-closebtn:hover,.w3-closebtn:focus{color:#000;text-decoration:none;cursor:pointer} .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} .w3-closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit; background-color:#fff;} @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}} @media (max-width:768px){.w3-modal-content{width:500px}} @media (min-width:993px){.w3-modal-content{width:400px}} .w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} .w3-container:after{content:"";display:table;clear:both} .w3-display-topright{position:absolute;right:0;top:0; z-index:8310;} .w3-padding-16{padding-top:16px!important;padding-bottom:16px!important} .popImg {width:45%; padding:2%; cursor:pointer;} @media (max-width:600px){.popImg{width:100%;} #iContact{width:100%; height:90%;} } #caption {color:white; font-size:2em; font-weight:bold; text-align:center;} .modal-open {overflow:hidden; /*position:fixed;*/} .CAwarning {color:gray !important; float:right; font-size:small; float:left;} .black65 {background:black; color:white;} .gray65 {background:#ccc; color:black;} .CA65 td {text-align:center; padding:20px;} .CA65 table {width:100%;}