/* 1.95 */

/*CSS Reset*/
body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; margin-left: 0;}
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }
a {
	text-decoration: none;
	color: inherit;
}

@font-face {
    font-family: 'FlightcaseRegular';
    src: url('font/flightcase-webfont.eot');
    src: url('font/flightcase-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/flightcase-webfont.woff') format('woff'),
         url('font/flightcase-webfont.ttf') format('truetype'),
         url('font/flightcase-webfont.svg#FlightcaseRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	background-color: #0d0311;
	color: #500066;
	text-align: center;
	font-family: Helvetica, sans-serif;
}

body.record {
	background: #0d0311;
	color: #e01a21;
}

.stage {
	text-align: center;
	width: 688px;
	margin: 18px auto 188px auto;
	padding: 18px;
}

.roadcase {
	text-align: center;
	width: 548px;
	height: 720px;
	margin: 18px auto;
	padding: 180px 88px 88px 88px;
	background: url('art/roadcase.jpg') no-repeat top center;
}

body.song, body.gig {
	background: #140706;
}

h1 {
	font-family: FlightcaseRegular;
}
h1, h3, h6 {	
	color: #9e00e4;
}

h2, h4, h6 {
	color: #ce4300;
}

h1 {
	font-size: 36pt;
	-webkit-transform: rotate(-1.88deg);
	margin: 28px;
}


h3 a {
	display: block;
	margin: 18px;
	font-size: 18pt;
	color: #983303;
	-webkit-transition: .8s color;
}

h3 a:hover {
	color: #ce4300;
}
.chunk {
	display: block;
	width: 720px;
	margin: 18px auto;	
}

.half {
	width: 48%;
}

.left {
	float: left;
}

.right {
	float: right;
}

fieldset {
	margin: 8px;
}

.document {
	display: block;
	border-radius: 8px;
	margin: 8px;
	padding: 8px 18px;
	text-align: right;
	background: #2d0508;
	color: #e01a21;
	-webkit-transition: background .8s, color .8s;
}

.document:hover {
	background: #29003a;
	color: #9e00e4;
}
.document .tit {
	display: block;
	text-align: left;
	font-size: 15pt;
}
.document .detail {
	display: inline-block;
	font-size: 10pt;
}

.logo {
	display: inline-block;
	vertical-align: top;
	width: 188px;
	margin: 18px;
	padding: 8px 0;
	border-radius: 8px;
	background: #29003a;
}

.logo .logotit {
	font-size: 13pt;
	color: #d77e16;
}

.logo .thumb {
	max-width: 88%;
	height: auto;
	max-height: 188px;
	margin: 8px 0;
}
.logo .file {
	display: block;
	font-size: 12pt;
	color: #9e00e4;
	-webkit-transition: background .88s, color .88s;
}

.logo .file:hover {
	background: #4c006c;
}

.logo .modified, .logo .dimension {
	color: #29003a;
	font-size: 88%;
}

.but, button {
	display: inline-block;
	border-radius: 4px;
	font-size: 12pt;
	font-weight: 500;
	padding: 6px 18px;
	margin: 8px;
	background: #2d0508;
	color: #953203;
	-webkit-transition: background .8s, color .8s;
}

.but.future {
	background: #29003a;
}


.group {
	border-radius: 8px;
	display: block;
	padding: 2px 0px;
}
.group .but {
	background: #0d0311;
}

.but:hover , button:hover {
	background: #29003a;
	color: #e01a21;
}

.edit {
	background: #9e00e4;
	color: #e01a21;
}

.little {
	font-size: 69%;
}

.big {
	font-weight: 200;
	font-size: 150%;
}

.sticker.red {
	color: #e01a21;
	-webkit-transform: rotate(2.88deg);
	margin-left:88px;
}
.sticker.orange {
	color: #ce4300;
	-webkit-transform: rotate(-3.88deg);
	margin-left:188px;
}
.sticker.yellow {
	color: #d77e16;
	-webkit-transform: rotate(3.88deg);
	margin-left:-188px;
}
.sticker.purple {
	color: #9e00e4;
	-webkit-transform: rotate(-1.88deg);
	margin-left:18px;
}

.sticker {
	font-family: "Flightcase";
	font-weight: 800;
	display: inline-block;
	padding: 8px 18px;
	text-align: center;
	color: #7300a5;
	-webkit-transition: background .8s, color .8s, -webkit-transform 1.8s;
}

.sticker:hover {
	color: white;
	-webkit-transform: rotate(0deg);
}




.but:active {
	background: #9e00e4;
}

.but .deet {
	display: block;
	font-size: 69%;
}

th {
	background: #29003a;
	color: #e01a21;
}

input::selection {
	background: #1a0324;
}

input, select {
/* 	-webkit-appearance: none; */
	width: 88%;
	margin: 8px 18px;
	font-size: 24px;
	height: 36px;
	border-radius: 3px;
	border: none;
	background: black;
	color: #ce4300;
}

textarea {
	text-align: left;
}

select {
	height: 28px;
	font-size: 18px;
	font-weight: 100;
	color: white;
}

input[type=submit] {
	background: #1a0324;
	-webkit-transition: background .8s;	
}

input[type=file] {
	width: auto;
	background: none;
	font-size: inherit;
	color: #5e396f;
}

label {
	color: #ce4300;
	display: block;	
}

input[type=submit]:hover {
	background: #29003a;	
}

form.chunk {
	padding: 48px 0;
	text-align: left;
}

.chunk input[type=submit] {
	position: fixed;
	right: 0;
	top: 0;
	width: auto;
	height: 48px;
	border-radius: 2px;
	font-size: 12pt;
	font-weight: 100;
	padding: 6px 18px;
	margin: 8px;
	background: #7a0e12;
	color: #e01a21;
	-webkit-transition: background .8s, color .8s;
}

input[type=image] {
	width: inherit;
}

:focus {
	background: #1a0324; 
}
::-webkit-input-placeholder {
	color: #9e00e4;
}

/* record */
.record input {
	background: #29003a;
}

.record .gig {
	display: inline-block;
	width: 188px;
	vertical-align: top;
	text-align: center;
	margin: 8px;
}
	
.record .gig a {
	display: block;
	border-radius: 8px;
	padding: 8px;
	background-color: #1a0324;
	-webkit-transition: background .8s, color .8s;
}

.record .gig a:hover {
	background-color: #29003a;
}

.record .when {
	color: #ce4300;
	font-size: small;
}

.record .what {
	color: #ad1419;
	font-size: 14pt;
}

#tracks {
	width: 720px;
	margin: 18px auto;	
}

