/* TURKEY FLAT - Common styles */
/*Name:Common Styles*/
/*Default:true*/
/*Order:1*/

/* 	
	----------------------------------------------------------------------
	RESET
	Remove the styling from all the elements on the page, just so we 
	can then start from scratch, explicitly setting styles as we need.
	---------------------------------------------------------------------- 
*/
* {
	margin: 0;
	padding: 0;
	font-family: Times, "Times new roman", Georgia, Serif;
	color: #242424;
	font-size: 1em;
	line-height: 1.2em;
}
body {
	font-size:82%;
}

/* 	
	----------------------------------------------------------------------
	A HORRIBLE HACK
	Hide a print-only logo image from the page:
	---------------------------------------------------------------------- 
*/
#printLogo {
	display:none;
}

/* 	
	----------------------------------------------------------------------
	GENERAL SETTINGS
	Some styles common to all pages. Mainly for headings and the like.
	---------------------------------------------------------------------- 
*/
h1, h2, h3, h4, h5 {
	font-weight: normal;
	margin-bottom: 0.8em;
}
h1 {
	text-transform: uppercase;
	font-size: 1.8em;
	font-weight: normal;
	letter-spacing: 0.07em;
}
h2 {
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: 0.07em;
	margin-top: 1.5em;
}
h3 {
	font-weight:bold;
	margin-bottom:0;
}
ul, 
dl {
	list-style: none;
}
p {
	line-height:1.4em;
	margin-bottom: 1em;
}

a img {
	border: 3px solid #E3DFB9;
}
a img:hover {
	border: 3px solid #DEC099;
}
/* Anchors in the body text: */
#content p a,
#content ul a,
#content h1 a,
#content h2 a,
#content h3 a,
#content h4 a    {
	color: #872522;
	text-decoration:none
}
#content p a:hover,
#content ul a:hover,
#content h1 a:hover,
#content h2 a:hover,
#content h3 a:hover,
#content h4 a:hover    {
	text-decoration:underline;
}
/* Pseudo-tabs: */
#content .tab {
	display:block;
	font-weight: bold;
	width: 30%;
	float: left;
	height: 2em;
}
/* 	
	----------------------------------------------------------------------
	LAYOUT
	Elements used to build the main parts of the layout.
	---------------------------------------------------------------------- 
*/
body {
	background-color: #888572;
	/*IE5 = P00*/
	text-align: center;
}
#container {
	margin: 32px auto 10px auto;
	border: 8px solid #43413E;
	background-color: #FBF9E4;
	width: 780px;
	text-align: left;
}
#columnContainer {
	width: 100%;
	float: left;
}
.bodyContent {
	width: 480px;
}
#sideCol {
	width: 215px;
	margin-top: 25px;
	float:left;
}

/* 	
	----------------------------------------------------------------------
	PAGE HEADER
	The is the main image that spans the top of the page and the logo.
	The logo has been styled using some tricksy image replacment.
	---------------------------------------------------------------------- 
*/
#pageHeader {
	height: 198px;
	padding: 0 2px 0 2px;
	margin: 24px 0 0 0;
	border: 2px solid #E5D7B5;
	border-left: 0;
	border-right: 0;
	overflow:hidden;
	background-repeat: no-repeat;
	background-position: 0px 3px;
}
/* Turkey Flat logo */
#pageHeader h1 {
	width: 215px;
	text-align: center;
	/* Hide the browser-text */
	height: 0;
	overflow: hidden;
	padding-top: 198px;
	/* Show the logo image instead */
	background-image: url(../ui/logo_pageHeader.gif);
	background-repeat:no-repeat;
	background-position:36px 0px;
}
#pageHeader a {
	cursor:pointer;
}	

/* 	
	----------------------------------------------------------------------
	MAIN NAVIGATION
	A styled list. This sites on the left side of the layout, forming
	a column.
	---------------------------------------------------------------------- 
*/
#siteNavigation {
	font-size: 1em;
	width: 215px;
	margin-top: 1px;
	text-align: center;
	list-style: none;
	letter-spacing: 0.1em;
	float: left;
}
#siteNavigation li {
	text-transform:uppercase;
	display:block;
	padding: 0.25em 0 0.5em 0;
}
#siteNavigation a {
	display: block;
	text-decoration: none;
	margin: 0 50px;
	padding: 0.25em;
	width:115px;
	border-bottom: 1px solid #FBF9E4;
}
#siteNavigation .current,
#siteNavigation .current:hover,
#siteNavigation .current:visited {
	border-bottom: 1px solid #C2874E;
}
#siteNavigation a:hover {
	color: #AC641E;
	border-bottom: 1px solid #E3DFB9;
}

