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 149body { 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.col-right { 201 margin-right:0px; 202} 203 204@media screen and (max-width:772px) { 205.col-5, .col-6, .col-7 { 206 clear: both; 207 width: 97.0238096%} 208}