@charset "utf-8"; /* Defaults*/
@media (max-width: 1080px) {  /* Hides stuff when the window is too small*/                 
   .slideshow {display: none;}
}

body { /*Basic page settings*/
    margin: 0;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; /* Segoe is the best font ever*/
	background: url('images/vballbg.JPG') no-repeat; /* Pulls in background image, no repeat makes it only appear once*/
	background-size: cover; /* Enlarges background image for window size*/
	background-attachment: fixed; /* Prevents background image from scrolling*/
}

hr { /* hr formatting*/
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.sortcarrot { /* text formatting for down arrow carrot*/
    font-size: calc(0.3em + .3vw + .3vh);
}

/*=======GLOBAL HYPERLINK FORMATTING:======*/
a:link { text-decoration:none;} /* unvisited link */
a:visited { text-decoration:none;} /* visited link */
a:hover { /* mouse over link */
    text-decoration:none;
	background-color: #F8D310;
	color: #000000;
}
a:active { text-decoration:none;}/* selected link */


/*=======SECTION FORMATTING:======*/	
#banner { /* Sets formatting for banner section*/
	height: auto;
	background-color: rgba(51, 51, 51, 0.30);
	text-align: center;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: #FFFFFF;
	font-size: calc(1.5em + .9vw + .9vh); /*50px*/
	text-shadow: 2px 2px 4px #000000;
	padding-bottom: .4vw;
	z-index: 100;
	width: 80%;
	max-width: 1200px;
	margin: auto;
}
/*=======MENU NAVIGATION FORMATTING:======*/
#menu {/* Sets overall formatting for page navigation section*/
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	z-index: 100;
	width: 80%;
	max-width: 1200px;
	margin: auto;
	background: rgba(51, 51, 51, 0.88); /* Defines RGB color with opacity as the last value */
    background: -webkit-linear-gradient(rgba(85, 85, 85, 0.88), rgba(51, 51, 51, 0.88)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(85, 85, 85, 0.88), rgba(51, 51, 51, 0.88)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(85, 85, 85, 0.88), rgba(51, 51, 51, 0.88)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(85, 85, 85, 0.88), rgba(51, 51, 51, 0.88)); /* Standard syntax */
    /*border-radius: 15px 15px 0px 0px;*/
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
		
}
#menu ul{/* Sets formatting for unordered list space*/
    list-style-type: none; /*removes bullets*/
   	margin: 0;
    padding: 0;
    overflow: hidden;
	width: 100%;
	display: table;
	text-align: center;
}

#menu ul li { /*unordered list items. applies formatting to all list items*/
	/*width: 160px;*/ /*distributes main links evenly... to distribute one must also modify min-width of .dropdown-content*/
	font-size: calc(.75em + .3vw + .3vh);
	display: inline-block;
	float: center;
	margin-left: auto;
	margin-right: auto;
	
}	
#menu ul li a, .dropbtn { /* Main menu link settings*/
	display: inline-block;
	color: white; /*font color when not hovering*/
	text-align: center;
	padding: 0.6vw 1vw;
	text-decoration: none; /*removes hyperlink underline*/
}

#menu li a:hover, .dropdown:hover .dropbtn { /*Main menu box formatting when hovering over it*/
 	background-color: #F8D310;
	color: #000000;
}
#menu ul li:hover > a { /*main menu text formatting when hovering over a dropdown item*/
	color: black;
}
#menu > ul > li.active > a { /* main menu active styling when clicked*/
 	background: #F8D310;
	color: black;
	box-shadow: 0px 0px 20px 0px rgba(248,211,16,1);
}
#menu li.dropdown {display: inline-block;}
	
/*=======DROPDOWN MENU LIST ITEM FORMATTING CONSTRAINTS:======*/
#menu .dropdown-content { /*specifies dropdown box values*/
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	/*min-width: 40px;*/
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
	z-index: 1; /*specifies precedence for element overlap. 100% emsures the dropdown menu is never blocked by another object*/
}

#menu .dropdown-content a { /*defines formatting of dropdown content when not hovering*/
	color: black;
	padding: 0.6vw 1vw;
	text-decoration: none;
	display: block;
	text-align:center;
}

#menu .dropdown-content a:hover { /*defines formatting of dropdown content when hovering*/
    background-color: #F8D310;
	color: #000000;
}

#menu .dropdown:hover .dropdown-content {display: block;}

