body{ background: #390a0b; margin:0; padding:0; color:white; font-size:1rem; font-family:Arial; }
a{ color:white; text-decoration:none; cursor:pointer; } a:hover{ text-decoration:underline;  }

/* TOP SHELF */
#topshelf{ width:100%; background:#470707; padding:20px 0 20px 0; position:fixed; z-index:4; }
.searchbox{ margin-left: 350px; border:1px solid #313131; border-radius:3px; max-width: 80%; }
.search_results{ position:absolute; display:none; }
.searchbox input{ display:inline-block; float:left; padding:10px 20px 10px 20px; font-size:1.5rem; background: transparent; border:0; width:80%; color:white; }
.searchbox button{ color:#aa8c8c; display:inline-block; float:right; padding:10px 20px 10px 20px; font-size:2rem; background: #390a0b; border:0; }

/* NAV BAR */
#sidebar{ width: 300px; background: #470707; position:fixed; top:0; left:0; height: 100vh; padding: 0 0 0 20px; display:inline-block; }
.sidebar_logo{ margin:-10px 20px 5px 55px; position:fixed; left:25px; z-index:3; }
.logo{ background:url('../img/madbitcoins_logo.png'); background-size: 170px 75px; width:170px; height:75px; display:inline-block; margin-left: -25px; }
.menu_bars{ position:relative; left:-55px; top:-30px; font-size:1.5rem; cursor:pointer; display:inline-block; }
.login{ display:block; margin:25px 0 50px 0; font-size:1rem; cursor:pointer; }
.menu_item{ display:block; padding:10px 20px 20px 5px; font-size:1.5rem; color:white; }
.menu_item i{ color:#e5e5e5; width:55px; }
.scrollable{ overflow-y: scroll; scrollbar-color: rgb(2, 96, 141) #171717; scrollbar-width:10px; height:90vh; padding-top:30px; }
.scrollable::-webkit-scrollbar {  width: 10px;   }
.scrollable::-webkit-scrollbar-track { background: #171717; border-radius: 10px;  }
.scrollable::-webkit-scrollbar-thumb { background: rgb(2, 96, 141); border-radius: 10px; }
.scrollable::-webkit-scrollbar-thumb:hover {  background: rgb(2, 96, 141); }

/* GENERAL CONTENT */
#main_contents{ margin-left:350px;  padding-top: 120px; color:white; font-size:1.5rem; }
#content_wrapper{ padding-bottom: 50px; }
.heading{ font-size:2rem; display:block; margin-bottom:10px; }
.iblock{ display:inline-block; }

/* VIDEO PAGE */
.video_container{ width:330px; float:left; margin:50px 10px 0 0;}
.video_thumb{ margin-bottom: 20px; width: 320px; height: 180px; background-position: 0 -30px; background-size: 320px 240px; text-align:right; border: 2px solid #333; border-radius: 10px; }
.video_duration{ position:relative; top:150px; right:10px; position:relative; background:black; color: white; padding: 2px 5px 2px 5px; display:inline-block; font-size:1.2rem; }
.video_title{ height: 60px; display:block; overflow: hidden; }
.video_description{ display:block; font-size:1.5rem; margin-top:30px; line-height: 2.5rem; }
#player{ margin-top:10px; }
#video_tags{ margin-top:30px; }
#tag_create_new{ background: white; color: black; }
.tag{ font-size:1.5rem; padding: 5px 10px 5px 10px; border-radius: 10px; margin:0 10px 10px 0; display:inline-block; cursor:pointer; }
.tag a{ text-decoration:none; } .tag a:hover{ text-decoration:none; }
.smalltag{ font-size:1.2rem; padding: 5px 8px 5px 8px; border-radius: 10px; margin-bottom:10px; display:block; cursor:pointer; }
.remove_tag{ display:inline-block; margin-left: 10px; font-size: 1rem; position: relative; top: -2px; }
.published{ color:#6b6b6b; font-size:80%; margin-top:10px; }
.published img{ margin-right:10px; position:relative; top:5px; }
.nice_link{ text-decoration:none; } .nice_link:hover{ text-decoration:none; color:yellow; }
.stat_panel{ background: #281e1e; padding:10px; border-radius:10px; display:inline-block; margin: 10px 10px 30px 0; text-align:center; }
.stat_detail{ font-size:2.5rem; font-weight:bold; margin-bottom:5px; }
.sup{ position:relative; top:-8px; font-size:70%; margin: 0 15px 0 8px; }


/* TAG MANAGER */
#tag_manager{ display: none; cursor: move; z-index:2; position:absolute; transform: translate(-50%,-50%); top:50%; left:50%; background: #181818; color:white; border-radius: 20px; border: 8px solid #333; padding:20px 30px 50px 30px;  }
#tag_manager_close{ float:right; display:block; height: 40px; cursor:pointer; font-size:2rem; }
.tag_create_block{ display:block; margin: 10px 0 10px 0; border: 1px solid #333; font-size:2rem; padding: 5px 10px 5px 10px; }
.tag_create_block_c{ display:block; font-size:2rem; padding: 5px 10px 5px 10px; border:0; margin-top:20px; text-align:center;}
.tag_input{ display:inline-block; }
.tag_input select, .tag_input input{ padding: 15px 10px 15px 10px; background: #121212;color: white;border: 1px solid #333; font-size:1.5rem; }
.tag_title{ display:inline-block; width:100px; font-size:1.5rem;}
.tag_color{ display:inline-block; cursor:pointer;  padding:0; border:2px solid black; height:30px; width:50px; border-radius:5px; }
.tag_color input{ height:30px; width:50px; border-radius:5px; padding:0; border:0; opacity:0; }
.halfcol{ width:45%; display:inline-block; }
#tag_preview{ background: white; color: black;  }
.button{ border: 2px solid #333; font-size:1.5rem; padding: 10px 20px 10px 20px; display: inline-block; color: white; border-radius: 10px; background: #202020; cursor:pointer; }
#tag_saved{ color:green; margin-left:10px; display:none; }
#tag_manager_fields{ display:none; }
#tag_man_search_results{ display:none; position:relative; z-index:2; }
.search_result_item{ text-align:left; padding:10px; background: #f5f5f5; color:black; border-bottom: 1px solid black; font-size: 1.5rem; cursor:pointer; }
.search_result_item:hover{ background: #e3e3e3; }
#create_new_btn{ position:absolute; right: 30px; padding: 15px 10px 15px 10px; background: #333333;color: #f1f1f1; border: 1px solid black; font-size:1.5rem; display:inline-block; border-radius: 5px; cursor:pointer; }

/* ADMIN */
.formbg{ margin-top :20px;background: #333333;border:2px solid #white;display:inline-block;padding:20px;font-size:1.5rem; }

@media screen and (orientation: portrait) {
	.video_title{ height: 90px; }
	.menu_item, #main_contents, .heading, .menu_bars{ font-size:2.5rem; }
	.menu_item i {display:none; }
	.smalltag, .login, .tag, .video_description{ font-size:2rem; } .smalltag span{ display:none; }
	.video_container{ margin: 50px 40px 0 0; }
}