/*
Theme Name: HAERFEST SHOP
Theme URI: http://www.haerfest.us
Version: 1.0
Description: Haerfest webshop developed with wordpress and woocommerce
Author: HAERFEST
Author URI: http://www.haerfest.us

*/


/* align css*/
html{ /*
  position: absolute;
  background:url(../images/overlay.png) 140px -10px no-repeat;
    width: 100%;
    height: 100%;
    opacity:0.4;
    filter:alpha(opacity=40);
    z-index: 0; */
}

/* strip styles */
html, input.button{
    -webkit-appearance: none;
    -webkit-text-size-adjust:none;
}

strong{
    font-weight:bold;
}

a{cursor:pointer;}

a, ul, ul li {
    list-style-type: none;
    text-decoration: none;
    color: black;
}

#wrapper {
    width: 1024px;
    letter-spacing: 1px;
    text-align: center;
    /* color: #333333; */
    vertical-align: top;
    font-size: 11px;
    font-family: "Century Gothic", sans-serif;
}

#header {
    float:left;
    width: 840px;
    padding-left: 92px;
    padding-right: 92px;
}

#logo {
    float:left;
    width: 840px;
    height: 60px;
    background:url(../images/logo.png) 0 0 no-repeat;

}

#top_nav {
    font-size: 9px;
    font-weight: 500; 
    float:left;
    width: 840px;
    height: 24px;
    padding-top: 20px;
    letter-spacing: 1px;
}

#top_nav ul {
}

#top_nav ul li {
    display: inline;  
}

#menu {
    font-size: 9px;
    font-weight: 500; 
    float:left;
    width: 840px;
    padding-left: 92px;
    padding-right: 92px;
    letter-spacing: 1px;
}

#menu_overview {
    float:left;
    width: 840px;
    min-height: 28px;
    color: #595959; /* need this for a href because we cleared out a before */
    visibility: hidden;
}

#menu_overview a{
    color: #595959; /* need this for a href because we cleared out a before */
}
#menu_toggle_button {
    float:left;
    width: 13px;
}

#filter_overview {
    overflow: hidden;
    float:left;
    width: 827px;
    height:12px;
}

/* tabs */

#filter_overview ul.tabs {
    float:left;
    width: 827px;
}
#filter_overview ul.tabs li {
    float:left;
    padding-left:5px;
    color: #595959; /* colors in slashes */
}

#filter_overview #divide_line {
    float:left; /* need cause cufon keeps messing up alignment */
    letter-spacing:5px;
    min-width: 455px;
    max-width: 455px;
    height: 10px;
    overflow: hidden;
    position: absolute;

}

#filter_overview ul.tabs li:last-child {
    float: right;
}


#cart_overview {
    float:right;
}

#slide_menu {
    display: none;
    clear: left; /* this is important! otherwise choppy*/
}

#menu_detail {
    float:left;
    width: 840px;
    min-height: 40px;
    /* display: none; */
    /* background-color: #ddd; */
}

#filter_detail {
    float:left;
    padding-left:17px;
    width: 622px;
}  

/* tab content*/
#filter_detail .tab-content {
    float:left; /* need cause cufon keeps messing up alignment */
    width: 640px;
    /* border:1px solid #ddd; */
    /*  padding:0px; */
}

#filter_detail ul {
}

#filter_detail ul li {
    display: inline;
    float:left;
    padding-bottom: 10px;
    /* max-width: 140px; */
    padding-right:22px; /*spacing between sub cats */
} 

#filter_detail ul li a {
    color: #595959;
    padding: 2px;
}          

#filter_detail ul li a:hover {
    color: #393939;
}

#filter_detail ul li a:active {
    color: #151515;
}


#cart_detail {
    display: none;
    float: right;
    width: 200px

}

#content {
    float:left;
    width: 1024px;
    min-height:500px;
    visibility: hidden;
    /*
      background: yellow;
      border:1px solid red;
    */
}

#left_nav {
    float:left;
    width: 62px;
    text-align: left;
    margin-left: 20px;
    margin-right: 10px;
    min-height:500px;
}

.previous {
    background:url(../images/left_nav.png) 0 0 no-repeat;
}

#main_content {
    float:left;
    width: 840px;
    /* 840 */
    /* first image... going 840 now
    width: 800px;
    padding-left: 20px;
    padding-right: 20px;
    */
    min-height:500px;
}

/* splash */

.splash {
    text-align: center;
    margin-top: 192px;
    margin-left: 92px;
    /* vertical-align:middle;*/

}

.splash_grid{
    width: 100%;
    height: 100%;
} 

#main_content p{ /*add this because it breaks in safari */
    display:none;
}


/* used for retina bigger images */
#grid_content img {
    /* max-width: 840px !important;
    height: auto !important; */
}

