/*
	Mike Paech Character Animator
*/

body {
	background: #04b0e0;
    background: -webkit-linear-gradient(#04b0e0, #001d26, #001d26); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#04b0e0, #001d26, #001d26); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#04b0e0, #001d26, #001d26); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#04b0e0, #001d26, #001d26); /* Standard syntax */	
}	

/* ==== showreel ==== */	

#videoContainer{
	position: relative;
	display:block;
	width: 740px;
	height: 416px;
	margin: 0px auto 0px auto;
	padding: 10px;
	background-color:#000000;
	border-radius: 10px;
}

#video {
	position: relative;
	display:block;
	width: 740px;
	height: 416px;
	background: #000;		
	padding: 0px;
	margin: 0px auto;	
}	

#showreelHeader {
	position:relative;
	display:block;
	width: 700px;
	height: 42px;
	margin: 20px auto 20px auto;
	padding: 0px;	
	vertical-align:middle;
}

.showreelTitle {
	position:relative;
	display:block;
	float:left;
	width: 50%;
	height: 42px;
	vertical-align:middle;
}

.showreelTitle p {
	font-family: "nueva-std-condensed", serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 42px;
	color:#00d8ff;
	margin: 0px;
	padding: 0px;
}

.download{
	position:relative;
	display:block;
	float:right;
	z-index:100;
	margin: 0px;
	padding: 0px;
	width: 50%;
	height: 42px;
	vertical-align:middle;
	text-align:right;
	
}

.downloadButton {
	margin: 0px;
	padding: 0px;
}

a.downloadButton:link, a.downloadButton:visited {
	float: right;
	height: 42px;
	width: 42px;
	background: url(../images/social-download.png) no-repeat 0px 0px;
	background-size:cover;
	border: 0px;
}

a.downloadButton:hover, a.downloadButton:active {
	float: right;
	background: url(../images/social-download.png) no-repeat 0px -42px;
	background-size:cover;
}

#showreelContent {
	position:relative;
	display:block;
	width: 726px;
	height: 278px;
	margin: 0px auto 0px auto;
	background: #00313f; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(bottom right, #027fa1, #00313f); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #027fa1, #00313f); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #027fa1, #00313f); /* For Firefox 3.6 to 15 */
    background: linear-gradient(bottom right, #027fa1, #00313f); /* Standard syntax */
	border: 1px solid #00d8ff;
	border-radius: 10px;
	
}

#shotList {
	float:left;
	position:relative;
	height: 258px;
	width: 708px;
	margin: 9px 9px 0px 9px;
	padding: 0px;
	overflow:auto;
	border-style: solid;
	border-width: 1px;
	border-color: #00d8ff;
}

.shotBox {
	float:left;
	position:relative;
	height: 128px;
	width: 690px;
	margin: 0px 0px 1px 0px;
	padding: 0px;
	clear:both;
}

.shotImage {
	float:left;
	position:relative;
	height: 128px;
	width: 234px;
	padding: 0px;
	margin: 0px;
	background: #00789d;
	text-align:left;
}

.shotText {
	float:left;
	position:relative;
	display:block;
	height: 128px;
	width: 400px;
	padding: 0px 0px 0px 20px;
	margin: 0px;
	vertical-align:middle;
}


p.header{
	color:#00d8ff;
	font-size: 1.1em;
	font-weight: 300;
	letter-spacing:1px;
	padding: 0px;
	margin: 40px 0px 0px 0px;
}

p.work{
	color:#ffffff;
	font-size: .9em;
	line-height: 1em;
	font-weight: 300;
	letter-spacing: 1px;
	padding: 0px;
	margin: 0px;
	
}



.reelHR{
	float:left;
	display:block;
	width: 100%;
	height: 0px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid #00789d;
}