* {
	margin: 0;
	padding: 0;
}

html,body{height:100%;width:100%;}

body {
	overflow: hidden;
	background: url(../img/widget/background.png);
}

body.webrtc {
	background: url(../img/widget/webrtc_bg_tile.png) repeat;
}

div#wrapper {
	margin: 0 auto;
	width: 236px;
	height: 203px;
	overflow: hidden;
}

div#header {
	width: 100%;
	text-align: center;
	font-size: 10px;
	font-family: Helvetica, Arial, sans-serif;
}

div#zingaya_widget {
	width: 100%;
	height: 145px;
	text-align: center;
}

#widget {
	left: 0;
	position: relative;
	margin-top: 5px;
	margin-left: 5px;
	outline: none;
}

#arrow {
	float: left;
	width: 30px;
	height: 40px;
	background: url(../img/widget/allow_tip.png) no-repeat;
	margin-left: 12px;
	margin-top: 2px;
}

#allow_tip {
	float: left;
	color: #fff;
	width: 180px;
	margin-left: 5px;
	margin-top: 2px;
	font-size: 13px;
	text-shadow: #333 0px 1px 1px;
	font-family: 'ProximaNova-Semibold', sans-serif;
}

#status_icon.state1 { background: url(../img/widget/progress.png) no-repeat 0px 0px; }
#status_icon.state2 { background: url(../img/widget/progress.png) no-repeat 0px -26px; }
#status_icon.state3 { background: url(../img/widget/progress.png) no-repeat 0px -52px; }
#status_icon.state4 { background: url(../img/widget/progress.png) no-repeat 0px -78px; }
#status_icon.state5 { background: url(../img/widget/progress.png) no-repeat 0px -104px; }
#status_icon.state6 { background: url(../img/widget/progress.png) no-repeat 0px -130px; }
#status_icon.state7 { background: url(../img/widget/progress.png) no-repeat 0px -156px; }
#status_icon.state8 { background: url(../img/widget/progress.png) no-repeat 0px -182px; }
#status_icon.state9 { background: url(../img/widget/progress.png) no-repeat 0px -208px; }
#status_icon.state10 { background: url(../img/widget/progress.png) no-repeat 0px -234px; }
#status_icon.state11 { background: url(../img/widget/progress.png) no-repeat 0px -260px; }
#status_icon.state12 { background: url(../img/widget/progress.png) no-repeat 0px -286px; }

span.green {
	color: #a2cc66;
}

span.small {
	font-size: 10px;
}

#top_controls {
	width: 100%;
	height: 31px;
	border-bottom: solid 1px #17222e;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

#settings_button, #test_button {
	display: block;
	float: left;
	height: 31px;
	line-height: 31px;
	color: #41679d;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	text-shadow: #fff 0px 1px 1px;
}

#settings_button:hover {
	background-position: 0px -32px;
}

#settings_button.disabled:hover {
	background-position: 0px 0px;
}

#settings_button:active, #settings_button.active {
	background-position: 0px -64px;
}

#settings_button.disabled:active {
	background-position: 0px 0px;
}

#test_button:hover {
	background-position: 0px -32px;
}

#test_button:active, #test_button.active {
	background-position: 0px -64px;
}

#test_button.unavailable:hover, #test_button.unavailable:active {
	background-position: 0px -0px;
}

#main_button_content, #current_status {
	margin: 0 auto;
}

#current_status {
	color: #fff;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 18px;
	width: 200px;
	margin: 0 auto;
	margin-top: 14px;
	margin-bottom: 5px;
	text-shadow: #000 0px 1px 1px;
	height: 26px;
}

#status_icon {
	display: none;
	width: 0px;
	background: none;
}

#status_icon.progress {
	float: left;
	display: block;
	width: 26px;
	height: 26px;
	margin-right: 6px;
	margin-top: -2px;
}

#status_label {
	font-family: 'ProximaNova-Semibold', sans-serif;
}

a.cancel_button, a.call_button, a.disconnect_button {
	display: block;
	width: 200px;
	height: 53px;
	margin: 0 auto;
	color: #fff;
	font-family: 'ProximaNova-Black', sans-serif;
	font-size: 20px;
	letter-spacing: 3px;
	font-weight: bold;
	text-decoration: none;
	line-height: 53px;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

a.cancel_button:hover, a.call_button:hover, a.disconnect_button:hover {
	background-position: 0 -53px;
}

a.cancel_button:active, a.call_button:active, a.disconnect_button:active {
	background-position: 0 -106px;
}

#main_button_label {
	float: left;
}