/* slider */

/* for features page */      
#content #loopedslider {
    position:relative;
    float: left;
    margin:0 auto;
}

#content #container {
    float:left;
    position:relative;
    overflow:hidden;
    width: 840px;
    min-height:500px;
}

#content .slides {
    position:absolute;
    top:0;
    left:0;
}
#content .slides > div {
    position:absolute;
    width:840px;
    top:0;
    display:none;
}

/* for collections page */      
#collection_content #loopedslider {
    position:relative;
    float: left;
    margin:0 auto;
}

#collection_content #container {
    float:left;
    position:relative;
    margin: 0 0px;
    overflow:hidden;
    width: 840px;
    min-height:500px;
}    
#collection_content #container_745 {
    float:left;
    position:relative;
    margin: 0 47px;
    overflow:hidden;
    width: 745px;
    min-height:495px;
}     
#collection_content .slides {
    position:absolute;
    top:0;
    left:0;
}      
#collection_content .slides > div {
    position:absolute;
    width:840px;
    top:0;
    display:none;
}           
#collection_content #container_745 .slides > div {
    position:absolute;
    width:745px;
    top:0;
    display:none;
}
#collection_style_content{
    float:left;
    width: 840px;  
    padding-left: 92px;
    padding-right: 92px;
    letter-spacing: 1px; 
    padding-bottom: 2px;
}    
#collection_style_content_745 {
    float:left;
    width: 745px;  
    margin: 0 47px;
    padding-left: 92px;
    padding-right: 92px;
    letter-spacing: 1px;  
    padding-bottom: 2px;
}          
#collection_images_html{
    display: none;
    font-size: 12px;
    font-family: "Times New Roman";      
    letter-spacing: 0px; 
    color: grey;
}
#collection_images_html img{
    padding-top: 18px;
}
#collection_images_html #caption{
    float:right;
    position: relative;
    margin-top: 5px;
    padding-bottom: 2px;
    padding-right: 10px;
    text-align: right;
}

/* for single post */

#post_single_wrapper #loopedslider { 
    float:left; 
    width:554px; /* eliminates absolute positioning */
}
#post_single_wrapper #container {
    float:left;
    position:relative;
    overflow:hidden;
    width: 840px;
    min-height:411px;
}

/* for single product */
#product_single_wrapper #loopedslider {
    float:left;
    width:554px; /* eliminates absolute positioning */
}
#product_single_wrapper #container {
    float:left;
    position:relative;
    overflow:hidden;
    width: 840px;
    min-height:411px;
}



#terms_content {
    float:left;
    width: 840px;
    margin-top: 25px;
}
#terms_table {
    table-layout: fixed;
    border: hidden;
}
#terms_column {
    width : 100%;}

#terms_block {
    margin-left: 5px;
    margin-right: 5px;
}

#terms_title {
    margin-top: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-align: center;

    font-size: 16px;
    color: black;
    line-height: 120%;
    letter-spacing: 2.5px;
    font-family: "Century Gothic", sans-serif;
}

#terms_field_content {
    text-align: left;
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    margin-bottom: 30px;
}

#newsletter_content {
    float:left;
    width: 840px;
    height: 500px;
}

#careers_content {
    float:left;
    width: 840px;
    height: 500px;

    /* background:url(../images/information/HaerfestWebCareers_V1_16_14.jpg) 0 0 no-repeat; */
}
#careers_title {
    margin-top: 135px;
    text-transform: uppercase;
    font-size: 16px;
    color: black;
    line-height: 120%;
    letter-spacing: 2.5px;
    font-family: "Century Gothic", sans-serif;
    padding: 5px;
    text-align: center;
}
#careers_title div{
    padding: 5px;
}
#careers_description {
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 50%;
    text-align: left;

}

#careers_contact {
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 50%;
    text-align: center;

}

#about_content {
    float: left;
    width: 840px;
    height: 500px;
}

#about_title {
    margin-top: 135px;
    margin-bottom: 5px;
    font-size: 16px;
}
#about_title div{
    padding-top: 5px;
    padding-bottom: 5px;
}

#about_description {
    text-align: left;
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 30%;
}
/*START of NEW STYLE IDs, ADDED by TAI*/


/*CAREER PAGE STYLE, ADDED by TAI*/
#careers_content {
    float:left;
    width: 840px;
    height: 500px;

}
#careers_title {
    margin-top: 135px;
    text-transform: uppercase;
    font-size: 16px;
    color: black;
    line-height: 120%;
    letter-spacing: 2.5px;
    font-family: "Century Gothic", sans-serif;
    padding: 5px;
    text-align: center;
}
#careers_title div{
    padding: 5px;
}
#careers_description {
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 50%;
    text-align: left;
}

