.smallText, .rating{font-size:9px;}
.xxsmallText{font-size:9px;}
.largeText{font-size:14px;}
.xlargeText{font-size:16px;}
.xxlargeText{font-size:19px;}
.xxxlargeText{font-size:21px;}
.bold, .tagLinkOn{font-weight:bold;}
.italic{font-style:italic}
.grayText{color:#666;}
.dgText, .dg{color:#333;}
.smgrayText{font-size:11px;color:#666;}
.smdgText{font-size:11px;color:#333;}
.required{color:#FF0000;}
.redText, .red{color:#C00;}
.drText{color:#600;}
.dr{color:#900;}
.nowrap{white-space:nowrap;}
.smallgray{
text-decoration:none;
color:#666;
font-size:10px;
}
.label, .standardLabel, .normalLabel, .smallLabel, .xsmallLabel, .largeLabel{font-size:10px;font-weight:bold;color:#000000;}
.lightLabel{font-weight:bold;color:#000000;}
.standardLabel, .normalLabel{font-size:12px;}
.smallLabel{font-size:10px;}
.xsmallLabel{font-size:10px;}
.largeLabel{font-size:14px;}
.eLink{text-decoration:none;border-bottom:1px dotted #03C;color:#03c;cursor:hand;cursor:pointer;}
.hLink, .tagLink, .noul{color:#000000;font-size:12px;text-decoration:none;}
.hLink:hover, .dg:hover{text-decoration:underline;}
.hand, label{cursor:pointer;cursor:hand;}
a.title:link, a.title:active, a.title:visited, a.title:hover{font-family:Noto Serif;color:#CCFFFF;font-size:12px;font-weight:bold;}
a.title:hover{font-weight:bolder;}
.clear{clear:both;}
.clearL{clear:left;}
.clearR{clear:right;}
.spacer{clear:both;height:1px;font-size:1px;}
.alignR{text-align:right;}
.alignL{text-align:left;}
.alignC{text-align:center;}
.alignMid{vertical-align:middle;}
.alignTop{vertical-align:top;}
.alignBot{vertical-align:bottom;}
.floatL{float:left;}
.floatR{float:right;}
.hid, .hide{display:none;}
.nav{
font-family:Noto Serif;
font-size:14px;
font-weight:700;
}


.vListBox{
padding:0px 6px;
border:1px solid #CCC;
background:#EEE;
}
.vimgSm{
width:90px;
height:70px;
border:1px solid #CCC;
}
.vimg, .vimg130{
width:130px;
height:100px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg120{
width:120px;
height:90px;
border-radius:10px 10px 10px 10px;
}
.vimg110{
width:110px;
height:82px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg100{
width:100px;
height:75px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg90{
width:90px;
height:70px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg80{
width:80px;
height:60px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg70{
width:70px;
height:53px;
border:1px solid #999;
border-radius:10px 10px 10px 10px;
}
.vimg75{
width:75px;
height:56px;
border:1px solid #999;
}
.vimg60{
width:60px;
height:45px;
border:1px solid #999;
}
.vimg50{
width:50px;
height:38px;
border:1px solid #999;
}
.vimg45Wrapper{
overflow:hidden;
width:45px;
height:45px;
}
.vimg45Wrapper .img{
height:45px;
margin-left:-7px;
border:1px solid #999;
}
.videoIconWrapperInner,
.v120WrapperInner{
overflow:hidden;
width:120px;
height:72px;
border:1px solid #fff;
}
.videoIconWrapperInner img,
.v120WrapperInner img{
margin-top:-10px;
}
.videoIconWrapperOuter,
.v120WrapperOuter{
width:122px;
border:1px solid #999;
}
.v90WideEntry{
font-size:11px;
line-height:14px;
text-align:left;
width:92px;
}
.v90WrapperInner{
overflow:hidden;
width:90px;
height:54px;
border:1px solid #fff;
border-radius:5px 5px 5px 5px;
}
.v90WrapperInner img{
margin-top:-10px;
}
.v90WrapperOuter{
width:92px;
border:1px solid #999;
border-radius:5px 5px 5px 5px;
}
.v75WideEntry{
font-size:11px;
line-height:14px;
text-align:center;
width:72px;
}
.v75WrapperInner{
overflow:hidden;
width:70px;
height:40px;
border:1px solid #fff;
}
.v75WrapperInner img{
margin-top:-10px;
}
.v75WrapperOuter{
width:72px;
border:1px solid #999;
}
.v65WideEntry{
float:left;
}
.v65WrapperInner{
overflow:hidden;
width:65px;
height:65px;
border:1px solid #fff;
}
.v65WrapperInner img{
width:65px;
height:65px;
}
.v65WrapperOuter{
width:67px;
border:1px solid #999;
}
.v50WrapperInner{
overflow:hidden;
width:50px;
height:30px;
border:1px solid #fff;
}
.v50WrapperInner img{
margin-top:-10px;
}
.v50WrapperOuter{
width:52px;
border:1px solid #999;
}
.v45WideEntry{
float:left;
}
.v45WrapperInner{
overflow:hidden;
width:45px;
height:45px;
border:1px solid #fff;
}
.v45WrapperInner img{
width:45px;
height:45px;
}
.v45WrapperOuter{
width:47px;
border:1px solid #999;
}
.runtime,
.vruntime{
color:#000;
font-weight:bold;
font-size:11px;
}
.title,
.vtitle{
font-weight:bold;
font-size:11px;
}
.desc,
.vdesc{
margin:3px 0px;
font-size:12px;
}
.facets,
.vfacets{
margin-top:2px;
margin-bottom:3px;
line-height:13px;
font-size:11px;
}
.vfacets{
margin:3px 0px;
}
.vstill{
margin-bottom:2px;
}
.vtagLabel{
float:left;
}
.vtagValue{
margin-left:35px;
margin-bottom:3px;
}
.vTable{
border-spacing:0px;
padding:0px;
}
.vTable td{
vertical-align:top;
}
.vTable .vinfo{
padding-left:8px;
}
.vInfo{
padding-left:20px;
font-size:11px;
padding-top:1px;
line-height:1.4em;
}
.vtitlelink{
font-weight:bold;
text-decoration:none;
font-size:15px;
}
a.vtitlelink:hover{
text-decoration:underline;
}
.vEntry{
padding:10px 0px;
border-bottom:1px dotted #999;
}
.vDetailEntry{
clear:left;
padding:8px 0px;
border-top:1px dashed #999;
}
.vDetailEntry:first-child{
border-top:0;
}
.vDetailEntry table{
border-spacing:0px;
padding:0px;
}
.vDetailEntry td{
vertical-align:top;
}
.vDetailEntry .image{
margin-right:12px;
}
.vDetailEntry .tagLabel{
float:left;
}
.vDetailEntry .tagValue{
margin-left:35px;
margin-bottom:3px;
}
.vDetailEntry .tagTable{
border-spacing:0px;
padding:0px;
margin-bottom:3px;
}
.vDetailEntry .tagTable td{
font-size:11px;
vertical-align:top;
}
.v120vEntry{
width:120px;
margin-bottom:10px;
}
.v120vEntry .vstill{
margin-bottom:4px;
}
.v120vEntry .vimg{
width:120px;
height:90px;
border:1px solid #999;
}
.v90hEntry{
clear:left;
}
.v90hEntry .vstill{
float:left;
}
.v90hEntry .vimg{
width:90px;
height:70px;
border:1px solid #999;
}
.v90hEntry .vinfo{
margin-left:96px;
}




.v120WrapperInner .quicklist-inlist{
width:118px;
}
.v90WrapperInner .quicklist-inlist{
width:87px;
}
.v90WrapperInner .addtoQL90{
margin-left:1px;
}
.video-thumb-large .quicklist-inlist{
width:158px;
margin-top:10px;
}


.watch-discoverbox-grid-view .watch-discoverbox-list-facet,
.watch-discoverbox-grid-view .watch-discoverbox-list-facet-alt,
.watch-discoverbox-grid-view .watch-discoverbox-divider,
.browseGridView .vldupe,
.browseGridView .vlepisode,
.browseGridView .vlalt-query{
display:none;
}

.watch-discoverbox-list-view .watch-discoverbox-list-facet,
.watch-discoverbox-list-view .watch-discoverbox-divider,
.searchView .vladded{
display:block;
}
.browseListView .vlepisode.showepisode .vlepisode-hidden{
display:inline;
}
.watch-discoverbox-divider{
clear:both;
margin-bottom:3px;
margin-right:7px;
padding-bottom:3px;
border-bottom:1px dotted #CCC;
}
.searchView .vlcategory{
margin-top:6px;
}
.watch-discoverbox-list-view .watch-discoverbox-list-facet-alt{
display:inline;
}
.watch-discoverbox-grid-view .watch-discoverbox-facets{
line-height:14px;
clear:left;
}
.watch-discoverbox-list-view,
.watch-discoverbox-grid-view{
padding-top:0px;
}
.watch-discoverbox-list-view .watch-discoverbox,
.watch-discoverbox-grid-view .watch-discoverbox{
padding-top:7px;
overflow:auto;
}
.watch-discoverbox-grid-view .watch-discoverbox-entry,
.watch-discoverbox-list-view .watch-discoverbox-thumb{
float:left;
}
.watch-discoverbox-grid-view .watch-discoverbox-grid-divider{
clear:left;
}
.watch-discoverbox-grid-view .watch-discoverbox-entry{
margin-right:10px;
margin-bottom:10px;
width:90px;
}
.watch-discoverbox-grid-view .vtitle{
font-size:11px;
font-weight:bold;
}
.watch-discoverbox-grid-view .watch-discoverbox-username{
font-size:11px;
font-weight:normal;
display:block;
}
.watch-discoverbox-list-view .watch-discoverbox-facets{
margin-left:100px;
margin-right:5px;
}
.browseListView .vlfacets,
.membersListView .vlfacets{
font-size:11px;
border-left:1px solid #bbb;
margin-left:5px;
padding-left:5px;
line-height:14px;
float:left;
width:135px;
}
.membersListView.channelOnebox .vlfacets{
width:60px;
}
.searchView .vlfacets{
width:120px;
}
.membersListView .vlfacets{
height:65px;
}
.browseGridView .vlfacets,
.membersGridView .memberContainer{
margin:3px 0px;
font-size:11px;
line-height:13px;
}
.browseListView .vlfacets span,
.browseListView .vlfacets div{
line-height:15px;
}
.membersListView .vlfacets span,
.membersListView .vlfacets div{
line-height:13px;
}
.browseListView .vlfacets div img{
margin-top:2px;
margin-bottom:3px;
}
.browseGridView .video-thumb-duration-rating div{
float:right;
margin-top:1px;
}
.browseGridView .video-thumb-duration-rating .runtime{
float:left;
margin-top:0px;
}
.membersGridView .memberContainer{
margin-bottom:15px;
}
.membersGridView .vltitle{
padding-bottom:3px;
font-weight:bold;
}
.membersListView .memberContainer{
padding:14px 0px;
border-bottom:1px dotted #bbb;
}
.membersListView.channelOnebox .memberContainer{
padding:2px 0px;
border-bottom:0px;
}
.browseGridView .vlfacets a{
color:#333;
}
.browseGridView .vlshortTitle{
height:30px;
overflow:hidden;
}
.browseListView .vllongTitle{
overflow:hidden;
}
.browseListView .vlclearaltl{
clear:left;
}
.browseListView .vlentry{
margin-top:0px !important;
padding-top:10px;
}
html > body .browseListView .vlentry{
padding-top:0px;
margin-bottom:10px;
}
.browseListView .vlentry > .vlclearaltl{
height:0;
}
.browseGridView .vlfrom,
.browseListView .vlfrom{
overflow:hidden;
width:85px;
padding-left:1px;
display:block;
float:left;
}
.browseGridView .vlfromlbl,
.browseListView .vlfromlbl{
display:block;
float:left;
}
.memberListGroupType{
font-weight:bold;
color:#333;
}
.membersGridView .vlfacets{
margin-top:2px;
}
#viewTypeContainer{
font-size:12px;
color:#666;
padding:0px 10px;
}
#viewTypeContainer div{
text-align:right;
float:right;
width:150px;
line-height:14px;
vertical-align:middle;
}
#viewTypeContainer img{
margin:0;
vertical-align:top;
}
#searchViews > img,
#searchViews > a > img{
margin-top:-2px;
}
.searchView .vldupe a{
color:#666;
font-size:11px;
}
.browseListView .vlalt-query{
height:40px;
font-size:130%;
}
.browseListView .vlalt-query a{
font-weight:bold;
font-style:italic;
}

.expand-panel .expand-content{
display:none;
}
.expand-panel.expanded .expand-content{
display:block;
}
.expand-panel .collapse-content{
display:block;
}
.expand-panel.expanded .collapse-content{
display:none;
}



#watch-this-vid{
float:left;
width:480px;
}
#watch-other-vids{
float:right;
width:360px;
}
.watch-wrapper{
margin-bottom:10px;
}
.watch-body{
border:1px solid #CCC;
border-radius: 0px 10px 10px 10px;
margin-top:5px;
margin-bottom:20px;
}
.watch-tabs{
width:478px;
}

.watch-tabs .watch-tab-sel{
background:white;
border-bottom:0;
color:#000;
}
.watch-tabs td a{
text-decoration:none;
}
.watch-tabs td:hover,
.watch-tabs td:hover a,
.watch-tabs td a:hover{
text-decoration:underline;
cursor:hand;
cursor:pointer;
}
.watch-tabs td.watch-tab-sel:hover,
.watch-tabs td.watch-tab-sel:hover a,
.watch-tabs td.watch-tab-sel a:hover,
.watch-tabs td.disabled:hover,
.watch-tabs td.disabled:hover a,
.watch-tabs td.disabled a:hover{
text-decoration:none;
cursor:default;
}
.watch-tabs .watch-tab-sel a{
color:#000;
}
.watch-tabs .watch-tab-first{
border-left:0;
}
.watch-tab-contents{
clear:left;
padding:7px;
}
.watch-tab-contents .watch-tab-body{
display:none;
}
.watch-tab-contents .watch-tab-sel{
display:block;
}
#watch-checker-div{
position:absolute;
top:-100px;
left:-100px;
}
#watch-noplayer-div{
padding:20px;
font-size:14px;
font-weight:bold;
}
#watch-vid-title{
font-size:18px;
font-weight:bold;
margin:10px 0px 5px 0px;
}
#watch-highlight-racy-box{
padding:2px 5px;
border:1px solid #FC3;
text-align:center;
font-size:11px;
}
#watch-video-response{
background:#FFC;
border:1px solid #FC3;
font-weight:bold;padding:5px;
margin:5px 0px;
}
#watch-actions-area{
margin:10px 0px;
border:1px solid #ccc;
text-align:center;
}
body.not-english .watch-action-text,
body.not-english #watch-tab-commentary,
body.not-english #watch-tab-stats{
font-size:12px;
}
body.not-english .watch-tabs td{
height:34px;
line-height:34px;
}
#watch-actions-area .watch-tab-contents{
padding:0;
}
#watch-actions-area .watch-tabs td:hover .watch-action-text,
#watch-actions-area .watch-tabs a:hover .watch-action-text{
text-decoration:underline;
}
#watch-actions-area .watch-tabs td.watch-tab-sel:hover .watch-action-text,
#watch-actions-area .watch-tabs td.disabled:hover .watch-action-text,
#watch-actions-area .watch-tabs td:hover,
#watch-actions-area .watch-tabs td a:hover,
#watch-actions-area .watch-tabs td:hover a{
text-decoration:none;
}
#watch-actions-area .watch-tabs td.disabled .watch-action-text{
color:#999;
}
#watch-actions-area .watch-action-result{
display:none;
padding:10px;
background-color:#d1f0b3;
font-weight:bold;
text-align:center;
margin:5px;
}
#watch-actions-area .watch-more-action{
display:none;
padding:5px 10px;
text-align:left;
}
#watch-actions-area .watch-login-action{
margin:5px;
}
#watch-actions-area .watch-action-result .close,
#watch-actions-area .watch-more-action .close,
#watch-actions-area .watch-login-action .close{
float:right;
font-size:11px;
padding-bottom:1px;
}
#watch-actions-area .watch-action-result .close{
font-weight:normal;
}
#watch-actions-area .watch-more-action .header{
font-weight:bold;
font-size:14px;
border-bottom:1px solid #999;
padding-bottom:5px;
margin-bottom:10px;
}
#watch-actions-area .watch-login-action{
display:none;
padding:10px;
height:40px;
background:#FFAEAE;
font-weight:bold;
text-align:center;
}
#watch-actions-area .watch-more-action-share{
display:none;
padding:5px 10px;
text-align:left;
background:#fff;
}

