@import url(fonts/thsarabunnew.css);
@import url(font/th_fahkwang.css);

body, html, div, table, tr, td, th, h1, h2, h3, h4, h5, h6, span{
    margin: 0;
    padding: 0;

}
body{
    padding:0;
    margin:0;
    background-position: bottom center;
    background-attachment: fixed;
    /*font-family: 'Maitree', serif;*/
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
}

td {
  /*FONT-SIZE: 14px; MARGIN: 0px; COLOR: #000000; FONT-FAMILY:  'THSarabunNew', 'THFahkwang', sans-serif*/
}


/*body{-webkit-filter:grayscale(0.9);filter:grayscale(0.9)}*/
a, a:link, a:visited{
    color: #0c0a56 !important; /*#22950f*/
    text-decoration: none !important;
}
a:hover {
    color: #0099d2 !important;
    text-decoration: none !important;
}
a img, img {
    border: medium none !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
    /*font-family: 'Athiti', sans-serif;*/


}
#wrapper_all{
    width: 960px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #FFFFFF;
    padding-bottom: 10px;
}

#wrapper_all2{
    width: 960px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #FFFFFF;
    padding-bottom: 5px;
}
#wrapper{
    margin: 10px auto;
    width:960px;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #FFFFFF;
}

#header{
    margin: auto;
    width: 960px;
    /*height: 143px;*/
    /*background: url(../img/bg_hd.png);*/
}
#hd_wrapper{
    margin: auto;
    width: 960px;
}
#logo{
    /*padding: 15px 0 0 19px;*/
    /*position:absolute; right:5px; bottom:5px; */
}
#nav{
    padding: 5px 0 0 0;
}
#nav img{
    border:0;
}
#content{
    padding: 10px;
     /*margin: 30px;*/
    /*background-color: #ffffff;*/
    /*border: 1px solid black;*/
    /*background-color: #EFEFEF;*/
}

div#content{
    /*opacity: 0.8;
    filter: alpha(opacity=80); *//* For IE8 and earlier */
}
.clear{
    clear: both;
    overflow: hidden;
    height: 1px;
}
.h2{
    font-size: 18px;
    font-weight: bold;
    color: #ff7e00; /*F60 #05891e*/
    /*font-family: 'Maitree', serif;*/
    /*font-family: 'Athiti', sans-serif;*/
}
.ln{
  border-bottom: 1px solid #aee3ff;
  /*padding: 2px 0;*/
}

.h2 a{
    color: #ff7e00!important; /*F60  #05891e*/
}
.h2 a:hover{
    color: #00baff!important; /*F60  #05891e*/
}


.htitle{
    font-size: 18px;
    font-weight: bold;
    color: #ff7e00; /*F60 #05891e*/
    /*font-family: 'Maitree', serif;*/
    /*font-family: 'Athiti', sans-serif!important;*/
    margin-top: 5px;
    margin-bottom: -6px;

}
.htitle a{
    color: #666!important; /*F60  #05891e*/
}
.htitle a:hover{
    color: #666!important; /*F60  #05891e*/
}
.fl_left{
  float:left;
  width: 600px;
}

.fl_right{
  float:right;
  width: 80px;  
}
.text_right{
  text-align: right;
}
.linkblue{

}
.linkblue a{
    color: #069!important; /*F60  #05891e*/
}
.linkblue a:hover{
    color: #0996dc!important; /*F60  #05891e*/
}
.img-polaroid{
    background-color: #FFFFFF;
    /*border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
    padding: 4px;
    float: left;
    width: 210px;
}
.img-polaroid img{
    width: 210px;
}
.img-polaroid2{
    background-color: #FFFFFF;
    /*border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
    padding: 4px;
    float: right;
    width: 50px;
}
.img-polaroid2 img{
    width: 50px;
}
.img-polaroid3{
    background-color: #FFFFFF;
    /*border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
    padding: 4px;
    float: left;
    width: 140px;
}
.img-polaroid3 img{
    width: 140px;
}
.img-polaroid4 img{
    background-color: #FFFFFF;
    /*border: 6px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);*/
    padding: 4px;
    float: left;
    width: 210px;
}
.rows-media{
    /*margin-top: 10px;*/
    padding: 0;
    /*border-bottom: 1px dotted #CCCCCC;*/
    float:left;width:230px;
}
.rows-media4{
    /*margin-top: 10px;*/
    padding: 0;
    float:left;width:230px;
}
.data-palaroid{
    float: left;
    width: 220px;
    margin: 5px;
    /*font-size: 12px;*/
}
.data-palaroid3{
    float: left;
    width: 730px;
    margin: 5px;
    font-size: 12px;
}
.data-palaroid4{
    float: left;
    width: 230px;
    margin: 5px;
    /*font-size: 14px;*/
}

