root/static/css/960.css

   1
   2 /* Containers
   3 ----------------------------------------------------------------------------------------------------*/
   4 .container_12 {
   5         margin-left: auto;
   6         margin-right: auto;
   7         width: 960px;
   8 }
   9
  10 /* Grid >> Global
  11 ----------------------------------------------------------------------------------------------------*/
  12 .grid_1,
  13 .grid_2,
  14 .grid_3,
  15 .grid_4,
  16 .grid_5,
  17 .grid_6,
  18 .grid_7,
  19 .grid_8,
  20 .grid_9,
  21 .grid_10,
  22 .grid_11,
  23 .grid_12{
  24         display:inline;
  25         float: left;
  26         position: relative;
  27         margin-left: 10px;
  28         margin-right: 10px;
  29 }
  30
  31 /* Grid >> Children (Alpha ~ First, Omega ~ Last)
  32 ----------------------------------------------------------------------------------------------------*/
  33
  34 .alpha {
  35         margin-left: 0;
  36 }
  37
  38 .omega {
  39         margin-right: 0;
  40 }
  41
  42 /* Grid >> 2 Columns
  43 ----------------------------------------------------------------------------------------------------*/
  44     .container_12 .grid_1 {
  45         width:60px;
  46 }
  47     .container_12 .grid_2 {
  48         width:140px;
  49 }
  50     .container_12 .grid_3 {
  51         width:220px;
  52 }
  53     .container_12 .grid_4 {
  54         width:300px;
  55 }
  56     .container_12 .grid_5 {
  57         width:380px;
  58 }
  59     .container_12 .grid_6 {
  60         width:460px;
  61 }
  62     .container_12 .grid_7 {
  63         width:540px;
  64 }
  65     .container_12 .grid_8 {
  66         width:620px;
  67 }
  68     .container_12 .grid_9 {
  69         width:700px;
  70 }
  71     .container_12 .grid_10 {
  72         width:780px;
  73 }
  74     .container_12 .grid_11 {
  75         width:860px;
  76 }
  77     .container_12 .grid_12 {
  78         width:940px;
  79 }
  80
  81
  82
  83
  84 /* Prefix Extra Space >> 2 Columns
  85 ----------------------------------------------------------------------------------------------------*/
  86     .container_12 .prefix_1 {
  87         padding-left:80px;
  88 }
  89     .container_12 .prefix_2 {
  90         padding-left:160px;
  91 }
  92     .container_12 .prefix_3 {
  93         padding-left:240px;
  94 }
  95     .container_12 .prefix_4 {
  96         padding-left:320px;
  97 }
  98     .container_12 .prefix_5 {
  99         padding-left:400px;
 100 }
 101     .container_12 .prefix_6 {
 102         padding-left:480px;
 103 }
 104     .container_12 .prefix_7 {
 105         padding-left:560px;
 106 }
 107     .container_12 .prefix_8 {
 108         padding-left:640px;
 109 }
 110     .container_12 .prefix_9 {
 111         padding-left:720px;
 112 }
 113     .container_12 .prefix_10 {
 114         padding-left:800px;
 115 }
 116     .container_12 .prefix_11 {
 117         padding-left:880px;
 118 }
 119
 120
 121 /* Suffix Extra Space >> 2 Columns
 122 ----------------------------------------------------------------------------------------------------*/
 123     .container_12 .suffix_1 {
 124         padding-right:80px;
 125 }
 126     .container_12 .suffix_2 {
 127         padding-right:160px;
 128 }
 129     .container_12 .suffix_3 {
 130         padding-right:240px;
 131 }
 132     .container_12 .suffix_4 {
 133         padding-right:320px;
 134 }
 135     .container_12 .suffix_5 {
 136         padding-right:400px;
 137 }
 138     .container_12 .suffix_6 {
 139         padding-right:480px;
 140 }
 141     .container_12 .suffix_7 {
 142         padding-right:560px;
 143 }
 144     .container_12 .suffix_8 {
 145         padding-right:640px;
 146 }
 147     .container_12 .suffix_9 {
 148         padding-right:720px;
 149 }
 150     .container_12 .suffix_10 {
 151         padding-right:800px;
 152 }
 153     .container_12 .suffix_11 {
 154         padding-right:880px;
 155 }
 156
 157
 158 /* Push Space >> 2 Columns
 159 ----------------------------------------------------------------------------------------------------*/
 160     .container_12 .push_1 {
 161         left:80px;
 162 }
 163     .container_12 .push_2 {
 164         left:160px;
 165 }
 166     .container_12 .push_3 {
 167         left:240px;
 168 }
 169     .container_12 .push_4 {
 170         left:320px;
 171 }
 172     .container_12 .push_5 {
 173         left:400px;
 174 }
 175     .container_12 .push_6 {
 176         left:480px;
 177 }
 178     .container_12 .push_7 {
 179         left:560px;
 180 }
 181     .container_12 .push_8 {
 182         left:640px;
 183 }
 184     .container_12 .push_9 {
 185         left:720px;
 186 }
 187     .container_12 .push_10 {
 188         left:800px;
 189 }
 190     .container_12 .push_11 {
 191         left:880px;
 192 }
 193
 194
 195
 196
 197 /* Pull Space >> 2 Columns
 198 ----------------------------------------------------------------------------------------------------*/
 199     .container_12 .pull_1 {
 200         right:80px;
 201 }
 202     .container_12 .pull_2 {
 203         right:160px;
 204 }
 205     .container_12 .pull_3 {
 206         right:240px;
 207 }
 208     .container_12 .pull_4 {
 209         right:320px;
 210 }
 211     .container_12 .pull_5 {
 212         right:400px;
 213 }
 214     .container_12 .pull_6 {
 215         right:480px;
 216 }
 217     .container_12 .pull_7 {
 218         right:560px;
 219 }
 220     .container_12 .pull_8 {
 221         right:640px;
 222 }
 223     .container_12 .pull_9 {
 224         right:720px;
 225 }
 226     .container_12 .pull_10 {
 227         right:800px;
 228 }
 229     .container_12 .pull_11 {
 230         right:880px;
 231 }
 232
 233
 234 /* Clear Floated Elements
 235 ----------------------------------------------------------------------------------------------------*/
 236
 237
 238 .clear {
 239         clear: both;
 240         display: block;
 241         overflow: hidden;
 242         visibility: hidden;
 243         width: 0;
 244         height: 0;
 245 }
 246
 247
 248 .clearfix:after {
 249         clear: both;
 250         content: ' ';
 251         display: block;
 252         font-size: 0;
 253         line-height: 0;
 254         visibility: hidden;
 255         width: 0;
 256         height: 0;
 257 }
 258
 259 .clearfix {
 260         display: inline-block;
 261 }
 262
 263 * html .clearfix {
 264         height: 1%;
 265 }
 266
 267 .clearfix {
 268         display: block;
 269 }