#watch-action-share{
background-position:-326px 0px;
}
.watch-tab-sel #watch-action-share,
#watch-tab-share:hover #watch-action-share,
#watch-action-share-link:hover #watch-action-share,
#watch-action-share:hover{
background-position:-326px -20px;
}
#watch-action-favorite{
background-position:-267px 0px;
}
.watch-tab-sel #watch-action-favorite,
#watch-tab-favorite:hover #watch-action-favorite,
#watch-action-favorite-link:hover #watch-action-favorite,
#watch-action-favorite:hover{
background-position:-267px -20px;
}
#watch-tab-favorite.disabled #watch-action-favorite,
#watch-tab-favorite.disabled:hover #watch-action-favorite,
#watch-tab-favorite.disabled #watch-action-favorite:hover{
background-position:-267px 0px;
}
#watch-action-playlists{
background-position:-295px 0px;
}
.watch-tab-sel #watch-action-playlists,
#watch-tab-playlists:hover #watch-action-playlists,
#watch-action-playlists-link:hover #watch-action-playlists,
#watch-action-playlists:hover{
background-position:-295px -20px;
}
#watch-action-flag{
background-position:-358px 0px;
}
.watch-tab-sel #watch-action-flag,
#watch-tab-flag:hover #watch-action-flag,
#watch-action-flag-link:hover #watch-action-flag,
#watch-action-flag:hover{
background-position:-358px -19px;
}
#watch-tab-flag.disabled #watch-action-flag,
#watch-tab-flag.disabled:hover #watch-action-flag,
#watch-tab-flag.disabled #watch-action-flag:hover{
background-position:-358px 0px;
}
#watch-action-flag-link.disabled .watch-action-text{
color:#ccc;
}
#watch-actions-area #watch-add-faves{
background-color:#fff;
}
#watch-actions-area #watch-add-faves,
#watch-actions-area #watch-remove-faves{
margin-bottom:0;
}
#watch-add-faves-result a{
text-decoration:none;
}
#watch-add-faves-result a:hover{
text-decoration:underline;
}
#watch-add-to-faves-switch{
margin-left:162px;
padding:5px 0;
}
#watch-infringe-div{
margin-top:12px;
}
#watch-infringe-div .errorBox{
float:left;
margin:0 8px 1em 0;
border:none;
}
#watch-audio-stats{
clear:both;
border:1px solid #CCCCCC;
padding:5px;
}
#watch-audio-stats h4{
font-size:16px;
margin:0 0 5px 0;
}
#watch-audio-stats a{
margin-left:15px;
}
#watch-audio-stats dl{
margin:0 0 0 15px;
}
#watch-audio-stats dt{
float:left;
width:5em;
padding:0;
}
#watch-audio-stats dd{
margin-bottom:.25em;
padding:0;
}
#watch-ratings-views{
border:1px solid #CCC;
margin-top:10px;
padding:5px;
line-height:20px;
}
#watch-rating-div,
#watch-views-div{
float:left;
}
#watch-rating-div{
width:280px;
}
#watch-rating-div.ratingSingleline{
overflow:hidden;
}
#watch-views-div{
width:188px;
overflow:hidden;
}
#watch-ratings-views .statLabel{
margin-right:4px;
font-size:16px;
font-weight:bold;
}
body.not-english #watch-ratings-views .statLabel{
font-size:12px;
}
#watch-rating-div #ratingWrapper{
width:225px;
float:left;
}
#watch-rating-div.ratingMultiline #ratingWrapper{
width:197px;
}
#watch-rating-div.ratingMultiline #ratingMessage{
width:150px;
}
html > body #watch-rating-div.ratingMultiline #ratingMessage{
width:275px;
}
#watch-rating-div.ratingSingleline #ratingMessage{
float:left;
line-height:22px;
}
#watch-rating-div.ratingMultiline #ratingMessage{
clear:left;
line-height:20px;
}
#watch-rating-div #ratingStars{
margin-right:10px;
}
#watch-rating-div #ratingMessage{
font-size:11px;
color:#666;
padding-left:1px;
height:20px;
}
#watch-ratings-views #ratingMessage a{
text-decoration:none;
}
#watch-ratings-views #ratingMessage a:hover{
text-decoration:underline;
}
#watch-ratings-views .ratedMessage{
color:#000;
display:inline-block;
padding:0 3px;
}
#watch-view-count{
font-size:16px;
}
body.not-english #watch-view-count{
font-size:12px;
}
#watch-annotations{
font-size:11px;
}
#watch-annotations a{
text-decoration:none;
}
#watch-annotations a:hover{
text-decoration:underline;
}
#watch-annotations-learn img{
vertical-align:middle;
}
#watch-video-quality-setting,
#watch-annotations{
clear:right;
float:right;
width:188px;
text-align:right;
line-height:17px;
}
#watch-video-quality-setting{
line-height:16px;
}
#watch-video-quality-setting #watch-low-quality-link,
#watch-video-quality-setting.high #watch-high-quality-link{
display:none;
}
#watch-video-quality-setting.high #watch-low-quality-link{
display:inline;
}
#watch-low-quality-link,
#watch-high-quality-link{
font-weight:bold;
}
#watch-some-stats{
color:#666;
width:100%;
}
#watch-some-stats td{
padding:5px 0;
}
#watch-some-stats .lightLabel{
color:#666;
font-weight:normal;
}
#watch-some-stats .watch-stat{
font-weight:bold;
color:#000;
}
#watch-recent-ratings{
margin-top:5px;
padding:7px 7px 0 15px;
}
.watch-recent-rating-entry{
float:left;
margin-bottom:10px;
width:110px;
}
#watch-video-provided-by{
margin-top:5px;
padding-top:5px;
padding-left:5px;
border-top:1px solid #ccc;
}
#watch-video-provided-by span{
font-weight:bold;
}
#watch-honors .expand-content,
#watch-refer-div .expand-content{
font-size:11px;
}
#watch-honors .expand-content{
padding-left:20px;
}
#watch-honors .statItem{
padding-top:3px;
}
#watch-refer-div .header{
background-color:#E6EBEF;
padding:3px 0;
margin:3px 0;
font-weight:bold;
color:#666;
}
#watch-refer-div #watch-refer-list{
padding-left:20px;
}
#watch-refer-div .watch-ref-item,
#watch-refer-div #watch-noref-item{
padding-left:6px;
padding-right:20px;
float:left;
}
#watch-refer-div .watch-ref-item{
width:75px;
}
#watch-map-div{
padding-left:20px;
font-size:11px;
}
#watch-linking-sites-disabled{
margin-bottom:4px;
margin-left:15px;
}
#watch-active-sharing{
margin:10px 0;
border:1px solid #ccc;
padding:7px;
}
#watch-active-sharing-header{
font-size:12px;
font-weight:bold;
padding-bottom:5px;
}
#watch-active-sharing-header-viewall,
#watch-active-sharing-header-viewsome{
font-size:11px;
font-weight:normal;
color:#666;
}
.expand-panel #watch-active-sharing-header-viewsome.expand-content{
display:none;
}
.expand-panel.expanded #watch-active-sharing-header-viewsome.expand-content{
display:inline;
}
.expand-panel #watch-active-sharing-header-viewall.collapse-content{
display:inline;
}
.expand-panel.expanded #watch-active-sharing-header-viewall.collapse-content{
display:none;
}
#watch-active-sharing-count{
margin-left:3px;
color:#666;
}
.watch-active-sharing-user{
float:left;
padding:2px 10px 2px 0px;
font-weight:bold;
font-size:14px;
}
.watch-ie6fix{
float:left;
width:100%;
}
.watch-sharetab-options{
padding:10px 5px 0px 0px;
float:right;
clear:right;
text-align:right;
background-color:rgb(255, 255, 255);
}
.watch-sharetab-options-txt{
padding:0px 0px 10px 0;
}
.watch-sharetab-options-txt a{
border-bottom:1px dotted rgb(204, 204, 204);
text-decoration:none;
}
.watch-sharetab-options-txt a:hover{
text-decoration:underline;
}
.watch-shareopts-sectitle{
border-top:1px solid rgb(204, 204, 204);
padding:10px 0px 5px 10px;
font-weight:bold;
}
.watch-shareopts-logintxt{
float:left;
font-weight:bold;
}
.watch-shareopts-signup{
float:right;
padding-right:10px;
padding-top:20px;
font-size:11px;
font-weight:bold;
}
.watch-shareopts-loginforgot{
padding:10px 0px 5px 10px;
font-size:11px;
border-bottom:1px dotted #999;
}
.watch-shareopts-googleacct{
text-align:center;
font-weight:bold;
font-size:11px;
padding:10px;
}
.watch-shareopts-pad10{
padding:10px;
}
#watch-share-video-div{}
#watch-share-video-div #sendMessage{
padding-top:5px;
}
#watch-share-video-div #sendSMS{
padding-top:5px;
border-top:1px dashed #999;
}
#watch-share-video-div #aggregators{
margin:15px 0px 0px 0px;
padding:10px 0px;
border-top:1px dashed #999;
border-bottom:1px dashed #999;
}
#watch-share-video-div .aggregator{
float:left;
padding-left:15px;
font-size:10px;
}
#watch-share-video-div .edit-btn{
float:left;
margin-left:5px;
font-size:11px;
color:#666;
}
#watch-share-video-div .edit-btn a{
padding-top:2px;
border-bottom:1px dotted rgb(204, 204, 204);
}
#watch-share-video-div .sec-header{
font-weight:bold;
clear:both;
padding:10px 0px 3px 0px;
}
#watch-post-blog{
padding:10px 0px;
}
#watch-post-blog td{
vertical-align:top;
}
#watch-post-blog label{
width:100px;
color:#666;
font-weight:bold;
margin:3px 8px 8px 0px;
}
#watch-share-video-div .main{
padding:0px 10px 10px 20px;
width:460px;
}
#watch-post-blog .fieldDiv{
width:305px;
margin:0px 0px 4px 0px;
}
#watch-post-blog .field,
#watch-post-blog .txtarea{
width:367px;
}
#watch-post-blog .action-area{
margin:10px 0px 10px -6px;
}
#watch-post-blog .setup{
margin:10px 0px 5px 10px;
}
#watch-share-blog-quick{
margin-bottom:10px;
}
#watch-share-blog-quick .main{
padding:0px 10px 10px 20px;
width:460px;
}
#watch-share-blog-quick .sec-header{
font-weight:bold;
clear:both;
padding:10px 0px 3px 0px;
}
.watch-recent-shares-div{
margin:8px 10px 5px;
float:left;
width:20%;
}
.watch-recent-share{
margin:0px 0px 5px;
white-space:nowrap;
}
.watch-recent-share a{
text-decoration:none;
}
.watch-recent-share img{
vertical-align:text-bottom;
}
.watch-recent-share a:hover span{
text-decoration:underline;
}
#watch-flag-menu{
position:relative;
z-index:1000;
}
#watch-flag-menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#watch-flag-menu ul ul{
top:23px;
left:0;
width:220px;
height:0;
position:absolute;
visibility:hidden;
}
#watch-flag-menu ul ul ul{
top:0;
left:221px;
width:220px;
}
#watch-flag-menu li{
width:220px;
float:left;
position:relative;
}
#watch-flag-menu a,
#watch-flag-menu a:visited{
display:block;
background-color:#fff;
color:#000;
width:210px;
height:auto;
border:1px solid #bbcccc;
border-width:0 1px 0 1px;
padding:4px 5px 4px 5px;
line-height:1.2em;
text-decoration:none;
font-weight:normal;
}

