/*------------------------------------------------------------------
[Main Stylesheet]

Project:	Perfectionists' Cafe
Version:	2.0
Last change:	17/06/14 
Author:	Tim Wong
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
# [Color codes]

#    Coffee Cream: #f3d9b7
#    Orange: #FFA400
#    Tan: #b47a4a
#    Chestnut: #704337
#    Chocolate: #5a4a42
#    Creamy White: #FCF1E4
#    Grey: #f5f5f5
#    Black: #121212


#    Body copy on white: #222222
#    Body copy on dark: #FFFFFF

#    Headers on white: Orange: #FFA400
#    Headers on Dark: Coffee Cream: #f3d9b7
#    Primary Links on White: 70% Tan: #caa280
#    Primary links on Dark: Orange: #FFA400
#    Secondary links on White: Grey: #a0a0a0

# */



/*------------------------------------------------------------------
    FOUNDATION OVERRIDES
-------------------------------------------------------------------*/

body, h1, h2, h3, h4, h5, h6 {
    font-family: GillSansMTPro-Medium, Arial, sans-serif;
    letter-spacing: 0.063em;
}

p {
    font-family: GillSansMTPro-Light, Arial, sans-serif;
/*    letter-spacing: 0.063em;*/
    letter-spacing: 0;
}

h2 {
    font-family: GillSansMTPro-Light, Arial, sans-serif;
    letter-spacing: 0.313em;
    text-transform: uppercase;    
    color: #B47A4A;
    margin-top: 1em;    
}

h3 {
    font-family: GillSansMTPro-Bold, Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: #704337;
    letter-spacing: 0.063em;
}

p.credits {
 
    font-family: GillSansMTPro-MediumItalic, Arial, sans-serif;
    font-size: 1rem;
    color: #A0A0A0;
   
}

h6 {
    font-family: GillSansMTPro-MediumItalic, Arial, sans-serif;
}

a {
    letter-spacing: 0;
    color: #b47a4a;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    opacity: 0.7;
}

a:hover, a:focus {
    color: #b47a4a; 
    opacity: 1;
}

/* styling the nav */
#fixed-container::after {
    content: " ";
    display: block;
    height: 15px;
    background-color: transparent;
    background-image: url("../img/menu-shadow.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    position: absolute;    
    width: 100%;
}

nav a {
    opacity: 1;
}
.top-bar {
    background-color: #FFF;
}

.top-bar.expanded {

}

.top-bar .toggle-topbar.menu-icon a > span > i {
    color: #5a4a42;  
}
 
.top-bar-section > ul > li {
    background-color: #FFF;
}

.top-bar-section li:not(.has-form) a:not(.button) {
    background-color: #FFF;
}


.top-bar-section ul li > a {
    font-family: GillSansMTPro-Bold, Arial, sans-serif;
    text-transform: uppercase;
    color: #caa280;
    letter-spacing: 0.063em;
}

.top-bar.expanded .title-area {
    background-color: #FFF;
}

    
.top-bar-section ul li > a:hover {
    background: none !important;
    color: #b47a4a !important;
}

.top-bar.expanded .top-bar-section ul li > a:hover {
    background-color: #f5f5f5 !important;
}

.top-bar-section ul li.active > a {
    background: #FFF !important;
   color: #5a4a42 !important;
}

.top-bar-section ul li.active > a:hover {
    background: none !important;
}


/* centering the top navigation */
nav.top-bar:not(.expanded) {
    text-align: center;                
}

nav.top-bar:not(.expanded) section.top-bar-section { 
    display: inline-block; 
}  


button, .button {
    border-width: 1px;
    font-family: GillSansMTPro-Light, Arial, sans-serif;
    background-color: transparent;
    border-color: #b47a4a;
    color: #b47a4a;
    transition: opacity 250ms ease-out; 
    text-transform: uppercase;
    letter-spacing: 0.313em;
    opacity: 1;
}

button:hover, .button:hover, button:focus, .button:focus {   
    color: #b47a4a;
    background-color: transparent;
    opacity: 1;
}