#footer{
    background-color: #0099d2; /*1b4f24*/
    color: #fff;
    /*padding: 10px;*/
    width: 960px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    /*background-color: #FFFFFF;*/
}
.link-footer a{
  text-align: right!important;
    color: #fff!important;
}
.link-footer a:hover {
    color: #ED6703 !important;
    text-decoration: underline !important;
}
.showdatetodo{
    margin-top: 2px;
    color: #999999;
    font-style: italic;
    font-size: 0.89em;
}
.showpostby{
    margin-top: 2px;
    color: #5e5e5e;
    /*font-style: italic;*/
    /*font-weight: bold;*/
    font-size: 0.89em;
}
.showpostby2{
    margin-top: 2px;
    color: #5e5e5e;
    /*font-style: italic;*/
    /*font-weight: bold;*/
    font-size: 0.95em;
}
.shCalItem{
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    /*background-color: #e5a242;*/
    background:url(../img/bgca-02.jpg) repeat-y;
}
.shCalItem2{
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    /*background-color: #3fb12c;//3fb12c 427fe5    */
    background:url(../img/bgca01-02.jpg) repeat-y;
}
.shCalItem3{
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #9b9b9b;//3fb12c 427fe5
}
.shCalDate{
    margin-top: 0px;
    font-size: 1.6em;
    color: #fff;//#89b900
    text-align: center;
    text-shadow: 0px 1px 0px #000;
}
.shCalMonth{
    margin-top: -8px;
    font-size: 1.4em;
    color: #fff;//ec6f00
    text-align: center;
    text-shadow: 0px 1px 0px #000;
}
.shCalTitle{
    /*color: #ec6f00;*/
    color: #fff;
    margin-top: 4px;
    text-align: center;
    text-shadow: 0px 1px 0px #000;    
    font-weight: bold;
}
.shCalTeacher{
  color:#fff;
  font-size:1.2em;
    text-align: center;
    text-shadow: 0px 1px 0px #000;    
    font-weight: bold;
}
#example-content-1 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-2 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-3 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-4 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-5 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-6 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-7 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-8 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-9 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-10 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}

#example-content-11 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-12 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-13 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-14 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-15 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-16 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-17 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-18 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-19 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}
#example-content-20 {
  display: none; /* required */
  position: absolute; /* required */
  padding: 10px; border: 1px solid black;
  background-color: white;
  width: 500px;
  font-size: 14px;
}

ul.social{
margin:0;
padding:0;
}
ul.social li{
  width:75px;
  height: 30px;
float:left;
margin:0 5px;
padding:0;
list-style:none;
}

