@charset "UTF-8";

/* seuils retenus :
jusqu'à 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 */

/* --------------------------------------------------------------------
	Téléphones (moins de 480px)
-------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	#prelude, #blogdesc, #supranav span {
		display: none !important;
		}
	h1 {
		font-size: 1.8em;
		}
	h1 a {
		display: block;
		padding: 6px 8px;
		background: #f4f4f5;
		background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f5), to(#d7d7dC));
		background: -moz-linear-gradient(top,  #f4f4f5,  #d7d7dC);
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #ccc;
		}
	#supranav {
		border:none;
		margin: 8px 0 0;
		}
	#supranav li a {
		border-right: 0;
		display: block;
		padding: 4px 8px;
		border-bottom: 1px solid #ccc;
		}
	h2.post-title {
		font-size: 2em;
		}
	#stickers {
		margin: 0;
		padding: 0;
		border-bottom: 8px solid #fff;
		}
	#stickers li {
		position: relative;
		line-height: 2.5em;
		margin-left: 0;
		padding-left: 0;
		border: 2px solid #fff;
		border-left: 6px solid #fff;
		border-right: 6px solid #fff;
		}
	#stickers img {
		display: block;
		position: absolute;
		clip: rect(0px,32px,32px,0px);
		}
	#stickers span {
		margin-left: 40px;
		}
	#stickers a {
		text-decoration: none;
		}
}

/* --------------------------------------------------------------------
	Autres (plus de 480px)
-------------------------------------------------------------------- */

@media only screen and (min-width: 481px) {
	#top {
		padding-top: 24px;
		}
	h1 {
		font-size: 2em;
		padding-right: 240px;
		padding-bottom: 4px;
		margin-left: 32px;
		}
	#supranav {
		margin: 36px 0 0;
		border-bottom: 1px solid #ccc;
		}
	#supranav li {
		display: inline;
		padding: 8px 0;
		}
	#supranav li a {
		display: inline-block;
		padding: 8px 32px 8px 28px;
		border-right: 1px solid #ccc;
	 	}
	#supranav li a span {
		display: block;
		}
	#stickers {
		position: absolute;
		top: 0;
		right: 0;
		padding-right: 3%;
		}
	#stickers li {
		display: inline;
		padding: 0 4px;
		}
	#stickers li.last {
		padding-right: 0;
		}
	#stickers li span {
		display: none;
		}
	h2.post-title {
		font-size: 2.6em;
		}
	#stickers li a:hover,
	#stickers li a:active,
	#stickers li a:focus {
		background-color: #fff;
		border-bottom: 4px solid #ad3f4c;
		}
}

/* ------------------------------------------------------ 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: 100%;
		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-transform: uppercase;
		text-shadow: 0 1px 1px rgba(0,0,0,.2);
		vertical-align: top;
		color: #666;
		}
	#sidebar div#search:first-child p {
		margin: .33em 0;
		}
}

/* ------------------------------------------------------ 
	au-delà de 1280px on décale le post-info à gauche
------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
	#content {
		margin : 0 20em 0 200px;
		}
	p.post-info { 
		margin-left: -200px; 
		float: left; 
		width: 150px; 
		text-align: right;
		}
	.dc-archive-month p.post-info {
		margin-left: 0;
		float:none;
		width: auto;
		text-align: left;
		}
}

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