/*
  JAUNE:  #FFA31E;
  BLEU:   #007E8B;
*/

/* GENERAL 
**************************************************************************************************************/


body {
	font-family: Verdana, sans;
	background: url(../img/bg.png) center top no-repeat fixed;
}

/* STRUCTURE */

#wrapper {
	width: 928px;
	margin: 0 auto;
}

#footer {
  display:none;
}


/* EN-TETE
**************************************************************************************************************/
#header {
  background: url(../img/header-bg.png) no-repeat white;
  height: 165px;
  width: 928px;
  float: left;
  position: fixed;
  top:0;
  z-index: 100;
  margin: 0px 0 0px 1px;
  -webkit-transition: 0.5s all ease;
  -moz-transition: 0.5s all ease;
  -ms-transition: 0.5s all ease;
  -o-transition: 0.5s all ease;
  transition: 1s all ease;
  
}

#header.shadow {
  box-shadow: 0 4px 4px -5px gray;
}

#header h1 {
	display: none;
}

#header #b-home {
	display: block;
	width: 180px;
	height: 100px;
	text-indent: -9999px;
	float: left;
}

#lang-bar {
	float: left;
	margin: 24px 0 0 30px;
	font-size: 12px;
    color:#8C8887;
}

#lang-bar a {
	padding: 0 5px;
	color: #8C8887;
	text-decoration: none;
}

#toolbar {
	float:right;
	text-align: right;
	font-size: 12px;
	color:white;
	margin: 24px 0 0 20px;
	text-transform: uppercase;

}

#toolbar li {
	margin: 0 0 4px 0;
}

#toolbar a {
	color:white;
	text-decoration: none;
}

#toolbar a:hover {
	text-decoration: underline;
}


#sidebar.desktop {
  position:fixed;
	left: calc(50vw + 460px);
  top:0px;
	font-size:      12px;
	color:          white;
	margin:         24px 0 0 20px;
	text-transform: uppercase;
	}

#sidebar i {
	font-size: 150%;
	margin-bottom: .5em;
	}

#sidebar li {
	margin: 0 0 4px 0;
	}

#sidebar a {
	color:white;
	text-decoration: none;
	}

#sidebar a:hover {
	text-decoration: underline;
	}

#sidebar.mobile {
	display: none;
	}


#contacts #t-contacts,
#presse #t-presse,
#liens #t-liens,
#login #t-login {
	font-weight: bold;
}

.f #btn-f,
.d #btn-d,
.e #btn-e
 {
	font-weight: bold;
	color:#5E5958;
}

/* MENU
**************************************************************************************************************/
#nav {
	float: left;
	width: 100%;
	margin: -11px 0 0px 0px;
	height: 57px;

/* 	display: none; */
}

.f #nav {	background: url(../img/menu-fr-off.png) no-repeat 88px 0;  }
.d #nav {	background: url(../img/menu-de-off.png) no-repeat 88px 0;  }
.e #nav {	background: url(../img/menu-en-off.png) no-repeat 88px 0;  }

#nav a {
  text-decoration: none;
	color:#333;
}

#nav>li>a {
  height: 30px;
  width: 100%;
  display: block;
  margin: 20px 0 0 -10px;
}

#nav a span { display:none;}



#nav li {
	height: 58px;
	font-size: 12px;
	padding: 0 0px 0 20px;
  display:block;
  float:left;

  position:relative;
  margin:0 0px 0 0;

  cursor: pointer;

}

#nav  li.drop:hover ul {
    display:block;
    z-index:1;
    padding-bottom:0px;
}

#nav  li ul {
    display:none;
    position:absolute;
    width: 350px;
    top:20px;
    left:0;
    list-style-type:none;
    margin:0;
    padding:0px 0 0 0;
    

}


#nav  li.drop:hover ul {
    display:block;
    z-index:1;
    padding-bottom:8px;
    
}

#nav  li ul {
    display:none;
    position:absolute;
    width: 150px;
    top:58px;
    left:0;
    list-style-type:none;
    margin:0 0 0 0px;;
    padding:0px 0 0 0px;
    background:rgba(255,255,255,.8);

}

#nav #m-agenda ul {
	width: 250px;
}


#nav  li ul li {

    float:none;
    height: auto;
    margin:2px 0;
    padding:4px;
    border:none;
    color:white;
    text-decoration: none;
    font-size: 12px;
}




#m-musee{
    display: block;
    float: left;
    left:88px;
		height: 48px;
		width: 50px;

}



#m-expositions {
		left:  87px;
		height: 48px;
		width: 108px;
    display: block;
    float: left;

}

#m-agenda {
    display: block;
    float: left;
		left:  87px;
		height: 48px;
		width: 66px;
}

#m-collections {
    display: block;
    float: left;
		left:  87px;
		height: 48px;
		width: 86px;
}

#m-infos_pratiques {
    display: block;
    float: left;
		left:  87px;
		height: 48px;
		width: 176px;
}

#m-accueil_publics{
    display: block;
    float: left;
		left:  87px;
		height: 48px;
		width: 150px;
}

