html {
    height: 100%;
}

body {
	/*margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;*/
	-ms-overflow-style: scrollbar; 
     height: 100%;
/*	 top: 0px !important; */
	/*background-color: #efefec;*/
	/*background-image: url(bg1.gif);*/
}



.footer {
	font-size: 10px;
}

/* side menu css */
body,html{
    height: 100%;
  }

  nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }

    nav.sidebar:hover + .main{
      margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  }


a.commentlink {
	color: #333;
	text-decoration: none;
}


/* side menu css */







/* Link Style */

a {
	text-decoration: none;
}
a:visited {
	/*color: #022eed; */
}
a:hover {
	/*color: #0087dd;
	text-decoration: underline; */
	text-decoration: none;
}

a.link {
	text-decoration: none;
	font-weight: normal;
}
a.link:visited {
	text-decoration: none;
	font-weight: normal;
}
a.link:hover {
	text-decoration:none;
	font-weight: normal;
}
/*
a.linktop {
	color: #06507f;
	text-decoration: none;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
}
a.linktop:visited {
	color: #06507f;
	text-decoration: none;
	font-weight: normal;
}
a.linktop:hover {
	color:#00d2e5;
	text-decoration:underline;
	font-weight: normal;
}

a.lblack {
	color: #333333;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
}
a.lblack:visited {
	color: #333333;
}
a.lblack:hover {
	color:#1668f0;
	text-decoration:none;
}

a.link2 {
	color: #666666;
	text-decoration: none;
}
a.link2:visited {
	color: #666666;
}
a.link2:hover {
	color:#1668f0;
	text-decoration:none;
}

a.link3 {
	color: #0088cf;
	text-decoration: none;
}
a.link3:visited {
	color: #0088cf;
}
a.link3:hover {
	color:#1668f0;
	text-decoration:none;
}

a.menuleft {
	font-family: 'Roboto', sans-serif, "MS Sans Serif";
	font-size: 12px;
	color: #042065;
	text-decoration: none;
	text-decoration: none;
}
a.menuleft:visited {
	color: #042065;
	text-decoration: none;
}
a.menuleft:hover {
	color:#008aff;
	text-decoration:none;
}

a.separatebar {
	color:#ffffff;
	text-decoration:none;
}
*/



/* bootstrap custom */
/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
/* bootstrap custom */




