* { margin: 0; padding: 0; border: 0; outline: none; }
html, body { height: 100%; background: #fef9f4; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.wrapper { width: 940px; margin: 0 auto; position: relative; }
a, input, textarea, select, #chatheader div, .chatlist div, .formright tbody tr, #joinbar, #sendmsg, #leavebar, #endbar, #shclickables, #clickables button, #showchats { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; }
a { color: #007aff; }
a:hover { text-decoration: none; color: #f29128; }

.header { background: #007aff; color: #fff; padding: 10px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
.header a { color: #fff; text-decoration: none; }
h1 { font-size: 36px; line-height: 50px; font-weight: 200; }
h1 a:hover { opacity: 0.7; }
ul.menu { position: absolute; top: -10px; right: 0; list-style: none; height: 70px; border-right: 1px solid #99caff; }
ul.menu li { float: left; border-left: 1px solid #99caff; }
ul.menu a { float: left; line-height: 20px; padding: 40px 0 10px; width: 90px; text-align: center; font-size: 12px; font-weight: bold; background: #4da2ff; background-repeat: no-repeat; background-position: center 18px; background-size: 20px 20px; }
ul.menu li.chats a { background-image: url('../gfx/icon-chats@2x.png'); }
ul.menu li.manager a { background-image: url('../gfx/icon-manager@2x.png'); }
ul.menu li.account a { background-image: url('../gfx/icon-account@2x.png'); }
ul.menu li.logout a { background-image: url('../gfx/icon-logout@2x.png'); }
ul.menu a:hover { background-color: #f29128; background-position: center 20px; }

h2 { font-size: 28px; line-height: 28px; margin-bottom: 10px; font-weight: 200; text-transform: lowercase; color: #5d5853; }
h3 { font-size: 24px; line-height: 24px; margin-bottom: 10px; font-weight: 200; text-transform: lowercase; color: #5d5853; }

input, textarea { -webkit-appearance:none; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; }
select { font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; }
input.field { width: 378px; padding: 10px; border: 1px solid #ccc; border-radius: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; background: #fff; color: #666; }
input.field:focus, textarea:focus, .formright textarea:focus, .formright select:focus { background: #f6f1eb; color: #333; }
input.fieldmid { border-radius: 0; border-top: 0; }
input.fieldsa { border-radius: 3px; }
input.button { width: 400px; padding: 10px 0; border: 1px solid #ccc; border-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background: #eee9e4; font-weight: bold; color: #007aff; border-top-width: 0; cursor: pointer; }
input.button:hover { background: #e1ddd8; }
input.button:focus, input.button:active { background: #e1ddd8; color: #f29128; }
label { display: block; font-size: 13px; font-weight: 500; text-transform: uppercase; color: #5d5853; }
input.buttonsa { border-radius: 3px; border-top-width: 1px; margin-top: 20px; }
p.newsect { margin-top: 20px; }
input.buttoncreate { margin-top: 0; }

.formleft { width: 250px; position: fixed; padding-right: 20px; border-right: 1px solid #cbe0f6;  }
.formleft h2 { color: #007aff; font-size: 32px; line-height: 32px; margin-bottom: 15px; }
.formleft p { font-size: 18px; line-height: 24px; font-weight: 300; margin-bottom: 10px; }
.formright .err, .formright .success { font-size: 18px; line-height: 24px; font-weight: 500; }
.formright { margin: 40px 0 0 270px; border-left: 1px solid #cbe0f6; padding-left: 20px; font-weight: 300; font-size: 16px; line-height: 22px; }
.formright label { display: block; margin-top: 20px; font-size: }
.formright input.field { width: 627px; }
.formright input.button { width: 649px; }
.formright h3 { margin: 20px 0; }
.formright p.textpar { margin-top: 10px; }
.formright textarea { resize: none; width: 627px; height: 250px; margin-top: 20px; border-radius: 3px; background: #fff; color: #666; border: 1px solid #ccc; padding: 10px;  }
.formright select { width: 649px; border-radius: 3px; background: #fff; color: #666; border: 1px solid #ccc; padding: 10px;  }
.formright textarea.code { height: 54px; }
.formright textarea.small { height: 74px; margin-top: 0; }

.formright table { border-collapse: collapse; border-bottom: 1px solid #cbe0f6; }
.formright thead { font-weight: 400; }
.formright thead td { padding-bottom: 5px; }
.formright tbody { font-size: 14px; font-weight: 400; line-height: 18px; }
.formright tbody tr { border-top: 1px solid #cbe0f6; background: #fff; }
td.chatboxname { width: 223px; padding: 0 10px; }
td.chatlistname { width: 385px; }
.formright tbody tr:hover { background: #f6f6f6; }
.formright tbody tr.switchedoff { background: #333; color: #ccc; }
.chatboxname span.name { display: block; max-height: 36px; overflow: hidden; }
.chatboxname span.domain { display: block; font-size: 12px; color: #999; }
td.emailaddress { width: 397px; padding: 0 10px; word-wrap: break-word; overflow: hidden; }
td.canswitch { width: 150px; }
.curswitch { font-weight: 500; }
td.linkbox { border-left: 1px solid #73b6ff; }
td.linkbox a { float: left; width: 80px; padding: 35px 0 5px; font-size: 12px; line-height: 20px; background: #4da2ff; font-weight: bold; text-align: center; text-decoration: none; color: #fff; border-right: 1px solid #73b6ff; background-repeat: no-repeat; background-position: center 12px; background-size: 20px 20px; }

td.linkbox a.chats { background-image: url('../gfx/icon-chats@2x.png'); }
td.linkbox a.popout { background-image: url('../gfx/icon-popout@2x.png'); }
td.linkbox a.switch { background-image: url('../gfx/icon-switch@2x.png'); }
td.linkbox a.switchoff { background-image: url('../gfx/icon-switchoff@2x.png'); }
td.linkbox a.switched, td.linkbox a.switched:hover { line-height: 16px; padding: 14px 0; height: 32px; background: #99caff; cursor: default; }

td.linkbox a.code { background-image: url('../gfx/icon-code@2x.png'); }
td.linkbox a.users { background-image: url('../gfx/icon-users@2x.png'); }
td.linkbox a.settings { background-image: url('../gfx/icon-settings@2x.png'); }
td.linkbox a.text { background-image: url('../gfx/icon-text@2x.png'); }
td.linkbox a.delete { background-image: url('../gfx/icon-delete@2x.png'); }

td.linkbox a:hover { background-color: #f29128; background-position: center 14px; }

p.hint { text-align: right; font-weight: 400; font-style: italic; font-size: 14px; line-height: 18px; color: #999; margin-top: 3px; }

.packagename, .curinstalls, .curusers { font-weight: 400; }

.bodybox { padding-top: 70px; }
.chatpage .bodybox { padding: 0; height: 100%; }
.chatpage .bodybox .wrapper { height: 100%; width: auto; margin: 0; }
.popout.wrapper { width: auto; margin: 0; position: static; height: auto; }

#newchats { position: fixed; top: 20%; background: #f29128; color: #fff; font-weight: bold; left: 0; right: 0; padding: 20px; z-index: 50; font-size: 24px; line-height: 28px; text-align: center; display: none; cursor: pointer; }

.loginform { border: 10px solid #007aff; background: #fff; padding: 20px; width: 400px; margin: 50px auto 0; border-radius: 20px; }
.loginform p.txt { margin-bottom: 10px; }
p.err { color: #c00; margin-bottom: 10px; font-weight: bold; }
p.success { color: #f29128; margin-bottom: 10px; font-weight: bold; }
.loginform p.right { text-align: right; margin-top: 10px; }
.newpass { color: #007aff; }

iframe#preview { width: 250px; height: 500px; position: absolute; margin: 20px 0 0 -291px; }
.formright .colour { display: inline-block; width: 211px; margin: 20px 5px 0 0; vertical-align: top; }
.colour p { font-size: 14px; line-height: 18px; font-weight: 500; margin-bottom: 3px; }
.colour label { margin-top: 3px; text-transform: none; font-weight: 400; }
.colour input { margin-left: 3px; width: 52px; padding: 3px; text-transform: lowercase; text-align: center; border: 1px solid #ccc; border-radius: 3px; }

.footer { background: #000; color: #fff; padding: 10px 0; text-align: right;  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;  }
.footer a { color: #fff; }

#chatheader { position: absolute; top: 70px; left: 0; right: 0; height: 50px; font-size: 16px; z-index: 20; background: #4da2ff; border-top: 1px solid #99caff; }
.popout #chatheader { top: 0; border-width: 0; }
#chatheader div { width: 25%; float: left; text-align: center; line-height: 50px; color: #fff; cursor: pointer; }
#chatheader.optsthree div { width: 33.3333%; }
#chatheader div:hover { background: #7ab9ff; }
#chatheader div.curtab { cursor: default; background: #f29128; }
#chatbody { position: absolute; top: 121px; bottom: 0; left: 0; right: 0; }
.popout #chatbody { top: 50px; }
#chatbody>div { display: none; }
#chatbody div.curchat { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }

.chatlist { position: absolute; width: 250px; left: 0; top: 0; bottom: 0; border-right: 1px solid #ccc; overflow: auto; z-index: 10; -webkit-overflow-scrolling: touch; overflow-x: hidden; }
.chatlist div { width: 230px; padding: 20px 10px; border-bottom: 1px solid #eee; position: relative; word-wrap: break-word; cursor: pointer; }
.chatlist div .unread { width: 10px; height: 10px; background: #c00; position: absolute; top: 25px; right: 10px; border-radius: 5px; display: none; }
.chatlist div:hover { background: #f6f1eb; }
.chatlist div.current { font-weight: bold; background: #e1ddd8; }
.chatlist .chattime { display: block; font-size: 12px; }

#chats { position: absolute; top: 121px; bottom: 0; left: 250px; right: 0; background: #fff; border-left: 1px solid #ccc; }
.popout #chats { top: 50px; }

.chatarea { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px; overflow: auto; -webkit-overflow-scrolling: touch; }
.canchat .chatarea { bottom: 92px; }
.canjoin .chatarea { bottom: 30px; }
#joinbar, #chatbar, #leavebar, #endbar { position: absolute; display: none; bottom: 0; left: 0; right: 0; line-height: 30px; background: #4da2ff; text-align: center; cursor: pointer; font-weight: bold; color: #fff; }
#chatbar { height: 92px; cursor: default; line-height: 20px; background: transparent; }
#leavebar { display: block; width: 50%; right: auto; }
#endbar { display: block; width: 50%; left: auto; }
#markaudited { display: block; background: #4da2ff; text-align: center; cursor: pointer; font-weight: bold; color: #fff; text-decoration: none; margin: -8px -8px 10px; padding: 5px; }
#joinbar:hover, #leavebar:hover, #endbar:hover, #markaudited:hover { background: #f29128; }

.chatarea .message { margin-bottom: 10px; }
.chatarea .message .name { font-size: 12px; text-transform: uppercase; font-weight: bold; }
.chatarea .message .nameme { color: #007aff; }
.chatarea .message .nameyou { color: #f29128; }
.chatarea .message .timestamp { font-size: 12px; font-style: italic; margin-left: 5px; color: #999; visibility: hidden; }
.chatarea .message:hover .timestamp { visibility: visible; }
.chatarea .message .messagetext { display: block; }
.chatarea .message .typing { color: #999; font-style: italic; }
.chatarea .message .joinedleft { color: #666; }
.chatarea .message a { color: #666; }
.chatarea .message a:hover { color: #999; }

#newmsgwrap { position: absolute; left: 0; right: 71px; height: 60px; }
#newmsg { width: 100%; height: 50px; display: block; border: 1px solid #ccc; padding: 5px; font-size: 12px; resize: none; color: #333; border-radius: 0; border-left: 0; z-index: 4; }
#sendmsg { position: absolute; top: 0; right: 0; width: 60px; line-height: 60px; text-align: center; border: 1px solid #ccc; border-left: 0; border-right: 0; background: #eee; cursor: pointer; font-weight: bold; border-radius: 0; color: #007aff; z-index: 5; }

#newmsg:focus { background: #f6f6f6; }
#stopchat:hover { background: #007aff; color: #fff; }
#stopchat:active, #stopchat:focus  { background: #f29128; color: #fff; }
#sendmsg:hover, #sendmsg:active, #sendmsg:focus { background: #ddd; }
#sendmsg:active, #sendmsg:focus { color: #f29128; }

#shclickables, #showchats { position: absolute; bottom: 92px; right: 0; z-index: 8; width: 40px; height: 40px; background: #4da2ff url('../gfx/icon-text@2x.png') no-repeat center; background-size: 20px 20px; cursor: pointer; opacity: 0.5; }
#showchats { right: auto; left: 0; display: none; background-image: url('../gfx/icon-chats@2x.png'); z-index: 8; }
#shclickables:hover, #showchats:hover { background-color: #7ab9ff; opacity: 1; }
#shclickables.block { background-color: #f29128; opacity: 1;  }
#clickables { position: absolute; bottom: 132px; right: 0; z-index: 50; display: none; max-height: 250px; overflow: auto; border: 1px solid #f29128; border-right: 0; }
#clickables button { width: 200px; display: block; cursor: pointer; background: #fef9f4; color: #333; -webkit-appearance:none; font: 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px; border-top: 1px solid #eee; }
#clickables button.first { border-top: 0; }
#clickables button:hover { background: #f6f1eb; }
#clickables button:active, #clickables button:focus { background: #e1ddd8; }
.endspace { height: 40px; }

@media screen and (max-width: 959px) {
	.wrapper { width: 740px; }
	.formleft { width: 170px; }
	.formright { margin-left: 190px; }
	.formright input, .formright input.button, .formright input.field, .formright textarea, .formright select { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
	td.chatboxname { width: 103px; }
	td.chatlistname { width: 265px; }
	span.domain { width: 103px; overflow: hidden; }
	td.chatlistname span.domain { width: auto; }
	iframe#preview { width: 170px; margin-left: -211px; }
	.formright .colour input { width: 62px; }
}

@media screen and (max-width: 759px) {
	.wrapper { width: auto; margin: 0 10px; }
	.formleft { border-right: 0; padding: 20px 0 0; position: static; width: auto; }
	.formright { margin-left: 0; padding-left: 0; border-left: 0; }
	.formright table { width: 100%; }
	td.chatboxname, td.chatlistname { width: auto; }
	table.chatboxes td.linkbox { width: 243px; }
	table.curinsts td.linkbox { width: 405px; }
	iframe#preview { display: none; }
}

@media screen and (max-width: 700px) {
	.chatlist { width: 200px; }
	.chatlist div { width: 180px; }
	#chats { left: 200px; }
}

@media screen and (max-width: 599px) {
	* { -webkit-text-size-adjust:none; }
	td.linkbox a, td.linkbox a.switched, td.linkbox a:hover, td.linkbox a.switched:hover { text-indent: -9999px; width: 40px; height: 40px; padding: 0; background-position: center; }
	table.chatboxes td.linkbox { width: 123px; }
	table.curinsts td.linkbox { width: 205px; }
}

@media screen and (max-width: 580px) {
	#chatheader div { font-size: 12px; }
	.chatlist { border-right: 1px solid #ccc; background: #fef9f4; }
	#chatcover { display: block; background: rgba(255,255,255,0.05); top: 50px; left: 0; right: 0; bottom: 0; z-index: 9; position: absolute; }
	#showchats { display: block; }
	#chats { left: 0; border-left: 0; }
	.chatlist { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: left; transition-property: left; }
	
	.loginform { width: auto; margin: 50px 0 0; }
	.loginform input { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
	
	ul.menu a, ul.menu a:hover { text-indent: -9999px; width: 40px; background-position: center; }
}
@media screen and (max-width: 450px) {
	#chatheader div { line-height: 16px; padding: 9px 0; height: 32px; }
}

@media screen and (max-width: 350px) {
	td.linkbox a, td.linkbox a.switched, td.linkbox a:hover, td.linkbox a.switched:hover { width: 30px; }
	table.chatboxes td.linkbox { width: 93px; }
	table.curinsts td.linkbox { width: 155px; }
}

@media screen and (max-width: 300px) {
	.wrapper { display: none; }
}

@media screen and (max-height: 440px) {
	#clickables { max-height: 200px; }
}
@media screen and (max-height: 390px) {
	#clickables { max-height: 150px; }
}
@media screen and (max-height: 340px) {
	#clickables { max-height: 80px; }
}
@media screen and (min-width: 1500px) {
iframe#preview { margin: 20px 0 0 650px; }