/*
   mediaplayer.css
   Media Player Styles
   
   Created by Victor Nguyen on 2010-04-18.
   Copyright 2010 igloo digital. All rights reserved.
*/


/*MEDIAPLAYER*/

#media-wrapper {background:#000; color:#b3b3b3; padding:12px 11px 20px 11px; -moz-border-radius:12px; -webkit-border-radius:12px; -khtml-border-radius:12px; border-radius:12px; position:relative; min-height:512px; height:auto!important; height:512px;}
#media-wrapper.loading { background:#000 url('/images/mediaplayer/ajax-loader.gif') no-repeat center center;}

/*tabs/cat wrapper*/
#media-nav {padding-bottom:4px; position:relative; z-index:50;}

/*tabs*/
#media-tabs {float:left; width:372px;}
#media-tabs li {float:left;}
#media-tabs a {display:block; text-indent:-9999em; height:33px; background:url('/images/mediaplayer/bg-tabs.gif') no-repeat 0 0;}

#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl00_mediaTypeLink {width:80px; background-position:0 0;}
#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl00_mediaTypeLink:hover,
#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl00_mediaTypeLink.active {background-position:0 -33px;}
#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl01_mediaTypeLink {width:93px; background-position:-80px 0;}
#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl01_mediaTypeLink:hover,
#media-tabs a#main_0_content_1_mediaTypeRepeater_ctl01_mediaTypeLink.active {background-position:-80px -33px;}

/*duplicates of styles above to account for .NET's lovely tendency to change IDs depending on PageContent*/
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl00_mediaTypeLink {width:80px; background-position:0 0;}
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl00_mediaTypeLink:hover,
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl00_mediaTypeLink.active {background-position:0 -33px;}
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl01_mediaTypeLink {width:93px; background-position:-80px 0;}
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl01_mediaTypeLink:hover,
#media-tabs a#main_0_content_0_mediaTypeRepeater_ctl01_mediaTypeLink.active {background-position:-80px -33px;}



/*select category*/
#media-cats {float:right; width:372px; position:relative; z-index:50;}
#media-cats span {float:left; width:138px; padding:10px 8px 0 0; text-align:right; font-size:1.4em; color:#0084ce; font-family:'Interstate-RegularRegular',arial,sans-serif;}
#media-cats #media-cats-current {float:left; width:226px; height:33px; background:url('/images/mediaplayer/bg-media-cats-current.gif') repeat-x 0 0;}
#media-cats #media-cats-current a {float:left; width:208px; height:23px; padding:10px 0 0 18px; color:#fff; font-family:'Interstate-RegularRegular',arial,sans-serif; font-size:1.4em; background:url('/images/mediaplayer/bg-media-cats-current-a.gif') no-repeat 199px 10px;}
/*fixed category*/
#media-cats #fixed-cat-id {float:right; width:219px; height:25px; padding:8px 0 0 0;font-size:1.4em; color:#cecece; font-family:'Interstate-RegularRegular',arial,sans-serif;}
/*dropdown*/
#media-cats #media-cats-dropdown-wrapper {position:absolute; top:33px; right:0; z-index:50; width:214px; height:174px; border:1px solid #383838; background:#000002; padding:5px;}
#media-cats #media-cats-dropdown {height:174px; overflow-y:scroll;}
#media-cats #media-cats-dropdown li a {display:block; /*font-family:'Interstate-RegularRegular',arial,sans-serif;*/ font-size:1.2em; color:#878787; padding:8px 0 8px 12px; border-bottom:1px solid #333335;}
#media-cats #media-cats-dropdown li a:hover,
#media-cats #media-cats-dropdown li a.active {background:#333335; color:#fff; text-decoration:none;}