#watch-flag-menu ul ul a.sub,
#watch-flag-menu ul ul a.sub:visited,
#watch-flag-menu ul ul ul a,
#watch-flag-menu ul ul ul a:visited{
background-color:#fff;
}
#watch-flag-menu a:hover,
#watch-flag-menu:hover > a,
#watch-flag-menu ul ul a.sub:hover,
#watch-flag-menu ul ul:hover > a.sub,
#watch-flag-menu ul ul ul a:hover{
background-color:#d7deed;
}
#watch-flag-menu a:hover,
#watch-flag-menu:hover > a{
color:#000;
}
.watch-time-field{
width:1.8em;
text-align:right;
height:1em;
}
.watch-optional-box{
padding:5px;
color:#505050;
background-color:#d8e0fa;
}
#watch-comments-stats{
border:1px solid #ccc;
margin-top:10px;
}
#watch-tab-commentary{
width:239px;
}
#watch-tab-stats{
width:238px;
}
#watch-video-responses-children{
margin-left:-7px;
padding-top:7px;
width:471px;
}
html > body #watch-video-responses-children{
width:478px;
}
#watch-video-responses-children .RightSingleArrow{
position:relative;
right:-7px;
}
html > body #watch-video-responses-children .RightSingleArrow{
right:0;
}
.watch-video-response-duration{
color:#000;
}
.watch-video-response{
float:left;
width:98px;
margin-right:2px;
text-align:center;
font-size:10px;
}
#watch-video-responses-actions{
text-align:center;
font-weight:bold;
padding-top:5px;
}
#watch-video-responses-none{
text-align:center;
padding-top:5px;
}
#watch-comments-summary{
text-align:center;
color:#666;
}
#watch-comments-summary span{
color:#000;
font-weight:bold;
}
#watch-comments-numresponses{
margin-right:20px;
}
#watch-comment-post-comment{
float:right;
text-align:right;
padding-bottom:1px;
}
#watch-comment-filter{
margin:10px 0;
}
#watch-comment-view-all{
font-weight:bold;
margin-top:10px;
}
.watch-comment-entry{
clear:both;
margin-top:6px;
padding-top:7px;
padding-bottom:4px;
border-top:1px solid #efefef;
}
html > body .watch-comment-entry{
padding-bottom:0;
}
.watch-comment-entry-reply{
margin-left:10px;
padding-left:2px;
border-left:3px solid #e6e6e6;
}
.watch-comment-head,
.watch-comment-head-hidden{
background-color:white;
padding:0 4px 4px 4px;
}
.watch-comment-head-link{
margin-left:8px;
font-size:11px;
visibility:hidden;
}
.watch-comment-auth{
font-weight:bold;
text-decoration:none;
}
.watch-comment-auth:hover{
text-decoration:underline;
}
.watch-comment-time{
color:#666;
}
.watch-comment-info{
float:left;
}
.watch-comment-voting,
.watch-comment-voting-off{
width:75px;
text-align:right;
float:right;
}
.watch-comment-auth-head{
background-color:#FFC;
padding:4px;
}
.watch-comment-marked-spam{
border-top:1px solid #c1c1c1;
margin-top:7px;
padding-top:10px;
}
.watch-comment-spam{
background-color:#FFE;
padding:4px;
}
.watch-comment-body{
margin-top:4px;
margin-left:4px;
width:75%;
}
.watch-comment-action{
margin-top:0;
text-align:right;
font-size:11px;
padding-top:3px;
float:right;
padding-bottom:1px;
}
.watch-comment-voting a{
color:#03c;
cursor:pointer;
cursor:hand;
}
.watch-comment-action a,
.watch-comment-head-link{
text-decoration:none;
border-bottom:1px dotted #03C;
color:#03c;
cursor:pointer;
cursor:hand;
}
.watch-comment-score{
font-size:11px;
font-weight:bold;
}
.watch-comment-msg{
float:right;
font-size:11px;
color:#666;
}
.watch-comment-green{
color:green;
}
.watch-comment-gray{
color:gray;
}
.watch-comment-red{
color:#f33;
}
#watch-comment-post{
margin-top:12px;
}
.watch-comment-pagination{
font-size:11px;
font-weight:bold;
text-align:center;
padding:1px;
margin-top:20px;
background-color:#dedede;
}
.watch-comment-pnum{
padding:0px 4px;
}
.watch-comment-char-count{
border:0;
width:50px;
}
#watch-comment-limit-box{
margin-bottom:30px;
}
#watch-comment-limit-box .header{
background-color:#f8f3d6;
padding:5px;
}
#watch-comment-limit-box .body{
background-color:#fbf9e8;
padding:5px;
}
#watch-comment-captcha{
text-align:center;
margin:0 auto 0 auto;
width:400px;
}
#watch-comment-captcha .watch-captcha-input{
width:260px;
padding-top:15px;
float:left;
}
#watch-comment-captcha .watch-verification-image{
width:120px;
text-align:center;
float:left;
}
.watch-comments-tooltip{
position:absolute;
background-color:#E7E7E7;
padding:3px;
border:1px solid #CCC;
width:220px;
z-index:2;
display:none;
}
.watch-comment-spam-bug{
font-weight:bold;
text-align:left;
margin-left:0px;
padding:1px 3px;
border-top:1px dotted #c00;
border-bottom:1px dotted #c00;
color:#c00;
display:none;
float:right;
}
.watch-comment-down,
.watch-comment-down-on,
.watch-comment-down-hover,
.watch-comment-up,
.watch-comment-up-on,
.watch-comment-up-hover{
width:19px;
height:19px;
border:0px;
vertical-align:bottom;
}

