/*

@font-face {
    font-family: 'rsubold';
    src: url('rsu_bold-webfont.eot');
    src: url('rsu_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('rsu_bold-webfont.woff2') format('woff2'),
         url('rsu_bold-webfont.woff') format('woff'),
         url('rsu_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'rsulight';
    src: url('rsu_light-webfont.eot');
    src: url('rsu_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('rsu_light-webfont.woff2') format('woff2'),
         url('rsu_light-webfont.woff') format('woff'),
         url('rsu_light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'rsuregular';
    src: url('rsu_regular-webfont.eot');
    src: url('rsu_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('rsu_regular-webfont.woff2') format('woff2'),
         url('rsu_regular-webfont.woff') format('woff'),
         url('rsu_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}*/
body{
        margin-top: 5px;
        margin-bottom: 20px;
        /*color: #606078;*/
        /*font-family: 'Itim', cursive;*/
        font-family: 'Itim', Tahoma,Serif;
        /*font-family: 'rsuregular',Tahoma,Serif;*/
        font-size: 16px;
       
}

h3{
    /*color: #fff;*/
    font-family: 'Itim', Tahoma,Serif;
    /*font-size: 18px;*/
    font-size: 16px;
    margin-top: 1px;
    margin-bottom: 0px;
}


.list-group-item.activemenu, .list-group-item.activemenu:focus, .list-group-item.activemenu:hover {
  z-index: 2;
  color: #000;
  background-color: #3AE0FB; /*78A890 67b168 FFE9C7*/
  border-color: #337ab7;
}

#side-left{

    background: #C8E0D6;
    padding-right:  :20px;
    border-top: 1px dashed #606078;
    border-left: 1px dashed #606078;
    border-bottom: 1px dashed #606078;

    /*margin-top: 50px;*/
}


#main-content{
    
    background: #E7E79D;
    padding-left :20px;
    border: 1px dashed #606078;

   /* border-left: 1px dashed #606078;
    border-right: 1px dashed #606078;
    border-top: 1px dashed #606078;*/

}

hr{
    border-bottom: 1px dashed #606078;
}

#no-book{
    background: #E7E79D !important;
    font-size: 20px !important;
}

#head-book{
    width:885px; 
    height:150;
    margin-top:20px;
}
.footer {
  
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #8C4F29;
  border: 1px dashed #FFE9C7;
 
  
}

.container .text-muted {
  /*margin: 20px 0;*/
}
.text-muted {
    color: #8C4F29;
}

#show_img1 img{
  width: 100%;

    height: auto;
    border:5px solid #F3E3D9;
    padding:1px;
    background-color:black;
}
#show_img img{
  width: 80%;
   
    height: auto;
    border:5px solid #F3E3D9;
    padding:1px;
    background-color:black;
}
/*body {
  background: #FFFFFF;
  margin: 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #4f5252;
  font-weight: 400;
}
*/

/*  ===================================================================
    RESET
    ===================================================================   */

/*html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
  margin: 0;
  padding: 0;
}
* {
  padding:0;
  margin:0;
}
ul, ol, li {
  margin: 0;
  padding: 0;
  list-style: none;
}*/
.btn.outlined {
color: #3675B4;
border: solid 2px #3675B4;
border-radius: 3px;
text-transform: uppercase;
background: #fff;
font-size: 18px;
}
/*button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
overflow: visible;
}*/
.mleft_no {
margin-left: 0;
}
/*.btn {
padding: 10px 20px;
margin: 15px;
border: none;
background: #666;
color: #ccc;
font-weight: bold;
text-decoration: none;
transition: all 0.35s;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
-o-transition: all 0.35s;
white-space: nowrap;
}*/
.btn.outlined:hover {
color: #fff;
border: solid 2px #3675B4;
background: #3675B4;
box-shadow: none;
}

.gallery{
  width:100%;
  float:left;
  margin-top: 10px;
  margin-bottom: 50px;
}

.gallery ul{ margin:0; padding:0; list-style-type:none;}

.gallery ul li{ padding:7px; border:2px solid #ccc; float:left; margin:10px 7px; background:none; width:auto; height:auto;}

#reorder-helper{margin: 18px 10px;
padding: 10px;}
.light_box {
background: #efefef;
padding: 20px;
margin: 10px 0;
text-align: center;
font-size: 1.2em;
}


.notice, .notice a{ color: #fff !important; }
.notice { z-index: 8888; }
.notice a { font-weight: bold; }
.notice_error { background: #E46360; }
.notice_success { background: #657E3F; }

.gallery img{ width:200px; height: 100px;}

header{ margin:0 auto;width:960px; height:50px;}
header div.logo{ width:447px; float:left; padding-top:7px;}
header div.vision{
    font-family:thaisans_neue_sembdregular;
    width: 930px;
    position: absolute;
    top: 65px;
    left: 100px;
    float: left;
    color: #f107bd;
}
header div.language{
  width:180px;
  line-height:25px;
  padding-top:7px;
  display:block;
  position:relative;
  float:right;
  background:#3ba0df;
  text-align:center;
  color:#FFF;
  margin-right:10px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 7px;
}
header div.language img{ margin-left:5px; border:0; }
header div.language a{
  color: #fff;
}
.bx-wrapper .bx-viewport {
    box-shadow: 0 0 5px #ccc;
    /*border: 2px solid #987070;*/
    left: -5px;
    background: #fff;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
    margin: 0 0 0 42px;
}

.bx-wrapper .bx-prev {
    left: 0px;
    background: url(bxslide/images/controls.png) no-repeat 0 -32px;
}


@media screen and (min-width: 1199px) and (max-width: 1366px){
.bx-wrapper img {
    max-width: 100%;
    display: block;
    margin: 0 0 0 53px;
}
}

@media screen and  (max-width: 1200px){
.bx-wrapper img {
    max-width: 100%;
    display: block;
    margin: 0 0 0 -40px;
}
}

.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}

@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }