/**
 * EcoVideo player CSS
 */


.mejs-container.mejs-eco {}

.mejs-eco .mejs-controls {
	background: url(../images/controls_bg.png);
    height: 54px;
}

.mejs-eco .mejs-controls div
{
	width: 40px;
	height: 36px;
	margin: 1em 0.25em;
}

.mejs-eco .mejs-controls .mejs-button button
{
	height: 36px;
	width: 40px;
	margin: 0;
	padding: 0;
	background: url(../images/controls.png) no-repeat;
}

.mejs-eco .mejs-controls .mejs-button {}

.mejs-eco .mejs-controls .mejs-playpause-button {}



/* SPRITES */

.mejs-eco .mejs-controls .mejs-playpause-button button
{
	background-position: 0 0;
}

.mejs-eco .mejs-controls .mejs-pause button
{
	background-position: -40px 0;
}

.mejs-eco .mejs-controls .mejs-fullscreen-button button
{
	background-position: -160px 0;
}

.mejs-eco .mejs-controls .mejs-unfullscreen button
{
	background-position: -200px 0;
}

.mejs-eco .mejs-controls .mejs-mute button
{
	background-position: -80px 0;
}

.mejs-eco .mejs-controls .mejs-unmute button
{
	background-position: -120px 0;
}





/* VOLUME */

.mejs-eco .mejs-controls .mejs-volume-button {}

.mejs-eco .mejs-controls .mejs-volume-button .mejs-volume-slider
{
	background: none;
	width: 2.5em;
	height: 65px;

	top: -65px;
	padding-bottom: 0;
	margin-left: 0.5em;
}

.mejs-eco  .mejs-controls .mejs-volume-button .mejs-volume-total
{
	background-color: #333;
	left: 8px;
	width: 1em;
	height: 50px;
	border-radius: 5px;
}

.mejs-eco  .mejs-controls .mejs-volume-button .mejs-volume-current {
	background-color: orange;
	left: 8px;
	width: 1em;
	height: 50px;
	border-radius: 5px;
}

.mejs-eco  .mejs-controls .mejs-volume-button .mejs-volume-handle
{
	left: 3px;
	width: 21px;
	background-color: #ccc;
	border-radius: 3px;
}





/* TIME */

.mejs-eco .mejs-controls .mejs-time-rail .mejs-time-float
{
	display: none;
	top: -30px;
}

.mejs-eco .mejs-controls .mejs-time-rail .mejs-time-handle
{
	display: block;
	margin: 0;
	width: 14px;
	height: 21px;
	top: -7px;
	border: 0;
	background: url(../images/controls-ted.png) no-repeat 0 0;
}

.mejs-eco .mejs-controls .mejs-time
{
    padding: 11px 0 0 0;
    width: 7em;
    text-align: center;
}

.mejs-eco .mejs-controls .mejs-time span
{
	font-weight: bold;
	color: #999;
    float: none;
    display: inline;
}

.mejs-eco .mejs-controls .mejs-time span.mejs-currenttime
{
	color: #fff;
}

.mejs-eco .mejs-controls div.mejs-time-rail
{
	padding-top: 8px;
}



.mejs-eco .mejs-controls .mejs-time-rail .mejs-time-loaded
{
    width: 0;
}





/* CUSTOM ELEMENTS */

