/* VIDEO TOOL DIAGRAM
/*****************************************/


/* basic
/******************************************/

#videotool-wrapper {
	background:#f9f9f9;
	padding:10px 0 0;
	margin:20px 0;
	border:1px solid #ddd;
	position:relative;
    overflow: auto;
	}
	#videotool-wrapper .diagram {
		background-color: #F5F5F5;
		border: 1px solid #DDDDDD;
		border-radius: 4px 0 4px 0;
		color: #696C72;
		font-size: 12px;
		font-weight: bold;
		left: -1px;
		padding: 3px 7px;
		position: absolute;
		top: -1px;
	}

#videotool-wrapper .label,
#videotool-wrapper .value {
	background:none;
	display:block;
	color:#000;
	text-align:center;
	}
	#videotool-wrapper .label {
		background:#fafafa;
		font-size:0.875em;
		font-weight:normal;
		text-shadow:none;
		padding:3px 0;
	}
	#videotool-wrapper .value {
        font-size: 0.875em;
  		width: 100%;
		border:1px solid #dfa942;
		padding: .125em;
		background:#f8ebc0;
		-webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		-ms-box-sizing: border-box;
  		box-sizing: border-box;
		}
#videotool-wrapper .value em {}

#videotool-wrapper .h-total,
#videotool-wrapper .h-blank,
#videotool-wrapper .h-active,

#videotool-wrapper .v-total,
#videotool-wrapper .v-blank,
#videotool-wrapper .v-active {
	width:60px;
	}
#videotool-wrapper .data-rate,
#videotool-wrapper .total-pixels  {
	width:90px;
	}

/* layout
/******************************************/
.nav-tabs > li > a {
	font-size:18px !important;
	background-color:#efefef;
	border-color:#eee #eee #ddd;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.nav-tabs > li > a:hover {
	background-color:#f5f5f5;
}
.videotool-controls {
	background:#fff;
	padding:10px;
	border: 1px solid #dfdfdf;
	border-width:0 1px 1px 1px;
	margin-bottom:20px;
}

/*.videotool-controls label {	margin:0 10px; }*/

/* using flexbox now */
/*#basic .videotool-controls select {width:169px !important;}
#advance .videotool-controls select {width:130px !important;}*/

.videotool-controls .btn {margin:0 10px;}

.videotool-category {
	display:table-cell;
	height:35px;
	vertical-align:middle;
	color: #333333;
	font-size: 13px;
	text-shadow: 0 1px 0 #FFFFFF;
	line-height:1.2;
	padding-bottom:5px;
	font-weight:bold;
	}
.videotool-category span {
	font-weight:normal;
}

    .videotool-category.is-disabled {
    color: #747373;
}


.videotool-container {
	/*width:100%;*/
	/*overflow:hidden;*/
	position:relative;
	padding-bottom:20px;
	}

.videotool-container .columns {
	float:left;
	position:relative;
	margin-top:10px;
	}


/* result non-table */
#video-result hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid #2b4767;
  border-bottom: 1px solid #5c85b2;
}


#video-result .param {
	color:#d6e6f8;
	position:relative;
	padding:10px 5px 0 5px;
	}

	#video-result .param [class*="span"] {
	  min-height: 20px;
	  text-align:center;
	}

	#video-result .param em {
		color:#fff;
		padding-left:5px;
	}

#video-result .param-value {
	margin: 10px auto;
	overflow:hidden;
}





#video-result {
width:100%;
background:#365b85;
margin-top:30px;
position:relative;
overflow:hidden;
border:1px solid #27476a;
	}
	#video-result .data-param {
		background-color: #32547c;
		border: 1px solid #27476a;
		border-radius: 4px 0 4px 0;
		color: #9ac5e5;
		font-size: 12px;
		font-weight: bold;
		display:block;
		padding:3px 7px;
	}
	#video-result .data-results {
		background-color: #32547c;
		border: 1px solid #27476a;
		border-radius: 4px 0 4px 0;
		color: #9ac5e5;
		font-size: 12px;
		font-weight: bold;
		padding:3px 7px;
		margin:10px 0 7px 0;
		display:block;
	}

#video-result ul {
	border:1px solid #2c4a6c;
	overflow:hidden;
	background:#45668C;
	padding:5px;
	margin:5px 5px 20px 5px;

}

#video-result li {
width:100%;
float:left;
padding:3px 0;
border-bottom:1px solid #2f4862;
border-top:1px solid #6e95bf;
}

#video-result li:first-child {
	border-top:none;
}

#video-result li:last-child {
	border-bottom:none;
}

/* for ie8 */
#video-result li.last {
	border-bottom:none;
}


#video-result li span{
float:right;
color:#a2ecfc;
font-weight:bold;
text-align:left;
width:50%;
}
	#video-result li small {
		color:#f6ffff;
		font-size:11px;
	}



#video-result li span:before {
content: "=";
padding:0 10px;
color:#fff;
}

#video-result li em{
color:#fff;
font-weight:bold;
font-style:normal;
width:50%;
}



/* column 1
/******************************************/

/* H-blank */
.block-h-blank {
	width:245px;
	height:172px;
	background:url(img/videotools/vt-bg-hblank.png) bottom right no-repeat;
	position:relative;
	}
	.block-h-blank .h-blank {
		display:block;
		text-align:center;
		position:absolute;
		top:100px;
		right:3px;
		}

/* v-total - v-active : dynamic height */
.v-total-active-container {
	width:245px;
	overflow:hidden;
	background:url(img/videotools/vt-bg-vtotalactive-top.png) top right no-repeat;
	}

