@font-face {
    font-family: n;
    src: url(fonts/n.otf);

    font-family: m;
    src: url(fonts/m.otf);

    font-family: b;
    src: url(fonts/b.otf);
}

html {
	color:				#58180D;
	font-family:		b;
}

body {
	background-color:	#EEE5CE;
	background-image: 	url('background.jpg');
}

h2 {
	font-family:		m;
	font-size:			36px;
	color:				#58180D;
}

#tabBar {
	cursor:				default;
	font-size:			18px;
	z-index:			1000;
}

#tabBar a,
#tabBar a:link,
#tabBar a:active,
#tabBar a:hover,
#tabBar a:visited {
	color:				#58180D;
	text-decoration:  	none;
}

.tabBarTab {
	padding:			2px;
	display:		 	inline;
}

.activeTab {
	border-left:	 	1px solid white; 
	border-top:		 	1px solid white; 
	border-right:	 	1px solid white; 
	background:			url('background.jpg') rgba(0, 0, 0, 0.1);
	z-index:			3;
	position:			relative;
	cursor:				pointer;
}

.deactiveTab {
	border-left:	 	1px dashed white; 
	border-top:		 	1px dashed white; 
	border-right:	 	1px dashed white; 
	background: 		url('background.jpg') rgba(0, 0, 0, 0.3);
	z-index:			1;
	position:			relative;
	cursor:				pointer;
}

#content {
	border-top:			1px solid white;
	z-index:			2;
	position:			relative;
	color:				black;
}

.hidden {
	display:			none;
}

.visible {
	display:			inline;
}

.bordercollapse {
	border-collapse:	collapse;
}

.bglightgreen {
	background-color: 	#e0e5c1 !important;
}

.bglightred {
	background-color: 	#F5D7CD;
}

.bgdarkgreen {
	background-color: 	#88E222;
}

.bgdarkred {
	background-color: 	#F25024;
}

.bgblack {
	background-color: 	#000;
}

.allgrey {
	/*background-color: 	#BBBBBB;
	color:				#BBBBBB;*/
	background-color:	#D5D9DC;
	color:				#D5D9DC;
}

.tdcenter {
	text-align:			center !important;
}

.tdleft {
	text-align: 		left !important;
}

.tdright {
	text-align: 		right !important;
}

.tdbold {
	font-weight: 	 	800;
}

.inline {
	display: 			inline;
}

.borderleft {
	border-left: 		1px solid grey;
}

.bordertop {
	border-top: 		1px solid grey;
}

.borderbottom {
	border-bottom: 		1px solid grey;
}

.bordertopblack {
	border-top: 		1px solid black !important;
}

.borderbottomblack {
	border-bottom: 		1px solid black !important;
}

.specialXP {
	width: 				60px;
}

/*########################################
###
###
###				general
###
###
#########################################*/

#administration table,
#playerStatsTable table,
#attendance table {
	/*border-collapse :	collapse;*/
	table-layout: 		fixed;
} 

#administration thead,
#playerStatsTable thead,
#attendance thead {
	font-weight: 	 	800;
	color:				black;
}


#administration thead #notes,
#attendance thead #notes {
	min-width:			750px;
}

#administration #showNotes,
#attendance #showNotes {
	text-decoration: 	underline;
	cursor:				pointer;
}

#administration input[type=button],
#playerStatsTable input[type=button]{
	display: 			inline-block;
	min-width:			30px;
	font-size:			15px;
	font-weight:	 	800;
	border:				1px dashed grey;
}

#administration input[type=button]:active,
#playerStatsTable input[type=button]:active{
	box-shadow: 		0px 0px 3px 1px #888888 inset;
}

#administration input[type=button]::-moz-focus-inner,
#playerStatsTable input[type=button]::-moz-focus-inner{
  	border: 			0;
}

#administration #CreateNewPlaydateButton,
#administration #CreateNextPlaydateButton,
#administration #setXpSpentForPlayer,
#administration .sendStatusButton,
#playerStatsTable .sendStatusButton {
	padding-left:		5px;
	padding-right:		5px;
}

/*########################################
###
###
###				levels
###
###
#########################################*/

#levels table {
	border-collapse:	collapse;
} 

#levels thead {
	font-weight:	 	800;
	color:				black;
}

#levels td {
	min-width:			75px;
}

#levels #xpAndLevels tbody tr:nth-child(n+1):nth-child(-n+4),
#levels #xpAndLevels tbody tr:nth-child(n+11):nth-child(-n+16) {
	background-color: 	#e0e5c1 !important;
}

#levels #abScoresAndMods tbody tr:nth-child(odd) {
	background-color: 	#e0e5c1 !important;
}

#levels #abScoresAndMods td {
	text-align:			center !important;
}

/*########################################
###
###
###				attendance
###
###
#########################################*/

#attendance thead td {
	min-width:			60px;
	text-align:			center;
}

#attendance input {
	background-color: 	transparent;
	cursor:				default;
	border: 			0px;
	font-family: 		b;
	font-size:			16px;
	padding: 			0;	
	display: 			inline-block;
	min-width:			30px;
	font-size:			15px;
	font-weight:	 	800;
	border:				1px dashed grey;	
}

