├── .editorconfig ├── .gitignore ├── .jsdoc.conf.json ├── .jshintrc ├── .travis.yml ├── AUTHORS.md ├── Gruntfile.js ├── LICENSE.md ├── README.md ├── _node-combine-mq.sublime-project ├── cli.js ├── lib └── combine-mq.js ├── package.json └── test ├── actual └── combined.css ├── combine-mq_test.js └── expected ├── test.css ├── test2.css ├── test3.css ├── test4.css ├── test5.css ├── test6.css └── test7.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # Project meta 5 | *.sublime-workspace 6 | 7 | # Installed dependencies 8 | node_modules 9 | 10 | # Generated files 11 | docs 12 | # test/actual 13 | 14 | # Dev 15 | dev 16 | tmp 17 | combine-mq_grunt.js 18 | 19 | # Debug 20 | *.log 21 | -------------------------------------------------------------------------------- /.jsdoc.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": { 3 | "allowUnknownTags" : true 4 | }, 5 | "templates" : { 6 | "cleverLinks": false, 7 | "collapseSymbols": false, 8 | "dateFormat": "ddd MMM Do YYYY", 9 | "highlightTutorialCode": true, 10 | "inverseNav": true, 11 | "linenums": true, 12 | "monospaceLinks": false, 13 | "navType": "vertical", 14 | "outputSourceFiles": true, 15 | "outputSourcePath": true, 16 | "systemName": "Combine MQ", 17 | "theme": "simplex" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "node": true, 14 | "globals": { 15 | "describe": true, 16 | "it": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - '0.12' 5 | - 'stable' 6 | before_script: 7 | - npm install -g grunt-cli 8 | -------------------------------------------------------------------------------- /AUTHORS.md: -------------------------------------------------------------------------------- 1 | #Authors 2 | 3 | * Daniel Furze (https://github.com/furzeface) 4 | * Paul Welsh (https://github.com/spacedawwwg) 5 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt) { 4 | // Show elapsed time at the end 5 | require('time-grunt')(grunt); 6 | // Load all grunt tasks 7 | require('load-grunt-tasks')(grunt); 8 | 9 | // Project configuration 10 | grunt.initConfig({ 11 | config: { 12 | docs: 'docs', 13 | gruntfile: 'Gruntfile.js', 14 | temp: 'tmp' 15 | }, 16 | 17 | 18 | // Watchers 19 | watch: { 20 | gruntfile: { 21 | files: '<%= jshint.gruntfile.src %>', 22 | tasks: [ 23 | 'jshint:gruntfile' 24 | ] 25 | }, 26 | lib: { 27 | files: '<%= jshint.lib.src %>', 28 | tasks: [ 29 | 'jshint:lib' 30 | ] 31 | }, 32 | test: { 33 | files: '<%= jshint.test.src %>', 34 | tasks: [ 35 | 'jshint:test', 36 | 'nodeunit' 37 | ] 38 | } 39 | }, 40 | 41 | 42 | // Housekeeping 43 | clean: { 44 | docs: [ 45 | '<%= config.docs %>/' 46 | ] 47 | }, 48 | 49 | 50 | // Tests 51 | nodeunit: { 52 | files: [ 53 | 'test/**/*_test.js' 54 | ] 55 | }, 56 | 57 | 58 | // Scripts 59 | jshint: { 60 | options: { 61 | jshintrc: true, 62 | reporter: require('jshint-stylish') 63 | }, 64 | gruntfile: { 65 | src: '<%= config.gruntfile %>' 66 | }, 67 | lib: { 68 | src: [ 69 | 'lib/**/*.js' 70 | ] 71 | }, 72 | test: { 73 | src: [ 74 | 'test/**/*.js' 75 | ] 76 | } 77 | }, 78 | 79 | jsdoc: { 80 | all: { 81 | src: [ 82 | 'lib/**/*.js' 83 | ], 84 | options: { 85 | destination: 'docs', 86 | template: 'node_modules/grunt-jsdoc/node_modules/ink-docstrap/template', 87 | configure: '.jsdoc.conf.json' 88 | } 89 | } 90 | } 91 | }); 92 | 93 | // Default task 94 | grunt.registerTask('default', [ 95 | 'dev' 96 | ]); 97 | 98 | // Dev task 99 | grunt.registerTask('dev', [ 100 | 'jshint', 101 | 'nodeunit', 102 | 'watch' 103 | ]); 104 | 105 | // Dev task 106 | grunt.registerTask('docs', [ 107 | 'clean:docs', 108 | 'jsdoc' 109 | ]); 110 | 111 | // Test task 112 | grunt.registerTask('test', [ 113 | 'jshint', 114 | 'nodeunit' 115 | ]); 116 | }; 117 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | #The MIT License (MIT) 2 | 3 | ##Copyright (c) 2014 Building Blocks 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # node-combine-mq :: v0.9.0 [![Build Status](https://travis-ci.org/frontendfriends/node-combine-mq.svg?branch=master)](https://travis-ci.org/frontendfriends/node-combine-mq) 2 | > Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries. 3 | 4 | ## Contributing 5 | [![dependency Status][dependency-image]][dependency-url] 6 | [![devDependency Status][dev-dependency-image]][dev-dependency-url] 7 | [![Build Status][travis-image]][travis-url] 8 | [![Stories in Ready][waffle-image]][waffle-url] 9 | 10 | To contribute either check the [Waffle board](https://waffle.io/frontendfriends/node-combine-mq) or [GitHub issues](https://github.com/frontendfriends/node-combine-mq/issues) then work away: 11 | 12 | * [Fork it](https://github.com/frontendfriends/node-combine-mq/fork)! 13 | * Create your feature branch: `git checkout -b feature/awesome-feature` 14 | * Commit your changes: `git commit -m 'feat(Project): Adds awesome feature'` 15 | * Push to the branch: `git push origin feature/awesome-feature` 16 | * Submit a [pull request](https://github.com/frontendfriends/node-combine-mq/pulls) :+1: 17 | 18 | Tips: 19 | * In lieu of a formal styleguide, take care to maintain the existing coding style. 20 | * Add unit tests for any new or changed functionality. 21 | * Test your code using [Grunt](http://gruntjs.com): `grunt test` 22 | * Install [editorconfig-sublime](https://github.com/sindresorhus/editorconfig-sublime) for Sublime Text to help with consistent code formatting. 23 | * Commit messages loosely adhere to [these guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit). 24 | * Versioning adheres to [Semver](http://semver.org). 25 | 26 | 27 | ## Development 28 | Clone repo: 29 | 30 | ``` 31 | $ git clone https://github.com/frontendfriends/node-combine-mq 32 | ``` 33 | 34 | Install dependencies: 35 | 36 | ``` 37 | $ npm install 38 | ``` 39 | 40 | Go into the directory and link for local development: 41 | 42 | ``` 43 | $ cd node-combine-mq && npm link 44 | ``` 45 | 46 | ## Release History 47 | * 09-04-2015 - v0.8.0 - Pass the filename to the CSS parser 48 | * 22-12-2014 - v0.7.0 - Doesn’t format output at all by default, uses CSSBeautify instead as an optional parameter 49 | * 21-12-2014 - v0.6.0 - Makes CSS beautify optional, on by default 50 | * 18-12-2014 - v0.5.0 - Adds fix for `pixel-ratio` media queries 51 | * 25-11-2014 - v0.4.0 - Adds CSS beautify for output 52 | * 26-10-2014 - v0.3.0 - Adds functionality to preserve `@font-face` 53 | * 06-10-2014 - v0.2.0 54 | * 29-07-2014 - v0.1.0 - Initial release with first working feature 55 | 56 | ## License 57 | 58 | MIT: http://fefc.mit-license.org 59 | 60 | 61 | [travis-url]: http://travis-ci.org/frontendfriends/node-combine-mq 62 | [travis-image]: https://secure.travis-ci.org/frontendfriends/node-combine-mq.svg?branch=master 63 | [waffle-url]: https://waffle.io/frontendfriends/node-combine-mq 64 | [waffle-image]: https://badge.waffle.io/frontendfriends/node-combine-mq.svg?label=ready&title=Ready 65 | [dependency-url]: https://david-dm.org/frontendfriends/node-combine-mq#info=dependencies 66 | [dependency-image]: https://david-dm.org/frontendfriends/node-combine-mq/status.svg 67 | [dev-dependency-url]: https://david-dm.org/frontendfriends/node-combine-mq#info=devDependencies 68 | [dev-dependency-image]: https://david-dm.org/frontendfriends/node-combine-mq/dev-status.svg 69 | -------------------------------------------------------------------------------- /_node-combine-mq.sublime-project: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": ".", 5 | "folder_exclude_patterns": [ 6 | "node_modules" 7 | ] 8 | } 9 | ] 10 | } -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | 'use strict'; 4 | 5 | var task = require('./lib/combine-mq'); 6 | 7 | 8 | // These options will come from the Grunt task 9 | // task.init({ 10 | // 'src': 'test/examples/test.css', 11 | // 'dest': 'test/actual/combined.css' 12 | // }); 13 | 14 | 15 | // Use the CLi whilst building the Node task 16 | var program = require('commander'); 17 | 18 | program 19 | .command('combine ') 20 | .action(function (src, dest) { 21 | task.init({ 22 | 'src': src, 23 | 'dest': dest 24 | }); 25 | }); 26 | 27 | program.parse(process.argv); 28 | -------------------------------------------------------------------------------- /lib/combine-mq.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @file Combine MQ Main 4 | * @version 0.7.0 5 | * @author {@link http://github.com/furzeface Daniel Furze} 6 | * @link https://github.com/frontendfriends/node-combine-mq 7 | * 8 | * Copyright (c) 2014 Building Blocks 9 | * Licensed under the MIT license. 10 | * 11 | */ 12 | 'use strict'; 13 | 14 | var fs = require('fs'), 15 | chalk = require('chalk'), 16 | mkdirp = require('mkdirp'), 17 | parseCss = require('css-parse'), 18 | superb = require('superb'), 19 | dammit = require('dammit'); 20 | /** 21 | * Task methods. 22 | * @namespace CombineMq 23 | */ 24 | module.exports = { 25 | /** 26 | * Initialises task. 27 | * @function init 28 | * @param {object} options 29 | * @memberof CombineMq 30 | * @todo Add option to log out combined queries. 31 | */ 32 | init: function(options) { 33 | var self = this; // Scope resolution 34 | // Read file in 35 | fs.readFile(options.src, 'utf8', function(err, fileContents) { 36 | if (err) { 37 | // Write error messages 38 | console.log(chalk.red(dammit({ 39 | NSFW: false 40 | }))); 41 | console.log(chalk.red('(Could not open file: "' + self.src + '")')); 42 | // Exit out 43 | process.exit(1); 44 | } else { 45 | console.log(chalk.bold('\nCombining file: ' + self.src + '...')); 46 | // Moving on... 47 | self.parseCssString(fileContents ,options); 48 | } 49 | }); 50 | }, 51 | /** 52 | * Parses the input CSS file. 53 | * @function parseCssString 54 | * @param {string} contents - CSS string. 55 | * @memberof CombineMq 56 | */ 57 | parseCssString: function(contents, options) { 58 | var self = this; 59 | 60 | // Process media queries 61 | var processImportURL = function(importURL) { 62 | var strCss = '@import ' + importURL.import + ';'; 63 | 64 | return strCss; 65 | }; 66 | 67 | // Process comments 68 | var processComment = function(comment) { 69 | var strCss = '/*' + comment.comment + '*/'; 70 | 71 | return strCss; 72 | }; 73 | 74 | // Process declaration 75 | var processDeclaration = function(declaration) { 76 | var strCss = declaration.property + ': ' + declaration.value + ';'; 77 | 78 | return strCss; 79 | }; 80 | 81 | // Check declarations type 82 | var commentOrDeclaration = function(declarations) { 83 | var strCss = ''; 84 | 85 | if (declarations.type === 'declaration') { 86 | strCss += processDeclaration(declarations); 87 | } else if (declarations.type === 'comment') { 88 | strCss += ' ' + processComment(declarations); 89 | } 90 | 91 | return strCss; 92 | }; 93 | 94 | // Process normal CSS rule 95 | var processRule = function(rule) { 96 | var strCss = ''; 97 | 98 | strCss += rule.selectors.join(',') + ' {'; 99 | rule.declarations.forEach(function(rules) { 100 | strCss += commentOrDeclaration(rules); 101 | }); 102 | strCss += '}'; 103 | 104 | return strCss; 105 | }; 106 | 107 | // Check rule type 108 | var commentOrRule = function(rule) { 109 | var strCss = ''; 110 | 111 | if (rule.type === 'rule') { 112 | strCss += processRule(rule); 113 | } else if (rule.type === 'comment') { 114 | strCss += processComment(rule); 115 | } else if (rule.type === 'media') { 116 | strCss += processMedia(rule); 117 | } else if (rule.type === 'keyframes') { 118 | strCss += processKeyframes(rule); 119 | } 120 | 121 | return strCss; 122 | }; 123 | 124 | // Check keyframe type 125 | var commentOrKeyframe = function(frame) { 126 | var strCss = ''; 127 | 128 | if (frame.type === 'keyframe') { 129 | strCss += frame.values.join(',') + ' {'; 130 | frame.declarations.forEach(function(declaration) { 131 | strCss += commentOrDeclaration(declaration); 132 | }); 133 | strCss += '}'; 134 | } else if (frame.type === 'comment') { 135 | strCss += processComment(frame); 136 | } 137 | 138 | return strCss; 139 | }; 140 | 141 | // Process media queries 142 | var processMedia = function(media) { 143 | var strCss = '', 144 | query = media.rule; 145 | 146 | if (!query && media.media) { 147 | query = media.media; 148 | } 149 | 150 | if (query) { 151 | strCss += '@media ' + query + ' {'; 152 | media.rules.forEach(function(rule) { 153 | strCss += commentOrRule(rule); 154 | }); 155 | strCss += '}'; 156 | } 157 | 158 | return strCss; 159 | }; 160 | 161 | // Process keyframes 162 | var processKeyframes = function(key) { 163 | var strCss = '@' + (typeof key.vendor !== 'undefined' ? key.vendor : '') + 'keyframes ' + key.name + ' {'; 164 | 165 | key.keyframes.forEach(function(keyframe) { 166 | strCss += commentOrKeyframe(keyframe); 167 | }); 168 | 169 | strCss += '}'; 170 | 171 | return strCss; 172 | }; 173 | 174 | // Process document 175 | var processDocument = function(doc) { 176 | var strCss = '@' + (typeof doc.vendor !== 'undefined' ? doc.vendor : '') + 'document ' + doc.document + ' {'; 177 | 178 | doc.rules.forEach(function(rule) { 179 | strCss += commentOrRule(rule); 180 | }); 181 | 182 | strCss += '}'; 183 | 184 | return strCss; 185 | }; 186 | 187 | // Process charset 188 | var processCharset = function(charset) { 189 | var strCss = '@charset ' + charset.charset + ';'; 190 | 191 | return strCss; 192 | }; 193 | 194 | // Process font-face 195 | var processFontface = function(fontface) { 196 | var strCss = '@font-face {'; 197 | 198 | fontface.declarations.forEach(function (declaration) { 199 | strCss += declaration.property + ':' + declaration.value + ';'; 200 | }); 201 | 202 | strCss += '}'; 203 | 204 | return strCss; 205 | }; 206 | 207 | // Do the processing 208 | var cssJson = parseCss(contents, {source: options.src}), 209 | strStyles = '', 210 | processedCSS = {}; 211 | 212 | processedCSS.importURL = []; 213 | processedCSS.base = []; 214 | processedCSS.media = []; 215 | processedCSS.media.all = []; 216 | processedCSS.media.minWidth = []; 217 | processedCSS.media.maxWidth = []; 218 | processedCSS.media.minHeight = []; 219 | processedCSS.media.maxHeight = []; 220 | processedCSS.media.print = []; 221 | processedCSS.media.blank = []; 222 | processedCSS.keyframes = []; 223 | processedCSS.charset = []; 224 | processedCSS.document = []; 225 | processedCSS.fontface = []; 226 | 227 | // For every rule in the stylesheet... 228 | cssJson.stylesheet.rules.forEach(function(rule) { 229 | // if the rule is a media query... 230 | if (rule.type === 'media') { 231 | // Create 'id' based on the query (stripped from spaces and dashes etc.) 232 | var strMedia = rule.media.replace(/[^A-Za-z0-9]/ig, ''); 233 | 234 | // Create an array with all the media queries with the same 'id' 235 | var item = processedCSS.media.filter(function(element) { 236 | return (element.val === strMedia); 237 | }); 238 | 239 | // If there are no media queries in the array, define details 240 | if (item.length < 1) { 241 | var mediaObj = {}; 242 | mediaObj.sortVal = parseFloat(rule.media.match(/\d+/g)); 243 | mediaObj.rule = rule.media; 244 | mediaObj.val = strMedia; 245 | mediaObj.rules = []; 246 | 247 | processedCSS.media.push(mediaObj); 248 | } 249 | 250 | // Compare the query to other queries 251 | var i = 0, 252 | matched = false; 253 | processedCSS.media.forEach(function(elm) { 254 | if (elm.val === strMedia) { 255 | matched = true; 256 | } 257 | if (!matched) { 258 | i++; 259 | } 260 | }); 261 | 262 | // Push every merged query 263 | rule.rules.forEach(function(mediaRule) { 264 | if (mediaRule.type === 'rule' || 'comment') { 265 | processedCSS.media[i].rules.push(mediaRule); 266 | } 267 | }); 268 | } else if (rule.type === 'keyframes') { 269 | processedCSS.keyframes.push(rule); 270 | } else if (rule.type === 'import') { 271 | processedCSS.importURL.push(rule); 272 | } else if (rule.type === 'document') { 273 | processedCSS.document.push(rule); 274 | } else if (rule.type === 'charset') { 275 | processedCSS.charset.push(rule); 276 | } else if (rule.type === 'rule' || 'comment') { 277 | processedCSS.base.push(rule); 278 | } 279 | 280 | if (rule.type === 'font-face') { 281 | processedCSS.fontface.push(rule); 282 | } 283 | }); 284 | 285 | var i = 0; 286 | // Sort media queries by kind, this is needed to output them in the right order 287 | processedCSS.media.forEach(function(item) { 288 | // We need to store a reliable sort order as Array.prototype.sort 289 | // is not stable in the V8 engine for large arrays 290 | item.position = i; 291 | 292 | if (item.rule.match(/min-width/)) { 293 | processedCSS.media.minWidth.push(item); 294 | } else if (item.rule.match(/min-height/)) { 295 | processedCSS.media.minHeight.push(item); 296 | } else if (item.rule.match(/max-width/)) { 297 | processedCSS.media.maxWidth.push(item); 298 | } else if (item.rule.match(/max-height/)) { 299 | processedCSS.media.maxHeight.push(item); 300 | } else if (item.rule.match(/print/)) { 301 | processedCSS.media.print.push(item); 302 | } else if (item.rule.match(/all/)) { 303 | processedCSS.media.all.push(item); 304 | } else { 305 | processedCSS.media.blank.push(item); 306 | } 307 | 308 | i++; 309 | }); 310 | 311 | // Function to determine sort order 312 | var determineSortOrder = function(a, b, isMax) { 313 | var sortValA = a.sortVal, 314 | sortValB = b.sortVal; 315 | isMax = typeof isMax !== 'undefined' ? isMax : false; 316 | // consider print for sorting if sortVals are equal 317 | if (sortValA === sortValB) { 318 | if (a.rule.match(/print/)) { 319 | // a contains print and should be sorted after b 320 | return 1; 321 | } 322 | if (b.rule.match(/print/)) { 323 | // b contains print and should be sorted after a 324 | return -1; 325 | } 326 | 327 | // Fall back to sorting by their position in the array 328 | return a.position - b.position; 329 | } 330 | // return descending sort order for max-(width|height) media queries 331 | if (isMax) { 332 | return sortValB - sortValA; 333 | } 334 | 335 | // return ascending sort order 336 | return sortValA - sortValB; 337 | }; 338 | 339 | // Sort media.all queries ascending 340 | processedCSS.media.all.sort(function(a, b) { 341 | return determineSortOrder(a, b); 342 | }); 343 | 344 | // Sort media.minWidth queries ascending 345 | processedCSS.media.minWidth.sort(function(a, b) { 346 | return determineSortOrder(a, b); 347 | }); 348 | 349 | // Sort media.minHeight queries ascending 350 | processedCSS.media.minHeight.sort(function(a, b) { 351 | return determineSortOrder(a, b); 352 | }); 353 | 354 | // Sort media.maxWidth queries descending 355 | processedCSS.media.maxWidth.sort(function(a, b) { 356 | return determineSortOrder(a, b, true); 357 | }); 358 | 359 | // Sort media.maxHeight queries descending 360 | processedCSS.media.maxHeight.sort(function(a, b) { 361 | return determineSortOrder(a, b, true); 362 | }); 363 | 364 | // Function to output charset CSS 365 | var outputCharset = function(charset){ 366 | charset.forEach(function (charset) { 367 | strStyles += processCharset(charset); 368 | }); 369 | }; 370 | 371 | // Function to output base CSS 372 | var outputBase = function(base) { 373 | base.forEach(function(rule) { 374 | strStyles += commentOrRule(rule); 375 | }); 376 | }; 377 | 378 | // Function to import URL 379 | var outputImportURL = function(importURL) { 380 | importURL.forEach(function(item) { 381 | strStyles += processImportURL(item); 382 | }); 383 | }; 384 | 385 | // Function to output media queries 386 | var outputMedia = function(media) { 387 | media.forEach(function(item) { 388 | strStyles += processMedia(item); 389 | }); 390 | }; 391 | 392 | // Function to output keyframes 393 | var outputKeyFrames = function(keyframes) { 394 | keyframes.forEach(function(keyframe) { 395 | strStyles += processKeyframes(keyframe); 396 | }); 397 | }; 398 | 399 | // Function to output document 400 | var outputDocument = function(doc) { 401 | doc.forEach(function(doc) { 402 | strStyles += processDocument(doc); 403 | }); 404 | }; 405 | 406 | // Function to output fontface CSS 407 | var outputFontface = function(fontface){ 408 | fontface.forEach(function (fontface) { 409 | strStyles += processFontface(fontface); 410 | }); 411 | }; 412 | 413 | // Check if charset was set 414 | if (processedCSS.charset.length !== 0){ 415 | outputCharset(processedCSS.charset); 416 | } 417 | 418 | // Check if import URL was processed 419 | if (processedCSS.importURL.length !== 0) { 420 | outputImportURL(processedCSS.importURL); 421 | } 422 | 423 | // Check if base CSS was processed and print them 424 | if (processedCSS.base.length !== 0) { 425 | outputBase(processedCSS.base); 426 | } 427 | 428 | // Check if fontface was set 429 | if (processedCSS.fontface.length !== 0){ 430 | outputFontface(processedCSS.fontface); 431 | } 432 | 433 | // Check if media queries were processed and print them in order 434 | if (processedCSS.media.length !== 0) { 435 | outputMedia(processedCSS.media.blank); 436 | outputMedia(processedCSS.media.all); 437 | outputMedia(processedCSS.media.minWidth); 438 | outputMedia(processedCSS.media.minHeight); 439 | outputMedia(processedCSS.media.maxWidth); 440 | outputMedia(processedCSS.media.maxHeight); 441 | outputMedia(processedCSS.media.print); 442 | } 443 | 444 | // Check if document was processed 445 | if (processedCSS.document.length !== 0) { 446 | outputDocument(processedCSS.document); 447 | } 448 | 449 | // Check if keyframes were processed and print them 450 | if (processedCSS.keyframes.length !== 0) { 451 | outputKeyFrames(processedCSS.keyframes); 452 | } 453 | 454 | 455 | /////////////////////////////////////////////////////// 456 | // Hack to get over the darn .editorconfig issue >:( // 457 | strStyles += '\n'; 458 | //////////////////// @todo fix this /////////////////// 459 | 460 | if (!options.dest) { 461 | return strStyles; 462 | } 463 | // else: 464 | self.writeFile(strStyles, options); 465 | }, 466 | /** 467 | * Write combined CSS to a specified file, in a specified directory. 468 | * @function writeFile 469 | * @param {string} fileContents - combined CSS string. 470 | * @memberof CombineMq 471 | * @todo Strip file extension if it's in dest. 472 | * @todo Extract file path from dest. 473 | */ 474 | writeFile: function(fileContents, options) { 475 | // Create a dir 476 | mkdirp('tmp', function(err) { 477 | if (err) { 478 | throw err; 479 | } else { 480 | process.chdir('tmp'); 481 | fs.writeFile(options.dest + '.css', fileContents, function(err) { 482 | if (err) { 483 | throw err; 484 | } 485 | 486 | // Write a success message 487 | var sup = superb(); 488 | sup = sup.charAt(0).toUpperCase() + sup.slice(1) + '!'; 489 | console.log(chalk.green(sup + ' CSS combined!\n')); 490 | }); 491 | } 492 | }); 493 | } 494 | }; 495 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "combine-mq", 3 | "version": "0.8.1", 4 | "description": "Combine matching media queries into one media query definition.", 5 | "main": "lib/combine-mq.js", 6 | "engines": { 7 | "node": ">=0.10.0" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/frontendfriends/node-combine-mq" 12 | }, 13 | "keywords": [ 14 | "Media", 15 | "Queries", 16 | "Combine", 17 | "Optimisation", 18 | "Less", 19 | "Sass", 20 | "CSS" 21 | ], 22 | "maintainers": [ 23 | { 24 | "name": "Paul Welsh", 25 | "email": "spacedawwwg@gmail.com", 26 | "web": "https://github.com/spacedawwwg" 27 | }, 28 | { 29 | "name": "Daniel Furze", 30 | "email": "daniel@furzeface.com", 31 | "web": "https://github.com/furzeface" 32 | } 33 | ], 34 | "contributors": [ 35 | { 36 | "name": "Paul Welsh", 37 | "email": "spacedawwwg@gmail.com" 38 | }, 39 | { 40 | "name": "Daniel Furze", 41 | "email": "daniel@furzeface.com" 42 | }, 43 | { 44 | "name": "John Cashmore" 45 | }, 46 | { 47 | "name": "Thomas Dobber", 48 | "email": "thomasdobber@gmail.com" 49 | }, 50 | { 51 | "name": "Loz Calver", 52 | "email": "lozcalver@bigfork.co.uk" 53 | } 54 | ], 55 | "license": "MIT", 56 | "bugs": { 57 | "url": "https://github.com/frontendfriends/node-combine-mq/issues" 58 | }, 59 | "homepage": "https://github.com/frontendfriends/node-combine-mq", 60 | "dependencies": { 61 | "chalk": "^1.0.0", 62 | "commander": "^2.3.0", 63 | "css-parse": "^2.0.0", 64 | "css-stringify": "^2.0.0", 65 | "dammit": "^0.5.1", 66 | "mkdirp": "^0.5.0", 67 | "superb": "^1.0.3" 68 | }, 69 | "devDependencies": { 70 | "grunt-contrib-clean": "^0.6.0", 71 | "grunt-contrib-jshint": "^0.11.1", 72 | "grunt-contrib-nodeunit": "^0.4.1", 73 | "grunt-contrib-watch": "^0.6.1", 74 | "grunt-jsdoc": "^0.5.7", 75 | "grunt-mocha-test": "^0.12.2", 76 | "grunt-notify": "^0.4.1", 77 | "jshint-stylish": "^1.0.0", 78 | "load-grunt-tasks": "^3.1.0", 79 | "time-grunt": "^1.0.0" 80 | }, 81 | "scripts": { 82 | "test": "grunt test" 83 | }, 84 | "bin": { 85 | "cmq": "./cli.js" 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /test/actual/combined.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | body { 4 | font-family:"Georgia Pro",Georgia,Times,serif; 5 | font-weight:400; 6 | color:#000; 7 | min-height:100%; 8 | width:100%; 9 | font-size:16px; 10 | font-size:1rem; 11 | line-height:20px; 12 | line-height:1.25rem; 13 | } 14 | 15 | body:before,body:after { 16 | display:table; 17 | content:""; 18 | } 19 | 20 | body:after { 21 | clear:both; 22 | } 23 | 24 | body:before,body:after { 25 | content:""; 26 | display:table; 27 | } 28 | 29 | body:after { 30 | clear:both; 31 | } 32 | 33 | .ie7 body { 34 | position:relative; 35 | top:48px; 36 | } 37 | 38 | .container { 39 | position:relative; 40 | margin:0 20px; 41 | margin:0 1.25rem; 42 | max-width:1140px; 43 | max-width:71.25rem; 44 | } 45 | 46 | .container:before,.container:after { 47 | display:table; 48 | content:""; 49 | } 50 | 51 | .container:after { 52 | clear:both; 53 | } 54 | 55 | .container:before,.container:after { 56 | content:""; 57 | display:table; 58 | } 59 | 60 | .container:after { 61 | clear:both; 62 | } 63 | 64 | a { 65 | color:#00f; 66 | text-decoration:underline; 67 | } 68 | 69 | a:hover,a:focus { 70 | text-decoration:none; 71 | } 72 | 73 | img { 74 | -ms-interpolation-mode:bicubic; 75 | } 76 | 77 | #monitor-width { 78 | display:block; 79 | height:1px; 80 | overflow:hidden; 81 | position:absolute; 82 | top:-9999em; 83 | left:-9999em; 84 | width:20em; 85 | } 86 | 87 | .no-transition,.no-transition * { 88 | -webkit-transition:none!important; 89 | -moz-transition:none!important; 90 | -ms-transition:none!important; 91 | -o-transition:none!important; 92 | transition:none!important; 93 | } 94 | 95 | #page { 96 | max-width:1140px; 97 | margin:0 20px; 98 | } 99 | 100 | @media (min-width: 71.25em) { 101 | .container { 102 | margin-right:auto; 103 | margin-left:auto; 104 | width:100%; 105 | } 106 | 107 | #monitor-width { 108 | width:1140px; 109 | } 110 | 111 | #page { 112 | margin:0 auto; 113 | } 114 | 115 | } 116 | 117 | @media (min-width: 30em) { 118 | #monitor-width { 119 | width:480px; 120 | } 121 | 122 | } 123 | 124 | @media (min-width: 30em) and (min-device-pixel-ratio: 1.5) { 125 | #monitor-width { 126 | width:480px; 127 | } 128 | 129 | } 130 | 131 | @media (min-width: 30em) and (min-device-pixel-ratio: 2) { 132 | #monitor-width { 133 | width:480px; 134 | background: #000; 135 | } 136 | 137 | } 138 | 139 | @media (min-width: 30em) and (min-device-pixel-ratio: 4) { 140 | #monitor-width { 141 | color: #fff; 142 | } 143 | 144 | } 145 | 146 | @media (min-width: 60.625em) { 147 | #monitor-width { 148 | width:970px; 149 | } 150 | 151 | } 152 | 153 | @media (min-width: 30em) and (min-device-pixel-ratio: 5) { 154 | #monitor-width { 155 | color: #fff; 156 | } 157 | 158 | } 159 | 160 | @media (min-width: 37.5em) { 161 | #monitor-width { 162 | width:600px; 163 | } 164 | 165 | } 166 | 167 | @media (min-width: 32em) { 168 | #monitor-width { 169 | height:480px; 170 | } 171 | 172 | } 173 | 174 | @media (min-width: 34em) { 175 | #monitor-width { 176 | height:480px; 177 | } 178 | 179 | } 180 | 181 | @media (min-width: 30em) { 182 | #monitor-width { 183 | height:480px; 184 | } 185 | 186 | } 187 | 188 | @media (min-width: 48em) { 189 | .container { 190 | margin:0 25px; 191 | margin:0 1.5625rem; 192 | } 193 | 194 | #monitor-width { 195 | width:768px; 196 | } 197 | } 198 | 199 | @media only screen { 200 | /* hihihih */ 201 | html{ 202 | color:red; /* hsdfjsdjhf */ 203 | line-height: 200; 204 | } 205 | } 206 | 207 | @media print { 208 | html{ 209 | color:red; 210 | line-height: 200; 211 | } 212 | } 213 | 214 | @-webkit-keyframes NAME-YOUR-ANIMATION { 215 | /* hahahah */ 216 | 0% { opacity: 0; /* helphelp */ } 217 | 100% { opacity: 1; } 218 | } 219 | @-moz-keyframes NAME-YOUR-ANIMATION { 220 | 0% { opacity: 0; } 221 | 100% { opacity: 1; } 222 | } 223 | @-o-keyframes NAME-YOUR-ANIMATION { 224 | 0% { opacity: 0; } 225 | 100% { opacity: 1; } 226 | } 227 | @keyframes NAME-YOUR-ANIMATION { 228 | 0% { opacity: 0; } 229 | 100% { opacity: 1; } 230 | } 231 | 232 | @-moz-document url-prefix(http://www.example.com) { 233 | 234 | p { 235 | height: 5px; 236 | } 237 | 238 | @media (min-width: 767px) { 239 | 240 | p { 241 | height: 5px; 242 | } 243 | } 244 | } 245 | 246 | @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ 247 | 248 | p { 249 | color: red; 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /test/combine-mq_test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @file Combine MQ Test 4 | * @version 0.1.0 5 | * @author {@link http://github.com/furzeface Daniel Furze} 6 | * @link https://github.com/frontendfriends/node-combine-mq 7 | * 8 | * Copyright (c) 2014 Daniel Furze 9 | * Licensed under the MIT license. 10 | * 11 | */ 12 | 13 | 'use strict'; 14 | 15 | var grunt = require('grunt'); 16 | 17 | exports.combine_mq = { 18 | setUp: function (done) { 19 | done(); 20 | }, 21 | test: function (test) { 22 | test.expect(1); 23 | 24 | var actual = grunt.file.read('test/actual/combined.css'); 25 | var expected = grunt.file.read('test/expected/test.css'); 26 | test.equal(actual, expected, 'should combine media queries from test.css'); 27 | 28 | test.done(); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /test/expected/test.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | body { 4 | font-family:"Georgia Pro",Georgia,Times,serif; 5 | font-weight:400; 6 | color:#000; 7 | min-height:100%; 8 | width:100%; 9 | font-size:16px; 10 | font-size:1rem; 11 | line-height:20px; 12 | line-height:1.25rem; 13 | } 14 | 15 | body:before,body:after { 16 | display:table; 17 | content:""; 18 | } 19 | 20 | body:after { 21 | clear:both; 22 | } 23 | 24 | body:before,body:after { 25 | content:""; 26 | display:table; 27 | } 28 | 29 | body:after { 30 | clear:both; 31 | } 32 | 33 | .ie7 body { 34 | position:relative; 35 | top:48px; 36 | } 37 | 38 | .container { 39 | position:relative; 40 | margin:0 20px; 41 | margin:0 1.25rem; 42 | max-width:1140px; 43 | max-width:71.25rem; 44 | } 45 | 46 | .container:before,.container:after { 47 | display:table; 48 | content:""; 49 | } 50 | 51 | .container:after { 52 | clear:both; 53 | } 54 | 55 | .container:before,.container:after { 56 | content:""; 57 | display:table; 58 | } 59 | 60 | .container:after { 61 | clear:both; 62 | } 63 | 64 | a { 65 | color:#00f; 66 | text-decoration:underline; 67 | } 68 | 69 | a:hover,a:focus { 70 | text-decoration:none; 71 | } 72 | 73 | img { 74 | -ms-interpolation-mode:bicubic; 75 | } 76 | 77 | #monitor-width { 78 | display:block; 79 | height:1px; 80 | overflow:hidden; 81 | position:absolute; 82 | top:-9999em; 83 | left:-9999em; 84 | width:20em; 85 | } 86 | 87 | .no-transition,.no-transition * { 88 | -webkit-transition:none!important; 89 | -moz-transition:none!important; 90 | -ms-transition:none!important; 91 | -o-transition:none!important; 92 | transition:none!important; 93 | } 94 | 95 | #page { 96 | max-width:1140px; 97 | margin:0 20px; 98 | } 99 | 100 | @media (min-width: 71.25em) { 101 | .container { 102 | margin-right:auto; 103 | margin-left:auto; 104 | width:100%; 105 | } 106 | 107 | #monitor-width { 108 | width:1140px; 109 | } 110 | 111 | #page { 112 | margin:0 auto; 113 | } 114 | 115 | } 116 | 117 | @media (min-width: 30em) { 118 | #monitor-width { 119 | width:480px; 120 | } 121 | 122 | } 123 | 124 | @media (min-width: 30em) and (min-device-pixel-ratio: 1.5) { 125 | #monitor-width { 126 | width:480px; 127 | } 128 | 129 | } 130 | 131 | @media (min-width: 30em) and (min-device-pixel-ratio: 2) { 132 | #monitor-width { 133 | width:480px; 134 | background: #000; 135 | } 136 | 137 | } 138 | 139 | @media (min-width: 30em) and (min-device-pixel-ratio: 4) { 140 | #monitor-width { 141 | color: #fff; 142 | } 143 | 144 | } 145 | 146 | @media (min-width: 60.625em) { 147 | #monitor-width { 148 | width:970px; 149 | } 150 | 151 | } 152 | 153 | @media (min-width: 30em) and (min-device-pixel-ratio: 5) { 154 | #monitor-width { 155 | color: #fff; 156 | } 157 | 158 | } 159 | 160 | @media (min-width: 37.5em) { 161 | #monitor-width { 162 | width:600px; 163 | } 164 | 165 | } 166 | 167 | @media (min-width: 32em) { 168 | #monitor-width { 169 | height:480px; 170 | } 171 | 172 | } 173 | 174 | @media (min-width: 34em) { 175 | #monitor-width { 176 | height:480px; 177 | } 178 | 179 | } 180 | 181 | @media (min-width: 30em) { 182 | #monitor-width { 183 | height:480px; 184 | } 185 | 186 | } 187 | 188 | @media (min-width: 48em) { 189 | .container { 190 | margin:0 25px; 191 | margin:0 1.5625rem; 192 | } 193 | 194 | #monitor-width { 195 | width:768px; 196 | } 197 | } 198 | 199 | @media only screen { 200 | /* hihihih */ 201 | html{ 202 | color:red; /* hsdfjsdjhf */ 203 | line-height: 200; 204 | } 205 | } 206 | 207 | @media print { 208 | html{ 209 | color:red; 210 | line-height: 200; 211 | } 212 | } 213 | 214 | @-webkit-keyframes NAME-YOUR-ANIMATION { 215 | /* hahahah */ 216 | 0% { opacity: 0; /* helphelp */ } 217 | 100% { opacity: 1; } 218 | } 219 | @-moz-keyframes NAME-YOUR-ANIMATION { 220 | 0% { opacity: 0; } 221 | 100% { opacity: 1; } 222 | } 223 | @-o-keyframes NAME-YOUR-ANIMATION { 224 | 0% { opacity: 0; } 225 | 100% { opacity: 1; } 226 | } 227 | @keyframes NAME-YOUR-ANIMATION { 228 | 0% { opacity: 0; } 229 | 100% { opacity: 1; } 230 | } 231 | 232 | @-moz-document url-prefix(http://www.example.com) { 233 | 234 | p { 235 | height: 5px; 236 | } 237 | 238 | @media (min-width: 767px) { 239 | 240 | p { 241 | height: 5px; 242 | } 243 | } 244 | } 245 | 246 | @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ 247 | 248 | p { 249 | color: red; 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /test/expected/test3.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Normalize.scss settings 3 | ========================================================================== */ 4 | 5 | /** 6 | * Includes legacy browser support IE6/7 7 | * 8 | * Set to false if you want to drop support for IE6 and IE7 9 | */ 10 | 11 | /* ========================================================================== 12 | HTML5 display definitions 13 | ========================================================================== */ 14 | 15 | /* 16 | * Corrects `block` display not defined in IE 8/9. 17 | */ 18 | 19 | article, 20 | aside, 21 | details, 22 | figcaption, 23 | figure, 24 | footer, 25 | header, 26 | hgroup, 27 | main, 28 | nav, 29 | section, 30 | summary { 31 | display: block; /* hello */ 32 | } 33 | 34 | /** 35 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 36 | */ 37 | 38 | audio, 39 | canvas, 40 | video { 41 | display: inline-block; 42 | } 43 | 44 | /** 45 | * Prevents modern browsers from displaying `audio` without controls. 46 | * Remove excess height in iOS 5 devices. 47 | */ 48 | 49 | audio:not([controls]) { 50 | display: none; 51 | height: 0; 52 | } 53 | 54 | /** 55 | * Address styling not present in IE 8/9. 56 | */ 57 | 58 | [hidden] { 59 | display: none; 60 | } 61 | 62 | /* ========================================================================== 63 | Base 64 | ========================================================================== */ 65 | 66 | /** 67 | * 1. Set default font family to sans-serif. 68 | * 2. Prevent iOS text size adjust after orientation change, without disabling 69 | * 3.Corrects text resizing oddly in IE 6/7 when body `font-size` is set using 70 | * `em` units. 71 | */ 72 | 73 | html { 74 | font-family: sans-serif; 75 | /* 1 */ 76 | -ms-text-size-adjust: 100%; 77 | /* 2 */ 78 | -webkit-text-size-adjust: 100%; 79 | /* 2 */ 80 | } 81 | 82 | /** 83 | * Remove default margin. 84 | */ 85 | 86 | body { 87 | margin: 0; 88 | } 89 | 90 | /* ========================================================================== 91 | Links 92 | ========================================================================== */ 93 | 94 | /** 95 | * Address `outline` inconsistency between Chrome and other browsers. 96 | */ 97 | 98 | /** 99 | * Improves readability when focused and also mouse hovered in all browsers. 100 | */ 101 | 102 | a:focus { 103 | outline: thin dotted; 104 | } 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* ========================================================================== 112 | Typography 113 | ========================================================================== */ 114 | 115 | /** 116 | * Addresses font sizes and margins set differently in IE 6/7. 117 | * Address variable `h1` font-size and margin within `section` and `article` 118 | * contexts in Firefox 4+, Safari 5, and Chrome. 119 | */ 120 | 121 | /** 122 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: 1px dotted; 127 | } 128 | 129 | /** 130 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 131 | */ 132 | 133 | b, 134 | strong { 135 | font-weight: bold; 136 | } 137 | 138 | /** 139 | * Address styling not present in Safari 5 and Chrome. 140 | */ 141 | 142 | dfn { 143 | font-style: italic; 144 | } 145 | 146 | /** 147 | * Address differences between Firefox and other browsers. 148 | */ 149 | 150 | hr { 151 | -moz-box-sizing: content-box; 152 | box-sizing: content-box; 153 | height: 0; 154 | } 155 | 156 | /** 157 | * Addresses styling not present in IE 8/9. 158 | */ 159 | 160 | mark { 161 | background: #ff0; 162 | color: #000; 163 | } 164 | 165 | /** 166 | * Addresses margins set differently in IE 6/7. 167 | */ 168 | 169 | /** 170 | * Correct font family set oddly in Safari 5 and Chrome. 171 | */ 172 | 173 | code, 174 | kbd, 175 | pre, 176 | samp { 177 | font-family: monospace, serif; 178 | font-size: 1em; 179 | } 180 | 181 | /** 182 | * Improve readability of pre-formatted text in all browsers. 183 | */ 184 | 185 | pre { 186 | white-space: pre-wrap; 187 | } 188 | 189 | /** 190 | * Set consistent quote types. 191 | */ 192 | 193 | q { 194 | quotes: "\201C" "\201D" "\2018" "\2019"; 195 | } 196 | 197 | /** 198 | * Address inconsistent and variable font size in all browsers. 199 | */ 200 | 201 | small { 202 | font-size: 80%; 203 | } 204 | 205 | /** 206 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 207 | */ 208 | 209 | sub, 210 | sup { 211 | font-size: 75%; 212 | line-height: 0; 213 | position: relative; 214 | vertical-align: baseline; 215 | } 216 | 217 | sup { 218 | top: -0.5em; 219 | } 220 | 221 | sub { 222 | bottom: -0.25em; 223 | } 224 | 225 | /* ========================================================================== 226 | Embedded content 227 | ========================================================================== */ 228 | 229 | /** 230 | * 1. Remove border when inside `a` element in IE 8/9. 231 | * 2. Improves image quality when scaled in IE 7. 232 | */ 233 | 234 | img { 235 | border: 0; 236 | } 237 | 238 | /** 239 | * Correct overflow displayed oddly in IE 9. 240 | */ 241 | 242 | svg:not(:root) { 243 | overflow: hidden; 244 | } 245 | 246 | /* ========================================================================== 247 | Figures 248 | ========================================================================== */ 249 | 250 | /** 251 | * Address margin not present in IE 8/9 and Safari 5. 252 | */ 253 | 254 | figure { 255 | margin: 0; 256 | } 257 | 258 | /* ========================================================================== 259 | Forms 260 | ========================================================================== */ 261 | 262 | /** 263 | * Define consistent border, margin, and padding. 264 | */ 265 | 266 | fieldset { 267 | border: 1px solid #c0c0c0; 268 | margin: 0 2px; 269 | padding: 0.35em 0.625em 0.75em; 270 | } 271 | 272 | /** 273 | * 1. Correct `color` not being inherited in IE 8/9. 274 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 275 | * 3. Corrects text not wrapping in Firefox 3. 276 | * 4. Corrects alignment displayed oddly in IE 6/7. 277 | */ 278 | 279 | legend { 280 | border: 0; 281 | /* 1 */ 282 | padding: 0; 283 | /* 2 */ 284 | } 285 | 286 | /** 287 | * 1. Correct font family not being inherited in all browsers. 288 | * 2. Correct font size not being inherited in all browsers. 289 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 290 | * 4. Improves appearance and consistency in all browsers. 291 | */ 292 | 293 | button, 294 | input, 295 | select, 296 | textarea { 297 | font-family: inherit; 298 | /* 1 */ 299 | font-size: 100%; 300 | /* 2 */ 301 | margin: 0; 302 | /* 3 */ 303 | } 304 | 305 | /** 306 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 307 | * the UA stylesheet. 308 | */ 309 | 310 | button, 311 | input { 312 | line-height: normal; 313 | } 314 | 315 | /** 316 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 317 | * All other form control elements do not inherit `text-transform` values. 318 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 319 | * Correct `select` style inheritance in Firefox 4+ and Opera. 320 | */ 321 | 322 | button, 323 | select { 324 | text-transform: none; 325 | } 326 | 327 | /** 328 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 329 | * and `video` controls. 330 | * 2. Correct inability to style clickable `input` types in iOS. 331 | * 3. Improve usability and consistency of cursor style between image-type 332 | * `input` and others. 333 | * 4. Removes inner spacing in IE 7 without affecting normal text inputs. 334 | * Known issue: inner spacing remains in IE 6. 335 | */ 336 | 337 | button, 338 | html input[type="button"], 339 | input[type="reset"], 340 | input[type="submit"] { 341 | -webkit-appearance: button; 342 | /* 2 */ 343 | cursor: pointer; 344 | /* 3 */ 345 | } 346 | 347 | /** 348 | * Re-set default cursor for disabled elements. 349 | */ 350 | 351 | button[disabled], 352 | html input[disabled] { 353 | cursor: default; 354 | } 355 | 356 | /** 357 | * 1. Address box sizing set to `content-box` in IE 8/9. 358 | * 2. Remove excess padding in IE 8/9. 359 | * 3. Removes excess padding in IE 7. 360 | * Known issue: excess padding remains in IE 6. 361 | */ 362 | 363 | input[type="checkbox"], 364 | input[type="radio"] { 365 | -moz-box-sizing: border-box; 366 | box-sizing: border-box; 367 | /* 1 */ 368 | padding: 0; 369 | /* 2 */ 370 | } 371 | 372 | /** 373 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 374 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 375 | * (include `-moz` to future-proof). 376 | */ 377 | 378 | input[type="search"] { 379 | -webkit-appearance: textfield; 380 | /* 1 */ 381 | -moz-box-sizing: content-box; 382 | /* 2 */ 383 | box-sizing: content-box; 384 | } 385 | 386 | /** 387 | * Remove inner padding and search cancel button in Safari 5 and Chrome 388 | * on OS X. 389 | */ 390 | 391 | input[type="search"]::-webkit-search-cancel-button, 392 | input[type="search"]::-webkit-search-decoration { 393 | -webkit-appearance: none; 394 | } 395 | 396 | /** 397 | * Remove inner padding and border in Firefox 4+. 398 | */ 399 | 400 | button::-moz-focus-inner, 401 | input::-moz-focus-inner { 402 | border: 0; 403 | padding: 0; 404 | } 405 | 406 | /** 407 | * 1. Remove default vertical scrollbar in IE 8/9. 408 | * 2. Improve readability and alignment in all browsers. 409 | */ 410 | 411 | textarea { 412 | overflow: auto; 413 | /* 1 */ 414 | vertical-align: top; 415 | /* 2 */ 416 | } 417 | 418 | /* ========================================================================== 419 | Tables 420 | ========================================================================== */ 421 | 422 | /** 423 | * Remove most spacing between table cells. 424 | */ 425 | 426 | table { 427 | border-collapse: collapse; 428 | border-spacing: 0; 429 | } 430 | 431 | /* Generated with FontPrep app http://fontprep.com/ */ 432 | 433 | @font-face { 434 | font-family: 'AlternateGothic2 BT'; 435 | src: url("../fonts/alternate-gothic2.eot"); 436 | /* IE9 Compat Modes */ 437 | src: url("../fonts/alternate-gothic2.eot?#iefix") format("embedded-opentype"), url("../fonts/alternate-gothic2.woff") format("woff"), url("../fonts/alternate-gothic2.ttf") format("truetype"), url("../fonts/alternate-gothic2.svg#022c20d3c2b5208bc4ff771e4b5afcc9") format("svg"); 438 | /* Legacy iOS */ 439 | font-style: normal; 440 | font-weight: 400; 441 | } 442 | 443 | /* 444 | * Web Fonts from fontspring.com 445 | * 446 | * All OpenType features and all extended glyphs have been removed. 447 | * Fully installable fonts can be purchased at http://www.fontspring.com 448 | * 449 | * The fonts included in this stylesheet are subject to the End User License you purchased 450 | * from Fontspring. The fonts are protected under domestic and international trademark and 451 | * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or 452 | * distributing this font software. 453 | * 454 | * (c) 2010-2012 Fontspring 455 | * 456 | * 457 | * 458 | * 459 | * The fonts included are copyrighted by the vendor listed below. 460 | * 461 | * Vendor: exljbris Font Foundry 462 | * License URL: http://www.fontspring.com/fflicense/exljbris 463 | * 464 | * 465 | */ 466 | 467 | @font-face { 468 | font-family: 'museo_slab500'; 469 | src: url("../fonts/Museo_Slab_500_2-webfont.eot"); 470 | src: url("../fonts/Museo_Slab_500_2-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo_Slab_500_2-webfont.woff") format("woff"), url("../fonts/Museo_Slab_500_2-webfont.ttf") format("truetype"), url("../fonts/Museo_Slab_500_2-webfont.svg#museo_slab500") format("svg"); 471 | font-weight: normal; 472 | font-style: normal; 473 | } 474 | 475 | @font-face { 476 | font-family: 'Museo300Regular'; 477 | src: url("../fonts/Museo300-Regular-webfont.eot"); 478 | src: url("../fonts/Museo300-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo300-Regular-webfont.woff") format("woff"), url("../fonts/Museo300-Regular-webfont.ttf") format("truetype"), url("../fonts/Museo300-Regular-webfont.svg#Museo300Regular") format("svg"); 479 | font-weight: normal; 480 | font-style: normal; 481 | } 482 | 483 | @font-face { 484 | font-family: 'Museo500Regular'; 485 | src: url("../fonts/Museo500-Regular-webfont.eot"); 486 | src: url("../fonts/Museo500-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo500-Regular-webfont.woff") format("woff"), url("../fonts/Museo500-Regular-webfont.ttf") format("truetype"), url("../fonts/Museo500-Regular-webfont.svg#Museo500Regular") format("svg"); 487 | font-weight: normal; 488 | font-style: normal; 489 | } 490 | 491 | @font-face { 492 | font-family: 'bills'; 493 | src: url("../fonts/bills.eot"); 494 | src: url("../fonts/bills.eot?#iefix") format("embedded-opentype"), url("../fonts/bills.woff") format("woff"), url("../fonts/bills.ttf") format("truetype"), url("../fonts/bills.svg#bills") format("svg"); 495 | font-weight: normal; 496 | font-style: normal; 497 | } 498 | 499 | .icon-ignite-logo, 500 | .icon-facebook, 501 | .icon-twitter, 502 | .icon-pinterest, 503 | .icon-googleplus, 504 | .icon-reorder, 505 | .icon-pointer, 506 | .icon-arrow-right, 507 | .icon-arrow-left, 508 | .icon-angle-down, 509 | .icon-circle-arrow-down, 510 | .icon-menus, 511 | .icon-capacity, 512 | .icon-hours, 513 | .icon-search, 514 | .icon-venue-stretch, 515 | .icon-angle-up, 516 | .icon-angle-right, 517 | .icon-angle-left { 518 | font-family: 'bills'; 519 | speak: none; 520 | font-style: normal; 521 | font-weight: normal; 522 | font-variant: normal; 523 | text-transform: none; 524 | -webkit-font-smoothing: antialiased; 525 | } 526 | 527 | .icon-ignite-logo:before { 528 | content: "\e000"; 529 | } 530 | 531 | .icon-facebook:before { 532 | content: "\e001"; 533 | } 534 | 535 | .icon-twitter:before { 536 | content: "\e002"; 537 | } 538 | 539 | .icon-pinterest:before { 540 | content: "\e003"; 541 | } 542 | 543 | .icon-googleplus:before { 544 | content: "\e004"; 545 | } 546 | 547 | .icon-reorder:before { 548 | content: "\e005"; 549 | } 550 | 551 | .icon-pointer:before { 552 | content: "\e006"; 553 | } 554 | 555 | .icon-arrow-right:before { 556 | content: "\e007"; 557 | } 558 | 559 | .icon-arrow-left:before { 560 | content: "\e008"; 561 | } 562 | 563 | .icon-angle-down:before { 564 | content: "\e009"; 565 | } 566 | 567 | .icon-circle-arrow-down:before { 568 | content: "\e010"; 569 | } 570 | 571 | .icon-menus:before { 572 | content: "\e011"; 573 | } 574 | 575 | .icon-capacity:before { 576 | content: "\e012"; 577 | } 578 | 579 | .icon-hours:before { 580 | content: "\e013"; 581 | } 582 | 583 | .icon-search:before { 584 | content: "\f002"; 585 | } 586 | 587 | .icon-venue-stretch:before { 588 | content: "\e00a"; 589 | } 590 | 591 | .icon-angle-up:before { 592 | content: "\f106"; 593 | } 594 | 595 | .icon-angle-right:before { 596 | content: "\f105"; 597 | } 598 | 599 | .icon-angle-left:before { 600 | content: "\f104"; 601 | } 602 | 603 | /* TYPOGRAPHY */ 604 | 605 | /* COLOURS */ 606 | 607 | /* BORDERS */ 608 | 609 | /* SPACING */ 610 | 611 | /* RELATIVE SIZES */ 612 | 613 | /* BREAKPOINTS */ 614 | 615 | /* LOGO */ 616 | 617 | /* IE */ 618 | 619 | /*------------------------------------*\ 620 | $FONT SIZE 621 | \*------------------------------------*/ 622 | 623 | /*------------------------------------*\ 624 | $MEDIA QUERY 625 | \*------------------------------------*/ 626 | 627 | /*------------------------------------*\ 628 | $CLEARFIX 629 | \*------------------------------------*/ 630 | 631 | .clearfix:after, 632 | .media:after, 633 | .wrapper:after, 634 | .site-header:after, 635 | .logo-wrapper:after, 636 | .site-social:after, 637 | .site-social__list:after, 638 | .pagination:after, 639 | .menu-location:after, 640 | .venue:after, 641 | .venue__row:after, 642 | .page--hours-and-locations .booking-widget:after, 643 | .booking-widget__form:after { 644 | content: ""; 645 | display: table; 646 | clear: both; 647 | } 648 | 649 | /*------------------------------------*\ 650 | $IMAGE REPLACEMENT 651 | \*------------------------------------*/ 652 | 653 | .image-replacement { 654 | border: 0; 655 | font: 0/0 a; 656 | text-shadow: none; 657 | color: transparent; 658 | background-color: transparent; 659 | } 660 | 661 | /*------------------------------------*\ 662 | $JAVASCRIPT MEDIA QUERIES 663 | \*------------------------------------*/ 664 | 665 | /** 666 | * Sync CSS media queries with perfectly using the following javascript: 667 | * 668 | 669 | var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 670 | 671 | if (size.indexOf("lap-and-up") !=-1) { 672 | 673 | } else if (size.indexOf("desk") !=-1) { 674 | 675 | } else if (size.indexOf("desk-wide") !=-1) { 676 | 677 | } 678 | 679 | * 680 | */ 681 | 682 | body:after { 683 | display: none; 684 | } 685 | 686 | @media only screen and (min-width: 569px) { 687 | body:after { 688 | content: 'lap-and-up'; 689 | } 690 | } 691 | 692 | @media only screen and (min-width: 1024px) { 693 | body:after { 694 | content: 'desk lap-and-up'; 695 | } 696 | } 697 | 698 | @media only screen and (min-width: 1200px) { 699 | body:after { 700 | content: 'desk-wide desk lap-and-up'; 701 | } 702 | } 703 | 704 | /*------------------------------------*\ 705 | $LISTS 706 | \*------------------------------------*/ 707 | 708 | .clear-list, 709 | .inline-list { 710 | list-style-type: none; 711 | padding: 0; 712 | margin: 0; 713 | } 714 | 715 | .inline-list > * { 716 | display: inline-block; 717 | } 718 | 719 | /*------------------------------------*\ 720 | $MEDIA OBJECT 721 | \*------------------------------------*/ 722 | 723 | .media { 724 | display: block; 725 | } 726 | 727 | .media__img { 728 | float: left; 729 | margin-right: 22px; 730 | } 731 | 732 | .media__img--rev { 733 | float: right; 734 | margin-left: 22px; 735 | } 736 | 737 | .media__img img, 738 | .media__img--rev img { 739 | display: block; 740 | } 741 | 742 | .media__body { 743 | overflow: hidden; 744 | } 745 | 746 | .media__body > * { 747 | margin-top: 0; 748 | } 749 | 750 | .media__body, 751 | .media__body > :last-child { 752 | margin-bottom: 0; 753 | } 754 | 755 | /*------------------------------------*\ 756 | $BUTTONS 757 | \*------------------------------------*/ 758 | 759 | .button, 760 | .venue-menus a { 761 | display: inline-block; 762 | background-color: #ff8400; 763 | color: white; 764 | padding: 11px; 765 | } 766 | 767 | .button--big { 768 | padding: 22px; 769 | } 770 | 771 | /*------------------------------------*\ 772 | $ICON 773 | \*------------------------------------*/ 774 | 775 | .icon--left { 776 | margin-right: 5.5px; 777 | } 778 | 779 | .icon--right { 780 | margin-left: 5.5px; 781 | } 782 | 783 | .icon-rounded { 784 | display: inline-block; 785 | padding: 5.5px; 786 | color: #b3b3b3; 787 | border-radius: 44px; 788 | background-color: white; 789 | } 790 | 791 | /*------------------------------------*\ 792 | 793 | $RESPONSIVE-NAV.JS v1.0.14 by @viljamis 794 | 795 | \*------------------------------------*/ 796 | 797 | /** 798 | * I tried not to touch this as it is not written by me, but I was forced to alter selectors to get rid of the id's in the CSS. 799 | * Changed everything from '#nav' to '.nav' and from '#nav-toggle' to '.nav-toggle'. 800 | */ 801 | 802 | .nav ul { 803 | margin: 0; 804 | padding: 0; 805 | width: 100%; 806 | display: block; 807 | list-style: none; 808 | } 809 | 810 | .nav li { 811 | width: 100%; 812 | display: block; 813 | } 814 | 815 | .js .nav { 816 | clip: rect(0 0 0 0); 817 | max-height: 0; 818 | position: absolute; 819 | display: block; 820 | overflow: hidden; 821 | zoom: 1; 822 | } 823 | 824 | @media only screen and (min-width: 569px) { 825 | .js .nav { 826 | position: relative; 827 | } 828 | } 829 | 830 | .js .nav.closed { 831 | max-height: none; 832 | } 833 | 834 | .nav.opened { 835 | max-height: 9999px; 836 | } 837 | 838 | @media only screen and (min-width: 569px) { 839 | .nav-toggle { 840 | display: none; 841 | } 842 | } 843 | 844 | /* ---------------------------------------------------------------- 845 | MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin) 846 | ---------------------------------------------------------------- 847 | 848 | Demo at: http://www.aaronvanderzwan.com/maxcycle/ 849 | Download and Info at: http://github.com/akv2/MaxCycle---jQuery-Plugin/ 850 | Copyright (c) 2007-2011 Aaron Vanderzwan 851 | Dual licensed under the MIT and GPL licenses. 852 | 853 | */ 854 | 855 | /* Version: 2.0.73 (12-Oct-2012) */ 856 | 857 | .mc-hide-scrolls { 858 | overflow: hidden; 859 | } 860 | 861 | body .mc-cycle { 862 | height: 100%; 863 | left: 0; 864 | overflow: hidden; 865 | position: fixed; 866 | top: 0; 867 | width: 100%; 868 | z-index: -1; 869 | } 870 | 871 | div.mc-image { 872 | /*NOTE: Mozilla flickers when fading and using 'all', so we have to be specific with what property we want to transition: 873 | If you are using fading transitions, use 'opacity: */ 874 | -webkit-transition: opacity 1s ease-in-out; 875 | -o-transition: opacity 1s ease-in-out; 876 | transition: opacity 1s ease-in-out; 877 | /* If you are using horizontal slide transitions, use the following CSS: */ 878 | -webkit-transition: left 1s ease-in-out; 879 | -o-transition: left 1s ease-in-out; 880 | transition: left 1s ease-in-out; 881 | -webkit-background-size: cover; 882 | background-size: cover; 883 | background-position: center center; 884 | background-repeat: no-repeat; 885 | height: 100%; 886 | overflow: hidden; 887 | width: 100%; 888 | } 889 | 890 | .mc-old-browser .mc-image { 891 | overflow: hidden; 892 | } 893 | 894 | * { 895 | -moz-box-sizing: border-box; 896 | box-sizing: border-box; 897 | } 898 | 899 | html { 900 | position: relative; 901 | min-height: 100%; 902 | overflow-x: hidden; 903 | font: 0.875em/1.57143 "Museo500Regular", sans-serif; 904 | color: white; 905 | background: #222222; 906 | } 907 | 908 | body { 909 | height: 100%; 910 | } 911 | 912 | h1, 913 | h2, 914 | h3, 915 | h4, 916 | h5, 917 | h6, 918 | ul, 919 | ol, 920 | dl, 921 | blockquote, 922 | p, 923 | address, 924 | table, 925 | fieldset, 926 | figure, 927 | pre, 928 | .main__content, 929 | .news__item, 930 | .post__header, 931 | .post__aside, 932 | .box-heading, 933 | .menu-location, 934 | .menu-nav, 935 | .menu__item, 936 | .venue, 937 | #map_canvas, 938 | #map_canvas_loc, 939 | .media { 940 | margin-bottom: 22px; 941 | margin-bottom: 1.57143rem; 942 | } 943 | 944 | .menu-locations, 945 | #map_accordion ul, 946 | .lead, 947 | .landmark { 948 | margin-bottom: 44px; 949 | margin-bottom: 3.14286rem; 950 | } 951 | 952 | .menu-nav__item > a { 953 | margin-bottom: 11px; 954 | margin-bottom: 0.78571rem; 955 | } 956 | 957 | h1, 958 | h2, 959 | h3, 960 | h4, 961 | h5, 962 | h6, 963 | .page-title--mobile, 964 | .book-toggle, 965 | .nav-toggle, 966 | .site-nav, 967 | .splash, 968 | .pagination, 969 | .social-bit, 970 | .post__aside, 971 | .post__back, 972 | .menu-locations__item, 973 | #map_accordion li, 974 | .venue__footer, 975 | .book-circle__inner { 976 | font-family: "AlternateGothic2 BT", sans-serif; 977 | font-weight: normal; 978 | text-transform: uppercase; 979 | text-rendering: optimizeLegibility; 980 | } 981 | 982 | h1, 983 | .alpha { 984 | font-size: 36px; 985 | font-size: 2.57143rem; 986 | line-height: 1.22222; 987 | } 988 | 989 | h2, 990 | .beta { 991 | font-size: 30px; 992 | font-size: 2.14286rem; 993 | line-height: 1.46667; 994 | } 995 | 996 | h3, 997 | .gamma { 998 | font-size: 24px; 999 | font-size: 1.71429rem; 1000 | line-height: 1.83333; 1001 | } 1002 | 1003 | h4, 1004 | .delta { 1005 | font-size: 20px; 1006 | font-size: 1.42857rem; 1007 | line-height: 1.1; 1008 | } 1009 | 1010 | h5, 1011 | .epsilon { 1012 | font-size: 16px; 1013 | font-size: 1.14286rem; 1014 | line-height: 1.375; 1015 | } 1016 | 1017 | h6, 1018 | .zeta { 1019 | font-size: 14px; 1020 | font-size: 1rem; 1021 | line-height: 1.57143; 1022 | } 1023 | 1024 | a { 1025 | text-decoration: none; 1026 | color: #ff8400; 1027 | } 1028 | 1029 | .site-header a { 1030 | color: white; 1031 | } 1032 | 1033 | .main__content img { 1034 | max-width: 100%; 1035 | } 1036 | 1037 | /*------------------------------------*\ 1038 | $WRAPPER 1039 | \*------------------------------------*/ 1040 | 1041 | .wrapper { 1042 | min-height: 100%; 1043 | } 1044 | 1045 | @media only screen and (max-width: 568px) { 1046 | .wrapper { 1047 | overflow-x: hidden; 1048 | } 1049 | } 1050 | 1051 | @media only screen and (max-width: 1023px) { 1052 | .wrapper { 1053 | background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1054 | background: -o-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1055 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1056 | } 1057 | } 1058 | 1059 | @media only screen and (min-width: 569px) { 1060 | .wrapper { 1061 | padding: 22px; 1062 | } 1063 | } 1064 | 1065 | /*------------------------------------*\ 1066 | $HEADER 1067 | \*------------------------------------*/ 1068 | 1069 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1070 | .site-header { 1071 | border-bottom: white solid 5px; 1072 | margin-bottom: 22px; 1073 | position: relative; 1074 | } 1075 | } 1076 | 1077 | @media only screen and (min-width: 1024px) { 1078 | .site-header { 1079 | position: fixed; 1080 | left: 0; 1081 | top: 0; 1082 | bottom: 0; 1083 | height: 100%; 1084 | padding: 22px; 1085 | z-index: 20; 1086 | width: 235px; 1087 | background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1088 | background: -o-linear-gradient(left, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1089 | background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1090 | } 1091 | } 1092 | 1093 | @media only screen and (min-width: 1024px) and (max-height: 600px) { 1094 | .site-header { 1095 | position: absolute; 1096 | } 1097 | } 1098 | 1099 | /*------------------------------------*\ 1100 | $MAIN 1101 | \*------------------------------------*/ 1102 | 1103 | @media only screen and (min-width: 1024px) { 1104 | .main, 1105 | #footer_nav { 1106 | margin-left: 235px; 1107 | } 1108 | } 1109 | 1110 | @media only screen and (min-width: 1200px) { 1111 | .main, 1112 | #footer_nav { 1113 | margin-right: 191px; 1114 | } 1115 | } 1116 | 1117 | @media only screen and (min-width: 1024px) { 1118 | .main__header { 1119 | display: table; 1120 | height: 198px; 1121 | } 1122 | } 1123 | 1124 | .main__content { 1125 | padding: 22px 11px; 1126 | position: relative; 1127 | background: white; 1128 | background: rgba(255, 255, 255, 0.95); 1129 | color: #222222; 1130 | } 1131 | 1132 | @media only screen and (min-width: 569px) { 1133 | .main__content { 1134 | padding: 33px; 1135 | } 1136 | } 1137 | 1138 | /*------------------------------------*\ 1139 | $SITE FOOTER 1140 | \*------------------------------------*/ 1141 | 1142 | /** 1143 | * The footer with the animated restaurant logos is a global ModX chunk for all the BR sites, 1144 | * below is the HTML structure of the chunk. The most outer div is not included in the chunk. 1145 | * 1146 | 1186 | * 1187 | */ 1188 | 1189 | .site-footer { 1190 | font-size: 12px; 1191 | font-size: 0.85714rem; 1192 | line-height: 1.83333; 1193 | padding: 0 22px; 1194 | background: #222222; 1195 | } 1196 | 1197 | .site-footer a { 1198 | color: white; 1199 | display: inline-block; 1200 | } 1201 | 1202 | .page--bills-bar-burger .site-footer, 1203 | .page--gallery .site-footer { 1204 | display: none; 1205 | /* height: $unit * 6; 1206 | position: absolute; 1207 | top: 100%; 1208 | left: 0; 1209 | width: 100%; */ 1210 | } 1211 | 1212 | #footer_nav { 1213 | padding-bottom: 55px; 1214 | position: relative; 1215 | text-align: center; 1216 | margin-top: 22px; 1217 | } 1218 | 1219 | #footer_nav #br_logo { 1220 | left: 22px; 1221 | } 1222 | 1223 | @media only screen and (min-width: 1024px) { 1224 | #footer_nav #br_logo { 1225 | left: 0; 1226 | } 1227 | } 1228 | 1229 | #footer_nav #rest_green { 1230 | right: 22px; 1231 | } 1232 | 1233 | @media only screen and (min-width: 1024px) { 1234 | #footer_nav #rest_green { 1235 | right: 0; 1236 | } 1237 | } 1238 | 1239 | #footer_nav #btmNav_privacy { 1240 | margin-top: 66px !important; 1241 | } 1242 | 1243 | @media only screen and (min-width: 569px) { 1244 | #footer_nav #btmNav_privacy { 1245 | margin-top: 0 !important; 1246 | } 1247 | } 1248 | 1249 | #footer_nav #br_logo, 1250 | #footer_nav #rest_green { 1251 | position: absolute; 1252 | top: 0; 1253 | } 1254 | 1255 | #footer_nav #footer_nav_links a { 1256 | margin: 0 11px; 1257 | } 1258 | 1259 | #footer_nav #btmNav_ignite { 1260 | display: block; 1261 | } 1262 | 1263 | /*------------------------------------*\ 1264 | $PAGE TITLE 1265 | \*------------------------------------*/ 1266 | 1267 | .page-title { 1268 | margin: 0; 1269 | padding-top: 11px; 1270 | padding-bottom: 11px; 1271 | font-size: 34px; 1272 | font-size: 2.42857rem; 1273 | line-height: 1.29412; 1274 | } 1275 | 1276 | @media only screen and (max-width: 568px) { 1277 | .page-title { 1278 | padding-left: 22px; 1279 | } 1280 | } 1281 | 1282 | @media only screen and (min-width: 569px) { 1283 | .page-title { 1284 | display: table-cell; 1285 | vertical-align: middle; 1286 | text-shadow: 10px 10px 50px black, 10px -10px 50px black; 1287 | font-size: 70px; 1288 | font-size: 5rem; 1289 | line-height: 1.25714; 1290 | } 1291 | } 1292 | 1293 | .page--gallery .page-title, 1294 | .page--bills-bar-burger-rockefeller-center .page-title, 1295 | .page--bills-bar-burger-meatpacking-district .page-title, 1296 | .page--bills-bar-and-burger-atlantic-city .page-title { 1297 | font-size: 50px; 1298 | font-size: 3.57143rem; 1299 | } 1300 | 1301 | .page-title--mobile { 1302 | font-size: 50px; 1303 | font-size: 3.57143rem; 1304 | line-height: 1.32; 1305 | } 1306 | 1307 | @media only screen and (max-width: 568px) { 1308 | .page-title--mobile { 1309 | padding-left: 11px; 1310 | } 1311 | } 1312 | 1313 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1314 | .page-title--mobile { 1315 | position: absolute; 1316 | top: 33px; 1317 | right: 0; 1318 | white-space: pre; 1319 | line-height: 77px; 1320 | } 1321 | } 1322 | 1323 | @media only screen and (min-width: 1024px) { 1324 | .page-title--mobile { 1325 | display: none; 1326 | } 1327 | } 1328 | 1329 | .page--bills-bar-burger .page-title--mobile { 1330 | display: none; 1331 | } 1332 | 1333 | /*------------------------------------*\ 1334 | $LOGO 1335 | \*------------------------------------*/ 1336 | 1337 | @media only screen and (max-width: 568px) { 1338 | .logo-wrapper { 1339 | border-top: 5px solid white; 1340 | border-bottom: 5px solid white; 1341 | margin-top: 11px; 1342 | } 1343 | } 1344 | 1345 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1346 | .logo-wrapper { 1347 | float: left; 1348 | width: 20%; 1349 | height: 132px; 1350 | } 1351 | } 1352 | 1353 | .site-logo { 1354 | display: block; 1355 | text-align: center; 1356 | } 1357 | 1358 | @media only screen and (max-width: 1023px) { 1359 | .site-logo { 1360 | padding: 16px 11px 0; 1361 | } 1362 | } 1363 | 1364 | @media only screen and (max-width: 568px) { 1365 | .site-logo { 1366 | width: 50%; 1367 | } 1368 | } 1369 | 1370 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1371 | .site-logo { 1372 | vertical-align: middle; 1373 | } 1374 | } 1375 | 1376 | @media only screen and (min-width: 1024px) { 1377 | .site-logo { 1378 | padding: 22px 0 44px; 1379 | border-top: 5px solid white; 1380 | } 1381 | } 1382 | 1383 | .site-logo img { 1384 | vertical-align: bottom; 1385 | max-width: 100%; 1386 | } 1387 | 1388 | @media only screen and (max-width: 568px) { 1389 | .site-logo img { 1390 | max-height: 88px; 1391 | } 1392 | } 1393 | 1394 | .page--bills-bar-burger .site-logo { 1395 | border-bottom: 0; 1396 | } 1397 | 1398 | /*------------------------------------*\ 1399 | $TOGGLES 1400 | \*------------------------------------*/ 1401 | 1402 | .toggles { 1403 | border-left: 5px solid white; 1404 | float: right; 1405 | width: 50%; 1406 | } 1407 | 1408 | @media only screen and (min-width: 569px) { 1409 | .toggles { 1410 | display: none; 1411 | border-left: none; 1412 | } 1413 | } 1414 | 1415 | .book-toggle { 1416 | padding: 5.5px 11px; 1417 | position: relative; 1418 | text-align: center; 1419 | cursor: pointer; 1420 | font-size: 23px; 1421 | font-size: 1.64286rem; 1422 | } 1423 | 1424 | .book-toggle.open { 1425 | background: white; 1426 | color: #ff8400; 1427 | } 1428 | 1429 | .book-toggle .icon { 1430 | font-size: 30px; 1431 | font-size: 2.14286rem; 1432 | line-height: 1.46667; 1433 | font-weight: bold; 1434 | } 1435 | 1436 | .book-drawer { 1437 | width: 100%; 1438 | max-height: 0; 1439 | overflow: hidden; 1440 | position: absolute; 1441 | right: 0; 1442 | color: #222222; 1443 | background: white; 1444 | -webkit-transition: max-height 400ms ease-in-out; 1445 | -o-transition: max-height 400ms ease-in-out; 1446 | transition: max-height 400ms ease-in-out; 1447 | z-index: 100; 1448 | } 1449 | 1450 | .book-drawer.open { 1451 | max-height: 100%; 1452 | } 1453 | 1454 | .nav-toggle { 1455 | padding: 5.5px 11px; 1456 | border-top: 5px solid white; 1457 | text-align: center; 1458 | cursor: pointer; 1459 | font-size: 23px; 1460 | font-size: 1.64286rem; 1461 | line-height: 1.91304; 1462 | } 1463 | 1464 | .nav-toggle.open, 1465 | .nav-toggle:active { 1466 | background: white; 1467 | color: #ff8400; 1468 | } 1469 | 1470 | /*------------------------------------*\ 1471 | $NAVIGATION 1472 | \*------------------------------------*/ 1473 | 1474 | /** 1475 | * Some !important tags are needed to overwrite responsive-nav.js, see sass/vendor/_responsive-nav.scss 1476 | */ 1477 | 1478 | .site-nav { 1479 | font-size: 22px; 1480 | font-size: 1.57143rem; 1481 | line-height: 1; 1482 | } 1483 | 1484 | @media only screen and (max-width: 568px) { 1485 | .site-nav { 1486 | background: white; 1487 | z-index: 2; 1488 | } 1489 | 1490 | .site-nav a { 1491 | color: #474747; 1492 | } 1493 | } 1494 | 1495 | @media only screen and (min-width: 569px) { 1496 | .site-nav { 1497 | max-height: initial; 1498 | overflow: visible !important; 1499 | } 1500 | } 1501 | 1502 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1503 | .site-nav { 1504 | border-bottom: white solid 5px; 1505 | } 1506 | } 1507 | 1508 | @media only screen and (min-width: 1024px) { 1509 | .site-nav { 1510 | line-height: 33px; 1511 | margin-bottom: 22px; 1512 | font-size: 26px; 1513 | font-size: 1.85714rem; 1514 | } 1515 | } 1516 | 1517 | @media only screen and (max-width: 568px) { 1518 | .site-nav__inner { 1519 | padding: 14.66667px 0; 1520 | } 1521 | } 1522 | 1523 | @media only screen and (max-width: 568px) { 1524 | .site-nav__list { 1525 | position: relative; 1526 | border-top: 1px solid #b3b3b3; 1527 | padding: 0; 1528 | overflow: hidden; 1529 | } 1530 | 1531 | .site-nav__list:before { 1532 | content: ''; 1533 | position: absolute; 1534 | display: block; 1535 | height: 100%; 1536 | width: 50%; 1537 | top: 0; 1538 | border-right: 1px solid #b3b3b3; 1539 | } 1540 | } 1541 | 1542 | @media only screen and (min-width: 1024px) { 1543 | .site-nav__list { 1544 | padding: 11px 0 !important; 1545 | border-top: 5px solid white; 1546 | border-bottom: 5px solid white; 1547 | } 1548 | } 1549 | 1550 | @media only screen and (max-width: 568px) { 1551 | .site-nav__item { 1552 | padding: 22px 11px; 1553 | width: 50% !important; 1554 | position: relative; 1555 | float: left; 1556 | border-bottom: 1px solid #b3b3b3; 1557 | } 1558 | } 1559 | 1560 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1561 | .site-nav__item { 1562 | display: table !important; 1563 | padding: 0 11px; 1564 | text-align: center; 1565 | width: 20% !important; 1566 | float: left; 1567 | border-top: 5px solid white; 1568 | border-right: 5px solid white; 1569 | height: 66px; 1570 | } 1571 | 1572 | .site-nav__item:nth-child(5) { 1573 | border-right: 0; 1574 | } 1575 | } 1576 | 1577 | .site-nav__item a { 1578 | display: table-cell; 1579 | vertical-align: middle; 1580 | } 1581 | 1582 | .site-nav__item a:hover { 1583 | color: #ff8400; 1584 | } 1585 | 1586 | @media only screen and (min-width: 569px) { 1587 | .site-nav__item--home { 1588 | display: none !important; 1589 | } 1590 | } 1591 | 1592 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1593 | .site-nav__item--current, 1594 | .page--menus-and-food .site-nav__item--menus, 1595 | .page--special-events .site-nav__item--events, 1596 | .page--whats-happening .site-nav__item--news, 1597 | .page--gallery .site-nav__item--gallery, 1598 | .page--about-bills .site-nav__item--about, 1599 | .page--hours-and-locations .site-nav__item--locations, 1600 | .page--bills-bar-burger-rockefeller-center .site-nav__item--locations, 1601 | .page--bills-bar-burger-meatpacking-district .site-nav__item--locations, 1602 | .page--bills-bar-burger-atlantic-city .site-nav__item--locations, 1603 | .page--bills-bar-burger-downtown .site-nav__item--locations, 1604 | .page--book-here .site-nav__item--book { 1605 | background: white; 1606 | } 1607 | } 1608 | 1609 | .site-nav__item--current a, 1610 | .page--menus-and-food .site-nav__item--menus a, 1611 | .page--special-events .site-nav__item--events a, 1612 | .page--whats-happening .site-nav__item--news a, 1613 | .page--gallery .site-nav__item--gallery a, 1614 | .page--about-bills .site-nav__item--about a, 1615 | .page--hours-and-locations .site-nav__item--locations a, 1616 | .page--bills-bar-burger-rockefeller-center .site-nav__item--locations a, 1617 | .page--bills-bar-burger-meatpacking-district .site-nav__item--locations a, 1618 | .page--bills-bar-burger-atlantic-city .site-nav__item--locations a, 1619 | .page--bills-bar-burger-downtown .site-nav__item--locations a, 1620 | .page--book-here .site-nav__item--book a { 1621 | color: #ff8400; 1622 | text-decoration: line-through; 1623 | } 1624 | 1625 | /*------------------------------------*\ 1626 | $EXPANDABLE NAVIGATION 1627 | \*------------------------------------*/ 1628 | 1629 | /*------------------------------------*\ 1630 | $CURRENT NAVIGATION ITEM 1631 | \*------------------------------------*/ 1632 | 1633 | /** 1634 | * At the moment the navigation is not being pulled in dynamicly by Modx and is static instead. 1635 | */ 1636 | 1637 | /*------------------------------------*\ 1638 | $INTRO COPY 1639 | \*------------------------------------*/ 1640 | 1641 | @media only screen and (max-width: 1023px) { 1642 | .intro-copy { 1643 | display: none; 1644 | } 1645 | 1646 | .page--bills-bar-burger .intro-copy { 1647 | display: block; 1648 | position: absolute; 1649 | top: 121px; 1650 | padding: 22px; 1651 | } 1652 | } 1653 | 1654 | @media only screen and (max-height: 700px) { 1655 | .intro-copy { 1656 | display: none; 1657 | } 1658 | } 1659 | 1660 | /*------------------------------------*\ 1661 | $SITE SOCIAL 1662 | \*------------------------------------*/ 1663 | 1664 | .site-social { 1665 | border-top: 5px solid white; 1666 | text-align: center; 1667 | text-transform: uppercase; 1668 | } 1669 | 1670 | @media only screen and (max-width: 568px) { 1671 | .site-social { 1672 | display: none; 1673 | } 1674 | } 1675 | 1676 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1677 | .site-social { 1678 | float: left; 1679 | width: 20%; 1680 | height: 66px; 1681 | overflow: hidden; 1682 | } 1683 | } 1684 | 1685 | @media only screen and (min-width: 1024px) { 1686 | .site-social { 1687 | position: fixed; 1688 | width: 191px; 1689 | left: 22px; 1690 | bottom: 44px; 1691 | line-height: 44px; 1692 | border: 3px solid white; 1693 | font-size: 12px; 1694 | font-size: 0.85714rem; 1695 | line-height: 1.83333; 1696 | } 1697 | } 1698 | 1699 | @media only screen and (max-height: 600px) { 1700 | .site-social { 1701 | position: relative; 1702 | left: auto; 1703 | bottom: auto; 1704 | } 1705 | } 1706 | 1707 | .site-social__signup { 1708 | display: block; 1709 | border-bottom: 3px solid white; 1710 | line-height: 33px; 1711 | text-align: left; 1712 | text-indent: 11px; 1713 | } 1714 | 1715 | .site-social__signup:hover { 1716 | color: #ff8400; 1717 | } 1718 | 1719 | @media only screen and (max-width: 1023px) { 1720 | .site-social__signup { 1721 | display: none; 1722 | } 1723 | } 1724 | 1725 | @media only screen and (max-width: 1023px) { 1726 | .site-social__title { 1727 | display: none; 1728 | } 1729 | } 1730 | 1731 | @media only screen and (min-width: 1024px) { 1732 | .site-social__title { 1733 | float: left; 1734 | padding: 0 11px; 1735 | font-family: "museo_slab500", Verdana, sans-serif; 1736 | line-height: 33px; 1737 | } 1738 | } 1739 | 1740 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1741 | .site-social__list { 1742 | line-height: 61px; 1743 | } 1744 | } 1745 | 1746 | @media only screen and (min-width: 1024px) { 1747 | .site-social__list { 1748 | float: right; 1749 | line-height: 33px; 1750 | } 1751 | } 1752 | 1753 | @media only screen and (min-width: 569px) { 1754 | .site-social__item { 1755 | width: 33.333%; 1756 | border-left: 5px solid white; 1757 | float: left; 1758 | } 1759 | } 1760 | 1761 | @media only screen and (max-width: 1023px) { 1762 | .site-social__item:first-child { 1763 | border-left: none; 1764 | } 1765 | } 1766 | 1767 | @media only screen and (min-width: 1024px) { 1768 | .site-social__item { 1769 | padding: 0 5.5px; 1770 | border-left-width: 3px; 1771 | } 1772 | } 1773 | 1774 | .site-social__item .icon { 1775 | padding: 5.5px; 1776 | border-radius: 100%; 1777 | color: #222222; 1778 | background: white; 1779 | } 1780 | 1781 | .site-social__item .icon:hover { 1782 | background: #ff8400; 1783 | } 1784 | 1785 | /*------------------------------------*\ 1786 | $GALLERY 1787 | \*------------------------------------*/ 1788 | 1789 | .gallery-nav { 1790 | display: none; 1791 | border: 3px solid white; 1792 | cursor: pointer; 1793 | } 1794 | 1795 | @media only screen and (min-width: 569px) { 1796 | .gallery-nav { 1797 | display: inline-block; 1798 | position: fixed; 1799 | bottom: 44px; 1800 | right: 44px; 1801 | } 1802 | } 1803 | 1804 | @media only screen and (max-height: 380px) { 1805 | .gallery-nav { 1806 | position: absolute; 1807 | } 1808 | } 1809 | 1810 | .gallery-nav__item { 1811 | display: inline-block; 1812 | padding: 3.66667px 22px; 1813 | color: white; 1814 | font-size: 30px; 1815 | font-size: 2.14286rem; 1816 | line-height: 1.46667; 1817 | } 1818 | 1819 | .gallery-nav__item:hover { 1820 | color: #ff8400; 1821 | } 1822 | 1823 | .gallery-nav__item:first-child { 1824 | border-right: 3px solid white; 1825 | } 1826 | 1827 | .gallery-select { 1828 | display: inline-block; 1829 | min-width: 180px; 1830 | } 1831 | 1832 | @media only screen and (max-width: 568px) { 1833 | .gallery-select { 1834 | margin-left: 22px; 1835 | } 1836 | } 1837 | 1838 | .mc-image[data-href] { 1839 | cursor: pointer; 1840 | } 1841 | 1842 | .mc-image[data-href=""] { 1843 | cursor: default; 1844 | } 1845 | 1846 | /*------------------------------------*\ 1847 | $NEWS 1848 | \*------------------------------------*/ 1849 | 1850 | .news__item { 1851 | height: 220px; 1852 | } 1853 | 1854 | @media only screen and (min-width: 569px) { 1855 | .news__item { 1856 | float: left; 1857 | } 1858 | } 1859 | 1860 | @media only screen and (min-width: 569px) { 1861 | .news__item--small { 1862 | width: 33.333%; 1863 | } 1864 | } 1865 | 1866 | @media only screen and (min-width: 569px) { 1867 | .news__item--medium { 1868 | width: 63.667%; 1869 | margin-left: 3%; 1870 | } 1871 | } 1872 | 1873 | /*------------------------------------*\ 1874 | $POST EXCERPT 1875 | \*------------------------------------*/ 1876 | 1877 | * > .post-excerpt:first-child { 1878 | height: 100%; 1879 | width: 100%; 1880 | } 1881 | 1882 | * > .post-excerpt:first-child .post-excerpt__box, 1883 | * > .post-excerpt:first-child .splash { 1884 | height: 352px; 1885 | } 1886 | 1887 | .post-excerpt__box, 1888 | .splash { 1889 | display: block; 1890 | height: 220px; 1891 | margin-bottom: 0; 1892 | position: relative; 1893 | overflow: hidden; 1894 | } 1895 | 1896 | .post-excerpt__image { 1897 | max-width: initial !important; 1898 | min-width: 100%; 1899 | } 1900 | 1901 | .post-excerpt__title { 1902 | position: absolute; 1903 | bottom: 11px; 1904 | left: 11px; 1905 | margin-right: 11px; 1906 | padding: 11px; 1907 | margin-top: 0; 1908 | margin-bottom: 0; 1909 | background: white; 1910 | background: rgba(255, 255, 255, 0.75); 1911 | color: #222222; 1912 | letter-spacing: .1em; 1913 | white-space: pre; 1914 | font-size: 18px; 1915 | font-size: 1.28571rem; 1916 | line-height: 1.22222; 1917 | } 1918 | 1919 | /* 1920 | .post-excerpt__more{ 1921 | @extend %heading; 1922 | color: $black; 1923 | line-height: $unit * 2; 1924 | @include font-size(15px, false); 1925 | &:hover{ 1926 | color: $orange; 1927 | } 1928 | } 1929 | */ 1930 | 1931 | /*------------------------------------*\ 1932 | $SPLASH 1933 | \*------------------------------------*/ 1934 | 1935 | .splash { 1936 | display: none; 1937 | } 1938 | 1939 | @media only screen and (min-width: 569px) { 1940 | .splash { 1941 | display: table; 1942 | text-align: center; 1943 | letter-spacing: .1em; 1944 | } 1945 | } 1946 | 1947 | .splash--two { 1948 | margin-bottom: 22px; 1949 | } 1950 | 1951 | .splash__inner { 1952 | display: table-cell; 1953 | vertical-align: middle; 1954 | } 1955 | 1956 | .splash__title { 1957 | margin: 0; 1958 | line-height: 44px; 1959 | font-size: 37px; 1960 | font-size: 2.64286rem; 1961 | } 1962 | 1963 | .splash__title__first-line { 1964 | display: block; 1965 | line-height: 88px; 1966 | font-size: 120px; 1967 | font-size: 8.57143rem; 1968 | } 1969 | 1970 | .splash__subline { 1971 | margin: 0; 1972 | color: #474747; 1973 | line-height: 22px; 1974 | font-size: 22px; 1975 | font-size: 1.57143rem; 1976 | } 1977 | 1978 | /*------------------------------------*\ 1979 | $PAGINATION 1980 | \*------------------------------------*/ 1981 | 1982 | .pagination { 1983 | clear: both; 1984 | color: #222222; 1985 | line-height: 44px; 1986 | background: url("../images/hr.png") repeat-x, url("../images/hr.png") repeat-x bottom; 1987 | } 1988 | 1989 | .pagination a { 1990 | width: 49%; 1991 | color: #b3b3b3; 1992 | font-size: 22px; 1993 | font-size: 1.57143rem; 1994 | } 1995 | 1996 | .pagination a:last-child { 1997 | float: right; 1998 | text-align: right; 1999 | } 2000 | 2001 | /*------------------------------------*\ 2002 | $SOCIAL BIT 2003 | \*------------------------------------*/ 2004 | 2005 | .social-bit { 2006 | clear: both; 2007 | text-align: center; 2008 | line-height: 66px; 2009 | background: url("../images/social-bit.png") center center no-repeat; 2010 | font-size: 18px; 2011 | font-size: 1.28571rem; 2012 | } 2013 | 2014 | .social-bit .icon { 2015 | padding: 5.5px; 2016 | border-radius: 100%; 2017 | background: #474747; 2018 | color: #e1e1e1; 2019 | } 2020 | 2021 | .social-bit .icon:hover { 2022 | background: #ff8400; 2023 | } 2024 | 2025 | /*------------------------------------*\ 2026 | $POST 2027 | \*------------------------------------*/ 2028 | 2029 | .post__header { 2030 | min-height: 132px; 2031 | max-height: 396px; 2032 | position: relative; 2033 | overflow: hidden; 2034 | } 2035 | 2036 | .post__title { 2037 | padding: 11px; 2038 | margin-top: 0; 2039 | position: absolute; 2040 | top: 22px; 2041 | left: 22px; 2042 | background: #222222; 2043 | background: rgba(34, 34, 34, 0.9); 2044 | color: white; 2045 | } 2046 | 2047 | .post__image { 2048 | width: 100%; 2049 | } 2050 | 2051 | .post__copy { 2052 | overflow: hidden; 2053 | } 2054 | 2055 | .post__aside { 2056 | letter-spacing: .1em; 2057 | font-size: 18px; 2058 | font-size: 1.28571rem; 2059 | line-height: 1.22222; 2060 | } 2061 | 2062 | @media only screen and (min-width: 569px) { 2063 | .post__aside { 2064 | float: right; 2065 | margin-left: 22px; 2066 | } 2067 | } 2068 | 2069 | .post__back { 2070 | display: inline-block; 2071 | background: #ff8400; 2072 | padding: 11px; 2073 | white-space: pre; 2074 | } 2075 | 2076 | .post__back a { 2077 | color: white; 2078 | } 2079 | 2080 | /*------------------------------------*\ 2081 | $POST SOCIAL 2082 | \*------------------------------------*/ 2083 | 2084 | .post-social__title { 2085 | margin: 0; 2086 | line-height: 44px; 2087 | font-size: 20px; 2088 | font-size: 1.42857rem; 2089 | } 2090 | 2091 | .post-social__item { 2092 | display: block; 2093 | padding: 11px; 2094 | margin-bottom: 11px; 2095 | color: white; 2096 | } 2097 | 2098 | .post-social__item:after { 2099 | content: '>'; 2100 | margin-left: 22px; 2101 | } 2102 | 2103 | .post-social__item .icon { 2104 | display: inline-block; 2105 | padding: 3.66667px; 2106 | margin-right: 11px; 2107 | background: white; 2108 | border-radius: 50px; 2109 | } 2110 | 2111 | .post-social__item--twitter { 2112 | background-color: #4099ff; 2113 | } 2114 | 2115 | .post-social__item--twitter .icon { 2116 | color: #4099ff; 2117 | } 2118 | 2119 | .post-social__item--facebook { 2120 | background-color: #3b5998; 2121 | } 2122 | 2123 | .post-social__item--facebook .icon { 2124 | color: #3b5998; 2125 | } 2126 | 2127 | /*------------------------------------*\ 2128 | $NEWS BREAKOUT 2129 | \*------------------------------------*/ 2130 | 2131 | .news-breakout { 2132 | display: block; 2133 | margin-top: 22px; 2134 | text-align: center; 2135 | } 2136 | 2137 | /*------------------------------------*\ 2138 | $EVENT VENUE 2139 | \*------------------------------------*/ 2140 | 2141 | .events { 2142 | margin: 44px 0; 2143 | text-align: center; 2144 | } 2145 | 2146 | .event-venue { 2147 | padding: 0 11px; 2148 | margin-bottom: 22px; 2149 | } 2150 | 2151 | @media only screen and (min-width: 700px) { 2152 | .event-venue { 2153 | display: inline-block; 2154 | width: 33%; 2155 | margin-bottom: 0; 2156 | vertical-align: top; 2157 | } 2158 | } 2159 | 2160 | .event-venue__image { 2161 | display: inline-block; 2162 | } 2163 | 2164 | .event-venue__title { 2165 | font-family: "Museo500Regular", sans-serif; 2166 | letter-spacing: .1em; 2167 | white-space: pre; 2168 | font-size: 16px; 2169 | font-size: 1.14286rem; 2170 | line-height: 1.375; 2171 | } 2172 | 2173 | .event-venue__title a { 2174 | color: #222222; 2175 | } 2176 | 2177 | .event-venue__link { 2178 | display: inline-block; 2179 | padding: 11px; 2180 | color: white; 2181 | background-color: #ff8400; 2182 | } 2183 | 2184 | .event-venue__link i { 2185 | display: inline-block; 2186 | margin-left: 11px; 2187 | } 2188 | 2189 | /*------------------------------------*\ 2190 | $BOX HEADING 2191 | \*------------------------------------*/ 2192 | 2193 | .box-heading { 2194 | padding-bottom: 3px; 2195 | margin-top: 0; 2196 | background: url("../images/hr-2.png") repeat-x bottom; 2197 | font-size: 18px; 2198 | font-size: 1.28571rem; 2199 | line-height: 1.22222; 2200 | } 2201 | 2202 | .box-heading span { 2203 | display: inline-block; 2204 | padding: 11px 22px; 2205 | margin-left: 11px; 2206 | background-color: #2b2b2b; 2207 | color: white; 2208 | } 2209 | 2210 | /*------------------------------------*\ 2211 | $MENU LOCATIONS 2212 | \*------------------------------------*/ 2213 | 2214 | .menu-locations, 2215 | #map_accordion ul { 2216 | background: url("../images/hr-2.png") top repeat-x, url("../images/hr-2.png") bottom repeat-x; 2217 | padding: 11px 0; 2218 | } 2219 | 2220 | @media only screen and (min-width: 569px) { 2221 | .menu-locations, 2222 | #map_accordion ul { 2223 | text-align: center; 2224 | } 2225 | } 2226 | 2227 | .menu-locations__item, 2228 | #map_accordion li { 2229 | letter-spacing: .1em; 2230 | font-size: 22px; 2231 | font-size: 1.57143rem; 2232 | line-height: 1; 2233 | } 2234 | 2235 | @media only screen and (min-width: 569px) { 2236 | .menu-locations__item, 2237 | #map_accordion li { 2238 | display: inline-block; 2239 | margin: 0 22px; 2240 | } 2241 | } 2242 | 2243 | .menu-locations__item a, 2244 | #map_accordion li a { 2245 | display: block; 2246 | color: #b3b3b3; 2247 | line-height: 44px; 2248 | } 2249 | 2250 | @media only screen and (min-width: 1024px) { 2251 | .menu-locations__item--active { 2252 | position: relative; 2253 | } 2254 | 2255 | .menu-locations__item--active::after { 2256 | display: block; 2257 | content: ''; 2258 | position: absolute; 2259 | bottom: -8px; 2260 | border: transparent 11px solid; 2261 | border-bottom-color: #2b2b2b; 2262 | left: 50%; 2263 | margin-left: -5.5px; 2264 | } 2265 | } 2266 | 2267 | .menu-locations__item--active a { 2268 | color: #2b2b2b; 2269 | } 2270 | 2271 | /*------------------------------------*\ 2272 | $MENU LOCATION 2273 | \*------------------------------------*/ 2274 | 2275 | .menu-location { 2276 | font-family: "museo_slab500", Verdana, sans-serif; 2277 | } 2278 | 2279 | /*------------------------------------*\ 2280 | $MENU NAV 2281 | \*------------------------------------*/ 2282 | 2283 | .menu-nav { 2284 | float: left; 2285 | margin-right: 22px; 2286 | } 2287 | 2288 | @media only screen and (min-width: 569px) { 2289 | .menu-nav { 2290 | margin-right: 44px; 2291 | } 2292 | } 2293 | 2294 | .menu-nav__list { 2295 | text-transform: uppercase; 2296 | } 2297 | 2298 | .menu-nav__item > a { 2299 | display: block; 2300 | color: #474747; 2301 | } 2302 | 2303 | .menu-nav--sub__list { 2304 | text-transform: capitalize; 2305 | list-style: none; 2306 | padding-left: 0; 2307 | margin-top: 11px; 2308 | } 2309 | 2310 | @media only screen and (min-width: 569px) { 2311 | .menu-nav--sub__list { 2312 | padding-left: 22px; 2313 | } 2314 | } 2315 | 2316 | .menu-nav--sub__list a { 2317 | color: #b3b3b3; 2318 | } 2319 | 2320 | .menu-nav--sub__item--active a { 2321 | color: #ff8400; 2322 | } 2323 | 2324 | /*------------------------------------*\ 2325 | $MENU 2326 | \*------------------------------------*/ 2327 | 2328 | .menu { 2329 | overflow: hidden; 2330 | position: relative; 2331 | } 2332 | 2333 | .menu__title { 2334 | margin-top: 0; 2335 | font-family: "Museo500Regular", sans-serif; 2336 | font-size: 28px; 2337 | font-size: 2rem; 2338 | } 2339 | 2340 | .menu__item__title { 2341 | text-transform: uppercase; 2342 | } 2343 | 2344 | /*------------------------------------*\ 2345 | $DELIVERY BUTTON 2346 | \*------------------------------------*/ 2347 | 2348 | .delivery-button { 2349 | margin-right: 11px; 2350 | margin-bottom: 11px; 2351 | font-size: 13px; 2352 | font-size: 0.92857rem; 2353 | line-height: 1.69231; 2354 | } 2355 | 2356 | /*------------------------------------*\ 2357 | $VENUE 2358 | \*------------------------------------*/ 2359 | 2360 | .venue__header { 2361 | height: 308px; 2362 | margin-bottom: 33px; 2363 | position: relative; 2364 | overflow: hidden; 2365 | } 2366 | 2367 | .venue__header .button, 2368 | .venue__header .venue-menus a, 2369 | .venue-menus .venue__header a { 2370 | position: absolute; 2371 | right: 0; 2372 | top: 0; 2373 | } 2374 | 2375 | .venue__header img { 2376 | max-width: initial; 2377 | min-width: 100%; 2378 | } 2379 | 2380 | .venue__footer { 2381 | padding: 22px 0 22px; 2382 | margin: 0; 2383 | position: absolute; 2384 | bottom: 0; 2385 | left: 0; 2386 | width: 100%; 2387 | background: url("../images/text-footer.png") left bottom repeat-x; 2388 | color: white; 2389 | text-align: center; 2390 | font-size: 20px; 2391 | font-size: 1.42857rem; 2392 | line-height: 1.1; 2393 | } 2394 | 2395 | .venue__footer a { 2396 | color: white; 2397 | text-decoration: underline; 2398 | } 2399 | 2400 | .venue__caption { 2401 | width: 100%; 2402 | padding: 22px; 2403 | margin-bottom: 0; 2404 | position: absolute; 2405 | bottom: 0; 2406 | left: 0; 2407 | background-color: #222222; 2408 | background-color: rgba(0, 0, 0, 0.7); 2409 | font-family: "museo_slab500", Verdana, sans-serif; 2410 | color: white; 2411 | font-size: 17px; 2412 | font-size: 1.21429rem; 2413 | line-height: 1.29412; 2414 | } 2415 | 2416 | .venue__row { 2417 | padding-bottom: 33px; 2418 | margin-bottom: 33px; 2419 | background: url("../images/hr-2.png") bottom repeat-x; 2420 | } 2421 | 2422 | .venue__row > :last-child { 2423 | margin-right: 0; 2424 | } 2425 | 2426 | * > .venue__row:last-child { 2427 | background: none; 2428 | padding-bottom: 0; 2429 | } 2430 | 2431 | @media only screen and (max-width: 568px) { 2432 | .venue__item { 2433 | margin-bottom: 44px; 2434 | } 2435 | } 2436 | 2437 | @media only screen and (min-width: 569px) { 2438 | .venue__item { 2439 | width: 31.3%; 2440 | float: left; 2441 | margin-right: 3%; 2442 | } 2443 | } 2444 | 2445 | .venue__item .title { 2446 | font-size: 22px; 2447 | font-size: 1.57143rem; 2448 | line-height: 1; 2449 | } 2450 | 2451 | .venue__item > :first-child { 2452 | margin-top: 0; 2453 | } 2454 | 2455 | @media only screen and (min-width: 569px) { 2456 | .venue__item--double { 2457 | width: 65.6%; 2458 | } 2459 | } 2460 | 2461 | .venue-menus { 2462 | padding-right: 22px !important; 2463 | } 2464 | 2465 | .venue-menus li { 2466 | margin-bottom: 11px; 2467 | text-align: center; 2468 | font-family: "museo_slab500", Verdana, sans-serif; 2469 | font-size: 12px; 2470 | font-size: 0.85714rem; 2471 | line-height: 1.83333; 2472 | } 2473 | 2474 | .venue-menus a { 2475 | display: block; 2476 | background-color: #b3b3b3; 2477 | } 2478 | 2479 | .venue-menus a:after { 2480 | content: ' >'; 2481 | } 2482 | 2483 | .venue-opening p:last-child { 2484 | margin-bottom: 0; 2485 | } 2486 | 2487 | .venue-quote { 2488 | background: url("../images/venue-quote.png") 11px 44px no-repeat; 2489 | } 2490 | 2491 | .venue-quote blockquote { 2492 | padding: 33px 22px; 2493 | } 2494 | 2495 | .venue-contact { 2496 | color: #ff8400; 2497 | } 2498 | 2499 | .venue-contact img { 2500 | margin-top: 22px; 2501 | } 2502 | 2503 | .venue-contact .title { 2504 | font-size: 20px; 2505 | font-size: 1.42857rem; 2506 | line-height: 1.1; 2507 | margin-top: 0; 2508 | } 2509 | 2510 | .venue-link { 2511 | overflow: hidden; 2512 | } 2513 | 2514 | .venue-link a { 2515 | display: block; 2516 | position: relative; 2517 | text-align: center; 2518 | } 2519 | 2520 | .venue-link h2 { 2521 | position: relative; 2522 | z-index: 1; 2523 | display: inline-block; 2524 | margin: 44px 0; 2525 | padding: 11px; 2526 | background: #222222; 2527 | background-color: rgba(34, 34, 34, 0.7); 2528 | color: white; 2529 | } 2530 | 2531 | .venue-link img { 2532 | min-width: 100%; 2533 | position: absolute; 2534 | top: 0; 2535 | left: 0; 2536 | } 2537 | 2538 | .venue-link--floorplan { 2539 | position: relative; 2540 | text-align: center; 2541 | } 2542 | 2543 | .venue-link--floorplan > a:first-child { 2544 | position: absolute; 2545 | top: 0; 2546 | left: 0; 2547 | right: 0; 2548 | bottom: 0; 2549 | z-index: 10; 2550 | } 2551 | 2552 | .venue-link--floorplan h2 { 2553 | font-size: 22px; 2554 | font-size: 1.57143rem; 2555 | line-height: 1; 2556 | } 2557 | 2558 | .venue-link--ad a { 2559 | text-align: left; 2560 | } 2561 | 2562 | .venue-link--ad .title { 2563 | margin: 0 0 88px; 2564 | background-color: transparent; 2565 | text-shadow: 10px 10px 50px black; 2566 | } 2567 | 2568 | /*------------------------------------*\ 2569 | $LOCATION BOX 2570 | \*------------------------------------*/ 2571 | 2572 | .location-box { 2573 | padding: 44px 0; 2574 | margin-bottom: 0; 2575 | border-bottom: 2px dotted #b3b3b3; 2576 | } 2577 | 2578 | .location-box:last-child { 2579 | border-bottom: none; 2580 | padding-bottom: 0; 2581 | } 2582 | 2583 | .location-box__image { 2584 | height: 198px; 2585 | width: 198px; 2586 | overflow: hidden; 2587 | float: none; 2588 | margin: 0 auto 44px; 2589 | } 2590 | 2591 | @media only screen and (max-width: 568px) { 2592 | .location-box__image { 2593 | display: block; 2594 | margin-bottom: 22px; 2595 | } 2596 | } 2597 | 2598 | @media only screen and (min-width: 569px) { 2599 | .location-box__image { 2600 | float: left; 2601 | margin-right: 33px; 2602 | margin-bottom: 0; 2603 | } 2604 | } 2605 | 2606 | .location-box__image img { 2607 | border-radius: 198px; 2608 | min-height: 100%; 2609 | min-width: 100%; 2610 | } 2611 | 2612 | .location-box__title { 2613 | margin: 0; 2614 | font-family: "museo_slab500", Verdana, sans-serif; 2615 | font-size: 16px; 2616 | font-size: 1.14286rem; 2617 | line-height: 1.375; 2618 | } 2619 | 2620 | @media only screen and (min-width: 1200px) { 2621 | .location-box__left, 2622 | .location-box__right { 2623 | display: inline-block; 2624 | width: 48%; 2625 | padding-right: 22px; 2626 | vertical-align: top; 2627 | } 2628 | } 2629 | 2630 | .location-box__right { 2631 | padding-right: 66px; 2632 | } 2633 | 2634 | .foot-note { 2635 | padding: 11px 0; 2636 | border-top: 2px dotted #b3b3b3; 2637 | border-bottom: 2px dotted #b3b3b3; 2638 | margin-bottom: 0; 2639 | } 2640 | 2641 | /*------------------------------------*\ 2642 | $BOOKING WIDGET 2643 | \*------------------------------------*/ 2644 | 2645 | .booking-widget { 2646 | width: 360px; 2647 | height: 242px; 2648 | padding: 91px 35px 34px 24px; 2649 | font-size: 14px !important; 2650 | color: #222222 !important; 2651 | background: url("../images/booking-widget.png") no-repeat; 2652 | } 2653 | 2654 | @media only screen and (max-width: 360px) { 2655 | .booking-widget { 2656 | position: relative; 2657 | left: -33px; 2658 | } 2659 | } 2660 | 2661 | @media only screen and (max-width: 568px) { 2662 | .booking-widget { 2663 | margin: 22px auto 0; 2664 | } 2665 | } 2666 | 2667 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 2668 | .booking-widget { 2669 | margin: 0 auto 22px; 2670 | } 2671 | } 2672 | 2673 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 2674 | .page--bills-bar-burger .main .booking-widget, 2675 | .page--bills-bar-burger #footer_nav .booking-widget { 2676 | margin-top: 55px; 2677 | } 2678 | } 2679 | 2680 | @media only screen and (max-width: 568px) { 2681 | .page--bills-bar-burger .main .booking-widget, 2682 | .page--bills-bar-burger #footer_nav .booking-widget, 2683 | .page--gallery .booking-widget { 2684 | display: none; 2685 | } 2686 | } 2687 | 2688 | @media only screen and (min-width: 569px) { 2689 | .page--bills-bar-burger .main .booking-widget, 2690 | .page--bills-bar-burger #footer_nav .booking-widget, 2691 | .page--gallery .booking-widget { 2692 | margin-left: 0; 2693 | } 2694 | } 2695 | 2696 | @media only screen and (min-width: 1024px) { 2697 | .page--bills-bar-burger .main .booking-widget, 2698 | .page--bills-bar-burger #footer_nav .booking-widget, 2699 | .page--gallery .booking-widget { 2700 | left: auto; 2701 | position: fixed; 2702 | top: 24px; 2703 | right: 24px; 2704 | } 2705 | } 2706 | 2707 | .page--hours-and-locations .booking-widget, 2708 | .page--book-here .booking-widget, 2709 | .venue-page .booking-widget { 2710 | background: url("../images/booking-widget-dark.png") no-repeat; 2711 | } 2712 | 2713 | .page--hours-and-locations .booking-widget { 2714 | margin: 22px auto 0; 2715 | } 2716 | 2717 | @media only screen and (min-width: 1024px) { 2718 | .page--hours-and-locations .booking-widget { 2719 | width: 726px; 2720 | height: auto; 2721 | padding: 23px 0 20px 20px; 2722 | background: url("../images/booking-widget-vertical.png") top left no-repeat; 2723 | } 2724 | 2725 | .page--hours-and-locations .booking-widget .rowElem, 2726 | .page--hours-and-locations .booking-widget .submit { 2727 | width: 23%; 2728 | } 2729 | 2730 | .page--hours-and-locations .booking-widget .submit { 2731 | width: auto; 2732 | } 2733 | 2734 | .page--hours-and-locations .booking-widget .submit .icon { 2735 | float: none; 2736 | } 2737 | } 2738 | 2739 | .booking-widget .rowElem, 2740 | .booking-widget .submit { 2741 | display: block; 2742 | margin: 0 11px 11px 0; 2743 | width: 45%; 2744 | float: left; 2745 | clear: none !important; 2746 | } 2747 | 2748 | .booking-widget .rowElem { 2749 | position: relative; 2750 | } 2751 | 2752 | .booking-widget .rowElem .jqTransformInputInner div { 2753 | margin: 0; 2754 | } 2755 | 2756 | .booking-widget .rowElem .icon { 2757 | position: absolute; 2758 | z-index: 100; 2759 | font-size: 18px; 2760 | top: 20%; 2761 | right: 8%; 2762 | color: #222222; 2763 | } 2764 | 2765 | .booking-widget .submit .button, 2766 | .booking-widget .submit .venue-menus a, 2767 | .venue-menus .booking-widget .submit a { 2768 | display: block; 2769 | padding-top: 0; 2770 | padding-bottom: 0; 2771 | line-height: 34px; 2772 | } 2773 | 2774 | .booking-widget .submit .icon { 2775 | font-size: 12px; 2776 | float: right; 2777 | } 2778 | 2779 | .booking-widget .startdate, 2780 | .booking-widget .resttime { 2781 | height: 35px; 2782 | background: #fff; 2783 | border: 1px solid #dfdfdf; 2784 | } 2785 | 2786 | .booking-widget .startdate input, 2787 | .booking-widget .resttime input { 2788 | text-indent: 12px; 2789 | outline: none; 2790 | } 2791 | 2792 | @media only screen and (max-width: 720px) { 2793 | .page--book-here .media__img--rev, 2794 | .page--bills-bar-burger-rockefeller-center .media__img--rev, 2795 | .page--bills-bar-burger-meatpacking-district .media__img--rev, 2796 | .page--bills-bar-and-burger-atlantic-city .media__img--rev { 2797 | float: none; 2798 | margin-left: 0; 2799 | } 2800 | } 2801 | 2802 | /*------------------------------------*\ 2803 | $BOOK BUTTON 2804 | \*------------------------------------*/ 2805 | 2806 | .book-circle { 2807 | font-size: 22px; 2808 | font-size: 1.57143rem; 2809 | line-height: 1; 2810 | display: table; 2811 | width: 154px; 2812 | height: 154px; 2813 | border-radius: 100%; 2814 | background: #ee3124; 2815 | color: white; 2816 | text-align: center; 2817 | } 2818 | 2819 | @media only screen and (max-width: 1023px) { 2820 | /* 1commentsdif sdf */ 2821 | .book-circle { 2822 | display: none; /* another comment */ 2823 | } 2824 | } 2825 | 2826 | .main__content .book-circle { 2827 | position: absolute; 2828 | top: -176px; 2829 | right: 22px; 2830 | } 2831 | 2832 | .page--gallery .book-circle { 2833 | position: absolute; 2834 | top: 44px; 2835 | right: 44px; 2836 | display: none; 2837 | } 2838 | 2839 | @media only screen and (min-width: 1024px) { 2840 | .page--gallery .book-circle.is-visible { 2841 | display: table; 2842 | } 2843 | } 2844 | 2845 | .book-circle__inner { 2846 | display: table-cell; 2847 | vertical-align: middle; 2848 | } 2849 | 2850 | .book-circle__inner .icon { 2851 | display: block; 2852 | margin: 0 auto 11px; 2853 | } 2854 | 2855 | /*------------------------------------*\ 2856 | $LEAD 2857 | \*------------------------------------*/ 2858 | 2859 | .lead { 2860 | font-size: 16px; 2861 | font-size: 1.14286rem; 2862 | line-height: 1.375; 2863 | } 2864 | 2865 | .venue-lead { 2866 | padding-bottom: 33px; 2867 | margin-bottom: 33px; 2868 | background: url("../images/hr-2.png") repeat-x bottom; 2869 | line-height: 33px; 2870 | font-size: 20px; 2871 | font-size: 1.42857rem; 2872 | } 2873 | 2874 | /*------------------------------------*\ 2875 | $PAGE BACKGROUNDS 2876 | \*------------------------------------*/ 2877 | 2878 | /** 2879 | * Maybe create a mixin for this? Something like: 2880 | * 2881 | @mixin background-cover($url, $attachment:false){ 2882 | background: url('$url'); 2883 | background-size: cover; 2884 | 2885 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='$url', sizingMethod='scale'); 2886 | -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='$url', sizingMethod='scale')"; 2887 | 2888 | @if $attachment == fixed{ 2889 | background-attachment: $attachment; 2890 | } 2891 | } 2892 | 2893 | @include background-cover('../images/gallery/meatpacking/large/image2.jpg', fixed); // optional 'background-attachment: fixed'? 2894 | * 2895 | */ 2896 | 2897 | .page--hours-and-locations, 2898 | .page--menus-and-food, 2899 | .page--bills-bar-burger-rockefeller-center, 2900 | .page--bills-bar-burger-meatpacking-district, 2901 | .page--bills-bar-burger-atlantic-city, 2902 | .page--bills-bar-burger-downtown { 2903 | background: url("../images/backgrounds/menus-and-food.jpg"); 2904 | background-attachment: fixed; 2905 | background-size: cover; 2906 | } 2907 | 2908 | .page--special-events { 2909 | background: url("../images/backgrounds/special-events.jpg"); 2910 | background-attachment: fixed; 2911 | background-size: cover; 2912 | } 2913 | 2914 | .page--about-bills, 2915 | .page--whats-happening { 2916 | background: url("../images/backgrounds/news.jpg"); 2917 | background-attachment: fixed; 2918 | background-size: cover; 2919 | } 2920 | 2921 | .page--book-here { 2922 | background: url("../images/backgrounds/book-here.jpg"); 2923 | background-attachment: fixed; 2924 | background-size: cover; 2925 | } 2926 | 2927 | /*------------------------------------*\ 2928 | $JQUERY UI 2929 | \*------------------------------------*/ 2930 | 2931 | /** 2932 | * Jquery UI widgets are not build with the new box-model, so we need to reset it just for Jquery UI 2933 | */ 2934 | 2935 | .ui-widget * { 2936 | -moz-box-sizing: content-box !important; 2937 | box-sizing: content-box !important; 2938 | } 2939 | 2940 | /*------------------------------------*\ 2941 | $JQTRANSFORM 2942 | \*------------------------------------*/ 2943 | 2944 | /** 2945 | * The CSS below is used to style form elements through a Jquery plugin called Jqtransform. 2946 | * See _jqtransform.scss in the vendor folder. 2947 | */ 2948 | 2949 | .jqTransformSelectWrapper { 2950 | width: 100% !important; 2951 | } 2952 | 2953 | .jqTransformSelectWrapper div span { 2954 | display: block !important; 2955 | width: 135px; 2956 | color: #222222 !important; 2957 | text-transform: none; 2958 | } 2959 | 2960 | #opentableRezervtionForm .jqTransformSelectWrapper { 2961 | color: #222222; 2962 | } 2963 | 2964 | #opentableRezervtionForm .jqTransformSelectWrapper a.jqTransformSelectOpen, 2965 | #navSelect .jqTransformSelectWrapper a.jqTransformSelectOpen { 2966 | z-index: 999px; 2967 | font-size: 18px; 2968 | width: auto; 2969 | height: auto; 2970 | top: 12%; 2971 | right: 7%; 2972 | color: #222222; 2973 | } 2974 | 2975 | .jqTransformSelectWrapper a.jqTransformSelectOpen::after { 2976 | font-family: 'bills'; 2977 | speak: none; 2978 | font-style: normal; 2979 | font-weight: normal; 2980 | font-variant: normal; 2981 | text-transform: none; 2982 | -webkit-font-smoothing: antialiased; 2983 | content: "\e009"; 2984 | } 2985 | 2986 | .jqTransformSelectWrapper ul { 2987 | position: relative; 2988 | top: 100%; 2989 | overflow: auto; 2990 | margin: 0; 2991 | padding: 0; 2992 | width: 100% !important; 2993 | height: 140px; 2994 | border-right: 1px solid #CCC; 2995 | border-bottom: 1px solid #CCC; 2996 | border-left: 1px solid #CCC; 2997 | background-color: #FFF; 2998 | list-style-type: none; 2999 | text-align: left; 3000 | position: absolute; 3001 | } 3002 | 3003 | .jqTransformSelectWrapper ul a.selected { 3004 | background: #fff; 3005 | } 3006 | 3007 | .jqTransformSelectWrapper ul a:hover { 3008 | background: #e4e0e0; 3009 | } 3010 | 3011 | .divElem { 3012 | position: relative; 3013 | } 3014 | 3015 | #show_datepicker, 3016 | #show_timepicker { 3017 | position: absolute; 3018 | top: 4px; 3019 | right: 9px; 3020 | } 3021 | 3022 | #show_datepicker:hover, 3023 | #show_timepicker:hover { 3024 | cursor: pointer; 3025 | } 3026 | 3027 | #ui-timepicker-div { 3028 | position: relative; 3029 | margin-top: 35px; 3030 | } 3031 | 3032 | .jqTransformInputInner div input { 3033 | width: 100% !important; 3034 | line-height: 22px !important; 3035 | position: relative !important; 3036 | z-index: 100 !important; 3037 | border-radius: 0 !important; 3038 | } 3039 | 3040 | #map_canvas, 3041 | #map_canvas_loc { 3042 | height: 400px; 3043 | } 3044 | 3045 | #map_tabs { 3046 | display: none; 3047 | /* I could not disable this in the snippet so I had to hide it like this */ 3048 | } 3049 | 3050 | #map_accordion { 3051 | margin-top: -25px; 3052 | } 3053 | 3054 | #map_accordion ul { 3055 | padding: 11px 0; 3056 | margin: 0 0 22px; 3057 | list-style: none; 3058 | background: url("../images/hr-2.png") bottom repeat-x; 3059 | } 3060 | 3061 | #map_accordion li { 3062 | margin: 0 11px !important; 3063 | } 3064 | 3065 | #map_accordion li a { 3066 | color: #222222; 3067 | } 3068 | 3069 | .map_print { 3070 | display: none; 3071 | } 3072 | 3073 | /*------------------------------------*\ 3074 | $VENUE BOX (OLD) 3075 | \*------------------------------------*/ 3076 | 3077 | /** 3078 | * All of the'.venue_'... CSS is copied from the old website 3079 | * and is used to style the popup boxes in the google maps widget 3080 | */ 3081 | 3082 | .venue_box { 3083 | width: 272px; 3084 | display: inline; 3085 | float: left; 3086 | margin: 0 17px; 3087 | color: #000; 3088 | height: 220px !important; 3089 | /* I had to add a hight with !important to keep it from breaking */ 3090 | } 3091 | 3092 | .venue_wrap { 3093 | width: 252px; 3094 | text-align: center; 3095 | background: #fff; 3096 | font: 0.8em Arial, Helvetica, sans-serif; 3097 | padding: 10px; 3098 | } 3099 | 3100 | .venue_image { 3101 | height: 115px; 3102 | width: 252px; 3103 | overflow: hidden; 3104 | } 3105 | 3106 | .venue_image img { 3107 | height: 115px; 3108 | } 3109 | 3110 | .venue_text { 3111 | border-bottom: 1px solid #000; 3112 | padding: 5px; 3113 | overflow: hidden; 3114 | } 3115 | 3116 | .venue_info { 3117 | height: 50px; 3118 | margin-top: 3px; 3119 | } 3120 | 3121 | .venue_mealtime { 3122 | display: block; 3123 | clear: both; 3124 | } 3125 | 3126 | .venue_contact { 3127 | margin-top: 5px; 3128 | } 3129 | 3130 | .venue_contact a { 3131 | color: #000; 3132 | text-decoration: none; 3133 | margin-left: 5px; 3134 | } 3135 | 3136 | .venue_contact a:hover { 3137 | color: #000; 3138 | text-decoration: underline; 3139 | } 3140 | 3141 | .venue_cost { 3142 | display: none; 3143 | margin: 2px auto; 3144 | width: 68px; 3145 | } 3146 | 3147 | .venue_cuisine { 3148 | display: none; 3149 | } 3150 | 3151 | .venue_address { 3152 | clear: both; 3153 | } 3154 | 3155 | .venue_actions { 3156 | background: #ff0066; 3157 | padding: 2px 0; 3158 | } 3159 | 3160 | .venue_actions a { 3161 | color: #fff; 3162 | margin-left: 8px; 3163 | text-decoration: none; 3164 | } 3165 | 3166 | .venue_actions a:hover { 3167 | text-decoration: underline; 3168 | color: #fff; 3169 | } 3170 | 3171 | .venue_social { 3172 | margin: 15px 0 10px 0; 3173 | } 3174 | 3175 | .venue_social a { 3176 | margin-right: 10px; 3177 | } 3178 | 3179 | @media only screen { 3180 | /* hihihih */ 3181 | html{ 3182 | color:red; /* hsdfjsdjhf */ 3183 | line-height: 200; 3184 | } 3185 | } 3186 | 3187 | @media print { 3188 | html{ 3189 | color:red; 3190 | line-height: 200; 3191 | } 3192 | } 3193 | 3194 | @-webkit-keyframes NAME-YOUR-ANIMATION { 3195 | /* hahahah */ 3196 | 0% { opacity: 0; /* helphelp */ } 3197 | 100% { opacity: 1; } 3198 | } 3199 | @-moz-keyframes NAME-YOUR-ANIMATION { 3200 | 0% { opacity: 0; } 3201 | 100% { opacity: 1; } 3202 | } 3203 | @-o-keyframes NAME-YOUR-ANIMATION { 3204 | 0% { opacity: 0; } 3205 | 100% { opacity: 1; } 3206 | } 3207 | @keyframes NAME-YOUR-ANIMATION { 3208 | 0% { opacity: 0; } 3209 | 100% { opacity: 1; } 3210 | } -------------------------------------------------------------------------------- /test/expected/test4.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'AlternateGothic2 BT';src:url(../fonts/alternate-gothic2.eot);src:url(../fonts/alternate-gothic2.eot?#iefix) format("embedded-opentype"),url(../fonts/alternate-gothic2.woff) format("woff"),url(../fonts/alternate-gothic2.ttf) format("truetype"),url(../fonts/alternate-gothic2.svg#022c20d3c2b5208bc4ff771e4b5afcc9) format("svg");font-style:normal;font-weight:400}@font-face{font-family:museo_slab500;src:url(../fonts/Museo_Slab_500_2-webfont.eot);src:url(../fonts/Museo_Slab_500_2-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/Museo_Slab_500_2-webfont.woff) format("woff"),url(../fonts/Museo_Slab_500_2-webfont.ttf) format("truetype"),url(../fonts/Museo_Slab_500_2-webfont.svg#museo_slab500) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Museo300Regular;src:url(../fonts/Museo300-Regular-webfont.eot);src:url(../fonts/Museo300-Regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/Museo300-Regular-webfont.woff) format("woff"),url(../fonts/Museo300-Regular-webfont.ttf) format("truetype"),url(../fonts/Museo300-Regular-webfont.svg#Museo300Regular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Museo500Regular;src:url(../fonts/Museo500-Regular-webfont.eot);src:url(../fonts/Museo500-Regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/Museo500-Regular-webfont.woff) format("woff"),url(../fonts/Museo500-Regular-webfont.ttf) format("truetype"),url(../fonts/Museo500-Regular-webfont.svg#Museo500Regular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:bills;src:url(../fonts/bills.eot);src:url(../fonts/bills.eot?#iefix) format("embedded-opentype"),url(../fonts/bills.woff) format("woff"),url(../fonts/bills.ttf) format("truetype"),url(../fonts/bills.svg#bills) format("svg");font-weight:400;font-style:normal}.icon-ignite-logo,.icon-facebook,.icon-twitter,.icon-pinterest,.icon-googleplus,.icon-reorder,.icon-pointer,.icon-arrow-right,.icon-arrow-left,.icon-angle-down,.icon-circle-arrow-down,.icon-menus,.icon-capacity,.icon-hours,.icon-search,.icon-venue-stretch,.icon-angle-up,.icon-angle-right,.icon-angle-left{font-family:bills;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased}.icon-ignite-logo:before{content:"\e000"}.icon-facebook:before{content:"\e001"}.icon-twitter:before{content:"\e002"}.icon-pinterest:before{content:"\e003"}.icon-googleplus:before{content:"\e004"}.icon-reorder:before{content:"\e005"}.icon-pointer:before{content:"\e006"}.icon-arrow-right:before{content:"\e007"}.icon-arrow-left:before{content:"\e008"}.icon-angle-down:before{content:"\e009"}.icon-circle-arrow-down:before{content:"\e010"}.icon-menus:before{content:"\e011"}.icon-capacity:before{content:"\e012"}.icon-hours:before{content:"\e013"}.icon-search:before{content:"\f002"}.icon-venue-stretch:before{content:"\e00a"}.icon-angle-up:before{content:"\f106"}.icon-angle-right:before{content:"\f105"}.icon-angle-left:before{content:"\f104"}.clearfix:after,.media:after,.wrapper:after,.site-header:after,.logo-wrapper:after,.site-social:after,.site-social__list:after,.pagination:after,.menu-location:after,.venue:after,.venue__row:after,.page--hours-and-locations .booking-widget:after,.booking-widget__form:after{content:"";display:table;clear:both}.image-replacement{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent}body:after{display:none}@media only screen and (min-width:569px){body:after{content:'lap-and-up'}}@media only screen and (min-width:1024px){body:after{content:'desk lap-and-up'}}@media only screen and (min-width:1200px){body:after{content:'desk-wide desk lap-and-up'}}.clear-list,.inline-list{list-style-type:none;padding:0;margin:0}.inline-list>*{display:inline-block}.media{display:block}.media__img{float:left;margin-right:22px}.media__img--rev{float:right;margin-left:22px}.media__img img,.media__img--rev img{display:block}.media__body{overflow:hidden}.media__body>*{margin-top:0}.media__body,.media__body>:last-child{margin-bottom:0}.button,.venue-menus a{display:inline-block;background-color:#ff8400;color:#fff;padding:11px}.button--big{padding:22px}.icon--left{margin-right:5.5px}.icon--right{margin-left:5.5px}.icon-rounded{display:inline-block;padding:5.5px;color:#b3b3b3;border-radius:44px;background-color:#fff}.nav ul{margin:0;padding:0;width:100%;display:block;list-style:none}.nav li{width:100%;display:block}.js .nav{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}@media only screen and (min-width:569px){.js .nav{position:relative}}.js .nav.closed{max-height:none}.nav.opened{max-height:9999px}@media only screen and (min-width:569px){.nav-toggle{display:none}}.mc-hide-scrolls{overflow:hidden}body .mc-cycle{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:-1}div.mc-image{-webkit-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out;-webkit-transition:left 1s ease-in-out;-o-transition:left 1s ease-in-out;transition:left 1s ease-in-out;-webkit-background-size:cover;background-size:cover;background-position:center center;background-repeat:no-repeat;height:100%;overflow:hidden;width:100%}.mc-old-browser .mc-image{overflow:hidden}*{-moz-box-sizing:border-box;box-sizing:border-box}html{position:relative;min-height:100%;overflow-x:hidden;font:.875em/1.57143 Museo500Regular,sans-serif;color:#fff;background:#222}body{height:100%}h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.main__content,.news__item,.post__header,.post__aside,.box-heading,.menu-location,.menu-nav,.menu__item,.venue,#map_canvas,#map_canvas_loc,.media{margin-bottom:22px;margin-bottom:1.57143rem}.menu-locations,#map_accordion ul,.lead,.landmark{margin-bottom:44px;margin-bottom:3.14286rem}.menu-nav__item>a{margin-bottom:11px;margin-bottom:.78571rem}h1,h2,h3,h4,h5,h6,.page-title--mobile,.book-toggle,.nav-toggle,.site-nav,.splash,.pagination,.social-bit,.post__aside,.post__back,.menu-locations__item,#map_accordion li,.venue__footer,.book-circle__inner{font-family:"AlternateGothic2 BT",sans-serif;font-weight:400;text-transform:uppercase;text-rendering:optimizeLegibility}h1,.alpha{font-size:36px;font-size:2.57143rem;line-height:1.22222}h2,.beta{font-size:30px;font-size:2.14286rem;line-height:1.46667}h3,.gamma{font-size:24px;font-size:1.71429rem;line-height:1.83333}h4,.delta{font-size:20px;font-size:1.42857rem;line-height:1.1}h5,.epsilon{font-size:16px;font-size:1.14286rem;line-height:1.375}h6,.zeta{font-size:14px;font-size:1rem;line-height:1.57143}a{text-decoration:none;color:#ff8400}.site-header a{color:#fff}.main__content img{max-width:100%}.wrapper{min-height:100%}@media only screen and (max-width:568px){.wrapper{overflow-x:hidden}}@media only screen and (max-width:1023px){.wrapper{background:-webkit-linear-gradient(top,rgba(0,0,0,.9) 0,transparent 176px);background:-o-linear-gradient(top,rgba(0,0,0,.9) 0,transparent 176px);background:linear-gradient(to bottom,rgba(0,0,0,.9) 0,transparent 176px)}}@media only screen and (min-width:569px){.wrapper{padding:22px}}@media only screen and (min-width:569px) and (max-width:1023px){.site-header{border-bottom:#fff solid 5px;margin-bottom:22px;position:relative}}@media only screen and (min-width:1024px){.site-header{position:fixed;left:0;top:0;bottom:0;height:100%;padding:22px;z-index:20;width:235px;background:-webkit-linear-gradient(left,rgba(0,0,0,.9) 0,transparent 100%);background:-o-linear-gradient(left,rgba(0,0,0,.9) 0,transparent 100%);background:linear-gradient(to right,rgba(0,0,0,.9) 0,transparent 100%)}}@media only screen and (min-width:1024px) and (max-height:600px){.site-header{position:absolute}}@media only screen and (min-width:1024px){.main,#footer_nav{margin-left:235px}}@media only screen and (min-width:1200px){.main,#footer_nav{margin-right:191px}}@media only screen and (min-width:1024px){.main__header{display:table;height:198px}}.main__content{padding:22px 11px;position:relative;background:#fff;background:rgba(255,255,255,.95);color:#222}@media only screen and (min-width:569px){.main__content{padding:33px}}.site-footer{font-size:12px;font-size:.85714rem;line-height:1.83333;padding:0 22px;background:#222}.site-footer a{color:#fff;display:inline-block}.page--bills-bar-burger .site-footer,.page--gallery .site-footer{display:none}#footer_nav{padding-bottom:55px;position:relative;text-align:center;margin-top:22px}#footer_nav #br_logo{left:22px}@media only screen and (min-width:1024px){#footer_nav #br_logo{left:0}}#footer_nav #rest_green{right:22px}@media only screen and (min-width:1024px){#footer_nav #rest_green{right:0}}#footer_nav #btmNav_privacy{margin-top:66px!important}@media only screen and (min-width:569px){#footer_nav #btmNav_privacy{margin-top:0!important}}#footer_nav #br_logo,#footer_nav #rest_green{position:absolute;top:0}#footer_nav #footer_nav_links a{margin:0 11px}#footer_nav #btmNav_ignite{display:block}.page-title{margin:0;padding-top:11px;padding-bottom:11px;font-size:34px;font-size:2.42857rem;line-height:1.29412}@media only screen and (max-width:568px){.page-title{padding-left:22px}}@media only screen and (min-width:569px){.page-title{display:table-cell;vertical-align:middle;text-shadow:10px 10px 50px black,10px -10px 50px #000;font-size:70px;font-size:5rem;line-height:1.25714}}.page--gallery .page-title,.page--bills-bar-burger-rockefeller-center .page-title,.page--bills-bar-burger-meatpacking-district .page-title,.page--bills-bar-and-burger-atlantic-city .page-title{font-size:50px;font-size:3.57143rem}.page-title--mobile{font-size:50px;font-size:3.57143rem;line-height:1.32}@media only screen and (max-width:568px){.page-title--mobile{padding-left:11px}}@media only screen and (min-width:569px) and (max-width:1023px){.page-title--mobile{position:absolute;top:33px;right:0;white-space:pre;line-height:77px}}@media only screen and (min-width:1024px){.page-title--mobile{display:none}}.page--bills-bar-burger .page-title--mobile{display:none}@media only screen and (max-width:568px){.logo-wrapper{border-top:5px solid #fff;border-bottom:5px solid #fff;margin-top:11px}}@media only screen and (min-width:569px) and (max-width:1023px){.logo-wrapper{float:left;width:20%;height:132px}}.site-logo{display:block;text-align:center}@media only screen and (max-width:1023px){.site-logo{padding:16px 11px 0}}@media only screen and (max-width:568px){.site-logo{width:50%}}@media only screen and (min-width:569px) and (max-width:1023px){.site-logo{vertical-align:middle}}@media only screen and (min-width:1024px){.site-logo{padding:22px 0 44px;border-top:5px solid #fff}}.site-logo img{vertical-align:bottom;max-width:100%}@media only screen and (max-width:568px){.site-logo img{max-height:88px}}.page--bills-bar-burger .site-logo{border-bottom:0}.toggles{border-left:5px solid #fff;float:right;width:50%}@media only screen and (min-width:569px){.toggles{display:none;border-left:0}}.book-toggle{padding:5.5px 11px;position:relative;text-align:center;cursor:pointer;font-size:23px;font-size:1.64286rem}.book-toggle.open{background:#fff;color:#ff8400}.book-toggle .icon{font-size:30px;font-size:2.14286rem;line-height:1.46667;font-weight:700}.book-drawer{width:100%;max-height:0;overflow:hidden;position:absolute;right:0;color:#222;background:#fff;-webkit-transition:max-height 400ms ease-in-out;-o-transition:max-height 400ms ease-in-out;transition:max-height 400ms ease-in-out;z-index:100}.book-drawer.open{max-height:100%}.nav-toggle{padding:5.5px 11px;border-top:5px solid #fff;text-align:center;cursor:pointer;font-size:23px;font-size:1.64286rem;line-height:1.91304}.nav-toggle.open,.nav-toggle:active{background:#fff;color:#ff8400}.site-nav{font-size:22px;font-size:1.57143rem;line-height:1}@media only screen and (max-width:568px){.site-nav{background:#fff;z-index:2}.site-nav a{color:#474747}}@media only screen and (min-width:569px){.site-nav{max-height:initial;overflow:visible!important}}@media only screen and (min-width:569px) and (max-width:1023px){.site-nav{border-bottom:#fff solid 5px}}@media only screen and (min-width:1024px){.site-nav{line-height:33px;margin-bottom:22px;font-size:26px;font-size:1.85714rem}}@media only screen and (max-width:568px){.site-nav__inner{padding:14.66667px 0}}@media only screen and (max-width:568px){.site-nav__list{position:relative;border-top:1px solid #b3b3b3;padding:0;overflow:hidden}.site-nav__list:before{content:'';position:absolute;display:block;height:100%;width:50%;top:0;border-right:1px solid #b3b3b3}}@media only screen and (min-width:1024px){.site-nav__list{padding:11px 0!important;border-top:5px solid #fff;border-bottom:5px solid #fff}}@media only screen and (max-width:568px){.site-nav__item{padding:22px 11px;width:50%!important;position:relative;float:left;border-bottom:1px solid #b3b3b3}}@media only screen and (min-width:569px) and (max-width:1023px){.site-nav__item{display:table!important;padding:0 11px;text-align:center;width:20%!important;float:left;border-top:5px solid #fff;border-right:5px solid #fff;height:66px}.site-nav__item:nth-child(5){border-right:0}}.site-nav__item a{display:table-cell;vertical-align:middle}.site-nav__item a:hover{color:#ff8400}@media only screen and (min-width:569px){.site-nav__item--home{display:none!important}}@media only screen and (min-width:569px) and (max-width:1023px){.site-nav__item--current,.page--menus-and-food .site-nav__item--menus,.page--special-events .site-nav__item--events,.page--whats-happening .site-nav__item--news,.page--gallery .site-nav__item--gallery,.page--about-bills .site-nav__item--about,.page--hours-and-locations .site-nav__item--locations,.page--bills-bar-burger-rockefeller-center .site-nav__item--locations,.page--bills-bar-burger-meatpacking-district .site-nav__item--locations,.page--bills-bar-burger-atlantic-city .site-nav__item--locations,.page--bills-bar-burger-downtown .site-nav__item--locations,.page--book-here .site-nav__item--book{background:#fff}}.site-nav__item--current a,.page--menus-and-food .site-nav__item--menus a,.page--special-events .site-nav__item--events a,.page--whats-happening .site-nav__item--news a,.page--gallery .site-nav__item--gallery a,.page--about-bills .site-nav__item--about a,.page--hours-and-locations .site-nav__item--locations a,.page--bills-bar-burger-rockefeller-center .site-nav__item--locations a,.page--bills-bar-burger-meatpacking-district .site-nav__item--locations a,.page--bills-bar-burger-atlantic-city .site-nav__item--locations a,.page--bills-bar-burger-downtown .site-nav__item--locations a,.page--book-here .site-nav__item--book a{color:#ff8400;text-decoration:line-through}@media only screen and (max-width:1023px){.intro-copy{display:none}.page--bills-bar-burger .intro-copy{display:block;position:absolute;top:121px;padding:22px}}@media only screen and (max-height:700px){.intro-copy{display:none}}.site-social{border-top:5px solid #fff;text-align:center;text-transform:uppercase}@media only screen and (max-width:568px){.site-social{display:none}}@media only screen and (min-width:569px) and (max-width:1023px){.site-social{float:left;width:20%;height:66px;overflow:hidden}}@media only screen and (min-width:1024px){.site-social{position:fixed;width:191px;left:22px;bottom:44px;line-height:44px;border:3px solid #fff;font-size:12px;font-size:.85714rem;line-height:1.83333}}@media only screen and (max-height:600px){.site-social{position:relative;left:auto;bottom:auto}}.site-social__signup{display:block;border-bottom:3px solid #fff;line-height:33px;text-align:left;text-indent:11px}.site-social__signup:hover{color:#ff8400}@media only screen and (max-width:1023px){.site-social__signup{display:none}}@media only screen and (max-width:1023px){.site-social__title{display:none}}@media only screen and (min-width:1024px){.site-social__title{float:left;padding:0 11px;font-family:museo_slab500,Verdana,sans-serif;line-height:33px}}@media only screen and (min-width:569px) and (max-width:1023px){.site-social__list{line-height:61px}}@media only screen and (min-width:1024px){.site-social__list{float:right;line-height:33px}}@media only screen and (min-width:569px){.site-social__item{width:33.333%;border-left:5px solid #fff;float:left}}@media only screen and (max-width:1023px){.site-social__item:first-child{border-left:0}}@media only screen and (min-width:1024px){.site-social__item{padding:0 5.5px;border-left-width:3px}}.site-social__item .icon{padding:5.5px;border-radius:100%;color:#222;background:#fff}.site-social__item .icon:hover{background:#ff8400}.gallery-nav{display:none;border:3px solid #fff;cursor:pointer}@media only screen and (min-width:569px){.gallery-nav{display:inline-block;position:fixed;bottom:44px;right:44px}}@media only screen and (max-height:380px){.gallery-nav{position:absolute}}.gallery-nav__item{display:inline-block;padding:3.66667px 22px;color:#fff;font-size:30px;font-size:2.14286rem;line-height:1.46667}.gallery-nav__item:hover{color:#ff8400}.gallery-nav__item:first-child{border-right:3px solid #fff}.gallery-select{display:inline-block;min-width:180px}@media only screen and (max-width:568px){.gallery-select{margin-left:22px}}.mc-image[data-href]{cursor:pointer}.mc-image[data-href=""]{cursor:default}.news__item{height:220px}@media only screen and (min-width:569px){.news__item{float:left}}@media only screen and (min-width:569px){.news__item--small{width:33.333%}}@media only screen and (min-width:569px){.news__item--medium{width:63.667%;margin-left:3%}}*>.post-excerpt:first-child{height:100%;width:100%}*>.post-excerpt:first-child .post-excerpt__box,*>.post-excerpt:first-child .splash{height:352px}.post-excerpt__box,.splash{display:block;height:220px;margin-bottom:0;position:relative;overflow:hidden}.post-excerpt__image{max-width:initial!important;min-width:100%}.post-excerpt__title{position:absolute;bottom:11px;left:11px;margin-right:11px;padding:11px;margin-top:0;margin-bottom:0;background:#fff;background:rgba(255,255,255,.75);color:#222;letter-spacing:.1em;white-space:pre;font-size:18px;font-size:1.28571rem;line-height:1.22222}.splash{display:none}@media only screen and (min-width:569px){.splash{display:table;text-align:center;letter-spacing:.1em}}.splash--two{margin-bottom:22px}.splash__inner{display:table-cell;vertical-align:middle}.splash__title{margin:0;line-height:44px;font-size:37px;font-size:2.64286rem}.splash__title__first-line{display:block;line-height:88px;font-size:120px;font-size:8.57143rem}.splash__subline{margin:0;color:#474747;line-height:22px;font-size:22px;font-size:1.57143rem}.pagination{clear:both;color:#222;line-height:44px;background:url(../images/hr.png) repeat-x,url(../images/hr.png) repeat-x bottom}.pagination a{width:49%;color:#b3b3b3;font-size:22px;font-size:1.57143rem}.pagination a:last-child{float:right;text-align:right}.social-bit{clear:both;text-align:center;line-height:66px;background:url(../images/social-bit.png) center center no-repeat;font-size:18px;font-size:1.28571rem}.social-bit .icon{padding:5.5px;border-radius:100%;background:#474747;color:#e1e1e1}.social-bit .icon:hover{background:#ff8400}.post__header{min-height:132px;max-height:396px;position:relative;overflow:hidden}.post__title{padding:11px;margin-top:0;position:absolute;top:22px;left:22px;background:#222;background:rgba(34,34,34,.9);color:#fff}.post__image{width:100%}.post__copy{overflow:hidden}.post__aside{letter-spacing:.1em;font-size:18px;font-size:1.28571rem;line-height:1.22222}@media only screen and (min-width:569px){.post__aside{float:right;margin-left:22px}}.post__back{display:inline-block;background:#ff8400;padding:11px;white-space:pre}.post__back a{color:#fff}.post-social__title{margin:0;line-height:44px;font-size:20px;font-size:1.42857rem}.post-social__item{display:block;padding:11px;margin-bottom:11px;color:#fff}.post-social__item:after{content:'>';margin-left:22px}.post-social__item .icon{display:inline-block;padding:3.66667px;margin-right:11px;background:#fff;border-radius:50px}.post-social__item--twitter{background-color:#4099ff}.post-social__item--twitter .icon{color:#4099ff}.post-social__item--facebook{background-color:#3b5998}.post-social__item--facebook .icon{color:#3b5998}.news-breakout{display:block;margin-top:22px;text-align:center}.events{margin:44px 0;text-align:center}.event-venue{padding:0 11px;margin-bottom:22px}@media only screen and (min-width:700px){.event-venue{display:inline-block;width:33%;margin-bottom:0;vertical-align:top}}.event-venue__image{display:inline-block}.event-venue__title{font-family:Museo500Regular,sans-serif;letter-spacing:.1em;white-space:pre;font-size:16px;font-size:1.14286rem;line-height:1.375}.event-venue__title a{color:#222}.event-venue__link{display:inline-block;padding:11px;color:#fff;background-color:#ff8400}.event-venue__link i{display:inline-block;margin-left:11px}.box-heading{padding-bottom:3px;margin-top:0;background:url(../images/hr-2.png) repeat-x bottom;font-size:18px;font-size:1.28571rem;line-height:1.22222}.box-heading span{display:inline-block;padding:11px 22px;margin-left:11px;background-color:#2b2b2b;color:#fff}.menu-locations,#map_accordion ul{background:url(../images/hr-2.png) top repeat-x,url(../images/hr-2.png) bottom repeat-x;padding:11px 0}@media only screen and (min-width:569px){.menu-locations,#map_accordion ul{text-align:center}}.menu-locations__item,#map_accordion li{letter-spacing:.1em;font-size:22px;font-size:1.57143rem;line-height:1}@media only screen and (min-width:569px){.menu-locations__item,#map_accordion li{display:inline-block;margin:0 22px}}.menu-locations__item a,#map_accordion li a{display:block;color:#b3b3b3;line-height:44px}@media only screen and (min-width:1024px){.menu-locations__item--active{position:relative}.menu-locations__item--active::after{display:block;content:'';position:absolute;bottom:-8px;border:transparent 11px solid;border-bottom-color:#2b2b2b;left:50%;margin-left:-5.5px}}.menu-locations__item--active a{color:#2b2b2b}.menu-location{font-family:museo_slab500,Verdana,sans-serif}.menu-nav{float:left;margin-right:22px}@media only screen and (min-width:569px){.menu-nav{margin-right:44px}}.menu-nav__list{text-transform:uppercase}.menu-nav__item>a{display:block;color:#474747}.menu-nav--sub__list{text-transform:capitalize;list-style:none;padding-left:0;margin-top:11px}@media only screen and (min-width:569px){.menu-nav--sub__list{padding-left:22px}}.menu-nav--sub__list a{color:#b3b3b3}.menu-nav--sub__item--active a{color:#ff8400}.menu{overflow:hidden;position:relative}.menu__title{margin-top:0;font-family:Museo500Regular,sans-serif;font-size:28px;font-size:2rem}.menu__item__title{text-transform:uppercase}.delivery-button{margin-right:11px;margin-bottom:11px;font-size:13px;font-size:.92857rem;line-height:1.69231}.venue__header{height:308px;margin-bottom:33px;position:relative;overflow:hidden}.venue__header .button,.venue__header .venue-menus a,.venue-menus .venue__header a{position:absolute;right:0;top:0}.venue__header img{max-width:initial;min-width:100%}.venue__footer{padding:22px 0;margin:0;position:absolute;bottom:0;left:0;width:100%;background:url(../images/text-footer.png) left bottom repeat-x;color:#fff;text-align:center;font-size:20px;font-size:1.42857rem;line-height:1.1}.venue__footer a{color:#fff;text-decoration:underline}.venue__caption{width:100%;padding:22px;margin-bottom:0;position:absolute;bottom:0;left:0;background-color:#222;background-color:rgba(0,0,0,.7);font-family:museo_slab500,Verdana,sans-serif;color:#fff;font-size:17px;font-size:1.21429rem;line-height:1.29412}.venue__row{padding-bottom:33px;margin-bottom:33px;background:url(../images/hr-2.png) bottom repeat-x}.venue__row>:last-child{margin-right:0}*>.venue__row:last-child{background:0;padding-bottom:0}@media only screen and (max-width:568px){.venue__item{margin-bottom:44px}}@media only screen and (min-width:569px){.venue__item{width:31.3%;float:left;margin-right:3%}}.venue__item .title{font-size:22px;font-size:1.57143rem;line-height:1}.venue__item>:first-child{margin-top:0}@media only screen and (min-width:569px){.venue__item--double{width:65.6%}}.venue-menus{padding-right:22px!important}.venue-menus li{margin-bottom:11px;text-align:center;font-family:museo_slab500,Verdana,sans-serif;font-size:12px;font-size:.85714rem;line-height:1.83333}.venue-menus a{display:block;background-color:#b3b3b3}.venue-menus a:after{content:' >'}.venue-opening p:last-child{margin-bottom:0}.venue-quote{background:url(../images/venue-quote.png) 11px 44px no-repeat}.venue-quote blockquote{padding:33px 22px}.venue-contact{color:#ff8400}.venue-contact img{margin-top:22px}.venue-contact .title{font-size:20px;font-size:1.42857rem;line-height:1.1;margin-top:0}.venue-link{overflow:hidden}.venue-link a{display:block;position:relative;text-align:center}.venue-link h2{position:relative;z-index:1;display:inline-block;margin:44px 0;padding:11px;background:#222;background-color:rgba(34,34,34,.7);color:#fff}.venue-link img{min-width:100%;position:absolute;top:0;left:0}.venue-link--floorplan{position:relative;text-align:center}.venue-link--floorplan>a:first-child{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10}.venue-link--floorplan h2{font-size:22px;font-size:1.57143rem;line-height:1}.venue-link--ad a{text-align:left}.venue-link--ad .title{margin:0 0 88px;background-color:transparent;text-shadow:10px 10px 50px #000}.location-box{padding:44px 0;margin-bottom:0;border-bottom:2px dotted #b3b3b3}.location-box:last-child{border-bottom:0;padding-bottom:0}.location-box__image{height:198px;width:198px;overflow:hidden;float:none;margin:0 auto 44px}@media only screen and (max-width:568px){.location-box__image{display:block;margin-bottom:22px}}@media only screen and (min-width:569px){.location-box__image{float:left;margin-right:33px;margin-bottom:0}}.location-box__image img{border-radius:198px;min-height:100%;min-width:100%}.location-box__title{margin:0;font-family:museo_slab500,Verdana,sans-serif;font-size:16px;font-size:1.14286rem;line-height:1.375}@media only screen and (min-width:1200px){.location-box__left,.location-box__right{display:inline-block;width:48%;padding-right:22px;vertical-align:top}}.location-box__right{padding-right:66px}.foot-note{padding:11px 0;border-top:2px dotted #b3b3b3;border-bottom:2px dotted #b3b3b3;margin-bottom:0}.booking-widget{width:360px;height:242px;padding:70px 25px 34px 23px;font-size:14px!important;color:#222!important;background:url(../images/booking-widget--jetblue.png) -15px -10px no-repeat}@media only screen and (max-width:360px){.booking-widget{position:relative;left:-33px}}@media only screen and (max-width:568px){.booking-widget{margin:22px auto 0}}@media only screen and (min-width:569px) and (max-width:1023px){.booking-widget{margin:0 auto 22px}}.page--bills-bar-burger .main .booking-widget>*,.page--bills-bar-burger #footer_nav .booking-widget>*{display:inline-block;vertical-align:top}@media only screen and (max-width:568px){.page--bills-bar-burger .main .booking-widget,.page--bills-bar-burger #footer_nav .booking-widget{display:none}}@media only screen and (min-width:569px){.page--bills-bar-burger .main .booking-widget,.page--bills-bar-burger #footer_nav .booking-widget{margin-left:0}}@media only screen and (min-width:1024px){.page--bills-bar-burger .main .booking-widget,.page--bills-bar-burger #footer_nav .booking-widget{left:auto;position:fixed;top:24px;right:24px}}.page--hours-and-locations .booking-widget,.page--book-here .booking-widget,.venue-page .booking-widget{background:url(../images/booking-widget-dark.png) -15px -10px no-repeat}.page--hours-and-locations .booking-widget{margin:22px auto 0}@media only screen and (min-width:1024px){.page--hours-and-locations .booking-widget{width:726px;height:auto;padding:23px 0 20px 20px;background:url(../images/booking-widget-vertical.png) top left no-repeat}.page--hours-and-locations .booking-widget .rowElem,.page--hours-and-locations .booking-widget .submit{width:18%}.page--hours-and-locations .booking-widget .submit{width:auto}.page--hours-and-locations .booking-widget .submit .icon{float:none}}.booking-widget .rowElem,.booking-widget .submit{display:block;margin:0 5.5px 5.5px 0;width:45%;float:left;clear:none!important}.booking-widget .rowElem{position:relative}.booking-widget .rowElem .jqTransformInputInner div{margin:0}.booking-widget .rowElem .icon{position:absolute;z-index:100;font-size:18px;top:20%;right:8%;color:#222}.booking-widget .submit .button,.booking-widget .submit .venue-menus a,.venue-menus .booking-widget .submit a{display:block;padding-top:0;padding-bottom:0;line-height:34px}.booking-widget .submit .icon{font-size:12px;float:right}.booking-widget .startdate,.booking-widget .resttime{height:35px;background:#fff;border:1px solid #dfdfdf}.booking-widget .startdate input,.booking-widget .resttime input{text-indent:12px;outline:0}@media only screen and (max-width:720px){.page--book-here .media__img--rev,.page--bills-bar-burger-rockefeller-center .media__img--rev,.page--bills-bar-burger-meatpacking-district .media__img--rev,.page--bills-bar-and-burger-atlantic-city .media__img--rev{float:none;margin-left:0}}.book-circle{font-size:22px;font-size:1.57143rem;line-height:1;display:table;width:154px;height:154px;border-radius:100%;background:#ee3124;color:#fff;text-align:center}@media only screen and (max-width:1023px){.book-circle{display:none}}.main__content .book-circle{position:absolute;top:-176px;right:22px}.page--gallery .book-circle{position:absolute;top:44px;right:44px;display:none}@media only screen and (min-width:1024px){.page--gallery .book-circle.is-visible{display:table}}.book-circle__inner{display:table-cell;vertical-align:middle}.book-circle__inner .icon{display:block;margin:0 auto 11px}.lead{font-size:16px;font-size:1.14286rem;line-height:1.375}.venue-lead{padding-bottom:33px;margin-bottom:33px;background:url(../images/hr-2.png) repeat-x bottom;line-height:33px;font-size:20px;font-size:1.42857rem}.page--hours-and-locations,.page--menus-and-food,.page--bills-bar-burger-rockefeller-center,.page--bills-bar-burger-meatpacking-district,.page--bills-bar-burger-atlantic-city,.page--bills-bar-burger-downtown{background:url(../images/backgrounds/menus-and-food.jpg);background-attachment:fixed;background-size:cover}.page--special-events{background:url(../images/backgrounds/special-events.jpg);background-attachment:fixed;background-size:cover}.page--about-bills,.page--whats-happening{background:url(../images/backgrounds/news.jpg);background-attachment:fixed;background-size:cover}.page--book-here{background:url(../images/backgrounds/book-here.jpg);background-attachment:fixed;background-size:cover}.ui-widget *{-moz-box-sizing:content-box!important;box-sizing:content-box!important}.jqTransformSelectWrapper{width:100%!important}.jqTransformSelectWrapper div span{display:block!important;width:135px;color:#222!important;text-transform:none}#opentableRezervtionForm .jqTransformSelectWrapper{color:#222}#opentableRezervtionForm .jqTransformSelectWrapper a.jqTransformSelectOpen,#navSelect .jqTransformSelectWrapper a.jqTransformSelectOpen{z-index:999px;font-size:18px;width:auto;height:auto;top:12%;right:7%;color:#222}.jqTransformSelectWrapper a.jqTransformSelectOpen::after{font-family:bills;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;content:"\e009"}.jqTransformSelectWrapper ul{position:relative;top:100%;overflow:auto;margin:0;padding:0;width:100%!important;height:140px;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC;background-color:#FFF;list-style-type:none;text-align:left;position:absolute}.jqTransformSelectWrapper ul a.selected{background:#fff}.jqTransformSelectWrapper ul a:hover{background:#e4e0e0}.divElem{position:relative}#show_datepicker,#show_timepicker{position:absolute;top:4px;right:9px}#show_datepicker:hover,#show_timepicker:hover{cursor:pointer}#ui-timepicker-div{position:relative;margin-top:35px}.jqTransformInputInner div input{width:100%!important;line-height:22px!important;position:relative!important;z-index:100!important;border-radius:0!important}#map_canvas,#map_canvas_loc{height:400px}#map_tabs{display:none}#map_accordion{margin-top:-25px}#map_accordion ul{padding:11px 0;margin:0 0 22px;list-style:none;background:url(../images/hr-2.png) bottom repeat-x}#map_accordion li{margin:0 11px!important}#map_accordion li a{color:#222}.map_print{display:none}.venue_box{width:272px;display:inline;float:left;margin:0 17px;color:#000;height:220px!important}.venue_wrap{width:252px;text-align:center;background:#fff;font:.8em Arial,Helvetica,sans-serif;padding:10px}.venue_image{height:115px;width:252px;overflow:hidden}.venue_image img{height:115px}.venue_text{border-bottom:1px solid #000;padding:5px;overflow:hidden}.venue_info{height:50px;margin-top:3px}.venue_mealtime{display:block;clear:both}.venue_contact{margin-top:5px}.venue_contact a{color:#000;text-decoration:none;margin-left:5px}.venue_contact a:hover{color:#000;text-decoration:underline}.venue_cost{display:none;margin:2px auto;width:68px}.venue_cuisine{display:none}.venue_address{clear:both}.venue_actions{background:#f06;padding:2px 0}.venue_actions a{color:#fff;margin-left:8px;text-decoration:none}.venue_actions a:hover{text-decoration:underline;color:#fff}.venue_social{margin:15px 0 10px}.venue_social a{margin-right:10px} -------------------------------------------------------------------------------- /test/expected/test5.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Normalize.scss settings 3 | ========================================================================== */ 4 | 5 | /** 6 | * Includes legacy browser support IE6/7 7 | * 8 | * Set to false if you want to drop support for IE6 and IE7 9 | */ 10 | 11 | /* ========================================================================== 12 | HTML5 display definitions 13 | ========================================================================== */ 14 | 15 | /* 16 | * Corrects `block` display not defined in IE 8/9. 17 | */ 18 | 19 | article, 20 | aside, 21 | details, 22 | figcaption, 23 | figure, 24 | footer, 25 | header, 26 | hgroup, 27 | main, 28 | nav, 29 | section, 30 | summary { 31 | display: block; 32 | } 33 | 34 | /** 35 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 36 | */ 37 | 38 | audio, 39 | canvas, 40 | video { 41 | display: inline-block; 42 | } 43 | 44 | /** 45 | * Prevents modern browsers from displaying `audio` without controls. 46 | * Remove excess height in iOS 5 devices. 47 | */ 48 | 49 | audio:not([controls]) { 50 | display: none; 51 | height: 0; 52 | } 53 | 54 | /** 55 | * Address styling not present in IE 8/9. 56 | */ 57 | 58 | [hidden] { 59 | display: none; 60 | } 61 | 62 | /* ========================================================================== 63 | Base 64 | ========================================================================== */ 65 | 66 | /** 67 | * 1. Set default font family to sans-serif. 68 | * 2. Prevent iOS text size adjust after orientation change, without disabling 69 | * 3.Corrects text resizing oddly in IE 6/7 when body `font-size` is set using 70 | * `em` units. 71 | */ 72 | 73 | html { 74 | font-family: sans-serif; 75 | /* 1 */ 76 | -ms-text-size-adjust: 100%; 77 | /* 2 */ 78 | -webkit-text-size-adjust: 100%; 79 | /* 2 */ 80 | } 81 | 82 | /** 83 | * Remove default margin. 84 | */ 85 | 86 | body { 87 | margin: 0; 88 | } 89 | 90 | /* ========================================================================== 91 | Links 92 | ========================================================================== */ 93 | 94 | /** 95 | * Address `outline` inconsistency between Chrome and other browsers. 96 | */ 97 | 98 | /** 99 | * Improves readability when focused and also mouse hovered in all browsers. 100 | */ 101 | 102 | a:focus { 103 | outline: thin dotted; 104 | } 105 | 106 | a:active, 107 | a:hover { 108 | outline: 0; 109 | } 110 | 111 | /* ========================================================================== 112 | Typography 113 | ========================================================================== */ 114 | 115 | /** 116 | * Addresses font sizes and margins set differently in IE 6/7. 117 | * Address variable `h1` font-size and margin within `section` and `article` 118 | * contexts in Firefox 4+, Safari 5, and Chrome. 119 | */ 120 | 121 | /** 122 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: 1px dotted; 127 | } 128 | 129 | /** 130 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 131 | */ 132 | 133 | b, 134 | strong { 135 | font-weight: bold; 136 | } 137 | 138 | /** 139 | * Address styling not present in Safari 5 and Chrome. 140 | */ 141 | 142 | dfn { 143 | font-style: italic; 144 | } 145 | 146 | /** 147 | * Address differences between Firefox and other browsers. 148 | */ 149 | 150 | hr { 151 | -moz-box-sizing: content-box; 152 | box-sizing: content-box; 153 | height: 0; 154 | } 155 | 156 | /** 157 | * Addresses styling not present in IE 8/9. 158 | */ 159 | 160 | mark { 161 | background: #ff0; 162 | color: #000; 163 | } 164 | 165 | /** 166 | * Addresses margins set differently in IE 6/7. 167 | */ 168 | 169 | /** 170 | * Correct font family set oddly in Safari 5 and Chrome. 171 | */ 172 | 173 | code, 174 | kbd, 175 | pre, 176 | samp { 177 | font-family: monospace, serif; 178 | font-size: 1em; 179 | } 180 | 181 | /** 182 | * Improve readability of pre-formatted text in all browsers. 183 | */ 184 | 185 | pre { 186 | white-space: pre-wrap; 187 | } 188 | 189 | /** 190 | * Set consistent quote types. 191 | */ 192 | 193 | q { 194 | quotes: "\201C" "\201D" "\2018" "\2019"; 195 | } 196 | 197 | /** 198 | * Address inconsistent and variable font size in all browsers. 199 | */ 200 | 201 | small { 202 | font-size: 80%; 203 | } 204 | 205 | /** 206 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 207 | */ 208 | 209 | sub, 210 | sup { 211 | font-size: 75%; 212 | line-height: 0; 213 | position: relative; 214 | vertical-align: baseline; 215 | } 216 | 217 | sup { 218 | top: -0.5em; 219 | } 220 | 221 | sub { 222 | bottom: -0.25em; 223 | } 224 | 225 | /* ========================================================================== 226 | Embedded content 227 | ========================================================================== */ 228 | 229 | /** 230 | * 1. Remove border when inside `a` element in IE 8/9. 231 | * 2. Improves image quality when scaled in IE 7. 232 | */ 233 | 234 | img { 235 | border: 0; 236 | } 237 | 238 | /** 239 | * Correct overflow displayed oddly in IE 9. 240 | */ 241 | 242 | svg:not(:root) { 243 | overflow: hidden; 244 | } 245 | 246 | /* ========================================================================== 247 | Figures 248 | ========================================================================== */ 249 | 250 | /** 251 | * Address margin not present in IE 8/9 and Safari 5. 252 | */ 253 | 254 | figure { 255 | margin: 0; 256 | } 257 | 258 | /* ========================================================================== 259 | Forms 260 | ========================================================================== */ 261 | 262 | /** 263 | * Define consistent border, margin, and padding. 264 | */ 265 | 266 | fieldset { 267 | border: 1px solid #c0c0c0; 268 | margin: 0 2px; 269 | padding: 0.35em 0.625em 0.75em; 270 | } 271 | 272 | /** 273 | * 1. Correct `color` not being inherited in IE 8/9. 274 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 275 | * 3. Corrects text not wrapping in Firefox 3. 276 | * 4. Corrects alignment displayed oddly in IE 6/7. 277 | */ 278 | 279 | legend { 280 | border: 0; 281 | /* 1 */ 282 | padding: 0; 283 | /* 2 */ 284 | } 285 | 286 | /** 287 | * 1. Correct font family not being inherited in all browsers. 288 | * 2. Correct font size not being inherited in all browsers. 289 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 290 | * 4. Improves appearance and consistency in all browsers. 291 | */ 292 | 293 | button, 294 | input, 295 | select, 296 | textarea { 297 | font-family: inherit; 298 | /* 1 */ 299 | font-size: 100%; 300 | /* 2 */ 301 | margin: 0; 302 | /* 3 */ 303 | } 304 | 305 | /** 306 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 307 | * the UA stylesheet. 308 | */ 309 | 310 | button, 311 | input { 312 | line-height: normal; 313 | } 314 | 315 | /** 316 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 317 | * All other form control elements do not inherit `text-transform` values. 318 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 319 | * Correct `select` style inheritance in Firefox 4+ and Opera. 320 | */ 321 | 322 | button, 323 | select { 324 | text-transform: none; 325 | } 326 | 327 | /** 328 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 329 | * and `video` controls. 330 | * 2. Correct inability to style clickable `input` types in iOS. 331 | * 3. Improve usability and consistency of cursor style between image-type 332 | * `input` and others. 333 | * 4. Removes inner spacing in IE 7 without affecting normal text inputs. 334 | * Known issue: inner spacing remains in IE 6. 335 | */ 336 | 337 | button, 338 | html input[type="button"], 339 | input[type="reset"], 340 | input[type="submit"] { 341 | -webkit-appearance: button; 342 | /* 2 */ 343 | cursor: pointer; 344 | /* 3 */ 345 | } 346 | 347 | /** 348 | * Re-set default cursor for disabled elements. 349 | */ 350 | 351 | button[disabled], 352 | html input[disabled] { 353 | cursor: default; 354 | } 355 | 356 | /** 357 | * 1. Address box sizing set to `content-box` in IE 8/9. 358 | * 2. Remove excess padding in IE 8/9. 359 | * 3. Removes excess padding in IE 7. 360 | * Known issue: excess padding remains in IE 6. 361 | */ 362 | 363 | input[type="checkbox"], 364 | input[type="radio"] { 365 | -moz-box-sizing: border-box; 366 | box-sizing: border-box; 367 | /* 1 */ 368 | padding: 0; 369 | /* 2 */ 370 | } 371 | 372 | /** 373 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 374 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 375 | * (include `-moz` to future-proof). 376 | */ 377 | 378 | input[type="search"] { 379 | -webkit-appearance: textfield; 380 | /* 1 */ 381 | -moz-box-sizing: content-box; 382 | /* 2 */ 383 | box-sizing: content-box; 384 | } 385 | 386 | /** 387 | * Remove inner padding and search cancel button in Safari 5 and Chrome 388 | * on OS X. 389 | */ 390 | 391 | input[type="search"]::-webkit-search-cancel-button, 392 | input[type="search"]::-webkit-search-decoration { 393 | -webkit-appearance: none; 394 | } 395 | 396 | /** 397 | * Remove inner padding and border in Firefox 4+. 398 | */ 399 | 400 | button::-moz-focus-inner, 401 | input::-moz-focus-inner { 402 | border: 0; 403 | padding: 0; 404 | } 405 | 406 | /** 407 | * 1. Remove default vertical scrollbar in IE 8/9. 408 | * 2. Improve readability and alignment in all browsers. 409 | */ 410 | 411 | textarea { 412 | overflow: auto; 413 | /* 1 */ 414 | vertical-align: top; 415 | /* 2 */ 416 | } 417 | 418 | /* ========================================================================== 419 | Tables 420 | ========================================================================== */ 421 | 422 | /** 423 | * Remove most spacing between table cells. 424 | */ 425 | 426 | table { 427 | border-collapse: collapse; 428 | border-spacing: 0; 429 | } 430 | 431 | /* Generated with FontPrep app http://fontprep.com/ */ 432 | 433 | @font-face { 434 | font-family: 'AlternateGothic2 BT'; 435 | src: url("../fonts/alternate-gothic2.eot"); 436 | /* IE9 Compat Modes */ 437 | src: url("../fonts/alternate-gothic2.eot?#iefix") format("embedded-opentype"), url("../fonts/alternate-gothic2.woff") format("woff"), url("../fonts/alternate-gothic2.ttf") format("truetype"), url("../fonts/alternate-gothic2.svg#022c20d3c2b5208bc4ff771e4b5afcc9") format("svg"); 438 | /* Legacy iOS */ 439 | font-style: normal; 440 | font-weight: 400; 441 | } 442 | 443 | /* 444 | * Web Fonts from fontspring.com 445 | * 446 | * All OpenType features and all extended glyphs have been removed. 447 | * Fully installable fonts can be purchased at http://www.fontspring.com 448 | * 449 | * The fonts included in this stylesheet are subject to the End User License you purchased 450 | * from Fontspring. The fonts are protected under domestic and international trademark and 451 | * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or 452 | * distributing this font software. 453 | * 454 | * (c) 2010-2012 Fontspring 455 | * 456 | * 457 | * 458 | * 459 | * The fonts included are copyrighted by the vendor listed below. 460 | * 461 | * Vendor: exljbris Font Foundry 462 | * License URL: http://www.fontspring.com/fflicense/exljbris 463 | * 464 | * 465 | */ 466 | 467 | @font-face { 468 | font-family: 'museo_slab500'; 469 | src: url("../fonts/Museo_Slab_500_2-webfont.eot"); 470 | src: url("../fonts/Museo_Slab_500_2-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo_Slab_500_2-webfont.woff") format("woff"), url("../fonts/Museo_Slab_500_2-webfont.ttf") format("truetype"), url("../fonts/Museo_Slab_500_2-webfont.svg#museo_slab500") format("svg"); 471 | font-weight: normal; 472 | font-style: normal; 473 | } 474 | 475 | @font-face { 476 | font-family: 'Museo300Regular'; 477 | src: url("../fonts/Museo300-Regular-webfont.eot"); 478 | src: url("../fonts/Museo300-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo300-Regular-webfont.woff") format("woff"), url("../fonts/Museo300-Regular-webfont.ttf") format("truetype"), url("../fonts/Museo300-Regular-webfont.svg#Museo300Regular") format("svg"); 479 | font-weight: normal; 480 | font-style: normal; 481 | } 482 | 483 | @font-face { 484 | font-family: 'Museo500Regular'; 485 | src: url("../fonts/Museo500-Regular-webfont.eot"); 486 | src: url("../fonts/Museo500-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Museo500-Regular-webfont.woff") format("woff"), url("../fonts/Museo500-Regular-webfont.ttf") format("truetype"), url("../fonts/Museo500-Regular-webfont.svg#Museo500Regular") format("svg"); 487 | font-weight: normal; 488 | font-style: normal; 489 | } 490 | 491 | @font-face { 492 | font-family: 'bills'; 493 | src: url("../fonts/bills.eot"); 494 | src: url("../fonts/bills.eot?#iefix") format("embedded-opentype"), url("../fonts/bills.woff") format("woff"), url("../fonts/bills.ttf") format("truetype"), url("../fonts/bills.svg#bills") format("svg"); 495 | font-weight: normal; 496 | font-style: normal; 497 | } 498 | 499 | .icon-ignite-logo, 500 | .icon-facebook, 501 | .icon-twitter, 502 | .icon-pinterest, 503 | .icon-googleplus, 504 | .icon-reorder, 505 | .icon-pointer, 506 | .icon-arrow-right, 507 | .icon-arrow-left, 508 | .icon-angle-down, 509 | .icon-circle-arrow-down, 510 | .icon-menus, 511 | .icon-capacity, 512 | .icon-hours, 513 | .icon-search, 514 | .icon-venue-stretch, 515 | .icon-angle-up, 516 | .icon-angle-right, 517 | .icon-angle-left { 518 | font-family: 'bills'; 519 | speak: none; 520 | font-style: normal; 521 | font-weight: normal; 522 | font-variant: normal; 523 | text-transform: none; 524 | -webkit-font-smoothing: antialiased; 525 | } 526 | 527 | .icon-ignite-logo:before { 528 | content: "\e000"; 529 | } 530 | 531 | .icon-facebook:before { 532 | content: "\e001"; 533 | } 534 | 535 | .icon-twitter:before { 536 | content: "\e002"; 537 | } 538 | 539 | .icon-pinterest:before { 540 | content: "\e003"; 541 | } 542 | 543 | .icon-googleplus:before { 544 | content: "\e004"; 545 | } 546 | 547 | .icon-reorder:before { 548 | content: "\e005"; 549 | } 550 | 551 | .icon-pointer:before { 552 | content: "\e006"; 553 | } 554 | 555 | .icon-arrow-right:before { 556 | content: "\e007"; 557 | } 558 | 559 | .icon-arrow-left:before { 560 | content: "\e008"; 561 | } 562 | 563 | .icon-angle-down:before { 564 | content: "\e009"; 565 | } 566 | 567 | .icon-circle-arrow-down:before { 568 | content: "\e010"; 569 | } 570 | 571 | .icon-menus:before { 572 | content: "\e011"; 573 | } 574 | 575 | .icon-capacity:before { 576 | content: "\e012"; 577 | } 578 | 579 | .icon-hours:before { 580 | content: "\e013"; 581 | } 582 | 583 | .icon-search:before { 584 | content: "\f002"; 585 | } 586 | 587 | .icon-venue-stretch:before { 588 | content: "\e00a"; 589 | } 590 | 591 | .icon-angle-up:before { 592 | content: "\f106"; 593 | } 594 | 595 | .icon-angle-right:before { 596 | content: "\f105"; 597 | } 598 | 599 | .icon-angle-left:before { 600 | content: "\f104"; 601 | } 602 | 603 | /* TYPOGRAPHY */ 604 | 605 | /* COLOURS */ 606 | 607 | /* BORDERS */ 608 | 609 | /* SPACING */ 610 | 611 | /* RELATIVE SIZES */ 612 | 613 | /* BREAKPOINTS */ 614 | 615 | /* LOGO */ 616 | 617 | /* IE */ 618 | 619 | /*------------------------------------*\ 620 | $FONT SIZE 621 | \*------------------------------------*/ 622 | 623 | /*------------------------------------*\ 624 | $MEDIA QUERY 625 | \*------------------------------------*/ 626 | 627 | /*------------------------------------*\ 628 | $CLEARFIX 629 | \*------------------------------------*/ 630 | 631 | .clearfix:after, 632 | .media:after, 633 | .wrapper:after, 634 | .site-header:after, 635 | .logo-wrapper:after, 636 | .site-social:after, 637 | .site-social__list:after, 638 | .pagination:after, 639 | .menu-location:after, 640 | .venue:after, 641 | .venue__row:after, 642 | .page--hours-and-locations .booking-widget:after, 643 | .booking-widget__form:after { 644 | content: ""; 645 | display: table; 646 | clear: both; 647 | } 648 | 649 | /*------------------------------------*\ 650 | $IMAGE REPLACEMENT 651 | \*------------------------------------*/ 652 | 653 | .image-replacement { 654 | border: 0; 655 | font: 0/0 a; 656 | text-shadow: none; 657 | color: transparent; 658 | background-color: transparent; 659 | } 660 | 661 | /*------------------------------------*\ 662 | $PRE 663 | \*------------------------------------*/ 664 | 665 | .pre { 666 | white-space: pre; 667 | } 668 | 669 | /*------------------------------------*\ 670 | $JAVASCRIPT MEDIA QUERIES 671 | \*------------------------------------*/ 672 | 673 | /** 674 | * Sync CSS media queries with perfectly using the following javascript: 675 | * 676 | 677 | var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 678 | 679 | if (size.indexOf("lap-and-up") !=-1) { 680 | 681 | } else if (size.indexOf("desk") !=-1) { 682 | 683 | } else if (size.indexOf("desk-wide") !=-1) { 684 | 685 | } 686 | 687 | * 688 | */ 689 | 690 | body:after { 691 | display: none; 692 | } 693 | 694 | @media only screen and (min-width: 569px) { 695 | body:after { 696 | content: 'lap-and-up'; 697 | } 698 | } 699 | 700 | @media only screen and (min-width: 1024px) { 701 | body:after { 702 | content: 'desk lap-and-up'; 703 | } 704 | } 705 | 706 | @media only screen and (min-width: 1200px) { 707 | body:after { 708 | content: 'desk-wide desk lap-and-up'; 709 | } 710 | } 711 | 712 | /*------------------------------------*\ 713 | $LISTS 714 | \*------------------------------------*/ 715 | 716 | .clear-list, 717 | .inline-list { 718 | list-style-type: none; 719 | padding: 0; 720 | margin: 0; 721 | } 722 | 723 | .inline-list > * { 724 | display: inline-block; 725 | } 726 | 727 | /*------------------------------------*\ 728 | $MEDIA OBJECT 729 | \*------------------------------------*/ 730 | 731 | .media { 732 | display: block; 733 | } 734 | 735 | .media__img { 736 | float: left; 737 | margin-right: 22px; 738 | } 739 | 740 | .media__img--rev { 741 | float: right; 742 | margin-left: 22px; 743 | } 744 | 745 | .media__img img, 746 | .media__img--rev img { 747 | display: block; 748 | } 749 | 750 | .media__body { 751 | overflow: hidden; 752 | } 753 | 754 | .media__body > * { 755 | margin-top: 0; 756 | } 757 | 758 | .media__body, 759 | .media__body > :last-child { 760 | margin-bottom: 0; 761 | } 762 | 763 | /*------------------------------------*\ 764 | $BUTTONS 765 | \*------------------------------------*/ 766 | 767 | .button, 768 | .venue-menus a { 769 | display: inline-block; 770 | background-color: #ff8400; 771 | color: white; 772 | padding: 11px; 773 | } 774 | 775 | .button--big { 776 | padding: 22px; 777 | } 778 | 779 | /*------------------------------------*\ 780 | $ICON 781 | \*------------------------------------*/ 782 | 783 | .icon--left { 784 | margin-right: 5.5px; 785 | } 786 | 787 | .icon--right { 788 | margin-left: 5.5px; 789 | } 790 | 791 | .icon-rounded { 792 | display: inline-block; 793 | padding: 5.5px; 794 | color: #b3b3b3; 795 | border-radius: 44px; 796 | background-color: white; 797 | } 798 | 799 | /*------------------------------------*\ 800 | 801 | $RESPONSIVE-NAV.JS v1.0.14 by @viljamis 802 | 803 | \*------------------------------------*/ 804 | 805 | /** 806 | * I tried not to touch this as it is not written by me, but I was forced to alter selectors to get rid of the id's in the CSS. 807 | * Changed everything from '#nav' to '.nav' and from '#nav-toggle' to '.nav-toggle'. 808 | */ 809 | 810 | .nav ul { 811 | margin: 0; 812 | padding: 0; 813 | width: 100%; 814 | display: block; 815 | list-style: none; 816 | } 817 | 818 | .nav li { 819 | width: 100%; 820 | display: block; 821 | } 822 | 823 | .js .nav { 824 | clip: rect(0 0 0 0); 825 | max-height: 0; 826 | position: absolute; 827 | display: block; 828 | overflow: hidden; 829 | zoom: 1; 830 | } 831 | 832 | @media only screen and (min-width: 569px) { 833 | .js .nav { 834 | position: relative; 835 | } 836 | } 837 | 838 | .js .nav.closed { 839 | max-height: none; 840 | } 841 | 842 | .nav.opened { 843 | max-height: 9999px; 844 | } 845 | 846 | @media only screen and (min-width: 569px) { 847 | .nav-toggle { 848 | display: none; 849 | } 850 | } 851 | 852 | /* ---------------------------------------------------------------- 853 | MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin) 854 | ---------------------------------------------------------------- 855 | 856 | Demo at: http://www.aaronvanderzwan.com/maxcycle/ 857 | Download and Info at: http://github.com/akv2/MaxCycle---jQuery-Plugin/ 858 | Copyright (c) 2007-2011 Aaron Vanderzwan 859 | Dual licensed under the MIT and GPL licenses. 860 | 861 | */ 862 | 863 | /* Version: 2.0.73 (12-Oct-2012) */ 864 | 865 | .mc-hide-scrolls { 866 | overflow: hidden; 867 | } 868 | 869 | body .mc-cycle { 870 | height: 100%; 871 | left: 0; 872 | overflow: hidden; 873 | position: fixed; 874 | top: 0; 875 | width: 100%; 876 | z-index: -1; 877 | } 878 | 879 | div.mc-image { 880 | /*NOTE: Mozilla flickers when fading and using 'all', so we have to be specific with what property we want to transition: 881 | If you are using fading transitions, use 'opacity: */ 882 | -webkit-transition: opacity 1s ease-in-out; 883 | -o-transition: opacity 1s ease-in-out; 884 | transition: opacity 1s ease-in-out; 885 | /* If you are using horizontal slide transitions, use the following CSS: */ 886 | -webkit-transition: left 1s ease-in-out; 887 | -o-transition: left 1s ease-in-out; 888 | transition: left 1s ease-in-out; 889 | -webkit-background-size: cover; 890 | background-size: cover; 891 | background-position: center center; 892 | background-repeat: no-repeat; 893 | height: 100%; 894 | overflow: hidden; 895 | width: 100%; 896 | } 897 | 898 | .mc-old-browser .mc-image { 899 | overflow: hidden; 900 | } 901 | 902 | * { 903 | -moz-box-sizing: border-box; 904 | box-sizing: border-box; 905 | } 906 | 907 | html { 908 | position: relative; 909 | min-height: 100%; 910 | overflow-x: hidden; 911 | font: 0.875em/1.57143 "Museo500Regular", sans-serif; 912 | color: white; 913 | background: #222222; 914 | } 915 | 916 | body { 917 | height: 100%; 918 | background-attachment: fixed; 919 | background-position: center center; 920 | background-size: cover; 921 | } 922 | 923 | h1, 924 | h2, 925 | h3, 926 | h4, 927 | h5, 928 | h6, 929 | ul, 930 | ol, 931 | dl, 932 | blockquote, 933 | p, 934 | address, 935 | table, 936 | fieldset, 937 | figure, 938 | pre, 939 | .main__content, 940 | .news__item, 941 | .post__header, 942 | .post__aside, 943 | .box-heading, 944 | .menu-location, 945 | .menu-nav, 946 | .menu__item, 947 | .venue, 948 | #map_canvas, 949 | #map_canvas_loc, 950 | .media { 951 | margin-bottom: 22px; 952 | margin-bottom: 1.57143rem; 953 | } 954 | 955 | .menu-locations, 956 | #map_accordion ul, 957 | .lead, 958 | .landmark { 959 | margin-bottom: 44px; 960 | margin-bottom: 3.14286rem; 961 | } 962 | 963 | .menu-nav__item > a { 964 | margin-bottom: 11px; 965 | margin-bottom: 0.78571rem; 966 | } 967 | 968 | h1, 969 | h2, 970 | h3, 971 | h4, 972 | h5, 973 | h6, 974 | .page-title--mobile, 975 | .book-link, 976 | .nav-toggle, 977 | .site-nav, 978 | .splash, 979 | .pagination, 980 | .social-bit, 981 | .post__aside, 982 | .post__back, 983 | .menu-locations__item, 984 | #map_accordion li, 985 | .venue__footer, 986 | .book-circle__inner { 987 | font-family: "AlternateGothic2 BT", sans-serif; 988 | font-weight: normal; 989 | text-transform: uppercase; 990 | text-rendering: optimizeLegibility; 991 | } 992 | 993 | h1, 994 | .alpha { 995 | font-size: 36px; 996 | font-size: 2.57143rem; 997 | line-height: 1.22222; 998 | } 999 | 1000 | h2, 1001 | .beta { 1002 | font-size: 30px; 1003 | font-size: 2.14286rem; 1004 | line-height: 1.46667; 1005 | } 1006 | 1007 | h3, 1008 | .gamma { 1009 | font-size: 24px; 1010 | font-size: 1.71429rem; 1011 | line-height: 1.83333; 1012 | } 1013 | 1014 | h4, 1015 | .delta { 1016 | font-size: 20px; 1017 | font-size: 1.42857rem; 1018 | line-height: 1.1; 1019 | } 1020 | 1021 | h5, 1022 | .epsilon { 1023 | font-size: 16px; 1024 | font-size: 1.14286rem; 1025 | line-height: 1.375; 1026 | } 1027 | 1028 | h6, 1029 | .zeta { 1030 | font-size: 14px; 1031 | font-size: 1rem; 1032 | line-height: 1.57143; 1033 | } 1034 | 1035 | a { 1036 | text-decoration: none; 1037 | color: #ff8400; 1038 | } 1039 | 1040 | .site-header a { 1041 | color: white; 1042 | } 1043 | 1044 | .main__content img { 1045 | max-width: 100%; 1046 | } 1047 | 1048 | /*------------------------------------*\ 1049 | $WRAPPER 1050 | \*------------------------------------*/ 1051 | 1052 | .wrapper { 1053 | min-height: 100%; 1054 | } 1055 | 1056 | @media only screen and (max-width: 568px) { 1057 | .wrapper { 1058 | overflow-x: hidden; 1059 | } 1060 | } 1061 | 1062 | @media only screen and (max-width: 1023px) { 1063 | .wrapper { 1064 | background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1065 | background: -o-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1066 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, transparent 176px); 1067 | } 1068 | } 1069 | 1070 | @media only screen and (min-width: 569px) { 1071 | .wrapper { 1072 | padding: 22px; 1073 | } 1074 | } 1075 | 1076 | /*------------------------------------*\ 1077 | $HEADER 1078 | \*------------------------------------*/ 1079 | 1080 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1081 | .site-header { 1082 | border-bottom: white solid 5px; 1083 | margin-bottom: 22px; 1084 | position: relative; 1085 | } 1086 | } 1087 | 1088 | @media only screen and (min-width: 1024px) { 1089 | .site-header { 1090 | position: fixed; 1091 | left: 0; 1092 | top: 0; 1093 | bottom: 0; 1094 | height: 100%; 1095 | padding: 22px; 1096 | z-index: 20; 1097 | width: 235px; 1098 | background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1099 | background: -o-linear-gradient(left, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1100 | background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, transparent 100%); 1101 | } 1102 | } 1103 | 1104 | @media only screen and (min-width: 1024px) and (max-height: 600px) { 1105 | .site-header { 1106 | position: absolute; 1107 | } 1108 | } 1109 | 1110 | /*------------------------------------*\ 1111 | $MAIN 1112 | \*------------------------------------*/ 1113 | 1114 | @media only screen and (min-width: 1024px) { 1115 | .main, 1116 | #footer_nav { 1117 | margin-left: 235px; 1118 | } 1119 | } 1120 | 1121 | @media only screen and (min-width: 1200px) { 1122 | .main, 1123 | #footer_nav { 1124 | margin-right: 191px; 1125 | } 1126 | } 1127 | 1128 | @media only screen and (min-width: 1024px) { 1129 | .main__header { 1130 | display: table; 1131 | height: 198px; 1132 | } 1133 | } 1134 | 1135 | .main__content { 1136 | padding: 22px 11px; 1137 | position: relative; 1138 | background: white; 1139 | background: rgba(255, 255, 255, 0.95); 1140 | color: #222222; 1141 | } 1142 | 1143 | @media only screen and (min-width: 569px) { 1144 | .main__content { 1145 | padding: 33px; 1146 | } 1147 | } 1148 | 1149 | /*------------------------------------*\ 1150 | $SITE FOOTER 1151 | \*------------------------------------*/ 1152 | 1153 | /** 1154 | * The footer with the animated restaurant logos is a global ModX chunk for all the BR sites, 1155 | * below is the HTML structure of the chunk. The most outer div is not included in the chunk. 1156 | * 1157 | 1197 | * 1198 | */ 1199 | 1200 | .site-footer { 1201 | font-size: 12px; 1202 | font-size: 0.85714rem; 1203 | line-height: 1.83333; 1204 | padding: 0 22px; 1205 | background: #222222; 1206 | } 1207 | 1208 | .site-footer a { 1209 | color: white; 1210 | display: inline-block; 1211 | } 1212 | 1213 | .page--bills-bar-burger .site-footer, 1214 | .page--gallery .site-footer { 1215 | display: none; 1216 | /* height: $unit * 6; 1217 | position: absolute; 1218 | top: 100%; 1219 | left: 0; 1220 | width: 100%; */ 1221 | } 1222 | 1223 | #footer_nav { 1224 | padding-bottom: 55px; 1225 | position: relative; 1226 | text-align: center; 1227 | margin-top: 22px; 1228 | } 1229 | 1230 | #footer_nav #br_logo { 1231 | left: 22px; 1232 | } 1233 | 1234 | @media only screen and (min-width: 1024px) { 1235 | #footer_nav #br_logo { 1236 | left: 0; 1237 | } 1238 | } 1239 | 1240 | #footer_nav #rest_green { 1241 | right: 22px; 1242 | } 1243 | 1244 | @media only screen and (min-width: 1024px) { 1245 | #footer_nav #rest_green { 1246 | right: 0; 1247 | } 1248 | } 1249 | 1250 | #footer_nav #btmNav_privacy { 1251 | margin-top: 66px !important; 1252 | } 1253 | 1254 | @media only screen and (min-width: 569px) { 1255 | #footer_nav #btmNav_privacy { 1256 | margin-top: 0 !important; 1257 | } 1258 | } 1259 | 1260 | #footer_nav #br_logo, 1261 | #footer_nav #rest_green { 1262 | position: absolute; 1263 | top: 0; 1264 | } 1265 | 1266 | #footer_nav #footer_nav_links a { 1267 | margin: 0 11px; 1268 | } 1269 | 1270 | #footer_nav #btmNav_ignite { 1271 | display: block; 1272 | } 1273 | 1274 | /*------------------------------------*\ 1275 | $PAGE TITLE 1276 | \*------------------------------------*/ 1277 | 1278 | .page-title { 1279 | margin: 0; 1280 | padding-top: 11px; 1281 | padding-bottom: 11px; 1282 | font-size: 34px; 1283 | font-size: 2.42857rem; 1284 | line-height: 1.29412; 1285 | } 1286 | 1287 | @media only screen and (max-width: 568px) { 1288 | .page-title { 1289 | padding-left: 22px; 1290 | } 1291 | } 1292 | 1293 | @media only screen and (min-width: 569px) { 1294 | .page-title { 1295 | display: table-cell; 1296 | vertical-align: middle; 1297 | text-shadow: 10px 10px 50px black, 10px -10px 50px black; 1298 | font-size: 70px; 1299 | font-size: 5rem; 1300 | line-height: 1.25714; 1301 | } 1302 | } 1303 | 1304 | .page--gallery .page-title, 1305 | .page--bills-bar-burger-rockefeller-center .page-title, 1306 | .page--bills-bar-burger-meatpacking-district .page-title, 1307 | .page--bills-bar-and-burger-atlantic-city .page-title { 1308 | font-size: 50px; 1309 | font-size: 3.57143rem; 1310 | } 1311 | 1312 | .page-title--mobile { 1313 | font-size: 50px; 1314 | font-size: 3.57143rem; 1315 | line-height: 1.32; 1316 | } 1317 | 1318 | @media only screen and (max-width: 568px) { 1319 | .page-title--mobile { 1320 | padding-left: 11px; 1321 | } 1322 | } 1323 | 1324 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1325 | .page-title--mobile { 1326 | position: absolute; 1327 | top: 33px; 1328 | right: 0; 1329 | white-space: pre; 1330 | line-height: 77px; 1331 | } 1332 | } 1333 | 1334 | @media only screen and (min-width: 1024px) { 1335 | .page-title--mobile { 1336 | display: none; 1337 | } 1338 | } 1339 | 1340 | .page--bills-bar-burger .page-title--mobile { 1341 | display: none; 1342 | } 1343 | 1344 | /*------------------------------------*\ 1345 | $LOGO 1346 | \*------------------------------------*/ 1347 | 1348 | @media only screen and (max-width: 568px) { 1349 | .logo-wrapper { 1350 | border-top: 5px solid white; 1351 | border-bottom: 5px solid white; 1352 | margin-top: 11px; 1353 | } 1354 | } 1355 | 1356 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1357 | .logo-wrapper { 1358 | float: left; 1359 | width: 20%; 1360 | height: 132px; 1361 | } 1362 | } 1363 | 1364 | .site-logo { 1365 | display: block; 1366 | text-align: center; 1367 | } 1368 | 1369 | @media only screen and (max-width: 1023px) { 1370 | .site-logo { 1371 | padding: 16px 11px 0; 1372 | } 1373 | } 1374 | 1375 | @media only screen and (max-width: 568px) { 1376 | .site-logo { 1377 | width: 50%; 1378 | } 1379 | } 1380 | 1381 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1382 | .site-logo { 1383 | vertical-align: middle; 1384 | } 1385 | } 1386 | 1387 | @media only screen and (min-width: 1024px) { 1388 | .site-logo { 1389 | padding: 22px 0 44px; 1390 | border-top: 5px solid white; 1391 | } 1392 | } 1393 | 1394 | .site-logo img { 1395 | vertical-align: bottom; 1396 | max-width: 100%; 1397 | } 1398 | 1399 | @media only screen and (max-width: 568px) { 1400 | .site-logo img { 1401 | max-height: 88px; 1402 | } 1403 | } 1404 | 1405 | .page--bills-bar-burger .site-logo { 1406 | border-bottom: 0; 1407 | } 1408 | 1409 | /*------------------------------------*\ 1410 | $TOGGLES 1411 | \*------------------------------------*/ 1412 | 1413 | .toggles { 1414 | border-left: 5px solid white; 1415 | float: right; 1416 | width: 50%; 1417 | } 1418 | 1419 | @media only screen and (min-width: 569px) { 1420 | .toggles { 1421 | display: none; 1422 | border-left: none; 1423 | } 1424 | } 1425 | 1426 | .book-link { 1427 | display: block; 1428 | padding: 5.5px 11px; 1429 | text-align: center; 1430 | cursor: pointer; 1431 | font-size: 23px; 1432 | font-size: 1.64286rem; 1433 | } 1434 | 1435 | .book-link .icon { 1436 | font-weight: bold; 1437 | font-size: 30px; 1438 | font-size: 2.14286rem; 1439 | line-height: 1.46667; 1440 | } 1441 | 1442 | .nav-toggle { 1443 | padding: 5.5px 11px; 1444 | border-top: 5px solid white; 1445 | text-align: center; 1446 | cursor: pointer; 1447 | font-size: 23px; 1448 | font-size: 1.64286rem; 1449 | line-height: 1.91304; 1450 | } 1451 | 1452 | .nav-toggle.open, 1453 | .nav-toggle:active { 1454 | background: white; 1455 | color: #ff8400; 1456 | } 1457 | 1458 | /*------------------------------------*\ 1459 | $NAVIGATION 1460 | \*------------------------------------*/ 1461 | 1462 | /** 1463 | * Some !important tags are needed to overwrite responsive-nav.js, see sass/vendor/_responsive-nav.scss 1464 | */ 1465 | 1466 | .site-nav { 1467 | font-size: 22px; 1468 | font-size: 1.57143rem; 1469 | line-height: 1; 1470 | } 1471 | 1472 | @media only screen and (max-width: 568px) { 1473 | .site-nav { 1474 | background: white; 1475 | z-index: 2; 1476 | } 1477 | 1478 | .site-nav a { 1479 | color: #474747; 1480 | } 1481 | } 1482 | 1483 | @media only screen and (min-width: 569px) { 1484 | .site-nav { 1485 | max-height: initial; 1486 | overflow: visible !important; 1487 | } 1488 | } 1489 | 1490 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1491 | .site-nav { 1492 | border-bottom: white solid 5px; 1493 | } 1494 | } 1495 | 1496 | @media only screen and (min-width: 1024px) { 1497 | .site-nav { 1498 | line-height: 33px; 1499 | margin-bottom: 22px; 1500 | font-size: 26px; 1501 | font-size: 1.85714rem; 1502 | } 1503 | } 1504 | 1505 | @media only screen and (max-width: 568px) { 1506 | .site-nav__inner { 1507 | padding: 14.66667px 0; 1508 | } 1509 | } 1510 | 1511 | @media only screen and (max-width: 568px) { 1512 | .site-nav__list { 1513 | position: relative; 1514 | border-top: 1px solid #b3b3b3; 1515 | padding: 0; 1516 | overflow: hidden; 1517 | } 1518 | 1519 | .site-nav__list:before { 1520 | content: ''; 1521 | position: absolute; 1522 | display: block; 1523 | height: 100%; 1524 | width: 50%; 1525 | top: 0; 1526 | border-right: 1px solid #b3b3b3; 1527 | } 1528 | } 1529 | 1530 | @media only screen and (min-width: 1024px) { 1531 | .site-nav__list { 1532 | padding: 11px 0 !important; 1533 | border-top: 5px solid white; 1534 | border-bottom: 5px solid white; 1535 | } 1536 | } 1537 | 1538 | @media only screen and (max-width: 568px) { 1539 | .site-nav__item { 1540 | padding: 22px 11px; 1541 | width: 50% !important; 1542 | position: relative; 1543 | float: left; 1544 | border-bottom: 1px solid #b3b3b3; 1545 | } 1546 | } 1547 | 1548 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1549 | .site-nav__item { 1550 | display: table !important; 1551 | padding: 0 11px; 1552 | text-align: center; 1553 | width: 20% !important; 1554 | float: left; 1555 | border-top: 5px solid white; 1556 | border-right: 5px solid white; 1557 | height: 66px; 1558 | } 1559 | 1560 | .site-nav__item:nth-child(5) { 1561 | border-right: 0; 1562 | } 1563 | } 1564 | 1565 | .site-nav__item a { 1566 | display: table-cell; 1567 | vertical-align: middle; 1568 | } 1569 | 1570 | .site-nav__item a:hover { 1571 | color: #ff8400; 1572 | } 1573 | 1574 | @media only screen and (min-width: 569px) { 1575 | .site-nav__item--home { 1576 | display: none !important; 1577 | } 1578 | } 1579 | 1580 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1581 | .site-nav__item--current, 1582 | .page--menus-and-food .site-nav__item--menus, 1583 | .page--special-events .site-nav__item--events, 1584 | .page--whats-happening .site-nav__item--news, 1585 | .page--gallery .site-nav__item--gallery, 1586 | .page--about-bills .site-nav__item--about, 1587 | .page--hours-and-locations .site-nav__item--locations, 1588 | .page--bills-bar-burger-rockefeller-center .site-nav__item--locations, 1589 | .page--bills-bar-burger-meatpacking-district .site-nav__item--locations, 1590 | .page--bills-bar-burger-atlantic-city .site-nav__item--locations, 1591 | .page--bills-bar-burger-downtown .site-nav__item--locations, 1592 | .page--book-here .site-nav__item--book { 1593 | background: white; 1594 | } 1595 | } 1596 | 1597 | .site-nav__item--current a, 1598 | .page--menus-and-food .site-nav__item--menus a, 1599 | .page--special-events .site-nav__item--events a, 1600 | .page--whats-happening .site-nav__item--news a, 1601 | .page--gallery .site-nav__item--gallery a, 1602 | .page--about-bills .site-nav__item--about a, 1603 | .page--hours-and-locations .site-nav__item--locations a, 1604 | .page--bills-bar-burger-rockefeller-center .site-nav__item--locations a, 1605 | .page--bills-bar-burger-meatpacking-district .site-nav__item--locations a, 1606 | .page--bills-bar-burger-atlantic-city .site-nav__item--locations a, 1607 | .page--bills-bar-burger-downtown .site-nav__item--locations a, 1608 | .page--book-here .site-nav__item--book a { 1609 | color: #ff8400; 1610 | text-decoration: line-through; 1611 | } 1612 | 1613 | /*------------------------------------*\ 1614 | $EXPANDABLE NAVIGATION 1615 | \*------------------------------------*/ 1616 | 1617 | /*------------------------------------*\ 1618 | $CURRENT NAVIGATION ITEM 1619 | \*------------------------------------*/ 1620 | 1621 | /** 1622 | * At the moment the navigation is not being pulled in dynamicly by Modx and is static instead. 1623 | */ 1624 | 1625 | /*------------------------------------*\ 1626 | $INTRO COPY 1627 | \*------------------------------------*/ 1628 | 1629 | @media only screen and (max-width: 1023px) { 1630 | .intro-copy { 1631 | display: none; 1632 | } 1633 | 1634 | .page--bills-bar-burger .intro-copy { 1635 | display: block; 1636 | position: absolute; 1637 | top: 121px; 1638 | padding: 22px; 1639 | } 1640 | } 1641 | 1642 | @media only screen and (max-height: 700px) { 1643 | .intro-copy { 1644 | display: none; 1645 | } 1646 | } 1647 | 1648 | /*------------------------------------*\ 1649 | $SITE SOCIAL 1650 | \*------------------------------------*/ 1651 | 1652 | .site-social { 1653 | border-top: 5px solid white; 1654 | text-align: center; 1655 | text-transform: uppercase; 1656 | } 1657 | 1658 | @media only screen and (max-width: 568px) { 1659 | .site-social { 1660 | display: none; 1661 | } 1662 | } 1663 | 1664 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1665 | .site-social { 1666 | float: left; 1667 | width: 20%; 1668 | height: 66px; 1669 | overflow: hidden; 1670 | } 1671 | } 1672 | 1673 | @media only screen and (min-width: 1024px) { 1674 | .site-social { 1675 | position: fixed; 1676 | width: 191px; 1677 | left: 22px; 1678 | bottom: 44px; 1679 | line-height: 44px; 1680 | border: 3px solid white; 1681 | font-size: 12px; 1682 | font-size: 0.85714rem; 1683 | line-height: 1.83333; 1684 | } 1685 | } 1686 | 1687 | @media only screen and (max-height: 600px) { 1688 | .site-social { 1689 | position: relative; 1690 | left: auto; 1691 | bottom: auto; 1692 | } 1693 | } 1694 | 1695 | .site-social__signup { 1696 | display: block; 1697 | border-bottom: 3px solid white; 1698 | line-height: 33px; 1699 | text-align: left; 1700 | text-indent: 11px; 1701 | } 1702 | 1703 | .site-social__signup:hover { 1704 | color: #ff8400; 1705 | } 1706 | 1707 | @media only screen and (max-width: 1023px) { 1708 | .site-social__signup { 1709 | display: none; 1710 | } 1711 | } 1712 | 1713 | @media only screen and (max-width: 1023px) { 1714 | .site-social__title { 1715 | display: none; 1716 | } 1717 | } 1718 | 1719 | @media only screen and (min-width: 1024px) { 1720 | .site-social__title { 1721 | float: left; 1722 | padding: 0 11px; 1723 | font-family: "museo_slab500", Verdana, sans-serif; 1724 | line-height: 33px; 1725 | } 1726 | } 1727 | 1728 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 1729 | .site-social__list { 1730 | line-height: 61px; 1731 | } 1732 | } 1733 | 1734 | @media only screen and (min-width: 1024px) { 1735 | .site-social__list { 1736 | float: right; 1737 | line-height: 33px; 1738 | } 1739 | } 1740 | 1741 | @media only screen and (min-width: 569px) { 1742 | .site-social__item { 1743 | width: 33.333%; 1744 | border-left: 5px solid white; 1745 | float: left; 1746 | } 1747 | } 1748 | 1749 | @media only screen and (max-width: 1023px) { 1750 | .site-social__item:first-child { 1751 | border-left: none; 1752 | } 1753 | } 1754 | 1755 | @media only screen and (min-width: 1024px) { 1756 | .site-social__item { 1757 | padding: 0 5.5px; 1758 | border-left-width: 3px; 1759 | } 1760 | } 1761 | 1762 | .site-social__item .icon { 1763 | padding: 5.5px; 1764 | border-radius: 100%; 1765 | color: #222222; 1766 | background: white; 1767 | } 1768 | 1769 | .site-social__item .icon:hover { 1770 | background: #ff8400; 1771 | } 1772 | 1773 | /*------------------------------------*\ 1774 | $GALLERY 1775 | \*------------------------------------*/ 1776 | 1777 | .gallery-nav { 1778 | display: none; 1779 | border: 3px solid white; 1780 | cursor: pointer; 1781 | } 1782 | 1783 | @media only screen and (min-width: 569px) { 1784 | .gallery-nav { 1785 | display: inline-block; 1786 | position: fixed; 1787 | bottom: 44px; 1788 | right: 44px; 1789 | } 1790 | } 1791 | 1792 | @media only screen and (max-height: 380px) { 1793 | .gallery-nav { 1794 | position: absolute; 1795 | } 1796 | } 1797 | 1798 | .gallery-nav__item { 1799 | display: inline-block; 1800 | padding: 3.66667px 22px; 1801 | color: white; 1802 | font-size: 30px; 1803 | font-size: 2.14286rem; 1804 | line-height: 1.46667; 1805 | } 1806 | 1807 | .gallery-nav__item:hover { 1808 | color: #ff8400; 1809 | } 1810 | 1811 | .gallery-nav__item:first-child { 1812 | border-right: 3px solid white; 1813 | } 1814 | 1815 | .gallery-select { 1816 | display: inline-block; 1817 | min-width: 180px; 1818 | } 1819 | 1820 | @media only screen and (max-width: 568px) { 1821 | .gallery-select { 1822 | margin-left: 22px; 1823 | } 1824 | } 1825 | 1826 | .mc-image[data-href] { 1827 | cursor: pointer; 1828 | } 1829 | 1830 | .mc-image[data-href=""] { 1831 | cursor: default; 1832 | } 1833 | 1834 | /*------------------------------------*\ 1835 | $NEWS 1836 | \*------------------------------------*/ 1837 | 1838 | .news__item { 1839 | height: 220px; 1840 | } 1841 | 1842 | @media only screen and (min-width: 569px) { 1843 | .news__item { 1844 | float: left; 1845 | } 1846 | } 1847 | 1848 | @media only screen and (min-width: 569px) { 1849 | .news__item--small { 1850 | width: 33.333%; 1851 | } 1852 | } 1853 | 1854 | @media only screen and (min-width: 569px) { 1855 | .news__item--medium { 1856 | width: 63.667%; 1857 | margin-left: 3%; 1858 | } 1859 | } 1860 | 1861 | /*------------------------------------*\ 1862 | $POST EXCERPT 1863 | \*------------------------------------*/ 1864 | 1865 | * > .post-excerpt:first-child { 1866 | height: 100%; 1867 | width: 100%; 1868 | } 1869 | 1870 | * > .post-excerpt:first-child .post-excerpt__box, 1871 | * > .post-excerpt:first-child .splash { 1872 | height: 352px; 1873 | } 1874 | 1875 | .post-excerpt__box, 1876 | .splash { 1877 | display: block; 1878 | height: 220px; 1879 | margin-bottom: 0; 1880 | position: relative; 1881 | overflow: hidden; 1882 | } 1883 | 1884 | .post-excerpt__image { 1885 | max-width: initial !important; 1886 | min-width: 100%; 1887 | } 1888 | 1889 | .post-excerpt__title { 1890 | position: absolute; 1891 | bottom: 11px; 1892 | left: 11px; 1893 | margin-right: 11px; 1894 | padding: 11px; 1895 | margin-top: 0; 1896 | margin-bottom: 0; 1897 | background: white; 1898 | background: rgba(255, 255, 255, 0.75); 1899 | color: #222222; 1900 | letter-spacing: .1em; 1901 | white-space: pre; 1902 | font-size: 18px; 1903 | font-size: 1.28571rem; 1904 | line-height: 1.22222; 1905 | } 1906 | 1907 | /* 1908 | .post-excerpt__more{ 1909 | @extend %heading; 1910 | color: $black; 1911 | line-height: $unit * 2; 1912 | @include font-size(15px, false); 1913 | &:hover{ 1914 | color: $orange; 1915 | } 1916 | } 1917 | */ 1918 | 1919 | /*------------------------------------*\ 1920 | $SPLASH 1921 | \*------------------------------------*/ 1922 | 1923 | .splash { 1924 | display: none; 1925 | } 1926 | 1927 | @media only screen and (min-width: 569px) { 1928 | .splash { 1929 | display: table; 1930 | text-align: center; 1931 | letter-spacing: .1em; 1932 | } 1933 | } 1934 | 1935 | .splash--two { 1936 | margin-bottom: 22px; 1937 | } 1938 | 1939 | .splash__inner { 1940 | display: table-cell; 1941 | vertical-align: middle; 1942 | } 1943 | 1944 | .splash__title { 1945 | margin: 0; 1946 | line-height: 44px; 1947 | font-size: 37px; 1948 | font-size: 2.64286rem; 1949 | } 1950 | 1951 | .splash__title__first-line { 1952 | display: block; 1953 | line-height: 88px; 1954 | font-size: 120px; 1955 | font-size: 8.57143rem; 1956 | } 1957 | 1958 | .splash__subline { 1959 | margin: 0; 1960 | color: #474747; 1961 | line-height: 22px; 1962 | font-size: 22px; 1963 | font-size: 1.57143rem; 1964 | } 1965 | 1966 | /*------------------------------------*\ 1967 | $PAGINATION 1968 | \*------------------------------------*/ 1969 | 1970 | .pagination { 1971 | clear: both; 1972 | color: #222222; 1973 | line-height: 44px; 1974 | background: url("../images/hr.png") repeat-x, url("../images/hr.png") repeat-x bottom; 1975 | } 1976 | 1977 | .pagination a { 1978 | width: 49%; 1979 | color: #b3b3b3; 1980 | font-size: 22px; 1981 | font-size: 1.57143rem; 1982 | } 1983 | 1984 | .pagination a:last-child { 1985 | float: right; 1986 | text-align: right; 1987 | } 1988 | 1989 | /*------------------------------------*\ 1990 | $SOCIAL BIT 1991 | \*------------------------------------*/ 1992 | 1993 | .social-bit { 1994 | clear: both; 1995 | text-align: center; 1996 | line-height: 66px; 1997 | background: url("../images/social-bit.png") center center no-repeat; 1998 | font-size: 18px; 1999 | font-size: 1.28571rem; 2000 | } 2001 | 2002 | .social-bit .icon { 2003 | padding: 5.5px; 2004 | border-radius: 100%; 2005 | background: #474747; 2006 | color: #e1e1e1; 2007 | } 2008 | 2009 | .social-bit .icon:hover { 2010 | background: #ff8400; 2011 | } 2012 | 2013 | /*------------------------------------*\ 2014 | $POST 2015 | \*------------------------------------*/ 2016 | 2017 | .post__header { 2018 | min-height: 132px; 2019 | max-height: 396px; 2020 | position: relative; 2021 | overflow: hidden; 2022 | } 2023 | 2024 | .post__title { 2025 | padding: 11px; 2026 | margin-top: 0; 2027 | position: absolute; 2028 | top: 22px; 2029 | left: 22px; 2030 | background: #222222; 2031 | background: rgba(34, 34, 34, 0.9); 2032 | color: white; 2033 | } 2034 | 2035 | .post__image { 2036 | width: 100%; 2037 | } 2038 | 2039 | .post__copy { 2040 | overflow: hidden; 2041 | } 2042 | 2043 | .post__aside { 2044 | letter-spacing: .1em; 2045 | font-size: 18px; 2046 | font-size: 1.28571rem; 2047 | line-height: 1.22222; 2048 | } 2049 | 2050 | @media only screen and (min-width: 569px) { 2051 | .post__aside { 2052 | float: right; 2053 | margin-left: 22px; 2054 | } 2055 | } 2056 | 2057 | .post__back { 2058 | display: inline-block; 2059 | background: #ff8400; 2060 | padding: 11px; 2061 | white-space: pre; 2062 | } 2063 | 2064 | .post__back a { 2065 | color: white; 2066 | } 2067 | 2068 | /*------------------------------------*\ 2069 | $POST SOCIAL 2070 | \*------------------------------------*/ 2071 | 2072 | .post-social__title { 2073 | margin: 0; 2074 | line-height: 44px; 2075 | font-size: 20px; 2076 | font-size: 1.42857rem; 2077 | } 2078 | 2079 | .post-social__item { 2080 | display: block; 2081 | padding: 11px; 2082 | margin-bottom: 11px; 2083 | color: white; 2084 | } 2085 | 2086 | .post-social__item:after { 2087 | content: '>'; 2088 | margin-left: 22px; 2089 | } 2090 | 2091 | .post-social__item .icon { 2092 | display: inline-block; 2093 | padding: 3.66667px; 2094 | margin-right: 11px; 2095 | background: white; 2096 | border-radius: 50px; 2097 | } 2098 | 2099 | .post-social__item--twitter { 2100 | background-color: #4099ff; 2101 | } 2102 | 2103 | .post-social__item--twitter .icon { 2104 | color: #4099ff; 2105 | } 2106 | 2107 | .post-social__item--facebook { 2108 | background-color: #3b5998; 2109 | } 2110 | 2111 | .post-social__item--facebook .icon { 2112 | color: #3b5998; 2113 | } 2114 | 2115 | /*------------------------------------*\ 2116 | $NEWS BREAKOUT 2117 | \*------------------------------------*/ 2118 | 2119 | .news-breakout { 2120 | display: block; 2121 | margin-top: 22px; 2122 | text-align: center; 2123 | } 2124 | 2125 | /*------------------------------------*\ 2126 | $EVENT VENUE 2127 | \*------------------------------------*/ 2128 | 2129 | .events { 2130 | margin: 44px 0; 2131 | text-align: center; 2132 | } 2133 | 2134 | .event-venue { 2135 | padding: 0 11px; 2136 | margin-bottom: 22px; 2137 | } 2138 | 2139 | @media only screen and (min-width: 700px) { 2140 | .event-venue { 2141 | display: inline-block; 2142 | width: 33%; 2143 | margin-bottom: 0; 2144 | vertical-align: top; 2145 | } 2146 | } 2147 | 2148 | .event-venue__image { 2149 | display: inline-block; 2150 | } 2151 | 2152 | .event-venue__title { 2153 | font-family: "Museo500Regular", sans-serif; 2154 | letter-spacing: .1em; 2155 | white-space: pre; 2156 | font-size: 16px; 2157 | font-size: 1.14286rem; 2158 | line-height: 1.375; 2159 | } 2160 | 2161 | .event-venue__title a { 2162 | color: #222222; 2163 | } 2164 | 2165 | .event-venue__link { 2166 | display: inline-block; 2167 | padding: 11px; 2168 | color: white; 2169 | background-color: #ff8400; 2170 | } 2171 | 2172 | .event-venue__link i { 2173 | display: inline-block; 2174 | margin-left: 11px; 2175 | } 2176 | 2177 | /*------------------------------------*\ 2178 | $BOX HEADING 2179 | \*------------------------------------*/ 2180 | 2181 | .box-heading { 2182 | padding-bottom: 3px; 2183 | margin-top: 0; 2184 | background: url("../images/hr-2.png") repeat-x bottom; 2185 | font-size: 18px; 2186 | font-size: 1.28571rem; 2187 | line-height: 1.22222; 2188 | } 2189 | 2190 | .box-heading span { 2191 | display: inline-block; 2192 | padding: 11px 22px; 2193 | margin-left: 11px; 2194 | background-color: #2b2b2b; 2195 | color: white; 2196 | } 2197 | 2198 | /*------------------------------------*\ 2199 | $MENU LOCATIONS 2200 | \*------------------------------------*/ 2201 | 2202 | .menu-locations, 2203 | #map_accordion ul { 2204 | background: url("../images/hr-2.png") top repeat-x, url("../images/hr-2.png") bottom repeat-x; 2205 | padding: 11px 0; 2206 | } 2207 | 2208 | @media only screen and (min-width: 569px) { 2209 | .menu-locations, 2210 | #map_accordion ul { 2211 | text-align: center; 2212 | } 2213 | } 2214 | 2215 | .menu-locations__item, 2216 | #map_accordion li { 2217 | letter-spacing: .1em; 2218 | font-size: 22px; 2219 | font-size: 1.57143rem; 2220 | line-height: 1; 2221 | } 2222 | 2223 | @media only screen and (min-width: 569px) { 2224 | .menu-locations__item, 2225 | #map_accordion li { 2226 | display: inline-block; 2227 | margin: 0 22px; 2228 | } 2229 | } 2230 | 2231 | .menu-locations__item a, 2232 | #map_accordion li a { 2233 | display: block; 2234 | color: #b3b3b3; 2235 | line-height: 44px; 2236 | } 2237 | 2238 | @media only screen and (min-width: 1024px) { 2239 | .menu-locations__item--active { 2240 | position: relative; 2241 | } 2242 | 2243 | .menu-locations__item--active::after { 2244 | display: block; 2245 | content: ''; 2246 | position: absolute; 2247 | bottom: -8px; 2248 | border: transparent 11px solid; 2249 | border-bottom-color: #2b2b2b; 2250 | left: 50%; 2251 | margin-left: -5.5px; 2252 | } 2253 | } 2254 | 2255 | .menu-locations__item--active a { 2256 | color: #2b2b2b; 2257 | } 2258 | 2259 | /*------------------------------------*\ 2260 | $MENU LOCATION 2261 | \*------------------------------------*/ 2262 | 2263 | .menu-location { 2264 | font-family: "museo_slab500", Verdana, sans-serif; 2265 | } 2266 | 2267 | /*------------------------------------*\ 2268 | $MENU NAV 2269 | \*------------------------------------*/ 2270 | 2271 | .menu-nav { 2272 | float: left; 2273 | margin-right: 22px; 2274 | } 2275 | 2276 | @media only screen and (min-width: 569px) { 2277 | .menu-nav { 2278 | margin-right: 44px; 2279 | } 2280 | } 2281 | 2282 | .menu-nav__list { 2283 | text-transform: uppercase; 2284 | } 2285 | 2286 | .menu-nav__item > a { 2287 | display: block; 2288 | color: #474747; 2289 | } 2290 | 2291 | .menu-nav--sub__list { 2292 | text-transform: capitalize; 2293 | list-style: none; 2294 | padding-left: 0; 2295 | margin-top: 11px; 2296 | } 2297 | 2298 | @media only screen and (min-width: 569px) { 2299 | .menu-nav--sub__list { 2300 | padding-left: 22px; 2301 | } 2302 | } 2303 | 2304 | .menu-nav--sub__list a { 2305 | color: #b3b3b3; 2306 | } 2307 | 2308 | .menu-nav--sub__item--active a { 2309 | color: #ff8400; 2310 | } 2311 | 2312 | /*------------------------------------*\ 2313 | $MENU 2314 | \*------------------------------------*/ 2315 | 2316 | .menu { 2317 | overflow: hidden; 2318 | position: relative; 2319 | } 2320 | 2321 | .menu__title { 2322 | margin-top: 0; 2323 | font-family: "Museo500Regular", sans-serif; 2324 | font-size: 28px; 2325 | font-size: 2rem; 2326 | } 2327 | 2328 | .menu__item__title { 2329 | text-transform: uppercase; 2330 | } 2331 | 2332 | /*------------------------------------*\ 2333 | $DELIVERY BUTTON 2334 | \*------------------------------------*/ 2335 | 2336 | .delivery-button { 2337 | margin-right: 11px; 2338 | margin-bottom: 11px; 2339 | font-size: 13px; 2340 | font-size: 0.92857rem; 2341 | line-height: 1.69231; 2342 | } 2343 | 2344 | /*------------------------------------*\ 2345 | $VENUE 2346 | \*------------------------------------*/ 2347 | 2348 | .venue__header { 2349 | height: 308px; 2350 | margin-bottom: 33px; 2351 | position: relative; 2352 | overflow: hidden; 2353 | } 2354 | 2355 | .venue__header .button, 2356 | .venue__header .venue-menus a, 2357 | .venue-menus .venue__header a { 2358 | position: absolute; 2359 | right: 0; 2360 | top: 0; 2361 | } 2362 | 2363 | .venue__header img { 2364 | max-width: initial; 2365 | min-width: 100%; 2366 | } 2367 | 2368 | .venue__footer { 2369 | padding: 22px 0 22px; 2370 | margin: 0; 2371 | position: absolute; 2372 | bottom: 0; 2373 | left: 0; 2374 | width: 100%; 2375 | background: url("../images/text-footer.png") left bottom repeat-x; 2376 | color: white; 2377 | text-align: center; 2378 | font-size: 20px; 2379 | font-size: 1.42857rem; 2380 | line-height: 1.1; 2381 | } 2382 | 2383 | .venue__footer a { 2384 | color: white; 2385 | text-decoration: underline; 2386 | } 2387 | 2388 | .venue__caption { 2389 | width: 100%; 2390 | padding: 22px; 2391 | margin-bottom: 0; 2392 | position: absolute; 2393 | bottom: 0; 2394 | left: 0; 2395 | background-color: #222222; 2396 | background-color: rgba(0, 0, 0, 0.7); 2397 | font-family: "museo_slab500", Verdana, sans-serif; 2398 | color: white; 2399 | font-size: 17px; 2400 | font-size: 1.21429rem; 2401 | line-height: 1.29412; 2402 | } 2403 | 2404 | .venue__row { 2405 | padding-bottom: 33px; 2406 | margin-bottom: 33px; 2407 | background: url("../images/hr-2.png") bottom repeat-x; 2408 | } 2409 | 2410 | .venue__row > :last-child { 2411 | margin-right: 0; 2412 | } 2413 | 2414 | * > .venue__row:last-child { 2415 | background: none; 2416 | padding-bottom: 0; 2417 | } 2418 | 2419 | @media only screen and (max-width: 568px) { 2420 | .venue__item { 2421 | margin-bottom: 44px; 2422 | } 2423 | } 2424 | 2425 | @media only screen and (min-width: 569px) { 2426 | .venue__item { 2427 | width: 31.3%; 2428 | float: left; 2429 | margin-right: 3%; 2430 | } 2431 | } 2432 | 2433 | .venue__item .title { 2434 | font-size: 22px; 2435 | font-size: 1.57143rem; 2436 | line-height: 1; 2437 | } 2438 | 2439 | .venue__item > :first-child { 2440 | margin-top: 0; 2441 | } 2442 | 2443 | @media only screen and (min-width: 569px) { 2444 | .venue__item--double { 2445 | width: 65.6%; 2446 | } 2447 | } 2448 | 2449 | .venue-menus { 2450 | padding-right: 22px !important; 2451 | } 2452 | 2453 | .venue-menus li { 2454 | margin-bottom: 11px; 2455 | text-align: center; 2456 | font-family: "museo_slab500", Verdana, sans-serif; 2457 | font-size: 12px; 2458 | font-size: 0.85714rem; 2459 | line-height: 1.83333; 2460 | } 2461 | 2462 | .venue-menus a { 2463 | display: block; 2464 | background-color: #b3b3b3; 2465 | } 2466 | 2467 | .venue-menus a:after { 2468 | content: ' >'; 2469 | } 2470 | 2471 | .venue-opening p:last-child { 2472 | margin-bottom: 0; 2473 | } 2474 | 2475 | .venue-quote { 2476 | background: url("../images/venue-quote.png") 11px 44px no-repeat; 2477 | } 2478 | 2479 | .venue-quote blockquote { 2480 | padding: 33px 22px; 2481 | } 2482 | 2483 | .venue-contact { 2484 | color: #ff8400; 2485 | } 2486 | 2487 | .venue-contact img { 2488 | margin-top: 22px; 2489 | } 2490 | 2491 | .venue-contact .title { 2492 | font-size: 20px; 2493 | font-size: 1.42857rem; 2494 | line-height: 1.1; 2495 | margin-top: 0; 2496 | } 2497 | 2498 | .venue-link { 2499 | overflow: hidden; 2500 | } 2501 | 2502 | .venue-link a { 2503 | display: block; 2504 | position: relative; 2505 | text-align: center; 2506 | } 2507 | 2508 | .venue-link h2 { 2509 | position: relative; 2510 | z-index: 1; 2511 | display: inline-block; 2512 | margin: 44px 0; 2513 | padding: 11px; 2514 | background: #222222; 2515 | background-color: rgba(34, 34, 34, 0.7); 2516 | color: white; 2517 | } 2518 | 2519 | .venue-link img { 2520 | min-width: 100%; 2521 | position: absolute; 2522 | top: 0; 2523 | left: 0; 2524 | } 2525 | 2526 | .venue-link--floorplan { 2527 | position: relative; 2528 | text-align: center; 2529 | } 2530 | 2531 | .venue-link--floorplan > a:first-child { 2532 | position: absolute; 2533 | top: 0; 2534 | left: 0; 2535 | right: 0; 2536 | bottom: 0; 2537 | z-index: 10; 2538 | } 2539 | 2540 | .venue-link--floorplan h2 { 2541 | font-size: 22px; 2542 | font-size: 1.57143rem; 2543 | line-height: 1; 2544 | } 2545 | 2546 | .venue-link--ad a { 2547 | text-align: left; 2548 | } 2549 | 2550 | .venue-link--ad .title { 2551 | margin: 0 0 88px; 2552 | background-color: transparent; 2553 | text-shadow: 10px 10px 50px black; 2554 | } 2555 | 2556 | /*------------------------------------*\ 2557 | $LOCATION BOX 2558 | \*------------------------------------*/ 2559 | 2560 | .location-box { 2561 | padding: 44px 0; 2562 | margin-bottom: 0; 2563 | border-bottom: 2px dotted #b3b3b3; 2564 | } 2565 | 2566 | .location-box:last-child { 2567 | border-bottom: none; 2568 | padding-bottom: 0; 2569 | } 2570 | 2571 | .location-box__image { 2572 | display: block; 2573 | width: 198px; 2574 | margin: 0 auto 22px; 2575 | } 2576 | 2577 | @media only screen and (min-width: 569px) { 2578 | .location-box__image { 2579 | float: left; 2580 | margin-right: 33px; 2581 | } 2582 | } 2583 | 2584 | .location-box__title { 2585 | margin: 0; 2586 | font-family: "museo_slab500", Verdana, sans-serif; 2587 | font-size: 16px; 2588 | font-size: 1.14286rem; 2589 | line-height: 1.375; 2590 | } 2591 | 2592 | @media only screen and (min-width: 1200px) { 2593 | .location-box__left, 2594 | .location-box__right { 2595 | display: inline-block; 2596 | width: 48%; 2597 | padding-right: 22px; 2598 | vertical-align: top; 2599 | } 2600 | } 2601 | 2602 | .location-box__right { 2603 | padding-right: 66px; 2604 | } 2605 | 2606 | .foot-note { 2607 | padding: 11px 0; 2608 | border-top: 2px dotted #b3b3b3; 2609 | border-bottom: 2px dotted #b3b3b3; 2610 | margin-bottom: 0; 2611 | } 2612 | 2613 | /*------------------------------------*\ 2614 | $BOOKING WIDGET 2615 | \*------------------------------------*/ 2616 | 2617 | .booking-widget { 2618 | width: 360px; 2619 | padding: 120px 18px 60px 32px; 2620 | font-size: 14px !important; 2621 | color: #222222 !important; 2622 | background: url("../images/booking-widget--jetblue.png") no-repeat; 2623 | } 2624 | 2625 | @media only screen and (max-width: 360px) { 2626 | .booking-widget { 2627 | position: relative; 2628 | left: -33px; 2629 | } 2630 | } 2631 | 2632 | @media only screen and (max-width: 568px) { 2633 | .booking-widget { 2634 | margin: 22px auto 0; 2635 | } 2636 | } 2637 | 2638 | @media only screen and (min-width: 569px) and (max-width: 1023px) { 2639 | .booking-widget { 2640 | margin: 0 auto 22px; 2641 | } 2642 | } 2643 | 2644 | .page--bills-bar-burger .main .booking-widget > *, 2645 | .page--bills-bar-burger #footer_nav .booking-widget > * { 2646 | display: inline-block; 2647 | vertical-align: top; 2648 | } 2649 | 2650 | @media only screen and (max-width: 568px) { 2651 | .page--bills-bar-burger .main .booking-widget, 2652 | .page--bills-bar-burger #footer_nav .booking-widget { 2653 | display: none; 2654 | } 2655 | } 2656 | 2657 | @media only screen and (min-width: 569px) { 2658 | .page--bills-bar-burger .main .booking-widget, 2659 | .page--bills-bar-burger #footer_nav .booking-widget { 2660 | margin-left: 0; 2661 | } 2662 | } 2663 | 2664 | @media only screen and (min-width: 1024px) { 2665 | .page--bills-bar-burger .main .booking-widget, 2666 | .page--bills-bar-burger #footer_nav .booking-widget { 2667 | left: auto; 2668 | position: fixed; 2669 | top: 24px; 2670 | right: 24px; 2671 | } 2672 | } 2673 | 2674 | .page--hours-and-locations .booking-widget { 2675 | margin: 22px auto 0; 2676 | } 2677 | 2678 | @media only screen and (min-width: 1024px) { 2679 | .page--hours-and-locations .booking-widget { 2680 | width: 726px; 2681 | height: auto; 2682 | padding: 23px 0 20px 20px; 2683 | background: url("../images/booking-widget-vertical.png") top left no-repeat; 2684 | } 2685 | 2686 | .page--hours-and-locations .booking-widget .rowElem, 2687 | .page--hours-and-locations .booking-widget .submit { 2688 | width: 18%; 2689 | } 2690 | 2691 | .page--hours-and-locations .booking-widget .submit { 2692 | width: auto; 2693 | } 2694 | 2695 | .page--hours-and-locations .booking-widget .submit .icon { 2696 | float: none; 2697 | } 2698 | } 2699 | 2700 | .booking-widget .rowElem, 2701 | .booking-widget .submit { 2702 | display: block; 2703 | margin: 0 5.5px 5.5px 0; 2704 | width: 45%; 2705 | float: left; 2706 | clear: none !important; 2707 | } 2708 | 2709 | .booking-widget .rowElem { 2710 | position: relative; 2711 | } 2712 | 2713 | .booking-widget .rowElem .jqTransformInputInner div { 2714 | margin: 0; 2715 | } 2716 | 2717 | .booking-widget .rowElem .icon { 2718 | position: absolute; 2719 | z-index: 100; 2720 | font-size: 18px; 2721 | top: 20%; 2722 | right: 8%; 2723 | color: #222222; 2724 | } 2725 | 2726 | .booking-widget .submit .button, 2727 | .booking-widget .submit .venue-menus a, 2728 | .venue-menus .booking-widget .submit a { 2729 | display: block; 2730 | padding-top: 0; 2731 | padding-bottom: 0; 2732 | line-height: 34px; 2733 | } 2734 | 2735 | .booking-widget .submit .icon { 2736 | font-size: 12px; 2737 | float: right; 2738 | } 2739 | 2740 | .booking-widget .startdate, 2741 | .booking-widget .resttime { 2742 | height: 35px; 2743 | background: #fff; 2744 | border: 1px solid #dfdfdf; 2745 | } 2746 | 2747 | .booking-widget .startdate input, 2748 | .booking-widget .resttime input { 2749 | text-indent: 12px; 2750 | outline: none; 2751 | } 2752 | 2753 | @media only screen and (max-width: 720px) { 2754 | .page--book-here .media__img--rev, 2755 | .page--bills-bar-burger-rockefeller-center .media__img--rev, 2756 | .page--bills-bar-burger-meatpacking-district .media__img--rev, 2757 | .page--bills-bar-and-burger-atlantic-city .media__img--rev { 2758 | float: none; 2759 | margin-left: 0; 2760 | } 2761 | } 2762 | 2763 | /*------------------------------------*\ 2764 | $BOOK BUTTON 2765 | \*------------------------------------*/ 2766 | 2767 | .book-circle { 2768 | font-size: 22px; 2769 | font-size: 1.57143rem; 2770 | line-height: 1; 2771 | display: table; 2772 | width: 154px; 2773 | height: 154px; 2774 | border-radius: 100%; 2775 | background: #ee3124; 2776 | color: white; 2777 | text-align: center; 2778 | } 2779 | 2780 | @media only screen and (max-width: 1023px) { 2781 | .book-circle { 2782 | display: none; 2783 | } 2784 | } 2785 | 2786 | .main__content .book-circle { 2787 | position: absolute; 2788 | top: -176px; 2789 | right: 22px; 2790 | } 2791 | 2792 | .page--gallery .book-circle { 2793 | position: absolute; 2794 | top: 44px; 2795 | right: 44px; 2796 | display: none; 2797 | } 2798 | 2799 | @media only screen and (min-width: 1024px) { 2800 | .page--gallery .book-circle.is-visible { 2801 | display: table; 2802 | } 2803 | } 2804 | 2805 | .book-circle__inner { 2806 | display: table-cell; 2807 | vertical-align: middle; 2808 | } 2809 | 2810 | .book-circle__inner .icon { 2811 | display: block; 2812 | margin: 0 auto 11px; 2813 | } 2814 | 2815 | /*------------------------------------*\ 2816 | $LEAD 2817 | \*------------------------------------*/ 2818 | 2819 | .lead { 2820 | font-size: 16px; 2821 | font-size: 1.14286rem; 2822 | line-height: 1.375; 2823 | } 2824 | 2825 | .venue-lead { 2826 | padding-bottom: 33px; 2827 | margin-bottom: 33px; 2828 | background: url("../images/hr-2.png") repeat-x bottom; 2829 | line-height: 33px; 2830 | font-size: 20px; 2831 | font-size: 1.42857rem; 2832 | } 2833 | 2834 | /*------------------------------------*\ 2835 | $PAGE BACKGROUNDS 2836 | \*------------------------------------*/ 2837 | 2838 | .page--hours-and-locations, 2839 | .page--menus-and-food, 2840 | .page--bills-bar-burger-rockefeller-center, 2841 | .page--bills-bar-burger-meatpacking-district, 2842 | .page--bills-bar-burger-atlantic-city, 2843 | .page--bills-bar-burger-downtown { 2844 | background-image: url("../images/backgrounds/menus-and-food.jpg"); 2845 | } 2846 | 2847 | .page--special-events { 2848 | background-image: url("../images/backgrounds/special-events.jpg"); 2849 | } 2850 | 2851 | .page--about-bills, 2852 | .page--whats-happening { 2853 | background-image: url("../images/backgrounds/news.jpg"); 2854 | } 2855 | 2856 | .page--book-here { 2857 | background-image: url("../images/backgrounds/book-here.jpg"); 2858 | } 2859 | 2860 | /*------------------------------------*\ 2861 | $JQUERY UI 2862 | \*------------------------------------*/ 2863 | 2864 | /** 2865 | * Jquery UI widgets are not build with the new box-model, so we need to reset it just for Jquery UI 2866 | */ 2867 | 2868 | .ui-widget * { 2869 | -moz-box-sizing: content-box !important; 2870 | box-sizing: content-box !important; 2871 | } 2872 | 2873 | /*------------------------------------*\ 2874 | $JQTRANSFORM 2875 | \*------------------------------------*/ 2876 | 2877 | /** 2878 | * The CSS below is used to style form elements through a Jquery plugin called Jqtransform. 2879 | * See _jqtransform.scss in the vendor folder. 2880 | */ 2881 | 2882 | .jqTransformSelectWrapper { 2883 | width: 100% !important; 2884 | } 2885 | 2886 | .jqTransformSelectWrapper div span { 2887 | display: block !important; 2888 | width: 135px; 2889 | color: #222222 !important; 2890 | text-transform: none; 2891 | } 2892 | 2893 | #opentableRezervtionForm .jqTransformSelectWrapper { 2894 | color: #222222; 2895 | } 2896 | 2897 | #opentableRezervtionForm .jqTransformSelectWrapper a.jqTransformSelectOpen, 2898 | #navSelect .jqTransformSelectWrapper a.jqTransformSelectOpen { 2899 | z-index: 999px; 2900 | font-size: 18px; 2901 | width: auto; 2902 | height: auto; 2903 | top: 12%; 2904 | right: 7%; 2905 | color: #222222; 2906 | } 2907 | 2908 | .jqTransformSelectWrapper a.jqTransformSelectOpen::after { 2909 | font-family: 'bills'; 2910 | speak: none; 2911 | font-style: normal; 2912 | font-weight: normal; 2913 | font-variant: normal; 2914 | text-transform: none; 2915 | -webkit-font-smoothing: antialiased; 2916 | content: "\e009"; 2917 | } 2918 | 2919 | .jqTransformSelectWrapper ul { 2920 | position: relative; 2921 | top: 100%; 2922 | overflow: auto; 2923 | margin: 0; 2924 | padding: 0; 2925 | width: 100% !important; 2926 | height: 140px; 2927 | border-right: 1px solid #CCC; 2928 | border-bottom: 1px solid #CCC; 2929 | border-left: 1px solid #CCC; 2930 | background-color: #FFF; 2931 | list-style-type: none; 2932 | text-align: left; 2933 | position: absolute; 2934 | } 2935 | 2936 | .jqTransformSelectWrapper ul a.selected { 2937 | background: #fff; 2938 | } 2939 | 2940 | .jqTransformSelectWrapper ul a:hover { 2941 | background: #e4e0e0; 2942 | } 2943 | 2944 | .divElem { 2945 | position: relative; 2946 | } 2947 | 2948 | #show_datepicker, 2949 | #show_timepicker { 2950 | position: absolute; 2951 | top: 4px; 2952 | right: 9px; 2953 | } 2954 | 2955 | #show_datepicker:hover, 2956 | #show_timepicker:hover { 2957 | cursor: pointer; 2958 | } 2959 | 2960 | #ui-timepicker-div { 2961 | position: relative; 2962 | margin-top: 35px; 2963 | } 2964 | 2965 | .jqTransformInputInner div input { 2966 | width: 100% !important; 2967 | line-height: 22px !important; 2968 | position: relative !important; 2969 | z-index: 100 !important; 2970 | border-radius: 0 !important; 2971 | } 2972 | 2973 | #map_canvas, 2974 | #map_canvas_loc { 2975 | height: 400px; 2976 | } 2977 | 2978 | #map_tabs { 2979 | display: none; 2980 | /* I could not disable this in the snippet so I had to hide it like this */ 2981 | } 2982 | 2983 | #map_accordion { 2984 | margin-top: -25px; 2985 | } 2986 | 2987 | #map_accordion ul { 2988 | padding: 11px 0; 2989 | margin: 0 0 22px; 2990 | list-style: none; 2991 | background: url("../images/hr-2.png") bottom repeat-x; 2992 | } 2993 | 2994 | #map_accordion li { 2995 | margin: 0 11px !important; 2996 | } 2997 | 2998 | #map_accordion li a { 2999 | color: #222222; 3000 | } 3001 | 3002 | .map_print { 3003 | display: none; 3004 | } 3005 | 3006 | /*------------------------------------*\ 3007 | $VENUE BOX (OLD) 3008 | \*------------------------------------*/ 3009 | 3010 | /** 3011 | * All of the'.venue_'... CSS is copied from the old website 3012 | * and is used to style the popup boxes in the google maps widget 3013 | */ 3014 | 3015 | .venue_box { 3016 | width: 272px; 3017 | display: inline; 3018 | float: left; 3019 | margin: 0 17px; 3020 | color: #000; 3021 | height: 220px !important; 3022 | /* I had to add a hight with !important to keep it from breaking */ 3023 | } 3024 | 3025 | .venue_wrap { 3026 | width: 252px; 3027 | text-align: center; 3028 | background: #fff; 3029 | font: 0.8em Arial, Helvetica, sans-serif; 3030 | padding: 10px; 3031 | } 3032 | 3033 | .venue_image { 3034 | height: 115px; 3035 | width: 252px; 3036 | overflow: hidden; 3037 | } 3038 | 3039 | .venue_image img { 3040 | height: 115px; 3041 | } 3042 | 3043 | .venue_text { 3044 | border-bottom: 1px solid #000; 3045 | padding: 5px; 3046 | overflow: hidden; 3047 | } 3048 | 3049 | .venue_info { 3050 | height: 50px; 3051 | margin-top: 3px; 3052 | } 3053 | 3054 | .venue_mealtime { 3055 | display: block; 3056 | clear: both; 3057 | } 3058 | 3059 | .venue_contact { 3060 | margin-top: 5px; 3061 | } 3062 | 3063 | .venue_contact a { 3064 | color: #000; 3065 | text-decoration: none; 3066 | margin-left: 5px; 3067 | } 3068 | 3069 | .venue_contact a:hover { 3070 | color: #000; 3071 | text-decoration: underline; 3072 | } 3073 | 3074 | .venue_cost { 3075 | display: none; 3076 | margin: 2px auto; 3077 | width: 68px; 3078 | } 3079 | 3080 | .venue_cuisine { 3081 | display: none; 3082 | } 3083 | 3084 | .venue_address { 3085 | clear: both; 3086 | } 3087 | 3088 | .venue_actions { 3089 | background: #ff0066; 3090 | padding: 2px 0; 3091 | } 3092 | 3093 | .venue_actions a { 3094 | color: #fff; 3095 | margin-left: 8px; 3096 | text-decoration: none; 3097 | } 3098 | 3099 | .venue_actions a:hover { 3100 | text-decoration: underline; 3101 | color: #fff; 3102 | } 3103 | 3104 | .venue_social { 3105 | margin: 15px 0 10px 0; 3106 | } 3107 | 3108 | .venue_social a { 3109 | margin-right: 10px; 3110 | } -------------------------------------------------------------------------------- /test/expected/test6.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | color: #001; 3 | } 4 | 5 | @media (min-width: 640px) { 6 | .foo { 7 | color: #100; 8 | } 9 | } 10 | 11 | .bar { 12 | color: #002; 13 | } 14 | 15 | @media (min-width: 960px) { 16 | .bar { 17 | color: #200; 18 | } 19 | } 20 | 21 | .baz { 22 | color: #003; 23 | } 24 | 25 | @media (min-width: 640px) { 26 | .baz { 27 | color: #300; 28 | } 29 | } 30 | 31 | .qux { 32 | color: #004; 33 | } 34 | 35 | @media (min-width: 640px) { 36 | .qux { 37 | color: #400; 38 | } 39 | } 40 | 41 | .quux { 42 | color: #005; 43 | } 44 | 45 | @media (min-width: 960px) { 46 | .quux { 47 | color: #500; 48 | } 49 | } 50 | 51 | .corge { 52 | color: #006; 53 | } 54 | 55 | @media (min-width: 960px) { 56 | .corge { 57 | color: #600; 58 | } 59 | } 60 | 61 | .grault { 62 | color: #007; 63 | } 64 | 65 | @media (min-width: 640px) { 66 | .grault { 67 | color: #700; 68 | } 69 | } 70 | 71 | .garply { 72 | color: #008; 73 | } 74 | 75 | @media (min-width: 960px) { 76 | .garply { 77 | color: #800; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /test/expected/test7.css: -------------------------------------------------------------------------------- 1 | @media print, only screen and (min-width: 28em) { 2 | .test { 3 | color: red; 4 | } 5 | } 6 | 7 | @media print, only screen and (min-width: 46em) { 8 | .test { 9 | color: red; 10 | } 11 | } 12 | 13 | @media print, only screen and (min-width: 61em) { 14 | .test { 15 | color: red; 16 | } 17 | } 18 | 19 | @media print, only screen and (max-width: 61em) { 20 | .test { 21 | color: red; 22 | } 23 | } 24 | 25 | @media only screen and (max-width: 45em) { 26 | .test { 27 | color: red; 28 | } 29 | } 30 | 31 | @media only screen and (min-width: 28em) { 32 | .test { 33 | color: red; 34 | } 35 | } 36 | 37 | @media only screen and (min-width: 46em) { 38 | .test { 39 | color: red; 40 | } 41 | } 42 | 43 | @media only screen and (min-width: 61em) { 44 | .test { 45 | color: red; 46 | } 47 | } 48 | 49 | @media only screen and (max-width: 61em) { 50 | .test { 51 | color: red; 52 | } 53 | } 54 | 55 | @media print { 56 | .test { 57 | color: red; 58 | } 59 | } 60 | 61 | @media screen { 62 | .test { 63 | color: red; 64 | } 65 | } 66 | 67 | @media all { 68 | .test { 69 | color: red; 70 | } 71 | } 72 | 73 | @media print, only screen and (min-width: 46em) and (max-width: 61em) { 74 | .test { 75 | color: red; 76 | } 77 | } 78 | 79 | @media only screen and (min-width: 46em) and (max-width: 61em) { 80 | .test { 81 | color: red; 82 | } 83 | } 84 | 85 | @media only screen { 86 | .test { 87 | color: red; 88 | } 89 | } 90 | 91 | @media only print { 92 | .test { 93 | color: red; 94 | } 95 | } 96 | 97 | @media print { 98 | .test { 99 | color: red; 100 | } 101 | } 102 | 103 | @media print { 104 | .test { 105 | color: red; 106 | } 107 | } 108 | 109 | @media print { 110 | .test { 111 | color: red; 112 | } 113 | } 114 | 115 | .test { 116 | color: red; 117 | } 118 | 119 | @media (max-width: 45em) { 120 | .test { 121 | color: red; 122 | } 123 | } 124 | 125 | @media (min-width: 28em) { 126 | .test { 127 | color: red; 128 | } 129 | } 130 | 131 | @media (min-width: 46em) { 132 | .test { 133 | color: red; 134 | } 135 | } 136 | 137 | @media (min-width: 61em) { 138 | .test { 139 | color: red; 140 | } 141 | } --------------------------------------------------------------------------------