.CSSTableGenerator {
  margin:0px;padding:0px;
  width:80%;
  box-shadow: 10px 10px 5px #888888;
  border:1px solid #000000;

  -moz-border-radius-bottomleft:0px;
  -webkit-border-bottom-left-radius:0px;
  border-bottom-left-radius:0px;

  -moz-border-radius-bottomright:0px;
  -webkit-border-bottom-right-radius:0px;
  border-bottom-right-radius:0px;

  -moz-border-radius-topright:0px;
  -webkit-border-top-right-radius:0px;
  border-top-right-radius:0px;

  -moz-border-radius-topleft:0px;
  -webkit-border-top-left-radius:0px;
  border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
  width:100%;
  height:100%;
  margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
  -moz-border-radius-bottomright:0px;
  -webkit-border-bottom-right-radius:0px;
  border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
  -moz-border-radius-topleft:0px;
  -webkit-border-top-left-radius:0px;
  border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
  -moz-border-radius-topright:0px;
  -webkit-border-top-right-radius:0px;
  border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
  -moz-border-radius-bottomleft:0px;
  -webkit-border-bottom-left-radius:0px;
  border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{

}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
  vertical-align:middle;


  border:1px solid #000000;
  border-width:0px 1px 1px 0px;
  text-align:left;
  padding:7px;
  font-weight:normal;
  color:#000000;
}.CSSTableGenerator tr:last-child td{
  border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
  border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
  border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
    background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
  background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");  background: -o-linear-gradient(top,#ff7f00,bf5f00);

  background-color:#ff7f00;
  border:0px solid #000000;
  text-align:center;
  border-width:0px 0px 1px 1px;
  font-weight:bold;
  color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
  background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
  background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");  background: -o-linear-gradient(top,#ff7f00,bf5f00);

  background-color:#ff7f00;
}
.CSSTableGenerator tr:first-child td:first-child{
  border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
  border-width:0px 0px 1px 1px;
}


