@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i");

	/* geral ------------------------------------------------------------------------------------------------------------------------------------------------- */
		html, body { width: 100%; height: 100%; }
		* { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; }
		a, a:visited { text-decoration: none; outline: none; border-bottom: 1px dotted #97cae6; color: #97cae6; }
		a:hover { border-bottom: 1px dashed transparent; }
		.clear { clear: both; }


	/* chat -------------------------------------------------------------------------------------------------------------------------------------------------- */
		#chat-frm { position: fixed; left: 50%; margin: 0; margin-left: 100px; width: 350px; overflow: none; border: 0; }
		#chat-frm { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
		#chatContainer { position: fixed; left: 0; top: 0; margin: 0; width: 350px;  background: url('../img/solid_gray.jpg') repeat-x #d0d0d0; }
		#chatHeader { height: 40px; background: #db000b; color: #ffffff; position: relative; width: 150px; }
		#chatContainer:hover #chatHeader { width: 100%; }
		#chatHeader { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
		#chatHeader img { border: 0; width: 20px; position: absolute; left: 10px; top: 10px; }
		#chatHeader div { position: absolute; left: 40px; top: 12px; font-size: 12px; text-transform: uppercase; }
		#chatContainer:hover #chatHeader div { left: 80px; }
		#chatHeader div { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
		#chatTopBar { height: 40px; background: #bbbbbb; margin-bottom: 10px; color: #ffffff; }
		#chatTopBar img { border: 0; margin-left: 10px; margin-right: 10px; margin-top: 8px; }
		#chatLineHolder { height: 200px; width: 270px; float: right; }
		#chatUsers { height: 200px; width: 70px; display: inline-block; overflow-x: hidden; overflow-y: auto; }
		#chatUsers .user { background: url('../img/gravatar30.png') no-repeat 1px 1px #ffffff; float: left; height: 32px; margin: 10px 0 0 10px; width: 32px; }
		#chatUsers .user img { border: 0; display: block; visibility: hidden; }
		#chatUsers .count { clear: both; font-size: 11px; font-size: 11px; margin: 10px; }
		.chat { background: #ffffff; min-height: 24px; padding: 6px; border: 1px solid #ffffff; padding: 8px 6px 4px 37px; position: relative; margin: 0 10px 10px 0; }
		.chat span { color: #777777; font-size: 12px; }
		.chat .text { color: #444444; display: inline-block; font-size: 15px; overflow: hidden; vertical-align: top; width: 190px; }
		.chat .gravatar { background: url('../img/gravatar23.png') no-repeat; left: 7px; position: absolute; top: 7px; }
		.chat img { display: block; visibility: hidden; }
		.chat .time { position: absolute; right: 10px; top: 12px; font-size: 11px; }
		.chat .author { margin-right: 6px; font-size: 11px; }
		.jspVerticalBar { background: none; width: 20px; }
		.jspTrack { background: #db000b; border: 1px solid #db000b; width: 3px; right: -10px; }
		.jspDrag { background: #db000b; width: 15px; left: -6px; height: 15px !important; margin-top: -5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; }
		.jspDrag:hover, .jspDrag:active { background: #666666; }
		#chatBottomBar { background: url('../img/solid_gray.jpg') repeat-x #d0d0d0; position: relative; padding: 10px; border: 1px solid #fff; }
		#chatBottomBar .tip { position: absolute; width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #eeeeee; top: -20px; left: 20px; }
		#chatContainer input { background: #dcdcdc; height: 26px; color: #777777; border: 1px solid; border-color: #c1c1c1 #eee #eee #c1c1c1; padding: 0 5px; margin-right: 5px; width: 185px; outline: none; }
		#submitForm { display: none; }
		input#chatText { width: 230px; }
		#chatContainer .blueButton { border: none; color: #516D7F; display: inline-block; font-size: 13px; height: 29px; text-align: center; width: 75px; margin: 0; cursor: pointer; }
		#chatContainer .blueButton:hover { background: #db000b; color: #ffffff; }
		a.logoutButton { border: 1px #db000b solid;; color: #ffffff; font-size: 12px; padding: 5px 9px; position: absolute; right: 10px; top: 7px; display: none; }
		a.logoutButton:hover { border: 1px #ffffff solid; }
		#chatContainer:hover a.logoutButton { display: block; }
		p.noChats { clear: both; font-size: 12px; padding: 10px; text-align: left; }
		#chatErrorMessage { width: 100%; top: 0; left: 0; position: fixed; background-color: #ab0909; border-bottom: 1px solid #d32a2a; font-size: 23px; padding: 16px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #940f0f; }


	/* form -------------------------------------------------------------------------------------------------------------------------------------------------- */
		#chatContainer form { font-size: 12px; padding: 20px; margin-top: -30px; padding-bottom: 20px; }
		#chatContainer textarea { background: #dcdcdc; color: #777777; border: 1px solid; border-color: #c1c1c1 #eee #eee #c1c1c1; padding: 0 5px; margin-right: 5px; width: 185px; outline: none; margin-top: 0; }

		.btn { display: block; font-size: 13px; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-color: #0e0e0e; 
		padding: .375rem .75rem; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; 
		color: #fff; background-color: #0e0e0e; box-shadow: none; }
		.btn:focus, .btn:hover, .btn:visited { outline: 0; text-decoration: none; color: #fff; background-color: #222; border-color: #222; box-shadow: none; }