@charset "UTF-8";
/* CSS Document */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFF;
	background-color: #030303;
	margin: 0px;
	padding: 0px;
}
p , td{
	font-size: 1.1em;
	line-height: 1.5em;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	line-height: 1.4em;
}

#wrapper {
	margin-bottom: 20px;
	margin-left: auto;
	background-color: #000000;
	max-width: 850px;
	margin-right: auto;
	margin-top: 0px;
	padding-top: 55px;
	color: #FFFFFF;
	font-size: 1.3em;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#subHead {
	color: #CCC;
	text-align: right;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	font-weight: bold;
	max-width: 660px;
	margin-top: 25px;
	margin-bottom: 10px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 600px;
}

a, a:visited {
	color: #005FAE;
	text-decoration: none;
}
a:hover {
	color: #D5D5D5;
	text-decoration: none;
}

.imgThumb {
	border: 2px solid #333;
	margin-bottom: 3px;
}

.siteText {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 25px;
}

img, embed, object, video {
	
	max-width: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-size: contain;
}


/*flexbox thumb containers*/

.flex-container-index {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 850px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 25px;
}
.flex-container-index> div {
	padding: 10px;
	text-align: center;
	min-width: 130px;
	min-height: 140px;
	}

.flex-container-thumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 25px;
}
.flex-container-thumb> div {
	padding: 5px;
	text-align: center;
	min-width: 150px;
	min-height: 150px;
}

.flex-container-ballindex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 10px;
}
.flex-container-ballindex> div {
	text-align: center;
	min-width: 170px;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 170px;
	padding-left: 17px;
	padding-right: 17px;
}

.flex-container-balls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 850px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 19px;
	margin-bottom: 0px;
}
.flex-container-balls> div {
	/* [disabled]padding-top: 10px; */
	padding-right: 20px;
	padding-left: 20px;
	/* [disabled]padding-bottom: 10px; */
	text-align: center;
	min-width: 320px;
	min-height: 340px;
}

/*end flexbox*/


/*bottom navigation buttons*/

.bottomNav {
  list-style: none;
  padding: 0;
  text-align: center;
  margin-top: 12px;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
}
.bottomNav li {
  display: inline;
}
.bottomNav a {
  display: inline-block;
  text-decoration: none;
}



.button-link {
	color: #666666;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #003333;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-right: 6px;
	margin-left: 6px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	background-color: #999999;
	padding-top: 7px;
	font-size: 0.9em;
}
.button-link:hover {
  background-color: #666666;
}
.button-link:active {
color: #666666;
}
.button-link:visited {
color: #666666;
}
/*end bottom navigation buttons*/


 /* Mail Form CSS */
 /* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
	background-color: #216AAF;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: none;
	margin-top: 10px;
}
/* Style the container */
.form_container {
	border-radius: 5px;
	background-color: #000000;
	padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
	width: 100%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
  }
} 


.align-center {
	text-align: left;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-right: px;
	padding-left: px;
	padding-bottom: 0px;
	margin-top: 0px;
}