#siteNavigation li.accessory a{
	margin-top:1em;
	padding-top:0.5em;
	border-top: 1px solid #E3DFB9;
	text-transform:none;
	letter-spacing:0;
	font-size:1em;
	font-style:italic;
}

/* 	
	----------------------------------------------------------------------
	ORDER DISPLAY
	A small block sitting in the navigation. Think links back to a more
	detailed order form.
	---------------------------------------------------------------------- 
*/
#orderDisplay {
	background-color:#F8F9DC;
	border:1px solid #cccccc;
	float:left;
	display:inline; /* Fix for IE Margin doubling */
	margin:2em 40px;
	width:125px;
	padding:0 5px 0.4em 5px;
	text-align:center;
}
#orderDisplay.hidden {
		display:none;
}
#orderDisplay h2 {
	font-size:1em;
	border-bottom:2px solid #E5D7B5;
	margin:0.4em 0;
	padding-bottom:0.2em;
}
#orderDisplay p {
	margin:0;
}
#orderDisplay a {
	border:0;
	text-decoration:none;
}
#orderDisplay.updated {
	border-color:#BFB499;
	background-color:#E5E5CC;
}

/* 	
	----------------------------------------------------------------------
	MAIN CONTENT
	A simple box we put the actual page contents into. This box just makes
	sure that the contents doesn't wrap underneatht the list'.
	---------------------------------------------------------------------- 
*/
#content {
	width: 535px;
	padding-bottom:2em;
	padding-top:0;
	float: left;
}

/* 	
	----------------------------------------------------------------------
	SUB-NAVIGATION
	A definition list for navigating about each section. The definitions
	are hidden and displayed with some javascript.
	
	This is classed, because we may want multiple sub navs.
	---------------------------------------------------------------------- 
*/
.subNavigation {
	width:545px;
	float:left;
}
html>body .subNavigation {
	width:565px;
}
.subNavigation h3 {
	background-color:#E3DFB9;
	text-transform:uppercase;
	font-size:0.8em;
	padding: 0.5em 0.25em 0.5em 1em;
	letter-spacing: 0.1em;
	font-weight:normal;
	margin-bottom:0.8em;
}
.subNavigation dl {
	position: relative;
	height: 1.5em;
	padding: 0 0.5em;
	margin-top: 0.5em;
	font-size:1em;
	border-bottom:1px solid #cccccc;
}

.subNavigation dl.sub,
.subNavigation dl.sub a {
	border-bottom: 0;
	color:#535353;
	
}

.subNavigation dl a {
	text-decoration:none !important;
}
.subNavigation dt,
.subNavigation dd {
	margin:0;
	padding-right:1.5em;
}
.subNavigation dt {
	float:left;
}
.subNavigation dd {
	position:absolute;
	top:1.7em;
	font-style:italic;
	width:auto;
	color:#666666;
	/*width: 565px;
	background-color:#FDFDFB; */
}
/* Style anchors within the dt elements*/
.subNavigation dt a{
	display:block;
}
/* Offset the definition elements 
.subNavigation dd.first {
	padding-left:0;
}
.subNavigation dd.second {
	padding-left:10em;
}
.subNavigation dd.third {
	padding-left:20em;
}*/

/* 	
	----------------------------------------------------------------------
	COLUMNS
	Some common layouts to be reused throughout the website. Mainly for
	just text.
	---------------------------------------------------------------------- 
*/
.colText {
	float:right;
	width:330px;
	padding-left: 2em;
}
.colImg {
	float:left;
	text-align: left;
	width:175px;
	padding-top:2em;
}

.colImg .caption {
	text-align:center;
}
.colImg img {
	margin-bottom:1.5em;
}

.articleBox {
	padding-top:1em;
	padding-bottom: 1em;
	margin-bottom: 1em;
	/*float:left;*/
	clear:both;
}

.wineBox {
	margin-bottom:0!important;
	padding-bottom:0!important;
	width:99%;
}

.articleBox .colNarrow {
	width:80px!important;
	text-align:center;
}

