/* CSS for apftscore.com */

/* CSS reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*font-size: 100%;*/
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*               */
/* end css reset */
/*               */

/* tag styles */

body {
    background-color: #dcdcdc;
    background-repeat: repeat-x;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.25em;
}
@media (max-width: 360px) {
	body	{
		font-size: 11pt;
	}
}

/* h1 is used for site's header title/logo */
h1 {
    font: normal 2.5rem Georgia, "Times New Roman", Times, serif;
    margin: 0 0 0.5rem 0;
    padding: 0.75rem 0;
    font-weight: normal;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
@media (max-width: 360px) {
	h1 {
		font-size: 2.0rem;
	}
}
h1 span {
    color: #cc0000;
    font-weight: bold;
}
h1 span.acft {
	color: #004d00;
}
h1 small {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: none;
    display: block; /*--Keeps the small tag on its own line--*/
}

/* sub-headers */
h2 {
    font-size: 1.2em; 
    font-weight: bolder; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-top: 2em;
}
h3 {
	font-size: 1.1em;
    margin-top: 1.5em;
}
h4 {
	font-size: 1em;
    margin-top: 1.5em;
}

/* text blocks */
p {
    margin: 1em 0;
}
blockquote {
    font-size: 0.9em;
    margin: 1em 3em;
    padding: 1em;
    background-color: #E9E9E9;
    border: 1px solid #CCCCCC;
}
blockquote cite {
    font-style: normal;
    font-weight: bolder;
}
@media (max-width: 360px) {
	blockquote {
		margin: 1em 0;
	}
}

/* lists */
ol, ul {
    list-style: disc outside none;
    margin-left: 3em;
}
li {
    margin-top: 1em;
}
@media (max-width: 360px) {
	ol, ul {
		margin-left: 2em;
	}
}

small, .small
{
    font-size: smaller;
}

/* tables */
th {
    font-size: 85%;
    text-align: center;
    font-weight: bolder;
    padding: 0 0.5em 0 0.5em;
}
td {
    color: #000000;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0 0.5em 0 0.5em;
    margin: 0;
    border-spacing: 0;
    border: 0;
    vertical-align: middle;
}

/* links */
a:link, a:visited, a:active {
    color: #cc0000;
}
a:hover {
    color: #cc4242;
}

/* form input */
input[type="text"], input[type="submit"], input[type="password"], select, .select {
    background-color: #F7F7F7;
    border: 1px solid gray;
}
input:focus, input:hover, select:focus, select:hover {
    background-color: #F5F1DE;
}

/* main site container element */
#main {
	margin: 2em auto 2em auto;
	background-color: #FFFFFF;
	box-sizing: border-box;
	min-width: 1300px;
	width: 1300px;
	border: 1px solid #000000;
	padding: 0 1.5rem 1.5rem 1.5rem;
	text-align: left;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
@media (max-width: 1300px) { 
	#main 	{
		margin: 1em auto 1em auto;
		min-width: 95%;
		width: 95%;
		padding: 0 1em 1em 1em;
	}
}
@media (max-width: 360px) {
	#main {
		padding: 0 0.5rem 0.5rem 0.5rem;
	}
}

/* page footer */
#foot {
	clear: both;
	margin: 1.5em auto 1.5em auto;
	background-color: #FFFFFF;
	box-sizing: border-box;
	min-width: 1300px;
	width: 1300px;
	border: 1px solid #000000;
	padding: 0 20px 0 20px;
	text-align: center;
	font-size: smaller;
	line-height: 1.0em;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
@media (max-width: 1300px) { 
	#foot {
		margin: 1em auto 1em auto;
		min-width: 95%;
		width: 95%;
		padding: 0 1em 1em 1em;
	}
}
@media (max-width: 360px) {
	#foot {
		padding: 0 0.5rem 0.5rem 0.5rem;
	}
}

/* front index page - left/right blocks */

#left {
	float: left;
	clear: left;
	box-sizing: border-box;
	width: 60%;
	padding: 0 1.5rem 0 0;
	margin: 0;
}
#right {
	float: right;
	box-sizing: border-box;
	width: 40%;
	padding: 1rem;
	margin: 0;
	background-color: #F5F1DE;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#acft_left {
	float: left;
	clear: left;
	box-sizing: border-box;
	width: 60%;
	padding: 1rem;
	margin: 0;
	background-color: #F5F1DE;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#acft_right {
	float: right;
	box-sizing: border-box;
	width: 40%;
	padding: 0 0 0 1.5rem;
	margin: 0;
}

