Scott Main | e4d8f1b | 2012-06-21 18:03:05 -0700 | [diff] [blame] | 1 | |
| 2 | /* ============================================================================= |
| 3 | Columns |
| 4 | ========================================================================== */ |
Scott Main | 9332a45 | 2012-08-06 18:54:18 -0700 | [diff] [blame] | 5 | /* Applied to body to debug layout alignments |
Scott Main | e4d8f1b | 2012-06-21 18:03:05 -0700 | [diff] [blame] | 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 | } |
Scott Main | 9332a45 | 2012-08-06 18:54:18 -0700 | [diff] [blame] | 14 | */ |
Scott Main | e4d8f1b | 2012-06-21 18:03:05 -0700 | [diff] [blame] | 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 { |
Scott Main | 810e288 | 2012-06-27 02:08:20 -0700 | [diff] [blame] | 184 | left:20px; /* !important ... for IE i think */ |
Scott Main | e4d8f1b | 2012-06-21 18:03:05 -0700 | [diff] [blame] | 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 | } |