body {
	background-color: black;
	background-image: url('/images/circles.png');
	background-position: 290px 200px;
	height: 100%;
	font-size: 11px;
	font-family: Verdana, Arial, Sans-Serif;
	color: silver;
	padding: 0;
	margin: 0;
	text-align: left;
	line-height: 1.5em;
}

a {color: #FFD823; font-weight:bold; text-decoration:none;}
a:visited {color: #FFD823;}
a:hover {color: white; text-decoration: none;}
a:active { color: #EF23AA;}

/*---- CSS3 Buttons ----*/
/* use:
	<a class="button-link">Button</a>
*/

a.button, button, input[type=submit] {
	color: #FFD823;
	background-color: #21218C;
	border: 1px solid #447BEA;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-weight: bold;
	padding:2px 4px;
}



a.button:hover, button:hover, input[type=submit]:hover {
	color: white;
	background-color: #3131C4;
	text-decoration: none;
}

button.warn {
	background-color: #4C0027;
	border: 1px solid #DF037A;

}

button.warn:hover {
	background-color: #75003E;
}


a.button.center, button.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.button-link {
	padding: 3px 6px;
	background: #21218C;
	color: #FFD823;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: solid 1px #20538D;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor: pointer;
	font-size: 100%;
	line-height: 1em; /* need to hack this for float right - dunno why, they padding enlarges */
	margin-right: .5em;
}
.button-link:visited {
	color: #FFD823;
}
.button-link:hover {
	background: #4141FC;
	border: solid 1px #2A4E77;
	color: white;
	text-decoration: none;
}
.button-link:active {
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background: #2626FF;
	border: solid 1px #203E5F;
	color: white;
}


.full {
	display: inline-block;
	width: 98%;
}

#left h2, #right h2 {
	text-align: center;
	/* background-image: url('/images/fuscha60.png'); */
}

#left h2 {
	background-image: url('/images/fuscha60.png');
}

#right h2 {
	background-image: url('/images/blue50.png');
}

h1 {
	/* background-color: #000043; */ /* dark blue */
	background-image: url('/images/blue50.png');
	color: #DFB803; /* gold */
	font-size: 180%;
	font-weight: normal;
	padding: 2px;
	margin: 0 0 10px;
	font-family: 'SansationBold', sans-serif;
	/* font-size-adjust: 0.7; */
}

h2 {
	/* background-color: #33001B; */ /* dark fuscha */
	background-image: url('/images/fuscha60.png');
	color: #DFB803; /* gold */
	font-size: 155%;
	font-weight: bold;
	/* text-transform: uppercase; */
	margin: 0 0 5px 0;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	font-family: 'SansationBold', sans-serif;
	padding: 2px;
	/* font-size-adjust: 0.7; */
}

#menubar h2, #footer h2 {
	background-image: none;
	font-size: 135%;
	text-transform: uppercase;
}

h3 {
	/* background-color: #232344; */
	color: #DB308B; /* fuscha */
	font-size: 135%;
	font-family: 'SansationBold', sans-serif;
	margin: 15px 0 5px 0;
}

h5 {
	color: #DB308B; /* fuscha */
	font-weight: normal;
	font-style: normal;
	font-size: 250%;
	line-height: 1px;
	font-family: 'EvilzRegular', sans-serif;
	/* font-size-adjust: 0.86; */
}

hr {
	background-color: #8E004C;
	border:none;
	height: 1px;
	margin: 1em 0 1em 0;
}

hr.blue, hr.dark {
	background-color: #21218C
}

img.download {vertical-align: middle;}

.form-group {
	clear:both;
	margin-bottom: inherit;
}

.form-group > label {
	float: left;
	width: 150px;
	margin-right: 10px;
}

.form-group > input[type=text], .form-group > input[type=password], .form-group > input[type=email], .form-group > select, .form-group > textarea, .form-group > .hint  {
	width: 250px;
}

.form-group > .hint {
	font-style: italic;
	margin-left: 160px;
	margin-bottom: 1em;
	margin-top: -10px;
}

form span.copy {
	color: #FFFFCC;
	font-weight: bold;
}

/*
form > textarea {
	height: 200px;
	width: 450px;
}
*/

input, select, textarea {
	background-color: #1E1E1E;
	border: 1px inset #DFB803;
	color: #CAC3FA;
	margin-bottom: 1em;
}

/* use checkboxes with labels like so;

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

*/

input[type="checkbox"] {
		display:none;
}
input[type="checkbox"] + label span {
		display:inline-block;
		width:19px;
		height:19px;
		margin:-1px 4px 0 0;
		vertical-align:middle;
		background:url(check_radio_sheet_2.png) left top no-repeat;
		cursor:pointer;
}
input[type="checkbox"]:checked + label span {
		background:url(check_radio_sheet_2.png) -19px top no-repeat;
}

li {
	list-style-type: square;
	margin-left: 1em;
	margin-bottom: .5em;
}

p {
	text-align: justify;
}


.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 4px;
	line-height: 1.2;
}

/*
table.table-hover tr, table.table-hover td {
	cursor: pointer;
}

table.table-hover tbody tr:hover {
	background-color: none;
	background-image: url('/images/blue50.png');
}
*/

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
	background: none;
	background-color: none;
	background-image: url('/images/blue50.png');
}


ul {
	margin-left: .5em;
}

::selection {
	background: #161666;
}

::-moz-selection{
	background: #161666;
}

ul.leftbar li{
	list-style-type: none;
	margin-left: 0;
	margin-top: .5em;
	margin-bottom: .5em;
}

ul.nav, li.nav-item {
	margin-left: 0;
}

a.nav-link {
  color: #DF037A;
	background-color: #21218C;
	border: 1px solid #D30070;
}

a.nav-link:hover, a.nav-link:active, a.nav-link:focus, a.nav-link.active {
	color: #DFB803;
	background-color: #4141FC;
	border: 1px solid #DFB803;
}

/* ----------container to center the layout-------------- */
#container {
	max-width: 1200px;
	margin-bottom: 10px;
	margin: 0 auto;
	padding-bottom:10px;
}

/* columns of same height styles */

/* firefox fix */
.img-responsive {
    width: 100%;
}

/* vertical alignment styles */
#body .col-top {
    vertical-align:top;
}
#body .col-middle {
    vertical-align:middle;
}
#body .col-bottom {
    vertical-align:bottom;
}

/* this is done to make left/right bars 100% height in boostrap 3 (bootstrap 4 uses flexbox, so it can) */
/* so smaller screens will stack the columns */

/*
@media (min-width: 600px) {
	#body .container-md-height {
		display:table;
		padding-left:0px;
		padding-right:0px;
	}
	#body .row-md-height {
		display:table-row;
	}
	#body .col-md-height {
		display:table-cell;
		float:none;
	}
}
*/

/* this is done to make left/right bars 100% height in boostrap 3 (bootstrap 4 uses flexbox, so it can) */
@media (any-hover: hover), (-moz-touch-enabled: 0) {

	#body .container-md-height {
		display: table;
		padding-left: 0px;
		padding-right: 0px;
	}
	#body .row-md-height {
		display: table-row;
	}
	#body .col-md-height {
		display: table-cell;
		float: none;
	}
  dt.mobile-indicator {
    color: white;
  }
}

dt.mobile-indicator {
  display: none;
  font-size: 2px;
}

/* we don't care about the heights and want the columns to stack for mobile devices*/
@media (any-hover: none), (-moz-touch-enabled: 1) {

	dt.mobile-indicator {
		font-size: 1px;
	}
}

/* dt is set differently so if on mobile it can be detected via js */


/* ----------banner for logo-------------- */
#banner {
	/* background-color: #E1DDD9; */
	text-align: left;
	padding-bottom: 5px;
	position: relative;
}

#banner a.logo{
	display: inline-block;
	height: 80px;
	margin-top: 20px;
}

#banner a.logo img {
	width: 146px;
	height: 76px;
}

#banner canvas {
	position: absolute;
	right: 0;
}


#container .body {

	margin: 0px;
}

/*#banner img {padding:10px 0px;}*/

