/*
body {
font: 12px Arial;
margin: 0;
/* background-color: #555;
background-color: #EEF3FA
}
img {
border: 0;
}
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
#jsSWFDiv, #phoneDiv, #loginDiv, #incomingDiv, #infoDiv, #connectingDiv, #settingsDiv {
position: absolute;
}
*/
/* -------- Background ------- */
/*
#settingsDiv, #loginDiv, #infoDiv, #connectingDiv, .login_link, #transferDiv, #incomingDiv, #newChat {
background: #fff;
}
*/
.call, .hangup {
border-radius: 12px;
color: white;
bottom: 7px;
left: 92px;
width: 134px;
}
.call {
background: -webkit-gradient(linear, left top, left bottom, from(#3b3), to(#0a0));
background: -moz-linear-gradient(top, #3b3, #0a0);
background: -o-linear-gradient(top, #3b3, #0a0);
/*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#33bb33', endColorstr='#00aa00');*/
-pie-background: linear-gradient(#33bb33, #00aa00);
box-shadow: 0px 1px 0px #666, inset 0px 1px 0px #0f0;                                          
color: #004400;
text-shadow: 0px 1px 0px #0d0;
}
.hangup {
background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#c00)) !important;
background: -moz-linear-gradient(top, #f33, #c00) !important;
background: -o-linear-gradient(top, #f33, #c00) !important;
/*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff3333', endColorstr='#cc0000');*/
-pie-background: linear-gradient(#ff3333, #cc0000) !important;
box-shadow: 0px 1px 0px #666, inset 0px 1px 0px #f66 !important;
color: #600;
text-shadow: 0px 1px 0 #f33;
}
.disabled {
opacity: 0.5;
}
#micButton {
left: 6px;
background-image: url('../assets/c2c_mic.png');
-pie-background: url(assets/c2c_mic.png) no-repeat center, linear-gradient(#555555, #444444);
background-position-x: 50%;
}
#cameraButton {
right: 49px;
  background-image: url('../assets/c2c_camera.png');
  -pie-background: url(assets/c2c_camera.png) no-repeat center, linear-gradient(#555555, #444444);
}
#soundButton {
left: 49px;
  background-image: url('../assets/c2c_speaker.png');
  -pie-background: url(assets/c2c_speaker.png) no-repeat center, linear-gradient(#555555, #444444);
}
#dialpadButton {
right: 6px;
  background-image: url('../assets/c2c_dialpad.png');
  -pie-background: url(assets/c2c_dialpad.png) no-repeat center, linear-gradient(#555555, #444444);
}
#hangupButton {
}
#callMeButton1, #callMeButton2, #callMeButton3 {
  top: 340px;
  left: 75px;
  width: 180px;
}
#callMeButton2 {
  top: 380px;
}
#callMeButton3 {
  top: 420px;
} 
#aboutCallMe {
font: 14px Courier;
color: #eee;
position: absolute;
top: 460px;
left: 13px;
width: 326px;
}
#c2c-test {
width: 200px;
height: 200px;
}
/* ---------- Dialpad ---------- */
.dialButtonLine {
float: left;
height: 30px;
}
/* ----------------------------- */
/* ----------- Slider -------------- */
#micSlider, #speakerSlider {
position: absolute;
top: -90px;
display: none;
}
#micBack, #speakerBack {
/* TODO replace sliders within sliderbackground*/
position: absolute;
bottom: 38px;
width: 27px;
height: 102px;
background: #555;
box-shadow: inset 0px 1px 0px #777, 0px 2px 10px #222;
display: none;
border-radius: 4px;
border: 1px solid #111;
behavior: url(assets/pie/PIE.htc);
}
#micBack {
left: 11px;
}
#speakerBack {
left: 54px;
}
#micSlider {
left: 21px;
}
#speakerSlider {
left: 64px;
}
/* --------------- Flash ---------------- */
#flash {
overflow: hidden;
position: absolute;
}
#jsSWFDiv {
height: 138px;
position: absolute;
top: 0px;
right: 0px;
}
.security {
    position: absolute;
    top: 50px;
    left: 2px;
    overflow: hidden;
    width: 225px;
    height: 150px;
    visibility: visible;
    background-color: white;
}