#watch-channel-vids-div{
background:#EEE;
border:1px solid #CCC;
}
#watch-channel-brand-cap{
text-align:center;
}
#watch-channel-brand-div{
padding:4px 14px;
margin:0px 0px 5px 0px;
background-color:#fff;
border:1px solid #ccc;
display:none;
}
#watch-channel-vids-top{
padding:0 8px;
}
#watch-channel-icon{
margin:8px 5px 0px 0px;
float:left;
}
#watch-channel-stats{
line-height:18px;
margin-top:6px;
float:left;
margin-left:5px;
width:160px;
}
.watch-channel-stat{
color:#999;
}
#watch-channel-videos{
font-weight:bold;
}
#watch-channel-stats a{
text-decoration:none;
font-weight:bold;
}
#watch-channel-stats a:hover{
text-decoration:underline;
}
.watch-channel-subscribe{
float:right;
margin-top:3px;
height:23px;
padding-top:28px;
}
#watch-video-details .collapse-content,
#watch-video-details .expand-content{
margin-top:7px;
}
#watch-video-details .expand-content{
position:relative;
}
#watch-video-details-inner{
margin:8px 6px;
border-top:1px solid #CCC;
}
html > body #watch-video-details-inner{
margin:8px;
}
.watch-video-added{
font-weight:bold;
margin-right:10px;
}
#watch-video-owner{
background:#e4edfc;
padding:7px;
margin-top:-11px;
position:relative;
margin-bottom:5px;
border:1px solid #a4b0d6;
}
#watch-video-owner-header{
font-size:13px;
font-weight:bold;
}
.watch-video-owner-action{
float:left;
position:relative;
margin:5px 7px 5px 0;
white-space:nowrap;
}
.watch-video-desc{
padding:5px 0px;
}
#watch-video-tags-div{
padding-top:5px;
}
#watch-video-tags{
width:280px;
}
.watch-extra-desc{
font-size:11px;
font-weight:bold;
color:#333;
border-top:1px solid #CCC;
padding-top:3px;
}
.watch-extra-desc div{
padding-left:7px;
}
#watch-music-urls{
height:25px;
line-height:20px;
}
.watch-attribution{
margin-left:7px;
margin-bottom:3px;
line-height:20px;
}
#watch-badges{
height:34px;
line-height:29px;
}
.watch-google-checkout{
border-top:1px solid #CCC;
}
.watch-google-checkout .google-checkout{
border:0;
margin:0;
}
#watch-embed-div,
#watch-url-div{
border-top:1px solid #CCC;
font-size:11px;
}
#watch-url-div{
margin:5px 0;
}
#watch-url-field{
font-size:10px;
width:340px;
margin-top:2px;
}
#watch-embed-div label,
#watch-url-div label{
color:#999;
line-height:18px;
font-size:12px;
}