/* -----------------content--------------------- */
#content {
	/* background-color: #0C0C3F; */ /* dark navy */
	background-image:url('/images/smoke65.png');
}

#content div.main {

	margin-top:10px;
	min-height:800px;
}

#content div.errors {
	color: pink;
	background-image:url('/images/smoke65.png');
	font-weight: bold;
}

#content div.messages {
	color: #93CBFF;
	background-image:url('/images/smoke65.png');
	font-weight: bold;
}

#content div.errors li,  #content div.messages li{
	list-style-image: none;
}

#content.manage, #content.mobile {
	/* background: none; */
	padding: 0; /* kill off sidebars */
}

#content.manage > div {
	padding: 10px;
}

/*
div#content {
	min-height:600px;
	height:expression(this.scrollHeight > 600 ? "auto":"600px");
}
*/
p, pre{
	padding: 5px 0;
	margin: 0;
}

pre {
	background-color: inherit;
	color:silver;
	width: 700px;
	overflow: auto;
}

.btn-default, .btn-primary, .btn-danger, .btn-warn {
	font-size:15px;
	font-weight: bold;
}

.btn-primary {
	color: #FFD823;
	background-color: #21218C;
	border: 1px solid #447BEA;
}

.btn-default {
	color: #444;
	background-color: #FFDC44;
	border: 1px solid #555;
}

.btn-danger {
	color: silver;
	background-color: #72013E;
	border: 1px solid #E00077;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .open .dropdown-toggle.btn-primary {
	background-color: #3131C4;
	color: white;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .open .dropdown-toggle.btn-default {
	background-color: #BA9400;
	color: black;
}

.btn-danger:hover, .btn-danger:focus, .btn-primary:active, .open .dropdown-toggle.btn-danger {
	background-color: #BF0065;
	color: white;
}

.btn-sm {
	line-height: 1.0;
}

div.modal-content {
	background:black;
	border:2px solid #DF037A;
}


/* --------------left/right sidebars------------- */


#left, #right {

	/* background: url('/images/blue50.png'); */
	margin: 0;
	padding: 0;
	vertical-align: top;
	/* this is same as #content to keep height for background image */
	/*
	min-height:800px;
	height:expression(this.scrollHeight > 800 ? "auto":"800px");
	*/

}

#left {
	background: url('/images/blue50.png');
}

#right {
	background: url('/images/fuscha60.png');
}


#content > div, #right > div, #left > div {
	padding: 5px 5px;
}

/* -----------footer--------------------------- */
#footer {
	margin: 5px 0;
	text-align: right;
	background-color: black;
	border: 2px solid #DF037A; /* fuscha */
	padding: 5px 15px;
}


#menubar {
	/* background-color: #E0A3B7; */
	background-color: black;
	border: 2px solid #DF037A; /* fuscha */
	padding: 5px 15px;
	margin-top: 10px;
}


/* custom stuff */
.block {
	display: block;
}

.blogpost {
	margin: 8px 0 8px 0;
}

.blogpost .title {
	color: #6666FF; /* electric blue */
	font-size: 16px;
	font-weight: bold;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	font-family: 'SansationBold', sans-serif;
	/* font-size-adjust: 0.7; */
}

.blogpost .body {
	margin: 5px 0 5px 0;
}

