/* CSS Document */ body,td,th { margin:0px; padding:0px; font-family: Tahoma; font-size: 12px; color: #383838; } body * { margin:0px; padding:0px; } #template { width:953px; } /* Header csss */ #header { margin: 0px; padding: 0px;} #header div.left { float:left; } #header div.mid { float:left; padding-top:20px; padding-left:20px;} #header div.right { float:right; display:table; } #header div.right ul { display: table-row; list-style:none; } #header div.right ul li { display: table-cell; float:left; background-image:url(../images/topmid.gif); height: 33px;} #header div.right ul li.text { font-weight:bold; padding-top: 7px;} /* Now making the menu */ #menu { margin: 0px; padding: 0px; list-style: none; display:table; width:952px; background-image:url(../images/menumid.gif); background-repeat:repeat-x;} #menu ul { display: table-row; list-style: none; float:left } #menu ul li { display: table-column; float: left; background-image:url(../images/menumid.gif); background-repeat:repeat-x; height:67px; padding-left: 10px; padding-right: 10px;} #menu ul li.first { padding-left: 0px; padding-right: 0px;} #menu ul li a { font-family: "Myriad Pro" , Arial; font-size: 14px; font-weight: normal; text-transform: uppercase; color: #FFFFFF; text-decoration: none; padding-top:25px; padding-left:15px; padding-right:15px; padding-bottom:25px; display:block; } #menu ul li a.active { font-family: "Myriad Pro" , Arial; font-size: 14px; font-weight: normal; text-transform: uppercase; color: #82cf02; text-decoration: none; padding-top:25px; padding-left:15px; padding-right:15px; padding-bottom:25px; display:block; background-image:url(../images/menuon.gif); background-repeat:repeat-x; } #menu .right { float:right } /* Bottom */ #footer { background-color:#383838; height:40px;padding-top:5px; color:#FFFFFF; padding-left: 25px;} /* Get content */ #content { margin: 0px; padding: 0px; } #content div.top { display: table; } #content div.top .left { background-image: url(../images/leffgrbg.gif); background-repeat: no-repeat; height: 25px; width: 169px; float:left; padding-left:20px; padding-top:10px; font-size: 12px; text-transform: uppercase; color: #FFFFFF; } #content div.top .right { background-image: url(../images/rightgrbg.gif); background-repeat: no-repeat; height: 27px; margin-left:197px; padding-left:20px; padding-top:10px; width: 733px;} #content div.middle { display: table; width:953px;} #content div.middle .left { float: left; } #content div.middle .right { float: right; width: 370px; display:block; } #content div.middle .left .menu { float: left;} #content div.middle .left .menu ul { list-style: none; float:none;} #content div.middle .left .menu ul li{ width: 169px; background-image: url(../images/dotedline.gif); background-repeat: repeat-x; background-position: bottom; padding-left: 10px;} #content div.middle .left .menu ul li a { display:block; padding-top:7px; padding-bottom:6px; font-family: Tahoma; font-size: 12px; color: #6e6e6e; text-decoration: none; background-image: url(../images/arrow.gif); background-repeat: no-repeat; background-position: left; padding-left:15px;} #content div.middle .left .maincontent { float: left; width: 380px; padding-left: 18px; padding-top: 10px; } #content div.middle .left .maincontent2 { float: left; width: 700px; padding-left: 18px; padding-top: 10px; } #content div.middle .bluebox { display:table; background-color:#7dc0fd; padding-top: 10px; padding-bottom: 10px; width: 570px;clear:both; } #content div.middle .bluebox ul { display: table-row; list-style: none; } #content div.middle .bluebox ul li { display: table-cell; float: left; padding-left: 5px; padding-right: 5px;} #content div.middle .bluebox .white { display:block; width: 550px; ifont-family: Tahoma; font-size: 16px; font-weight: bold; color: #FFFFFF; clear:both; padding: 10px; } .maintable { display: table; float:none;} .maintable ul { display: table-row; list-style:none; } .maintable ul li { display: table-cell; float:left; width: 184px; padding-left:1px; } .maintable ul li img { padding: 0px; margin: 0px; width:auto;} .maintable ul li div.middle2 { background-image: url(../images/boxmid.gif); background-repeat:repeat-y; width: 184px;} .maintable ul li div.middle3 { background-image: url(../images/boxmid.gif); background-repeat:repeat-y; width: 184px;} .navigation { display: block; border:#666666 1px solid; padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 10px; background-color:#E8E8E8} .navigation a { text-decoration:none; color:#999999; } .navigation a:hover { text-decoration:underline; color:#999999;} #form1 { display:table;} #form1 dl { display:table-row; } #form1 dl dd { display:block; padding:5px;} #form1 dl dd.grey { background-color:#f4f4f4;} #form1 dl dd.grey1 { background-color:#e5e5e5;} /*#form1 dl dd div { display:block; padding-bottom:5px; padding-top:5px;}*/ #form1 dl dd div label { width:180px; display:block; float:left;} a.blklink { font-family: Tahoma; font-size: 12px; color: #000000; text-decoration: none; } a.blklink:link { font-family: Tahoma; font-size: 12px; color: #000000; text-decoration: none; } a.blklink:hover { font-family: Tahoma; font-size: 12px; color: #595959; text-decoration: none; } .errfont { color:#FF0000; font-family: Tahoma; text-decoration: none; font-size:11px; } .whats_new_text { font-family: Tahoma; font-size: 12px; color: #000000; text-decoration: none; } .txtitle { font-size:14px; font-family: Tahoma; color: #82cf02; text-decoration: none; text-transform:capitalize; font-weight:bold; } .txtblu { font-size:14px; font-family: Tahoma; color: #013378; text-decoration: none; text-transform:capitalize; font-weight:bold; } .dclass { width:300px; } @media screen and (min-width: 800px) and (max-width: 950px){ #template { width:780px; } #header .right { position: absolute; top: 0px; right: 0px;} #header .mid { display: none;} #template #menu { width:780px; } #template #menu ul li { height:67px; padding-left: 0px; padding-right: 0px;} .leftpanel { float: none; display: block; text-align: center; margin: 0px auto;} .leftpanel .whitefont { text-align: left;} .rightpanel { float: none; display: block; width: 100%; clear: both; margin: 10px; auto;} .rightpanel .maintable ul { display: table-cell; vertical-align: top;} .rightpanel .maintable ul li { display: table-cell; vertical-align: top; margin-right: 5px; height: 230px; background-color: #F1F1F1;} .row ul li.right1 { display: none;} .row ul li.right2 { display: none;} #template #content div.middle { width: 100%;} #template #content div.top { display: none; } #template #content div.middle .left { display: block; float: none; width: 100%;} #template #content div.middle .right { display: block; float: none; clear: both; width: 100%;} #template #content div.middle .left .menu ul li { display: inline-block; } #template #content div.middle .left .menu { display: block; float: none; width: 100%;} #template #content div.middle .left .maincontent { display: block; float: none; width: 100%;} } @media screen and (min-width: 480px) and (max-width: 780px){ #template { width:90%; } #header .right { position: absolute; top: 0px; margin: 0px auto;} #header .mid { display: none;} #header .left { margin-top: 35px;} #template #menu { width:100%; background-image: none;} #template #menu ul { display: block; width: 100%;} #template #menu ul li.first { display: none;} #template #menu ul li { height: auto; padding-left: 0px; padding-right: 0px; width: 100%; display: block;} #template #menu img { display: none;} #template #menu ul li:nth-child(2) { display: block; } #template #menu:hover ul li { display: block;} .leftpanel { float: none; display: block; text-align: center; margin: 0px auto; width: 100%; } .leftpanel .whitefont { text-align: left; width: 100%; background-size: cover; height: auto;} .rightpanel { float: none; display: block; width: 100%; clear: both; margin: 10px; auto; } .rightpanel .maintable { width: 100%;} .rightpanel .maintable ul li { display: table-cell; vertical-align: top; margin-right: 5px; height: 230px; background-color: #F1F1F1; width: 45%; margin-top: 5px;} .rightpanel .maintable ul li div.middle3 { background-image: none; width: 100%; padding-right: 10px;} .rightpanel .maintable ul li div.middle2 a { background-image: none; width: 100%; padding-right: 10px;} .row ul li.prodbox { width: 100%;} .prodbox .imgs { height: auto; } .prodbox .imgs .img1 { display: inline-block; float: none; margin-top: 5px;} #template #menu ul li a { padding-top:10px; padding-left:15px; padding-right:10px; padding-bottom:5px; display:block; } #template #menu ul li a.active { padding-top:10px; padding-left:15px; padding-right:10px; padding-bottom:5px; display:block; } .row ul { display: block;} .row ul li.right1 { display: none;} .row ul li.right2 { display: none;} .bottom { clear: both;} #template #content div.top { display: none; } #template #content div.middle { width: 100%;} #template #content div.top { display: none; } #template #content div.middle .left { display: block; float: none; width: 100%;} #template #content div.middle .right { display: block; float: none; clear: both; width: 100%;} #template #content div.middle .left .menu ul li { display: inline-block; } #template #content div.middle .left .menu { display: block; float: none; width: 100%;} #template #content div.middle .left .maincontent { display: block; float: none; width: 100%;} #template #content div.middle .left .maincontent2 { width: 100%; } #template #content div.middle .left .maincontent2 .maintable ul { display: block; float: none;} #template #content div.middle .left .maincontent2 .maintable ul li { display: block; float: none;} } @media screen and (min-width: 300px) and (max-width: 480px){ #template { width:90%; } #header .right { display: none;} #header .mid { display: none;} #header .left { margin-top: 10px;} #template #header div.right { display: none; } #template #menu { width:100%; background-image: none;} #template #menu ul { display: block; width: 100%;} #template #menu ul li.first { display: none;} #template #menu ul li { height: auto; padding-left: 0px; padding-right: 0px; width: 100%; display: block;} #template #menu img { display: none;} #template #menu ul li:nth-child(2) { display: block; } #template #menu:hover ul li { display: block;} .leftpanel { float: none; display: none; text-align: center; margin: 0px auto; width: 100%; } .leftpanel .whitefont { text-align: left; width: 100%; background-size: cover; height: auto;} .rightpanel { float: none; display: block; width: 100%; clear: both; margin: 10px; auto; margin-left: 0px; margin-right: 0px; } .rightpanel .maintable { width: 100%;} .rightpanel .maintable ul { display: block;} .rightpanel .maintable ul li { display: block; vertical-align: top; background-color: #F1F1F1; width: 100%; margin-top: 5px; box-sizing: border-box} .rightpanel .maintable ul li div.middle3 { background-image: none; width: 100%; padding-right: 10px;} .rightpanel .maintable ul li div.middle2 a { background-image: none; width: 100%; padding-right: 10px;} .row ul li.prodbox { width: 100%;} .prodbox .imgs { height: auto; } .prodbox .imgs .img1 { display: inline-block; float: none; margin-top: 5px;} #template #menu ul li a { padding-top:10px; padding-left:15px; padding-right:10px; padding-bottom:5px; display:block; } #template #menu ul li a.active { padding-top:10px; padding-left:15px; padding-right:10px; padding-bottom:5px; display:block; } .row ul { display: block;} .row ul li.right1 { display: none;} .row ul li.right2 { display: none;} .bottom { clear: both;} #template #content div.middle { width: 100%;} #template #content div.top { display: none; } #template #content div.middle .left { display: block; float: none; width: 100%;} #template #content div.middle .right { display: block; float: none; clear: both; width: 100%;} #template #content div.middle .left .menu ul li { display: inline-block; } #template #content div.middle .left .menu { display: block; float: none; width: 100%;} #template #content div.middle .left .maincontent { display: block; float: none; width: 100%;} #template #content div.middle .right .maintable ul { display: block; float: none;} #template #content div.middle .right .maintable ul li { display: block; float: none;} #template #content div.middle .left .maincontent2 { width: 100%; } #template #content div.middle .left .maincontent2 .maintable ul { display: block; float: none;} #template #content div.middle .left .maincontent2 .maintable ul li { display: block; float: none;} #form1 dl dd div label { display: block; width: 100%; float: none;} }