@charset "UTF-8";
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Ductile, a theme for Dotclear
#
# Copyright (c) 2011 - Association Dotclear
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK ----------------------------------------- */

/* seuils retenus :
< 480px: tout en une colonne, sidebar et stickers en bas
> 480px: stickers en haut
> 640px: sidebar toujours en bas mais divisé en deux colonnes
> 1024px: passage à deux colonnes, sidebar à droite
> 1280px: décalage du post-info vers la gauche
> 1600px: marges plus grandes */

/* --------------------------------------------------------------------
	Moins de 480px (téléphones)
-------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.nosmall { display: none !important; }

	h1 { font-size: 1em; color: #fff; }
	h1 a { display: block; padding: 6px 8px;margin-bottom: 60px; background: #f4f4f5; background-image: -webkit-gradient(linear, left top, left bottom, from( #f4f4f5), to(#d7d7dC)); background: -webkit-linear-gradient(top,  #f4f4f5,  #d7d7dC); background: -moz-linear-gradient(top,  #f4f4f5,  #d7d7dC); background: -o-linear-gradient(top,  #f4f4f5,  #d7d7dC); background: -ms-linear-gradient(top,  #f4f4f5,  #d7d7dC); background: linear-gradient(top,  #f4f4f5,  #d7d7dC); border-right: 1px solid #aaa; border-bottom: 1px solid #ccc; }
	.supranav, #prelude { border: none; margin: 8px 0 0; background: #fff; padding-left: 0; }
	.supranav li a, #prelude li a { border-right: 0; display: block; padding: 4px 8px; border-bottom: 1px solid #ccc; text-decoration: none; white-space: nowrap; margin-bottom: 4px; }	
	#img-top{	background: url(img/logo_jemattarde.jpg) no-repeat top center; }
	#top {	height: 72px;	padding-top: 24px;	}	
	#gotop li { border-top: 1px solid #ccc; text-transform: none; padding-top: 2px; }
	#prelude { margin: .5em 0 !important; }
	#prelude li a { color: #333; background: transparent url(img/menumobile.png) no-repeat right center;  }
	#sn-bottom li a {  color: #333; background: transparent url(img/menumobile.png) no-repeat right top; }
	#prelude li a:hover,
	#sn-bottom li a:hover,  
	#gotop li a:hover{ color: #2d5918; }	
	#gotop li a { background: transparent url(img/menumobile.png) no-repeat right -150px; }
	.post-title { font-size: 1.5em; font-weight: bold; font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; }
	.post-title a { font-style: normal; font-weight: bold; }
	#other-criteria .arch-block, #more-criteria .arch-block { margin-left: 0 !important; }
	#stickers { margin: 0; padding: 0; border-bottom: 1px solid #fff; }
	#stickers li { position: relative; padding: .5em 0; margin-left: 0; border-style: solid; border-width: 1px 0 0 0; overflow: hidden; }
	#stickers img { position: absolute; top: -2px; clip: rect(0 38px 36px 0); clip: rect(0, 38px, 36px, 0); }
	#stickers span { margin-left: 40px; }
	#stickers a { text-decoration: none; }
	ul, ol, dd { padding: 0; }
	.post ul, .post ol, .post dd { margin-left: 1em !important; }
	div.profil_content { padding-top: 245px; }
	ul.profils li {	float:left;	}	
}

/* --------------------------------------------------------------------
	Autres (plus de 480px)
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) {
	.nobig {		display: none;		}
	#img-top{	background: url(img/logo_lesAttardes.png) no-repeat top center;	}	
	#prelude { position: absolute;		margin: 0;		padding: 0 0 0 4px;		top: 0; left: 3px; color: #fff; list-style-type: none; }
	#prelude li { display: inline; text-transform: none !important; }
	#prelude a, #prelude a:hover, #prelude a:visited { position:absolute; left:0; top:-500px; width:1px; height:1px; overflow:hidden; background-image: none !important; }
	#prelude a:active, #prelude a:focus { position:static; width:auto; height:auto; }
	#top {	    height: 185px; padding-top: 24px; }
 	#logo { float: left;  margin: -24px 32px 0 24px;	 }
	#logo a { border: none; background: transparent; text-decoration: none; }
	h1 { color: #000; font-size: 1.5em; padding-right: 240px; padding-bottom: 4px; margin-left: 32px; }
	#sn-bottom { display: none; }
	#menu { margin: 0 0 -6px 0; }
	.supranav { margin: 36px 0 0 0; padding: 0 0 0 4px; }
	.supranav li { display: inline; padding: 0; padding-left: 4px; }
	.supranav li a { color: #7d1619; display: inline-block; vertical-align: top; padding: 2px 32px 2px 28px;min-height: 2.5em;
		border-radius: 5px 5px 0px 0px; border-top: 2px solid #7d1619;  border-left: 2px solid #7d1619;  border-right: 2px solid #7d1619; 	 	}
	.supranav li a:hover, 	.supranav li a:focus { color: #000; border-bottom: 2px solid #FFF; background: #FFF; text-decoration : none; } 
	.supranav li.active a { color: #000; border-top: 2px solid #7d1619;  border-left: 2px solid #7d1619;  border-right: 2px solid #7d1619;   border-bottom: 2px solid #FFF;   background: #FFF; }	
	.supranav li a span { display: block;	}
	.post-title { font-size: 2em; font-weight: normal; }
	.post-title a { font-weight: normal; }
	#blogcustom { padding: 0 1em; }
	#stickers { position: absolute; top: 0; right: 0; padding-right: 3%; font-size: .75em; }
	#stickers li { display: block; float: left; text-align: center; width: 60px; padding: 0; }
	#stickers span { display: block; text-align: center; position: absolute; top: -500px; }
	#stickers a:hover, #stickers a:focus { background: #322B2B !important; }
	#stickers a:hover span, #stickers a:focus span { color: #FAF0E6; position: static; top: 0; }
	.comment-info {  clear: left; float: left; width: 10em; }
	.comment-content { margin-left: 11.5em; }
	div.profil_content { padding-top: 130px; }


}

/* ------------------------------------------------------ special redimensionnement paysage */
@media screen and (max-width:640px) and (orientation: landscape) { 
  body {    -webkit-text-size-adjust: 70%;   } 
}

