/*
2011-02-17T12:04:55-08:00 - Added some IE6 fixes when new images were added. Switched
				to floats for the bag images. New div around bag images for IE6.
*/

/* palette: 
main denim: #303c50, light denim: #8EA0BF, dark denim: 182640,
purple: #4F2F3B, light green: #9FD67E
compliment brown: #4F4533 
*/
body { color: black; font-size: 16px; font-family: Georgia, "Times New Roman", serif; }
p,td,th,li,pre,code {  font-size: 1em;  }
body, div { margin: 0; padding: 0 }

p { margin: 1.5em 0px; line-height: 1.5em }

body { background: #78a0c3 url(../image/fzm-wine.corks.texture-01-blk-blur[400x400].jpg) top center; 
 color: black; font-size: medium; font-family: verdana, arial, helvetica, sans-serif;  }

/* set page width */
#allContentWrapper { max-width: 900px; margin: 0 auto }
body { text-align: center }

#allContentWrapper { position: relative; text-align: left; margin: 0 auto; 
    background-color: transparent
    -moz-box-shadow: 0 4px 20px 5px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 4px 20px 5px rgba(0, 0, 0, .9);
    box-shadow: 0 4px 20px 5px rgba(0, 0, 0, .9);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* the main sections */
#headingContainer { }
#bodyContainer { 
    position: relative; 
    clear: both; 
    background-color: #eff0d0;
    background-color: #abd5af;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

#mainContainer { background-color: transparent }

#footerContainer { clear: both }


/* content for each title section */
#titleContainer { background: transparent url(../image/WkTitleBg-fs8.png) top center repeat-y } 
#titleContent { text-align: center }
#pageTitleImg { width: 283px; height: 38px; padding: 38px; max-width: 100%; }
/* height is for IE 5/6 display bug, has_layout */
#heading-wrapper { height: 1%; postion: relative;
    background: #EFF0D0;
    /* http://www.colorzilla.com/gradient-editor/#e5c499+0,eff0d0+34;Custom */
    background: rgb(239,240,208);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1YzQ5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iI2VmZjBkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(229,196,153,1) 0%, rgba(239,240,208,1) 34%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,196,153,1)), color-stop(34%,rgba(239,240,208,1)));
    background: -webkit-linear-gradient(top,  rgba(229,196,153,1) 0%,rgba(239,240,208,1) 34%);
    background: -o-linear-gradient(top,  rgba(229,196,153,1) 0%,rgba(239,240,208,1) 34%);
    background: -ms-linear-gradient(top,  rgba(229,196,153,1) 0%,rgba(239,240,208,1) 34%);
    background: linear-gradient(to bottom,  rgba(229,196,153,1) 0%,rgba(239,240,208,1) 34%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5c499', endColorstr='#eff0d0',GradientType=0 );
}
#heading-text-wrapper { height: 1%; padding: 40px 80px; position: relative;
    background: transparent url(../image/WkBodyTopEdge.gif) no-repeat scroll 0 100%; 
}

#heading-text-wrapper .tagline1 { font-size: 30px; color: #292F35; margin: 20px 35px 10px 0 }
#heading-text-wrapper .tagline2 { font-size: 24px; color: #292F35; margin: 0 0 10px 0 }
#titleLhGrape { position: absolute; top: -80px; left: -50px; behavior: url(css/iepngfix.htc) }
#titleRhGrape { position: absolute; top: -60px; right: -60px; behavior: url(css/iepngfix.htc) }

/* content for each bodyContainer section */

/* main content, left of rhContainer */
#mainContainer { background-color: #303c50; margin-right: 180px }
#largerMessage { padding: 1em 2em; background-color: #abd5af; }
/* only show this if JS is enable */
#imageMessage { padding: 1em 2em; 
    background: #303c50 url(../image/WkBagBgTR-fs8.png) top right no-repeat; 
    background: transparent url(../image/WkBagBgTR-fs8.png) top right no-repeat; 
    color: white; 
    min-height: 150px; 
    clear: both }
#imageMessage a { color: white; }
#imgSmallWinePocket { 
    float: right; 
    width: 240px; 
    max-width: 50%;
    max-height: 320px; 
    margin: 1.5em 0 .75em .75em; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
