/**
 * Screets Chat 
 * Basic Skin
 * 
 */

#sc_chat_box {	 
	visibility: hidden;
}

/* Typography */
	#sc_chat_box,
	#sc_chat_box *,
	.sc_chat_box {
		font-size: 13px;
		font-family: Arial, Helvetica, sans-serif;
	}

/* Hacks */
    #sc_chat_box form,
    #sc_chat_box label {
        margin: 0;
        padding: 0;
        text-transform: none;
    }
    
/* Colors */
	.sc-cnv-wrap {}
	
/* Layouts */
	#sc_chat_box {
		position: fixed;
		bottom: 0px;
		right: 40px;
		line-height: 20px;
		z-index: 99999;
	}
	
	#Conversation {
		display: none;
	}
	
	.sc-chat-wrapper {
		padding: 20px;
		border-width: 0 1px 0 1px;
		border-style: solid;
		overflow: auto;
		line-height: 1;
	}
	
	#sc_chat_box .sc-chat-wrapper textarea {
		height: 43px;
	}
    
    #sc_chat_box .sc-chat-wrapper input, #sc_chat_box .sc-chat-wrapper textarea {
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 7px 11px;
		border-width: 1px;
		border-style: solid;
		text-shadow: none;
		line-height: 1.3;
		-webkit-transition: border .2s, background-color .3s;
		   -moz-transition: border .2s, background-color .3s;
		     -o-transition: border .2s, background-color .3s;
			    transition: border .2s, background-color .3s;
	}
	
	#sc_chat_box .sc-chat-wrapper input:focus, #sc_chat_box .sc-chat-wrapper textarea:focus, #sc_chat_box textarea.f-chat-line:focus {
		outline: 0;
		outline: thin dotted \9; /* IE6-9 */
	}
	
	#sc_chat_box .sc-chat-wrapper label {
		display: block;
		margin-top: 7px;
		margin-bottom: 4px;
		line-height: 1.4;
	}
	
	#sc_chat_box p.sc-lead {
		font-size: 14px;
		margin: 0 0 20px 0;
		padding: 0;
		line-height: 1.4;
	}
	
	#sc_chat_box .sc-chat-wrapper .sc-req {
		color: red;
		font-weight: bold;
	}
	
	#sc_chat_box .sc-chat-wrapper .sc-start-chat-btn {
		text-align: center;
	}
	#sc_chat_box .sc-chat-wrapper .sc-start-chat-btn a {
		display: inline-block;
		font-weight: bold;
		text-decoration: none;
		border: 0;
		margin: 10px 0;
		padding: 7px 11px;
	}

	#sc_chat_box .sc-chat-wrapper .sc-start-chat-btn a:hover	{
		text-decoration: none;
		border: 0;
	}
		
	#sc_chat_box div.sc-chat-header {
		font-size: 14px;
		font-weight: normal;
		padding: 10px 15px;
		cursor: pointer;
	}

	#sc_chat_box div.sc-chat-header i {
		float: right;
		width: 20px;
		height: 14px;
		background: url('img/icons.png') no-repeat;
		margin-top: 4px;
	}
	
/* Notifications */
	.sc-chat-notification {
		display: none;
		color: #777;
		font-weight: bold;
		text-align: center;
	}

	.sc-chat-notification.warning {
		color: #222;
		border: 1px solid #f0c36d;
		background-color: #f9edbe;
		padding: 3px;
	}
	
	.sc-chat-notification.error {
		color: red;
	}
	
	.sc-chat-notification.success {
		color: #008000;
	}
	