.articleBox .colWide {
	width:410px;
	_width:380px;
}

.articleBox .colNarrow img {
	margin-bottom:0;
}
.newsletter .articleBox{
	border-bottom: 1px solid #E5D7B5;
}

.thumbnailBox img {
	float:left;
	margin:0 1em 1em 0;
}

.thumbnailBox .caption {
	clear:left;
	float:right;
	width:70%;
}

#winery h1 {
	border-bottom: 1px solid #E5D7B5;
	margin-bottom:0;
	margin-top:1em;
	clear:both;
}
/* 	
	----------------------------------------------------------------------
	FOOTER
	Nothing complicated here. We're using this to clear the main box.
	---------------------------------------------------------------------- 
*/
#footer {
	text-transform:uppercase;
	padding: 1em;
	border-top: 2px solid #E5D7B5;
	clear: both;
	text-align:center;
	font-size: 0.9em;
}
#footer p, #footer h2 {
	margin-bottom: 0.5em;
}
#footer h2 {
	font-size: 1.1em;
}

/* 	
	----------------------------------------------------------------------
	SECTIONS SPECIFIC
	Styles specific to each particular section. Includes setting the
	header image and highlighting the correct nav entry.
	---------------------------------------------------------------------- 
*/
/* HOME*/
#home #pageHeader {
	background-image:url(../images/pageHead_Vines.jpg);
}
/* WINERY */
#winery #pageHeader {
	background-image:url(../images/pagehead_barrels.jpg);
}
/* WINES */
#wines #pageHeader {
	background-image:url(../images/pagehead_autumn.jpg);
}
#purchase #pageHeader {
	background-image:url(../images/pagehead_grapes.jpg);
}
#contact #pageHeader {
	background-image:url(../images/pagehead_fromahill.jpg);
}
#mediaView #pageHeader,
#downloads #pageHeader {
	background-image:url(../images/pagehead_sunlitVines.jpg);
}
#events #pageHeader,
#Events #pageHeader {
	background-image:url(../images/pagehead_amongstTheVines.jpg);
}
/* Highlight the nav entries */
#winery #wineryNav,
#wines #winesNav,
#purchase #purchaseNav,
#contact #contactNav {
	border-bottom: 1px solid #C2874E;
}

/*	----------------------------------------------------------------------
	MEDIA VIEWER
	The media viewer displays images in full view
	---------------------------------------------------------------------- 
*/

	.mediaContent {
		padding: 4px;
		background-color:#E3DFB9;
		text-align:left;
	}
	
	.mediaContent img {
		margin-bottom: 0.5em;
		border: 1px solid #665C4A;
	}
	
	.mediaContent h2 {
		padding-left: 0.5em;
		border-bottom: 1px solid #F4F2E8;
	}
	.mediaContent p {
		padding-left: 0.5em;
		font-style: italic;
		color: #443E3C;
	}