#imgSmallWinePocket img { 
height: auto; max-width: 240px; width: 100%; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#bagImageContainer { 
    background-color: #303c50; 
    background: rgb(48,60,80);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMwM2M1MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZjZiN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(48,60,80,1) 0%, rgba(95,107,127,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,60,80,1)), color-stop(100%,rgba(95,107,127,1)));
    background: -webkit-linear-gradient(top,  rgba(48,60,80,1) 0%,rgba(95,107,127,1) 100%);
    background: -o-linear-gradient(top,  rgba(48,60,80,1) 0%,rgba(95,107,127,1) 100%);
    background: -ms-linear-gradient(top,  rgba(48,60,80,1) 0%,rgba(95,107,127,1) 100%);
    background: linear-gradient(to bottom,  rgba(48,60,80,1) 0%,rgba(95,107,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303c50', endColorstr='#5f6b7f',GradientType=0 );
    padding-bottom: 1em;
    /* padding-top: 1em; */
    -moz-border-radius:  0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

#thumbs { float: left; position: relative; padding: 40px 0px 0 0px }
#thumbs .thumbPic { float: left; width: 180px; margin: 30px 0; text-align: center; vertical-align: middle; }
#thumbs a { display: block; width: 120px; margin: 0 auto; vertical-align: middle; cursor: pointer; }
#thumbs .thumbFrame { position: absolute; width: 120px; height: 160px; z-index: 1; 
	background: transparent url(../image/bagBg.png) no-repeat center center; }

/* z-index for IE7 */
#bigDisplay { display: none; height: 0px; position: relative; z-index: 5; }
#theBigFrame {
    width: 484px; 
    height: 644px; 
    margin: 0px auto; 
    z-index: 5; 
    position: relative; 
    top: 100px; 
    left: 130px;
    border: 2px solid #989985; border-color: #fafcb1 #989985 #989985 #fafcb1;
    background-color: #e4e5bc; padding: 4px;
    cursor: move;
    box-shadow: rgba(19, 26, 38, 0.8) 0px 0px 10px 3px;
}
/* This image changes with the script */
#theBigPicture { 
    width: auto; height: 100%; 
    border: 2px solid #989985; border-bottom-color: #f8fac8; border-right-color: #f8fac8;
    background: url('../bagImage/100_2052-480.JPG') no-repeat scroll 0% 0%;
}


/* fixed width container to right of mainContainer */
#rhContainer { 
    background-color: #eff0d0; 
    width: 180px; 
    position: absolute; 
    right: 0; 
    top: -40px; 
    overflow: hidden;
    padding-top: 30px;
}
#rhContainer .adSpace { margin: 20px auto; width: 160px }
.buttonBox.relatedLinks { font-size: 80%; border-width: 5px 0  }

/* content for each footerContainer section */
#footerButtons { text-align: center; padding-top: 30px }

/* only show if JavaScript is enabled */
.jsBlockEnable { display: none }
.jsInlineEnable { display: none }

/* ================================================================ */
/* everything is the same below here FixedRightCol and CenteredPage */

ul { margin: .75em 0em 1.5em 1.5em; padding-left: .5em }	/* box starts at the text, marker is outside the box */
ul.noBull { margin: .75em 0em 1.5em .5em; padding-left: .5em }	/* box starts at the text, no marker */
ol { margin: .75em 0em 1.5em 2em; padding-left: .5em }	/* box starts at the text, no marker */
ul ul { margin: 0em 0em .75em 1.5em}
ul ul { margin: 0em 0em .75em 1.5em}
li { padding: .375em 0px;}
ul.noBull li { list-style-type: none; }
ul li { list-style: disc;}
ul li li { list-style:  square; font-size: smaller }
ul li li li { list-style:  circle; font-size: 100% }

.pad1emAll { padding: 1em }
.pad1emSides { padding-left: 1em; padding-right: 1em }

