html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{font-family:'Roboto',sans-serif;font-size:13px;line-height:1.5;font-weight:400;text-align:left;color:#2e2e2e;padding:0;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:0;-webkit-border-radius:0;-khtml-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;-moz-box-shadow:none;-webkit-box-shadow:none;-khtml-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none}:focus{outline:0}html,body{height:100%}body{background:#fff;width:100%;display:block;float:left}h1,h2,h3,h4,h5,h6{font-weight:700;margin:0}h1,h1 a{font-size:18px}h2,h2 a{font-size:16px}.description h2,.description h2 a{font-size:13px;font-weight:400}h3,h3 a{font-size:14px}h4,h4 a{font-size:13px}h5,h5 a{font-size:12px}h6,h6 a{font-size:10px}a{color:#1a54bd;text-decoration:none}a:hover{color:#0e46ac}a.button,button,input[type="submit"]{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);display:block;float:left;color:#fff;font-weight:700;padding:4px 10px;border:0;cursor:pointer}input[type="submit"]{width:auto;margin-top:4px}a.button span,button span{color:#fff}a.button.center,button.center{display:table!important;float:none;margin:0 auto}a.button .sub-label-on,a.button.active .sub-label-off{display:none}a.button.active .sub-label-on,a.button .sub-label-off{display:block}a.button:hover,button:hover,input[type="submit"]:hover{background:#2f70d8;background:-moz-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:-webkit-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:linear-gradient(to bottom,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%)}img{display:block;float:left}img.responsive{width:100%;height:auto}p{width:100%;display:block;float:left}ul,ol{list-style:none}input,textarea{background:#f1f1f1;width:100%;display:block;float:left;padding:6px 10px;border:1px solid #dcdcdc}input{min-height:33px}textarea{height:200px;min-height:200px;max-height:400px;resize:vertical}select{width:200px}form#login-form,form#forgot-pass-form,form#signup-form{width:360px;display:table;padding:0 10px;margin:0 auto}form#login-form input,form#forgot-pass-form input,form#signup-form input{margin:10px 0}form#login-form button,form#forgot-pass-form button,form#signup-form button{float:left;margin-top:10px}iframe{border:0!important}.wrapper{width:100%;max-width:1470px;display:block;margin:0 auto}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{display:block;float:left}.col-1{width:8.333%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}.col-1.margin,.col-2.margin,.col-3.margin,.col-4.margin,.col-5.margin,.col-6.margin,.col-7.margin,.col-8.margin,.col-9.margin,.col-10.margin,.col-11.margin,.col-12.margin{margin:0 0 0 .6% !important}.col-1.margin.first,.col-2.margin.first,.col-3.margin.first,.col-4.margin.first,.col-5.margin.first,.col-6.margin.first,.col-7.margin.first,.col-8.margin.first,.col-9.margin.first,.col-10.margin.first,.col-11.margin.first,.col-12.margin.first{margin-left:0!important}.col-1.margin{width:7.783%!important}.col-2.margin{width:16.16%!important}.col-3.margin{width:24.55%!important}.col-4.margin{width:32.93%!important}.col-5.margin{width:41.31%!important}.col-6.margin{width:49.7%!important}.col-7.margin{width:58.08%!important}.col-8.margin{width:66.46%!important}.col-9.margin{width:74.85%!important}.col-10.margin{width:83.23%!important}.col-11.margin{width:91.61%!important}.col-12.margin{width:100%!important}.col-12-clear{width:100%;display:block;float:left;padding:0 10px}.col-item{width:20%;float:left;padding:10px;display:inline-block;vertical-align:top;float:none}.col-item.no-padding{padding:0!important}.col-left{float:left}.col-right{float:right}.col-center{display:table!important;float:none!important;margin:0 auto!important}.col-margin{float:left;margin:10px}.col-tags{padding:0 10px}.col-tags .col-12{padding:10px;border-bottom:2px dotted rgba(0,0,0,.2)}.col-tags .col-12 a{font-size:14px;font-weight:700}.clear,.clear.responsive{clear:both}.spacer{width:100%;display:block;float:left;margin-top:20px}.spacer.half{margin-top:10px}.border{width:100%;display:block;float:left;margin:20px 0;border-top:1px solid #ccc}.notification{width:100%;display:block;float:left;text-align:center!important;padding:4px 10px;margin:10px 0}.notification a,.notification * a{text-decoration:underline!important}.notification *{text-align:center!important}.notification.success{background:#dff0d8;color:#3c763d}.notification.success *{color:#3c763d}.notification.info{background:#d9edf7;color:#31708f}.notification.info *{color:#31708f}.notification.alert{background:#fcf8e3;color:#8a6d3b}.notification.alert *{color:#8a6d3b}.notification.error{background:#f2dede;color:#a94442}.notification.error *{color:#a94442}#header{background:#f1f1f1;width:100%;display:block;float:left;margin-bottom:20px}#header .wrapper{padding:0 10px}#header #network{background:#e1e1e1;width:100%;display:block;float:left}#header #network .wrapper{position:static!important;padding:4px 10px}#header #network ul{width:100%;display:block;float:left}#header #network ul li,#header #network ul li a{float:left}#header #network ul li a{font-size:12px;color:#000;margin-right:10px}#header #network ul li a:hover{color:#1a54bd}#header a#logo{background:transparent url(../images/logo.svg) no-repeat 50% 50% / 300px 45px;width:300px;height:45px;display:block;float:left;margin:0;-moz-box-transition:all .3s ease;-webkit-box-transition:all .3s ease;-khtml-box-transition:all .3s ease;-ms-box-transition:all .3s ease;-o-box-transition:all .3s ease;box-transition:all .3s ease;transition:all .3s ease}#header .wrapper{position:relative}#header a#logo{position:absolute;top:50%;left:10px;font-size:36px;line-height:1;font-weight:700;color:#000;letter-spacing:-1px;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}#header a#logo i{position:absolute;top:50%;right:-20px;font-size:24px;line-height:1;color:#ff2121;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}#header form{float:left;margin-right:10px}#header form input{background:#fff;width:230px;display:block;float:left;border:1px solid #d3d3d3;border-right:0}#header form select{background:#fff;width:100px;border:1px solid #d3d3d3}#header form button{background:#fff;text-align:center;padding:6px 10px 6px 0;border:1px solid #d3d3d3;border-left:0}#header form button i{font-size:16px;color:#1a54bd}#header ul.toolbar{float:left}#header ul.toolbar.top{float:right;margin:4px 0 10px}#header ul.toolbar li,#header ul.toolbar li a{float:left}#header ul.toolbar li.menu,#header ul#navigation li.menu{display:none}#header ul.toolbar li a{font-weight:700;color:#000;margin-top:8px;margin-left:10px}#header ul.toolbar li:first-child a{margin-left:0}#header ul.toolbar li a i{margin-right:4px}#header ul.toolbar li a:hover,#header ul.toolbar li a:hover i{color:#1a54bd}#header ul.toolbar li.login a{margin-left:20px}#header ul.toolbar li a.button{color:#fff;margin-top:3px;margin-left:2px}#header .container{background:#e7e7e7;width:100%;display:block;float:left;margin-top:15px}#header .container .wrapper{padding-top:0}#header ul#navigation{width:100%;display:block;float:left}#header ul#navigation li,#header ul#navigation li a{float:left}#header ul#navigation li a{font-size:14px;font-weight:700;color:#2e2e2e;padding:8px 20px}#header ul#navigation li.current a,#header ul#navigation li a:hover{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);color:#fff}#header ul#navigation li a i{color:#444;margin-right:6px}#header ul#navigation li:first-child a i{margin-right:0}#header ul#navigation li.current a i,#header ul#navigation li a:hover i{color:#fff}#sidebar{width:100%;display:block;float:left;padding:0 10px;overflow:auto}#sidebar h2,#sidebar a.menu{background:#212121;background:-moz-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:-webkit-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:linear-gradient(to bottom,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);color:#fff;padding:6px 15px;border-bottom:1px solid #050505}#sidebar a.menu{width:100%;display:none;float:left;font-weight:700;text-align:center}#sidebar a.menu i{color:#fff}#sidebar ul{background:#2f2f2f;width:100%;display:block;float:left}#sidebar ul li a{width:100%;display:block;float:left;font-size:12px;font-weight:700;color:#fff;padding:6px 15px;border-bottom:1px solid #404040}#sidebar ul li a:hover{background:#484848}#sidebar ul li.active a,#sidebar ul li a.active{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%)}#sidebar ul li a .sub-label{font-size:12px;font-weight:700;color:#fff}#sidebar ul li a .counter{float:right;font-size:12px;color:#818181}#main{width:100%;display:block;float:left}#main h1{float:left;padding:0 10px}#main ul.toolbar{float:right;padding:0 10px}#main ul.toolbar li,#main ul.toolbar li a{float:left}#main ul.toolbar li a{background:#212121;background:-moz-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:-webkit-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:linear-gradient(to bottom,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);font-size:12px;font-weight:700;color:#fff;padding:4px 6px;margin-left:2px}#main ul.toolbar li a:hover{background:#484848}#main ul.toolbar li.active a{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%)}.col-item a .image{position:relative;width:100%;display:block;float:left}.col-item a .image .time{position:absolute;right:0;bottom:10px;background:rgba(0,0,0,0.4);font-size:12px;color:#fff;padding:1px 6px}.col-item a .title{width:100%;display:block;float:left;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;color:#1a54bd;margin:2px 0;overflow:hidden}.col-item .col-left span{float:left;font-size:12px}.col-item .col-left span.rating{margin-right:4px}.col-item .col-left span.rating i{color:#60c042}.col-item .col-right a.add-to-fav{font-size:12px;color:#2e2e2e}.col-item .col-right a.edit-content{color:#2e2e2e;font-size:12px;margin-left:4px}.col-item .col-right a.add-to-fav:hover,.col-item .col-right a.edit-content:hover,.col-item .col-right a.add-to-fav:hover i,.col-item .col-right a.edit-content:hover i{color:#1a54bd}#player{position:relative;width:100%;height:640px!important;display:block;float:left;padding:0!important;margin-bottom:10px}#player #thisPlayer{position:absolute;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;display:block;overflow:hidden}.vjs-default-skin *{color:#fff!important}.col-12-clear h1{width:auto!important;padding:0!important}ul#rating_options{float:right}ul#rating_options li,ul#rating_options li a{float:left;font-size:18px}ul#rating_options li{margin-left:6px}ul#rating_options li a .icon{font:normal normal normal 14px/1 FontAwesome;display:inline-block;font-size:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul#rating_options li a .icon.i-thumbs-up:before{content:'\f164';color:#60c042}ul#rating_options li a .icon.i-thumbs-down:before{content:'\f165';color:#d70a0a}ul#rating_options li.score{font-weight:700}[data-mb=tab-content].active{width:100%;display:block;float:left}[data-expand=comments],[data-mb=tab-content]{width:100%;display:none;float:left}#main ul.toolbar li,#main ul.toolbar li a{float:left}ul.tabs-list{width:100%;display:block;float:left;margin:10px 0}ul.tabs-list li,ul.tabs-list--mailbox li{width:25%;display:block;float:left;text-align:center}ul.tabs-list--mailbox li *{color:#fff}.user-profile ul.tabs-list li,ul.tabs-list--mailbox li{width:100%}ul.tabs-list.logged-in li{width:20%}ul.tabs-list li a,ul.tabs-list--mailbox li a{width:100%;display:block;float:left;text-align:center;background:#212121;background:-moz-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:-webkit-linear-gradient(top,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);background:linear-gradient(to bottom,rgba(33,33,33,1) 0%,rgba(71,71,71,1) 100%);font-size:12px;font-weight:700;color:#fff;padding:6px 0}.user-profile ul.tabs-list li a,ul.tabs-list--mailbox li a{background:#2f2f2f;text-align:left;padding:6px 15px;border-bottom:1px solid #404040}.user-profile ul.tabs-list li:last-child a,ul.tabs-list--mailbox li:last-child a{border:0}ul.tabs-list li a:hover,ul.tabs-list--mailbox li a:hover{background:#484848}ul.tabs-list li.active a{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%)}h3.add{margin-bottom:6px}.avatar{width:10%;display:block;float:left;text-align:center}.user-profile .avatar{width:100%;margin-top:4px}.avatar *{font-size:12px}.avatar a{width:100%;display:block;float:left;text-align:center}.avatar img{width:100%;height:auto;display:block;float:left}.avatar .user{font-weight:700;text-align:center;color:#1a54bd}.contents{width:90%;display:block;float:left;padding:0 0 0 10px}ul.stats-list{width:100%;display:block;float:left;margin-bottom:6px}ul.stats-list li{float:left;padding-right:10px;margin-right:10px;border-right:1px solid #000}ul.stats-list li:last-child{padding:0;margin:0;border:0}ul.stats-list li i{margin-right:2px}.contents .description{width:100%;display:block;float:left}.contents p{width:100%;display:block;float:left}.tab-wrapper textarea{height:80px;min-height:80px;max-height:80px;resize:none}ul.share-list{width:100%;display:block;float:left}ul.share-list li,ul.share-list li a{float:left}ul.share-list li a i{color:#1a54bd;font-size:24px;margin:10px 6px 0 0}ul.ul-comments,ul.ul-comments li{width:100%;display:block;float:left}ul.ul-comments.more-comments{display:none}ul.ul-comments li{margin-top:6px;margin-bottom:14px}ul.ul-comments li .contents{padding:0 0 0 10px}ul.ul-comments li .contents .comment{width:100%;display:block;float:left;margin-top:6px}form.sendCommentsBox input,form.sendCommentsBox textarea,form.sendCommentsBox img,.col-upload form input,.col-upload form img,form.user-profile-private-message input,form.user-profile-private-message textarea,.col-contact input,.col-contact textarea,.col-contact img{margin-bottom:8px}form.user-profile-private-message textarea{height:200px!important;min-height:200px!important;max-height:400px!important;resize:vertical!important}.user-profile-clear-padding h2,.user-profile-clear-padding ul.profile-list,.user-profile-clear-padding h3,.user-profile-clear-padding form.user-profile-private-message{padding:0 0 0 10px}.user-profile-clear-padding a.button,.user-profile-clear-padding .table-responsive{margin-left:10px!important}.user-profile-clear-padding .table-responsive{margin-top:4px}.user-profile-clear-padding table a.button{margin-top:10px!important;margin-right:2px!important;margin-left:0!important}.img-current{width:100%;display:block;float:left;font-size:16px;font-weight:700;text-align:center;margin-top:6px}.gallery-controls{display:table;margin:10px auto 0}.gallery-controls a.button{margin:0 1px}.col-upload,.col-edit-profile,.col-contact{width:60%;display:table;padding:0 0 0 10px;margin:0 auto}.col-upload form label{width:100%;display:block;float:left;margin-bottom:4px}.upload-status,.fine-uploader{width:100%;display:block;float:left}.checkboxes{width:100%;display:block;float:left;margin-top:3px}.checkboxes .checkbox-inline{width:100%;display:block;float:left;margin:3px 0}.group-checkboxes{width:25%;display:block;float:left}@media (max-width: 700px){.group-checkboxes{width:50%}}@media (max-width: 400px){.group-checkboxes{width:100%}}.checkboxes input{width:auto!important;min-height:auto!important;float:left!important;margin-right:4px}input.hidden-field{display:none}.checkboxes .sub-label{float:left;margin-left:6px}ul.user-profile-actions{width:100%;display:block;float:left}ul.user-profile-actions li{width:20%;display:block;float:left;padding:0 0 0 10px}ul.user-profile-actions li a{background:#1a54bd;width:100%;display:block;float:left;font-size:14px;font-weight:700;text-align:center;color:#fff;padding:20px}ul.user-profile-actions li a:hover{background:#0e46ac}ul.user-profile-actions li a i{width:100%;display:block;float:left;font-size:36px;text-align:center;color:#fff;margin-bottom:10px}.bootstrap-select .dropdown-toggle,.bootstrap-select .dropdown-menu{display:none!important}.mailbox-nav-col{width:16.16%!important;float:left;padding-left:10px}.mailbox-content-col{width:83.23%!important;float:left;padding-left:10px;margin:0 0 0 .6% !important}#mailbox .pagination-col{width:100%;display:block;float:left;margin:10px 0}#mailbox .pagination-inner-col{display:table;float:none;margin:0 auto}.pagination{width:100%;display:block;float:left;padding:0 10px 10px}.pagination .border{margin:10px 0 20px}.pagination .pages{display:table;margin:0 auto}.pagination a,.pagination span{float:left;font-size:13px;font-weight:700;padding:6px 15px;margin:0 1px}.pagination a{background:#fff;color:#000}.pagination span,.pagination a:hover{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);color:#fff}.pagination a.prev,.pagination a.next{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);color:#fff}.pagination a.prev:hover,.pagination a.next:hover{background:#2f70d8;background:-moz-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:-webkit-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:linear-gradient(to bottom,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%)}#footer{width:100%;display:block;float:left;margin-top:20px}#footer .toolbar{background:#1a54bd;width:100%;display:block;float:left;padding:20px 0}#footer .toolbar ul{display:table;margin:0 auto}#footer .toolbar ul li,#footer .toolbar ul li a{float:left}#footer .toolbar ul li a{font-size:12px;color:#fff;margin:0 5px}#footer .toolbar ul li a:hover{color:#e4e3e3}#footer #copyright{background:#191919;width:100%;display:block;float:left;padding:20px 0}#footer #copyright .wrapper,#footer #copyright .wrapper a{font-size:12px;text-align:center;color:#d3d3d3}#footer #copyright .wrapper a:hover{color:#fff}.modal,.modal-open{overflow:hidden}.modal,.modal-backdrop{top:0;right:0;bottom:0;left:0}.modal{position:fixed;display:none;z-index:1050;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:20px auto}.modal-content{width:100%;display:block;float:left;position:relative;background:#fff;outline:0}.modal-backdrop{position:fixed;z-index:1040;background:#000}.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)}.modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)}.modal-header{width:100%;display:block;float:left;padding:20px 20px 10px}.modal-header .close{position:absolute;top:0;right:0}.modal-title{margin:0}.modal-body{position:relative;width:100%;display:block;float:left;padding:0 20px}.modal-footer{width:100%;display:block;float:left;padding:10px 20px 20px}.modal-footer:after,.modal-footer:before{content:' ';display:table}@media (min-width:768px){.modal-dialog{width:80%}}@media (min-width:1040px){.modal-dialog{width:500px}}.formError .formErrorContent{z-index:0}.ui-dialog .formError .formErrorContent{z-index:5001}.formError .formErrorContent{width:100%;background:#ee0101;position:relative;color:#fff;min-width:7.5rem;font-size:.6875rem;border:.125rem solid #ddd;box-shadow:0 0 .375rem #000;-moz-box-shadow:0 0 .375rem #000;-webkit-box-shadow:0 0 .375rem #000;-o-box-shadow:0 0 .375rem #000;padding:.25rem .625rem;border-radius:.375rem;-moz-border-radius:.375rem;-webkit-border-radius:.375rem;-o-border-radius:.375rem}.formError.inline .formErrorContent{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;border:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-o-border-radius:0}.greenPopup .formErrorContent{background:#33be40}.blackPopup .formErrorContent{background:#393939;color:#FFF}.qq-uploader{position:relative;width:100%}.qq-upload-button{background:#487edb;background:-moz-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:-webkit-linear-gradient(top,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);background:linear-gradient(to bottom,rgba(72,126,219,1) 0%,rgba(26,84,189,1) 100%);width:100%;display:block;float:left;color:#fff;font-weight:700;padding:4px 10px}.qq-upload-button *{color:#fff}.qq-upload-button-hover{background:#2f70d8;background:-moz-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:-webkit-linear-gradient(top,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%);background:linear-gradient(to bottom,rgba(47,112,216,1) 0%,rgba(0,66,173,1) 100%)}.irs-hidden-input,.irs-line{outline:0!important}.qq-upload-drop-area,.qq-upload-extra-drop-area{position:absolute;top:0;left:0;width:100%;height:100%;min-height:1.875rem;z-index:2;background:#FF9797;text-align:center}.qq-upload-drop-area span{display:block;position:absolute;top:50%;width:100%;margin-top:-.5rem;font-size:1rem}.qq-upload-extra-drop-area{position:relative;margin-top:3.125rem;font-size:1rem;padding-top:1.875rem;height:1.25rem;min-height:2.5rem}.qq-upload-drop-area-active{background:#FF7171}.qq-upload-list{width:100%;display:block;float:left;margin:0;padding:0;list-style:none}.qq-upload-list li{margin:0;padding:.5625rem;line-height:.9375rem;font-size:1rem;background-color:#FFF0BD}.qq-upload-cancel,.qq-upload-failed-text,.qq-upload-file,.qq-upload-finished,.qq-upload-retry,.qq-upload-size,.qq-upload-spinner{margin-right:.75rem}.qq-upload-file{color:#000;font-size:.875rem}.qq-upload-spinner{display:inline-block;background:url(loading.gif);width:.9375rem;height:.9375rem;vertical-align:text-bottom}.qq-drop-processing{display:none}.qq-drop-processing-spinner{display:inline-block;background:url(processing.gif);width:1.5rem;height:1.5rem;vertical-align:text-bottom}.qq-upload-finished{display:none;width:.9375rem;height:.9375rem;vertical-align:text-bottom}.qq-upload-retry{display:none}.qq-upload-retryable .qq-upload-retry{display:inline}.qq-upload-cancel,.qq-upload-retry,.qq-upload-size{font-size:.75rem;font-weight:400;color:#900}.qq-upload-failed-text{display:none;font-style:italic;font-weight:700}.qq-upload-failed-icon{display:none;width:.9375rem;height:.9375rem;vertical-align:text-bottom}.qq-upload-fail .qq-upload-failed-text{display:inline}.qq-upload-retrying .qq-upload-failed-text{display:inline;color:#D60000}.qq-upload-list li.qq-upload-success{background-color:#5DA30C;color:#FFF}.qq-upload-list li.qq-upload-fail{background-color:#D60000;color:#FFF}.qq-progress-bar{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(to bottom,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);width:0;height:.9375rem;border-radius:.375rem;margin-bottom:.1875rem;display:none}table{width:100%;border-collapse:collapse;border-spacing:0}td,th{padding:0}.table{width:100%}thead *{font-weight:700}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:.5rem;line-height:1.429;vertical-align:top;border-top:.0625rem solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:.125rem solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:.125rem solid #ddd}.table .table{background-color:#121212}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:.3125rem}.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:.0625rem solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:.125rem}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover,.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}table col[class*=col-]{position:static;float:none;display:table-column}table td[class*=col-],table th[class*=col-]{position:static;float:none;display:table-cell}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{overflow-x:auto;min-height:.01%}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:1.03125rem;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:.0625rem solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}@media only screen and (min-width: 1025px){#header ul.toolbar.top li,#header ul#navigation li,#sidebar #show-categories,#show-categories.opened h2{display:block!important}#header ul.toolbar li.menu,#header ul#navigation li.menu,#sidebar a.menu{display:none!important}}@media only screen and (max-width: 1024px){.wrapper{width:100%}#sidebar ul li a .counter{width:100%;display:block;float:left}.col-center .col-margin{display:table;float:none;margin:10px auto}.col-edit-profile .avatar{width:120px}}@media only screen and (max-width: 860px){.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-1.margin,.col-2.margin,.col-3.margin,.col-4.margin,.col-5.margin,.col-6.margin,.col-7.margin,.col-8.margin,.col-9.margin,.col-10.margin,.col-11.margin,.col-12.margin{width:100%!important;margin-left:0!important}.col-item{width:33.333%}.col-2 .avatar{width:auto!important;display:table!important;float:none!important;margin:0 auto!important}#player{height:400px!important}.mailbox-nav-col{width:100%!important;padding:0 10px!important;margin-bottom:10px!important}#header a#logo{position:relative;top:0;left:0;display:table;float:none;font-size:28px;margin:10px auto 0;-moz-transform:none;-webkit-transform:none;-khtml-transform:none;-ms-transform:none;-o-transform:none;transform:none}#header .col-right{width:100%}#header form{width:100%;margin:0}#header form input{width:90%}#header form button{width:10%}#header ul.toolbar{width:100%;margin-top:10px}#header ul.toolbar li a{margin-left:0}#header ul.toolbar li{width:50%}#header ul.toolbar li:first-child{width:49%;margin-right:1%}#header ul.toolbar li a{width:100%;float:left;text-align:center}#header ul.toolbar li.full{width:100%;margin-right:0}#header ul.toolbar.top{margin-top:4px}#header ul.toolbar.top,#header ul.toolbar.top li,#header ul.toolbar.top li a{width:100%;margin-right:0}#header ul#navigation,#header ul#navigation li,#header ul#navigation li a{width:100%}#header ul#navigation li a{text-align:center}#header ul.toolbar.top li,#header ul#navigation li{display:none}#header ul.toolbar li.menu,#header ul#navigation li.menu{display:block}#header ul.toolbar.top.opened li,#header ul#navigation.opened li{display:block!important}#sidebar{margin-bottom:20px!important}#sidebar a.menu,#sidebar #show-categories.opened{display:block}#sidebar #show-categories,#sidebar #show-categories.opened h2{display:none}#sidebar ul li a .counter{width:auto;display:inline-block;float:right}.user-profile-clear-padding h2,.user-profile-clear-padding ul.profile-list,.user-profile-clear-padding h3,.user-profile-clear-padding form.user-profile-private-message{padding-left:0}.user-profile-clear-padding a.button,.user-profile-clear-padding .table-responsive{margin-left:0!important}ul.user-profile-actions li{padding:0 10px 0 0}ul.user-profile-actions li:last-child{padding-right:0}.col-upload,.col-edit-profile,.col-contact{width:100%;display:block;float:left;padding:0 10px;margin:0}}@media only screen and (max-width: 640px){.col-item{width:50%}#player{height:320px!important}#footer .toolbar ul li,#footer .toolbar ul li a{width:100%;text-align:center;margin:0}#main ul.toolbar{width:100%;display:block;float:left;margin-top:2px}ul.user-profile-actions li{width:50%;padding:0 2px;margin-bottom:4px}ul.user-profile-actions li a{padding:6px}ul.user-profile-actions li:nth-of-type(odd){padding-left:0}ul.user-profile-actions li:nth-of-type(even){padding-right:0}ul.user-profile-actions li:last-child{width:100%;padding:0;margin-bottom:0}}@media only screen and (max-width: 480px){.col-item:nth-of-type(2n){clear:none}#player{height:260px!important}ul.user-profile-actions li{width:100%;padding:0}ul.user-profile-actions li:last-child{margin-bottom:0}}/* ============================================
HORRIBLEVIDEOS.COM - MODERN TUBE SITE CSS
Complete visual overhaul - Light premium theme
Fast, SEO-friendly, mobile-first
============================================ */
/* === Design Tokens === */
:root {
--bg-body: #f5f3f7;
--bg-surface: #ffffff;
--bg-elevated: #f0edf4;
--bg-hover: #e8e5ed;
--bg-active: #ddd8e4;
--text-primary: #2a2530;
--text-secondary: #6b6171;
--text-muted: #9a93a2;
--accent: #d63384;
--accent-hover: #b82970;
--accent-glow: rgba(214, 51, 132, 0.12);
--green: #2e9e3f;
--blue: #0066cc;
--border: #e0dce5;
--border-light: #d0cbd6;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* === Base === */
*:not(.fa):not([class*="icon"]):not([class*="Icon"]):not([class*="vjs"]),
*:not(.fa):not([class*="icon"]):not([class*="Icon"]):not([class*="vjs"])::before,
*:not(.fa):not([class*="icon"]):not([class*="Icon"]):not([class*="vjs"])::after {
font-family: var(--font) !important;
}
/* Force all text visible on dark background - catch-all for base CSS overrides */
div, span, li, td, th, dt, dd, label, legend, figcaption, caption,
blockquote, cite, address, pre, code, small, strong, em, b, i, u,
.inner-col, .contents, .col-12, .col-left, .col-right,
.tab-wrapper, .tab-content, .panel, .panel-body {
color: var(--text-primary) !important;
}
/* Preserve Font Awesome */
.fa, .fa::before, .fa::after,
[class*="fa-"]::before,
.icon, .icon::before {
font-family: 'FontAwesome' !important;
}
/* Preserve VideoJS icons */
[class*="vjs-icon"]::before,
.vjs-big-play-button::before,
.video-js .vjs-big-play-button::before,
.video-js button::before,
.vjs-play-control::before,
.vjs-mute-control::before,
.vjs-fullscreen-control::before {
font-family: 'VideoJS' !important;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg-body) !important;
color: var(--text-primary) !important;
font-size: 14px !important;
line-height: 1.5 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--accent);
color: #fff;
}
/* === Typography === */
h1, h1 a {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
letter-spacing: -0.4px;
line-height: 1.3 !important;
}
h2, h2 a {
font-size: 18px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
letter-spacing: -0.2px;
}
h3, h3 a {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
}
a {
color: var(--text-primary) !important;
text-decoration: none !important;
transition: color 0.15s var(--ease) !important;
}
a:hover {
color: var(--accent) !important;
}
p {
color: var(--text-secondary) !important;
}
/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: #c0b8c8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }
/* ========================================
HEADER
======================================== */
#header {
background: rgba(255, 255, 255, 0.97) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
margin-bottom: 24px !important;
}
#header .wrapper {
padding: 0 16px !important;
}
/* Logo - preserve SVG background from base CSS */
#header a#logo {
display: block !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
/* Account bar */
#header ul.toolbar.top {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 8px 0 6px !important;
gap: 0 !important;
}
#header ul.toolbar.top li a {
color: var(--text-secondary) !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 4px 8px !important;
border-radius: var(--radius-sm) !important;
transition: all 0.15s var(--ease) !important;
margin: 0 !important;
background: transparent !important;
}
#header ul.toolbar.top li a:hover {
color: var(--text-primary) !important;
background: var(--bg-hover) !important;
}
#header ul.toolbar.top li a i {
font-size: 12px !important;
margin-right: 3px !important;
color: var(--text-muted) !important;
}
#header ul.toolbar.top li a:hover i {
color: var(--accent) !important;
}
/* Search */
#header form {
margin: 0 !important;
position: relative !important;
}
#header form input[name="q"] {
background: var(--bg-elevated) !important;
border: 1px solid var(--border-light) !important;
border-radius: var(--radius) !important;
color: var(--text-primary) !important;
padding: 9px 44px 9px 14px !important;
font-size: 13px !important;
transition: all 0.2s var(--ease) !important;
min-height: auto !important;
}
#header form input[name="q"]:focus {
border-color: var(--accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--accent-glow) !important;
background: var(--bg-hover) !important;
}
#header form input[name="q"]::placeholder {
color: var(--text-muted) !important;
}
#header form button {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
padding: 6px 10px !important;
color: var(--text-secondary) !important;
cursor: pointer !important;
border-radius: var(--radius-sm) !important;
transition: color 0.15s var(--ease) !important;
width: auto !important;
min-height: auto !important;
float: none !important;
}
#header form button:hover {
color: var(--accent) !important;
}
#header form button i {
font-size: 15px !important;
color: var(--text-secondary) !important;
}
#header form button:hover i {
color: var(--accent) !important;
}
/* Upload buttons in header */
#header ul.toolbar:not(.top) {
background: transparent !important;
border: none !important;
padding: 0 !important;
gap: 4px !important;
margin: 0 !important;
}
#header ul.toolbar:not(.top) li a.button {
font-size: 11px !important;
padding: 6px 12px !important;
border-radius: var(--radius-sm) !important;
font-weight: 600 !important;
}
/* ========================================
NAVIGATION
======================================== */
.container {
background: transparent !important;
border-bottom: none !important;
margin-top: 0 !important;
}
.container .wrapper {
padding: 0 16px !important;
}
ul#navigation {
display: flex !important;
gap: 1px !important;
list-style: none !important;
background: transparent !important;
}
ul#navigation li a {
color: var(--text-primary) !important;
padding: 10px 16px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: var(--radius-sm) !important;
border-bottom: none !important;
transition: all 0.15s var(--ease) !important;
white-space: nowrap !important;
background: transparent !important;
}
ul#navigation li a:hover {
color: var(--accent) !important;
background: var(--bg-hover) !important;
}
ul#navigation li.current a {
color: var(--accent) !important;
background: var(--bg-elevated) !important;
border-bottom: none !important;
}
ul#navigation li a i {
font-size: 14px !important;
color: var(--text-muted) !important;
margin-right: 0 !important;
}
ul#navigation li a:hover i {
color: var(--accent) !important;
}
ul#navigation li.current a i {
color: var(--accent) !important;
}
/* ========================================
LAYOUT
======================================== */
.wrapper {
max-width: 1440px !important;
padding: 0 16px !important;
}
#content {
background: var(--bg-body) !important;
}
#main {
background: transparent !important;
}
#main h1 {
margin-bottom: 16px !important;
padding: 0 6px !important;
}
.border { display: none !important; }
.spacer { margin-top: 16px !important; }
/* ========================================
TOOLBAR / SORT BAR
======================================== */
#main ul.toolbar {
background: var(--bg-surface) !important;
border-radius: var(--radius) !important;
padding: 4px !important;
margin-bottom: 16px !important;
border: 1px solid var(--border) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 2px !important;
float: none !important;
width: 100% !important;
}
ul.toolbar li {
list-style: none !important;
}
#main ul.toolbar li a {
padding: 7px 14px !important;
border-radius: var(--radius-sm) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
display: block !important;
transition: all 0.15s var(--ease) !important;
background: transparent !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
margin: 0 !important;
}
#main ul.toolbar li a:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
}
#main ul.toolbar li.active a {
background: var(--accent) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(214,51,132,0.25) !important;
}
/* ========================================
VIDEO GRID CARDS
======================================== */
.col-item {
background: var(--bg-surface) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
border: 1px solid var(--border) !important;
padding: 0 !important;
margin: 0 0 16px 0 !important;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease) !important;
content-visibility: auto;
contain-intrinsic-size: auto 280px;
position: relative !important;
z-index: 1 !important;
will-change: transform;
}
.col-item:hover {
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
border-color: var(--border-light) !important;
z-index: 2 !important;
}
.col-item a {
display: block !important;
}
/* Thumbnail container */
.col-item .image {
position: relative !important;
overflow: hidden !important;
border-radius: 0 !important;
aspect-ratio: 16/9;
}
.col-item .image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s var(--ease) !important;
}
.col-item:hover .image img {
transform: scale(1.08) !important;
}
/* Duration badge */
.col-item .time {
position: absolute !important;
bottom: 6px !important;
right: 6px !important;
background: rgba(0, 0, 0, 0.88) !important;
color: #fff !important;
padding: 2px 6px !important;
border-radius: 4px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
line-height: 1.3 !important;
backdrop-filter: blur(4px) !important;
}
/* Title */
.col-item .title {
display: block !important;
padding: 10px 10px 4px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
line-height: 1.35 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
margin: 0 !important;
}
/* Meta row */
.col-item .col-left {
padding: 0 10px 8px !important;
float: left !important;
}
.col-item .col-left span {
font-size: 11px !important;
color: var(--text-secondary) !important;
margin-right: 10px !important;
font-weight: 500 !important;
}
.col-item .col-left span i {
font-size: 11px !important;
margin-right: 3px !important;
color: var(--text-muted) !important;
}
.col-item .col-left .rating {
color: var(--green) !important;
}
.col-item .col-left .rating i {
color: var(--green) !important;
}
.col-item .col-right {
padding: 0 10px 8px !important;
float: right !important;
}
.col-item .col-right a {
color: var(--text-muted) !important;
font-size: 12px !important;
transition: all 0.15s var(--ease) !important;
}
.col-item .col-right a i {
font-size: 13px !important;
color: var(--text-muted) !important;
}
.col-item .col-right a:hover {
color: var(--accent) !important;
}
/* ========================================
VIDEO PLAYER PAGE
======================================== */
/* Breadcrumbs */
.breadcrumbs {
display: flex !important;
align-items: center !important;
gap: 0 !important;
font-size: 12px !important;
color: var(--text-muted) !important;
margin-bottom: 12px !important;
padding: 0 !important;
}
.breadcrumbs a {
color: var(--text-secondary) !important;
font-weight: 500 !important;
font-size: 12px !important;
}
.breadcrumbs a:hover {
color: var(--accent) !important;
}
.breadcrumbs > span {
color: var(--text-primary) !important;
font-size: 12px !important;
}
.breadcrumbs > span:last-child {
color: var(--accent) !important;
}
/* Player */
#player {
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
margin-bottom: 16px !important;
box-shadow: var(--shadow-lg) !important;
background: #000 !important;
}
/* VideoJS play button - pure CSS triangle (no font dependency) */
.video-js .vjs-big-play-button {
position: absolute !important;
border-radius: 50% !important;
width: 80px !important;
height: 80px !important;
border: 3px solid #fff !important;
background: rgba(0,0,0,0.6) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
}
.video-js .vjs-big-play-button::before {
content: '' !important;
font-family: inherit !important;
position: absolute !important;
top: 50% !important;
left: 54% !important;
transform: translate(-50%, -50%) !important;
width: 0 !important;
height: 0 !important;
border-style: solid !important;
border-width: 14px 0 14px 26px !important;
border-color: transparent transparent transparent #fff !important;
text-shadow: none !important;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
}
.video-js .vjs-big-play-button:hover {
background: rgba(214, 51, 132, 0.8) !important;
border-color: var(--accent) !important;
}
.video-js .vjs-big-play-button:hover::before {
border-color: transparent transparent transparent #fff !important;
}
.video-js .vjs-control-bar {
background: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(4px) !important;
}
.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
background: var(--accent) !important;
}
.video-js button,
.video-js .vjs-control {
font-family: 'VideoJS' !important;
}
.video-js button::before,
.video-js .vjs-control::before {
font-family: 'VideoJS' !important;
}
/* Rating */
ul#rating_options {
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
ul#rating_options li {
margin-left: 4px !important;
}
ul#rating_options li a .icon {
font-family: 'FontAwesome' !important;
font-size: 24px !important;
}
ul#rating_options li a .icon.i-thumbs-up:before { color: var(--green) !important; }
ul#rating_options li a .icon.i-thumbs-down:before { color: var(--accent) !important; }
ul#rating_options li.score {
color: var(--text-primary) !important;
font-weight: 700 !important;
font-size: 16px !important;
}
/* Tabs */
ul.tabs-list {
display: flex !important;
gap: 2px !important;
background: var(--bg-surface) !important;
border-radius: var(--radius) !important;
padding: 4px !important;
border: 1px solid var(--border) !important;
margin: 12px 0 16px !important;
}
ul.tabs-list li {
width: auto !important;
flex: 1 !important;
}
ul.tabs-list li a {
padding: 8px 14px !important;
border-radius: var(--radius-sm) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--text-secondary) !important;
transition: all 0.15s var(--ease) !important;
text-align: center !important;
display: block !important;
background: transparent !important;
}
ul.tabs-list li a:hover {
color: var(--text-primary) !important;
background: var(--bg-hover) !important;
}
ul.tabs-list li.active a {
background: var(--accent) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(214,51,132,0.2) !important;
}
/* Tab content */
.tab-wrapper .avatar {
width: auto !important;
margin-right: 12px !important;
}
.tab-wrapper .avatar img {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
object-fit: cover !important;
}
.tab-wrapper .contents {
padding: 0 !important;
}
/* Stats list */
ul.stats-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px 16px !important;
margin-bottom: 12px !important;
padding: 0 !important;
}
ul.stats-list li {
font-size: 13px !important;
color: var(--text-secondary) !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
ul.stats-list li i {
color: var(--text-secondary) !important;
font-size: 13px !important;
margin: 0 !important;
}
ul.stats-list li a {
color: var(--blue) !important;
font-size: 12px !important;
}
/* Tags on video page */
ul.stats-list li a[href*="search"] {
display: inline-block !important;
background: var(--bg-elevated) !important;
padding: 3px 10px !important;
border-radius: var(--radius-xl) !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-light) !important;
margin: 2px !important;
transition: all 0.15s var(--ease) !important;
}
ul.stats-list li a[href*="search"]:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
transform: translateY(-1px);
}
/* Description */
.contents .description {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid var(--border) !important;
}
.description h2,
.description h2 a {
font-size: 14px !important;
font-weight: 400 !important;
color: var(--text-secondary) !important;
line-height: 1.6 !important;
}
/* Share */
.tab-wrapper textarea {
background: var(--bg-elevated) !important;
border: 1px solid var(--border-light) !important;
border-radius: var(--radius) !important;
color: var(--text-secondary) !important;
font-size: 12px !important;
padding: 10px !important;
font-family: 'SF Mono', Monaco, monospace !important;
}
ul.share-list {
margin-top: 12px !important;
display: flex !important;
gap: 8px !important;
}
ul.share-list li a i {
font-size: 28px !important;
color: var(--text-secondary) !important;
transition: all 0.15s var(--ease) !important;
margin: 0 !important;
}
ul.share-list li a:hover i {
color: var(--accent) !important;
transform: scale(1.1);
}
ul.share-list li a.social-whatsapp:hover i { color: #25D366 !important; }
ul.share-list li a.social-telegram:hover i { color: #0088cc !important; }
ul.share-list li a.social-reddit:hover i { color: #FF4500 !important; }
ul.share-list li a.social-fb:hover i,
ul.share-list li a .fa-facebook-official:hover { color: #1877F2 !important; }
ul.share-list li a .fa-twitter-square:hover { color: #1DA1F2 !important; }
/* ========================================
COMMENTS
======================================== */
h3 {
margin-bottom: 12px !important;
}
ul.ul-comments li {
margin-bottom: 12px !important;
padding: 14px !important;
background: var(--bg-surface) !important;
border-radius: var(--radius) !important;
border: 1px solid var(--border) !important;
}
ul.ul-comments li .avatar {
width: 36px !important;
min-width: 36px !important;
margin-right: 12px !important;
}
ul.ul-comments li .avatar img {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
}
ul.ul-comments li .contents {
width: calc(100% - 48px) !important;
padding: 0 !important;
}
ul.ul-comments li .contents .comment {
color: var(--text-secondary) !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
ul.ul-comments li .contents strong {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
ul.ul-comments li .contents strong a {
color: var(--text-primary) !important;
}
ul.ul-comments li .contents strong a:hover {
color: var(--accent) !important;
}
/* Comment timestamp "wrote X ago" */
ul.ul-comments li .contents {
color: var(--text-secondary) !important;
font-size: 12px !important;
}
/* No comments yet text */
#main .inner-col,
#main .tab-wrapper {
color: var(--text-secondary) !important;
}
/* Static pages (DMCA, ToS, Privacy, Cookie Policy) */
#main h1, #main h2, #main h3, #main h4 {
color: var(--text-primary) !important;
}
#main p, #main li, #main td, #main th, #main div,
#main span, #main label, #main blockquote,
#main .col-12-clear, #main .col-12 {
color: var(--text-primary) !important;
}
#main ol, #main ul {
color: var(--text-primary) !important;
}
/* Static page body content */
.static-page, .static-content,
#main .tab-content, #main .panel-body,
#main .inner-col p, #main .inner-col li,
#main .inner-col div, #main .inner-col span {
color: var(--text-primary) !important;
}
/* Ensure all links inside content are visible */
#main a {
color: var(--text-primary) !important;
}
#main a:hover {
color: var(--accent) !important;
}
/* Contact form labels */
form label, form .form-label {
color: var(--text-primary) !important;
}
/* Table content */
table, table td, table th, table tr {
color: var(--text-primary) !important;
border-color: var(--border) !important;
}
table th {
background: var(--bg-elevated) !important;
color: var(--text-primary) !important;
}
/* Misc text elements that might be dark */
.clear + *, .spacer + * {
color: var(--text-primary) !important;
}
/* Captcha label */
.captcha-img + .clear + .captcha-input,
.captcha-input {
color: var(--text-primary) !important;
background: var(--bg-elevated) !important;
}
/* TOS checkbox label on signup */
form label, form .tos-label {
color: var(--text-primary) !important;
}
form label a {
color: var(--accent) !important;
}
/* Comment form */
form.sendCommentsBox input,
form.sendCommentsBox textarea {
background: var(--bg-surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
color: var(--text-primary) !important;
padding: 10px 14px !important;
font-size: 13px !important;
transition: border-color 0.15s var(--ease) !important;
}
form.sendCommentsBox input:focus,
form.sendCommentsBox textarea:focus {
border-color: var(--accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
form.sendCommentsBox textarea {
min-height: 80px !important;
resize: vertical !important;
}
/* ========================================
SIDEBAR
======================================== */
#sidebar {
background: var(--bg-surface) !important;
border-radius: var(--radius) !important;
border: 1px solid var(--border) !important;
overflow: hidden !important;
}
#sidebar h2, #sidebar a.menu {
background: var(--bg-elevated) !important;
background-image: none !important;
color: var(--text-primary) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 12px 14px !important;
border: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
#sidebar ul {
background: var(--bg-surface) !important;
}
#sidebar ul li {
border-bottom: 1px solid var(--border) !important;
}
#sidebar ul li:last-child {
border-bottom: none !important;
}
#sidebar ul li a {
color: var(--text-secondary) !important;
padding: 10px 14px !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all 0.15s var(--ease) !important;
}
#sidebar ul li a:hover {
background: var(--bg-hover) !important;
color: var(--accent) !important;
padding-left: 18px !important;
}
#sidebar ul li.active a {
background: var(--accent) !important;
color: #fff !important;
}
/* ========================================
PAGINATION
======================================== */
.pagination {
text-align: center !important;
margin: 24px 0 !important;
padding: 0 !important;
}
.pagination .border { display: none !important; }
.pagination .pages {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
.pagination .pages a,
.pagination .pages span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
height: 36px !important;
padding: 0 10px !important;
margin: 0 !important;
border-radius: var(--radius-sm) !important;
font-size: 13px !important;
font-weight: 600 !important;
background: var(--bg-surface) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
transition: all 0.15s var(--ease) !important;
}
.pagination .pages a:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
border-color: var(--border-light) !important;
}
.pagination .pages span.current,
.pagination .pages span,
.pagination .pages .active {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
.pagination .pages a.prev,
.pagination .pages a.next {
background: var(--bg-elevated) !important;
font-weight: 600 !important;
}
.pagination .pages a.prev:hover,
.pagination .pages a.next:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* ========================================
BUTTONS
======================================== */
a.button, .button,
button.btn, .btn-default,
input[type="submit"] {
background: var(--accent) !important;
background-image: none !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius) !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s var(--ease) !important;
text-transform: none !important;
box-shadow: 0 2px 8px rgba(214,51,132,0.2) !important;
letter-spacing: 0.2px !important;
}
a.button:hover, .button:hover,
button.btn:hover, .btn-default:hover,
input[type="submit"]:hover {
background: var(--accent-hover) !important;
box-shadow: 0 4px 16px rgba(214,51,132,0.3) !important;
transform: translateY(-1px) !important;
}
a.button[href*="upload"] {
background: var(--green) !important;
box-shadow: 0 2px 8px rgba(76,175,80,0.2) !important;
}
a.button[href*="upload"]:hover {
background: #43a047 !important;
box-shadow: 0 4px 16px rgba(76,175,80,0.3) !important;
}
/* ========================================
FORMS & INPUTS
======================================== */
input, textarea, select {
background: var(--bg-surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
color: var(--text-primary) !important;
padding: 10px 14px !important;
font-size: 13px !important;
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease) !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
input::placeholder, textarea::placeholder {
color: var(--text-muted) !important;
}
form#login-form, form#forgot-pass-form, form#signup-form {
max-width: 400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 32px !important;
background: var(--bg-surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg) !important;
}
form#login-form input,
form#forgot-pass-form input,
form#signup-form input {
margin: 6px 0 !important;
}
form#login-form a,
form#forgot-pass-form a,
form#signup-form a {
color: var(--text-secondary) !important;
font-size: 13px !important;
}
form#login-form a:hover,
form#forgot-pass-form a:hover,
form#signup-form a:hover {
color: var(--accent) !important;
}
/* ========================================
TAGS PAGE
======================================== */
.col-tags {
padding: 8px !important;
}
.col-tags .col-12 {
padding: 4px !important;
border: none !important;
}
.col-tags .col-12 a {
display: inline-flex !important;
align-items: center !important;
background: var(--bg-surface) !important;
padding: 8px 14px !important;
border-radius: var(--radius-xl) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
border: 1px solid var(--border) !important;
transition: all 0.2s var(--ease) !important;
width: 100% !important;
}
.col-tags .col-12 a:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(214,51,132,0.2) !important;
}
/* ========================================
BLOG LIST
======================================== */
.blog-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 20px !important;
margin: 20px 0 !important;
}
.blog-card {
background: var(--bg-surface) !important;
border-radius: var(--radius-lg) !important;
padding: 24px !important;
border: 1px solid var(--border) !important;
transition: all 0.25s var(--ease) !important;
}
.blog-card:hover {
border-color: var(--border-light) !important;
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
}
.blog-card h2 {
margin: 0 0 8px !important;
font-size: 17px !important;
line-height: 1.4 !important;
}
.blog-card h2 a {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.blog-card h2 a:hover {
color: var(--accent) !important;
}
.blog-card .blog-meta {
color: var(--text-muted) !important;
font-size: 12px !important;
margin-bottom: 10px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.blog-card .blog-meta i {
color: var(--text-muted) !important;
margin-right: 4px !important;
font-size: 11px !important;
}
.blog-card .blog-excerpt {
color: var(--text-secondary) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 12px !important;
}
.blog-card .blog-read-more {
color: var(--accent) !important;
font-size: 13px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.blog-card .blog-read-more:hover {
color: var(--accent-hover) !important;
}
/* ========================================
BLOG POST
======================================== */
.blog-article {
max-width: 800px !important;
margin: 0 auto !important;
}
.blog-article .blog-back-meta {
margin-bottom: 20px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--border) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
font-size: 13px !important;
color: var(--text-muted) !important;
}
.blog-article .blog-back-meta a {
color: var(--accent) !important;
font-weight: 600 !important;
}
.blog-article .blog-back-meta i {
color: var(--text-muted) !important;
margin-right: 4px !important;
}
.blog-content {
color: var(--text-secondary) !important;
font-size: 15px !important;
line-height: 1.8 !important;
}
.blog-content h2, .blog-content h3 {
color: var(--text-primary) !important;
margin: 24px 0 12px !important;
}
.blog-content p {
margin-bottom: 16px !important;
color: var(--text-secondary) !important;
}
.blog-content a {
color: var(--accent) !important;
font-weight: 500 !important;
}
.blog-content ul, .blog-content ol {
margin: 12px 0 !important;
padding-left: 24px !important;
}
.blog-content li {
margin-bottom: 6px !important;
color: var(--text-secondary) !important;
}
.blog-tags {
margin: 28px 0 !important;
padding-top: 16px !important;
border-top: 1px solid var(--border) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
.blog-tags strong {
color: var(--text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-right: 4px !important;
}
.blog-tags a {
display: inline-block !important;
padding: 4px 12px !important;
background: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border-radius: var(--radius-xl) !important;
font-size: 12px !important;
font-weight: 500 !important;
border: 1px solid var(--border) !important;
transition: all 0.15s var(--ease) !important;
}
.blog-tags a:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* Related videos on blog */
.blog-related {
margin-top: 32px !important;
padding-top: 24px !important;
border-top: 1px solid var(--border) !important;
}
.blog-related h3 {
margin-bottom: 16px !important;
}
.blog-related .col-3 {
margin-bottom: 16px !important;
}
.blog-related img {
border-radius: var(--radius) !important;
width: 100% !important;
aspect-ratio: 16/9 !important;
object-fit: cover !important;
transition: transform 0.3s var(--ease) !important;
}
.blog-related a:hover img {
transform: scale(1.05) !important;
}
.blog-related p {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
margin-top: 6px !important;
line-height: 1.4 !important;
}
/* Blog pagination */
.blog-pagination {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin: 32px 0 !important;
}
.blog-pagination a,
.blog-pagination span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
height: 36px !important;
padding: 0 10px !important;
border-radius: var(--radius-sm) !important;
font-size: 13px !important;
font-weight: 600 !important;
background: var(--bg-surface) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
transition: all 0.15s var(--ease) !important;
}
.blog-pagination a:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
}
.blog-pagination .blog-page-active {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* ========================================
FOOTER
======================================== */
#footer {
background: var(--bg-surface) !important;
border-top: 1px solid var(--border) !important;
margin-top: 40px !important;
}
/* Footer tags */
.footer-tags {
background: var(--bg-surface) !important;
padding: 28px 0 !important;
border-top: none !important;
border-bottom: 1px solid var(--border) !important;
}
.footer-tags h3 {
color: var(--text-secondary) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 12px !important;
}
.footer-tags .footer-tags-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.footer-tags a {
display: inline-block !important;
padding: 4px 10px !important;
background: var(--bg-elevated) !important;
color: var(--text-secondary) !important;
border-radius: var(--radius-xl) !important;
font-size: 12px !important;
font-weight: 500 !important;
border: 1px solid var(--border) !important;
transition: all 0.15s var(--ease) !important;
line-height: 1.4 !important;
}
.footer-tags a:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* Footer nav */
#footer .toolbar {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 20px 0 !important;
}
#footer .toolbar ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 6px !important;
}
#footer .toolbar ul li a {
color: var(--text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 4px 8px !important;
border-radius: var(--radius-sm) !important;
transition: all 0.15s var(--ease) !important;
background: transparent !important;
}
#footer .toolbar ul li a:hover {
color: var(--text-primary) !important;
background: var(--bg-hover) !important;
}
/* Copyright */
#copyright {
background: var(--bg-body) !important;
color: var(--text-muted) !important;
font-size: 13px !important;
padding: 24px 16px !important;
text-align: center !important;
border-top: 1px solid var(--border) !important;
}
#copyright .wrapper {
max-width: 800px !important;
}
#copyright p {
color: var(--text-secondary) !important;
font-size: 12px !important;
line-height: 1.6 !important;
margin-bottom: 8px !important;
}
#copyright a {
color: var(--text-secondary) !important;
font-weight: 500 !important;
}
#copyright a:hover {
color: var(--accent) !important;
}
/* ========================================
ALERTS / NOTIFICATIONS
======================================== */
.notification, .notification p, .notification a, .notification span {
color: inherit !important;
}
.notification {
border-radius: var(--radius) !important;
padding: 12px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
border: 1px solid !important;
}
.notification.success {
background: rgba(76, 175, 80, 0.1) !important;
color: #66bb6a !important;
border-color: rgba(76, 175, 80, 0.2) !important;
}
.notification.error {
background: rgba(244, 67, 54, 0.1) !important;
color: #ef5350 !important;
border-color: rgba(244, 67, 54, 0.2) !important;
}
.notification.alert {
background: rgba(255, 152, 0, 0.1) !important;
color: #ffa726 !important;
border-color: rgba(255, 152, 0, 0.2) !important;
}
.notification.info {
background: rgba(33, 150, 243, 0.1) !important;
color: #42a5f5 !important;
border-color: rgba(33, 150, 243, 0.2) !important;
}
.notification * {
color: inherit !important;
}
/* ========================================
RATING BAR
======================================== */
.rating-bar {
border-radius: var(--radius-sm) !important;
overflow: hidden !important;
}
/* ========================================
USER PROFILE
======================================== */
.user-profile .avatar img {
border-radius: 50% !important;
max-width: 120px !important;
}
ul.user-profile-actions li a {
background: var(--bg-surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
color: var(--text-primary) !important;
padding: 16px !important;
transition: all 0.2s var(--ease) !important;
}
ul.user-profile-actions li a:hover {
background: var(--bg-hover) !important;
border-color: var(--border-light) !important;
transform: translateY(-2px) !important;
}
ul.user-profile-actions li a i {
color: var(--accent) !important;
}
/* ========================================
UPLOAD
======================================== */
.qq-upload-button {
background: var(--accent) !important;
background-image: none !important;
border-radius: var(--radius) !important;
font-weight: 600 !important;
padding: 12px !important;
transition: all 0.2s var(--ease) !important;
}
.qq-upload-button:hover,
.qq-upload-button-hover {
background: var(--accent-hover) !important;
background-image: none !important;
}
/* ========================================
MODAL
======================================== */
.modal-content {
background: var(--bg-surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg) !important;
}
.modal-header {
border-bottom: 1px solid var(--border) !important;
}
.modal-footer {
border-top: 1px solid var(--border) !important;
}
.modal-backdrop.in {
opacity: 0.8 !important;
}
/* ========================================
NETWORK BAR - hide
======================================== */
#header #network {
display: none !important;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.wrapper {
padding: 0 12px !important;
}
ul#navigation li a {
padding: 8px 12px !important;
font-size: 12px !important;
}
}
@media (max-width: 860px) {
h1, h1 a { font-size: 20px !important; }
.col-item { width: 33.333% !important; }
#player {
height: 400px !important;
border-radius: var(--radius) !important;
}
#header a#logo { width: 250px !important; background-size: 250px 38px !important; }
ul#navigation { flex-wrap: wrap !important; }
ul#navigation li a { padding: 8px 10px !important; font-size: 12px !important; }
.blog-grid { grid-template-columns: 1fr !important; }
/* Sidebar stacks below content on mobile */
#sidebar {
width: 100% !important;
float: none !important;
margin: 0 0 16px 0 !important;
}
#main.col-10.margin {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* Blog related videos stack on mobile */
.blog-related .col-3 {
width: 50% !important;
float: left !important;
}
/* Blog tags wrap properly */
.blog-tags {
flex-direction: row !important;
flex-wrap: wrap !important;
}
/* Blog article respects mobile width */
.blog-article {
max-width: 100% !important;
padding: 0 8px !important;
}
}
@media (max-width: 640px) {
h1, h1 a { font-size: 18px !important; }
.col-item { width: 50% !important; }
#player {
height: 300px !important;
border-radius: var(--radius-sm) !important;
}
ul.toolbar, #main ul.toolbar { flex-direction: column !important; }
#main ul.toolbar li a { text-align: center !important; }
ul.tabs-list { flex-wrap: wrap !important; }
ul.tabs-list li { flex: none !important; width: auto !important; }
ul.tabs-list li a { padding: 8px 12px !important; font-size: 11px !important; }
.footer-tags .footer-tags-list { gap: 4px !important; }
#footer .toolbar ul { flex-direction: column !important; align-items: center !important; }
form#login-form, form#forgot-pass-form, form#signup-form { padding: 20px !important; }
/* Blog related videos fully stack on phone */
.blog-related .col-3 {
width: 100% !important;
float: none !important;
}
/* Blog tags full width on phone */
.blog-tags a {
padding: 3px 8px !important;
font-size: 11px !important;
}
}
@media (max-width: 480px) {
.col-item { width: 50% !important; }
#player { height: 240px !important; }
#header a#logo { width: 200px !important; background-size: 200px 30px !important; }
}
/* ========================================
ADDTHIS / MISC CLEANUP
======================================== */
.addthis_inline_share_toolbox { margin: 8px 0 !important; }
br + br { display: none !important; }