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

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

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

body { text-align: center; background-image: url(img/background_page.png); margin: auto; width: 98%; min-width: 200px; max-width: 1260px; }
.page { position: relative; margin: 2em auto 3em auto; padding: 2%; text-align: left;  background-image: url(img/background.png); border: 8px solid #00F;
border-radius: 0.6em; 
-moz-border-radius: 0.6em;
-webkit-border-radius: 0.6em;
box-shadow: 0px 0px 5px 4px #656565;
-moz-box-shadow: 0px 0px 5px 4px #656565;
-webkit-box-shadow: 0px 0px 5px 4px #656565;
-o-box-shadow: 0px 0px 5px 4px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=5);
}

.body_white_back { background: #FFF; }

.header {}
.main { padding: 1.5em 0; }
.footer { background: #FFF; clear: both; padding: 1.5em 0 0; padding: 1em; border-radius: 0.4em; box-shadow: 0px 0px 5px 1px #cfcfcf; -moz-box-shadow: 0px 0px 5px 1px #cfcfcf; -webkit-box-shadow: 0px 0px 5px 1px #cfcfcf; -o-box-shadow: 0px 0px 5px 1px #cfcfcf;
}

.wrapper { float: right; width: 72.5%; overflow: hidden; background: #FFF; padding: 1em; border-radius: 0.4em; margin-bottom: 1.6em; 
-moz-box-shadow: 0px 0px 5px 1px #cfcfcf;
-webkit-box-shadow: 0px 0px 5px 1px #cfcfcf;
-o-box-shadow: 0px 0px 5px 1px #cfcfcf;
box-shadow: 0px 0px 5px 1px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=5);
}

.content_sommaire { min-height: 350px; padding-left: 3%; width: 97%; }
.content { min-height: 350px; padding-left: 3%; width: 74%; }


.aside { float: left; width: 22.5%; }

.aside_bloc_content:hover { background: #F6F6F6; }

.aside_bloc_content { margin-bottom: 1em; 
background: #FFF; padding: 1em; border-radius: 0.4em; 
box-shadow: 0px 0px 5px 1px #cfcfcf;
-moz-box-shadow: 0px 0px 5px 1px #cfcfcf;
-webkit-box-shadow: 0px 0px 5px 1px #cfcfcf;
-o-box-shadow: 0px 0px 5px 1px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=5);
}
/* Entete et barre de navigation
------------------------------------------ */

.header { padding-bottom: 1.5em; padding-right: 30%; }
.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; }

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

.nav { border-radius: 0.4em; padding: 0 1.2em 0 0.4em; 
-moz-box-shadow: 0px 0px 5px 1px #cfcfcf;
-webkit-box-shadow: 0px 0px 5px 1px #cfcfcf;
-o-box-shadow: 0px 0px 5px 1px #cfcfcf;
box-shadow: 0px 0px 5px 1px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=5);
border-top: solid 4px #0000FF; 
}
.nav ul {}
.nav ul li {}
.nav ul li a { float: left; display: block; padding: 1.2em 0.6em 0.6em 0.6em; border-right: 1px solid #666; text-decoration: none; color: #FFF; font-size: 1.4em; }
.nav ul li.on a { color: #FFF; font-weight: normal; background: #0000FF; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { color: #FFF;
background: #0000FF;
transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
}

#formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }

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

/* 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; }
#formulaire_recherche { display: none; position: static; text-align: center; }
.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; }

}

/* Styles supplémentaires
------------------------------------------ */
.date_comments {float: left; width: 45px; margin-right: 1em; text-align: center; }
.date_bloc { }
.date_name { color: #FFF; padding: 0.2em; }
.date_number { font-size: 1.4em; font-style: italic; color: #FFF; padding: 0.2em; border-radius: 0 0 0.25em 0.25em; }
.nb_comments { font-size: 1.2em; color: #FFF; width: 45px; height: 32px; background: url(img/back_nb_comments.png) top center no-repeat; padding-top: 4px; margin-top: 0.6em; }

._introduction {padding-left: 5.2em; font-size: 0.8em; display: block; text-align: justify; }

.article_text { text-align: justify; display: block; }

.left_bloc_title { font-size: 1em; font-weight: bold; text-transform: uppercase; padding-top: 0.5em; margin-bottom: 1em; border-top: solid 4px #0000FF; background: url(img/back_left_title.png); }
p.small_text { font-size: 0.75em; line-height: 1.3em; margin-bottom: 1em; border-left: 4px solid #DCDCDC; padding-left: 0.5em; display: block; }
p.small_text:hover { font-size: 0.75em; line-height: 1.3em; margin-bottom: 1em; border-left: 4px solid #0000FF; padding-left: 0.5em; display: block; }
.small_text_2 { font-size: 0.75em; line-height: 1.3em; margin-bottom: 1em; display: block; }

.date_line { font-size: 0.7em; border-bottom: solid 1px #CCC; }

.bloc_article_left { width: 520px; float: left; padding-left: 50px; }


._border-radius { border-radius: 0.3em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; -o-border-radius: 0.3em; }

.comments_global_header { background: #0000FF; font-size: 1.5em; color: #FFF; padding: 0.4em; margin: 1.5em 0 1em 0; }
.total_comments { padding: 0 0.4em; }
.mess_forum { padding: 0.2em 0.4em; }
.text_comment { width: 404px; float: right; text-align: justify; }

.bar_tags { background: #F1F1F1; height: 20px; font-size: 0.75em; margin: 12px 20px 0 60px; }
.bar_tags2 { background: #F1F1F1; height: 20px; font-size: 0.75em; margin: 0.8em 0 0 0; }

.tags_title { background: url(img/back_tags.png) no-repeat center right; height: 20px; padding: 4px 10px 3px 10px; width: 40px; font-weight: bold; text-transform: uppercase; }



.agrandir_logo { position: center center; z-index: 90; }

.gradient_blue {
background: #0000FF;
background: -moz-linear-gradient(top, #0000FF 0%, #007efc 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0000FF), color-stop(100%,#007efc));
background: -webkit-linear-gradient(top, #0000FF 0%,#007efc 100%); 
background: -o-linear-gradient(top, #0000FF 0%,#007efc 100%); 
background: -ms-linear-gradient(top, #0000FF 0%,#007efc 100%); 
background: linear-gradient(to bottom, #0000ff 0%,#007efc 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#007efc',GradientType=0 ); 
}

.gradient_black { 
background: #000; 
background: -moz-linear-gradient(top, #131313 0%, #666666 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#131313), color-stop(100%,#666666)); 
background: -webkit-linear-gradient(top, #131313 0%,#666666 100%);
background: -o-linear-gradient(top, #131313 0%,#666666 100%);
background: -ms-linear-gradient(top, #131313 0%,#666666 100%); 
background: linear-gradient(to bottom, #131313 0%,#666666 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#666666',GradientType=0 ); 
}



/* end */