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

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

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

body { text-align: center; background-color: #aaaaaa;  }
.page { position: relative; width: 960px; margin: 8px auto; padding: 20px 78px 50px 78px; text-align: left; background-color: #E7F9FD; background-image: url(img/background.jpg); background-repeat: repeat-y; background-position: top center; box-shadow: 0 0 5px #606870; }

.header {}
.main { padding: 1.5em 0; background-color: #f2fbfc; box-shadow: 0 2px 5px #606870; }
.footer { clear: both; padding: 1.5em 0 0; border-top: 2px solid #bff0ff; }

.wrapper { clear: both; float: left; width: 100%; overflow: hidden; }
.content { min-height: 350px; padding: 0 1em; }
.aside { float: right; width: 25%; overflow: hidden; }


/* Entete et barre de navigation
------------------------------------------ */

.header { padding-bottom: 1.5em; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #bff0ff; }
.header #logo { display: block; margin: 1.3em 30% 0 0; line-height: 1.0; font-weight: bold; text-align: left; font-size: 2.0em; font-style: italic; }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #001d5d; text-shadow: 0px 0px 1px #FFF; }
.header #slogan { margin: 4px 0 0 0;  text-align: left; font-weight: normal; font-size: 1.0em; line-height: 1.2; text-shadow: 0px 0px 1px #FFF; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.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: #DEE; color: #222; font-weight: normal; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { background: #222; color: #FFF; }

#formulaire_recherche { position: absolute; top: 50px; right: 58px; border: 0; font-size: 88%; }

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




#menulang { position: absolute; top: 32px; right: 58px; border: 0; font-size: 88%; }
#menulang a { padding: 0 0.2em; border-radius: 4px; }
#menulang a.on { background-color: #A24; color: #FFF; }

#antet { position: absolute; top: 1em; left: 78px; width: 85%; line-height: 1; }
.header #logo img.spip_logos { margin: -6px 20px -6px -22px; }
#antet .organization { font-variant: small-caps; letter-spacing: auto; color: #666666; }
.quote { font-size: 78%; line-height: 1; padding-top: 12px; padding-right: 50px; text-align: justify; color: #804046; }
.blockquote { padding: 12px 18%; text-align: justify; color: #804046; }
#antet p { margin: 0; padding: 0; }
.quotemark { font-size: 60pt; display: block; float: left; margin: 28px 8px 10px 0; color: #dc8064; }
.phone { background-image: url(img/icon-phone.png); background-repeat: no-repeat; background-position: left center; padding-left: 12px; }
.page_secteur #content .cartouche h1 { font-style: italic; }

#guidepdf { position: absolute; top: 20px; right: 320px; border: 0; font-size: 88%; }
#guidepdf a { display: block; background-image: url(img/guidepdf.png); background-repeat: no-repeat; background-position: left center; padding-left: 34px; height: 32px; font-weight: bold; }




/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
#menulang { display: none; }
#guidepdf { display: none; }
}

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

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

.page { margin: 0; padding: 4%; background-size: cover; }

/* 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; }
#formulaire_recherche { display: none; right: 0; padding: 0; margin: 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; }



.header #logo { font-size: 1.2em; margin-top: 0; }
.header #slogan { font-size: 0.9em; }
.footer .colophon { font-size: .8em; }
#menulang { display: none; width: auto; top: 48px; left: 0.5em; text-align: left; font-size: 0.8em; }
#antet .organization, #antet .quote, #antet .quotemark { display: none; }
.header #logo img.spip_logos { float: none; margin-bottom: 0;}
#formulaire_recherche #recherche { border-width: 1px; }
#formulaire_recherche input { font-size: 0.8em; }
#formulaire_recherche input[type="submit"] { padding: 0; }
#menulang .menulang_label { display: none; }
#formulaire_recherche label { display: none; }

#guidepdf { position: absolute; top: 140px; right: 0px; border: 0; font-size: 88%; }

}

/* end */