:root 
{
    --xlight-color: #94618e;
    --xmedium-color: #6F446C;
    --xdark-color: #49274a;
    --xxlight-color: #646aa7;
    --xxmedium-color: #484e81;
    --xxdark-color: #222537;
    --xxxlight-color: #FF8F45;
    --xxxmedium-color: #FF5F15;
    --xxxdark-color: #CF2F00;
    --light-color: #AFCFEF;
    --medium-color: #6F8FAF;
    --dark-color: #2F4F6F;
}

*
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; 
	color: #666;	
	padding: 0px;
	margin: 0px;
	border: 0px;
	text-rendering: optimizeLegibility !important;
}

html
{
	overflow-y: scroll;
}

form
{
}

body
{
}

small
{
	font-size: 12px; 
	color: #888
}

p	
{ 
	xtext-align: justify;
	padding-bottom: 12px;
	line-height: 18px;
}

p.extra	
{ 
	padding-bottom: 20px;
	line-height: 26px;
}

span.recordingtitle
{ 
	display: block;
	padding-bottom: 4px;
	margin: 0px !important;
	font-weight: bold;
}
span.recordingnotes
{ 
	display: block;
	padding-top: 4px;
	margin: 0px !important;
	color : #999;
}
span.recordinghashtags
{ 
	display: block;
	padding-top: 8px;
	margin: 0px !important;
	color : #999;
}

div.recordingnotes
{ 
	display: block;
	float: left;
}
div.recordinghashtags
{ 
	display: block;
	float: right;
}

li
{
	margin-left: 24px;
}

