.body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 100%;
   width: 100%;
   min-width: 720px;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
   background-image:url('images/retina_wood.png');
 } 

.header{
   width: 100%;
   left: 0%;
   float: left;
   position: relative;
   border-bottom: #000 1px solid;
   background-color: #bcc6cc;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}

.footer{
   text-align: left;
   width: 100%;
   clear: both;
   float: left;
   position: relative;
   border-bottom: #000 1px solid;
   background-color: #bcc6cc;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}

.footer2{
   text-align: left;
   width: 100%;
   clear: both;
   float: left;
   position: relative;
   border-bottom: #000 1px solid;
   background-color: #DD0000;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}

div#preloader {
	position:absolute;
	left: -9999px;
	top:  -9999px;
}
div#preloader img {
	display: block;
}
.maindiv{
   background-image:url('images/retina_wood.png');
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   width: 80%;
   height: 80%;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}


.textblocks{
        display:block;
   background-image:url('images/retina_wood.png');
   background-color: #AA9F91;
   width: 100%;
   left: 0%;
   float: left;
   position: relative;
   top: 5px;
   font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}

.tbl {
   width: 50%;
   left: 0%;
   float: left;
   position: relative;
   left: 200px;
   top: -20px;
}


.Container {
   background-image:url('images/retina_wood.png');
        width: 100%;
        text-align: center;
        float: left;
        display:block;
} 

.outer {
        width: 100%;
        text-align: center;
        float: left;
        display:block;
} 

.divider{
   border-width: 2px;
   padding: 0px;
   margin: 0px;
   width: 95%;
   height: 1%;
   background-color: #000000;

}

.ContainerS {
        width: 100%;
        text-align: center;
        float: left;
        display:block;
} 

.Image {
        width: 10%;
	position: relative;
	top: 10px;
        display: block;
        float: left;
	padding-bottom: 2em;
	padding-left: 3em;
	padding-right: 3em;
} 

.ImageOff {
        width: 10%;
	position: relative;
	top: 20px;
        display: block;
        float: left;
	padding-bottom: 2em;
	padding-left: 3em;
	padding-right: 3em;
} 

.ImageS {
        width: 10%;
	position: relative;
	top: 10px;
        display: block;
        float: left;
} 


.ImageT {
        width: 9%;
	position: relative;
	top: 1px;
        display: block;
        float: left;
} 

.spacers {
        width: 10%;
	position: relative;
	top: 10px;
        display: block;
        float: left;
} 

.microw {
	height: auto;
	position: relative;
        display: block;
        float: left;
}

.spacer {
        width: 25%;
	position: relative;
	top: 10px;
        display: block;
        float: left;
} 

.BtnLBox {
        width: 25%;
	position: relative;
	top: 1px;
        display: block;
        float: left;
} 

.BtnRBox {
        width: 20%;
	position: relative;
	top: 1px;
        display: block;
        float: right;
} 

.chatter {
        width: 55%;
	position: relative;
	top: 1em;
        display: block;
        float: left;
}

.spacer {
        width: 20%;
        height: 10px;
        display: block;
        float: left;
} 

.Text {
        width: 20%;
	position: relative;
	top: 1px;
        display: block;
        float: left;
} 

.clear {
        clear: both;
}

.chat_wrapper{
	margin-right: 15px;
	margin-left: 5px;
	background: #CCCCCC;
	border: 1px solid #999999;
	padding: 5px;
	font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}

.chat_wrapper .message_box{
        text-align: left;
	background: #FFFFFF;
	height: 75px;
	overflow: scroll;
	padding: 2px;
	border: 1px solid #999999;
}

.chat_wrapper .panel input{
	padding: 2px 2px 2px 5px;
}


input:disabled
{
	background:#888888;
}

.bigbutton {
   width: 5em;
   height: 2em;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }


.tstbutton {
   width: 100px;
   height: 2em;
   border-top: 1px solid #96d1f8;
   background: #d7d765;
   background: -webkit-gradient(linear, left top, left bottom, from(#9d773d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #9d773e, #d7a965);
   background: -moz-linear-gradient(top, #9d773e, #d7a965);
   padding: 5px 10px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }

.bigbutton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }

.bigbutton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.bigbutton:disabled {
   border-top-color: grey;
   background: grey;
   color: #666666;
   }


.midbutton {
   width: 6em;
   height: 2em;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;
   font-size: 12px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }

.midbutton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }

.midbutton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.midbutton:disabled {
   border-top-color: grey;
   background: grey;
   color: #666666;
   }

.oldbigbutton {
    width: 4em;
    height: 2em;
}

.smallbtn {
        width: 5em;
        height: 2em;
}

.suitbtn {
        width: 2em;
        height: 3em;
}

/*Fade all the DIV when user hovers on any div*/
.ContainerS:hover .Image{
  opacity: 0.45;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

/*Fade out the particular DIV when user hover on that DIV*/
.ContainerS .ImageS:hover{
  box-shadow: 3px 3px 15px #666;
  border-color:#C76C0C;
  background: #C76C0C;
  color: #fff;
  cursor: pointer;
  
  /*Opacity*/
  opacity: 1;
}

#overlay {
    display:none;
    position: absolute;    
    width:100px;
    height:100px;
    background-color: gray;
    top: 50px;
    left: 50px;
    padding: 10px;
    opacity: .8;
}

.suitimage {
    border-radius: 1em;
    width:2em;
    background-color: gray;
}

.system_msg{color: #111111;font-style: italic;}
.user_name{font-weight:bold;}
.user_message{color: #222222;}

.blubtn {
  background: #3498db;
  background: -webkit-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: -moz-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: linear-gradient(to bottom, #3498db 0%, #2980b9 100%);
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.blubtn:hover {
  background: #3cb0fd;
  background: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}