/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

body { text-align: center; background: #FFF url(img/background.png); border-top: 5px solid; }
.page { position: relative; max-width: 90%; margin: 0 auto 2em; text-align: left; background-color: #FFF; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); border-radius: 0 0 30px 30px;}

@media screen and (max-width: 1084px) {
.topbar {height:42px !important;}
.topbar-right {float: left !important;}
.heberg-bloc {margin: 8px !important;padding: 10px !important;}
.wrapper {width: 75% !important;}
.aside {width: 25% !important;}
}
@media screen and (max-width: 895px) {
.header-block2 h1 {padding-top: 0.4em !important;}
.heberg-bloc {height: 150px !important;}
}
@media screen and (max-width: 800px) {
.page {max-width: 100% !important; padding: 0 !important;}
}
@media screen and (max-width: 640px) {
body {border-top: none !important;}
.heberg-box {width: 50% !important;}
.heberg-bloc {width:80% !important;}
.topbar {display: none;}
.intro {width: 100% !important; float: none !important;}
.home-actu {width: 100% !important; float: none !important;}
.home-side {padding: 0 20px 0 10px; width: 95% !important; float: none !important;}
.menu {padding: 0 12px 0 10px;}
.menu_breves {padding: 0 12px 0 10px !important;}
.migration {margin: 0 -8px 1em 0 !important;}
}

.header {}
.main { padding: 1.5em 0; }
.footer { clear: both; padding: 1em 0 0; border-top: 1px solid; }

.home-actu {clear: both; float:left; width: 68%;}
.home-side {float: left; width: 32%;}
.wrapper { clear: both; float: left; width: 80%; overflow: hidden; }
.wrapper2 { clear: both; width: 100%; overflow: hidden; }
.content { min-height: 350px; /*float: left;*/ padding: 0 16px 0 10px; }
.aside { float: left; width: 20%; overflow: hidden; }


/* Entete et barre de navigation
------------------------------------------ */
.topbar {
	height: 30px;
	padding: 0.4em 0.6em 0.2em;
	background-color: #CCC;
	width 100%;
	font-size: 0.9em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.topbar-left {
	float: left;
	margin-top: 3px;
}
.topbar-right {
	float: right;
}
.topbar ul li {
	display: inline-block;
}
.topbar ul li a {
  padding: 0px 2px;
}
.topbar .left li {
	padding: 4px 0 0 8px;
}
#login-ouvadmin label{
	display: inline-block;
}

.top-box {
    height: 1em;
    margin-bottom: 0;
    background: transparent url("../img/main_top.png") no-repeat scroll left top / 100% 100%;
}

.header {border-bottom: 1px solid; }
.header #logo { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header #slogan { margin: 0; }
#header-block {
	float: left;
	width: 25%;
	text-align: center;
	height: 80px;
	line-height: 80px;
}
.header-block1 h1 {
	border-top: solid 8px #F99500;
	-webkit-transition: border .2s ease-in;
	-moz-transition: border .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: border .2s ease-in;
	vertical-align: middle;
}
.header-block2 h1 {
	border-top: solid 8px #004F9B;
	-webkit-transition: border .2s ease-in;
	-moz-transition: border .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: border .2s ease-in;
	padding-top: 1em;
}
.header-block3 h1 {
	border-top: solid 8px #5AA120;
	-webkit-transition: border .2s ease-in;
	-moz-transition: border .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: border .2s ease-in;
	padding-top: 1em;
}
.header-block4 h1 {
	border-top: solid 8px #BB000B;
	-webkit-transition: border .2s ease-in;
	-moz-transition: border .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: border .2s ease-in;
	padding-top: 1em;
}
.header-block1 h1:hover {
	border-top: solid 14px #F99500;
	text-decoration: underline;
}
.header-block2 h1:hover {
	border-top: solid 14px #004F9B;
	text-decoration: underline;
}
.header-block3 h1:hover {
	border-top: solid 14px #5AA120;
	text-decoration: underline;
}
.header-block4 h1:hover {
	border-top: solid 14px #BB000B;
	text-decoration: underline;
}
.intro {
	width: 33%;
	 float: left;
}
.intro_box {
    background-color: #E9E9E9;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 8px;
    margin: 0 10px 20px;
    padding: 18px 0 2px;
}
.intro p {
	padding: 0 12px;
	text-align: justify;
}
.actu {padding: 2px 12px;}
.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.april {
	text-align: center;
}
.april a {
	display: inline-block;
	margin: 0 2em;
}

.nav { border: solid #222; border-width: 1px 0; }
.nav ul {}
.nav ul li {}
.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
.nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { background: #222; color: #FFF; }

.footer .colophon { float: left; height: 60px; width: 70%; margin: 0; padding:0 12px; }
.footer .generator { float: right; padding-right: 12px; }
.footer .generator a { padding: 0; background: none; }

/*
 *  TARIFS */
.tarifs {
	background-color: #E9E9E9;
	border-radius: 10px;
	box-shadow: 0 0 8px;
	margin: 3.3em 2em 3em 0;
	padding: 18px 18px 2px;
}

/*
 *  MIGRATION */
.migration {
	background-color: #E9E9E9;
	border-radius: 10px;
	box-shadow: 0 0 8px;
	margin: 0 10px;
	padding: 18px 18px 2px;
	clear: both;
}

/* Rubriques principales
------------------------------------------ */
.heberg-box {
	float: left;
	width: 25%;
}
.heberg-bloc {
	height: 100px;
	margin: 11px;
	padding: 12px;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 0 10px;
	background-color: #E9E9E9;
}
.heberg-bloc:hover {
	background-color: #DDD;
}
.heberg-box a:hover {
	text-decoration: none;
}
.heberg-bloc h2 {
	margin-bottom: 0;
}
.heberg-bloc p {
	margin: 1em 0 0;
	color: #000;
}
/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 640px) {

/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { width: auto !important; margin: auto !important; padding: auto !important; }

.page { margin: 0; padding: 5%; }

/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }

.arbo { display: none; }
.footer .colophon { width: auto; float: none; }
.footer .generator { display: none; }

/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; }

}

/* end */