/*
    ISDTAScoring.net Scoring Stylesheet
    Copyright(c) 2019.
    Iowa Web Development / HostIowa.net
*/



/* HTML ELEMENTS
----------------------------------------------------------*/

html, body {background: #FFFFFF; font-size: 1.3em;}
input[type="password"] {font-size: 1.5em; padding: 0.25em; text-align: center; border: solid 1px #333;}

/* LAYOUT ELEMENTS
----------------------------------------------------------*/

.modalWindow.scoring {height: 710px; width: 700px;}
.modalHeader {background-color: #92278E;}

table.scoring {border: 0; border-collapse: collapse; width: 100%;}
table.scoring th {background: #000; color: #FFF; font-size: 0.6em; line-height: 1.1em; vertical-align: bottom;}
table.scoring td span {font-size: 1rem;}

.button {background-color: #90C848; color: #000; font-size: 1.2rem; padding: 0.75rem 3rem; font-family: 'Oswald';}

#recordingsList {margin: 6px auto; font-size: 13px; font-weight: bold;}
#recordingsList li {}
.audio-uploaded, .audio-uploaded > a {color: #00cc00;}
.audio-failed, .audio-failed > a {color: #cc0000; font-size: 17px;}

.is-hidden {display: none;}

.location_progress_container {border: solid 1px #333; background-color: #ddd; position: relative; padding: 0.5rem 1rem; margin-top: 1rem;}
.location_progress {
	background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%) !important;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.location_progress_container h1 {position: relative; display: inline-block; z-index: 100;}
.location_progress_container span {position: relative; display: inline-block; z-index: 100; font-size: 1.0rem; margin-left: 1rem;}

table.scoring td.status {border-left: solid 1px #333; border-right: solid 1px #333; position: relative;}
table.scoring td.status span {position: relative; display: inline-block; z-index: 100;}
/*
tr:nth-child(4n), tr:nth-child(4n-1) {
    background: #eee;
}*/

table.scoring tr:nth-child(even) {background: #eee;}
table.scoring tr:hover {background: #FFFFE2;}
table.scoring th, table.scoring td {padding: 12px 10px; text-align: center; border-bottom: solid 1px #ccc;  line-height: 1em;}
table.scoring th a {color: #FFF; font-weight: bold; padding: 0.5rem;}
table.scoring th a.sorted {background-color: #aaf0d1; color: #000;}
table.scoring td input {width: 90%; font-size: 1.3em; font-weight: bold; padding: 0.1em; text-align: center; border: solid 1px #333;}
table.scoring td select {width: 90%; font-size: 1.1em; font-weight: bold; padding: 0.1em; text-align: center; border: solid 1px #333;}
table.scoring td.tie {font-weight: bold; font-style: italic; color: #cc0000; background-color: rgba(255,0,0,0.15);}
table.scoring td.submitted {background-color: rgba(0,255,0,0.1);}
table.scoring td.score-alert {font-weight: bold; font-style: italic; color: #cc0000; background-color: rgba(255,0,0,0.15);}

table.scoring.results th, table.scoring.results td {font-size: 0.8rem; padding: 6px;}

.modalWindow table.scoring td {padding: 8px !important;}

ul.cards {margin: 1em auto; text-align: center; padding: 0;}
ul.cards li {display: inline-block; width: 30%}
ul.cards li a {display: block; border: solid 1px #ccc; box-shadow: #ccc 0 0 10px; padding: 1.2em 1em; margin: 1em;}
ul.cards li a:hover {background-color: rgba(0,0,0,0.03); text-decoration: none;}
ul.cards li a img {max-height: 60px;}
ul.cards li a span {display: block;}

img.logo {max-height: 30vh;}

.audio {
	display: inline-block;
	position: relative;
	margin: 0px 6px;
	width: 12px;
	height: 16px;
	background: url('/images/icons/audio.png') no-repeat;
	background-size: contain;
}

.audio:hover .audio-menu {
	display: block;
}

.audio-menu {
	display: none;
	position: absolute;
	top: 14px;
	z-index: 10;
	border: solid 1px #000;
	padding: 8px;
	background-color: #333;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align: left;
}

.audio-menu a {
	display: block;
	padding: 6px 12px;
	color: #fff;
	font-style: normal;
}

.audio-menu a:hover {
	color: #ccc;
}


@media print {
	.no-print {
		display: none !important;
	}
	.break {
		page-break-after: always;
	}
}

/* medium */

@media only screen and (min-width: 46.063em) and (max-width: 63.999em) {

	html, body {font-size: 1.1em;}
	ul.cards li {width: 40%}

}

/* small */
@media only screen and (max-width: 46.875em) {
	html, body {font-size: 1.1em;}
	ul.cards li {width: 100%}

}