#careers_contact {
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 50%;
    text-align: center;
}


/*ABOUT PAGE STYLE, ADDED by TAI*/
#about_content {
    float: left;
    width: 840px;
    height: 500px;
}  

#about_title {
    margin-top: 135px;
    margin-bottom: 5px;
    font-size: 16px;
}  
#about_title div{
    padding-top: 5px;
    padding-bottom: 5px;
}  

#about_description {
    text-align: left;
    font-size: 12px;
    color: grey;
    line-height: 120%;
    font-family: 'times new roman', times, serif;
    width: 30%;
}


/*CONTACT PAGE STYLE, ADDED by TAI*/
#contact_content {
    float:left;
    width: 840px;
    height: 500px;
}

#contact_block {
    margin-top: 50px;
    width: 840px;
    float: left;
    font-size: 12px;
}

#contact_table {
    border: none;
}

#contact_title {
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 16px;

}
#contact_title div{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    margin-top: 5px;
}
#contact_info {
    padding-bottom: 15px;
}

#contact_department{
    border: none;
    text-transform: uppercase;
    text-align: right;
    width: 300px;

}
#contact_email{
    border: none;
    text-transform: uppercase;
    width: 300px;
}


#right_nav {
    float:right;
    width: 62px;
    text-align: right;
    margin-left: 10px;
    margin-right: 20px;
    min-height:500px;
}

/* END of NEW STYLE IDs, ADDED by TAI */


.next {
    background:url(../images/right_nav.png) 0 0 no-repeat;
}


#footer_padding {
    position:relative; /* needed in order to stay on top */
    z-index: 99;   
    float:left;
    clear:both;
    height: 40px;
    width: 100%;
    background: white;
}


#footer_padding_for_right_side_bar {
    float:right;
    position:relative; /* needed in order to stay on top */
    z-index: 99;  
    clear:both;
    height: 40px;
    overflow-y: visible;
    width: 286px;
    margin-right: 92px;
    top:-40px;
    /* Gradient top (clear) to bottom (to white) */

    background: -moz-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,1.0));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,1.0));
    background: linear-gradient(top, rgba(255,255,255,0.0), rgba(255,255,255,1.0));
}


#footer {
    /*
    background-color:white;  
    position: fixed;
    bottom: 0;
    */
    position:relative; /* needed in order to stay on top */
    padding-left: 92px;
    padding-right: 92px;
    z-index: 99;   
    float:left;
    width: 840px;
    letter-spacing: 1px;  
    background-color: white;
}

#bottom_nav {
    font-size: 9px;
    font-weight: 500; 
    text-align: center;
    height: 20px;
    padding-top: 9px;
}

#bottom_nav ul {
}

#bottom_nav ul li {
    display: inline;  
}

#copyright{
    float:left;
    width: 840px;
    height: 32px;
    color: grey;
    font-family: "Century Gothic", sans-serif;
    font-size: 8px;
    padding-top: 9px;
    line-height: 180%;
    /* background:url(../images/copyright.png) 0 0 no-repeat; */
    letter-spacing: 1.7px;
}

/* Underlines Links */
#top_nav a:hover .cufon,
#bottom_nav a:hover .cufon
{
    border-top: solid 1px transparent; /* to displace the jump */
    border-bottom: solid 1px #000000;
}

/* Underlines Links  - FILTER LINKS SHOULD BE GREY*/
/* changes the color of selected tab // refer use in menu.js */
#filter_overview a:hover .cufon
{
    border-top: solid 1px transparent; /* to displace the jump */    
    border-bottom: solid 1px #ddd;
}
#cart_overview a:hover .cufon
{
    border-top: solid 1px transparent; /* to displace the jump */    
    border-bottom: solid 1px #ddd;
}
#menu #filter_overview ul li a.selected
{
    color: black;
}
#menu_detail a:hover .cufon
{
    /* Taking this out for now because when I hover over in tablets it doesnt undo
    background-color: #ddd;
    
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
    */
}
#menu_detail #filter_detail ul li a.tab_clicked
{
    /* background-color: #ddd; */

    /* for gradiation
          background: #ddd;
          background: -moz-linear-gradient(top, #FFFFF3 0%, #ddd 100%);
          background: -webkit-linear-gradient(top, #FFFFF3 0%,#ddd 100%);
          background: linear-gradient(top, #FFFFF3 0%,#ddd 100%);
    */

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    background-image: url(../images/layout/grey_bullet.png);
    background-position: 1px;
    background-repeat: no-repeat;
    z-index: 10;

}



/* Underline links when on menu, reference by class on individual template */

.features .tabs a#features .cufon,
.collections .tabs a#collections .cufon,
.shop .tabs a#products .cufon
{
    color: black;
}

