/*
 * Please feel free to edit this style sheet to fit your needs. Keep in mind that 
 * when you upgrade the plugin this will be reset to the new settings. To combat this
 * simply add the changes to your theme's stylesheet sheet instead. 
*/

/*The margin's above and below the player.*/
.wd-player {
	margin-top: 0;
	margin-bottom: 1em;
}

/*The background color for the player*/
.wd-stage, .wd-player object {
	background-color: #000000;
	/*Go here: http://html-color-codes.info/ to see what all the color codes are.*/
}
/*The gap between the video player and the list of thumbnails*/
.wd-thumb-tray {
	margin-top: 0;
}

/*The background color of the thumbs scroller*/
.wd-thumb-list-container {
    background-color: #373636;
    /*Gradient generated from: http://projects.korrelboom.com/gradient-generator/*/
    background: -moz-linear-gradient( top, rgba(49,49,49,1), rgba(20,20,20,1) );
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(49,49,49,1) ), color-stop( 1, rgba(20,20,20,1) ) );
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF313131,EndColorStr=#FF141414)";
}

/*The height of the thumbnails */
.wd-thumb {
	height: 60px;
}

/*The height and width of the and next/prev buttons. In most cases you'd want this the same as the thumbnail height*/
.wd-nav-prev, .wd-nav-next {
	height: 64px;
	width: 30px;
	line-height: 75px;
	background-color: #373636;
}
/*The background color to be used by the previous button on the thumb scroller*/
.wd-nav-prev {
    /*Gradient generated from: http://projects.korrelboom.com/gradient-generator/*/
    background: -moz-linear-gradient( top, rgba(49,49,49,1), rgba(20,20,20,1) );
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(49,49,49,1) ), color-stop( 1, rgba(20,20,20,1) ) );
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF313131,EndColorStr=#FF141414)";
}

/*The background color to be used by the next button on the thumb scroller*/
.wd-nav-next {
    /*Gradient generated from: http://projects.korrelboom.com/gradient-generator/*/
    background: -moz-linear-gradient( top, rgba(49,49,49,1), rgba(20,20,20,1) );
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(49,49,49,1) ), color-stop( 1, rgba(20,20,20,1) ) );
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF313131,EndColorStr=#FF141414)";
}
/*Set this to the same width as the next/prev butons above, but add 2 the total. Eg. If you've set the .wd-nav-prev to 30px above, then set padding to 32px.*/
ul.wd-thumb-list {
	padding-left: 32px;
	padding-right: 16px; /* This should be half of padding-left */
}

/*The border that the selected thumbnail gets*/
ul.wd-thumb-list .wd-active  {
	border: 1px solid white;
}

/*The button that slides the thumb tray down */
.wd-thumb-dropdown {
    background-image: url(../images/player_icon_down.png);
    height: 16px;
    width: 22px;
}
/*The button that slides the thumb tray up */
.wd-thumb-dropdown.wd-up-arrow {
    background-image: url(../images/player_icon_up.png);
}
/*The gap between the thumb list and the credit block*/
.wd-credits-container {
	margin-top: 0;
	text-align: left;
	height: 45px;
	border-top: 1px solid #2c2c2c;
	-moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
	background-color: #373636;
    /*Gradient generated from: http://projects.korrelboom.com/gradient-generator/*/	
	background: -moz-linear-gradient( top, rgba(20,20,20,1), rgba(55,54,54,1) );
	background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(20,20,20,1) ), color-stop( 1, rgba(55,54,54,1) ) );
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF141414,EndColorStr=#FF373636)";
}

/*The color of the credit block when the tray is down*/
.wd-credits-container, .wd-player .wd-credits-container.wd-active {
    background-color: #eaeaea;
    text-align: center;
    line-height: 40px;
}

/*The title of the video you are watching. Leaving this empty will use the default styls of your theme.*/
.wd-title {
	text-transform: none;
	padding: 0 0 0 6px;
	margin: 0;
	color: white;
	font-size: 12px;
}

/*The credit of the video you are watching. Leaving this empty will use the default styls of your theme.*/
.wd-credit {
	text-transform: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
	color: #999999;
}
/*This is the error message that gets shown if the feed is invalid for whatever reason.*/
.wd-error {
	background: #F7F7F7;
	border: 1px solid #DDDDDD;
	display: block;
	margin: 1em 0;
	padding: 20px 5px;
	color: #aa0000;
}


/*You don't should not edit anything below this, unless you know what you are doing.
 *---------------------------------------------------------
 */


.wd-player {
	overflow: hidden;
	line-height: 0;
}

.wd-player a {
    outline: none;
}

.wd-stage img, .wd-thumb-list img, img.wd-thumb {
	border: 0;
	padding: 0;
	margin: 0;
}
.wd-stage {
	position: relative;
}
.wd-stage video {
	margin: 0 auto;
}