#volume_controls {
	width: 200px;
	height: 22px;
	margin: 0 auto;
	margin-top: 6px;
	overflow: hidden;
}

#mic_button, #snd_button {
	text-decoration: none;
	float: left;
	display: block;
	width: 22px;
	height: 22px;
}

#snd_button {
	margin-left: 6px; 
	background: url(../img/widget/network_status.png) no-repeat;
}

#mic_button {
	background: url(../img/widget/mic_button.png) no-repeat;
}

#mic_button:hover, #snd_button:hover {
	/*background-position: 0 -22px;*/
}

#mic_button.muted, #snd_button.muted {
	background-position: 0 -44px;
}

#mic_button.muted:hover, #snd_button.muted:hover {
	background-position: 0 -66px;
}

span.slider {
	display: block;
	position: relative;
	width: 0px;
	height: 8px;
	margin-left: 25px;
	margin-top: 7px;
	background: url(../img/widget/volume_level.png) no-repeat;
}

span.slider_body {
	display: none;
	position: relative;
	width: 135px;
	height: 8px;
	margin-left: 25px;
	top: -8px;
}

span.slider.mic {
	margin-left: 24px;
}

#snd_button_span, #mic_button_span {
	display: block;
	position: relative;
	width: 22px;
	height: 22px;
	top: -16px;
}

a.ui-slider-handle {
	outline: none;
	position: relative;
	display: block;
	width: 15px;
	height: 15px;
	top: -3px;
	margin-left: -5px;
	background: url(../img/widget/slider_handle.png) no-repeat;
}

a.ui-slider-handle:hover {
	background-position: 0 -15px;
}

#settings_panel {
	display: none;
	width: 234px;
	height: 180px;
	background: url(../img/widget/settings_bg.png) no-repeat;
}

#test_panel {
	display: none;
	width: 234px;
	height: 180px;
	background: url(../img/widget/test_bg.png) no-repeat;
}

#test_panel a.grey_cancel_button {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

#test_label {
	width: 100%;
	color: #303030;
	text-align: center;
	font-size: 13px;
	font-family: 'ProximaNova-Semibold', sans-serif;
	margin-top: 85px;
}

#settings_panel div.wrapper {
	margin: 10px;
	margin-left: 12px; 
	margin-top: 25px;
}

#settings_panel h3 {
	color: #303030;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

select.record_device {
	display: block;
	width: 210px;
	height: 25px;
	line-height: 25px;
	margin-top: 5px;
	background-color: transparent;
	background: url(../img/widget/record_device.png) no-repeat;
	-webkit-appearance: none;
	border: none;
	padding-left: 5px;
}

@-moz-document url-prefix() {
	select.record_device {
		padding: 3px;
		padding-left: 5px;
	}
}

select.record_device:hover {
	background-position: 0px -25px;
}

#audio_controls {
	margin-top: 15px;
}

div.tooltip {
	color: #303030;
	font-family: Arial, sans-serif;
	font-size: 11px;
	background: #f7f7f7;
	padding: 5px;
	margin-top: 5px;
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	-moz-border-radius: 3px;
	border-radius: 3px;
}

div.tt_left {
	float: left;
	width: 27px;
	height: 37px;
	background: url(../img/widget/tooltip_left.png) no-repeat;
}

#mic_tooltip_content, #snd_tooltip_content {
	display: block;
	margin-top: 12px;
	margin-left: -14px;
	color: #303030;
	font-family: Arial, sans-serif;
	font-size: 11px;
}

div.tt_mid {
	float: left;
	height: 37px;
	background: url(../img/widget/tooltip_mid.png) repeat-x;
}

div.tt_right {
	float: right;
	width: 13px;
	height: 37px;
	background: url(../img/widget/tooltip_right.png) no-repeat;
}

#audio_controls div.line {
	margin-top: 5px;
	clear: both;
	height: 18px;
}

#audio_controls div.line.hidden {
	display: none;
}

#audio_controls label {
	display: block;
	float: left;
	width: 68px;
	text-align: right;
	color: #303030;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#audio_controls span.icon {
	margin-left: 2px;
	display: block;
	width: 16px;
	float: left;
}

