/* - - - - - - - - - - - - - - - - - - - - -
Title : 	The Mind Artist GLOBAL style sheet
Author : 	David Hund, Valued Standards (c) 2009
URL : 		http://www.themindartist.nl
Modified : 	${TM_DATE} - SVN: $Revision$

			- http://developer.yahoo.com/yui/compressor/
			- http://www.cleancss.com/
- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -
INDEX:
	C1:		Reset, Fixes, etc
	C2:		Broad Generics (body etc)
	C3:		Typography
	C4:		Generic Classes
	C5:		Headers
	C6:		Hyperlinks
	C7:		Logo
	C8:		Images
	C9:		Lists
	C10:	Base Structure (Div frame)
	C11:	Tables
	C12:	Forms
- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -
COLORS USED:
	- Gold			917647
	- Black/Blue	171623
	- Off-white		f5f5f5
- - - - - - - - - - - - - - - - - - - - - */


/* -----------------------------------------
	C1: RESET [start from scratch]
	http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
	- Removed some obsolte elements (html5)
	- See http://www.w3.org/TR/html5-diff/#absent-elements
----------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; 
	font-size: 100%;
	_font-size: 100.01%;
	vertical-align: baseline;
	background: transparent;
}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse; 
	border-spacing: 0;
}


/* -----------------------------------------
	SIMPLER CLEARING?
	1.2: GENERIC FIXES [fixes clearing issues with floats]
	http://www.quirksmode.org/css/clearing.html
----------------------------------------- */
/* 	We ASSUME some auto-fixes such as the #nav UL and other horizontal lists */
.wrapper, #content, #main-article,
.nav ul, .footer ul,
.clearfix{
	overflow: auto; /* Good browsers */
	/* overflow: hidden; *//* If you need IE/MAC or when there's scrollbars due to extra padding/marging/borders etc: */
	width: 100%; /* IE 6+ -> hasLayout, Opera fix too? */
	/* zoom: 1; *//* IE: Avoid width issues? */
}


/* -----------------------------------------
	C2: GENERICS [Generic type, .classes, etc]
----------------------------------------- */
body{
	background: #917647 url('../img/bg_body.jpg') repeat-x  0 0;
	color: #171623;
	font-size: 62.5%;
	font-family: Georgia, Times, 'Times New Roman', serif;
}


/* -----------------------------------------
	C3: BASE TYPOGRAPHY
----------------------------------------- */
div{font-size: 1em;} /* = 10px */
p, dl, td, th, li, pre, code, kbd, samp, pre, tt, input{font-size: 1.4em; /* 14px */}

p{
	line-height: 1.54em;
	margin-bottom: 1em;
}

strong{font-weight: bold;}
em{font-style: italic;}
cite{font-style: italic;}
abbr, acronym { 
	cursor: help;
	text-transform: uppercase; 
	font-size: 85%; 
	letter-spacing: .1em; 
	border-bottom: 1px dotted #999;
}
pre { white-space: pre;}
pre * { 
	font-size: 1.4em; 
	line-height: 1.54em; 
	white-space: pre; 
}
blockquote { 
	border-top: 1px dotted #917647; 
	border-bottom: 1px dotted #917647; 
	color: #917647; 
}
blockquote > *:before { content: "\201C";}
blockquote > *:after { content: "\201D";}

q { quotes: "\201C" "\201D" "\2018" "\2019";}

ins {
	text-decoration: underline;
	background: #FFFFCC;
}
del {text-decoration: line-through;}

address,
blockquote{
	margin: 1.5em 0;
	font-size: 1.4em;
	line-height: 1.54em;
}
blockquote p{margin: 1em;}

/* Cascading font size should remain same! */
td td,li ul li,li ol li,td p,blockquote p,dd p, li p,ul li ul li,ul li ul li p,ol li ol li,ol li ol li p{
	font-size: 1em!important; 
	line-height: 1.5em!important;
}

hr { 
	display: block; 
	background: #917647; 
	color: #917647; 
	width: 100%; 
	height: 1px; 
	border: none; 
}

/* -----------------------------------------
	C4: GENERIC CLASSES
----------------------------------------- */
.hidden{display:none;}
.accessibility{
	display: block;
	position: absolute;
	left: -999em;
	top: -999em;
}

.alignRight{text-align: right;}
.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.floatRight{float: right;}
.floatLeft{float: left;}

