@font-face { font-family: Libertine; src: url(libertine.ttf);}
body {
	margin: 0;
	padding: 0;
	background: url('images/background.jpg') center top no-repeat #2e3192;
	background-size: 100%;
}
#header {
	width: 100%;
	height: 40px;
}
#langs {
	width: 70px;
	height: 30px;
	padding: 20px 0 0 0;
	margin: 0;
	color: white;
	font: 11pt "Myriad Pro", Arial, Helvetica, Geneva, sans-serif;
	float: right;
}
#langs a {
	color: white;
	text-decoration: none;
}
#langs a:hover{
	color: #1bf2ff;
}
#music {
	width: 100px;
	height: 36px;
	padding: 14px 0 0 0;
	margin: 0;

	float: right;
}
#music img {
	cursor: pointer;
	width: 25px;
}
#banner {
	width: 100%;
	height: 300px;
	background-color: #2e3192;	
	overflow: hidden;
}
#slideshow {
	overflow: hidden;
	height: 300px;
	width: 4410px;
	margin-left: 0px;
}
#slideshow img {
	height: 100%;
	float: left;
}
#buttons {
	position: absolute;
	width: 100%;
}
#buttons img:first-child {
	margin: 120px 0 0 10px;
}
#buttons img:last-child {
	margin: 120px 10px 0 0;
	float: right;
}
#navbackground {
	width: 100%;
	height: 50px;
	background-color: #2e3192;
}
#container-parent{
	width: 1100px;
	margin: 0 auto;
}
#container {
	width: 1030px;
	min-height: 400px;
	margin: 0 auto;
	margin-top: -50px;
}
/* SIDEMENU*/
#sidemenu {
	width: 260px;
	height: 400px;
	margin-top: -220px;
	float: left;
}
#sidemenutop img {
	margin: 55px 0 0 45px;
	width: 170px;
}
#sidemenutop {
	background: url('images/menutop.png') no-repeat center top;
	height: 240px;
	width: 260px;
}
#sidemenubottom {
	background-color: white;
	border-radius: 0 0 30px 30px;
	height: 270px;
}
#intro {
	width: 90%;
	margin: 0 auto;
	background: url('images/dotted.jpg') no-repeat center top;
	padding: 20px 0 0 0;
}
#intro p {
	margin: 0;
	padding: 20px 10px 0 10px;
	color: #6565b6;
	font: 10pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}
#commander {
	width: 90%;
	height: 80px;
	margin: 0 auto;
	background: url('images/dotted.jpg') no-repeat center bottom;
	padding: 20px 0 0 0;
}
#commander p {
	margin: 0;
	padding: 20px 0 0 55px;
	height: 35px;
	background: url('images/command.jpg') no-repeat 8px 5px;
	
	font: bold 10pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	border: 2px solid #2e3192;
	border-radius: 10px;
}
#commander p a {
	text-decoration: none;
	color: #2e3192;
}
#commander p a:hover {
	color: #1bf2ff;
}
#social {
	width: 90%;
	height: 40px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
#social img {
	width: 35px;
	padding: 0;
	margin: 0 0 0 15px;
	border: 2px solid white;
}
#social img:hover {
	border: 2px solid #2e3192;
	border-radius: 5px;
}

/* MAIN */
#main {
	width: 740px;
	height: 400px;
	float: right;
}
#navigation {
	width: 100%;
	height: 50px;
}
#navigation ul {
	float: left;
	padding: 0;
	margin-top: 7px;
}
#navigation li {
	float: left;
	list-style: none;
	padding: 8px 0;
	margin: 0 3px;
	
	color: white;
	font: 9.5pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	
	background: url('images/list.jpg') no-repeat left 3px;
	padding-left: 35px;
}
#navigation li:first-child {
	background: none;
	padding-left: 10px;
}
#navigation li.actif a {
	color: #1bf2ff;
}
#navigation a {
	text-decoration: none;
	color: white;
}
#navigation a:hover {
	color: #1bf2ff;
}

#bodytext {
	background-color: rgba(255, 255, 255, 0.5);
	width: 680px;
	min-height: 300px;
	float: left;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
	border-radius: 10px;
	
	font: 13pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	color: #2e3192;
}
#bodytext h2 {
	font: "Libertine", Arial, Helvetica, Geneva, sans-serif;
	color: white;
	text-transform: uppercase;
	background: url('images/h2motif.png') no-repeat left top;
	padding: 10px 0 10px 60px ;
}
#bodytext img {
	width: 48.5%;
	border-radius: 10px;	
}
#page1, #page2, #page3, #page5, #page6, #page7, #page8{
	padding: 10px 30Px 30px 30px;
}
#albums img {
	cursor: pointer;
	width: 32%;
}
.images  h3 {
	cursor: pointer;
	font: bold 10pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
}
.images  h3:hover {
	color: white;
}

/* LIGHTBOX*/
#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0, 0, 0, .75);
    text-align:center;
    display: none;
}
#close {
	text-align: right;
	margin: 25px 25px 0 0;
}
#close img {
	cursor: pointer;
}
#photo img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:1200px;
    border-radius: 10px;
    max-height: 700px;
}

/*MENU*/
#menuheader {
	width: 100%;
	height: 216px;
	background: #f5f5f5 url('images/menubackground.png') no-repeat left top;
	background-size: 100%;
}
#ulmenu {
	padding: 0;
	margin: -40px 0 0 70px;
}
#ulmenu li {
	float: left;
	height: 15px;
	list-style: none;
	padding: 8px 10px;
	margin: 0;
	
	color: white;
	font: 10pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	background-color: rgba(67, 69, 170, 0.9);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}
#ulmenu li:first-child {
	border: none;
	border-radius: 10px 0 0 10px;
}
#ulmenu li:nth-child(4) {
	border-radius: 0 10px 10px 0;
}
#ulmenu li a {
	text-decoration: none;
	color: white;
}
#ulmenu li a:hover {
	color: #1bf2ff;
}
#ulmenu li a.actif {
	color: #1bf2ff;
}
#menucontent {
	width: 100%;
	margin: 20px 0 0 0;
	padding: 10px 0Px 30px 0px;
}

table, td, tr {
	padding: 5px;
	font: 9pt "Myriad Pro", Arial, Helvetica, Geneva, sans-serif;
}
td {
	text-align: center;
	width: 20%;
}
td:first-child {
	width: 43%;
	text-align: left;
	padding-left: 20px;
}
td:first-child a, #menu1 tr:first-child td:first-child, #menu3 td, #menu4 tr:last-child td {
	color: #f8cf78;
}
#menu4 td {
	width: 500px;
}


@media (min-width: 100px) and (max-width: 1000px) {
	#bodytext {
		width: 630px;
		margin-left: 5px;
	}
	#navigation li {
		font: 8pt "Libertine", Arial, Helvetica, Geneva, sans-serif;
	}
	#sidemenu {
		margin-top: -180px;
	}
	td:first-child {
		width: 36%;
	}
}