/* RetroTube - IE11-safe (no flexbox/grid/var). 2008 YouTube look. */
body{margin:0;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#333;}
a{color:#0033cc;text-decoration:none;} a:hover{text-decoration:underline;}
.clear{clear:both;height:0;line-height:0;font-size:0;}
.acct{background:#fafafa;border-bottom:1px solid #e3e3e3;padding:4px 12px;text-align:right;color:#666;}
.acct b{color:#333;}
.hdr{border-bottom:2px solid #ccc;padding:8px 12px 8px 12px;}
.logo{float:left;} .logo img{height:46px;width:auto;display:block;border:0;}
.searchbox{float:right;margin-top:8px;}
.searchbox input.q{width:300px;border:1px solid #999;padding:4px;font-size:13px;vertical-align:middle;}
.btn{border:1px solid #3079ed;background:#4d90fe;color:#fff;padding:5px 12px;font-size:12px;font-weight:bold;cursor:pointer;border-radius:2px;vertical-align:middle;}
.nav{clear:both;background:#f1f1f1;border-bottom:1px solid #ccc;margin-top:6px;}
.nav ul{list-style:none;margin:0;padding:0;} .nav li{float:left;}
.nav li a{display:block;padding:7px 18px;color:#333;font-weight:bold;border-right:1px solid #ddd;}
.nav li a:hover{background:#e3e3e3;text-decoration:none;} .nav li.on a{background:#fff;color:#cc181e;}
.body{padding:14px;}
.rescount{color:#666;margin:0 0 12px 2px;} .rescount b{color:#c00;}
.note{background:#fff8d5;border:1px solid #e6d97a;padding:10px;color:#665c00;margin-bottom:12px;}

/* results grid */
.card{float:left;width:210px;margin:0 14px 20px 0;}
.card .thumb{display:block;width:210px;height:118px;border:1px solid #ccc;background:#000;overflow:hidden;}
.card .thumb img{width:210px;height:118px;}
.card .t{font-weight:bold;color:#0033cc;display:block;margin-top:4px;line-height:1.25;height:32px;overflow:hidden;}
.card .m{color:#888;display:block;margin-top:2px;}

/* watch layout (fluid) */
.left{margin-right:322px;} .left.full{margin-right:0;} .right{float:right;width:300px;}
.vtitle{font-size:18px;font-weight:bold;color:#222;margin:0 0 6px;}

/* player - fixed 16:9 box; the video is letterbox-fitted inside it by player.js */
.player{position:relative;width:100%;background:#000;border:1px solid #111;}
.stage{position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;background:#000;}
.stage video{position:absolute;left:0;top:0;background:#000;}
.cbox{position:absolute;left:0;top:0;width:100%;height:100%;display:table;color:#eee;}
.cbox .cin{display:table-cell;vertical-align:middle;text-align:center;padding:0 24px;line-height:1.6;}
.spinner{width:38px;height:38px;margin:0 auto 14px;border:4px solid #444;border-top-color:#cc181e;border-radius:50%;-webkit-animation:rtspin .9s linear infinite;animation:rtspin .9s linear infinite;}
@-webkit-keyframes rtspin{to{-webkit-transform:rotate(360deg)}}
@keyframes rtspin{to{transform:rotate(360deg)}}
/* audio-only album art fills the stage */
.albumart{position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:2;}
/* transcode progress bar in the converting box */
.cprog{width:70%;max-width:360px;height:10px;margin:14px auto 6px;background:#333;border:1px solid #000;}
.cbar{height:100%;width:0;background:#cc181e;}
.cpct{color:#ccc;font-size:12px;font-family:Consolas,monospace;}
.pvol{width:74px;padding:0 4px;}
.pctl{display:table;table-layout:fixed;width:100%;height:32px;background:#1f1f1f;background-image:linear-gradient(#2b2b2b,#151515);}
.pctl > *{display:table-cell;vertical-align:middle;}
.pbtn{width:30px;text-align:center;color:#fff;background:transparent;border:0;font-size:15px;height:32px;cursor:pointer;padding:0;}
.pbtn:hover{color:#cc181e;}
.ptime{width:46px;text-align:center;color:#bbb;font-size:11px;font-family:Arial,sans-serif;}
.pbar{position:relative;height:32px;cursor:pointer;}
.pbar .track{position:absolute;left:6px;right:6px;top:12px;height:8px;background:#4d4d4d;border:1px solid #000;}
.pbuf{position:absolute;left:0;top:0;height:100%;width:0;background:#7a7a7a;}
.pprog{position:absolute;left:0;top:0;height:100%;width:0;background:#cc181e;}

/* meta / uploader */
.meta{border-bottom:1px solid #e3e3e3;padding:6px 0;overflow:hidden;}
.views{float:left;color:#666;font-size:15px;padding-top:2px;} .stars{float:right;color:#f5a623;font-size:18px;}
.uploader{overflow:hidden;padding:10px 0;border-bottom:1px solid #e3e3e3;}
.uploader .pic{float:left;width:46px;height:46px;background:#c9d7f1;border:1px solid #aab;border-radius:3px;text-align:center;line-height:46px;color:#556;font-weight:bold;font-size:20px;}
.uploader .info{margin-left:58px;} .uploader .who{font-weight:bold;color:#0033cc;font-size:13px;}
.subbtn{float:right;background:#cc181e;color:#fff;border:1px solid #a00;padding:5px 12px;border-radius:2px;font-weight:bold;}
.favbtn{float:right;background:#4d90fe;color:#fff;border:1px solid #3079ed;padding:6px 12px;border-radius:2px;font-weight:bold;font-size:12px;cursor:pointer;}
.favbtn.on{background:#f5a623;border-color:#d68910;color:#3a2b00;}
.desc{padding:10px 2px;color:#444;line-height:1.5;}
.rhead{font-weight:bold;font-size:14px;color:#222;border-bottom:1px solid #ccc;padding-bottom:5px;margin-bottom:8px;}
.rel{overflow:hidden;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0f0f0;}
.rel .thumb{float:left;width:120px;height:68px;border:1px solid #ccc;background:#000;overflow:hidden;} .rel .thumb img{width:120px;height:68px;}
.rel .ri{margin-left:132px;} .rel .ri .rt{font-weight:bold;color:#0033cc;display:block;margin-bottom:2px;line-height:1.2;} .rel .ri .rv{color:#888;}
.foot{clear:both;text-align:center;color:#999;font-size:11px;padding:16px;border-top:1px solid #eee;margin-top:10px;}
.diag{display:none;position:fixed;right:8px;bottom:8px;background:#222;color:#0f0;font-family:Consolas,monospace;font-size:11px;padding:4px 8px;border-radius:3px;opacity:0.92;z-index:999;}
.diag b{color:#fff;}
.diagdot{position:fixed;right:2px;bottom:2px;width:10px;height:10px;cursor:default;z-index:998;opacity:0;}
/* refresh control (the tab has no browser chrome) */
.refresh{float:right;margin:4px 6px 0 0;color:#666;font-size:18px;line-height:20px;text-decoration:none;padding:2px 8px;}
.refresh:hover{color:#cc181e;text-decoration:none;}
/* channels */
.chan{float:left;width:280px;margin:0 14px 14px 0;border:1px solid #e3e3e3;border-radius:3px;}
.chan a{display:block;padding:10px;overflow:hidden;color:#333;}
.chan a:hover{background:#f7f7f7;text-decoration:none;}
.chan .cav{float:left;width:44px;height:44px;background:#c9d7f1;border:1px solid #aab;border-radius:3px;text-align:center;line-height:44px;color:#556;font-weight:bold;font-size:20px;}
.chan .cn{margin-left:56px;} .chan .cn b{color:#0033cc;font-size:13px;} .chan .cs{color:#888;font-size:11px;}
/* watch-on-youtube link */
.ytlink{color:#cc181e;font-weight:bold;font-size:12px;}
/* infinite-scroll grid */
.grid{overflow:hidden;zoom:1;}
.loadmore{clear:both;height:24px;}