/**
 * Javascript for chatroom.
 * @author: X. C.
 * @since: April, 2015
 */

      #div_header {
	  width: 930px;
	  height: 80px;
	  line-height: 80px;
	  float: left;
      }
      #container {
          position: relative;
          width: 951px;
          background-color: #eeeeff;
          padding: 1px;

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;

          -webkit-box-shadow:0 1px 10px rgba(0,0,0,.5);
          -moz-box-shadow:0 1px 10px rgba(0,0,0,.5);
          box-shadow:0 1px 10px rgba(0,0,0,.5);
      }
      #chatroom_container {
        position: relative; 
        float: left;
        /*display:none;*/

        background-color: #bbccee;
        padding: 5px;
        width: 730px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
      }
      #chatroom {
        font-size: 16px;
        text-align: left;
        height: 450px;
        width: 720px;
        padding: 5px;
        color: white;
        background-color: black;
        overflow:auto;
        overflow-y: scroll;
        position: relative;
        bottom: 0;

        background-image: url(images/matrix300.gif);
        background-repeat: repeat;
        background-size: 50% 50%;

        /*filter: alpha(opacity=80);
        opacity: 0.8;*/
        /*z-index: 10000;*/

        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
      }
      #console {
        text-align: left;
        height: 180px;
        width: 720px;
        background-color: #eeeeff;
        overflow:auto;
        overflow-y: scroll;
        position: relative;
        bottom: 0;
      }
      #div_status {
        width:728px; 
        line-height:25px; 
        height:25px; 
        position: relative; 
        background-color:#eeeeee; 
        border: solid 1px #dddddd;
      }
      #div_user {
        text-align: left;
        position: absolute;
        overflow:hidden;
        white-space: nowrap;
        float:left; 
        line-height:25px;
        padding-left: 5px;
        padding-right:5px;
        height:23px;
        width:110px;
        color:#666;
        border: solid 1px #cccccc;
      }
      #div_room {
        text-align: left;
        position: absolute; 
        left: 123px; /*120*/
        overflow:hidden; 
        white-space: nowrap; 
        float:left; 
        line-height:25px; 
        padding-left: 5px;
        padding-right:5px; 
        height:23px; 
        width:137px; 
        color:#666; 
        border: solid 1px #cccccc;
      }
      #div_msg {
        text-align: left;
        position: absolute; 
        padding-left:5px; 
        left:273px;  /* 272 */
        width:411px; /* 445 */
        height:23px; 
        border: solid 1px #cccccc;
        color: orange;
      }
      #div_vid_func {
        background-color: #eeeeff; 
        padding-left:5px; 
        padding-right:5px; 
        margin-left:5px; 
        margin-right:0px; 
        text-align:center;
        /*background-image: url(images/bg.gif);
        background-repeat: no-repeat;*/
      }
      #div_record{
        display: none;
        text-align: center;
        position: absolute;
        left: 659px;
        width: 30px;
        height: 23px;
        border: solid 1px #cccccc;
      }
      #div_setting {
        text-align: center;
        position: absolute;
        padding-left:0px;
        left:692px;
        width:34px;
        height:23px;
        line-height: 23px;
        border: solid 1px #cccccc;
        color: orange;
      }
      #span_invite {
          color: black;
          background-color: #eeeeff;
          border: solid 1px #99cc99;
          position: absolute;
          top: 210px; /* half chatroom is 225. */
          left: 150px;
          padding: 10px;

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }

      #panel_settings {
          text-align: center;
          position: absolute;
          left: 598px;
          width: 134px;
          top: 250px; /* 260 */
          height: 213px; /* 203 */
          background-color: #eeeeee;
          padding-top: 0px;
          padding-bottom: 2px;

          font-size:10pt;

          box-shadow: 6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;
          -moz-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;
          -webkit-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;
      }

      #div_right_panel {
          float: left;
          position: absolute;
          left: 745px;
          width: 201px;
          height: 496px;
          background-color: #bbccff;
          padding-left: 2px;
          padding-right: 2px;

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }

      #div_RoomsList {
          text-align: left;
          top: 0px;
          left: 740px;
          width: 200px;
          height: 200px;
          padding: 0px;
      }
      #selectRoomsList {
          float: left;
          top: 0px;
          left: 740px;
          width: 200px;
          height: 180px;
          padding: 3px;

          /*border:0px;
          outline:0px;*/

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }
      #selectRoomsList option {
          background-image:url(images/home.png);
          background-size: 15px 15px;
          background-repeat: no-repeat;
          padding-left: 20px;

          /*height: 18px;
          line-height: 18px;
          vertical-align: middle;*/
      }

      #div_UsersList {
          text-align: left;
          top: 200px;
          left: 740px;
          width: 200px;
          height: 270px;
          padding: 0px;
      }
      #selectUsersList {
          top: 200px;
          left: 740px;
          width: 200px;
          height: 271px;
          padding: 3px;

          /*border:0px;
          outline:0px;*/

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }
      #selectUsersList option {
          background-image:url(images/person.png);
          background-size: 15px 15px;
          background-repeat: no-repeat;
          padding-left: 20px;

          /*height: 18px;
          line-height: 18px;
          vertical-align: middle;*/
      }

      #selectRoomUsersList {
          display:none;
          top: 200px;
          left: 740px;
          width: 200px;
          height: 271px;
          padding: 3px;

          /*border:0px;
          outline:0px;*/

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }
      #selectRoomUsersList option {
          background-image:url(images/person.png);
          background-size: 15px 15px;
          background-repeat: no-repeat;
          padding-left: 20px;

          /*height: 18px;
          line-height: 18px;
          vertical-align: middle;*/
      }


      #span_about {
          /*background-color:red; */
          display:inline-block; 
          width: 200px;
          height: 40px;
          line-height: 40px;
      }

      .span_placeholder {
          width: 1px;
          display: inline-block;
      }
      .div_title {
          -webkit-border-top-left-radius: 5px;
          -webkit-border-top-right-radius: 5px;
          -moz-border-radius-topleft: 5px;
          -moz-border-radius-topright: 5px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;

          height: 18px;
          line-height: 18px;

          font-size: 16px;
          text-align: center;
          display: inline-block;
          padding-left: 5px;
          padding-right: 5px;
          background-color: #99bbff;
          color: #eeeeff;

          box-shadow: 6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;   
          -moz-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;   
          -webkit-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;   
      }


      option:nth-child(odd) { background: white; }
      option:nth-child(even) { background: #eeeeee; }


      #span_register, #span_login, #span_updatepwd {
          display:block; position:absolute; 
          left:230px; 
	  /*top:140px;*/
	  top: calc(50% - 120px);
          text-align:center;
	  width:260px;
	  height:150px; 
          background-color:white; 
          padding:10px; 
          border: solid 0px red;
          /*background-image: url(images/sky.gif);
          background-size: 100% 100%;*/

          background-image: url(images/bg.gif);
          background-repeat: no-repeat;
          /*background-size: 100% 100%;*/

          font-size: 12pt;

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;
      }

      #txtMsg {
          float:left; width:726px; height: 50px; white-space:pre; 
          min-height: 50px;
          resize: none; 
          white-space:pre-wrap; word-wrap:break-word;
          padding: 5px;

          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          border-radius:5px;

          font-size: 16px;
      }

      .login_text {
          font-size: 20px;
      }

      .txtReg {
          font-size: 16px;
          width:150px;
      }

      .btnReg {
	  font-size: 16px;
          width: 70px;
          width: 100px;
          margin: 2px;
          /*color: white;
          background-color: green;*/
      }

      #link_reg {
          font-size: 16px;
      }

      .btnSetting {
          width: 130px;
          height: 25px;
          background-color: white;
          font-size: 10pt;
      }

      .transparent {
          filter:alpha(opacity=90); 
          -moz-opacity: 0.9; 
          opacity: 0.9;
      }

      #vid_panel {
        position:absolute; 
        background-color:#bbccff; 
        right:5px; 
        width: 360px; top:5px; 
        height: 460px; 
        display:none;

        overflow:auto;
        overflow-y: scroll;
      }

      #bottom_panel {
          text-align: left;
          padding-top:3px;
      }

      #debug_console {
          display: block;
          margin: 5px;
          position: relative;
          text-align:left;
      }

      div.webcam {
          /*width: 100%;*/
          margin: 0px;
      }
      img.vid {
          width: 240px;
          height: auto; /* 180px; */
      }

      /* limit size of image display in chatroom. */
      img.chatroom {
          max-width: 100%;
          height: auto;
      }


      html {
          display:table; margin-left:auto; margin-right:auto; margin-top:20px; 
      }
      body {
          display:table-cell; text-align:center; background-color:#eeeeee; font-size: 16px; 
          background: url(images/body_bg1.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }