body {
	font-family: Arial;
	font-size: 12px;
}
img { border: 0; }

.bold { font-weight: bold; }

#vertical, #horizontal, #CIH {
    border: 0;
    position: relative;
    background-color: White;
}

.clear {
	clear: both;
}

label {
	float: left;
	width: 75px;
}
td {
	font-size: 11px;
}


/* calculator-specific code ******************************/
.leftArrow {
	font-size: 0px; line-height: 0%; width: 0px;
	border-top: 5px solid #f6f6f6;
	border-right: 10px solid black;
	border-bottom: 5px solid #f6f6f6;
}
.rightArrow {
	font-size: 0px; line-height: 0%; width: 0px;
	border-top: 5px solid #f6f6f6;
	border-left: 10px solid black;
	border-bottom: 5px solid #f6f6f6;
}
.upArrow {
	font-size: 0px; line-height: 0%; width: 0px;
	border-bottom: 10px solid black;
	border-left: 5px solid #f6f6f6;
	border-right: 5px solid #f6f6f6;
}
.downArrow {
	font-size: 0px; line-height: 0%; width: 0px;
	border-top: 10px solid black;
	border-left: 5px solid #f6f6f6;
	border-right: 5px solid #f6f6f6;
	margin-top: -5px;
}
.lineArrow {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100;
	z-index: 1;
}
	ul.lineArrow li { list-style-type: none; }
	ul.lineArrow li hr { margin-top: 5px; }


.topLine, .bottomLine {
	width: 20px;
	margin: 5px 0 5px 0;
}
	.topLine {
		border-bottom: solid 1px black;
		font-size: 0;
		height: 0;
	}
	.bottomLine {
		border-top: solid 1px black;
	}

.rightLeftArrow li {
	float: left;	
}
	.rightLeftArrow li.arrowLine {
		border-top: solid 1px black;
		margin-top: 5px;
	}
	.rightLeftArrow li.arrowLine div {
		padding-left: 40px;
	}
.upDownArrow {
	top: 0;
	left: 350;	
}
	.upDownArrow li.arrowLine {
		border-left: solid 1px black;
		margin-left: 10px;
	}
	.upDownArrow li.arrowLine div {
		position: absolute;
		top: 130;
		left: 0;
		background-color: White;
	}
	.horizontalMasqueradeVerticalMeasurements .upDownArrow li.arrowLine div {
		top: 160;
	}
	
.line {  
	position:absolute; /* doesn't have to be absolute */  
	/*z-index: -1;          places the line behind other elements */  
}  
	.line div {  
		position:absolute;  
		left: 0px; top: 0px;  
		border-left-color: transparent;  
		border-style: solid;  
	}
	
.dottedLine {
	border-top: dotted 1px gray;
	position: absolute;
	top: 0;
	width: 100px;
}

.scale {
	padding: 0;
	margin: 0;
	width: 404px;
}
	.scale li {
		float: left;
		list-style-type: none;
		width: 9.9%;
		font-size: 12px;
	}
	.scale9 li { width: 11%; }


#calculator .border {
	display: block;
	text-decoration: none;
	float: left;
	border: solid 20px black;
	height: 200px;
}

#calculator #vertical {
	/*  2.35:1 aspect ratio (native)  */
	width: 470px;
	height: 200px;
}
	#calculator #leftVertical, #calculator #rightVertical {
		width: 57px;
		height: 200px;
		background-color: black;
	}
	.verticalFrameHeightImg {
		margin-bottom: 70px;
	}

#calculator #horizontal {
	/*  16:9 aspect ratio (native) */
	width: 470px;
	height: 264px;
	/height: 272px;
}
	#calculator #borderHorizontal { height: 264px; }
	#calculator #topHorizontal, #calculator #bottomHorizontal {
		width: 470px;
		height: 32px;
		background-color: black;
		z-index: 1;
	}
	#calculator #topHorizontal { position: relative; margin-bottom: 120px; }
	#calculator #bottomHorizontal { position: absolute; bottom: 0; }

#calculator #CIH {
	/* 2.35:1 aspect ratio (native) */
	width: 470px;
	height: 200px;
}
	#calculator #leftCIH, #calculator #rightCIH {
		width: 102px;
		height: 200px;
		background-color: black;
	}

#calculator .aspectRatioText {
	padding: 5px;
	font-size: 35px;
	color: Gray;
	background-color: White;
	position: absolute;
	top: 40px;
	left: 120px;
	z-index: 50;
}
#calculator #horizontalAspectRatioText {
	top: 50px;
}

.measurement {
	height: 15px;
	border-left: solid 1px black;
	border-right: solid 1px black;
	padding: 5px;
	margin-bottom: 10px;
}
.measurement div {
	position: absolute;
	margin-left: 125px;
	margin-top: -7px;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
}
	.horizontalOutsideWidth div, .verticalOutsideWidth div, cihOutsideWidth div {
		margin-left: 175px;
	}
.verticalMeasurements {
	position: relative;
	left: 540px;
	/left: 20;
	width: 150px;
	z-index: 1;
	margin-top: -1px;
}
	.verticalMeasurements img {
		position: absolute;
		margin-top: 60px;
	}
	.horizontalMasqueradeVerticalMeasurements img {
		margin-top: 100px;
	}
	img.wallspaceImg {
		margin-left: 85px;
		margin-top: 40px;
	}
	.horizontalMasqueradeVerticalMeasurements img.wallspaceImg {
		margin-top: 80px;
	}

