/*
	extends core.css
	contains all design specific styles
	
	All attributes in alpha-numeric order starting from 0-9 A-Z
	x = horizontal, y = vertical
	property: trbl, tb rl, t rl b, t r b l;
	bg shorthand: background: color url() repeat vertical-position horizontal-position;
	All font names should be quoted "Arial" 
	However, font families like Serif, Sans-Serif and Monospace do not need quotes.
*/

/* COLORS
-----------------------------------------------------------------------------
	
	#0D0D0D off black (body bg color)
	#1D1D1D off-off black (contrast areas)
	#FFDE00 yellow (highlights, links)
	
*/

/* TABLE OF CONTENTS
-----------------------------------------------------------------------------

	=WRAP
	=CONTENT-WRAP
		=MAIN CONTENT
	=FOOTER
		
*/

body{
	background: #0D0D0D;
	color: #FFFFFF;
}

/* =WRAP
----------------------------------------------------------------------------- */

#wrap{
	margin: 40px auto 0;
	width: 940px;
}

	#wrap h1{
		background: transparent url(images/logo.gif) no-repeat 0 0;
		height: 120px;
		text-indent: -13000em;
	}
	
		#wrap h1 a:link,
		#wrap h1 a:visited{ 
			display: block;
			height: 97px;
		}
	
	#wrap h2{
		/* background: #1D1D1D url(images/whats-your-story.gif) no-repeat 100% 0; */
		/*height: 37px;
		margin: 10px 0;
		text-indent: -13000em; */
		display: none;
	}

/* =CONTENT-WRAP
----------------------------------------------------------------------------- */

#content-wrap{ 
	background-color: #1D1D1D;
	margin: 10px 0 40px; 
	padding: 10px 10px 0;
}

/* =MAIN CONTENT
----------------------------------------------------------------------------- */

#main-content{
	list-style-type: none;
	margin: 0;
}

	#main-content li{
		background-color: #333333;
		float: left;
		height: 145px;
		margin: 0 10px 10px 0;
		position: relative;
		width: 145px;
	}
	
		#main-content li.last{ margin-right: 0; }
		
		#main-content li img{
			position: relative;
			z-index: 1;
		}
		
		#main-content li span{
			background-color: #000000;
			bottom: 0;
			font-size: 10px;
			left: 0;
			-moz-opacity: 0.7;
			opacity: 0.7;
			padding: 5px 5px 3px; 
			position: absolute;
			right: 0;
			text-transform: uppercase;
			z-index: 2;
		}
		
			#main-content li span.play-btn{
				background: transparent url(images/play-btn.png) no-repeat 0 0;
				bottom: auto;
				height: 18px;
				left: auto;
				right: 0;
				text-indent: -13000em;
				top: 10px;
				width: 24px;
			}
		
		#main-content li a:link,
		#main-content li a:visited{
			color: #FFFFFF;
			text-decoration: none;
			display: block;
			overflow: hidden;
			width: 145px;
			height: 145px;
		}
		
		#main-content li a:hover,
		#main-content li a:active{ color: #FFDE00; }
		
			#main-content li a:hover span.play-btn,
			#main-content li a:active span.play-btn{
				-moz-opacity: 1;
				opacity: 1;
			}

/* =FOOTER
----------------------------------------------------------------------------- */

#footer{
	margin-top: 10px;
	padding-bottom: 50px;
}

	#footer p{ 
		color: #666666;
		margin: 0; 
		text-align: center; 
	}
	
		#footer p.logo{ margin-bottom: 50px; }
		
			#footer p.logo a:link.logo,
			#footer p.logo a:visited.logo{
				background: transparent url(images/ec-logo.gif) no-repeat center 0;
				display: block;
				height: 50px;
				text-indent: -13000em;
			}