@import url(reset.css);
/* ! MEDIA QUERIES */
/*
@mixin respond-to($media) {
	
	@if $media == mobile { // smartphone mobile devices
		@media only screen and (max-width: $mediaMobilePortrait) { @content; }
		@media only screen and (min-width: $mediaMobilePortrait+1) and (max-width : $mediaMobileLandscape) { @content; }
	}@else if $media == tablet { // tablet devices
		@media only screen and (min-width : $mediaMobileLandscape+1) and (max-width : $mediaTabletPortrait) { @content; }
		@media only screen and (min-width: $mediaTabletPortrait+1) and (max-width : $mediaTabletLandscape) { @content; }
	}@else if $media == mobile-portrait { // smartphone portrait
		@media only screen and (max-width: $mediaMobilePortrait) { @content; }
	}@else if $media == mobile-landscape { // smartphone landscape
		@media only screen and (min-width: $mediaMobilePortrait+1) and (max-width : $mediaMobileLandscape) { @content; }
	}@else if $media == tablet-portrait { // tablet portrait
		@media only screen and (min-width : $mediaMobileLandscape+1) and (max-width : $mediaTabletPortrait) { @content; }
	}@else if $media == tablet-landscape { // tablet landscapt
		@media only screen and (min-width: $mediaTabletPortrait+1) and (max-width : $mediaTabletLandscape) { @content; }
	}@else if $media == desktop { // desctop
		@media only screen and (min-width: $mediaDesktop+1) { @content; }
	}
}
*/
html { height: 100%; background-color: #e0e0df; }

body { font-family: "Lucida Sans", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; font-size: 62.5%; }

h1 { margin: 0 0 10px; padding: 0 0 10px; font-size: 24px; color: #6b6b6b; text-align: center; }

h2 { margin: 0; padding: 0; font-size: 17px; border-bottom: 1px solid #eeeeee; }

p { margin: 7px 0; font-size: 12px; color: #7f7f7f; }

a { text-decoration: none; color: #6a6a6a; }

#mainHeader { position: relative; margin: 25px auto; width: 750px; }

#mainWrapper { position: relative; margin: 25px auto; width: 750px; background-color: #f5f5f5; -webkit-box-shadow: 0 1px 1px 0 #9a9a9a; -moz-box-shadow: 0 1px 1px 0 #9a9a9a; box-shadow: 0 1px 1px 0 #9a9a9a; zoom: 1; }
#mainWrapper:before, #mainWrapper:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
#mainWrapper:after { clear: both; }
#mainWrapper #mainBody { position: relative; float: left; width: 64%; padding: 15px; background-color: #ffffff; border-right: 1px solid #e9e9e9; }
#mainWrapper #mainBody.chatSize { height: 500px; }
#mainWrapper #mainSidebar { padding: 5px 15px 5px 13px; float: right; width: 28%; }
#mainWrapper #mainSidebar h3 { margin: 15px 0 0; font-size: 14px; color: #8b8b8b; }
#mainWrapper #mainSidebar p { line-height: 1.5; color: #b6b6b6; }
#mainWrapper #mainSidebar hr { margin: 22px 0; }

#chatBody { position: relative; overflow-y: scroll; height: 70%; }
#chatBody .msg { padding: 10px; margin: 5px 0; }
#chatBody .msg:first-child { margin-top: 0; }
#chatBody .msg.incoming { border-left: 2px solid #cddbdd; background-color: #e6f3f5; }
#chatBody .msg.system { border-left: 2px solid #fafafa; }
#chatBody .msg.system h3 { color: #c1c1c1; }
#chatBody .msg.system p { color: #bababa; }
#chatBody .msg.outgoing { border-left: 2px solid #eaeaea; background-color: #fafafa; }
#chatBody .msg.outgoing p { color: #9e9e9e; }
#chatBody .msg .childMsg { margin: 7px 0 0; padding: 7px 0 0; border-top: 1px solid #f4f4f4; }
#chatBody .msg h3 { margin: 0 0 6px; font-size: 11px; font-weight: bold; color: #6b6b6b; }
#chatBody .msg span { padding: 4px 0 0; font-weight: normal; float: right; color: #d4d4d4; }
#chatBody .msg p { margin: 0; padding-right: 10%; font-size: 12px; line-height: 1.5; color: #6b6b6b; word-wrap: break-word; }
#chatBody .msgEmpty { padding: 50px 20px 0; }
#chatBody .msgEmpty p { color: #bababa; text-align: center; font-size: 14px; line-height: 1.8; }

#chatResponse { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0; border-top: 1px solid #dddddd; background-color: #fbfbfb; }
#chatResponse form { position: relative; padding: 0; }
#chatResponse form .loader { right: 5%; top: 15%; z-index: 10; }
#chatResponse fieldset { padding: 15px 15px 10px; }
#chatResponse textarea { width: 93%; padding: 15px; height: 50px; border: 1px solid #dddddd; color: #4b4b4b; overflow: auto; }
#chatResponse textarea:focus { outline: none; border: 1px solid #cbcbcb; }
#chatResponse .enterSubmit { float: left; margin: 0; padding: 15px 0; }
#chatResponse .enterSubmit label { float: left; margin: 0 0 0 7px; color: #9a9a9a; font-weight: normal; font-size: 12px; }
#chatResponse .enterSubmit input[type=checkbox] { margin: 0; float: left; }

#offlineNotice { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 55px 30px 0; opacity: .97; background-color: #fbeef1; }
#offlineNotice p { margin: 7px 0; padding: 0; line-height: 1.6; text-align: center; }
#offlineNotice p.notice { color: #e0090b; font-weight: bold; font-size: 16px; }

#convoClosedNotice { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 35px; opacity: .9; background-color: #ddf5f5; }
#convoClosedNotice p { margin: 7px 0; padding: 0; line-height: 1.6; }
#convoClosedNotice p.notice { color: #03233b; font-weight: bold; }
#convoClosedNotice p a { text-decoration: underline; }

form { zoom: 1; padding: 30px; }
form:before, form:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
form:after { clear: both; }
form#createConversationForm { padding: 20px; }
form#createConversationForm input[type=submit] { margin: 15px 0 0; }
form label { display: block; margin: 0 0 15px; font-size: 14px; color: #2d2d2d; font-weight: bold; }
form input[type=text] { margin: 7px 0; padding: 15px; width: 90%; font-size: 16px; color: #444444; border: 1px solid #aaaaaa; outline: none; }
form input[type=submit] { float: left; margin: 7px 25px 0 0; padding: 8px 20px; background: #0f6faf; color: #fff; text-transform: uppercase; border: none; cursor: pointer; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
form input[type=submit].lg { padding: 12px 20px; font-size: 12px; }

.btn { display: block; margin: 7px 0; padding: 9px 20px; color: #fff; text-transform: uppercase; text-align: center; font-size: 11px; border: none; cursor: pointer; background: #bcbcbc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.btn.notice:hover { background: #e52027; }

#mainSidebar .btn { margin-top: 20px; }

p.icon { margin: 0; padding: 10px 10px 10px 30px; font-size: 16px; color: #bababa !important; }
p.icon.chat { background: transparent url("/assets/images/webchat/icon-chat.png") left center no-repeat; }
p.icon.email { padding: 10px 10px 10px 30px; background: transparent url("/assets/images/webchat/icon-email.png") left center no-repeat; }
p.icon.appstore { background: transparent url("/assets/images/webchat/icon-appstore.png") left center no-repeat; }

.loader { position: absolute; width: 16px; height: 16px; background: transparent url(/assets/images/webchat/loader.gif) center center no-repeat; }

.center { text-align: center; }

.txt.notice { color: #c7090c; }

hr { margin: 10px 0; padding: 0; height: 1px; width: 100%; background-color: #e4e4e4; }