@media (max-width: 959px) {		/* single column layout*/
	#left {
		float: none;
		clear: both;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#right {
		float: none;
		clear: both;
		width: 100%;
		padding: 0.5rem;
	}
	#acft_right {
		float: none;
		clear: both;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#acft_left {
		float: none;
		clear: both;
		width: 100%;
		padding: 0.5rem;
	}
}

/* rawscore input page (rawscore.php/rawscore.tpl) */
div#scoreInput {
	overflow: auto;
	padding: 1em 0;
}
@media (max-width: 1000px) {
	div#scoreInput {
		overflow: scroll;
	}
}
#scoreInput table {
    margin-left: auto; 
    margin-right: auto;
    border: 0;
}
#scoreInput td {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* score report page (score.php/score.tpl) */
div#scoreReport {
	overflow: auto;
}
@media (max-width: 1000px) {
	div#scoreReport {
		overflow: scroll;
	}
}
#scoreReport table {
    margin: 2em auto 2em auto;
    min-width: 800px;  
    border: 0;
}
#scoreReport th {
    text-align: left;
    padding-bottom: 1em;
}
#scoreReport small {
    color: #888888;
    font-size: .75em;
}
#scoreReport tr.e {		/* even rows */
    background-color: #F5F5F5;
}
#scoreReport td.scoretotal {
    background-color: #EEEEEE;
}
#scoreReport img {
    border: 0;
}
#scoreReport .error {
    background-color: #FFB5B5;
}
#scoreReport .error ul {
    margin: 1em;
}
#scoreReport .error li {
    padding: 0;
    margin: 0;
    font-size: 0.85em;
}

/* one Soldier score report page (score.php/scoreone.tpl) */
div#scoreReportOneSoldier {
	width: 100%;
	box-sizing: border-box;
	font-size: 1.1rem;
	margin: 1em auto;
}
#scoreReportOneSoldier table {
	font-size: 1.1rem;
	width: 20em;
	margin: 0 auto;
	box-sizing: border-box;
}
#scoreReportOneSoldier td {
	font-size: 1.1rem;
	padding: 0.5rem;
}
#scoreReportOneSoldier tr.pass {
	background: #006600;
}
#scoreReportOneSoldier tr.pass td {
	color: white;
	text-shadow: 1px 1px 1px black;
}
#scoreReportOneSoldier tr.fail {
	background: #cc0000;
}
#scoreReportOneSoldier tr.fail td {
	color: white;
	text-shadow: 1px 1px 1px black;
}
@media (max-width: 360px) {
	#scoreReportOneSoldier table {
		font-size: 1.0rem;
	}
}

/* DA 705 scorecard creation page */
#da705 {
    margin: .5em auto .5em auto;
    background-color: #FFFFFF;
    min-width: 500px;
    width: 500px;
    border: 1px solid #000000;
    padding: 0 20px 0 20px;
    text-align: left;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#da705 h2 {
    font-size: 1.1em;
    font-weight: bolder;
    margin: 1em 0 1em 0;
    text-align: center;
}
#da705 table {
    border: solid black 2px; 
    margin: 1em auto 1em auto;
}
#da705 th, #da705 td {
    padding: 2px;
    border-left: solid black 1px;
    border-right: solid black 1px;
}
#da705 th {
    font-weight: normal;
    font-size: .75em;
    text-transform: uppercase;
}
#da705 td {
    text-align: center;
    vertical-align: middle;
}
#da705 table input[type="text"], #da705 table select {
    border: none;
    width: 4em;
    text-align: center;
    background-color: #DDDDDD;
}
#da705 table input[type="text"]:hover, #da705 table input[type="text"]:focus, #da705 table select:focus {
    background-color: #F5F1DE;
}
#da705 table .result {
    font-size: 1.5em;
    text-align: center;
}
#da705 div.options {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
#da705 div.options ul {
    list-style: none outside none;
    margin: 0;
}
#da705 div.options li {
    position: relative;
    line-height: 25px;
    vertical-align: middle;
    margin-left: 2em;
}
#da705 div.options input {
}
#da705 div.options label {
    position: absolute;
    display: block;
    position: absolute;
    top: 0;
    left: 60px;
}
#da705 div.options img {
    position: absolute;
    top: 0;
    left: -35px;
}
#da705 div.options input[type="file"] {
    margin-left: 60px;
}
#da705 div.options .upload label {
    position: relative;
    top: 0;
    left: 0;  
}

td.header {
    font-size: 85%;
    font-weight: bolder;
    padding: 0 0.5em 0 0.5em;
}

