/* =============================================================================== 

	Theme Name: Command & Conquer
	Author: Michael Cober
	Author URL: http://www.cober.ca
	Version: 1.0
	Date: NOV 17, 2010
	Compatibility: W3C Valid and tested on IE7 + IE8 + Firefox +Safari + Chrome  (Except for the IE Hacks and inline *)
	
=============================================================================== */


/* C+C MEDIA =================================================================== */

.media-box {width:650px; height:324px; }

#media-nav {width:320px; float:right; height:330px; }

#media-nav ul {width:320px; height:280px; background: url(/en/media/images/b-media-hover-bkg.png) 0 -400px no-repeat; overflow: hidden; }

#media-nav ul li.m1 a, li.m2 a, li.m3 a, li.m4 a {padding:13px 10px 0 12px; font-size: 12px; line-height: 16px; color:#c2c2c2;}
#media-nav ul li img {margin:0 10px 0 0;}
#media-nav ul li b {padding:6px 0 0 0; font-weight: bold;}

#media-nav ul li.up {position: relative; top:0; left:0; float:left;}
#media-nav ul li.up a {display: block; width:320px; height:20px; background: url(/en/media/images/b-up-arrow.png) 105px 8px no-repeat; font-size: 1px; text-indent: -5000px;}
#media-nav ul li.up a:hover {background: url(/en/media/images/b-up-arrow.png) 105px -12px no-repeat; }

#media-nav ul li.m1 {position: relative; top:-4px; left:0; float:left;}
#media-nav ul li.m2 {position: relative; top:-17px; left:0; float:left; }
#media-nav ul li.m3 {position: relative; top:-30px; left:0; float:left; }
#media-nav ul li.m4 {position: relative; top:-43px; left:0; float:left; }

#media-nav ul li.m1 a, #media-nav ul li.m2 a, #media-nav ul li.m3 a, #media-nav ul li.m4 a {width:298px; height:69px; display: block; background: url(/en/media/images/b-media-bkg.png) 0 11px no-repeat;}

/*#media-nav ul li.m1 a:hover, #media-nav ul li.m2 a:hover, #media-nav ul li.m3 a:hover, #media-nav ul li.m4 a:hover {background: url(/en/media/images/b-media-hover.png) 0 0 no-repeat; }*/

.video-overlay {width:613px; height:33px; padding:8px 10px 10px 10px; background: url(/mediastore/video-overlay-bkg.png) no-repeat; overflow: hidden; position: relative; top:264px; left:9px; float:left; z-index: 100;}
.video-overlay h2 {font-size: 16px; font-weight: bold; color:#fff; padding:2px 0 5px 0;}
.video-overlay p {color:#bddeec;}
.play-vid {cursor:pointer;}
	.play-vid a {display:block;}
	.play-vid a:hover {color:#fff;}

.media{width:635px; margin:5px 0 14px 0; }
.media-item {position:relative; top:-51px; left:0px;}


.video-thumb {width:108px; height:72px; margin:5px auto 0 auto;}
.video-title {font-size: 11px; line-height: 12px; text-align: center;}

/* VIDEO TILES BLUE */
.video-tile-blue {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-blue.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-blue a {width:118px; height:114px; display: block;  color:#4f8cab;}
.video-tile-blue a:hover {color:#5ea7cc;}
/* VIDEO TILES BLUE */	

/* VIDEO TILES RED */
.video-tile-red {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-red.png) no-repeat; overflow: hidden; float:left; text-align: center; color:#900000;}
.video-tile-red a {width:118px; height:114px; display: block; color:#e45a5a; }
/* VIDEO TILES RED */	

/* VIDEO TILES TAN */
.video-tile-tan {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-tan.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-tan a {width:118px; height:114px; display: block; color:#d6d6b4;  }
.video-tile-tan a:hover {color:#f2f2cb;}
/* VIDEO TILES TAN */	

/* VIDEO TILES GOLD */
.video-tile-gold {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-gold.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-gold a {width:118px; height:114px; display: block; color:#c2a350; }
.video-tile-gold a:hover {color:#f2cc63;}
/* VIDEO TILES GOLD */	

/* VIDEO TILES GOLDEN */
.video-tile-golden {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-golden.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-golden a {width:118px; height:114px; display: block; color:#c89337; }
.video-tile-golden a:hover {color:#f2b141;}
/* VIDEO TILES GOLDEN */	

/* VIDEO TILES LIME */
.video-tile-lime {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-lime.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-lime a {width:118px; height:114px; display: block; color:#029302; }
.video-tile-lime a:hover {color:#04c704;}
/* VIDEO TILES LIME */	

/* VIDEO TILES METALLIC */
.video-tile-metallic {width:118px; height:114px; margin:0 8px 30px 0; background: url(/en/media/images/video-bkg-tile-golden.png) no-repeat; overflow: hidden; float:left; text-align: center;}
.video-tile-metallic a {width:118px; height:114px; display: block; color:#c89337; }
.video-tile-metallic a:hover {color:#f2b141;}
/* VIDEO TILES METALLIC */
	
.up {width:320px; height:20px; }
.up a {display: block; width:320px; height:20px; background: url(/en/media/images/b-up-arrow.png) 105px 8px no-repeat; font-size: 1px; text-indent: -5000px;}
.up a:hover {background: url(/en/media/images/b-up-arrow.png) 105px -12px no-repeat; }

.down {width:320px; height:20px; }
.down a {display: block; width:320px; height:20px; background: url(/en/media/images/b-down-arrow.png) 106px 4px no-repeat; font-size: 1px; text-indent: -5000px; clear: both;}
.down a:hover {background: url(/en/media/images/b-down-arrow.png) 106px -16px no-repeat; }

.last {margin:0 0 30px 0;}

/******************************************************************

"The life of a designer is a life of fight: fight against the ugliness." ~ Massimo Vignelli

******************************************************************/

/*****************************************************************/
/**  alterations by Shawn Stott                                 **/
/*****************************************************************/
#media-nav ul li.media_scroller_item a {padding:13px 10px 0 12px; font-size: 12px; line-height: 16px; color:#c2c2c2;}
#media-nav ul li.media_scroller_item a {width:298px; height:69px; display: block; background: url(/en/media/images/b-media-bkg.png) 0 11px no-repeat;}
#media-nav ul li.media_scroller_item a:hover {background: url(/en/media/images/b-media-bkg-hover.png) 0 11px no-repeat; }

#media-nav ul li.active a {background: url(/en/media/images/b-media-hover.png) 0 0 no-repeat;}
#media-nav ul li.active a:hover {background: url(/en/media/images/b-media-hover.png) 0 0 no-repeat; }