.record .track {
	display: block;
	text-align: left;
	list-style: decimal;
	background-color: #29003a;
	border-radius: 18px;
	padding: 4px 18px;
	margin: 8px;
	
}


.record .track a {
	display: inline-block;
	width: 560px;
	height: 24px;
	color: #ce4300;
	-webkit-transition: opacity .8s, color .8s;
}


.record .track .listen, .record .track .download {
	width: 48px;
	background-position: center center;
	background-repeat:  no-repeat;
	font-size: 0;
	opacity: 0.5;
}

.record .track .listen {
	background-image: url('record/play.png');
	border-radius: 0 18px 18px 0;
}
.record .track .download {
	background-image: url('record/down.png');
	border-radius: 0;
}

.record .track a:hover {
	color: #f08d18;
	opacity: 1;
}

.record .track a:visited {
	color: #ad1419;
}

.record #gigs.find {
	width: 720px;
	margin: 18px auto;
}

.record #gigs.find li {
	width: 100%;
	margin: 8px 0 0 0;
}

.record #gigs.find .gig {
	padding: 8px 0 8px 0;
}

.record #gigs.find .gig a {
	
}

/* end record */

#song-entry {
/* 	position: fixed; */
	right: 0;
	width: 320px;
/* 	top: 280px;	 */
	background: #4b006c;
	color: #d77e16;
}


.typeahead {
	position: absolute;
	width: 320px;
	display: block;
	list-style: none;
	text-decoration: none;
	text-align: left;
	margin: 0 18px;
	color: #d77e16 ;
	background: rgba(18,18,18,.88);
}

.active {
	background: #3f006c;
}

#tags {
	padding: 18px 0;
}

.tag-tog {
	
}

.tag-tog input {
	display: none;
}

.tag-but, .tag-tog {
	display: inline-block;
	border-radius: 4px;
	padding: 2px 4px;
	margin: 2px;
	color: #ad1419;
	background: #0f0803;
}

.toggle {
	border-radius: 4px;
	font-size: 12pt;
	font-weight: 500;
	padding: 6px 18px;
	margin: 8px;
	background: #0f0803;
	color: #ad1419;
	-webkit-transition: background .8s, color .8s;
}



.song-but {
	display: none;
	border-radius: 4px;
	padding: 2px 4px;
	margin: 2px;
	color: #0f0803;
}

.on {
	background: #d77e16;
	display: inline-block;
}

.song .when {
	color: #e53317;
}

.set-list {
	overflow-y: scroll;
	height: 720px;
	width: 100%;
	font-size: 12pt;
	text-align: left;
	border-radius: 2px;
	border: none;
	background: black;
	color: #d77e16;
}


.setlist {
	color: #ce4300;
	text-align: center;
	width: 720px;
	margin: 18px auto;
	
}

.setlist .song, .repertoire .song {
	display: block;
	min-height: 36px;
	color: white;
	font-size: 18pt;
}

.setlist .song img, .repertoire .song img {
	display: inline-block;
	vertical-align: middle;
	height: 36px;
	width: auto;
	margin-right: -18px;
		
}

.song a:hover {
	color: #d77e16;
}

.mix-note {
	display: block;
	color: #d77e16;
	font-size: 3pt;
	-webkit-transition: font-size .88s, color .88s;
}

.song:hover>.mix-note {
	font-size: 28pt;
}

.songtable {
	width: 100%;
	text-align: left;
	color: white;
	margin: 18px auto;
}

.songtable tr {
	border-bottom: thin solid #7a0e12;
}

.songtable td {
	padding: 3px;
}

