/*--------------------------------------------- 


[Screen Stylesheet] 


Project: [joutacoaching.nl]

Version: [V0.3]

Last change: [20/08/2011] [End of project]

Assigned to: [Meine Nijenhuis / Meine Grafische vormgeving] [NL] 


----------------------------------------------*/

@charset "utf-8";

/* Font-face */
@font-face { font-family: Delicious-Bold; src: url("../fonts/Delicious-Bold.eot"); /* EOT file for IE */ }
@font-face { font-family: Delicious-Bold; src: url("../fonts/Delicious-Bold.ttf"); /* TTF file for CSS3 browsers */ }
@font-face { font-family: Delicious-Roman; src: url("../fonts/Delicious-Roman.eot"); /* EOT file for IE */ }
@font-face { font-family: Delicious-Roman; src: url("../fonts/Delicious-Roman.ttf"); /* TTF file for CSS3 browsers */ }

/* BASIC */
body				{ height: 100%; background: #584F43; font-family: Verdana, Helvetica, Sans-serif; font-size: 13px; }

#wrapper			{ position: absolute; float:left; width:100%; height: 100%; }
.container      	{ position: relative; top:0; z-index: 10; margin:0 auto; width: 960px; }

a, a:link, a:active, a:visited	{ color: #FF9933; text-decoration: none; }
a:hover				{ text-decoration: underline; }

/* HEADER */

#header				{ clear: both; position: relative; width: 100%; height: 335px; background: #ffffff; }

#header-image		{ position: absolute; top: 67px; right: 0; width: 798px; height: 322px; background: url(../images/headerimage-background.png) no-repeat 0 0; }
#header-image img 	{ margin: 12px 0 0 12px; }

#logo h1			{ position: absolute; top: 0; left: 10px; width: 372px; height: 52px; background: url(../images/logo-joutacoaching.png) no-repeat 0 0; text-indent: -9999px; }
#logo #payoff 		{ position: absolute; top: 14px; left: 563px; font-size: 19px; color: #584F43; }

/* NAVIGATION */

#navigation			{ position: absolute; top: 113px; left: 10px; }
#navigation ul li	{ margin-bottom: 21px; }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited	{ padding-left: 21px; font-family: Verdana, Helvetica, Sans-serif; font-size: 15px; color: #8C8167; font-weight: bold; text-transform: uppercase; text-decoration: none; }
#navigation ul li a:hover { padding-left: 21px; background: url(../images/navigation-active-item.png) no-repeat 0 50%; color: #584F43; }
#navigation ul li#active { padding-left: 21px; background: url(../images/navigation-active-item.png) no-repeat 0 50%; font-family: Verdana, Helvetica, Sans-serif; font-size: 15px; color: #584F43; font-weight: bold; text-transform: uppercase; }

/* CONTENT */

#content			{ clear: both; position: relative; top: 110px; left: 0px; width: 100%; }

.content-block		{ float: left; clear: left; margin-left: 180px; margin-bottom: 25px; padding-bottom: 35px; width: 530px; background: url(../images/contentblock-background.png) no-repeat 0 bottom #E6E4D8; }
.content-block h2	{ margin-left: 10px; padding-top: 42px; padding-bottom: 13px; width: 510px; background: url(../images/title-topline-dark.png) repeat-x 0 21px; font-size: 26px; }
.content-block h3	{ clear: both; margin-left: 10px; margin-top: 20px; width: 510px; font-size: 14px; font-weight: bold; }
.content-block p	{ margin: 13px 0 0 10px; width: 500px; font-size: 13px; line-height: 20px; }

	#map			{ margin: 21px 0 0 10px; width: 500px; height: 250px; border: 4px solid #ffffff; }
	
	#form			{ margin-left: 10px; padding: 0; width: 500px; }
	#form dl		{ width: 500px; }
	#form dl dt		{ clear: both; padding-bottom: 7px; width: 180px; font-size: 13px; font-weight: bold; }
	#form dl dd 	{ clear: both; margin: 7px 0; width: 500px; }
	.inputfield		{ padding: 4px; width: 450px; height: 26px; font-family: Verdana; font-size: 12px; border: 1px solid #cacaca; background: #ffffff; }
	.inputarea		{ padding: 4px; width: 450px; height: 145px; font-family: Verdana; font-size: 12px; border: 1px solid #cacaca; background: #ffffff; }
	
	.error			{ padding: 4px 0; font-size: 13px; color: #A5292A; }
	
	dd#submitButton	{ position: relative; top: 7px; left: 0; }
	#submit			{ padding: 7px 14px; background: #333333; color: #ffffff; font-size: 13px; line-height: 20px; border: 0px solid #000000; }
	#submit:hover	{ background: #FF9933; color: #ffffff; cursor: pointer; border: 0px solid #000000; }
	
.more-info	 		{ display: none; }
.flip				{ float: right; padding: 7px 14px; background: #333333; color: #ffffff; font-size: 13px; line-height: 20px; }
.flip:hover			{ background: #FF9933; color: #ffffff; cursor: pointer; }

.extra-block		{ float: right; clear: right; margin-right: 15px; padding-bottom: 35px; width: 220px; background: url(../images/extrablock-background.png) no-repeat 0 bottom #8C8167; }
.extra-block h4		{ margin-left: 10px; padding-top: 42px; padding-bottom: 13px; width: 200px; background: url(../images/title-topline-light.png) repeat-x 0 21px; font-size: 21px; color: #ffffff; }
.extra-block p		{ padding: 21px 10px 12px 10px; font-size: 13px; line-height: 20px; color: #ffffff; }
.extra-block ul		{ padding: 21px 10px 12px 10px; font-size: 13px; line-height: 20px; color: #ffffff; }
.extra-block ul li	{ list-style-type: disc; margin-left: 21px; }

.photo				{ padding: 16px 0 14px 56px; border: 0; }

.deliciousBold		{ font-family: Delicious-Bold, Verdana, Helvetica, Sans-serif; }
.deliciousRoman		{ font-family: Delicious-Roman, Verdana, Helvetica, Sans-serif; }

.center				{ text-align: center; }
.bold				{ font-weight: bold; }
.italic				{ font-style: italic; }

/* FOOTER */

#footer				{ clear: both; position: relative; top: 160px; left: 0px; width: 100%; height: 200px; background: #333333; }

#footer-navigation ul { float: left; list-style: none; margin: 0 0 0 180px; padding-top: 14px; }
#footer-navigation ul li { display: inline;  margin: 0 4px 0 10px; font-size: 12px; }
#footer-navigation ul li a, #footer-navigation ul li a:link, #footer-navigation ul li a:visited	{ color: #ffffff; font-weight: bold; text-transform: uppercase; text-decoration: none; }
#footer-navigation ul li a:hover { color: #FF9933; }

#company-info	{ float: left; margin: 14px 0 0 21px; font-size: 12px; line-height: 17px; color: #ffffff; }
#company-info p { float: left; margin-left: 17px; }
#company-info a, #company-info a:link, #company-info a:visited	{ color: #ffffff; font-weight: bold; text-decoration: none; }
#company-info a:hover { color: #FF9933; }