a.button.secondary {
    font-family: GillSansMTPro-Medium, Arial, sans-serif;
    background-color: #f5f5f5;
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
    letter-spacing: 0.313em;
}

a.button.secondary:hover, a.button.secondary:focus {   
    background-color: #f5f5f5;
    color: #a0a0a0;
}

button.secondary {
    font-family: GillSansMTPro-Medium, Arial, sans-serif;
    background-color: #f5f5f5;
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
    letter-spacing: 0.313em;
    text-transform: uppercase;
}

button.secondary:hover, button.secondary:focus {
    background-color: #f5f5f5;
    color: #a0a0a0;
}

hr {
    border-color: #704337;
}

/*------------------------------------------------------------------
    MAIN STYLES
-------------------------------------------------------------------*/
.grey {
    background: #f5f5f5 url("../img/grey-texture.png");
}


.jupiter { 
    font-family: JupiterPro, Georgia, serif;
    font-weight: normal;
    font-style: normal;

    -moz-font-feature-settings:"calt" 0;
    -moz-font-feature-settings:"calt=0";
    -ms-font-feature-settings:"calt" 0;
    -o-font-feature-settings:"calt" 0;
    -webkit-font-feature-settings:"calt" 0;
    font-feature-settings:"calt" 0; 
}

section h1.jupiter {
    text-transform: uppercase;
    font-size: 1.6875rem;
    
}

a.knife {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    opacity: 1;   
}

a.knife:hover, a.knife:focus {
    opacity: 1;   
}

blockquote {
    margin-bottom: 2em;
}

blockquote h6 {
    float: right;
    color: #a0a0a0;
    margin-top: 1em;
}

.photos {
    
    margin-top: 1em;
}

/*  BUTTONS & ICONS 
    ----------------------------*/

div.row.top {
    padding-top: 5em;   
}

.button.top {
    border-width: 1px;
    border-color: #CCC;
    font-family: GillSansMTPro-Light, Arial, sans-serif;
    background-color: #f5f5f5;
    color: #a0a0a0;     
}

.button.top:hover, .button.top:focus {   
    color: #a0a0a0;
    background-color: #f5f5f5;
}

.button.top i {
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.grey .button.top {
    background: none;   
}

i {
    color: #b47a4a;
}

i.top {
    color: #a0a0a0;
    margin-bottom: 1rem;
}


/* SPLASH PAGE
   ---------------------------- */

#splash {
    height: 100%;
    background: #f5f5f5 url("../img/grey-texture.png");
    overflow: hidden;
}

#splash h1 {
    color: #5a4a42;
    text-transform: uppercase;
    letter-spacing: 0.313em;
    font-size: 2rem;
}

#splash .titles {
    margin-top: 1em;   
}

#splash h2 {
    font-family: GillSansMTPro-Light, Arial, sans-serif;
    letter-spacing: 0.313em;
    text-transform: uppercase;    
    color: #B47A4A;
}

#splash .button {
    margin-top: 2em;
}


/* HOME PAGE
   ---------------------------- */

#home {    

/*    background: #FFF url("../img/cogs-bottom-left.png");*/
    background: #f5f5f5 url("../img/grey-texture.png");
/*
    background-repeat: no-repeat;
    background-position: bottom left;
*/
    padding-top: 5em;
/*    padding-bottom: 0;*/
    
}

#home .titles {
    margin-top: 1em;   
}


#home p {
    font-family: GillSansMTPro-Light, Arial, sans-serif;
}

/* MENU PAGE
   ---------------------------- */
#menu-wrapper {
    background: #FFF url("../img/cogs-side-left.png");
    background-repeat: no-repeat;
    background-position: center left;
}

#menu h2.heroitems {
    margin-top: 0;   
}

#menu {
    padding-bottom: 0;
}

#grill hr, #fishnchips hr, #pizza hr, #nitro hr, #breakfast hr {
    border-style: dotted;
    border-color: #a0a0a0;
}

