@import "compass";
@import "mixins";

$orange-color: #E98003;
$radius-a: 6px;
$radius-b: 8px;
$shadow-a: 0 1px 2px rgba(0,0,0,0.4);
$shadow-b: 0 2px 3px rgba(0,0,0,0.4);

.clear {
	clear: both;
}

.calls-portlet-caller {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		max-width: 720px;
		max-height:540px;
		overflow: hidden;

		.ww-input {
			width: 300px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 460px;
			height: 95px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 100px;
			left:285px;
			width: 150px;
			height:150px;
			border-radius: 75px;
			-webkit-border-radius: 75px;
			-moz-border-radius: 75px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}

	.ww-portlet1 {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		width: 640px;
		height:480px;
		overflow: hidden;

		.ww-input {
			width: 300px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 460px;
			height: 95px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 100px;
			left:245px;
			width: 150px;
			height:150px;
			border-radius: 75px;
			-webkit-border-radius: 75px;
			-moz-border-radius: 75px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}

	.ww-portlet2 {
		padding: 8px;
		margin-bottom: 50px;
		border: none;
		background: #fefefe;
		box-shadow: $shadow-a;
		-webkit-box-shadow: $shadow-a;
		-moz-box-shadow: $shadow-a;

		.ww-input {
			width: 150px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 230px;
			height: 75px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 75px;
			left: 110px;
			width: 100px;
			height:100px;
			border-radius: 50px;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}
}

.calls-portlet-receiver {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		max-width: 720px;
		max-height: 540px;
		overflow: hidden;

		.ww-input {
			width: 300px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 460px;
			height: 95px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 100px;
			left:285px;
			width: 150px;
			height:150px;
			border-radius: 75px;
			-webkit-border-radius: 75px;
			-moz-border-radius: 75px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}

	.ww-portlet1 {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		max-width: 640px;
		max-height: 480px;
		overflow: hidden;

		.ww-input {
			width: 300px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 460px;
			height: 95px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 100px;
			left:245px;
			width: 150px;
			height:150px;
			border-radius: 75px;
			-webkit-border-radius: 75px;
			-moz-border-radius: 75px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}

	.ww-portlet2 {
		padding: 8px;
		margin-bottom: 50px;
		border: none;
		background: #fefefe;
		box-shadow: $shadow-a;
		-webkit-box-shadow: $shadow-a;
		-moz-box-shadow: $shadow-a;

		.ww-input {
			width: 150px;
		}
	
		.ww-input-box {
			font-size: 1em;
			background: #fcfcfc;
			width: 230px;
			height: 75px;
		}
	
		.ww-thumb-remote {
			position: absolute;
			top: 75px;
			left: 110px;
			width: 100px;
			height:100px;
			border-radius: 50px;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			border: 2px solid #f5f5f5;
			overflow: hidden;
		}

		.ww-message-list {
			list-style-type: none; 
			padding: 0; 
			margin: 0;
			
				li {
					line-height: 1.25em;
					font-size: 1.01em;
					margin-bottom: 8px;
					color: blue;
				}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
		}
	}
}

.calls-portlet-group {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		border: none;
			
		h2 {
			font-size: 22px;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-entry-text {
		text-align: left;
		margin-bottom: 7px;
		font-size: 1em;
		line-height: 130%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-input {
		width: 500px;
	}
	
	.ww-input-number {
		width: 80px;
	}
	
	.ww-input-box {
		width: 500px;
		height: 80px;
	}

	.ww-input-reply {
		width: 500px;
		height: 50px;
	}

	.ww-message-list {
		list-style-type: none; 
		max-height: 250px;
		overflow-y: auto;
		padding: 0; 
		margin: 0;
			
			li {
				line-height: 1.25em;
				font-size: 1.01em;
				margin-bottom: 8px;
				color: blue;
			}
				
				li b {
					font-size: 0.9em;
					color: #999;
				}
				
				li i {
					font-size: 0.9em;
					color: #999;
				}
	}

	.ww-grid-container {
		width: 100%;
		min-height:310px;

		.ww-grid-entry {
			margin: 0 10px 10px 0;
			width: 288px;
			height: 216px;
			padding: 0;
			float: left;
		}

		.ww-grid-entry2 {
			margin: 0 0 10px 0;
			width: 300px;
			height: 225px;
			padding: 0;
			float: left;
		}
	}
}

.calls-portlet-webinar {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		border: none;
			
		h2 {
			font-size: 22px;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-entry-text {
		text-align: left;
		margin-bottom: 7px;
		font-size: 1em;
		line-height: 130%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-input {
		width: 500px;
	}
	
	.ww-input-number {
		width: 80px;
	}
	
	.ww-input-box {
		width: 500px;
		height: 80px;
	}

	.ww-input-reply {
		width: 500px;
		height: 50px;
	}

	.ww-message-list {
		list-style-type: none; 
		max-height: 250px;
		overflow-y: auto;
		padding: 0; 
		margin: 0;
			
			li {
				line-height: 1.25em;
				font-size: 1.01em;
				margin-bottom: 8px;
				color: blue;
			}
				
			li b {
				font-size: 0.9em;
				color: #999;
			}
				
			li i {
				font-size: 0.9em;
				color: #999;
			}
	}

	.ww-host-container {
		width: 100%;

		.ww-host-entry {
			margin: 0;
			padding: 0;
			width: auto;
			height: auto;
		}
	}
}

.calls-portlet-bingo {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		border: none;
			
		h2 {
			font-size: 22px;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-entry-text {
		text-align: left;
		margin-bottom: 7px;
		font-size: 1em;
		line-height: 130%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-input {
		width: 500px;
	}
	
	.ww-input-number {
		width: 80px;
	}
	
	.ww-input-box {
		width: 500px;
		height: 80px;
	}

	.ww-input-reply {
		width: 500px;
		height: 50px;
	}

	.ww-message-list {
		list-style-type: none; 
		max-height: 250px;
		overflow-y: auto;
		padding: 0; 
		margin: 0;
			
			li {
				line-height: 1.25em;
				font-size: 1.01em;
				margin-bottom: 8px;
				color: blue;
			}
				
			li b {
				font-size: 0.9em;
				color: #999;
			}
				
			li i {
				font-size: 0.9em;
				color: #999;
			}
	}

	.ww-host-container {
		width: 100%;

		.ww-host-entry {
			margin: 0;
			padding: 0;
			width: auto;
			height: auto;
		}
	}
	
	.ww-call-info::-webkit-scrollbar {	
		width: 10px !important;
		height:10px !important;
	}

	.ww-call-info::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
	}

	.ww-call-info::-webkit-scrollbar-thumb {
		background: #f0f0f0 !important; 
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 
	}
 
	.ww-call-info::-webkit-scrollbar-thumb:window-inactive {
		background: #f0f0f0 !important; 
	}
}

.calls-portlet-monitor {

	.ww-portlet {
		padding: 8px;
		margin-bottom: 5px;
		border: none;
		background: #fcfcfc;
		-webkit-border-radius: $radius-a;
		-moz-border-radius: $radius-a;
		border-radius: $radius-a;
		-webkit-box-shadow: $shadow-a;
		-moz-box-shadow: $shadow-a;
		box-shadow: $shadow-a;
			
		h2 {
			font-size: 22px;
			font-weight: bold;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-entry-text {
		text-align: left;
		margin-bottom: 7px;
		font-size: 1em;
		line-height: 130%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-input {
		width: 500px;
	}
	
	.ww-input-number {
		width: 80px;
	}
	
	.ww-input-box {
		width: 500px;
		height: 80px;
	}

	.ww-input-reply {
		width: 500px;
		height: 50px;
	}

	.call-dialog {
		font-size: 13px;
	}

	.call-dialog .comment-form {
		height: 50px;
		margin-bottom: .5em;
		width: 400px;
	}

	.call-dialog .comment-wrapper {
		margin-bottom: 1em;
	}

	.call-dialog .edit-notice {
		font-style: italic;
		margin-right: 2px;
		padding: 0 2px;
	}

	.call-dialog .comment-info {
		color: #777;
	}

	.call-dialog .comment-info span {
		margin-right: .5em;
	}

	.call-dialog .yui3-aui-layout {
		margin-bottom: 1em;
	}

	.call-dialog .call-action {
		background: #EEE;
		border-top: 1px solid #BFBFBF;
		padding: .5em;
		margin: 1em 0;
	}

	.call-dialog .call-action-spacer {
		border-left: 1px solid #BFBFBF;
		margin-left: .5em;
		padding-left: .5em;
	}

	.call-dialog .call-action-right {
		float: right;
	}
}

.calls-portlet-photo {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		width: 640px;
		height:480px;
		overflow: hidden;
	}
}

.calls-portlet-recording {
	
	.ww-portlet {
		padding: 0;
		margin: 0;
		margin-top: -15px;
		width: 640px;
		height:480px;
		overflow: hidden;
	}
}

@include respond-to(phone, tablet) {

	.calls-portlet-group {
		.ww-input {
			width:275px;
		}
	
		.ww-input-box {
			width:275px;
			height:80px;
		}

		.ww-input-reply {
			width:275px;
			height:40px;
		}
	}

	.calls-portlet-webinar {
		.ww-input {
			width:275px;
		}
	
		.ww-input-box {
			width:275px;
			height:80px;
		}

		.ww-input-reply {
			width:275px;
			height:40px;
		}
	}

	.calls-portlet-bingo {
		.ww-input {
			width:275px;
		}
	
		.ww-input-box {
			width:275px;
			height:80px;
		}

		.ww-input-reply {
			width:275px;
			height:40px;
		}
	}

	.calls-portlet-monitor {
		.ww-input {
			width:275px;
		}
	
		.ww-input-box {
			width:275px;
			height:80px;
		}

		.ww-input-reply {
			width:275px;
			height:40px;
		}
	}
}