/*
	dark orange: 		#D37848
	light organge:		#E6B27A
	yellow: 				#EDE9CC
	white:				#F1F9FB
	brown:				#262B29
	gray:					#B9BCBA
	black: 				#141A17
	bright red: 		#B84035
	dull red:			#5B3330
*/

body, html {
	height: 100%;
}

body {
	font-size: 16px;
	font-family: Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier, 'Courier New', monospace, monospace, serif;
	color: #EDE9CC;
	background-color: #262B29;
}

/*   ******************   Utility   ******************   */

.pointy {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.nopad {
  margin-right:0;
  margin-left:0;
  padding: 8px;
}
.nopad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

/*   ******************   Nav   ******************   */

#logo {
	font-size: 1.25em;
	text-align: center;
	color: #D37848;
	margin-bottom: 48px;
	margin-top: 6px;
}
#heading {
	/*text-decoration: underline;*/
	/*border-bottom: 1px solid;*/
}
#subheading {
	font-size: 0.58em;
	color: #F1F9FB;
	display:block;
	margin-top: -4px;
	text-align: center;
}


#startbutton, #stopbutton {
	color: #F1F9FB;
	text-align: center;
}

#startbutton.on {
	color: #40B835;
}
#stopbutton.on {
	color: #B84035;
}

#updatebutton, #sharing {
	text-align: center;
	color: #F1F9FB;
	margin-top: 58px;
}
#updatebutton.dirty {
	color: #E6B27A;
}


/*   ******************   Score   ******************   */

.scorecol {
	height: 100%;
	display: inline-block;
	background-color: purp;
}

.scorearea {
	/*font-size: 14em;*/
	font-size: 0.8em;
	color: #F1F9FB;
	background-color: #262B29;
	width: 100%;
	height: 338px;
	/*height: 368px;*/
	padding: 4px;
	border-radius: 4px;
	border: 2px solid #EDE9CC;
	outline: none;
	resize: vertical;

	-moz-tab-size : 4;
	  -o-tab-size : 4;
		  tab-size : 4;
}

.scorearea.dirty {
	color: #E6B27A;
	border-color: #E6B27A;
}

/*   ******************   Drums   ******************   */

.drums {
	float: left;
	width: 124px;
	min-width: 50%;
}

.drumtitle {
	font-size: 0.9em;
	color: #F1F9FB;
	padding: 8px 8px 4px 12px;
	clear: both;
	text-align: justify;
}

.qm {
	float: right;
}

.drumbutton {
	font-size: 0.8em;
	color: #262B29;
	background-color: #EDE9CC;
	margin-left: 8px;
	margin-top: 4px;
	padding: 2px 6px 2px 4px;
	border-radius: 4px;
	word-spacing: -4px;
}

.bottomleft {
	clear: both;
}

.toms, .congas {
	background-color: #D37848;
}

.percussion {
	background-color: #E6B27A;
}

.basssnare, .cymbals {
	background-color: #EDE9CC;
}

.modifiers {
	background-color: #F1F9FB;
}

.randomizers {
	background-color: #F1F9FB;
}

/*   ******************   Manual Nav   ******************   */

.helpnav {
	margin-bottom: -20px;
}

.helpnav > ul > li > a {
	color: #F1F9FB;
	z-index: 100;
	border-bottom: 0 !important;
	border-radius: 8px 8px 0 0;
}

.nav-pills > li > a:hover {
	color: #D37848;
	background-color: transparent;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
	color: #262B29;
	background-color: #B9BCBA;
}

/*   ******************   Manual Body   ******************   */

.manualcol {
	font-size: 0.8em;
	color: #262B29;
	background-color: #B9BCBA;
	border-radius: 8px;
	margin-top: 16px;
	padding: 10px;
	overflow:auto;
	/*padding: 0px 18px;*/
}
.hide {
	display: none;
}

h2, h3 {
	font-size: 1.3em;
	font-weight: bold;
}
h3 {
	font-size: 1.2em;
}
ul {
	list-style-type: none;

}

li {
	margin-left:-25px;
}

#manualbasics, #manualexamples, #manualreference {
	/*display: none;*/
}

/*   ******************   Media   ******************   */

@media screen and (max-width: 768px) {
	#logo, #startbutton, #stopbutton, #updatebutton, #sharing {
		display: inline-block;
		float: left;
		margin-top: 0;
		margin-bottom: 12px;
	}

	#logo {
		font-size: 1em;
		text-align: left;
		padding-right: 22px;
	}
	#startbutton {
		padding-right: 8px;
	}
	#updatebutton, #sharing {
		text-align: right;
		padding-left: 22px;
	}
	.navbutton {
		padding-top: 3px;
	}

	.scorearea {
		height: 492px;
		/*height: 568px;*/
	}
	.drums {
		float: none;
		width: 100%;
	}
	.drumbutton {
		font-size: 0.7em;
	}
	.nav-justified > li {
		font-size: 0.8em;
		display: table-cell;
		width: 1%;
	}
	.nav-justified > li > a  {
		border-bottom: 1px solid #ddd !important;
		border-radius: 4px 4px 0 0 !important;
		margin-bottom: 0 !important;
		padding-left: 2px;
		padding-right: 2px;
	}
}

@media screen and (max-width: 435px) {
	#logo, #startbutton, #stopbutton, #updatebutton, #sharing {
		font-size: 0.95em;
	}
	.scorearea {
		height: 536px;
		/*height: 568px;*/
	}
}

@media screen and (max-width: 360px) {
	#logo, #startbutton, #stopbutton, #updatebutton, #sharing {
		font-size: 0.8em;
	}
	#logo {
		padding-right: 15px;
	}
	#startbutton {
		padding-right: 4px;
	}
	#updatebutton {
		text-align: right;
		padding-left: 15px;
	}
	#sharing {
		padding-left: 18px
	}
	.scorearea {
		height: 536px;
		/*height: 568px;*/
	}

}