#video{
width: 100%; /*215px;*/
height: 100%; /*170px;*/ 
}
.init {
width: 1px;
height: 1px;
visibility: hidden;
}
/* screen for showing both videos - my and interlocutor */
.video {
width: 320px;
height: 240px;
background: #666;
position: absolute;
top: 0;
right: 0;
}
/* screen only for my video */
.videoMy {
position: absolute;
width: 80px;
height: 60px;
top: 0px;
right: 0px;
/*background: #666;*/
/*box-shadow: 0px 0px 5px #111;*/
border: 1px solid #222;
}
.sendVideoButton {
width: 30px;
height: 30px;
position: absolute;
top: 17px;
left: 265px;
opacity: 0.7;
display: none;
}
.sendVideoButtonPressed {
width: 20px;
height: 20px;
top: 22px;
left: 270px;
}
.sendVideoButton img {
width: 100%;
height: 100%;
}
/* ------------- Request ------------ 
.request {
position: absolute;
font: 20px Arial;
color: #fff;
text-shadow: 0 1px black;
top: 20px;
left: 20px;
width: 280px;
height: 180px;
text-align: center;
padding-top: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#555));
background: -moz-linear-gradient(top, #666, #555);
background: -o-linear-gradient(top, #666, #555);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#555555');
box-shadow: 0px 0px 10px #222, inset 0px 1px 0px #777;
border-radius: 4px;
display: none;
border: 1px solid #000;
}
*/
/* ------------- Connecting ----------- */
#connectingDiv {
position: absolute;
top: 125px;
width: 320px;
font: 30px Arial;
color: #777;
text-align: center;
text-shadow: 0 1px black;
}
#connectingText {
}
/* -------------------------------------- */

#connectingDiv, #infoDiv {
border-width: 5px\0/;
  /*only for ie8*/
}
/* ---------- Shadow ---------- 
#settingsDiv, #infoDiv {
box-shadow: 0 0 10px black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}*/
/* ----------------------------- */
textarea, text, input {
outline: none;
-moz-appearance: none;
}
input::-webkit-input-placeholder {
color: #ccc;
font: 14px Arial;
}
#calleeText {
padding-left: 1px;
}
/*
#jsSWFDiv {
height: 138px;
}
*/
#phoneDiv {
left: 30px;
height: 240px;
width: 147px;
padding: 10px;
position: relative;
}
#versionOfProduct {
position: absolute;
top: 2px;
left: 4px;
/*font: 20px Arial;*/
color: #111;
text-shadow: #777 0px 1px;
}
/* ---------------- Buttons ---------------- 
.closeButton {
background: url(../assets/close.png);
right: 3px;
opacity: 0.7;
position: absolute;
top: 3px;
width: 14px;
height: 14px;
}*/
/*.iconButton {
width: 16px;
height: 16px;
float: left;
/*  -moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}

.closeButton {
background: url(../assets/close.png);
right: 3px;
}*/
/* ----------------------------------------- */
/* ------------- ��������� �������� ------------ 
.bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #ddd;
cursor: move;
font: 12px Arial;
font-weight: bolder;
color: #999;
text-shadow: #fff 0px 1px;
line-height: 20px;
text-align: left;
}*/
/* ------------- Settings ------------ */
#camSelector{
  top: 54px;
  left: 45px;
  width: 170px;
}
#settingsMicImage{
  top: 22px;
  left: 14px;
}

#settingsCamImage{
  top: 58px;
  left: 15px;
}
/* ------------------ Info ------------
#infoDiv {
top: 120px;
left: 10px;
height: 30px;
width: 200px;
padding: 10px;
float: left;
visibility: hidden;
font: 16px Arial;
color: #aaa;
text-align: center;
line-height: 30px;
-moz-opacity: 0.95;
/* Mozilla 1.6 */
-khtml-opacity: 0.95;
/* Konqueror 3.1, Safari 1.1 */
opacity: 0.95;
/* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}*/
#infoText {
}
/* ------------ Flash div -------------- */
.closed {
width: 1px !important;
height: 1px !important;
visibility: hidden;
}
#requestUnmuteText {
position: absolute;
text-align: center;
width: 100%;
font-weight: bolder;
}
#closeButton_video_requestUnmuteDiv {
background: url(../assets/close.png);
right: 3px;
opacity: 0.7;
position: absolute;
top: 3px;
width: 14px;
height: 14px;
}
/* --------- Console ------------*/
#console {
visibility:hidden;
position: absolute;
top: 10px;
left: 340px;
height: 420px;
width: 270px;
float: left;
background-color: #555;
font: 14px Courier;
color: #eee;
padding: 10px;
overflow: auto;
word-wrap: break-word;
line-height: 18px;
}
/* --------- Timer ------------
#timer {
position: absolute;
top: 170px;
left: 135px;
text-shadow: 0 1px black;
color: #999;
display: none;
}
/* ---------- Z indexes -----------*/
#versionOfProduct {
z-index: 4;
}
.video, .videoMy {
z-index: 5;
}
/*#buttonsBack {
z-index: 6;
}
*/
#micBack, #speakerBack {
z-index: 6;
}
.button, #buttonsPanel {
z-index: 7;
}
#micSlider, #speakerSlider, #dialPad {
z-index: 8;
margin-left:8px;
}
.sendVideoButton, #sendVideoButtonImage {
z-index: 9;
}
.request {
z-index: 10;
}
.security {
z-index: 11;
}
.flash {
}
grey {
color: #888;
}