@charset "UTF-8";
/* -- BEGIN LICENSE BLOCK ---------------------------------------
# This file is part of Ductile Focus, a theme for Dotclear
#
# Copyright (c) 2011 - Kozlika & Franck Paul
# 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 importants : 480px, 640px, 760px, 1060px, 1600px */

/* --------------------------------------------------------------------
	Moins de 480px (téléphones)
-------------------------------------------------------------------- */
@media only screen and (max-width:480px) {
	.nosmall {
		display: none !important;
		}
	h1 {
		font-size: 1.8em;
		}
	h1 a {
		display: block;
		padding: 6px 8px;
		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;
		}
	#gotop li {
		border-top: 1px solid #ccc;
		text-transform: none;
		padding-top: 6px;
		}
	#prelude {
		margin: .5em 0 !important;
		}
	#prelude li a {
		background: transparent url(img/menumobile.png) no-repeat right center;
		 }
	#sn-bottom li a {
		background: transparent url(img/menumobile.png) no-repeat right top;
		}
	#gotop li a {
		background: transparent url(img/menumobile.png) no-repeat right -150px;
		}
	#content-info h2 {
		font-size: 1.25em;
		margin-top: 0;
		}
	#other-criteria .arch-block, #more-criteria .arch-block {
		margin-left: 0 !important;
		}
	.post-title a {
		font-style: normal;
		}
	#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 32px 36px 0);
		clip: rect(0, 32px, 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;
		}
	#blognav > div, #blogextra > div {
		margin-bottom: .5em;
		}
}

/* --------------------------------------------------------------------
	Autres (plus de 480px)
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) {
	.nobig {
		display: none;
		}
	#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 {
		padding-top: 24px;
		}
 	#logo {
		float:left; 
		margin: 0 32px 0 24px;	
		}
	#logo a {
		border: none;
		background: transparent;
		text-decoration: none;
		}
	h1 {
		font-size: 2em;
		padding-right: 240px;
		padding-bottom: 4px;
		margin-left: 32px;
		}
	#sn-bottom {
		display: none;
		}
	.supranav {
		margin: 36px 0 0;
		border-bottom: 1px solid #ccc;
		padding: 0 0 0 4px;
		}
	.supranav li {
		display: inline;
		padding: 8px 0;
		}
	.supranav li a {
		display: inline-block;
		vertical-align: top;
		padding: 8px 32px 8px 28px;
		border-right: 1px solid #ccc;
		min-height: 2.5em;
		border-radius: 0 0 0 7px;
	 	}
	.supranav li a span {
		display: block;
		}
	.simple .post-title, #content-info h2, .focus1 .post-title {
		font-size: 2.33em;
		}
	#stickers {
		position: absolute;
		top: 0;
		right: 0;
		padding-right: 2em;
		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: #fff !important;
		}
	#stickers a:hover span, #stickers a:focus span {
		color: #686867;
		position: static;
		top: 0;
		}
	.navlinks a, 
	.pagination a {
		padding: 0 1em;
		white-space: nowrap;
		color: #333;
		}
	.navlinks.topnl {
		position: absolute;
		text-align: center;
		top: 0;
		right: 0;
		width : 236px;
		margin-right: 2.2em;
		background: #f2f2ff;
		border-radius: 0 0 12px 12px;
		}
	.topnl a {
		padding: 0;
		}
	.focus1 .post-title,
	.simple .post-title {
		font-size: 2.33em;
		}
	.focus1 .photo .post-title {
		font-size: 1.33em;
		}
}

/* --------------------------------------------------------------------
	Moins de 640px
-------------------------------------------------------------------- */
@media only screen and (max-width:640px) {
	body {
		-webkit-text-size-adjust: none;
		}
	#searchform, #breadcrumb {
		float: none !important;
		margin: 1em 0 !important;
		}
	#wrapper {
		padding: 3%;
		}
	img {
		max-width: 97%;
		height: auto;
		width: auto\9; /* pour ie8 */
		}
	.focus3 img {
		max-width: none;
		}
	.photo .post-title, .focus3 {
		clear: both;
		}
	.photo .focus1-icon {
		float: none;
		display: inline-block;
		text-align: center;
		max-width: 100%;
		margin-right: 0 !important;
		}	
	.post:before, .post:after {
		content: "";
		display: table;
		}
	.post:after {
		clear:both;
		}
}

/* ------------------------------------------------------ règles communes > 640px */
@media only screen and (min-width:641px) {
	#wrapper {
		padding: 1em;
		border-top: 1px solid #ccc;
		}
	.photo .focus1-icon {
		display: inline-block;
		text-align: center;
		max-width: 100%;
		margin-bottom: .33em;
		}
	.photo .post-title {
		margin-top: .5em !important;
		}
	.photo.focus1 img {
		max-width: 98%;
		}
	.post:before, .post:after {
		content: "";
		display: table;
		}
	.post:after {
		clear:both;
		}
	.comment-info { 
		clear: left;
		float: left;
		width: 10em;
		}
	.comment-content {
		margin-left: 11.5em;
		}
}

/* ------------------------------------------------------ 768px à 1060px */
@media only screen and (min-width:768px) and (max-width: 1060px) {
	#wrapper {
		padding: 2em 8em;
		}
	.dc-home #wrapper {
		padding: 2em;
		}
	.focus1 {
		width: 61%;
		float: left;
		min-height: 430px;
		}
	.focus2 { 	
		width: 28%;
		float: left;
		margin-left : 4%;
		}
	.focus3 {
		clear:both;
		}
	.post.short {
		width: 47%;
		padding: 0 1.2% 0 0;
		margin: 0 1.2% 3em 0;
		border-right: 1px solid #bbb;
		}
	.post.short:nth-child(2n) {
  	border-right: none;
		}
	#blognav > div, #blogextra > div {
		width: 300px;
		display: inline-block;
		vertical-align: top;
		margin-right: 20px;
		margin-bottom: 2em;
		}
	#blognav {
		float: left;
		}
	#blognav h2, #blogextra h2 {
		margin-top: 0;
		}
}

/* ------------------------------------------------------ règles communes > 1060px */
@media only screen and (min-width: 1061px) {
	#wrapper {
		padding: 2em;
		}
	#main, #main-focus {
		width : 100%;
		margin : 0 -260px 0 0;
		float : left;
		display: inline;
		}
	#content, #content-focus {
		margin : 0 260px 0 0;
		padding : 0 0 2em 0;
		}
	.focus1 {
		width: 61%;
		float: left;
		min-height: 430px;
		}
	.focus2 { 
		width: 29%;
		float: left;
		margin-left : 4%;
		}
	.focus3, #sidebar {
		width : 236px;
		float : right;
		}
	#blognav > div, #blogextra div {
		margin-top: 2em;
		margin-bottom: 2em !important;
		}
	.categories h2 {
		display: none;
		}
	.dc-post #content, .dc-page #content {
		padding-right: 4em;
		padding-left: 4em;
		}
	.post.short {
		width: 30%;
		padding: 0 1.3% 0 0;
		margin: 0 1.3% 3em 0;
		border-right: 1px solid #bbb;
		}
	.post.short:nth-child(3n) {
  	border-right: none;
		}
}

/* ------------------------------------------------------ au-delà de 1280px */
@media only screen and (min-width: 1280px) {
	.simple .post-content, .simple .post-excerpt,
	#comments > ul, #comment-form fieldset, #ping-url p {
		margin-left: 260px !important;
		}
	#comments ul ul {
		margin-left: 0;
		}
	.simple .post-attr {
		width: 234px;
		float: left;
		padding-top: .5em;
		}
}

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

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