/*
 * 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 gap between the video player and the list of thumbnails*/
.wd-thumb-tray {
	margin-top: 0;
}

/*The background color of the thumb tray*/
.wd-thumb-tray {
    background-color: #373636;
}

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

/*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;
	background-color: #373636;
}

ul.wd-thumb-list {
	padding-left: 32px;
	padding-right: 22px; 
}

/*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;
	height: 45px;
	-moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}

/*The color of the credit block when the tray is down*/
.wd-credits-container, .wd-player {
    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;
	margin: 0;
	color: white;
}

/*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;
}
/*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;
}

/* The image used on for the play icon on the HTML5 player */
.wd-play-big-button {
    background: url(../images/controls_big_play_button.png);
    height: 72px;
    width: 72px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -36px;
    margin-left: -36px;
    z-index: 10;
}
.wd-player.mobile .wd-play-big-button {
    display: none;
}

/*You 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, .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;
    	line-height: 0;
    }
    ul.wd-thumb-list li {
        float: left;
    	padding: 2px;
    	text-align: center;
    }
    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;
    }
    .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;
        position: relative;
        top: 25px;
    }
    .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;
    	padding: 0 5px;
    }
    .wd-thumb-list .hover-credits {
        display: none;
    }
/* Flash Fallback */
    .wd-player #no-flash-content {
    	line-height: 1;
    	text-align: center;
    	padding: 10px;
    	color: white;
    }
    .wd-player #no-flash-content a {
        text-decoration: none;
    }
    .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;
        z-index: 20;
    }

/* Start the first grid slideshow image hidden, turn it on in JavaScript when it's ready */
    .wd-player.grid .wd-slideshow-image {
        visibility: hidden;
    }
    
    .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;
    }


/* 
 * Grid Player Overides.
 */

/* Wiredrive grid Styles */
    /* Hiding things */    
        .wd-player.grid {
            width: auto !important;
            height: auto;
        }
        .wd-player.grid .wd-nav-prev, .wd-player.grid .wd-nav-next {
            display: none;
        }
        .wd-player.grid.hide-thumbs .wd-thumb-tray {
            height: auto;
            visibility: visible;
        }
        .wd-player.grid .wd-thumb-tray {
            background: none;
        }
        .wd-player.grid .wd-credits-container {
            display: none;
        }
        
    
    /* Correcting Widths and Postioning */
        .wd-player.grid .wd-video-player {
            margin-bottom: 0;
        }
        .wd-player.grid ul.wd-thumb-list {
            padding: 0;
            font-size: 0;
            width: 101% !important;
        }
        .wd-player.grid .wd-thumb-list li {
            margin: 0 2px 2px 0;
            padding: 0;
            position: relative;
            line-height: 0;
            width: 179px;
            display: inline-block;
            float: none;
            /* IE Inline Block Fix */
            zoom: 1;
            *float: inline;

        }
        .wd-player.grid .wd-thumb {
            height: auto;
        }
        .wd-player.grid .wd-thumb-list .wd-active {
            border: none;
        
        }   
        .wd-player.grid .wd-stage {
            position: fixed;
            top: -999%;
            left: -999%;
            z-index: 100;
        }
        .wd-player.grid.ipad .wd-stage {
            display: none;
        }
    
    /* Credit Overlay and Grid Credits */            
        .wd-player.inline-grid .wd-title, .wd-player.inline-grid .wd-credit,
        .wd-player.grid .wd-title, .wd-player.grid .wd-credit {
            color: white;
            font-weight: bold;
            line-height: 1.2;
            word-wrap: break-word;
        }
        .inline-grid .hover-credits,
        .grid .hover-credits {
            padding: 5px;
            text-align: left;
            width: 170px;
        }
        .grid-credits {
            position: absolute;
            line-height: 1;
            left: 0;
            padding: 0 5px;
            width: 90%;
            bottom: auto;
            top: 100%;
        }
        .grid-credits .wd-title, .grid-credits .wd-credit {
            clear: left;
            float: left; 
            padding: 5px;
        }
        .grid-credits .wd-credit {
            padding: 0 5px 5px 5px;
        }
        .wd-thumb-list a {
            position: relative;
            text-decoration: none;
            overflow: hidden;
        }
        .wd-thumb-list li .hover-credits {
            position: absolute;
            background: black;
            opacity: 0.85;
            bottom: 0;
            left: 0;
        }

/* Grid Overlay Styles */
    #fade { /*--Transparent background layer--*/
    	display: none; /*--hidden by default--*/
    	background: black;
    	position: fixed; 
    	left: 0; 
    	top: 0;
    	width: 100%; 
    	height: 100%;
    	opacity: .75;
    	z-index: 50;
    }
    a.close {
        position: absolute;
    	height: 30px;
    	width: 30px;
    	display: block;
    	line-height: 30px;
    	font-size: 30px;
    	color: white;
    	text-align: right;
    	text-decoration: none;
        right: 0;
        padding: 5px 0 0;
        top: 100%;        
    }
    .wd-player.grid.slideshow .wd-stage {
        background: transparent;
    }
    .wd-player.grid .wd-play-prev, 
    .wd-player.grid .wd-play-next {
        height: 61px;
        width: 41px;
        position: absolute;
        top: 50%;
        margin-top: -30px;
        display: block !important;
        opacity: 0.2;
        cursor: default;
    }
    .wd-player.slideshow .wd-play-prev, 
    .wd-player.slideshow .wd-play-next {
        cursor: default;
    }
    .wd-player.grid .wd-play-prev.wd-active, 
    .wd-player.grid .wd-play-next.wd-active, 
    .wd-player.slideshow .wd-play-prev.wd-active, 
    .wd-player.slideshow .wd-play-next.wd-active {
        opacity: 1;
        cursor: pointer;        
    }
    .wd-player.grid .wd-play-prev {
        left: -150px;
        background: url(../images/player_icon_prev.png);

    }
    .wd-player.grid .wd-play-next {
        right: -150px;
        background: url(../images/player_icon_next.png);        
    }
    .wd-player.grid.slideshow .wd-play-prev {
        left: -10%;
    }
    .wd-player.grid.slideshow .wd-play-next {
        right: -10%;
    }
    
/* Box Thumb Option */
    .box-thumbs .wd-thumb-list li a {
        width: 179px;
        height: 179px;
        text-align: left;
    }
    .box-thumbs .wd-thumb {
        top: 50%;
        left: 50%;
        position: absolute;
        visibility: hidden;
    }

/* Inline-grid theme */
    .wd-player.inline-grid .wd-nav-prev, .wd-player.inline-grid .wd-nav-next {
        display: none;
    }
    .wd-player.inline-grid .wd-thumb-list {
        width: 100% !important;
        padding: 0;
    }
    .wd-player.inline-grid .wd-active {
        border: none;
    }
    .wd-player.inline-grid .wd-thumb {
        width: auto;
        height: auto;
    }
    .wd-player.inline-grid .wd-thumb-tray {
        margin-top: 20px;
        background-color: transparent;
    }
    .wd-player.inline-grid .wd-credits-container {
        display: none;
    }
    .wd-player.inline-grid .wd-active .hover-credits {
        display: block !important;
    }

/* Disable Thumbnail & Credits Options */
    .wd-player.disablethumbs .wd-thumb-tray, .wd-player.disablethumbs .wd-credits-container, .wd-player.disablethumbs.grid .hover-credits {
        display: none;
    }
    .wd-player.box-thumbs.grid .wd-thumb-tray {
        display: block;
    }
    .wd-player.disablethumbs.grid .wd-thumb-tray {
        display: block;
    }