@CHARSET "ISO-8859-1";

/* ----------------------------------------------- PAGE STYLES */
* {	
	font-family: arial, sans-serif;
	//border: 1px solid green;
	margin: 0;
	padding: 0;
}

body{
	text-align:center;
	background-image:url("images/woodTile.jpg");
	background-repeat:repeat;
/* 	background-color: #751947; */
}

#wrapper{
	background: -webkit-linear-gradient(rgba(100,0,0,.8),rgba(0,0,0,0)); /*Safari 5.1-6*/
	background: 	 -o-linear-gradient(rgba(100,0,0,.8),rgba(0,0,0,0)); /*Opera 11.1-12*/
	background:    -moz-linear-gradient(rgba(100,0,0,.8),rgba(0,0,0,0)); /*Fx 3.6-15*/
	background: 		linear-gradient(rgba(100,0,0,.5),rgba(0,0,0,0)); /*Standard*/
	padding-top: 20px;
	margin: 0 auto;
}

/* ----------------------------------------------- HEADER STYLES */
#domainTitle{
	margin-left:10px;
	text-align:left;
	font-size:25px;
	color: rgba(255,255,255,.2);
}

#pageTitle{
	margin-left:10px;
	text-align:left;
	font-size:36px;
	color: rgba(255,255,255,.3);
/* 	opacity:0;	 */
}

#backReloadBox{
	display: block;
	position: absolute;
	top: 110px;
	left: 0px;
	height: 75px;
	width: 75px;
	background-image:url("images/BackReloadArrow.png");
	opacity:0.1;
}

#backReloadBox:hover{
	opacity:0.6;
}

/* ----------------------------------------------- OPENING SCREEN STYLES */
h3{
	margin-bottom: 10px;
	font-size:15px;
}
#movieScreen{
	height: 360px;
	width: 360px;
	border: 10px solid #343434;
	border-radius:6px 6px 6px 6px;
	margin: 0px auto;
	margin-bottom: 20px;
	background-color: #F0F0F0;
	text-align:center;
	z-index: 2;
}
				#timecodeBox{
					margin-top: 14px;
				}
				
				#timeCodeDisplayText{
					color: white;
				}
				
				#btnStop{
					height: 75px;
					width: 75px;
					margin: 0 auto;
					margin-top: 18px;
					background-image:url("images/StopButton.png");
					opacity:0.1;
				}
				
#clipAmountBox{
/* 	height: 400px; */
	color: white;
}

	#btnbuildClipList{
/* 		display: block; */
		margin-top: 10px;
		margin-bottom: 10px;
		width:200px;
		height: 50px;
		clear:both;
		border-radius:10px 10px 10px 10px;
		font-size:20px;
	}
	
select {
/* 	margin:0px 5px 0px 5px; */
	text-align:center;
	font-size:16px;	
}

/* ----------------------------------------------- CLIP BOX STYLES */
#clipHolderBox{
	margin: 0 auto;
	border: 3px double rgba(237,237,178,.3);
	width: 840px;
	
}

	.clipSelectBox{
		float: left;
		height: 150px;
		width: 200px;
		margin:6px 0px 0px 6px;
		background-color: #F0F0F0;
		border: 1px solid #343434;
		border-top:20px solid #343434;
		border-bottom:20px solid #343434;
		//border-radius:2px 0px 5px 0px;
		box-shadow: 0px 5px 5px rgba(0,0,0,.5);
	}
	
		.clipButtons{
			width: 94%;
			height: 30%;
			margin-top: 3px;
/* 			border: 4px solid black; */
/* 			border-radius:6px 6px 6px 6px; */
			font-size:18px;
		}

		#btnPlay{
/* 			background-color: #85FF85; */
/* 			border-color: green; */
		}
		#btnReload{
			
		}
		
		p[id*='clipTitleTextBox']{
			margin-top: 30px;
			color:#191959;
			font-family: "Comic Sans MS", serif;
			font-size:24px;
				-ms-transform: rotate(-20deg); 		/* IE 9 */
				-webkit-transform: rotate(-20deg); 	/* Chrome, Safari, Opera */
				transform: rotate(-20deg)
		}

/* ----------------------------------------------- MASTER REEL STYLES */
	#savedClipBox{
		margin: 0 auto;
		margin-top: 0px;
		border: 3px double rgba(100,100,100,.8);
		height:66px;
		width: 840px;
		background: -webkit-linear-gradient(left,black, gray , Gray, lightGray,gray); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(right,black, gray , Gray, lightGray,gray); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(right,black, gray , Gray, lightGray,gray); /* For Firefox 3.6 to 15 */
		background: linear-gradient(to right,black, gray , Gray, lightGray,gray); /* Standard syntax (must be last) */
		box-shadow: 0px 5px 5px rgba(0,0,0,.5);
		text-align: left;
		color: white;
		font-size:24px;
	}
	
	.masterReelText{
		float: left;
		margin-top: 14px;
		margin-left: 16px;
		font-family: "Comic Sans MS", serif;
	}

	#clipSaveBtnBox{
