source: themes/ductile/mediaqueries.css @ 355:5b1bbf20bf9e

@charset "UTF-8";

/* seuils retenus :
480px
640px
960px
1280px
----------------- */

@media only screen and (max-width:480px) {
     h1 {
          font-size: 1.8em;
          border: solid 1px #777;
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
          -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
          -o-box-shadow: rgba(0,0,0,.2);
          box-shadow: 0 1px 2px rgba(0,0,0,.2);
          color: #eee;
          background: #555;
          background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
          background: -moz-linear-gradient(top, #777, #555);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#555555'); 
          }
     h1 a {
          padding: 6px 3%;
          color: #fff;
          text-shadow: 0 1px 1px #333;
          }
     h1 a:hover, h1 a:focus {
          background: #686867;
          }
     #prelude, #blogdesc {
          display: none;
          }
     h2.post-title {
          font-size: 2.5em;
          }
     #supranav li {
          display: block !important;
          }
     #supranav li+li {
          border-top: 1px solid #ddd;
          }
     #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: 8px solid #fff;
          border-right: 8px solid #fff;
     }
     #stickers img {
          display: block;
          position: absolute;
          clip: rect(0px,32px,32px,0px);
          }
     #stickers span {
          margin-left: 40px;
          }
     #stickers a {
          text-decoration: none;
          }
}

@media only screen and (min-width: 481px) {
     #top {
          padding-top: 24px;
          }
     h1 {
          font-size: 2em;
          padding-right: 200px;
          }
     h1 a, h1 a:hover, h1 a:focus {
          background-repeat: no-repeat;
          background-position: left top;
          padding-left: 68px;
          background-image: url(img/home-small.png);
          min-height: 44px;
          }
     #stickers {
          position: absolute;
          top: 0;
          right: 0;
          padding-right: 10%;
          }
     #stickers li {
          display: inline;
          padding: 0 4px;
          }
     #stickers li.last {
          padding-right: 0;
          }
     #stickers li span {
          display: none;
          }
     h2.post-title {
          font-size: 2.8em;
          }
     #stickers li a:hover,
     #stickers li a:active,
     #stickers li a:focus {
          background-color: #fff;
          border-bottom: 4px solid #ad3f4c;
     }
}

@media only screen and (max-width:639px) {
     html {
          -webkit-text-size-adjust: none;
          }
     #wrapper {
          padding: 0 3%;
          }
     img {
          max-width: 100%;
          height: auto;
          width: auto\9; /* pour ie8 */
          }
}

@media only screen and (min-width: 640px) and (max-width: 960px) {
     #wrapper {
          padding: 0 10%;
          }
     #blognav, #blogextra { 
          width: 48%; float:left;
          }
     #blognav {
          margin-right: 4%;
     }
     #stickers {
          padding-right: 10%;
          }
}

@media only screen and (min-width: 961px) {
     #wrapper {
          padding: 0 15%;
          }
     #main {
          width : 100%;
          margin : 0 -26% 0 0;
          float : left;
          display: inline;
          }
     #content {
          margin : 0 32% 0 0;
          padding : 10px;
          }
     #footer {
          clear : both;
          text-align:center;
          }
     #sidebar {
          width : 26%;
          float : right;
          margin-top: 4.66em;
          }
     #blognav, #blogextra {
          margin : 0;
          }
     #stickers {
          padding-right: 15%;
          }
}

@media only screen and (min-width: 1280px) {
     #wrapper {
          padding: 0 140px 0 340px;
          }
     .dc-tags #wrapper, .dc-archive-month #wrapper, .dc-404 #wrapper {
          padding: 0 15%;
          }
     p.post-info { 
          margin-left: -200px; 
          float: left; 
          width: 140px; 
          text-align: right;
          }
     .dc-archive-month p.post-info {
          margin-left: 0;
          float:none;
          width: auto;
          text-align: left;
          }
     #stickers {
          padding-right: 140px;
          }
}