#watch-playlist-subtitle{
padding-left:20px;
}
#watch-playlist-subtitle a{
font-weight:bold;
}
.watch-playlist-action{
font-size:11px;
padding-left:5px;
}
.watch-playlist-row-left{
float:left;
}
.watch-playlist-row-middle{
float:left;
padding-left:4px;
width:160px;
}
.watch-playlist-row-middle .vtitle{
width:140px;
height:14px;
overflow:hidden;
}
.watch-playlist-row-right{
float:right;
padding-top:8px;
padding-right:2px;
vertical-align:baseline;
}
.watch-playlist-show-related{
float:left;
font-size:9px;
padding-left:2px;
width:35px;
overflow:hidden;
}
.watch-playlist-item-duration{
font-size:11px;
color:#666;
padding-left:3px;
width:35px;
}

.watch-playlist-row{
clear:both;
vertical-align:middle;
padding-left:2px;
height:34px;
padding-bottom:2px;
}
.watch-playlist-row-playing{
padding-left:1px;
border:1px solid #FC3;
background-color:#FFFFCC;
height:34px;
padding-top:2px;
margin-bottom:2px;
padding-bottom:2px;
}
.watch-playlist-index{
font-size:12px;
color:#666;
float:left;
text-align:center;
margin-right:0px;
width:15px;
padding-top:10px;
text-align:right;
padding-right:3px;
}
.watch-playlist-container{
display:block;
overflow:auto;
padding:4px;
position:relative;
border:1px solid #CCC;
margin-top:5px;
padding:2px;
}
.watch-playlist-row-link{
text-decoration:none;
cursor:pointer;
cursor:hand;
}
.watch-playlist-auto-height{
height:auto;
}
.watch-playlist-fixed-height175{
height:175px;
}
#watch-playlist-actions{
margin-bottom:20px;
text-align:right;
}
#watch-more-from{
min-height:62px;
height:auto;
}
#watch-related-vids-toggle{
float:right;
margin-right:7px;
padding-bottom:1px;
}
#watch-related-vids-toggle img{
vertical-align:middle;
}
#watch-related-vids-body{
padding-left:7px;
}
#watch-promoted-container{
padding:7px;
}
#watch-promoted-container .watch-promoted-vid{
float:left;
width:24.9%;
}


