@font-face {
    font-family: 'helios';
    src: url('fonts/heliosthin-1361845496.eot');
    src: url('fonts/heliosthin-1361845496.eot?#iefix') format('embedded-opentype'),
    url('fonts/heliosthin-1361845496.woff') format('woff'),
    url('fonts/heliosthin-1361845496.ttf') format('truetype'),
    url('fonts/heliosthin-1361845496.svg#heliosthinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
BODY {
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background: #FFFFFF;
	color: #8f8f8f;
}

FORM {
	margin-bottom: 0;
	margin-top: 0;
}

TABLE {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666666;
}

A, A:active, A:link, A:visited {
	text-decoration: none;
	color: #BB0000;
}

A:hover {
	text-decoration: underline;
	color: #BB0000;
}

H1 {
	margin-top: 0;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}

H2 {
	margin-top: 0;
	margin-bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	font-weight: bold;
}

H3 {
	margin-top: 0;
	margin-bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	font-weight: bold;
}

UL {
	margin-top: 0;
	margin-bottom: 0;
}

#greybg {
	background: #EFEFEF;
}

#whitebg {
	background: #FFF;
}
input {
    -webkit-appearance:none;
}
#toolbar {
	background: #E3E3E3 url('images/toolbar_bg.jpg') repeat-x;
	border-bottom: solid 1px #eaeaea;
}

#typingdiv, #engineinfo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #BB0000;
	margin: 0 3px;
}

.chathistory {
	width: 100%;
	height: 300px;
	border: solid 1px #eaeaea;
	overflow:auto;
    border-radius: 5px;
}

TEXTAREA.message {
	margin: 0;
	border: solid 1px #eaeaea;
	padding: 0 3px;
	width: 100%;
	height: 50px;
	overflow: auto;
    color: #8f8f8f;
}

.message {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px !important;
	color: #8f8f8f;
	padding: 14px;
	line-height: 15px;
}
.time {color: #000;}
.nuser {color: #40aaed;font-weight: bold;margin-bottom: 4px}
.nagent {font-weight: bold;margin-bottom: 4px}
.minf {color: #40aaed;font-size: 13px;padding-bottom: 6px;}
.mevent {color: #A1A1A1;font-size: 13px;padding-bottom: 6px;}
.mhidden {color: #A1A1A1;font-size: 13px;}
.mconn {color: #A1A1A1;font-size: 13px; margin-bottom: 6px;}
.submit {padding-top: 1px;}
.text {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;color: #4C4C4C;}
.text span.grey {color: #666;}
#form {width: 100%;background: #EFEFEF;border: solid 1px #eaeaea;}
.chat_wrp{padding: 6px 0;}
#form TD.text {width: 1%;white-space: nowrap;}
#errorimage {margin-right: 5px;}
.field {
	border: 1px solid #eaeaea;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666;
	padding-left: 3px;
}

textarea.field {
	margin: 0;
	padding: 0 3px;
	overflow: auto;
}

.dropdown {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666666;
}

.button A {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666666;
}

#footer {
  text-align: center;
  font-size: 10px;
  color: #999999;
}

#footer A {
	color: #999999;
	text-decoration: underline;
}
.buttons_block{
    overflow: hidden;
    padding: 10px 0 0 0;
}
.buttons_block>div{
    float: right;
    margin-left: 10px;
}
.chat_wrapper .header{
    margin-top: -30px;
}
.header{
    color: #333;
    margin-bottom: 4px;
    font: 3em helios;
}
.chat_wrapper p{
    font-size: 13px;
    color: #8f8f8f;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
.info > div:first-child{
    padding-bottom: 4px;
}
.chat_wrapper{
    /*padding: 22px 35px 10px 20px;*/
    max-width: 100%;
}
.chat_room textarea {
    height: 45px;
    width: 99%;
    font-size: 13px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 5px;
    resize: none;
    padding-top: 5px;
    line-height: 18px;
}
.chat_room iframe {
    height: 170px;
    width: 99%;
}
.message_area{
    padding: 15px 0 9px;
}
#sndmessagelnk{
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #5cbdf9 39%, #2ea6ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#5cbdf9), color-stop(100%,#2ea6ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #5cbdf9 39%,#2ea6ee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cbdf9', endColorstr='#2ea6ee',GradientType=0 ); /* IE6-9 */
    color: #fff;
    width: 60px;
    height: 35px;
    font-size: 13px;
    text-decoration: none;
    line-height: 35px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}
#sndmessagelnk:active{
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #2ea6ee  39%,#5cbdf9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#2ea6ee), color-stop(100%,#5cbdf9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2ea6ee 39%,#5cbdf9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2ea6ee  39%,#5cbdf9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea6ee', endColorstr='#5cbdf9',GradientType=0 ); /* IE6-9 */
}
#changename1{
    display: block!important;
}
#changename2 {
    display: none!important;
}
textarea:focus,input:focus{
    outline: none;
}
#uname{
    height: 35px;
    width: 178px;
    color: #8f8f8f;
    border-radius: 5px;
    border-color:#eaeaea;
}
a.change_name_btn{
    display: block;
    text-transform: uppercase;
    width: 50px;
    text-decoration: none;
    height: 35px;
    font-size: 13px;
    text-align: center;
    line-height: 37px;
    color: #fff;
    border-radius: 5px;
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #5cbdf9 39%, #2ea6ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#5cbdf9), color-stop(100%,#2ea6ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #5cbdf9 39%,#2ea6ee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cbdf9', endColorstr='#2ea6ee',GradientType=0 ); /* IE6-9 */
}
.change_name_btn:active{
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #2ea6ee  39%,#5cbdf9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#2ea6ee), color-stop(100%,#5cbdf9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2ea6ee 39%,#5cbdf9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2ea6ee  39%,#5cbdf9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea6ee', endColorstr='#5cbdf9',GradientType=0 ); /* IE6-9 */
}
#changename1>div{
    overflow: hidden;
    padding-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #d8d8d8;
}
#changename1>div>div:first-child{
    float: left;
}
#changename1>div>div{
    float: right;
}
.chat_wrapper select {
    width: 99%;
    margin-bottom: 15px;
}
#postmessage {
    overflow: hidden;
    margin-top: 7px;
}
#postmessage>div{
    float: right;
}
#postmessage >div:first-child{
    float: left;
    width: 70%;
}
#postmessage .info a {
    color: #8f8f8f;
}
#postmessage .info {
    font-size: 11px;
}
.mail_form_wrapper textarea {
    width: 100%;
    color: #8f8f8f;
    height: 157px;
    border: 1px solid #eaeaea;
    font-size: 13px;
    resize: none;
    border-radius: 5px;
    margin-bottom: 10px;
    text-indent: 0;
    padding: 11px 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}
 .error {
    margin-top: -10px;
    padding-bottom: 10px;
    width: auto;
    color:#0099FF;
}
.mail_form_wrapper input[type='text']{
    height: 35px;
    color: #8f8f8f;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
    border-radius: 5px;
    border-color:#eaeaea;
    margin-bottom: 18px;
}
/*#leave_msg {*/
    /*padding: 15px 35px 15px 18px;*/