/* ------------------------------------------------------ règles communes < 640px */
@media only screen and (max-width:639px) {
	body { -webkit-text-size-adjust: none; }
	#wrapper { padding: 0 2%; }
	img { max-width: 97%; height: auto; width: auto\9; /* pour ie8 */ }
	
}

/* ------------------------------------------------------ spécifique 640px à 1024px */
@media only screen and (min-width: 640px) and (max-width: 1023px) {
	#wrapper { padding: 0 10%; }
	#blognav, #blogextra {  width: 48%; float:left; }
	#blognav { margin-right: 4%; }
	#stickers { padding-right: 10%; }
	
}

/* ------------------------------------------------------ spécifique 840px à 1024px */
@media only screen and (min-width: 840px) and (max-width: 1023px) {
	#wrapper { padding: 0 13%; }
	#stickers { padding-right: 13%; }	
}

/* ------------------------------------------------------ 
	au-delà de 1024px on passe à deux colonnes
------------------------------------------------------ */
@media only screen and (min-width: 1024px) {
	#wrapper { padding: 0 7%; }
	#main { width : 100%; margin : 0 -17em 0 0; float : left; display: inline; }
	#content { margin : 0 20em 0 0; padding : 0 0 2em 0; }
	#sidebar { width : 17em; float : right; }
	#blognav, #blogextra { margin : 0; }
	#stickers { padding-right: 7%; }
	#sidebar #blognav div:first-child { margin-top: 4.66em; }
	#sidebar div#search:first-child {  background: none; margin-top: 0; margin-bottom: 2em; padding-bottom: 2px; font-size: 1em; border: 1px solid #ddd; border-top: none 0; }
	#sidebar div#search:first-child h2 { font-size: 1em; text-shadow: 0 1px 1px rgba(0,0,0,.2); vertical-align: top; color: #333; }
	#sidebar div#search:first-child p { margin: .33em 0; }
	.dc-archive #content { margin: 0 17em 0 0; }
}

/* ------------------------------------------------------ 
	au-delà de 1280px on décale le post-info à gauche
------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
	#content { margin : 0 20em 0 220px; }
	.full .post-attr,
	.simple .post-attr { margin-left: -220px; margin-top: 0;  float: left;  width: 180px;  text-align: right; }
	.post-attr a, .post-info, .post-tags { padding-right: 0 !important; }
	#content-info, .navlinks, .pagination { margin-left: -220px !important; }
	.dc-archive #content-info { margin-left: 0 !important; }
	#content-info a.feed {  white-space: nowrap; }	
}

/* ------------------------------------------------------ au-delà de 1600px */
@media only screen and (min-width: 1600px) {
	#wrapper { padding: 0 10%; }
	#stickers { padding-right: 10%; }
}