.error{background: transparent;color: #CC3333;}
.success{background: transparent;color: #006600;}

.message{ 
	background-color: #FFFFCC; 
	color: #363636;
	border-top: 1px solid #FF9900; 
	border-bottom: 1px dotted #FF9900; 
	padding: 0 1em; 
	text-align: left;
	margin: 1.54em 0;
}
.message ul{margin: 1.54em 0 1.54em 1.54em;}

.message.error{
	background-color: #FFD0D0;
	color: #CC3333;
	border-color: #CC3333; 
}
.message.success{
	background-color: #CCEE99; 
	color: #006600;
	border-color: #006600; 
}

/* vCARD */
.vcard{
	position: relative;
	border-top: 1px dotted #EEE;
	border-bottom: 1px dotted #EEE;
}
.vcard p{margin: 0 0 .5em 0;}
.vcard .url, .vcard .adr{
	display: block;
	position: absolute;
	left: -999em;
}
.vcard .save-vcard a{
	display: block;
	height: 32px;
	padding: 0 0 0 38px;
	margin-top: 1em;
	font-size: 0.8em;
	background: transparent url('../img/vcard-add.png') no-repeat 0 0;
}


/* -----------------------------------------
	C5: HEADERS
----------------------------------------- */
h1, h2, h3, h4, h5, h6{
	margin: 1em 0 .2em 0;
	text-shadow: 0 1px 0 rgba(250,250,250, 0.8);
	color: #171623;
	line-height: 1.54;
}

h1, h2{
	font-family: 'Helvetica Neue', Helvetica, verdana, Arial, sans-serif;
	font-weight: bold;
}
#main-article .article h1,
#main-article .article h2{color: #FFF;}

h1{font-size: 2.4em;}
h2{font-size: 1.8em;}
h3{font-size: 1.6em;}
h4{font-size: 1.4em;font-weight: bold;}
h5{font-size: 1.4em;font-weight: bold; font-style: italic;}
h6{font-size: 1.4em;font-weight: bold;}

/* Exceptions */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{margin-top: 20px;}
#main-article h1, #main-article h2, #main-article h3, #main-article h4{text-shadow: none;}
#main-article h1:first-child,#main-article h2:first-child{margin-top: 0;font-size: 1.8em;}
/* #main-article h1{font-weight: normal;} */
.vcard h3,
.message h3{margin: 1em 0 .25em 0;}
.message h3{
	font-family:'Helvetica Neue',Helvetica,verdana,Arial,sans-serif;
	font-size: 1.4em;
}
.error h3{color: #CC3333;}
.success h3{color: #006600;}

/* -----------------------------------------
	C6: LINKS
----------------------------------------- */
a:link, a:visited, a:hover, a:active{
	color: #917647;
	text-decoration: underline;
}
a:hover, a:active{
	color: #171717;
	-webkit-transition: color .25s linear;
}
a.button:link, a.button:visited, a.button:hover, a.button:active{
	font-family:'Helvetica Neue',Helvetica,verdana,Arial,sans-serif;
	color: #FFF;
	text-decoration: none;
	float: none;
	display: block;
}

#main-article .article a:link, #main-article .article a:visited, #main-article .article a:hover, #main-article .article a:active,
.nav a:link, .nav a:visited, .nav a:hover, .nav a:active,
.footer a:hover, .footer a:active{color: #FFF;}

#main-article .article a:hover, #main-article .article a:active{text-decoration: none;}

ul.horizontal li a:link, ul.horizontal li a:visited, ul.horizontal li a:hover, ul.horizontal li a:active{
	display: block;
	padding: 0.5em;
}


/* -----------------------------------------
	C7: LOGO
----------------------------------------- */
#logo{margin: 0 0 10px 0;}
#logo span{
	position: absolute;
	left: -999em;
}


/* -----------------------------------------
	C8: IMAGES
----------------------------------------- */
#article-1 img,
#article-2 img,
.page img{
	border: 1px solid #917647;
	-o-box-shadow: 1px 1px 2px #999;
	-webkit-box-shadow: 1px 1px 2px #999;
	-moz-box-shadow: 1px 1px 2px #999;
	box-shadow: 1px 1px 2px #999;

}
.page img{
	float: left;
	margin: 1em 1em .1em -180px;
}

img.left{float: left;margin: 0 1em 0 0;}
img.right, .page img.floatRight{float: right;margin: 0 0 0 1em;}
.noBorder, .page img.noBorder{
	border: 0;
	-o-box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#article-1 img{
	float: right;
	margin: 0em 1em .1em 0;
}
#main-article img{display:none;}

.thumbnails{
	overflow: hidden;
	width: 100%;
}
.thumbnails img{
	margin: 0 20px 20px 0;
}



/* Google Maps */
#map{
	width: 438px;
	height: 180px;
	margin: 1.54em 0;
	border: 1px solid #917647;
	-o-box-shadow: 1px 1px 2px #999;
	-webkit-box-shadow: 1px 1px 2px #999;
	-moz-box-shadow: 1px 1px 2px #999;
	box-shadow: 1px 1px 2px #999;
}

/* -----------------------------------------
	C9: LISTS
----------------------------------------- */
ul, ol{ 
	list-style-type: disc; 
	list-style-position: outside; 
	margin: 2em 0;
	margin-left: 1.5em;
}
ol{list-style-type: decimal;}
ul li, ol li{margin: .5em 0;}

ul li ul, ol li ol, ul li ol, ol li ul{margin: .5em 2em;}
ul li ul li, ol li ol li, ul li ol li, ol li ul li{margin: 0;}

/* horizontal lists */
ul.horizontal,
ol.horizontal,
/* 	We ASSUME the #tools #nav and #footer lists are horizontal, so we should not need to set a 'horizontal' class on those */
.nav ul,
.footer ul{list-style-position: inside; list-style-type: none; margin: 0;}

ul.horizontal li,
ol.horizontal li{/* display: inline; */ float: left; margin-right: 1em;}

.nav ul,
.footer ul{text-align: right;}

.nav ul li,
.footer ul li{display: inline; margin-right: 1em;}

.footer ul{padding: .5em 0;}
.footer ul li{
	font-size: 1.2em;
	color: #999;
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block; 
	padding-right: 1em;
	border-right: 1px solid #999;
	text-shadow: 0 -1px 0 #000;
}
.footer ul li:last-child,
.footer ul li.last{
	margin-right: 10px;
	border-right: none;
}
.footer ul li a{color: #999;}


/* -----------------------------------------
	NAVIGATION
----------------------------------------- */
#navigation ul{
	padding: 0;
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, verdana, Arial, sans-serif;
}
#navigation ul li{
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block;
	margin: 0;
	padding: 10px 0;
	text-transform: capitalize;
}

#navigation ul li a:link,
#navigation ul li a:visited,
#navigation ul li a:hover,
#navigation ul li a:active{
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block;
	padding: 10px .5em 10px .5em;
	margin: 10px .5em -10px .5em;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0,0,0, 0.8);
}