#downloadables .button {
    background-color: #FCF1E4;
}

/* GROUP PAGE
   ---------------------------- */
#group-wrapper {
    background: #FFF url("../img/cogs-bottom-right.png");
    background-repeat: no-repeat;
    background-position: bottom right;
}

#group a {
    font-family: GillSansMTPro-MediumItalic, Arial, sans-serif;
}

#group h3 {
    margin-top: 1em;
}

#comingsoon {
    padding-top: 5rem;
    padding-bottom: 0;
}


#comingsoon h3 {
    margin-top: 2rem;
}

/* CAREERS PAGE
   ---------------------------- */
section#careers {
    padding-bottom: 2em;
}

section#careers li {
    letter-spacing: 0;
    font-family: GillSansMTPro-Light, Arial, sans-serif;
    font-size: 1rem;
/*    color: #B47A4A;*/
    color: #222;
    text-rendering: optimizeLegibility;
    
}

select {
    font-family: GillSansMTPro-Light, Arial, sans-serif;
}



/* CONTACT PAGE
   ---------------------------- */
#contact div.map {
 
}

#contact h2.jupiter {
    letter-spacing: 0.063em;
}

#contact a {
    font-family: GillSansMTPro-MediumItalic, Arial, sans-serif;
}

/* FOOTER
   ----------------------------- */

footer {
    background-color: #5a4a42;
    padding-top: 2rem;
}

footer p {
    font-family: GillSansMTPro-Medium, Arial, sans-serif;
}

footer .panel {
/*    border-color: #fff;*/
    border: none;
    background: none; 
    overflow: hidden;
    padding: 0;
    padding-left: 0;
}

footer h4 {

    color: #f3d9b7 !important;
    line-height: 1.5 !important; 
    text-transform: uppercase;
    letter-spacing: 0.063em;
}

footer .panel p {
    color: #FFF;       
}

footer hr {
    border-color: #FCF1E4;
    opacity: 0.2;
}

footer .copyright {
    color: #f3d9b7;
}

footer .email {
    text-transform: uppercase;
    letter-spacing: 0.063em;
}

footer h2 {
    font-family: GillSansMTPro-Bold, Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: #f3d9b7;
    letter-spacing: 0.063em;
    margin-top: 0;
}
/*

footer h2 > a {
    color: #F3D9B7;
    font-family: GillSansMTPro-Bold,Arial,sans-serif;
    font-size: 1rem;
    letter-spacing: 0.063em;
    text-transform: uppercase;
}
*/

/* Footer Link Styles */
footer a {
    color: #FFA400;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

footer a:hover, footer a:focus {
    color: #FFA400; 
    opacity: 1;
}

footer hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
}





/*------------------------------------------------------------------
    MEDIA QUERIES
-------------------------------------------------------------------*/

/* small displays */
@media only screen {
    
    section.content {
        padding-top: 5em;
        padding-bottom: 5em;
    }
    
    h2 {
        font-size: 0.75rem;
    }
    
    #comingsoon h2 {
        font-size: 1.25rem;
    }
    
    #splash h2 {
        margin-top: 1em;     
    }
    
    #menu h2.heroitems {
        font-size: 1.25rem;
    }
        
    
    footer .email, footer .copyright {
        font-size: 0.75rem;
    }
}

/* medium displays */
@media only screen and (min-width: 40.063em) {
    
    h2 {
        font-size: 1rem;
    }
    
    footer .email, footer .copyright {
        font-size: 1rem;
    }
}

/* large displays */
@media only screen and (min-width: 64.063em) {
    
    h2 {
        font-size: 1.25rem;
    }
}

/* xlarge displays */
@media only screen and (min-width: 90.063em) {

}

/* xxlarge displays */
@media only screen and (min-width: 120.063em) {

}

/* Orientation targeting */
@media only screen and (orientation: landscape) {
    #splash {
        padding-top: 5em;
    }
}

@media only screen and (orientation: portrait) {
    #splash {
        padding-top: 12.5em;
    }
}

/* Print visibility */
@media print {

}