/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}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:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}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}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body{height:100%}body{font-family:franklin-gothic-urw,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:100%;font-weight:400;font-style:normal;padding:0;margin:0;line-height:1;position:relative;cursor:default;background:#e0ddda;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html:lang(ja) body{font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Roboto,Droid Sans,"游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif}a:hover{cursor:pointer}img{max-width:100%;height:auto;-ms-interpolation-mode:bicubic;display:inline-block;vertical-align:middle}.gm-style img{max-width:none}.left{float:left!important}.right{float:right!important}.hide,.ab-testing-hide{display:none}.show{display:inherit}.list-left{zoom:1}.list-left:before,.list-left:after{content:" ";display:table}.list-left:after{clear:both}.list-left>li{float:left;margin-right:1rem}.line-height{line-height:1.2em}.line-height-large{line-height:1.5em}.cf,.clearfix{zoom:1}.cf:before,.cf:after,.clearfix:before,.clearfix:after{content:" ";display:table}.cf:after,.clearfix:after{clear:both}.no-wrap{white-space:nowrap}pre{overflow:visible}ul,li{margin:0;padding:0;list-style:none}input{color:#000}textarea{height:auto;min-height:50px}select{width:100%}label{-webkit-touch-callout:none;user-select:none}.master-container{background:#f7f7f7}.master-container.hide-footer{padding-bottom:0!important}.master-container.hide-footer .footer-container{display:none}.max-width-wrapper{max-width:64rem;position:relative}@media only screen and (min-width:83.813rem)and (max-width:100rem){.max-width-wrapper{max-width:calc(100% - 19.75rem)}}@media only screen and (min-width:100rem){.max-width-wrapper{max-width:80rem}}@media only screen and (min-width:64.063em){.master-container{min-height:100%;position:relative}.master-container.footer-fix{padding-bottom:17.5rem}.master-container.with-tiny-footer{padding-bottom:8rem}.master-container.no-footer{padding-bottom:0}}@media only screen and (min-width:90.063em){.master-container{max-width:100rem;margin:0 auto}}.row{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:80rem;zoom:1}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row.collapse>.column,.row.collapse>.columns{padding-left:0;padding-right:0}.row.collapse .row{margin-left:0;margin-right:0}.row .row{width:auto;margin-left:-1rem;margin-right:-1rem;margin-top:0;margin-bottom:0;max-width:none;zoom:1}.row .row:before,.row .row:after{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{width:auto;margin:0;max-width:none;zoom:1}.row .row.collapse:before,.row .row.collapse:after{content:" ";display:table}.row .row.collapse:after{clear:both}.column,.columns{padding-left:1rem;padding-right:1rem;width:100%;float:left}@media only screen{.column.small-centered,.columns.small-centered{margin-left:auto;margin-right:auto;float:none!important}.column.small-uncentered,.columns.small-uncentered{margin-left:0;margin-right:0;float:left!important}.column.small-uncentered.opposite,.columns.small-uncentered.opposite{float:right}.small-push-0{position:relative;left:0;right:auto}.small-pull-0{position:relative;right:0;left:auto}.small-push-1{position:relative;left:8.33333%;right:auto}.small-pull-1{position:relative;right:8.33333%;left:auto}.small-push-2{position:relative;left:16.66667%;right:auto}.small-pull-2{position:relative;right:16.66667%;left:auto}.small-push-3{position:relative;left:25%;right:auto}.small-pull-3{position:relative;right:25%;left:auto}.small-push-4{position:relative;left:33.33333%;right:auto}.small-pull-4{position:relative;right:33.33333%;left:auto}.small-push-5{position:relative;left:41.66667%;right:auto}.small-pull-5{position:relative;right:41.66667%;left:auto}.small-push-6{position:relative;left:50%;right:auto}.small-pull-6{position:relative;right:50%;left:auto}.small-push-7{position:relative;left:58.33333%;right:auto}.small-pull-7{position:relative;right:58.33333%;left:auto}.small-push-8{position:relative;left:66.66667%;right:auto}.small-pull-8{position:relative;right:66.66667%;left:auto}.small-push-9{position:relative;left:75%;right:auto}.small-pull-9{position:relative;right:75%;left:auto}.small-push-10{position:relative;left:83.33333%;right:auto}.small-pull-10{position:relative;right:83.33333%;left:auto}.small-push-11{position:relative;left:91.66667%;right:auto}.small-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:1rem;padding-right:1rem;float:left}.small-1{width:8.33333%}.small-2{width:16.66667%}.small-3{width:25%}.small-4{width:33.33333%}.small-5{width:41.66667%}.small-6{width:50%}.small-7{width:58.33333%}.small-8{width:66.66667%}.small-9{width:75%}.small-10{width:83.33333%}.small-11{width:91.66667%}.small-12{width:100%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.small-offset-0{margin-left:0!important}.small-offset-1{margin-left:8.33333%!important}.small-offset-2{margin-left:16.66667%!important}.small-offset-3{margin-left:25%!important}.small-offset-4{margin-left:33.33333%!important}.small-offset-5{margin-left:41.66667%!important}.small-offset-6{margin-left:50%!important}.small-offset-7{margin-left:58.33333%!important}.small-offset-8{margin-left:66.66667%!important}.small-offset-9{margin-left:75%!important}.small-offset-10{margin-left:83.33333%!important}.small-offset-11{margin-left:91.66667%!important}.small-reset-order{margin-left:0;margin-right:0;left:auto;right:auto;float:left}}@media only screen and (min-width:40.063em){.column.medium-centered,.columns.medium-centered{margin-left:auto;margin-right:auto;float:none!important}.column.medium-uncentered,.columns.medium-uncentered{margin-left:0;margin-right:0;float:left!important}.column.medium-uncentered.opposite,.columns.medium-uncentered.opposite{float:right}.medium-push-0{position:relative;left:0;right:auto}.medium-pull-0{position:relative;right:0;left:auto}.medium-push-1{position:relative;left:8.33333%;right:auto}.medium-pull-1{position:relative;right:8.33333%;left:auto}.medium-push-2{position:relative;left:16.66667%;right:auto}.medium-pull-2{position:relative;right:16.66667%;left:auto}.medium-push-3{position:relative;left:25%;right:auto}.medium-pull-3{position:relative;right:25%;left:auto}.medium-push-4{position:relative;left:33.33333%;right:auto}.medium-pull-4{position:relative;right:33.33333%;left:auto}.medium-push-5{position:relative;left:41.66667%;right:auto}.medium-pull-5{position:relative;right:41.66667%;left:auto}.medium-push-6{position:relative;left:50%;right:auto}.medium-pull-6{position:relative;right:50%;left:auto}.medium-push-7{position:relative;left:58.33333%;right:auto}.medium-pull-7{position:relative;right:58.33333%;left:auto}.medium-push-8{position:relative;left:66.66667%;right:auto}.medium-pull-8{position:relative;right:66.66667%;left:auto}.medium-push-9{position:relative;left:75%;right:auto}.medium-pull-9{position:relative;right:75%;left:auto}.medium-push-10{position:relative;left:83.33333%;right:auto}.medium-pull-10{position:relative;right:83.33333%;left:auto}.medium-push-11{position:relative;left:91.66667%;right:auto}.medium-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:1rem;padding-right:1rem;float:left}.medium-1{width:8.33333%}.medium-2{width:16.66667%}.medium-3{width:25%}.medium-4{width:33.33333%}.medium-5{width:41.66667%}.medium-6{width:50%}.medium-7{width:58.33333%}.medium-8{width:66.66667%}.medium-9{width:75%}.medium-10{width:83.33333%}.medium-11{width:91.66667%}.medium-12{width:100%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.medium-offset-0{margin-left:0!important}.medium-offset-1{margin-left:8.33333%!important}.medium-offset-2{margin-left:16.66667%!important}.medium-offset-3{margin-left:25%!important}.medium-offset-4{margin-left:33.33333%!important}.medium-offset-5{margin-left:41.66667%!important}.medium-offset-6{margin-left:50%!important}.medium-offset-7{margin-left:58.33333%!important}.medium-offset-8{margin-left:66.66667%!important}.medium-offset-9{margin-left:75%!important}.medium-offset-10{margin-left:83.33333%!important}.medium-offset-11{margin-left:91.66667%!important}.medium-reset-order{margin-left:0;margin-right:0;left:auto;right:auto;float:left}.push-0{position:relative;left:0;right:auto}.pull-0{position:relative;right:0;left:auto}.push-1{position:relative;left:8.33333%;right:auto}.pull-1{position:relative;right:8.33333%;left:auto}.push-2{position:relative;left:16.66667%;right:auto}.pull-2{position:relative;right:16.66667%;left:auto}.push-3{position:relative;left:25%;right:auto}.pull-3{position:relative;right:25%;left:auto}.push-4{position:relative;left:33.33333%;right:auto}.pull-4{position:relative;right:33.33333%;left:auto}.push-5{position:relative;left:41.66667%;right:auto}.pull-5{position:relative;right:41.66667%;left:auto}.push-6{position:relative;left:50%;right:auto}.pull-6{position:relative;right:50%;left:auto}.push-7{position:relative;left:58.33333%;right:auto}.pull-7{position:relative;right:58.33333%;left:auto}.push-8{position:relative;left:66.66667%;right:auto}.pull-8{position:relative;right:66.66667%;left:auto}.push-9{position:relative;left:75%;right:auto}.pull-9{position:relative;right:75%;left:auto}.push-10{position:relative;left:83.33333%;right:auto}.pull-10{position:relative;right:83.33333%;left:auto}.push-11{position:relative;left:91.66667%;right:auto}.pull-11{position:relative;right:91.66667%;left:auto}}@media only screen and (min-width:64.063em){.column.large-centered,.columns.large-centered{margin-left:auto;margin-right:auto;float:none!important}.column.large-uncentered,.columns.large-uncentered{margin-left:0;margin-right:0;float:left!important}.column.large-uncentered.opposite,.columns.large-uncentered.opposite{float:right}.large-push-0{position:relative;left:0;right:auto}.large-pull-0{position:relative;right:0;left:auto}.large-push-1{position:relative;left:8.33333%;right:auto}.large-pull-1{position:relative;right:8.33333%;left:auto}.large-push-2{position:relative;left:16.66667%;right:auto}.large-pull-2{position:relative;right:16.66667%;left:auto}.large-push-3{position:relative;left:25%;right:auto}.large-pull-3{position:relative;right:25%;left:auto}.large-push-4{position:relative;left:33.33333%;right:auto}.large-pull-4{position:relative;right:33.33333%;left:auto}.large-push-5{position:relative;left:41.66667%;right:auto}.large-pull-5{position:relative;right:41.66667%;left:auto}.large-push-6{position:relative;left:50%;right:auto}.large-pull-6{position:relative;right:50%;left:auto}.large-push-7{position:relative;left:58.33333%;right:auto}.large-pull-7{position:relative;right:58.33333%;left:auto}.large-push-8{position:relative;left:66.66667%;right:auto}.large-pull-8{position:relative;right:66.66667%;left:auto}.large-push-9{position:relative;left:75%;right:auto}.large-pull-9{position:relative;right:75%;left:auto}.large-push-10{position:relative;left:83.33333%;right:auto}.large-pull-10{position:relative;right:83.33333%;left:auto}.large-push-11{position:relative;left:91.66667%;right:auto}.large-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:1rem;padding-right:1rem;float:left}.large-1{width:8.33333%}.large-2{width:16.66667%}.large-3{width:25%}.large-4{width:33.33333%}.large-5{width:41.66667%}.large-6{width:50%}.large-7{width:58.33333%}.large-8{width:66.66667%}.large-9{width:75%}.large-10{width:83.33333%}.large-11{width:91.66667%}.large-12{width:100%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.large-offset-0{margin-left:0!important}.large-offset-1{margin-left:8.33333%!important}.large-offset-2{margin-left:16.66667%!important}.large-offset-3{margin-left:25%!important}.large-offset-4{margin-left:33.33333%!important}.large-offset-5{margin-left:41.66667%!important}.large-offset-6{margin-left:50%!important}.large-offset-7{margin-left:58.33333%!important}.large-offset-8{margin-left:66.66667%!important}.large-offset-9{margin-left:75%!important}.large-offset-10{margin-left:83.33333%!important}.large-offset-11{margin-left:91.66667%!important}.large-reset-order{margin-left:0;margin-right:0;left:auto;right:auto;float:left}.push-0{position:relative;left:0;right:auto}.pull-0{position:relative;right:0;left:auto}.push-1{position:relative;left:8.33333%;right:auto}.pull-1{position:relative;right:8.33333%;left:auto}.push-2{position:relative;left:16.66667%;right:auto}.pull-2{position:relative;right:16.66667%;left:auto}.push-3{position:relative;left:25%;right:auto}.pull-3{position:relative;right:25%;left:auto}.push-4{position:relative;left:33.33333%;right:auto}.pull-4{position:relative;right:33.33333%;left:auto}.push-5{position:relative;left:41.66667%;right:auto}.pull-5{position:relative;right:41.66667%;left:auto}.push-6{position:relative;left:50%;right:auto}.pull-6{position:relative;right:50%;left:auto}.push-7{position:relative;left:58.33333%;right:auto}.pull-7{position:relative;right:58.33333%;left:auto}.push-8{position:relative;left:66.66667%;right:auto}.pull-8{position:relative;right:66.66667%;left:auto}.push-9{position:relative;left:75%;right:auto}.pull-9{position:relative;right:75%;left:auto}.push-10{position:relative;left:83.33333%;right:auto}.pull-10{position:relative;right:83.33333%;left:auto}.push-11{position:relative;left:91.66667%;right:auto}.pull-11{position:relative;right:91.66667%;left:auto}}@media only screen and (min-width:90.063em){.column.xlarge-centered,.columns.xlarge-centered{margin-left:auto;margin-right:auto;float:none!important}.column.xlarge-uncentered,.columns.xlarge-uncentered{margin-left:0;margin-right:0;float:left!important}.column.xlarge-uncentered.opposite,.columns.xlarge-uncentered.opposite{float:right}.xlarge-push-0{position:relative;left:0;right:auto}.xlarge-pull-0{position:relative;right:0;left:auto}.xlarge-push-1{position:relative;left:8.33333%;right:auto}.xlarge-pull-1{position:relative;right:8.33333%;left:auto}.xlarge-push-2{position:relative;left:16.66667%;right:auto}.xlarge-pull-2{position:relative;right:16.66667%;left:auto}.xlarge-push-3{position:relative;left:25%;right:auto}.xlarge-pull-3{position:relative;right:25%;left:auto}.xlarge-push-4{position:relative;left:33.33333%;right:auto}.xlarge-pull-4{position:relative;right:33.33333%;left:auto}.xlarge-push-5{position:relative;left:41.66667%;right:auto}.xlarge-pull-5{position:relative;right:41.66667%;left:auto}.xlarge-push-6{position:relative;left:50%;right:auto}.xlarge-pull-6{position:relative;right:50%;left:auto}.xlarge-push-7{position:relative;left:58.33333%;right:auto}.xlarge-pull-7{position:relative;right:58.33333%;left:auto}.xlarge-push-8{position:relative;left:66.66667%;right:auto}.xlarge-pull-8{position:relative;right:66.66667%;left:auto}.xlarge-push-9{position:relative;left:75%;right:auto}.xlarge-pull-9{position:relative;right:75%;left:auto}.xlarge-push-10{position:relative;left:83.33333%;right:auto}.xlarge-pull-10{position:relative;right:83.33333%;left:auto}.xlarge-push-11{position:relative;left:91.66667%;right:auto}.xlarge-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:1rem;padding-right:1rem;float:left}.xlarge-1{width:8.33333%}.xlarge-2{width:16.66667%}.xlarge-3{width:25%}.xlarge-4{width:33.33333%}.xlarge-5{width:41.66667%}.xlarge-6{width:50%}.xlarge-7{width:58.33333%}.xlarge-8{width:66.66667%}.xlarge-9{width:75%}.xlarge-10{width:83.33333%}.xlarge-11{width:91.66667%}.xlarge-12{width:100%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.xlarge-offset-0{margin-left:0!important}.xlarge-offset-1{margin-left:8.33333%!important}.xlarge-offset-2{margin-left:16.66667%!important}.xlarge-offset-3{margin-left:25%!important}.xlarge-offset-4{margin-left:33.33333%!important}.xlarge-offset-5{margin-left:41.66667%!important}.xlarge-offset-6{margin-left:50%!important}.xlarge-offset-7{margin-left:58.33333%!important}.xlarge-offset-8{margin-left:66.66667%!important}.xlarge-offset-9{margin-left:75%!important}.xlarge-offset-10{margin-left:83.33333%!important}.xlarge-offset-11{margin-left:91.66667%!important}.xlarge-reset-order{margin-left:0;margin-right:0;left:auto;right:auto;float:left}}@media only screen and (min-width:120.063em){.column.xxlarge-centered,.columns.xxlarge-centered{margin-left:auto;margin-right:auto;float:none!important}.column.xxlarge-uncentered,.columns.xxlarge-uncentered{margin-left:0;margin-right:0;float:left!important}.column.xxlarge-uncentered.opposite,.columns.xxlarge-uncentered.opposite{float:right}.xxlarge-push-0{position:relative;left:0;right:auto}.xxlarge-pull-0{position:relative;right:0;left:auto}.xxlarge-push-1{position:relative;left:8.33333%;right:auto}.xxlarge-pull-1{position:relative;right:8.33333%;left:auto}.xxlarge-push-2{position:relative;left:16.66667%;right:auto}.xxlarge-pull-2{position:relative;right:16.66667%;left:auto}.xxlarge-push-3{position:relative;left:25%;right:auto}.xxlarge-pull-3{position:relative;right:25%;left:auto}.xxlarge-push-4{position:relative;left:33.33333%;right:auto}.xxlarge-pull-4{position:relative;right:33.33333%;left:auto}.xxlarge-push-5{position:relative;left:41.66667%;right:auto}.xxlarge-pull-5{position:relative;right:41.66667%;left:auto}.xxlarge-push-6{position:relative;left:50%;right:auto}.xxlarge-pull-6{position:relative;right:50%;left:auto}.xxlarge-push-7{position:relative;left:58.33333%;right:auto}.xxlarge-pull-7{position:relative;right:58.33333%;left:auto}.xxlarge-push-8{position:relative;left:66.66667%;right:auto}.xxlarge-pull-8{position:relative;right:66.66667%;left:auto}.xxlarge-push-9{position:relative;left:75%;right:auto}.xxlarge-pull-9{position:relative;right:75%;left:auto}.xxlarge-push-10{position:relative;left:83.33333%;right:auto}.xxlarge-pull-10{position:relative;right:83.33333%;left:auto}.xxlarge-push-11{position:relative;left:91.66667%;right:auto}.xxlarge-pull-11{position:relative;right:91.66667%;left:auto}.column,.columns{position:relative;padding-left:1rem;padding-right:1rem;float:left}.xxlarge-1{width:8.33333%}.xxlarge-2{width:16.66667%}.xxlarge-3{width:25%}.xxlarge-4{width:33.33333%}.xxlarge-5{width:41.66667%}.xxlarge-6{width:50%}.xxlarge-7{width:58.33333%}.xxlarge-8{width:66.66667%}.xxlarge-9{width:75%}.xxlarge-10{width:83.33333%}.xxlarge-11{width:91.66667%}.xxlarge-12{width:100%}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.xxlarge-offset-0{margin-left:0!important}.xxlarge-offset-1{margin-left:8.33333%!important}.xxlarge-offset-2{margin-left:16.66667%!important}.xxlarge-offset-3{margin-left:25%!important}.xxlarge-offset-4{margin-left:33.33333%!important}.xxlarge-offset-5{margin-left:41.66667%!important}.xxlarge-offset-6{margin-left:50%!important}.xxlarge-offset-7{margin-left:58.33333%!important}.xxlarge-offset-8{margin-left:66.66667%!important}.xxlarge-offset-9{margin-left:75%!important}.xxlarge-offset-10{margin-left:83.33333%!important}.xxlarge-offset-11{margin-left:91.66667%!important}.xxlarge-reset-order{margin-left:0;margin-right:0;left:auto;right:auto;float:left}}[class*=block-grid-]{display:block;padding:0;margin:0;zoom:1}[class*=block-grid-]:before,[class*=block-grid-]:after{content:" ";display:table}[class*=block-grid-]:after{clear:both}[class*=block-grid-]>li{display:block;height:auto;float:left;padding:0 .625rem 1.25rem}@media only screen{.small-block-grid-1>li{width:100%;list-style:none}.small-block-grid-1>li:nth-of-type(n){clear:none}.small-block-grid-1>li:nth-of-type(1n+1){clear:both}.small-block-grid-1>li:nth-child(1n){padding-left:0;padding-right:0}.small-block-grid-2>li{width:50%;list-style:none}.small-block-grid-2>li:nth-of-type(n){clear:none}.small-block-grid-2>li:nth-of-type(2n+1){clear:both}.small-block-grid-2>li:nth-child(2n+1){padding-left:0;padding-right:.625rem}.small-block-grid-2>li:nth-child(2n){padding-left:.625rem;padding-right:0}.small-block-grid-3>li{width:33.33333%;list-style:none}.small-block-grid-3>li:nth-of-type(n){clear:none}.small-block-grid-3>li:nth-of-type(3n+1){clear:both}.small-block-grid-3>li:nth-child(3n+1){padding-left:0;padding-right:.83333rem}.small-block-grid-3>li:nth-child(3n+2){padding-left:.41667rem;padding-right:.41667rem}.small-block-grid-3>li:nth-child(3n){padding-left:.83333rem;padding-right:0}.small-block-grid-4>li{width:25%;list-style:none}.small-block-grid-4>li:nth-of-type(n){clear:none}.small-block-grid-4>li:nth-of-type(4n+1){clear:both}.small-block-grid-4>li:nth-child(4n+1){padding-left:0;padding-right:.9375rem}.small-block-grid-4>li:nth-child(4n+2){padding-left:.3125rem;padding-right:.625rem}.small-block-grid-4>li:nth-child(4n+3){padding-left:.625rem;padding-right:.3125rem}.small-block-grid-4>li:nth-child(4n){padding-left:.9375rem;padding-right:0}.small-block-grid-5>li{width:20%;list-style:none}.small-block-grid-5>li:nth-of-type(n){clear:none}.small-block-grid-5>li:nth-of-type(5n+1){clear:both}.small-block-grid-5>li:nth-child(5n+1){padding-left:0;padding-right:1rem}.small-block-grid-5>li:nth-child(5n+2){padding-left:.25rem;padding-right:.75rem}.small-block-grid-5>li:nth-child(5n+3){padding-left:.5rem;padding-right:.5rem}.small-block-grid-5>li:nth-child(5n+4){padding-left:.75rem;padding-right:.25rem}.small-block-grid-5>li:nth-child(5n){padding-left:1rem;padding-right:0}.small-block-grid-6>li{width:16.66667%;list-style:none}.small-block-grid-6>li:nth-of-type(n){clear:none}.small-block-grid-6>li:nth-of-type(6n+1){clear:both}.small-block-grid-6>li:nth-child(6n+1){padding-left:0;padding-right:1.04167rem}.small-block-grid-6>li:nth-child(6n+2){padding-left:.20833rem;padding-right:.83333rem}.small-block-grid-6>li:nth-child(6n+3){padding-left:.41667rem;padding-right:.625rem}.small-block-grid-6>li:nth-child(6n+4){padding-left:.625rem;padding-right:.41667rem}.small-block-grid-6>li:nth-child(6n+5){padding-left:.83333rem;padding-right:.20833rem}.small-block-grid-6>li:nth-child(6n){padding-left:1.04167rem;padding-right:0}.small-block-grid-7>li{width:14.28571%;list-style:none}.small-block-grid-7>li:nth-of-type(n){clear:none}.small-block-grid-7>li:nth-of-type(7n+1){clear:both}.small-block-grid-7>li:nth-child(7n+1){padding-left:0;padding-right:1.07143rem}.small-block-grid-7>li:nth-child(7n+2){padding-left:.17857rem;padding-right:.89286rem}.small-block-grid-7>li:nth-child(7n+3){padding-left:.35714rem;padding-right:.71429rem}.small-block-grid-7>li:nth-child(7n+4){padding-left:.53571rem;padding-right:.53571rem}.small-block-grid-7>li:nth-child(7n+5){padding-left:.71429rem;padding-right:.35714rem}.small-block-grid-7>li:nth-child(7n+6){padding-left:.89286rem;padding-right:.17857rem}.small-block-grid-7>li:nth-child(7n){padding-left:1.07143rem;padding-right:0}.small-block-grid-8>li{width:12.5%;list-style:none}.small-block-grid-8>li:nth-of-type(n){clear:none}.small-block-grid-8>li:nth-of-type(8n+1){clear:both}.small-block-grid-8>li:nth-child(8n+1){padding-left:0;padding-right:1.09375rem}.small-block-grid-8>li:nth-child(8n+2){padding-left:.15625rem;padding-right:.9375rem}.small-block-grid-8>li:nth-child(8n+3){padding-left:.3125rem;padding-right:.78125rem}.small-block-grid-8>li:nth-child(8n+4){padding-left:.46875rem;padding-right:.625rem}.small-block-grid-8>li:nth-child(8n+5){padding-left:.625rem;padding-right:.46875rem}.small-block-grid-8>li:nth-child(8n+6){padding-left:.78125rem;padding-right:.3125rem}.small-block-grid-8>li:nth-child(8n+7){padding-left:.9375rem;padding-right:.15625rem}.small-block-grid-8>li:nth-child(8n){padding-left:1.09375rem;padding-right:0}.small-block-grid-9>li{width:11.11111%;list-style:none}.small-block-grid-9>li:nth-of-type(n){clear:none}.small-block-grid-9>li:nth-of-type(9n+1){clear:both}.small-block-grid-9>li:nth-child(9n+1){padding-left:0;padding-right:1.11111rem}.small-block-grid-9>li:nth-child(9n+2){padding-left:.13889rem;padding-right:.97222rem}.small-block-grid-9>li:nth-child(9n+3){padding-left:.27778rem;padding-right:.83333rem}.small-block-grid-9>li:nth-child(9n+4){padding-left:.41667rem;padding-right:.69444rem}.small-block-grid-9>li:nth-child(9n+5){padding-left:.55556rem;padding-right:.55556rem}.small-block-grid-9>li:nth-child(9n+6){padding-left:.69444rem;padding-right:.41667rem}.small-block-grid-9>li:nth-child(9n+7){padding-left:.83333rem;padding-right:.27778rem}.small-block-grid-9>li:nth-child(9n+8){padding-left:.97222rem;padding-right:.13889rem}.small-block-grid-9>li:nth-child(9n){padding-left:1.11111rem;padding-right:0}.small-block-grid-10>li{width:10%;list-style:none}.small-block-grid-10>li:nth-of-type(n){clear:none}.small-block-grid-10>li:nth-of-type(10n+1){clear:both}.small-block-grid-10>li:nth-child(10n+1){padding-left:0;padding-right:1.125rem}.small-block-grid-10>li:nth-child(10n+2){padding-left:.125rem;padding-right:1rem}.small-block-grid-10>li:nth-child(10n+3){padding-left:.25rem;padding-right:.875rem}.small-block-grid-10>li:nth-child(10n+4){padding-left:.375rem;padding-right:.75rem}.small-block-grid-10>li:nth-child(10n+5){padding-left:.5rem;padding-right:.625rem}.small-block-grid-10>li:nth-child(10n+6){padding-left:.625rem;padding-right:.5rem}.small-block-grid-10>li:nth-child(10n+7){padding-left:.75rem;padding-right:.375rem}.small-block-grid-10>li:nth-child(10n+8){padding-left:.875rem;padding-right:.25rem}.small-block-grid-10>li:nth-child(10n+9){padding-left:1rem;padding-right:.125rem}.small-block-grid-10>li:nth-child(10n){padding-left:1.125rem;padding-right:0}.small-block-grid-11>li{width:9.09091%;list-style:none}.small-block-grid-11>li:nth-of-type(n){clear:none}.small-block-grid-11>li:nth-of-type(11n+1){clear:both}.small-block-grid-11>li:nth-child(11n+1){padding-left:0;padding-right:1.13636rem}.small-block-grid-11>li:nth-child(11n+2){padding-left:.11364rem;padding-right:1.02273rem}.small-block-grid-11>li:nth-child(11n+3){padding-left:.22727rem;padding-right:.90909rem}.small-block-grid-11>li:nth-child(11n+4){padding-left:.34091rem;padding-right:.79545rem}.small-block-grid-11>li:nth-child(11n+5){padding-left:.45455rem;padding-right:.68182rem}.small-block-grid-11>li:nth-child(11n+6){padding-left:.56818rem;padding-right:.56818rem}.small-block-grid-11>li:nth-child(11n+7){padding-left:.68182rem;padding-right:.45455rem}.small-block-grid-11>li:nth-child(11n+8){padding-left:.79545rem;padding-right:.34091rem}.small-block-grid-11>li:nth-child(11n+9){padding-left:.90909rem;padding-right:.22727rem}.small-block-grid-11>li:nth-child(11n+10){padding-left:1.02273rem;padding-right:.11364rem}.small-block-grid-11>li:nth-child(11n){padding-left:1.13636rem;padding-right:0}.small-block-grid-12>li{width:8.33333%;list-style:none}.small-block-grid-12>li:nth-of-type(n){clear:none}.small-block-grid-12>li:nth-of-type(12n+1){clear:both}.small-block-grid-12>li:nth-child(12n+1){padding-left:0;padding-right:1.14583rem}.small-block-grid-12>li:nth-child(12n+2){padding-left:.10417rem;padding-right:1.04167rem}.small-block-grid-12>li:nth-child(12n+3){padding-left:.20833rem;padding-right:.9375rem}.small-block-grid-12>li:nth-child(12n+4){padding-left:.3125rem;padding-right:.83333rem}.small-block-grid-12>li:nth-child(12n+5){padding-left:.41667rem;padding-right:.72917rem}.small-block-grid-12>li:nth-child(12n+6){padding-left:.52083rem;padding-right:.625rem}.small-block-grid-12>li:nth-child(12n+7){padding-left:.625rem;padding-right:.52083rem}.small-block-grid-12>li:nth-child(12n+8){padding-left:.72917rem;padding-right:.41667rem}.small-block-grid-12>li:nth-child(12n+9){padding-left:.83333rem;padding-right:.3125rem}.small-block-grid-12>li:nth-child(12n+10){padding-left:.9375rem;padding-right:.20833rem}.small-block-grid-12>li:nth-child(12n+11){padding-left:1.04167rem;padding-right:.10417rem}.small-block-grid-12>li:nth-child(12n){padding-left:1.14583rem;padding-right:0}}@media only screen and (min-width:40.063em){.medium-block-grid-1>li{width:100%;list-style:none}.medium-block-grid-1>li:nth-of-type(n){clear:none}.medium-block-grid-1>li:nth-of-type(1n+1){clear:both}.medium-block-grid-1>li:nth-child(1n){padding-left:0;padding-right:0}.medium-block-grid-2>li{width:50%;list-style:none}.medium-block-grid-2>li:nth-of-type(n){clear:none}.medium-block-grid-2>li:nth-of-type(2n+1){clear:both}.medium-block-grid-2>li:nth-child(2n+1){padding-left:0;padding-right:.625rem}.medium-block-grid-2>li:nth-child(2n){padding-left:.625rem;padding-right:0}.medium-block-grid-3>li{width:33.33333%;list-style:none}.medium-block-grid-3>li:nth-of-type(n){clear:none}.medium-block-grid-3>li:nth-of-type(3n+1){clear:both}.medium-block-grid-3>li:nth-child(3n+1){padding-left:0;padding-right:.83333rem}.medium-block-grid-3>li:nth-child(3n+2){padding-left:.41667rem;padding-right:.41667rem}.medium-block-grid-3>li:nth-child(3n){padding-left:.83333rem;padding-right:0}.medium-block-grid-4>li{width:25%;list-style:none}.medium-block-grid-4>li:nth-of-type(n){clear:none}.medium-block-grid-4>li:nth-of-type(4n+1){clear:both}.medium-block-grid-4>li:nth-child(4n+1){padding-left:0;padding-right:.9375rem}.medium-block-grid-4>li:nth-child(4n+2){padding-left:.3125rem;padding-right:.625rem}.medium-block-grid-4>li:nth-child(4n+3){padding-left:.625rem;padding-right:.3125rem}.medium-block-grid-4>li:nth-child(4n){padding-left:.9375rem;padding-right:0}.medium-block-grid-5>li{width:20%;list-style:none}.medium-block-grid-5>li:nth-of-type(n){clear:none}.medium-block-grid-5>li:nth-of-type(5n+1){clear:both}.medium-block-grid-5>li:nth-child(5n+1){padding-left:0;padding-right:1rem}.medium-block-grid-5>li:nth-child(5n+2){padding-left:.25rem;padding-right:.75rem}.medium-block-grid-5>li:nth-child(5n+3){padding-left:.5rem;padding-right:.5rem}.medium-block-grid-5>li:nth-child(5n+4){padding-left:.75rem;padding-right:.25rem}.medium-block-grid-5>li:nth-child(5n){padding-left:1rem;padding-right:0}.medium-block-grid-6>li{width:16.66667%;list-style:none}.medium-block-grid-6>li:nth-of-type(n){clear:none}.medium-block-grid-6>li:nth-of-type(6n+1){clear:both}.medium-block-grid-6>li:nth-child(6n+1){padding-left:0;padding-right:1.04167rem}.medium-block-grid-6>li:nth-child(6n+2){padding-left:.20833rem;padding-right:.83333rem}.medium-block-grid-6>li:nth-child(6n+3){padding-left:.41667rem;padding-right:.625rem}.medium-block-grid-6>li:nth-child(6n+4){padding-left:.625rem;padding-right:.41667rem}.medium-block-grid-6>li:nth-child(6n+5){padding-left:.83333rem;padding-right:.20833rem}.medium-block-grid-6>li:nth-child(6n){padding-left:1.04167rem;padding-right:0}.medium-block-grid-7>li{width:14.28571%;list-style:none}.medium-block-grid-7>li:nth-of-type(n){clear:none}.medium-block-grid-7>li:nth-of-type(7n+1){clear:both}.medium-block-grid-7>li:nth-child(7n+1){padding-left:0;padding-right:1.07143rem}.medium-block-grid-7>li:nth-child(7n+2){padding-left:.17857rem;padding-right:.89286rem}.medium-block-grid-7>li:nth-child(7n+3){padding-left:.35714rem;padding-right:.71429rem}.medium-block-grid-7>li:nth-child(7n+4){padding-left:.53571rem;padding-right:.53571rem}.medium-block-grid-7>li:nth-child(7n+5){padding-left:.71429rem;padding-right:.35714rem}.medium-block-grid-7>li:nth-child(7n+6){padding-left:.89286rem;padding-right:.17857rem}.medium-block-grid-7>li:nth-child(7n){padding-left:1.07143rem;padding-right:0}.medium-block-grid-8>li{width:12.5%;list-style:none}.medium-block-grid-8>li:nth-of-type(n){clear:none}.medium-block-grid-8>li:nth-of-type(8n+1){clear:both}.medium-block-grid-8>li:nth-child(8n+1){padding-left:0;padding-right:1.09375rem}.medium-block-grid-8>li:nth-child(8n+2){padding-left:.15625rem;padding-right:.9375rem}.medium-block-grid-8>li:nth-child(8n+3){padding-left:.3125rem;padding-right:.78125rem}.medium-block-grid-8>li:nth-child(8n+4){padding-left:.46875rem;padding-right:.625rem}.medium-block-grid-8>li:nth-child(8n+5){padding-left:.625rem;padding-right:.46875rem}.medium-block-grid-8>li:nth-child(8n+6){padding-left:.78125rem;padding-right:.3125rem}.medium-block-grid-8>li:nth-child(8n+7){padding-left:.9375rem;padding-right:.15625rem}.medium-block-grid-8>li:nth-child(8n){padding-left:1.09375rem;padding-right:0}.medium-block-grid-9>li{width:11.11111%;list-style:none}.medium-block-grid-9>li:nth-of-type(n){clear:none}.medium-block-grid-9>li:nth-of-type(9n+1){clear:both}.medium-block-grid-9>li:nth-child(9n+1){padding-left:0;padding-right:1.11111rem}.medium-block-grid-9>li:nth-child(9n+2){padding-left:.13889rem;padding-right:.97222rem}.medium-block-grid-9>li:nth-child(9n+3){padding-left:.27778rem;padding-right:.83333rem}.medium-block-grid-9>li:nth-child(9n+4){padding-left:.41667rem;padding-right:.69444rem}.medium-block-grid-9>li:nth-child(9n+5){padding-left:.55556rem;padding-right:.55556rem}.medium-block-grid-9>li:nth-child(9n+6){padding-left:.69444rem;padding-right:.41667rem}.medium-block-grid-9>li:nth-child(9n+7){padding-left:.83333rem;padding-right:.27778rem}.medium-block-grid-9>li:nth-child(9n+8){padding-left:.97222rem;padding-right:.13889rem}.medium-block-grid-9>li:nth-child(9n){padding-left:1.11111rem;padding-right:0}.medium-block-grid-10>li{width:10%;list-style:none}.medium-block-grid-10>li:nth-of-type(n){clear:none}.medium-block-grid-10>li:nth-of-type(10n+1){clear:both}.medium-block-grid-10>li:nth-child(10n+1){padding-left:0;padding-right:1.125rem}.medium-block-grid-10>li:nth-child(10n+2){padding-left:.125rem;padding-right:1rem}.medium-block-grid-10>li:nth-child(10n+3){padding-left:.25rem;padding-right:.875rem}.medium-block-grid-10>li:nth-child(10n+4){padding-left:.375rem;padding-right:.75rem}.medium-block-grid-10>li:nth-child(10n+5){padding-left:.5rem;padding-right:.625rem}.medium-block-grid-10>li:nth-child(10n+6){padding-left:.625rem;padding-right:.5rem}.medium-block-grid-10>li:nth-child(10n+7){padding-left:.75rem;padding-right:.375rem}.medium-block-grid-10>li:nth-child(10n+8){padding-left:.875rem;padding-right:.25rem}.medium-block-grid-10>li:nth-child(10n+9){padding-left:1rem;padding-right:.125rem}.medium-block-grid-10>li:nth-child(10n){padding-left:1.125rem;padding-right:0}.medium-block-grid-11>li{width:9.09091%;list-style:none}.medium-block-grid-11>li:nth-of-type(n){clear:none}.medium-block-grid-11>li:nth-of-type(11n+1){clear:both}.medium-block-grid-11>li:nth-child(11n+1){padding-left:0;padding-right:1.13636rem}.medium-block-grid-11>li:nth-child(11n+2){padding-left:.11364rem;padding-right:1.02273rem}.medium-block-grid-11>li:nth-child(11n+3){padding-left:.22727rem;padding-right:.90909rem}.medium-block-grid-11>li:nth-child(11n+4){padding-left:.34091rem;padding-right:.79545rem}.medium-block-grid-11>li:nth-child(11n+5){padding-left:.45455rem;padding-right:.68182rem}.medium-block-grid-11>li:nth-child(11n+6){padding-left:.56818rem;padding-right:.56818rem}.medium-block-grid-11>li:nth-child(11n+7){padding-left:.68182rem;padding-right:.45455rem}.medium-block-grid-11>li:nth-child(11n+8){padding-left:.79545rem;padding-right:.34091rem}.medium-block-grid-11>li:nth-child(11n+9){padding-left:.90909rem;padding-right:.22727rem}.medium-block-grid-11>li:nth-child(11n+10){padding-left:1.02273rem;padding-right:.11364rem}.medium-block-grid-11>li:nth-child(11n){padding-left:1.13636rem;padding-right:0}.medium-block-grid-12>li{width:8.33333%;list-style:none}.medium-block-grid-12>li:nth-of-type(n){clear:none}.medium-block-grid-12>li:nth-of-type(12n+1){clear:both}.medium-block-grid-12>li:nth-child(12n+1){padding-left:0;padding-right:1.14583rem}.medium-block-grid-12>li:nth-child(12n+2){padding-left:.10417rem;padding-right:1.04167rem}.medium-block-grid-12>li:nth-child(12n+3){padding-left:.20833rem;padding-right:.9375rem}.medium-block-grid-12>li:nth-child(12n+4){padding-left:.3125rem;padding-right:.83333rem}.medium-block-grid-12>li:nth-child(12n+5){padding-left:.41667rem;padding-right:.72917rem}.medium-block-grid-12>li:nth-child(12n+6){padding-left:.52083rem;padding-right:.625rem}.medium-block-grid-12>li:nth-child(12n+7){padding-left:.625rem;padding-right:.52083rem}.medium-block-grid-12>li:nth-child(12n+8){padding-left:.72917rem;padding-right:.41667rem}.medium-block-grid-12>li:nth-child(12n+9){padding-left:.83333rem;padding-right:.3125rem}.medium-block-grid-12>li:nth-child(12n+10){padding-left:.9375rem;padding-right:.20833rem}.medium-block-grid-12>li:nth-child(12n+11){padding-left:1.04167rem;padding-right:.10417rem}.medium-block-grid-12>li:nth-child(12n){padding-left:1.14583rem;padding-right:0}}@media only screen and (min-width:64.063em){.large-block-grid-1>li{width:100%;list-style:none}.large-block-grid-1>li:nth-of-type(n){clear:none}.large-block-grid-1>li:nth-of-type(1n+1){clear:both}.large-block-grid-1>li:nth-child(1n){padding-left:0;padding-right:0}.large-block-grid-2>li{width:50%;list-style:none}.large-block-grid-2>li:nth-of-type(n){clear:none}.large-block-grid-2>li:nth-of-type(2n+1){clear:both}.large-block-grid-2>li:nth-child(2n+1){padding-left:0;padding-right:.625rem}.large-block-grid-2>li:nth-child(2n){padding-left:.625rem;padding-right:0}.large-block-grid-3>li{width:33.33333%;list-style:none}.large-block-grid-3>li:nth-of-type(n){clear:none}.large-block-grid-3>li:nth-of-type(3n+1){clear:both}.large-block-grid-3>li:nth-child(3n+1){padding-left:0;padding-right:.83333rem}.large-block-grid-3>li:nth-child(3n+2){padding-left:.41667rem;padding-right:.41667rem}.large-block-grid-3>li:nth-child(3n){padding-left:.83333rem;padding-right:0}.large-block-grid-4>li{width:25%;list-style:none}.large-block-grid-4>li:nth-of-type(n){clear:none}.large-block-grid-4>li:nth-of-type(4n+1){clear:both}.large-block-grid-4>li:nth-child(4n+1){padding-left:0;padding-right:.9375rem}.large-block-grid-4>li:nth-child(4n+2){padding-left:.3125rem;padding-right:.625rem}.large-block-grid-4>li:nth-child(4n+3){padding-left:.625rem;padding-right:.3125rem}.large-block-grid-4>li:nth-child(4n){padding-left:.9375rem;padding-right:0}.large-block-grid-5>li{width:20%;list-style:none}.large-block-grid-5>li:nth-of-type(n){clear:none}.large-block-grid-5>li:nth-of-type(5n+1){clear:both}.large-block-grid-5>li:nth-child(5n+1){padding-left:0;padding-right:1rem}.large-block-grid-5>li:nth-child(5n+2){padding-left:.25rem;padding-right:.75rem}.large-block-grid-5>li:nth-child(5n+3){padding-left:.5rem;padding-right:.5rem}.large-block-grid-5>li:nth-child(5n+4){padding-left:.75rem;padding-right:.25rem}.large-block-grid-5>li:nth-child(5n){padding-left:1rem;padding-right:0}.large-block-grid-6>li{width:16.66667%;list-style:none}.large-block-grid-6>li:nth-of-type(n){clear:none}.large-block-grid-6>li:nth-of-type(6n+1){clear:both}.large-block-grid-6>li:nth-child(6n+1){padding-left:0;padding-right:1.04167rem}.large-block-grid-6>li:nth-child(6n+2){padding-left:.20833rem;padding-right:.83333rem}.large-block-grid-6>li:nth-child(6n+3){padding-left:.41667rem;padding-right:.625rem}.large-block-grid-6>li:nth-child(6n+4){padding-left:.625rem;padding-right:.41667rem}.large-block-grid-6>li:nth-child(6n+5){padding-left:.83333rem;padding-right:.20833rem}.large-block-grid-6>li:nth-child(6n){padding-left:1.04167rem;padding-right:0}.large-block-grid-7>li{width:14.28571%;list-style:none}.large-block-grid-7>li:nth-of-type(n){clear:none}.large-block-grid-7>li:nth-of-type(7n+1){clear:both}.large-block-grid-7>li:nth-child(7n+1){padding-left:0;padding-right:1.07143rem}.large-block-grid-7>li:nth-child(7n+2){padding-left:.17857rem;padding-right:.89286rem}.large-block-grid-7>li:nth-child(7n+3){padding-left:.35714rem;padding-right:.71429rem}.large-block-grid-7>li:nth-child(7n+4){padding-left:.53571rem;padding-right:.53571rem}.large-block-grid-7>li:nth-child(7n+5){padding-left:.71429rem;padding-right:.35714rem}.large-block-grid-7>li:nth-child(7n+6){padding-left:.89286rem;padding-right:.17857rem}.large-block-grid-7>li:nth-child(7n){padding-left:1.07143rem;padding-right:0}.large-block-grid-8>li{width:12.5%;list-style:none}.large-block-grid-8>li:nth-of-type(n){clear:none}.large-block-grid-8>li:nth-of-type(8n+1){clear:both}.large-block-grid-8>li:nth-child(8n+1){padding-left:0;padding-right:1.09375rem}.large-block-grid-8>li:nth-child(8n+2){padding-left:.15625rem;padding-right:.9375rem}.large-block-grid-8>li:nth-child(8n+3){padding-left:.3125rem;padding-right:.78125rem}.large-block-grid-8>li:nth-child(8n+4){padding-left:.46875rem;padding-right:.625rem}.large-block-grid-8>li:nth-child(8n+5){padding-left:.625rem;padding-right:.46875rem}.large-block-grid-8>li:nth-child(8n+6){padding-left:.78125rem;padding-right:.3125rem}.large-block-grid-8>li:nth-child(8n+7){padding-left:.9375rem;padding-right:.15625rem}.large-block-grid-8>li:nth-child(8n){padding-left:1.09375rem;padding-right:0}.large-block-grid-9>li{width:11.11111%;list-style:none}.large-block-grid-9>li:nth-of-type(n){clear:none}.large-block-grid-9>li:nth-of-type(9n+1){clear:both}.large-block-grid-9>li:nth-child(9n+1){padding-left:0;padding-right:1.11111rem}.large-block-grid-9>li:nth-child(9n+2){padding-left:.13889rem;padding-right:.97222rem}.large-block-grid-9>li:nth-child(9n+3){padding-left:.27778rem;padding-right:.83333rem}.large-block-grid-9>li:nth-child(9n+4){padding-left:.41667rem;padding-right:.69444rem}.large-block-grid-9>li:nth-child(9n+5){padding-left:.55556rem;padding-right:.55556rem}.large-block-grid-9>li:nth-child(9n+6){padding-left:.69444rem;padding-right:.41667rem}.large-block-grid-9>li:nth-child(9n+7){padding-left:.83333rem;padding-right:.27778rem}.large-block-grid-9>li:nth-child(9n+8){padding-left:.97222rem;padding-right:.13889rem}.large-block-grid-9>li:nth-child(9n){padding-left:1.11111rem;padding-right:0}.large-block-grid-10>li{width:10%;list-style:none}.large-block-grid-10>li:nth-of-type(n){clear:none}.large-block-grid-10>li:nth-of-type(10n+1){clear:both}.large-block-grid-10>li:nth-child(10n+1){padding-left:0;padding-right:1.125rem}.large-block-grid-10>li:nth-child(10n+2){padding-left:.125rem;padding-right:1rem}.large-block-grid-10>li:nth-child(10n+3){padding-left:.25rem;padding-right:.875rem}.large-block-grid-10>li:nth-child(10n+4){padding-left:.375rem;padding-right:.75rem}.large-block-grid-10>li:nth-child(10n+5){padding-left:.5rem;padding-right:.625rem}.large-block-grid-10>li:nth-child(10n+6){padding-left:.625rem;padding-right:.5rem}.large-block-grid-10>li:nth-child(10n+7){padding-left:.75rem;padding-right:.375rem}.large-block-grid-10>li:nth-child(10n+8){padding-left:.875rem;padding-right:.25rem}.large-block-grid-10>li:nth-child(10n+9){padding-left:1rem;padding-right:.125rem}.large-block-grid-10>li:nth-child(10n){padding-left:1.125rem;padding-right:0}.large-block-grid-11>li{width:9.09091%;list-style:none}.large-block-grid-11>li:nth-of-type(n){clear:none}.large-block-grid-11>li:nth-of-type(11n+1){clear:both}.large-block-grid-11>li:nth-child(11n+1){padding-left:0;padding-right:1.13636rem}.large-block-grid-11>li:nth-child(11n+2){padding-left:.11364rem;padding-right:1.02273rem}.large-block-grid-11>li:nth-child(11n+3){padding-left:.22727rem;padding-right:.90909rem}.large-block-grid-11>li:nth-child(11n+4){padding-left:.34091rem;padding-right:.79545rem}.large-block-grid-11>li:nth-child(11n+5){padding-left:.45455rem;padding-right:.68182rem}.large-block-grid-11>li:nth-child(11n+6){padding-left:.56818rem;padding-right:.56818rem}.large-block-grid-11>li:nth-child(11n+7){padding-left:.68182rem;padding-right:.45455rem}.large-block-grid-11>li:nth-child(11n+8){padding-left:.79545rem;padding-right:.34091rem}.large-block-grid-11>li:nth-child(11n+9){padding-left:.90909rem;padding-right:.22727rem}.large-block-grid-11>li:nth-child(11n+10){padding-left:1.02273rem;padding-right:.11364rem}.large-block-grid-11>li:nth-child(11n){padding-left:1.13636rem;padding-right:0}.large-block-grid-12>li{width:8.33333%;list-style:none}.large-block-grid-12>li:nth-of-type(n){clear:none}.large-block-grid-12>li:nth-of-type(12n+1){clear:both}.large-block-grid-12>li:nth-child(12n+1){padding-left:0;padding-right:1.14583rem}.large-block-grid-12>li:nth-child(12n+2){padding-left:.10417rem;padding-right:1.04167rem}.large-block-grid-12>li:nth-child(12n+3){padding-left:.20833rem;padding-right:.9375rem}.large-block-grid-12>li:nth-child(12n+4){padding-left:.3125rem;padding-right:.83333rem}.large-block-grid-12>li:nth-child(12n+5){padding-left:.41667rem;padding-right:.72917rem}.large-block-grid-12>li:nth-child(12n+6){padding-left:.52083rem;padding-right:.625rem}.large-block-grid-12>li:nth-child(12n+7){padding-left:.625rem;padding-right:.52083rem}.large-block-grid-12>li:nth-child(12n+8){padding-left:.72917rem;padding-right:.41667rem}.large-block-grid-12>li:nth-child(12n+9){padding-left:.83333rem;padding-right:.3125rem}.large-block-grid-12>li:nth-child(12n+10){padding-left:.9375rem;padding-right:.20833rem}.large-block-grid-12>li:nth-child(12n+11){padding-left:1.04167rem;padding-right:.10417rem}.large-block-grid-12>li:nth-child(12n){padding-left:1.14583rem;padding-right:0}}/*!

# Icons as buttons

Just icons

```
<div class="icon-as-button"><i class="icon-grid-view"></i></div>
<div class="icon-as-button selected"><i class="icon-grid-view"></i></div>
<div class="icon-as-button button--no-hover"><i class="icon-sort"></i></div>
```

With text labels

```
<div class="icon-as-button"><i class="icon-list-view"></i><span>List view</span></div>
<div class="icon-as-button selected"><i class="icon-list-view"></i><span>List view</span></div>
<div class="icon-as-button button--no-hover"><i class="icon-sort"></i><span>Sort (no hover)</span></div>
```

# Arrow icons

The iconset includes two sets of arrows in four directions. The larger set is for larger type, while the smaller set is for smaller type.

```

<div class="icon-arrow-up"></div>
<div class="icon-arrow-down"></div>
<div class="icon-arrow-left"></div>
<div class="icon-arrow-right"></div>

<div class="icon-arrow-left2"></div>
<div class="icon-arrow-down2"></div>
<div class="icon-arrow-up2"></div>
<div class="icon-arrow-right2"></div>

<div class="with-arrow text-arrow-down">Inline down arrow</div>
<div class="text-arrow-right">More</div>

```

## Social media icons

```
<i class="icon-facebook"></i>
<i class="icon-facebook-round"></i>
<i class="icon-google-plus"></i>
<i class="icon-google-plus-round"></i>
<i class="icon-linkedin-round"></i>
<i class="icon-twitter"></i>
<i class="icon-twitter-round"></i>
```

## General icons

Embedded styles are used for the purpose of this styleguide only.

```
<style>
  .styleguide-icons i {
    display: block;
    margin-bottom: 6px;
  }
  .styleguide-icons i:before {
    padding-right: 6px;
  }
</style>

<div class="styleguide-icons">
<i class="icon-add-friends">Add friends</i>
<i class="icon-building">Building</i>
<i class="icon-bullet-list">Bullet list</i>
<i class="icon-calendar">Calendar</i>
<i class="icon-calendar2">Calendar2</i>
<i class="icon-chalice">Chalice</i>
<i class="icon-check">Check</i>
<i class="icon-checkbox-empty">Checkbox</i>
<i class="icon-checkbox-checked">Checkbox (checked)</i>
<i class="icon-close">Close</i>
<i class="icon-comment">Comment</i>
<i class="icon-cuisine">Cuisine</i>
<i class="icon-cuisine-outline">Cuisine outline</i>
<i class="icon-current-location">Current Location</i>
<i class="icon-directions">Directions</i>
<i class="icon-download">Download</i>
<i class="icon-edit">Edit</i>
<i class="icon-external-link">External link</i>
<i class="icon-favorite">Favourite</i>
<i class="icon-flag">Flag</i>
<i class="icon-gear">Gear</i>
<i class="icon-grid-view">Grid view</i>
<i class="icon-info">Info</i>
<i class="icon-list">List</i>
<i class="icon-list-view">List view</i>
<i class="icon-location">Location</i>
<i class="icon-location-mini">Location (mini)</i>
<i class="icon-map">Map</i>
<i class="icon-map-outline">Map outline</i>
<i class="icon-menu">Menu</i>
<i class="icon-radio-empty">Radio button</i>
<i class="icon-radio-checked">Radio button (selected)</i>
<i class="icon-restaurant-outline">Restaurant outline</i>
<i class="icon-search">Search</i>
<i class="icon-share">Share</i>
<i class="icon-sort">Sort</i>
<i class="icon-star">Star</i>
<i class="icon-thumb">Thumb</i>
<i class="icon-unfavorite">Unfavourite</i>
<i class="icon-phone-small">Phone Small</i>
<i class="icon-phone-large">Phone Large</i>
</div>
```

*/@font-face{font-family:icons;src:url(//media.otstatic.com/fonts/icons-ad93265e9c77c4855619693daa46e783.eot);src:url(//media.otstatic.com/fonts/icons-ad93265e9c77c4855619693daa46e783.eot) format('embedded-opentype'),url(//media.otstatic.com/fonts/icons-7c76eb456d4235853df4c6a58261f3fd.woff) format('woff'),url(//media.otstatic.com/fonts/icons-779abb5b1dad77dd6be3605b00bd12d6.ttf) format('truetype'),url(//media.otstatic.com/fonts/icons-1f1db62b9e6a89614af243ca9ea911ec.svg) format('svg')}.icon-font,.icon-search:before,.icon-calendar:before,.icon-location:before,.icon-map:before,.icon-directions:before,.icon-linkedin-round:before,.icon-arrow-left:before,.icon-arrow-down:before,.icon-arrow-up:before,.icon-arrow-right:before,.icon-arrow-left2:before,.icon-arrow-down2:before,.icon-arrow-up2:before,.icon-arrow-right2:before,.icon-chalice:before,.icon-share:before,.icon-list:before,.icon-thumb:before,.icon-flag:before,.icon-sort:before,.icon-location-mini:before,.icon-info:before,.icon-google-plus-round:before,.icon-unfavorite:before,.icon-favorite:before,.icon-twitter:before,.icon-twitter-round:before,.icon-facebook:before,.icon-facebook-round:before,.icon-building:before,.icon-star:before,.icon-check:before,.icon-calendar2:before,.icon-add-friends:before,.icon-cuisine:before,.icon-external-link:before,.icon-menu:before,.icon-close:before,.icon-bullet-list:before,.icon-google-plus:before,.icon-checkbox-empty:before,.icon-checkbox-checked:before,.icon-radio-empty:before,.icon-radio-checked:before,.icon-comment:before,.icon-edit:before,.icon-gear:before,.icon-grid-view:before,.icon-list-view:before,.icon-phone-small:before,.icon-phone-large:before,.icon-current-location:before,.icon-cuisine-outline:before,.icon-map-outline:before,.icon-restaurant-outline:before,.icon-download:before,.accordion-link:after,.info-button:before,.tag-button.with-icon:before,.tag-button-more.with-icon:before,.picker__nav--prev:before,.picker__nav--next:before,.checkbox-flat.checked:before,.grid-scroller-arrow-left:after,.grid-scroller-arrow-right:after,.photo-modal .grid-scroller-arrow-left:after,.photo-modal .grid-scroller-arrow-right:after,.infinite-scroll-button:after,.modal-container .modal-close:before,.menu-list.with-arrows .menu-list-link:after,.menu-list-label.highlight:after,.pagination-prev:before,.pagination-next:before,.star-rating-star:before,.star-rating-star.half:after,.text-arrow-down-small:after,.text-arrow-down:after,.text-arrow-down-large:after,.text-arrow-up-small:after,.text-arrow-up:after,.text-arrow-up-large:after,.text-arrow-right-small:after,.text-arrow-right:after,.text-arrow-right-large:after,.text-arrow-left-small:after,.text-arrow-left:after,.text-arrow-left-large:after,.text-arrow-left-before-small:before,.text-arrow-left-before:before,.text-arrow-left-before-large:before,.dtp-picker-selector-link:after,.footer-social-link.facebook:after,.footer-social-link.google:after,.footer-social-link.twitter:after,.footer-social-link.linkedin:after,.top-bar-nav-link.with-arrow:after,.top-bar-nav-calendar .top-bar-nav-link:before,.location-picker:before,.location-picker-link:after,.location-picker-link .location-picker-metro.text-arrow-right:after,[class^=icon-]:before,[class*=icon-]:before{font-family:icons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-search:before{content:"\e600"}.icon-calendar:before{content:"\e601"}.icon-location:before{content:"\e602"}.icon-map:before{content:"\e603"}.icon-directions:before{content:"\e604"}.icon-linkedin-round:before{content:"\e605"}.icon-arrow-left:before{content:"\e606"}.icon-arrow-down:before{content:"\e607"}.icon-arrow-up:before{content:"\e608"}.icon-arrow-right:before{content:"\e609"}.icon-arrow-left2:before{content:"\e60a"}.icon-arrow-down2:before{content:"\e60b"}.icon-arrow-up2:before{content:"\e60c"}.icon-arrow-right2:before{content:"\e60d"}.icon-chalice:before{content:"\e60e"}.icon-share:before{content:"\e60f"}.icon-list:before{content:"\e610"}.icon-thumb:before{content:"\e611"}.icon-flag:before{content:"\e612"}.icon-sort:before{content:"\e613"}.icon-location-mini:before{content:"\e614"}.icon-info:before{content:"\e615"}.icon-google-plus-round:before{content:"\e616"}.icon-unfavorite:before{content:"\e617"}.icon-favorite:before{content:"\e618"}.icon-twitter:before{content:"\e619"}.icon-twitter-round:before{content:"\e61a"}.icon-facebook:before{content:"\e61b"}.icon-facebook-round:before{content:"\e61c"}.icon-building:before{content:"\e61d"}.icon-star:before{content:"\e61e"}.icon-check:before{content:"\e61f"}.icon-calendar2:before{content:"\e620"}.icon-add-friends:before{content:"\e621"}.icon-cuisine:before{content:"\e622"}.icon-external-link:before{content:"\e623"}.icon-menu:before{content:"\e624"}.icon-close:before{content:"\e625"}.icon-bullet-list:before{content:"\e626"}.icon-google-plus:before{content:"\e627"}.icon-checkbox-empty:before{content:"\e628"}.icon-checkbox-checked:before{content:"\e629"}.icon-radio-empty:before{content:"\e62a"}.icon-radio-checked:before{content:"\e62b"}.icon-comment:before{content:"\e62c"}.icon-edit:before{content:"\e62d"}.icon-gear:before{content:"\e62e"}.icon-grid-view:before{content:"\e62f"}.icon-list-view:before{content:"\e630"}.icon-phone-small:before{content:"\e631"}.icon-phone-large:before{content:"\e632"}.icon-current-location:before{content:"\e633"}.icon-cuisine-outline:before{content:"\e634"}.icon-map-outline:before{content:"\e635"}.icon-restaurant-outline:before{content:"\e636"}.icon-download:before{content:"\e637"}.icon-info{color:#559ebe}.icon-info:hover{color:#3e84a2}.icon-as-button{float:left;height:2rem;line-height:2rem;color:#559ebe;border-radius:3px}.icon-as-button i{width:2rem;height:inherit;float:left;position:relative}.icon-as-button i:before{position:absolute;left:.5rem;top:.5rem}.icon-as-button:hover{background-color:#559ebe;cursor:pointer}.icon-as-button:hover i,.icon-as-button:hover span{color:#FFF}.icon-as-button span{padding-right:.5rem}.icon-as-button.selected{background-color:rgba(85,158,190,.14)}.icon-as-button.button--no-hover{background-color:transparent}.icon-as-button.selected i,.icon-as-button.selected span,.icon-as-button.button--no-hover i,.icon-as-button.button--no-hover span{color:#559ebe}.accordion{zoom:1;margin-bottom:0}.accordion:before,.accordion:after{content:" ";display:table}.accordion:after{clear:both}.accordion-block{display:block;margin:0!important}.accordion-link{display:block;border-top:1px solid rgba(0,0,0,.08);padding:1rem 1.5rem;margin:0;position:relative;color:#333;-webkit-transition:all 500ms;-moz-transition:all 500ms;-ms-transition:all 500ms;transition:all 500ms}.accordion-link:after{content:"\e60b";position:absolute;top:1rem;right:1.5rem;-webkit-transition:all 500ms;-moz-transition:all 500ms;-ms-transition:all 500ms;transition:all 500ms}.accordion-link.active{color:#da3743}.accordion-link.active:after{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.accordion-link.accordion-block-header{padding:0;border:none}.accordion-link.accordion-block-header::after{top:0}.accordion-link.accordion-block-header.active{color:#333}.accordion-link.accordion-block-header.active:hover{color:#da3743}.accordion-content{display:none;padding:.5rem 1.5rem}code{max-width:100%;overflow:auto}code[class*=language-],pre[class*=language-]{color:#333;text-shadow:0 1px white;font-family:Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{text-shadow:none;background:rgba(0,0,0,.06)}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{text-shadow:none;background:rgba(0,0,0,.06)}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;max-height:18.75rem}:not(pre)>code[class*=language-],pre[class*=language-]{background:rgba(0,0,0,.06);border-radius:3px}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#da3743}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#559ebe}.token.regex,.token.important{color:#e90}.token.important{font-weight:700}.token.entity{cursor:help}/*!

# Default width grey style

Example javascript provided will not work on styleguide. Illustrative of how click events will be handled in the wild.

```
<ul class="button-group button-grey">
  <li class="button selected">Item 1</li>
  <li class="button">Item 2</li>
  <li class="button">Item 3</li>
</ul>

<script>
  $('.button').click(function () {
    if (!($(this).hasClass('selected'))) {
      $('.button').removeClass('selected');
      $(this).addClass('selected');
    }
  });
</script>
```

# Percentage width grey style

Add the appropriate `button-count-3` class to your containing element (currently limited to eight maximum).

```
<ul class="button-group button-grey button-count-3">
  <li class="button selected">Item 1</li>
  <li class="button">Item 2</li>
  <li class="button">Item 3</li>
</ul>

<ul class="button-group button-grey button-count-4">
  <li class="button selected">Item 1</li>
  <li class="button">Item 2</li>
  <li class="button">Item 3</li>
  <li class="button">Item 4</li>
</ul>

<ul class="button-group button-grey button-count-5">
  <li class="button selected">Item 1</li>
  <li class="button">Item 2</li>
  <li class="button">Item 3</li>
  <li class="button">Item 4</li>
  <li class="button">Item 5</li>
</ul>
```

# Default width icons

```
<ul class="button-group">
  <li class="button selected">
    <i class="icon-share"></i>
  </li>
  <li class="button">
    <i class="icon-star"></i>
  </li>
  <li class="button">
    <i class="icon-thumb"></i>
  </li>
</ul>
```

*/.button-group{zoom:1}.button-group:before,.button-group:after{content:" ";display:table}.button-group:after{clear:both}.button-group .button{float:left;border-radius:0;background:none;color:#da3743;border:1px solid rgba(0,0,0,.12);margin-right:0!important;-webkit-transition:none;-moz-transition:none;-ms-transition:none;transition:none}.button-group .button:not(:last-child){border-right:0}.button-group .button:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group .button:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group .button:hover,.button-group .button.selected{background:#da3743;border-top-color:#da3743;border-bottom-color:#da3743;color:#fff}.button-group .button:hover:first-child,.button-group .button.selected:first-child{border-left-color:#da3743}.button-group .button:hover:last-child,.button-group .button.selected:last-child{border-right-color:#da3743}.button-group.button-count-2 .button{width:50%}.button-group.button-count-3 .button{width:33.33333%}.button-group.button-count-4 .button{width:25%}.button-group.button-count-5 .button{width:20%}.button-group.button-count-6 .button{width:16.66667%}.button-group.button-count-7 .button{width:14.28571%}.button-group.button-count-8 .button{width:12.5%}.button-group.button-grey .button{color:rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.12)}.button-group.button-grey .button+.button{border-left:0}.button-group.button-grey .button:hover,.button-group.button-grey .button.selected{background:rgba(0,0,0,.12);border-top-color:rgba(0,0,0,.12);border-bottom-color:rgba(0,0,0,.12);color:#000}.button-group.button-grey .button:hover:first-child,.button-group.button-grey .button.selected:first-child{border-left-color:rgba(0,0,0,.12)}.button-group.button-grey .button:hover:last-child,.button-group.button-grey .button.selected:last-child{border-right-color:rgba(0,0,0,.12)}/*!

# Buttons

Primary buttons are only used when there is an exceedingly distinct and clear call-to-action. An example of this is the Complete reservation button on the reservation form, or the Save Changes button on the user profile.

```
<a href="#" class="button">Button</a>
<a href="#" class="button secondary">Button secondary</a>
<a href="#" class="button success">Button success</a>
<a href="#" class="button alert">Button alert</a>
<a href="#" class="button large">Button large</a>
<a href="#" class="button small">Button small</a>
<a href="#" class="button tiny">Button tiny</a>
<a href="#" class="button expand">Button expand</a>
<a href="#" class="button wide">Button wide</a>
<a href="#" class="button left-align">Button left-align</a>
<a href="#" class="button right-align">Button right-align</a>
<a href="#" class="button radius">Button radius</a>

```

# Disabled buttons

```
<a href="#" class="button disabled">Button disabled</a>
<a href="#" class="button secondary disabled">Button secondary disabled</a>
<a href="#" class="button success disabled">Button success disabled</a>
<a href="#" class="button alert disabled">Button alert disabled</a>

```

# Other styles

```

<a href="#" class="button type-2">type-2</a>
<a href="#" class="button with-arrow icon-arrow-down2">with-arrow</a>
<a href="#" class="button with-icon icon-download">with-icon</a>
<a href="#" class="button with-icon tiny icon-favourite">with-icon tiny</a>

```

# Custom OT buttons

```
<a href="#" class="button dtp-button">dtp-button</a>
<a href="#" class="button dtp-button unavailable">dtp-button unavailable</a>
<a href="#" class="button dtp-button with-points">dtp-button with pts</a>
<a href="#" class="info-button">info-button</a>

<div class="tag-buttons">
  <a href="#" class="button tag-button">tag-button</a>
  <a href="#" class="button tag-button-more">tag-button-more</a>
  <a href="#" class="button tag-button diners-choice">tag-button diners-choice</a>
  <a href="#" class="button tag-button with-icon">tag-button with-icon</a>
</div>

<a href="#" class="diners-choice tag-button-more">diners-choice tag-button-more</a>
<a href="#" class="tag-button-count">tag-button-count</a>
```
*/.button{border-style:solid;border-width:0;cursor:pointer;font-family:franklin-gothic-urw,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;line-height:normal;margin:0 0 1rem;position:relative;text-decoration:none;text-align:center;outline:none;border-radius:3px;display:inline-block;padding-right:1.75rem;padding-left:1.75rem;background-color:#da3743;color:#fff;-moz-transition:background-color 300ms ease-out;transition:background-color 300ms ease-out;padding-top:.875rem;padding-right:1.75rem;padding-bottom:.9375rem;padding-left:1.75rem;font-size:1rem}html:lang(ja) .button{font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Roboto,Droid Sans,"游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif}.button:hover,.button:focus{background-color:#b8222f}.button:hover,.button:focus{color:#fff}.button.secondary{background-color:#559ebe;border-color:#3d829f;color:#fff}.button.secondary:hover,.button.secondary:focus{background-color:#3d829f}.button.secondary:hover,.button.secondary:focus{color:#fff}.button.success{background-color:#75b96f;border-color:#549f4d;color:#fff}.button.success:hover,.button.success:focus{background-color:#549f4d}.button.success:hover,.button.success:focus{color:#fff}.button.alert{background-color:#d30303;border-color:#a90202;color:#fff}.button.alert:hover,.button.alert:focus{background-color:#a90202}.button.alert:hover,.button.alert:focus{color:#fff}.button.large{padding-top:1rem;padding-right:2rem;padding-bottom:1.0625rem;padding-left:2rem;font-size:1.25rem}.button.small{padding-top:.75rem;padding-right:1.5rem;padding-bottom:.8125rem;padding-left:1.5rem;font-size:.8125rem}.button.tiny{padding-top:.5rem;padding-right:1rem;padding-bottom:.5625rem;padding-left:1rem;font-size:.6875rem}.button.expand{padding-right:0;padding-left:0;width:100%}.button.wide{padding-left:3rem;padding-right:3rem}.button.left-align{text-align:left;text-indent:.75rem}.button.right-align{text-align:right;padding-right:.75rem}.button.radius{border-radius:3px}.button.disabled,.button[disabled]{background-color:#da3743;border-color:#b8222f;color:#fff;border:1px solid rgba(0,0,0,.2);background:none;color:#999;cursor:default;-webkit-box-shadow:none;box-shadow:none}.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{background-color:#b8222f}.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{color:#fff}.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus{background:none;color:#999}.button.disabled.secondary,.button[disabled].secondary{background-color:#559ebe;border-color:#3d829f;color:#fff;border:1px solid rgba(0,0,0,.2);background:none;color:#999;cursor:default;-webkit-box-shadow:none;box-shadow:none}.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{background-color:#3d829f}.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{color:#fff}.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{background:none;color:#999}.button.disabled.success,.button[disabled].success{background-color:#75b96f;border-color:#549f4d;color:#fff;border:1px solid rgba(0,0,0,.2);background:none;color:#999;cursor:default;-webkit-box-shadow:none;box-shadow:none}.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{background-color:#549f4d}.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{color:#fff}.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{background:none;color:#999}.button.disabled.alert,.button[disabled].alert{background-color:#d30303;border-color:#a90202;color:#fff;border:1px solid rgba(0,0,0,.2);background:none;color:#999;cursor:default;-webkit-box-shadow:none;box-shadow:none}.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{background-color:#a90202}.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{color:#fff}.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{background:none;color:#999}@media only screen and (min-width:40.063em){.button{display:inline-block}}.button.type-2{border:1px solid rgba(0,0,0,.12);background:none;color:#da3743}.button.type-2:hover{background:rgba(0,0,0,.06)}.button.with-arrow{padding-right:3rem}.button.with-arrow:after{position:absolute;right:.5rem;top:50%;line-height:0}.button.with-icon{padding-left:3.25rem}.button.with-icon:before{position:absolute;font-size:1.5rem;top:.45em;left:1rem;display:block}.button.with-icon.tiny{padding-left:2.5rem}.button.with-icon.tiny:before{left:.75rem}.button.dtp-button{border-radius:3px;position:relative;padding:.7rem 1.5rem;color:#fff;background:#da3743;display:inline-block;line-height:1}.button.dtp-button:hover{background:#bb232f}.button.dtp-button.unavailable{background:rgba(0,0,0,.06);border-color:transparent;padding:.7rem 3rem!important;color:#fff;cursor:default}.button.dtp-button.with-points:after{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:'';-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzUzMzBERTQyMDlCMTFFNDk0OEVFRjU0MzVFMThDQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDFCMkI4QjYyMEI1MTFFNDk0OEVFRjU0MzVFMThDQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNTMzMERFMjIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNTMzMERFMzIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr7lehEAAAAmSURBVHjaYvz//z8DEgBxGGEcJgY8AK8kC9QodKPhkozUtxMgwAAySgcOYy2xpAAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:4px 4px;position:absolute;top:-6px;right:-6px}.button.dtp-button.with-offers:after{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:attr(data-offers-count);-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;padding-left:2px;position:absolute;top:-6px;right:-6px}.info-button{color:#559ebe;font-size:.625rem;display:inline-block;line-height:1.5;margin-left:.5rem;text-align:center;vertical-align:middle}.info-button:before{content:"\e615";font-size:.875rem;vertical-align:top}.info-button:hover{color:#3e84a2;border-color:#3e84a2}.tag-buttons{zoom:1;margin-bottom:.5rem}.tag-buttons:before,.tag-buttons:after{content:" ";display:table}.tag-buttons:after{clear:both}.tag-button,.tag-button-more{border:1px solid rgba(0,0,0,.12);display:block;float:left;margin-right:1rem;padding:.5rem .7rem;border-radius:3px;position:relative;margin-bottom:.5rem;font-size:.875rem;text-transform:capitalize}.tag-button.diners-choice,.tag-button-more.diners-choice{font-size:1rem}.tag-button.with-icon,.tag-button-more.with-icon{padding:.6rem .8rem .6rem 3.3rem}.tag-button.with-icon:before,.tag-button-more.with-icon:before{content:"\e60e";border-right:1px solid rgba(0,0,0,.12);color:#feab6c;height:70%;font-size:1.2rem;left:0;line-height:2;position:absolute;text-align:center;top:15%;width:2.5rem}.tag-button.with-icon .badge-name,.tag-button-more.with-icon .badge-name{margin-bottom:.1875rem}.tag-button.with-icon .region-name,.tag-button-more.with-icon .region-name{font-size:.875rem;color:#999}.tag-button-more{color:#559ebe}.tag-button-more:hover{color:#3e84a2;background:rgba(0,0,0,.06)}.diners-choice .tag-button-more{font-size:1rem;padding:1.13rem}.tag-button-count{color:#999;font-size:.875rem}.picker{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#333;position:absolute;z-index:100;width:100%;top:90%;left:0}.picker.up{top:-290px}.picker__input{cursor:default;width:100%}.picker__input.picker__input--active{border-color:rgba(0,0,0,.12)}.picker__holder{border-radius:3px;-webkit-opacity:0;-moz-opacity:0;opacity:0;width:100%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);max-height:0;width:22rem;left:-50%;position:absolute;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s;transition:transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s}.down .picker__holder{-webkit-transform:translateY(-1rem) perspective(600px) rotateX(0);-moz-transform:translateY(-1rem) perspective(600px) rotateX(0);transform:translateY(-1rem) perspective(600px) rotateX(0)}.up .picker__holder{-webkit-transform:translateY(1rem) perspective(600px) rotateX(0);-moz-transform:translateY(1rem) perspective(600px) rotateX(0);transform:translateY(1rem) perspective(600px) rotateX(0)}.picker--opened .picker__holder{max-height:25rem;-webkit-opacity:1;-moz-opacity:1;opacity:1;-webkit-transform:translateY(0) perspective(600px) rotateX(0);-moz-transform:translateY(0) perspective(600px) rotateX(0);transform:translateY(0) perspective(600px) rotateX(0);-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s;transition:transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s}.datepicker{z-index:1}.picker__input--active{z-index:0}.picker--opened.down:before,.picker--opened.up:after{width:20px;height:8px;content:"";display:block;position:absolute;margin-left:-10px;z-index:100}.picker--opened.down:before{background:url(//media.otstatic.com/img/menu-arrow-07a3806ef6a9dd42e7c852c3a17b60c6.png);top:-8px;left:50%}.picker--opened.up:after{background:url(//media.otstatic.com/img/menu-arrow-down-c4b416d70449cb3fb1849b891a292c7c.png);top:290px;left:50%}@media(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx){.picker--opened.down:before{background-image:url(//media.otstatic.com/img/menu-arrow@2x-a571b700457fa13101b46cdc28f46935.png)!important;background-size:100%}.picker--opened.up:after{background-image:url(//media.otstatic.com/img/menu-arrow-down@2x-452f484f4aa511c52951d405815af6e3.png)!important;background-size:100%}}.picker__box{padding:1rem}.picker__header{text-align:center;position:relative}.picker__month,.picker__year{display:inline-block;margin-left:.25rem;margin-right:.25rem}.picker__nav--prev,.picker__nav--next{position:absolute;top:0;color:#da3743;display:block;top:.1rem}.picker__nav--prev{left:0;padding-right:1.5rem}.picker__nav--next{right:0;padding-left:1.5rem}.picker__nav--prev:before{content:"\e60a"}.picker__nav--next:before{content:"\e60d"}.picker__nav--prev:hover,.picker__nav--next:hover{cursor:pointer;color:#bb232f}.picker__nav--disabled,.picker__nav--disabled:hover,.picker__nav--disabled:before,.picker__nav--disabled:before:hover{cursor:default;background:none;color:#999}.picker__table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit;width:100%;margin-top:1rem}.picker__table td{margin:0;padding:1px 0;text-align:center}.picker__weekday{width:14.28571%;font-size:.875rem;padding-bottom:.5rem;color:#999;font-weight:400;text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.08)}.picker__day{margin:0 auto;width:2rem;height:2rem;line-height:1.95;text-align:center;border-radius:100%}.picker__day--today{color:#000;background:rgba(0,0,0,.06);position:relative}.picker__day--selected,.picker__day--selected:hover{border-color:#da3743}.picker__day--highlighted{background:#da3743;font-weight:400}.picker__day--disabled:before{border-top-color:rgba(0,0,0,.08)}.picker__day--outfocus{color:#999}.picker__day--infocus:hover,.picker__day--outfocus:hover{cursor:pointer;color:#da3743;background:#f7d7d9}.picker__day--highlighted:hover,.picker--focused .picker__day--highlighted{background:#da3743;color:#fff}.picker__day--disabled,.picker__day--disabled:hover{color:rgba(0,0,0,.12);cursor:default;background:none}.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover{background:#bbb}.picker__footer{display:none}.content-wrapper{position:relative}.content-section.with-margin{margin-bottom:2rem}.content-section.with-seperator{padding-bottom:1rem;border-bottom:1px solid rgba(0,0,0,.08)}.content-section-header.with-rows>.row,.content-section-body.with-rows>.row,.content-section-footer.with-rows>.row{margin-left:-1rem}.content-section-header{zoom:1;padding:1rem 0}.content-section-header:before,.content-section-header:after{content:" ";display:table}.content-section-header:after{clear:both}.content-section-header h1,.content-section-header h2,.content-section-header h3,.content-section-header h4,.content-section-header h5,.content-section-header h6{margin:0}.content-section-header h4{color:#666}.content-section-header .subline{color:#666}.content-section-header.with-border{border-bottom:1px solid rgba(0,0,0,.12)}.content-section-header-link{margin-top:.4rem;display:block;margin-bottom:.5rem}.content-section-tabs{zoom:1;padding-top:0;margin-top:0;border-bottom:1px solid rgba(0,0,0,.12)}.content-section-tabs:before,.content-section-tabs:after{content:" ";display:table}.content-section-tabs:after{clear:both}.content-section-tab{float:left;margin-right:2rem}.content-section-tab-link{color:#999;padding:1rem 0;display:block;border-bottom:1px solid transparent;position:relative;top:1px}.content-section-tab-link:hover{border-bottom-color:rgba(0,0,0,.12);color:#333}.content-section-tab-link.selected{color:#da3743;border-bottom:1px solid #da3743}.content-section-body.with-border{border-bottom:1px solid rgba(0,0,0,.12)}.content-section-body.with-padding{padding:1.5rem}.content-section-list-row{border-bottom:1px solid rgba(0,0,0,.08)}.content-section-footer{padding:1rem 0}.content-section-footer.with-border{border-bottom:1px solid rgba(0,0,0,.12)}.content-section-footer a.full-width-link{border-radius:3px;display:block;padding:1rem;text-align:center;border:1px solid rgba(0,0,0,.08)}.content-section-footer a.full-width-link:hover{background:rgba(0,0,0,.05)}.content-section-footer-loadmore{margin-bottom:2rem}.content-section-link-lists{zoom:1;margin-bottom:1rem}.content-section-link-lists:before,.content-section-link-lists:after{content:" ";display:table}.content-section-link-lists:after{clear:both}.content-section-link-lists ul{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}@media only screen and (min-width:64.063em){.content-section-link-lists ul{-webkit-column-count:4;-moz-column-count:4;column-count:4}}.content-section-link-lists ul li{padding-top:.75rem;padding-bottom:.75rem;min-width:11.5rem}.content-section-link-lists ul li a{color:#333}.content-section-link-lists ul li a:hover{color:#3e84a2}.content-block{border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1);background:#fff;margin-bottom:2rem}.content-block dd:last-child{margin-bottom:0}.content-block:first-child{margin-top:1rem}.content-block-header,.content-block-body,.content-block-footer,.content-block-panel{zoom:1;padding:1.5rem;position:relative}.content-block-header:before,.content-block-header:after,.content-block-body:before,.content-block-body:after,.content-block-footer:before,.content-block-footer:after,.content-block-panel:before,.content-block-panel:after{content:" ";display:table}.content-block-header:after,.content-block-body:after,.content-block-footer:after,.content-block-panel:after{clear:both}.content-block-header.with-rows,.content-block-body.with-rows,.content-block-footer.with-rows,.content-block-panel.with-rows{padding-left:.5rem}.content-block-header .column p:last-child,.content-block-body .column p:last-child,.content-block-footer .column p:last-child,.content-block-panel .column p:last-child{margin-bottom:0}.content-block-header button,.content-block-header .button,.content-block-body button,.content-block-body .button,.content-block-footer button,.content-block-footer .button,.content-block-panel button,.content-block-panel .button{margin-bottom:0;margin-right:1rem}.content-block-header .column:last-child .button:last-child,.content-block-body .column:last-child .button:last-child,.content-block-footer .column:last-child .button:last-child,.content-block-panel .column:last-child .button:last-child{margin-right:0}.content-block-header.with-border{border-bottom:1px solid rgba(0,0,0,.08)}.content-block-header h1,.content-block-header h2,.content-block-header h3,.content-block-header h4,.content-block-header h5,.content-block-header h6{margin:0}.content-block-header-icons{float:right;font-size:1.1rem;margin-top:.25rem}.content-block-header-icons a{color:#666;margin-left:.7rem;padding:.5rem}.content-block-header-icons a:hover{color:#333}.content-block-tabs{zoom:1;border-bottom:1px solid rgba(0,0,0,.06);padding:0 1.5rem}.content-block-tabs:before,.content-block-tabs:after{content:" ";display:table}.content-block-tabs:after{clear:both}.content-block-tab{float:left;margin-right:2rem}.content-block-tab-link{display:block;padding:1.5rem 0;text-transform:uppercase;border-bottom:1px solid transparent;color:#666;position:relative;top:1px;color:#559ebe}.content-block-tab-link:hover{border-bottom-color:#999;color:#3e84a2}.content-block-tab-link.selected{border-bottom-color:#559ebe;color:#666}.content-block-list-row{border-bottom:1px solid rgba(0,0,0,.08);padding:0 1.5rem}.content-block-map{width:100%;position:relative;overflow:hidden;border-top-left-radius:3px;border-top-right-radius:3px;z-index:10}.content-block-map-wrapper{position:absolute;top:-23%;left:0;width:100%;height:150%}.content-block-map-img{margin:auto;min-width:100%}.content-block-map-info{border-radius:3px;position:absolute;z-index:100;top:1rem;left:1rem;padding:1rem 1.5rem;background:#fff;background:rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(0,0,0,.2)}.content-block-map-info a{color:#559ebe}.content-block-map-info a:hover{color:#3e84a2}.content-block-body .readmore{margin-bottom:.5rem}.content-block-body .js-readmore-show,.content-block-body .js-readmore-hide{margin-bottom:1rem;display:block;color:#559ebe}.content-block-body.with-border{border-top:1px solid rgba(0,0,0,.08)}.content-block-panel{background:#6d6d6d}.content-block-footer{border-bottom-right-radius:5px;border-bottom-left-radius:5px;overflow:hidden}.content-block-footer.with-border{border-top:1px solid rgba(0,0,0,.08)}.content-block-footer-link{display:block;padding:1.5rem;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.content-block-footer-link:hover{background:rgba(0,0,0,.05)}.content-block-footer-link.view-more{color:#559ebe}.content-block-footer-link.view-more:hover{color:#3e84a2}.content-block-link-lists{zoom:1;margin-top:-.25rem;margin-bottom:-.25rem}.content-block-link-lists:before,.content-block-link-lists:after{content:" ";display:table}.content-block-link-lists:after{clear:both}.content-block-link-lists ul{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}@media only screen and (min-width:64.063em){.content-block-link-lists ul{-webkit-column-count:4;-moz-column-count:4;column-count:4}}.content-block-link-lists ul.no-columns{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;-webkit-column-count:auto;-moz-column-count:auto;column-count:auto}.content-block-link-lists ul li{padding-top:.75rem;padding-bottom:.75rem;min-width:11.5rem}@media only screen and (min-width:40.063em){.content-section-header{padding:1.5rem 0}.content-section-header-link{margin-bottom:0}}@media only screen and (min-width:64.063em){.content-section-header{padding:2rem 0}}/*!

## Forms

```
<input type="text" class="form-input" placeholder="This is a placeholder">
<input type="text" class="form-input error" value="Error">

<textarea placeholder="This is a placeholder" class="form-textarea"></textarea>

<select class="form-select">
  <option value="1">1 person</option>
  <option value="2" selected="selected">2 people</option>
  <option value="3">3 people</option>
  <option value="4">4 people</option>
  <option value="21">Larger Party</option>
</select>

```

# Checkboxes and radio buttons

Checkboxes must have a label with a 'for' value that matches the input ID.

```
<div class="checkboxes">
<input type="checkbox" id="one"><label for="one">Oranges</label>
<input type="checkbox" id="two"><label for="two">Lemons</label>
<input type="checkbox" id="three"><label for="three">Bells of St Clement's</label>
</div>

```
```
<div class="radiobuttons">
<input type="radio" id="four" name="same-name-for-each"><label for="four">Yes</label>
<input type="radio" id="five" name="same-name-for-each"><label for="five">No</label>
<input type="radio" id="six" name="same-name-for-each"><label for="six">Maybe</label>
</div>

```
*/.error::-webkit-input-placeholder{color:#fea4a4}.error::-moz-placeholder{color:#fea4a4}.error:-ms-input-placeholder{color:#fea4a4}input.error:-moz-placeholder{color:#fea4a4}.form-select,.form-input,.form-textarea{-webkit-appearance:none!important;outline:0;font-weight:100;display:block;background:#fff;font-size:.875rem;margin-bottom:.5rem;border:1px solid rgba(0,0,0,.12);border-radius:3px;width:100%}.form-select:focus,.form-select:hover,.form-input:focus,.form-input:hover,.form-textarea:focus,.form-textarea:hover{border-color:rgba(0,0,0,.2)}.form-select.error,.form-input.error,.form-textarea.error{border-color:#d30303;color:#d30303;margin-bottom:.5rem}.error-text,.error-list{margin-bottom:1rem!important;color:#da3743}.error-text a,.error-list a{text-decoration:underline}.error-list.with-list-top-margin ul{margin-top:.5rem}.form-input,.form-textarea{padding:1rem}.form-select{padding:0;position:relative;line-height:normal}.form-select .dtp-picker-selector-link{height:inherit}.form-header{margin-bottom:1rem}input[type=checkbox].flat{opacity:0;float:left;margin-left:.5rem}input[type=radio]{margin-left:.5rem;margin-right:.5rem}.checkbox-flat,.radio-flat{display:inline-block;vertical-align:middle;margin:0;padding:0;width:16px;height:16px;-webkit-opacity:.5;-moz-opacity:.5;opacity:.5;border:none;cursor:pointer}.checkbox-flat{border-radius:3px;border:1px solid rgba(0,0,0,.2);text-align:center;padding:2px 0}.checkbox-flat.checked{background:#da3743;border-color:#da3743;color:#fff;-webkit-opacity:1;-moz-opacity:1;opacity:1}.checkbox-flat.checked:before{content:"\e61f";font-size:.6em;vertical-align:top}.checkbox-flat.disabled{cursor:default}.checkbox-flat+label{display:inline-block;margin-bottom:1rem;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.875rem}.radio-flat.disabled{cursor:default}.checkboxes label,.radiobuttons label{position:relative;padding-left:1.25rem;line-height:1.3125rem;margin-right:.5rem;cursor:pointer}.checkboxes label:before,.checkboxes label:after,.radiobuttons label:before,.radiobuttons label:after{font-family:icons;font-size:1rem;position:absolute;top:0;left:0}.checkboxes label:before,.radiobuttons label:before{color:#999}.checkboxes label:after,.radiobuttons label:after{max-width:0;overflow:hidden;color:#da3743;opacity:.5;transition:opacity .1s ease-in-out}.checkboxes input,.radiobuttons input{display:none}.checkboxes input:checked+label:after,.radiobuttons input:checked+label:after{max-width:25px;opacity:1}.checkboxes label:before{content:'\e628'}.checkboxes label:after{content:'\e629'}.radiobuttons .radiobutton-text{margin-right:.5rem}.radiobuttons label:before{content:'\e62a'}.radiobuttons label:after{content:'\e62b'}.grid-scroller{zoom:1;position:relative}.grid-scroller:before,.grid-scroller:after{content:" ";display:table}.grid-scroller:after{clear:both}.grid-scroller-arrow{position:absolute;top:-4.5rem;z-index:100;display:block;text-align:center;font-size:1.2rem;display:none;opacity:.3;color:#333;border:1px solid rgba(0,0,0,.08);border-radius:3px;padding:.5rem .8rem}.grid-scroller-arrow.active{opacity:1}.grid-scroller-arrow.active:hover{background:rgba(0,0,0,.05)}.grid-scroller-arrow:hover{color:#333}.grid-scroller-arrow-left{right:4rem}.grid-scroller-arrow-left:after{content:"\e60a"}.grid-scroller-arrow-right{right:0}.grid-scroller-arrow-right:after{content:"\e60d"}.grid-scroller-container{zoom:1;width:100%;overflow:hidden;position:relative}.grid-scroller-container:before,.grid-scroller-container:after{content:" ";display:table}.grid-scroller-container:after{clear:both}.grid-scroller-wrapper{zoom:1;width:100%}.grid-scroller-wrapper:before,.grid-scroller-wrapper:after{content:" ";display:table}.grid-scroller-wrapper:after{clear:both}.grid-scroller-wrapper.with-scrolling{overflow-x:auto;-webkit-overflow-scrolling:touch}.grid-scroller-row{zoom:1;width:9000px;position:relative}.grid-scroller-row:before,.grid-scroller-row:after{content:" ";display:table}.grid-scroller-row:after{clear:both}.grid-scroller-column{float:left}@media only screen and (min-width:40.063em){.grid-scroller-arrow{display:block}}.photo-modal .grid-scroller{zoom:1}.photo-modal .grid-scroller:before,.photo-modal .grid-scroller:after{content:" ";display:table}.photo-modal .grid-scroller:after{clear:both}.photo-modal .grid-scroller-arrow{z-index:102;position:static;display:inline-block;float:left;text-align:center;font-size:1.2rem;opacity:.3;color:#999;border:none;padding:.5rem .8rem;height:660px;line-height:34;font-weight:700}.photo-modal .grid-scroller-arrow.active{opacity:1}.photo-modal .grid-scroller-arrow.active:hover{background:rgba(0,0,0,.05)}.photo-modal .grid-scroller-arrow:hover{color:#666}.photo-modal .grid-scroller-arrow-left{margin-right:15px}.photo-modal .grid-scroller-arrow-left:after{content:"\e60a"}.photo-modal .grid-scroller-arrow-right{margin-left:15px}.photo-modal .grid-scroller-arrow-right:after{content:"\e60d"}.photo-modal .grid-scroller-container{zoom:1;width:590px;overflow:hidden;float:left;position:static}.photo-modal .grid-scroller-container:before,.photo-modal .grid-scroller-container:after{content:" ";display:table}.photo-modal .grid-scroller-container:after{clear:both}.photo-modal .grid-scroller-wrapper{zoom:1;width:100%}.photo-modal .grid-scroller-wrapper:before,.photo-modal .grid-scroller-wrapper:after{content:" ";display:table}.photo-modal .grid-scroller-wrapper:after{clear:both}.photo-modal .grid-scroller-wrapper.with-scrolling{overflow-x:hidden;-webkit-overflow-scrolling:touch}.photo-modal .grid-scroller-row{zoom:1;width:5900px}.photo-modal .grid-scroller-row:before,.photo-modal .grid-scroller-row:after{content:" ";display:table}.photo-modal .grid-scroller-row:after{clear:both}.photo-modal .grid-scroller-column{float:left}.infinite-scroll{zoom:1;text-align:center;padding:1rem 0}.infinite-scroll:before,.infinite-scroll:after{content:" ";display:table}.infinite-scroll:after{clear:both}.infinite-scroll-button{border-radius:3px;border:1px solid rgba(0,0,0,.08);padding:.5rem 2rem .5rem 1rem;position:relative}.infinite-scroll-button:hover{background:rgba(0,0,0,.05)}.infinite-scroll-button:after{content:"\e60b";position:absolute;right:.5rem}.infinite-scroll-loader{text-align:center}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-o-keyframes spin{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.spinner{height:50px;width:50px;margin:0 auto;position:relative;-webkit-animation:spin .6s infinite linear;-moz-animation:spin .6s infinite linear;-o-animation:spin .6s infinite linear;animation:spin .6s infinite linear;border-left:3px solid rgba(0,0,0,.12);border-right:3px solid rgba(0,0,0,.12);border-bottom:3px solid rgba(0,0,0,.12);border-top:3px solid #da3743;border-radius:100%}.circle-loaders{zoom:1;display:inline-block}.circle-loaders:before,.circle-loaders:after{content:" ";display:table}.circle-loaders:after{clear:both}.circle-loader{background-color:rgba(0,0,0,.12);border-radius:50%;width:.625rem;height:.625rem;float:left;margin-right:.625rem;-webkit-animation:bgcolor 1200ms infinite;-moz-animation:bgcolor 1200ms infinite;-o-animation:bgcolor 1200ms infinite;animation:bgcolor 1200ms infinite}.circle-loader-2{-webkit-animation-delay:300ms;-moz-animation-delay:300ms;-o-animation-delay:300ms;animation-delay:300ms}.circle-loader-3{-webkit-animation-delay:600ms;-moz-animation-delay:600ms;-o-animation-delay:600ms;animation-delay:600ms}@-webkit-keyframes bgcolor{0%{background:rgba(0,0,0,.12)}49.9%{background:rgba(0,0,0,.12)}50%{background:#da3743}}@-moz-keyframes bgcolor{0%{background:rgba(0,0,0,.12)}49.9%{background:rgba(0,0,0,.12)}50%{background:#da3743}}@-o-keyframes bgcolor{0%{background:rgba(0,0,0,.12)}49.9%{background:rgba(0,0,0,.12)}50%{background:#da3743}}@keyframes bgcolor{0%{background:rgba(0,0,0,.12)}49.9%{background:rgba(0,0,0,.12)}50%{background:#da3743}}.lb-v-dummy{width:100%;display:block;height:1px}.lb-h-dummy{height:100%;display:block;width:1px}.lb-clear{clear:both}.lb-wrap{z-index:0;overflow:auto;position:relative}.lb-v-scrollbar{z-index:1;position:absolute;right:2px;top:2px;width:.5rem;height:100%;background:rgba(0,0,0,.12);border-radius:.5rem;cursor:pointer}.lb-v-scrollbar-slider{position:absolute;width:.5rem;height:50px;left:0;top:0;background:rgba(0,0,0,.2);border-radius:.5rem;cursor:pointer}.lb-h-scrollbar{z-index:1;position:absolute;bottom:2px;left:2px;width:100%;height:.5rem;background:rgba(0,0,0,.12);border-radius:.5rem}.lb-h-scrollbar-slider{position:absolute;height:.5rem;width:50px;left:0;top:0;background:rgba(0,0,0,.2);border-radius:.5rem}.litebox{position:fixed;top:50%;left:50%;background:#FFF;padding:8px 15px;border:1px solid #b8b4ac;border-radius:12px;-webkit-box-shadow:2px 2px 7px rgba(0,0,0,.3);box-shadow:2px 2px 7px rgba(0,0,0,.3);z-index:4000;display:none;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#000}.litebox .litebox-header{min-height:16px;padding:7px;overflow:hidden}.litebox .litebox-header .close{cursor:pointer;float:right}.litebox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.55);z-index:3999;display:none}ul.standard-list-style{margin:0 0 0 2rem;padding:0}ul.standard-list-style li{list-style:initial;margin-bottom:.5rem}.content-with-standard-lists ul{margin:0 0 0 2rem;padding:0}.content-with-standard-lists ul li{list-style:initial;margin-bottom:.5rem}.modal-container{background-color:rgba(245,245,245,.96);position:fixed;top:0;left:0;width:100%;height:100%;z-index:3000;display:none;overflow-y:auto;overflow-x:hidden}.modal-container .modal-content{position:absolute;right:0;bottom:0;top:0;left:0;margin:auto}.modal-container .modal-close{position:absolute;right:1rem;top:1rem;cursor:pointer}.modal-container .modal-close:before{content:"\e625"}.modal-open{overflow:hidden}.map-info-window{padding:6px;background-color:#FFF;width:320px!important;border-radius:3px;-webkit-box-shadow:0 10px 28px rgba(0,0,0,.3);box-shadow:0 10px 28px rgba(0,0,0,.3)}.map-info-window .rest-row-name{line-height:18px;margin-bottom:2px}.map-info-window .rest-row-name a{color:#333}.map-info-window:after{top:100%;left:50%;content:'';height:0;width:0;position:absolute;pointer-events:none;border-style:solid;border-color:#FFF transparent transparent;border-width:6px;margin-left:-6px}.map-popup{zoom:1;font-family:franklin-gothic-urw,Arial,Helvetica Neue,Helvetica,sans-serif}.map-popup:before,.map-popup:after{content:" ";display:table}.map-popup:after{clear:both}html:lang(ja) .map-popup{font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Roboto,Droid Sans,"游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif}.map-popup .rest-row{padding:0!important}.map-popup .rest-row-info{padding-bottom:0!important;margin-bottom:0!important}/*!

# Menus

NB. The inline `height:120px;margin-top:80px;` and `.menu-hover-wrapper` class are only required in this styleguide.

```
<style>
  .menu-hover-wrapper {
    padding: 0.5rem 0;
    margin: 0 3rem;
  }
</style>
<div style="height:120px;margin-top:80px;">
  <span class="menu-hover-wrapper">
    <a href="#">show things</a>
    <div class="menu menu-opened">
      <div class="menu-container">
        <div class="menu-main">
          <div class="menu-section with-padding">Here's an item.</div>
          <div class="menu-section with-padding">In the default menu.</div>
        </div>
      </div>
    </div>
  </span>

  <span class="menu-hover-wrapper">
    <a href="#">show things</a>
    <div class="menu menu-opened menu-top">
      <div class="menu-container">
        <div class="menu-main">
          <div class="menu-section with-padding">Here's an item.</div>
          <div class="menu-section with-padding">In a menu-top.</div>
        </div>
      </div>
    </div>
  </span>

  <span class="menu-hover-wrapper">
    <a href="#">show things</a>
    <div class="menu menu-opened menu-right">
      <div class="menu-container">
        <div class="menu-main">
          <div class="menu-section with-padding">Here's an item.</div>
          <div class="menu-section with-padding">In a menu-right.</div>
        </div>
      </div>
    </div>
  </span>

  <span class="menu-hover-wrapper">
    <a href="#">show things</a>
    <div class="menu menu-opened menu-left">
      <div class="menu-container">
        <div class="menu-main">
          <div class="menu-section with-padding">Here's an item.</div>
          <div class="menu-section with-padding">In a menu-left.</div>
        </div>
      </div>
    </div>
  </span>
</div>
```

*/.menu-wrapper{position:relative}.menu-hover-wrapper{position:relative}.menu{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#333;position:absolute;z-index:100;width:100%;top:90%;left:0}.menu:before{content:'';display:block;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);overflow:hidden;-webkit-transform:translateY(-1em) perspective(600px) rotateX(0);-moz-transform:translateY(-1em) perspective(600px) rotateX(0);transform:translateY(-1em) perspective(600px) rotateX(0);-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out;transition:transform .15s ease-out,opacity .15s ease-out}.menu.menu-opened:before{z-index:100;width:20px;background-image:url(//media.otstatic.com/img/menu-arrow-07a3806ef6a9dd42e7c852c3a17b60c6.png);height:8px;position:absolute;top:-6px;left:.5rem;-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter:alpha(opacity=1);-webkit-transform:translateY(0) perspective(600px) rotateX(0);-moz-transform:translateY(0) perspective(600px) rotateX(0);transform:translateY(0) perspective(600px) rotateX(0);-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out;transition:transform .15s ease-out,opacity .15s ease-out}.menu-hover-wrapper .menu{top:100%}.menu.menu-top{top:auto;bottom:90%}.menu.menu-top.menu-outside{top:-2px;bottom:auto}.menu.menu-top:before{background:url(//media.otstatic.com/img/menu-arrow-down-c4b416d70449cb3fb1849b891a292c7c.png);top:auto;bottom:-6px}.menu-hover-wrapper .menu.menu-top{bottom:100%}.menu.menu-top .menu-container{top:auto;bottom:0}.menu.menu-left{left:100%;right:auto;margin-left:1rem;top:0}.menu.menu-left:before{position:absolute;top:8px;left:-12px;-webkit-transform:translateX(1em) perspective(600px) rotate(-90deg);-moz-transform:translateX(1em) perspective(600px) rotate(-90deg);transform:translateX(1em) perspective(600px) rotate(-90deg)}.menu.menu-left.menu-opened:before{-webkit-transform:translateX(0) perspective(600px) rotate(-90deg);-moz-transform:translateX(0) perspective(600px) rotate(-90deg);transform:translateX(0) perspective(600px) rotate(-90deg)}.menu-container{zoom:1;-webkit-opacity:0;-moz-opacity:0;opacity:0;position:absolute;min-width:9.375rem;max-height:0;overflow:hidden;-webkit-transform:translateY(-1em) perspective(600px) rotateX(0);-moz-transform:translateY(-1em) perspective(600px) rotateX(0);transform:translateY(-1em) perspective(600px) rotateX(0);-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s;transition:transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s .15s}.menu-container:before,.menu-container:after{content:" ";display:table}.menu-container:after{clear:both}.menu-opened .menu-container{-webkit-opacity:1;-moz-opacity:1;opacity:1;max-height:70rem;-webkit-transform:translateY(0) perspective(600px) rotateX(0);-moz-transform:translateY(0) perspective(600px) rotateX(0);transform:translateY(0) perspective(600px) rotateX(0);-webkit-transition:-webkit-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s;-moz-transition:-moz-transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s;transition:transform .15s ease-out,opacity .15s ease-out,position .15s ease-out,max-height 0s}.menu-main{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:2px;border-radius:3px;zoom:1}.menu-main:before,.menu-main:after{content:" ";display:table}.menu-main:after{clear:both}.menu-center:before{left:50%;margin-left:-10px}.menu-right.menu-opened:before{left:auto;right:.45rem}.menu-right .menu-container{right:0}.menu-divider{height:1px;width:100%;background:rgba(0,0,0,.08);margin:0;outline:0;border:0}.menu-header{padding:1rem;border-bottom:1px solid rgba(0,0,0,.12)}.menu-header.with-rows{margin:0 -1rem}.menu-sub-header{text-transform:uppercase;color:#666;font-size:.875rem;padding:1rem;border-bottom:1px solid rgba(0,0,0,.12);white-space:nowrap;font-weight:500}.menu-body{zoom:1}.menu-body:before,.menu-body:after{content:" ";display:table}.menu-body:after{clear:both}.menu-footer{border-top:1px solid rgba(0,0,0,.12);padding:1rem}.menu-footer p:last-child{margin-bottom:0}.menu-section{zoom:1;width:100%;max-height:350px}.menu-section:before,.menu-section:after{content:" ";display:table}.menu-section:after{clear:both}.menu-section.with-padding{padding:.8rem 1rem}.menu-section-header,.menu-section-body{padding:1rem 1.5rem}.menu-section-header.with-rows,.menu-section-body.with-rows{padding-left:.5rem;padding-right:.5rem}.menu-section-header{padding-bottom:0}.menu-section-header h1,.menu-section-header h2,.menu-section-header h3,.menu-section-header h4,.menu-section-header h5{margin:0}.menu-list.with-arrows .menu-list-link{padding-right:3rem}.menu-list.with-arrows .menu-list-link:after{content:"\e60d";display:block;position:absolute;top:.85rem;right:1.2rem;font-size:.875rem}.menu-list.with-meta .menu-list-link{padding-right:20%}.menu-list-link{color:#666!important;display:block;padding:.8rem 1rem;position:relative}.menu-list-link:hover{color:#333!important;background:rgba(0,0,0,.03)}.menu-list-selectors .menu-list-link{color:#999!important;border-left:3px solid transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-list-selectors .menu-list-link:hover,.menu-list-selectors .menu-list-link.selected{color:#559ebe!important;background:#eef4fb;border-color:#559ebe}.menu-list-selectors .menu-list-link:hover:after,.menu-list-selectors .menu-list-link.selected:after{color:#559ebe}.menu-list-selectors .menu-list-link.selected{font-weight:500}.menu-list-selectors .menu-list-link.selected .menu-list-link-meta{font-weight:400}.menu-list-link-meta{position:absolute;right:0;width:20%;text-align:right;padding-right:1rem;font-size:.875rem;line-height:1.3}.menu-list-base-link{display:block;padding:.8rem 1rem;border-top:1px solid rgba(0,0,0,.08)}.menu-list-label{display:block;padding:.8rem 3rem .8rem 1rem;white-space:nowrap;margin:0;font-size:1rem;line-height:1;position:relative;width:100%}.menu-list-label:hover{background:rgba(0,0,0,.05);cursor:pointer}.menu-list-label.highlight{background:#da3743;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.menu-list-label.highlight:after{content:"\e61f";position:absolute;right:1rem;top:45%;line-height:0}.menu-list-input{margin:0;margin-right:1rem;opacity:0;display:none}@media(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx){.menu:before{background-image:url(//media.otstatic.com/img/menu-arrow@2x-a571b700457fa13101b46cdc28f46935.png)!important;background-size:100%}.menu.menu-top:before{background-image:url(//media.otstatic.com/img/menu-arrow-down@2x-452f484f4aa511c52951d405815af6e3.png)!important;background-size:100%}}/*!

# Menus

xxx

```
<style>
  .ot-menu-hover-wrapper {
    position: relative;
    margin: 0 6rem;
  }
  .ot-menu-row {
    padding: 1rem;
  }
</style>
<button onclick='Array.prototype.forEach.call(document.querySelectorAll(".ot-menu"), function(menu) {menu.classList.toggle("ot-menu-opened");});'>Toggle Menus</button>
<div style="height:120px;margin-top:80px;">
  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="left" data-arrow-alignment="top">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>

  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="left" data-arrow-alignment="bottom">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>

  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="top" data-arrow-alignment="left">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
    <div class="ot-menu ot-menu-opened" data-alignment="bottom" data-arrow-alignment="left">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>

  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="top" data-arrow-alignment="right">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
    <div class="ot-menu ot-menu-opened" data-alignment="bottom" data-arrow-alignment="right">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>
</div>

<div style="height:120px;margin-top:80px;">
  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="right" data-arrow-alignment="top">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>

  <span class="ot-menu-hover-wrapper">
    <a href="#">Show Things</a>
    <div class="ot-menu ot-menu-opened" data-alignment="right" data-arrow-alignment="bottom">
      <div class="ot-menu-content-wrapper">
        <div class="ot-menu-row">xx</div>
        <div class="ot-menu-row">xx</div>
      </div>
    </div>
  </span>
</div>
```

*/.ot-menu{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;z-index:100;-webkit-opacity:0;-moz-opacity:0;opacity:0;max-height:0;visibility:hidden;-webkit-transition:-webkit-transform .15s ease-out,visibility 0s ease-out .15s,opacity .15s ease-out,max-height .15s ease-out;-moz-transition:-moz-transform .15s ease-out,visibility 0s ease-out .15s,opacity .15s ease-out,max-height .15s ease-out;transition:transform .15s ease-out,visibility 0s ease-out .15s,opacity .15s ease-out,max-height .15s ease-out}.ot-menu.ot-menu-opened{-webkit-opacity:1;-moz-opacity:1;opacity:1;max-height:70rem;visibility:visible;-webkit-transition-delay:0s,0s;-moz-transition-delay:0s,0s;transition-delay:0s,0s}.ot-menu[data-alignment="left"][data-arrow-alignment="top"]{top:-1rem;right:100%;padding-right:1rem;-webkit-transform:translate(-1em,0);-moz-transform:translate(-1em,0);-ms-transform:translate(-1em,0);transform:translate(-1em,0)}.ot-menu[data-alignment="left"][data-arrow-alignment="top"]:before,.ot-menu[data-alignment="left"][data-arrow-alignment="top"]:after{top:1rem;right:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="left"][data-arrow-alignment="top"]:before{margin-bottom:-1px;margin-top:-1px;margin-right:-1px;border-bottom:11px solid transparent;border-top:11px solid transparent;border-left:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="left"][data-arrow-alignment="top"]:after{border-bottom:10px solid transparent;border-top:10px solid transparent;border-left:8px solid #fff}.ot-menu[data-alignment="left"][data-arrow-alignment="top"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"]{bottom:-1rem;right:100%;padding-right:1rem;-webkit-transform:translate(-1em,0);-moz-transform:translate(-1em,0);-ms-transform:translate(-1em,0);transform:translate(-1em,0)}.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"]:before,.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"]:after{bottom:1rem;right:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"]:before{margin-bottom:-1px;margin-top:-1px;margin-right:-1px;border-bottom:11px solid transparent;border-top:11px solid transparent;border-left:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"]:after{border-bottom:10px solid transparent;border-top:10px solid transparent;border-left:8px solid #fff}.ot-menu[data-alignment="left"][data-arrow-alignment="bottom"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="right"][data-arrow-alignment="top"]{top:-1rem;left:100%;padding-left:1rem;-webkit-transform:translate(1em,0);-moz-transform:translate(1em,0);-ms-transform:translate(1em,0);transform:translate(1em,0)}.ot-menu[data-alignment="right"][data-arrow-alignment="top"]:before,.ot-menu[data-alignment="right"][data-arrow-alignment="top"]:after{top:1rem;left:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="right"][data-arrow-alignment="top"]:before{margin-top:-1px;margin-bottom:-1px;margin-left:-1px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="right"][data-arrow-alignment="top"]:after{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:8px solid #fff}.ot-menu[data-alignment="right"][data-arrow-alignment="top"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"]{bottom:-1rem;left:100%;padding-left:1rem;-webkit-transform:translate(1em,0);-moz-transform:translate(1em,0);-ms-transform:translate(1em,0);transform:translate(1em,0)}.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"]:before,.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"]:after{bottom:1rem;left:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"]:before{margin-top:-1px;margin-bottom:-1px;margin-left:-1px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"]:after{border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:8px solid #fff}.ot-menu[data-alignment="right"][data-arrow-alignment="bottom"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="top"][data-arrow-alignment="left"]{bottom:100%;padding-bottom:1rem;left:-1rem;-webkit-transform:translate(0,-1em);-moz-transform:translate(0,-1em);-ms-transform:translate(0,-1em);transform:translate(0,-1em)}.ot-menu[data-alignment="top"][data-arrow-alignment="left"]:before,.ot-menu[data-alignment="top"][data-arrow-alignment="left"]:after{left:1rem;bottom:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="top"][data-arrow-alignment="left"]:before{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="top"][data-arrow-alignment="left"]:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:8px solid #fff}.ot-menu[data-alignment="top"][data-arrow-alignment="left"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="top"][data-arrow-alignment="right"]{bottom:100%;padding-bottom:1rem;right:-1rem;-webkit-transform:translate(0,-1em);-moz-transform:translate(0,-1em);-ms-transform:translate(0,-1em);transform:translate(0,-1em)}.ot-menu[data-alignment="top"][data-arrow-alignment="right"]:before,.ot-menu[data-alignment="top"][data-arrow-alignment="right"]:after{right:1rem;bottom:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="top"][data-arrow-alignment="right"]:before{margin-left:-1px;margin-right:-1px;margin-bottom:-1px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="top"][data-arrow-alignment="right"]:after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:8px solid #fff}.ot-menu[data-alignment="top"][data-arrow-alignment="right"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"]{top:100%;padding-top:1rem;left:-1rem;-webkit-transform:translate(0,1em);-moz-transform:translate(0,1em);-ms-transform:translate(0,1em);transform:translate(0,1em)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"]:before,.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"]:after{left:1rem;top:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"]:before{margin-right:-1px;margin-left:-1px;margin-top:-1px;border-right:11px solid transparent;border-left:11px solid transparent;border-bottom:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"]:after{border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:8px solid #fff}.ot-menu[data-alignment="bottom"][data-arrow-alignment="left"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"]{top:100%;padding-top:1rem;right:-1rem;-webkit-transform:translate(0,1em);-moz-transform:translate(0,1em);-ms-transform:translate(0,1em);transform:translate(0,1em)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"]:before,.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"]:after{right:1rem;top:10px;content:'';display:block;position:absolute;width:0;height:0}.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"]:before{margin-right:-1px;margin-left:-1px;margin-top:-1px;border-right:11px solid transparent;border-left:11px solid transparent;border-bottom:9px solid rgba(0,0,0,.15)}.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"]:after{border-right:10px solid transparent;border-left:10px solid transparent;border-bottom:8px solid #fff}.ot-menu[data-alignment="bottom"][data-arrow-alignment="right"].ot-menu-opened{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.ot-menu-content-wrapper{overflow:hidden;min-width:9.375rem;background:#fff;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:2px;border-radius:3px}/*!

# Pagination (first page)

```
<div class="pagination-container">
<ul class="pagination">
  <li class="pagination-li"><a class="pagination-link pagination-current" href="#">1</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">2</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">3</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">4</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">5</a></li>
  <li class="pagination-li pagination-spacer">&hellip;</li>
  <li class="pagination-li"><a class="pagination-link" href="#">18</a></li>
  <li class="pagination-li pagination-arrow pagination-arrow-next"><a class="pagination-link pagination-next" href="#">Next</a></li>
</ul>
</div>

```

# Pagination (page half-way)

```
<div class="pagination-container">
<ul class="pagination">
  <li class="pagination-li pagination-arrow pagination-arrow-prev"><a class="pagination-link pagination-prev" href="#">Previous</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">1</a></li>
  <li class="pagination-li"><a class="pagination-link pagination-current" href="#">2</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">3</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">4</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">5</a></li>
  <li class="pagination-li pagination-spacer">&hellip;</li>
  <li class="pagination-li"><a class="pagination-link" href="#">18</a></li>
  <li class="pagination-li pagination-arrow pagination-arrow-next"><a class="pagination-link pagination-next" href="#">Next</a></li>
</ul>
</div>

```

# Pagination (last page)

```
<div class="pagination-container">
<ul class="pagination">
  <li class="pagination-li pagination-arrow pagination-arrow-prev"><a class="pagination-link pagination-prev" href="#">Previous</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">1</a></li>
  <li class="pagination-li pagination-spacer">&hellip;</li>
  <li class="pagination-li"><a class="pagination-link" href="#">14</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">15</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">16</a></li>
  <li class="pagination-li"><a class="pagination-link" href="#">17</a></li>
  <li class="pagination-li"><a class="pagination-link pagination-current" href="#">18</a></li>
</ul>
</div>

```


*/.pagination{zoom:1;min-height:2rem;text-align:center}.pagination:before,.pagination:after{content:" ";display:table}.pagination:after{clear:both}.pagination-li{display:none;margin:0 .25rem}.pagination-arrow{display:inline-block;position:relative}.pagination-arrow-prev{position:absolute;left:1.5rem}.pagination-arrow-next{position:absolute;right:1.5rem}.pagination-link{display:block;position:relative;padding:.5rem 1rem;cursor:pointer;color:#559ebe}.pagination-link:hover{color:#3e84a2}.pagination-link.pagination-unavailable{color:#999;cursor:default}.pagination-link.pagination-unavailable:hover{background:none}.pagination-link.pagination-current{color:#333;cursor:default}.pagination-link.pagination-current:hover{background:none}.pagination-prev{padding-left:1.5rem;border:none}.pagination-prev:before{content:"\e60a";font-size:.9em;left:0;position:absolute;top:.5625rem}.pagination-prev:hover{background:none}.pagination-next{padding-right:1.5rem;border:none}.pagination-next:before{content:"\e60d";font-size:.9em;position:absolute;right:0;top:.5625rem}.pagination-next:hover{background:none}.pagination-spacer{color:#999;cursor:default}@media only screen and (min-width:40.063em){.pagination-li{display:inline-block}}@media only screen and (min-width:40.063em){.medium-left{float:left}.medium-right{float:right}}@media only screen and (min-width:64.063em){.large-left{float:left}.large-right{float:right}}.price-rating{zoom:1}.price-rating:before,.price-rating:after{content:" ";display:table}.price-rating:after{clear:both}.price-rating-tier{color:rgba(0,0,0,.2);letter-spacing:.06em}.price-rating-tier:after{content:"$"}.domain-couk .price-rating-tier:after{content:"£"}.domain-jp .price-rating-tier:after{content:"¥"}.domain-de .price-rating-tier:after{content:"€"}.price-rating-tier.on{color:#333}/*!

# Site alert banner

NB. The inline `position:relative;top:0;` is only required in this styleguide.

```
<div class="site-alert start-offscreen" id="site-alert" style="position:relative;top:0;">
  <p>We've got a fresh new look!<a class="margin-left-small" id="tour-link" href="/m/otnewlook/">Take a Tour <span class="text-arrow-right"></span></a></p>
  <div class="site-alert-close icon-close" id="site-alert-close"></div>
</div>
```

*/body.animate-alert .master-container,body.animate-alert .site-alert{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}.site-alert{background:#333;color:#CCC;padding:.75em 1rem;position:absolute;top:0;left:0;width:100%;z-index:2999;padding-left:2.25rem;padding-right:2.25rem;height:48px;overflow:hidden}.site-alert p{margin-bottom:0}.site-alert p a{color:#FFF}.site-alert.start-offscreen{top:-48px}body.show-site-alert .site-alert{top:0}body.show-site-alert .master-container{padding-top:48px}.site-alert-close{position:absolute;top:0;right:0;cursor:pointer;height:48px;width:48px;display:block;text-align:center;line-height:48px}.padding{padding:1rem}.padding-top{padding-top:1rem}.padding-right{padding-right:1rem}.padding-bottom{padding-bottom:1rem}.padding-left{padding-left:1rem}.padding-small{padding:.5rem}.padding-top-small{padding-top:.5rem}.padding-right-small{padding-right:.5rem}.padding-bottom-small{padding-bottom:.5rem}.padding-left-small{padding-left:.5rem}.padding-medium{padding:1.5rem}.padding-top-medium{padding-top:1.5rem}.padding-right-medium{padding-right:1.5rem}.padding-bottom-medium{padding-bottom:1.5rem}.padding-left-medium{padding-left:1.5rem}.padding-large{padding:2rem}.padding-top-large{padding-top:2rem}.padding-right-large{padding-right:2rem}.padding-bottom-large{padding-bottom:2rem}.padding-left-large{padding-left:2rem}.padding-xlarge{padding:3rem}.padding-top-xlarge{padding-top:3rem}.padding-right-xlarge{padding-right:3rem}.padding-bottom-xlarge{padding-bottom:3rem}.padding-left-xlarge{padding-left:3rem}.no-padding{padding:0!important}.no-padding-top{padding-top:0!important}.no-padding-right{padding-right:0!important}.no-padding-bottom{padding-bottom:0!important}.no-padding-left{padding-left:0!important}.margin{margin:1rem}.margin-top{margin-top:1rem}.margin-right{margin-right:1rem}.margin-bottom{margin-bottom:1rem}.margin-left{margin-left:1rem}.margin-small{margin:.5rem}.margin-top-small{margin-top:.5rem}.margin-right-small{margin-right:.5rem}.margin-bottom-small{margin-bottom:.5rem}.margin-left-small{margin-left:.5rem}.margin-medium{margin:1.5rem}.margin-top-medium{margin-top:1.5rem}.margin-right-medium{margin-right:1.5rem}.margin-bottom-medium{margin-bottom:1.5rem}.margin-left-medium{margin-left:1.5rem}.margin-large{margin:2rem}.margin-top-large{margin-top:2rem}.margin-right-large{margin-right:2rem}.margin-bottom-large{margin-bottom:2rem}.margin-left-large{margin-left:2rem}.margin-xlarge{margin:3rem}.margin-top-xlarge{margin-top:3rem}.margin-right-xlarge{margin-right:3rem}.margin-bottom-xlarge{margin-bottom:3rem}.margin-left-xlarge{margin-left:3rem}.no-margin{margin:0!important}.no-margin-top{margin-top:0!important}.no-margin-right{margin-right:0!important}.no-margin-bottom{margin-bottom:0!important}.no-margin-left{margin-left:0!important}/*!

# Star ratings from Start page

```
<div class="star-rating">
  <div class="star-wrapper small">
    <div class="all-stars"></div>
      <div class="all-stars filled" style="width: 92.6%;"></div>
    </div>
  <span class="star-rating-text">(27)</span>
</div>
```

*/.star-rating{zoom:1}.star-rating:before,.star-rating:after{content:" ";display:table}.star-rating:after{clear:both}.star-rating .average-text{font-size:.875rem;display:inline-block;margin-left:.5rem}.star-rating-star{float:left;color:rgba(0,0,0,.12);position:relative}.star-rating-star:before{content:"\e61e"}.star-rating-star.on{color:#feab6c}.star-rating-star.half:after{content:"\e61e";color:#feab6c;top:0;left:0;position:absolute;width:50%;overflow:hidden}.star-rating-text{font-size:.875rem;margin-left:.5rem;line-height:1.2em}.star-rating-text.no-star-rating{margin-left:0}.star-wrapper{position:relative;float:left;height:1.2rem;width:6rem;font-size:1.2rem}.star-wrapper.small{height:1rem;width:5rem;font-size:1rem}.star-wrapper.small .all-stars{height:1rem}.star-wrapper .all-stars{position:absolute;top:0;left:0;color:rgba(0,0,0,.12);height:1.2rem}.star-wrapper .all-stars:before{font-family:icons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\e61e\e61e\e61e\e61e\e61e"}.star-wrapper .all-stars.filled{color:#feab6c;overflow:hidden}table.full-width{width:100%}table.with-padding tr>td{padding:.5rem 1rem}table.with-padding tr>td:first-child{padding-left:0}table.with-padding tr>td:last-child{padding-right:0}/*!

# Links

_Inline styles are for styleguide presentation only_

```
<a style="display:block;">Default link</a>
<a class="secondary" style="display:block;">Secondary link</a>
<a class="inactive" style="display:block;">Disabled link</a>
```

# Headings

```
<h1>H1 header</h1>
<h2>H2 header</h2>
<h3>H3 header</h3>
<h4>H4 header</h4>
<h5>H5 header</h5>
```

# Paragraph

```
<p>There are three parking lots within half a block of the restaurant. Street parking is also often available (meters free after 6pm). Valet parking is available Tuesday through Saturday and during Giants home games.</p>
```
*/div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0}a{color:#da3743;text-decoration:none;line-height:inherit}a:hover,a:focus{color:#bb232f}a img{border:none}a.secondary{color:#559ebe}a.secondary:hover{color:#3e84a2}a.subtle{color:#666}a.subtle:hover{color:#000}a.inactive{color:#999}a.inactive:hover{color:#999}a.transparent{color:rgba(255,255,255,.6)}a.transparent:hover{color:rgba(229,229,229,.6)}p{line-height:1.5em;margin-bottom:.5rem;text-rendering:optimizeLegibility}hgroup{margin-bottom:.5rem}h1,h2,h3,h4,h5,h6{font-weight:100;text-rendering:optimizeLegibility;line-height:1.2em;color:#333;margin:0 0 .2rem;line-height:1em}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#666;line-height:0}h1{font-size:2.25rem;line-height:1}h2{font-size:2rem;line-height:1}h3{font-size:1.5rem;line-height:1.165}h4{font-size:1.3rem;line-height:1.15}h5{font-size:1rem;line-height:1.3}h6{color:#999;font-size:.875rem;font-weight:500;line-height:1.5;text-transform:uppercase}hr{border:1px solid rgba(0,0,0,.12);border-width:1px 0 0;clear:both;margin:.5rem 0;height:0}em,i{font-style:italic;line-height:inherit}strong,b{font-weight:600;line-height:inherit}small{font-size:.875rem;line-height:inherit}blockquote{margin:0 0 .5rem;padding:0;border:none;line-height:1.2em}blockquote p{margin-bottom:.5rem}blockquote cite{display:block;font-size:.875rem;color:#999}.font-size-tiny{font-size:.675rem}.font-size-small{font-size:.875rem}.font-size-medium{font-size:1.075rem}.font-size-large{font-size:1.2rem}.font-weight-light{font-weight:100}.font-weight-medium{font-weight:500}.font-weight-bold{font-weight:600}.font-weight-bolder{font-weight:700}.color-primary{color:#da3743}.color-secondary{color:#559ebe}.color-white{color:#fff}.color-dark{color:#333}.color-medium{color:#666}.color-light{color:#999}.text-arrow-down-small:after{content:"\e60b";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-down:after{content:"\e60b";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-down-large:after{content:"\e60b";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-up-small:after{content:"\e60c";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-up:after{content:"\e60c";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-up-large:after{content:"\e60c";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem}.text-arrow-right-small:after{content:"\e60d";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-right:after{content:"\e60d";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-right-large:after{content:"\e60d";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left-small:after{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left:after{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left-large:after{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left-before-small:before{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left-before:before{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-arrow-left-before-large:before{content:"\e60a";position:relative;top:.05rem;right:-.25rem;margin:0;font-size:.8rem;top:0}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}@media only screen and (max-width:40em){.small-only-text-left{text-align:left!important}.small-only-text-right{text-align:right!important}.small-only-text-center{text-align:center!important}.small-only-text-justify{text-align:justify!important}}@media only screen{.small-text-left{text-align:left!important}.small-text-right{text-align:right!important}.small-text-center{text-align:center!important}.small-text-justify{text-align:justify!important}}@media only screen and (min-width:40.063em)and (max-width:64em){.medium-only-text-left{text-align:left!important}.medium-only-text-right{text-align:right!important}.medium-only-text-center{text-align:center!important}.medium-only-text-justify{text-align:justify!important}}@media only screen and (min-width:40.063em){.medium-text-left{text-align:left!important}.medium-text-right{text-align:right!important}.medium-text-center{text-align:center!important}.medium-text-justify{text-align:justify!important}}@media only screen and (min-width:64.063em)and (max-width:90em){.large-only-text-left{text-align:left!important}.large-only-text-right{text-align:right!important}.large-only-text-center{text-align:center!important}.large-only-text-justify{text-align:justify!important}}@media only screen and (min-width:64.063em){.large-text-left{text-align:left!important}.large-text-right{text-align:right!important}.large-text-center{text-align:center!important}.large-text-justify{text-align:justify!important}}@media only screen and (min-width:90.063em)and (max-width:120em){.xlarge-only-text-left{text-align:left!important}.xlarge-only-text-right{text-align:right!important}.xlarge-only-text-center{text-align:center!important}.xlarge-only-text-justify{text-align:justify!important}}@media only screen and (min-width:90.063em){.xlarge-text-left{text-align:left!important}.xlarge-text-right{text-align:right!important}.xlarge-text-center{text-align:center!important}.xlarge-text-justify{text-align:justify!important}}@media only screen and (min-width:120.063em)and (max-width:99999999em){.xxlarge-only-text-left{text-align:left!important}.xxlarge-only-text-right{text-align:right!important}.xxlarge-only-text-center{text-align:center!important}.xxlarge-only-text-justify{text-align:justify!important}}@media only screen and (min-width:120.063em){.xxlarge-text-left{text-align:left!important}.xxlarge-text-right{text-align:right!important}.xxlarge-text-center{text-align:center!important}.xxlarge-text-justify{text-align:justify!important}}.print-only{display:none}@media print{*{background:transparent!important;color:#000;box-shadow:none;text-shadow:none}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}.hide-on-print{display:none!important}.print-only{display:block!important}.hide-for-print{display:none!important}.show-for-print{display:inherit!important}}/*!

# Twitter's Typeahead.js

```
<div class="dtp-picker with-search">
  <form class="dtp-picker-form">
    <div class="dtp-picker-search-container">
      <div class="dtp-picker-search-icon icon-search"></div>
      <div class="twitter-typeahead" style="position: relative; width: 468px; margin-bottom: 500px;">
        <input type="text" name="searchText" value="" placeholder="Location or Restaurant" data-bind="" class="dtp-picker-search tt-input" autocomplete="off" spellcheck="false" dir="auto">
        <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: block; right: auto;">
          <div class="tt-dataset-Instruction">
            <div class="tt-instruction-header tt-instruction-header-type-a">
              <h4>Recommended Searches</h4>
              <span class="muted">Want inspiration? Try these nearby options.</span>
            </div>
          </div>
          <div class="tt-dataset-TrendingRestaurants">
            <h6 class="tt-header icon-building">
              <p>Trending Restaurants</p>
            </h6>
            <span class="tt-suggestions" style="display: block;">
              <div class="tt-suggestion">
                <p style="white-space: normal;">The French Laundry</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">Flour + Water</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">nopa</p>
              </div>
            </span>
            <div class="tt-footer"/>
          </div>
          <div class="tt-dataset-PopularCuisines">
            <h6 class="tt-header icon-cuisine">
              <p>Popular Cuisines</p>
            </h6>
            <span class="tt-suggestions" style="display: block;">
              <div class="tt-suggestion">
                <p style="white-space: normal;">Indian</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">Mexican</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">Sushi</p>
              </div>
            </span>
            <div class="tt-footer"/>
          </div>
          <div class="tt-dataset-Nearby">
            <h6 class="tt-header icon-location-mini">
              <p>Nearby</p>
            </h6>
            <span class="tt-suggestions" style="display: block;">
              <div class="tt-suggestion">
                <p style="white-space: normal;">Oakland</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">Financial District</p>
              </div>
              <div class="tt-suggestion">
                <p style="white-space: normal;">Berkeley</p>
              </div>
            </span>
            <div class="tt-footer"/>
          </div>
        </span>
      </div>
    </div>
  </form>
</div>
```

# And a slightly different design.

```
<div class="twitter-typeahead" style="position: relative; width: 468px; margin-bottom: 500px;">
  <input type="text" />
  <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: block; right: auto;">
    <div class="tt-dataset-Instruction">
      <div class="tt-instruction-header tt-instruction-header-type-b">
        <div class="icons">
          <span class="icon-restaurant-outline"></span>
          <span class="icon-cuisine-outline"></span>
          <span class="icon-map-outline"></span>
        </div>
        <p>You can enter local restaurants, neighborhoods, or cuisines; or any address, city, or zip code.</p>
      </div>
    </div>
  </span>
</div>
```

*/.tt-dropdown-menu{position:absolute;background:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border:1px solid rgba(0,0,0,.12);margin-top:-1px;min-width:100%;top:90%;display:none;color:#222;z-index:100}.tt-dropdown-menu [class*=tt-dataset-]{zoom:1;overflow:hidden;border-radius:3px}.tt-dropdown-menu [class*=tt-dataset-]:before,.tt-dropdown-menu [class*=tt-dataset-]:after{content:" ";display:table}.tt-dropdown-menu [class*=tt-dataset-]:after{clear:both}.tt-header,.tt-footer{position:relative;margin:0}.tt-header p,.tt-footer p{margin:0;padding:.5rem 1rem .5rem 3rem;font-size:.875rem;line-height:.875rem}.tt-header .before,.tt-header:before,.tt-footer .before,.tt-footer:before{position:absolute;left:1.2em;top:1rem}.tt-header .before .checkbox-flat,.tt-footer .before .checkbox-flat{margin-top:-8px}.tt-header{padding-top:.5rem}.tt-footer{padding-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}.tt-instruction-header{margin:0;padding:1rem 3rem}.tt-instruction-header .icons{font-size:2rem;padding:1rem;text-align:center}.tt-instruction-header .icons [class^=icon-],.tt-instruction-header .icons [class*=icon-]{padding:.75rem}.tt-instruction-header.tt-instruction-header-type-a{padding-top:1.5rem;padding-bottom:1.5rem;background-color:#f7f7f7}.tt-instruction-header.tt-instruction-header-type-a .muted{color:#999}.tt-instruction-header.tt-instruction-header-type-b,.tt-instruction-header.tt-instruction-header-type-c{margin-left:-.5rem;margin-right:-.5rem}.tt-dataset-Footer .tt-footer{padding-top:.5rem;background-color:#f7f7f7}.tt-hint{color:#666}.tt-suggestion p{margin:0;padding:.5rem 1rem .5rem 3rem;color:#666;font-size:1rem;line-height:1rem}.tt-suggestion p:hover,.tt-suggestion p:focus{color:#fff;background:#da3743;cursor:pointer}.tt-suggestion p:hover .muted,.tt-suggestion p:hover strong,.tt-suggestion p:focus .muted,.tt-suggestion p:focus strong{color:#fff}.tt-suggestion p strong{font-weight:500;color:#333}.tt-suggestion p .muted{font-size:.875rem;color:#999}.tt-suggestion.tt-cursor p{color:#fff;background:#da3743;cursor:pointer}.tt-suggestion.tt-cursor p strong{color:#fff}@media(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx){.tt-dropdown-menu:before{background-image:url(//media.otstatic.com/img/menu-arrow@2x-a571b700457fa13101b46cdc28f46935.png)!important;background-size:100%}}@media only screen{.show-for-small-only,.show-for-small-up,.hide-for-medium-only,.hide-for-medium-up,.hide-for-large-only,.hide-for-large-up,.hide-for-xlarge-only,.hide-for-xlarge-up,.hide-for-xxlarge-only,.hide-for-xxlarge-up{display:inherit!important}.hide-for-small-only,.hide-for-small-up,.show-for-medium-only,.show-for-medium-up,.show-for-large-only,.show-for-large-up,.show-for-xlarge-only,.show-for-xlarge-up,.show-for-xxlarge-only,.show-for-xxlarge-up{display:none!important}table.show-for-small-only,table.show-for-small-up,table.hide-for-medium-only,table.hide-for-medium-up,table.hide-for-large-only,table.hide-for-large-up,table.hide-for-xlarge-only,table.hide-for-xlarge-up,table.hide-for-xxlarge-only,table.hide-for-xxlarge-up{display:table}thead.show-for-small-only,thead.show-for-small-up,thead.hide-for-medium-only,thead.hide-for-medium-up,thead.hide-for-large-only,thead.hide-for-large-up,thead.hide-for-xlarge-only,thead.hide-for-xlarge-up,thead.hide-for-xxlarge-only,thead.hide-for-xxlarge-up{display:table-header-group!important}tbody.show-for-small-only,tbody.show-for-small-up,tbody.hide-for-medium-only,tbody.hide-for-medium-up,tbody.hide-for-large-only,tbody.hide-for-large-up,tbody.hide-for-xlarge-only,tbody.hide-for-xlarge-up,tbody.hide-for-xxlarge-only,tbody.hide-for-xxlarge-up{display:table-row-group!important}tr.show-for-small-only,tr.show-for-small-up,tr.hide-for-medium-only,tr.hide-for-medium-up,tr.hide-for-large-only,tr.hide-for-large-up,tr.hide-for-xlarge-only,tr.hide-for-xlarge-up,tr.hide-for-xxlarge-only,tr.hide-for-xxlarge-up{display:table-row!important}th.show-for-small-only,td.show-for-small-only,th.show-for-small-up,td.show-for-small-up,th.hide-for-medium-only,td.hide-for-medium-only,th.hide-for-medium-up,td.hide-for-medium-up,th.hide-for-large-only,td.hide-for-large-only,th.hide-for-large-up,td.hide-for-large-up,th.hide-for-xlarge-only,td.hide-for-xlarge-only,th.hide-for-xlarge-up,td.hide-for-xlarge-up,th.hide-for-xxlarge-only,td.hide-for-xxlarge-only,th.hide-for-xxlarge-up,td.hide-for-xxlarge-up{display:table-cell!important}}@media only screen and (min-width:40.063em){.hide-for-small-only,.show-for-small-up,.show-for-medium-only,.show-for-medium-up,.hide-for-large-only,.hide-for-large-up,.hide-for-xlarge-only,.hide-for-xlarge-up,.hide-for-xxlarge-only,.hide-for-xxlarge-up{display:inherit!important}.show-for-small-only,.hide-for-small-up,.hide-for-medium-only,.hide-for-medium-up,.show-for-large-only,.show-for-large-up,.show-for-xlarge-only,.show-for-xlarge-up,.show-for-xxlarge-only,.show-for-xxlarge-up{display:none!important}table.hide-for-small-only,table.show-for-small-up,table.show-for-medium-only,table.show-for-medium-up,table.hide-for-large-only,table.hide-for-large-up,table.hide-for-xlarge-only,table.hide-for-xlarge-up,table.hide-for-xxlarge-only,table.hide-for-xxlarge-up{display:table}thead.hide-for-small-only,thead.show-for-small-up,thead.show-for-medium-only,thead.show-for-medium-up,thead.hide-for-large-only,thead.hide-for-large-up,thead.hide-for-xlarge-only,thead.hide-for-xlarge-up,thead.hide-for-xxlarge-only,thead.hide-for-xxlarge-up{display:table-header-group!important}tbody.hide-for-small-only,tbody.show-for-small-up,tbody.show-for-medium-only,tbody.show-for-medium-up,tbody.hide-for-large-only,tbody.hide-for-large-up,tbody.hide-for-xlarge-only,tbody.hide-for-xlarge-up,tbody.hide-for-xxlarge-only,tbody.hide-for-xxlarge-up{display:table-row-group!important}tr.hide-for-small-only,tr.show-for-small-up,tr.show-for-medium-only,tr.show-for-medium-up,tr.hide-for-large-only,tr.hide-for-large-up,tr.hide-for-xlarge-only,tr.hide-for-xlarge-up,tr.hide-for-xxlarge-only,tr.hide-for-xxlarge-up{display:table-row!important}th.hide-for-small-only,td.hide-for-small-only,th.show-for-small-up,td.show-for-small-up,th.show-for-medium-only,td.show-for-medium-only,th.show-for-medium-up,td.show-for-medium-up,th.hide-for-large-only,td.hide-for-large-only,th.hide-for-large-up,td.hide-for-large-up,th.hide-for-xlarge-only,td.hide-for-xlarge-only,th.hide-for-xlarge-up,td.hide-for-xlarge-up,th.hide-for-xxlarge-only,td.hide-for-xxlarge-only,th.hide-for-xxlarge-up,td.hide-for-xxlarge-up{display:table-cell!important}}@media only screen and (min-width:64.063em){.hide-for-small-only,.show-for-small-up,.hide-for-medium-only,.show-for-medium-up,.show-for-large-only,.show-for-large-up,.hide-for-xlarge-only,.hide-for-xlarge-up,.hide-for-xxlarge-only,.hide-for-xxlarge-up{display:inherit!important}.show-for-small-only,.hide-for-small-up,.show-for-medium-only,.hide-for-medium-up,.hide-for-large-only,.hide-for-large-up,.show-for-xlarge-only,.show-for-xlarge-up,.show-for-xxlarge-only,.show-for-xxlarge-up{display:none!important}table.hide-for-small-only,table.show-for-small-up,table.hide-for-medium-only,table.show-for-medium-up,table.show-for-large-only,table.show-for-large-up,table.hide-for-xlarge-only,table.hide-for-xlarge-up,table.hide-for-xxlarge-only,table.hide-for-xxlarge-up{display:table}thead.hide-for-small-only,thead.show-for-small-up,thead.hide-for-medium-only,thead.show-for-medium-up,thead.show-for-large-only,thead.show-for-large-up,thead.hide-for-xlarge-only,thead.hide-for-xlarge-up,thead.hide-for-xxlarge-only,thead.hide-for-xxlarge-up{display:table-header-group!important}tbody.hide-for-small-only,tbody.show-for-small-up,tbody.hide-for-medium-only,tbody.show-for-medium-up,tbody.show-for-large-only,tbody.show-for-large-up,tbody.hide-for-xlarge-only,tbody.hide-for-xlarge-up,tbody.hide-for-xxlarge-only,tbody.hide-for-xxlarge-up{display:table-row-group!important}tr.hide-for-small-only,tr.show-for-small-up,tr.hide-for-medium-only,tr.show-for-medium-up,tr.show-for-large-only,tr.show-for-large-up,tr.hide-for-xlarge-only,tr.hide-for-xlarge-up,tr.hide-for-xxlarge-only,tr.hide-for-xxlarge-up{display:table-row!important}th.hide-for-small-only,td.hide-for-small-only,th.show-for-small-up,td.show-for-small-up,th.hide-for-medium-only,td.hide-for-medium-only,th.show-for-medium-up,td.show-for-medium-up,th.show-for-large-only,td.show-for-large-only,th.show-for-large-up,td.show-for-large-up,th.hide-for-xlarge-only,td.hide-for-xlarge-only,th.hide-for-xlarge-up,td.hide-for-xlarge-up,th.hide-for-xxlarge-only,td.hide-for-xxlarge-only,th.hide-for-xxlarge-up,td.hide-for-xxlarge-up{display:table-cell!important}}@media only screen and (min-width:90.063em){.hide-for-small-only,.show-for-small-up,.hide-for-medium-only,.show-for-medium-up,.hide-for-large-only,.show-for-large-up,.show-for-xlarge-only,.show-for-xlarge-up,.hide-for-xxlarge-only,.hide-for-xxlarge-up{display:inherit!important}.show-for-small-only,.hide-for-small-up,.show-for-medium-only,.hide-for-medium-up,.show-for-large-only,.hide-for-large-up,.hide-for-xlarge-only,.hide-for-xlarge-up,.show-for-xxlarge-only,.show-for-xxlarge-up{display:none!important}table.hide-for-small-only,table.show-for-small-up,table.hide-for-medium-only,table.show-for-medium-up,table.hide-for-large-only,table.show-for-large-up,table.show-for-xlarge-only,table.show-for-xlarge-up,table.hide-for-xxlarge-only,table.hide-for-xxlarge-up{display:table}thead.hide-for-small-only,thead.show-for-small-up,thead.hide-for-medium-only,thead.show-for-medium-up,thead.hide-for-large-only,thead.show-for-large-up,thead.show-for-xlarge-only,thead.show-for-xlarge-up,thead.hide-for-xxlarge-only,thead.hide-for-xxlarge-up{display:table-header-group!important}tbody.hide-for-small-only,tbody.show-for-small-up,tbody.hide-for-medium-only,tbody.show-for-medium-up,tbody.hide-for-large-only,tbody.show-for-large-up,tbody.show-for-xlarge-only,tbody.show-for-xlarge-up,tbody.hide-for-xxlarge-only,tbody.hide-for-xxlarge-up{display:table-row-group!important}tr.hide-for-small-only,tr.show-for-small-up,tr.hide-for-medium-only,tr.show-for-medium-up,tr.hide-for-large-only,tr.show-for-large-up,tr.show-for-xlarge-only,tr.show-for-xlarge-up,tr.hide-for-xxlarge-only,tr.hide-for-xxlarge-up{display:table-row!important}th.hide-for-small-only,td.hide-for-small-only,th.show-for-small-up,td.show-for-small-up,th.hide-for-medium-only,td.hide-for-medium-only,th.show-for-medium-up,td.show-for-medium-up,th.hide-for-large-only,td.hide-for-large-only,th.show-for-large-up,td.show-for-large-up,th.show-for-xlarge-only,td.show-for-xlarge-only,th.show-for-xlarge-up,td.show-for-xlarge-up,th.hide-for-xxlarge-only,td.hide-for-xxlarge-only,th.hide-for-xxlarge-up,td.hide-for-xxlarge-up{display:table-cell!important}}@media only screen and (min-width:120.063em){.hide-for-small-only,.show-for-small-up,.hide-for-medium-only,.show-for-medium-up,.hide-for-large-only,.show-for-large-up,.hide-for-xlarge-only,.show-for-xlarge-up,.show-for-xxlarge-only,.show-for-xxlarge-up{display:inherit!important}.show-for-small-only,.hide-for-small-up,.show-for-medium-only,.hide-for-medium-up,.show-for-large-only,.hide-for-large-up,.show-for-xlarge-only,.hide-for-xlarge-up,.hide-for-xxlarge-only,.hide-for-xxlarge-up{display:none!important}table.hide-for-small-only,table.show-for-small-up,table.hide-for-medium-only,table.show-for-medium-up,table.hide-for-large-only,table.show-for-large-up,table.hide-for-xlarge-only,table.show-for-xlarge-up,table.show-for-xxlarge-only,table.show-for-xxlarge-up{display:table}thead.hide-for-small-only,thead.show-for-small-up,thead.hide-for-medium-only,thead.show-for-medium-up,thead.hide-for-large-only,thead.show-for-large-up,thead.hide-for-xlarge-only,thead.show-for-xlarge-up,thead.show-for-xxlarge-only,thead.show-for-xxlarge-up{display:table-header-group!important}tbody.hide-for-small-only,tbody.show-for-small-up,tbody.hide-for-medium-only,tbody.show-for-medium-up,tbody.hide-for-large-only,tbody.show-for-large-up,tbody.hide-for-xlarge-only,tbody.show-for-xlarge-up,tbody.show-for-xxlarge-only,tbody.show-for-xxlarge-up{display:table-row-group!important}tr.hide-for-small-only,tr.show-for-small-up,tr.hide-for-medium-only,tr.show-for-medium-up,tr.hide-for-large-only,tr.show-for-large-up,tr.hide-for-xlarge-only,tr.show-for-xlarge-up,tr.show-for-xxlarge-only,tr.show-for-xxlarge-up{display:table-row!important}th.hide-for-small-only,td.hide-for-small-only,th.show-for-small-up,td.show-for-small-up,th.hide-for-medium-only,td.hide-for-medium-only,th.show-for-medium-up,td.show-for-medium-up,th.hide-for-large-only,td.hide-for-large-only,th.show-for-large-up,td.show-for-large-up,th.hide-for-xlarge-only,td.hide-for-xlarge-only,th.show-for-xlarge-up,td.show-for-xlarge-up,th.show-for-xxlarge-only,td.show-for-xxlarge-only,th.show-for-xxlarge-up,td.show-for-xxlarge-up{display:table-cell!important}}.show-for-landscape,.hide-for-portrait{display:inherit!important}.hide-for-landscape,.show-for-portrait{display:none!important}table.hide-for-landscape,table.show-for-portrait{display:table}thead.hide-for-landscape,thead.show-for-portrait{display:table-header-group!important}tbody.hide-for-landscape,tbody.show-for-portrait{display:table-row-group!important}tr.hide-for-landscape,tr.show-for-portrait{display:table-row!important}td.hide-for-landscape,td.show-for-portrait,th.hide-for-landscape,th.show-for-portrait{display:table-cell!important}@media only screen and (orientation:landscape){.show-for-landscape,.hide-for-portrait{display:inherit!important}.hide-for-landscape,.show-for-portrait{display:none!important}table.show-for-landscape,table.hide-for-portrait{display:table}thead.show-for-landscape,thead.hide-for-portrait{display:table-header-group!important}tbody.show-for-landscape,tbody.hide-for-portrait{display:table-row-group!important}tr.show-for-landscape,tr.hide-for-portrait{display:table-row!important}td.show-for-landscape,td.hide-for-portrait,th.show-for-landscape,th.hide-for-portrait{display:table-cell!important}}@media only screen and (orientation:portrait){.show-for-portrait,.hide-for-landscape{display:inherit!important}.hide-for-portrait,.show-for-landscape{display:none!important}table.show-for-portrait,table.hide-for-landscape{display:table}thead.show-for-portrait,thead.hide-for-landscape{display:table-header-group!important}tbody.show-for-portrait,tbody.hide-for-landscape{display:table-row-group!important}tr.show-for-portrait,tr.hide-for-landscape{display:table-row!important}td.show-for-portrait,td.hide-for-landscape,th.show-for-portrait,th.hide-for-landscape{display:table-cell!important}}.show-for-touch{display:none!important}.hide-for-touch{display:inherit!important}.touch .show-for-touch{display:inherit!important}.touch .hide-for-touch{display:none!important}table.hide-for-touch{display:table}.touch table.show-for-touch{display:table}thead.hide-for-touch{display:table-header-group!important}.touch thead.show-for-touch{display:table-header-group!important}tbody.hide-for-touch{display:table-row-group!important}.touch tbody.show-for-touch{display:table-row-group!important}tr.hide-for-touch{display:table-row!important}.touch tr.show-for-touch{display:table-row!important}td.hide-for-touch{display:table-cell!important}.touch td.show-for-touch{display:table-cell!important}th.hide-for-touch{display:table-cell!important}.touch th.show-for-touch{display:table-cell!important}/*!

## Date-Time-Party search widget (DTP)

### English, with search field
This is a simplified version - the full version with calendar, hidden elements and all select options is served from the SRS.
```
<div class="dtp-picker with-search">
  <form class="dtp-picker-form">
    <div class="party-size-picker dtp-picker-selector select-native unselected-on-init">
      <a href="#" class="select-label dtp-picker-selector-link">2 people</a>
      <select name="Select_1">
        <option value="1">1 person</option>
        <option value="2">2 people</option>
        <option value="3">3 people</option>
        <option value="4">4 people</option>
      </select>
    </div>
    <div class="date-picker dtp-picker-selector">
      <a class="dtp-picker-selector-link date-label dtp-picker-label">21 Oct 2014</a>
    </div>
    <div class="time-picker dtp-picker-selector select-native">
      <a href="#" class="select-label dtp-picker-selector-link">19:00</a>
      <select name="Select_0">
        <option value="18:30">18:30</option>
        <option value="19:00" selected="selected">19:00</option>
        <option value="19:30">19:30</option>
      </select>
    </div>
    <div class="dtp-picker-search-container">
      <div class="dtp-picker-search-icon icon-search"></div>
      <input type="text" name="searchText" value="" placeholder="Location or Restaurant" data-bind="" class="dtp-picker-search tt-input" autocomplete="off" spellcheck="false" dir="auto">
    </div>
    <input type="submit" class="button dtp-picker-button" value="Find a Table">
  </form>
</div>
```


## DTP with header and footer

```
<div class="dtp-with-header-footer">
  <div class="content-block-header with-border"><h3>Make a reservation</h3></div>
  <div class="dtp-picker with-border">
    <form class="dtp-picker-form">
      <div class="party-size-picker dtp-picker-selector select-native unselected-on-init">
        <a href="#" class="select-label dtp-picker-selector-link">2 people</a>
        <select name="Select_1">
          <option value="1">1 person</option>
          <option value="2">2 people</option>
          <option value="3">3 people</option>
          <option value="4">4 people</option>
        </select>
      </div>
      <div class="date-picker dtp-picker-selector">
        <a class="dtp-picker-selector-link date-label dtp-picker-label">21 Oct 2014</a>
      </div>
      <div class="time-picker dtp-picker-selector select-native">
        <a href="#" class="select-label dtp-picker-selector-link">19:00</a>
        <select name="Select_0">
          <option value="18:30">18:30</option>
          <option value="19:00" selected="selected">19:00</option>
          <option value="19:30">19:30</option>
        </select>
      </div>
      <input type="submit" class="button dtp-picker-button" value="Find a Table">
    </form>
  </div>
  <div class="content-block-footer with-border"><p class="icon-phone-large">Prefer to call in? Book by phone (xxx) xxx-xxxx</p></div>
</div>
```


*/.rest-dtp-picker-wrapper{background:#edeeef;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1);margin-bottom:2rem}.rest-dtp-picker-wrapper .dtp-picker{border-radius:4px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1)}.rest-dtp-picker-wrapper .dtp-result-text{margin-top:0;margin-bottom:1rem}.dtp-picker{zoom:1;border-radius:3px;border-top-right-radius:5px;border-bottom-right-radius:5px;background:#fff;margin:0;position:relative}.dtp-picker:before,.dtp-picker:after{content:" ";display:table}.dtp-picker:after{clear:both}.dtp-picker .twitter-typeahead{width:100%}.dtp-picker-selector{width:33.3333%;float:left;position:relative;height:100%;margin:0}.dtp-picker-selector select{position:absolute;opacity:0;top:0;height:100%;width:100%;cursor:pointer;border-radius:0;-webkit-appearance:none;-webkit-border-radius:0;color:#333;background-color:#FFF;z-index:2}.dtp-picker-selector+.dtp-picker-selector{border-left:1px solid rgba(0,0,0,.08)}@media only screen and (min-width:40.063em){.dtp-picker-selector{width:15.5%}}@media only screen and (min-width:64.063em){.dtp-picker-selector{width:25%}.dtp-picker.with-search .dtp-picker-selector{width:15%}}@media only screen and (min-width:40.063em)and (max-width:64em){.date-picker{width:23%}.dtp-lang-en.with-search .party-size-picker,.dtp-lang-en.with-search .time-picker{width:18%}.dtp-lang-en.with-search .dtp-picker-search-container{width:25%}.dtp-lang-ja.with-search .party-size-picker{width:11%}.dtp-lang-ja.with-search .time-picker{width:14%}.dtp-lang-ja.with-search .dtp-picker-search-container{width:31%}.dtp-lang-ja.with-search .dtp-picker-button{width:21%}.dtp-lang-de.with-search .party-size-picker{width:19%}.dtp-lang-de.with-search .time-picker{width:14%}.dtp-lang-de.with-search .dtp-picker-search-container{width:28%}.dtp-lang-es.with-search .party-size-picker,.dtp-lang-es.with-search .date-picker{width:21%}.dtp-lang-es.with-search .time-picker{width:18%}.dtp-lang-es.with-search .dtp-picker-search-container,.dtp-lang-es.with-search .dtp-picker-button{width:20%}.dtp-lang-fr.with-search .party-size-picker,.dtp-lang-fr.with-search .dtp-picker-button{width:23%}.dtp-lang-fr.with-search .date-picker{width:22%}.dtp-lang-fr.with-search .time-picker{width:18%}.dtp-lang-fr.with-search .dtp-picker-search-container{width:14%}}.dtp-picker-selector-link{position:relative;display:block;color:#333;padding:.8125rem 1rem;height:3rem;z-index:1}.dtp-picker-selector-link:hover{color:#000}.dtp-picker-selector-link:after{content:"\e607";color:#999;font-size:1.3125rem;position:absolute;right:.5rem;top:.875rem}@media only screen and (min-width:40.063em)and (max-width:64em){.dtp-picker-selector-link:after{right:.2rem}}.dtp-picker-title{color:#333;font-size:1.075rem;padding:18px 1rem;height:3rem}.date-picker .dtp-picker-select,.date-picker .dtp-picker-select:focus{outline:0;position:absolute;top:0;left:0;margin:0;cursor:pointer;height:100%;border:0;opacity:0}.date-picker .dtp-picker-label{overflow:hidden;white-space:nowrap}.dtp-picker-search-container{height:3rem;position:relative;clear:both;border-top:1px solid rgba(0,0,0,.12)}.dtp-picker-search-container .dtp-picker-search-icon{position:absolute;top:1rem;left:1rem;color:#999}.dtp-picker-search-container input{border:0;margin:0;width:100%;outline:none;box-shadow:none;font-size:1rem;padding:.8125rem .9375rem .875rem 2.4375rem;background:transparent;font-weight:300;white-space:nowrap;text-overflow:ellipsis;clear:both}@media only screen and (min-width:40.063em){.dtp-picker-search-container{width:29%;clear:none;float:left;border-top:none;border-left:1px solid rgba(0,0,0,.08)}}@media only screen and (min-width:64.063em){.dtp-picker.with-search .dtp-picker-search-container{width:39%}}.dtp-picker-selector-link,.dtp-picker-search-container input{border:1px solid transparent;-webkit-transition:border-color ease-in-out .15s;-moz-transition:border-color ease-in-out .15s;-ms-transition:border-color ease-in-out .15s;transition:border-color ease-in-out .15s}.dtp-picker-selector-link:focus,.dtp-picker-selector-link.highlighted,.dtp-picker-search-container input:focus,.dtp-picker-search-container input.highlighted{border-color:#559ebe}.dtp-picker-button{border-radius:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;width:100%;height:3rem;margin:0!important;font-weight:300}@media only screen and (min-width:40.063em){.dtp-picker-button{width:25%;clear:none;float:right;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.with-search .dtp-picker-button{width:16%;padding-left:.5rem;padding-right:.5rem}}.offertime-indicator{position:relative;font-size:.875rem;color:#666;padding-left:1.5rem;display:inline-block}.rest-dtp-picker-wrapper .offertime-indicator{padding-top:1rem}.rest-dtp-picker-wrapper .times-footer .offertime-indicator{float:right}.offertime-indicator:before{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:attr(data-offers-count);-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;padding-left:2px;display:inline-block;position:absolute;left:0}.offertime-indicator.with-points:before{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:'';-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzUzMzBERTQyMDlCMTFFNDk0OEVFRjU0MzVFMThDQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDFCMkI4QjYyMEI1MTFFNDk0OEVFRjU0MzVFMThDQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNTMzMERFMjIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNTMzMERFMzIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr7lehEAAAAmSURBVHjaYvz//z8DEgBxGGEcJgY8AK8kC9QodKPhkozUtxMgwAAySgcOYy2xpAAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:4px 4px;display:inline-block;position:absolute;left:0}.dtp-additional-link{color:#559ebe;margin-top:1rem;display:inline-block}.dtp-additional-link:hover{color:#3e84a2}.rest-dtp-picker-wrapper .times-footer .dtp-additional-link{float:none!important}.dtp-with-header-footer{background-color:#FFF}.dtp-with-header-footer .dtp-picker{padding:1.5rem;background-color:#FFF;box-shadow:none}.dtp-with-header-footer .dtp-picker-selector{border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);height:3rem}.dtp-with-header-footer .dtp-picker-selector:first-of-type{border-left:1px solid rgba(0,0,0,.08);border-radius:3px 0 0 3px}.dtp-with-header-footer .icon-phone-large{margin-bottom:0}.dtp-with-header-footer .icon-phone-large:before{padding-right:.5rem;color:#559ebe}.dtp-with-header-footer .dtp-results>.content-section-body{padding-top:0}.floating-footer-container{position:fixed;bottom:0;z-index:99;left:2.25rem;background-color:#333}.floating-footer-container .page-ad-link{margin:0}.floating-footer-container .icon-close{position:absolute;top:0;font-size:.675rem;cursor:pointer;left:-.675rem}.floating-footer-advert-small .floating-footer-container .icon-close{left:320px}.floating-footer-advert-medium .floating-footer-container .icon-close{left:728px}.floating-footer-advert-large .floating-footer-container .icon-close{left:950px}.floating-footer-advert-xlarge .floating-footer-container .icon-close{left:1200px}@media only screen and (min-width:100rem){.floating-footer-advert-xlarge .floating-footer-container .icon-close{left:1200px}}.floating-footer-container:after{content:"Loading advert...";position:absolute;font-size:.875rem;top:4px;left:5px;z-index:-1;color:#fff}@media only screen and (min-width:100rem){.floating-footer-container{left:50%;margin-left:calc(2.25rem - 50rem)}}/*!

# Footer (start page)
```
<div id="footer" role="footer" class="footer-container ">
    <div class="max-width-wrapper">
      <div class="footer-content-container">
        <div class="footer-block">
          <h6>Featured Cities</h6>
          <div class="menu-wrapper"><a href="#" data-target="footer-select-city-menu" class="footer-select-city button transparent small js-toggle-menu with-arrow text-arrow-down">Select a city</a>
              <div id="footer-select-city-menu" class="menu menu-top menu-right">
                  <div class="menu-container">
                      <div class="menu-main">
                          <div class="menu-section js-lionbars">
                              <div class="menu-list">
                                <a href="http://www.opentable.co.uk/bath-restaurants" class="menu-list-link">Bath Restaurants</a>
                                <a href="http://www.opentable.co.uk/birmingham-restaurants" class="menu-list-link">Birmingham Restaurants</a>
                                <a href="http://www.opentable.co.uk/brighton-restaurants" class="menu-list-link">Brighton Restaurants</a>
                                <a href="http://www.opentable.co.uk/bristol-restaurants" class="menu-list-link">Bristol Restaurants</a>
                                <a href="http://www.opentable.co.uk/cambridge-restaurants" class="menu-list-link">Cambridge Restaurants</a>
                                <a href="http://www.opentable.co.uk/edinburgh-restaurants" class="menu-list-link">Edinburgh Restaurants</a>
                                <a href="http://www.opentable.co.uk/glasgow-restaurants" class="menu-list-link">Glasgow Restaurants</a>
                                <a href="http://www.opentable.co.uk/liverpool-restaurants" class="menu-list-link">Liverpool Restaurants</a>
                                <a href="http://www.opentable.co.uk/london-restaurants" class="menu-list-link">London Restaurants</a>
                                <a href="http://www.opentable.co.uk/manchester-restaurants" class="menu-list-link">Manchester Restaurants</a>
                                <a href="http://www.opentable.co.uk/newcastle-restaurants" class="menu-list-link">Newcastle Restaurants</a>
                                <a href="http://www.opentable.co.uk/oxford-restaurants" class="menu-list-link">Oxford Restaurants</a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="footer-block">
          <h6>Discover</h6>
          <ul>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/tkb-p/KnowledgeBase/label-name/dining%20rewards%20program?labels=dining+rewards+program&amp;profile.language=en&amp;cc=gb" target="_blank">Dining rewards</a></li>
            <li><a href="http://www.opentable.co.uk/info/banquets.aspx?m=72">Private Dining</a></li>
            <li><a href="http://www.opentable.co.uk/m/best-restaurants-in-united-kingdom">Top 100 Best Restaurants 2014</a></li>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/How-do-I-make-reservations-for-others/ta-p/123?profile.language=en&amp;cc=gb" target="_blank">Reserve for others</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>OpenTable</h6>
          <ul>
            <li><a href="http://www.opentable.com/about/">About Us</a></li><li><a href="http://blog.opentable.co.uk">Blog</a></li>
            <li><a href="http://www.opentable.com/careers/">Careers</a></li><li><a href="http://press.opentable.co.uk">Press</a></li>
            <li><a href="http://www.rgmgroup.com/advertisers-opentable-uk.html">Advertise</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>More</h6>
          <ul>
            <li><a href="http://www.opentable.com">OpenTable.com</a></li><li><a href="https://itunes.apple.com/gb/app/id564063286" target="_blank">OpenTable for iOS</a></li>
            <li><a href="https://play.google.com/store/apps/details?id=com.toptable&amp;hl=en_GB" target="_blank">OpenTable for Android</a></li>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/OpenTable-Affiliate-Program/ta-p/400?profile.language=en&amp;cc=gb" target="_blank">Affiliate program</a></li>
            <li><a href="https://community.opentable.com/t5/OpenTable-Community-UK/ct-p/OpenTable_Community_UK?profile.language=en&amp;cc=gb" target="_blank">Contact Us</a></li><li><a href="https://community.opentable.com/t5/OpenTable-Community-UK/ct-p/OpenTable_Community_UK?profile.language=en&amp;cc=gb" target="_blank">Help &amp; Support</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>Restaurateurs</h6>
          <a class="button small with-arrow text-arrow-right" href="http://www.opentable.co.uk/opentable-restaurant-management-system">Delight more diners</a>
          <h6>Join us on</h6>
          <div class="footer-social-links">
              <a href="http://twitter.com/OpenTableUK" class="footer-social-link twitter" target="_blank"></a>
              <a href="http://www.facebook.com/OpenTableUK" class="footer-social-link facebook" target="_blank"></a>
              <a href="http://plus.google.com/+OpenTableUK" class="footer-social-link google" target="_blank"></a>
              <a href="https://www.linkedin.com/company/opentable" class="footer-social-link linkedin" target="_blank"></a>
          </div>
        </div>
        <div class="footer-content-container">
          <div class="footer-base">
            <span class="footer-copyright">Copyright © 2015 OpenTable International Limited. All rights reserved. </span>
            <a href="http://www.opentable.co.uk/info/privacypolicy.aspx" class="footer-base-link">Privacy policy</a>
            <a href="http://www.opentable.co.uk/info/agreement.aspx" class="footer-base-link">Terms of use</a>
            <a href="http://www.opentable.co.uk/opentable-sitemap.aspx" class="footer-base-link">Sitemap</a>
            <a href="http://m.opentable.co.uk/" class="footer-base-link">Mobile site</a>
          </div>
        </div>
      </div>
    </div>
</div>
```

# Footer (restaurant profile)
```
<div id="footer" role="footer" class="footer-container ">
    <div class="max-width-wrapper">
      <div class="footer-content-container">
        <div class="footer-crumbs">
          <a href="http://www.opentable.co.uk/london-restaurant-listings">See Full Restaurant List</a>
          <span class="text-arrow-right"></span>
          <a href="http://www.opentable.co.uk/skylon-grill-reservations-london">Make a reservation at Skylon Grill</a>
        </div>
        <div class="footer-block">
          <h6>Featured Cities</h6>
          <div class="menu-wrapper"><a href="#" data-target="footer-select-city-menu" class="footer-select-city button transparent small js-toggle-menu with-arrow text-arrow-down">Select a city</a>
              <div id="footer-select-city-menu" class="menu menu-top menu-right">
                  <div class="menu-container">
                      <div class="menu-main">
                          <div class="menu-section js-lionbars">
                              <div class="menu-list">
                                <a href="http://www.opentable.co.uk/bath-restaurants" class="menu-list-link">Bath Restaurants</a>
                                <a href="http://www.opentable.co.uk/birmingham-restaurants" class="menu-list-link">Birmingham Restaurants</a>
                                <a href="http://www.opentable.co.uk/brighton-restaurants" class="menu-list-link">Brighton Restaurants</a>
                                <a href="http://www.opentable.co.uk/bristol-restaurants" class="menu-list-link">Bristol Restaurants</a>
                                <a href="http://www.opentable.co.uk/cambridge-restaurants" class="menu-list-link">Cambridge Restaurants</a>
                                <a href="http://www.opentable.co.uk/edinburgh-restaurants" class="menu-list-link">Edinburgh Restaurants</a>
                                <a href="http://www.opentable.co.uk/glasgow-restaurants" class="menu-list-link">Glasgow Restaurants</a>
                                <a href="http://www.opentable.co.uk/liverpool-restaurants" class="menu-list-link">Liverpool Restaurants</a>
                                <a href="http://www.opentable.co.uk/london-restaurants" class="menu-list-link">London Restaurants</a>
                                <a href="http://www.opentable.co.uk/manchester-restaurants" class="menu-list-link">Manchester Restaurants</a>
                                <a href="http://www.opentable.co.uk/newcastle-restaurants" class="menu-list-link">Newcastle Restaurants</a>
                                <a href="http://www.opentable.co.uk/oxford-restaurants" class="menu-list-link">Oxford Restaurants</a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="footer-block">
          <h6>Discover</h6>
          <ul>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/tkb-p/KnowledgeBase/label-name/dining%20rewards%20program?labels=dining+rewards+program&amp;profile.language=en&amp;cc=gb" target="_blank">Dining rewards</a></li>
            <li><a href="http://www.opentable.co.uk/info/banquets.aspx?m=72">Private Dining</a></li>
            <li><a href="http://www.opentable.co.uk/m/best-restaurants-in-united-kingdom">Top 100 Best Restaurants 2014</a></li>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/How-do-I-make-reservations-for-others/ta-p/123?profile.language=en&amp;cc=gb" target="_blank">Reserve for others</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>OpenTable</h6>
          <ul>
            <li><a href="http://www.opentable.com/about/">About Us</a></li><li><a href="http://blog.opentable.co.uk">Blog</a></li>
            <li><a href="http://www.opentable.com/careers/">Careers</a></li><li><a href="http://press.opentable.co.uk">Press</a></li>
            <li><a href="http://www.rgmgroup.com/advertisers-opentable-uk.html">Advertise</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>More</h6>
          <ul>
            <li><a href="http://www.opentable.com">OpenTable.com</a></li><li><a href="https://itunes.apple.com/gb/app/id564063286" target="_blank">OpenTable for iOS</a></li>
            <li><a href="https://play.google.com/store/apps/details?id=com.toptable&amp;hl=en_GB" target="_blank">OpenTable for Android</a></li>
            <li><a href="https://community.opentable.com/t5/FAQs-Knowledge-Base/OpenTable-Affiliate-Program/ta-p/400?profile.language=en&amp;cc=gb" target="_blank">Affiliate program</a></li>
            <li><a href="https://community.opentable.com/t5/OpenTable-Community-UK/ct-p/OpenTable_Community_UK?profile.language=en&amp;cc=gb" target="_blank">Contact Us</a></li><li><a href="https://community.opentable.com/t5/OpenTable-Community-UK/ct-p/OpenTable_Community_UK?profile.language=en&amp;cc=gb" target="_blank">Help &amp; Support</a></li>
          </ul>
        </div>
        <div class="footer-block">
          <h6>Restaurateurs</h6>
          <a class="button small with-arrow text-arrow-right" href="http://www.opentable.co.uk/opentable-restaurant-management-system">Delight more diners</a>
          <h6>Join us on</h6>
          <div class="footer-social-links">
              <a href="http://twitter.com/OpenTableUK" class="footer-social-link twitter" target="_blank"></a>
              <a href="http://www.facebook.com/OpenTableUK" class="footer-social-link facebook" target="_blank"></a>
              <a href="http://plus.google.com/+OpenTableUK" class="footer-social-link google" target="_blank"></a>
              <a href="https://www.linkedin.com/company/opentable" class="footer-social-link linkedin" target="_blank"></a>
          </div>
        </div>
        <div class="footer-content-container">
          <div class="footer-base">
            <span class="footer-copyright">Copyright © 2015 OpenTable International Limited. All rights reserved. </span>
            <a href="http://www.opentable.co.uk/info/privacypolicy.aspx" class="footer-base-link">Privacy policy</a>
            <a href="http://www.opentable.co.uk/info/agreement.aspx" class="footer-base-link">Terms of use</a>
            <a href="http://www.opentable.co.uk/opentable-sitemap.aspx" class="footer-base-link">Sitemap</a>
            <a href="http://m.opentable.co.uk/" class="footer-base-link">Mobile site</a>
          </div>
        </div>
      </div>
    </div>
</div>
```

# Footer (short version)
```
<div id="footer" role="footer" class="footer-container-short">
  <div class="footer-base">
    <span class="footer-copyright">Copyright © 2015 OpenTable, Inc. All rights reserved.</span><br>
    <a class="footer-base-link" href="/info/privacypolicy.aspx">Privacy Policy</a>
    <a class="footer-base-link" href="/info/agreement.aspx">Terms of Use</a>
  </div>
</div>
```

*/.footer-container{zoom:1;background:#333;border-top:1px solid rgba(0,0,0,.12);font-size:.875rem;line-height:1.5em;padding-top:2rem}.footer-container:before,.footer-container:after{content:" ";display:table}.footer-container:after{clear:both}.footer-container h6{color:#666;margin-bottom:.5rem}.footer-container a{color:#bbb}.footer-container a:hover{color:#fff}.footer-container .button{color:#fff;background:#666;padding:.6rem .8rem;text-align:left;width:100%;margin-bottom:2rem}.footer-container .button:hover{background:#999}.footer-container .button.with-arrow{padding-right:1.7rem}.footer-container .button.transparent{background:#333;border:1px solid #666}.footer-container .button.transparent:hover{background:#999}.floating-footer-advert-xlarge .footer-container{padding-bottom:85px}.floating-footer-advert-large .footer-container{padding-bottom:66px}.floating-footer-advert-medium .footer-container{padding-bottom:90px}.floating-footer-advert-small .footer-container{padding-bottom:50px}.footer-content-container{zoom:1;padding-left:1rem;padding-right:1rem}.footer-content-container:before,.footer-content-container:after{content:" ";display:table}.footer-content-container:after{clear:both}.footer-crumbs{border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 1rem;margin-bottom:1rem;color:rgba(255,255,255,.4);font-size:1.02rem}.footer-crumbs a{color:#fff}.footer-crumbs .text-arrow-right{display:inline-block;margin-right:.25rem}.footer-block{margin-bottom:1.5rem}.footer-block h6{margin-bottom:.5rem}.footer-block li{line-height:1.5em}.footer-social-links{zoom:1}.footer-social-links:before,.footer-social-links:after{content:" ";display:table}.footer-social-links:after{clear:both}.footer-social-link{float:left;margin-right:.5rem;font-size:1.5rem;color:#bbb}.footer-social-link.facebook:after{content:"\e61c"}.footer-social-link.google:after{content:"\e616"}.footer-social-link.twitter:after{content:"\e61a"}.footer-social-link.linkedin:after{content:"\e605"}.footer-social-link:hover{color:#fff}.footer-base{zoom:1;border-top:1px solid rgba(255,255,255,.2);padding:1rem 0 2rem;color:#666}.footer-base:before,.footer-base:after{content:" ";display:table}.footer-base:after{clear:both}.footer-base a{color:#999}.footer-base a:hover{color:#fff}.footer-copyright,.footer-base-link{margin-right:1rem;display:block}.footer-tiny{padding-top:0}.footer-tiny .footer-base{border:none}@media only screen and (min-width:40.063em){.footer-block{float:left;width:20%;padding-right:1rem}.footer-block:last-child{padding-right:0}.footer-content-container{padding-left:1.25rem;padding-right:1.25rem}@media only screen and (min-width:64.063em){.footer-content-container{padding-left:2.25rem;padding-right:2.25rem}}.footer-copyright,.footer-base-link{float:left}}@media only screen and (min-width:64.063em){.footer-block{width:20%;padding-right:1.5rem}.footer-block:last-child{padding-right:0}.footer-fix .footer-container{position:absolute;bottom:0;width:100%}}.global-footer-system-info{background:#333;color:#333;font-size:.875rem;text-align:center;padding-bottom:.5rem}/*!

# Header (signed-in)

```
<div class="site-header" id="header">
    <div class="top-bar hide-for-small-only">
      <div class="top-bar-logo">
        <a class="top-bar-logo-link couk" title="OpenTable" href="/start/home">
          <h1 class="top-bar-logo-name">OpenTable</h1>
        </a>
      </div>
      <nav class="location-picker" id="location-picker">
        <a class="location-picker-link js-toggle-menu" id="location-picker-link" data-target="location-menu" href="#">
          <div class="location-picker-metro text-arrow-right hide-for-small-only hide-for-medium-only">London</div>
          <div class="location-picker-region">West End London</div>
        </a>
        <div class="location-picker-menu menu" id="location-menu">
          <!-- Location menu -->
        </div>
      </nav>
      <section class="top-bar-nav show-for-medium-up">
        <ul>
          <li class="top-bar-nav-li top-bar-nav-calendar">
              <div class="menu-wrapper">
                <a class="top-bar-nav-link js-toggle-menu" data-target="header-reservation-menu" href="#">
                  <div id="upcoming-reservations-count" class="top-bar-nav-link-notification">1</div>
                </a>
                <div class="menu menu-right" id="header-reservation-menu">
                  <!-- Upcoming resos here -->
                </div>
              </div>
          </li>
          <li class="top-bar-nav-li"><a id="global_nav_username" class="top-bar-nav-link js-toggle-menu with-arrow" data-target="header-user-menu" href="#">Hi, John</a>
              <div class="menu menu-right" id="header-user-menu">
                <!-- Hi John menu here -->
              </div>
          </li>
          <li class="top-bar-nav-li hide-for-small-only hide-for-medium-only"><a class="top-bar-nav-link js-toggle-menu with-arrow" data-target="header-mobile-menu" href="#">Mobile</a>
            <div class="menu menu-right" id="header-mobile-menu">
              <!-- Mobile dropdown menu here -->
            </div>
          </li>
        </ul>
      </section>
    </div>
    <div class="tab-bar show-for-small-only">
        <div class="tab-bar-logo couk"></div>
        <a class="menu-btn" href="#"></a>
    </div>
</div>

```

# VIP member
Add `vip` class to the top-bar-nav-li list item.

```
<ul>
  <li class="top-bar-nav-li vip"><a id="global_nav_username" class="top-bar-nav-link js-toggle-menu with-arrow" data-target="header-user-menu" href="#">Hi, John</a>
      <div class="menu menu-right" id="header-user-menu">
        <!-- Hi John menu here -->
      </div>
  </li>
</ul>

```

# Upcoming reservations dropdown

Ignore inline position and width styles on the `menu-container` div. These are for this styleguide only.

```
<div class="menu-opened">
  <div class="menu-container" style="position:relative;width:334px;">
      <div class="menu-main">
        <div class="menu-sub-header">Upcoming reservations</div>
        <div class="menu-section" style="overflow: auto;">
            <div class="upcoming-reservations" id="upcoming-reservations">
              <div class="upcoming-res">
                <div class="upcoming-res-name"><a href="/rest_profile.aspx?rid=40360">Yauatcha</a></div>
                <div class="upcoming-res-party">Table for 2 people</div>
                <div class="upcoming-res-date">20 Dec 2014 20:30</div>
                <div class="upcoming-res-links">
                  <div class="left"><a class="upcoming-res-link icon-export" href="/enter.aspx?reso=0&amp;rfs=1&amp;ra=vw&amp;re=c%252f%252fdIm5fi8o%253d">Invite</a></div>
                  <div class="right">
                    <a class="upcoming-res-link secondary" href="/enter.aspx?reso=0&amp;rfs=1&amp;ra=vw&amp;re=c%252f%252fdIm5fi8o%253d">View</a>
                    <a class="upcoming-res-link secondary" href="/enter.aspx?reso=0&amp;rfs=1&amp;ra=cha&amp;re=c%252f%252fdIm5fi8o%253d">Modify</a>
                    <a class="upcoming-res-link secondary" href="/enter.aspx?reso=0&amp;rfs=1&amp;ra=can&amp;re=c%252f%252fdIm5fi8o%253d">Cancel</a>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <div id="upcoming-reservations-no-reservations" class="menu-footer hide">You have no upcoming reservations</div>
        <div id="upcoming-reservations-all-link" class="menu-footer"><a class="secondary" href="/myprofile.aspx">All upcoming reservations</a></div>
      </div>
  </div>
</div>
```

# 'Hi John' menu

Ignore inline position and width styles on the `menu-container` div.  These are for this styleguide only.

```
<div class="menu-opened">
    <div class="menu-container" style="position:relative;width:236px;">
        <div class="menu-main">
            <div id="global_nav_points" class="menu-section with-padding">
                <div class="top-bar-user-points">
                    <div class="cf">
                        <div class="left">
                            <div class="font-size-tiny color-light">Earned</div>
                            <div class="points-text"><span id="global_nav_pointsEarned" class="font-weight-medium">300 </span><span class="font-size-small color-light">PTS</span></div>
                        </div>
                        <div class="right text-right">
                            <div class="font-size-tiny color-light">Next Reward</div>
                            <div class="points-text"><span id="global_nav_pointsMilestone" class="font-weight-medium">2000 </span><span class="font-size--small color-light">PTS</span></div>
                        </div>
                    </div>
                    <div class="points-bar">
                        <div class="points-bar-earned" style="width: 15%;"></div>
                    </div><a target="_blank" class="font-size-small" href="https://community.opentable.com/t5/FAQs-Knowledge-Base/What-are-OpenTable-points/ta-p/109?profile.language=en&amp;cc=gb">Learn more about points</a>
                </div>
            </div>
            <div id="global_nav_points_separator" class="menu-divider"></div>
            <div class="menu-section">
                <div class="menu-list">
                    <a id="global_nav_myprofile" class="menu-list-link" href="/myprofile.aspx">My Profile</a>
                    <a class="menu-list-link" href="https://my.opentable.co.uk/favorites?m=72">Favourites</a>
                    <a class="menu-list-link no-wrap" href="/myprofile.aspx">Restaurants to review</a>
                    <a target="_blank" class="menu-list-link" href="/contactuslink.aspx">Help</a>
                    <a id="global_nav_logout" class="menu-list-link" href="/logout.aspx">Sign out</a>
                </div>
            </div>
        </div>
    </div>
</div>
```

# Mobile dropdown

Ignore inline position and width styles on the `menu-container` div.  These are for this styleguide only.

```
<div class="menu-opened">
  <div class="menu-container" style="position:relative;width:150px;">
    <div class="menu-main">
      <div class="menu-section">
        <div class="menu-list">
          <a target="_blank" class="menu-list-link" href="https://itunes.apple.com/gb/app/id564063286">iOS app</a>
          <a target="_blank" class="menu-list-link" href="https://play.google.com/store/apps/details?id=com.toptable&amp;hl=en_GB">Android App</a></div>
        </div>
      </div>
  </div>
</div>

```
*/.site-header{zoom:1;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);position:relative;z-index:101}.site-header:before,.site-header:after{content:" ";display:table}.site-header:after{clear:both}.top-bar{zoom:1;position:relative;padding-left:1.25rem;padding-right:1.25rem}.top-bar:before,.top-bar:after{content:" ";display:table}.top-bar:after{clear:both}@media only screen and (min-width:64.063em){.top-bar{padding-left:2.25rem;padding-right:2.25rem}}.top-bar-logo{float:left}.top-bar-logo-link{display:block;width:9.375rem;height:3.375rem;background:url(//media.otstatic.com/img/logo-52dc8fe4e55bbaa280bc8ccb478b066b.png) 50% 50% no-repeat;background-size:100%}.top-bar-logo-link.couk{background-image:url(//media.otstatic.com/img/logo-uk-dcdd4f22a9b9d3ce4967fe2679b37a9f.png)}.top-bar-logo-link-rebrand{width:7.8125rem;background:url(//media.otstatic.com/img/logo-rebrand-7e0c85295d975a12986125976ff92cc2.png) 50% 50% no-repeat}.top-bar-logo-name{display:none}.top-bar-nav{zoom:1;float:right;margin-right:-.5rem}.top-bar-nav:before,.top-bar-nav:after{content:" ";display:table}.top-bar-nav:after{clear:both}@media only screen and (min-width:40.063em)and (max-width:64em){.top-bar-nav{width:calc(59% - 10.375rem)}.top-bar-nav>ul{float:right}}.top-bar-nav-li{float:left;position:relative}.top-bar-nav-li.has-button{padding:0 .5rem}@media only screen and (min-width:40.063em)and (max-width:64em){.top-bar-nav-li.has-button{padding:0 .1875rem}}@media only screen and (min-width:40.063em)and (max-width:64em){.top-bar-nav-li.vip{background:url(//media.otstatic.com/img/vip-badge-word-b613ddec490958f5c706c472072d69a1.png) no-repeat 100% 50%}.top-bar-nav-li.vip .top-bar-nav-link{margin-right:2rem}.top-bar-nav-li.vip .cover{right:2rem}}@media only screen and (min-width:64.063em){.top-bar-nav-li.vip .with-arrow{background:url(//media.otstatic.com/img/vip-badge-word-b613ddec490958f5c706c472072d69a1.png) no-repeat 100% 50%;padding-right:2.5rem;margin-right:2rem}@media(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx){.top-bar-nav-li.vip .with-arrow{background-image:url(//media.otstatic.com/img/vip-badge-word@2x-9abf9e5e391454bef5f35151f7cd23c3.png);background-size:2rem auto}}.top-bar-nav-li.vip .with-arrow:after{right:-1rem}}.top-bar-nav-button.button.small{padding:0 1rem;line-height:2rem;font-size:.875rem;margin:.6875rem 0 0}.top-bar-nav-link{display:block;line-height:3.375rem;padding:0 1rem;position:relative;color:#333}@media only screen and (min-width:40.063em)and (max-width:64em){.top-bar-nav-link{padding:0 .1875rem}.top-bar-nav-link.has-button{padding:0 .1875rem}}.top-bar-nav-link:hover{color:#000}.top-bar-nav-link.with-arrow{padding-right:2rem}.top-bar-nav-link.with-arrow:after{z-index:2}.top-bar-nav-link.with-arrow:after{content:"\e60b";border:0;color:#999;margin-top:0;font-size:.8rem;line-height:0;top:52.5%;right:.6rem;position:absolute}.top-bar-nav-link.with-arrow:hover:after{color:#666}.top-bar-nav-link .top-bar-nav-name{font-weight:500}.top-bar-nav-link-notification{position:absolute;top:.7rem;right:.4rem;border:2px solid #fff;background:#da3743;color:#fff;line-height:1;padding:.2em .35em;font-size:.75rem;font-weight:500;border-radius:5px}.top-bar-nav-calendar{padding-right:1rem;margin-right:1rem}@media only screen and (min-width:40.063em)and (max-width:64em){.top-bar-nav-calendar{padding-right:.5rem;margin-right:.5rem}.top-bar-nav-calendar+.top-bar-nav-li{width:calc(100% - 42px);padding-right:0}.top-bar-nav-calendar+.top-bar-nav-li>.top-bar-nav-link{overflow:hidden;white-space:nowrap;padding:0 2rem 0 0}}.top-bar-nav-calendar:after{content:"";background:rgba(0,0,0,.06);width:1px;position:absolute;top:25%;right:0;height:50%}.top-bar-nav-calendar .menu{right:.35rem;left:auto}.top-bar-nav-calendar .menu-container{right:-10rem}.top-bar-nav-calendar .top-bar-nav-link:before{content:"\e601";font-size:18px;position:relative;top:2px;color:#999}.top-bar-user-points{zoom:1;min-width:12.5rem}.top-bar-user-points:before,.top-bar-user-points:after{content:" ";display:table}.top-bar-user-points:after{clear:both}.top-bar-user-points .font-size-tiny{margin-bottom:.25rem}.top-bar-user-points .points-bar{margin:.5rem 0;width:100%;height:8px;border-radius:4px;background:#efefef;overflow:hidden}.top-bar-user-points .points-bar-earned{background:#da3743;width:65%;height:100%}.tab-bar{position:relative}.tab-bar-menu-btn{display:block;position:absolute;top:0;padding:.5rem;font-size:1.85rem;color:#666}.tab-bar-menu-btn:hover{color:#000}.tab-bar-logo{display:block;width:9.375rem;height:1.75rem;margin:.5rem auto;background:url(//media.otstatic.com/img/logo-52dc8fe4e55bbaa280bc8ccb478b066b.png) 50% 50% no-repeat}.tab-bar-logo.couk{background-image:url(//media.otstatic.com/img/logo-uk-dcdd4f22a9b9d3ce4967fe2679b37a9f.png)}@media(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx){.top-bar-logo-link,.tab-bar-logo{background-image:url(//media.otstatic.com/img/logo@2x-73585ecdd2f72eb89acf4563630520a4.png);background-size:100%}.top-bar-logo-link.couk,.tab-bar-logo.couk{background-image:url(//media.otstatic.com/img/logo-uk@2x-b6e8294e72d41e35f14a39044a7c33b3.png)}}@media(min-width:641px)and (max-width:725px){.top-bar-nav-link{padding:0 .1875rem}.top-bar-nav-li.has-button{padding:0 .1875rem}.location-picker{padding-right:.375rem;margin-left:.625rem}.location-picker-metro{max-width:10rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}.cover{background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 25%);width:32px;display:block;position:absolute;top:0;right:0;height:54px;z-index:1}/*!

# Header container

```
<nav class="location-picker" id="location-picker">
  <a class="location-picker-link js-toggle-menu" id="location-picker-link" data-target="location-menu" href="#">
    <div class="location-picker-metro text-arrow-right hide-for-small-only hide-for-medium-only">London</div>
    <div class="location-picker-region">West End London</div>
  </a>
  <div class="location-picker-menu menu" id="location-menu">
    <!-- Location menu -->
  </div>
</nav>
```

# Location menu

Ignore inline position and width styles on the `menu-container` div.  These are for this styleguide only.

```

<div class="menu-opened">
  <div class="menu-container" style="position:relative;width:640px;">
    <div class="menu-main">
      <div class="menu-header">
        <div class="row">
          <div class="column small-6">Location</div>
          <div class="column small-6">Region</div>
        </div>
      </div>
      <div class="menu-body">
        <div class="location-picker-menu-column menu-section js-lionbars" style="overflow: hidden; padding: 0px; width: 317px; height: 350px; position: relative;" vratio="-2.437209302325581" hratio="0.003205128205128205">
          <div class="lb-v-scrollbar" style="height: 346px;">
            <div class="lb-v-scrollbar-slider" style="height: 131px; top: 215px;"></div>
          </div>
          <div id="lb-wrap-0" class="lb-wrap" style="padding: 0px; width: 331px; height: 350px;">
            <div class="lb-content">
              <div class="location-picker-menu-list menu-list menu-list-selectors with-arrows" id="location-picker-metro-list">
                <a data-metro="3104" class="menu-list-link" href="/bath-restaurants?mn=-1">Bath</a>
                <a data-metro="3083" class="menu-list-link" href="/berkshire-restaurants?mn=-1">Berkshire</a>
                <a data-metro="3146" class="menu-list-link" href="/birmingham-restaurants?mn=-1">Birmingham</a>
                <a data-metro="3089" class="menu-list-link" href="/brighton-restaurants?mn=-1">Brighton</a>
                <a data-metro="3194" class="menu-list-link" href="/bristol-restaurants?mn=-1">Bristol</a>
                <a data-metro="3086" class="menu-list-link" href="/buckinghamshire-restaurants?mn=-1">Buckinghamshire</a>
                <a data-metro="3122" class="menu-list-link" href="/cambridge-restaurants?mn=-1">Cambridge</a>
                <a data-metro="3179" class="menu-list-link" href="/cornwall-restaurants?mn=-1">Cornwall</a>
                <a data-metro="3182" class="menu-list-link" href="/dorset-restaurants?mn=-1">Dorset</a>
                <a data-metro="3191" class="menu-list-link" href="/edinburgh-restaurants?mn=-1">Edinburgh</a>
                <a data-metro="3188" class="menu-list-link" href="/glasgow-restaurants?mn=-1">Glasgow</a>
                <a data-metro="3185" class="menu-list-link" href="/gloucestershire-restaurants?mn=-1">Gloucestershire</a>
                <a data-metro="3092" class="menu-list-link" href="/hampshire-restaurants?mn=-1">Hampshire</a>
                <a data-metro="3098" class="menu-list-link" href="/kent-restaurants?mn=-1">Kent</a>
                <a data-metro="3176" class="menu-list-link" href="/liverpool-restaurants?mn=-1">Liverpool</a>
                <a data-metro="72" class="menu-list-link selected" href="/london-restaurants?mn=-1">London</a>
                <a data-metro="3200" class="menu-list-link" href="/manchester-restaurants?mn=-1">Manchester</a>
                <a data-metro="3116" class="menu-list-link" href="/newcastle-restaurants?mn=-1">Newcastle</a>
                <a data-metro="3164" class="menu-list-link" href="/nottingham-restaurants?mn=-1">Nottingham</a>
                <a data-metro="3101" class="menu-list-link" href="/oxford-restaurants?mn=-1">Oxford</a>
                <a data-metro="3107" class="menu-list-link" href="/surrey-restaurants?mn=-1">Surrey</a>
              </div>
            </div>
          </div>
        </div>
        <div class="location-picker-menu-column menu-section js-lionbars" style="overflow: hidden; padding: 0px; width: 318px; height: 350px; position: relative;" vratio="-0.9166666666666666" hratio="0">
          <div class="lb-v-scrollbar" style="height: 346px;">
            <div class="lb-v-scrollbar-slider" style="height: 274px;"></div>
          </div>
          <div id="lb-wrap-1" class="lb-wrap" style="padding: 0px; width: 333px; height: 350px;">
            <div class="lb-content">
                <div class="location-picker-menu-list menu-list menu-list-selectors with-meta" id="city-list">
                  <a data-macro="0" class="menu-list-link" href="/london-restaurants?mn=-1">All London<span class="menu-list-link-meta">2241</span></a>
                  <a data-macro="5322" class="menu-list-link selected" href="/london-restaurants?mn=5322">West End London<span class="menu-list-link-meta">546</span></a>
                  <a data-macro="5289" class="menu-list-link" href="/london-restaurants?mn=5289">City of London<span class="menu-list-link-meta">241</span></a>
                  <a data-macro="5292" class="menu-list-link" href="/london-restaurants?mn=5292">East London<span class="menu-list-link-meta">156</span></a>
                  <a data-macro="5298" class="menu-list-link" href="/london-restaurants?mn=5298">North London<span class="menu-list-link-meta">212</span></a>
                  <a data-macro="5301" class="menu-list-link" href="/london-restaurants?mn=5301">North West London<span class="menu-list-link-meta">69</span></a>
                  <a data-macro="5304" class="menu-list-link" href="/london-restaurants?mn=5304">South East London<span class="menu-list-link-meta">201</span></a>
                  <a data-macro="5316" class="menu-list-link" href="/london-restaurants?mn=5316">South West London<span class="menu-list-link-meta">486</span></a>
                  <a data-macro="5325" class="menu-list-link" href="/london-restaurants?mn=5325">West London<span class="menu-list-link-meta">293</span></a>
                  <a data-macro="5343" class="menu-list-link" href="/london-restaurants?mn=5343">Docklands &amp; Canary Wharf<span class="menu-list-link-meta">37</span></a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-footer"><a class="secondary" href="/start/home">Full List of Locations</a></div>
    </div>
  </div>
</div>

```





*/.location-picker{padding:0 1rem 0 1.5rem;margin-left:1rem;float:left;position:relative;height:3.375rem}.location-picker:after{content:"";background:rgba(0,0,0,.06);width:1px;position:absolute;top:25%;left:0;height:50%}.location-picker:before{content:"\e602";position:absolute;top:52.5%;line-height:0;left:13px;color:rgba(0,0,0,.12);font-size:1.3rem}@media only screen and (min-width:40.063em)and (max-width:64em){.location-picker{max-width:41%}}.location-picker-link{display:block;color:#333;padding:0 20px 0 1rem;line-height:3.375rem;position:relative;height:3.375rem}.location-picker-link:after{content:"\e60b";position:absolute;right:0;top:52.5%;line-height:0;color:#999;font-size:.8rem}.location-picker-link:hover{color:#000}.location-picker-link:hover:after{color:#333}.location-picker-link .text-arrow-right:after{margin:0 4px}.location-picker-link .location-picker-metro{position:relative}.location-picker-link .location-picker-metro.light{color:#999}.location-picker-link .location-picker-metro.text-arrow-right{padding-right:1.375rem}.location-picker-link .location-picker-metro.text-arrow-right:after{content:"\e60d";color:#999;display:block;margin:0;font-size:.8rem;margin-top:-.375rem;position:absolute;right:.5rem;text-indent:-.25rem;top:50%;width:.375rem}.location-picker-link .location-picker-metro,.location-picker-link .location-picker-region{float:left}@media only screen and (min-width:40.063em)and (max-width:64em){.location-picker-link .location-picker-metro,.location-picker-link .location-picker-region{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.location-picker-placeholder{display:none;color:#999;text-transform:uppercase;padding:.5rem 1.2rem .4rem 1rem;font-size:.875rem;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:1.875rem;line-height:1.1}.location-picker-menu{top:90%;left:5px}.location-picker-menu .menu-container{width:40rem;left:-9.5rem}.location-picker-menu-list{width:100%}.location-picker-menu-column{border-right:1px solid rgba(0,0,0,.12);width:50%;float:left;max-height:400px}.location-picker-menu-column:last-child{border:none}.location-box{width:33.33%;float:left}.location-box-link{position:relative;overflow:hidden;display:block;text-align:center}.location-box-link:hover .location-box-image:after{background-color:rgba(0,0,0,.3);-webkit-transition:all 500ms ease;-moz-transition:all 500ms ease;-ms-transition:all 500ms ease;transition:all 500ms ease}.location-box-image{position:absolute;top:0;left:0;right:0;bottom:0;background:#222}.location-box-image img{opacity:1;position:absolute;top:-25%;left:0;min-width:100%}.location-box-image:after{content:"";background:rgba(0,0,0,.5);position:absolute;top:0;left:0;right:0;bottom:0;display:block;-webkit-transition:all 500ms ease;-moz-transition:all 500ms ease;-ms-transition:all 500ms ease;transition:all 500ms ease}.location-box-text{position:relative;z-index:1;padding:3rem;text-shadow:0 0 4px black}.location-box-name{color:#fff}.location-box-meta{color:#fff}.upcoming-reservations{overflow-x:hidden}.upcoming-res{padding:.5rem 1.5rem .5rem 1rem;border-bottom:1px solid rgba(0,0,0,.12);line-height:1.4;min-width:20.625rem;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.upcoming-res:last-child{border:0}.upcoming-res-party,.upcoming-res-date{color:#666;font-size:.875rem}.upcoming-res-links{zoom:1;font-size:.875rem;padding-top:.5rem}.upcoming-res-links:before,.upcoming-res-links:after{content:" ";display:table}.upcoming-res-links:after{clear:both}.upcoming-res-links .upcoming-res-link{display:block;float:left}.upcoming-res-links .right .upcoming-res-link{margin-left:1rem}.page-container{zoom:1;background:#f7f7f7;min-height:500px;width:100%;position:relative}.page-container:before,.page-container:after{content:" ";display:table}.page-container:after{clear:both}.page-header{position:relative;background:#fff;color:#666;border-bottom:1px solid rgba(0,0,0,.08);line-height:1.2em}.page-header.with-background{color:#fff;background:#222;border:0}.page-header.with-background .page-header-title{color:#fff}.page-header-title{margin:0}.page-header-title .text-arrow-right{color:rgba(0,0,0,.2);font-size:.8em;top:-.05em;position:relative}.page-header-hero{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.page-header-hero-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;display:none}.page-header-hero-wrapper.is-using-canvas .page-header-hero-img{display:none}.page-header-hero-canvas{width:100%;height:100%;position:absolute;top:0;left:0}.page-header-hero-img{height:100%;width:100%;position:absolute;top:0;left:0}.page-header-content{padding:2.25rem 0}.page-mini-header{position:relative;padding:.5rem 0}.page-mini-header.with-image{padding-left:4.4375rem}.page-mini-header-image{position:absolute;top:.3125rem;left:0;width:3.4375rem;height:3.4375rem;overflow:hidden;border-radius:50%}.page-header-subtitle{color:#999}.page-main{position:relative}.page-main-content{position:relative;padding-bottom:1rem}.page-ad-link{display:block;margin-bottom:1rem}@media only screen and (max-width:40em){.page-nav-wrapper{display:none}}@media only screen and (min-width:40.063em)and (max-width:64em){.page-nav{zoom:1;background:#fff;font-size:.875rem;z-index:101;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.page-nav:before,.page-nav:after{content:" ";display:table}.page-nav:after{clear:both}.page-nav ul{zoom:1;width:100%;padding-left:1.25rem;padding-right:1.25rem;border-bottom:1px solid rgba(0,0,0,.12)}.page-nav ul:before,.page-nav ul:after{content:" ";display:table}.page-nav ul:after{clear:both}@media only screen and (min-width:64.063em){.page-nav ul{padding-left:2.25rem;padding-right:2.25rem}}.page-nav li{float:left;margin-right:1.5rem}.page-nav-link{display:block;color:#559ebe;position:relative;top:1px;padding:1.5rem 0;border-bottom:1px solid transparent;text-transform:uppercase}.page-nav-link:hover{color:#3e84a2;border-bottom-color:#999}.page-nav-link.on{color:#333;border-bottom-color:#559ebe}}@media only screen and (min-width:40.063em){.page-main-content,.page-header-content{padding-left:.25rem;padding-right:.25rem}@media only screen and (min-width:64.063em){.page-main-content,.page-header-content{padding-left:1.25rem;padding-right:1.25rem}}}@media only screen and (min-width:64.063em){.page-main.with-nav{padding-left:200px}.page-nav-wrapper{position:absolute;top:0;bottom:0;left:0;padding:1.875rem 0 1rem;width:200px}.page-nav{padding-left:2rem}.page-nav-link{display:block;color:#999;position:relative;margin-top:.5rem;padding:.5rem}.page-nav-link:hover{color:#da3743}.page-nav-link.on{color:#333}.page-ad-section{position:absolute;right:-18.75rem;top:1rem}}@media only screen and (max-width:83.813rem){.page-ad-section{display:none!important}}.modal-form-background{background:#FFF}.login-modal,.register-modal,.convert-user-modal{width:28.75rem}.promo-card{margin:0 1rem 0 0;width:200px}.promo-card-image{width:100%;border-radius:3px;overflow:hidden;height:138px}.promo-card-image-img{width:100%;height:100%}.promo-card-info{padding:1rem 0}.promo-card-title{margin-bottom:.5rem;line-height:1.2em}.promo-card-title-link{color:#333}.promo-card-subtitle{font-size:.875rem;line-height:1.2em}.promo-card-subtitle-link{color:#999}/*!

# Restaurant item with review

This is the code used on the **Start** page (and generated with this stylesheet). The **Search** results use their own markup and CSS defined in that projects. We should look at merging these.

```
<div class="rest-row with-image">
  <div class="row">
    <div class="column medium-7">
      <div class="rest-row-info">
        <a class="rest-row-image" href="restaurant-link">
          <img class="rest-row-image-img" src="//www.opentable.com/img/restimages/x6/100342.jpg">
        </a>
        <a class="rest-row-name" href="restaurant-link">St. Francis Winery &amp; Vineyards</a>
        <div class="rest-row-rating">
          <div class="star-rating">
            <div class="star-wrapper small">
              <div class="all-stars"></div>
              <div class="all-stars filled" style="width: 98.05999999999999%;"></div>
            </div>
            <span class="star-rating-text">(113)</span>
          </div>
        </div>
        <div class="rest-row-pricing">
          <div class="price-rating">
            <span class="price-rating-tier on"></span>
            <span class="price-rating-tier on"></span>
            <span class="price-rating-tier on"></span>
            <span class="price-rating-tier"></span>
          </div>
        </div>
        <div class="rest-row-meta">Californian | Santa Rosa</div>
      </div>
    </div>
    <div class="column medium-5">
      <div class="rest-row-quote">
        <blockquote class="showing-cite-and-time">
          <p class="rest-row-quote-text js-div-expansion" data-review-expansion="" data-target="#quote_7767" id="quote_7767" style="word-wrap: break-word;"><span class="js-div-expansion-inner">Always a pleasure to experience wine tasting - food paring at the restaurant of my favorite winery! <a class="hide" href="#">More</a></span></p>
          <cite>OpenTable Diner - </cite>
          <time>11/09/2014</time>
        </blockquote>
      </div>
    </div>
  </div>
</div>
```



*/.rest-row{padding:1rem 0}.rest-row-checkbox{position:absolute;left:0;top:50%;margin-top:-8px}.rest-row-info{position:relative;line-height:1.5em}.rest-row.with-image .rest-row-info{padding-left:6rem;min-height:5rem}.rest-row.with-image.with-checkbox .rest-row-info{padding-left:9rem}.rest-row-image{border-radius:3px;display:block;max-height:5rem;width:5rem;overflow:hidden;position:absolute;top:0;left:0}.rest-row.with-checkbox .rest-row-image{left:3rem}.rest-row-image-img{width:100%}.rest-row-meta{color:#999;font-size:.875rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;clear:both}.rest-row-name{padding-top:4px;margin-right:4rem;max-width:22rem;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;clear:both;font-size:1rem;color:#333;line-height:1.5em}.rest-row-name:hover{color:#000}.rest-row-rating .star-rating{margin-top:1px;margin-bottom:-2px;font-size:1rem}.rest-row-rating .star-rating-text{color:#999;position:relative;top:-2px;margin-left:.375rem}.rest-row-offers{font-size:.875rem}.rest-row-pricing{font-size:.875rem;position:absolute;top:6px;right:10px}.rest-row-poptime-indicator{position:relative;font-size:.875rem;color:#666;padding-left:1rem}.rest-row-poptime-indicator:before{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:'';-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzUzMzBERTQyMDlCMTFFNDk0OEVFRjU0MzVFMThDQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDFCMkI4QjYyMEI1MTFFNDk0OEVFRjU0MzVFMThDQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNTMzMERFMjIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNTMzMERFMzIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr7lehEAAAAmSURBVHjaYvz//z8DEgBxGGEcJgY8AK8kC9QodKPhkozUtxMgwAAySgcOYy2xpAAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:4px 4px;left:0}.rest-row-quote{padding-top:.5rem;padding-left:6rem}.rest-row-quote blockquote{border:0;padding:0;margin:0;line-height:1}.rest-row-quote blockquote p{zoom:1;margin:0;color:#333;font-size:.875rem;margin-top:6px;margin-bottom:.3em;max-height:44px;overflow:hidden}.rest-row-quote blockquote p:before,.rest-row-quote blockquote p:after{content:" ";display:table}.rest-row-quote blockquote p:after{clear:both}.rest-row-quote blockquote.hiding-cite-and-time p{max-height:66px}.rest-row-quote blockquote cite{font-size:.875rem;display:inline;color:#999}.rest-row-quote blockquote time{font-size:.875rem;display:inline;color:#999}.rest-row-times-wrapper{zoom:1;padding-top:.5rem}.rest-row-times-wrapper:before,.rest-row-times-wrapper:after{content:" ";display:table}.rest-row-times-wrapper:after{clear:both}.rest-row-times{zoom:1}.rest-row-times:before,.rest-row-times:after{content:" ";display:table}.rest-row-times:after{clear:both}.rest-row-times a:first-of-type{margin-left:0}.rest-row-times-btn{border-radius:3px;display:block;border:1px solid #da3743;color:#fff;padding:.3em .2em;min-width:4.125rem;margin-left:.5rem;line-height:1.2em;text-align:center;font-size:.875rem;position:relative;background:#da3743;margin-bottom:.5rem;float:left;white-space:nowrap}.rest-row-times-btn.is-searchtime{font-weight:500}.rest-row-times-btn.with-points:after{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:'';-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzUzMzBERTQyMDlCMTFFNDk0OEVFRjU0MzVFMThDQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDFCMkI4QjYyMEI1MTFFNDk0OEVFRjU0MzVFMThDQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNTMzMERFMjIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNTMzMERFMzIwOUIxMUU0OTQ4RUVGNTQzNUUxOENDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr7lehEAAAAmSURBVHjaYvz//z8DEgBxGGEcJgY8AK8kC9QodKPhkozUtxMgwAAySgcOYy2xpAAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-position:4px 4px;position:absolute;top:-6px;right:-6px}.rest-row-times-btn.with-offers:after{background-color:#a12028;color:#fff;border-radius:7px;width:15px;height:15px;line-height:15px;font-size:.6875rem;text-align:center;font-weight:400;font-family:Arial,sans-serif;content:attr(data-offers-count);-webkit-font-smoothing:none;-moz-osx-font-smoothing:none;padding-left:2px;position:absolute;top:-6px;right:-6px}.rest-row-times-btn:not(.unavailable):hover{color:#fff;border-color:#bb232f;background:#bb232f}.rest-row-times-btn.unavailable{border-color:transparent;background:rgba(0,0,0,.06);cursor:default}.rest-row-offers{position:relative}.rest-row-offers .menu{top:inherit;bottom:0}.rest-row-offer-link{color:#559ebe;font-size:.875rem}.rest-row-offer-link strong{font-weight:400}.rest-row-offer-link:hover{color:#3e84a2}@media only screen and (max-width:40em){.rest-row.with-image .rest-row-times{padding-left:6rem}}@media only screen and (max-width:40em),only screen and (min-width:40.063em)and (max-width:64em){.rest-row-times{float:right}.rest-row-times a:first-child,.rest-row-times a:last-child{display:none}}@media only screen and (min-width:40.063em){.rest-row-pricing{right:30px}.rest-row-quote{padding-top:0;padding-left:0}}@media only screen and (min-width:64.063em){.rest-row-times-btn{margin-left:1.5%;width:18.8%;padding:.3em .2em .2em}}@media only screen and (min-width:90.063em){.rest-row-times-btn{padding:.4em .2em .3em}}.review{margin:1rem 0 2rem}.review-main{position:relative}.review-flag{position:absolute;top:0;right:0}.review-flag-link{margin-left:1rem;color:rgba(0,0,0,.12);display:block;padding:.5rem}.review-flag-link:hover{color:#666}.review-flag .menu-container{width:40rem}.review-flag textarea.form-textarea{min-height:6rem}.review-star-rating{margin-bottom:1rem;font-size:1.2rem}.review-stars-results{text-align:right;padding-right:.25rem}.review-stars-results-text{float:left;margin-right:1rem;margin-bottom:1rem;text-transform:uppercase}.review-stars-results-num{font-weight:500;padding-left:.5rem}.review-title{margin-top:0;margin-right:90px;margin-bottom:1rem;line-height:1;word-wrap:break-word;font-weight:400}.review-title:first-letter{text-transform:capitalize}.review-meta{zoom:1;margin-bottom:1rem}.review-meta:before,.review-meta:after{content:" ";display:table}.review-meta:after{clear:both}.review-user-is-vip{color:#333;font-weight:500;float:left;margin-right:.5rem}.review-user-info{float:left;margin-right:.5rem}.review-date{color:#999}.review-tags{line-height:1.3125rem}@media only screen and (min-width:40.063em){.review-star-rating .star-rating{float:right!important}.review-stars-results-text{float:none;margin-right:0;margin-bottom:.5rem}}/*!

# Social login

```
  <div class="row social-login-wrapper">
    <div class="column medium">
      <div class="row">
        <div class="column medium large">
          <hr>
          <h3 class="social-title margin-top">Don't want to complete the form?</h3>
        </div>
      </div>
      <div class="row">
        <div class="column small-6 padding-left padding-top">
          <div class="button with-icon button-facebook icon-facebook expand">
            Sign in with Facebook
          </div>
        </div>
        <div class="column small-6 padding-right padding-top">
          <div class="gplus-container">
            <div class="g-signin button with-icon button-google icon-google-plus expand">
              Sign in with Google
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
```

*/.button-facebook{background-color:#3f5fa4!important;font-size:.875rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-google{background-color:#ec4e34!important;font-size:.875rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button.with-icon.button-facebook:before{position:absolute;font-size:1.2rem;top:0;left:0;padding:1rem;display:block;background-color:#395693}.button.with-icon.button-google:before{position:absolute;font-size:1.2rem;top:0;left:0;padding:1rem;display:block;background-color:#df4a32}.g-signin iframe{opacity:0}@media only screen and (max-width:40em){.stack-on-top .button-facebook{margin-bottom:0!important}}.explain-points-modal{width:50rem;background-color:white;padding:2rem}.explain-points-modal h2{margin-top:1rem;margin-bottom:1rem}.explain-points-modal h4{margin-bottom:1rem}.explain-points-modal .row+.row:before{content:" ";border-bottom:1px solid rgba(0,0,0,.12);width:90%;margin-left:auto;margin-right:auto;display:block;margin-top:1rem;margin-bottom:1rem}.explain-points-modal .explain-text{padding:5% 0}.explain-points-modal .redeem-point-container{margin-top:2rem;margin-bottom:2rem;margin-left:auto;margin-right:auto;width:100%;position:relative;height:162px;width:243px}.explain-points-modal .redeem-point-container .redeem-point-circle{border:1px solid #559ebe;border-radius:50%;background-color:#eaf3f7;text-align:center;top:0;position:absolute;height:90px;width:90px;padding-top:1.775rem}.explain-points-modal .redeem-point-container .redeem-point-circle .price-line{line-height:1.2rem;color:#559ebe}.explain-points-modal .redeem-point-container .redeem-point-circle .point-line{color:#999;font-size:.675rem}.explain-points-modal .redeem-point-container .redeem-point-circle:nth-child(1){left:0}.explain-points-modal .redeem-point-container .redeem-point-circle:nth-child(2){left:81px}.explain-points-modal .redeem-point-container .redeem-point-circle:nth-child(3){left:162px}.explain-points-modal .redeem-point-container .redeem-point-circle:nth-child(odd){top:initial;bottom:0}