.songtable .song-lead {
	text-align: right;
	width:10%;
}

.songtable img {
	height: 12px;
	width: auto;
}
.songtable .song-tit {
	width:30%;
}
.songtable .song-artist {
	width:25%;
}
.songtable .song-duration {
	width:10%;
}
.songtable .song-tag {
	width: 25%;
}
.songtable .tag-but {
	font-size: 9pt;
	padding: 1px;
	margin: -3px 3px;
}


.songtable .has-score {
	text-align: center;
}
.songtable .no-score {
	text-align: center;
	color: #4c006c;
}
.songtable .bad-score {
	text-align: center;
	color: #e01a21;
}
.songtable th.instrument {
	font-size: 69%;
	
}

.songtable .song-tally {
	width: 15%;
	text-align: right;
}
.songtable .song-pc {
	width: 15%;
	text-align: right;
}
.songtable .song-when {
	width: 15%;
	text-align: right;
}

.leads button {
	-webkit-appearance: none;
	margin: 2px;
	padding: 0;
	border-radius: 50%;
	border: none;
	width: 3.6em;
	height: 3.6em;
	border: 4px solid black;
	opacity: 0.5;
}

.leads button input[type='checkbox'] {
	display: none;
}

.leads .checked {
	background: #1a0324;
	border: 4px solid #f08d18;
	opacity: 1;
}

.leads img {
	width: 100%;
	height: 100%;
}

.leads .checked img {
}

.uploads .instrument {
	display: block;
	text-align: left;
}
.uploads label {
	display: inline-block;
	text-align: right;
	width: 20%;
}
.uploads input[type=file] {
	width: 30%;
}

.uploads a {
	width: 30%;
}

.uploads .default {
	color: #622306;
}

/* Journal */
.journal li {
	text-align: left;
	color: #9f5e12;
	font-size: small;
	line-height: 1.5em;
	padding-left: 24px;
	margin: 3px 0;
	background-position: left top;
	background-repeat: no-repeat;
}

.journal li span {
	display: inline-block;
	margin: auto;
	padding: 2px;
}

.journal li .when {
	width: 15em;
}

.journal li .who {
	color: #ef4618;
	width: 5em;
}
.journal li .what {
	color: #ef4618;
	width: 0;
}
.journal li .where {
	color: #d77e16;
}

.journal li.download {
	background-color: #220e07;
	background-image: url("art/download.png");
}
.journal li.browser {
	background-color: #220e07;
	background-image: url("art/browser.png");
}
.journal li.setlist {
	width: inherit;
	background-color: #221607;
	background-image: url("art/setlist.png");
}
.journal li.upload {
	background-color: #1b0122;
	background-image: url("art/upload.png");
}
.journal li.compose {
	background-color: #2d0c09;
	background-image: url("art/compose.png");
}

/* Dock */

#dock {
	display: block;
	text-align: left;
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 8px;
	font-size: large;
	max-height: 36px;
/* 	width: 100%; */
	max-width: 188px;
	background: rgba(0,0,0,.69);
	background-image: url("art/burger.png");
	background-repeat: no-repeat;
	background-position: left top;
	
/* 	border-right: thin solid purple; */
	-webkit-transition: max-height 1.8s, max-width 1.8s, background 3.8s;
}

#dock:hover {
	max-height: 1888px;
	max-width: 888px;
/* 	background: rgba(0,0,0,.88); */
}

#docker {
	display: block;
	width: 100%;
	height: 20%;
}

#dock h3 {
	font-size: 18pt;
	color: #f08d18;
	padding-left: 54px;
	
}

#dock h4 {
	color: #9e00e4;
}

#dock form, #dock .but {
	display: block;
}

#dock input, #dock select {
	-webkit-appearance: none;
	display: inline-block;
	font-size: 12pt;
	padding: 6px 18px;
	width:auto;	
	height: auto;
	background: #2d0508;
	color: #953203;
}

#dock input[type=submit]:hover, #dock select:hover {
	background: #4c006c;
	color: #e01a21;
}

form.group select > input[type=submit]:hover {
	background: #4c006c;
	color: #e01a21;
}

#dock select {
	border-radius: 8px 8px 0 0;
}

form.group input, form.group select {
	margin: 6px 0;
	border-radius: 0px;
}

form.group select:first-of-type {
	border-radius: 8px 0 0 8px;
}

form.group input:last-of-type {
	border-radius: 0 8px 8px 0;
}

.message {
	color: #ce4300;
}

.bugger {
	color: #e01a21;
	text-align: left;
}

.help {
	font-size: 12pt;
	color: #e01a21;
	text-align: left;
	padding: 8px 36px;
}

.hint {
	font-size: 10pt;
	color: #9e00e4;
	text-align: left;
	padding: 8px 36px;
}

.login {
	width: 388px;
	margin: 0 auto;
}


/* Rider Documents */
.documents .toggle {
	display: inline-block;
}

/* Presets */
.presets .preset {
	display: inline-block;
	background: #3a0049;
	color: #9e1811;
}

.presets .preset:hover {
	background: #500066;
	color: #e82f14;
}