/* Theme Name: Gantry Theme for WordPress Theme URI: http://www.rockettheme.com Description: Basic default Gantry theme for Wordpress Version: 1.21 Author: RocketTheme, LLC Author URI: http://www.rockettheme.com */ /*//////////////////////////////////////////////////////////////////////// VARIABLES ////////////////////////////////////////////////////////////////////////*/ /* Colours */ @green: #4E5A53; @light-green: #4A5952; @dark-green: #37433E; @dark-cream: #FFFDE6; @grey: #DDDDDD; @shadow: #666666; /* Fonts */ @header-font: Georgia, Times, serif; @body-font: Georgia, Times, serif; /*//////////////////////////////////////////////////////////////////////// MIXINS & MISC ELEMENTS ////////////////////////////////////////////////////////////////////////*/ /* Picture Frames */ img.framed, img.alignright, img.alignleft { border: 1px solid @grey; /* Need a light grey */ background: #fff; padding: 4px; margin-bottom: 10px; } img.alignright { margin-left: 20px; margin-bottom: 20px; } img.alignleft { margin-right: 20px; margin-bottom: 20px; } /* Link Transitions */ .transition (@variable: color) { transition: @variable 0.3s; -moz-transition: @variable 0.3s; -webkit-transition: @variable 0.3s; -o-transition-transition: @variable 0.3s; } /* Border Radius' */ .radius { } /* Call To Action Buttons */ a.cta-button, .gform_wrapper input[type="submit"] { padding: 10px 30px; background: @green; border: 1px solid lighten(@green, 20%); -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; font-size: 18px !important; color: #fff; .transition (background); display: inline-block; margin: 0 0 20px; text-align: center; font-family: @body-font; font-style: italic; } a.cta-button:hover, .gform_wrapper input[type="submit"]:hover { background: @dark-green; color: #fff; cursor: pointer; } a.cta-button:active, .gform_wrapper input[type="submit"]:active { margin-top: 3px; } /* Flourish */ .flourish { height: 13px; clear: both; } .flourish-dark { background: transparent url('/images/flourish-dark.png') no-repeat center 0; margin: 20px 0; } .flourish-light { background: transparent url('/images/flourish-light.png') no-repeat center 0; } /*//////////////////////////////////////////////////////////////////////// TYPOGRAPHY ////////////////////////////////////////////////////////////////////////*/ /* Header Styles */ body h1, body h2, body h3, body h4, body h5 { color: @light-green; font-family: @header-font; letter-spacing: 0 !important; font-weight: normal; margin: 0 0 20px; text-shadow: 1px 1px 0px #fff; } /* Header Overrides */ body h1 { font-size: 28px; } body h2 { font-style: italic; font-size: 20px; } body h3 { } body h4 { } body h5 { } /* Paragraph & Link Styles */ body p, body a { font-family: @body-font; margin: 0 0 10px; font-size: 14px; font-weight: normal; color: #777; } /* Paragraph & Link Overrides */ body p { font-family: @body-font; } body p.italic { font-style: italic; } body p.highlight { color: @dark-green; } body a { color: @light-green; font-style: italic; .transition (color); } body a:hover { color: @dark-green; } /*//////////////////////////////////////////////////////////////////////// COLUMNS ////////////////////////////////////////////////////////////////////////*/ .onecol { float: left; width: 260px; padding: 10px 0; } .onecol-left { margin-right: 40px; padding-right: 39px; border-right: 1px solid @grey; } .onecol-middle { } .onecol-right { margin-left: 40px; padding-left: 39px; border-left: 1px solid @grey; } /*//////////////////////////////////////////////////////////////////////// BACKGROUND ////////////////////////////////////////////////////////////////////////*/ /* Page Background */ body { background: @dark-cream url('/images/bg-light.png') repeat 0 0; } /* Clear white backgrounds of all .rt-containers */ .rt-container, #rt-header .rt-container, #rt-menu .rt-container, #rt-footer .rt-container, #rt-copyright .rt-container { background: transparent; } /*//////////////////////////////////////////////////////////////////////// STRUCTURE (Sizes, padding, margins) ////////////////////////////////////////////////////////////////////////*/ /* Remove padding & bottom margin from .rt-block's */ .rt-block { padding: 0; margin-bottom: 0; } /* Remove padding & border-bottom from .rt-article's */ .rt-wordpress .rt-article-bg { padding-bottom: 0; border-bottom: none; } .rt-wordpress .rt-article { margin-bottom: 0; } /* Hide 'Edit this entry' links 8*/ .edit-entry { display: none; } /* Page padding */ body.home .rt-page { padding: 40px 0; } /* .rtpage may not be the best element to target to get every page? */ /*//////////////////////////////////////////////////////////////////////// CONTENT AREA: HEADER ////////////////////////////////////////////////////////////////////////*/ /* Header Container */ #rt-header { position: absolute; text-align: center; width: 100%; z-index: 100; background: @dark-green url('/images/bg-dark.png') repeat-x 0 0; top: 30px; height: 120px; border: 1px solid #515B56; border-width: 1px 0; -webkit-box-shadow: 0 0 5px 0 #000; box-shadow: 0 0 5px 0 #000; } #rt-header .rt-container { display: block; position: relative; height: 100%; } /* #rt-header .rt-container .rt-grid-4 { width: auto; } */ /* Logo */ #rt-header .rt-grid-4 { float: none; display: block; position: relative; margin-left: auto; margin-right: auto; z-index: 101; width: 176px; clear: none; } #rt-header .rt-grid-4.rt-alpha { width: auto; text-align: right; position: absolute; left: 0; top: 0; } #rt-header .rt-grid-4.rt-omega { width: auto; text-align: left; position: absolute; right: 0; top: 0; } #rt-header .widget_gantry_logo { padding-top: 28px; transition: opacity 0.4s; -moz-transition: opacity 0.4s; -webkit-transition: opacity 0.4s; -o-transition-transition: opacity 0.4s; } #rt-header .widget_gantry_logo:hover { opacity: 0.5; } #rt-logo { background: url(/images/logo.png) 0 0 no-repeat; width: 176px; height: 62px; margin: 0; padding: 0; } /* Shadow */ #rt-drawer .widget_text { background: transparent url('/images/shadow-dark.png') no-repeat center 0; height: 60px; } #text-10509 /* Homepage Header Top shadow */, #text-30510 /* Contact Page Header Top shadow */ { position: absolute; width: 940px; z-index: 99; top: 10px; } #text-10510 /* Homepage Header Bottom shadow */, #text-30011 /* Contact Page Header Bottom shadow */ { position: absolute; width: 940px; z-index: 99; top: 115px; } #text-10 /* All other pages Header Bottom shadow */ { position: absolute; width: 940px; z-index: 79; top: 185px; } #text-10505 /* Homepage Strapline Top shadow */ { position: absolute; width: 940px; z-index: 99; top: 480px; background: transparent url('/images/shadow.png') no-repeat center 0; } #text-10506 /* Homepage Strapline Bottom shadow */ { position: absolute; width: 940px; z-index: 99; top: 600px; background: transparent url('/images/shadow.png') no-repeat center 0; } #text-30012 /* Contact Page Strapline Top shadow */ { position: absolute; width: 940px; z-index: 79; top: 480px; background: transparent url('/images/shadow.png') no-repeat center 0; } #text-30013.widget_text /* Contact Page Strapline Bottom shadow */ { position: absolute; width: 940px; z-index: 79; top: 540px; background: transparent url('/images/shadow.png') no-repeat center 0; } /*//////////////////////////////////////////////////////////////////////// NAVIGATION ////////////////////////////////////////////////////////////////////////*/ /* Right Menu */ #gantry_menu-3 { float: right; } /* Vertical positioning */ #rt-header .widget_gantry_menu { padding-top: 55px; } /* Nav Items Container */ #rt-header .widget_gantry_menu ul { padding: 0; text-align: left; } /* Nav Items */ #rt-header .menutop.theme-fusion li.root > .item span { padding: 0; } #rt-header .widget_gantry_menu ul li { background-color: transparent; text-align: center; } #rt-header .widget_gantry_menu ul li a { font-style: normal; color: #838B87; /* CHECK COLOUR */ font-size: 15px; } /* Nav Items Margins */ #rt-header #gantry_menu-3 ul li { margin-left: 25px; } #rt-header #gantry_menu-4 ul li { margin-right: 25px; } /* Hover State */ #rt-header .widget_gantry_menu ul li a:hover { color: #fff; background-color: transparent; } /* Active Item */ #rt-header .widget_gantry_menu ul li.active a { font-style: italic; color: #fff; background-color: transparent; } /* Nav Sub-headings */ #rt-header .widget_gantry_menu ul li em { font-style: italic; text-transform: none; color: darken(#838B87, 10%) } /*//////////////////////////////////////////////////////////////////////// CONTENT AREA: TOP (Ribbon) ////////////////////////////////////////////////////////////////////////*/ #rt-top { position: relative; width: 940px; margin: 0 auto; } #rt-top .rt-container { position: absolute; z-index: 90; background: #E9E7D0 url('/images/bg-ribbon-light.png') repeat 0 0; border: 1px solid #E9E7D0; border-top: 0; width: auto; right: 40px; top: 140px; height: auto; -webkit-box-shadow: 0 0 6px 0 #666; box-shadow: 0 0 6px 0 #666; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; .transition (margin); } body.home #rt-top .rt-container { -webkit-box-shadow: 0 0 10px 0 #111; box-shadow: 0 0 10px 0 #111; } /* #rt-top .rt-container:hover { margin-top: 3px; } */ #rt-top .rt-container .rt-grid-12 { width: auto; padding: 28px 20px 12px; margin: 0; position: relative; bottom: 0; text-align: center; } #rt-top .rt-container .rt-grid-12 p.ribbon { color: #ffffff; font-size: 15px; font-style: italic; margin-bottom: 0; text-shadow: 1px 1px 0 #646D5F; float: left; margin-right: 10px; padding-top: 4px; } img.social { float: left; margin-right: 10px; opacity: 0.7; .transition (opacity); } img.social-last { margin-right: 0; } img.social:hover { opacity: 1; } /* Menu Page */ /*//////////////////////////////////////////////////////////////////////// CONTENT AREA: SHOWCASE (Slider) ////////////////////////////////////////////////////////////////////////*/ #rt-showcase { background: @dark-green; } body.page-id-22 #rt-showcase { height: 500px; overflow: hidden; } #rt-showcase .wk-slideshow { margin-left: -55px !important; } /*//////////////////////////////////////////////////////////////////////// CONTENT AREA: FEATURED (Strapline / Page Title) ////////////////////////////////////////////////////////////////////////*/ #rt-feature { background: @dark-cream url('/images/bg-strap.png') repeat 0 0; height: 222px; position: relative; z-index: 80; -webkit-box-shadow: 0 0 5px 0 #444; box-shadow: 0 0 5px 0 #444; } body.home #rt-feature { height: 140px; z-index: 102; } body.page-id-22 #rt-feature { height: 80px; } #rt-feature .rt-container { padding-top: 50px; } #rt-feature h2 { text-align: center; font-size: 32px; font-style: normal; text-shadow: 1px 1px 0px #fff; } /*//////////////////////////////////////////////////////////////////////// PAGE: HOME ////////////////////////////////////////////////////////////////////////*/ /* Home-specific overrides to columns */ body.home .onecol { min-height: 380px; text-align: center; margin: 0; } body.home .onecol-middle { border: 1px solid white; border-top: none; border-bottom: none; padding: 10px 39px; } /* Map */ #map { border: 1px solid @grey; /* Need a light grey */ background: #fff; padding: 4px; margin-bottom: 10px; } /*//////////////////////////////////////////////////////////////////////// MAIN CONTENT ////////////////////////////////////////////////////////////////////////*/ /* Add padding to the top of the inner pages, and remove it from the home page */ #rt-mainbody { margin-top: -68px; position: relative; z-index: 80; } body.home #rt-mainbody { margin-top: 0; } /* Add margin to bottom of content, and remove it from the home page */ .rt-article-content { margin-bottom: 50px; } body.home .rt-article-content { margin-bottom: 0; } /* Page Titles */ .rt-headline { text-align: center; margin-bottom: 40px; height: 70px; } .rt-headline h1 { margin-bottom: 0; font-style: italic; line-height: 2.4em; } /* Override for inner pages with Showcase content (eg. Contact) */ body.page-id-22 #rt-mainbody { margin-top: -80px; } body.page-id-22 .rt-headline { height: 80px; } body.page-id-22 .rt-headline h1 { line-height: 2.9em; } /* Override for Blog pages */ body.blog h1.rt-pagetitle { text-align: center; margin-bottom: 40px !important; height: 70px; margin-bottom: 0; font-style: italic; line-height: 2.4em; } body.blog .rt-headline { text-align: center; margin-bottom: 10px; height: auto; } body.blog .rt-headline h1 { line-height: 1em; } body.blog .rt-articleinfo { font-style: italic; font-size: 11px; color: #999; } /* Set page width & text alignment */ body.blog .rt-blog { width: 80%; margin: 0 auto; text-align: center; } /*//////////////////////////////////////////////////////////////////////// PAGE: MENU ////////////////////////////////////////////////////////////////////////*/ /* Secondary Nav */ body.page-id-12 #rt-utility { margin-top: -70px; height: 70px; } /* Nav Items Container */ #rt-utility .widget_gantry_menu ul { padding: 0; text-align: left; } /* Nav Items */ #rt-utility .menutop.theme-fusion li.root > .item span { padding: 0; } #rt-utility .widget_gantry_menu ul li { background-color: transparent; text-align: center; } #rt-utility .widget_gantry_menu ul li a { font-style: normal; color: #838B87; /* CHECK COLOUR */ font-size: 15px; font-style: italic; } #rt-utility .widget_gantry_menu ul li a span { line-height: 5em; } /* Nav Items Margins */ #rt-utility #gantry_menu-20007 { float: left; width: 300px; text-align: right; } #rt-utility #gantry_menu-20007 ul li { margin-left: 25px; } #rt-utility #gantry_menu-20008 { float: right; width: 300px; text-align: left; } #rt-utility #gantry_menu-20008 ul li { margin-right: 25px; } /* Hover State */ #rt-utility .widget_gantry_menu ul li a:hover { color: @dark-green; background-color: transparent; } /* Active Item */ #rt-utility .widget_gantry_menu ul li.active a { font-style: italic; color: @dark-green; background-color: transparent; } /* Nav Sub-headings */ #rt-utility .widget_gantry_menu ul li em { font-style: italic; text-transform: none; color: darken(#838B87, 10%) } /* Main Menu (not nav!) */ h3.fl_food_menu_title { text-align: center; } /* Menu Section Titles / Links */ ul#fl_food_menu_sub { width: 100%; margin: 0 0 40px 0; padding: 0; text-align: center; float: left; } ul#fl_food_menu_sub li { display: inline-block; margin-right: 20px; width: auto; } /* Menu Items */ ul#fl_food_menu_items { float: left; width: 100%; text-align: center; padding: 0; margin: 0; } .fl_food_menu_item_description { margin: 0; } .fl_food_menu_item_price { text-align: center; display: block; float: right; padding-left: 0; width: 100%; position: relative; top: auto; right: auto; margin-bottom: 10px; } /* Mix & Mash Container */ #mixnmash { padding-top: 40px; float: left; } #mixnmash-container { padding: 40px; margin-bottom: 40px; border: 1px solid @grey; background: white; height: auto; float: left; width: 858px; } /* Mix & Mash Logo */ #mixnmash-logo { width: 100%; float: left; margin-bottom: 20px; } #mixnmash img { padding: 0; border: 0; margin: -10px 0 0 0; float: left; clear: both; } /* Columns */ .mixnmash-column { float: left; width: auto; min-height: 300px; padding-right: 40px; margin-right: 40px; border-right: 1px solid @grey; } /* Individual Columns */ #price.mixnmash-column { width: 180px; } #sausages.mixnmash-column { text-align: right; border: none; padding: 0; margin: 0; } #or.mixnmash-column { text-align: center; border: none; padding: 0; margin: 0; font-style: italic; width: 40px; line-height: 2em; } #pies.mixnmash-column { width: 180px; } #mash.mixnmash-column { width: 180px; border: none; padding: 0; margin: 0; } /* Width of centre columns ('Sausages' / 'Pies') */ #sausages.mixnmash-column, #pies.mixnmash-column { width: 145px; } /* Typography */ #mixnmash h3 { } #mixnmash h5 { font-style: italic; font-size: 12px; } /* Disclaimer */ #disclaimer { font-style: italic; text-align: center; } /*//////////////////////////////////////////////////////////////////////// PAGE: ABOUT ////////////////////////////////////////////////////////////////////////*/ /* Gallery */ .photospace-container { margin: 0; border: 1px solid #ddd; background: #fff; padding: 10px; float: right; width: 500px; } .about-container { float: left; width: 390px; } .photospace{ position:relative; margin-bottom: 60px !important; /* space for row of thumbs */ margin-top: 0; } .photospace .slideshow img { vertical-align:bottom !important; margin-left: -2px; } .photospace .slideshow span.image-wrapper { bottom:0; } .photospace , .photospace .thumnail_col, .photospace .gal_content, .photospace .loader, .photospace .slideshow a.advance-link{ width:500px; /* width of main image */ } .photospace .thumbs_wrap2{ height:50px; /* height of thumbnails */ width:100%; position:absolute; bottom:-60px; left:0; overflow: hidden; } .photospace .thumbs_wrap{ float: left; left: 50%; position: relative; } .photospace .thumnail_col a.pageLink { width: 48px; height: 48px; } .photospace .pageLink.next{ margin-right:0; } .photospace .thumnail_col { float: left; left: -50%; width:auto !important; position: relative; } .photospace ul.thumbs { float:left; } .photospace a.advance-link { line-height: 300px; /* height of main image */ } /*//////////////////////////////////////////////////////////////////////// PAGE: CONTACT ////////////////////////////////////////////////////////////////////////*/ /* Make Showcase (map area) full width on Contact page only */ body.page-id-22 #rt-showcase .rt-container, body.page-id-22 #rt-showcase .rt-container .rt-grid-12 { width: 100%; margin: 0; padding: 0; } /* Map */ .balloon p, .balloon a { text-align: center; margin: 5px 0 0; } /*//////////////////////////////////////////////////////////////////////// FORMS ////////////////////////////////////////////////////////////////////////*/ .gform_wrapper { margin: 0; max-width: 100%; } /* Field Labels */ .gform_wrapper .top_label .gfield_label { font-weight: normal; font-style: normal; font-size: 14px; text-align: center; width: 100%; margin-bottom: 10px; margin-top: 0; } .gform_wrapper #field_1_4 .gfield_label, .gform_wrapper #field_2_4 .gfield_label, .gform_wrapper #field_2_5 .gfield_label, .gform_wrapper #field_2_8 .gfield_label, .gform_wrapper #field_2_7 .gfield_label { margin-top: 20px; } /* Input Fields */ .gform_wrapper li, .gform_wrapper form li { overflow: hidden; } .gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"], .gform_wrapper textarea.medium { padding: 10px !important; background: #fff; border: 1px solid @grey; font-size: 13px; text-align: center; } .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium { width: 278px !important; } /* Make fields run side by side */ .gform_wrapper #field_1_1, .gform_wrapper #field_1_2, .gform_wrapper #field_1_3, .gform_wrapper #field_2_1, .gform_wrapper #field_2_2, .gform_wrapper #field_2_3, .gform_wrapper #field_2_5, .gform_wrapper #field_2_8, .gform_wrapper #field_2_7, .gform_wrapper #field_3_1, .gform_wrapper #field_3_2, .gform_wrapper #field_3_3 { float: left; width: 300px; clear: none; margin-right: 20px; } .gform_wrapper #field_1_3, .gform_wrapper #field_2_3, .gform_wrapper #field_2_7, .gform_wrapper #field_3_3 { margin-right: 0; } .gform_wrapper #field_3_3 { margin-bottom: 20px; } /* Form Description Labels */ .gform_wrapper .gfield_description { font-style: italic; text-align: center; font-family: @body-font !important; color: #999999; font-size: 11px; } /* Submit Button (See 'MIXINS & MISC ELEMENTS' for basic styling) */ .gform_wrapper input[type="submit"] { font-size: 16px !important; } .gform_wrapper .gform_footer { padding: 0; margin: 20px 0 0 0; text-align: center; } /*//////////////////////////////////////////////////////////////////////// FOOTER ////////////////////////////////////////////////////////////////////////*/ /* Footer Container */ #rt-footer { height: 300px; background: @dark-green; -webkit-box-shadow: 0 0 5px 0 @shadow; box-shadow: 0 0 5px 0 @shadow; } /* CTA Button */ #rt-footer #text-5 .textwidget { text-align: center; height: 0; } #rt-footer a.cta-button { margin-top: -20px; display: inline-block; position: relative; z-index: 200; -moz-box-shadow: inset 0px 1px 0px 0px #a7b8af; -webkit-box-shadow: inset 0px 1px 0px 0px #a7b8af; box-shadow: inset 0px 1px 0px 0px #a7b8af; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7e9086), color-stop(1, #4e5a53) ); background: -moz-linear-gradient( center top, #7e9086 5%, #4e5a53 100% ); background-color: #7e9086; transition: background 0.4s; -moz-transition: background 0.4s; -webkit-transition: background 0.4s; -o-transition-transition: background 0.4s; } #rt-footer a.cta-button:hover { background: #7e9086; } #rt-footer a.cta-button:active { margin-top: -19px; } /* New style */ /* .myButton { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:1px solid #4e5a53; display:inline-block; color:#ffffff; font-family:Georgia; font-size:18px; font-weight:normal; padding:9px 27px; text-decoration:none; text-shadow:1px 1px 0px #37433e; }.myButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4e5a53), color-stop(1, #7e9086) ); background:-moz-linear-gradient( center top, #4e5a53 5%, #7e9086 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e5a53', endColorstr='#7e9086'); background-color:#4e5a53; }.myButton:active { position:relative; top:1px; } */ /* Hide CTA Button on Menu & Contact Pages */ body.page-id-22 #rt-footer a.cta-button, body.page-id-12 #rt-footer a.cta-button { display: none; } /* Flourish */ #text-7 { padding-top: 50px; text-align: center; } /* Bottom Navigation */ /* Horizontal & Vertical positioning */ #rt-footer .widget_gantry_menu { margin: 20px 0; text-align: center; } /* Nav Items Container */ #rt-footer .widget_gantry_menu ul { padding: 0; margin-left: auto; margin-right: auto; } /* Nav Items */ #rt-footer .menutop.theme-fusion li.root > .item span { padding: 0; } #rt-footer .widget_gantry_menu ul li { background-color: transparent; } #rt-footer .widget_gantry_menu ul li a { font-style: normal; color: #838B87; /* CHECK COLOUR */ font-size: 15px; height: auto; line-height: 1em; } #rt-footer .menutop.theme-fusion li.root > .item span { line-height: 1em; } /* Nav Items Margins */ #rt-footer ul li { margin-right: 20px; } #rt-footer ul li.item81 { margin-left: 20px; } /* Hover State */ #rt-footer .widget_gantry_menu ul li a:hover { color: #fff; background-color: transparent; } /* Active Item */ #rt-footer .widget_gantry_menu ul li.active a { font-style: italic; color: #fff; background-color: transparent; } /* Copyright */ .copyright { text-align: center; color: @light-green; font-size: 13px; font-style: italic; margin: 0; } .copyright a:hover { color: white; }