www/plugins/beespip/css/960.css

   1 /*
   2         960 Grid System ~ Core CSS.
   3         Learn more ~ http://960.gs/
   4
   5         Licensed under GPL and MIT.
   6 */
   7
   8 /* =Containers
   9 --------------------------------------------------------------------------------*/
  10
  11 .container_12,
  12 .container_16
  13 {
  14         margin-left: auto;
  15         margin-right: auto;
  16         width: 960px;
  17 }
  18
  19 /* =Grid >> Global
  20 --------------------------------------------------------------------------------*/
  21
  22 .grid_1,
  23 .grid_2,
  24 .grid_3,
  25 .grid_4,
  26 .grid_5,
  27 .grid_6,
  28 .grid_7,
  29 .grid_8,
  30 .grid_9,
  31 .grid_10,
  32 .grid_11,
  33 .grid_12,
  34 .grid_13,
  35 .grid_14,
  36 .grid_15,
  37 .grid_16
  38 {
  39         display: inline;
  40         float: left;
  41         margin-left: 10px;
  42         margin-right: 10px;
  43 }
  44
  45 .container_12 .grid_3,
  46 .container_16 .grid_4
  47 {
  48         width: 220px;
  49 }
  50
  51 .container_12 .grid_6,
  52 .container_16 .grid_8
  53 {
  54         width: 460px;
  55 }
  56
  57 .container_12 .grid_9,
  58 .container_16 .grid_12
  59 {
  60         width: 700px;
  61 }
  62
  63 .container_12 .grid_12,
  64 .container_16 .grid_16
  65 {
  66         width: 940px;
  67 }
  68
  69 /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
  70 --------------------------------------------------------------------------------*/
  71
  72 .alpha
  73 {
  74         margin-left: 0;
  75 }
  76
  77 .omega
  78 {
  79         margin-right: 0;
  80 }
  81
  82 /* =Grid >> 12 Columns
  83 --------------------------------------------------------------------------------*/
  84
  85 .container_12 .grid_1
  86 {
  87         width: 60px;
  88 }
  89
  90 .container_12 .grid_2
  91 {
  92         width: 140px;
  93 }
  94
  95 .container_12 .grid_4
  96 {
  97         width: 300px;
  98 }
  99
 100 .container_12 .grid_5
 101 {
 102         width: 380px;
 103 }
 104
 105 .container_12 .grid_7
 106 {
 107         width: 540px;
 108 }
 109
 110 .container_12 .grid_8
 111 {
 112         width: 620px;
 113 }
 114
 115 .container_12 .grid_10
 116 {
 117         width: 780px;
 118 }
 119
 120 .container_12 .grid_11
 121 {
 122         width: 860px;
 123 }
 124
 125 /* =Grid >> 16 Columns
 126 --------------------------------------------------------------------------------*/
 127
 128 .container_16 .grid_1
 129 {
 130         width: 40px;
 131 }
 132
 133 .container_16 .grid_2
 134 {
 135         width: 100px;
 136 }
 137
 138 .container_16 .grid_3
 139 {
 140         width: 160px;
 141 }
 142
 143 .container_16 .grid_5
 144 {
 145         width: 280px;
 146 }
 147
 148 .container_16 .grid_6
 149 {
 150         width: 340px;
 151 }
 152
 153 .container_16 .grid_7
 154 {
 155         width: 400px;
 156 }
 157
 158 .container_16 .grid_9
 159 {
 160         width: 520px;
 161 }
 162
 163 .container_16 .grid_10
 164 {
 165         width: 580px;
 166 }
 167
 168 .container_16 .grid_11
 169 {
 170         width: 640px;
 171 }
 172
 173 .container_16 .grid_13
 174 {
 175         width: 760px;
 176 }
 177
 178 .container_16 .grid_14
 179 {
 180         width: 820px;
 181 }
 182
 183 .container_16 .grid_15
 184 {
 185         width: 880px;
 186 }
 187
 188 /* =Prefix Extra Space >> Global
 189 --------------------------------------------------------------------------------*/
 190
 191 .container_12 .prefix_3,
 192 .container_16 .prefix_4
 193 {
 194         padding-left: 240px;
 195 }
 196
 197 .container_12 .prefix_6,
 198 .container_16 .prefix_8
 199 {
 200         padding-left: 480px;
 201 }
 202
 203 .container_12 .prefix_9,
 204 .container_16 .prefix_12
 205 {
 206         padding-left: 720px;
 207 }
 208
 209 /* =Prefix Extra Space >> 12 Columns
 210 --------------------------------------------------------------------------------*/
 211
 212 .container_12 .prefix_1
 213 {
 214         padding-left: 80px;
 215 }
 216
 217 .container_12 .prefix_2
 218 {
 219         padding-left: 160px;
 220 }
 221
 222 .container_12 .prefix_4
 223 {
 224         padding-left: 320px;
 225 }
 226
 227 .container_12 .prefix_5
 228 {
 229         padding-left: 400px;
 230 }
 231
 232 .container_12 .prefix_7
 233 {
 234         padding-left: 560px;
 235 }
 236
 237 .container_12 .prefix_8
 238 {
 239         padding-left: 640px;
 240 }
 241
 242 .container_12 .prefix_10
 243 {
 244         padding-left: 800px;
 245 }
 246
 247 .container_12 .prefix_11
 248 {
 249         padding-left: 880px;
 250 }
 251
 252 /* =Prefix Extra Space >> 16 Columns
 253 --------------------------------------------------------------------------------*/
 254
 255 .container_16 .prefix_1
 256 {
 257         padding-left: 60px;
 258 }
 259
 260 .container_16 .prefix_2
 261 {
 262         padding-left: 120px;
 263 }
 264
 265 .container_16 .prefix_3
 266 {
 267         padding-left: 180px;
 268 }
 269
 270 .container_16 .prefix_5
 271 {
 272         padding-left: 300px;
 273 }
 274
 275 .container_16 .prefix_6
 276 {
 277         padding-left: 360px;
 278 }
 279
 280 .container_16 .prefix_7
 281 {
 282         padding-left: 420px;
 283 }
 284
 285 .container_16 .prefix_9
 286 {
 287         padding-left: 540px;
 288 }
 289
 290 .container_16 .prefix_10
 291 {
 292         padding-left: 600px;
 293 }
 294
 295 .container_16 .prefix_11
 296 {
 297         padding-left: 660px;
 298 }
 299
 300 .container_16 .prefix_13
 301 {
 302         padding-left: 780px;
 303 }
 304
 305 .container_16 .prefix_14
 306 {
 307         padding-left: 840px;
 308 }
 309
 310 .container_16 .prefix_15
 311 {
 312         padding-left: 900px;
 313 }
 314
 315 /* =Suffix Extra Space >> Global
 316 --------------------------------------------------------------------------------*/
 317
 318 .container_12 .suffix_3,
 319 .container_16 .suffix_4
 320 {
 321         padding-right: 240px;
 322 }
 323
 324 .container_12 .suffix_6,
 325 .container_16 .suffix_8
 326 {
 327         padding-right: 480px;
 328 }
 329
 330 .container_12 .suffix_9,
 331 .container_16 .suffix_12
 332 {
 333         padding-right: 720px;
 334 }
 335
 336 /* =Suffix Extra Space >> 12 Columns
 337 --------------------------------------------------------------------------------*/
 338
 339 .container_12 .suffix_1
 340 {
 341         padding-right: 80px;
 342 }
 343
 344 .container_12 .suffix_2
 345 {
 346         padding-right: 160px;
 347 }
 348
 349 .container_12 .suffix_4
 350 {
 351         padding-right: 320px;
 352 }
 353
 354 .container_12 .suffix_5
 355 {
 356         padding-right: 400px;
 357 }
 358
 359 .container_12 .suffix_7
 360 {
 361         padding-right: 560px;
 362 }
 363
 364 .container_12 .suffix_8
 365 {
 366         padding-right: 640px;
 367 }
 368
 369 .container_12 .suffix_10
 370 {
 371         padding-right: 800px;
 372 }
 373
 374 .container_12 .suffix_11
 375 {
 376         padding-right: 880px;
 377 }
 378
 379 /* =Suffix Extra Space >> 16 Columns
 380 --------------------------------------------------------------------------------*/
 381
 382 .container_16 .suffix_1
 383 {
 384         padding-right: 60px;
 385 }
 386
 387 .container_16 .suffix_2
 388 {
 389         padding-right: 120px;
 390 }
 391
 392 .container_16 .suffix_3
 393 {
 394         padding-right: 180px;
 395 }
 396
 397 .container_16 .suffix_5
 398 {
 399         padding-right: 300px;
 400 }
 401
 402 .container_16 .suffix_6
 403 {
 404         padding-right: 360px;
 405 }
 406
 407 .container_16 .suffix_7
 408 {
 409         padding-right: 420px;
 410 }
 411
 412 .container_16 .suffix_9
 413 {
 414         padding-right: 540px;
 415 }
 416
 417 .container_16 .suffix_10
 418 {
 419         padding-right: 600px;
 420 }
 421
 422 .container_16 .suffix_11
 423 {
 424         padding-right: 660px;
 425 }
 426
 427 .container_16 .suffix_13
 428 {
 429         padding-right: 780px;
 430 }
 431
 432 .container_16 .suffix_14
 433 {
 434         padding-right: 840px;
 435 }
 436
 437 .container_16 .suffix_15
 438 {
 439         padding-right: 900px;
 440 }
 441
 442 /* =Clear Floated Elements
 443 --------------------------------------------------------------------------------*/
 444
 445 /* http://sonspring.com/journal/clearing-floats */
 446
 447 html body * span.clear,
 448 html body * div.clear,
 449 html body * li.clear,
 450 html body * dd.clear
 451 {
 452         background: none;
 453         border: 0;
 454         clear: both;
 455         display: block;
 456         float: none;
 457         font-size: 0;
 458         list-style: none;
 459         margin: 0;
 460         padding: 0;
 461         overflow: hidden;
 462         visibility: hidden;
 463         width: 0;
 464         height: 0;
 465 }
 466
 467 /* http://www.positioniseverything.net/easyclearing.html */
 468
 469 .clearfix:after
 470 {
 471         clear: both;
 472         content: '.';
 473         display: block;
 474         visibility: hidden;
 475         height: 0;
 476 }
 477
 478 .clearfix
 479 {
 480         display: inline-block;
 481 }
 482
 483 * html .clearfix
 484 {
 485         height: 1%;
 486 }
 487
 488 .clearfix
 489 {
 490         display: block;
 491 }