.horizontalWallspace {
	width: 520px;
	/width: 530px;
}
.horizontalOutsideWidth {
	width: 500px;
	/width: 510px;
	margin-left: 10px;
}
	.wallspaceGuidelines {
		width:530px;
		border-left: dotted 1px gray;
		border-right: dotted 1px gray;
		position:absolute;
		height:50px;
		margin-top:-43px;
	}

.wallspaceBorder {
	padding: 5px 10px 0 10px;
	background: url('images/stripe_bg.png');
	float: left;
}

.controls {
	width: 800px;
	margin-left: 15px;
	clear: both;
}
	.aspectRatio {
		padding-left: 125px;
		width: 400px;
		z-index: 5;
	}
		#CIHVisualization .aspectRatio {
			padding-left: 100px;
		}
	.lowerControls {
		margin-top: 10px;
	}
		.lowerControls div {
			float: left;
			width: 250px;
			height: 75px;
		}
		.lowerControls div ul {
			margin: 10px 0 0 0;
			padding: 0;	
		}
		.lowerControls div ul li {
			list-style-type: none;
			font-size: 12px;
		}
	.fineControlButton {
		 padding: 0 5px 0 5px;
	}

.logos { 
	position: absolute;
	width: 450px;
	margin: 0 0 0 15px;
	padding: 0;
}
	.logos li { 
		float: left; 
		list-style-type: none;
	}
#bottomLeftDesc {
	width: 310px;
	position: absolute;
	top: 150px;
	left: 100px;
	background-color: #EAE6C9;
	border: solid 1px black;
	padding: 5px;
	font-size: 12px;
	z-index: 99;
}

#bottomRightDesc {
	width: 310px;
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: #EAE6C9;
	border: solid 1px black;
	padding: 5px;
	font-size: 12px;
	z-index: 99;
}



/*  visualization page **********************************************/
#visualizations #vertical {
	/*  2.35:1 aspect ratio (native)  */
	width: 235px;
	height: 100px;
}

#visualizations #horizontal {
	/*  16:9 aspect ratio (native) */
	width: 178px;
	height: 100px;
}

#visualizations #CIH {
	/* 2.35:1 aspect ratio (native) */
	width: 235px;
	height: 100px;
}

#visualizations .aspectRatioText, #visualizations .aspectRatioText a {
	padding: 5px;
	font-size: 25px;
	font-weight: normal;
	color: Gray;
	background-color: White;
	position: absolute;
	top: 30px;
	left: 80px;
	z-index: 50;
}
#visualizations .aspectRatioText a {
	top: 0;
	left: 0;
}
#visualizations #horizontalAspectRatioText {
	top: 30px;
	left: 60px;
}

#visualizations .border {
	display: block;
	text-decoration: none;
	float: left;
	height: 100px;
	border: solid 10px black;
}
#visualizations #borderHorizontal { margin-right: 58px; }

#visualizations .textInfo {
	float: left;
	margin-left: 15px;
	width: 300px;
}


#visualizations #leftVertical, #visualizations #rightVertical {
    width: 28.5px;
    height: 100px;
    background-color: black;
}
#visualizations #leftCIH, #visualizations #rightCIH {
	width: 51px;
    height: 100px;
    background-color: black;
}
#leftVertical, #leftCIH { float: left; }
#rightVertical, #rightCIH { float: right; }

#visualizations #topHorizontal, #visualizations #bottomHorizontal {
    width: 178px;
    height: 12px;
    background-color: black;
}
#visualizations #topHorizontal { position: absolute; top: 0; }
#visualizations #bottomHorizontal { position: absolute; bottom: 0; }





/* tab-related code */

#jsMasqueradeContainer {
	width: 700px;
	background:white;
	padding-bottom: 20px;
	min-height: 500px;
}

ul#tabnav {
	background-image: url('images/button-bg.jpg');
	height:35px;
	margin:0pt;
	padding:0pt;
	display:block;
	line-height:35px;
}
ul#tabnav li {
	margin:0;
	padding:0;
	float:left;
	height:35px;
	list-style-type:none;
	position:relative;
}
ul#tabnav li a {
	color:black;
	font-size:16px;
	font-weight:bold;
	line-height:35px;
	text-decoration:none;
	display:block;
	float:left;
	height:35px;
	margin:0pt 0pt 0pt 5px;
	padding:0pt 6px;
	position:relative;
}
ul#tabnav li a:hover, ul#tab li a.active {
	background: url('images/button-bg-flip.jpg');
}
.panel {
	background:white none repeat scroll 0%;
	display:block;
	padding-left: 5px;
	height: 530px;
}
.content {
	line-height:15px;
	padding:13px 35px 15px 15px;
	text-align:left;
}

input.text {
	background-color: White;
	color: Black;
}

/* slider elements */
div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; }
div.slider div.handle { width:17px; height:18px; background: url('Slider.jpg') no-repeat; cursor:move; }

div#zoom_element { width:50px; height:50px; background:#2d86bd; }