/*stylesheet for Ballina Basketball in Flexbox*/

/*mobiles*/
@media screen and (max-width: 700px) {
	
	* 
	{
		margin: 0px;
		padding: 0px;	
	}
	
	.socialMedia 
	{
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: left;
		background-color: #777;	
		display: flex;
		flex-wrap: wrap;		
	}

	.socialMedai ul
	{
	   height: auto;
	   padding-top: 5px;
	}

	.socialMedia li
	{
	   display: inline;
	   padding: 2px;
	}

	.socialMedia a
	{
	   text-decoration: none;
	   color: #ccc;
	   padding: 15px;   
	}

	#branding
	{
		width: 100%;
		height: 130px;
		background: url(../images/printLogo.gif) no-repeat 65% center;
		background-color: #e6e7e8;		
	}

	#logo
	{
	   padding-right: 10%;
	   padding-left: 10px;
	   padding-top: 10px;
	}

	.burger-nav {
		display: block;
		height: 40px;
		width: 100%;
		background: url(../buttons/burgerRain.png) no-repeat 95% center;
		background-color: #000;
		cursor: pointer;	
	}
	
	header .wrapper {
		padding: 0;
		font-family: Arial, Helvetica, sans-serif, Verdana;	
	}
		
	header nav ul {
		overflow: hidden;
		background: #777;
		height: 0;
	}
	
	header nav ul.open {
		height: auto;
		width: 100%;		
	}
	
	header nav ul li {
		float: none;
		text-align: left;	
		width: 100%;
		margin: 0;
	}
	
	header nav ul li a {
		text-decoration: none;
		color: #fff;
		padding: 10px;	
		border-bottom: 1px solid #56ceef;
		display: block;
		margin: 0;
	}
	
	#container: {
		color: #336699;	
	}		

	#mainContentRegisterForm {
	}
}

@media screen and (min-width: 700px) {	

	#wholepage {
	   background-color: #56ceef;
	   width: 100%;
	}

	#container {
	   width: 970px;
	   min-width: 200px;
	   padding: 0px;
	   margin-left: auto;
	   margin-right: auto;
	   margin-top: 0px;
	   margin-bottom: 0px;
	   background-color: #fff;
	   color: #336699;
	}
	
	#footer {
		display: flex;
	}
}	

	.socialMedia
	{
		display: block;
		width: 100%;
		background-color: #777;
		display: flex;
		flex-flow: row wrap;
	}

	.socialMedia ul
	{
	   height: auto;
	}

	.socialMedia li
	{
	   display: inline;
	   padding: 5px;
	}

	.socialMedia a
	{
	   text-decoration: none;
	   color: #ccc;
	   padding: 5px;  
	}

	#branding
	{
		width: 100%;
		height: 130px;
		background: url(../images/headerLogo.gif) no-repeat 75% center;	
		background-color: #e6e7e8;
	}

	#logo
	{
	   padding-right: 10%;
	   padding-top: 10px;
	}

	header .menu
	{
	   width: 100%;
	   height: 40px;
	   font-size: 15px;
	   font-family: Arial, Helvetica, sans-serif, Verdana;
	   text-align: left;
	   background-color: #000;
	}

	header ul
	{
	   float: left;
	   height: auto;
	   padding: 0px 0px;
	   margin: 0px;
	}

	header li
	{
	   display: inline;
	   padding: 5px 0px;
	}

	header li a 
	{
	   display: inline-block;
	   color: #fff;
	   padding: 10px 6px;
	   text-decoration: none;
	   font-family: Arial, Helvetica, sans-serif, Verdana;
	   font-size: 110%;
	}

	header a
	{
	   text-decoration: none;
	   color: #ccc;
	   padding: 0px;
	}

	header li a:hover
	{
	   background-color: #e6e7e8;
	   color: #000;
	}

#mainContent
{
   font-family: Arial, Helvetica, sans-serif, Verdana;
   width: 100%;
   display: flex;
}

#mainContentRegisterForm {
	width: 300px;
	margin: auto;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

.loginRegister {
	width: 300px;
	background-color: #56ceef;
	color: #336699;
	padding-top: 5px;
	padding-bottom: 5px;
}

#form-login {	
}

#footer
{
   clear: both;
   background-color: #000;
   color: #fff;
   font-family: Arial, Helvetica, sans-serif, Verdana;   
   padding: 10px 0px 10px 0px;
}

#footerLeftContent
{ 
	box-sizing: border-box;
	flex-basis: 50%;
}

#footerRightContent
{
	box-sizing: border-box;
	flex-basis: 50%;
	padding-left: 20px
}

#logoWave {
	padding-top: 10px;
	padding-left: 50px;
}

#footer a
{
	color: #fff;
}

a
{
   color: #427194;
   text-decoration: none;  
} 

h1, h5
{
   font-family: Arial, Helvetica, sans-serif, Verdana;
   text-align: left;
}
h2
{
   font-family: Arial, Helvetica, sans-serif, Verdana;
   text-decoration: underline;
   text-align: center;
}

p, dl
{
   font-family: Arial, Helvetica, sans-serif, Verdana;
   text-align: left;
   font-weight: 500;
}