@charset "utf-8";

/* ~~ This variable width container surrounds all other blocks. By using the margin setting with the "auto" option, the page is centered in the browser window with at least a 10px border on the top and bottom. The background image is also centered on the browser image and is colored black for viewing on browser windows greater than the 2116 px provided by the background image.


Color palette:

SEDONA WARMTH
efe1d5 - Off white - Page content backgrounds
dac1ac - Tan - Page gradient background
b37f56 - Leather - Accent lines
673526 - Dark Copper - Headings
402f2a - Charcoal - Text
c0736d - Dark Pink - Footer and click section hover

*/

body {
	max-width: 1200px;
	max-height: 9000px;
	background-color: transparent;
    background-image: url(../images/color-overlay-bknd.png); /*Takes the background gradient and repeats it in slices through the entire height and width of the page*/
	background-position:center;
	margin: 0px auto; /*Body has no margin top and bottom and centers it inside the overall page*/
	padding: 0; /*Body has no padding*/
}
/* ========= End home page fold container attributes. ======== */
 /* Home Fold has a max height that will fill until enough content maxes it out, then the bottom border line defined below will NOT show up and sections will start overflowing onto eachother. Exeeding this height defeats the purpose of a brief top fold. */
#home-fold {
	width: 100%;
	max-height: 3000px;
	margin: 0px 0px 0px 0px; /*No margins*/
	padding: 5px 0px 0px 0px; /*Padding at top to separate from previous and force block mode.*/
	background-color: #efe1d5;/*Off white*/
}
/* Put this after the last section to mark the last content section.*/
#home-page-fold-ending {
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 30px 0px 0px 0px;/*Padding top*/
}
/* Placed at the bottom portion of the page and a lot longer. */
#home-page-below-fold{
	width: 100%;
	max-height: 6000px;
	margin: 0px 0px 0px 0px; /*Remove previous margin settings*/
	padding: 0px 0px 0px 0px; /*Remove previous padding settings*/
	background-color: #efe1d5;/*Off white*/
}
/* Placed after the last section to mark the last content section with
a visible termination that is intended to have no floats.*/
#home-page-below-fold-ending {
	margin: 0px 0px 0px 0px; /*No margin*/
	padding: 20px 0px 0px 0px; /*Padding on top separates from previous*/
}
/* The home title is the Headline of the home page and has a quick link to invite visitors to learn more. */
/* ========= End home page fold container attributes. ========= */

/* ======= Begin detail sections for the page content. ======== */