/* ==========================================================================
   Responsive additions (mobile/tablet) — appended 2026-07
   Merged here (end of ooba081.css) rather than a separate file so the
   cascade order stays correct: these rules load after both oobareloaded.css
   and this file's own base rules, and before oobaminor.css (which only
   contains unrelated .srating rules, so no conflict there).
   ========================================================================== */

/* ---------- Tablet & down (<=900px) ---------- */
@media (max-width: 900px) {

  #main_container{
    width:100%;
    max-width:100%;
  }

  .inner_container{
    width:100%;
    left:0;
    box-sizing:border-box;
    padding:0 12px;
  }

  #content_bg{
    padding-left:0;
    padding-right:0;
  }

  /* ----- header ----- */
  #header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding-top:10px;
    padding-bottom:10px;
  }

  .logo{
    width:120px;
    height:50px;
    background-size:contain;
    margin:0 auto;
    float:none;
  }

  .google_ad{
    width:100%;
    max-width:420px;
    margin:10px auto 0;
    float:none;
  }

  .search-bar{
    width:100%;
  }

  #logout{
    width:100%;
    max-width:420px;
    padding-left:0;
    margin:10px auto 0;
    float:none;
    display:flex;
    justify-content:center;
  }

  #logout a{
    float:none;
    width:auto;
    text-align:center;
  }

  #btnWrap{
    max-width:100%;
    overflow-x:auto;
  }

  /* ----- three-panel layout becomes a single stacked column ----- */
  .inner_container:not(#header){
    display:flex;
    flex-direction:column;
    width:100%;
  }

  #left_panel,
  #right_panel,
  #middle_content_container{
    float:none;
    width:100%;
    max-width:100%;
    margin:0 0 20px 0;
    box-sizing:border-box;
  }

  /* video player first, then video list/tabs, then channel browser */
  #middle_content_container{ order:1; }
  #right_panel{ order:2; }
  #left_panel{ order:3; }

  /* ----- channels: vertical stacked list -> horizontal scroll strip ----- */
  #channels{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    background:none;
    padding-top:0;
  }

  #channels li{
    float:none;
    flex:0 0 auto;
    width:auto;
    background:none;
    border-bottom:none;
    border-right:1px solid #bfd3e1;
  }

  #channels a{
    background:none;
    padding:10px 12px;
    white-space:nowrap;
    height:auto;
    line-height:normal;
  }

  #channels li:last-child,
  #channels li:nth-last-child(2){
    border-right:none;
  }

  #youtube{
    width:100%;
    text-align:center;
    margin-top:10px;
  }

  /* ----- middle: player / description / comments ----- */
  #middle_content,
  .player,
  .tab_content,
  .video-container{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  #embedVideo img,
  #embedVideo video,
  .rounded-video{
    width:100%;
    height:auto;
  }

  /* ----- upper/lower tabs: keep flex row but let them shrink to fit ----- */
  #upperRightTab,
  #lowerRightTab{
    flex-wrap:wrap;
  }

  .tab-link{
    padding:5px 8px;
    font-size:12px;
    margin:0 3px 4px 0;
  }

  /* ----- video list entries in right panel ----- */
  .watch-discoverbox{
    height:auto !important;
    max-height:none;
  }

  .watch-discoverbox-entry{
    width:100%;
  }
}