#audio_controls span.icon.mic {
	margin-left: 2px;
	height: 15px;
	background: url(../img/widget/settings_icons.png) no-repeat 0px -39px;
}

#audio_controls span.icon.mic_mute {
	display: block;
	height: 15px;
	background: url(../img/widget/settings_icons.png) no-repeat 0px -24px;
}

#audio_controls span.icon.snd {
	margin-left: 4px;
	height: 12px;
	background: url(../img/widget/settings_icons.png) no-repeat 0px -12px;
}

#audio_controls span.icon.snd_mute {
	height: 12px;
	background: url(../img/widget/settings_icons.png) no-repeat 0px 0px;
}

#mic_signal, #mic_level, #snd_level {
	position: relative;
	width: 107px;
	height: 9px;
	background: url(../img/widget/signal.png) no-repeat;
}

#audio_controls a.ui-slider-handle { 
	margin-left: -7px;
	height: 16px;
	background: url(../img/widget/settings_slider_handle.png) no-repeat 0px 0px;
}

#audio_controls a.ui-slider-handle:hover {
	background-position: 0 -16px;
}

#settings_mic_slider, #settings_snd_slider {
	height: 9px;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -9px;
}

#settings_bottom_line {
	margin-top: 20px;
}

#remember_cb {
	color: #303030;
	display: block;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 24px;
}

#remember_cb input {
	margin-right: 5px;
}

div.settings_slider {
	float: left;
	width: 107px;
	height: 9px;
	margin-top: 2px;
	background: url(../img/widget/settings_slider_track.png) no-repeat;
}

div.settings_slider.signal {
	margin-left: 18px;
}

a.ok_button {
	display: block;
	width: 53px;
	height: 24px;
	background: url(../img/widget/ok_button.png) no-repeat;
}

a.ok_button:hover, a.grey_cancel_button:hover {
	background-position: 0 -24px;
}

a.ok_button:active, a.grey_cancel_button:active {
	background-position: 0 -48px;
}

a.ok_button.right {
	float: right;
}

#footer {
	width: 100%;
	height: 32px;
	margin-top: 14px;
	border-top: 1px solid #333b45;
	border-top: 1px solid rgba(50,57,67,0.8);
}

#footer_content {
	width: 100%;
	border-top: 1px solid #4e5866;
	border-top: 1px solid rgba(81,92,106,0.8);
}

#help_button {
	display: block;
	float: left;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 10px;
	color: #c6e0f6;
	padding-left: 17px;
	height: 15px;
	line-height: 15px;
	margin-left: 20px;
	margin-top: 8px;
	text-shadow: #444 0px 1px 1px;
	background: url(../img/widget/help_img.png) no-repeat left;
}

#powered_link {
	float: right;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 10px;
	color: #c6e0f6;
	text-shadow: #444 0px 1px 1px;
	margin-top: 8px;
	margin-right: 20px;
	height: 15px;
	line-height: 15px;
	text-decoration: none;
}

span.underline {
	text-decoration: underline;
}

#alert_panel {
	display: none;
	width: 227px;
}

#alert_msg {
	padding-left: 40px;
	padding-top: 2px;
	padding-bottom: 12px;
	color: #303030;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	border-bottom: solid 1px #d3d3d3;
	background:  url(../img/widget/alert_icon.png) no-repeat;
	min-height: 25px;
	height: 100%;
}

#alert_msg_content {
	display: block;
}

#alert_panel div.top {
	width: 227px;
	height: 13px;
	background:  url(../img/widget/alert_top.png) no-repeat;
}

#alert_panel div.mid {
	width: 227px;
	background: url(../img/widget/alert_mid.png) repeat-y;
}

#alert_panel div.bottom {
	width: 227px;
	height: 13px;
	background:  url(../img/widget/alert_bottom.png) no-repeat;
}

#alert_panel div.content {
	max-width: 187px;
	margin: 0 auto;
	padding-top: 5px;
	padding-bottom: 42px;
}

#alert_panel a.ok_button { 
	position: absolute;
	bottom: 20px;
	right: 20px;
}

div#flash_warning {
	margin-top: 50px;
}

p.flash_notice {
	margin: 0px 5px;
	font-size: 12px;
	color: #fff;
	font-family: 'ProximaNova-Semibold', sans-serif;
}

