/*  2011 * Fabien Lelu         */
/*  http://www.fabienlelu.fr   */

/* RESET */
body										{ border:0; margin:0; padding:0; color:#777777; font-family:Arial, sans-serif; font-size:11px; background:#fbfbfb; /*background:url("/medias/images/touches-de-peinture01.jpg");*/ }
img											{ border:0; outline:none; }
h1, h2, h3, h4, p							{ margin:0; padding:0; border:0; }
a											{ outline:none; text-decoration:underline; color:#777777; }
a:hover										{ outline:none; text-decoration:underline; color:#1eff00; }

/* HEADER */
#header										{ position:fixed; z-index:2; top:0; left:0; width:100%; height:58px; background:#000000; -moz-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -o-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); }
#header img									{ margin:15px 0 15px 25px; }
#langue										{ float:right; margin-right:20px; }

/*CONTENU */
#contenu									{ position:absolute; z-index:1; top:0; left:0; margin:73px 0 65px 13px; }

/* MÉDIAS */
#contenu .media								{ float:left; margin:10px; }
#contenu .bloc								{ width:310px; padding:20px; background:#FFFFFF; /*color:#FFFFFF;*/ }
#contenu p.media							{ float:left; margin:10px; width:310px; padding:20px; background:#FFFFFF; /*color:#FFFFFF;*/ }
#contenu .media p.mediaLegende				{ width:350px; padding:5px 0 5px 0; }

#contenu .jeu								{ margin:0 auto; }

/* BOÎTE */
#contenu .boite								{ float:left; padding:20px; margin:10px; background:#000000; font-family:Courier, "Courier New", monospace; }
#contenu .boite img							{ }
#contenu .boite p							{ padding:0; margin-top:5px; }
#contenu .boite .onglet-jeu					{ position:absolute; top:0; right:0; }

/* PLAN DU SITE */
#plan										{ position:relative; z-index:1; margin:75px 0 60px 22px; }
#plan a										{ text-decoration:none; }
#plan h1									{ font-size:18px; margin:10px 0 0 0; }
#plan p										{ font-size:12px; }

/* FOOTER */
#footer										{ position:fixed; z-index:3; bottom:0; left:0; clear:both; width:100%; height:35px; background:#000000; -moz-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -o-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); }
#footer p									{ padding:10px 0 10px 20px; color:#FFFFFF; }
#footer p a									{ text-decoration:none; color:#FFFFFF; }
#footer p a:hover							{ text-decoration:none; color:#1eff00; }

/* CONTACT */
#contact									{ display:none; position:fixed; z-index:2; bottom:35px; left:0; clear:both; width:100%; height:240px; background:#676767;  -moz-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -o-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); }
#contact form								{ float:left; margin:0 60px 0 0; }
#contact input								{ margin:20px 15px 20px 20px; width:180px; color:#777777; font-family:Arial, sans-serif; font-size:11px; }
#contact input.submit						{ width:80px; color:#000000; font-family:Arial, sans-serif; font-size:11px; }
#contact textarea							{ margin:0 0 0 20px; width:465px; height:110px; color:#777777; font-family:Arial, sans-serif; font-size:11px; }
#contact p									{ float:left; margin-top:20px; padding-left:60px; width:200px; height:195px; border-left:1px solid #5c5c5c; color:#FFFFFF; }
#contact p a								{ color:#FFFFFF; }
#contact p a:hover							{ color:#1eff00; }
#fermer_contact								{ float:right; margin:20px 20px 0 0; cursor:pointer; }


*/ CREDIT */
#credits									{ display:none; position:fixed; z-index:2; bottom:35px; left:0; clear:both; width:100%; height:50px; background:#676767;  -moz-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); -o-box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); box-shadow:0 1px 5px 1px rgba(0, 0, 0, 0.5); }

/* MASONRY */
.masonry,
.masonry .masonry-brick						{ -webkit-transition-duration: 0.7s; -moz-transition-duration: 0.7s; -o-transition-duration: 0.7s; transition-duration: 0.7s; }
.masonry									{ -webkit-transition-property: height, width; -moz-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.masonry .masonry-brick						{ -webkit-transition-property: left, right, top; -moz-transition-property: left, right, top; -o-transition-property: left, right, top; transition-property: left, right, top; }