/* ----- Smoothing default CyTube CSS (works without JS) ----- */


	/* -- body -- */

body {overflow-x:hidden}

	/* -- buttons -- */

.btn {text-shadow:none}

	/* -- modal windows -- */

@media screen and (min-width: 768px) {
	.modal-dialog {max-width:950px !important; margin-top:10px}
}

	/* -- brand -- */

.navbar-brand {cursor:default}

	/* -- MOTD -- */

#motdwrap {padding:10px; border-color:white; box-shadow:none}
#togglemotd {margin-top:-5px}

	/* -- superadmin icon -- */

.glyphicon-globe {margin-right:3px}

	/* -- playlist row panes -- */

#rightpane, #leftpane {margin-top:5px !important; margin-bottom:5px !important}

	/* -- left pane wells -- */

#leftpane .well {margin-bottom:5px}

	/* -- queue titles -- */

.qe_title {margin-left:4px}

	/* -- footer -- */

#footer {padding-bottom:5px; height:auto}


/* ----- Patching CSS after loading JS (comments only here, actual patches in the JS) ----- */


/*
#mainpage {padding-top:52px}
#motdrow, #announcements, #main, #playlistrow {border:solid 2px transparent; margin-bottom:5px}
#main > div, #playlistrow > div {
	padding-left:5px; padding-right:5px; margin-top:5px; margin-bottom:5px;
}
#motdwrap {margin:5px -10px}
#announcements .alert {margin:0px -10px 5px}
#drinkcount {margin:0px}
*/


/* ----- CyTube Plus created elements CSS ----- */


	/* -- channel avatar -- */

#chanavatar {margin-right:10px}

	/* -- azuki row (user top logo) -- */

#azukirow {
	padding-left:5px; padding-right:5px; border-left:solid 2px transparent; border-right:solid 2px transparent;
	background:transparent; background-repeat:no-repeat !important; background-position:center center !important;
	margin:0px -8px; min-height:5px;
}

	/* -- MOTD elements -- */

#motdlogo {margin-bottom:8px}
#motdtabswrap {margin-top:8px}
.motdtabs-btn {margin-right:5px}
#motdtabscontent {padding:10px 5px}

	/* -- rules button and panel -- */

#rulesbtnwrap {text-align:center}
#rules-btn {margin-top:10px; margin-bottom:5px}
#rulespanel-outer {width:100%; padding:0px}
#rulespanel {
	max-width:700px; margin:0 auto; margin-top:0px; padding:4px; border:solid 2px white; text-align:left;
	border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
}

	/* -- attention bar -- */

#attbarrow-outer {padding:0px 5px}
#attbar {height:22px; background-color:white}

	/* -- full-sized title row -- */

#titlerow {
	background-color:white;
	background-image:linear-gradient(to right, #cccccc, #cccccc);
	background-position:0px center;
	background-size:0% 100%; background-repeat:no-repeat;
	margin:-5px -8px 5px;
	border-radius:4px;
}
#titlerow-outer {
	padding:3px 5px; text-align:center; font-size:16pt; color:black;
	text-shadow: 0px 0px 10px #666666, 0px 0px 10px #666666;
}
#titlerow #currenttitle {border:none; background:transparent}

	/* -- media info bar -- */

#mediainfo {
	background:transparent; margin-bottom:0px; border-width: 1px 1px 0px; border-style:solid solid none;
	border-color:#CCC #CCC -moz-use-text-color; border-radius:5px 5px 0px 0px;
}

	/* -- player alert (if hidden video after loading) -- */

#ytapiplayer .alert {text-align:left; margin:0px -15px}

	/* -- player covering layer -- */

#coverpl {
	position:absolute; left:5px; top:0px; background-color:white;
	background-repeat:no-repeat; background-position:center center;
}

	/* -- sounds and admin panels GUI layers -- */

#sounds-dropdown, #chatfunc-dropdown {
	position:absolute; top:22px; display:block; z-index:10000; padding:5px;
	overflow:auto; margin-right:5px;
}
#muteall-btn, #spamclear-btn, #antiafk-btn {width:100%}

	/* -- chat controls buttons group -- */

#chatcontrols {margin-top:4px}

	/* -- chat elements -- */

.squavatar {width:24px; height:24px; margin-right:3px; border:solid 6px; vertical-align:middle; display:inline-block}
.avatar {margin-right:3px}
.server-whisper + .squavatar {display:none}
.globalmod {margin-right:2px}
.embedimg {max-width:200px; max-height:300px}
.embedvid {max-width:200px; max-height:300px; border:0px; vertical-align:middle}

	/* -- main fonts and emotes GUI layer -- */

#chatpanel {margin-top:0px; margin-bottom:0px}
#fontspanel, #emotespanel {
	text-align:center; max-width:700px; margin:0px auto 5px auto; border:solid 2px white; border-radius:6px
}
.fluidpanel {max-width:1200px !important}

	/* -- fonts panel -- */

#fontsbtnwrap {margin-top:5px; margin-bottom:5px}
#unibtnwrap {margin:5px 45px 2px}
@media (max-width:767px) {
	#unibtnwrap {margin:5px 25px 2px}
}
#fontsbtnwrap .btn, #unibtnwrap .btn {margin:0px 3px 3px 3px}

	/* -- emotes panel -- */

#emotespanel img {margin:5px; max-height:35px; cursor:pointer}
#emotesbtnwrap {text-align:center; margin:5px}
#emotespanel .alert {text-align:left; margin:5px -10px}

	/* -- advanced playlist controls -- */

#advplcontrols {width:100%; padding-top:10px}
#advplcontrols button {width:25%}

	/* -- database and galleries buttons gruoup -- */

#leftpanecontrols {margin-right:5px}

	/* -- layout configuration box toggling button -- */

#layout-btn {margin-left:5px}

	/* -- various configuration box elements -- */

#configbtnwrap, #modewrap, #themewrap, #funcbtnwrap, #cleardbwrap, #gallery-well, #hidewrap, #embedwrap {
	text-align:center;
}
.conf-cap {padding-top:9px}
#mode-sel, #theme-sel, #gal-sel {width:80%; margin:0px auto}
.theme-header {text-align:center; font-size:9pt; font-style:italic}
#embed-help {cursor:pointer; margin-left:7px}

	/* -- channel database -- */

.db-cat {overflow:auto; max-height:400px}
.db-break {width:100%}
.db-title {margin-left:4px}
.db-link {margin-left:5px}
#previewFrame {margin:0 auto; display:block}

	/* -- channel galleries -- */

#galleryFrame {margin-bottom:10px}
#gal-sel {margin-bottom:20px}

	/* -- custom footer -- */

#leftfooter {font-size:10pt}
div[id="leftfooter"] {text-align:center; margin-bottom:5px}
#rightfooter {float:right; margin:0px 0px 15px 15px}


/* ----- Additional JS classes ----- */


.relative {position:relative}

.covered {visibility:hidden; opacity:0}

.dist {background-color:gold; color:red; font-size:12pt; font-family:times new roman; padding:3px}

.mX {
	-webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); transform:scaleX(-1);
	-ms-transform:scaleX(-1); -o-transform:scaleX(-1);
}

.mY {
	-webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); transform:scaleY(-1);
	-ms-transform:scaleY(-1); -o-transform:scaleY(-1);
}

.rotate {
	-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
	-ms-transform:rotate(180deg); -o-transform:rotate(180deg);
}

.vertical {
	-webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); transform:rotate(270deg);
	-ms-transform:rotate(270deg); -o-transform:rotate(270deg);
}