@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { font-size: 13px; color:#666; font-family: Tahoma; margin: 0 auto;
  text-align: center;-webkit-font-smoothing: antialiased; direction:ltr; background:#ebebeb;}
  span{font-size:11px; color:#F33;}
  form{direction:ltr;}
  h1{font-size:13px; direction:ltr; color:#F33;}
  h2{font-size:12px; direction:ltr; color:#F33}
  h3{direction:ltr;}
  h4{text-align:left; border-bottom:1px dotted #CCC; font-family:Arial;}
  p{direction:ltr; text-align:justify; padding:8px 2%}
  .topp{color:#999; font-size:15px; text-align:center; padding:20px auto;}
  img{width:100%; height:auto;}
.wide{width:100%;} 
.sidebar{width:99%; height:35px; background:#5a5a5a; text-align:center; color:#FFFFFF; font-size:11px; margin-top:3px;}
.sidelab{width:99%; height:auto; max-height:1000px; overflow:hidden; margin-top:7px; background:#FFFFFF;}
.sidesample{width:99%; height:auto; overflow:hidden; margin-top:7px;} 
.orange-button{width:100%; height:30px; background:#F24F00; color:#FFFFFF; text-align:center; font-family:Tahoma; font-size:11px;}
.gray-button{width:100%; height:100%; background:#5a5a5a; color:#FFFFFF; text-align:center; font-family:Tahoma;  font-size:11px;}

.imgauto{width:auto !important; height:auto !important; max-width:98%;}
a {color:#1155CC; text-decoration:none;}

a.lan:link , a.lan:visited{color:#555; font-family:Arial; text-decoration:none; font-size:12px;}
a.lan:hover{color:#F33;}

a.fa-lan:link , a.fa-lan:visited{color:#444; font-family:Tahoma; text-decoration:none; font-size:11px}
a.fa-lan:hover{color:#F33;}

a.red:link , a.red:visited{color:#F33 !important; text-decoration:none; font-family:Tahoma;}
a.red:hover{color:#F33;}
  a.white:link , a.white:visited{color:#CCC; text-decoration:none; font-size:11px;}
  a.white:hover{color:#F33;}
  a.dark:link , a.dark:visited{color:#EDEDED; text-decoration:none; padding:2px 10px; background:#000; font-size:11px;}
  a.dark:hover{color:#F33;}

a.gray:link, a.gray:visited{color:#777; font-size:11px; text-decoration:none;}
a.gray:hover{color:#F33;}
.normal{width:96%; max-width:1100px; margin:15px auto; padding-bottom:8px !important; height:auto; overflow:hidden; text-align:left}
.divall{width:96%; max-width:1100px; margin:auto; background:#FFF; padding-top:10px !important; padding-bottom:8px !important; height:auto; overflow:hidden;  text-align:left}
.normal ul{list-style:none;}
.normal li{padding:1px 3px; border-bottom:1px dotted #D5D5EA; text-align:left; margin:2px 0; background:#EDEDED;}
.normd{width:100%; max-width:1100px; margin:auto; background:#FFF; padding-top:10px !important; padding-bottom:15px !important; height:auto; overflow:hidden; border-top:6px solid #ebebeb; padding-right:10px !important}
.rline{width:94%; padding:0 3%; background:url(theline.jpg) repeat-x; height:34px; overflow:hidden; font-size:11px;}
.normleft{width:20%; float:left; margin-left:1% !important; border-left:8px solid #FFF}
.normmiddle{width:40%; float:left; margin-left:3%; height:auto; overflow:hidden}
.threepro{width:26%; float:left; border:1px solid #CCC; height:100px; margin:10px 3%;}
.threepro img{width:100%; height:auto; max-height:100px;}
.normright{width:32%; float:right; margin-right:1%}
.blackc{width:100%; height:auto; overflow:hidden; background:#1d1d1d; padding:0 !important; }
.cblack{width:96%; max-width:1100px; margin:auto; background:#363636; padding:0 !important; height:auto; overflow:hidden; }
#logo{width:20%; float:left; height:77px;}
#logo img{width:100%; height:auto; padding:0 !important;}
#mlinks{width:56%; float:left; margin:23px 2.5% 0 2.5%; }
#linklist{width:98%;}
#linklist li{display:inline; padding:40px 4%;}
#lan{width:15%; float:right; color:#CCC; font-size:11px; font-family:Tahoma; margin-top:30px;}
#grayc{width:96%; max-width:1100px; margin:0 auto; background:#575757; height:40px;}
.gleft{width:77%; float:left;}
.gright{width:20%; float:right; background:#F33; height:20px; padding:10px 0;}

.onefourth{width:22%; margin:15px 1.5%; float:left; }
.onefourth p{ padding-top:15px; border-top:1px solid #CCC; font-size:11px; line-height:19px; color:#888;}

.toppic{list-style:none; margin-top:20px;}
.toppic li{display:inline; padding:40px 1%;}
.toppic img{width:9%; height:100px; border:2px solid #F33; min-width:100px;}



#mobtop{display:none;}
#mobfooter{display:none;}
.thefour{width:24%; min-width:230px; height:220px; 
     float:left; margin-left:1%;}
	 
	 #pro-main{width:98%; max-width:1100px; margin:auto; height:auto; overflow:auto; padding:1%;}
	 #prodcontent{width:100%; margin:auto; }
	 
	
	 
.pro-id{width:96%; min-width:240px; max-width:1000px; height:auto; margin:15px auto 15px auto ; overflow:auto; background:#EDEDED}	 
.picpro-id{width:30%; height:auto; float:left; min-width:200px; border:1px solid #EDEDED;}
.picpro-id img{width:100%; height:auto;}
.textpro-id{width:60%; float:left; margin-left:4%; height:auto;}





#footer-left{width:30%; float:left; font-family:Arial; line-height:25px; font-size:12px; text-align:left; color:#999; margin-left:2%;}
#footer-right{width:62%; float:right; text-align:left; margin-right:1%; color:#999;}



#htwo{width:56%; float:left; height:auto; overflow:hidden; background:#FFF; padding:10px 2%; }
#thelinks{width:35%; float:right; height:auto; overflow:hidden; background:#EDEDED}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#mine {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:Tahoma;}
#mine li {float:left; margin-right:1px;}
#mine li a {display:block; float:left; height:40px; line-height:40px; color:#FFFFFF; text-decoration:none; font-size:12px; padding:0 24px 0 24px; border-right:1px solid #666;}


#mine table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#mine li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#mine li:hover {position:relative; z-index:200;}

#mine li:hover > a {color:#fff; background:#333;}
#mine li:hover > a.sub {color:#fff; background-color:#c60;}

#mine li.current a {color:#fff; background:#dac724;}


#mine li.current a.sub {color:#fff; background:#ffc324 url(down-arrow.gif) no-repeat right center;}

#mine :hover ul {left:0; top:40px; width:200px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#mine ul, 
#mine :hover ul ul {position:absolute; left:-20px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#mine :hover ul :hover ul
{left:200px; top:-1px; background:#222; white-space:nowrap; width:200px; z-index:200; height:auto;}

#mine :hover ul li {margin:0; border-top:1px solid #666;}
#mine :hover ul li a {width:200px; padding:0; text-indent:10px; background:#6d91a7; color:#FFF; height:30px; line-height:30px;}
#mine :hover ul li a.fly {background:#6d91a7;}
#mine :hover ul li a.enfly {background:#6d91a7; font-family:Tahoma !important}


#mine :hover ul :hover {background-color:#333; color:#fff;}
#mine :hover ul :hover a.fly {background-color:#333; color:#fff;}
#mine :hover ul :hover a.enfly {background-color:#333; color:#fff;  font-family:Tahoma !important}


#mine :hover ul li.currentsub a {background:#ffc324; color:#fff;}
#mine :hover ul li.currentsub a.fly {background:#ffc324 url(right-arrow.gif) no-repeat right center; color:#fff;}
#mine :hover ul li.currentsub a.enfly {background:#ffc324 url(right-arrow.gif) no-repeat right center; color:#fff;  font-family:Tahoma !important}


#mine :hover ul :hover ul li a {width:190px; padding:0; text-indent:10px; background:#3e3e3e; color:#FFF;}
#mine :hover ul :hover ul :hover {background-color:#d70; color:#fff;}

#mine :hover ul :hover ul li.currentfly a,
#mine :hover ul :hover ul li.currentfly a:hover {background:#ffc324; color:#fff;}

#mine :hover ul :hover ul li.currentenfly a,
#mine :hover ul :hover ul li.currentenfly a:hover {background:#ffc324; color:#fff;   font-family:Tahoma !important}



.percat{width:22%; float:left; min-width:130px; margin-left:3%; border:1px dotted #CCC; max-height:230px;}

a.compblue:link,a.compblue:visited{text-decoration:none;color:#F33; background:#EDEDED}
a.compblue div{width:21%; background:#EDEDED; margin:12px 0; height:auto; overflow:hidden; border-radius:4px; float:left; margin-left:2%; border:1px solid #CCC }
a.compblue div:hover{background:#CCC !important ;  border:1px solid #F33}
a.compblue div:hover div{background:#CCC !important; border:1px solid #F33}



.perper{width:16%; float:left; min-width:130px; margin-left:3%; border:1px dotted #CCC; height:230px;}
/*! http://responsiveslides.com v1.54 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  max-width:1100px;
  margin:0;
  
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }




#nav a,#subMenusContainer a{text-decoration:none;display:block;padding:10px 20px;background-color:#fafafa;-moz-border-radius:7px;-webkit-border-radius:7px; color:#999; font-size:14px; text-align:left;}
#nav a{margin:0;}
#subMenusContainer a,#nav li li a{text-align:left;}
#nav a:hover,#nav a:focus,#subMenusContainer a:hover,#subMenusContainer a:focus,#nav a.mainMenuParentBtnFocused,#subMenusContainer a.subMenuParentBtnFocused{background-color:#F6C739;color:#FFF;}#subMenusContainer a:hover,#subMenusContainer a:focus,#nav a.mainMenuParentBtnFocused,#subMenusContainer a.subMenuParentBtnFocused,#nav li a:hover,#nav li a:focus{background-color:#F6C739;color:#FFF;}




#nav a.chet:link, #nav a.chet:visited{color:#C00; text-decoration:none;}
#nav a.chet:hover{color:#000;}



#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{-moz-border-radius:8px;-webkit-border-radius:8px;border:1px solid #C3D46A;left:0;}
#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{;margin:auto;list-style:none;line-height:1em;}
#nav li{display:block;list-style:none;position:relative; border-bottom:1px dotted #CCC;}
#subMenusContainer li{list-style:none;}
#nav{display:block;position:relative;list-style:none;margin:auto;width:96%;z-index:5; text-align:left;display:block; z-index:1000 }
#subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000;}
#nav li li{float:none; }#nav li li a{position:relative;float:none;}
#nav li ul{position:absolute;width:10em;margin-left:-1000em;}
#nav li ul ul{margin:-1em 0 0 -1000em;}
#nav li:hover ul ul{margin-left:-1000em;}
#nav li:hover ul{margin-left:120px;margin-top:-2.5em;}





.rslides {
  margin: 0 auto;
  
  }

.rslides_container {

  position: relative;
  float: left;
  width: 100%;
  
  
  }

.rslides1_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  z-index: 99;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.rslides1_nav:active {
  opacity: 1.0;
  }

.rslides1_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.rslides2_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.rslides2_nav.next {
  left: auto;
  right: 0;
  }

.rslides3_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.6;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000 url("themes.gif") no-repeat left 50%;
  width: 38px;
  }

.rslides3_nav:active {
  opacity: 1.0;
  }

.rslides3_nav.next {
  left: auto;
  background-position: right 50%;
  right: 0;
  }

.rslides1_nav:focus,
.rslides2_nav:focus,
.rslides3_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_tabs .rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }

.caption {
  
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}







#mobtop{display:none;}

@media screen and (max-width: 480px) {

.github {
    display: none;
  }

#thefixed{display:none;}
#prolinks{display:none;}
#thetopper{display:none;}
#footer-left{display:none;}
#footer-right{width:98%; margin:auto; text-align:left;}
#mobtop{width:98%; margin:auto; height:auto; overflow:auto; display:block;}
#pro-info{width:98%; height:auto; overflow:auto; margin:auto;}
#pro-picture{width:98%; min-width:280px; height:auto; border:1px solid #EDEDED; margin:auto;}
.thebox{width:96%; margin:auto; height:400px; min-width:240px; float:left; margin:1% 0 1% 2.5%; border:1px solid #CCC;}
.thefour{width:24%; min-width:240px; height:220px; 
      margin-left:1%;}
.fourpro{width:43%; margin:2%; border:1px solid #CCC; height:115px; float:left;}	  
.linkbox{width:96%; margin:auto; height:270px; border:1px solid #CCC; float:left;}
#mobfooter{display:block; width:96%; height:100px; border-top:1px solid #CCC; background:#333; margin:auto; color:#CCC; text-align:center;}
#manual{display:none;}
#samplepro{width:98%; margin:auto; height:auto; overflow:auto;}
#procontent{width:98%; margin:0 auto auto auto;}
.theschetch{width:96%; height:270px; min-width:230px; float:left; margin:auto;}
#brando{width:98%; min-width:240px; height:auto; overflow:auto; margin:auto; }
#compinfo{width:98%; min-width:240px; height:auto; overflow:auto;  margin:auto;}
#onesample{display:none;}
#threefields{width:96%; height:auto; margin:10px auto 10px auto;}
.picpro-id{width:98%; height:auto; border:1px solid #EDEDED;}
.textpro-id{width:96%;  height:auto;}
#abox{width:98%; margin:auto; background:#CCC;}
#bbox{width:98%; margin:auto; }
#cbox{width:98%; margin:auto; background:#CCC;}
#ntop{display:none;}
#grayc{display:none;}
.blackc{display:none;}
.toppic{display:none;}
.onefourth{float:none; width:94%; margin:auto;}
.normleft{float:none; width:94%; margin:auto;}
.normmiddle{float:none; width:94%; margin:auto; height:auto; overflow:hidden; padding-bottom:15px}
.normright{float:none; width:94%; margin:auto;}
.threepro{width:42%; float:left; border:1px solid #CCC; height:80px; margin:10px 2%;}

#htwo{float:none; width:96%; margin:auto}
#thelinks{float:none; width:96%; margin:auto}
a.compblue:link,a.compblue:visited{text-decoration:none;color:#F33; background:#EDEDED}
a.compblue div{width:94%; background:#EDEDED; margin:12px 0; height:auto; overflow:hidden; border-radius:4px; float:left; margin-left:2%; border:1px solid #CCC }
a.compblue div:hover{background:#CCC !important ;  border:1px solid #F33}
a.compblue div:hover div{background:#CCC !important; border:1px solid #F33}

}