@charset "utf-8";
@font-face {
  font-family: 'helvetica_neue_lt_std86HvIt';
    src: url('../fonts/helveticaneueltstd-hvit-webfont.eot');
    src: url('../fonts/helveticaneueltstd-hvit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-hvit-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltstd-hvit-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-hvit-webfont.svg#helvetica_neue_lt_std86HvIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'helvetica_neue_lt_std65Md';
    src: url('../fonts/helveticaneueltstd-md-webfont.eot');
    src: url('../fonts/helveticaneueltstd-md-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-md-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltstd-md-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-md-webfont.svg#helvetica_neue_lt_std65Md') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'helvetica_neue_lt_std45_light';
    src: url('../fonts/helveticaneueltstd-lt-webfont.eot');
    src: url('../fonts/helveticaneueltstd-lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-lt-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltstd-lt-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-lt-webfont.svg#helvetica_neue_lt_std45_light') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
	/* Don't allow selecting anything so e.g. button text can't be highlighted (exception for input elements is NOT below) */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
}
html {
  width: 100%;
  overflow: auto;
}
body {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
  font-size: 62.5%;
	background: url(/images/dialer/striped_background_beveled.png) repeat;
  background-color: #cfcfcf;
  background-repeat: repeat-y;
  background-size: 100% 3px;
  font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Arial, sans-serif;
}
.content{
	height:381px;
	border-bottom:1px solid black;
}
.topSpacer{
	padding: 3px 6px;
  background: url(/images/dialer/header_background.png) repeat-x 0px 0px;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-color: rgb(128, 128, 128);
  min-height: 28px;
}
.fader{
	width: 7.4em;
	float: left;
	margin: 0 .18em;
}
.id{
	text-align: center;
  font-weight: bold;
  font-size: 1.6em;
  margin: .1em 0;
}
.volReadout, .mute, .label {
	margin: 0 auto;
  width: 90%;
  display: block;
  text-align: center;
  font-size: 1.5em;
  border: .1em solid rgb(100, 100, 100);
  color: rgb(192, 230, 230);
  background: linear-gradient(rgb(24, 29, 39), rgb(29, 38, 57), rgb(51, 63, 91));
	background: -moz-linear-gradient(rgb(24, 29, 39), rgb(29, 38, 57), rgb(51, 63, 91));
	background: -webkit-linear-gradient(rgb(24, 29, 39), rgb(29, 38, 57), rgb(51, 63, 91));
  border-radius: .3em;
  padding: .18em 0;
}
.mute{
	background: linear-gradient(rgb(76, 42, 42), rgb(100, 55, 55), rgb(129, 89, 89));
	background: -moz-linear-gradient(rgb(76, 42, 42), rgb(100, 55, 55), rgb(129, 89, 89));
	background: -webkit-linear-gradient(rgb(76, 42, 42), rgb(100, 55, 55), rgb(129, 89, 89));
	border-radius: .4em;
	color: rgb(225, 225, 225);
	border: .2em outset buttonface;
	margin-bottom: .25em;
	padding: 0;
}
.mute.lit{
	background: radial-gradient(#DCBDBD, #FD8888, #BC8080, rgb(129, 89, 89), rgb(100, 55, 55), rgb(76, 42, 42));
	background: -moz-radial-gradient(#DCBDBD, #FD8888, #BC8080, rgb(129, 89, 89), rgb(100, 55, 55), rgb(76, 42, 42));
	background: -webkit-radial-gradient(#DCBDBD, #FD8888, #BC8080, rgb(129, 89, 89), rgb(100, 55, 55), rgb(76, 42, 42));
	color: rgb(255, 255, 255);
	border: .2em inset buttonface;
}
.volume{
	position: relative;
	z-index: 1;
	height: 22em;
	width: .3em;
	background-color: black;
	margin: 0 auto;
}
.spacer{
	width: .3em;
	height: 34em;
	background-color: rgba(70, 85, 170, 0.15);
	float: left;
	margin: 1.5em 0;
	border-radius: 50%;
}
.value{
	cursor:default;
}
.overflow, .underflow{
	margin: 0 auto;
  width: .3em;
  background-color: black;
  height: 1.4em;
  z-index: 1;
}
.overflow{
	border-top-left-radius: 35%;
  border-top-right-radius: 35%;
	margin-top: 1.1em;
}
.underflow{
	border-bottom-left-radius: 35%;
	border-bottom-right-radius: 35%;
	margin-bottom: 1.2em;
}
.grabber{
	cursor:grab;
	cursor:-webkit-grab;
	cursor:-moz-grab;
	background: linear-gradient(rgb(158, 158, 158),rgb(210, 210, 210), rgb(100, 100, 100), rgb(75, 75, 75),rgb(191, 191, 191),rgb(205, 205, 205),rgb(80, 80, 80));
	background: -moz-linear-gradient(rgb(158, 158, 158),rgb(210, 210, 210), rgb(100, 100, 100), rgb(75, 75, 75),rgb(191, 191, 191),rgb(205, 205, 205),rgb(80, 80, 80));
	background: -webkit-linear-gradient(rgb(158, 158, 158),rgb(210, 210, 210), rgb(100, 100, 100), rgb(75, 75, 75),rgb(191, 191, 191),rgb(205, 205, 205),rgb(80, 80, 80));
	border: .1em solid #767676;
	border-radius: .3em;
	height: 4.5em;
	width: 2.65em;
	left: -1.3em;
	bottom: -2.4em;
	position: absolute;
	z-index: 2;
	box-shadow: .1em .4em .8em #3C3C3C;
	transition-property: background, border, box-shadow;
	-webkit-transition-property: background, border, box-shadow;
	-moz-transition-property: background, border, box-shadow;
  transition-duration: .5s, 8s, .5s;
	-webkit-transition-duration: .5s, 8s, .5s;
	-moz-transition-duration: .5s, 8s, .5s;
}
.slider.is-pointer-down .grabber{
	cursor:grabbing;
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing;
	background: linear-gradient(rgb(141, 141, 141),rgb(189, 189, 189), rgb(81, 81, 81), rgb(54, 54, 54),rgb(171, 171, 171),rgb(181, 181, 181),rgb(63, 63, 63));
	background: -moz-linear-gradient(rgb(141, 141, 141),rgb(189, 189, 189), rgb(81, 81, 81), rgb(54, 54, 54),rgb(171, 171, 171),rgb(181, 181, 181),rgb(63, 63, 63));
	background: -webkit-linear-gradient(rgb(141, 141, 141),rgb(189, 189, 189), rgb(81, 81, 81), rgb(54, 54, 54),rgb(171, 171, 171),rgb(181, 181, 181),rgb(63, 63, 63));
	box-shadow: .2em .8em 1em #2F2F2F;
	transition-property: background, border, box-shadow;
	-webkit-transition-property: background, border, box-shadow;
	-moz-transition-property: background, border, box-shadow;
  transition-duration: .5s, 1s, .5s;
	-webkit-transition-duration: .5s, 1s, .5s;
	-moz-transition-duration: .5s, 1s, .5s;
}
.slider.is-dragging .grabber{
	border: .1em solid #a44a4a;
	transition-property: border;
	-webkit-transition-property: border;
	-moz-transition-property: border;
  transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
}
.tick, .tick-long{
	display: inline-block;
  background: black;
  height: .2em;
  position: absolute;
	z-index:-1;
}
.tick{
	width: 1.35em;
}
.tick-long{
	width: 1.7em;
}
.slider-left-mark{
	left: -1.45em;
}
.slider-right-mark{
	right: -1.45em;
}
.slider-left-mark.tick-long{
	left: -1.8em;
}
.slider-right-mark.tick-long{
	right: -1.8em;
}
.tickNotation {
	position: relative;
  top: -.35em;
  font-weight: bold;
	font-size: .85em;
  color: #464646;
}
.slider-left-mark .tickNotation {
	right: 2em;
  float: right;
}
.slider-right-mark .tickNotation {
	left: 2em;
  float: left;
}