input.name {	/* name-sized input field */
    width: 12em;
}
input.reps {	/* repetition count-sized input field */
    width: 2.5em;
    text-align: center;
}
input.time {	/* time-sized input field */
    width: 3.5em;
    text-align: center;
}

div.infoblock {
	box-sizing: border-box;
    width: 65%;
    min-width: 450px;
    margin: 1.5em auto 1.5em auto;
    font-size: 0.9em;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    padding: 1em;
}
@media (max-width: 480px) {
	div.infoblock {
		width: 100%;
		min-width: 0;
		padding: 0.5em;
	}
}
div.infoblock h4 {
    font: normal 1.3em Georgia, "Times New Roman", Times, serif;
    margin-bottom: 1em;
	margin-top: 0;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
div.infoblock table {
    margin: 0 auto 0 auto;
}
div.infoblock td {
    margin: 0;
    padding: 0 1em 0 1em;
}
@media (max-width: 480px) {
	div.infoblock td {
		padding: 0 0.25em;
	}
}

div.frontblock {
    background-color: #FFFFFF;
    margin: 2em auto 2em auto;
}

table.scorecard {
    margin-left: auto;
    margin-right: auto;
}

/* forms */

/* Form styles */
div.form-container { 
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    background-color: #FFF; 
    border: #EEE 1px solid; 
    -moz-border-radius: 10px;
    border-radius: 10px;
}
@media (max-width: 360px)
{
	div.form-container 
	{
		padding: 0.25rem;
	}
}

div.form-container form p { 
    margin: 0;
}
div.form-container form p.note {
    margin-left: 230px;
    font-size: 90%; 
    color: #333; 
}
div.form-container form p.tail {
    margin: 1em 0;
    font-size: 85%;
    color: #333;
}
div.form-container form fieldset {
    margin: 5px 5px;
    padding: 10px;
    border: #DDD 1px solid;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
div.form-container form legend { 
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
    color: #666;
    text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
div.form-container form fieldset div { 
    padding: 0.25em 0;
}

/* not in use. uses CSS grid, not correctly supported in IE 11.
div.settings
{
	display: grid;
	display: -ms-grid;
	grid-template-columns: 1fr 30%;
	-ms-grid-columns: 1fr 30%;
	column-gap: 1rem;
	row-gap: 0.5rem;
}
div.settings label       { text-align: right; }
*/

/* Small front page forms */
div.smallform {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}
div.smallform label {
	display: inline-block;
	text-align: right;
	width: 10em;
	margin-right: 0.5rem;
} 
div.smallform.acft label {
	display: inline-block;
	text-align: right;
	width: 15em;
	margin-right: 0.5rem;
} 
div.smallform input, div.smallform select {
	width: 4em;
}
div.smallform div {
	padding: 0;
	margin: 0;
	height: 1.5em;
}
div.smallform img {
	position: absolute;
}
div.smallform ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #D3D3D3;
	opacity: 1; /* Firefox */
	font-size: 0.8rem;
}
@media (max-width: 480px) {
	div.smallform label {
		width: 8em;
	}
	div.smallform.acft label {
		width: 8em;
	}
	div.smallform img {
		display: none;
	}
}

/* Front page - score one soldier form */
.scoreone div {
    font-size: 1.3rem;
    line-height: 1.1rem;
    padding-left: 1rem;
}
.scoreone input, .scoreone select {
    font-size: 1.3rem;
}
@media (min-width: 960px) and (max-width:1300px) {
	.scoreone div {
		font-size: 1rem;
		line-height: 1rem;
		padding-left: 0;
	}
	.scoreone input, .scoreone select {
		font-size: 1rem;
	}	
}
@media (max-width: 480px) {
	.scoreone div {
		font-size: 1rem;
		line-height: 1rem;
		padding-left: 0;
	}
	.scoreone input, .scoreone select {
		font-size: 1rem;
	}
}

/* Front page - score multiple soldiers form */
.scoremultiple div {
    font-size: 1.1rem;
    padding-left: 1rem;
}
.scoremultiple input, .scoremultiple select {
    font-size: 1.1rem;
}
@media (min-width: 960px) and (max-width:1300px) {
	.scoremultiple div {
		font-size: 0.8rem;
	}
	.scoremultiple input, .scoremultiple select {
		font-size: 0.8rem;
	}
}
@media (max-width: 480px) {
	.scoremultiple div	{
		font-size: 0.8rem;
		line-height: 1rem;
		padding-left: 0;
	}
	.scoremultiple input, .scoremultiple select	{
		font-size: 0.8rem;
	}
}

div.form-container label.error, div.form-container span.error {
    color: #C00;
}
div.form-container label em {
    position: absolute; 
    right: 0; 
    font-size: 120%; 
    font-style: normal;
    color: #C00;
}
div.form-container input.error {
    border-color: #C00;
    background-color: #FEF;
}
div.form-container input:focus, div.form-container input.error:focus, div.form-container textarea:focus {	
    background-color: #F5F1DE;
}
div.form-container div.controlset label, div.form-container div.controlset input { 
    display: inline;
    float: none; 
}
div.form-container div.controlset label.controlset { 
    display: block;
    float: left; 
}
div.form-container div.controlset div { 
    margin-left: 170px; 
}
div.form-container div.buttonrow {
    margin-left: 220px;
}

#login label {
    width: 100px;
}
#login div.buttonrow {
    margin-left: 120px;
}
#login input[type="text"] {
    width: 15em;
}