/* Font Style */
.fMenu { 
	font-family: 'Roboto', 'sans-serif'; 
	font-size: 14px; 
	font-weight: bold; 
	padding-left: 30px; 
}
.ta10 { font-family: 'Roboto','Tahoma', 'sans-serif', 'MS Sans Serif'; font-size: 10px; }
.ta11 { font-family: 'Roboto','Tahoma', 'sans-serif', 'MS Sans Serif'; font-size: 11px; }
.ta12 { font-family: 'Roboto','Tahoma', 'sans-serif', 'MS Sans Serif'; font-size: 12px; }
.fPageSubject { font-family: 'MS Sans Serif'; font-size: 16px; color: #135395; font-weight: bold; }
.fWhite { color: #FFFFFF }
.fblack { color: #000000; }
.fgray { color: #666666; }
.fred { color: #FF0000; }
.fgray2 { color: #CCCCCC; }
.fsky { color: #3399CC; }
.txttitle { color: #b90658; }
.fsubject { 
		color: #336699;
		font-size: 14px;
		font-weight: bold;
 }
.fdetail {
		font-size: 14px;
}
.login1 {
		color :  #FF6C00;
}
.login2 {
		color: #0d11b5;
}

/* Input Style */
.iDisabled {
	border: 1px #454545 solid; 
	background: #D9D9D9;
}
.InputEng {
	border: 1px #003399 solid; 
	font-family: 'Roboto','Tahoma', 'sans-serif';
	font-size: 9pt;
}
.InputThai {
	border: 1px #003399 solid; 
	font-family: ms sans serif;
	font-size: 10pt;
	color: #003399;	
}
.iEng {
	/*background-image:  url("ibgcolor.gif"); */
	border: 1px #003399 solid; 
	margin: 0px;
	cursor: hand; 
	font-family: 'Roboto','Tahoma', 'sans-serif';
	font-size: 9pt;
}

.iThai {
	/*background-image:  url("ibgcolor.gif"); */
	border: 1px #003399 solid; 
	margin: 0px;
	cursor: hand; 
	font-family: MS Sans Serif;
	font-size: 8pt;
}
.inctopten { 
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	text-decoration: none;
}
/*
.linkactive { 
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	text-decoration: none;
	color:#0085C2;
	font-weight: bold;
}
*/
.menubartext { 
	padding: 0px;
	margin: 0px;
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 12pt;
	text-decoration: none;
}

.keywordtext { 
	padding: 0px;
	margin: 0px;
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	color: #008000; 

}

.grouplinktext { 
	padding: 0px;
	margin: 0px;

	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	color: #7080e0; 
}

.menulefttext { 
	padding: 0px;
	margin: 0px;
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
}

.titletext { 
	padding: 0px;
	margin: 0px;
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 12pt;
	/*text-decoration: none;
	text-decoration:underline;
    line-height: 0%;
	color: #0033cc; 
	color: #0288d9; */
	color: #0000FF;
}

.democontent { 
	padding: 0px;
	margin: 0px;

	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 1em;
	color: #607080; 
}

.pricetext { 
	/* padding: 0px;
	margin: 0px; */
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 1em;
	color: #ff4411; 
}
.updatetime { 
	padding: 0px;
	margin: 0px;
	display:inline;
	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	color: green; 
}

.editcommand { 
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	display:inline;
/*font-family: 'Roboto','Tahoma','sans-serif'; */
	font-size: 1em;
	color: DimGray ; 
/*	font-weight: bold; */
}
.editcommand:hover {
	text-decoration: underline;
	color: DimGray ; 
}
.editcommand:visited {
	color: DimGray ; 
}
.editcommand:active {
	color: DimGray ; 
}

.listcommand { 
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	display:inline;
	/* font-family: 'Roboto','Tahoma','sans-serif'; */
	font-size: 10pt;
	color: #3CB371; 
}
.listcommand:hover {
	color: #3CC371; 
}

.listsubcommand { 
	//padding: 0px;
	//margin: 0px;
	cursor: pointer;
	display:inline-block;
	min-width: 45px;
	/* font-family: 'Roboto','Tahoma','sans-serif'; */
	//font-size: 10pt;
	color: #a3a3a3; 
}

.listsubcommand:last-child { min-width: 20px; }


.listsubcommand:hover {
	color: #333; 
}

.iconbt {
	cursor: pointer;
	display:inline-block;
	color: #a3a3a3;
}

.iconbt:hover {
	color: #333; 
}


.maintitle { 
	/*padding: 0px;
	margin: 0px;
	display:inline;*/
	/*font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt; */
	font-weight: bold;
	color: #008000; 
}

.subtitle { 
/* font-family: 'Roboto','Tahoma','sans-serif'; */
 font-size: 14px; 
 color: #333333; 
}

.maincontent { 
/*  font-family: 'Roboto','Tahoma','sans-serif';  */
 font-size: 16px;
 color: #333333;
}

.alerttext{ 
	/*padding: 0px;
	margin: 0px;
	display:inline;*/
/*	font-family: 'Roboto','Tahoma','sans-serif'; */
	font-size: 12pt;
	font-weight: bold;
	/*color: #00CC66; */
	color: #008000; 
}


.footersearch { 
	padding: 0px;
	margin: 0px;
	display:inline;
/*	font-family: 'Roboto','Tahoma','sans-serif'; */
	font-size: 14pt;

}

.footergroup { 
	padding: 0px;
	margin: 0px;
	display:inline;
/*	font-family: 'Roboto','Tahoma','sans-serif'; */
	font-size: 8pt;

}

/* As Shown in main.css */
.menutext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 14px; font-weight: bold;}
.smenutext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 11px;}
.textbox {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: xx-small; border: 1px #000000 solid;}
.bigtext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: x-small; font-weight: bold;}
.thaitext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: x-small; font-weight: normal;}
.mtext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 13px; font-weight: bold;}
.sthaitext {	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 11pt;}
.topproducttext {	font-family: 'Roboto','Tahoma','sans-serif';
	font-size: 10pt;
	color: #888888;}
.advicetext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 14px; color: #888888}
.mthaitext {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 14px;}
.bluelink {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 13px; font-weight: bold;}
.lblue {  font-family: 'Roboto','Tahoma','sans-serif'; font-size: 13px; }


/* Table Style */
.TableBody {
	border-left: 6px #b9d8e9 solid;
	border-right: 6px #b9d8e9 solid;
}
.bWhite { border-bottom: 1px #FFFFFF solid; }
.boxGray { border: 1px #cccccc solid; }
.boxWhite { border: 1px #FFFFFF solid; }
.bottomGray { border-bottom: 1px #505658 solid; }
.bottomDotG { border-bottom: 1px #999999 dotted; }

.dropshadowclass {
	padding: 5px;
	border: solid 1px #EFEFEF;
	/* border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
     box-shadow: 1px 1px 5px #999; */
        }
.imagedropshadow {
	display: inline-block;
	/* margin: auto; */
	vertical-align: middle;
	padding: 2px;
	border: solid 1px #EFEFEF;
	border-style: solid;
    width: 94px;
	height: 94px;
		-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}
a:hover img.imagedropshadow {
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

hr.faded {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(221,221,221)),
      color-stop(0.9, rgb(221,221,221)),
      color-stop(1, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(221,221,221) 10%,
      rgb(221,221,221) 90%,
      rgb(255,255,255) 100%
  );
}


.commenthidden {display:none}
.commentshown {display:inline}

div.shadowbox{
 background-color:#f9f9f9;
 box-shadow: 3px 3px 3px #bbbbbb;
}

div.fixedheader {
    position: fixed;
    /* height: 200px; */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
	box-shadow: 1px 1px 1px #bbbbbb;
    /* margin: 0 0 200px 0; */
}

div.fixedleftmenu {
	position: fixed;
    /* height: 200px; */
    top: 130px;
    left: 0px;
   /* width: 100%; */
    z-index: 0;
	/*
		box-shadow: 1px 1px 1px #bbbbbb;
		margin: 0 0 200px 0;
		margin-top: 0px;
		left: 0px;
	*/
}


div.maincontent {
margin-top: 130px;
}



div.separatebar { 
	background-color: #4CAF51;
	width: 100%
	padding: 0px;
	border: 0px solid #4CAF51;
	font-size: 16px;
	color:white;
	text-align: center;
	font-weight: bold;
	box-shadow: 3px 3px 3px  #BBBBBB;
}


#toppage {
 position:absolute;
 top:-200px;
}

.numberonicon1 {
   position:relative;
}
.numberonicon1[amount]:after {
   content:attr(amount);
   position:absolute;
   top: 8px;
   right:0px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

.numberonicon2 {
   position:relative;
}
.numberonicon2[amount]:after {
   content:attr(amount);
   position:absolute;
   top: 8px;
   right:0px;
   font-size:.7em;
   background:red;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

.numberonicon3 {
   position:relative;
}
.numberonicon3[amount]:after {
   content:attr(amount);
   position:absolute;
   top: 8px;
   right:0px;
   font-size:.7em;
   background: orange;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

.numberonicon4 {
   position:relative;
}
.numberonicon4[amount]:after {
   content:attr(amount);
   position:absolute;
   top: 8px;
   right:0px;
   font-size:.7em;
   background:gray;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}


.numberonicon11 {
   position:relative;
}
.numberonicon11[amount]:after {
   content:attr(amount);
   position:absolute;
   top: -15px;
   right:-5px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

.numberonicon12 {
   position:relative;
}
.numberonicon12[amount]:after {
   content:attr(amount);
   position:absolute;
   top: -15px;
   right:-5px;
   font-size:.7em;
   background:red;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}


div.closeimage {
    position: fixed;
    top: 10px;
    left: 10px;
	border: none; 
    z-index: 999;
}


div#google_translate_element div.goog-te-gadget-simple{
			display: block;
  			width: 100%;
  			height: 34px;
		 	padding: 6px 12px;
  			font-size: 14px;
  			line-height: 1.42857143;
  			color: #555;
  			background-color: #fff;
  			background-image: none;
  			border: 1px solid #ccc;
			border-radius: 4px;
  			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  			-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

/* google translator */

/* header menu spacing */


#headcontainer {
  text-align: justify;
 display: inline-block;
}
#headcontainer div {
  display: inline-block;
	text-align: center;
}
#headcontainer:after {
  content: '';
  width: 100%; 
  display: inline-block;
}
/* header menu spacing */
/* intercooler indicator tag */
.css-demo.ic-use-transition {
            opacity: 0;
            font-size: 8px;
}
.css-demo {
            opacity: 1;
            font-size: 25px;
            transition: all 500ms;
}
/* intercooler indicator tag */

/* Text between <hr> tag */

hr.style-four {
  padding: 0;
  border: none; 
  border-top: medium double #8c8c8c; 
  color: #8c8c8c; 
  text-align: center; 
}
hr.style-four:after {
  content: "New Content!"; 
  display: inline-block; 
  position: relative; 
  top: -0.7em; 
  font-size: 1.5em; 
  padding: 0 0.25em; 
  background: #fff; 
  font-family: AngsanaUPC, MS Sans Serif;
  @charset "UTF-8";
}

.commentboxbtn{
	width: 41px !important;
}


.btn-facebook {
	  background: #3B5998;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #263961; 
	}
	.btn-facebook:link, .btn-facebook:visited {
	  color: #fff;
	}
	.btn-facebook:active, .btn-facebook:hover {
	  background: #263961;
	  color: #fff;
} 


@media (max-width: 767px) {
	.mobilecontentframe {
		position: relative;
		padding: 15px 15px 4px 15px;
		margin-bottom: 25px;
		background: #fff;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
		border-color: #aabbcc;
	}
}




.vimeo-container { position: relative; padding-bottom: 56.25%; height: auto; overflow: hidden; max-width: 100%;  } .vimeo-container iframe, .vimeo-container object, .vimeo-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive-container { position: relative; padding-bottom: 56.25%; height: auto; overflow: hidden; max-width: 100%; } .responsive-container iframe, .responsive-container object, .responsive-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }