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 #header-wrapper #nav-x div.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 #sticky-header { 188 padding: 0 20px; 189 } 190 191 #sticky-header > div { 192 width: 100%; 193 } 194 195 .sticky-menu { 196 width:100%; 197 left:-20px; 198 } 199 200 201 } 202 203 .col-right { 204 margin-right:0px; 205 } 206 207 @media screen and (max-width:772px) { 208 .col-5, .col-6, .col-7 { 209 clear: both; 210 width: 97.0238096%} 211 }