/* ============================================================================= Primary styles Author: Simon Shahriveri | Propeller Communications ========================================================================== */ /* colour pallete -------------- /* Contents -------- 0 Non-semantic helper classes 1 Typography 2 Headings 3 Layout Base Elements 4 Navigation 5 Layout 6 Backstage */ /* ============================================================================ 0 - Non-semantic helper classes Please define your styles before this section. ========================================================================== */ ::-moz-selection{ background: #bc427b; color:#fff; text-shadow: none; } ::selection { background:#bc427b; color:#fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: #bc427b; } button { width: auto; overflow: visible; } .ie7 img { -ms-interpolation-mode: bicubic; } .clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clear { display: inline-block; } /* start commented backslash hack \*/ * html .clear { height: 1%; } .clear { display: block; } /* close commented backslash hack */ .cb{clear:both} .mt20{ margin-top: 20px; } .mb20{ margin-bottom: 20px; } .mb30{ margin-bottom: 30px; } .text--center{ text-align:center; } .text--justify { text-align: justify; } /* For image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden!important; } /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* #Less Variables ================================================== */ @base-font-size: 16px; @base-line-height: 22px; @base-color: #010101; @main-font: 'ITCStoneSerif', Arial, Helvetica, sans-serif; // Color variables @black: #010101; @red: #b30838; @imgsrc: '../img'; /*----------------------------------------------------------------------------- --------------------------------1--------TYPOGRAPHY---------------------------- -------------------------------------------------------------------------------*/ @font-face { font-family: 'ITCStoneSerif'; src: url('../font/itcstoneserifstdmedium-webfont.eot'); src: url('../font/itcstoneserifstdmedium-webfont.eot?#iefix') format('embedded-opentype'), url('../font/itcstoneserifstdmedium-webfont.woff') format('woff'), url('../font/itcstoneserifstdmedium-webfont.ttf') format('truetype'), url('../font/itcstoneserifstdmedium-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ITCStoneSerif'; src: url('../font/itcstoneserifstdmediumitali-webfont.eot'); src: url('../font/itcstoneserifstdmediumitali-webfont.eot?#iefix') format('embedded-opentype'), url('../font/itcstoneserifstdmediumitali-webfont.woff') format('woff'), url('../font/itcstoneserifstdmediumitali-webfont.ttf') format('truetype'), url('../font/itcstoneserifstdmediumitali-webfont.svg') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'ITCStoneSerif'; src: url('../font/itcstoneserifstdsemibold-webfont.eot'); src: url('../font/itcstoneserifstdsemibold-webfont.eot?#iefix') format('embedded-opentype'), url('../font/itcstoneserifstdsemibold-webfont.woff') format('woff'), url('../font/itcstoneserifstdsemibold-webfont.ttf') format('truetype'), url('../font/itcstoneserifstdsemibold-webfont.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'ITCStoneSerif'; src: url('../font/itcstoneserifstdsemiboldita-webfont.eot'); src: url('../font/itcstoneserifstdsemiboldita-webfont.eot?#iefix') format('embedded-opentype'), url('../font/itcstoneserifstdsemiboldita-webfont.woff') format('woff'), url('../font/itcstoneserifstdsemiboldita-webfont.ttf') format('truetype'), url('../font/itcstoneserifstdsemiboldita-webfont.svg') format('svg'); font-weight: bold; font-style: italic; } body{ font-family:@main-font; color:@black; font-size:@base-font-size; } /* Paragraph sizes */ p { color: @black; font-family:@main-font; font-size: @base-font-size; line-height: @base-line-height; margin: 0 0 10px; } a, a:active {color:@black; font-weight:bold; text-decoration:none;} a:hover {color:@red; text-decoration:none;} a.button { text-align:center; background:@red; color:#fff; float:left; margin:0 0 15px 0; padding:5px 10px; text-transform:uppercase; } .clear { clear:both; } small { font-size: 0.833em; font-style: normal; } blockquote { } blockquote span {float: right; font-weight: bold; } .first{margin-left:0!important; padding-left:0!important;} .last{margin-right:0!important; padding-right:0!important;} ul.bullet { list-style-type: disc; list-style-position: inside; margin:5px 0; li { margin:3px 0; } } ul.bullet2 { list-style-type: circle; list-style-position: inside; margin-left:20px; } ul.bullet2 li { } .text--center { text-align: center; } .btn__normal { background: #B40838; color: #FFFFFF; text-transform: uppercase; font-weight: normal; padding: 10px 20px; margin: 20px 0; display: inline-block; &:hover { background: #D9839C; color: #FFFFFF; } } /*----------------------------------------------------------------------------- --------------------------------2--------HEADINGS------------------------------ -------------------------------------------------------------------------------*/ h1,h2,h3,h4,h5,h6 {line-height:1; font-family:@main-font; font-weight:normal; text-transform:uppercase;} h1 { font-size: 60px; margin: 10px 0; color: @red;} h2 { font-size: 25px; margin: 10px 0; color: @red;} h3 { font-size: 20px; margin: 10px 0; color: @red;} h4 { font-size: 16px; margin: 10px 0; color: @red;} h5 { font-size: 14px; margin: 10px 0; color: @red;} h6 { font-size: 12px; margin: 10px 0; color: @red;} /*----------------------------------------------------------------------------- ---------------------------3----LAYOUT BASE ELEMENTS---------------------------- -------------------------------------------------------------------------------*/ html { overflow-x:hidden; } body{ margin: 0; padding: 0; background: #f5f5f5 url('-{imgsrc}/bg.gif') repeat 0 0; min-width:960px; } /* Containers ----------------------------------------------------------------------------------------------------*/ .container_12 { margin: 0 auto; width: 960px; overflow:hidden; position:relative; } /* Grid >> Global ----------------------------------------------------------------------------------------------------*/ .col60, .col140, .col220, .col300, .col380, .col460, .col540, .col620, .col700, .col780, .col860, .col940 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; } .lt-ie7 .col60, .lt-ie7 .col140, .lt-ie7 .col220, .lt-ie7 .col300, .lt-ie7 .col380, .lt-ie7 .col460, .lt-ie7 .col540, .lt-ie7 .col620, .lt-ie7 .col700, .lt-ie7 .col780, .lt-ie7 .col860, .lt-ie7 .col940 {margin-right:0!Important;} /* Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------------------------------*/ .alpha { margin-left: 0!important; padding-left: 0!important; } .omega { margin-right: 0!important; padding-right: 0!important; } /* Grid >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .col60 { width:60px; } .container_12 .col140 { width:140px; } .container_12 .col220 { width:220px; } .container_12 .col300 { width:300px; } .container_12 .col380 { width:380px; } .container_12 .col460 { width:460px; } .container_12 .col540 { width:540px; } .container_12 .col620 { width:620px; } .container_12 .col700 { width:700px; } .container_12 .col780 { width:780px; } .container_12 .col860 { width:860px; } .container_12 .col940 { width:940px; } /*----------------------------------------------------------------------------- --------------------------------4--------NAVIGATION---------------------------- -------------------------------------------------------------------------------*/ #wrapper { nav{ margin:25px 0 0 0; padding:0; width:960px; float:left; display:inline; ul { display:block; width:100%; margin:0 auto; padding:0 0 25px 0; height:38px; li{ display:inline; float:left; margin:0; position:relative; a { float:left; display:block; padding:0 11px 0 11px; color:@black; background: transparent url('-{imgsrc}/nav-sep.gif') no-repeat top right; text-transform:uppercase; text-align:center; font-weight:bold; font-size:15px; line-height:1; -webkit-transition: all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; &.omega { background:transparent none repeat 0 0; padding:0 0 0 12px; } &:hover, &#current { color:@red; } } } } } } /*----------------------------------------------------------------------------- ------------------------------5----------LAYOUT-------------------------------- -------------------------------------------------------------------------------*/ #wrapper { width:100%; height:100%; margin:0; } .wrap { position:relative; border:2px solid @red; margin:90px auto; width:1116px; height:auto; min-height:500px; .decor { background: transparent url('-{imgsrc}/border-decorate.gif') no-repeat 0 0; position:absolute; display:block; height: 20px; width:20px; &.top-left { top:-20px; left:-20px; } &.top-right { top:-20px; right:-20px; } &.bottom-left { bottom:-20px; left:-20px; } &.bottom-right { bottom:-20px; right:-20px; } } } header { overflow:visible!important; .logo { float:left; display:inline; width:100%; margin-top:-60px; a { display:block; margin:0 auto; text-align:center; } } } body#autumnoffer-page .buttons { display:none; } .autumn-offer-form { position:absolute; width:100%; background:#b30838; top:61px; padding:20px 0; } #main { overflow:visible; .ttl { color:@black; font-size:26px; text-align:center; } .doublebtn { display: block; clear: both; width: 960px; height: 70px; margin: 35px 0px 25px 0px; .left { display: inline; float: left; width: 402px; } .right { display: inline; float: right; width: 402px; } /*a.redboxbtn { display:block; width: 402px; height: 62px; background: transparent url('-{imgsrc}/quicklinks/chris-download.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; } a.redboxbtn36 { display:block; width: 402px; height: 62px; background: transparent url('-{imgsrc}/btn/btn-christmas-dinner3695.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; } a.redboxbtn31 { display:block; width: 402px; height: 62px; background: transparent url('-{imgsrc}/btn/btn-christmas-lunch3195.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; }*/ } .triplebtn { display: block; clear: both; width: 960px; height: 70px; margin: 35px 0px 25px 0px; .left { display: inline; float: left; width: 282px; margin-right: 60px; } .center { display: inline; float: left; width: 282px; } .right { display: inline; float: right; width: 282px; } a.redboxbtndwn { display:block; width: 282px; height: 62px; background: transparent url('-{imgsrc}/btn/btn-christmas-download.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; } a.redboxbtn36 { display:block; width: 282px; height: 62px; background: transparent url('-{imgsrc}/btn/btn-christmas-dinner3695.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; } a.redboxbtn31 { display:block; width: 282px; height: 62px; background: transparent url('-{imgsrc}/btn/btn-christmas-lunch3195.jpg') no-repeat 0 0; text-indent: -9999px; outline: none; } } .buttons, .buttons-container { float:left; display:inline; width:960px; margin:20px 0 30px 0; position:relative; z-index:100; .joinus-btn { float:left; display:inline; width:470px; position:relative; } .joinus-btn-center { margin: 0 auto; width:470px; position:relative; } .book-btn, .book-btn-dmn { float:right; display:inline; width:470px; position:relative; z-index:10; } a { background: transparent url('-{imgsrc}/btn/btn.gif') no-repeat 0 0; width:470px; height:50px; color:#fff; font-size:23px; line-height:1; padding:22px 0 0 0; text-align:center; text-transform:uppercase; float:left; display:inline; span { font-size:14px; font-style:italic; text-transform:none; } } .not-a-button { background: none; padding: 0; margin-right: 3px; height: auto; font-size: 12px; float: right; display: block; width: 100%; clear: both; text-align: right; margin-bottom: 10px; } } .chris-down { display:block; width: 402px; height: 62px; background: transparent url('-{imgsrc}/quicklinks/chris-download.jpg') no-repeat 0 0; text-indent: -9999px; margin: 35px 0 0 0; outline: none; } .fest-down { display:block; width: 402px; height: 62px; background: transparent url('-{imgsrc}/quicklinks/fest-download.jpg') no-repeat 0 0; text-indent: -9999px; margin: 35px 0 35px 0; outline: none; } .parties-list { margin: 21px 0 21px 16px; li { list-style: disc; padding: 0 0 0 20px; margin:0; } } .parties-list-title { color:#B30838; font-size:18px; text-transform: uppercase; padding: 15px 0 0 0; } } .quicklinks { margin-top: 20px; .news { display: inline-block; width:300px; margin:0 8px 0 8px; .pack { text-indent:-9999px; width:300px; height:62px; display:block; margin: 25px 0 10px 0; } .new-y { background: transparent url('-{imgsrc}/quicklinks/new-years.jpg') no-repeat 0 0; } .hen-b { background: transparent url('-{imgsrc}/quicklinks/hen-pack.jpg') no-repeat 0 0; } .hen-b-active { background: transparent url('-{imgsrc}/quicklinks/hen-pack-visited.jpg') no-repeat 0 0; } .corp-b { background: transparent url('-{imgsrc}/quicklinks/corp-pack.jpg') no-repeat 0 0; } .corp-b-active { background: transparent url('-{imgsrc}/quicklinks/corp-pack-visited.jpg') no-repeat 0 0; } .wine-b { background: transparent url('-{imgsrc}/quicklinks/wine-tasting-pack.jpg') no-repeat 0 0; } .wine-b-active { background: transparent url('-{imgsrc}/quicklinks/wine-tasting-visited.jpg') no-repeat 0 0; } .chris-b { background: transparent url('-{imgsrc}/quicklinks/chris-pack.jpg') no-repeat 0 0; } .chris-b-active { background: transparent url('-{imgsrc}/quicklinks/chris-pack-visited.jpg') no-repeat 0 0; } .main-restaurant-b { background: transparent url('-{imgsrc}/quicklinks/main-restaurant.jpg') no-epeat 0 0; } .main-restaurant-b-active { background: transparent url('-{imgsrc}/quicklinks/main-restaurant-active.jpg') no-repeat 0 0; } .private-dining-b { background: transparent url('-{imgsrc}/quicklinks/private-dining-btn.jpg') no-repeat 0 0; } .private-dining-b-active { background: transparent url('-{imgsrc}/quicklinks/private-dining-btn-active.jpg') no-repeat 0 0; } .news-top { background: transparent url('-{imgsrc}/quicklinks/news-top.gif') no-repeat 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:14px; } .news-middle { background: transparent url('-{imgsrc}/quicklinks/news-middle.gif') repeat-y 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:auto; img { display:block; margin:0 auto; text-align:center; height:82px; width:189px; } figcaption { margin:0 auto; display:block; width:182px; min-height:189px; h4 { text-align: center; text-transform:uppercase; color:@black; } p { text-align:left; font-size:12px; line-height:18px; } a { font-weight:bold; font-style:italic; text-align:right; color:@black; display:block; } } } .news-bottom { background: transparent url('-{imgsrc}/quicklinks/news-bottom.gif') no-repeat 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:14px; } } .news-alt { .news-top { background: transparent url('-{imgsrc}/quicklinks/news-alt.gif') no-repeat 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:14px; } .news-middle { background: transparent url('-{imgsrc}/quicklinks/news-alt-middle.gif') repeat-y 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:auto; img { display:block; margin:0 auto; text-align:center; height:82px; width:189px; } } .news-bottom { background: transparent url('-{imgsrc}/quicklinks/news-alt-bottom.gif') no-repeat 0 0; background-size: 100% auto; float:left; display:inline; width:220px; height:14px; } } .news--220 { width: 220px; } .news-center { display: inline-block; float: none; } } .quicklinks--center { text-align: center; } footer { &.foot { background: #f5f5f5 url('-{imgsrc}/bg.gif') repeat 0 0; position:relative; top:70px; margin:0 auto; display:block; width:780px; clear: both; } p { color:@red; font-size:13px; line-height:1; a { color:@red; font-weight:normal; &:hover { color:@red; } } } .address { } .contact-info { } .twitter { width:310px; background: transparent url('-{imgsrc}/twitter-top.gif') no-repeat 0 0; margin-top:-35px; .tweet_link { position:absolute; top:5px; right:5px; display:block; width:24px; height:21px; } .twitter-bottom { width:310px; background: transparent url('-{imgsrc}/twitter-bottom.gif') no-repeat 0 0; float:left; display:inline; height:25px; margin-top:-25px; } article { width:260px; height:90px; padding: 30px 25px 0; .tweet_date { text-align:right; } } } .siteby { position:absolute; top:20px; right:-110px; width:110px; height:25px; } } /*----------------------------------------------------------------------------- ------------------------------6----------PAGE STYLING-------------------------- -------------------------------------------------------------------------------*/ // News .news-item { float:left; display:inline; width:100%; margin:30px 0; .news-img { float:left; display:inline; width:300px; img { padding:5px; background:@red none repeat 0 0; } } .news-content { float:left; display:inline; width:600px; h2 { } p { } } } // Reviews .reviews-item { margin: 30px 0; .reviews-img { width: 300px; img { padding: 5px; background: @red none repeat 0 0; } } } // Menus .private-top{margin-bottom:20px;} .menu-links { float:left; display:inline; width:960px; margin: 0 0 30px 0; background: transparent url('-{imgsrc}/menu-border.gif') repeat-x top left; &.plain { display:inline-block; margin: 0 0; text-align:center; background:none; ul { display:inline-block; float:none; background:none; } } &.private-dining { text-align: center; ul { width:100%; li { display: inline-block; float: none; vertical-align: top; } } } &.special-offer { ul { padding-left:75px; width:885px; height:15px; } h1{ margin: 0; padding-top:15px; } } &.menu-links--christmas { margin: 30px 0 0; ul { display: block; text-align: center; } li { display: inline-block; float: none; padding: 15px 0 9px; } } ul { float:left; display:inline width:100%; background: transparent url('-{imgsrc}/menu-border.gif') repeat-x bottom left; li { float:left; display:inline; margin:0 10px; padding:15px 0; a { float:left; display:block; color:@red; text-transform:uppercase; font-size:16px; -webkit-transition: all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition: all 0.2sease-in-out; transition: all 0.2s ease-in-out; &:hover { color:@red; } } } } } #voucher-index-page .wrap, #voucher-birthday-page .wrap { height:auto; min-height:320px; } .voucher-center { width: 960px; padding: 100px 0 0 0; text-align: center; } #special-offer { margin:0 auto; width:300px; text-align:center; clear: left; .content { z-index:99; } } .hen-btn-holder { width: 100%; height: 50px; float: left; display: inline; text-align: center; margin: 20px 0px 0px 0px; } .hen-btn-package-outer { background-color: #9B999A; display: inline; float: left; height: 38px; margin: 0 5px; padding: 5px; width: 215px; } .hen-btn-package { background-color: #9B999A; border: 2px solid #FFFFFF; color: #FFFFFF !important; display: inline; float: left; font-size: 13px; height: 16px; padding: 9px 5px; text-align: center; text-transform: uppercase; width: 201px; } .hen-list { margin: 10px !important; list-style: disc inside none; width: 100%; float: left; display: inline; } .right { float: right; } .hen-btn-thin { width: 130px; } .hen-btn-outer-thin { width: 144px; } .hen-wide { width: 815px; height: 170px; } .hen-logos { width: 100%; height: auto; float: left; display: inline; text-align: center; margin: 0px; } .hen-logos img { margin: 0 10px 20px 10px; float: left; } .smlhead { font-size: 18px; text-transform: none !important; } .float { float: left; display: inline; margin-top: 20px; } .cookie-table { border: 1px solid black; td, th {padding: 2% 2%; padding-top: 10px; text-align: left; border: 1px solid black} .cookie-table__purpose { width: 30%; } .ten-percent { width: 10%; } .twenty-percent { width: 20%; } } #terms-and-conditions { min-width: 0; p { color: #010101; font-family: 'ITCStoneSerif', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin: 0 0 10px; } } .buttons-treat { width: 100%; margin: 0 auto 20px; padding: 0 0 10px; position: relative; border-bottom: 1px solid #000; a { display: inline-block; float: none; margin: 1%; } } .booking-console1, .booking-console2 { width: 343px; height: 354px; background: #B30838; top: 32%; left: 37%; right: 0; bottom: 0; position: fixed; z-index: 999; padding: 3%; display: none; box-shadow: 2px 6px 42px -4px #555; .close { a {color: #fff; font-size: large; color: #fff; font-size: large; position: absolute; margin: -2em 0em 0em 9.5em; } } } .popup { display: none; margin: 0 auto; background: #B30838; position: fixed; top:0; left:0; right:0; margin-left: 650px; z-index: 100; top:30%; left: 6%; width: 400px; height: 400px; padding: 3em 0 0 0; box-shadow: 3px 0px 24px #222; .popup-inner { width: 100%; height: auto; display: block; margin: 0 auto; } .popup-close { position: absolute; right: 0; top: 0; padding: 1em; color: #fff; } } .new-years{ h2{ font-family:@main-font; font-weight:bold; font-size:24px; color:@red; text-decoration:none; letter-spacing:1px; text-shadow: #999999 0 0 1px; line-height:32px; margin:0 0 2px 0; text-align:left; text-transform:uppercase; } h3{ font-family:@main-font; font-weight:bold; font-size:20px; color:@red; text-decoration:none; letter-spacing:1px; text-shadow: #999999 0 0 1px; line-height:32px; margin:0 0 2px 0; text-align:left; text-transform:uppercase; } p{ margin-bottom: 20px; } } .small-text { font-size: 12px; line-height: 16px; } /*----------------------------------------------------------------------------- ------------------------------------PRINT-------------------------------------- -------------------------------------------------------------------------------*/ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*----------------------------------------------------------------------------- -------------------------------DESIGN MY NIGHT--------------------------------- -------------------------------------------------------------------------------*/ .cbp-spmenu { position: fixed; background-color: #963F4A; } .cbp-spmenu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6; } .cbp-spmenu a { display: block; color: #fff; font-size: 1.1em; font-weight: 300; } .cbp-spmenu a:active { background: #afdefa; color: #47a3da; } /* Orientation-dependent styles for the content of the menu */ .cbp-spmenu-vertical { width: 220px; height: 100%; top: 0; z-index: 1000; } .cbp-spmenu-vertical a { border-bottom: 1px solid #258ecd; padding: 1em; } .cbp-spmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; } .cbp-spmenu-horizontal h3 { height: 100%; width: 20%; float: left; } .cbp-spmenu-horizontal a { float: left; width: 20%; padding: 0.8em; border-left: 1px solid #258ecd; } /* Vertical menu that slides from the left or right */ .cbp-spmenu-left { left: -240px; } .cbp-spmenu-left.cbp-spmenu-open { left: 0px; } .dmn-form { background-color: #963F4A !important; } .dmn-form div { overflow: visible; } .dmn-form h1 { color: #fff !important; } .console-close { text-align: right; font-family: "Brandon Grotesque",Tahoma,sans-serif; color: #fff; margin-right: 10px; } .center { margin: 10px auto !important; display: block; float: none !important; width: 200px; } .ml20 { margin-left: 20px !important; } .text-center { text-align: center; a { display: inline-block !important; float: none; } } .extra-lrg-menu-btn { background: @red; padding: 6px 15px; color: #fff; text-transform: uppercase; display: inline-block; font-size: 22px; span { display: inline-block; border: 2px solid #fff; padding: 8px 20px; } &:hover { color: #fff; background: #911E3D; } } .lrg-menu-btn { background: @red; padding: 6px; color: #fff; text-transform: uppercase; display: inline-block; font-size: 18px; span { display: inline-block; border: 2px solid #fff; padding: 8px 20px; } &:hover { color: #fff; background: #911E3D; } } .btn-preview { padding: 12px 1px; margin-top: 10px; position: relative; border: 4px solid #911E3D; box-sizing: border-box; moz-box-sizing: border-box; span { color: #fff !important; background: @red; padding: 10px 15px; border: 1px solid #fff !important; text-decoration: none; } &:hover > span { background: #911E3D; } } .dmn-form { .powered-by { clear: both; } } .js-close-wrap, .js-close-wrap-join { position: absolute; top: -10px; right: 10px; color: #fff; font-family: Arial; cursor: pointer; } .diamond--border { position:relative; display:inline-block; padding:10px 0 16px; span { display:block; padding:0 20px; background: transparent url('-{imgsrc}/quicklinks/news-alt-middle.gif') repeat-y 0 0; background-size: 100% auto; } &:before { content:""; position:absolute; top:0; left:0; display:block; width:100%; height:15px; background: transparent url('-{imgsrc}/quicklinks/news-alt.gif') no-repeat 0 0; background-size: 100% auto; } &:after { content:""; position:absolute; bottom:0; left:0; display:block; width:100%; height:15px; background: transparent url('-{imgsrc}/quicklinks/news-alt.gif') no-repeat 0 0; background-size: 100% auto; } } #christmas-page { p{ margin-bottom: 20px; } }