blockquote, div.indent { margin: .75em 0 .75em 20px }
div.boxed, blockquote.boxed { border: 1px solid #999999; padding: 10px; background-color: #f0f0f0 }
blockquote.blockFormat { font-family: "Times New Roman", Times, serif; 
 margin: 10px 30px }
div.quoteGroup { margin-left: 10px; border-left: 1px dotted #999999; padding-left: 10px }

/* floating sidebars */
div.sideBarLeft, div.sideBarRight { width: 30%; padding: .5em 1em; margin: .5em 1em;
background-color: #f0f8ff; border: 1px solid #d0e0f0 } 
div.sideBarRight { float: right; margin-right: 0; border-right: none } 
div.sideBarLeft { float: left; margin-left: 0; border-left: none }

/* for lists of buttons (or text), usually in rhContainer of 180px */
.buttonBox { background-color: #ECF1F4; padding: 5px; margin: 25px 5px; 
   border: 3px solid #8EA0BF; text-align: left }
.buttonBoxNbg { padding: 5px; margin: 25px 5px; text-align: left }
.buttonBox a, .buttonBoxNbg a { border: none; margin: 0; padding: 0 }
.buttonBox a img, .buttonBoxNbg a img { border: none; margin: 0; padding: 0 }
.buttonBox ul, .buttonBoxNbg ul { margin: .75em 0em 0em 0em; padding-left: 0; list-style-type: none;  }	
.buttonBox ul li, .buttonBoxNbg ul li { margin: .375em auto; padding: 0; list-style-type: none;  } 
.buttonBox ul li.spaced, .buttonBoxNbg ul li.spaced { margin: 1.5em auto; padding: 0; list-style-type: none;  } 
.buttonBox .linkButton, .buttonBoxNbg .linkButton { border: none; margin: 0; padding: 0 }

/* div for a quick link or two for local navigation */
.floatRightButtons { float: right; padding: .5em; margin: 0 0 1em 1em }

.first, .noTopMargin { margin-top: 0 ! important }
.noTopBorder { border-top: none ! important }
.noTopPadding { padding-top: 0 ! important }
.last { margin-bottom: 0 ! important }
.center { text-align: center }

/* specialty classes for books, movies and music */
.mediaTitle { font-weight: bold; font-style: italic }
.phoneNumber { font-family: monospace; font-weight: bold; white-space: nowrap }
.comment { font-family: times }

code, .code { color:#006600; font-family:Courier,'Courier New',monospace; font-size:100%; }
.monospaceFont { font-family: monospace }

img { border: none; position: relative }
pre, code { font-family: monospace; font-size: 100% }

h1, h2, h3, h4, h5, h6 { font-family: verdana, arial, helvetica, sans-serif; font-weight: bold;
letter-spacing: .1em; margin: 2em 0 .25em 0; padding-top: 6px; clear: both }
h1 { font-size: 150%; margin-top: 0; line-height: 120%; padding: 6px .5em; }
h2 { font-size: 130%; border-top: 2px solid; margin-top: 1em }
h3 { font-size: 110%; margin-top: .5em }
h4 { font-size: 100%; margin-top: .5em }
h5 { font-size: 100%; margin-top: .5em }

/* content dividers, typically start article with h1 */
/* .article { margin: 20px 0em; border-top: 8px solid #78a0c3; padding-top: 8px; clear: both } */
.article { margin: 1.5em 0; clear: both }
.noTopBorder { border-top: none }

hr { width: 95% }
hr.secBreak { margin: 15px auto 3px auto; clear: both; text-align: center; }
.clear, .clearfix { clear: both }

.footerButton{ margin: 20px; width: 100px; display: inline }

/* ================================================ */
/* color overrides */
/* color scheme is hue 0x93 */

a:hover { text-decoration: none }
a { color: #1b3345; text-decoration: underline; }
a img { border: none }
h1 { color: #EAF0F6; background-color: #292F35; }
h2, h3, h4, h5, h6 { color: #173147 }
h2 { border-top-color: #173147 }

.comment { color: #2D4A63 }
.phoneNumber { color: #1b3345 }

/* ================================================ */
/* Slideshow */
.wk-slide-wrapper {
    width: 380px;
    margin: 1em auto;
    text-align: center;
    background: #666;
    background: rgb(87,114,124);
    background: -moz-linear-gradient(top,  rgba(87,114,124,1) 0%, rgba(38,65,76,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,114,124,1)), color-stop(100%,rgba(38,65,76,1)));
    background: -webkit-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: -o-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: -ms-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: linear-gradient(to bottom,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57727c', endColorstr='#26414c',GradientType=0 );
    border-radius: 4px;
    color: #eee;
}
/* Don't show it unless JS is working */
.wk-slide-wrapper.disabled { display: none; }

.wk-slide-wrapper .slideshow-controls {
    width: 100%;
    text-align: center;
    /*
    background: #666;
    background: rgb(87,114,124);
    background: -moz-linear-gradient(top,  rgba(87,114,124,1) 0%, rgba(38,65,76,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,114,124,1)), color-stop(100%,rgba(38,65,76,1)));
    background: -webkit-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: -o-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: -ms-linear-gradient(top,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    background: linear-gradient(to bottom,  rgba(87,114,124,1) 0%,rgba(38,65,76,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57727c', endColorstr='#26414c',GradientType=0 );
    */
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    margin-bottom: 10px;
}
.wk-slide-wrapper .caption1 {
    margin-top: 10px;
    padding: 1em;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .3);
}
.wk-slide-wrapper .slideshow-controls:after,
.wk-slide-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.wk-slide-wrapper .slideshow-controls .prev { float: left; }
.wk-slide-wrapper .slideshow-controls .next { float: right; }
/* Hide the pause button when paused, the play button when active */
.wk-slide-wrapper .slideshow-controls .pause .fa-pause { display: none; }
.wk-slide-wrapper .slideshow-controls .play .fa-play {display: none; }

/* Size of the font-awesome fonts */
.wk-slide-wrapper .fa-size-nav { font-size: 36px; line-height: 36px; }

.wk-slide-wrapper .slideshow-controls .button {
    padding: 5px .5em;
    padding: .5rem;
    color: white;
    margin: 5px .5em;
    margin: .5rem;
}

.wk-slide-wrapper .slideshow-controls .button:hover {
    background: #888;
    cursor: pointer;
    border-radius: 10px;
}

.wk-slide-wrapper .show-content { width: 360px; height: 480px; margin: 0 auto; }
.wk-slide-wrapper .show-content img { max-width: 100%; height: auto; cursor: pointer }


/* Non-slideshow content, just to look more like it might on a real page */
.box-parking {
    position: fixed;
    width: 1px;
    height: 20px;
    right: 0;
    top: 20%;
    margin: 0 0 0 auto;
}

.box-to-pull {
    width: 400px;
    height: 400px;
    position: absolute;
    background: #ccc;
    border: 4px solid #ffa;
    right: -300px;
    z-index: 1;
    top: 32px;
}

.tab-on-right {
    position: absolute;
    width: 40px;
    height: 40px;
    background: red;
    left: -40px;
    top: 40%;
    z-index: 5;
    border-radius: 10px 0 0 10px;
}


/* ================================================ */

@media screen and (max-width: 1020px) {

    #allContentWrapper { overflow: hidden; }
}

@media screen and (max-width: 725px) {

    #rhContainer { 
        position: relative; 
        width: auto; 
        background: transparent; 
        padding: 0; 
        top: 0;
    }
    #mainContainer { margin-right: 0; }
    #thumbs { padding: 0; }
    #heading-text-wrapper .tagline1 { font-size: 24px; }
    #rhContainer .buttonBox { padding: 0 1.5em; margin: 1.5em 0; }
    #pageTitleImg { height: auto; padding: 10px; max-width: 100%; }
    #titleRhGrape { display: block; max-width: 50%; height: auto; top: -25%; right: -10%; }
    #titleLhGrape { display: block; max-width: 50%; height: auto; top: -25%; left: -10%; }
    #thumbs .thumbPic { width: 140px; margin: 15px 0; }
}

@media screen and (max-width: 640px) {

    #titleRhGrape { top: -20%; right: -10%; }
    #titleLhGrape { top: -20%; left: -10%; }
}

@media screen and (max-width: 480px) {

    #heading-text-wrapper { padding: 1.5em; }
    #heading-text-wrapper .tagline1 { font-size: 1em; margin: 0 0 1.5em 0; font-weight: bold; }
    #heading-text-wrapper .tagline2 { font-size: 1em; margin: 1.5em 0; }
    #titleRhGrape { display: none; }
    #titleLhGrape { display: none; }
    #largerMessage { padding: 1em; }
    #imageMessage { padding: 1em; }
}