/* Underline links when on footer page, reference by class on individual template */
.about #bottom_nav ul li a#about .cufon,
.collections #bottom_nav ul li a#collections .cufon,
.contact #bottom_nav ul li a#contact .cufon,
.careers #bottom_nav ul li a#careers .cufon,
.features #bottom_nav ul li a#features .cufon,
.stockists #bottom_nav ul li a#stockists .cufon,
.terms #bottom_nav ul li a#terms .cufon,
.newsletter #bottom_nav ul li a#newsletter .cufon,
.home #bottom_nav ul li a#home .cufon,
.shop #top_nav ul li a#shop .cufon,
.shop_archive #top_nav ul li a#shop .cufon,
.single_product #top_nav ul li a#shop .cufon,
.single_product #top_nav ul li a#shop .cufon,
.cart #top_nav ul li a#shop .cufon
{
    /* border-top: solid 1px transparent;  /* to displace the jump */    
    border-bottom: solid 1px #000000;  
}



#stockists_content {
    float:left;
    width: 840px;
    height: 2250px;
    background:url(../images/information/Haerfest-Stockist-2014.08.20.jpg) 0 0 no-repeat; 
}


#stockists_column_1 {
    float:left;
    width: 277px;
}

#stockists_acrimony_online {
    float:left;
    width: 277px;
    height: 55px;
}

#stockists_acrimony_locations {
    float:left;
    width: 277px;
    height: 185px;
}

#stockists_creatures_of_comfort_online {
    float:left;
    width: 277px;
    height: 40px;
}

#stockists_creatures_of_comfort_locations {
    float:left;
    width: 277px;
    height: 170px;
}

#stockists_kapok_online {
    float:left;
    width: 277px;
    height: 40px;
}

#stockists_kapok {
    float:left;
    width: 277px;
    height: 255px;
}


#stockists_column_2 {
    float:left;
    width: 286px;
}
#stockists_life_online {
    float:left;
    width: 286px;
    height: 55px;
} 
#stockists_life {
    float:left;
    width: 286px;
    height: 185px;
}

#stockists_ln-cc_online {
    float:left;
    width: 286px;
    height: 40px;
}
#stockists_ln-cc {
    float:left;
    width: 286px;
    height: 90px;
}

#stockists_machus_online {
    float:left;
    width: 286px;
    height: 40px;
}
#stockists_machus_portland {
    float:left;
    width: 286px;
    height: 90px;
}

#stockists_msk_online {
    float:left;
    width: 286px;
    height: 40px;
}
#stockists_msk_kr {
    float:left;
    width: 286px;
    height: 110px;
}


#stockists_column_3 {
    float:left;
    width: 277px;
}



#stockists_opening_ceremony_online {
    float:left;
    width: 277px;
    height: 55px;
}

#stockists_opening_ceremony_ny {
    float:left;
    width: 277px;
    height: 90px;
}

#stockists_opening_ceremony_la {
    float:left;
    width: 277px;
    height: 100px;
}

#stockists_opening_ceremony_uk {
    float:left;
    width: 277px;
    height: 100px;
}

#stockists_waiting_for_the_sun_paris {
    float:left;
    width: 277px;
    height: 155px;
}

#stockists_anthemwares_online {
    float:left;
    width: 277px;
    height: 120px;
}


#nav_position{
    position: relative;
    clear: both;
    margin-right: 92px;
    padding-top: 8px;
    padding-bottom: 50px; 
}

#nav_more{
    float: right;
    background-color: rgba(221, 221, 221, 0.3);
    padding: 5px 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 100; 
    font-size: 11px; 
    font-family: "Century Gothic", sans-serif;
    text-align: right;
}
#nav_more a{
    color: #595959;  
}

#nav_more_collection{
    float:left;
    padding-left:92px;  
    color: #595959;  
}

#collection_content .pagination_container_collections_745 #nav_more_collection{
    float:left;
    font-size: 9px;
    padding-left:139px;  
    color: #595959;  
}

#nav_more_collection a:hover{
    border-bottom: solid 1px #595959;
}

#nav_more_additional_images{
    position:absolute;
    font-size: 9px;  
    color: #595959;  
}
#nav_more_additional_images a:hover{
    border-bottom: solid 1px #595959;
}

#infscr-loading {
    padding: 6px 6px 0;
    float:right;
    clear:both;
}
#infscr-loading div{
    z-index: 10; 
    font-size: 11px; 
    font-family: "Century Gothic", sans-serif;
}
#initialLoader {
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    display: block;
    left: 210px;
    padding: 6px 6px 0;
    position: fixed;
    top: 10px;
    width: 24px;
}

.wideSidebar #initialLoader {
    left: 340px;
}


.backorder_notification{
    color: red;
    text-transform: lowercase;
}