theme/afterburner/style/afterburner_responsive.css

   1 @media screen and (max-width: 767px) {
   2    /* Custom Menu
   3     -------------------------- */
   4
   5     #custommenu ul {
   6         margin: 0;
   7         padding: 0;
   8         list-style-type: none;
   9         overflow: hidden;
  10     }
  11     #custommenu li {
  12         margin: 0; /** Opera hack **/
  13     }
  14     #custommenu a {
  15         display: block;
  16         color: #fff;
  17         background-color: #888;
  18         width: 98%;
  19         padding: 5px 10px;
  20         text-decoration: none;
  21         border-top: 1px solid #777;
  22         border-bottom: 1px solid #999;
  23         font-weight: bold;
  24     }
  25     #custommenu li li a {
  26         display: block;
  27         color: #fff;
  28         background-color: #34637f;
  29         width: 98%;
  30         padding: 5px 20px;
  31         text-decoration: none;
  32         border-top: 1px solid #477C9B;
  33         border-bottom: 1px solid #295770;
  34         font-weight: normal;
  35     }
  36     #custommenu li li li a {
  37         display: block;
  38         color: #fff;
  39         background-color: #34637f;
  40         width: 98%;
  41         padding: 5px 20px;
  42         text-decoration: none;
  43         border-top: 1px solid #477C9B;
  44         border-bottom: 1px solid #295770;
  45         font-weight: normal;
  46     }
  47     #custommenu a:hover {
  48         background-color: #fff;
  49         color: #036;
  50     }
  51 }
  52
  53 @media screen and (min-width: 768px) and (max-width: 799px) {
  54     /* Page Layout
  55     -------------------------*/
  56     body.has_dock {
  57         margin-left: 3%;
  58         width: 97%;
  59     }
  60     #page-wrapper {
  61         width: 94%;
  62     }
  63     #region-main .region-content {
  64         padding: 0 5px;
  65     }
  66     #region-main-box {
  67         right: 0%;
  68     }
  69     #region-pre-box {
  70         right: 77%;
  71     }
  72     #region-main {
  73         left: 100%;
  74         width: 77%;
  75     }
  76     #region-pre {
  77         left: 0;
  78         width: 23%;
  79     }
  80     #region-post {
  81         left: 0;
  82         width: 23%;
  83     }
  84     #region-post .block .header {
  85         background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
  86         border-bottom: 1px solid #c3d9e1;
  87         color: #50646d;
  88     }
  89     .headermenu {
  90         top: 10px;
  91         right: 10px;
  92     }
  93 }
  94 @media screen and (max-width: 767px) {
  95     /* Page Layout
  96     -------------------------*/
  97     body.has_dock #dock {
  98         display: none;
  99     }
 100     #page-wrapper {
 101         width: 96%;
 102     }
 103     #region-main-box,
 104     .side-pre-only #region-main-box,
 105     .side-post-only #region-main-box {
 106         right: 0;
 107     }
 108     #region-pre-box,
 109     .side-pre-only #region-pre-box,
 110     .side-post-only #region-pre-box {
 111         right: 0;
 112     }
 113     #region-main,
 114     .side-pre-only #region-main,
 115     .side-post-only #region-main {
 116         left: 0;
 117         width: 100%;
 118     }
 119     #region-pre,
 120     .side-pre-only #region-pre,
 121     .side-post-only #region-pre {
 122         left: 0;
 123         width: 100%;
 124     }
 125     #region-post,
 126     .side-pre-only #region-post,
 127     .side-post-only #region-post {
 128         left: 0;
 129         width: 100%;
 130     }
 131     #region-post .block .header {
 132         background:url([[pix:theme|images/light3]]) 0 -136px repeat-x;
 133         border-bottom: 1px solid #c3d9e1;
 134         color:#50646d;
 135     }
 136     #page-header {
 137         height: 100px;
 138         background: #fff;
 139     }
 140     a.logo {
 141         background-size: 75% 75%;
 142     }
 143     .headermenu {
 144         display: none;
 145     }
 146 }
 147 @media screen and (max-width: 320px) {
 148
 149     a.logo {
 150         background-size: 50% 50%;
 151     }
 152
 153 }