@import url(http://fonts.googleapis.com/css?family=Lato);

html{
  /*height: 100%;*/
}


#facebook-holder{
	bottom: 0px;
	position: absolute;
	height: 30%;
	width: 100%;
}

 .shadowed-no-center ul li
{
   position:relative;
   background-color:#b9b9b9;
   padding-left:15px;
   padding-right:15px;
   font-size:20px;
}
.shadowed-no-center ul
{
    list-style-type: none;
    display: table;
    margin:auto;
    margin-left:60%;
    -webkit-box-shadow: -5px -5px 20px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: -5px -5px 20px 2px rgba(0,0,0,0.75);
    box-shadow: -5px -5px 20px 2px rgba(0,0,0,0.75);
    padding:0;
    position:relative;
    margin-top:-50px;
}

.galerie li{
  max-width:230px;
  height:200px;
  margin:0px;
  padding:0px;
  list-style:none;
  float:left;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.galerie a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	width:230px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
  body {
    background-color: #333333;
    /*height: 100%;*/
    margin:0;
  }

  #wrap{
  	/*height: 100%;*/
  	min-width: 100%;
  	
  }


  #mainPage{
  	width: 1228px;
  	height: 100%;
  	margin-left: auto;
  	margin-right: auto;
  	/*box-shadow: 3px 3px 4px #000;*/
  }

  #header{
  	width:100%;
  	height:220px;
  	background-color: #333333;
  	position: relative;
  }

  #greyBar{
  	width:100%;
  	height:50px;
  	background-color: #333333;
  }

  #hmeBar{
  	width:100%;
  	height:75px;
  	background-color: #333333;
  }
  #hmeBarLeft{
  	float:left;
  	width:15%;
  	height:100%;
  	background-color: #333333;
  }

  #hmeBarRight h1{
  	text-indent: 20%;
  	color: #cacbcd;
  	font-family: 'Lato', sans-serif;
  	font-size: 37px;
  }
  .blueLetter{
  	color: #1e275a;
  	font-size: 45px;
  }

  #hmeBarRight{
  	float:left;
  	width:85%;
  	background-color: #2b9acb;
  	height: 100%;
  	position: relative;
  }
  #darkBar{
  	height: 20px;
  	width: 100%;
  	background-color: #333333;
  }

  #menuBar{
  	width:100%;
  	height:75px;
  	background-color: #333333;
  }
  #menuBarLeft{
  	float:left;
  	width:15%;
  	height:100%;
  	background-color: #333333;
  }
  #menuBarRight{
  	float:left;
  	width:85%;
  	background-color: #326c9c;
  	height: 100%;
  }

  #beforeMenu{
    height: 100%;
    width:20%;
    float:left;
  }
  #realMenu{
    height: 100%;
    width:80%;
    float:left;
  }

  .darkSpace{
  	float:right;
  	width:2%;
  	height:100%;
  	background-color: #333333;
  }

  #hmeLogo{
  	height:350px;
  	position: relative;
  	z-index: 10;

  }


  #newsBar{
  	height:200px;
  	background-color: #FF0000;
  	width:100%;
    display:none;
  }
  #allContent{
  	position: relative;
  	height:698px;
  }

  #backgroundImage{
  	left:0;
  	top:0;
  	position: absolute;
  	width:100%;
  }

  #leftContent{
  	width:35%;
  	top:0;
  	left:0;
  	z-index:100;
  	position: relative;
  	margin:0;
  	height:100%;
  	float:left;
  }

  #transparentOverlay{
  	width:100%;
  	z-index:100;
  	background-color: #bbadad;
  	opacity: 0.80;
  	float:right;
  	height:100%;

  }

  #contentHolder{
    width:65%;
    float:right;
    height:100%;
    position:relative;
  }


  #orchesterOverlay
  {
  	float:right;
  	top:20px;
  	right:0px;
  	position:absolute;
  	height:140px;
  	z-index: 10;
  }
  #footer{
  	width:100%;
  	height: 100px;
  	overflow:hidden;
  	text-align:right;
  }

  .menu{
  	left:20%;
  	position: relative;
  }

  #rightContent{
    overflow-y: scroll;
    overflow-x: hidden; 
    height:inherit;
    position: absolute;
    width: 100%;
  }

  #rightContent img{

    max-width: 75%;
    height: auto;
  }

  #realContent{
    padding: 10px;
  }
  #footer-holder{
  	float:left;
  }
  
  table.historique > tbody > tr> td:first-child
	{
	  font-weight:bold;
	  vertical-align:top;
	  width:60px;
	}

  
  
  
  
  @media only screen and (min-width : 880px) and (max-width : 1227px) {
  
  
    #rightContent{
		min-width:100%;
	}
  
  		#mainPage{
  			width:100%;
  		}

  		#contentHolder{
  			top:0;
  			right:0;
  			position:absolute;
  		}

  		#backgroundImage{
  			display: block;
  			position:relative;
  		}

  		#allContent{
  			height:auto;
  		}
  		#leftContent{
  			position: absolute;
  		}


  		#hmeBarRight h1{
  			text-indent: 30%;
  			font-size: 30px;
  		}
	  	#blueLetter{
	  		font-size: 35px;
	 	}

	 	#orchesterOverlay{
	 		visibility: hidden;
	 	}

    #hmeLogo{
      width: 32%;
      height:auto;
    }

  }


  @media only screen and (max-width : 879px) {

    
    #hmeBar{
      height: auto;
      overflow: auto;
      text-align: center;

      
    }
    #hmeBarRight{
      width:100%;
    }

    #hmeBarRight h1{
      margin-right: auto;
      margin-left: auto;
      text-indent: 0px;
    }

    #greyBar{
      height:100%;
    }
    #orchesterOverlay{
      display: none;
    }

    #header{
      width:100%;
      height:100%;
    }
    #mainPage{
        width:100%;
      }
    #hmeLogo{
      display: block;
      height:auto;
      width:100%;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .menu{
      display: block;
      vertical-align: center;
    }
    #menuBarLeft{
      display:none;
      background-color: #326c9c;
    }
    #newsBar{
      display: none;
    }
    #menuBar{
      height:100%;
      overflow:auto;
      background-color: #326c9c;
    }
    #beforeMenu{
      float:right;
    }
    #realMenu{
      float:right;
    }
    #leftContent{
      display:none;
    }
    #transparentOverlay{
      width:100%;
    }
    #backgroundImage{
      height:100%;
      width:auto;
      left:-300px;

    }

    #contentHolder{
      width:100%;
    }
    #rightContent{
      width: 100%;
      height:inherit;
      opacity: 1;
      z-index: 150;
    }

    #imageHolder{
      width:100%;
      height:100%;
      overflow:hidden;
      position:absolute;
    }
    
     .shadowed-no-center ul li
{

   font-size:14px;
}
    
  }