@charset "UTF-8";
/* CSS Document */


/* Quick and dirty margin and padding reset */
* {
	margin: 0;
	padding: 0;
}

/* 	
	NOTE: Organization of styles are as follows:
	
	ALL STYLES ARE LISTED (for the most part)
	FROM THE TOP OF THE HTML STRUCTURE DOWN
	
	-> HTML property tags come first
	-> IDs come second
	-> CLASSES come third
	
	Huzzah!
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

h2, h4, p {
	color: #607282;
}

h2 {
	font-family: Tahoma, "Times New Roman", serif;
	font-size: 22px;
}

h4 {
	font-size: 15px;
	font-weight: normal;
}

#player_wrapper {
	width: 800px;
    margin-left: auto;
    margin-right: auto;
	overflow: hidden
}

/* 	Here's the story with #conainer1 and #container2:

	They are essentially extra divs to allow the equal height column
	effect. They are both positioned relatively, underneath the content
	which are separate divs
	.
	#container1 is the right column and #container2 the left.
*/
	

	#player_container1 {				/* Background for the right column */
		float: left;
		width: 100%;
		position: relative;
		left: 514px;			/* Pushed left with overflow being hidden */
		background: url(/Images/MediaPlayer/gradient.png) top left repeat-y #b7c5d1;
	}	
	
	#player_container2 {				/* Background for the left column */
		float: left;
		width: 100%;
		background: #eef1f3;
		position: relative;
		left: -7px;
		overflow: hidden;
	}

#player_container, #player_sidebar_container {
	float: left;
}

#player_container {		/* Content "in" #container2 */
	padding: 7px;
	position: relative;
	left: -500px;
}

#player_sidebar_container {	/* Content "in" #container1 */
	width: 293px;
	position: relative;
	left: -495px;
}

#player_title_container {
	background: url(/Images/MediaPlayer/gradient.png) top left repeat-y #d9e5ef;
	width: 253px;
	display: block;
	padding: 0 20px;
	margin-bottom: 10px;
	position: relative;
	top: 20px;
}

#player_sidebar {
	padding: 20px;
}

#player_description {
	color: #5d5d5e;
}