#ribbon {/* Sets formatting for main body heading*/
	width: 80%;
	max-width: 1200px;
	text-align: center;
	font-weight: bold;
	height: 50px;
	margin: auto; /* Centers box in middle of screen*/
	font-size: calc(1.1em + .3vw + .3vh);/*28px;*/
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.9); /* Defines RGB color with opacity as the last value */
	padding: 1.8% 4% 1.8% 4%; /* Cell padding between text and edge of section*/
	box-sizing: border-box;  /* Locks down box size so padding does not violate width constraints */
	font-family:Calibri; 
}
	
#body { /* Sets formatting for body section*/
	width: 80%;
	max-width: 1200px;
	margin: auto; /* Centers box in middle of screen*/
	font-size: calc(.65em + .26vw + .26vh); /*reasonable font size with resizing based on browser size*/
	background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.90); /* Defines RGB color with opacity as the last value */
	padding: 1% 4% 2% 4%; /* Cell padding between text and edge of section*/
	box-sizing: border-box;  /* Locks down box size so padding does not violate width constraints */
}

#body .bodyheading {/* Sets formatting for main body heading text*/
	text-align: center;
	font-weight: bold;
	font-size:none;
	font-size: calc(1.0em + .3vw + .3vh);
	font-family:Calibri;
}
	
#container { /* Contains objects and uses a scrollbar*/
	padding: 0;
	text-align: left;
	height: 21em;
	max-height: 20vw;
	overflow: auto; 
	min-width: 200px;
}

#footer { /* Sets formatting for footer section*/
	width: 80%;
	max-width: 1200px;
	color: #FFFFFF;
	margin: auto; /* Centers box in middle of screen*/
    background: -webkit-linear-gradient(rgba(51, 51, 51, 0.88), rgba(0, 0, 0, 0.88)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(51, 51, 51, 0.88), rgba(0, 0, 0, 0.88)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(51, 51, 51, 0.88), rgba(0, 0, 0, 0.88)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(51, 51, 51, 0.88), rgba(0, 0, 0, 0.88)); /* Standard syntax */
	text-align: center;
	font-size: calc(.55em + .24vw + .24vh);
	padding: 0.5% 0.5%; /* Cell padding between text and edge of section*/
	box-sizing: border-box; /* Locks down box size so padding does not violate width constraints */
	border-radius: 0px 0px 15px 15px;
}	

#footer a:hover { /* mouse over link */
    text-decoration:none;
	background-color: #F8D310;
	color: #000000 !important;
}
/*=========== TABLE CONFIGURATION ===========*/
/*------ GENERIC CONFIGURATION ------*/
table { /* Sets default table attributes*/
    column-width: inherit; 
	border-collapse: separate;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
	border-spacing: 0;
	max-width: 1200px;
}
table th, td { /* Sets common attributes for table header and data*/
	text-align: center;
	padding: .5vw;
}