/* Thumbnails */
.wd-thumb-dropdown {
    float: right;
}
.wd-thumb-tray {
    position: relative;
}
.wd-thumb-list-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}
ul.wd-thumb-list {
	list-style: none;
	margin: 0;
	overflow: hidden;
	width: 9999%;
	padding-top: 0;
	padding-bottom: 0;
}
ul.wd-thumb-list li {
    float: left;
	padding: 2px;
}
ul.wd-thumb-list li a {
    display: block;
}

/* Buttons */
.wd-nav-prev, .wd-nav-next {
	position: absolute;
	cursor: pointer;
	top: 0;
    z-index: 10;
    text-align: center;
}
.wd-nav-prev {
	left: 0;
}
.wd-nav-next {
	right: 0;
}
.wd-thumb-dropdown {
    position: absolute;
    right: 6px;
    top: 16px;
    display: none; /*This is hidden by default*/
}
.wd-thumb-dropdown:hover {
    cursor: pointer;
}
.wd-right-arrow, .wd-left-arrow {
    border-style:solid;
    border-width:10px;
    width:0;
    height:0;
    display: inline-block;
}
.wd-left-arrow {
    border-color: transparent #EAEAEA transparent transparent;
    margin-left: -10px;
}
.wd-right-arrow {
    border-color: transparent transparent transparent #EAEAEA;
    margin-right: -10px;
}

/* Credits */
.wd-credits-container {
	position: relative;
	z-index: 20;
}

/* Flash Fallback */
.wd-player #no-flash-content {
	line-height: 1;
	text-align: center;
}
.wd-player #no-flash-content p {
	text-align: left;
}
.wdp-chrome img, .wdp-flash img {
	display: inline;
	background: none;
	margin: 0 20px;
}

/* Special stuff to deal with hiding the thumb tray */
.hide-thumbs .wd-thumb-tray {
    height: 0;
    visibility: hidden;
}
.wd-player.hide-thumbs .wd-thumb-dropdown {
    display: block;
}

/* Slideshow Specfic Styles */
.wd-player.slideshow .wd-slideshow-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}
.wd-slideshow-image {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Starts hidden, is resized in jQuery and then displayed */
    display: none;
}
.mobile .wd-play-next, .mobile .wd-play-prev, .not-slideshow .wd-play-next, .not-slideshow .wd-play-prev {
    display: none;
}
.wd-play-next, .wd-play-prev {
    position: relative;
    height: 100%;
    width: 40%;
    z-index: 30;
    cursor: pointer;
}
.wd-play-next {
    float: right;
}
.wd-play-prev {
    float: left;

}
.wd-play-next.wd-active, .wd-play-prev.wd-active {
    cursor: pointer;
}

/* Theme Option 2 (Light Theme)
 *---------------------------------------------------------
 */
.theme2 .wd-nav-prev, .theme2 .wd-nav-next, .theme2 .wd-thumb-list-container {
    background-color: #dfdfdf;
    background: -moz-linear-gradient( top, rgba(245,245,245,1), rgba(223,223,223,1) );
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(245,245,245,1) ), color-stop( 1, rgba(223,223,223,1) ) );
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFF5F5F5,EndColorStr=#FFDFDFDF)";    
} 
.theme2 .wd-credits-container, .theme2 .wd-credits-container.wd-active {
    border-color: #efefef;
    background-color: #e4e4e4;
    background: -moz-linear-gradient( top, rgba(228,228,228,1), rgba(234,234,234,1) );
    background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(228,228,228,1) ), color-stop( 1, rgba(234,234,234,1) ) );
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFE4E4E4,EndColorStr=#FFEAEAEA)";
}
.theme2 .wd-left-arrow {
    border-color: transparent #5a5a5a transparent transparent;
} 
.theme2 .wd-right-arrow {
    border-color: transparent transparent transparent #5a5a5a;

}
.theme2 .wd-title {
    color: #333333;
}
.theme2 .wd-credit {
    color: black;
}

/* Theme Option 3 (White Theme)
 *---------------------------------------------------------
 */
.theme3 .wd-nav-prev, .theme3 .wd-nav-next, .theme3 .wd-thumb-list-container {
    background: white;
} 
.theme3 .wd-credits-container, .theme3 .wd-credits-container.wd-active {
    background: white;
    border: none;
    text-align: left;
}
.theme3 .wd-left-arrow {
    border-color: transparent #5a5a5a transparent transparent;
} 
.theme3 .wd-right-arrow {
    border-color: transparent transparent transparent #5a5a5a;

}
.theme3 .wd-title {
    color: #333333;
}
.theme3 .wd-credit {
    color: black;
}