/* ---------- Phone (<=480px) ---------- */
@media (max-width: 480px) {

  .logo{
    width:100px;
    height:42px;
  }

  .tab-link{
    padding:5px 6px;
    font-size:11px;
  }

  .VideoMainTitle{
    font-size:14px;
    padding-left:10px;
  }

  .watch-discoverbox-list-view .watch-discoverbox-facets{
    margin-left:96px;
    margin-right:0;
  }

  #watch-comment-captcha{
    width:100%;
  }
}




/* ==========================================================================
   Hide Disqus comments on mobile only (desktop unaffected).
   #moreComments is the unique wrapper around the actual Disqus embed
   (#disqus_thread + its scripts) — NOT the duplicate id="comments" used
   for the About Ooba description text elsewhere on the page, so this is
   safe and won't hide the description.
   ========================================================================== */
@media (max-width: 900px){
  #moreComments{
    display: none;
  }

  /* "Powered by Disqus" comment-count widget in the right panel */
  a[href="https://disqus.com/"]{
    display: none;
  }
}


/* ==========================================================================
   Mobile video-list restyle — card-grid look (matches the mockup) instead
   of the small-thumbnail list style. CSS-only: reuses the existing
   .watch-discoverbox-entry / .vimg90 / .tab-link markup, just re-laid-out.
   Mobile only (<=900px); desktop list view is untouched.
   ========================================================================== */
@media (max-width: 900px){

  /* ----- video entries become full-width cards ----- */
  .watch-discoverbox{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 0;
  }

  .watch-discoverbox-entry{
    display: flex;
    flex-direction: column;
    float: none;
    width: 100%;
    margin: 0;
    background: #fff;
    border: 1px solid #e1e6ea;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  .watch-discoverbox-thumb{
    float: none;
    width: 100%;
  }

  .v90WrapperOuter{
    width: 100%;
    border: none;
    border-radius: 0;
  }

  .v90WrapperInner{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 0;
  }

  .v90WrapperInner img.vimg90{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
  }

  .watch-discoverbox-facets{
    margin-left: 0;
    margin-right: 0;
    padding: 10px 12px 12px;
  }

  .watch-discoverbox-facets .vtitle{
    font-size: 14px;
    margin-bottom: 4px;
  }

  .watch-discoverbox-divider{
    display: none; /* cards have their own borders now, no separate divider needed */
  }

  /* ----- tabs restyled as pill chips instead of gradient buttons ----- */
  #upperRightTab,
  #lowerRightTab{
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .tab-link{
    background: #fff;
    border: 1px solid #e1e6ea;
    border-radius: 20px;
    color: #22729e;
    text-shadow: none;
    box-shadow: none;
    padding: 8px 16px;
    line-height: normal;
    white-space: nowrap;
  }

  a.tab-link:hover{
    background: #fff;
    color: #22729e;
  }

  #current a{
    background: #fd6734;
    color: #fff;
  }

  /* ----- channel chips: same pill treatment as the tabs above ----- */
  #channels a{
    border-radius: 20px;
    border: 1px solid #e1e6ea;
    background: #fff;
    color: #22729e;
    margin: 4px;
  }
}


/* ==========================================================================
   Adjustments per feedback (2026-07):
   1) Watermark was matching desktop's 80px on mobile — too large relative
      to the smaller player. Reduced for mobile/phone.
   2) Sidebar video thumbnails were stretched to full-width 16:9 cards —
      reverting to actual desktop size (90x70) in a horizontal row, while
      keeping the card border/shadow from the earlier mobile restyle.
   ========================================================================== */
@media (max-width: 900px){

  .video-container .watermark{
    width: 40px;
  }

  .watch-discoverbox-entry{
    flex-direction: row;
    align-items: flex-start;
    padding: 8px;
    gap: 10px;
  }

  .watch-discoverbox-thumb{
    float: none;
    width: auto;
    flex: 0 0 auto;
  }

  .v90WrapperOuter{
    width: 92px;
    border: 1px solid #999;
    border-radius: 5px;
  }

  .v90WrapperInner{
    width: 90px;
    height: 54px;
    aspect-ratio: auto;
  }

  .v90WrapperInner img.vimg90{
    width: 90px;
    height: 70px;
    object-fit: initial;
    margin-top: -10px;
    border-radius: 10px;
  }

  .watch-discoverbox-facets{
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    flex: 1;
  }
}

@media (max-width: 480px){
  .video-container .watermark{
    width: 30px;
  }
}