table th { /*Sets headings color for basic table*/
    background-color: rgba(245, 129, 1, 1); /* For browsers that do not support gradients */
   	background: -webkit-linear-gradient(rgba(254, 162, 60, 1), rgba(245, 129, 1, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(254, 162, 60, 1), rgba(245, 129, 1, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(254, 162, 60, 1), rgba(245, 129, 1, 1)); /* For Firefox 3.6 to 15 */
   	background: linear-gradient(rgba(254, 162, 60, 1), rgba(245, 129, 1, 1)); /* Standard syntax */
    color: white;
}
/*------ DIVISION SPECIFIC FORMATTING ------*/
.tableB1 tr:nth-child(even),
.tableB2 tr:nth-child(even),
.tableC tr:nth-child(even){background-color: #f2f2f2;} /* even rows are colored gray*/

.tableB1 tr:nth-child(odd),
.tableB2 tr:nth-child(odd),
.tableC tr:nth-child(odd){background-color: #FFFFFF;} /* odd rows are white*/

table.tableB1 th { /*Sets heading color for B1 division table*/
	background-color: rgba(210, 0, 0, 1);
   	background: -webkit-linear-gradient(rgba(255,17,17,1), rgba(185, 0, 0, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,17,17,1), rgba(185, 0, 0, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,17,17,1), rgba(185, 0, 0, 1)); /* For Firefox 3.6 to 15 */
   	background: linear-gradient(rgba(255,17,17,1), rgba(185, 0, 0, 1)); /* Standard syntax */
    color: white;
}
table.tableB2 th { /*Sets heading color for B2 division table*/
	background-color: rgba(0, 0, 226, 1);
   	background: -webkit-linear-gradient(rgba(21,60,255,1), rgba(0, 26, 154, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(21,60,255,1), rgba(0, 26, 154, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(21,60,255,1), rgba(0, 26, 154, 1)); /* For Firefox 3.6 to 15 */
   	background: linear-gradient(rgba(21,60,255,1), rgba(0, 26, 154, 1)); /* Standard syntax */
    color: white;
}
table.tableC th { /*Sets heading color for C division table*/
	background-color: rgba(0, 234, 0, 1);
   	background: -webkit-linear-gradient(rgba(0,254,0,1), rgba(0, 196, 0, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,254,0,1), rgba(0, 196, 0, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,254,0,1), rgba(0, 196, 0, 1)); /* For Firefox 3.6 to 15 */
   	background: linear-gradient(rgba(0,254,0,1), rgba(0, 196, 0, 1)); /* Standard syntax */
    color: white;
}
/*------ BODY TABLE FORMATTING ------*/
/*Sets formatting for table on home page containing other objects*/
table.hometable{ box-shadow: none;width:100%}

/*=======Side-by-side unordered list class for jumping between links/sections ======*/
.jump ul{/* Sets formatting for unordered list space*/
    list-style-type: none; /*removes bullets*/
    margin: 0;
    padding: 0;
	width: 100%;
	display: table;
	text-align: center;
}
.jump ul li { /*unordered list items. applies formatting to all list items*/
	font-size: calc(.65em + .3vw + .3vh);
	display: inline-block;
	float: center;
	margin-left: auto;
	margin-right: auto;
}
/*=======Button class formatting ======*/
.arraybutton { /*Button frmatti for array of buttons*/
 	text-decoration: none;
  	background-color: rgba(51, 102, 255, 1);
 	color: #FFFFFF;    
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
	padding: 2px 6px 2px 6px;
	margin: auto;
	height: auto;
	position: relative;
	display: block;
}
.arraybutton:active{ /* Button formatting when clicked*/
	background-color: #F8D310;
	box-shadow: none;
	transform: translateY(.15em);
}
.bodybutton { /*Button formatting for a standalone button*/
  	text-decoration: none;
  	background-color: rgba(51, 102, 255, 1);
  	color: #FFFFFF;    
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
	padding: 2px 6px 2px 6px;
	margin-left: 1px;
	margin-right: 1px;
}
.bodybutton:active{ /* Button formatting when clicked*/
	background-color: #F8D310;
	box-shadow: none;
	transform: translateY(.15em);	
}
.disabled { /* "Disabled" appearance of a link*/
    opacity: 0.6;
    cursor: not-allowed;
}
/*=======4 IMAGE SLIDESHOW:======*/	
/* Fade animation*/
/* Keyframes can be a simple from or to but for more 
complicated animations, we have to use percentages. 
Therefore, the last piece of the puzzle is figuring 
out how to get the animation percentages correct. 
To do so, we need to break up 100% into the number
 of seconds of our animation. If the animation is 
 10 seconds long then each second is 10%. If the animation
 is 6 seconds then each second is 16.66%. The timing then
 becomes a multiple of that.

Math: 100 / animation duration = percentage for 1 second.*/
@keyframes fade {
  0%   { opacity: 0; }
  8.333%   { opacity: 1; }
  25%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100% { opacity: 0; }
}

/*Formatting properties*/ 
.slideshow{
	position: relative;
	width: 400px;
	height: 266px;
	max-height:266px;
	max-width:400px;
	/*-moz-transform: translateX(-50%); */
	/*-webkit-transform: translateX(-50%);*/
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.95);
}

/* Animation duration declaration for all images:
To determine the animation duration, take the fade in time 
that you want plus the time you want the image to be visible
 before beginning to fade out. If you want the image to take 
 1 second to fade in and be visible for 1 second and you have 
 3 images then your animation duration is 6 seconds.

(time to fadein + time visible) * image count = duration.

This is configured for a 2 second fade-in and 6 seconds of visibility
for 4 images, so 32 seconds is our duration*/
.slideshow img { 
    opacity:0; 
    animation-name: fade; 
    animation-duration: 32s;  /* <- the critical calculation*/
    animation-iteration-count: infinite; 
    position:absolute; 
    left:0; 
    right:0;
}

/* Animation delay = fade-in time+visible time for previous image 
e.g. If it's the second image and the animation should fade-in for 
1 second and be visible for 2 seconds before fading out, the animation
delay should be 3 seconds. If it's the third image, the delay is 6
seconds, if it's the fourth image, the delay is 9 seconds, and so on.

This is configured for a 2 second fade-in and 6 seconds of visibility*/
.slideshow img:nth-child(1) { animation-delay: 0s; }
.slideshow img:nth-child(2) { animation-delay: 8s; }
.slideshow img:nth-child(3) { animation-delay: 16s; }
.slideshow img:nth-child(4) { animation-delay: 24s; }