/*content wrapper*/
.media-content-wrapper {float:left; width:512px; height:288px; border:1px solid #3a3a3a; background:#000 url('/images/mediaplayer/ajax-loader.gif') no-repeat center center;}
#media-type-image .media-content-wrapper {height:385px; overflow:hidden;}

/*image holder*/
#media-image-wrapper {position:relative; z-index:30;}
#media-image-controls {position:absolute; background:#000; -moz-opacity:.80; filter:alpha(opacity=80); height:33px; border-top:1px solid #333941; top:352px; width:512px;}
#media-image-controls ul {padding:6px;}
#media-image-controls li {float:left; display:inline; margin-right:6px;}
#media-image-controls li a {display:block;}
#media-image-controls li a#media-image-controls-prev,
#media-image-controls li a#media-image-controls-next {text-indent:-9999em; background:url('/images/mediaplayer/gallery-nav.gif') no-repeat 0 0; height:20px; width:35px;}
#media-image-controls li a#media-image-controls-next {background-position:-35px 0;}
#media-image-controls li a#media-image-controls-download {font-size:1em; color:#fff; padding:5px 10px;}
#media-image-controls li#media-image-controls-lightbox-li {float:right;}
#media-image-controls li a#media-image-controls-lightbox {text-indent:-9999em; background:url('/images/mediaplayer/gallery-nav-lightbox.gif') no-repeat 0 0; width:23px; height:22px;}

/*share image*/
#media-image-share {position:absolute; background:transparent url('/images/mediaplayer/bg-share.gif') no-repeat 0 0; -moz-opacity:.80; filter:alpha(opacity=80); width:36px; height:64px; padding-top:19px; top:6px; left:473px;}
#media-image-share a {display:block; text-indent:-9999em; width:36px; height:20px; background-image:url('/images/mediaplayer/btn-share.gif'); background-repeat:no-repeat;}
#media-image-share a#media-image-share-link {background-position:0 0;}
#media-image-share a#media-image-share-link:hover {background-position:-36px 0;}
#media-image-share a#media-image-share-facebook {background-position:0 -20px;}
#media-image-share a#media-image-share-facebook:hover {background-position:-36px -20px;}
#media-image-share a#media-image-share-twitter {background-position:0 -40px;}
#media-image-share a#media-image-share-twitter:hover {background-position:-36px -40px;}
#media-image-link {position:absolute; background:#0c0c0c; -moz-opacity:.90; filter:alpha(opacity=90); width:437px; height:178px; top:47px; left:38px; color:#fff;}
#media-image-link .photo {float:left; width:200px; padding:20px 0 0 10px;}
#media-image-link .photo img {border:1px solid #999; margin-bottom:6px;}
#media-image-link .photo .title {font-size:1.1em;}
#media-image-link .info {float:right; width:210px;}
#media-image-link .info .intro {font-size:1.1em; float:right; display:inline; margin:5px 10px 0 0; width:200px; height:15px;}
#media-image-link .info .url {font-size:1.3em; float:right; display:inline; margin-right:10px; padding:10px; width:178px; height:91px; color:#fff; background:#333; border:1px solid #999; word-wrap:break-word;}
#media-image-link #btn-link-close {float:right; display:inline; margin:6px 10px 0 0; padding:4px 12px 5px 12px; background:#333; color:#fff; border:1px solid #999;}
#media-image-link #btn-link-close:hover {text-decoration:none; background:#555;}

/*no media message*/
.media-nomedia {padding:45px 230px 0 12px; height:243px; background:#000;}
.media-nomedia h3 {font-family:'Interstate-RegularRegular',arial,sans-serif; font-size:1.8em; color:#fff; font-weight:normal;}

/*media by cat list*/
.media-by-cat-list {float:right; width:226px;}

/*sort tabs (video only)*/
#media-video-cat-sort li {float:left;}
#media-video-cat-sort a {display:block; text-indent:-9999em; height:25px; background:url('/images/mediaplayer/bg-sort.gif') no-repeat 0 0;}

#media-video-cat-sort a#main_0_content_1_sortOrderRepeater_ctl00_sortOrderLink {width:82px; background-position:0 0;}
#media-video-cat-sort a#main_0_content_1_sortOrderRepeater_ctl00_sortOrderLink:hover,
#media-video-cat-sort .active a#main_0_content_1_sortOrderRepeater_ctl00_sortOrderLink {width:82px; background-position:0 -25px;}
#media-video-cat-sort a#main_0_content_1_sortOrderRepeater_ctl01_sortOrderLink {width:45px; background-position:-82px 0;}
#media-video-cat-sort a#main_0_content_1_sortOrderRepeater_ctl01_sortOrderLink:hover,
#media-video-cat-sort .active a#main_0_content_1_sortOrderRepeater_ctl01_sortOrderLink {width:45px; background-position:-82px -25px;}

/*duplicates of styles above to account for .NET's lovely tendency to change IDs depending on PageContent*/
#media-video-cat-sort a#main_0_content_0_sortOrderRepeater_ctl00_sortOrderLink {width:82px; background-position:0 0;}
#media-video-cat-sort a#main_0_content_0_sortOrderRepeater_ctl00_sortOrderLink:hover,
#media-video-cat-sort .active a#main_0_content_0_sortOrderRepeater_ctl00_sortOrderLink {width:82px; background-position:0 -25px;}
#media-video-cat-sort a#main_0_content_0_sortOrderRepeater_ctl01_sortOrderLink {width:45px; background-position:-82px 0;}
#media-video-cat-sort a#main_0_content_0_sortOrderRepeater_ctl01_sortOrderLink:hover,
#media-video-cat-sort .active a#main_0_content_0_sortOrderRepeater_ctl01_sortOrderLink {width:45px; background-position:-82px -25px;}

/*media list*/
.media-list {height:263px; border:1px solid #313131; overflow-y:scroll; overflow-x:hidden;}
.media-list.loading {background:url('/images/mediaplayer/ajax-loader.gif') no-repeat center center;}
.media-list li {}
.media-list li * {cursor:pointer;}
.media-list a {float:left; display:block; text-decoration:none; background:#020202 url('/images/mediaplayer/bg-media-item.gif') repeat-x 0 0; padding:8px 6px;}
.media-list a:hover {background:#1b1b1b; text-decoration:none;}
.media-list a.active {background:#292929;}
.media-list li img {float:left;}
.media-list li span {float:right; width:112px;}
.media-list li span.title {font-size:1.2em; color:#fff; padding-top:4px; word-wrap:break-word;}
.media-list li span.desc {display:none;}
/*image media list*/
#media-type-image .media-list {height:385px;}


/*official media badges*/
.media-list a .media-official {margin:42px 0 0 -73px;}
.media-list a .media-official {margin:42px 0 0 -73px;}
#media-related-scroll li a .media-official {margin-top:-12px;}



/*bottom area wrapper*/
.media-bottom-wrapper {min-height:140px; height:auto!important; height:140px;}

/*info*/
.media-info, body.community .media-info {padding:20px 273px 8px 2px;}
.media-info h2, body.community .media-info h2 {font-size:1.8em; font-weight:normal; color:#fff; font-family:'Interstate-RegularRegular',arial,sans-serif;}
.media-info h2 a, body.community .media-info h2 a {font-size:12px; font-weight:normal; font-family:Arial,Helvetica,sans-serif;}

/*related videos*/
#media-related {float:left; width:512px; height:128px; border:1px solid #3a3a3a;}
#media-related h3 {font-size:1.2em; font-weight:normal; color:#fff; font-family:'Interstate-RegularRegular',arial,sans-serif; padding:7px 3px 3px 3px;}
#media-related-scroll {width:512px; height:100px; overflow:hidden; background:#000 url('/images/mediaplayer/bg-media-related.gif') repeat-x 0 0; padding:6px 0 0 0;}
#media-related-scroll ul {}
#media-related-scroll li {padding:0 4px 5px 4px; float:left;}
#media-related-scroll li a {width:75px;}
#media-related-scroll li a img {border:1px solid #000;}
#media-related-scroll li a:hover img,
#media-related-scroll li a.active img {border-color:#979797;}
#media-related-scroll li a img.media-official,
#media-related-scroll li a:hover img.media-official {border:0;}
#media-related-scroll li a span.title, #media-related-scroll li a span.desc {display:none;}

/*share area*/
.media-share {width:183px; height:65px; position:absolute; bottom:60px; right:28px;}
.media-share p {width:165px; height:27px; text-indent:-9999em; background-repeat:no-repeat; background-position:0 0; margin:0 0 8px 4px;}
.media-share a {display:block; width:183px; height:30px; text-indent:-9999em; background:url('/images/mediaplayer/btn-media-share.gif') no-repeat 0 0;}

#media-share-video p {background-image:url('/images/mediaplayer/title-media-share-video.gif')}
#media-share-image p {background-image:url('/images/mediaplayer/title-media-share-image.gif')}