#attendance input:disabled{
	color:				grey;
}

#attendance input[type=button]:active {
	box-shadow: 		0px 0px 3px 1px #888888 inset;
}

/*########################################
###
###
###				stats
###
###
#########################################*/
/*#playerStatsTable input[type=text] {*/
#playerStatsTable input[type=text] {
	background-color: 	transparent;
	cursor:				default;
	font-family: 		b;
	font-size:			16px;
	font-family: 		b;
	-webkit-appearance: none;
	-moz-appearance: 	none;
	appearance: 		none;
	border:				none;
	border-radius: 		0;
	padding: 			0;
}

#playerStatsTable table {
	cursor:				default;
	/*font-size:			16px;*/
}

#playerStatsTable thead td {
	min-width:			80px;
	text-align:			center;
}

#playerStatsTable .playersTable input {
	margin-left: 		4px;
	background-color: 	transparent;
	cursor:				default;
	border: 			0px;
	font-family: 		b;
	font-size:			16px;
}

/*########################################
###
###
###				createAMonster
###
###
#########################################*/

#createAMonster table thead tr td {
	text-align:			center;
	font-family: 		b;
	font-weight:	 	800;
	padding-left:		10px;
	padding-right:		10px;
}

#createAMonster table tbody tr td {
	text-align:			center;
	font-family: 		b;
	font-size:			15px;
}


/*########################################
###
###
###				administration
###
###
#########################################*/

#administration table {
	cursor:				default;
	/*font-size:			16px;*/
	/*border-collapse:  	collapse;*/
}

#administration thead #xp_td {
	width:				80px;
}

#administration thead td {
	min-width:			60px;
	text-align:			center;
	/*white-space: 		nowrap;*/
}

#administration .datehead {
	/*min-width:			100%;*/
	min-width:			60px;
}

#administration .lowerhead {
	min-width:			30px;
}

#administration .notes {
	display:			none;
}

#administration td {
	line-height:		22px;
	height:				24px;
}

#administration input,
#administration select {
	background-color: 	transparent;
	cursor:				default;
	border: 			0px;
	font-family: 		b;
	font-size:			16px;
	padding: 			0;
	/*font-style: 		italic; */
}

#administration #newPlaydate {
	font-family: 		b;
	font-size:			16px;
	margin-left: 		4px;
	margin-right: 		4px;
	
	/* display:block; */
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em; 
}

#administration .xpSpentSession {
	width:				80px;
}

#administration .minusXPtd {
	width:				55px;
}

#administration .xpInput {
	width:				100%;
}

#administration .noteInput {
	min-width:			745px;
	margin-left: 		4px;
}

#administration select {
	font-family: 		b;
	-webkit-appearance: none;
	-moz-appearance: 	none;
	appearance: 		none;
	border:				none;
	border-radius: 		0;
	font-size:			16px;
	padding: 			0;
} 

#administration .tokenClass,
#administration .tokenClass option {
	margin:				0;
	padding:			0;
	height:				23px;
}

#administration input:disabled{
	color:				grey;
}

#administration ::-webkit-input-placeholder, /* WebKit, Blink, Edge */
#administration :-ms-input-placeholder, /* Internet Explorer 10-11 */
#administration :placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
    /*color:    			white;*/
}

#administration :-moz-placeholder, /* Mozilla Firefox 4 to 18 */
#administration ::-moz-placeholder { /* Mozilla Firefox 19+ */
   /*color:    			white;*/
   opacity:  			1;
}

#administration .playersTable input {
	margin-left: 		4px;
}

#administration #setXpSpentForPlayer {
	margin-left:		5px;
}

#administration #refreshAdminPage {
	position: 			absolute;
	top:				5px;
	right:				5px;
}

/*########################################
###
###
###					log
###
###
#########################################*/
#log table{
	width:				100vw;
	max-width:			100%;
	table-layout: 		auto;
    border-collapse: 	collapse;
}

#log table thead {
	font-weight: 	 	800;
}

#log table thead tr td {
	text-align:			center;
}

#log td {
	/*white-space: 		nowrap;*/
	padding-right:		8px;
}

#log .logText {
	width:				100%;
}

/*########################################
###
###
###			reloading (overlay)
###
###
#########################################*/

#reloading {
	height: 			0%;
	width: 				100%;
	/*display:			none;*/
	position: 			fixed; /* Stay in place */
	z-index: 			999; /* Sit on top */
	left: 				0;
	bottom:				0;
	background-color: 	rgb(0,0,0); /* Black fallback color */
	background-color: 	rgba(0,0,0, 0.9); /* Black w/opacity */
	overflow-x: 		hidden; /* Disable horizontal scroll */
	transition: 		0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

#reloading .reload_content {
	position: 			relative;
	top: 				25%;
	width: 				100%;
	text-align: 		center;
	margin-top: 		30px;
	font-family: 		b;
	font-size:			56px;
	font-weight:	 	800;
}