Home | History | Annotate | Download | only in css 
      1 
      2 /* =============================================================================
      3    Columns
      4    ========================================================================== */
      5 /* Applied to body to debug layout alignments
      6 .grid {
      7   width:100%;
      8   height:100%;
      9   background:url(../images/grid.png) center repeat-y;
     10   top:0px;
     11   margin:auto;
     12   position:absolute;
     13 }   
     14 */
     15 
     16 @media screen, projection, print {
     17 .full {
     18 	padding: 2.5em 0;
     19 	border-top: solid 1px #ddd;
     20 	border-bottom: solid 1px #ddd;
     21 	background: #f7f7f7;	
     22 }
     23 .wrap {
     24 	margin: 0 auto;
     25 	width: 100%;
     26 	min-width:600px;
     27 	clear: both;
     28 }
     29 .cols {
     30     height: 1%;
     31     margin: 0 -1.533742331288343558282%;
     32     width: 103.06748466257669%}
     33 *+html .cols {
     34     margin-bottom: 20px;
     35 }
     36 .cols:after {
     37     clear: both;
     38     content: ' ';
     39     display: block;
     40     height: 0;
     41     visibility: hidden;
     42 }
     43 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
     44 .col-13, .col-14, .col-15, .col-16 {
     45     float: left;
     46     margin: 0 1.063829787234% 20px 1.063829787234%;
     47 }
     48 * html .col-1, * html .col-2, * html .col-3, * html .col-4, * html .col-5, * html .col-6, * html
     49 .col-7, * html .col-8, * html .col-9, * html .col-10, * html .col-11, * html .col-12, * html
     50 .col-13, * html .col-14, * html .col-15, * html .col-16  {
     51     margin: 0;
     52     margin: 0 1.063829787234% 20px 1.063829787234%;
     53 }
     54 [dir='rtl'] .col-1, [dir='rtl'] .col-2, [dir='rtl'] .col-3, [dir='rtl'] .col-4, [dir='rtl'] .col-5,
     55 [dir='rtl'] .col-6, [dir='rtl'] .col-7, [dir='rtl'] .col-8, [dir='rtl'] .col-9, [dir='rtl'] .col-10,
     56 [dir='rtl'] .col-11, [dir='rtl'] .col-12 {
     57     float: right;
     58 }
     59 .col-1 {
     60     width: 4.16666666666667%;
     61 }
     62 .col-2 {
     63     width: 10.4166666666667%;
     64 }
     65 .col-3 {
     66     width: 16.6666666666667%;
     67 }
     68 .col-4 {
     69     width: 22.9166666666667%;
     70 }
     71 .col-5 {
     72     width: 29.1666666666667%;
     73 }
     74 .col-6 {
     75     width: 35.4166666666667%;
     76 }
     77 .col-7 {
     78     width: 41.6666666666667%;
     79 }
     80 .col-8 {
     81     width: 47.9166666666667%;
     82 }
     83 .col-9 {
     84     width: 55.3333333333333%;
     85 }
     86 .col-10 {
     87     width: 60.4166666666667%;
     88 }
     89 .col-11 {
     90     width: 66.6666666666667%;
     91 }
     92 .col-12 {
     93     width: 72.9166666666667%;
     94 }
     95 .col-13 {
     96     width: 79.1666666666667%;
     97 }
     98 .col-14 {
     99     width: 85.4166666666667%;
    100 }
    101 .col-15 {
    102     width: 91.6666666666667%;
    103 }
    104 .col-16 {
    105     width: 97.9166666666667%;
    106 }
    107 
    108 
    109 
    110 
    111 
    112 
    113 
    114 #header .col-1,
    115 #nav-x .col-1 { width: 40px }
    116 #header .col-2,
    117 #nav-x .col-2 { width: 100px }
    118 #header .col-3,
    119 #nav-x .col-3 { width: 160px }
    120 #header .col-4,
    121 #nav-x .col-4 { width: 220px }
    122 #header .col-5,
    123 #nav-x .col-5 { width: 280px }
    124 #header .col-6,
    125 #nav-x .col-6 { width: 340px }
    126 #header .col-7,
    127 #nav-x .col-7 { width: 400px }
    128 #header .col-8,
    129 #nav-x .col-8 { width: 460px }
    130 #header .col-9,
    131 #nav-x .col-9 { width: 520px }
    132 #header .col-10,
    133 #nav-x .col-10 { width: 580px }
    134 #header .col-11,
    135 #nav-x .col-11 { width: 640px }
    136 #header .col-12,
    137 #nav-x .col-12 { width: 700px }
    138 #header .col-13,
    139 #nav-x .col-13 { width: 760px }
    140 #header .col-14,
    141 #nav-x .col-14 { width: 820px }
    142 #header .col-15,
    143 #nav-x .col-15 { width: 880px }
    144 #header .col-16,
    145 #nav-x .col-16 { width: 940px }
    146 
    147 
    148 
    149 body {
    150   padding:0 20px;
    151 }
    152 #header,
    153 #searchResults,
    154 #nav-x {
    155   margin:0;
    156 }
    157 #body-content {
    158   margin:0;
    159 }
    160 #body-content > .col-12 {
    161   width:77.9804965%;
    162   margin:0 0 0 0.97%; /* this percentage chosen to make IE9 happy */
    163 }
    164 #side-nav {
    165   width: 19.9804965%;
    166   margin:0 1.063829787234% 0 0;
    167 }
    168 
    169 #header .wrap {
    170   max-width: 100%;
    171 }
    172 
    173 #nav-x .wrap,
    174 #searchResults.wrap {
    175     max-width:100%;
    176 }
    177 
    178 .nav-x {
    179   margin:-2px 0 0 0;
    180 }
    181 
    182 #devdoc-nav.fixed,
    183 #devdoc-nav.fixed a.totop {
    184   left:20px; /* !important ... for IE i think */
    185 }
    186 
    187 
    188 
    189 
    190 }
    191 
    192 .col-right {
    193   margin-right:0px;
    194 }
    195 
    196 @media screen and (max-width:772px) {
    197 .col-5, .col-6, .col-7 {
    198     clear: both;
    199     width: 97.0238096%}
    200 }