/*
 * Navigataur: A pure CSS responsive navigation menu
 * Author: Mike King (@micjamking)
 */

/*
 	Notes:
 
 	- Media queries should be edited in both style sections if you require 
	  a different breakpoint for your navigation.
	  
	- Toggle class & menu anchor tags in list items have box-sizing: border-box 
	  style property to allow padding inside the container without conflicting with layout.	

*/


/*--------------------------------
 Functional Styles (Required)
---------------------------------*/
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

/*.header { position: relative; }*/
#toggle, .toggle { display: none; }
/*.menu > li { list-style: none; float:left;	}*/

/* Nicolas Gallagher micro clearfix */
/*.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }*/



/*
(min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (device-aspect-ratio: 2/3)
	and (orientation : landscape)
	*/

/* After comma is for iPhone 4/4S landscape issue */
@media only screen and (max-width: 800px){
@-ms-viewport { width: 768px; }

	.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
	/*.menu > li { display: block; width: 100%; margin: 0; }
	.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }*/
	.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
	#toggle:checked ~ .menu { display: block; opacity: 1;}
	
	
	
	
	
	
.menu-icon {
	position: relative;
	display: inline-block;
	width: 35px;
	top: -30px;    /*text-indent:-999px;*/
}
 
.border-icon {
    height:15px;
    border-top:5px solid #fff; /*top bun*/
    border-bottom:5px solid #fff; /*bottom bun*/
}
 
.border-icon:before {
    content:"";
    position:absolute; 
    top:5px;
    left:0;
    width:100%;
    border-top:5px solid #fff; /*middle bun*/
}	
	
	
}



@media only screen and (max-width: 800px){
@-ms-viewport { width: 768px; }

	.menu{
		background: #FFFFFF;
		/*border-top: 1px solid #51C1F1;*/
	}
	
	.menu, .menu > li, .menu > li > a{
		height: auto;
	}
	


}

@media screen and (max-width:480px){
.menu-icon {
	top: auto;
}
.border-icon {
    border-top:5px solid #ccc; /*top bun*/
    border-bottom:5px solid #ccc; /*bottom bun*/
}
 
.border-icon:before {
    border-top:5px solid #ccc; /*middle bun*/
}







/* Force table to not be like tables anymore */
	div.practices table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	div.practices thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	div.practices tr { border: 1px solid #ccc; }
	
	div.practices td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	div.practices td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	div.practices td:nth-of-type(1):before { content: "Sunday"; }
	div.practices td:nth-of-type(2):before { content: "Monday"; }
	div.practices td:nth-of-type(3):before { content: "Tuesday"; }
	div.practices td:nth-of-type(4):before { content: "Wednesday"; }
	div.practices td:nth-of-type(5):before { content: "Thursday"; }
	div.practices td:nth-of-type(6):before { content: "Friday"; }
	div.practices td:nth-of-type(7):before { content: "Saturday"; }
	div.practices td:nth-of-type(8):before { content: "Sunday"; }







/* TCA:062415 - Mobile Layout for Rosters: 480px and below. */

#rosterContainer table, thead, tbody, th, td, tr, caption {
	display: block;
}
#rosterContainer thead tr {
	display: none;
}

/*
#rosterContainer table tr:nth-of-type(even) {
	background-color: rgba(255, 255, 0, 0.5)
}*/

#rosterContainer td {
	border: none;
	position: relative;
	text-align: center;
	border: thin solid #2e2e2e;
	padding: 0.25em;
	padding-top:2em;
	/*padding-left:6em;*/
}
#rosterContainer td:before {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	background-color:#ccc;
/*	padding-right: 10px;
	white-space: nowrap;*/
}
/*	Label the data	*/
#rosterContainer td:nth-of-type(1):before {
	content: "Seniors & Juniors:";
	font-weight:bold;
}
#rosterContainer td:nth-of-type(2):before {
	content: "Sophomores:";
	font-weight:bold;
}
#rosterContainer td:nth-of-type(3):before {
	content: "Freshmen:";
	font-weight:bold;
}
#rosterContainer td:nth-of-type(4):before {
	content: "6th, 7th & 8th Grade:";
	font-weight:bold;
}





/* TCA:062415 - Mobile Layout for Roster Detail Page: 480px and below. */

#rosterDetailContainer table, thead, tbody, th, td, tr, caption {
	display: block;
}
#rosterDetailContainer thead tr {
	display: none;
}

#rosterDetailContainer img {
	position: absolute;
	top: 0px;
	left: 0px;
}

#rosterDetailContainer td {
	border: none;
	position: relative;
	text-align: left;
	padding: 0.25em;
	padding-left:6em;
	/*padding-left:10em;*/
}

#rosterDetailContainer td.coachInfo {
	padding-left:4em;
}

#rosterDetailContainer td.rosterTitle {
	padding-left:1em;
}

#rosterDetailContainer tr {
	border: thin solid #2e2e2e;
}

#rosterDetailContainer td:before {
/*	position: absolute;
	top: 6px;
	left: 85px;
	width: 45%;
	text-align: left;*/
}


/*	Label the data - exclude head coach info	*/
#rosterDetailContainer td:not(.coachInfo):nth-of-type(1):before {
	content: "";
	padding-top:2em;
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(2):before {
	content: "#: ";
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(3):before {
	content: "Name: ";
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(4):before {
	content: "Grade: ";
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(5):before {
	content: "Position: ";
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(6):before {
	content: "Height: ";
	font-weight:bold;
}
#rosterDetailContainer td:not(.coachInfo):nth-of-type(7):before {
	content: "School: ";
	font-weight:bold;
}






}