/* == CSS Reseter from CSSLab == */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

a img, iframe {
	border: none;
}

ol, ul {
	list-style: none;
}

input, textarea, select, button {
	font-size: 100%;
	font-family: inherit;
}

select {
	margin: inherit;
}

/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }


/* ========================================= clearfix == */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* == Flumotion Page and player styles == */
html, body { margin: 0; padding:0; height: 100%; font-family: Verdana, Arial; overflow: hidden;}
video { float: left; background: black; }

#page {
    width: 100%;
    height: 100%;
}

#container {
    text-align: center;
    position: absolute;
    top:0px; left:0px; right:0px; bottom:0px;
}
#container.social_sharing { bottom: 54px; }
#container.vertical_playlist { right: 348px; }
#container.horizontal_playlist { bottom: 115px; }
#container.horizontal_playlist.social_sharing { bottom: 169px; }
#container.full_page { width: 640px; height: 480px; margin: 15ex auto; }

#player-container { height: 100%; width: 100%; }

#EMotionPlayer { height: 100%; }
#EMotionPlayer.floated { margin-left: 348px;  }

#social_sharing_buttons { clear: both; text-align: left;}
#social_sharing_buttons a { float: left; margin-left: 8px;}

body {
    background-color: #000;
}
#viral_toolbox { 
    margin-top: 20px; 
    background-color: #EEEEEE;
    padding: 14px;     
	border: solid 1px #D1D1D1;
    -ms-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    -moz-box-shadow: inset 0 0 3px #C0C0C0;
    -webkit-box-shadow:inset 0 0 3px #C0C0C0;
	box-shadow:inset 0 0 3px #C0C0C0;
	position: absolute;
    left:0px;right:0px;bottom:0px;
    height: 24px;
}
#viral_toolbox.over_playlist {
    bottom:115px;
}

#action_buttons { 
    border-right: 1px solid #d9d9d9;
}

div.player_error {
    background: url("../img/alert.png") left no-repeat;
    color: white;
    text-align: left; 
    margin-top: 4px;
    margin-left: 4px;
    height: 32px;
    padding-left: 48px; 
    z-index: 2;
    position: absolute;
}

div.player_error p { position: relative; top: 1ex;}

.poster-box {
	height: 100%;
	width: 100%;
	text-align: center;
}

#player-poster-container {
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

/* Spinner Styles
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
#player-poster-loading {
	display: inline;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	z-index: 1;
	margin: -50px 0 0 -50px;
	/* Scaling makes the circles look smoother. */
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

.lt-ie9 #player-poster-loading { display: none !important; }

/* Spinner circles */
#player-poster-loading div {
	position: absolute;
	left: 40px;
	top: 40px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border: 1px solid #ccc;
	/* Added border so can be visible on white backgrounds */
}
/* Each circle */

#player-poster-loading div:nth-child(1) { opacity: 0.12; transform: rotate(000deg) translate(0, -40px) scale(0.1); -webkit-transform: rotate(000deg) translate(0, -40px) scale(0.1); -moz-transform: rotate(000deg) translate(0, -40px) scale(0.1); -ms-transform: rotate(000deg) translate(0, -40px) scale(0.1);}
#player-poster-loading div:nth-child(2) { opacity: 0.25; transform: rotate(045deg) translate(0, -40px) scale(0.2); -webkit-transform: rotate(045deg) translate(0, -40px) scale(0.2); -moz-transform: rotate(045deg) translate(0, -40px) scale(0.2); -ms-transform: rotate(045deg) translate(0, -40px) scale(0.2);}
#player-poster-loading div:nth-child(3) { opacity: 0.37; transform: rotate(090deg) translate(0, -40px) scale(0.4); -webkit-transform: rotate(090deg) translate(0, -40px) scale(0.4); -moz-transform: rotate(090deg) translate(0, -40px) scale(0.4); -ms-transform: rotate(090deg) translate(0, -40px) scale(0.4);}
#player-poster-loading div:nth-child(4) { opacity: 0.50; transform: rotate(135deg) translate(0, -40px) scale(0.6); -webkit-transform: rotate(135deg) translate(0, -40px) scale(0.6); -moz-transform: rotate(135deg) translate(0, -40px) scale(0.6); -ms-transform: rotate(135deg) translate(0, -40px) scale(0.6);}
#player-poster-loading div:nth-child(5) { opacity: 0.62; transform: rotate(180deg) translate(0, -40px) scale(0.8); -webkit-transform: rotate(180deg) translate(0, -40px) scale(0.8); -moz-transform: rotate(180deg) translate(0, -40px) scale(0.8); -ms-transform: rotate(180deg) translate(0, -40px) scale(0.8);}
#player-poster-loading div:nth-child(6) { opacity: 0.75; transform: rotate(225deg) translate(0, -40px) scale(1.0); -webkit-transform: rotate(225deg) translate(0, -40px) scale(1.0); -moz-transform: rotate(225deg) translate(0, -40px) scale(1.0); -ms-transform: rotate(225deg) translate(0, -40px) scale(1.0);}
#player-poster-loading div:nth-child(7) { opacity: 0.87; transform: rotate(270deg) translate(0, -40px) scale(1.1); -webkit-transform: rotate(270deg) translate(0, -40px) scale(1.1); -moz-transform: rotate(270deg) translate(0, -40px) scale(1.1); -ms-transform: rotate(270deg) translate(0, -40px) scale(1.1);}
#player-poster-loading div:nth-child(8) { opacity: 1.00; transform: rotate(315deg) translate(0, -40px) scale(1.3); -webkit-transform: rotate(315deg) translate(0, -40px) scale(1.3); -moz-transform: rotate(315deg) translate(0, -40px) scale(1.3); -ms-transform: rotate(315deg) translate(0, -40px) scale(1.3);}