/**
 * Vogue Video Diaries: An AJAXed up multiple video player scafolding made with XML/DOM/CSS/JS/jQuery/jCarousel
 * 
 * Summary: http://www.motochristo.com/index.php/projects/detail/vogue_video_player/
 * Demo: http://motochristo.com/projects/vogue
 * 
 * Copyright (c) 2007 Christopher Roberts (http://motoChristo.com)
 * All rights reserved.
 *
 * Built on top of the jQuery library and utilizing the jCarousel plug-in
 * http://jquery.com
 * http://sorgalla.com/jcarousel/
 *
 * Also built with the intention of rolling my own custom code into a jQuery plug-in tentatively named...
 * jMMShow 0.1.2 - Paint by photos/videos + coressponding metadata
 *
 * This page, vogueplayer.css, references DOM elements injected by vogueplayer.js into index.html
 *
 */

*{
	margin:0; padding:0;
}
a{
	text-decoration: none;
}
#vogueplayer_contents {
	margin-left:10px;	margin-right:10px; margin-top:20px;	font-family: Arial, Helvetica, sans-serif;
}
#vogueplayer_banner {
	margin-top:15px; margin-bottom:15px;
}
#vogueplayer_header h2 { 	/*title, i.e. Jennifer Connelly in red left-aligned above the paragragh*/
	font-family: "Times New Roman", Times, serif;	font-size: 30pt; font-style: italic; color: #cf141c; margin-left: 18px;	font-size:27px; margin-top:-3px;
}
#vogueplayer_header p {	/*description, i.e. For August, Vogue Diaries traveled around the world from London to Boca Raton and New... */
	font-family: Arial, Helvetica, sans-serif; margin-top: 4px; margin-left: 18px; margin-top: -1px; font-size: 8pt; color: #333; width: 560px; line-height: 12pt;
}
#vogueplayer_select_a_video_and_now_playing {
	margin-top:15px; font-size:14px; color: #ce1b22; font-weight: bold;
}
#vogueplayer_middle {
	margin-left:10px;
}
#vogueplayer_middle_right {
	float:left;	margin-left:35px;	margin-right:30px;
}
#vogueplayer_select_a_video {
	margin-left: 28px;
}
#vogueplayer_now_playing {
	margin-left: 68px;
}
#vogueplayer_scroll_bar {
	float:left;	margin-top:-14px; margin-left:6px;
}
.thumbnail_caption {
	background-color: #ce1b22; color: white; text-align:center; height:16px;
}
#vogueplayer_body {
	margin-top:-12px;
}
#vogueplayer_player_container{
	margin-left: 206px;
}
#vogueplayer_ptitle{
	font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 11pt; margin-bottom: 8px; margin-top: 6px; letter-spacing: 0px; font-weight: bold; color: #000; margin-left: 3px;
}
#vogueplayer_player{
	margin-top:12px; width:404px; height:345px;
}
#vogueplayer_plinkcopy{
	padding: 6px; margin-left:-8px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; color: #666; cursor: hand; cursor: pointer;
}
#vogueplayer_plinkcopy:a{
	text-decoration:none;
}
#vogueplayer_plinkcopy:hover{
	text-decoration:underline;
}

#vogueplayer_loading {
	width:600px; height:600px; background:transparent url("images/loading.gif") no-repeat 250px 250px;
}
#vogueplayer_loading p {
	padding:100px;
}
/**
 * jCarousel Scafolding
 * http://sorgalla.com/jcarousel/
 */

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
	position: relative;
}

.jcarousel-clip {
	z-index: 2;
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.jcarousel-list {
	z-index: 1;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

.jcarousel-item {
	float: left;
	list-style: none;
	/* We set the width/height explicitly. No width/height causes infinite loops. */
	width: 124px;
	height: 104px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
	z-index: 3;
	display: none;
}

.jcarousel-prev {
	z-index: 3;
	display: none;
}
/**
 * jCarousel Skin
 * http://sorgalla.com/jcarousel/
 */
.jcarousel-skin-tango.jcarousel-container {

}

.jcarousel-skin-tango.jcarousel-container-vertical {
	width: 124px;
	height: 340px;
	padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
	width: 124px;
	height: 342px;

}

.jcarousel-skin-tango .jcarousel-item {
	width: 122px;
	height: 106px;
	border:solid 1px red;
	cursor: hand;
	cursor: pointer;
	font-size:12px;
}

.jcarousel-skin-tango .jcarousel-item img {
	display:block;
	padding:1px 1px 1px 2px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
	margin-bottom: 9px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
	background: #fff;
	color: #000;
}

.jcarousel-skin-tango .jcarousel-next-vertical {
	position: absolute;
	bottom: 4px;
	left: 8px;
	width: 147px;
	height: 32px;
	cursor: hand;
	cursor: pointer;
	background: transparent url("images/down.gif") no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
	background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
	background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
	cursor: default;
	background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
	position: absolute;
	top: 7px;
	left: 8px;
	width: 147px;
	height: 32px;
	cursor: hand;
	cursor: pointer;
	background: transparent url("images/up.gif") no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
	background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
	background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
	cursor: default;
	background-position: 0 -96px;
}