﻿/* CSS Document */

/* colors: 

green: 2b471f
red: 558e86
brown dark : 362522
brown light: 61453f


*/

/* ------------------------------------------------------------------------ */
/* START Freestyle
--------------------------------------------------------------------------- */

.fs-color1 { color: #558e86; }
.fs-color2 { color: #362522; }
.fs-color3 { color: #2b471f; }

.fs-white { color: #fff; }
nobr .fs-white { text-shadow: -1px -1px 3px #333; background: #ddd; display: inline-block; padding: .25em .5em; }

.fs-float-left { float: left; margin: 0 1.25em .5em 0; }
.fs-float-right { float: right; margin: 0 0 .5em 1.25em; }

.fs-img-border { display: inline-block; padding: 4px; background: #fff; border: 1px solid #aaa;
	-moz-box-shadow: 0px 0px 6px #ccc;
	-webkit-box-shadow: 0px 0px 6px #ccc;
    box-shadow: 0px 0px 6px #ccc;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#eeeeee')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#eeeeee');
}

.fs-img-border img { display: block; }
.fs-subheadingLG { 
    font-size: 1.4em;
    font-weight: bold;
}

.fs-subheadingMED { 
    font-size: 1.25em;
    font-weight: bold;
}

.fs-subheadingSM { 
    font-size: 1.2em;
    font-weight: bold;
}

.fs-bodyTextLG { 
    font-size: 1.1em;
}

.fs-bodyTextSM { 
    font-size: 10px;
}

/* ---------------------- */
/* MFT Defaults
------------------------- */
html {
    overflow-y: scroll;
}

body {
    text-align: center; /*IE6 center page fix*/
    margin: 0;
    min-width: 320px;
    scrollbar-face-color: #eee;
    scrollbar-highlight-color: #eee;
    scrollbar-shadow-color: #eee;
    scrollbar-3dlight-color: #ddd;
    scrollbar-darkshadow-color: #eee;
    scrollbar-arrow-color: #ccc;
    scrollbar-track-color: #ccc;
    line-height: 1.35;
}

img {
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    max-width: 100%;
}

a img {
    border: none;
}

h1 a,
h1 a:hover {
    text-decoration: none;
}

h1, h2, h3, p {
    margin: 0 0 .8em 0;
}

h1, h2, h3 {
    line-height: 1.15;
}

h1 { font-size: 1.7em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.125em; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    vertical-align: bottom;
}

td {
    vertical-align: middle;
}

blockquote {
    margin-left: 2em;
}

ul {
    margin: 0 0 1em 2em;
    padding: 0;
    list-style: none;
}

ul li {
    background: url(/images/bullet_square_4x4.gif) left .4em no-repeat;
    padding: 0 0 0 10px;
}

ul li, ol li {
    margin-bottom: .5em;
}

ol li ol li { list-style: lower-alpha; margin: .5em 0; }
ol li ol li ol li { list-style: lower-roman; }
.nav,
ul.nav ul,
ol.nav ol {
    margin: 0;
    padding: 0;
}

.nav li {
    margin: 0;
    padding: 0;
    background: none;
}

ol.nav li { list-style: none; }
.nav li a,
.nav li a:hover {
    text-decoration: none;
}

hr {
    border : none;
    border-top : 1px solid #ccc;
    height : 0;
    margin : 1em 0;
    display: inline-block;
    width: 100%;
    clear: both;
}

a {
    color: #333;
	-webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, padding .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, padding .2s ease-in-out;
	-ms-transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, padding .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, padding .2s ease-in-out;
	transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, padding .2s ease-in-out;
}

a:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.fine-print { font-size: .75em; }

/* ------------------------------------------------------------------------ */
/* START Layout
--------------------------------------------------------------------------- */

body {  } /* styles moved to body tag until cuteeditor is fixed, chrome issue*/
body, button, input, select, textarea { font-family: "Lucida Grande", "Lucida Sans", Verdana, sans-serif; font-size: 15px; color: #362522; }

h1,
h2,
h3 { font-family: 'Montserrat', sans-serif; font-weight: normal; color: #362522; line-height: 1.4; }

h1 { color: #fff; background: #6b6c6e url(/images/grad2-bot-shad.png) bottom repeat-x; padding: .2em 1em; margin: 0 -2.4% 1em;
    -moz-border-radius: .3em 0 0 .3em;
    -webkit-border-radius: .3em 0 0 .3em;
    border-radius: .3em 0 0 .3em; /* future proofing */
    -khtml-border-radius: .3em 0 0 .3em; /* for old Konqueror browsers */
    -moz-box-shadow: -.125em 0px .5em #ddd;
    -webkit-box-shadow: -.125em 0px .5em #ddd;
    box-shadow: -.125em 0px .5em #ddd;
}
div.col2.full-width h1 { margin: 0 -1.7% 1em; }

div.pageContainer { margin: 70px auto 0; max-width: 970px; text-align: left; background: url(/images/trans80_ffffff.png);
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em; /* future proofing */
    -khtml-border-radius: 2em; /* for old Konqueror browsers */
    -moz-box-shadow: 0px 0px 1em #9c7e5f;
    -webkit-box-shadow: 0px 0px 1em #9c7e5f;
    box-shadow: 0px 0px 1em #9c7e5f;
}

div.header { display: inline-block; width: 97%; text-align: center; background: url(/images/jungle-top.png) left bottom repeat-x; padding: 1.5% 1.5% 0; }
div.header-top { display: inline-block; width: 100%; min-height: 45px; }

div.search-widget-container { float: left; width: 37%; }

ul.cartNav { float: right; width: 39%; margin: .75em 0 2em; font-size: 0; }
ul.cartNav > li { display: inline-block; *display: inline; position: relative; /*white-space: nowrap; */background: url(/images/rule-vert-sm.png) left center no-repeat; padding-left: 2px; font-size: 16px; }
ul.cartNav > li:first-child { background: none; padding: 0; }
ul.cartNav > li > a,
ul.cartNav > li.items { display: inline-block; font-size: 12px; padding: 0 .75em; margin-left: -1px; line-height: 30px; }
ul.cartNav > li > a:hover { background: url(/images/trans80_ffffff.png); }
/*
ul.cartNav li:hover ul { display: inline-block; *display: inline; }
ul.cartNav li ul { background: #fff; position: absolute; top: 30px; left: -.25em; margin: 0; padding: .3em .25em; background: url(/images/trans80_ffffff.png);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -khtml-border-radius: .5em;
    -moz-box-shadow: 0px 0px .5em #999;
    -webkit-box-shadow: 0px 0px .5em #999;
    box-shadow: 0px 0px .5em #999;
}

ul.cartNav li ul li { border-top: 1px solid #eee; }
ul.cartNav li ul li:first-child { border: 0; }
ul.cartNav li ul li a { line-height: 1; display: block; padding: .5em .75em; }
ul.cartNav li ul li a:hover { text-decoration: none; background: #eee; }
*/
div.checkout-top,
div.navMain ul li ul { background: #f6f5f5;padding: 1em; font-size: .9em; /*background: url(/images/trans80_ffffff.png);*/ z-index: 100;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -khtml-border-radius: .5em;
    -moz-box-shadow: 0px 0px .5em #999;
    -webkit-box-shadow: 0px 0px .5em #999;
    box-shadow: 0px 0px .5em #999;
}

div.header-left,
div.header-right,
.logo { display: inline-block; *display: inline; width: 32%; vertical-align: middle; margin: -70px 0 -52px; }
div.header-right p { display: inline-block; *display: inline; max-width: 30%; vertical-align: middle; font-weight: bold; margin: 0; font-size: .9em; }
div.header-right img { vertical-align: middle; max-width: 70%; }


div.navMain { /*clear: both;*/ background: url(/images/ribbon.png) center bottom no-repeat;  min-height: 122px; padding-top: 42px; margin: -71px -30px 0; }
div.navMain > ul { text-align: center; font-size: 0; background: #858b32 url(/images/glow-6c4843.png) left center; padding: 0 9px; margin-top: 71px; display: inline-block;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px; /* future proofing */
    -khtml-border-radius: 9px; /* for old Konqueror browsers */
    -moz-box-shadow: 0px 0px 9px #000;
    -webkit-box-shadow: 0px 0px 9px #000;
    box-shadow: 0px 0px 9px #000;
}
div.navMain > ul > li { display: inline-block; *display: inline; background: url(/images/rule-vert-sm.png) left center no-repeat; padding-left: 2px; position: relative; font-size: 18px; }
div.navMain > ul > li:first-child { padding: 0; background: none; }
div.navMain > ul > li > a { display: inline-block; padding: 0 .75em; line-height: 42px; color: #fff; text-shadow: 0 0 .25em #000; }
div.navMain > ul > li > a:hover,
div.navMain > ul > li.selected > a { background: #6e7310 url(/images/grad2-bot-shad.png) bottom repeat-x;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em; /* future proofing */
    -khtml-border-radius: .3em; /* for old Konqueror browsers */
}
    div.navMain ul li:hover ul { display: block; }
    div.navMain ul li ul { display: none; position: absolute; top: 42px; left: 2px; padding: .25em 0; }
    div.navMain ul li ul li a { white-space: nowrap; font-size: .8em; display: block; padding: .35em 1.25em; text-align: left; }
    div.navMain ul li ul li a:hover { background: #6e7310; color: #fff; }

div.main { display: inline-block; width: 97%; background: url(/images/jungle-bot.png) repeat-x; padding: 20px 1.5% 1.5%; }
div.col1 { float: left; width: 17%; padding: 0 4%; }
div.col2 { width: 70%; float: right; background: url(/images/shad-vert.png) left top no-repeat; padding: 0 0 0 5%; min-height: 340px; }
div.col2.full-width { width: auto; float: none; background: none; }
div.col1 div.nav > ul { margin-bottom: 1em; }
div.col1 div.nav > ul > li {  }
div.col1 div.nav > ul > li > a,
div.col1 div.nav > ul > li > span { width: 100%; margin: 0 -7px 0.5em; padding: 7px; background: #62670e url(/images/grad2-bot-shad.png) bottom repeat-x; display: block; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 1.5em; color: #fff; text-align: center; text-shadow: 1px 1px 2px #000; border-radius: 5px; 
                                    -moz-box-shadow: 1px 1px 2px #000;
                            	    -webkit-box-shadow: 1px 1px 2px #000;
	                                box-shadow: 1px 1px 2px #000; }

div.col1 div.nav > ul > li a:hover {  }
div.col1 div.nav > ul li ul {  }
div.col1 div.nav > ul li ul li { margin-top: .25em; }
div.col1 div.nav > ul li ul li a { background: #858b32 url(/images/glow-6c4843.png) left center; color: #fff; display: block; padding: .5em .75em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em; /* future proofing */
    -khtml-border-radius: .3em; /* for old Konqueror browsers */
}
div.col1 div.nav > ul li ul li.on a {  }
div.col1 div.nav > ul li ul li a:hover { background: #558e86 url(/images/grad2-bot-shad.png) bottom repeat-x; }
div.contentContainer {  }
/*

div.callouts { margin: 1.5em 0 0 -1.25%; text-align: center; clear: both; }

div.callouts > div { display: inline-block; *display: inline; width: 24.5%; margin: 1.25% 0 0 1.25%; vertical-align: top; text-align: left; background: #2b471f url(/images/glow-578f3f.png); padding: 4% 3% 3% 4%; color: #fff; position: relative; min-height: 170px; }

div.callouts h3 { background: url(/images/bkg-coffee.png) left bottom repeat-x; color: #fff; padding: 1.25em 12% .75em 16.5%; margin: -16.5% -12% .65em -16.5%; font-size: 1.75em; line-height: 1; text-shadow: 0 0 .25em #000; }
div.callouts img { margin: -5%; }
div.callouts .title { background: #558e86; padding: .5em .75em; max-width: 35%; position: absolute; bottom: 5%; right: 0; 
    -moz-border-radius: .5em 0 0 .5em;
    -webkit-border-radius: .5em 0 0 .5em;
    border-radius: .5em 0 0 .5em;
    -khtml-border-radius: .5em 0 0 .5em;
    -moz-box-shadow: -.2em 0px .5em #223618;
    -webkit-box-shadow: -.2em 0px .5em #223618;
    box-shadow: -.2em 0px .5em #223618;
}
div.callouts div.iframe { margin: -12% -12% -12% -16.5%; }
div.callouts iframe { width: 100%; height: 100%; }
*/

div.callouts { margin: 1.5em 0 0 -1.25%; text-align: center; clear: both; }
div.callouts > div { display: inline-block; *display: inline; width: 31.5%; margin: 1.25% 0 0 1.25%; vertical-align: top; text-align: left; background: #858b32 url(/images/glow-6c4843.png) left center; color: #fff; position: relative; min-height: 230px; }
div.callouts h3 { position: relative; z-index: 1; background: url(/images/bkg-coffee.png) left bottom repeat-x; padding: 1.25em 12% .75em 14%; font-size: 1.75em; line-height: 1; text-shadow: 0 0 .25em #000; color: #fff; margin-bottom: .5em; }
div.callouts a.header { position: relative; z-index: 1; background: url(/images/bkg-coffee.png) left bottom repeat-x; padding: 1.25em 8% .75em 12%; font-size: 1.75em; line-height: 1; text-shadow: 0 0 .25em #000; color: #fff; margin-bottom: .5em; text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: normal; display: block; text-align: left; }
div.callouts p { color: #fff; padding: 0 8% .75em 12%; }
div.callouts img { margin: -5%; }
div.callouts .title { background: #558e86; padding: .5em .75em; max-width: 35%; position: absolute; bottom: 5%; right: 0; 
    -moz-border-radius: .5em 0 0 .5em;
    -webkit-border-radius: .5em 0 0 .5em;
    border-radius: .5em 0 0 .5em;
    -khtml-border-radius: .5em 0 0 .5em;
    -moz-box-shadow: -.2em 0px .5em #223618;
    -webkit-box-shadow: -.2em 0px .5em #223618;
    box-shadow: -.2em 0px .5em #223618;
}

/*div.callouts iframe { width: 100%; height: 141px; margin-top: -11px; }*/

div.callouts iframe.featured { width: 100%; height: 160px; margin-top: -1.5em; }

.about-us.videos iframe { width: 100%; /*max-width: 300px;*/ max-width: 650px; }

div.breadcrumbs { font-size: .8em; margin: 1em 0; }

h1 {  }
h1 span.h1 { }

div.footer { clear: both; font-size: .8em; padding: 1em; max-width: 930px; margin: .5em auto 1.75em; text-shadow: 2px 2px .125em #fff; }
div.footer p { float: right; }
div.footer p:first-child { float: left; }

div.footer a { color: #000; }


/* ---------------------- */
/* END Layout
------------------------- */

/* ------------------------------------------------------------------------ */
/* START Custom Page Styles
--------------------------------------------------------------------------- */

.item-count { background-color: #558e86; color: #FFF; border-radius: 25em; padding: 5px; font-weight: 500; text-shadow: 1px 1px 1px #000; -moz-box-shadow: 0px 0px 1px #000; box-shadow: 0px 0px 1px #000; }

blockquote {  }

div.callout1 { background: url(/images/burlap-tile.png); margin: 1em 2em 2em 0;
    -moz-box-shadow: 0px 0px 1em #999;
    -webkit-box-shadow: 0px 0px 1em #999;
    box-shadow: 0px 0px 1em #999;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em; /* future proofing */
    -khtml-border-radius: .5em; /* for old Konqueror browsers */
}

@media only screen
and (max-width : 600px) {
    
    div.callout1 { margin: 0; }

}


img.home-img { float: right; margin: 1em 0 3em 1em; }

@media only screen
and (max-width : 400px) {
    
      img.home-img { float: none; margin: 1em auto; display: block; }

}

div.masthead { background: url(/images/trans15-362522.png); padding: 15px 0 0; display: inline-block; width: 100%; }
div.masthead div.introBeans { background: url(/images/masthead-bkg.png) right bottom repeat-x; float: left; height: 75px; width: 100%; margin: -20px 0 0 0; position: relative; z-index: 10; }
div.masthead div.intro { background: #2b471f url(/images/masthead-bkg03.jpg) right bottom repeat-x; text-align: center; color: #fff; display: inline-block; width: 100%; border: 1px solid #404040; border-left: none; border-right: none;
    -moz-box-shadow: 0px .125em .5em #000;
    -webkit-box-shadow: 0px .125em .5em #000;
    box-shadow: 0px .125em .5em #000;
}
div.masthead div.intro div.contTotalRaised { overflow: hidden; float: right; min-width: 582px; max-width: 582px; margin-top: 16px; }
div.masthead div.intro div.contTotalRaised ul { margin: 0; }
div.masthead div.intro div.contTotalRaised ul li { vertical-align: middle; margin: 0 0 0 10px; padding: 7px; display: inline-block; *display: inline; font-size: 0.75em; background: rgba(54,37,34,0.8); border-radius: 5px; max-width: 230px; text-shadow: 0 0 .25em #000; }
div.masthead div.intro div.contTotalRaised ul li:first-child { max-width: inherit; padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 3em; background: none; }

@media only screen
and (max-width : 600px) {

div.masthead div.intro div.contTotalRaised { float: none; min-width: inherit; width: 100%; margin-top: 0; }
div.masthead div.intro div.contTotalRaised { opacity: 0; filter: alpha(opacity=0); }

}

    div.images { width: 40%; float: left; overflow: hidden; background: #2e3101; }
    div.masthead ul#slider li { opacity: 0; } /* prevent FOUC */

        /* div.anythingSlider ul#slider li:first-child { opacity: 1; */
            /* -webkit-transition: all .3s ease-in-out; */
            /* -moz-transition: all .3s ease-in-out; */
            /* -ms-transition: all .3s ease-in-out; */
            /* -o-transition: all .3s ease-in-out; */
            /* transition: all .3s ease-in-out; */
        /* } */
    div.message { width: 60%; float: right; /*padding-bottom: 84px;*/ }
        div.message h2 { color: #fff; font-size: 1.75em; margin-bottom: .15em; text-shadow: 0 0 .25em #000; background: url(/images/title-bkg.png) bottom right repeat-x; padding: .65em 1em; }
        div.message ul {  }
        div.message li { display: inline-block; *display: inline; width: 27%; vertical-align: top; text-align: left; line-height: 1.2; margin-left: 2%; }
        div.message li strong { display: block; font-size: 1.2em; margin-bottom: .25em; }
        
        div.message .buttonMessage { background: #558e86 url(/images/grad2-bot-shad.png) bottom repeat-x; width: 200px; margin: 17px auto 0 auto; font-size: 18px; border-radius: 5px;
        -moz-box-shadow: 1px 1px 2px #000;
	    -webkit-box-shadow: 1px 1px 2px #000;
	    box-shadow: 1px 1px 2px #000; }
            div.message .buttonMessage a { display: block; color: #FFF; padding: .3em; text-decoration: none; text-shadow: 1px 1px 2px #000; }

    
    @media only screen
    and (max-width : 750px) {
        
        div.images,
        div.message { float: none; width: auto; }
        div.message h2 { font-size: 1.25em; }
        div.masthead div.introBeans { float: none; margin: 0; }
    
    }


body.homepage h1 { display: none; }
body.homepage div.main { padding-top: 7%; }
 
table.data { border-collapse: collapse; width: 100%; margin: 1em 0 2em; }
table.data tr:hover td { background: #eee; cursor: default; }
table.data th {  }
table.data th,
table.data td { padding: .5em 1em; vertical-align: top; border: 1px solid #ccc; }
table.data tr:first-child th,
table.data tr:first-child td { font-weight: normal; background: #eee; vertical-align: bottom; }
table.data td:first-child { background: #fdfdfd; }
table.data td {  }


/* ---------------------- */
/* END Custom Page Styles
------------------------- */

/* ------------------------------------------------------------------------ */
/* START Custom Form Styles
--------------------------------------------------------------------------- */

.form-FieldsetDescription { margin-bottom: 1.25em; font-size: 1.125em; }
.form-commentBox { margin-left: 1em; }

input, select, textarea, button, .text-button, .text-button-lg, .text-button-sm, .text-buttond {
	border: 1px solid #ccc;
	padding: 5px .6em;
	background: #eee url(/images/grad2-top-hilight.png) repeat-x;
}

button, .text-button, .text-button-lg, .text-button-sm, .text-buttond, body.support-a-missionary label.slider-button {
	background: #558e86 url(/images/grad2-bot-shad.png) bottom repeat-x;
	color: #fff;
	line-height: 14px; /* ie 7/8 only */
	height: 28px; height: 29px;
	border-color: #558e86;
    -moz-border-radius: .25em;
    -webkit-border-radius: .25em;
    border-radius: .25em; /* future proofing */
    -khtml-border-radius: .25em; /* for old Konqueror browsers */
}
.text-button-lg,
button.large,
.add-to-cart input,
body.support-a-missionary label.slider-button { font-size: 1.15em; height: 36px; padding: 0 1em; }

a.text-button-lg,
a.text-buttond.large,
body.support-a-missionary label.slider-button { font-size: 1.15em; line-height: 36px; } /* ie 7/8 only */

.text-button-sm { line-height: 18px; height: auto; font-size: .8em; padding: 0 .5em; }

a.text-button, a.text-buttond {
	line-height: 26px;
	color: #fff;
}
.text-buttond {
	background-color: #333;
}
.text-button:hover, .text-button-lg:hover, .text-button-sm:hover, .text-buttond:hover, button:hover,
body.support-a-missionary label.slider-button:hover {
	background: #858b32 url(/images/glow-6c4843.png) left center; border-color: #858b32;
	color: #fff;
}
select.text-box-list, select.text-box-100 {
	padding: 4px;
}
input:focus, select:focus, textarea:focus {
	border-color: #ccc;
}

.g-recaptcha-badge-container {
    position:relative;
    float:right;
}
.g-recaptcha-badge-container > div {
    position:absolute;
    right: 0;
}
.g-recaptcha-badge-container > div > div {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    width: 70px;
    height: 60px;
    margin: 0 auto;
    -moz-box-shadow: 0 0 4px #ddd;
    -webkit-box-shadow: 0 0 4px #ddd;
    box-shadow: 0 0 4px #ddd;
    -moz-transition: linear 100ms width;
    -o-transition: linear 100ms width;
    -webkit-transition: linear 100ms width;
    transition: linear 100ms width;
}
.g-recaptcha-badge-container > div > div:hover {
    width: 256px;
}

@media only screen and (max-width : 860px) {
    .g-recaptcha-badge-container {
        float:none;
        margin-top: 10px;
    }
    .g-recaptcha-badge-container > div {
        position: static;
    }
}

/* ---------------------- */
/* END Custom Form Styles
------------------------- */



/* ------------------------------------------------------------------------ */
/* START Custom Module Styles
--------------------------------------------------------------------------- */

.text-box-black { color: #000; font-weight: normal; width: 66%; }
.watermark-text-box-100, .water { color: #000; }
.store .watermark-text-box-100, .store .water { color: #558e86; font-weight: bold; }
.store .text-box-black { color: #000; font-weight: normal; width: 66%; }

.cms-message { background: #fff;
    -moz-box-shadow: 0px 0px .5em #999;
    -webkit-box-shadow: 0px 0px .5em #999;  
    box-shadow: 0px 0px .5em #999;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em; /* future proofing */
    -khtml-border-radius: .5em; /* for old Konqueror browsers */
}

#tabs { clear: both; }

/* JQ UI tabs - make sure to break link to default JQUI CSS! */

div.ui-tabs { margin-top: 20px; }
	ul.ui-tabs-nav { /*text-align: center;*/ margin: 0; }
	ul.ui-tabs-nav li { display: inline-block; *display: inline; margin-left: .25em; vertical-align: bottom; position: relative; bottom: -1px; }
	ul.ui-tabs-nav li:first-child { margin: 0; }
	ul.ui-tabs-nav li.ui-tabs-active { }
	ul.ui-tabs-nav li a { display: inline-block; padding: .75em 1.125em; background: #eee url(/images/grad2-bot-shad.png) bottom repeat-x; color: #333; text-decoration: none; border: 1px solid #ddd; border-bottom: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
	}
	ul.ui-tabs-nav li a:hover { background-color: #f7f7f7; }
	ul.ui-tabs-nav li.ui-tabs-active a { background: #fff; }
	
	div.ui-tabs-panel { background: #fff url(/images/grad1-bot-shad.png) bottom repeat-x; border: 1px solid #ddd; padding: 2em; }
    
@media only screen
and (max-width : 400px) {
    
    ul.ui-tabs-nav li,
    ul.ui-tabs-nav li a { display: block; margin: 0; text-align: center; }       

}


/* Main elastislide fixes - overrides plugin's core CSS */

div.elastislide-wrapper { box-shadow: none; background: none; }
div.elastislide-horizontal { padding: 0; /*padding-bottom: 0;*/ }

ul.elastislide-list,
ul.elastislide-list li { max-height: none!important; }
ul.elastislide-list > li { vertical-align: top;
	*display: inline!important; /* needed for ie7 */
	max-width: 100px!important; /* sets panel widths */
}
ul.elastislide-list ul li { display: list-item; }
ul.elastislide-list ul li a { width: auto; }
ul.elastislide-list div.panel { padding: 0 0 0 20px; white-space: normal; }
ul.elastislide-list > li:first-child div.panel { padding: 0; }
ul.elastislide-list div.elastislide-image { *overflow: hidden;
	height: 100px; /* sets image width, height will be cropped */ 
}
ul.elastislide-list div.elastislide-image a { display: block; *display: inline-block; text-align: center; vertical-align: middle; height: 100%; *width: 100%; background: #fff; }
ul.elastislide-list div.elastislide-image a span { vertical-align: middle; display: inline-block; height: 100%; } /* needed to vertically center image */
ul.elastislide-list div.elastislide-image a img { vertical-align: middle; border: none; display: inline!important; }


/* page specific elastislide styles */

div.featured-items div.elastislide-horizontal { padding-top: 0; padding-bottom: 0; }
div.featured-items ul.elastislide-list > li { max-width: 170px!important; }
div.featured-items ul.elastislide-list div.elastislide-image {
	height: 170px; /* sets image width, height will be cropped */
}

div.OSCAR_alternate-images div.elastislide-wrapper { margin: 15px 0; min-height: 50px; }
div.OSCAR_alternate-images div.elastislide-horizontal { padding: 0; margin: 0; }
div.OSCAR_alternate-images ul.elastislide-list > li { max-width: 140px!important; }
div.OSCAR_alternate-images ul.elastislide-list div.panel { padding: 0 5px; }
div.OSCAR_alternate-images ul.elastislide-list div.elastislide-image {
	height: 130px; /* sets image width, height will be cropped */
}

div.OSCAR_alternate-images .elastislide-prev { left: -12px!important; }
div.OSCAR_alternate-images .elastislide-next { right: -12px!important; }
div.OSCAR_alternate-images ul.elastislide-list div.panel img { height: auto!important; }


/* item detail page */
div.OSCAR_item-detail-right h1 { margin-bottom: .25em; }


/* oscar category listing page */
div.cat-header { font-size: 1.125em; }
div.image_height_conform a { background: none; }



/* OSCAR widgets - featured items AND related items 

div.OSCAR_featured-item-image { height: 100px; border: 1px solid #ddd; background: #fff; }
div.OSCAR-featured-items ul.elastislide-list,
div.OSCAR-featured-items ul.elastislide-list li { max-height: none!important; }
div.OSCAR-featured-items ul.elastislide-list > li {  max-width: 170px!important; }*/


/* widgets */

.widget-container { margin: 2em 0; }
.widget-heading { display: block; background: #666; padding: .5em; color: #eee!important; overflow: hidden; line-height: 1; margin: 0; }
.widget-heading span { float: left; }
.widget-heading a { float: right; display: inline-block; background: #ccc; padding: .25em .5em; font-size: 10px; text-decoration: none; }
.widget-heading a:hover { background: #ddd; }
.widget-inner { padding: 10px; }

div.news-widget-inner { height: 150px; } /* undo default scroller style */
div.news-widget-inner ul { padding: 10px; }
div.news-widget-inner h1 { } /* undo default h1 style */


div.announce-widget-container { position: relative; margin: 0; padding: 20px 20px 10px; background: url(/images/trans15-362522.png); }
p.announce-widget-heading { background: #558e86; padding: 20px 30px; 
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em; /* future proofing */
    -khtml-border-radius: .5em; /* for old Konqueror browsers */
    -moz-box-shadow: 0px 0px .5em #999;
    -webkit-box-shadow: 0px 0px .5em #999;
    box-shadow: 0px 0px .5em #999;
}
p.announce-widget-heading a { background: #362522; color: #fff; }
p.announce-widget-heading a:hover { background: #61453f; } 
div.announce-widget-body { position: absolute; top: 38px; left: 180px; width: 60%; }
div.announce-widget-inner { padding: 0; height: 24px!important; }
div.announce-widget-inner a { color: #fff; }
div.announce-widget-inner ul { position: relative; } /* undo default scroller style */
div.announce-widget-inner ul li a { padding: 0!important; }

@media only screen
and (max-width : 750px) {
    
    div.announce-widget-container {  }
    p.announce-widget-heading { background: #558e86; padding: 20px 30px 50px; }
    p.announce-widget-heading a {  }
    p.announce-widget-heading a:hover {  } 
    div.announce-widget-body { top: 68px; left: 50px; width: 85%; }
    div.announce-widget-inner a {  }
    div.announce-widget-inner ul {  } /* undo default scroller style */
    div.announce-widget-inner ul li a {  }

}

div.search-widget-container { margin: 0; }
    p.search-widget-heading { display: none; }
    div.search-widget-inner { padding: 0; }
    div.search-widget-inner .text-box { width: 66%; }
    div.search-widget-inner .text-button {
        background-image: url(/Images/icon-arrow.gif);
        background-position: center;
        background-repeat: no-repeat;
        width: 29px;
        text-indent: -999em;
        border-color: #777;
    }
    div.search-widget-inner .text-button:hover {
        background-color: #999;
    }


/* ---------------------- */
/* END Custom Module Styles
------------------------- */

/* ------------------------------------------------------------------------ *
/* START Media Queries
--------------------------------------------------------------------------- */

	/* mobile nav triggers*/
	a.menu-toggle { display: none; padding: 0 1.5em; background: #558e86; text-align: center; text-decoration: none; color: #fff; padding: .5em .7em; margin-bottom: 1.5em;
        -moz-border-radius: .3em;
        -webkit-border-radius: .3em;
        border-radius: .3em; /* future proofing */
        -khtml-border-radius: .3em; /* for old Konqueror browsers */
        -moz-box-shadow: 0px 0px .5em #ccc;
        -webkit-box-shadow: 0px 0px .5em #ccc;
        box-shadow: 0px 0px .5em #ccc;
    }
	
	.page-top { display: none; position: fixed; z-index: 30; bottom: 2em; right: 0px; text-decoration: none; background: #eee; padding: 1em; font-size: .9em;
        -moz-box-shadow: 0px 0px .5em #999;
        -webkit-box-shadow: 0px 0px .5em #999;
        box-shadow: 0px 0px .5em #999;
            }
	.page-top:hover { background: #fff; }
    

@media only screen
and (max-width : 970px) {
    
    div.pageContainer { margin: 70px 20px 0; }
    div.navMain { background: none; margin: -71px -20px 0; }
    .logo { margin: -10px 0 -52px; }
	span.radio label, span.check label { white-space: normal; }
}
@media only screen
and (max-width : 890px) {
    
    div.navMain > ul > li > a { font-size: 14px; }

}


@media only screen
and (max-width : 850px) {
    
    div.pageContainer {
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        border-radius: 1em; /* future proofing */
        -khtml-border-radius: 1em; /* for old Konqueror browsers */
    }

    .logo { width: 34%; }
    div.header-right p { font-size: 10px; font-weight: normal; max-width: 25%; }

}

@media only screen
and (max-width : 700px) {
    
    body.item a.menu-toggle,
    body.items a.menu-toggle { display: block; }
    
    div.main { width: 100%; padding: 20px 0 0; }

    div.col1 div.nav { position: fixed; top: 0; right: -100%; bottom: 0; z-index: 1; float: none; width: 200px; padding: 20px; background: url(/images/trans80_ffffff.png);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        -webkit-transition: all .3s ease;
	    -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	    -o-transition: all .3s ease;
	    transition: all .3s ease;
        -moz-box-shadow: 0px 0px 5px #223618;
        -webkit-box-shadow: 0px 0px 5px #223618;
        box-shadow: 0px 0px 5px #223618;
        overflow-y: scroll; /* has to be scroll, not auto */
        -webkit-overflow-scrolling: touch;
    }
    div.col1 div.nav.active { right: 0;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    div.col2 { width: auto; float: none; background: none; padding: 0 15px 15px; min-height: 0; }
    h1 { margin: 0 -15px 1em 0; }
    
    div.footer p,
    div.footer p:first-child { float: none; }

}

@media only screen
and (max-width : 600px) {
    
    div.callouts { margin: 0 0 0 -1.5%; }
    div.callouts > div { width: 48%; margin: 1.5% 0 0 1.5%; min-height: 235px; text-align: center; }
    div.callouts > div:first-child { width: 98.5%; }
    div.callouts img { margin: 0; }
    div.callouts h3,
    div.callouts p { text-align: left; }       

}



@media only screen
and (max-width : 650px) {
    
    div.pageContainer { margin: 15px 15px 0; }
    
    div.header-top { margin-bottom: 5px; }
    div.search-widget-container,
    ul.cartNav { float: none; width: 100%; text-align: center; }
    ul.cartNav { margin: 10px 0; }
    
    .logo { margin: 0 0 -50px; }
    div.header-left,
    div.header-right { vertical-align: bottom; overflow: hidden; margin: -70px 0 -12px; }/*    div.header-right { width: 35%; padding-left: 15%; }
    div.header-left { background: url(/images/logo-bmw-no-mark.png) no-repeat; min-height: 120px; margin-bottom: -20px;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    }
    div.header-left img { display: none; }*/
    /*div.header-left img { margin-left: -45%; width: 145%; max-width: 145%; }*/
    div.header-right p { max-width: none; display: block; margin-bottom: 5%; }

}

@media only screen
and (max-width : 500px) {
    
    .logo { width: 33%; float: left; margin: 20px 0 -40px 25px; }
    div.header { padding: 0; width: 100%; }
    div.header-left,
    div.header-right { width: 35%; margin: 5% 5% 0 0; }
    
    div.navMain { margin: -71px -15px 0px; padding-top: 8%; }
    div.navMain > ul { 
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0; /* future proofing */
        -khtml-border-radius: 0; /* for old Konqueror browsers */
    }
    
    div.callouts > div,
    div.callouts > div:first-child { width: 98.5%; min-height: 200px; }     

}

@media only screen
and (min-width : 650px)
and (max-width : 970px) {
    
    ul.cartNav > li.items { display: none; }

}

@media only screen
and (max-width : 500px) {
    
   ul.cartNav > li.items { display: none; } 

}

@media only screen
and (max-width : 440px) {
    div.images { display: none; }
}

/* ---------------------- */
/* END Media Queries
------------------------- */