/*
******************************************************************************
*
*	CSS File for the Vicidial WebRTC Phone
*
*	Copyright (C) 2016  Michael Cargile
*
*	This program is free software: you can redistribute it and/or modify
*	it under the terms of the GNU Affero General Public License as
*	published by the Free Software Foundation, either version 3 of the
*	License, or (at your option) any later version.
*
*	This program is distributed in the hope that it will be useful,
*	but WITHOUT ANY WARRANTY; without even the implied warranty of
*	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*	GNU Affero General Public License for more details.
*
*	You should have received a copy of the GNU Affero General Public License
*	along with this program.  If not, see <http://www.gnu.org/licenses/>.
* 
******************************************************************************
*/



#container {
	width: 424px;
	height: 230px;
}

#main {
	width: 408px;
	height: 228px;
	position: relative;
	top: 2px;
	left: 2px;
	background-color: #282828;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#logo {
	width: 250px;
	height: 59px;
	background-color: #808080;
	position: absolute;
	top: 6px;
	left: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #041830;
}

#logo_img {
	width: 232px;
        height: 42px;
        position: absolute;
        left: 8px;
        top: 8px;
        background-color: #E0E0E0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: 1px solid #041830;
}

#controls {
	width: 249px;
	height: 147px;
	background-color: #808080;
	position: absolute;
	top: 73px;
	left: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	border: 1px solid #041830;
}

#registration_control {
	width: 232px;
	height: 39px;
	position: absolute;
	left: 8px;
	top: 8px;
	background-color: #4A698E;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #041830;
}

#reg_status {
	margin: 4px 4px 4px 4px;
	width: 134px;
	height: 20px;
	text-align: center;
	position: absolute;
	top: 2px;
	left: 0px;
	border: 1px solid #2a4a6f;
	background: #7691b1;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	color: #e0e0e0;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
}

#register {
	position: absolute;
	left: 148px;
	top: 0px;

}

#unregister {
	position: absolute;
	left: 190px;
	top: 0px;

}

#dial_control {
	width: 232px;
	height: 39px;
	position: absolute;
	left: 8px;
	top: 53px;
	background-color: #4A698E;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #041830;
}

#digits {
	margin: 4px 4px 4px 4px;
	width: 176px;
	height: 25px;
	text-align: center;
	border: 1px solid #2a4a6f;
	background: #f0f0f0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	color: #2a4a6f;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
}

#dial {
	position: absolute;
	left: 190px;
	top: 0px;
}

#audio_control {
	width: 232px;
	height: 39px;
	position: absolute;
	left: 8px;
	top: 99px;
	background-color: #4A698E;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #041830;
}

#mic_mute {
	position: absolute;
        left: 3px;
        top: 0px;
}

#vol_up {
	position: absolute;
        left: 45px;
        top: 0px;
}

#vol_down {
	position: absolute;
        left: 87px;
        top: 0px;
}