/* end forms */

.center {
    text-align: center;
}
#guest {
    float: left;
}
#guest INPUT {
    width: 2em;
}
#member INPUT {
    width: 8em;
}

.even {
    background-color: #F5F1DE;
}
.fail {
    color: red;
    font-weight: bolder;
}
.left {
    text-align: left;
}
.help {
    cursor: help;
}

div.info {
    border: dashed gray 1px;
    padding: 0 1em;
    background-color: #F5F1DE;
	margin: 1em 0;
}

div.info h2 {
    font: normal 1.5em Georgia, "Times New Roman", Times, serif;
    margin: 0;
    padding: 10px 0;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}

/* usage tips blanket */
#blanket {
    background-color: #111;
    opacity: .65; /* current browsers except IE */
    filter: alpha(opacity=65); /* for IE 6-8. Won't validate. Oh well. */
    position: absolute;
    z-index: 9001;
    top: 0px;
    left: 0px;
    width: 100%;
}

/* usage tip pop-ups */
.popup {
    position: absolute;
    background-color: #eeeeee;
    border: solid black 2px;
    width: 500px;
    height: 300px;
    z-index: 9002;
}
.popup div.titlebar {
    background-color: black;
    height: 20px;
}
.popup div.titlebar img {
    float: right;
    border: 0;
    cursor: pointer;
}
.popup div.body {
    height: 275px;
    padding: 0px 10px 5px 10px;
    overflow: auto;
}
.popup div.body h2 {
    margin: 5px 0;
}

/* tooltips */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: help;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}





/* header navigation links */
#navbar {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	font-size: 1.0rem;
	text-align: center;
	/*border: solid red 1px;*/
	line-height: 1em;
}
#navbar ul { 
	display: block; 
	margin: 0 auto 0 auto; 
	padding-bottom: 7px; 
	border-bottom: 1px solid #ddd;
}
#navbar ul li { 
	display: inline-block;
}
#navbar ul li a {
	display: inline-block;
	line-height: 35px;
	padding: 0 9px;
	color: #727f8c;
	text-shadow: 1px 1px 0 #fff;
	font-weight: bold;
	text-decoration: none;
}
#navbar ul li a:hover {
	color: #8d99a6;
	background: #eaf0f6;
}

/* footer navigation links - mobile devices */
#footnav { 
	display: none; 
	border-top: 1px solid #ddd;
}
#footnav ul {
	margin: 0;
}
#footnav ul li { 
	display: block; 
	width: 100%; 
	border-bottom: 1px solid #eee;
	margin: 0;
}
#footnav ul li a { 
	display: block;
	box-sizing: border-box;
	width: 100%;
	color: #727f8c;
	text-align: center;
	padding: 15px 10px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.0rem;
	text-shadow: 1px 1px 0 #fff;
}
#footnav ul li a:hover {
	color: #8d99a6;
	background: #eaf0f6;  
}

/* menu button */
#footnavlink { 
	display: none;
}

@media screen and (max-width: 959px) {
	#navbar {
		height: auto;
	}
	#navbar ul { 
		display: none; 
	}
	#footnavlink { 
		display: block; 
		padding: 15px 25px; 
		/*background: #7391af;*/
		background: #cc0000;
		color: #fff; 
		text-align: center;
		font-size: 1.4em;
		font-weight: bold;
		text-decoration: none;
		margin-bottom: 1em;
	}
	#footnavlink:hover { 
		/*background: #84a0bd; */
		background: #cc4242;
	}
	#footnav { 
		display: block; 
	}
}