.contentWrapperMedia {
	margin: 0;
	padding: 0px 12px 10px 12px;
}

#mediaContent {
	float: left;
	width: 691px;
	padding: 12px 8px 12px 8px;
	color: #ffffff;
	background-color: #000000;
}
#mediaContent a, #mediaContent a:hover {
	color: #7ADEEE;
}

#videoContent {
	float: left;
	width: 480px;
	height: 270px;
}

#videoOptions {
	clear: both;
	float: left;
	width: 480px;
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	margin-top: 6px;
}
#videoOptions .playerOption {
	float: left;
	width: 415px;
}
#videoOptions .shareOption {
	float: right;
	color: #7ADEEE;
	font-weight: bold;
}
#videoDetails {
	float: left;
	width: 195px;
	padding: 0px 0px 0px 16px;
}

#videoDetails .title {
	font: bold 110%/1.35em Arial, Helvetica, Verdana, sans-serif;
	padding: 0px;
	margin: 0px;
}
#videoDetails .dateDuration {
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	color: #A8A8A8;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
#videoDetails .description {
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	color: #A8A8A8;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

#videoDetails .related {
	margin-top: 10px;
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	color: #ffffff;
}
#videoDetails .related ul {
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
}
#videoDetails .related ul li {
	list-style-type: none;
	background: url(/images/bullet_white.gif) no-repeat;
	background-position: 0px 8px;
	padding: 7px 0px 0px 18px;
	margin: 0px;
}
#mediaThumbs {	
	clear: both;
	width: 691px;
	padding: 15px 8px 0px 8px;
}
#mediaThumbs .filterContainer {
	padding: 4px 10px 4px 10px;
	height: 24px;
	border-bottom: solid 1px #d2d2d2;
	background-color: #f6f6f6;
}
#mediaThumbs .topBar {
	float: left;
	padding-top: 2px;
}

#mediaThumbs .thumbContainer {
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	clear: both;
	color: #b3b3b3;
	padding: 10px 0px 10px 0px;
}
#mediaThumbs .title {
	font-weight: bold;
	color: #2a2922;
}
#mediaThumbs .dateDuration {
	color: #2a2922;
}

/* Anchors still the same color, no decoration */
#mediaThumbs .thumbContainer a, #mediaThumbs .thumbContainer a:hover, #mediaThumbs .thumbContainer a:active {
	color: #2a2922;
	text-decoration: none;
}

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/
div.scrollable {
	float: left;
	overflow: hidden;
	position: relative;
	width: 691px;
	height: 146px;
	margin-bottom: 4px;
}

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/
div.scrollable div.items {
	/* this cannot be too large */
	width: 20000em;
	position: absolute;
	clear: both;
}

/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/
div.scrollable div.items div {
	float: left;
	width: 120px;
	height: 146px;
	padding: 7px;
	margin-right: 5px;
	overflow: hidden;
	cursor: pointer;	
}

/* Active div item */
div.items div.active {
	background-color: #F6F6F6;
}

/* Hover div item */
div.items div.hover {
	background-color: #F6F6F6;
}

/* Position and dimensions of the navigator, plus left/right arrows */
.scrollerNavigation {
	margin-left: 300px;	
	width: 200px;
	height: 20px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	margin: 2px;
	height: 10px;
	width: 5px;
	display: block;
	float: left;	
	cursor: pointer;
	font-size: 1px;
}
/* left */
a.left {
	background: url(/images/graphic_carousel_prev.png) no-repeat scroll 0 0 transparent;
	margin-right: 4px;
}
a.left:hover {
	background-position: 0 -10px;
}
a.left:active {
	background-position: 0 -20px;
}

/* right */
a.right {
	background: url(/images/graphic_carousel_next.png) no-repeat scroll 0 0 transparent;		
	margin-left: 4px;
}
a.right:hover {
	background-position: 0px -10px;
}
a.right:active {
	background-position: 0px -20px;
}


/* disabled navigational button */
a.disabled {
	visibility: hidden !important;
}

/* Pager dot navigation */
.pagerDots {
	float: left;	
	height: 20px;		
}

/* items inside navigator */
.pagerDots a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url(/images/graphic_carousel_pager.png) 0 0 no-repeat;
	display: block;
	font-size: 1px;
	cursor: pointer;
}

/* mouseover state */
.pagerDots a:hover {
	background-position: 0 -8px;
}

/* active state (current page state) */
.pagerDots a.active {
	background-position: 0 -16px;
}

/* Photo Gallery tweaks */
#photoContent {
	float: left;
	width: 691px;
	padding: 12px 8px 12px 8px;
	color: #ffffff;
	background-color: #000000;	
	overflow: hidden;
}

#photoContent a, 
#photoContent a:hover {
	color: #7ADEEE;
}

#photoContent .thumbContainer a, 
#photoContent .thumbContainer a:hover, 
#photoContent .thumbContainer a:active {
	color: #2a2922;
	text-decoration: none;
}

#photoContent div.scrollable
{
    float: left;
    overflow: hidden;
    position: relative;
    width: 691px;
    height: 70px;
    margin-bottom: 4px;
}

#photoContent div.scrollable div.items div {
    float: left;
    width: 86px;
    height: 70px;
    padding: 4px;
    overflow: hidden;
    cursor: pointer;
}

/* Position and dimensions of the navigator, plus left/right arrows */
#photoContent .scrollerNavigation {
	margin-left: 300px;	
	width: 300px;
	height: 20px;
}

#photoContent .pagerDots {
    float: left;
	height: 20px;		
}

#photoDisplayContent {
	float: left;
	width: 480px;
	height: 270px;
}
#photoDisplay {
	float: left;
	width: 480px;
	height: 332px;
    text-align:center;
    vertical-align:middle;	
}

#photoDisplay img {
	width: 480px;
	height: 330px;
}

#photoThumbContainer {
	font: normal 90%/1.25em Arial,Helvetica,Verdana,sans-serif;
	clear: both;
	color: #b3b3b3;
	padding: 10px 0px 10px 0px;
}

#photoThumbContainer a.left {
	background: url(/images/graphic_carousel_prev.gif) no-repeat scroll 0 0 transparent;
	margin-right: 4px;
}
#photoThumbContainer a.left:hover {
	background-position: 0 -10px;
}
#photoThumbContainer a.left:active {
	background-position: 0 -20px;
}


/* right */
#photoThumbContainer a.right {
	background: url(/images/graphic_carousel_next.gif) no-repeat scroll 0 0 transparent;		
	margin-left: 4px;
}

#photoThumbContainer a.right:hover {
	background-position: 0px -10px;
}
#photoThumbContainer a.right:active {
	background-position: 0px -20px;
}

/* items inside navigator */
#photoThumbContainer .pagerDots a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url(/images/graphic_carousel_pager.gif) 0 0 no-repeat;
	display: block;
	font-size: 1px;
	cursor: pointer;
}

/* mouseover state */
#photoThumbContainer .pagerDots a:hover {
	background-position: 0 -8px;
}

/* active state (current page state) */
#photoThumbContainer .pagerDots a.active {
	background-position: 0 -16px;
}