/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic);

html {	
  font-size: 16px; /*base font size*/
 
}

* {
  box-sizing: border-box; 
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family:'Noto Sans', Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: #eee;
	color: #000;
	padding: 0;
	margin: 0;
	border: 0;
 }
#main {
  display: flex;
  flex : 1 0 auto; 
   justify-content: center;

 
  
}
#main > article {
  flex: 1 0;  
  background : #fff;
  max-width : 1000px;
   border-radius:15px;
   margin-top : 15px;
   margin-bottom : 15px;
}
  

 
 
}

/* ----- Navigation ----- */
/* Main link attributes  */
a:link {
	font-weight: 500;
	color: #006;
	text-decoration: underline;
	background: inherit;
}
a:visited {
	font-weight: 500;
	color: #303;
	text-decoration: underline;
	background: inherit;
}
a:hover {
	font-weight: 500;
	color: #f00;
	text-decoration: underline;
	background: inherit;
}
a:active {
	font-weight: 500;
	color: #6c0;
	text-decoration: none;
	background: inherit;   
}




nav {
display:flex;
  justify-content: center;
  border-bottom: 3px solid #fc3;
  border-top: 3px solid #fc3;
  background:#fff;
  color:#000;
  padding: 10px 0;
 }
 nav a:link, nav a:visited, nav .chosen {
  flex: 1 0 auto;
  text-align: center;
  background: #360;   /*257*/
  color: #fff;
  margin: 0 5px;
  padding: 5px 0;
  max-width : 150px;
  text-decoration: none;
  
   	box-shadow: 2px 2px 2px 1px #888;
   border-radius:5px;
}
nav a:hover {
  background:#bc0; 
 color: #000;	
 text-decoration: none;
}

nav a.chosen {
  background: #360;
	color: #999;
	cursor: default;
  
}

nav a.space {
margin-left: 40px;
}

#main > aside {
  flex: 0 0 250px;  
  background: #fff;
  border-left: 1px solid #ddd;
  
}
img{
 max-width:100%;
 height:auto;
 }
 
 video{
 max-width:100%;
 height:auto;
 }
 
 img.home{
width:100%;
  max-width:600px;  /*prev 1024*/
  height:auto;
  }
 /* Navigation menu */


hr.red{
border-top : 1px solid #c00;}

 
 
header { 
    display: flex;
   justify-content: center;
	background:  #fff;
	color: #000;
}

footer {
 height: ;
  border-top: 3px solid #fc3;
	background: #cc9;   /*257*/
	color: #000;
  text-align:center;
}
header, footer, article, nav, aside {
  padding: 1em;
}

/* ----- Text Attributes ----- */
/*Font style set in body*/
p {
	color: #333;
	margin: 0;
	padding-bottom: 10px;
	padding-right: 3px;
	text-align: left;
	background: inherit;
	font-size:.875em;
	line-height: 1.4;
  
}

.bgpink{
background-color : mistyrose;}

.bold{
font-weight:700;}

p.open{
font-family:Opens sans, sans-serif;}
.red {
	color: #900;
}

.blue{
color : navy;
}

.green{
color : green;
}
.little {
	font-size: 1em;
	padding-bottom: 5px;
}
h1, h2, h3, h4, h5, h6 {
	font-family:'Noto Sans', 'verdana', Tahoma, Arial, Helvetica, Sans-serif, sans-serif;
	font-style: normal;
	line-height: 1.4;
	margin: 0;
	margin-bottom: 0.5em
}
h1 {
	
	font-size: 1.25em;
	font-weight: 700;
}
h2 {
  font-size: 1.125em;
	font-weight: 700;
}
h3 { 
	font-size: 1em;
	font-weight: 700;
}
h4 {
	font-size: .875em;
	font-weight: 700;
}
h5 {
	font-size: 1.125em;
	font-weight: 700;
	color: #900;
}
h6 {
	font-size: .875em;
	font-weight: 700;
   text-align:center;
}
/* ----- Floats ----- */
.lfloat {
	float: left;
	padding-right: 3px;
	padding-bottom: 3px;
}
.rfloat {
	float: right;
	padding-left: 3px;
	padding-bottom: 3px;
}

.sponsorhome{
border:1px solid #999;
margin-right: 5px;
margin-top:5px;
height:75px;
width : auto;
}

.sponsorindex{
border:1px solid #999;
margin-right: 10px;
margin-top:10px;
}

#blue{
display: flex;
width:98%;
border:3px solid blue;
padding:3px;
margin-top: 10px;
max-width:700px;
border-radius:7px;
}

#yellow{
display: flex;
width:98%;
border:3px solid #fc3;
padding:3px;
margin-top:10px;
max-width:700px;
border-radius:7px;
}

#red{
display:flex;
width:98%;
border:3px solid red;
padding:3px;
margin-top:10px;
max-width:700px;
border-radius:7px;
}
#black{
display:flex;
width:98%;
border:3px solid black;
padding:3px;
margin-top:10px;
max-width:700px;
border-radius:7px;
}


.map{
background-color: #eee;
  margin: 10px;
  padding: 20px;

}



padding-top : 25px;
}









.loginform{
flex:1;
max-width:300px;
 }

#loginpage{
display:flex;
    justify-content: center;
    align-items: center;
     }






.balsform { 

   flex : 1; 
    font-size:1em;

   width: 100%; 
   max-width : 1000px;
   background:#ffd;
   border: 2px solid #900;
   padding: 3px;
}


.balsform fieldset {
   clear: both;
   border-color: #900;
   border-width: 2px;
   border-style: solid;
   
    margin: 0;
}

.balsform label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 8em; 
  
	padding: 0; 
	margin: 0 2px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: left; 
	
}


.balsform fieldset legend {
	font-size:1.2em; 
	
}

.balsform input { 
margin : 2px;
}

#lieu,  #club, #info{ 
   
   width : 95%;
   max-width : 800px;
}

.balsform select { 
   margin-right: 15px;
}

textarea, input {
   font-family: inherit;
   font-size: inherit;
}

.bals{

flex-direction: column;
width : 100%; 
max-width : 600px;

}
.bttn {
font-size : 1em;
padding : 3px 5px;
}

.bttn a{

text-decoration: none;

}


.backdark {
border : 2px solid #c00;
padding : 5px;
margin : 3px; 
}

@media screen and (max-width: 900px) {
  #main {
    
    flex-direction: column;
  }

@media screen and (max-width: 575px) {
  #main {
    
    flex-direction: column;
  }
  
  nav {flex-direction : column;
  flex-wrap: wrap;
  align-content:center;
  
  
  }
  nav a:link, nav a:visited, nav .chosen { 
  width:100%;
   max-width : 200px;
  padding: 5px 10px;
  margin : 5px 0;
    }
  
  #main > aside {
  flex: 0 0 auto ;
  background: #fff;
  border-top: 1px solid #ddd;
}


  #blue, #yellow, #red, #black {
  flex-direction: column;
  } 
}