/* Chat Conversation */
	.sc-cnv-wrap {
		padding: 20px;
		margin: 0;
		list-style: none;
		border-width: 0 1px 0 1px;
		border-style: solid;
		overflow: auto;
		line-height: 20px;
	}
	
	#Conversation .sc-chat-notification {
		color: #222;
		background-color: #ff6;
		padding: 20px;
	}
	
	/* Single Message */
		
		.sc-msg-wrap {
			position: relative;
			margin: 0;
			padding: 0;
			border: 0;
		}
		
		.sc-usr-avatar {
			position: absolute;
			top: 2px;
			left: 0;
		}
		.sc-usr-avatar img {
			max-width: 38px;
			-webkit-border-radius: 500px;
			 -moz-border-radius: 500px;
				  border-radius: 500px;
		}
		
		.sc-msg {
			margin-left: 48px;
		}

		.sc-usr-name {
			font-weight: bold;
		}

		.sc-op-msg .sc-usr-name {
			color: #069;
		}
	
		.sc-msg .sc-chat-line {
			margin: 0 0 20px 0;
			padding: 0;
		}
				
		.sc-chat-time {
			float: right;
			color: #CCC;
			font-size: 13px;
		}

	/* Write a reply */
		#sc_chat_box form.sc-chat-reply {
			position: relative;
			padding: 10px;
		}
		
		#sc_chat_box textarea.f-chat-line {
			position: relative;
			font: 14px Arial, Helvetica, sans-serif;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
			   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
					box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
			font-weight: normal;
			line-height: 20px;
			margin: 0;
			padding-left: 3px;
			height: 20px;
			padding: 7px 10px;
			overflow: hidden;
			
		}

		.f-chat-line:-moz-placeholder { color: #999999; }
		.f-chat-line::-webkit-input-placeholder { color: #999999; }
		.f-chat-line:-ms-input-placeholder { color: #999999; }
		
		.f-chat-line:focus { 
			border-color: #AAA;
		}
		
		.sc-chat-sending {
			background-image: url('img/ajax-loader.gif');
			background-repeat: no-repeat;
			background-position: right 12px;
		}
		
		#sc_chat_box small.sc-chat-note {
			display: block;
			font-size: 11px;
			color: #999;
			text-align: center;
			text-transform: lowercase;
		}

/* Chat scrollbar style */
	#sc_chat_box ::-webkit-scrollbar { width: 12px; height: 10px; }
	#sc_chat_box ::-webkit-scrollbar-button:start:decrement,
	#sc_chat_box ::-webkit-scrollbar-button:end:increment  { display: none; }
	#sc_chat_box ::-webkit-scrollbar-track-piece  {
		background-color: #efefef;
	}
	#sc_chat_box ::-webkit-scrollbar-thumb:vertical {
		background-color: #999;
	}

/* Animations by http://daneden.me/animate/ */
	
	.sc-chat-animated {
		-webkit-animation-fill-mode: both;
		   -moz-animation-fill-mode: both;
			    -ms-animation-fill-mode: both;
			     -o-animation-fill-mode: both;
					animation-fill-mode: both;
		-webkit-animation-duration: 2s;
		   -moz-animation-duration: 2s;
		       -ms-animation-duration: 2s;
		        -o-animation-duration: 2s;
			    animation-duration: 2s;
	}

	.sc-chat-animated.sc-chat-hinge {
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-ms-animation-duration: 3s;
		-o-animation-duration: 3s;
		animation-duration: 3s;
	}

	@-webkit-keyframes sc_chat_bounce_in_up {
		0% {
			opacity: 0;
			-webkit-transform: translateY(2000px);
		}

		60% {
			opacity: 1;
			-webkit-transform: translateY(-30px);
		}

		80% {
			-webkit-transform: translateY(10px);
		}

		100% {
			-webkit-transform: translateY(0);
		}
	}

	@-moz-keyframes sc_chat_bounce_in_up {
		0% {
			opacity: 0;
			-moz-transform: translateY(2000px);
		}

		60% {
			opacity: 1;
			-moz-transform: translateY(-30px);
		}

		80% {
			-moz-transform: translateY(10px);
		}

		100% {
			-moz-transform: translateY(0);
		}
	}

	@-o-keyframes sc_chat_bounce_in_up {
		0% {
			opacity: 0;
			-o-transform: translateY(2000px);
		}

		60% {
			opacity: 1;
			-o-transform: translateY(-30px);
		}

		80% {
			-o-transform: translateY(10px);
		}

		100% {
			-o-transform: translateY(0);
		}
	}

	@keyframes sc_chat_bounce_in_up {
		0% {
			opacity: 0;
			transform: translateY(2000px);
		}

		60% {
			opacity: 1;
			transform: translateY(-30px);
		}

		80% {
			transform: translateY(10px);
		}

		100% {
			transform: translateY(0);
		}
	}

	.sc-chat-bounce-in-up {
		-webkit-animation-name: sc_chat_bounce_in_up;
		-moz-animation-name: sc_chat_bounce_in_up;
		-o-animation-name: sc_chat_bounce_in_up;
		animation-name: sc_chat_bounce_in_up;
	}

/* Landscape phones and down */
@media (max-width: 480px) {
	#sc_chat_box {
		max-width: 300px;
		right: 10px !important;
	}
	
	body #sc_chat_box .sc-chat-wrapper input, 
	body #sc_chat_box .sc-chat-wrapper textarea,
	body #sc_chat_box textarea.f-chat-line {
		font-size: 16px;
	}
	
	body .sc-cnv-wrap {
		max-height: 180px;
	}
	
	body #sc_chat_box .sc-chat-wrapper {
		max-height: 270px;
	}
	
}