/* 	
	----------------------------------------------------------------------
	WINES SUMMARIES AND DETAIL VIEWS
	Layouts for the tumbnail summaries of the wines and the more complicated
	detail views for each individual wine.
	---------------------------------------------------------------------- 
*/
/* Summaries */
#wineSummaries h2 {
	border-bottom:2px solid #E3DFB9;
	float:left;
	width:100%;
}
#wineSummaries .wine {
	width:49%;
	float:left;
	height:185px;
}
#wineSummaries .wine h3 {
	font-size:1.2em;
	letter-spacing: 0.07em;	
	text-transform:uppercase;
	margin:0;
}
#wineSummaries .wine img {
	float:left;
	border:0;
}
#wineSummaries .details {
	float:right;
	width:160px;
	margin-right:10px;
	margin-top:1.4em;
}
#wineSummaries a {
	border:0;
}
/* Detailed View */
/* Lukey: I had to change this to a class selector, cause we may have more than one in a page */
.wineDetail {
	width:100%;
	float:left;
}
.wineDetail .details {
	float:right;
	width:370px;
}
.wineDetail img {
	float:left;
}
.wineDetail h2 {
	font-size:1.6em;
	letter-spacing:0.3em;
	line-height:1em;
	margin-top:0.5em;
}
.wineDetail h2 strong {
	font-size:2.2em;
	font-weight:normal;
	display:block;
	line-height:0.95em;
}
.wineDetail h3 {
	font-size:1.3em;
	text-transform:uppercase;
	letter-spacing:0.2em;
	border-bottom:1px solid #cccccc;
	padding-bottom:0.3em;
	margin-top:1.6em;
	margin-bottom:0.6em;
}
.wineDetail p {
	width:350px;
}
/* Links list */
.wineDetail ul {
	margin-bottom:1em;
}
.wineDetail ul li {
	display:inline;
}
.wineDetail ul a {
	margin-right:1em;
	font-size:1.2em;
	text-decoration:none !important;
}
/* The add wine widget */
.wineDetail #addWine,
.wineDetail #status {
	border:1px solid #cccccc;
	text-align:right;
	padding:0.5em;
	height:2em;
}
.wineDetail #addWine {
	background-color:#F8F9DC;
}
.wineDetail #addWine p {
	margin:0 1em 0 0;
	float:left;
	width:auto;
}
.wineDetail #addWine p strong {
	font-size:1.6em;
	font-weight:normal;
}
.wineDetail #addWine button {
	margin-left:0.3em;
}
.wineDetail .bottleLimit {
	clear:both;
	margin-top:0.8em;
}
/* STATUS DISPLAY */
#status {
	background-position: center left;
	background-repeat:no-repeat;
	text-align:left !important;
}
#status p {
	margin:0.3em 0 0 45px !important;
	width:60%;
}
#status.loading {
	background-color:#E5E5CC !important;
	background-image:url(../images/icon_loading.gif);
}
#status.success {
	background-color:#E5E5CC !important;
	background-image:url(../images/icon_success.gif);
}
#status.updateError {
	background-color:#FE6D65 !important;
	background-image:url(../images/icon_alert.gif);
}
#status.updateError p {
	color:white;
}
#status_backup {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-align:left;
	/* the background */
}

/* Some inital form settings */
button,
input.small,
input.narrow,
input.medium,
input.wide {
	border:1px solid #ABAB58;
	padding:0.2em 0.4em;
	margin:0;
}
input.small,
input.narrow,
input.medium,
input.wide {
	background-color:#ffffff;
}
input.small {
	width:3em !important;
}

/*Checkbox Styling */

input.check {
	border:0;
	background-image:none;
	margin-right:4px;
}

button {
	background-color:#F6F5D6;
	background-image:url(../images/button_bkg.gif);
	background-position:bottom left;
	background-repeat:repeat-x;
	font-size:1em;
	width:auto !important; /* Stop IE from adding extra padding */
	padding:0; /* IE Screws Up Padding */
}
html>body button {
	padding:0.2em 0.2em;
}

form#mailingList {
	display:block;
	_margin:0!important;
}
form#mailingList fieldset {
	clear:both;
}

form .column {
	width:275px!important;
	float:left;
}

form .column label {
	width:85px;
	padding-right:2em;
	text-align:right;
}

form .column input {
	clear:right;
}

.buttonBar {
	float:left;
	width:175px;
	background-color:#E9E3C1;
	padding:0.5em;
	margin-left:1em;
}
.buttonBar button {
	float:right;
}

input.required {
	border-color:#C25B2C;
}


/* ERROR MESSAGE */
.error {
	position:absolute;
	background-color:#FE6D65;
	padding:0.3em 0.6em;
	width:100px;
	text-align:left;
	line-height:1em;
}

.warning {
	background-color:#FE6D65;
	padding:0.3em 0.6em;
	width:90%;
}

/* 	
	----------------------------------------------------------------------
	DOWNLOAD LINKS
	---------------------------------------------------------------------- 
*/

	.fileList {
		display:block;
		border-bottom: 1px solid  #E5D7B5;
		padding: 0.5em;
		float: left;
		width: 100%;
		text-decoration: none;
	}
	
	.fileList:hover {
		background-color: #F6F3D1;
		border-bottom: 1px solid #ABAB58;
	}
	
	.fileList h3{
		width: 40%;
		height: 1.8em;
		font-size: 1.2em;
		margin-bottom: 0;
	}
	
	.fileList p,
	.fileList h2,
	.fileList h3 {
		float:left;
	}


	p.secure {
		background-image:url(../ui/icon_secure_small.gif);
		background-repeat:no-repeat;
		background-position:4px 4px;
		padding-left:40px;
	}
	
	
	.formValidation {
		border:1px solid #C99562;
		background-color:#FEDBC3;
		background-image:url(../ui/icon_warning.gif);
		background-repeat:no-repeat;
		background-position:4px 4px;
		padding-left:40px;
		margin-bottom:1em;
	}
	
	.formValidation p {
		margin:0.5em 0;
	}
	