.v-total-active-content {
	width:245px;
	height:149px; /* height of image - 20px = this height  set by jquery */
	margin-top:10px;
	padding-bottom:10px;
	background:url(img/videotools/vt-bg-vtotalactive-bottom.png) bottom right no-repeat;
	}
	.v-total-active-content .contents {
		width:100%;
		overflow:hidden;
		}
		.v-total-active-content .contents .left,
		.v-total-active-content .contents .right {float:left;}
		.v-total-active-content .contents .left {width:50%;}
			.v-total-active-content .contents .left .v-total {
				display:block;
				text-align:center;
				margin:0 auto 0 5%;
				padding-top:40%;
				}
		.v-total-active-content .contents .right {width:50%;}
			.v-total-active-content .contents .right .v-active {
				display:block;
				text-align:center;
				margin:0 auto 0 0px;
				padding-top:40%;
				}

/* v-blank */
.block-v-blank {
	float:left;
	width:245px;
	height:117px;
	background:url(img/videotools/vt-bg-vblank.png) top right no-repeat;
	position:relative;
	}
	.block-v-blank .v-blank {
				display:block;
				text-align:center;
				margin:0 auto 0 118px;
				padding-top:11px;
				}





/* column 2
/******************************************/

/* H total and V active | dynamic width content */
.h-total-active-container {
	height:172px;
	overflow:hidden;
	text-align:center;
	margin:0 auto;
	background:url(img/videotools/vt-bg-htotalactive-left.png) left bottom no-repeat;
	}

.h-total-active-content {
	height:172px;
	margin-left:10px;
	padding-right:10px;
	background:url(img/videotools/vt-bg-htotalactive-right.png) bottom right no-repeat;
	position:relative;
	}
	.h-total-active-content .h-total {
		display:block;
		text-align:center;
		margin:0 auto;
		}
	.h-total-active-content .h-active {
		display:block;
		text-align:center;
		margin:0 auto;
		padding-top:51px;
		}

/* aspect ratio image */
.aspect-ratio {clear:both;}
.aspect-ratio img {
	background:#f9f9f9;
	display:block;
	}

/* aspect ratio information */
.info-aspect-ratio {
	height:117px;
	overflow:hidden;
	background:url(img/videotools/vt-bg-line-hor.png) top left repeat-x;
	}
	.info-aspect-ratio span {
		display:block;
		margin:10px auto;
		width:100px;
		text-align:center;
		}
		.info-aspect-ratio span em {color:#900;}



/* column 3
/******************************************/

/* top right corner image */
.videotool-tr {
	width:117px;
	height:172px;
	background:url(img/videotools/vt-bg-tr.png) bottom left no-repeat;
	position:relative;
	}

/* right middle image */
.image-right-block {
	width:117px;
	height:169px; /* height of image set in jquery */
	background:url(img/videotools/vt-bg-line-vert.png) left top repeat-y;
	position:relative;
	}

/* lower right corner image */
.videotool-lrc {
	float:left;
	width:117px;
	height:117px;
	background:url(img/videotools/vt-bg-lrc.png) top left no-repeat;
	position:relative;
	}


/* column 4
/******************************************/
.data-rate .label em,
.total-pixels .label em {
	color:#666;
	font-style:normal;
	font-size:12px;
	padding:2px 0;
}

.data-rate {
	display:block;
	position:absolute;
	left:-85px;
	top:126px;
	}
.total-pixels {
	display:block;
	position:absolute;
	left:-85px;
	top:250px;
	}




/* form element
/******************************/


******************/

label,
button,
textarea {
  font-size: 12px;
  font-weight: normal;
  line-height: 22px;
}

input,
button,
select,
textarea {
/*  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}

.calculator_div select {
	width:215px;
}



label {
  display: block;
  margin-bottom: 5px;
}

label.field-title {padding-right:15px;}

label.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}



select[multiple],
select[size] {
  height: auto;
}




select[disabled],
select[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee;
  color:rgba(0,0,0,.4);
}


select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

select:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}

.form-inline select {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  font-size: 16px;
}


.form-inline label {
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}



/**********************************************
09.  $Buttons
***********************************************/

.btn-warning:not(.disabled):not([disabled]) {
    color: #fff !important;
    font-weight: 500;
}



.btn-warning.disabled,
.btn-warning[disabled] {
  display: inline-block;

/*
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
*/
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  -pie-background: linear-gradient(#ffffff, #e6e6e6); /*PIE*/
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;

  /*
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  */
  /* round efx for IE */
  position:relative;
   behavior:none;
}
.btn-warning:active,
.btn-warning.active {
  background-color: #c67605 \9;
}


.btn-primary.disabled,
.btn-primary[disabled] {
  cursor: default;
/*  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;*/
}



.btn-print {
  display: inline-block;
  *display: inline;
   /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  -pie-background: linear-gradient(#ffffff, #e6e6e6); /*PIE*/
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;

  /*
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  */

}


.gbps {
	font-size:30px;
	color:#858585;
	text-align:center;
}
.gbps span {
	color:#000;
}

.tab-content {
	overflow:hidden;
}

.nomarginright {
	margin-right:0 !important;
}

.border-top {
	border-top:1px solid #000;
}

.border-bottom {
	border-bottom:1px solid #000;
	margin-bottom:5px;
	padding-bottom:5px;
}

.videotool-controls .custom-select,
.videotool-controls .custom-select:disabled {
	width: 100%;
}