/* Foundation v2.1.2 http://foundation.zurb.com */ /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Reset & Standards :: Links :: Lists :: Tables :: Misc */ /* -------------------------------------------------- :: Global Reset & Standards -------------------------------------------------- */ /* Eric Meyer's CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } html { font-size: 62.5%; min-width: 327px; } * { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { background: #809b18; position: relative; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; } body.alt { background: #809b18 url(bg.png) top repeat-x; } /* -------------------------------------------------- :: Links -------------------------------------------------- */ a { color: #2a85e8; text-decoration: none; line-height: inherit; } .alt a { color: #000; text-decoration: none; line-height: inherit; } a:hover { color: #FDB828;text-decoration:none; } a:focus { color: #cc4714; outline: none; } p a, p a:visited { line-height: inherit; } a, #util-container a, .caption { -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; -o-transition: color 0.2s linear; } /* -------------------------------------------------- :: Lists -------------------------------------------------- */ ul, ol { margin-bottom: 18px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ol ol { margin: 4px 0 5px 30px; } li { margin-bottom: 12px; } ul.large li { line-height: 21px; } ul.menu-types {margin:0px 0px 30px 5px;padding-bottom:25px;font-size:14px;border-bottom:1px solid #222;font-family: 'DINMediumRegular';text-transform:uppercase;} ul.menu-types li a{color:#555; } ul.menu-types li a:hover{color:#000; } /* -------------------------------------------------- :: Tables -------------------------------------------------- */ table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: block; margin: 0 0 18px; border: 1px solid #ddd; } table thead, table tfoot { background: #f5f5f5; } table thead tr th, table tfoot tr th table tbody tr td, table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; } table thead tr th, table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; } table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; } table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; } table tbody tr.even, table tbody tr.alt { background: #f9f9f9; } table tbody tr:nth-child(even) { background: #f9f9f9; } table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; } /* -------------------------------------------------- :: Misc ---------------------------------------------------*/ .left { float: left; } .right { float: right; } .hide { display: none; } .highlight { background: #ff0; } /* Arfully Masterminded by ZURB */ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: #fff; line-height: 1.25 } body.alt h1, body.alt h2, body.alt h3, body.alt h4, body.alt h5, body.alt h6 { color: #000; line-height: 1.25 } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;} h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; } h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; } h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; } h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; } h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; } em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 60%; line-height: inherit; } h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; } body.alt .feature p{ color:#333; } .related p{ color:#cec0b3; } body.alt .related p{ color:#8c8178; } /* Blockquotes */ blockquote, blockquote p { line-height: 20px; color: #777; } blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } hr.dark { border: solid #999; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } hr.dark2 { border: solid #999; border-width: 1px 0 0; clear: both; margin: 20px 0 8px; height: 0; } abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } abbr { text-transform: none; } /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ p a, p a:visited { color: #444 !important; text-decoration: underline; } p a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /* Arfully Masterminded by ZURB */ /* -------------------------------------------------- :: Grid This is the mobile-friendly, responsive grid that lets Foundation work much of its magic. -------------------------------------------------- */ .container { padding: 0 20px; } .container.nine { max-width:920px;margin:0px auto; } .row { width: 100%; max-width: 1400px; min-width: 327px; margin: 0 auto; } /* To fix the grid into a certain size, set max-width to width */ .row .row { min-width: 0; } .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; } .column:first-child, .columns:first-child { margin-left: 0; } .row .one.columns { width: 4.3%; } .row .two.columns { width: 13%; } .row .three.columns { width: 21.68%; } .row .four.columns { width: 30.4%; } .row .five.columns { width: 39.1%; } .row .six.columns { width: 47.8%; } .row .seven.columns { width: 56.5%; } .row .eight.columns { width: 65.2%; } .row .nine.columns { width: 73.9%; } .row .ten.columns { width: 82.6%; } .row .eleven.columns { width: 91.3%; } .row .twelve.columns { width: 100%; } .row .offset-by-one { margin-left: 13.1%; } .row .offset-by-two { margin-left: 21.8%; } .row .offset-by-three { margin-left: 30.5%; } .row .offset-by-four { margin-left: 39.2%; } .row .offset-by-five { margin-left: 47.9%; } .row .offset-by-six { margin-left: 56.6%; } .row .offset-by-seven { margin-left: 65.3%; } .row .offset-by-eight { margin-left: 74.0%; } .row .offset-by-nine { margin-left: 82.7%; } .row .offset-by-ten { margin-left: 91.4%; } .row .centered { float: none; margin: 0 auto; } .row .offset-by-one:first-child { margin-left: 8.7%; } .row .offset-by-two:first-child { margin-left: 17.4%; } .row .offset-by-three:first-child { margin-left: 26.1%; } .row .offset-by-four:first-child { margin-left: 34.8%; } .row .offset-by-five:first-child { margin-left: 43.5%; } .row .offset-by-six:first-child { margin-left: 52.2%; } .row .offset-by-seven:first-child { margin-left: 60.9%; } .row .offset-by-eight:first-child { margin-left: 69.6%; } .row .offset-by-nine:first-child { margin-left: 78.3%; } .row .offset-by-ten:first-child { margin-left: 87%; } .row .offset-by-eleven:first-child { margin-left: 95.7%; } img, object, embed { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } /* Nicolas Gallagher's micro clearfix */ .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .floatright {float:right;} .floatleft {float:left;} /* -------------------------------------------------- :: Block grids These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating blocks of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones -------------------------------------------------- */ .block-grid { display: block; overflow: hidden; } .block-grid>li { display: block; height: auto; float: left; } .block-grid.two-up { margin-left: -4% } .block-grid.two-up>li { margin-left: 4%; width: 46%; } .block-grid.three-up { margin-left: -2% } .block-grid.three-up>li { margin-left: 2%; width: 31.3%; } .block-grid.four-up { margin-left: -2% } .block-grid.four-up>li { margin-left: 2%; width: 23%; } .block-grid.five-up { margin-left: -1.5% } .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; } /* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Buttons :: Alerts :: Notices/Alerts :: Tabs :: Pagination :: Lists :: Panels :: Nav :: Microformats */ /* -------------------------------------------------- Buttons -------------------------------------------------- */ .button { background: #00a6fc; display: inline-block; text-align: center; padding: 4px 11px 6px; color: #fff; text-decoration: none; font-weight: bold; letter-spacing:0.07em; line-height: 1; font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif; position: relative; cursor: pointer; border: none; text-shadow: 0 -1px 0px rgba(0,0,0,0.18); margin:0px 0px 0px 0px; -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; } /* Don't use native buttons on iOS */ input[type=submit].button { -webkit-appearance: none; } .button.nice { background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.28); background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%); background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent)); border: 1px solid #0593dc; -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; } .button.reservation { margin-top:65px; } .button.radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .button.round { -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; } .button.full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } .button.left-align { text-align: left; text-indent: 12px; } /* Sizes ---------- */ .small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; } .medium.button { font-size: 13px; width: auto; } .large.button { font-size: 18px; padding: 11px 48px 13px; width: auto; } /* Nice Sizes ---------- */ .nice.small.button { background-position: 0 -36px; } .nice.large.button { background-position: 0 -30px; } /* Colors ---------- */ .blue.button { background-color: #00a6fc; } .red.button { background-color: #e91c21; } .green.button { background-color: #D0D6CC; color: #45682E;text-shadow: 0 1px 0px rgba(255,255,255,0.28);opacity:0.7; } .white.button { background-color: #e9e9e9; color: #333; } .grey.button { background-color: #8f887f; color: #fff;text-shadow: 0 -1px 1px rgba(0,0,0,0.28); } .black.button { background-color: #141414; } /* Nice Colors ---------- */ .nice.blue.button { border: 1px solid #0593dc; } .nice.red.button { border: 1px solid #b90b0b; } .nice.green.button { border: 1px solid #A2AA9D;text-shadow: 0 1px 0px rgba(255,255,255,0.9); } .nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; } .nice.black.button { border: 1px solid #000; } /* Hovers ---------- */ .button:hover, .button:focus { background-color: #0192dd; color: #fff; } .blue.button:hover, .blue.button:focus { background-color: #0192dd; } .red.button:hover, .red.button:focus { background-color: #d01217; } .green.button:hover, .green.button:focus { background-color: #2D441E; color: #fff;text-shadow: 0 -1px 0px rgba(0,0,0,0.28);opacity:0.9; } .white.button:hover, .white.button:focus { background-color: #dadada; color: #333; } .grey.button:hover, .grey.button:focus { background-color: #222; color: #fff; } .black.button:hover, .black.button:focus { background-color: #000; } /* Disabled ---------- */ .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; } /* -------------------------------------------------- Alerts -------------------------------------------------- */ div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px rgba(255,255,255,0.9); position: relative; } .alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0; font-size: 18px; opacity: 0.2; padding: 4px; } .alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; } /* -------------------------------------------------- Tabs -------------------------------------------------- */ dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; } dl.tabs dt { display: block; width: auto; height: 30px; padding: 0 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; } dl.tabs dt:first-child { padding: 0 9px 0 0; } dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; } dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: solid 1px #ddd; margin: 0 -1px 0 0; color: #555; background: #eee; } dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0 1px; height: 30px; } .nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; } .nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; font-size: 1.5rem; color: #555555; background: none; border: none; } .nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; } .nice.tabs dd:first-child a.active { margin-left: 0; } dl.tabs.vertical { height: auto; } dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd { float: none; height: auto; } dl.tabs.vertical dd a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } dl.tabs.vertical dd a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } .nice.tabs.vertical { border-bottom: solid 1px #eee; height: auto; } .nice.tabs.vertical dd a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } .nice.tabs.vertical dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .nice.tabs.vertical dd:first-child a.active { margin: 0; } ul.tabs-content { margin: 0; display: block; } ul.tabs-content>li { display:none; } ul.tabs-content>li.active { display: block; } dl.contained, dl.nice.contained { margin-bottom: 0; } dl.contained.tabs dd a { padding: 0 14px; } dl.nice.contained.tabs dd a { padding: 7px 18px 9px; } ul.contained.tabs-content { padding: 0; } ul.contained.tabs-content>li { padding: 20px; border: solid 0 #ddd; border-width: 0 1px 1px 1px; } ul.nice.contained.tabs-content>li { border-color: #eee; } /* -------------------------------------------------- Pagination -------------------------------------------------- */ ul.pagination { display: block; height: 24px; margin-left: -5px; } ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; } ul.pagination li.current a, ul.pagination li:hover a, ul.pagination li a:focus { border-bottom: solid 2px #00a6fc; color: #141414; } ul.pagination li.unavailable a { cursor: default; color: #999; } ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { border-bottom: none; } /* -------------------------------------------------- Lists -------------------------------------------------- */ ul.nice, ol.nice { list-style: none; margin: 0; } ul.nice li, ol.nice li { padding-left: 13px; position: relative } ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0; top: 0; color: #ccc; } /* -------------------------------------------------- Panels -------------------------------------------------- */ div.panel { padding: 20px 20px 2px 20px; background: #efefef; background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 ); box-shadow: 0 2px 5px rgba(0,0,0,0.15); -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25); margin: 0 0 20px 0; } div.panel.dark { padding: 18px 45px 15px 18px; width:270px; background: rgba(0,0,0,0.2); margin: 44px 0 20px 14px; border-bottom:rgba(0,0,0,0.1) solid 1px; border-right:rgba(0,0,0,0.1) solid 1px; } div.panel2 { padding: 5px 5px 0px 5px; background-color: rgba(255,255,255,1); box-shadow: 0 1px 4px rgba(0,0,0,0.05); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.1); margin: 10px 0 20px 0; font-weight:bold; } div.panel.dark p{ font-family: 'DINMediumRegular'; text-transform:uppercase; color:#fff54d; font-size:1.1em; letter-spacing:1px; } div.panel.dark p.email, div.panel.dark p.phone {color:#fff} div.panel.dark p.lrg{ color:#fff54d; font-family: 'DINMediumRegular'; text-transform:uppercase; font-size:1.1em; letter-spacing:1px; } body.alt div.panel.dark { padding: 18px 45px 15px 18px; width:270px; background: rgba(0,0,0,0.2); margin: 44px 0 20px 14px; border-bottom:rgba(0,0,0,0.1) solid 1px; border-right:rgba(0,0,0,0.1) solid 1px; -webkit-box-shadow:none; -moz-box-shadow: none; } div.panel.light { box-shadow:none background: rgba(255,255,255,0.4); padding: 18px 45px 15px 18px; width:270px; margin: 50px 0 20px 8px; border-top:rgba(0,0,0,0.1) solid 1px; border-left:rgba(0,0,0,0.1) solid 1px; } .panel.dark.faded {margin: 20px 0 20px 14px;opacity:0.4;-webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;} .panel.dark.faded:hover {opacity:1;} /* -------------------------------------------------- Nav Bar with Dropdowns -------------------------------------------------- */ .nav-bar { height: 45px; background: #fff; margin-top: 20px; border: 1px solid #ddd; } .nav-bar li { float: left; display: block; position: relative; padding: 0; margin: 0; border: none; } .nav-bar li a { position: relative; font-size: 14px; padding: 14px 20px 13px 20px; display: block; text-decoration: none; font-size: 15px; font-size: 1.5rem; border-right: 1px solid #ddd; } .nav-bar li.has-flyout a { padding-right: 36px; } .nav-bar li.has-flyout a:after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; position: absolute; right: 18px; bottom: 20px; } .nav-bar li:hover a { color: #141414; z-index: 2; } .nav-bar li:hover a:after { border-top-color: #141414; } .flyout { background: #fff; margin: 0; padding: 20px; border: 1px solid #ddd; position: absolute; top: 45px; left: -1px; width: 400px; z-index: 10; } .flyout.small { width: 200px; } .flyout.large { width: 600px; } .flyout.right { left: auto; right: 0; } .flyout p:last-child { margin-bottom: 0; } .nav-bar li .flyout { display: none; } .nav-bar li:hover .flyout { display: block; } /* -------------------------------------------------- Microformats -------------------------------------------------- */ /* hCard */ ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px; } ul.vcard li { margin: 0; display: block; } ul.vcard li.fn { font-weight: bold; font-size: 15px; font-size: 1.5rem; } p.vevent span.summary { font-weight: bold; } p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; } /* Artfully masterminded by ZURB Make sure to include app.js / foundation.js if you are going to use inline label inputs */ /* ----------------------------------------- Standard Forms ----------------------------------------- */ form { margin: 0 0 18px; } form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb;font-family: Helvetica, Arial, "Lucida Grande", sans-serif; } input.input-text, textarea, select { display: block; margin-bottom: 9px; } label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; } /* Text input and textarea font and padding */ input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; background: #fff; } .contact li input.input-text, .contact li textarea { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;opacity:0.5;width:95%;float:none;font-size: 13px; padding: 4px 0px 2px; background: #fff;margin:0px; } .contact li.full textarea {width:98%;} input.input-text:focus, textarea:focus, .contact li input.input-text:focus, .contact li textarea:focus, .contact li input.input-text:hover, .contact li textarea:hover { outline: none !important;opacity:1; } input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; } input.input-text:focus, textarea:focus { background: #f9f9f9; } /* Inlined Label Style */ input.placeholder, textarea.placeholder { color: #111; } /* Text input and textarea sizes */ input.input-text, textarea { width: 254px; } input.small, textarea.small { width: 134px; } input.medium, textarea.medium { width: 254px; } input.large, textarea.large { width: 434px; } /* Fieldsets */ form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } /* Inlined Radio & Checkbox */ .form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } /* Errors */ .form-field.error input, input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); } .form-field.error label, label.red { color: red; } .form-field.error small, small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; } .small + small.error { width: 140px; } .medium + small.error { width: 260px; } .large + small.error { width: 440px; } /* ----------------------------------------- Nicer Forms ----------------------------------------- */ form.nice div.form-field input, form.nice input.input-text, form.nice textarea { border-style: solid;border-width: 1px; border-color:#2D5115 #3D6B1F #4A7C2A #2D5115; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } form.nice div.form-field input, form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; } form.nice div.form-field input:focus, form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; } form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } form.nice div.form-field input[type=radio], form.nice div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 4px; border: solid 0 red; border-width: 0 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; } form.nice div.form-field.error .small + small, form.nice .small + small.error { width: 132px; } form.nice div.form-field.error .medium + small, form.nice .medium + small.error { width: 252px; } form.nice div.form-field.error .large + small, form.nice .large + small.error { width: 432px; } /* ----------------------------------------- Custom Forms ----------------------------------------- */ form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(../images/misc/custom-form-sprites.png) 0 0 no-repeat; } form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } form.custom span.custom.radio.checked { background-position: 0 -14px; } form.custom span.custom.checkbox.checked { background-position: 0 -28px; } form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; } form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; } form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 0 no-repeat; right: 0; top: 0; border: solid 1px #ddd; } form.custom div.custom.dropdown:hover a.selector, form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; } form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; } form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; } form.custom div.custom.dropdown ul li.selected { background: url(../images/misc/custom-form-sprites.png) right -52px no-repeat; } form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; } form.custom div.custom.dropdown ul li.selected:hover { background: url(../images/misc/custom-form-sprites.png) #2a85e8 right -78px no-repeat; } form.custom div.custom.dropdown ul.show { display: block; } form.custom div.custom.dropdown.open ul { display: block; } /* Mobile */ @media handheld, only screen and (device-width: 768px), (device-width: 800px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 60%; top: 30%; left: 15%; margin-left: 0; padding: 5%; height: auto; } } @media handheld, only screen and (max-width: 767px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80%; top: 15%; left: 5%; margin-left: 0; padding: 5%; height: auto; } } /* NOTES Close button entity is × Example markup

Awesome. I have it.

Your couch. I it's mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam.

×
*/ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ @media handheld, only screen and (max-width: 767px) { h1 { font-size: 32px; font-size: 3.2rem; line-height: 1.3; } h2 { font-size: 28px; font-size: 2.8rem; line-height: 1.3; } h3 { font-size: 21px; font-size: 2.1rem; line-height: 1.3; } h4 { font-size: 18px; font-size: 1.8rem; line-height: 1.2; } h5 { font-size: 16px; font-size: 1.6rem; line-height: 1.2; } h6 { font-size: 15px; font-size: 1.5rem; line-height: 1.2; } body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } } /* -------------------------------------------------- :: Grid -------------------------------------------------- */ /* Tablet screens */ @media only screen and (device-width: 768px), (device-width: 800px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .column:last-child, .columns:last-child { margin-right: 0; } .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0 !important; } /* Mobile 4-column Grid */ .row .phone-one.column:first-child, .row .phone-two.column:first-child, .row .phone-three.column:first-child, .row .phone-four.column:first-child, .row .phone-one.columns:first-child, .row .phone-two.columns:first-child, .row .phone-three.columns:first-child, .row .phone-four.columns:first-child { margin-left: 0; } .row .phone-one.column, .row .phone-two.column, .row .phone-three.column, .row .phone-four.column, .row .phone-one.columns, .row .phone-two.columns, .row .phone-three.columns, .row .phone-four.columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } a.more-arrow {display:none;} .row .phone-one.columns { width: 21.68% !important; } .row .phone-two.columns { width: 47.8% !important; } .row .phone-three.columns { width: 73.9% !important; } .row .phone-four.columns { width: 100% !important; } } /* Mobile */ @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .column:last-child, .columns:last-child { margin-right: 0; } .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0 !important; } a.more-arrow {display:none;} /* Mobile 4-column Grid */ .row .phone-one.column:first-child, .row .phone-two.column:first-child, .row .phone-three.column:first-child, .row .phone-four.column:first-child, .row .phone-one.columns:first-child, .row .phone-two.columns:first-child, .row .phone-three.columns:first-child, .row .phone-four.columns:first-child { margin-left: 0; } .row .phone-one.column, .row .phone-two.column, .row .phone-three.column, .row .phone-four.column, .row .phone-one.columns, .row .phone-two.columns, .row .phone-three.columns, .row .phone-four.columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } .row .phone-one.columns { width: 21.68% !important; } .row .phone-two.columns { width: 47.8% !important; } .row .phone-three.columns { width: 73.9% !important; } .row .phone-four.columns { width: 100% !important; } } /* -------------------------------------------------- :: Block Grids -------------------------------------------------- */ @media only screen and (max-width: 767px) { .block-grid.mobile { margin-left: 0; } .block-grid.mobile li { float: none; width: 100%; margin-left: 0; } } /* -------------------------------------------------- :: Mobile Visibility Affordances ---------------------------------------------------*/ .show-on-phones { display: none !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: block !important; } .hide-on-phones { display: block !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: none !important; } @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) { .hide-on-phones { display: block !important; } .hide-on-tablets { display: none !important; } .hide-on-desktops { display: block !important; } .show-on-phones { display: none !important; } .show-on-tablets { display: block !important; } .show-on-desktops { display: none !important; } } @media screen and (max-device-width: 480px) { .hide-on-phones { display: none !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: block !important; } .show-on-phones { display: block !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: none !important; } } @media only screen and (max-width: 767px) { .hide-on-phones { display: none !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: block !important; } .show-on-phones { display: block !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: none !important; } } /* only screen and (device-width: 1280px), only screen and (max-device-width: 1280px), /* /* Keeping this in as a reminder to address support for other tablet devices like the Xoom in the future */ /* Specific overrides for elements that require something other than display: block */ table.show-on-desktops { display: table !important; } table.hide-on-phones { display: table !important; } table.hide-on-tablets { display: table !important; } @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) { table.hide-on-phones { display: block !important; } table.hide-on-desktops { display: block !important; } table.show-on-tablets { display: block !important; } } @media only screen and (max-width: 767px) { table.hide-on-tablets { display: block !important; } table.hide-on-desktops { display: block !important; } table.show-on-phones { display: block !important; } } /* -------------------------------------------------- :: Forms ---------------------------------------------------*/ @media only screen and (max-width: 767px) { div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea, form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; } form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; } form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; } form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; } form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; } } @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) { div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea, form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; } form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; } form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; } form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; } form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; } } /* -------------------------------------------------- :: UI ---------------------------------------------------*/ @media only screen and (min-width: 900px) { #products p, #service p, #estimate p { opacity:1; } #products h2, #service h2, #estimate p{ } h2, p { } h3.section {} .section.two h3.section {} } @media only screen and (min-width: 1100px) { #products p, #service p, #estimate p { opacity:1; } #products h2, #service h2, #estimate p{ } h2, p { } h3.section {} .section.two h3.section {} } @media only screen and (max-height: 620px) { #main-menu ul li {text-align:left;float:none;margin:10px 0px 20px;padding:0px 0px;line-height:1.3em;font-size:2.2em} #main-menu h1, #main-menu h1.feature-title {text-align:left;padding:0px;margin:40px 0px 20px 0px} #main-menu h1.feature-title a{font-size: 110px;} div.panel.dark {width:260px;margin:0px 5px 0px 10px} .terraterre { background:url(images/terraterre_sm.png); width:125px; height:206px; margin-top:-40px; margin-bottom:10px; } .terraterre:hover{ opacity:1; } } @media only screen and (max-width: 767px) { .button { display: block;padding:13px 30px; } .button.hide-on-phones {display:none;} .panel.dark.faded {text-align:center;width:auto;padding:10px 0px;} div.panel.dark p{padding:0px 0px 0px 0px;font-size:1em;text-align:center;margin:0px auto;} .terraterre-mini {margin:0px auto;display:none;} button.button { width: 100%; padding-left: 0; padding-right: 0; } .floatright {float:none;} /* Navs */ #main-menu ul {margin:0px 0px 70px 0px;padding:0px 0px 0px 0px;line-height:1em; font-family: 'DINMediumRegular'} #main-menu ul li {text-align:center;float:none;margin:0px auto;padding:10px 0px;line-height:1.2em;font-size:1.6em;max-width:380px;} #main-menu h1, #main-menu h1.feature-title {text-align:center;padding:0px;margin:40px 0px 20px 0px} #main-menu h1.feature-title a{font-size: 110px;} #second-menu ul {width: 400px;float:none;margin: auto;border-top:1px solid #ccc;font-family: 'DINMediumRegular';text-align:center;} #second-menu ul li{float:left;padding:10px 20px 10px 20px;display:inline;margin:0px;font-size:20px;text-align:center;} #second-menu ul li a{opacity:1;color: #fdb828;font-size:15px} ul.menu-types {text-align:center;} h3.section {float:none;font-size:1em} #products h2, #service h2, #esimate h2{font-size:2.5em;padding:0px 0px 10px 1px;;} a.up {margin-top:-70px} #util-container .top-nav-container {text-align:center; width:100%; margin:0 auto;} #util-container{padding:0;width:100%;text-align:center;margin:-15px 0px 10px;background:rgba(48,79,18,0.7);padding:12px 0px 10px 0px;} #util-container ul.top-nav li{display:inline;float:none;margin:0 10px;} #util-container ul.top-nav li a{padding:10px 4px;margin:10px 0px 0px 0px;background:none;} #util-container ul.top-nav li {display:inline;float:none;margin:0 10px;} #main-menu ul.teaser {display:none;} div.panel.dark {width:auto;margin:20px 5px 0px 0px} #logo {margin: 0px 10px 10px 0px;} #features-container .box {margin:20px 0px;} .content-top{background:transparent url(x-gradient.png) bottom repeat-x;padding: 15px 0px;height:90%;} .terraterre { margin:0px auto; background:url(images/terraterre_sm.png); width:125px; height:206px; margin-top:10px; margin-bottom:10px; } .terraterre:hover{ opacity:1; } .contact li { width: auto; float:none; display:block; } .contact li:nth-child(3) { float:none; margin:0px; padding:0px; width: auto; display:block; } .contact li.full { float:none; margin:0px; padding:0px; width: 98%; display:block; } #products p, #service p { font-size: 1em; } } @media only screen and (max-width: 600px) and (min-width: 200px) { #main-menu h1 {font-size:80px;margin-bottom:20px } #main-menu h1.feature-title a{font-size:80px;margin-bottom:20px } #second-menu ul {width: auto;margin-top:-60px;} #second-menu ul li{float:none;font-size:20px;text-align:center;clear:both;display:block;font-family: 'DINLightRegular'} #second-menu ul li a{padding:0px;margin:0px;opacity:1;color: #fdb828;font-size:30px;line-height:1.4em} #second-menu ul li:after{clear:both} #util-container ul.top-nav {padding:0;width:100%;text-align:center;margin:0px;} #util-container ul.top-nav li{display:inline;float:none;margin:0 3px;font-size:13px;} #util-container ul.top-nav li.reserve{display:none;} #util-container ul.top-nav li.locations-hide{display:none;} } @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) { #util-container ul.top-nav li a{font-size:1.3em;} .button { display: block;padding:13px 30px; } .terraterre-mini { display:none; } .contact li { width: auto; float:none; display:block; } .contact li:nth-child(3) { float:none; margin:0px; padding:0px; width: auto; display:block; } .contact li.full { float:none; margin:0px; padding:0px; width: 98%; display:block; } #products p, #service p { font-size: 1.5em; } .content-top{background:transparent url(x-gradient.png) bottom repeat-x;padding: 15px 0px;height:85%;margin-bottom:-80px;} } /* Tabs */ @media only screen and (max-width: 767px) { dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; } dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; } dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; } .nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; } .nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; } .nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .nice.tabs.mobile dd:first-child a.active { margin: 0; } dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0; } dl.contained.tabs.mobile dd a { padding: 18px 20px; } dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; } } /* Nav Bar */ @media only screen and (max-width: 767px) { .nav-bar { height: auto; } .nav-bar li { float: none; display: block; } .nav-bar li a { text-align: left; border-top: 1px solid #ddd; border-right: none; } .nav-bar li:first-child a { border-top: none; } .nav-bar li.has-flyout a:after { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; } .nav-bar li:hover a { font-weight: bold; } .nav-bar li:hover ul { position: relative; } .flyout { position: relative; width: auto; top: auto; margin-right: -2px; border-width: 1px 1px 0px 1px; } .flyout.small, .flyout.large { width: auto; } .flyout p:last-child { margin-bottom: 18px; } }