/* Base CSS */
/* Mobile Phone, Computer (small browser window) */

.headerContainer {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:relative;
	margin: 0 auto;
	padding:10px 0 0 0;
	width: 100%;
	text-align: center;
}

#btnAbilityMenu {
	display:block;
	position:absolute;
	left:0;
	top:0;
	z-index:350;
}

#btnAbilityMenu img {
	width:45px;
	height:45px;	
}

.abilityLogo {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:relative;
	z-index:310;
	width:285px;
	height:137px;
	margin: 0;
	padding: 0 0 0 45px;
	vertical-align: bottom;
	text-align:center;
}

.abilityLogo img {
	width:240px;
	height:137px;
}

#abilityMenu {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:absolute;
	left:0;
	top:73px;
	z-index:320;
	margin: 0 auto;
	padding: 0 5px 0 5px;
	text-align:center;
	width:250px;
	vertical-align:bottom;
	background-color:#E4F1FE;
}

.abilityMenuSection {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	margin: 0;
	padding: 0;
	text-align:center;
}

.abilityMenuItem {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:relative;
	margin: 0px 0 6px 0;
	width:240px;
	height:45px;
	cursor: pointer;
	padding: 0;
	line-height:45px;
	text-align:center;
	background-color:#97CC52;
	color:#7F3F98;
	font-size:1.15em;
	font-weight:bold;
}

.abilityMenuItem span {
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:middle;
	line-height: normal;
}

.abilityMenuOpen
{

	-webkit-transform:translateX(0);
	-webkit-transition:transform 0.7s;
	
	-ms-transform:translateX(0);
	-ms-transition:transform 0.7s;
	
	transform:translateX(0);
	transition:transform 0.7s;
}

.abilityMenuClose
{
	
	
	-webkit-transform:translateX(-100%);
	-webkit-transition:transform 0.7s;
	
	-ms-transform:translateX(-100%);
	-ms-transition:transform 0.7s;
	
	transform:translateX(-100%);
	transition:transform 0.7s;
}

.abilityMenuDefault
{
	-webkit-transform:translateX(-100%);
	-ms-transform:translateX(-100%);
	transform:translateX(-100%);
}

/* Mobile Phone, Computer (small browser window) - transition from flesh with menu button (base CSS above) to being centered in screen. */
/* Don't put max-width media query, these settings should propagate to media queries below */
@media only screen and (min-width: 337px) {
	.abilityLogo {		
		width:240px;
		height:137px;
		margin: 0px auto 5px auto;
		padding: 0;
	}
	
	.abilityLogo img {
		width:240px;
		height:137px;
	}
}

/* Minimum Tablet Portrait, Minimum Tablet Landscape, Computer (medium to large browser window) */
@media only screen and (min-width: 600px) and (max-width: 1011px) and (orientation: portrait),(min-width: 900px) and (max-width: 1011px) and (orientation: landscape), (min-device-width: 1000px) and (min-width: 600px) and (max-width: 1011px) {

	#btnAbilityMenu {
		display:none;
	}
	
	#abilityMenu {
		display:inline;
		position:relative;
		left:0;
		top:0;
		padding: 0;
	}
	
	.abilityMenuItem {
		display:inline-block;
		margin: 2px;
		height:45px;
		line-height:45px;
	}

	.abilityLogo {		
		width:240px;
		margin: 0px auto 5px auto;
		padding: 0;
	}
	
	.abilityMenuOpen
	{
		-webkit-transform:none;
		-webkit-transition:none;
		
		-ms-transform:none;
		-ms-transition:none;
	
		transform:none;
		transition:none;
	}
	
	.abilityMenuClose
	{
		-webkit-transform:none;
		-webkit-transition:none;
		
		-ms-transform:none;
		-ms-transition:none;
		
		transform:none;
		transition:none;
	}
	
	.abilityMenuDefault
	{
		
		-webkit-transform:none;
		-ms-transform:none;
		transform:none;
	}
	

}

/* Small Tablet */
@media only screen and (min-width: 600px) and (max-width: 766px) {
	
	.abilityMenuItem {
		width:162px;
	}
	
}

@media only screen and (min-width: 767px) and (max-width: 1011px) and (orientation: portrait), (min-device-width: 1000px) and (min-width: 767px) and (max-width: 1011px) {
	.abilityMenuItem {
		width:118px;
	}
}

@media only screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) and (max-device-width: 999px) {
	.abilityMenuItem {
		width:240px;
	}
}


/* Medium Tablet Width and up, Computer (medium-large browser window and up) */
@media only screen and (max-width: 766px) {

.abilityMenuSection {
	display:block;
}

}


/* Medium Tablet Width and up, Computer (medium-large browser window and up) */
@media only screen and (min-width: 767px) {
#abilityMenu {
	white-space: nowrap;
}

.abilityMenuSection {
	display:inline-block;
}

}


/* Large Tablet (likely in landscape), Computer (large browser window) */

@media only screen and (min-width: 1012px) {
	
	
	.headerContainer {
		margin: 0 auto 2px auto;
	}

	#btnAbilityMenu {
		display:none;
	}
	
	#abilityMenu {
		display:inline;
		position:relative;
		left:0;
		top:0;
		padding: 0;
	}
	
	.abilityMenuItem {
		display:inline-block;
		margin: 0 3px 0 3px;
		width:115px;
		height:72px;
		line-height:72px;
	}
	
	.abilityLogo {		
		display:inline-block;
		width:240px;
		margin: 0 24px 0 0;
		padding: 0;
	}
	
	.abilityMenuOpen
	{
		-webkit-transform:none;
		-webkit-transition:none;
		
		-ms-transform:none;
		-ms-transition:none;
	
		transform:none;
		transition:none;
	}
	
	.abilityMenuClose
	{
		-webkit-transform:none;
		-webkit-transition:none;
		
		-ms-transform:none;
		-ms-transition:none;
		
		transform:none;
		transition:none;
	}
	
	.abilityMenuDefault
	{
		
		-webkit-transform:none;
		-ms-transform:none;
		transform:none;
	}

}