h1, div.h1
{
	margin: 0 0px 16px 0px;
	display: block;
	border-radius: 5px;
	height: 48px;
	line-height: 44px;
	text-align: left;
	background-color: #f0f0f0;
	font-size: 28px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	background-position: right center;
	background-repeat: no-repeat;
    text-shadow:  4px 4px 4px #ccc;
}
.panel > h1
{
	margin: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

h1 b, div.h1 b, .panel > h1 b
{
	color: #999;
	font-size: 28px;
	font-weight: bold;
}

h1 i, div.h1 i, .panel > h1 i
{
	color: #ccc;
	font-size: 28px;
	font-weight: bold;
	font-style:normal;
}

h2 
{
	margin: 16px 50px 12px 9px;
	font-size: 18px; 
	font-weight: bold;
}

.h2 b
{
	color: White;
}

h3 
{
	margin: 0px 60px 4px 0px;
	font-size: 12px;
	font-weight: bold;
}

audio 
{ 
	width: 100%; 
	display: block; 
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #000;
	height: 40px;
}
audio::-webkit-media-controls-enclosure
{
	background-color: #000;
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider 
{
    filter: invert(100%);
}

a 
{
	text-decoration: underline;
	text-underline-offset: 2px;
	xcolor: var(--medium-color);
	color: #000;
	white-space: nowrap;
	xfont-weight: bold;
	text-decoration-color: #aaa;
}
a:hover 
{
	xcolor: var(--light-color);
	text-decoration: underline;
	xfont-weight: bold;
}

a.simple
{
	color: #000;
	text-decoration: none;
}
a.simple:hover
{
	color: #666;
	text-decoration: none;
}

a.heavy
{
	font-weight: bold;
}

a.hashtag1
{
	text-decoration: none;
	font-weight: normal;
	color: #999;
}
a.hashtag2
{
	text-decoration: none;
	font-weight: bold;
	color: #999;
}
a.hashtag3
{
	text-decoration: none;
	font-weight: bold;
	color: #333;
}
a.hashtag1:hover, a.hashtag2:hover, a.hashtag3:hover
{
	text-decoration: underline;
}

a.button-high, a.button-low, a.actionItem, a.actionItemLow, a.bubble
{
	display: inline-block;
	padding-left: 6px;
	padding-right: 6px;
	xpadding-top: 5px;
	xpadding-bottom: 5px;
	height: 27px;
	line-height: 27px;
	text-decoration: none;
	border-radius: 5px;
}
a.button-high, a.actionItem
{
	color: #fff;
	background-color: var(--medium-color);
	border: 1px solid var(--dark-color); 
}
a.button-low, a.actionItemLow, a.bubble
{
	color: #666;
	background-color: #fff;
	border: 1px solid #ccc; 
}
a.button-high:hover, a.button-low:hover, a.actionItem:hover, a.actionItemLow:hover, a.bubble:hover
{
    box-shadow: rgba(100, 100, 100, 0.5) 0 3px 8px;
}
table.input td.buttons a, #tabButtons a, a.impact
{
	xfont-weight: bold;
	xborder-width: 2px; 
	xpadding: 6px 8px 6px 8px;
}

input[type='text'], input[type='password'], input[type='email'], select, textarea
{
	border: solid 1px #b0b0b0;
	color: Black;
	resize: none;
	vertical-align: middle;
    margin-right: 6px;
    padding: 4px 3px 4px 3px;
    
}
textarea
{
	margin: 0px;
}
input[type='text']::placeholder 
{
    opacity: 0.5;
    color: #666;
}

input[type='text']:disabled, select:disabled, textarea:disabled
{
	opacity: 0.5;
}

input[type=checkbox] 
{
	margin-right: 4px;
    position: relative;
	accent-color: var(--dark-color);
}
input[type=checkbox]:disabled
{
	opacity: 0.5;
} 

input[type=radio] 
{
	margin-right: 5px;
    xposition: relative;
	accent-color: var(--dark-color);
	xtop: 1px;
}
input[type=radio]:disabled
{
	opacity: 0.5;
} 
input[type='text']:focus, input[type='password']:focus, input[type='email']:focus, textarea:focus
{
    outline-style:solid;
    outline-color: var(--dark-color);
}

option
{
	padding-right: 10px;
}

span.checkBox label
{
	padding-right: 8px;
}
span.radioButton
{
	xvertical-align:middle;
}
span.radioButton label
{
	xposition: relative;
	xtop: 1px;
	padding-right: 8px;
}

strong
{
	font-weight: bold;
	font-size: inherit;
	color: #000;
}

option
{
	color: Black;
}

p.pageBreak
{
	page-break-before: always;
}

hr
{
	margin-top: 4px;
	margin-bottom: 4px;
	border-bottom: solid 2px #ccc;
}

#main-container
{
    min-width: 500px;
	xwidth: 750px;
	xmargin: 0 auto;
	xbackground-color: #e0e0e0;
	display: flex; 
	flex-direction: column; 
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

header
{
	height: 108px;
	width: 100%;
}

footer
{
	width: 100%;
	margin-top: auto; 
	height: 66px;
	background-color: var(--dark-color);
	background-image: linear-gradient(to bottom right, var(--light-color), var(--dark-color));
    display: flex;
	align-items: center;
}
footer div
{
	color: var(--light-color);
}
footer div:first-child
{
	padding-left: 20px;
}
footer div:first-child a
{
	margin-right: 12px;
}
footer div:last-child
{
	padding-right: 20px;
    margin-left: auto;
}

#ctl00_header
{
	xbackground-image: url(../img/pana.jpeg);
	xbackground-size:     cover;   
	xbackground-repeat:   no-repeat;
    xbackground-position: center center;   
}

#ctl00_topBar
{
	height: 28px;
	background-color: #eee;
	xopacity: 0.6;
}

#ctl00_topBar #topBarLeft
{
	height: 28px;
	float: left;
}

#ctl00_topBar #topBarLeftInner
{
	padding-left: 20px;
	height: 28px;
	line-height: 28px;
}

#ctl00_topBar #topBarRight
{
	height: 28px;
	float: right;
}

#ctl00_topBar #topBarRightInner
{
	padding-right: 20px;
	height: 28px;
	line-height: 28px;
}

#ctl00_topBar span.divider
{
	color: #aaa;
}

#ctl00_middleBar 
{
    display: flex;
    padding-left: 16px;
	background-color: var(--dark-color);
    align-items: center;
    height: 80px;
	background-image: linear-gradient(to bottom right, var(--light-color), var(--dark-color));
}

.logo
{
    font-family: 'Courier New', 'Roboto', Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow:  2px 2px 8px #333;
}
.logo-sub
{
    font-family: 'Courier New', 'Roboto', Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: var(--light-color);
    text-shadow: 2px 2px 8px var(--dark-color);
}


#middleBarInner
{
	padding-right: 6px;
    margin-left: auto;
    order: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: flex-end;
}

.menu-buttons a
{
	border-radius: 10px;
	padding-top: 6px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 6px;
	text-decoration: none;
	border: 2px solid var(--dark-color); 
	background-color: var(--medium-color);
	color: #fff;
}
.menu-buttons a:hover
{
	background-color: var(--light-color);
    box-shadow: rgba(100, 100, 100, 0.5) 0 3px 8px;
}

section
{
	width: 100%;
	xbackground-color: #e0e0e0;
	xbackground-color: #fff;
	xbackground-color: var(--dark-color);
	background-image: linear-gradient(to bottom right, var(--dark-color), var(--medium-color));
	xbackground-image: url(../Images/flys.jpg);
	background-size: cover;
	background-blend-mode: multiply;
	xtransition: background-image 4s ease-in-out;
	/* Don't enable either of these  */
	flex: 1; 
	xdisplay: flex;
}
xsection > div
{
	background-color: rgba(0,0,0,0.0);
}

.wrap
{
	padding: 20px;
	xwidth: 90%;
	xmargin: 0 auto;
}


#main-content, #sidebar-left, #sidebar-right
{
	width: 100%;
	float: left;
	display: none;
}

#sidebar-left > div
{
	margin-right: 20px;
}


aside#sidebar-right > div
{
	margin-left: 20px;
}

div.boxTitle
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 36px;
	line-height: 34px;
	text-align: left;
	background-color: #f0f0f0;
    text-shadow:  3px 3px 3px #ccc;
}
div.boxTitle span b
{
	color: #999;
	font-size: 22px;
	font-weight: bold;
}

div.boxTitle img
{
	width: 0px;
}

div.boxTitle span
{
	font-size: 22px;
	padding-left: 16px;
	font-weight: bold;
	display: block;
	float: left;
	color: #666;
}
div.boxTitle span:nth-child(2)
{
	padding-left: 0px;
	padding-right: 16px;
	display: block;
	font-weight: normal;
	float: right;
	color: inherit;
}
div.boxTitle span:nth-child(2) i
{
	xcolor: white;
}

div.boxTitle div
{
	text-align: center;
	float: left;
}

div.panel
{
	margin-bottom: 16px;
	border-radius: 5px;
	xbackground-color: #f7f7f7;
}
div.panel-high, div.panel-highgrey
{
	border: 6px solid var(--light-color);
	background-color: var(--light-color);
	animation: pulse 10s 1;
}

@keyframes pulse {
	0%, 100% {
	border-color: var(--light-color);
	background-color: var(--light-color);
	}
	
	50% {
	border-color: #a00;
	background-color: #a00;
	}
}
div.panel-highgreyz
{
	xborder: 5px solid #d31e1e;
	xbackground-color: #d31e1e;
	border: 6px solid #f0f0f0;
	background-color: #f0f0f0;
	animation: pulsegrey 20s 1;
}

@keyframes pulsegrey {
	0%, 100% {
	xborder-color: #f0f0f0;
	xbackground-color: #f0f0f0;
	border-color: var(--medium-color);
	background-color: var(--medium-color);
	}
	
	50% {
	xborder-color: #aaa;
	xbackground-color: #aaa;
	border-color: #a00;
	background-color: #a00;
	}
}

.panel > h2, div.panel div.paneltitle
{
	margin: 0px;
	display: block;
	height: 35px;
	line-height: 33px;
	text-align: left;
	font-size: 22px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
    text-shadow:  3px 3px 3px #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #f0f0f0;
	border-bottom: solid 1px #ccc;
}
.panel > h2 b
{
	color: #999;
	font-size: 22px;
	font-weight: bold;
}
.panel > h2 > div, div.panel div.paneltitle > div
{
	float: right;
}
.panel > h2.high
{
	xpadding-left: 5px;
}
.panel > h2.red
{
	background-color: #d31e1e;
}
.panel > h2.grey
{
	background-color: #f0f0f0;
}
.panel > h2.medium
{
	color: #fff;
	background-color: var(--medium-color);
    text-shadow:  3px 3px 3px var(--dark-color);
}
.panel > h2.dark
{
	color: #fff;
	background-color: var(--dark-color);
    text-shadow:  3px 3px 3px var(--medium-color);
}
.panel > h2.medium b, .panel > h2.dark b
{
	color: #eee;
}

.standard-panel > h2 span
{
}

div.panel div.panelcontent, div.panel div.panelcontentlist
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #fff;
}

div.panelcontentlist p	
{ 
	text-align: left;
	padding: 0px;
}

div.panelpadding
{
	padding: 10px;
}
div.panelcenter
{
	max-width:355px;
	margin: 0 auto;
}

div.fullpanel
{
	border-radius: 5px;
	margin-bottom: 16px;
}

div.panelcontentlist a
{
	font-weight: normal;
	text-align: left;
	border-top: solid 1px #ddd;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 8px;
	padding-bottom: 4px;
	text-decoration: none;
	display: block;
	color: #666;
	height: 24px;
	line-height: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.panelcontentlist a:hover
{
	font-weight: normal;
	text-decoration: none;
	background-color: #e7e7e7;
	color: #666;
}
div.panelcontentlist a:first-child
{
	border-top: none;
}
div.panelcontentlist a:last-child
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
div.panelcontentlist a.current
{
	font-weight: bold;
	background-color: var(--medium-color);
	color: #fff;
}

div.panelcontentmiddle
{
	background-color: #fff;
	border-top: solid 1px #ccc;
}

/* Use <p> for text */
div.panelcontent p, div.panelcontentmiddle p
{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 0px;
}
div.panelcontent p:last-child, div.panelcontentmiddle p:last-child
{
	padding-bottom: 10px;
}

/* NOTE TO SLR - Can't globally assign all spans like this */
/* Use <span> for containers with <p> type padding */
div.panelcontent span, div.panelcontentmiddle span
{
	xdisplay: block;
	xmargin-left: 10px;
	xmargin-right: 10px;
	xmargin-top: 10px;
}
div.panelcontent span:last-child, div.panelcontentmiddle span:last-child
{
	margin-bottom: 10px;
}

/* Use <div> for containers without padding */
div.panelcontent div, div.panelcontentmiddle div
{

}

div.panelcontentmiddle:first-child
{
	border-top: none;
}

div.panel div.panelfooter
{
	font-weight: bold;
	height: 26px;
	line-height: 26px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #f0f0f0;
	padding-left: 16px;
	border-top: solid 1px #ccc;
	overflow: auto;
}
div.panel div.panelbuttonfooter
{
	padding-top: 12px;
	padding-bottom: 2px;
	font-weight: bold;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #f0f0f0;
	padding-left: 16px;
	border-top: solid 1px #ccc;
	overflow: auto;
}

div.content 
{
	width: 870px;
	xfloat: left;
}

div.narrowcontent
{
	max-width: 500px;
}

div.mediumcontent
{
	max-width: 650px;
}

div.largecontent
{
	max-width: 710px;
}

div.fullcontent 
{
}

div#mainContent
{
	display: flex;            
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.inputBack
{
	background: #f7f7f7;
}

.inputButtons
{
	height: 24px;
	padding-top: 12px;
	padding-bottom: 5px;
	text-align: right;
	vertical-align: top;
}

.topInputButtons
{
	height: 24px;
	padding-top: 5px;
	padding-bottom: 6px;
	text-align: left;
}

div.buttonBar
{
	padding-top: 12px;
	padding-bottom: 12px;
}

.errorMessages
{
	width: 70%;
	padding-top: 12px;
	padding-bottom: 5px;
	vertical-align: top;
}

.inputPrompt, .errorInputPrompt
{
	font-weight: bold;
	text-align: right;
	padding-right: 12px;
	border-bottom: solid 1px #e0e0e0;
	border-top: solid 1px white;
}

.errorInputPrompt
{
	color: #900;
}

.inputValue
{
	border-bottom: solid 1px #e0e0e0;
	border-top: solid 1px white
}

.name
{
	font-weight: bold;
	color: #ffffff;
	background-color: #afbfdf
}

.artistTitle
{
	width: 46px;
}

input.greyed
{
	margin: 2px;
	padding: 3px;
	background-color: #efefef;
}

input.wrong
{
	margin: 2px;
	padding: 3px;
	background-color: #f7e7e7;
}

input.right
{
	margin: 2px;
	padding: 3px;
	background-color: #e7f7e7;
}

.clue
{
	font-weight: bold;
	width: 260px;
}

.error { color: #900; font-weight: bold; }
.warning { color: #600; }
.success { color: #090; font-weight: bold; }
.amber { color: #dd5500; }
.status { color: #666; font-weight: bold; }


div.tagline
{
	padding-top: 8px;
	color: #888;
	font-style: italic;
}

div.album
{
}

div.frontcover
{
	float: left;
	margin-right: 12px;
	padding: 0px;
	text-align: center;
	color: #ccc;
}
div.frontcover div.img
{
	height: 502px;
	border-radius: 5px;
}
div.frontcover div.img img
{
	border: solid 1px #ddd;
	border-radius: 5px;
}
div.frontcover div.menu
{
	padding-top: 8px;
	padding-bottom: 16px;
}

div.backcover
{
	float: right;
	margin-left: 12px;
	padding: 0px;
	text-align: center;
	color: #ccc;
}

div.albumdate
{
	float: right;
	font-weight: bold;
}
div.albumtitle
{
	font-weight: bold;
	margin: 0px 50px 12px 0px;
	font-size: 18px; 
	font-weight: bold;
}

div.tracklist
{
	background: transparent;
	font-family: "trebuchet ms",geneva,"lucida grande", helvetica, arial, sans-serif;
	font-size: 1.2em;
	color: #666 !important;
	padding-top: 16px;
	padding-bottom: 8px;
	font-weight: bold;
}

div.tracklisting
{
	width: 350px;
	float: left;
}

div.tracksamples
{
	float: left;
}

.tracknumber
{
	width: 21px;
	color: #aaa;
	padding-right: 4px;
}

div.tracksample
{
	clear: left;
	float: left;
	width: 22px;
	height: 18px;
}

.trackname
{
	padding-right: 12px;
}

.clear
{
	clear: left;
}

div.newshi
{
	font-size: 1.2em;
	font-weight:bold;
	text-align: center;
}

.lowkey
{
	color: #999;
}

.light
{
	color: #ccc;
}

div#columns
{
	width: 100%;
}

div.column
{
	float: left;
}

div.columnEx
{
	background-color: #fcfcfc;
	border: solid 5px #f0f0f0;
	border-radius: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	min-width: 300px;
	flex: 1;
}

div.columnExTitle
{
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #888;
	padding-bottom: 6px;
}

div.toolbar
{
	border-radius: 5px;
	margin-bottom: 16px;
}
div.toolbar-impact
{
	border: solid 2px var(--dark-color);
	border-radius: 5px;
	margin-bottom: 16px;
}

div.toolbar a
{
	white-space: nowrap;
}

div.toolbar p, div.toolbar-impact p, div.toolbar-inner p
{
	padding: 0px;
	color: inherit;
}

div.toolbar-inner, div.toolbar-right
{
	height: calc(100% - 0px);
	padding: 6px 10px 6px 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	min-height: 40px;
	row-gap: 4px;
	column-gap: 4px;
	box-sizing: border-box;
	color: inherit;
}
div.toolbar-right
{
	float: right;
	padding: 6px 6px 6px 10px;
}

div.toolbar-content
{
	background-color: #f0f0f0;
	border-radius: 5px;
}

div.toolbar-upper
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #f0f0f0;
	border-bottom: solid 1px #ccc;
}

div.toolbar-middle
{
	border-bottom: solid 1px #ccc;
	background-color: #fafafa;
}

div.toolbar-lower
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #f7f7f7;
}

div.toolbar-upper > div, div.toolbar-middle > div, div.toolbar-lower > div, div.toolbar-content
{
}

div.toolbarLarge, div.toolbarExtraLarge
{
	border: solid 1px #ccc;
	border-radius: 5px;
	margin-bottom: 12px;
}
div.toolbarExtraLarge
{
	min-height: 40px;
	line-height: 40px;
	padding-left: 8px;
	background-color: #f0f0f0;
}

div.toolbarLargeInner
{
	line-height: 36px;
	background-color: #f0f0f0;
	border-radius: 5px;
}

div.toolbarLargeContent
{
	margin-left: 8px;
	line-height: 32px;
}

div.toolbarLargeUpper
{
	border: solid 1px #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 36px;
	line-height: 36px;
	background-color: #f0f0f0;
	overflow: hidden;
}
div.toolbarLargeUpper div.toolbarLargeUpperInner
{
	padding-left: 8px;
	padding-right: 8px;
	line-height: 36px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
div.toolbarLargeLower
{
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	min-height: 36px;
	line-height: 36px;
	margin-bottom: 12px;
}
div.toolbarLargeLower > div
{
	padding-left: 8px;
	line-height: 36px;
	background-color: #f7f7f7;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

div.toolbarLargeMiddle
{
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	background-color: #fafafa;
	padding: 8px;
}

div.toolbarError
{
	display: none;
	border: solid 1px #600;
	border-radius: 5px;
	margin-bottom: 12px;
	background-color: #900;
	color: #fff;
	padding: 8px;
}

div.infoPanel
{
	border-radius: 5px;
	margin-bottom: 12px;
	border: 2px solid var(--light-color);
}

div.infoPanelInner
{
	background-color: var(--medium-color);
	border-radius: 5px;
}

div.infoPanelContent
{
	color: White;
	padding: 8px;
}
div.infoPanelContent b, div.infoPanelContent i, div.infoPanelContent span, div.infoPanelContent a, div.infoPanelContent small
{
	color: White;
}
div.infoPanelContent a:hover
{
	color: #ddd;
}

div.threeWayPanel
{
	border-radius: 5px;
	margin-bottom: 12px;
	border: solid 1px #aaa;
	height: 336px;
	display: flex;
}
div.threeWayLeft, div.threeWayMiddle, div.threeWayRight
{
	box-sizing: border-box;
	height: 100%;
}
div.threeWayMiddle
{
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	padding-left: 16px;
	padding-right: 16px;
	background-color: #f0f0f0;
	border-radius: 0px !important;
}
div.threeWayLeft, div.threeWayRight
{
	background-color: #f7f7f7;
}
div.threeWayLeft
{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
div.threeWayRight
{
	padding-top: 16px;
	padding-left: 16px;
	padding-right: 16px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#left_user_def
{
	padding: 8px;
	text-align: center;
	color: #999;
}
.twtu-left
{
	flex: 0 0 210px;
}
.twtu-middle
{
	flex: 1;
	min-width: 200px;
}
.twtu-right
{
	flex: 0 0 250px;
}

div.profilePic
{
	background-repeat: no-repeat;
	background-size: 160px 160px;
	width: 160px;
	height: 160px;
	border-radius: 3px;
	border: solid 1px #ccc;
	margin-left: 22px;
	margin-top: 16px;
	margin-bottom: 16px;
}
.profileBanner
{
	background-color: #e7e7e7;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	height: 32px;
	line-height: 32px;
	text-align: center;
}
.profileName
{
	font-size: 14px;
	font-weight: bold;
}
.profileStatus
{
	padding-bottom: 6px;
	text-align: center;
}
.profileAwardHolder
{
	padding-left: 8px;
	padding-top: 8px;
}
.profileAward
{
	box-sizing: border-box;
	display: inline-block;
	width: 92px;
	height: 30px;
	line-height: 30px;
	background-position: 3px 2px;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	padding-left: 4px;
	padding-right: 8px;
	border-radius: 3px;
	margin-bottom: 8px;
	margin-right: 8px;
	border-width: 1px;
	border-style: solid;
}
.paGold { background-color: #eec726; border-color: #be9700; }
.paSilver { background-color: #dbdcdd; border-color: #abacad; }
.paBronze { background-color: #d4b297; border-color: #a48267; }
.paNone { background-color: #f7f7f7; border-color: #eee; color: #ccc }

div.error
{
}

div.infopanel
{
	border: solid 1px #ddd;
	background-color: #f0f0f0;
	padding: 8px;
}

div.boxContents
{
	border-top: solid 1px #ccc;
	background-color: #f7f7f7;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-bottom: 16px;
}

div.menuBoxContents
{
	line-height: 1.7em;
	margin-bottom: 16px;
}

div.menuBoxContents img
{
	vertical-align: middle;
}

div.boxContents div
{
	padding: 6px;
}

div.boxContents p
{
	text-align: left;
	padding: 8px;   /* Make a new class rather than change this */
}
div.boxContents > span
{
	display: inline-block;
	text-align: left;
	padding: 16px;   /* Make a new class rather than change this */
}
div.boxContents p:nth-child(n+2)
{
	border-top: solid 1px #ccc;
}
div.boxContents p:last-child
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

div.boxContents div p
{
	margin-top: 4px;
	margin-bottom: 4px;
}

div.menuBoxContents a
{
	font-weight: normal;
	text-align: left;
	border-top: solid 1px #ccc;
	padding-top: 4px;
	padding-left: 16px;
	padding-right: 8px;
	padding-bottom: 4px;
	text-decoration: none;
	display: block;
	color: #666;
	background-color: #f7f7f7;
}

div.menuBoxContents a.current
{
	font-weight: bold;
	background-color: var(--medium-color);
	color: #fff;
}

div.menuBoxContents a.current i
{
	color: #fff;
}

div.menuBoxContents a:hover
{
	background-color: #e7e7e7;
}
div.menuBoxContents a.current:hover
{
	background-color: var(--medium-color);
}

div.menuBoxContents a:last-child
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.fixed
{
	font-family: Courier New;
}

table.timeline
{
	border-collapse: collapse;
	width: 100%
}

table.timeline tr
{
	height: 60px;
}

table.timeline td
{
	padding: 2px 8px 2px 8px;
	vertical-align: middle;
}

table.timeline td.year
{
	border: solid 1px #ddd;
	background-color: #e7e7e7;
}

table.timeline td.date
{
	border: solid 1px #ddd;
	background-color: #f0f0f0;
}

table.timeline td.entry
{
	border-left: solid 1px #ddd;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	background-color: #f7f7f7;
}

table.timeline td.img
{
	text-align: right;
	background-color: #f7f7f7;
	border-right: solid 1px #ddd;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}

table.timeline td.img img
{
	height: 44px;
	vertical-align: middle;
}

div#pager
{
	border: solid 1px #F2F2F2;
	background-color: #FCFCFC;
	width: 666px !important;
	width: 674px;
	height: 18px;
	padding: 4px;
	margin-bottom: 8px;
}

div#pager div#info
{
}

div#pager div#pages
{
	float: right;
}

div#pager div#pages A {text-decoration: none; font-weight: normal;}
div#pager div#pages A:hover {text-decoration: underline; font-weight: normal;}

table.tabholder
{
	width: 730px;
	background: url(../images/page.png) repeat-x;
	clear: both;
}
table.tabholder *
{
	font-family: verdana,arial,helvetica;
}

table.tabholder table
{
}

table.tabholder td
{
	vertical-align: top;
}

table.tabholder table td.c1
{
	width: 10%;
	vertical-align: top;
}

table.tabholder table td.c2
{
	width: 90%;
	vertical-align: top;
}

table.tabindexholder
{
	border-collapse: collapse;
	width: 730px;
}

table.tabindexholder table
{
	width: 100%;
}

table.tabindexholder td
{
	width: 50%;
	vertical-align: top;
}

table.tabindexholder table td.c1
{
	width: 10%;
	vertical-align: top;
}

table.tabindexholder table td.c2
{
	width: 90%;
	vertical-align: top;
}

table.backingholder
{
	width: 100%;
	background: url(../images/page.png) repeat-x;
}

table.backingholder td
{
	vertical-align: top;
}

table.backingholder table td.c1
{
	width: 10%;
	vertical-align: top;
}

table.backingholder table td.c2
{
	width: 90%;
	vertical-align: top;
}

.tabindex
{
	float: right;
	border: solid 1px #DDDDDD;
}

.tabgrouptitle
{
	font-size: 16px;
}

.tabheader
{
	width: 730px;
}
.tabheader *
{
	font-family: verdana,arial,helvetica;
}

.tabtitlesongbook
{
	padding-left: 5px;
	padding-right: 5px;
}

.tabtitlesongbook div.title
{
	float: left;
	font-size: 18px;
	font-weight: bold;
	height: 26px;
	line-height: 26px;
	padding-right: 10px;
}

.tabtitlesongbook div.artist
{
	margin-top: 2px;
	float: left;
	font-weight: bold;
	font-size: 12px;
	height: 26px;
	line-height: 26px;
}

.tabtitlesongbook div.info
{
	margin-top: 2px;
	float: right;
	color: #999;
	font-size: 12px;
	height: 26px;
	line-height: 26px;
}

.tabtitle
{
	border-left: solid 1px #DDDDDD;
	border-top: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	font-size: 18px;
	font-weight: bold;
	padding: 2px 5px 4px 5px;
	background-color: #F0F0F0;
}

.tabtitle i
{
	padding-top: 4px;
	padding-right: 10px;
	font-size: 12px;
	float: right;
}

.tabid
{
	font-size: 18px;
	float: right;
}

.tabrealid
{
	padding-top: 4px;
	padding-right: 10px;
	font-size: 12px;
	float: right;
	color: #aaa;
}

.tabheader2
{
	border-left: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	font-size: 12px;
	background-color: #F7F7F7;
	padding: 3px 5px 5px 5px;
}

.tabartist
{
	width: 85%;
	float: left;
}

.tabver
{
	float: right;
	text-align: right;
	color: #999;
	width: 10%;
}

.tabinfo
{
	display: inline-block;
	padding-left: 8px;
	color: #999;
	font-weight: normal;
}

.tabtable
{
	padding: 0px;
	margin-left: 15px;
	border: 0px;
	border-collapse: collapse;
}
.chorus .tabtable, .dynamics .tabtable, .dynamics .chordlisttable, .chorus .lyrictable, .dynamics .lyrictable
{
	margin-left: 0px;
}

.chordlisttable
{
	padding: 0px;
	border: 0px;
	margin-left: 15px;
}

.tabtable td
{
}

.lyrictable
{
	margin-left: 15px;
	margin-top: 3px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;
}

.tabcomment, .isotabcomment
{
	padding-top: 0px;
	padding-bottom: 0px;
	color: #222;
	margin: 0px;
	font-size: 12px;
	font-weight: bold;
}

.isotabcomment
{
	color: #900
}

.tabindextitle
{
	color: Black;
}

p.guitarcomment
{
	margin: 0px;
	font-size: 12px;
}

.chordcomment
{
	font-size: 12px;
	color: #666;	
}
.ghostnote
{
	font-size: inherit;
    color: #999;
}

td.chord
{
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
}

td.chordtab
{
	font-family: Courier New;
	color: Blue;
	font-size: 12px;
}

td.lyricfixed
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
}
td.chordfixed
{
	font-family: Courier New;
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
}

td.keyBar
{
	border: solid 1px #666;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: Blue;
	font-size: 12px;
}

td.altBar
{
	border: solid 1px #bbb;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: Blue;
	font-size: 12px;
}

td.comBar
{
	border: solid 1px #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 12px;
}

span.barpart
{
	color: Blue;
	font-size: 12px;
	display: block;
	float: left;
}
span.barpartsep
{
	color: #999;
	display: block;
	float: left;
}

td.chordlist
{
	padding-top: 5px;
	font-size: 12px;
}

td.lyric
{
	color: Black;
	font-size: 12px;
}

td.lyricchorus
{
	color: #444;
	font-size: 12px;
}

td.lyricoverlay
{
	font-size: 12px;
	font-style: italic;
}

td.lyrictab
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
}

td.lyricfixed
{
	font-family: Courier New;
	color: #444;
	font-size: 12px;
}
td.chordfixed
{
	font-family: Courier New;
	padding-top: 5px;
	color: Blue;
	font-size: 12px;
}

span.bvocal
{
	font-size: 12px;
	color: #cc5500;
}

span.dvocal
{
	font-size: 12px;
	color: #cc0004;
}

table.tabgrid
{
	border-spacing: 0;
	font-size: 12px;
}

table.tabgrid tbody
{
	font-size: inherit;
}

table.tabgrid tr
{
	font-size: inherit;
}

table.tabgrid tr td
{
	color: #000;
	font-family: Courier New;
	background: url(../images/tabcon.gif) no-repeat center;
	vertical-align: middle;
	font-size: inherit;
}

table.tabgrid td.tl
{
	background: url(../images/tabtop.gif) no-repeat left;
}

table.tabgrid td.tr
{
	background: url(../images/tabtop.gif) no-repeat right;
}

table.tabgrid td.ml
{
	background: url(../images/tabmid.gif) no-repeat left;
}

table.tabgrid td.mr
{
	background: url(../images/tabmid.gif) no-repeat right;
}

table.tabgrid td.bl
{
	background: url(../images/tabbot.gif) no-repeat left;
}

table.tabgrid td.br
{
	background: url(../images/tabbot.gif) no-repeat right;
}

table.tabgrid td.text
{
	background: none;
}

table.tabgrid td.text-light
{
	color: #999;
	background: none;
}

select.small
{
	font-size: 12px;
	padding: 2px;
}
input[type='text'].small
{
	font-size: 12px;
	padding: 2px;
}

.chorusOuter { padding-bottom: 6px; border-left: solid 1px #ddd; background-color: #f7f7f7; }
.chorus { padding-left: 14px; background-color: #f7f7f7; }
.loud1 { padding-left: 14px; border-left: solid 1px #e00000; }
.loud2 { padding-left: 13px; border-left: solid 2px #c70000; }
.loud3 { padding-left: 12px; border-left: solid 3px #b00000; }
.loud4 { padding-left: 11px; border-left: solid 4px #970000; }
.loud5 { padding-left: 10px; border-left: solid 5px #800000; }
.quiet1 { padding-left: 14px; border-left: solid 1px #00e000; }
.quiet2 { padding-left: 13px; border-left: solid 2px #00c700; }
.quiet3 { padding-left: 12px; border-left: solid 3px #00b000; }
.quiet4 { padding-left: 11px; border-left: solid 4px #009700; }
.quiet5 { padding-left: 10px; border-left: solid 5px #008000; }

table.cell
{
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
}

table.cell tr td
{
	width: 73px;
	height: 90px;
	border: solid 1px #ccc;
	text-align: center;
}

table.masterLayout
{
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.masterLayout th, table.input th
{
	text-align: left;
	color: white; 
	padding-left: 6px;
	padding-right: 6px;
	box-sizing: border-box;
}

table.masterLayout th a
{
	color: white;
	font-weight: bold;
	text-decoration: underline;
}
table.masterLayout th a:hover
{
	color: var(--light-color);
}
table.masterLayout td a
{
	white-space: break-spaces;
}

table.centerex1 th.cellex1, table.centerex1 td.cellex1 { text-align: center; }
table.centerex2 th.cellex2, table.centerex2 td.cellex2 { text-align: center; }
table.centerex3 th.cellex3, table.centerex3 td.cellex3 { text-align: center; }
table.centerex4 th.cellex4, table.centerex4 td.cellex4 { text-align: center; }
table.centerex5 th.cellex5, table.centerex5 td.cellex5 { text-align: center; }
table.centerex6 th.cellex6, table.centerex6 td.cellex6 { text-align: center; }
table.centerex7 th.cellex7, table.centerex7 td.cellex7 { text-align: center; }
table.centerex8 th.cellex8, table.centerex8 td.cellex8 { text-align: center; }
table.centerex9 th.cellex9, table.centerex9 td.cellex9 { text-align: center; }

table.center1 th:nth-child(1), table.center1 td:nth-child(1) { text-align: center; }
table.center2 th:nth-child(2), table.center2 td:nth-child(2) { text-align: center; }
table.center3 th:nth-child(3), table.center3 td:nth-child(3) { text-align: center; }
table.center4 th:nth-child(4), table.center4 td:nth-child(4) { text-align: center; }
table.center5 th:nth-child(5), table.center5 td:nth-child(5) { text-align: center; }
table.center6 th:nth-child(6), table.center6 td:nth-child(6) { text-align: center; }
table.center7 th:nth-child(7), table.center7 td:nth-child(7) { text-align: center; }
table.center8 th:nth-child(8), table.center8 td:nth-child(8) { text-align: center; }
table.center9 th:nth-child(9), table.center9 td:nth-child(9) { text-align: center; }
table.center10 th:nth-child(10), table.center10 td:nth-child(10) { text-align: center; }
table.center11 th:nth-child(11), table.center11 td:nth-child(11) { text-align: center; }
table.center12 th:nth-child(12), table.center12 td:nth-child(12) { text-align: center; }
table.center13 th:nth-child(13), table.center13 td:nth-child(13) { text-align: center; }
table.center14 th:nth-child(14), table.center14 td:nth-child(14) { text-align: center; }
table.center15 th:nth-child(15), table.center15 td:nth-child(15) { text-align: center; }

table.hide1 th:nth-child(1), table.hide1 td:nth-child(1) { display: none; }
table.hide2 th:nth-child(2), table.hide2 td:nth-child(2) { display: none; }
table.hide3 th:nth-child(3), table.hide3 td:nth-child(3) { display: none; }
table.hide4 th:nth-child(4), table.hide4 td:nth-child(4) { display: none; }
table.hide5 th:nth-child(5), table.hide5 td:nth-child(5) { display: none; }
table.hide6 th:nth-child(6), table.hide6 td:nth-child(6) { display: none; }
table.hide7 th:nth-child(7), table.hide7 td:nth-child(7) { display: none; }
table.hide8 th:nth-child(8), table.hide8 td:nth-child(8) { display: none; }
table.hide9 th:nth-child(9), table.hide9 td:nth-child(9) { display: none; }
table.hide10 th:nth-child(10), table.hide10 td:nth-child(10) { display: none; }

table.masterLayout th:first-child, table.input th:first-child
{
    border-top-left-radius: 5px;
}
table.masterLayout th:last-child, table.input th:last-child
{
    border-top-right-radius: 5px;
}
table.masterLayout tr:last-child td:first-child, table.input tr:last-child td:first-child
{
    border-bottom-left-radius: 5px;
}
table.masterLayout tr:last-child td:last-child, table.input tr:last-child td:last-child
{
    border-bottom-right-radius: 5px;
}
table.masterLayout.no-top-radius th:first-child
{
    border-top-left-radius: 0px;
}
table.masterLayout.no-top-radius th:last-child
{
    border-top-right-radius: 0px;
}
table.masterLayout.no-radius th, table.masterLayout.no-radius td
{
    border-radius: 0px !important;
}

table.masterLayout th, table.input th
{
	background-color: var(--medium-color);
}
table.masterLayout th:first-child, table.input th:first-child
{
}
table.masterLayout th:last-child, table.input th:last-child
{
}

table.masterLayout tr
{
	height: 30px;
}

table.masterLayout td, table.input td
{
	xborder-top: solid 1px #fff;
	border-bottom: solid 1px #e0e0e0;
	padding-left:6px;
	padding-right:6px;
	background-color: #f7f7f7;
}
table.masterLayout tr:hover td
{
}

table.masterLayout tr:last-child td
{
	border-bottom: none;
}

table.masterLayout tr.high td
{
	background-color: #f0f0f0;
}
table.masterLayout tr.higher td
{
	background-color: #e7e7e7;
}
table.masterLayout tr.error td
{
	background-color: #ffdddd;
}

table.masterLayout tr.tall td
{
	height: 50px;
}

table.masterLayout tr:last-child td, table.input tr:last-child td
{
}
table.masterLayout td:first-child, table.input td:first-child
{
}
table.masterLayout td:last-child, table.input td:last-child
{
}

table.masterLayout td.link
{
	padding-left:6px;
	padding-right:6px;
	cursor: pointer;
}
table.masterLayout td.link:hover
{
	opacity: 0.55;
}

table.masterLayout td.grey
{
	background-color: #f0f0f0;
	padding-left:6px;
	padding-right:6px;
}

table.masterLayout td.high
{
	background: #e7e7e7;
}

table.masterLayout td.multiline div
{
	padding-top: 8px;
}
table.masterLayout td.multiline div:last-child
{
	padding-bottom: 4px;
}

table.masterLayout tr.separator td
{
	border-top: solid 1px #e0e0e0;
	border-bottom: none;
}

table.masterLayout tr.noseparator td
{
	border-top: none;
	border-bottom: none;
}

table.input
{
}

table.input tr
{
	height: 40px;
	line-height: 40px;
}

table.input th
{
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	padding-left: 18px;
}

table.input td
{
	padding-left: 8px;
	padding-right: 8px;
	border-bottom: solid 1px #e0e0e0;
	border-top: solid 1px #ffffff;
	background: #f7f7f7;
	vertical-align: middle;
}
table.input td .full-width
{
	width: calc(100% - 16px);
}

table.input th a
{
	color: white;
	text-decoration: underline;
}
table.input th a:hover
{
	color: var(--light-color);
}

table.input td table.simple td
{
	border: 0px;
	padding: 0px;
}

table.input td.buttons
{
	padding-top: 4px;
	padding-bottom: 4px;
	background: #e7e7e7;
}

table.input td.help
{
	background: #f0f0f0;
	padding-top: 8px;
	padding-bottom: 8px;
}

table.input td.prompt, table.input td.errorprompt
{
	background: #f0f0f0;
	padding-right: 6px;
	text-align: right;
}

table.input td.errorprompt
{
	color: #900;
}

table.input td.value
{
	font-weight: bold;
}
table.input tr td span.value
{
	font-weight: bold;
}
table.input input, table.input select
{
	xmargin-bottom: 4px;
}

table.input td.prompt
{
	vertical-align: top;
	padding-top: 0px;
}

table.input tr.multiline td:not(:first-child)
{
	padding-top: 8px;
	padding-bottom: 8px;
}

table.radiobuttongroup
{
	table-layout: fixed;
	border-collapse: collapse;
}
table.radiobuttongroup tr
{
	height: 26px;
	line-height: 26px;
}
table.radiobuttongroup[disabled='disabled'] label
{
}
table.input tr table.radiobuttongroup td
{
	border: 0px;
	padding: 0px 8px 0px 0px;
	margin: 0;
}
table.input span[disabled='disabled']
{
	opacity: 0.5;
}

#tabInserter
{
	xborder-left: solid 1px #b0b0b0;
	xborder-right: solid 1px #b0b0b0;
	xborder-top: solid 1px #b0b0b0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: #f0f0f0;
	height: 32px;
	line-height: 32px;
}

#tabInserter div
{
	padding-left: 8px;
}

#tabButtons
{
	xborder-left: solid 1px #b0b0b0;
	xborder-right: solid 1px #b0b0b0;
	cborder-bottom: solid 1px #b0b0b0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-left: 8px;
	background: #e7e7e7;
	height: 44px;
	line-height: 44px;
}

table.admin th, table.admin td
{
	padding: 1px;
	border: solid 1px #666
}

table.admin th
{
	text-align: left;
}

/*---------- bubble tooltip -----------*/
.tt, .ttr
{
    position:relative;
    z-index:24;
}
span.tooltip, span.tooltipr
{ 
	display: none; 
}

/*background:; ie hack, something must be changed in a for ie to execute it*/
.tt:hover,.ttr:hover{ z-index:25; background:;}
.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:18px; left:0px;
	width:200px;
	opacity: 0.95;
	font-weight: normal;
	line-height: 16px;
}
.ttr:hover span.tooltip{
    display:block;
    position:absolute;
    top:18px; left:-180px;
	width:200px;
	opacity: 0.95;
	font-weight: normal;
	line-height: 16px;
}
.tt:hover span.top
{
	display: block;
	padding: 20px 8px 0;
    background: url(../Images/bubble.gif) no-repeat top;
}
.ttr:hover span.top
{
	display: block;
	padding: 20px 8px 0;
    background: url(../Images/bubbler.gif) no-repeat top;
}
.tt:hover span.middle, .ttr:hover span.middle
{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../Images/bubble_filler.gif) repeat bottom; 
}
.tt:hover span.bottom
{
	display: block;
	padding: 3px 8px 4px;
	color: #548912;
    background: url(../Images/bubble.gif) no-repeat bottom;
}
.ttr:hover span.bottom
{
	display: block;
	padding: 3px 8px 4px;
	color: #548912;
    background: url(../Images/bubbler.gif) no-repeat bottom;
}

/*---------- bubble tooltip -----------*/
span.ttgo
{
    white-space: nowrap;
}

.ttg
{
    position:relative;
    z-index:24;
}
.ttg .tooltip
{ 
    padding: 8px;
	display: none;
	border: solid 1px #ddd;
	background-color: #fff;
	text-align: left;
    position:absolute;
    top:26px; left:0px;
	opacity: 0.95;
	font-weight: normal;
	line-height: 16px;
	white-space: normal;
}

/*background:; ie hack, something must be changed in a for ie to execute it*/
.ttg:hover{ z-index:25; background: #f7f7f7;}
.ttg:hover .tooltip{
    display:inline-block;
}

table.layout
{
	border-collapse: collapse;
}

table.layout td
{
	padding-top: 2px;
	padding-bottom: 2px;
}

.chordSaved, .chordOK, .chordError
{
	border-left: solid 1px #e0e0e0;
	border-right: solid 1px white;
	padding-left: 20px; 
	padding-right: 20px;
}
.chordSaved
{
	background-color: #eee;
}
.chordOK
{
	background-color: #0e0;
}
.chordError
{
	background-color: #e00;
}

table.simple
{
	table-layout: fixed;
	border-collapse: collapse;
}

table.simple tr
{
}

table.simple td
{
}

div.sitenode
{
	text-align: center;
	padding: 8px 6px 0px 6px;
}

div.mainBox1, div.mainBox2, div.mainBox3, div.mainBox4, div.mainBox5, div.mainBox6
{
	border: 1px solid #ddd;
	width: 343px;
	height: 343px;
	border-radius: 5px;
	background-image: url(../images/slr.png);
	background-position: 220px 220px;
	background-repeat: no-repeat;
}

div.mainBox1, div.mainBox3, div.mainBox5
{
	border: 2px solid #ddd;
	background-color: #fff;
	opacity: 0.7;
}

div.mainBox2, div.mainBox4, div.mainBox6
{
	border: 2px dotted #ddd;
}

div.mainBox1, div.mainBox2, div.mainBox4, div.mainBox5
{
	margin-right: 9px;
}

div.mainBox1, div.mainBox2, div.mainBox3
{
	margin-bottom: 10px;
}

div.mainBox1 div, div.mainBox2 div, div.mainBox3 div, div.mainBox4 div, div.mainBox5 div, div.mainBox6 div
{
	padding: 12px 12px 0px 12px;
}

div.taward
{
	border: solid 1px #ddd;
	margin-bottom: 8px;
	border-radius: 5px;
	min-width: 200px;
}

div.taward div.top, div.taward div.top1, div.taward div.top2, div.taward div.top3, div.taward div.top4, div.taward div.top5, div.taward div.top6, div.taward div.top7, div.taward div.top8, div.taward div.top9, div.taward div.top10
{
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: 4px 3px;
	height: 30px;
	line-height: 30px;
	padding-left: 8px;
	font-style: normal;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
    text-shadow:  1px 1px 1px #ccc;
}

div.taward div.winner, div.taward div.winner1, div.taward div.winner2, div.taward div.winner3, div.taward div.winner4, div.taward div.winner5, div.taward div.winner6, div.taward div.winner7, div.taward div.winner8, div.taward div.winner9, div.taward div.winner10
{
	padding: 4px 0px 2px 54px;
	font-size: 16px;
}

div.taward
{
	font-style: italic;
	font-size: 14px;
	color: #ccc;
}

div.taward div.cat
{
	padding-top: 8px;
	font-style: italic;
	margin: 0px 8px 8px 34px;
}

div.taward div.user
{
	font-weight: bold;
	padding: 8px 8px 8px 8px;
	text-align: center;
	border-top: solid 1px #ddd;
	background-color: #fff;
}

div.taward div.stats, div.taward div.stats1, div.taward div.stats2, div.taward div.stats3, div.taward div.stats4, div.taward div.stats5, div.taward div.stats6, div.taward div.stats7, div.taward div.stats8, div.taward div.stats9, div.taward div.stats10
{
	clear: both;
	border-top: solid 1px #ddd;
	padding-left: 8px;
	padding-right: 8px;
	color: White;
	vertical-align: middle;
	height: 22px;
	line-height: 22px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

div.taward span.prompt
{
	color: White;
	vertical-align: middle;
	display: block;
	float: left;
}

div.taward span.value
{
	font-weight: bold;
	font-size: 16px;
	color: White;
	vertical-align: middle;
	display: block;
	float: right;
}

div.taward span.value i
{
	font-weight: normal;
	color: White;
}

div.cloud
{
	background-color: #f7f7f7;
	padding: 16px;
	text-align: center;
	line-height: 22px;
	vertical-align: middle;
	border-radius: 5px;
}

div.cloud a {text-decoration: none; font-weight: normal;}
div.cloud a:hover {text-decoration: underline; font-weight: normal;}

#txtSearchRight
{
	float: right;
	display: flex;
	border-radius: 25px 0px 6px 25px;
	border: 1px solid #fff;
	align-items: center;
	padding: 3px 0px 3px 10px;
	background-color: #fff;
	fill: #ccc;
}

#txtSearchRight span
{
	height:20px;
	line-height:20px;
	width:20px;
	display:inline-block;
}

#txtSearch
{
	width: 300px;
	border-width: 0px;
	height: 36px;
	padding: 0px;
	padding-left: 8px;
	margin: 0px;
	outline: none;
	font-size: 16px;
}
#txtSearch::-ms-clear 
{
  width : 0;
  height: 0;
}

div.tabpage
{
	border: solid 1px #ccc;
	border-radius: 5px;
	background-color: #e7e7e7;
	padding: 32px;
}

div.tabpageinner
{
	width: 732px;
	padding: 36px;
	background-color: #fff;
    margin: 0 auto;
}
div.tabpagehistory
{
	width: 780px;
	padding: 36px;
	background-color: #fff;
    margin: 0 auto;
}
div.tabpagefull
{
	xborder: solid 1px #ccc;
	border-radius: 5px;
	background-color: #e7e7e7;
	padding: 8px;
}

div.tabpageinnerfull
{
	padding: 18px;
	background-color: #fff;
    margin: 0 auto;
}

textarea.tabedit
{
	box-sizing: border-box;
}

div.chordkey
{
	height: 18px;
	line-height: 18px;
	vertical-align: middle;
}

div.chordkey span
{
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	border: solid 1px #ccc;
	margin-right: 12px;
}

span.tabgroup
{
	font-weight: bold;
	font-size: 14px;
}

span.tabGroupType
{
	border: solid 1px #666;
	background-color: #999;
	color: White;
	padding: 2px 4px 1px 4px;
	border-radius: 3px;
}

div.boxError
{
	background-color: #900 !important;
	color: #fff !important;
    text-shadow:  3px 3px 3px #600;
}
div.boxError span
{
	color: #fff;
	font-size: 22px;
	font-weight: bold;
}
div.boxError span b
{
	color: #ddd;
	font-size: 22px;
	font-weight: bold;
}

div.boxError div
{
	color: #fff;
	font-weight: bold;
}


.fileUploadContainer     
{
	position: relative;
	xwidth:80px;
	xheight:26px;
	overflow: hidden; 
	xpadding-bottom: 8px;
}

.realFileUpload
{
	font-size:45px;
	position:absolute;
	right:0px;
	top:0px;
	cursor:pointer;
    opacity:0;
}

.fakeFileUploadx
{
	position:absolute;
	top:0px;
}

.fileUploadName
{
	text-align: left;
	border: solid 1px #ddd;
	border-radius: 3px;
	background-color: White;
	padding: 8px;
	xmargin-bottom: 12px;
	word-wrap: break-word;
}

div.errorPanel
{
	border: 1px solid #900;
	background-color: #fff7f7;
	border-radius: 3px;
	display: none;
	margin-bottom: 8px;
}
div.errorPanel p
{
	padding: 5px;
}

.tabNoteHolder
{
	height: 355px;
	position: relative;
	border-radius: 5px;
	background: url(../Images/cork.jpg) repeat;
}

.tabNoteHolder div.tabNote
{
	top: 55px;
	left: 55px;
	position: absolute;
	font-family: "Reenie Beanie",arial,sans-serif;
	font-size: 18px;
	color:#666;
	text-decoration:none;
	background:#ffc;
	display:block;
	height:225px;
	width:225px;
	padding:10px;
	box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	transition: transform .15s linear;
	cursor: pointer;
	overflow: hidden;
}

.tabNoteHolder div.tabNote p
{
	font-family: "Reenie Beanie",arial,sans-serif;
	font-size: 24px;
	padding-bottom: 4px;
}
.tabNoteHolder div.tabNote p.small
{
	font-family: "Reenie Beanie",arial,sans-serif;
	font-size: 20px;
	padding-bottom: 4px;
}
.tabNoteHolder div.tabNote p.percentComplete
{
	font-size: 54px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 25px;
}
.tabNoteHolder div.tabNote b
{
	font-family: "Reenie Beanie",arial,sans-serif;
	font-size: 18px;
	font-weight: bold;
}

.tabNoteHolder div.tabNotex
{
	transform: rotate(-6deg);
}
.tabNoteHolder div.tabNotex:nth-child(even), .tabNoteHolder div.tabNote1
{
	transform:rotate(4deg);
	background:#cfc;
}
.tabNoteHolder div.tabNotex:nth-child(3n+0), .tabNoteHolder div.tabNote2
{
	transform:rotate(-3deg);
	background:#ccf;
}
.tabNoteHolder div.tabNotex:nth-child(5n+0), .tabNoteHolder div.tabNote3 
{
	transform:rotate(5deg);
}
.tabNoteHolder div.tabNoteHover
{
	box-shadow:10px 10px 7px rgba(0,0,0,.7);
	transform: scale(1.15);
}

.ui-selectmenu-text
{
	background-color: #fcfcfc;
}
ul.ui-menu { max-height: 500px !important; }

.ui-selectmenu-button
{
   vertical-align : middle;
   margin-top: 2px;
   margin-bottom: 2px;
}

.material-icons
{
	color: #999;	
	font-size: 18px !important;
	vertical-align: middle;
}

.md-red { color: #b80000; }
.md-orange { color: #fd8000; }
.md-green { color: #109618; }
.md-yellow { color: #eec700; }

.fa
{
	color: #999;	
	font-size: 16px !important;
	vertical-align: middle;
}

.md-sort
{
	color: #fff;	
	font-size: 11px !important;
}

.fa-high
{
	color: #fff;
}

.fa-padded
{
	padding: 8px;
}

.buttonpad
{
	padding-bottom: 16px !important;
}

#chart
{
	border-radius: 5px;
	padding: 8px;
	background-color: #fff;
}
.plain-content
{
	border-radius: 10px;
	padding: 20px;
	background-color: #fff;
}
.plain-content-extra
{
	border-radius: 10px;
	background-color: #fff;
}
.plain-content-extra > div
{ 
	padding: 10px;
	line-height: 38px;
	border-radius: 5px;
}
.plain-content-extra > div:first-child
{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.plain-content-extra > div:last-child
{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.plain-content-extra > div:nth-child(odd) 	
{
	background-color: #f7f7f7;
}

.tabs-min { 
    background: transparent !important; 
    border: none !important; 
} 
.tabs-min .ui-widget-content a
{
}
.tabs-min .ui-tabs-panel
{
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-top: 0px !important;
}
.tabs-min .ui-widget-header { 
    background: transparent; 
    border: none; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
.tabs-min .ui-tabs-nav
{
	border-bottom: solid 2px #999;
	margin-bottom: 12px;
	padding: 0px;
}

.tabs-min .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
.tabs-min .ui-tabs-nav .ui-state-active { 
    background: transparent; 
    border: none; 
} 
.tabs-min .ui-tabs-nav .ui-state-default a.ui-tabs-anchor 
{
	padding: 6px 12px 6px 0px;
	font-weight: bold;
    color: #ccc; 
} 
.tabs-min .ui-tabs-nav .ui-state-active a.ui-tabs-anchor  
{ 
	padding: 6px 12px 6px 0px;
	font-weight: bold;
    color: var(--medium-color); 
}
.tabs-min p
{
	text-align: left;
	margin-bottom: 6px;
}

.post
{
	display: table;
	width: 100%;
}
.post i
{
    color: #999;
}
.post span.pre
{
    font-family: 'Courier New';
}

.post-row
{
	display: table; 
	width: 100%;
}
.post-row .post-columnB p
{
    text-align: left;
}
.post-row .post-columnB p span
{
	line-height: 18px;
	white-space: pre-line;
}
.post-row .post-columnB li
{
}
.post-row .post-columnB a
{
}
.post-row .post-columnB b
{
}
.post-row .post-columnB img
{
    vertical-align: baseline;
}

.reply-row .post-columnB p span
{
	line-height: 16px;
	white-space: pre-line;
}


.reply-row
{
    display: table;
    width: 100%;
    border-top: solid 1px #ddd;
}
.reply-row p
{
    text-align: left;
}

.post p
{
	padding: 8px;
}

.post-toolbar
{
	background-color: #fff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	font-weight: bold;
	padding-left: 8px;
	height: 46px;
	line-height: 46px;
}

.post-toolbar .status
{
    float: right;
    line-height: 46px;
    padding-right: 8px;
    padding-top: 10px;
}

.post-columnA
{
	display: table-cell;
	vertical-align: top;
	width: 245px;
}

.post-columnB
{
	display: table-cell;
	vertical-align: top;
}

.post-high1 { background-color: #ffffff; }
.post-high2 { background-color: #f7f7f7; }
.post-high3 { background-color: #f0f0f0; }
.post-high4	{ background-color: #e7e7e7; }
.post-sep-top { border-top: solid 1px #ddd; }

a.post-user
{
	text-decoration: none;
	border-radius: 3px;
	padding-top: 2px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	margin-right: 5px;
}

a.reply-user
{
	text-decoration: none;
	border-radius: 3px;
	padding-top: 1px;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 1px;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	margin-right: 5px;
}

.post-status
{
	background-color: #900;
	color: #fff;
	height: 36px;
	line-height: 36px;
	padding-left: 8px;
	display: none;
}

.post-footer
{
	border-top: solid 1px #ddd;
	padding-left: 253px;
	height: 46px;
	line-height: 46px;
}

.post textarea
{
	border: none;
	width: 100%;
	padding: 0px;
	margin: 0px;
	resize: vertical;
	color: #666;
	background-color: #fff;
    outline-width: 0px;
}

.post-header
{
	border-bottom-right-radius: 9px;
	padding-left: 8px;
	padding-top: 8px;
	color: #fff;
	height: 32px;
	font-weight: bold;
	vertical-align: top;
}
.post-header i
{
	color: #fff;
}
.post-header-left
{
	color: #fff;
	float: left;
}
.post-header-right
{
	padding-right: 8px;
	float: right;
}

.post-bar
{
	height: 5px;
}

@media screen and (min-width: 1024px) 
{
.post .post-action
{
	display: none;
}
.post:hover .post-action
{
	display: inline;
}
.post:hover a.user
{
}

.posts-footer
{
	padding-top: 50px;
	padding-bottom: 30px;
	text-align: center;
}


.youtube:hover .youtube-right-inner a
{
}

} 

.youtube
{
	margin-top: 12px;
	background-color: #fff;
}

.youtube .youtube-left
{
	float: left;
	overflow: hidden;
	width: 158px;
	height: 158px;
}

.youtube .youtube-left a
{
	position: relative;
	display: block;
}

.youtube-thumb
{
	background-image: url('https://i.ytimg.com/vi/qpJ0cyXbMbI/hqdefault.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	width: 158px;
	height: 158px;
}

.youtube .youtube-left img
{
	overflow: hidden;
	width: 158px;
	height: 158px;
    border: 0;
}

.youtube .youtube-left a i
{
	background-image: url(../images/vplay.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 0 0;
	height: 54px;
	width: 54px;
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.youtube .youtube-left a:hover i
{
	background-position: 0px -55px;
}

.youtube .youtube-right
{
	background-color: #f7f7f7;
	height: 158px;
	position: relative;
	overflow: hidden;
}

.youtube .youtube-right-inner
{
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 26px;
}

.youtube .youtube-right-inner a.large
{
	text-decoration: none;
	font-size: 16px;
}
.youtube .youtube-right-inner a.medium
{
    text-decoration: none;
    font-size: 16px;
}

.youtube .youtube-right-inner p
{
	padding-top: 8px;
    padding-left: 0px;
}

.youtube .youtube-right-footer 
{
    bottom: 10px;
    left: 10px;
    position: absolute;
    right: 0;
    font-size: 10px;
    color: #999;
}
.youtube .youtube-footer 
{
    font-size: 10px;
    color: #999;
}

.youtube .youtube-remove
{
	right: 4px;
	top: 6px;
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
}

.no-border
{
	border: 0 !important;
}

table.plain-layout
{
	border-spacing: 0px;
    border-collapse: separate;
}
table.plain-layout th
{
	text-align: left;
}
table.plain-layout td
{
	text-align: left;
	vertical-align: top;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
}
table.stripped tr:nth-child(even)
{
	background-color: #f7f7f7;
}
table.stripped tr:nth-child(odd) 
{
	background-color: #ffffff;
}
tr.stripped td
{
	background-color: #f7f7f7;
}
tr.nostripped td
{
	background-color: #fff;
}

svg > g > g:last-child { pointer-events: none }

.editor-panel-green, .editor-panel-amber, .editor-panel-red, .editor-panel-grey, .editor-panel, .editor-panel-high
{
	color: #fff !important;
	height: 36px !important;
	line-height: 36px !important;
}
.editor-panel-green b, .editor-panel-amber b, .editor-panel-red b, .editor-panel-grey b, .editor-panel b, .editor-panel-high b
{
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}
.editor-panel-green
{
	background-color: #7ca82b;
}
.editor-panel-green:hover
{
	background-color: #9dbe60 !important;
}
.editor-panel-amber
{
	background-color: #ef8535;
}
.editor-panel-amber:hover
{
	background-color: #f3a367 !important;
}
.editor-panel-red
{
	background-color: #d31e1e;
}
.editor-panel-red:hover
{
	background-color: #de5656 !important;
}
.editor-panel-grey
{
	background-color: #999;
}
.editor-panel-grey:hover
{
	background-color: #aaa !important;
}
.editor-panel
{
	background-color: var(--dark-color);
}
.editor-panel:hover
{
	background-color: var(--medium-color) !important;
}
.editor-panel-high
{
	background-color: var(--medium-color);
}
.editor-panel-high:hover
{
	background-color: var(--light-color) !important;
}
.bottom-radius
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.nowrap
{
	white-space: nowrap;
}

.cool-green
{
	color: white;
	background-color: #7ca82b !important;
}
.cool-amber
{
	color: white;
	background-color: #ef8535 !important;
}
.cool-red
{
	color: white;
	background-color: #d31e1e !important;
}

.small-bubble
{
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	border-radius: 2px;
}

.line-error
{
	background-color: #FB7D77;
}
.line-warning
{
	background-color: #FBBF77;
}

.cm-cpkeyword
{
	color: #000066 !important;
	font-weight: bold;
}
.cm-cpvalue
{
	color: #006600 !important;
}
.cm-cpchord
{
	color: blue !important;
}
.cm-cpcomment
{
	color: rgb(170, 85, 0) !important;
}

.piped
{
	display: inline-block;
}
.piped > * 
{
  border-left: 1px solid #ccc;
  padding: 0 4px;
}
.piped > *:first-child
{
  border-left: none;
  padding-left: 0;
}

.slide-holder
{
	background-color: #000;
	border-radius: 10px;
	padding: 8px;
	width: 924px;
}

.slide
{
	position:relative;
	float: left;
	width: 230px;
	height: 230px;
	margin-right: 1px;
	margin-bottom: 1px;
	background-color: #333;
	line-height: 230px;
	text-align: center;
	color: #666;
}

.slide img
{
	position: absolute;
	z-index: 1;
	width: 230px;
	height: 230px;
	top: 0px;
	left: 0px;
}
.slide img.active
{
	z-index: 3;
}

.media-frame
{
	border-radius: 5px;
	margin-bottom: 16px;
	width: 355px;
	height: 195px;
}
.xmedia-frame:after
{
	clear: both;
}

.panel-audio
{
	width: 100%;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.welcome
{
	max-width: 1000px;
	min-width: 1.5em;
	border-radius: 10px;
	padding: 30px;
	background-color: #fafafa;
	margin-bottom: 14px;
	box-sizing: border-box;
}

.large-quote
{
	font-family: 'Rubik Moonrocks', serif;
    font-size: 32px;
	color: var(--dark-color);
	line-height: revert;
    text-shadow:  4px 4px 4px #ccc;
}
.welcome p:last-child
{
	padding-bottom: 0px;
}

.standard-panel
{
	border-radius: 5px;
	padding: 12px;
	background-color: #fafafa;
	margin-bottom: 14px;
	overflow: auto;
}

.standard-panel > p, .standard-panel > b, .standard-panel > i
{
	color: inherit;
	font-size: inherit;
}

.standard-panel > h6
{
	margin: 0px;
	display: block;
	text-align: left;
	font-size: 28px;
	font-weight: bold;
    text-shadow:  4px 4px 4px #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-image: none;
}
.standard-panel > h6 b
{
	color: #999;
	font-size: 28px;
	font-weight: bold;
}

/* Take car chaning h2 or you will break the help page */
.standard-panel > h2
{
	margin: 0px;
	display: block;
	text-align: left;
	font-size: 22px;
	font-weight: bold;
    text-shadow:  3px 3px 3px #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-top: 6px;
}
.standard-panel > h2 b
{
	color: #999;
	font-size: 22px;
	font-weight: bold;
}
.standard-panel > h2 span
{
	font-weight: normal;
	font-size: 22px;
    text-shadow: none;
}

.standard-panel p
{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 10px;
	font-weight: inherit;
}
.standard-panel p:last-child
{
	padding-bottom: 0px;
}

.standard-panel ul
{
	padding-bottom: 10px;
}

.panel-holder > div:first-child
{
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin-bottom: 0px;
}
.panel-holder > div:not(:first-child):not(:last-child)
{
	border-radius: 0px;
	margin-bottom: 0px;
}
.panel-holder > div:last-child
{
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.panel-fixed-height > div
{
	min-height: 36px;
	box-sizing: border-box;
	line-height: 36px;
}

.flow-panel
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;	
	margin-bottom: 14px;
}

.extra-padding-panel
{
	padding: 20px;
}
.error-panel, .red-panel
{
	background-color: #900;
	color: #fff;
}
.green-panel
{
	background-color: #090;
	color: #fff;
}
.grey1-panel
{
	background-color: #eee;
}
.grey2-panel
{
	background-color: #ddd;
}
.grey3-panel
{
	background-color: #ccc;
}

.full-width-panel
{
	width: calc(100% - 24px);
}

.light-grey-panel
{
	background-color: #eee;
}

.dark-panel
{
	background-color: var(--dark-color);
	color: #ddd;
}
.dark-panel a, .dark-panel b
{
	color: #ddd;
}
.dark-panel a:hover
{
	color: #fff;
}

div.simple-toolbar
{
	border-radius: 5px;
	margin-bottom: 16px;
	background-color: #f0f0f0;
	padding-left: 10px;
	box-sizing: border-box;
	min-height: 42px;
	line-height: 42px;
}
div.small-toolbar
{
	height: 22px;
	line-height: 22px;
}
div.top-toolbar
{
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin-bottom: 0px;
}

.paging
{
	float: right;
	line-height: 32px;
}

.quiz-pic
{
	width: 240px;
	height: 240px;
	border-radius: 5px;
}

.quiz-text-pic-layout
{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 10px;
}
.quiz-text-pic-layout > div:first-child
{
	flex-grow: 1;
}
.quiz-text-pic-layout > div:last-child
{
	flex: 240px 0 0;
}

.icon-circle
{
	display: inline-block;
	border-radius: 15px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background-color: var(--dark-color);
	text-align: center;
}

.quiz-answer-panel
{
	display: flex; 
	align-items: center; 
	gap: 14px; 
	flex-wrap: wrap;
}
.quiz-answer-panel #progress
{
	font-size: 24px; 
	border-radius: 20px; 
	text-align: center; 
	display: inline-block; 
	padding: 10px; 
	color: #fff; 
	width: 30px;
}
.quiz-answer-panel #answer
{
	width: 300px; 
	outline: none; 
	border-radius: 5px; 
	font-size: 16px; 
	padding: 10px;  
	margin-right: 0px;
}

.stop-button
{
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border: solid 1px #900;
	background-color: #c00;
	border-radius: 30px;
	padding: 1px;
	box-sizing: border-box;
}
.stop-button a
{
	display: inline-block;
	padding-top: 7px;
	width: 56px;
	height: 56px;
	line-height: 20px;
	border: solid 1px #f00;
	color: #fff;
	border-radius: 28px;
	text-decoration: none;
	background-color: #c00;
	background-image: linear-gradient(to bottom right, #c00, #900);
	box-sizing: border-box;
}
.stop-button:hover, .stop-button a:hover
{
	border-color: #0c0;
	background-image: linear-gradient(to bottom right, #0c0, #090);
}
.stop-button-used, .stop-button-used a, .stop-button-used:hover, .stop-button-used a:hover
{
	border-color: #ccc;
	background-image: linear-gradient(to bottom right, #ccc, #999);
}

.quiz-run
{
	background-color: #eee;
	border-radius: 5px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
.quiz-run .title
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background-color: var(--medium-color);
	color: #fff;
	padding: 4px;
	text-align: center;
	font-weight: bold;
}
.quiz-run .text
{
	position: absolute;
	color: #666;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.quiz-run .text b
{
	color: var(--light-color);
}
.quiz-run .box
{
	display: inline-block;
	border: solid 1px #ccc;
	background-color: #fff;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	margin-top: 37px;
}
.quiz-run .box .number
{
	display: inline-block;
	border: solid 1px #999;
	padding: 6px;
	font-family: 'Courier New';
	font-weight: bold;
	font-size: 18px;
	color: #000;
    text-shadow:  2px 2px 2px #999;
}
.quiz-run .box .number:nth-child(1)
{
	transform: rotate(-6deg);
}
.quiz-run .box .number:nth-child(2)
{
	transform: rotate(3deg);
}
.quiz-run .box .number:nth-child(3)
{
	transform: rotate(-1deg);
}

a.rating i:hover
{
	color: #070 !important;
}

td.recordinginfohigh
{
	text-align: center;
	xbackground-color: #f3f3f3 !important;
	border-top: 1px dashed #ddd !important;
}
td.recordinginfolow
{
	text-align: center;
	xbackground-color: #fcfcfc !important;
	border-top: 1px dashed #ddd !important;
}

tr.sticky 
{
	position: -webkit-sticky;
	position: sticky !important;
	top: 0; /* Don't forget this, required for the stickiness */
	z-index: 1000;
}

span.visit1, span.visit2, span.visit3
{
	display: inline-block;
	border-radius: 3px;
	border-color: var(--light-color);
	border-style: solid;
	vertical-align: middle;
	margin-bottom: 3px;
}
span.visit1 span.visitbox1

span.visit1
{
	border-width: 2px;
	height: 9px;
	width: 9px;
}
span.visit2
{
	border-width: 3px;
	height: 7px;
	width: 7px;
}
span.visit3
{
	border-width: 4px;
	height: 5px;
	width: 5px;
}

span.visitNew
{
	background-color: #fff;
	animation: pulsevisit 10s infinite;
}

@keyframes pulsevisit {
	0%, 100% {
	xborder-color: #f0f0f0;
	xbackground-color: #f0f0f0;
	background-color: #fff;
	}
	
	50% {
	xborder-color: #aaa;
	xbackground-color: #aaa;
	background-color: #a00;
	}
}


.fixedtablewrapper 
{
  height: 320px;
  overflow: auto;
  scrollbar-color: var(--dark-color) var(--medium-color);
}

.main-holder
{
	display: flex;
	flex-wrap: wrap;
	xjustify-content: space-between;
	gap: 50px;
	margin: 30px 10px 10px 10px;
}
.main-holder > div
{
	flex-grow: 1;
	box-shadow: 0 0 0 5px var(--dark-color), 0 0 0 10px var(--medium-color), 0 0 0 15px var(--light-color);
	border-radius: 5px;
	background-color: white;
	padding: 20px;
	width: 300px;
	position: relative;
}
.main-holder > div a
{
	x-webkit-background-clip: text;
    x-webkit-text-fill-color: transparent;
}

.main-holder > div span
{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  xbackground-image: url('empty.gif');
}   

.main-holder > div p
{
	padding-bottom: 0px;
}

/* Mainly used to detect a tablet used in portrait mode */
@media (orientation: portrait) 
{

div.narrowcontent, div.mediumcontent, div.largecontent
{
	width: 100%;
	max-width: revert;
}

div.menuBoxContents a, div.panelcontentlist a
{
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 16px; 
}

table.masterLayout tr
{
	height: 40px;
}

}