#dialpad {
	width: 137px;
	height: 214px;
	background-color: #808080;
	position: absolute;
	top: 6px;
	left: 264px;
	border: 1px solid #041830;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.button {
	margin-top: 4px;
	margin-left: 1px;
	margin-right: 0px;
	min-width: 30px;
	height: 30px;
	border: 1px solid #041830;
	background: #2a4a6f;
	background: -webkit-gradient(linear, left top, left bottom, from(#7691b1), to(#2a4a6f));
	background: -webkit-linear-gradient(top, #7691b1, #2a4a6f);
	background: -moz-linear-gradient(top, #7691b1, #2a4a6f);
	background: -ms-linear-gradient(top, #7691b1, #2a4a6f);
	background: -o-linear-gradient(top, #7691b1, #2a4a6f);
	background-image: -ms-linear-gradient(top, #7691b1 0%, #2a4a6f 100%);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	text-shadow: #122e4f 0 1px 0;
	color: #e0e0e0;
	font-size: 14px;
	font-family: helvetica, serif;
	text-decoration: none;
	vertical-align: middle;
}
.button:hover {
	border: 1px solid #041830;
	text-shadow: #122e4f 0 1px 0;
	background: #2a4b84;
	background: -webkit-gradient(linear, left top, left bottom, from(#7692bc), to(#2a4b84));
	background: -webkit-linear-gradient(top, #7692bc, #2a4b84);
	background: -moz-linear-gradient(top, #7692bc, #2a4b84);
	background: -ms-linear-gradient(top, #7692bc, #2a4b84);
	background: -o-linear-gradient(top, #7692bc, #2a4b84);
	background-image: -ms-linear-gradient(top, #7692bc 0%, #2a4b84 100%);
	color: #fff;
}
.button:active {
	text-shadow: #122e4f 0 1px 0;
	border: 1px solid #041830;
	background: #243f5e;
	background: -webkit-gradient(linear, left top, left bottom, from(#687f99), to(#2a4b84));
	background: -webkit-linear-gradient(top, #687f99, #243f5e);
	background: -moz-linear-gradient(top, #687f99, #243f5e);
	background: -ms-linear-gradient(top, #687f99, #243f5e);
	background: -o-linear-gradient(top, #687f99, #243f5e);
	background-image: -ms-linear-gradient(top, #687f99 0%, #243f5e 100%);
	color: #fff;
}	

.dialpad_button {
	min-width: 38px;
	height: 38px;
	border: 1px solid #041830;
	background: #2a4a6f;
	background: -webkit-gradient(linear, left top, left bottom, from(#7691b1), to(#2a4a6f));
	background: -webkit-linear-gradient(top, #7691b1, #2a4a6f);
	background: -moz-linear-gradient(top, #7691b1, #2a4a6f);
	background: -ms-linear-gradient(top, #7691b1, #2a4a6f);
	background: -o-linear-gradient(top, #7691b1, #2a4a6f);
	background-image: -ms-linear-gradient(top, #7691b1 0%, #2a4a6f 100%);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	text-shadow: #122e4f 0 1px 0;
	color: #e0e0e0;
	font-size: 14px;
	font-family: helvetica, serif;
	text-decoration: none;
	vertical-align: middle;
}
.dialpad_button:hover {
	border: 1px solid #041830;
	text-shadow: #122e4f 0 1px 0;
	background: #2a4b84;
	background: -webkit-gradient(linear, left top, left bottom, from(#7692bc), to(#2a4b84));
	background: -webkit-linear-gradient(top, #7692bc, #2a4b84);
	background: -moz-linear-gradient(top, #7692bc, #2a4b84);
	background: -ms-linear-gradient(top, #7692bc, #2a4b84);
	background: -o-linear-gradient(top, #7692bc, #2a4b84);
	background-image: -ms-linear-gradient(top, #7692bc 0%, #2a4b84 100%);
	color: #fff;
}
.dialpad_button:active {
	text-shadow: #122e4f 0 1px 0;
	border: 1px solid #041830;
	background: #243f5e;
	background: -webkit-gradient(linear, left top, left bottom, from(#687f99), to(#2a4b84));
	background: -webkit-linear-gradient(top, #687f99, #243f5e);
	background: -moz-linear-gradient(top, #687f99, #243f5e);
	background: -ms-linear-gradient(top, #687f99, #243f5e);
	background: -o-linear-gradient(top, #687f99, #243f5e);
	background-image: -ms-linear-gradient(top, #687f99 0%, #243f5e 100%);
	color: #fff;
}

#dial_row1 {
	position: absolute;
	top: 7px;
	left: 7px;
	width: 122px;
}

#one {
	position: absolute;
	top: 0px;
	left: 0px;
}

#two {
        position: absolute;
        top: 0px;
        left: 42px;
}

#three {
        position: absolute;
        top: 0px;
        left: 84px;
}

#dial_row2 {
	position: absolute;
	top: 49px;
	left: 7px;
	width: 122px;
}

#four {
        position: absolute;
        top: 0px;
        left: 0px;
}

#five {
        position: absolute;
        top: 0px;
        left: 42px;
}

#six {
        position: absolute;
        top: 0px;
        left: 84px;
}

#dial_row3 {
	position: absolute;
	top: 91px;
	left: 7px;
	width: 122px;
}

#seven {
        position: absolute;
        top: 0px;
        left: 0px;
}

#eight {
        position: absolute;
        top: 0px;
        left: 42px;
}

#nine {
        position: absolute;
        top: 0px;
        left: 84px;
}

#dial_row4 {
	position: absolute;
	top: 133px;
	left: 7px;
	width: 122px;
}

#star {
        position: absolute;
        top: 0px;
        left: 0px;
}

#zero {
        position: absolute;
        top: 0px;
        left: 42px;
}

#pound {
        position: absolute;
        top: 0px;
        left: 84px;
}

#dial_dtmf {
	position: absolute;
	top: 178px;	
	left: 7px;
}

#dtmf_digits {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 64px;
	height: 25px;
	text-align: center;	
	border: 1px solid #2a4a6f;
	background: #f0f0f0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	color: #2a4a6f;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
}

#send_dtmf {
	position: absolute;
        top: -4px;
        right: -123px;
}