/* ==========================================================================
   Specificity fix (2026-07): the previous mobile override for
   .watch-discoverbox-facets lost to the original two-class selector
   ".watch-discoverbox-list-view .watch-discoverbox-facets" (higher
   specificity beats later source order). Matching that selector exactly
   here so the override actually applies. Also tightening the thumb/text
   gap further and locking the watermark size with !important as a safety
   net against any other higher-specificity rule.
   ========================================================================== */
@media (max-width: 900px){

  .watch-discoverbox-list-view .watch-discoverbox-facets{
    margin-left: 0;
    margin-right: 0;
  }

  .watch-discoverbox-entry{
    gap: 6px;
    padding: 6px;
  }

  .video-container .watermark{
    width: 40px !important;
  }
}

@media (max-width: 480px){
  .video-container .watermark{
    width: 30px !important;
  }
}


/* ==========================================================================
   Reorder mobile stack (2026-07): channels list now sits just above the
   video player instead of at the very bottom. New order: channels ->
   player -> video list/tabs. Overrides the earlier order values (same
   selectors, later in source wins).
   ========================================================================== */
@media (max-width: 900px){
  #left_panel{ order: 1; }
  #middle_content_container{ order: 2; }
  #right_panel{ order: 3; }
}


/* ==========================================================================
   Google Sign-In button: give #btnWrap full width on mobile so the JS
   snippet in index.php has an accurate width to read (offsetWidth) when
   sizing the button to match the search box. Desktop untouched.
   ========================================================================== */
@media (max-width: 900px){
  #btnWrap{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* ==========================================================================
   Mobile only: hide the static "E-Pao! Home" / "Radio E-Pao!" links in the
   channels strip. These are always the last two <li> items (after the
   PHP-looped channel list), so nth-last-child targets them reliably
   regardless of how many channels load above. Desktop untouched.
   ========================================================================== */
@media (max-width: 900px){
  #channels li:nth-last-child(-n+2){
    display: none;
  }
}


/* ==========================================================================
   Mobile only: the lower tabs (Recently Viewed/Search/Related) and the
   panel above them use desktop-only inline pixel hacks (negative
   margin-top, fixed height/width) that assume a fixed-height card list.
   On mobile the content above is variable height, so these negative
   margins pull the tabs up into overlap. Overriding with !important since
   inline styles otherwise beat any external stylesheet rule. Desktop
   untouched — these rules only exist inside this media query.
   ========================================================================== */
@media (max-width: 900px){

  /* wrapper div directly containing #lowerRightTab */
  div:has(> #lowerRightTab){
    width: 100% !important;
    height: auto !important;
    margin: 14px 0 0 0 !important;
  }

  /* wrapper div directly containing #upperRightTab */
  div:has(> #upperRightTab){
    margin-top: 10px !important;
  }

  /* both "watch-related-videos-panel" instances (upper video list + lower
     recently-viewed/search/related panel) use negative margin-top on
     desktop; reset to normal spacing on mobile */
  #watch-related-videos-panel{
    margin-top: 10px !important;
  }
}


/* ==========================================================================
   Mobile only: lock the player area to a fixed 16:9 box so the container
   height is identical whether showing the placeholder collage image
   (500x320, ~1.56:1) or the real video (native aspect ratio).
   Without this, the container height jumps between the two states,
   which was causing the Recently Viewed/Search/Related section below to
   shift and overlap. Desktop untouched (fixed 500px column already
   handles this fine there).
   ========================================================================== */
@media (max-width: 900px){

  #embedVideo{
    aspect-ratio: 16/9;
    overflow: hidden;
    width: 100%;
  }

  #embedVideo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-container{
    aspect-ratio: 16/9;
    height: auto;
  }

  .video-container video{
    width: 100%;
    height: 100%;
  }
}


/* ==========================================================================
   Mobile only: harden against tab-pill text clipping (seen on the
   Recently Viewed/Search/Related row — top of "Related" text was cut
   off). Forcing height:auto + overflow:visible at every ancestor level
   around the tabs, since a fixed-height wrapper or inherited overflow
   from #right_panel was likely still constraining pill height shorter
   than the text needs. Desktop untouched.
   ========================================================================== */
@media (max-width: 900px){

  div:has(> #lowerRightTab),
  div:has(> #upperRightTab){
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #upperRightTab,
  #lowerRightTab{
    height: auto !important;
    overflow: visible !important;
  }

  #upperRightTab li,
  #lowerRightTab li{
    height: auto !important;
    overflow: visible !important;
  }

  .tab-link{
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
  }
}


/* ==========================================================================
   Mobile only: the earlier watermark fix only capped width, leaving
   height to scale automatically. If oobawatermark.png has an unusual
   (tall/narrow) aspect ratio, that could still render much larger than
   intended in one dimension. Capping both width AND height explicitly
   with object-fit:contain bounds it to a small box regardless of the
   source image's actual proportions. Desktop untouched.
   ========================================================================== */
@media (max-width: 900px){
  .video-container .watermark{
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px){
  .video-container .watermark{
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }
}




/* ==========================================================================
   Lightweight custom video controls (replaces the Plyr experiment).
   No external library, no CDN, no extra files — just a small styled
   overlay on top of the native <video>. Applies to both desktop and
   mobile since it's fully self-contained with no failure-prone external
   dependency (unlike Plyr, which depended on 3 separate CDN files).
   ========================================================================== */

.video-container{
  position: relative;
}

.ooba-play-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(48, 151, 209, 0.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  padding: 0;
}

.ooba-play-overlay svg{
  width: 26px;
  height: 26px;
}

.ooba-play-overlay:hover{
  background: #fd6734;
}

.ooba-controls{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  z-index: 4;
  border-radius: 0 0 12px 12px;
}

.ooba-btn{
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.ooba-btn svg{
  width: 20px;
  height: 20px;
}

.ooba-time{
  color: #fff;
  font-size: 11px;
  font-family: Noto Serif;
  flex: 0 0 auto;
  white-space: nowrap;
}

.ooba-seek{
  flex: 1 1 auto;
  height: 4px;
  accent-color: #fd6734;
  cursor: pointer;
  margin: 0 4px;
}

@media (max-width: 480px){
  .ooba-play-overlay{
    width: 44px;
    height: 44px;
  }
  .ooba-play-overlay svg{
    width: 20px;
    height: 20px;
  }
  .ooba-controls{
    padding: 5px 8px;
    gap: 6px;
  }
  .ooba-btn{
    width: 24px;
    height: 24px;
  }
  .ooba-btn svg{
    width: 16px;
    height: 16px;
  }
  .ooba-time{
    font-size: 10px;
  }
}


/* Ensure the watermark always renders above the custom controls,
   regardless of default stacking order. */
.video-container .watermark{
  z-index: 5;
  position: absolute;
}