.mejs-contextblock { width: 100%; height: 100%; background-color: #000; cursor: pointer; }



/* html, body { height: 100%; } */
body { padding: 0; margin: 0; background-color: #000; color: #fff; font-family: Arial; text-align: center; }


a { color: orange; text-decoration: underline; }
	a:hover { text-decoration: none; }


header { color: #fff; width: auto; min-width: 320px; position: relative; padding: 0.5em; }
	header #logo { float: left; padding: 0; margin: 0; font-size: 100%; }
	header #contactLink { display: none; clear: both; font-size: 0.8em; line-height: 2em; }






header #logo { margin-right: 1em; }
    header #contact { font-size: 0.8em; }
        header #contact section { float: left; margin-right: 2em; }
        header #contact section p { padding: 0; margin: 0 0 0.25em 0; }
    header #contactLink { font-size: 80%; }





#contact { display: inline-block; }
#contact #contactLink { display: none; clear: left; font-size: 0.8em; font-weight: bold; line-height: 2em; }
#contact.showLink #contactLink { display: block; }
#contact.block { display: block; clear: both; overflow: auto; }
#contact.noInfo section { display: none; }











#social { position: absolute; top: 0; right: 0; white-space: nowrap; }
    #social ul { margin: 0 0 0.5em 0; }
        #social ul li { margin-left: 0.5em; }
            #social ul li a { height: 24px; }
            #social ul li a:hover { background-position: 0 0; }
            #social ul li a#facebook { background-image: url(../images/social/facebook.png); }
            #social ul li a#twitter { background-image: url(../images/social/twitter.png); }
            #social ul li a#linkedin { background-image: url(../images/social/linkedin.png); }
            #social ul li a span { display: block; height: 24px; width: 24px; overflow: hidden; }



footer { text-align: center; padding: 0.5em 0; }



.centered { display: inline-block; width: 100%; text-align: left; text-align: left; position: relative; }






/* BUTTONS */
.channels ul { padding: 0; margin: 0 0.25em; }
    .channels ul li { padding: 0; margin: 0.25em 0.25em; }
        .channels ul li a span { display: block; height: 48px; width: 180px; }












#videoContainer .centered { text-align: center; }

#videoPlayer
{
	margin: 0 0.5em 0 0.5em;
	padding: 1em 1em 0 1em;
	background-color: #222;
	width: auto;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;

	border-width: 2px;
	border-style: solid;
	border-color: #333 #111 #111 #333;
}
#videoPlayer { display: inline-block; }

#videoPlayer canvas { height: 2em; }
    #videoPlayer canvas { display: block; width: 100px; }



#videoScreen
{
	background-color: #000;
	padding: 2px;
	text-align: center;


	border-width: 2px;
	border-style: solid;
	border-color: #111 #333 #333 #111;
}

#videoPicture
{
	text-align: left;
	display: inline-block;
}

#videoFooter { height: 2em; width: 100%; background: transparent 0 0 no-repeat; text-align: right; }
    #videoFooter a#ecoVideoLogo { display: inline-block; background: transparent url(../images/ecovideo_logo_91x24.png) 0 0 no-repeat; height: 24px; width: 91px; margin-top: 0.25em; }
        a#ecoVideoLogo span { display: block; overflow: hidden; width: 91px; height: 25px; }

.overlay { position: absolute; z-index: 20; top: 0; left: 0; height: 100%; width: 100%; display: block; }
.loading { background: url(../images/loading.gif) center no-repeat #000; }
    .loading noscript div { position: absolute; color: #fff; background-color: #000; top: 50%; left: 50%; margin: -70px 0 0 -100px; width: 200px; min-height: 140px; }
        .loading noscript div p { margin: 1em; }



#logo span, .hidden, a span { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity: 0; }



.channels { display: inline-block; }
	.channels ul { display: inline-block; padding: 0; margin: 0; }
    	.channels ul li { display: inline-block; padding: 0; margin: 0.2em 0.2em; list-style: none; }
    	    .channels ul li a { display: block; padding: 0; margin: 0; background: transparent no-repeat; }
	            .channels ul li a:hover { background-position: 0 100%; }










/**
 * MEDIA QUERIES
 */




/* Phone */
@media screen and (max-width: 320px)
{
	#contact { display: none; }

    header, footer, #videoContainer { width: 320px; }

	.mejs-controls { display: none; }
}


/* Phone */
@media screen and (min-width: 320px) and (max-width: 480px)
{
	#contact { display: none; }
}


/* Phone and Tablet */
@media screen and (min-width: 480px)
{

}


/* Widescreen */
@media screen and (min-width: 1024px)
{
	.centered { width: 80%; min-width: 1024px; overflow: hidden; }
}