p.flash_notice img {
	margin-right: 2px;
	display: inline-block;
	vertical-align: middle;
}

p.flash_notice a {
	color: #c6e0f6;
}

div.webrtc span.green {
	color: #ddd32a;
	font-weight: bold;
}

#webrtc_logo {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 66px;
	height: 13px;
	background: url(../img/widget/webrtc_logo.png) no-repeat;
}

#webrtc_perspective {
	display: none;
	width: 100%;
	height: 250px;
	margin: 0 auto;
	margin-top: 120px;
	background: url(../img/widget/perspective.png) repeat-x;
}

#webrtc_laptop {
	display: none;
	width: 300px;
	height: 252px;
	margin: 0 auto;
	margin-top: -360px;
}

#webrtc_laptop #laptop_fill {
	display: none;
	position: absolute;
	margin-top: 2px;
	margin-left: 20px;
	width: 258px;
	height: 240px;
	background: #228ac7;
}

#webrtc_laptop #laptop {
	display: none;
	position: absolute;
	width: 300px;
	height: 252px;
	background: url(../img/widget/laptop.png) no-repeat;
}

#webrtc_mic {
	display:table-cell;
	width: 100%;
	vertical-align: middle;
	background: url(../img/widget/mic.png?18032013) no-repeat center;
}

#webrtc_mic.iframe {
	background: url(../img/widget/mic_iframe.png) no-repeat center;
}

#container {
	display: table;
	width: 100%;
	height: 100%;
}

#infobar-stripe {
	display: none;
	position: absolute;
	width: 100%;
	height: 10px;
	overflow: hidden;
}

.default-theme {
	background-color: #ffa200;
	background-image: -webkit-linear-gradient(#ffa200,#cd8404);
	background-image: linear-gradient(#ffa200,#cd8404);
}

#infobar-stripe div {
	position: absolute;
	left: 0;
	right: -32px;
	height: 10px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjAyMzAyNzI1OTJCMTFFMkEyREZBRkRCQTM3RUU5NjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjAyMzAyNzM1OTJCMTFFMkEyREZBRkRCQTM3RUU5NjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMDIzMDI3MDU5MkIxMUUyQTJERkFGREJBMzdFRTk2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMDIzMDI3MTU5MkIxMUUyQTJERkFGREJBMzdFRTk2NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmRJc98AAAB2SURBVHjaxNTrCoAgDIbhAi+0rqwu002G6UCI6ISHfYLgH3lehjjHGKeGtaW9NNzfnYjA8LRXF0KA4flQE9ANrwnoimsAEcFwDWBmGP53AsNwDfDew/CvCQzH3wJM8KdHaIbfTcAUv35E5vg5AIKXABie1yHAAO5CTtKV6mjIAAAAAElFTkSuQmCC');
	-webkit-animation: stripe-anim .5s infinite linear;
	-moz-animation: stripe-anim .5s infinite linear;
}

@-webkit-keyframes stripe-anim {
	from{
		-webkit-transform:translate(-32px,0)
	}
	to{
		-webkit-transform:none
	}
}

@-moz-keyframes stripe-anim {
	from{
		-moz-transform:translate(-32px,0)
	}
	to{
		-moz-transform:none
	}
}

#allow_tip.webrtc {
	float: none;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 18px;
	position: relative;
	top: -50%;
	margin-top: 120px;
}

#allow_tip.webrtc.iframe {
	font-size: 14px;
	margin-top: 85px;
}

#allow_tip.webrtc.mobile {
	position: absolute;
	top: 20px;
	margin-top: 0;
}

#mic_glow {
	margin: 0 auto;
	width: 198px;
	height: 198px;
	border-radius: 100px;
	box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	-webkit-box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	-webkit-animation: pulse 2.5s infinite linear;
	-moz-animation: pulse 2.5s infinite linear;
}

#mic_glow.iframe {
	width: 148px;
	height: 148px;
	border-radius: 74px;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	}
	50% {
		-webkit-box-shadow: rgba(255,255,255,0.8) 0 0 50px;
	}
	100% {
		-webkit-box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	}
}

@-moz-keyframes pulse {
	0% {
		box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	}
	50% {
		box-shadow: rgba(255,255,255,0.8) 0 0 50px;
	}
	100% {
		box-shadow: rgba(255,255,255,0.8) 0 0 10px;
	}
}