#m-amis{
    display: block;
    float: left;
		left:  87px;
		height: 48px;
		width: 56px;
}



/* IMAGES D'EN-TÈTE
**************************************************************************************************************/
div.header-image {
	margin: 0 0 30px 0;
	height: 280px;
	overflow: hidden;
	float: left;
	width: 800px;
/*	border: 1px dotted red;*/
}

img.header-image {
	margin-top: -12%;
}

#infos_pratiques.acces img.header-image {
  margin-top: -19%;
}

div.header-image.small {
	height: 120px;
}

img.header-image.small {
	margin-top: 0;
}


/* CONTENU
**************************************************************************************************************/

hr {
	height: 3px;
	border:0;
	background: silver;
}

#content {
	width: 928px;

	background: white;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0 0 0 1px;
	float: left;
}

#content>.gutter {
	padding: 0 100px 50px 20px;
	margin: 220px 0px 0px 0px;
	float: left;

}

#content a.link {
	font-weight: bold;
/* 	color:#007E8B; */
  color:#FFA31E;
  font-size:10px;
}

.right {
	float:right;
}

.left {
	float: left;
}

#content .gutter{
float: left;
}

/* TEMPLATES
**************************************************************************************************************/

#one-col {
	width:490px;
	margin: 0 0 0 280px;
	float: left;
}

#left-col {
	width:130px;
	float: left;
	margin: 0;
 	padding: 42px 0 0 0;
 	line-height: 1.4em;
}

#right-col {
	width:490px;
	margin: 0 0 0 150px;
	float: left;
}

#right-col .gutter {
	width: 390px;
}

.header-info {
display:none;
}

#left-col.vertical-header {
	width:130px;
	float: left;
	margin: 0 0 0 5px;
 	padding: 0 0 0 0;
}

#right-col.vertical-header  {
	width:500px;
	margin: 0 0 0 150px;
	float: left;
	padding: 40px 0 0 0;
}

#right-col.vertical-header .gutter {
	width: 500px;
}

#left-col.expo-list {
	width:230px;
	float: left;
	margin: 0 0 0 0px;
 	padding: 0 0 0 0;
}

#right-col.expo-list  {
	width:500px;
	margin: 0 0 0 50px;
	float: left;
	padding: 0px 0 0 0;
}

#liens #left, #liens #right {
	width: 400px;
	float:left;
}

/* ACCUEIL
**************************************************************************************************************/
#accueil #content .gutter {
	padding: 0 120px 50px 20px;
	}

#le-saviez-vous {
	margin: 40px 0 0 0;
	float: left;
	width: 420px;
}

#le-saviez-vous h4 {
		color: rgb(0,103,117);
}

#accueil-splash {
	width: 900px;
}


#home-image {
	max-width: 800px;
}

#actualite h3 {
	width: 380px;
	float:left;
  text-align: right;
  padding: 10px 20px 0 0;
  margin: 0;
}

#actualite div {
	float:left;
  margin: 20px 0 0 0;
	padding: 10px 30px 10px;
/* 	border: 2px solid rgb(191,213,214); */
	background: #f8f8f8;
	width: 340px
}

#actualite .link.right {
	float:right;
	margin-top: -24px;
}

/* ACTIVITES
**************************************************************************************************************/
.act-item {
	border-top: 3px solid silver;
	width: 100%;
	margin:     10px 0 0 0;
	height:     100%;
	padding: 1em 0;
	}

.act-item img {
	width: 100%;
	}

/* AGENDA
**************************************************************************************************************/
.agenda-item {
	border-top: 3px solid silver;
	width:100%;
	float: left;
	margin: 10px 0 0 0;
	height: 100%;
  -webkit-transition: 1s all ease;
  -moz-transition: 0.5s height ease;
  -ms-transition: 0.5s height ease;
  -o-transition: 0.5s height ease;
  transition: 0.5s height ease;
}

.agenda-item.closed {
	height: 124px;
	overflow: hidden;
}

#content .agenda-item span.link {
	float: right;
	color:#FFA31E;
	margin: 14px 0 0 0;
	cursor: pointer;
	font-size: 11px;
}

.agenda-item .left-col {
	width: 230px;
	float:left;
	margin: 0 30px 0 0;
	font-size: 10px;
}

.agenda-item .right-col {
	width: 548px;
	float:left;
}

.agenda-item h2 {
	text-transform: uppercase;
  padding: 14px 0 0 0;
}

	.agenda-item h3	 {
  margin: 0;
  padding: 0px 0 0 0;
}

.agenda-item img {
  padding:0px 0 10px 0;
	width: 548px;
}

.agenda-item .date{
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.1em;
	margin: 0 0 12px 0;
}

.agenda-item .heures {
	margin: 0 0 12px 0;
}

h3.archives {
	float: left;
	padding: 84px 0 0 0;
}

/* COLLECTIONS
**************************************************************************************************************/
#collections #content .gutter {
	padding-right: 0;
}

.collections {
	width: 100%;
	float: left;
	margin: 0 0 30px 0;
}

