/* Smashing winery
   Example site for article at Smashing Magazine
   by Christian Krammer, ck@css3files.com */
   
/* The declarations for screen output */   
@media screen {
/* -----------------------
   Reset, inspired by: html5doctor.com/html-5-reset-stylesheet/
   ------------------------ */
* {margin: 0; padding: 0}   

img, hr, fieldset, legend {border: 0}           
   
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block}

html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}

body, button, input, select, textarea {font-family: Arial, Helvetica, sans-serif; color: #000; line-height: 1.6}

::-moz-selection {background: #88011d; color: #fff; text-shadow: none} ::selection {background: #88011d; color: #fff; text-shadow: none}

ul {list-style: none}

a {color: #88011d; font-weight: bold} a:focus {outline: thin dotted} a:hover, a:active {outline: 0}

q {quotes: none} q:before, q:after {content: ""}

/* ------------------------
   Fonts
   ------------------------ */


h1, h2, header nav li a, footer a {
	font-family:  "Times New Roman", Times, serif;
	color: #88011d;
	font-weight: normal;
	line-height: 1.231;
}

/* ------------------------
   Page elements
   ------------------------ */
body {background: #8d001e}

header h1, nav h2, footer h2 {display: none}   
   
.wrapper {
	width: 960px; 
	background: #f9f2f4; background: rgba(255,255,255,.95);
	margin: 0 auto;
	-moz-box-shadow: 0 0 1.5625em rgba(0,0,0,.4); -webkit-box-shadow: 0 0 1.5625em rgba(0,0,0,.4); box-shadow: 0 0 1.5625em rgba(0,0,0,.4);
}

header {
	background: url(../img/header.jpg);
	height: 6.875em;
	position: relative;
}

header .logo {
	position: absolute;
	left: .5em; top: .75em;
	z-index: 1;
}

header .print {display: none}

header nav {
	background: #c65f76; background: rgba(141,0,30,.5);
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	height: 3.5em;
	z-index: 0;
} /* IE6 */

header nav ul {
	position: absolute;
	right: 2.5em; bottom: 0;
} /* IE9 */

header nav li {
	float: left;
	font-size: 1.5em;
	font-weight: normal;
	padding-left: .95em;
	margin-left: .35em;
	background: url(../img/sep.png) no-repeat 0 50%;
	line-height: 1.41;
} /* IE9 */

header nav li:first-child {margin: 0; padding: 0; background: none}

header nav li a {
	color: #fff;
	text-decoration: none;
}

header nav li a:hover, .wine header nav .wine a {border-bottom: 3px solid #f9f2f4}

.content {
	padding: 1.9375em 2.5em .625em;
	position: relative;
}

.main {width: 34.375em}

.main h1 {font-size: 3em}

.main h2 {
	font-size: 1.5em;
	margin: 1em 0 -.5em;
}

.main h1 + p {margin: 0}

.main p {margin: 1.3em 0}

.main p a:hover {color: #c07989}

.main ul {margin-top: .9375em}

.main ul li {
	background: url(../img/bull.png) 0 50% no-repeat;
	padding-left: 1.1em;
}

blockquote {
	color: #88011D;
	font-face: italic;
	font-size: 1.2em;
	font-style: italic;
}

aside {
	position: absolute;
	right: 2.5em; top: 2.5em;
	width: 14.5em;
	padding: 1.75em 1.75em 1.25em;
	background: #e2c2c9;
	-moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;
}

aside img {
	border: .375em solid #fcf9fa;
	border-radius: .375em;
}

aside h2 {
	font-size: 1.875em;
	margin: .4em 0 .1em;
}

aside p {
	font-size: 1.125em;
	line-height: 1.3;
	color: #fff;
	font-style: italic;
}

footer {
	background: #520011;
	padding-left: .8125em;
} /* IE6 */

footer ul {overflow: hidden}

footer li {
	float: left;
	font-size: 1.25em;
	margin-left: 1.1em;
	padding: .3em 0;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer a:before {
	content: "\2022";
	padding-right: .8em;
}

footer li:first-child a:before {display: none}

footer a:hover {border-bottom: .1em solid #fff}
}


/* The declarations for print output */
@media print {
/* Reset quotes */
q {quotes: none}
q:before, q:after {content: ""}   

/* Hide everything unneeded */
header h1, header nav, footer, aside, img {display: none}

/* font sizes */
body {
	font: 12pt Georgia, "Times New Roman", Times, serif;
	line-height: 1.3;
}

h1 {font-size: 24pt}

h2 {font-size: 14pt; margin-top: 25px}

aside h2 {font-size: 18pt}

/* Show printer-frindly logo. */
header .print {display: block}

/* If you like things a little bit easier and more semantic you can alternatively just leave the h1 of the header visible, switch off the margin and make it bigger than the rest of the headlines */
/*header nav, footer, img {display: none}

header h1 {
	margin: 0;
	font-size: 30pt;
}*/

/* Some browsers like to show a border around images. Switch it off */
img {border: 0}

/* Mover the header a little bit awy from the content */
header {margin-bottom: 40px}


/* Additionally/optionally a little message could be displayed */
/*header:before {
	display: block;
	content: "Thank your for printing our content at www.smashing-winery.com. Please check back soon for new offers about delicious wine from our winery.";
	margin-bottom: 10px;
	border: 1px solid #bbb;
	padding: 3px 5px;
	font-style: italic;
}*/

/* Separate blockquotes a little bit from the rest */
blockquote {
	font-size: 13pt;
	font-style: italic;
}

/* By default links are blue. For optimal legibility change them to black */
p a {color: #000}



/* External links don't get this treatment */
p a[href^="http://"]:after, p a[href^="https://"]:after {
	content: " (" attr(href) ")";
}


/* The Sidebar is placed under the content automatically. To distinguish it from the rest a border and a gap is set before */
aside {
	border-top: 1px solid #bbb;
	margin-top: 30px;
	display: block;
	width: auto;
	/* Reset the element for IE < 8 */
	position: static;
	width: auto;
	padding: 10px 0 0;
	/*page-break-before: always; */ /* Moves the sidebar to new page */
}

/* Custom bullets for the list */
/*ul {list-style: none}

.main ul li:before {content: "» "}*/

}