#navigation ul li a:hover,
#navigation ul li a:active{
	color: #DCD0BB;
	text-shadow: 0 -1px 0 rgba(0,0,0, 0.8);
	-webkit-transition: color .25s linear;
}

#navigation ul li.active a:link,
#navigation ul li.active a:visited,
#navigation ul li.active a:hover,
#navigation ul li.active a:active{text-decoration: underline;}

/* definition lists */
dl{margin: .5em 0;line-height: 2em;}
dl dt{font-weight: bold;}
dl dd{margin-left: 1em;}


/* -----------------------------------------
	C10: BASE STRUCTURE (Div frame)
----------------------------------------- */
.wrapper{
	width: 960px;
	margin: 30px auto;
	text-align: left;
}

/* Generic column classes */
.column{
	width: 220px; 
	float: left; 
	margin: 0 20px 0 0; 
	padding: 0;
	border: none;
}
.column2{width: 50%;}
.column3{width: 30%;}
.column4{width: 25%;}
.last{margin-right: 0;}

#branding{}
#navigation{
	background: #29120b url('../img/bg_navigation.jpg') repeat-x 0 100%;
	color: #FFF;
}

#content{background: #f5f5f5 url('../img/bg_content.png') repeat-y 0 0;}

.article{margin: 0 20px;}
#main-article{background: #171623 url('../img/branding_maarten_vogelaar.jpg') no-repeat 100% 0;}
#main-article .article{
	width: 202px;
	height: 320px;
	overflow: auto;
	padding: 20px;
	margin: 0;
	float: left;
	background: #171623 url('../img/bg_main_article.gif') repeat 0 0;
	color: #FFF;
}
.page{
	width: 680px;
	float: left;

	width: 440px;
	margin-left: 240px;
}

#article-1,
#article-2{
	float: left;
	margin: 0;
	margin-right: 20px;
}

#article-1{
	width: 330px;
	padding: 0 0 0 20px;
}
#article-2{width: 330px;}

.aside{
	float: right;
	width: 200px;
	padding: 0 20px;
	background-color: #dcd0bb;
	text-shadow: 0 1px 0 rgba(250,250,250, 0.8);
}

.footer{
	background: #171623 url('../img/bg_main_article.gif') repeat 0 0;
	color: #FFF;
}