.collection-item {
  display: block;
	width: 100px;
	margin: 0 10px 0 0;
	float:left;
  line-height: 1.3em
}
.collection-item img {
	margin: 0 0 8px 0;
	width: 90px;
}

.collection-item.even {
	padding-top: 40px;
}

.collection-item.hidden {
/* 	display: none; */
}

span.link {
	font-weight: bold;
	color:#FFA31E;
  padding: 0 4px 0 4px;
  font-size:11px
}

/* EXPOSITIONS
**************************************************************************************************************/

.expositions-item {
	float: left;
	margin-bottom: 40px;
}

.exposition-header {
	padding: 50px 30px;
	background: #f0f0f0;
	width: 750px;
	margin: 120px 0 140px 0;
}
.expositions-item .titre {
	font-size:24px;
	color:#007E8B;
  font-weight: bold;
  text-transform: uppercase;
  width: 220px;
  margin: 0 0 18px 400px;
  line-height: 1.2em;
}

.expositions-item .soustitre {
	font-size:16px;
	color:#007E8B;
  font-weight: normal;
  margin: 0 0 18px 400px;
  line-height: 1.2em;
}

.expositions-item .dates {
	font-size:14px;
	color:black;
  font-weight: normal;
  margin: 0 0 18px 400px;
  line-height: 1.2em;
}

.expositions-item .affiche img{
	width: 340px;
	float: left;
	  box-shadow: 5px 5px 10px silver;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
  margin: 0 0 0 50px;

}

#left-col.expo-list a.sel {
	font-size: 120%;
	font-weight: bold;
}

/* Expos précédentes */

.expositions-item.small {
	background: #f0f0f0;
  width: 500px;
  float: left;
  padding: 20px 10px;
}

.expositions-item.small .affiche img{
	width: 200px;
	float: left;
	  box-shadow: 5px 5px 10px silver;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
  margin: 0 0 0 0px;

}

.expositions-item.small .exposition-header {

	width: 100%;
	padding: 0;
	float: left;
	width: 250px;
	height: 200px;
	margin: 00px 0 0 20px;;
}

.expositions-item.small .titre,
.expositions-item.small .soustitre,
.expositions-item.small .dates {
margin: 0 0 12px 0;

}

.expositions-item.small .texte {
  padding: 20px 0 0 0;
	width: 100%;
	float: left;
}

/* Mise en page expo permanante */
#expositions.en_permanence #left-col {
	line-height: 2.2em;
	margin: 50px 0 0 0;
}

#expositions.en_permanence.e #left-col {
	font-size: 12px;
}

#expositions.en_permanence #left-col {
  padding-top:10px;
  width: 230px;
}

#expositions.en_permanence #right-col {
	width:490px;
	margin: 0 0 0 50px;
	float: left;
}

.expositions-item.no-img .titre {
	width: 400px;
;
}

.expositions-item.no-img .exposition-header {
	height: auto;
	padding-left:0;
	margin-left:0
}

/* AMIS
**************************************************************************************************************/
.form {
	width: 100%;
	float: left;
	width:490px;
	margin: 0 0 0 280px;
	float: left;
}

.form label {
	display: block;
	font-weight: bold;
	color:#007E8B;line-height
}

#oError {
	background: maroon;
	color:white;
	font-weight: bold;
	padding: 10px;
	width: 100%;
	text-align: center;
}

.form input {
	border: 1px solid #007E8B;
}

.oErrorMessage {
	color:maroon;
	font-style: italic;
	display: block;
}

.form input.oInputError {
	border: 1px solid maroon;
}

/* BOUTIQUE
**************************************************************************************************************/
.articles {
	width: 820px
}

.articles th {
	padding: 0 20px 0 0;
	margin: 0;
	width: 230px;
	text-align: left;
}

.articles tr {
	border-top: 3px solid silver;
	width:100%;
	float: left;
}


/* DIVERS
**************************************************************************************************************/
.legende {
	font-size: 10px;
	font-style: italic;
	color:#555;
	text-align: right;
	float: left;
	width: 100%;
	color: gray;
	padding: 2px 0 0 0;

}

#two-cols-container .legende {
	width: 648px;
	margin-top: -30px;
}

/* LOGIN
**************************************************************************************************************/
#frmLogin {
	width: 300px;
	padding: 50px 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
  background: #f0f0f0;
  margin: 100px 260px;
  text-align: center;
  float: none;
}

.download {
	width: 100%;
}

.error {
	color:maroon;
	margin: 0 0 12px 0;
	font-weight: bold;
}

/* LIENS
**************************************************************************************************************/
#liens #content a {
	color:black;
}

#liens #content a:hover {
	text-decoration: underline;
}

/* PRESSE
**************************************************************************************************************/
#left-col.presse-list {
  padding-top:10px;
  width: 230px;
}

#left-col.presse-list a.sel {
	font-size: 120%;
	font-weight: bold;
}

#right-col.presse-list {
	width:490px;
	margin: 0 0 0 50px;
	float: left;
}

#presse .form {
	margin-left: 0;
	padding-left: 0;
}