/* MEdia library tables */

h2.folder {
	margin-top:0.25em;
}

h3.crumbs {
	font-color:#DDDDDD;
	font-weight:normal;
	margin-bottom:0;
	padding-bottom:0.5em;
	border-bottom:1px solid #DDDDDD;
}

table.documentLibrary {
	float:left;
	width:99%;
	border:1px solid #DDDDDD;
	margin:0 0 1em 0;
}

table.documentLibrary thead th{
	background-color:#E5D7B5;
	padding:0.25em;
	text-align:left;
}

table.documentLibrary td,
table.documentLibrary th {
	border:1px solid #DDDDDD;
	border-width:0 1px 1px 0;
	margin:0;
}

table.documentLibrary tr.folder th {
	text-align:left;
	padding:0.25em;
	background-color:#F8EFDA;
}
table.documentLibrary tr.folder .name{
	background-image:url(../ui/icon_folder.gif);
	background-repeat:no-repeat;
	background-position:12px 4px;
	padding-left:36px!important;
	padding-top:8px;
}
table.documentLibrary tbody td{
	padding:0.25em;
	background-color:#FFFFEF;
}

table.documentLibrary tbody td.name,
table.documentLibrary tbody td.file {
	width:24em;
}

table.documentLibrary tbody td.name {
	width:18em;
}

table.documentLibrary .name a {
	text-decoration:none;
}

table.documentLibrary .name a:hover {
	text-decoration:underline;
}

table.documentLibrary tbody td.date {
	font-size:0.85em;
	width:8em;
}

table.documentLibrary tbody tr:hover td. {
	background-color:#E5D7B5;
}

table.documentLibrary .name {
	padding-left:18px!important;
}

table.documentLibrary tbody td.file a{
	color:#3333FF;
}

table.documentLibrary tbody td.description {
	padding-left:1em;
	font-size:0.8em;
}


/*-------------- Details of individual items - profile view ----------------*/


div.mediaBox {
	float:left;
	border:1px solid #DDDDDD;
	border-width:1px 0;
	width:99%;
	margin:0;
}

div.mediaBox h1 {
	margin:0.25em 0!important;
}

div.mediaBox .description,
div.mediaBox .summary {
}

div.mediaBox .description {
	width:60%;
	margin:1em;
	float:left;
}

div.mediaBox .summary {
	width:30%;
	padding:0.25em 1em;
	float:left;
	background-color:#DDDDDD;
}

div.mediaBox .summary dd {
	padding-bottom:0.5em;
}


.thumbnailBox .mediaBox {
	border-top-width:0;
	border-color:#E5D7B5;
	padding-top:1em;	
}

.thumbnailBox .mediaBox  h3 {
	padding-top:0.5em;
}

/* 	
	----------------------------------------------------------------------
	CARAMEL CREDIT LINK
	Styled paragraph and coloured link.
	---------------------------------------------------------------------- 
*/
/*#caramelCredit {
	margin-top:1em;
	float:right;
	font-size:0.9em;
	font-family:'Lucida sans', Verdana, Arial, Helvetica, sans-serif;
	color:#6B695A;
}*/
#caramelCredit {
	width:780px;
	margin: 0 auto 7px auto;
	text-align:right;
	font-size:0.9em;
	font-family:'Lucida sans', Verdana, Arial, Helvetica, sans-serif;
	color:#6B695A;
}

#caramelCredit a {
	color:#ABA99A;
	text-decoration:none;
	font-family:'Lucida sans', Verdana, Arial, Helvetica, sans-serif;
}
#caramelCredit a:hover {
	color:#6699FF;
}

/* OPEN/CLOSE REVIEWS ____________________________________*/

#content.pv p a, #content.pv p a:link, #content.pv p a:visited{font-size:1em;color:#444;/*text-decoration:underline*/}
#content.pv p a:hover, #content.pv p a:active{font-size:1em;color:#444;/*text-decoration:none*/}

#content.pv p.top a, #content.pv p.top a:link, #content.pv p.top a:visited{font-size:1em;color:#872522;}
#content.pv p.top a:hover, #content.pv p.top a:active{font-size:1em;color:#872522;}