@font-face {
  font-family: 'KhmerOS';
  font-style: normal;
  font-weight: 300;
  src: url('/static/kheng_info/font/KhmerOS.ttf');
}



/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url('../static/lexical_io/fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url('../static/lexical_io/fonts/1Ptug8zYS_SKggPNyC0ITw.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, 
body {
  width:100%;
  margin: 0px;
  padding: 0px;
  height:100%;
  font-family: 'Courier';
}

body {
  /*! background:url('/static/kheng_info/img/bg9.png'); */
  min-width:600px;
  display: table;
  background-color: #ebebe8;
}

a {
  text-decoration:none;
  color:#878787;
  /*! font-weight: bold; */
  font-size: 14px;
}


header {
  background:url('/static/kheng_info/img/bg18.png');

}

.menu {
  display:inline-block;
  /*! background:url('/static/kheng_info/img/bg18.png'); */
  /*! background:url('/static/kheng_info/img/kheng_english_khmer_dictionary_pattern4.jpg'); */
  width:100%;
  font-size:0;
  /*! height: 120px; */
  text-align:center;
  background-color: rgba(124, 142, 155, 0.73);
  height: 100%;
  padding-bottom: 20px;
}

.menu > a {
  display:inline-block;
  width:190px;
  height: 75px;
  text-align: center;
  /*! border: solid 1px #a5a5a5; */
  margin:20px;
  margin-right:10px;
  margin-left:10px;

  line-height: 75px;
  font-size:14px;
  font-weight: bold;
  background-color: #f4f4f3;
  font-family: 'Raleway';
  letter-spacing: 2px;
  margin-bottom: 0px;
}

.menu > a:hover {
  background-color: rgba(74, 73, 68, 0.48);
  color: #fff;
  font-weight: bold;
}






#logout-button {
  position:absolute;
  right:10px;
  top:10px;
  color:#666666;
  font-size:12px;
  line-height:100%;
}

#login-button {
  position:absolute;
  right:10px;
  top:15px;
  color:#666666;
  font-size:12px;
  height:20px;
  line-height:100%;
}

#create-account-button {
  position:absolute;
  right:10px;
  top:35px;
  color:#666666;
  font-size:12px;
  height:20px;
  line-height:100%;
  text-align:right;
}

#logout-button:hover,
#login-button:hover,
#create-account-button:hover {
  color:#999999;
  cursor:pointer;
}


.speaker {
  display:inline-block;
  background-image: url(/static/kheng_info/img/speaker.png);
  background-repeat: no-repeat;
  background-position: center;
  height:32px;
  width:32px;
  border-radius:16px;
  margin-left:10px;
  position:relative;
  top:8px;
}

.speaker:hover {
  cursor:pointer;
  background-color:#ffffff;
  border: solid 1px #bbbbbb;
}

.audio_box {
  visibility:hidden;
  height:0px;
}

.panel_menu_item {
  color:#6e6e6e;
  padding:5px;
  padding-left:40px;
  padding-right:60px;
  vertical-align:top;
  text-align: right;
  font-weight: bold;
}

.panel_menu_item:hover {
  cursor:pointer;
}

.selected_panel_menu_item {
  background-color: #fafafa;
  border-top: 2px solid #8ea4b3;
  border-bottom: 2px solid #8ea4b3;
  width: calc(100% + 0px);
}

.section {
  display:none;
}

.section:first-child {
  display:inline;
}

main {
  /*! background-color: #a1aab3; */
  width:100%;
  font-size:13px;
  height:100%;
  display: table-row;
}

.left-panel {


  min-height:1200px;
  display: table-cell;
  /*! border-top: solid 1px #b0b0b0; */
  font-family: 'KhmerOS';
  /*! border-right: solid 1px #ececec; */
}

.right-panel {
  /*! border-left: solid 1px #b0b0b0; */

  min-height:1200px;
  display: table-cell;
  /*! border-top: solid 1px #b0b0b0; */
  /*! border-left: 1px solid #f4f4f4; */
}



@media (max-width: 1100px) {

  .menu {
    height:220px;
    /*! padding-left:10%; */
    /*! padding-right:10%; */
    /*! padding-left: 2%; */
    /*! padding-right: 2%; */
  }

  .menu > a {
    border-bottom: solid 1px #b0b0b0;
    margin-top:20px;
    margin-bottom:0px;
  }

   .right-panel, .left-panel {
    min-height:auto;
  }
}

@media (max-width: 700px) {

  .menu {
    /*! padding-left:1%; */
    /*! padding-right:1%; */
    /*! padding-left: 2%; */
    /*! padding-right: 2%; */
  }

  .menu > a {
    /*! border-bottom: solid 1px #b0b0b0; */
    /*! margin-top:20px; */
    /*! margin-bottom:0px; */
    width: 170px;
  }


}