├── CNAME ├── css ├── .DS_Store ├── layouts │ ├── marketing-old-ie.css │ └── marketing.css ├── main-grid-old-ie.css └── main-grid.css ├── img ├── .DS_Store ├── common │ ├── .DS_Store │ └── file-icons.png ├── partyHat-lg.png ├── partyHat-sm.png ├── border-methods.png ├── congruent_pentagon.png ├── swagger-logo-63x63.png └── swagger-logo-gray.png ├── README.md ├── LICENSE.md └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | swagger.wordnik.com -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/css/.DS_Store -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/.DS_Store -------------------------------------------------------------------------------- /img/common/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/common/.DS_Store -------------------------------------------------------------------------------- /img/partyHat-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/partyHat-lg.png -------------------------------------------------------------------------------- /img/partyHat-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/partyHat-sm.png -------------------------------------------------------------------------------- /img/border-methods.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/border-methods.png -------------------------------------------------------------------------------- /img/common/file-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/common/file-icons.png -------------------------------------------------------------------------------- /img/congruent_pentagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/congruent_pentagon.png -------------------------------------------------------------------------------- /img/swagger-logo-63x63.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/swagger-logo-63x63.png -------------------------------------------------------------------------------- /img/swagger-logo-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swagger-api/swagger2/HEAD/img/swagger-logo-gray.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Pure CSS Layout Examples 2 | ======================== 3 | 4 | Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project. 5 | 6 | [pure]: http://purecss.io/ 7 | [pure-site]: https://github.com/yui/pure-site 8 | 9 | 10 | License 11 | ------- 12 | 13 | This software is free to use under the Yahoo! Inc. BSD license. 14 | See the [LICENSE file][] for license text and copyright information. 15 | 16 | [LICENSE file]: https://github.com/yui/pure-site/blob/master/LICENSE.md 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement (BSD License) 2 | ======================================== 3 | 4 | Copyright 2013 Yahoo! Inc. All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above copyright 10 | notice, this list of conditions and the following disclaimer. 11 | 12 | * Redistributions in binary form must reproduce the above copyright 13 | notice, this list of conditions and the following disclaimer in the 14 | documentation and/or other materials provided with the distribution. 15 | 16 | * Neither the name of the Yahoo! Inc. nor the 17 | names of its contributors may be used to endorse or promote products 18 | derived from this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 21 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 22 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY 24 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 25 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 26 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 27 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 29 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | -------------------------------------------------------------------------------- /css/layouts/marketing-old-ie.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* 8 | * -- BASE STYLES -- 9 | * Most of these are inherited from Base, but I want to change a few. 10 | */ 11 | 12 | body { 13 | line-height: 1.7em; 14 | color: #7f8c8d; 15 | font-size: 13px; 16 | font-family: "Open Sans"; 17 | } 18 | 19 | h1, 20 | h2, 21 | h3, 22 | h4, 23 | h5, 24 | h6, 25 | label { 26 | color: #34495e; 27 | font-family: "Open Sans"; 28 | } 29 | 30 | .pure-img-responsive { 31 | max-width: 100%; 32 | height: auto; 33 | } 34 | 35 | /* 36 | * -- LAYOUT STYLES -- 37 | * These are some useful classes which I will need 38 | */ 39 | 40 | .l-box { 41 | padding: 1em; 42 | } 43 | 44 | .l-box-lrg { 45 | padding: 2em; 46 | border-bottom: 1px solid rgba(0,0,0,0.1); 47 | } 48 | 49 | .is-center { 50 | text-align: center; 51 | } 52 | 53 | /* 54 | * -- PURE FORM STYLES -- 55 | * Style the form inputs and labels 56 | */ 57 | 58 | .pure-form label { 59 | margin: 1em 0 0; 60 | font-weight: bold; 61 | font-size: 100%; 62 | } 63 | 64 | .pure-form input[type] { 65 | border: 2px solid #ddd; 66 | box-shadow: none; 67 | font-size: 100%; 68 | width: 100%; 69 | margin-bottom: 1em; 70 | } 71 | 72 | /* 73 | * -- PURE BUTTON STYLES -- 74 | * I want my pure-button elements to look a little different 75 | */ 76 | 77 | .pure-button { 78 | background-color: #1f8dd6; 79 | color: white; 80 | padding: 0.5em 2em; 81 | border-radius: 5px; 82 | } 83 | 84 | a.pure-button-primary { 85 | background: white; 86 | color: #1f8dd6; 87 | border-radius: 5px; 88 | font-size: 120%; 89 | } 90 | 91 | /* 92 | * -- MENU STYLES -- 93 | * I want to customize how my .pure-menu looks at the top of the page 94 | */ 95 | 96 | .home-menu { 97 | padding: 0.5em; 98 | text-align: center; 99 | box-shadow: 0 1px 1px rgba(0,0,0, 0.10); 100 | } 101 | 102 | .home-menu.pure-menu-open { 103 | background: #2d3e50; 104 | } 105 | 106 | .pure-menu.pure-menu-open.pure-menu-fixed { 107 | /* Fixed menus normally have a border at the bottom. */ 108 | border-bottom: none; 109 | /* I need a higher z-index here because of the scroll-over effect. */ 110 | z-index: 4; 111 | } 112 | 113 | .home-menu .pure-menu-heading { 114 | color: white; 115 | font-weight: 400; 116 | font-size: 120%; 117 | } 118 | 119 | .home-menu .pure-menu-selected a { 120 | color: white; 121 | } 122 | 123 | .home-menu a { 124 | color: #6FBEF3; 125 | } 126 | 127 | .home-menu li a:hover, 128 | .home-menu li a:focus { 129 | background: none; 130 | border: none; 131 | color: #AECFE5; 132 | } 133 | 134 | /* 135 | * -- SPLASH STYLES -- 136 | * This is the blue top section that appears on the page. 137 | */ 138 | 139 | .splash-container { 140 | background: #1f8dd6; 141 | z-index: 1; 142 | overflow: hidden; 143 | /* The following styles are required for the "scroll-over" effect */ 144 | width: 100%; 145 | height: 88%; 146 | top: 0; 147 | left: 0; 148 | position: fixed !important; 149 | } 150 | 151 | .splash { 152 | /* absolute center .splash within .splash-container */ 153 | width: 80%; 154 | height: 50%; 155 | margin: auto; 156 | position: absolute; 157 | top: 100px; 158 | left: 0; 159 | bottom: 0; 160 | right: 0; 161 | text-align: center; 162 | text-transform: uppercase; 163 | } 164 | 165 | /* This is the main heading that appears on the blue section */ 166 | 167 | .splash-head { 168 | font-size: 20px; 169 | font-weight: bold; 170 | color: white; 171 | border: 3px solid white; 172 | padding: 1em 1.6em; 173 | font-weight: 100; 174 | border-radius: 5px; 175 | line-height: 1em; 176 | } 177 | 178 | /* This is the subheading that appears on the blue section */ 179 | 180 | .splash-subhead { 181 | color: white; 182 | letter-spacing: 0.05em; 183 | opacity: 0.8; 184 | } 185 | 186 | /* 187 | * -- CONTENT STYLES -- 188 | * This represents the content area (everything below the blue section) 189 | */ 190 | 191 | .content-wrapper { 192 | /* These styles are required for the "scroll-over" effect */ 193 | position: absolute; 194 | top: 87%; 195 | width: 100%; 196 | min-height: 12%; 197 | z-index: 2; 198 | background: white; 199 | } 200 | 201 | /* This is the class used for the main content headers (

) */ 202 | 203 | .content-head { 204 | font-weight: 400; 205 | text-transform: uppercase; 206 | letter-spacing: 0.1em; 207 | margin: 2em 0 1em; 208 | } 209 | 210 | /* This is a modifier class used when the content-head is inside a ribbon */ 211 | 212 | .content-head-ribbon { 213 | color: white; 214 | } 215 | 216 | /* This is the class used for the content sub-headers (

) */ 217 | 218 | .content-subhead { 219 | color: #1f8dd6; 220 | 221 | } 222 | 223 | .content-subhead i { 224 | margin-right: 7px; 225 | } 226 | 227 | /* This is the class used for the dark-background areas. */ 228 | 229 | .ribbon { 230 | background: #2d3e50; 231 | color: #aaa; 232 | } 233 | 234 | /* This is the class used for the footer */ 235 | 236 | .footer { 237 | background: #111; 238 | } 239 | 240 | /* 241 | * -- TABLET (AND UP) MEDIA QUERIES -- 242 | * On tablets and other medium-sized devices, we want to customize some 243 | * of the mobile styles. 244 | */ 245 | 246 | /* We increase the body font size */ 247 | 248 | body { 249 | font-size: 16px; 250 | } 251 | 252 | /* We want to give the content area some more padding */ 253 | 254 | .content { 255 | padding: 1em; 256 | } 257 | 258 | /* We can align the menu header to the left, but float the 259 | menu items to the right. */ 260 | 261 | .home-menu { 262 | text-align: left; 263 | } 264 | 265 | .home-menu ul { 266 | float: right; 267 | } 268 | 269 | /* We increase the height of the splash-container */ 270 | 271 | /* .splash-container { 272 | height: 500px; 273 | }*/ 274 | 275 | /* We decrease the width of the .splash, since we have more width 276 | to work with */ 277 | 278 | .splash { 279 | width: 50%; 280 | height: 50%; 281 | } 282 | 283 | .splash-head { 284 | font-size: 250%; 285 | } 286 | 287 | /* We remove the border-separator assigned to .l-box-lrg */ 288 | 289 | .l-box-lrg { 290 | border: none; 291 | } 292 | 293 | /* 294 | * -- DESKTOP (AND UP) MEDIA QUERIES -- 295 | * On desktops and other large devices, we want to over-ride some 296 | * of the mobile and tablet styles. 297 | */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Swagger — Help us build 2.0! 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 |
60 |
61 | 62 |

Swagger is turning 2.0

63 |

64 | … and you're invited to the party! 65 |

66 |

67 | Join the working group 68 |

69 |
70 |
71 | 72 |
73 | 74 | 75 |
76 |
77 |
78 | 79 |

Goals for the next generation

80 | 81 |
82 |
83 | 84 |

85 | 86 | Naming 87 |

88 |

89 | 2.0 is the opportunity to improve what we call things in the Swagger specification—one of the hardest problems in computer science1. 90 |

91 |
92 |
93 |

94 | 95 | API design-first workflow 96 |

97 |

98 | A human-friendly YAML syntax and editor make it easy to create an API spec from scratch. 99 |

100 |
101 |
102 |

103 | 104 | Extending the metadata 105 |

106 |

107 | Grow the format to include SLA information, vendor extensions, and other useful metadata. 108 |

109 |
110 |
111 |

112 | 113 | Best-of-breed tooling 114 |

115 |

116 | Code generation and Swagger UI will get a major refresh following the new spec. 117 |

118 |
119 |
120 |
121 | 122 |
123 |
124 | File Icons 125 |
126 |
127 | 128 |

GET involved!

129 | 130 | 131 |

132 | New to Swagger? Learn more about the specification, or browse the projects on GitHub.
133 | Got ideas for how to make Swagger even better? 134 |

135 | 136 |

137 | Join us! 138 |

139 |
140 |
141 | 142 |
143 |

GET the Details

144 | 145 |
146 |
147 |

What is the timeframe?

148 |

149 | The formation of a working group was announced by Tony Tam at Gluecon on May 22, 2014. 150 | The goal is to have a draft spec in June for finalization in July. 151 |

152 | 153 |

Who is behind the working group?

154 |

155 | Reverb is convening the group with Apigee as a founding member.
156 | Get your organization involved—join the group! 157 |

158 |
159 | 160 |
161 |

How big a deal is this?

162 |

163 | Swagger is estimated to have around 10,000 deployments in production. The Java client alone has been downloaded over 500k times. Swagger means business. 164 |

165 | 166 |

How can I help?

167 |

168 | We're looking for designers, developers, and people who just think a lot about APIs. If that sounds like you, then come help a great, open source project get even better. 169 |

170 |
171 |
172 | 173 |
174 | 175 |
176 | Give a man an API, and he APIs for a day. Teach a man to API, and he APIs for a lifetime. 177 |
178 | 179 |
180 | 181 | 182 | 191 | 192 | 193 | 209 | 210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /css/layouts/marketing.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* 8 | * -- BASE STYLES -- 9 | * Most of these are inherited from Base, but I want to change a few. 10 | */ 11 | body { 12 | line-height: 1.7em; 13 | color: #7f8c8d; 14 | font-size: 14px; 15 | font-family: "Open Sans"; 16 | } 17 | 18 | h1, 19 | h2, 20 | h3, 21 | h4, 22 | h5, 23 | h6, 24 | label { 25 | color: #34495e; 26 | font-family: "Open Sans"; 27 | 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | color: #3669a4; 33 | border-bottom: 1px dotted #4A90E2; 34 | } 35 | 36 | a:hover { 37 | color: #4485d1; 38 | border-bottom: 1px dotted #4b93e6; 39 | 40 | } 41 | 42 | a.joinUs { 43 | text-decoration: none; 44 | color: #9bc8fd; 45 | border-bottom: 1px dotted #4A90E2; 46 | } 47 | 48 | a:hover.joinUs { 49 | color: #fff; 50 | border-bottom: 1px dotted #4b93e6; 51 | 52 | } 53 | 54 | p { 55 | font-family: "Open Sans"; 56 | margin: -1.2em 0 1.4em 0; 57 | } 58 | 59 | .upperBorder { 60 | background-image: url(../../img/border-methods.png); 61 | height: 55px; 62 | background-repeat: repeat-x; 63 | text-align: center; 64 | padding-top:14px; 65 | color: #e5e5e5; 66 | background-color: #fff; 67 | box-shadow: 1px 1px 6px rgba(0,0,0, 0.25); 68 | font-size: 110%; 69 | } 70 | 71 | img.logo { 72 | height: 63px; 73 | width: 63px; 74 | } 75 | 76 | .pure-img-responsive { 77 | max-width: 100%; 78 | height: auto; 79 | } 80 | 81 | /* 82 | * -- LAYOUT STYLES -- 83 | * These are some useful classes which I will need 84 | */ 85 | .l-box { 86 | padding: 1em; 87 | } 88 | 89 | .l-box-lrg { 90 | padding: 2em; 91 | border-bottom: none; 92 | } 93 | 94 | .is-center { 95 | text-align: center; 96 | } 97 | 98 | 99 | 100 | /* 101 | * -- PURE FORM STYLES -- 102 | * Style the form inputs and labels 103 | */ 104 | .pure-form label { 105 | margin: 1em 0 0; 106 | font-weight: bold; 107 | font-size: 100%; 108 | } 109 | 110 | .pure-form input[type] { 111 | border: 2px solid #ddd; 112 | box-shadow: none; 113 | font-size: 100%; 114 | width: 100%; 115 | margin-bottom: 1em; 116 | } 117 | 118 | /* 119 | * -- PURE BUTTON STYLES -- 120 | * I want my pure-button elements to look a little different 121 | */ 122 | .pure-button { 123 | background-color: #1f8dd6; 124 | color: white; 125 | padding: 0.5em 2em; 126 | border-radius: 5px; 127 | } 128 | 129 | a.pure-button-primary { 130 | background: #4A90E2; 131 | color: #fff; 132 | font-family: "Open Sans", sans-serif; 133 | font-weight: 300; 134 | border-radius: 5px; 135 | font-size: 150%; 136 | } 137 | 138 | 139 | /* 140 | * -- MENU STYLES -- 141 | * I want to customize how my .pure-menu looks at the top of the page 142 | */ 143 | 144 | .home-menu { 145 | padding: 0.5em; 146 | text-align: center; 147 | box-shadow: 0 1px 1px rgba(0,0,0, 0.10); 148 | } 149 | .home-menu.pure-menu-open { 150 | background: #2d3e50; 151 | } 152 | .pure-menu.pure-menu-open.pure-menu-fixed { 153 | /* Fixed menus normally have a border at the bottom. */ 154 | border-bottom: none; 155 | /* I need a higher z-index here because of the scroll-over effect. */ 156 | z-index: 4; 157 | } 158 | 159 | .home-menu .pure-menu-heading { 160 | color: white; 161 | font-weight: 400; 162 | font-size: 120%; 163 | } 164 | 165 | .home-menu .pure-menu-selected a { 166 | color: white; 167 | } 168 | 169 | .home-menu a { 170 | color: #6FBEF3; 171 | } 172 | .home-menu li a:hover, 173 | .home-menu li a:focus { 174 | background: none; 175 | border: none; 176 | color: #AECFE5; 177 | } 178 | 179 | 180 | /* 181 | * -- SPLASH STYLES -- 182 | * This is the blue top section that appears on the page. 183 | */ 184 | 185 | .splash-container { 186 | background: #DBEFFF; /*url('../../img/congruent_pentagon.png') center;*/ 187 | background-image: url(../../img/partyHat-sm.png); 188 | background-repeat: no-repeat; 189 | background-position: 70px 90px; 190 | z-index: 1; 191 | overflow: hidden; 192 | /* The following styles are required for the "scroll-over" effect */ 193 | width: 100%; 194 | height: 68%; 195 | top: 0; 196 | left: 0; 197 | position: fixed !important; 198 | } 199 | 200 | .splash { 201 | /* absolute center .splash within .splash-container */ 202 | width: 80%; 203 | height: 60%; 204 | margin: auto; 205 | position: absolute; 206 | top: 0px; left: 0; bottom: 0; right: 0; 207 | text-align: center; 208 | /* text-transform: uppercase; 209 | */ color: #74a855; 210 | } 211 | 212 | /* This is the main heading that appears on the blue section */ 213 | .splash-head { 214 | font-size: 26px; 215 | font-weight: bold; 216 | font-family: "Bree Serif", serif; 217 | padding: 0em 1.6em; 218 | font-weight: 400; 219 | line-height: 1em; 220 | } 221 | 222 | /* This is the subheading that appears on the blue section */ 223 | .splash-subhead { 224 | 225 | letter-spacing: 0.02em; 226 | font-size:1.2em; 227 | opacity: 0.8; 228 | padding-top:10px; 229 | padding-bottom: 10px; 230 | 231 | } 232 | 233 | /* 234 | * -- CONTENT STYLES -- 235 | * This represents the content area (everything below the blue section) 236 | */ 237 | .content-wrapper { 238 | /* These styles are required for the "scroll-over" effect */ 239 | position: absolute; 240 | top: 80%; 241 | width: 100%; 242 | min-height: 12%; 243 | z-index: 2; 244 | background: white; 245 | 246 | } 247 | 248 | /* This is the class used for the main content headers (

) */ 249 | .content-head { 250 | font-weight: 400; 251 | letter-spacing: 0.03em; 252 | font-size: 2em; 253 | font-family: "Open Sans", sans-serif; 254 | margin: 1.2em 0 1em; 255 | } 256 | 257 | /* This is a modifier class used when the content-head is inside a ribbon */ 258 | .content-head-ribbon { 259 | color: white; 260 | } 261 | 262 | /* This is the class used for the content sub-headers (

) */ 263 | .content-subhead { 264 | color: #74a855; 265 | font-family: "Open Sans", sans-serif; 266 | font-weight: 500; 267 | font-size: 1.5em; 268 | } 269 | .content-subhead i { 270 | margin-right: 7px; 271 | } 272 | 273 | .bottom { 274 | color: #FD8B25; 275 | } 276 | 277 | /* This is the class used for the dark-background areas. */ 278 | .ribbon { 279 | background: #2d3e50; 280 | color: #aaa; 281 | } 282 | 283 | /* This is the class used for the footer */ 284 | .footer { 285 | background: #444; 286 | color: #B6B1B1; 287 | background-image: url(../../img/swagger-logo-gray.png); 288 | background-repeat: no-repeat; 289 | background-position: 10px 12px; 290 | } 291 | 292 | .footer .emphasis { 293 | font-style: italic; 294 | } 295 | 296 | @media (min-width: 35em) { 297 | 298 | /* positioning the bg image - MM */ 299 | .footer { 300 | background-position: 9px 8px; 301 | } 302 | 303 | 304 | /* 305 | * -- TABLET (AND UP) MEDIA QUERIES -- 306 | * On tablets and other medium-sized devices, we want to customize some 307 | * of the mobile styles. 308 | */ 309 | @media (min-width: 48em) { 310 | 311 | /* We increase the body font size */ 312 | body { 313 | font-size: 16px; 314 | } 315 | /* We want to give the content area some more padding */ 316 | .content { 317 | padding: 1em; 318 | background-color: #fff; 319 | } 320 | 321 | /* We can align the menu header to the left, but float the 322 | menu items to the right. */ 323 | .home-menu { 324 | text-align: left; 325 | } 326 | .home-menu ul { 327 | float: right; 328 | } 329 | 330 | /* We increase the height of the splash-container */ 331 | /* .splash-container { 332 | height: 500px; 333 | }*/ 334 | 335 | 336 | 337 | /* We decrease the width of the .splash, since we have more width 338 | to work with */ 339 | 340 | 341 | .splash-container { 342 | background: #DBEFFF; /*url('../../img/congruent_pentagon.png') center;*/ 343 | background-image: url(../../img/partyHat-lg.png); 344 | background-repeat: no-repeat; 345 | background-position: 90px 70px; 346 | 347 | } 348 | .splash { 349 | width: 80%; 350 | height: 50%; 351 | } 352 | 353 | .splash-head { 354 | font-size: 3em; 355 | font-family: 'Bree Serif', serif; 356 | } 357 | 358 | .party { 359 | background-image: url(../../img/swagger-logo-gray.png); 360 | background-repeat: no-repeat; 361 | height: 100px; 362 | width: 80px; 363 | display: inline; 364 | float: left; 365 | } 366 | 367 | /* adjusting for proportional sizing */ 368 | .content-wrapper { 369 | /* These styles are required for the "scroll-over" effect */ 370 | position: absolute; 371 | top: 60%; 372 | width: 100%; 373 | 374 | /* We remove the border-separator assigned to .l-box-lrg */ 375 | .l-box-lrg { 376 | border: none; 377 | } 378 | 379 | /* This is the class used for the footer -MM */ 380 | .footer { 381 | background-position: 12px 13px; 382 | } 383 | 384 | 385 | } 386 | 387 | /* 388 | * -- DESKTOP (AND UP) MEDIA QUERIES -- 389 | * On desktops and other large devices, we want to over-ride some 390 | * of the mobile and tablet styles. 391 | */ 392 | @media (min-width: 78em) { 393 | .splash-container { 394 | background: #DBEFFF; /*url('../../img/congruent_pentagon.png') center;*/ 395 | background-image: url(../../img/partyHat-lg.png); 396 | background-repeat: no-repeat; 397 | background-position: 180px 90px; 398 | } 399 | 400 | /* We increase the header font size even more */ 401 | .splash-head { 402 | font-size: 300%; 403 | } 404 | .footer { 405 | background-position: 18px 13px; 406 | } 407 | 408 | } 409 | -------------------------------------------------------------------------------- /css/main-grid-old-ie.css: -------------------------------------------------------------------------------- 1 | .pure-u-sm-1, 2 | .pure-u-sm-1-1, 3 | .pure-u-sm-1-2, 4 | .pure-u-sm-1-3, 5 | .pure-u-sm-2-3, 6 | .pure-u-sm-1-4, 7 | .pure-u-sm-3-4, 8 | .pure-u-sm-1-5, 9 | .pure-u-sm-2-5, 10 | .pure-u-sm-3-5, 11 | .pure-u-sm-4-5, 12 | .pure-u-sm-5-5, 13 | .pure-u-sm-1-6, 14 | .pure-u-sm-5-6, 15 | .pure-u-sm-1-8, 16 | .pure-u-sm-3-8, 17 | .pure-u-sm-5-8, 18 | .pure-u-sm-7-8, 19 | .pure-u-sm-1-12, 20 | .pure-u-sm-5-12, 21 | .pure-u-sm-7-12, 22 | .pure-u-sm-11-12, 23 | .pure-u-sm-1-24, 24 | .pure-u-sm-2-24, 25 | .pure-u-sm-3-24, 26 | .pure-u-sm-4-24, 27 | .pure-u-sm-5-24, 28 | .pure-u-sm-6-24, 29 | .pure-u-sm-7-24, 30 | .pure-u-sm-8-24, 31 | .pure-u-sm-9-24, 32 | .pure-u-sm-10-24, 33 | .pure-u-sm-11-24, 34 | .pure-u-sm-12-24, 35 | .pure-u-sm-13-24, 36 | .pure-u-sm-14-24, 37 | .pure-u-sm-15-24, 38 | .pure-u-sm-16-24, 39 | .pure-u-sm-17-24, 40 | .pure-u-sm-18-24, 41 | .pure-u-sm-19-24, 42 | .pure-u-sm-20-24, 43 | .pure-u-sm-21-24, 44 | .pure-u-sm-22-24, 45 | .pure-u-sm-23-24, 46 | .pure-u-sm-24-24 { 47 | display: inline-block; 48 | *display: inline; 49 | zoom: 1; 50 | letter-spacing: normal; 51 | word-spacing: normal; 52 | vertical-align: top; 53 | text-rendering: auto; 54 | } 55 | 56 | .pure-u-sm-1-24 { 57 | width: 4.1667%; 58 | *width: 4.1357%; 59 | } 60 | 61 | .pure-u-sm-1-12, 62 | .pure-u-sm-2-24 { 63 | width: 8.3333%; 64 | *width: 8.3023%; 65 | } 66 | 67 | .pure-u-sm-1-8, 68 | .pure-u-sm-3-24 { 69 | width: 12.5000%; 70 | *width: 12.4690%; 71 | } 72 | 73 | .pure-u-sm-1-6, 74 | .pure-u-sm-4-24 { 75 | width: 16.6667%; 76 | *width: 16.6357%; 77 | } 78 | 79 | .pure-u-sm-1-5 { 80 | width: 20%; 81 | *width: 19.9690%; 82 | } 83 | 84 | .pure-u-sm-5-24 { 85 | width: 20.8333%; 86 | *width: 20.8023%; 87 | } 88 | 89 | .pure-u-sm-1-4, 90 | .pure-u-sm-6-24 { 91 | width: 25%; 92 | *width: 24.9690%; 93 | } 94 | 95 | .pure-u-sm-7-24 { 96 | width: 29.1667%; 97 | *width: 29.1357%; 98 | } 99 | 100 | .pure-u-sm-1-3, 101 | .pure-u-sm-8-24 { 102 | width: 33.3333%; 103 | *width: 33.3023%; 104 | } 105 | 106 | .pure-u-sm-3-8, 107 | .pure-u-sm-9-24 { 108 | width: 37.5000%; 109 | *width: 37.4690%; 110 | } 111 | 112 | .pure-u-sm-2-5 { 113 | width: 40%; 114 | *width: 39.9690%; 115 | } 116 | 117 | .pure-u-sm-5-12, 118 | .pure-u-sm-10-24 { 119 | width: 41.6667%; 120 | *width: 41.6357%; 121 | } 122 | 123 | .pure-u-sm-11-24 { 124 | width: 45.8333%; 125 | *width: 45.8023%; 126 | } 127 | 128 | .pure-u-sm-1-2, 129 | .pure-u-sm-12-24 { 130 | width: 50%; 131 | *width: 49.9690%; 132 | } 133 | 134 | .pure-u-sm-13-24 { 135 | width: 54.1667%; 136 | *width: 54.1357%; 137 | } 138 | 139 | .pure-u-sm-7-12, 140 | .pure-u-sm-14-24 { 141 | width: 58.3333%; 142 | *width: 58.3023%; 143 | } 144 | 145 | .pure-u-sm-3-5 { 146 | width: 60%; 147 | *width: 59.9690%; 148 | } 149 | 150 | .pure-u-sm-5-8, 151 | .pure-u-sm-15-24 { 152 | width: 62.5000%; 153 | *width: 62.4690%; 154 | } 155 | 156 | .pure-u-sm-2-3, 157 | .pure-u-sm-16-24 { 158 | width: 66.6667%; 159 | *width: 66.6357%; 160 | } 161 | 162 | .pure-u-sm-17-24 { 163 | width: 70.8333%; 164 | *width: 70.8023%; 165 | } 166 | 167 | .pure-u-sm-3-4, 168 | .pure-u-sm-18-24 { 169 | width: 75%; 170 | *width: 74.9690%; 171 | } 172 | 173 | .pure-u-sm-19-24 { 174 | width: 79.1667%; 175 | *width: 79.1357%; 176 | } 177 | 178 | .pure-u-sm-4-5 { 179 | width: 80%; 180 | *width: 79.9690%; 181 | } 182 | 183 | .pure-u-sm-5-6, 184 | .pure-u-sm-20-24 { 185 | width: 83.3333%; 186 | *width: 83.3023%; 187 | } 188 | 189 | .pure-u-sm-7-8, 190 | .pure-u-sm-21-24 { 191 | width: 87.5000%; 192 | *width: 87.4690%; 193 | } 194 | 195 | .pure-u-sm-11-12, 196 | .pure-u-sm-22-24 { 197 | width: 91.6667%; 198 | *width: 91.6357%; 199 | } 200 | 201 | .pure-u-sm-23-24 { 202 | width: 95.8333%; 203 | *width: 95.8023%; 204 | } 205 | 206 | .pure-u-sm-1, 207 | .pure-u-sm-1-1, 208 | .pure-u-sm-5-5, 209 | .pure-u-sm-24-24 { 210 | width: 100%; 211 | } 212 | 213 | .pure-u-med-1, 214 | .pure-u-med-1-1, 215 | .pure-u-med-1-2, 216 | .pure-u-med-1-3, 217 | .pure-u-med-2-3, 218 | .pure-u-med-1-4, 219 | .pure-u-med-3-4, 220 | .pure-u-med-1-5, 221 | .pure-u-med-2-5, 222 | .pure-u-med-3-5, 223 | .pure-u-med-4-5, 224 | .pure-u-med-5-5, 225 | .pure-u-med-1-6, 226 | .pure-u-med-5-6, 227 | .pure-u-med-1-8, 228 | .pure-u-med-3-8, 229 | .pure-u-med-5-8, 230 | .pure-u-med-7-8, 231 | .pure-u-med-1-12, 232 | .pure-u-med-5-12, 233 | .pure-u-med-7-12, 234 | .pure-u-med-11-12, 235 | .pure-u-med-1-24, 236 | .pure-u-med-2-24, 237 | .pure-u-med-3-24, 238 | .pure-u-med-4-24, 239 | .pure-u-med-5-24, 240 | .pure-u-med-6-24, 241 | .pure-u-med-7-24, 242 | .pure-u-med-8-24, 243 | .pure-u-med-9-24, 244 | .pure-u-med-10-24, 245 | .pure-u-med-11-24, 246 | .pure-u-med-12-24, 247 | .pure-u-med-13-24, 248 | .pure-u-med-14-24, 249 | .pure-u-med-15-24, 250 | .pure-u-med-16-24, 251 | .pure-u-med-17-24, 252 | .pure-u-med-18-24, 253 | .pure-u-med-19-24, 254 | .pure-u-med-20-24, 255 | .pure-u-med-21-24, 256 | .pure-u-med-22-24, 257 | .pure-u-med-23-24, 258 | .pure-u-med-24-24 { 259 | display: inline-block; 260 | *display: inline; 261 | zoom: 1; 262 | letter-spacing: normal; 263 | word-spacing: normal; 264 | vertical-align: top; 265 | text-rendering: auto; 266 | } 267 | 268 | .pure-u-med-1-24 { 269 | width: 4.1667%; 270 | *width: 4.1357%; 271 | } 272 | 273 | .pure-u-med-1-12, 274 | .pure-u-med-2-24 { 275 | width: 8.3333%; 276 | *width: 8.3023%; 277 | } 278 | 279 | .pure-u-med-1-8, 280 | .pure-u-med-3-24 { 281 | width: 12.5000%; 282 | *width: 12.4690%; 283 | } 284 | 285 | .pure-u-med-1-6, 286 | .pure-u-med-4-24 { 287 | width: 16.6667%; 288 | *width: 16.6357%; 289 | } 290 | 291 | .pure-u-med-1-5 { 292 | width: 20%; 293 | *width: 19.9690%; 294 | } 295 | 296 | .pure-u-med-5-24 { 297 | width: 20.8333%; 298 | *width: 20.8023%; 299 | } 300 | 301 | .pure-u-med-1-4, 302 | .pure-u-med-6-24 { 303 | width: 25%; 304 | *width: 24.9690%; 305 | } 306 | 307 | .pure-u-med-7-24 { 308 | width: 29.1667%; 309 | *width: 29.1357%; 310 | } 311 | 312 | .pure-u-med-1-3, 313 | .pure-u-med-8-24 { 314 | width: 33.3333%; 315 | *width: 33.3023%; 316 | } 317 | 318 | .pure-u-med-3-8, 319 | .pure-u-med-9-24 { 320 | width: 37.5000%; 321 | *width: 37.4690%; 322 | } 323 | 324 | .pure-u-med-2-5 { 325 | width: 40%; 326 | *width: 39.9690%; 327 | } 328 | 329 | .pure-u-med-5-12, 330 | .pure-u-med-10-24 { 331 | width: 41.6667%; 332 | *width: 41.6357%; 333 | } 334 | 335 | .pure-u-med-11-24 { 336 | width: 45.8333%; 337 | *width: 45.8023%; 338 | } 339 | 340 | .pure-u-med-1-2, 341 | .pure-u-med-12-24 { 342 | width: 50%; 343 | *width: 49.9690%; 344 | } 345 | 346 | .pure-u-med-13-24 { 347 | width: 54.1667%; 348 | *width: 54.1357%; 349 | } 350 | 351 | .pure-u-med-7-12, 352 | .pure-u-med-14-24 { 353 | width: 58.3333%; 354 | *width: 58.3023%; 355 | } 356 | 357 | .pure-u-med-3-5 { 358 | width: 60%; 359 | *width: 59.9690%; 360 | } 361 | 362 | .pure-u-med-5-8, 363 | .pure-u-med-15-24 { 364 | width: 62.5000%; 365 | *width: 62.4690%; 366 | } 367 | 368 | .pure-u-med-2-3, 369 | .pure-u-med-16-24 { 370 | width: 66.6667%; 371 | *width: 66.6357%; 372 | } 373 | 374 | .pure-u-med-17-24 { 375 | width: 70.8333%; 376 | *width: 70.8023%; 377 | } 378 | 379 | .pure-u-med-3-4, 380 | .pure-u-med-18-24 { 381 | width: 75%; 382 | *width: 74.9690%; 383 | } 384 | 385 | .pure-u-med-19-24 { 386 | width: 79.1667%; 387 | *width: 79.1357%; 388 | } 389 | 390 | .pure-u-med-4-5 { 391 | width: 80%; 392 | *width: 79.9690%; 393 | } 394 | 395 | .pure-u-med-5-6, 396 | .pure-u-med-20-24 { 397 | width: 83.3333%; 398 | *width: 83.3023%; 399 | } 400 | 401 | .pure-u-med-7-8, 402 | .pure-u-med-21-24 { 403 | width: 87.5000%; 404 | *width: 87.4690%; 405 | } 406 | 407 | .pure-u-med-11-12, 408 | .pure-u-med-22-24 { 409 | width: 91.6667%; 410 | *width: 91.6357%; 411 | } 412 | 413 | .pure-u-med-23-24 { 414 | width: 95.8333%; 415 | *width: 95.8023%; 416 | } 417 | 418 | .pure-u-med-1, 419 | .pure-u-med-1-1, 420 | .pure-u-med-5-5, 421 | .pure-u-med-24-24 { 422 | width: 100%; 423 | } 424 | 425 | .pure-u-lrg-1, 426 | .pure-u-lrg-1-1, 427 | .pure-u-lrg-1-2, 428 | .pure-u-lrg-1-3, 429 | .pure-u-lrg-2-3, 430 | .pure-u-lrg-1-4, 431 | .pure-u-lrg-3-4, 432 | .pure-u-lrg-1-5, 433 | .pure-u-lrg-2-5, 434 | .pure-u-lrg-3-5, 435 | .pure-u-lrg-4-5, 436 | .pure-u-lrg-5-5, 437 | .pure-u-lrg-1-6, 438 | .pure-u-lrg-5-6, 439 | .pure-u-lrg-1-8, 440 | .pure-u-lrg-3-8, 441 | .pure-u-lrg-5-8, 442 | .pure-u-lrg-7-8, 443 | .pure-u-lrg-1-12, 444 | .pure-u-lrg-5-12, 445 | .pure-u-lrg-7-12, 446 | .pure-u-lrg-11-12, 447 | .pure-u-lrg-1-24, 448 | .pure-u-lrg-2-24, 449 | .pure-u-lrg-3-24, 450 | .pure-u-lrg-4-24, 451 | .pure-u-lrg-5-24, 452 | .pure-u-lrg-6-24, 453 | .pure-u-lrg-7-24, 454 | .pure-u-lrg-8-24, 455 | .pure-u-lrg-9-24, 456 | .pure-u-lrg-10-24, 457 | .pure-u-lrg-11-24, 458 | .pure-u-lrg-12-24, 459 | .pure-u-lrg-13-24, 460 | .pure-u-lrg-14-24, 461 | .pure-u-lrg-15-24, 462 | .pure-u-lrg-16-24, 463 | .pure-u-lrg-17-24, 464 | .pure-u-lrg-18-24, 465 | .pure-u-lrg-19-24, 466 | .pure-u-lrg-20-24, 467 | .pure-u-lrg-21-24, 468 | .pure-u-lrg-22-24, 469 | .pure-u-lrg-23-24, 470 | .pure-u-lrg-24-24 { 471 | display: inline-block; 472 | *display: inline; 473 | zoom: 1; 474 | letter-spacing: normal; 475 | word-spacing: normal; 476 | vertical-align: top; 477 | text-rendering: auto; 478 | } 479 | 480 | .pure-u-lrg-1-24 { 481 | width: 4.1667%; 482 | *width: 4.1357%; 483 | } 484 | 485 | .pure-u-lrg-1-12, 486 | .pure-u-lrg-2-24 { 487 | width: 8.3333%; 488 | *width: 8.3023%; 489 | } 490 | 491 | .pure-u-lrg-1-8, 492 | .pure-u-lrg-3-24 { 493 | width: 12.5000%; 494 | *width: 12.4690%; 495 | } 496 | 497 | .pure-u-lrg-1-6, 498 | .pure-u-lrg-4-24 { 499 | width: 16.6667%; 500 | *width: 16.6357%; 501 | } 502 | 503 | .pure-u-lrg-1-5 { 504 | width: 20%; 505 | *width: 19.9690%; 506 | } 507 | 508 | .pure-u-lrg-5-24 { 509 | width: 20.8333%; 510 | *width: 20.8023%; 511 | } 512 | 513 | .pure-u-lrg-1-4, 514 | .pure-u-lrg-6-24 { 515 | width: 25%; 516 | *width: 24.9690%; 517 | } 518 | 519 | .pure-u-lrg-7-24 { 520 | width: 29.1667%; 521 | *width: 29.1357%; 522 | } 523 | 524 | .pure-u-lrg-1-3, 525 | .pure-u-lrg-8-24 { 526 | width: 33.3333%; 527 | *width: 33.3023%; 528 | } 529 | 530 | .pure-u-lrg-3-8, 531 | .pure-u-lrg-9-24 { 532 | width: 37.5000%; 533 | *width: 37.4690%; 534 | } 535 | 536 | .pure-u-lrg-2-5 { 537 | width: 40%; 538 | *width: 39.9690%; 539 | } 540 | 541 | .pure-u-lrg-5-12, 542 | .pure-u-lrg-10-24 { 543 | width: 41.6667%; 544 | *width: 41.6357%; 545 | } 546 | 547 | .pure-u-lrg-11-24 { 548 | width: 45.8333%; 549 | *width: 45.8023%; 550 | } 551 | 552 | .pure-u-lrg-1-2, 553 | .pure-u-lrg-12-24 { 554 | width: 50%; 555 | *width: 49.9690%; 556 | } 557 | 558 | .pure-u-lrg-13-24 { 559 | width: 54.1667%; 560 | *width: 54.1357%; 561 | } 562 | 563 | .pure-u-lrg-7-12, 564 | .pure-u-lrg-14-24 { 565 | width: 58.3333%; 566 | *width: 58.3023%; 567 | } 568 | 569 | .pure-u-lrg-3-5 { 570 | width: 60%; 571 | *width: 59.9690%; 572 | } 573 | 574 | .pure-u-lrg-5-8, 575 | .pure-u-lrg-15-24 { 576 | width: 62.5000%; 577 | *width: 62.4690%; 578 | } 579 | 580 | .pure-u-lrg-2-3, 581 | .pure-u-lrg-16-24 { 582 | width: 66.6667%; 583 | *width: 66.6357%; 584 | } 585 | 586 | .pure-u-lrg-17-24 { 587 | width: 70.8333%; 588 | *width: 70.8023%; 589 | } 590 | 591 | .pure-u-lrg-3-4, 592 | .pure-u-lrg-18-24 { 593 | width: 75%; 594 | *width: 74.9690%; 595 | } 596 | 597 | .pure-u-lrg-19-24 { 598 | width: 79.1667%; 599 | *width: 79.1357%; 600 | } 601 | 602 | .pure-u-lrg-4-5 { 603 | width: 80%; 604 | *width: 79.9690%; 605 | } 606 | 607 | .pure-u-lrg-5-6, 608 | .pure-u-lrg-20-24 { 609 | width: 83.3333%; 610 | *width: 83.3023%; 611 | } 612 | 613 | .pure-u-lrg-7-8, 614 | .pure-u-lrg-21-24 { 615 | width: 87.5000%; 616 | *width: 87.4690%; 617 | } 618 | 619 | .pure-u-lrg-11-12, 620 | .pure-u-lrg-22-24 { 621 | width: 91.6667%; 622 | *width: 91.6357%; 623 | } 624 | 625 | .pure-u-lrg-23-24 { 626 | width: 95.8333%; 627 | *width: 95.8023%; 628 | } 629 | 630 | .pure-u-lrg-1, 631 | .pure-u-lrg-1-1, 632 | .pure-u-lrg-5-5, 633 | .pure-u-lrg-24-24 { 634 | width: 100%; 635 | } -------------------------------------------------------------------------------- /css/main-grid.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 35.5em) { 2 | .pure-u-sm-1, 3 | .pure-u-sm-1-1, 4 | .pure-u-sm-1-2, 5 | .pure-u-sm-1-3, 6 | .pure-u-sm-2-3, 7 | .pure-u-sm-1-4, 8 | .pure-u-sm-3-4, 9 | .pure-u-sm-1-5, 10 | .pure-u-sm-2-5, 11 | .pure-u-sm-3-5, 12 | .pure-u-sm-4-5, 13 | .pure-u-sm-5-5, 14 | .pure-u-sm-1-6, 15 | .pure-u-sm-5-6, 16 | .pure-u-sm-1-8, 17 | .pure-u-sm-3-8, 18 | .pure-u-sm-5-8, 19 | .pure-u-sm-7-8, 20 | .pure-u-sm-1-12, 21 | .pure-u-sm-5-12, 22 | .pure-u-sm-7-12, 23 | .pure-u-sm-11-12, 24 | .pure-u-sm-1-24, 25 | .pure-u-sm-2-24, 26 | .pure-u-sm-3-24, 27 | .pure-u-sm-4-24, 28 | .pure-u-sm-5-24, 29 | .pure-u-sm-6-24, 30 | .pure-u-sm-7-24, 31 | .pure-u-sm-8-24, 32 | .pure-u-sm-9-24, 33 | .pure-u-sm-10-24, 34 | .pure-u-sm-11-24, 35 | .pure-u-sm-12-24, 36 | .pure-u-sm-13-24, 37 | .pure-u-sm-14-24, 38 | .pure-u-sm-15-24, 39 | .pure-u-sm-16-24, 40 | .pure-u-sm-17-24, 41 | .pure-u-sm-18-24, 42 | .pure-u-sm-19-24, 43 | .pure-u-sm-20-24, 44 | .pure-u-sm-21-24, 45 | .pure-u-sm-22-24, 46 | .pure-u-sm-23-24, 47 | .pure-u-sm-24-24 { 48 | display: inline-block; 49 | *display: inline; 50 | zoom: 1; 51 | letter-spacing: normal; 52 | word-spacing: normal; 53 | vertical-align: top; 54 | text-rendering: auto; 55 | } 56 | 57 | .pure-u-sm-1-24 { 58 | width: 4.1667%; 59 | *width: 4.1357%; 60 | } 61 | 62 | .pure-u-sm-1-12, 63 | .pure-u-sm-2-24 { 64 | width: 8.3333%; 65 | *width: 8.3023%; 66 | } 67 | 68 | .pure-u-sm-1-8, 69 | .pure-u-sm-3-24 { 70 | width: 12.5000%; 71 | *width: 12.4690%; 72 | } 73 | 74 | .pure-u-sm-1-6, 75 | .pure-u-sm-4-24 { 76 | width: 16.6667%; 77 | *width: 16.6357%; 78 | } 79 | 80 | .pure-u-sm-1-5 { 81 | width: 20%; 82 | *width: 19.9690%; 83 | } 84 | 85 | .pure-u-sm-5-24 { 86 | width: 20.8333%; 87 | *width: 20.8023%; 88 | } 89 | 90 | .pure-u-sm-1-4, 91 | .pure-u-sm-6-24 { 92 | width: 25%; 93 | *width: 24.9690%; 94 | } 95 | 96 | .pure-u-sm-7-24 { 97 | width: 29.1667%; 98 | *width: 29.1357%; 99 | } 100 | 101 | .pure-u-sm-1-3, 102 | .pure-u-sm-8-24 { 103 | width: 33.3333%; 104 | *width: 33.3023%; 105 | } 106 | 107 | .pure-u-sm-3-8, 108 | .pure-u-sm-9-24 { 109 | width: 37.5000%; 110 | *width: 37.4690%; 111 | } 112 | 113 | .pure-u-sm-2-5 { 114 | width: 40%; 115 | *width: 39.9690%; 116 | } 117 | 118 | .pure-u-sm-5-12, 119 | .pure-u-sm-10-24 { 120 | width: 41.6667%; 121 | *width: 41.6357%; 122 | } 123 | 124 | .pure-u-sm-11-24 { 125 | width: 45.8333%; 126 | *width: 45.8023%; 127 | } 128 | 129 | .pure-u-sm-1-2, 130 | .pure-u-sm-12-24 { 131 | width: 50%; 132 | *width: 49.9690%; 133 | } 134 | 135 | .pure-u-sm-13-24 { 136 | width: 54.1667%; 137 | *width: 54.1357%; 138 | } 139 | 140 | .pure-u-sm-7-12, 141 | .pure-u-sm-14-24 { 142 | width: 58.3333%; 143 | *width: 58.3023%; 144 | } 145 | 146 | .pure-u-sm-3-5 { 147 | width: 60%; 148 | *width: 59.9690%; 149 | } 150 | 151 | .pure-u-sm-5-8, 152 | .pure-u-sm-15-24 { 153 | width: 62.5000%; 154 | *width: 62.4690%; 155 | } 156 | 157 | .pure-u-sm-2-3, 158 | .pure-u-sm-16-24 { 159 | width: 66.6667%; 160 | *width: 66.6357%; 161 | } 162 | 163 | .pure-u-sm-17-24 { 164 | width: 70.8333%; 165 | *width: 70.8023%; 166 | } 167 | 168 | .pure-u-sm-3-4, 169 | .pure-u-sm-18-24 { 170 | width: 75%; 171 | *width: 74.9690%; 172 | } 173 | 174 | .pure-u-sm-19-24 { 175 | width: 79.1667%; 176 | *width: 79.1357%; 177 | } 178 | 179 | .pure-u-sm-4-5 { 180 | width: 80%; 181 | *width: 79.9690%; 182 | } 183 | 184 | .pure-u-sm-5-6, 185 | .pure-u-sm-20-24 { 186 | width: 83.3333%; 187 | *width: 83.3023%; 188 | } 189 | 190 | .pure-u-sm-7-8, 191 | .pure-u-sm-21-24 { 192 | width: 87.5000%; 193 | *width: 87.4690%; 194 | } 195 | 196 | .pure-u-sm-11-12, 197 | .pure-u-sm-22-24 { 198 | width: 91.6667%; 199 | *width: 91.6357%; 200 | } 201 | 202 | .pure-u-sm-23-24 { 203 | width: 95.8333%; 204 | *width: 95.8023%; 205 | } 206 | 207 | .pure-u-sm-1, 208 | .pure-u-sm-1-1, 209 | .pure-u-sm-5-5, 210 | .pure-u-sm-24-24 { 211 | width: 100%; 212 | } 213 | } 214 | 215 | @media screen and (min-width: 48em) { 216 | .pure-u-med-1, 217 | .pure-u-med-1-1, 218 | .pure-u-med-1-2, 219 | .pure-u-med-1-3, 220 | .pure-u-med-2-3, 221 | .pure-u-med-1-4, 222 | .pure-u-med-3-4, 223 | .pure-u-med-1-5, 224 | .pure-u-med-2-5, 225 | .pure-u-med-3-5, 226 | .pure-u-med-4-5, 227 | .pure-u-med-5-5, 228 | .pure-u-med-1-6, 229 | .pure-u-med-5-6, 230 | .pure-u-med-1-8, 231 | .pure-u-med-3-8, 232 | .pure-u-med-5-8, 233 | .pure-u-med-7-8, 234 | .pure-u-med-1-12, 235 | .pure-u-med-5-12, 236 | .pure-u-med-7-12, 237 | .pure-u-med-11-12, 238 | .pure-u-med-1-24, 239 | .pure-u-med-2-24, 240 | .pure-u-med-3-24, 241 | .pure-u-med-4-24, 242 | .pure-u-med-5-24, 243 | .pure-u-med-6-24, 244 | .pure-u-med-7-24, 245 | .pure-u-med-8-24, 246 | .pure-u-med-9-24, 247 | .pure-u-med-10-24, 248 | .pure-u-med-11-24, 249 | .pure-u-med-12-24, 250 | .pure-u-med-13-24, 251 | .pure-u-med-14-24, 252 | .pure-u-med-15-24, 253 | .pure-u-med-16-24, 254 | .pure-u-med-17-24, 255 | .pure-u-med-18-24, 256 | .pure-u-med-19-24, 257 | .pure-u-med-20-24, 258 | .pure-u-med-21-24, 259 | .pure-u-med-22-24, 260 | .pure-u-med-23-24, 261 | .pure-u-med-24-24 { 262 | display: inline-block; 263 | *display: inline; 264 | zoom: 1; 265 | letter-spacing: normal; 266 | word-spacing: normal; 267 | vertical-align: top; 268 | text-rendering: auto; 269 | } 270 | 271 | .pure-u-med-1-24 { 272 | width: 4.1667%; 273 | *width: 4.1357%; 274 | } 275 | 276 | .pure-u-med-1-12, 277 | .pure-u-med-2-24 { 278 | width: 8.3333%; 279 | *width: 8.3023%; 280 | } 281 | 282 | .pure-u-med-1-8, 283 | .pure-u-med-3-24 { 284 | width: 12.5000%; 285 | *width: 12.4690%; 286 | } 287 | 288 | .pure-u-med-1-6, 289 | .pure-u-med-4-24 { 290 | width: 16.6667%; 291 | *width: 16.6357%; 292 | } 293 | 294 | .pure-u-med-1-5 { 295 | width: 20%; 296 | *width: 19.9690%; 297 | } 298 | 299 | .pure-u-med-5-24 { 300 | width: 20.8333%; 301 | *width: 20.8023%; 302 | } 303 | 304 | .pure-u-med-1-4, 305 | .pure-u-med-6-24 { 306 | width: 25%; 307 | *width: 24.9690%; 308 | } 309 | 310 | .pure-u-med-7-24 { 311 | width: 29.1667%; 312 | *width: 29.1357%; 313 | } 314 | 315 | .pure-u-med-1-3, 316 | .pure-u-med-8-24 { 317 | width: 33.3333%; 318 | *width: 33.3023%; 319 | } 320 | 321 | .pure-u-med-3-8, 322 | .pure-u-med-9-24 { 323 | width: 37.5000%; 324 | *width: 37.4690%; 325 | } 326 | 327 | .pure-u-med-2-5 { 328 | width: 40%; 329 | *width: 39.9690%; 330 | } 331 | 332 | .pure-u-med-5-12, 333 | .pure-u-med-10-24 { 334 | width: 41.6667%; 335 | *width: 41.6357%; 336 | } 337 | 338 | .pure-u-med-11-24 { 339 | width: 45.8333%; 340 | *width: 45.8023%; 341 | } 342 | 343 | .pure-u-med-1-2, 344 | .pure-u-med-12-24 { 345 | width: 50%; 346 | *width: 49.9690%; 347 | } 348 | 349 | .pure-u-med-13-24 { 350 | width: 54.1667%; 351 | *width: 54.1357%; 352 | } 353 | 354 | .pure-u-med-7-12, 355 | .pure-u-med-14-24 { 356 | width: 58.3333%; 357 | *width: 58.3023%; 358 | } 359 | 360 | .pure-u-med-3-5 { 361 | width: 60%; 362 | *width: 59.9690%; 363 | } 364 | 365 | .pure-u-med-5-8, 366 | .pure-u-med-15-24 { 367 | width: 62.5000%; 368 | *width: 62.4690%; 369 | } 370 | 371 | .pure-u-med-2-3, 372 | .pure-u-med-16-24 { 373 | width: 66.6667%; 374 | *width: 66.6357%; 375 | } 376 | 377 | .pure-u-med-17-24 { 378 | width: 70.8333%; 379 | *width: 70.8023%; 380 | } 381 | 382 | .pure-u-med-3-4, 383 | .pure-u-med-18-24 { 384 | width: 75%; 385 | *width: 74.9690%; 386 | } 387 | 388 | .pure-u-med-19-24 { 389 | width: 79.1667%; 390 | *width: 79.1357%; 391 | } 392 | 393 | .pure-u-med-4-5 { 394 | width: 80%; 395 | *width: 79.9690%; 396 | } 397 | 398 | .pure-u-med-5-6, 399 | .pure-u-med-20-24 { 400 | width: 83.3333%; 401 | *width: 83.3023%; 402 | } 403 | 404 | .pure-u-med-7-8, 405 | .pure-u-med-21-24 { 406 | width: 87.5000%; 407 | *width: 87.4690%; 408 | } 409 | 410 | .pure-u-med-11-12, 411 | .pure-u-med-22-24 { 412 | width: 91.6667%; 413 | *width: 91.6357%; 414 | } 415 | 416 | .pure-u-med-23-24 { 417 | width: 95.8333%; 418 | *width: 95.8023%; 419 | } 420 | 421 | .pure-u-med-1, 422 | .pure-u-med-1-1, 423 | .pure-u-med-5-5, 424 | .pure-u-med-24-24 { 425 | width: 100%; 426 | } 427 | } 428 | 429 | @media screen and (min-width: 58em) { 430 | .pure-u-lrg-1, 431 | .pure-u-lrg-1-1, 432 | .pure-u-lrg-1-2, 433 | .pure-u-lrg-1-3, 434 | .pure-u-lrg-2-3, 435 | .pure-u-lrg-1-4, 436 | .pure-u-lrg-3-4, 437 | .pure-u-lrg-1-5, 438 | .pure-u-lrg-2-5, 439 | .pure-u-lrg-3-5, 440 | .pure-u-lrg-4-5, 441 | .pure-u-lrg-5-5, 442 | .pure-u-lrg-1-6, 443 | .pure-u-lrg-5-6, 444 | .pure-u-lrg-1-8, 445 | .pure-u-lrg-3-8, 446 | .pure-u-lrg-5-8, 447 | .pure-u-lrg-7-8, 448 | .pure-u-lrg-1-12, 449 | .pure-u-lrg-5-12, 450 | .pure-u-lrg-7-12, 451 | .pure-u-lrg-11-12, 452 | .pure-u-lrg-1-24, 453 | .pure-u-lrg-2-24, 454 | .pure-u-lrg-3-24, 455 | .pure-u-lrg-4-24, 456 | .pure-u-lrg-5-24, 457 | .pure-u-lrg-6-24, 458 | .pure-u-lrg-7-24, 459 | .pure-u-lrg-8-24, 460 | .pure-u-lrg-9-24, 461 | .pure-u-lrg-10-24, 462 | .pure-u-lrg-11-24, 463 | .pure-u-lrg-12-24, 464 | .pure-u-lrg-13-24, 465 | .pure-u-lrg-14-24, 466 | .pure-u-lrg-15-24, 467 | .pure-u-lrg-16-24, 468 | .pure-u-lrg-17-24, 469 | .pure-u-lrg-18-24, 470 | .pure-u-lrg-19-24, 471 | .pure-u-lrg-20-24, 472 | .pure-u-lrg-21-24, 473 | .pure-u-lrg-22-24, 474 | .pure-u-lrg-23-24, 475 | .pure-u-lrg-24-24 { 476 | display: inline-block; 477 | *display: inline; 478 | zoom: 1; 479 | letter-spacing: normal; 480 | word-spacing: normal; 481 | vertical-align: top; 482 | text-rendering: auto; 483 | } 484 | 485 | .pure-u-lrg-1-24 { 486 | width: 4.1667%; 487 | *width: 4.1357%; 488 | } 489 | 490 | .pure-u-lrg-1-12, 491 | .pure-u-lrg-2-24 { 492 | width: 8.3333%; 493 | *width: 8.3023%; 494 | } 495 | 496 | .pure-u-lrg-1-8, 497 | .pure-u-lrg-3-24 { 498 | width: 12.5000%; 499 | *width: 12.4690%; 500 | } 501 | 502 | .pure-u-lrg-1-6, 503 | .pure-u-lrg-4-24 { 504 | width: 16.6667%; 505 | *width: 16.6357%; 506 | } 507 | 508 | .pure-u-lrg-1-5 { 509 | width: 20%; 510 | *width: 19.9690%; 511 | } 512 | 513 | .pure-u-lrg-5-24 { 514 | width: 20.8333%; 515 | *width: 20.8023%; 516 | } 517 | 518 | .pure-u-lrg-1-4, 519 | .pure-u-lrg-6-24 { 520 | width: 25%; 521 | *width: 24.9690%; 522 | } 523 | 524 | .pure-u-lrg-7-24 { 525 | width: 29.1667%; 526 | *width: 29.1357%; 527 | } 528 | 529 | .pure-u-lrg-1-3, 530 | .pure-u-lrg-8-24 { 531 | width: 33.3333%; 532 | *width: 33.3023%; 533 | } 534 | 535 | .pure-u-lrg-3-8, 536 | .pure-u-lrg-9-24 { 537 | width: 37.5000%; 538 | *width: 37.4690%; 539 | } 540 | 541 | .pure-u-lrg-2-5 { 542 | width: 40%; 543 | *width: 39.9690%; 544 | } 545 | 546 | .pure-u-lrg-5-12, 547 | .pure-u-lrg-10-24 { 548 | width: 41.6667%; 549 | *width: 41.6357%; 550 | } 551 | 552 | .pure-u-lrg-11-24 { 553 | width: 45.8333%; 554 | *width: 45.8023%; 555 | } 556 | 557 | .pure-u-lrg-1-2, 558 | .pure-u-lrg-12-24 { 559 | width: 50%; 560 | *width: 49.9690%; 561 | } 562 | 563 | .pure-u-lrg-13-24 { 564 | width: 54.1667%; 565 | *width: 54.1357%; 566 | } 567 | 568 | .pure-u-lrg-7-12, 569 | .pure-u-lrg-14-24 { 570 | width: 58.3333%; 571 | *width: 58.3023%; 572 | } 573 | 574 | .pure-u-lrg-3-5 { 575 | width: 60%; 576 | *width: 59.9690%; 577 | } 578 | 579 | .pure-u-lrg-5-8, 580 | .pure-u-lrg-15-24 { 581 | width: 62.5000%; 582 | *width: 62.4690%; 583 | } 584 | 585 | .pure-u-lrg-2-3, 586 | .pure-u-lrg-16-24 { 587 | width: 66.6667%; 588 | *width: 66.6357%; 589 | } 590 | 591 | .pure-u-lrg-17-24 { 592 | width: 70.8333%; 593 | *width: 70.8023%; 594 | } 595 | 596 | .pure-u-lrg-3-4, 597 | .pure-u-lrg-18-24 { 598 | width: 75%; 599 | *width: 74.9690%; 600 | } 601 | 602 | .pure-u-lrg-19-24 { 603 | width: 79.1667%; 604 | *width: 79.1357%; 605 | } 606 | 607 | .pure-u-lrg-4-5 { 608 | width: 80%; 609 | *width: 79.9690%; 610 | } 611 | 612 | .pure-u-lrg-5-6, 613 | .pure-u-lrg-20-24 { 614 | width: 83.3333%; 615 | *width: 83.3023%; 616 | } 617 | 618 | .pure-u-lrg-7-8, 619 | .pure-u-lrg-21-24 { 620 | width: 87.5000%; 621 | *width: 87.4690%; 622 | } 623 | 624 | .pure-u-lrg-11-12, 625 | .pure-u-lrg-22-24 { 626 | width: 91.6667%; 627 | *width: 91.6357%; 628 | } 629 | 630 | .pure-u-lrg-23-24 { 631 | width: 95.8333%; 632 | *width: 95.8023%; 633 | } 634 | 635 | .pure-u-lrg-1, 636 | .pure-u-lrg-1-1, 637 | .pure-u-lrg-5-5, 638 | .pure-u-lrg-24-24 { 639 | width: 100%; 640 | } 641 | } 642 | 643 | @media screen and (min-width: 75em) { 644 | .pure-u-xl-1, 645 | .pure-u-xl-1-1, 646 | .pure-u-xl-1-2, 647 | .pure-u-xl-1-3, 648 | .pure-u-xl-2-3, 649 | .pure-u-xl-1-4, 650 | .pure-u-xl-3-4, 651 | .pure-u-xl-1-5, 652 | .pure-u-xl-2-5, 653 | .pure-u-xl-3-5, 654 | .pure-u-xl-4-5, 655 | .pure-u-xl-5-5, 656 | .pure-u-xl-1-6, 657 | .pure-u-xl-5-6, 658 | .pure-u-xl-1-8, 659 | .pure-u-xl-3-8, 660 | .pure-u-xl-5-8, 661 | .pure-u-xl-7-8, 662 | .pure-u-xl-1-12, 663 | .pure-u-xl-5-12, 664 | .pure-u-xl-7-12, 665 | .pure-u-xl-11-12, 666 | .pure-u-xl-1-24, 667 | .pure-u-xl-2-24, 668 | .pure-u-xl-3-24, 669 | .pure-u-xl-4-24, 670 | .pure-u-xl-5-24, 671 | .pure-u-xl-6-24, 672 | .pure-u-xl-7-24, 673 | .pure-u-xl-8-24, 674 | .pure-u-xl-9-24, 675 | .pure-u-xl-10-24, 676 | .pure-u-xl-11-24, 677 | .pure-u-xl-12-24, 678 | .pure-u-xl-13-24, 679 | .pure-u-xl-14-24, 680 | .pure-u-xl-15-24, 681 | .pure-u-xl-16-24, 682 | .pure-u-xl-17-24, 683 | .pure-u-xl-18-24, 684 | .pure-u-xl-19-24, 685 | .pure-u-xl-20-24, 686 | .pure-u-xl-21-24, 687 | .pure-u-xl-22-24, 688 | .pure-u-xl-23-24, 689 | .pure-u-xl-24-24 { 690 | display: inline-block; 691 | *display: inline; 692 | zoom: 1; 693 | letter-spacing: normal; 694 | word-spacing: normal; 695 | vertical-align: top; 696 | text-rendering: auto; 697 | } 698 | 699 | .pure-u-xl-1-24 { 700 | width: 4.1667%; 701 | *width: 4.1357%; 702 | } 703 | 704 | .pure-u-xl-1-12, 705 | .pure-u-xl-2-24 { 706 | width: 8.3333%; 707 | *width: 8.3023%; 708 | } 709 | 710 | .pure-u-xl-1-8, 711 | .pure-u-xl-3-24 { 712 | width: 12.5000%; 713 | *width: 12.4690%; 714 | } 715 | 716 | .pure-u-xl-1-6, 717 | .pure-u-xl-4-24 { 718 | width: 16.6667%; 719 | *width: 16.6357%; 720 | } 721 | 722 | .pure-u-xl-1-5 { 723 | width: 20%; 724 | *width: 19.9690%; 725 | } 726 | 727 | .pure-u-xl-5-24 { 728 | width: 20.8333%; 729 | *width: 20.8023%; 730 | } 731 | 732 | .pure-u-xl-1-4, 733 | .pure-u-xl-6-24 { 734 | width: 25%; 735 | *width: 24.9690%; 736 | } 737 | 738 | .pure-u-xl-7-24 { 739 | width: 29.1667%; 740 | *width: 29.1357%; 741 | } 742 | 743 | .pure-u-xl-1-3, 744 | .pure-u-xl-8-24 { 745 | width: 33.3333%; 746 | *width: 33.3023%; 747 | } 748 | 749 | .pure-u-xl-3-8, 750 | .pure-u-xl-9-24 { 751 | width: 37.5000%; 752 | *width: 37.4690%; 753 | } 754 | 755 | .pure-u-xl-2-5 { 756 | width: 40%; 757 | *width: 39.9690%; 758 | } 759 | 760 | .pure-u-xl-5-12, 761 | .pure-u-xl-10-24 { 762 | width: 41.6667%; 763 | *width: 41.6357%; 764 | } 765 | 766 | .pure-u-xl-11-24 { 767 | width: 45.8333%; 768 | *width: 45.8023%; 769 | } 770 | 771 | .pure-u-xl-1-2, 772 | .pure-u-xl-12-24 { 773 | width: 50%; 774 | *width: 49.9690%; 775 | } 776 | 777 | .pure-u-xl-13-24 { 778 | width: 54.1667%; 779 | *width: 54.1357%; 780 | } 781 | 782 | .pure-u-xl-7-12, 783 | .pure-u-xl-14-24 { 784 | width: 58.3333%; 785 | *width: 58.3023%; 786 | } 787 | 788 | .pure-u-xl-3-5 { 789 | width: 60%; 790 | *width: 59.9690%; 791 | } 792 | 793 | .pure-u-xl-5-8, 794 | .pure-u-xl-15-24 { 795 | width: 62.5000%; 796 | *width: 62.4690%; 797 | } 798 | 799 | .pure-u-xl-2-3, 800 | .pure-u-xl-16-24 { 801 | width: 66.6667%; 802 | *width: 66.6357%; 803 | } 804 | 805 | .pure-u-xl-17-24 { 806 | width: 70.8333%; 807 | *width: 70.8023%; 808 | } 809 | 810 | .pure-u-xl-3-4, 811 | .pure-u-xl-18-24 { 812 | width: 75%; 813 | *width: 74.9690%; 814 | } 815 | 816 | .pure-u-xl-19-24 { 817 | width: 79.1667%; 818 | *width: 79.1357%; 819 | } 820 | 821 | .pure-u-xl-4-5 { 822 | width: 80%; 823 | *width: 79.9690%; 824 | } 825 | 826 | .pure-u-xl-5-6, 827 | .pure-u-xl-20-24 { 828 | width: 83.3333%; 829 | *width: 83.3023%; 830 | } 831 | 832 | .pure-u-xl-7-8, 833 | .pure-u-xl-21-24 { 834 | width: 87.5000%; 835 | *width: 87.4690%; 836 | } 837 | 838 | .pure-u-xl-11-12, 839 | .pure-u-xl-22-24 { 840 | width: 91.6667%; 841 | *width: 91.6357%; 842 | } 843 | 844 | .pure-u-xl-23-24 { 845 | width: 95.8333%; 846 | *width: 95.8023%; 847 | } 848 | 849 | .pure-u-xl-1, 850 | .pure-u-xl-1-1, 851 | .pure-u-xl-5-5, 852 | .pure-u-xl-24-24 { 853 | width: 100%; 854 | } 855 | } --------------------------------------------------------------------------------