/* This home page "Splash" section full-width panel that is sub-divided in half and then a portion of it is subdivided in half again. This creates complex panel that is indtended to provide groups of links on the right side that are related in some way to the left panel content.*/
#splash {
	margin:0px 0% 0px 0%;/*Margin none*/
	padding:30px 0% 40px 0%;/*Padding top,bottom*/
}
#splash-left {
	width: 42%;
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0px 0.5% 0px 0.5%;/*Padding right,left*/
}
#splash-left figure {
	width: 80%;/*Height is proportional to width*/
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 3em 0% 0em 10.0%;/*Padding top,left*/
}
#splash-left h2 {
	padding: 0em 0% 0.5em 0%;/*Padding bottom*/
}
#splash-left h4 {
	padding: 0em 5% 0.8em 5%;/*Padding bottom*/
	text-align: center;
}
#splash-left p {
	padding: 0em 5.0% 0.5em 5.0%;/*Padding bottom*/
	line-height: 1.4em;/*More than normal*/
}
#splash-right {
	width: 53%;
	margin: 0px 0px 0px .5%;/*Margin left*/
	padding: 10px 0.0% 10px 2.0%;/*Padding top,bottom,left*/
	border-style:solid;
	border-color:#b37f56;/*Leather*/
	border-width: 0px 0px 3px 0px;/*Border bottom*/	
}
#splash-right a {
	text-decoration: none;
}
#splash-right-left {
	width: 20%;
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 4.0em 0% 0em 0%;/*Padding top*/
}
#splash-right-left figure {
	width: 100%;/*Height is  proportional*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 0em 0% 0em 0%;/*Padding none*/
}
#splash-right-left p {
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 0em 0em 0em 0em;/*Padding none*/
}
#splash-right-right {
	width: 70%;
	margin: 0px 0px 0px .5%;/*Margin none*/
	padding: 10px 0px 10px 0px;/*Padding top,bottom*/
}
#splash-right-right p {
	padding: 0em 0em 0.5em 2em;/*Padding bottom*/
	line-height: 1.4em;/*More than normal*/
}
#fold-content-text {
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 40px 10% 0px 10%;/*Padding top,right,left*/
}
#fold-content-text h5 {
	padding: 0.3em 3.0% 0.91em 3.0%;/*Padding all sides*/
	font-family: 'Comic Neue', sans-serif;
	font-size: 1.18em;
	font-style: italic;
	font-weight: 400;
 	color: #673526;/*Copper*/
}
#fold-content-text p {
	padding: 0.5em 0% 0.0em 0%;/*Padding top*/
	line-height: 1.4em;/*More than normal*/
	color: #402f2a;/*Charcoal*/
}
/* Use this container for links that refer to various winery web sites that are commonly referenced. */
#winery-links { /*For winery refs below the fold*/
	margin: 40px 2% 0px 2%;/*Margins top, left, and right*/
	padding: 20px 0px 10px 0px;/*Padding top,bottom*/
	border-style:solid;/*Border top,coral*/
	border-color: #d18266;
	border-width: 2px 0px 0px 0px;
}
#winery-links-container {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0px 0.5% 20px 0.5%;/*Padding right,bottom,left*/
}
/* This is for the text container and also has inherited margins to match each row's overall container.*/
#winery-links-text {
	width: 45%;
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 2.0em 5% 0em 5%;/*Padding top,right,left*/
	background-color: #efe1d5;/*Off white*/
}
#winery-links-text h4 {
	padding: 0em 0% 1.0em 0%;/*Padding bottom*/
	text-align: left;
}
/*This defines the ID for the bullet list wrapper for the on the left side.*/
#winery-links-text ul {
	padding: 0em 0% 0em 8%;/*Padding left*/
}
#winery-links-text ul li {
	padding: .5em 0% .5em .5%;/*Padding top,bottom,left*/
	color: #364042;/*Charcoal*/
}
/* This ID defines the area that is used to contain the pic for each article.*/
#winery-links-pix {
	width: 35%;
	margin: 0px 0% 0px 0%; /*Margin none*/
	padding: 4.0em 0% 0em 0%;/*Padding top*/
}
/* A section contains a link to SomeWhim's social media page. */
#social-media-links {
	margin: 5px 0px 0px 0px;/*Margin top*/
	padding: 1.3em 10% 0em 10%;/*Padding top,right,left*/
}
/* An aside section contains rows of links containers that refer to various classifications of articles. */
#home-page-article-links { /*For the aside below the fold with more article links*/
	margin: 40px 2% 40px 2%;/*Margin top,right,bottom,left*/
	padding: 20px 0px 20px 0px;/*Padding top,bottom*/
	border-style:solid;/*Border top,coral*/
	border-color: #b37f56;/*Leather*/
	border-width: 2px 0px 0px 0px;
}
#home-page-article-links-pic {
	padding: 5px 5% 0px 5%;/*Padding top,right,left*/
}
/* This ID defines rows of article references within the "Aside" area.  Each row is 11% of the total container height.  In order to properly display the text on devices of varying screen widths, the text content Must be deliberately written to be short (about 50%) of the bottom of each row.  This allows the height of the text to expand as the screen width decreases.  Test in the browser window by making the width smaller and smaller by dragging the mouse to shrink the window's width.*/
/* Below the fold defines its dimensions and clears out float settings. It shows, in the browser, when the recommended maximum height below the fold has been exceeded and some content should be removed. */
#linked-content-rows-container {
	margin: 0px 2% 25px 2%;/*Margin right,bottom,left*/
	padding: 0px .5% 10px .5%;/*Padding right,bottom,left*/
	border-style:solid;
	border-width: 0px 1px 1px 0px;/*Border right,bottom*/
	border-color: #eeeeee;/*Light Grey*/
	border-radius: 5px 5px 5px 5px;/*Rounded all corners*/
	box-shadow: 4px 4px 6px 2px  #66666660; /*Shadow, top and left offset, 6px blur, 2px solid, grey color, moderate transparency*/
}
/* This ID defines the area that is used to contain the pic for each article. Note: Square picture work the best because portraits take up a lot of vertical space when sized to full width.*/
#linked-content-rows-pix {
	width: 15%;
	margin: 0px .5% 0px 0%;/*Margin right allows border animation*/
	padding: 1.0em 4px 0em 4px;/*Padding top,right,left for animation*/
}
#linked-content-rows-pix figure {
	width: 100%;/*Height is proportional*/
	margin: 0em 0% 0em 0%;/*Margin none*/
	padding: 0em 0% 0em 0%;/*Padding none*/
}
/*This defines the ID for the pic paragraph wrapper. Because the pic is part of the paragraph reference, setting the paragraph margin makes the pic exactly the same margins as its container for consistent display on the browser.*/
#linked-content-rows-pix p{
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 0px 0px 0px 0px;/*Padding none*/
}
/* This is for the text container and also has inherited margins to match each row's overall container.*/
#linked-content-rows-text {
	width: 80%;
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0.5em 0% 0px 0%;/*Padding top*/
}
/*This defines the ID for the paragraph wrapper for the text on the right of each row. Setting the paragraph margin makes the text area exactly the same margins as its container for consistent display on the browser.*/
#linked-content-rows-text p {

}
/* These settings are for use on the About page. This page shares this CSS file with the home page. */
#about-us-text-block {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 20px 2.0% 20px 2.0%;/*Padding all sides*/
}
#about-us-text-block h2 {
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 0em 2% .5em 5%;/*Padding top*/
	line-height: 1.6em;/*More than normal*/
}
#about-us-text-block-left { /*Section is 2/3 total width*/
	margin: 0px 2.0% 0px 2.0%;/*Margin right,left*/
	padding: 5px 0% 0px 0%;/*Padding top*/
	width: 62.66%;
}
#about-us-text-block-left p {
	margin: 0px 0px 0px 0px; /*No margin*/
	padding: 0em 2.0% 1.2em 4.0%; /*Padding left, right, bottom*/
}
#about-us-text-block-left h1 {
	margin: 0px 0px 0px 0px;/*Margin none*/
	padding: 0.5em 0% 1.0em 0%;/*Padding top,bottom*/
}
#about-us-text-block-right { /*Section is 1/3 total width*/
	margin: 0px 1.5% 0px 1.5%;/*Margin none*/
	padding: 50px 0px 0px;/*Padding top*/
	width: 30.33%;
}
#about-us-pic {
	padding: 0em 3.0% 0em 3.0%;/*Padding right,left*/
}
#about-us-pic-sm {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0em 35% 0em 35%;/*Padding top,right,left*/
}
#about-us-pic-sm p {
	margin: 0px 0% 0px 0%;/*Margin none*/
	padding: 0em 0em 0.92em 0em;/*Padding bottom*/
	font-size: 0.92em;/*Same as font-size-small*/
	text-align: center;
}
#about-us-links {
	padding: 10px 4.0% 3.0em 4.0%;/*Padding top,bottom*/
}
#about-us-links h3 {
	padding: 0.25em 5.0% 0em 5.0%;/*Padding top,right,left*/
}
#about-us-links p {
	padding: 1.0em 5.0% 0em 5.0%;/*Padding top,right,left*/
}
/* ====== End detail sections for the page content. =========== */