.blogpost .date {
	font-size: 10px;
	font-style: italic;
	text-align: right;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.clear {
	clear: both;
}

.comment {
	margin-top: 1em;
	margin-bottom: 1em;
}

.comment .head {
	color: #BFE1FF;
	font-size: 80%;
	font-style: italic;
	margin-bottom: 1em;
}

.comment .cbody {
	color: #F0F0C0;
}

.comment .foot {
	font-size: 80%;
	font-style: italic;
	margin-top: 1em;
}

.date {
	font-style: italic;
	margin-top: 1em;
}

.emp {
	font-style: italic;
}

.hide {
	display: none;
}

.imgArea {
	text-align: center;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
}

.inset {
	color: #BBE;
	font-size: 13px;
	margin: 1em;
}

.left {
	float: left;
}

.light {
	color: #FFFFCC;
}

.bright {
	color: #FFFFCC;
	font-weight: bold;
}

.nopad {
	background-color: inherit;
	padding: 0;
}

.nomar {
	background-color: inherit;
	margin: 0;
}

.note {
	font-style: italic;
	margin-top: 5px;
}

.right {
	float: right;
}

.sideitem {
	/* background:url('/images/blue65.png'); */
	padding: 2px;
	width: 100%;
}

.strong {
	font-weight: bold;
}

.hspace {
	height: .5em;
}

.sspace {
	height: 1em;
}

.dspace {
	height: 2em;
}

.tspace {
	height: 3em;
}

.und {
	text-decoration: underline;
}

#chatbox {
	border: 1px solid #DFB803;
	height: 400px;
	width: 620px;
	margin-bottom: 20px;
	overflow: auto;
}

#chatbox div {
	margin: 0 .5em .5em .5em;
}

#chatbox div.me {
	color: deepskyblue;
}

#chatbox div.other {
	color: pink;
}

#chatbox span.time {
	font-size: 9px;
	font-style: italic;
	margin-right: 7px;
	color: #FFD823;
}

#inarea {
	background: black;
	color: silver;
	height: 50px;
	width: 620px;
	overflow: auto;
}

/*---- jquery.form upload ----*/


div.progress_jquery_form {
	position:relative;
	width: 400px;
	border: 1px solid #ddd;
	padding: 1px;
	border-radius: 3px;
}

div.progress_jquery_form div.bar {
	background-color: #B4F5B4;
	width: 0%;
	height: 20px;
	border-radius: 3px;
}

div.progress_jquery_form div.percent {
	position: absolute;
	display: inline-block;
	top: 3px;
	left: 48%;
}

/*------- SNIPPETS --------*/

div.snippet_list{
	height: 200px;
	overflow: auto;
}

div.snippet_list li {
	color: #DFB803;
}

div.snippet_list li.item {
	list-style-type: none;
	margin-left: .5em;
}

div.snippet_list ul.categories a.add {
	color: #DF037A;
	font-weight: bold;
}

div.snippet_list ul.categories a.add:hover {
	color: #DD6CA9;
}

div.snippet_list ul.subcategories li {
	list-style-type: circle;
	margin-left: 1.5em;
}

div.snippet_list ul.subcategories li.item {
	list-style-type: none;
	margin-left: 1em;
}

div.snippet_item .category, div.snippet_item .subcategory {
	color: #DF037A;
	font-weight: bold;
}

div.snippet_item div {
	margin-bottom: .5em;
}

div.snippet_item .name {
	color: #DFB803;
	font-weight: bold;
	margin-bottom: .5em;
}

div.snippet_item .description {
	color: #DFB803;
	font-style: italic;
	margin-bottom: 1em;
}

div.snippet_item a {
  color: #7dbff6;
}

div.snippet_item textarea {
	width: 600px;
	height: 200px;
}

div.snippet_item .content_html {
	width: 600px;
	/* might just take these out altogether */
	max-height: 800px;
	overflow: auto;
	margin-bottom: 2em;
}

/*-------- idol ---------*/

/* left sidebar */
div.participant, a.add_new_participant, span.winner {
	font-weight: bold;
}

div.participant a.edit, a.add_new_participant {
	color: #DB308B;
}

div.participant a.edit:hover, a.add_new_participant:hover {
	color: white;
}

/* right sidebar */
h2.contestants {
	margin-bottom: .5em;
}

div.contestant {
	border: 1px solid #44A;
	font-weight: bold;
	margin-bottom: 2px;
	padding-bottom:1em;
	padding-left:5px;
	width: 96%;
}

div.contestant a.edit {
	font-weight: bold;
}

div.contestant > div.form {
	font-weight: normal;
	margin-top: 10px;
}

div.contestant span.light {
	height: 1.5em;
}

/* content */
span.winner {
	padding-left:2em;
	background-color:#0000AA;
}

#spn_winner {
	color: pink;
}

#frmBonus span.right {
	width: 80px;
}