
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	background-color: #003a73;
	font-size: 13px;
}

body {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	font: 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
	background: #003a73 url(../images/body_bg.jpg) no-repeat center 0;
	color: #695e4a;
	padding-bottom: 30px;
}

p, address, ul {
	margin-bottom: 1.5em;
}

address {
	font-weight: normal;
	font-style: normal;
}

a {
	color: #695e4a;
	text-decoration: none;
	font-weight: bold; 
}

a:hover {
	color: #cbb579;
	text-decoration: none;
	font-weight: bold; 
}

/*  HEADER */

#header {
	height: 255px;
	width: 823px;
	margin: 0 auto;
	background-image: url(../images/header_bg.png);
}

#header #logo {
	width: 285px;
	float: left;
	height: 244px;
	background-color: #695e4a;
	display: inline;
	margin-left: 10px;
	overflow: hidden;
}

#header #logo a {
	display: block;
	background-image: url(../images/header_logo.jpg);
	width: 211px;
	height: 118px;
	text-indent: -9999px;
	margin: 25px auto 0;
}

#header #slogan {
	background: url(../images/slogan.jpg) no-repeat;
	float: right;
	display: inline;
	width: 327px;
	height: 26px;
	text-indent: -9999px;
	margin-top: 116px;
	margin-right: 104px;
}

/*  NAVIGATION */

#navigation {
	height: 92px;
	position: absolute;
	top: 152px;
	left: 0;
	width: 100%;
	background: url(../images/navigation_bg.png) repeat-x;
}

#navigation .container {
	width: 823px;
	margin: 0 auto;
	position: relative;
}

#navigation .logo {
	width: 22px;
	height: 22px;
	position: absolute;
	left: 366px;
	top: 21px;
	background-image: url(../images/navigation_logo.jpg);
	display: none;
}

#navigation ul {
	height: 92px;
	list-style-position: outside;
	list-style-type: none;
	margin-left: auto;
	margin-right: 4px;
	width: 471px;
	margin-bottom: 0;
}

#navigation ul li {
	float: left;
	list-style-position: outside;
	list-style-type: none;
	margin-top: 52px;
}

#navigation ul li a {
	height: 13px;
	display: inline;
	float: left;
	text-indent: -9999px;
	width: 20px;
	background: url(../images/navigation.jpg) 0 0;
	line-height: 1px;
	font-size: 1px;
	overflow: hidden;
	cursor: pointer;
}

#navigation ul li#btn-home a {
	width: 59px;
	background-position: 0 0;
}

#navigation ul li#btn-home a:hover {
	width: 59px;
	background-position: 0 -13px;
}

#navigation ul.current-home li#btn-home a {
	background-position: 0 0;
	cursor: default;
}

#navigation ul li#btn-viswinkel a {
	width: 95px;
	background-position: -59px 0;
}

#navigation ul li#btn-viswinkel a:hover {
	width: 95px;
	background-position: -59px -13px;
}

#navigation ul.current-viswinkel li#btn-viswinkel a {
	width: 95px;
	background-position: -59px 0;
	cursor: default;
}

#navigation ul li#btn-traiteur a {
	width: 95px;
	background-position: -154px 0;
}

#navigation ul li#btn-traiteur a:hover {
	width: 95px;
	background-position: -154px -13px;
}

#navigation ul.current-traiteur li#btn-traiteur a {
	width: 95px;
	background-position: -154px 0;
	cursor: default;
}

#navigation ul li#btn-kookcollege a {
	width: 132px;
	background-position: -245px 0;
}

#navigation ul li#btn-kookcollege a:hover {
	width: 132px;
	background-position: -245px -13px;
}

#navigation ul.current-kookcollege li#btn-kookcollege a {
	width: 132px;
	background-position: -245px 0;
	cursor: default;
}

#navigation ul li#btn-contact a {
	width: 90px;
	background-position: -377px 0;
}

#navigation ul li#btn-contact a:hover {
	width: 90px;
	background-position: -377px -13px;
}

#navigation ul.current-contact li#btn-contact a {
	width: 90px;
	background-position: -377px 0;
	cursor: default;
}

/*  CONTENT */

#content {
	width: 763px;
	margin: 0 auto;
	background-image: url(../images/content_bg.png);
	padding: 20px 30px 10px;
	overflow: hidden;
}

#content .left {
	float: left;
	width: 440px;
}

#content .right {
	float: right;
	width: 300px;
}

#content h2 {
	font-size: 1px;
	text-transform: uppercase;
	font-weight: normal;
	font-style: normal;
	text-indent: -9999px;
	background-repeat: no-repeat;
	height: 17px;
	line-height: 1px;
	margin-bottom: 10px;
}

#content h2#h-zeezout {
	background-image: url(../images/headings/zeezout.gif);
	margin-bottom: 0;
}

#content h2#h-viswinkel {
	background-image: url(../images/headings/viswinkel.gif);
}

#content h2#h-traiteur {
	background-image: url(../images/headings/traiteur.gif);
}

#content h2#h-kookcollege {
	background-image: url(../images/headings/kookcollege.gif);
}

#content h2#h-contact {
	background-image: url(../images/headings/contact.gif);
}

#content h3 {
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: #cbb777;
	font-size: 16px;
	line-height: 1.5em;
}

#content h4 {
	margin-bottom: 5px;
	font-size: 14px;
}

/* --- contact */

form {
	
}

form * {
	font: 12px/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
}

form label {
	display: block;
}

form input {
	border: 1px solid #a4aeb5;
	padding: 0 0 0 5px;
	margin: 0;
	width: 292px;
	height: 20px;
	background: #fff url(../images/input_bg.png) repeat-x;
}

form input:focus {
	border: 1px solid #014073;
}

form textarea {
	border: 1px solid #a4aeb5;
	padding: 3px 1px 1px 3px;
	margin: 0;
	width: 293px;
	height: 120px;
	overflow: auto;
	background: #fff url(../images/input_bg.png) repeat-x;
}

form textarea:focus {
	border: 1px solid #014073;
}

form p {
	
}

form p.error {
	
}

form p.error input {
	width: 290px;
	border-width: 2px;
	border-color: #f00;
}

form p.error textarea {
	width: 291px;
	border-width: 2px;
	border-color: #f00;
}

form button {
	padding: 4px;
	margin: 0 0 0 auto;
	display: block;
	border: 1px solid #a4aeb5;
	background: #fff url(../images/button_bg.png) repeat-x 0 bottom;
	cursor: pointer;
}

form button:active {
	background: #fff url(../images/input_bg.png) repeat-x 0 0;
}

/*  FOOTER */

#footer {
	width: 823px;
	height: 113px;
	background: url(../images/footer_bg.png) no-repeat;
	margin: 0 auto;
	position: relative;
}

#footer .container {
	width: 823px;
	height: 113px;
}

#footer a {
	width: 206px;
	height: 11px;
	font-size: 1px;
	line-height: 1px;
	display: block;
	position: absolute;
	top: 85px;
	right: 30px;
	text-indent: -9999px;
	background: url(../images/footer_mail.gif) no-repeat;
}

#footer a:hover {
	background-position: 0 -11px;
}

#footer p {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
