git.maemo.org Git - apps-fullscreen/blob - www/assets/css/skeleton/stylesheets/skeleton.css

   1 /*
   2 * Skeleton V1.1
   3 * Copyright 2011, Dave Gamache
   4 * www.getskeleton.com
   5 * Free to use under the MIT license.
   6 * http://www.opensource.org/licenses/mit-license.php
   7 * 8/17/2011
   8 */
   9
  10
  11 /* Table of Contents
  12 ==================================================
  13     #Base 960 Grid
  14     #Tablet (Portrait)
  15     #Mobile (Portrait)
  16     #Mobile (Landscape)
  17     #Clearing */
  18
  19
  20
  21 /* #Base 960 Grid
  22 ================================================== */
  23
  24     .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
  25     .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
  26     .row                                        { margin-bottom: 20px; }
  27
  28     /* Nested Column Classes */
  29     .column.alpha, .columns.alpha               { margin-left: 0; }
  30     .column.omega, .columns.omega               { margin-right: 0; }
  31
  32     /* Base Grid */
  33     .container .one.column                      { width: 40px;  }
  34     .container .two.columns                     { width: 100px; }
  35     .container .three.columns                   { width: 160px; }
  36     .container .four.columns                    { width: 220px; }
  37     .container .five.columns                    { width: 280px; }
  38     .container .six.columns                     { width: 340px; }
  39     .container .seven.columns                   { width: 400px; }
  40     .container .eight.columns                   { width: 460px; }
  41     .container .nine.columns                    { width: 520px; }
  42     .container .ten.columns                     { width: 580px; }
  43     .container .eleven.columns                  { width: 640px; }
  44     .container .twelve.columns                  { width: 700px; }
  45     .container .thirteen.columns                { width: 760px; }
  46     .container .fourteen.columns                { width: 820px; }
  47     .container .fifteen.columns                 { width: 880px; }
  48     .container .sixteen.columns                 { width: 940px; }
  49
  50     .container .one-third.column                { width: 300px; }
  51     .container .two-thirds.column               { width: 620px; }
  52
  53     /* Offsets */
  54     .container .offset-by-one                   { padding-left: 60px;  }
  55     .container .offset-by-two                   { padding-left: 120px; }
  56     .container .offset-by-three                 { padding-left: 180px; }
  57     .container .offset-by-four                  { padding-left: 240px; }
  58     .container .offset-by-five                  { padding-left: 300px; }
  59     .container .offset-by-six                   { padding-left: 360px; }
  60     .container .offset-by-seven                 { padding-left: 420px; }
  61     .container .offset-by-eight                 { padding-left: 480px; }
  62     .container .offset-by-nine                  { padding-left: 540px; }
  63     .container .offset-by-ten                   { padding-left: 600px; }
  64     .container .offset-by-eleven                { padding-left: 660px; }
  65     .container .offset-by-twelve                { padding-left: 720px; }
  66     .container .offset-by-thirteen              { padding-left: 780px; }
  67     .container .offset-by-fourteen              { padding-left: 840px; }
  68     .container .offset-by-fifteen               { padding-left: 900px; }
  69
  70
  71
  72 /* #Tablet (Portrait)
  73 ================================================== */
  74
  75     /* Note: Design for a width of 768px */
  76
  77     @media only screen and (min-width: 768px) and (max-width: 959px) {
  78         .container                                  { width: 768px; }
  79         .container .column,
  80         .container .columns                         { margin-left: 10px; margin-right: 10px;  }
  81         .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
  82         .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
  83
  84         .container .one.column                      { width: 28px; }
  85         .container .two.columns                     { width: 76px; }
  86         .container .three.columns                   { width: 124px; }
  87         .container .four.columns                    { width: 172px; }
  88         .container .five.columns                    { width: 220px; }
  89         .container .six.columns                     { width: 268px; }
  90         .container .seven.columns                   { width: 316px; }
  91         .container .eight.columns                   { width: 364px; }
  92         .container .nine.columns                    { width: 412px; }
  93         .container .ten.columns                     { width: 460px; }
  94         .container .eleven.columns                  { width: 508px; }
  95         .container .twelve.columns                  { width: 556px; }
  96         .container .thirteen.columns                { width: 604px; }
  97         .container .fourteen.columns                { width: 652px; }
  98         .container .fifteen.columns                 { width: 700px; }
  99         .container .sixteen.columns                 { width: 748px; }
 100
 101         .container .one-third.column                { width: 236px; }
 102         .container .two-thirds.column               { width: 492px; }
 103
 104         /* Offsets */
 105         .container .offset-by-one                   { padding-left: 48px; }
 106         .container .offset-by-two                   { padding-left: 96px; }
 107         .container .offset-by-three                 { padding-left: 144px; }
 108         .container .offset-by-four                  { padding-left: 192px; }
 109         .container .offset-by-five                  { padding-left: 240px; }
 110         .container .offset-by-six                   { padding-left: 288px; }
 111         .container .offset-by-seven                 { padding-left: 336px; }
 112         .container .offset-by-eight                 { padding-left: 348px; }
 113         .container .offset-by-nine                  { padding-left: 432px; }
 114         .container .offset-by-ten                   { padding-left: 480px; }
 115         .container .offset-by-eleven                { padding-left: 528px; }
 116         .container .offset-by-twelve                { padding-left: 576px; }
 117         .container .offset-by-thirteen              { padding-left: 624px; }
 118         .container .offset-by-fourteen              { padding-left: 672px; }
 119         .container .offset-by-fifteen               { padding-left: 720px; }
 120     }
 121
 122
 123 /*  #Mobile (Portrait)
 124 ================================================== */
 125
 126     /* Note: Design for a width of 320px */
 127
 128     @media only screen and (max-width: 767px) {
 129         .container { width: 300px; }
 130         .columns, .column { margin: 0; }
 131
 132         .container .one.column,
 133         .container .two.columns,
 134         .container .three.columns,
 135         .container .four.columns,
 136         .container .five.columns,
 137         .container .six.columns,
 138         .container .seven.columns,
 139         .container .eight.columns,
 140         .container .nine.columns,
 141         .container .ten.columns,
 142         .container .eleven.columns,
 143         .container .twelve.columns,
 144         .container .thirteen.columns,
 145         .container .fourteen.columns,
 146         .container .fifteen.columns,
 147         .container .sixteen.columns,
 148         .container .one-third.column,
 149         .container .two-thirds.column  { width: 300px; }
 150
 151         /* Offsets */
 152         .container .offset-by-one,
 153         .container .offset-by-two,
 154         .container .offset-by-three,
 155         .container .offset-by-four,
 156         .container .offset-by-five,
 157         .container .offset-by-six,
 158         .container .offset-by-seven,
 159         .container .offset-by-eight,
 160         .container .offset-by-nine,
 161         .container .offset-by-ten,
 162         .container .offset-by-eleven,
 163         .container .offset-by-twelve,
 164         .container .offset-by-thirteen,
 165         .container .offset-by-fourteen,
 166         .container .offset-by-fifteen { padding-left: 0; }
 167
 168     }
 169
 170
 171 /* #Mobile (Landscape)
 172 ================================================== */
 173
 174     /* Note: Design for a width of 480px */
 175
 176     @media only screen and (min-width: 480px) and (max-width: 767px) {
 177         .container { width: 420px; }
 178         .columns, .column { margin: 0; }
 179
 180         .container .one.column,
 181         .container .two.columns,
 182         .container .three.columns,
 183         .container .four.columns,
 184         .container .five.columns,
 185         .container .six.columns,
 186         .container .seven.columns,
 187         .container .eight.columns,
 188         .container .nine.columns,
 189         .container .ten.columns,
 190         .container .eleven.columns,
 191         .container .twelve.columns,
 192         .container .thirteen.columns,
 193         .container .fourteen.columns,
 194         .container .fifteen.columns,
 195         .container .sixteen.columns,
 196         .container .one-third.column,
 197         .container .two-thirds.column { width: 420px; }
 198     }
 199
 200
 201 /* #Clearing
 202 ================================================== */
 203
 204     /* Self Clearing Goodness */
 205     .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
 206
 207     /* Use clearfix class on parent to clear nested columns,
 208     or wrap each row of columns in a <div class="row"> */
 209     .clearfix:before,
 210     .clearfix:after,
 211     .row:before,
 212     .row:after {
 213       content: '\0020';
 214       display: block;
 215       overflow: hidden;
 216       visibility: hidden;
 217       width: 0;
 218       height: 0; }
 219     .row:after,
 220     .clearfix:after {
 221       clear: both; }
 222     .row,
 223     .clearfix {
 224       zoom: 1; }
 225
 226     /* You can also use a <br class="clear" /> to clear columns */
 227     .clear {
 228       clear: both;
 229       display: block;
 230       overflow: hidden;
 231       visibility: hidden;
 232       width: 0;
 233       height: 0;
 234     }
 235
 236