include/javascript/yui/build/grids/grids.css

   1 /*
   2 Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 2.9.0
   6 */
   7 /**
   8  * YUI Grids
   9  * @module grids
  10  * @namespace yui-
  11  * @requires reset, fonts
  12  */
  13
  14 /**
  15  * Note: Throughout this file, the *property (star-property) filter is used
  16  * to give a value to IE < 8 that other browsers do not see. The _property (underscore-property)
  17  * is only seen by IE < 7, so the combo of *prop and _prop can differentiate between IE6 and IE7.
  18  *
  19  * More information on these filters and related validation errors:
  20  * http://tech.groups.yahoo.com/group/ydn-javascript/message/40059
  21  */
  22
  23 /**
  24  * Section: General Rules
  25  */
  26
  27 body {
  28         text-align: center;
  29 }
  30
  31 /**
  32  * Section: Page Width Rules (#doc, #doc2, #doc3, #doc4)
  33  */
  34
  35 #doc,#doc2,#doc3,#doc4,
  36 .yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
  37         margin: auto;
  38         text-align: left;
  39         width: 57.69em;
  40         *width: 56.25em;
  41 }
  42
  43 /* 950 Centered (doc2) */
  44 #doc2 {
  45         width: 73.076em;
  46         *width: 71.25em;
  47 }
  48
  49 /* 100% (doc3) */
  50 #doc3 {
  51 /**
  52  * Left and Right margins are not a structural part of Grids. Without them
  53  * Grids works fine, but content bleeds to the very edge of the document, which
  54  * often impairs readability and usability. They are provided because they
  55  * prevent the content from "bleeding" into the browser's chrome.
  56  */
  57         margin: auto 10px;
  58         width: auto;
  59 }
  60
  61 /* 974 Centered (doc4) */
  62 #doc4 {
  63         width: 74.923em;
  64         *width: 73.05em;
  65 }
  66
  67 /**
  68  * Section: Preset Template Rules (.yui-t[1-6])
  69  */
  70
  71
  72 .yui-b {
  73         /* to preserve source-order independence for Gecko */
  74         position: relative;
  75 }
  76
  77 .yui-b {
  78         /* to preserve source-order independence for IE */
  79         _position: static;
  80 }
  81
  82 #yui-main .yui-b {
  83         /* to preserve source-order independence for Gecko */
  84         position: static;
  85 }
  86
  87 #yui-main,
  88 .yui-g .yui-u .yui-g {
  89         width: 100%;
  90 }
  91
  92 .yui-t1 #yui-main,
  93 .yui-t2 #yui-main,
  94 .yui-t3 #yui-main {
  95         float: right;
  96         /* IE: preserve layout at narrow widths */
  97         margin-left: -25em;
  98 }
  99
 100 .yui-t4 #yui-main,
 101 .yui-t5 #yui-main,
 102 .yui-t6 #yui-main {
 103         float: left;
 104         /* IE: preserve layout at narrow widths */
 105         margin-right: -25em;
 106 }
 107
 108 /**
 109  * For Specific Template Presets
 110  */
 111
 112 .yui-t1 .yui-b {
 113         float: left;
 114         width: 12.30769em;
 115         *width: 12.00em;
 116 }
 117
 118 .yui-t1 #yui-main .yui-b {
 119         margin-left: 13.30769em;
 120         *margin-left: 13.05em;
 121 }
 122
 123 .yui-t2 .yui-b {
 124         float: left;
 125         width: 13.8461em;
 126         *width: 13.50em;
 127 }
 128
 129 .yui-t2 #yui-main .yui-b {
 130         margin-left: 14.8461em;
 131         *margin-left: 14.55em;
 132 }
 133
 134 .yui-t3 .yui-b {
 135         float: left;
 136         width: 23.0769em;
 137         *width: 22.50em;
 138 }
 139
 140 .yui-t3 #yui-main .yui-b {
 141         margin-left: 24.0769em;
 142         *margin-left: 23.62em;
 143 }
 144
 145 .yui-t4 .yui-b {
 146         float: right;
 147         width: 13.8456em;
 148         *width: 13.50em;
 149 }
 150
 151 .yui-t4 #yui-main .yui-b {
 152         margin-right: 14.8456em;
 153         *margin-right: 14.55em;
 154 }
 155
 156 .yui-t5 .yui-b {
 157         float: right;
 158         width: 18.4615em;
 159         *width: 18.00em;
 160 }
 161
 162 .yui-t5 #yui-main .yui-b {
 163         margin-right: 19.4615em;
 164         *margin-right: 19.125em;
 165 }
 166
 167 .yui-t6 .yui-b {
 168         float: right;
 169         width: 23.0769em;
 170         *width: 22.50em;
 171 }
 172
 173 .yui-t6 #yui-main .yui-b {
 174         margin-right: 24.0769em;
 175         *margin-right: 23.62em;
 176 }
 177
 178 .yui-t7 #yui-main .yui-b {
 179         display: block;
 180         margin: 0 0 1em 0;
 181 }
 182
 183 #yui-main .yui-b {
 184         float: none;
 185         width: auto;
 186 }
 187
 188 /**
 189  * Section: Grids and Nesting Grids
 190  */
 191
 192 /* Children generally take half the available space */
 193 .yui-gb .yui-u,
 194 .yui-g .yui-gb .yui-u,
 195 .yui-gb .yui-g,
 196 .yui-gb .yui-gb,
 197 .yui-gb .yui-gc,
 198 .yui-gb .yui-gd,
 199 .yui-gb .yui-ge,
 200 .yui-gb .yui-gf,
 201 .yui-gc .yui-u,
 202 .yui-gc .yui-g,
 203 .yui-gd .yui-u {
 204         float: left;
 205 }
 206
 207 /* Float units (and sub grids) to the right */
 208 .yui-g .yui-u,
 209 .yui-g .yui-g,
 210 .yui-g .yui-gb,
 211 .yui-g .yui-gc,
 212 .yui-g .yui-gd,
 213 .yui-g .yui-ge,
 214 .yui-g .yui-gf,
 215 .yui-gc .yui-u,
 216 .yui-gd .yui-g,
 217 .yui-g .yui-gc .yui-u,
 218 .yui-ge .yui-u,
 219 .yui-ge .yui-g,
 220 .yui-gf .yui-g,
 221 .yui-gf .yui-u {
 222         float: right;
 223 }
 224
 225 /*Float units (and sub grids) to the left */
 226 .yui-g div.first,
 227 .yui-gb div.first,
 228 .yui-gc div.first,
 229 .yui-gd div.first,
 230 .yui-ge div.first,
 231 .yui-gf div.first,
 232 .yui-g .yui-gc div.first,
 233 .yui-g .yui-ge div.first,
 234 .yui-gc div.first div.first {
 235         float: left;
 236 }
 237
 238 .yui-g .yui-u,
 239 .yui-g .yui-g,
 240 .yui-g .yui-gb,
 241 .yui-g .yui-gc,
 242 .yui-g .yui-gd,
 243 .yui-g .yui-ge,
 244 .yui-g .yui-gf {
 245         width: 49.1%;
 246 }
 247
 248 .yui-gb .yui-u,
 249 .yui-g .yui-gb .yui-u,
 250 .yui-gb .yui-g,
 251 .yui-gb .yui-gb,
 252 .yui-gb .yui-gc,
 253 .yui-gb .yui-gd,
 254 .yui-gb .yui-ge,
 255 .yui-gb .yui-gf,
 256 .yui-gc .yui-u,
 257 .yui-gc .yui-g,
 258 .yui-gd .yui-u {
 259         width: 32%;
 260         margin-left: 1.99%;
 261 }
 262
 263 /* Give IE some extra breathing room for 1/3-based rounding issues */
 264 .yui-gb .yui-u {
 265         *margin-left: 1.9%;
 266         *width: 31.9%;
 267 }
 268
 269 .yui-gc div.first,
 270         .yui-gd .yui-u {
 271         width: 66%;
 272 }
 273
 274 .yui-gd div.first {
 275         width: 32%;
 276 }
 277
 278 .yui-ge div.first,
 279         .yui-gf .yui-u {
 280         width: 74.2%;
 281 }
 282
 283 .yui-ge .yui-u,
 284         .yui-gf div.first {
 285         width: 24%;
 286 }
 287
 288 .yui-g .yui-gb div.first,
 289 .yui-gb div.first,
 290 .yui-gc div.first,
 291 .yui-gd div.first {
 292         margin-left: 0;
 293 }
 294
 295 /**
 296  * Section: Deep Nesting
 297  */
 298
 299 .yui-g .yui-g .yui-u,
 300 .yui-gb .yui-g .yui-u,
 301 .yui-gc .yui-g .yui-u,
 302 .yui-gd .yui-g .yui-u,
 303 .yui-ge .yui-g .yui-u,
 304 .yui-gf .yui-g .yui-u {
 305         width: 49%;
 306         *width: 48.1%;
 307         *margin-left: 0;
 308 }
 309
 310 .yui-g .yui-g .yui-u {
 311         width: 48.1%;
 312 }
 313
 314 /* YUILibrary bug #1927599 from 1.14 to 2.6.0*/
 315 .yui-g .yui-gb div.first,
 316         .yui-gb .yui-gb div.first {
 317         *margin-right: 0;
 318         *width: 32%;
 319         _width: 31.7%;
 320 }
 321
 322 .yui-g .yui-gc div.first,
 323         .yui-gd .yui-g {
 324         width: 66%;
 325 }
 326
 327 .yui-gb .yui-g div.first {
 328         *margin-right: 4%;
 329         _margin-right: 1.3%;
 330 }
 331
 332 .yui-gb .yui-gc div.first,
 333         .yui-gb .yui-gd div.first {
 334         *margin-right: 0;
 335 }
 336
 337 .yui-gb .yui-gb .yui-u,
 338         .yui-gb .yui-gc .yui-u {
 339         *margin-left: 1.8%;
 340         _margin-left: 4%;
 341 }
 342
 343 .yui-g .yui-gb .yui-u {
 344         _margin-left: 1.0%;
 345 }
 346
 347 .yui-gb .yui-gd .yui-u {
 348         *width: 66%;
 349         _width: 61.2%;
 350 }
 351
 352 .yui-gb .yui-gd div.first {
 353         *width: 31%;
 354         _width: 29.5%;
 355 }
 356
 357 .yui-g .yui-gc .yui-u,
 358         .yui-gb .yui-gc .yui-u {
 359         width: 32%;
 360         _float: right;
 361         margin-right: 0;
 362         _margin-left: 0;
 363 }
 364
 365 .yui-gb .yui-gc div.first {
 366         width: 66%;
 367         *float: left;
 368         *margin-left: 0;
 369 }
 370
 371 .yui-gb .yui-ge .yui-u,
 372         .yui-gb .yui-gf .yui-u {
 373         margin: 0;
 374 }
 375
 376 .yui-gb .yui-gb .yui-u {
 377         _margin-left: .7%;
 378 }
 379
 380 .yui-gb .yui-g div.first,
 381         .yui-gb .yui-gb div.first {
 382         *margin-left: 0;
 383 }
 384
 385 .yui-gc .yui-g .yui-u,
 386         .yui-gd .yui-g .yui-u {
 387         *width: 48.1%;
 388         *margin-left: 0;
 389 }
 390
 391 .yui-gb .yui-gd div.first {
 392         width: 32%;
 393 }
 394
 395 .yui-g .yui-gd div.first {
 396         _width: 29.9%;
 397 }
 398
 399 .yui-ge .yui-g {
 400         width: 24%;
 401 }
 402
 403 .yui-gf .yui-g {
 404         width: 74.2%;
 405 }
 406
 407 .yui-gb .yui-ge div.yui-u,
 408         .yui-gb .yui-gf div.yui-u {
 409         float: right;
 410 }
 411
 412 .yui-gb .yui-ge div.first,
 413         .yui-gb .yui-gf div.first {
 414         float: left;
 415 }
 416
 417 /* Width Accommodation for Nested Contexts */
 418 .yui-gb .yui-ge .yui-u,
 419         .yui-gb .yui-gf div.first {
 420         *width: 24%;
 421         _width: 20%;
 422 }
 423
 424 /* Width Accommodation for Nested Contexts */
 425 .yui-gb .yui-ge div.first,
 426         .yui-gb .yui-gf .yui-u {
 427         *width: 73.5%;
 428         _width: 65.5%;
 429 }
 430
 431 /* Patch for GD within GE */
 432 .yui-ge div.first .yui-gd .yui-u {
 433         width: 65%;
 434 }
 435
 436 .yui-ge div.first .yui-gd div.first {
 437         width: 32%;
 438 }
 439
 440 /* @group Clearing */
 441 #hd:after,
 442 #bd:after,
 443 #ft:after,
 444 .yui-g:after,
 445 .yui-gb:after,
 446 .yui-gc:after,
 447 .yui-gd:after,
 448 .yui-ge:after,
 449 .yui-gf:after {
 450         content: "";
 451         display: block;
 452         clear: both;
 453 }
 454
 455 #hd,
 456 #bd,
 457 #ft,
 458 .yui-g,
 459 .yui-gb,
 460 .yui-gc,
 461 .yui-gd,
 462 .yui-ge,
 463 .yui-gf {
 464         zoom: 1;
 465 }