/* -----------------------------------------
	C11: TABLES
----------------------------------------- */
table{
	margin: 2em 0;
	width: 100%;
	border: 1px solid #171623;
	text-align: left;
}
table caption{
	margin-bottom: -1em; /* table top-margin/2 reversed! */
	margin-top: 2em; /* table top-margin/2 reversed! */
	font-size: 1.2em;
	font-style: italic;
	color: #666;
	text-align: right;
}
table tr{}
table thead{}
table thead tr{
	background: #171623; 
	color: #FFF;
}
table thead tr th,
table tfoot tr th{
	border-bottom: 1px solid #171623;
	padding: .2em .5em;
	font-weight: bold;
}
table thead tr td,
table tfoot tr td,
table tfoot tr th{
	padding: .2em .5em;
	border-bottom: 1px solid #171623;
	border-right: 1px solid #171623;
}
table tbody{}
table tbody tr{}
table tbody tr th{
	border-bottom: 1px solid #171623;
	border-right: 1px solid #171623;
	padding: .2em .5em;
	font-weight: bold;
}
table tbody tr td{
	padding: .2em .5em;
	border-bottom: 1px solid #171623;
	border-right: 1px solid #171623;
}


/* -----------------------------------------
	C12: FORMS
----------------------------------------- */
form{}
legend,
label,
.help_text{
	font-family: 'Helvetica Neue', Helvetica, verdana, Arial, sans-serif;
	font-weight: normal;
	display: block;
}

fieldset legend{
	margin-bottom:  .5em;
	font-size: 1.3em;
}

form p{
	margin: 1em 0;
	/* auto clearfixing: saves extraneous classnames */
	clear: both;
	overflow: hidden;
	zoom: 1;
}

fieldset p:first-child{margin-top: 0;}

/* Notices, Labels, Errors, Messages */
label{
	font-weight: bold;
	color: #171623;
}
div > label:first-child{
	display: block;
	font-size: 1.4em;
	line-height: 1.54em;
}
.help_text{
	display:block;
	font-style: italic;
}

/* Inputs */
input,
textarea{
	width: 180px;
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, verdana, Arial, sans-serif;
	font-size: 1em;
	background: #FFF;
	color: #917647;
	padding: .3em 10px;
	border: 1px solid #917647;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-webkit-transition: border .4s linear;
}
textarea{
	font-size: 1.4em;
	height: 80px;
	overflow: auto;
}
input:focus,
textarea:focus,
input.focused,
textarea.focused{
	border: 1px solid #171623;
	border-right-width: 4px;
	width: 176px;
	color: #171623;
}
textarea.focused{width: 177px;}
input[required],
textarea[required]{
	border-right-width: 4px;
	width: 176px;
}
input.error,
textarea.error{
	background-color: #FFF;
	border: 1px solid #CC3333;
	border-right-width: 4px;
	color: #CC3333;
	width: 176px;
	font-style: italic;
}

input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }
input[type='hidden'] { display:none; }

/* No width etc. on certain types of input... */
input[type='button'], input[type='submit'], input[type='reset'], input[type='image'],
.button{
	background: #917647 url('../img/bg_button.jpg') repeat-x 0 0;
	color: #FFF;
	padding: .2em 1em;
	width: auto; 
	border: 1px solid #917647;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
	float: right;
}
input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover, input[type='image']:hover,
input.button:hover{color: #DCD0BB;}
input[type='button']:active, input[type='submit']:active, input[type='reset']:active, input[type='image']:active,
input.button:active{text-shadow: 0 -1px 0 rgba(0,0,0,0.5);}

/* ... Checkboxes and radio buttons */
input[type=checkbox],
input[type=radio],
input.check,
input.radio{
	background: transparent;
	width: auto;
	float: left; /* !! */
	border: none;
	margin: 0;
}

p.checkbox label, p.radio label{margin-left: 1.5em;}
p.checkbox input, p.radio input{margin-top: -1.5em;}

select{ 
	color: #171623; 
	border: 1px solid #171623;
}
select option{}

#honinglabel, #honing{display: none;}

/* Google Maps Directions form: */
form#directions{
	background: #DCD0BB;
	color: #FFF;
	border: 1px solid #917647;
	-o-box-shadow: 1px 1px 2px #999;
	-webkit-box-shadow: 1px 1px 2px #999;
	-moz-box-shadow: 1px 1px 2px #999;
	box-shadow: 1px 1px 2px #999;
	margin: 0 0 20px 0;
	padding: 0 20px;
}
form#directions p{
	line-height: 1;
	margin: 10px auto;
}
form#directions label{
	color: #917647;
	text-shadow: 0 1px #FFF;
	float: left;
	width: 7em;
	margin-top: .5em;
}
form#directions input#saddr{
	width: 7em;
	margin-right: 10px;
	float: left;
}
form#directions input#saddr:focus{
	margin-right: 7px;
}

form#directions input.button{
	float: left;
}