/*}*/
#leave_msg .header{
    margin-top: 0;
}
input[type="text"],textarea{
    background-color: #fcfcfc;
    text-indent: 10px;
}
.mail_complete_message  .target_message{
    color: #40aaed;
}
.target_message {
    font-size: 13px;
    color: #8f8f8f;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 17px;
    line-height: 18px;
    margin-bottom: 18px;
    margin-top:0;
}
#postmessage .submit {
    width: 26.5%;
    text-align: right;
}
.mail_complete_message .border_block{
    border: 1px solid #dbdbdb;
    margin-top: 20px;
    font-size: 13px;
    padding: 10px;
}
.chat_wrapper.agent_chat{
    width: 100%;
}
.agentlist {
    padding: 0;
}
.agentlist li{
    list-style: none;
}
.agentlist a{
    margin-bottom: 10px;
    width: 100%;
    display: block;
    color: #fff;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #5cbdf9 39%, #2ea6ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#5cbdf9), color-stop(100%,#2ea6ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5cbdf9 39%,#2ea6ee 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #5cbdf9 39%,#2ea6ee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cbdf9', endColorstr='#2ea6ee',GradientType=0 ); /* IE6-9 */
    line-height: 40px;
}
.register_user .first input[type='text']{
    width: 97%;
}
.agentlist a:active{
    background: #5cbdf9; /* Old browsers */
    background: -moz-linear-gradient(top,  #2ea6ee  39%,#5cbdf9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#2ea6ee), color-stop(100%,#5cbdf9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2ea6ee  39%,#5cbdf9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2ea6ee 39%,#5cbdf9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2ea6ee  39%,#5cbdf9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea6ee', endColorstr='#5cbdf9',GradientType=0 ); /* IE6-9 */
}
.send_history_by_mail form{
    padding: 20px;
    border: 1px solid #dbdbdb;
    margin-top: 10px;
}
.send_history_by_mail input[type="text"],.register_user input[type="text"]{
    height: 35px;
    width: 178px;
    border-radius: 5px;
    color: #8f8f8f;
    border-color: #eaeaea;
}
.register_user .first {
    padding-bottom: 10px;
}
@media screen and (max-width: 500px) {
    .info{
        width: 100%;
    }
}