/* 		clear: both; */
		float:right;
		height:60px;
		width:200px;
		margin-top: 0px;
		border-top: 3px solid black;
		border-bottom: 3px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background: -webkit-linear-gradient(left,darkGray, gray , lightGray, lightGray,gray); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(right,darkGray, gray , lightGray, lightGray,gray); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(right,darkGray, gray , lightGray, lightGray,gray); /* For Firefox 3.6 to 15 */
		background: linear-gradient(to right,darkGray, gray , lightGray, lightGray,gray); /* Standard syntax (must be last) */
	}

	
		#btnclipAdd{
			width: 96%;
			height: 90%;
			margin: 3px;
			border: 1px solid darkGray;
			background-color: rgba(255,255,255,.1);
			font-size:18px;
		}
		
		#btnclipAdd:hover{
			background-color: rgba(255,255,255,.5);
		}
			#undoAddClip{
			float: right;
			width: 60px;
			height: 90%;
			margin: 3px;
/* 			margin-left:60px; */
			border: 1px solid darkGray;
			background-color: rgba(255,255,255,.1);
			font-size:10px;
		}
		
		#undoAddClip:hover{
			background-color: rgba(255,255,255,.5);
		}
		
	.masterReelButtons{
		width: 200px;
		height: 60px;
		margin-top: 6px;
/* 		border: 1px solid black; */
/* 		border-radius:6px 6px 6px 6px; */
		font-size:18px;
	}

	#masterReelSettingsToggle{
		cursor: pointer;
		display:block;
		margin: 0 auto;
		margin-top: 0px;
		height:50px;
		width: 840px;
/* 		border-radius:5px 5px 3px 3px; */
		background-color:rgba(0,0,0,.8);
		text-align:center;
		font-size:20px;
		color: white;
	}
	
	#masterReelSettingsToggle:hover{
		background-color:rgba(0,0,0,.7);
	}
	
	#masterReelSettingsText{
		cursor: pointer;
		padding-top: 10px;
		padding-left: 10px;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	
	#masterReelSettingsBox{
		margin: 0 auto;
		background-color:rgba(0,0,0,.8);
		border-top: 3px double rgba(100,100,100,.8);
/* 		border: 3px double rgba(100,100,100,.8); */
		height:38px;
		width: 840px;
		text-align:center;
	}
/* 		 Timecode Option Checkbox ----------------- */
		#timecodeText{
			float: left;
			margin: 8px 0px 0px 10px;
			color: white;
		}
		
		#timecodeCheckbox{
			float: left;
			margin: 12px 0px 0px 6px;
		}
		
/* 		 Flicker Option Checkbox ------------------ */
		#flickerToggleText{
			float: left;
			margin: 8px 0px 0px 10px;
			color: white;
		}

		#flickerToggleCheckbox{
			float: left;
			margin: 12px 0px 0px 6px;
		}
		
/* 		 Playback Slider -------------------------- */
		.playbackSpeedText{
			float: left;
			margin: 8px 0px 0px 10px;
			color: white;
		}
					
		#playbackRange{
			float: left;
			margin: 8px 0px 0px 10px;
		}
			
/* ----------------------------------------------- TIP AREA STYLES */
#tipBox{
	height:70px;
	width: 840px;
/* 	padding-top:12px; */
	margin: 0 auto;
	margin-top:40px;
	background-color: rgba(237,237,178,.8);
	border-left: 4px dotted #88725D;
	border-right: 4px dotted #88725D;
	border-top: 2px solid #88725D;
	border-bottom: 2px solid #88725D;
/* 	border-radius:20px 6px 20px 6px; */
	clear:both;
	text-align:left;
	color:#F0F0F0;	
}

	#tipBoxText{
		margin-top:12px;
		margin-left:20px;
		color:#303030;
		font-family:Courier New;
		font-size:25px;
	}

#tipNote{
	height:180px;
	width: 180px;
	padding:12px;
	margin: 0 auto;
	margin-top:0px;
	background-color: #FFFFCC;
	border: 1px solid #E6E6B8;
	border-radius:0px 0px 10px 0px;
	box-shadow: 2px 3px 5px #3E3E3E;
	transform:rotate(7deg);
		-ms-transform:rotate(7deg); /* IE 9 */
		-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
	clear:both;
	text-align:center;
	color:#00008F;	
}

/* ----------------------------------------------- PLAYING OVERLAY STYLES (Elements that are unhidden when clips play) */
#playCover{
	position:fixed;
	top:0px;
	left:0px;
	background-color: rgba(0,0,0,.9);
	height: 100%;
	width:100%;
	z-index: 1;
}


#flickerToggleCheckbox{
	
}

#flickerToggleText{
	color: white;
}


#btnStop:hover{
	opacity:0.6;
}