@charset "UTF-8";
/* 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%;
  }
}