.example-image-link{display:inline-block;
  padding:4px;
  /*margin:0 0.5rem 1rem 0.5rem;*/
  margin:0 ;
  background-color:#fff;line-height:0;-webkit-transition:background-color 0.1s ease-out;-moz-transition:background-color 0.1s ease-out;-o-transition:background-color 0.1s ease-out;transition:background-color 0.1s ease-out;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}
  /*.example-image-link:hover{background-color:#4ae}*/

  .example-image-link {
  color: black; background-color: #efefef; text-shadow: none;
  -moz-transition: 
    background-color 700ms linear,
         color 700ms linear;
  -webkit-transition: 
    background-color 700ms linear,
         color 700ms linear;
  -o-transition: 
    background-color 1000ms linear,
         color 700ms linear;
  transition: 
    background-color 1000ms linear,
         color 700ms linear;
  }
.example-image-link:hover {
  color: white; background-color: #4ae; text-shadow: none;
  }
  
.sidebar_head{
 /* background-color: #0099d2; F60  #05891e 1fc2ff
  color:#FFF;*/
  font-weight: bold;
  padding: 3px 5px;
  margin: 10px 0;
}
.addpost{
  color:#fff!important;
  height:19px;
  font-size:12px;
  padding-left:3px;
  /*border: 1px solid rgba(0, 0, 0, 0.2);*/
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
  background-color: #ff9c00;
  padding: 3px;
  margin-bottom: 6px;
}
.addpost a{
  color:#fff!important;
}
a.addpost2{
  padding-left: 2px;
  color:#fff!important;
}
a:hover.addpost2{
  padding-left: 2px;
  color:#fff!important;
  font-weight: bold;
}
.addpost3{
  height:19px;
  color:#fff!important;
  font-size:12px;
  padding-left:3px;
  /*border: 1px solid rgba(0, 0, 0, 0.2);*/
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
  background-color: #00a6e3;
  padding: 3px;
  margin-bottom: 6px;
}
.addpost3 a{
  color:#fff!important;
}

.addpost4{
  height:19px;
  color:#fff!important;
  font-size:12px;
  padding-left:3px;
  /*border: 1px solid rgba(0, 0, 0, 0.2);*/
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
  background-color: #F00;
  padding: 3px;
  margin-bottom: 6px;
}
.addpost4 a{
  color:#fff!important;
}


a.addpost5{
  padding-left: 2px;
  color:#fff!important;
}
a:hover.addpost5{
  padding-left: 2px;
  color:#fff!important;
  font-weight: bold;
}

/*---------------------*/

.form-group{
  margin-bottom: 15px;
}



input,
input::-webkit-input-placeholder {
    font-size: 11px;
    padding-top: 3px;
}

.main-login{
  background-color: #fff;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

.main-center{
  margin-top: 30px;
  margin: 0 auto;
  max-width: 330px;
    padding: 40px 40px;

}

.login-button{
  margin-top: 5px;
}

.login-register{
  font-size: 11px;
  text-align: center;
}
.datacontentbox{
  display: block;
width: 100%;
height: auto;
border: 1px solid #BBB;
box-shadow: 0px 0px 5px #DDD;
padding: 20px 20px;
margin-top: 10px;
background: #FFF!important;
/*margin: 0px auto;*/
}


.wrap_box{
  width: 100%;
  /*height: 60px;*/
  padding:10px;
  border: 1px solid #cecbce;
  margin-bottom:10px;
}
.dv_wrap_box_1{
  width: 80px;
  float:left;
}
.dv_wrap_box_2{
  width: 480px;
  float:left;
}
.dv_wrap_box_3{
  width: 100px;
  float: right;
  text-align: right;
}
.dv_wrap_box_4{
  width: 100px;
  float:left;
}

.shCalItem{
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #e5a242;
}
.shCalItem2{
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
    background-color: #3fb12c;//3fb12c 427fe5
}
.shCalDate{
    margin-top: 0px;
    font-size: 1.8em;
    color: #fff;//#89b900
    text-align: center;
    text-shadow: 0px 1px 0px #000;
    font-family:georgia;
}
.shCalMonth{
    margin-top: -8px;
    font-size: 1.5em;
    color: #fff;//ec6f00
    text-align: center;
    text-shadow: 0px 1px 0px #000;
    font-family:georgia;
}
.shCalTitle{
    /*color: #ec6f00;*/
    margin-top: 4px;
    text-align: center;
    /*font-family:georgia;*/
}
.shCalTeacher{
  color:#fff;
  font-size:1.4em;
    text-align: center;
    text-shadow: 0px 1px 0px #000;
    /*font-family:georgia;*/
    font-weight: bold;
}


.shCalItemNotice{
    float: left;
    width: 221px;
    height: 180px;
    /*margin: 10px;*/
    /*padding: 30px;*/
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.14);
    /*background-color: #e5a242;*/
    background:url(../img/postit02.jpg) no-repeat;
    
}
.shCalItemNotice2{
    float: left;
    width: 221px;
    height: 180px;
    /*margin: 10px;*/
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.14);
    /*background-color: #3fb12c;//3fb12c 427fe5    */
    background:url(../img/postit01.jpg) no-repeat;
}
.shCalItemNotice3{
    float: left;
    width: 221px;
    height: 180px;
    /*margin: 10px;*/
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.14);
    /*background-color: #3fb12c;//3fb12c 427fe5    */
    background:url(../img/postit03.jpg) no-repeat;
}
.shCalDateNotice{
    margin-top: 0px;
    font-size: 2em;
    color: #ff0000;//#89b900
    text-align: center;
    /*text-shadow: 0px 1px 0px #000;*/
    font-family:georgia;
}
.shCalMonthNotice{
    margin-top: -8px;
    font-size: 1.2em;
    color: #fff;//ec6f00
    text-align: center;
    font-family:georgia;
    /*text-shadow: 0px 1px 0px #000;*/
}
.shCalDateNotice2{
    margin-top: 0px;
    font-size: 1.4em;
    color: #ff0000;//#89b900
    text-align: center;
    /*text-shadow: 0px 1px 0px #000;*/
    font-family:georgia;
}
.shCalMonthNotice2{
    margin-top: -8px;
    font-size: 1.2em;
    color: #fff;//ec6f00
    text-align: center;
    font-family:georgia;
    /*text-shadow: 0px 1px 0px #000;*/
}
.shCalTitleNotice{
    /*color: #ec6f00;*/
    color: #fff;
    margin-top: 4px;
    text-align: center;
    /*text-shadow: 0px 1px 0px #000;    */
    font-weight: bold;
}
.shCalTeacherNotice{
  color:#fff;
  font-size:1em;
    text-align: center;
    /*text-shadow: 0px 1px 0px #000;    */
    font-weight: bold;
}