/* 
---------------------------
Site:			www.tvdiever.nl
Stylesheet:		tvdiever.css
Author:			joop vos
Date:			19/03/2010
Updated:		-
---------------------------
*/

/* @group CSS reset */

/* CSS reset > http://meyerweb.com/eric/tools/css/reset/  */
/* "It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline." */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* http://24ways.org/2009/dont-lose-your-focus */
/* don't forget to style a:focus! */
a:hover, a:active { outline: none; }

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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

/* @end */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 8, 2011 */
@font-face {
    font-family: 'FontinSansRegular';
    src: url('fontin_sans_r_45b-webfont.eot');
    src: url('fontin_sans_r_45b-webfont.eot?#iefix') format('eot'),
         url('fontin_sans_r_45b-webfont.woff') format('woff'),
         url('fontin_sans_r_45b-webfont.ttf') format('truetype'),
         url('fontin_sans_r_45b-webfont.svg#webfonta1EGqs1k') format('svg');
    font-weight: normal;
    font-style: normal;

}
	
/* http://www.alistapart.com/articles/howtosizetextincss/ */
body {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	letter-spacing: normal; 
	font-size: 100.1%;
	line-height: 1.125em;
	color: #fff;
}

body#home {background: #aa4d22 url(design/gravel_home.gif) no-repeat fixed 0 0;}
body#nieuws {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#agenda {background: #aa4d22 url(design/gravel_agenda.gif) no-repeat fixed 0 0;}
body#jeugd {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#vijfvijf {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#competitie {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#toernooien {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#tennislessen {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#vereniging {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#lidmaatschap {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#locatie {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#contact {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}
body#error404 {background: #aa4d22 url(design/gravel_nieuws.gif) no-repeat fixed 0 0;}

#imgright {
	position: absolute;
	top: 0;
	left: 960px;
	z-index: -3;
}

#container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	background-color: #fcfcfc;
}

#header {
	float: left; /* to get all children inside and therefore a fullcolor background!  */
	background-color: #51ac2b;
}

ul#subnav {
	float: right;
	height: 2.2em;
	background-color: #51ac2b;
	padding: 0;
	margin-right: 20px;
	white-space: no-wrap;
	display: inline; /* otherwise to much margin-right in IE6!? */
}

ul#subnav li {
	float: left;
	margin-left: 4px;
	display: inline;
	line-height: 2.2em;
	font-size: 0.875em; /* 14px */
	color: #ededed;
}

ul#subnav li a {
	text-decoration: none;
	color: #ededed;
	background-color: #51ac2b;
}

ul#subnav li a:hover, ul#subnav li a:focus {
	text-decoration:  none;
	color: #ededed;
	padding-bottom: 2px;
	border-bottom: 1px solid #dedede;
}

#vereniging ul#subnav li.vereniging a {padding-bottom: 2px; border-bottom: 1px solid #dedede;}
#lidmaatschap ul#subnav li.lidmaatschap a {padding-bottom: 2px; border-bottom: 1px solid #dedede;}
#locatie ul#subnav li.locatie a {padding-bottom: 2px; border-bottom: 1px solid #dedede;}
#contact ul#subnav li.contact a {padding-bottom: 2px; border-bottom: 1px solid #dedede;}

#slogantopline {
	float: left;
	height: 10px;
	line-height: 10px; /* if not height is doubled in IE6! */
	width: 960px; /* 100% doesn't work in IE! */
	background-color: #fff;
}

/* @fontface! */
/* all fine in all browsers mac or windows */
/* bulletproof with some help > http://bit.ly/hzhH1H */

#slogan {
	height: 3.7em;
	width: 960px;
	background-color: #220082;
	float: left;
	padding-top: .3em; /* to get h1 and p more or less in the middle of the box! */
}

h1#site-name {
	margin: 0 0 0 20px;
	padding: 0;
	color: #fff;
	font: normal normal 2.8em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	display: inline !important;
}

p#site-slogan {
	color: #fff;
	font: normal normal 1.5em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	margin: 0;
	padding: 0;
	display: inline !important;
}

/* end @fontface! */

#sloganbottomline {
	clear: both;
	float: left;
	height: 10px;
	line-height: 10px; /* if not height is doubled in IE6! */
	width: 960px; /* 100% doesn't work in IE! */
	background-color: #fff;
}

#banner {
	float: left;
	width: 960px;
}

/* http://www.cssmenumaker.com/builder/menu_info.php?menu=032 */
/* padding-top op li en padding-bottom op a bepaalt mede hoogte #nav! */
ul#mainnav {
	clear: both;
	float: left;
	width: 940px; /* 960px minus 20px padding-left */
	background-color: #51ac2b;
	padding-left: 20px;
	white-space: no-wrap;
}

ul#mainnav li {
	float: left;
	line-height: 120%; /* 100% gives problems in IE/win! */
	font-size: 1.125em;
	font-weight: normal;
	color: #fff;
	padding-top: 12px; /* om li (||) op zelfde hoogte als li a te krijgen! */
}

ul#mainnav li a {
	float: left;
	display: block;
	text-decoration: none;
	color: #fff;
	background-color: #51ac2b;
	padding: 0 4px 16px 4px;
}

ul#mainnav li a:hover, ul#mainnav li a:focus {
	text-decoration:  none;
	color: #fff;
	background: #51ac2b url(design/bal.gif) bottom center no-repeat;
	padding-bottom: 16px;
}

#home ul#mainnav li.home a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#nieuws ul#mainnav li.nieuws a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#agenda ul#mainnav li.agenda a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#jeugd ul#mainnav li.jeugd a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#vijfvijf ul#mainnav li.vijfvijf a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#competitie ul#mainnav li.competitie a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#toernooien ul#mainnav li.toernooien a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}
#tennislessen ul#mainnav li.tennislessen a {background: #51ac2b url(design/bal.gif) no-repeat center bottom;}

#content {
	float: left;
	padding: 20px 0;
	color: #3e3e3e;
}

/* @group leftcolumn */

#content #leftcolumn {
	float: left;
	width: 230px;
	margin-top: 6px;
}

#leftcolumn .advertentie {
	margin: 0 10px 20px 16px;
	padding: 6px 6px 20px;
	background: #cdeae9;
	border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
	border: 1px solid #e2eff0;
	text-align: center;
	color: #5e5e5e;
}

#leftcolumn .advertentie h3 {
	font-size: 1.000em; /* 16px */
	line-height: 120%;
	margin-bottom: 10px;
}

#leftcolumn .advertentie p {
	font-size: 0.750em; /* 12px */
	line-height: 140%;
	font-weight: bold;
	margin-bottom: 10px;
}

#leftcolumn .advertentie p a {
	text-decoration: underline;
	color: #220082;
}

#leftcolumn .advertentie p a:hover, #leftcolumn .advertentie p a:focus {
	text-decoration: none;
}

#leftcolumn .advertentie p img {
	margin: 0 0 10px 0;
}

#leftcolumn .tip {
	margin: 0 10px 20px 16px;
	padding: 6px 6px 20px;
	background: #e2f5da;
	border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
	border: 1px solid #e2f5da;
	text-align: center;
	color: #5e5e5e;
}

#leftcolumn .tip h3 {
	font-size: 0.935em; /* 15px */
	line-height: 120%;
	margin-bottom: 10px;
}

#leftcolumn .tip p {
	font-size: 0.750em; /* 12px */
	line-height: 140%;
	font-weight: bold;
	margin-bottom: 10px;
}

#leftcolumn .tip p a {
	text-decoration: underline;
	background-color: transparent;
	color: #5e5e5e;
}

#leftcolumn .tip p a:hover, #leftcolumn .tip p a:focus {
	text-decoration: none;
}

#leftcolumn .tip p img {
	margin: 0 0 10px 0;
}

/* @end */

/* @group maincolumn */

#content #maincolumn {
	float: left;
	width: 500px;
}

#maincolumn .article {
	padding: 0 20px 10px 10px;
}

#maincolumn .article h3 {
	padding: 0 0 10px 0;
	font-size: 1.125em;
	line-height: 120%;
	font-weight: bold;
	font-style: normal;
	color: #656565;
}

#maincolumn .article h3 a {
	text-decoration: none;
	color: #656565;
	border-bottom: 1px solid #656565;
}

#maincolumn .article h3 a:hover, #maincolumn .article h3 a:focus  {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

#maincolumn .list {
	margin: 10px 20px 0 10px;
	padding: 10px 0 0 0;
}

#maincolumn .list h3 {
	margin-bottom: 10px;
	padding-bottom: 6px;
	font-size: 0.875em; /* 14px */
	line-height: 120%;
	font-weight: bold;
	font-style: normal;
	color: #656565;
	border-bottom: 1px solid #efefef;
}

#maincolumn .list h4 {
	padding: 0 0 10px 0;
	font-size: 0.750em; /* 12px */
	line-height: 120%;
	font-weight: bold;
	font-style: normal;
	color: #656565;
}

#maincolumn .list h4 a:link, #maincolumn .list h4 a:visited {
	text-decoration: none;
	color: #aa4d22;
}

#maincolumn .list h4 a:hover, #maincolumn .list h4 a:active, #maincolumn .list h4 a:focus {
	text-decoration: none;
	color: #515151;
}

#maincolumn .article hr {
	height: 1px;
	background-color: #9b4110;
	border: none;
	margin: 10px 0 20px;
	float: left;
	width: 470px;
}

#maincolumn .article p {
	margin-bottom: 20px;
	color: #606060;
	font-size: 0.875em; /* 14px */
	line-height: 140%;
}

#maincolumn .article p.update {
	margin: 10px 0;
	padding: 4px 0 10px;
	color: #9b4110;
	font-size: 0.875em; /* 14px */
	line-height: 140%;
	font-weight: normal;
	border-top: 1px solid #9b4110;
	border-bottom: 1px solid #9b4110;
}

#maincolumn .article p.update a {
	text-decoration: underline;
	color: #9b4110;
}

#maincolumn .article p.update a:hover, #maincolumn .article p.update a:focus  {
	text-decoration: none;
}

#maincolumn .article p.kop {
	margin-bottom: 10px;
	padding-top: 0;
	color: #606060;
	font-size: 0.875em; /* 14px */
	line-height: 140%;
	font-weight: bold;
}

#maincolumn .article p.color {
	margin: 20px 0 10px;
	color: #fff;
	background-color: #be5a15;
	font-weight: bold;
	font-size: 0.750em; /* 12px */
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	padding: 10px 10px 20px;
	text-align: center;
	line-height: 160%;
}

#maincolumn .article p a {
	text-decoration: underline;
	color: #606060;
}

#maincolumn .article p a:hover, #maincolumn .article p a:focus  {
	text-decoration: none;
}

#maincolumn .article p.color a {
	text-decoration: none;
	color: #fff;
}

#maincolumn .article p.color a:hover, #maincolumn .article p.color a:focus  {
	text-decoration: underline;
}

#maincolumn .article p.small {
	margin-bottom: 20px;
	color: #606060;
	font-size: 0.688em; /* 11px */
	line-height: 140%;
}

#maincolumn .article p.image {
	margin-bottom: 20px;
	margin-top: -14px;
	color: #606060;
	font-size: 0.688em; /* 11px */
	line-height: 140%;
	text-align: center;
	font-style: italic;
}

#maincolumn .article p img {
	margin-top: 6px;
}

#maincolumn .article p iframe {
	margin: 10px 0;
}

#maincolumn .article p a:link img, #maincolumn .article p a:visited img {
	text-decoration: none;
	border: 1px solid #828282;
}

#maincolumn .article p a:hover img, #maincolumn .article p a:active img, #maincolumn .article p a:focus img {
	text-decoration: none;
	border: 1px solid #ff3600;
}

#maincolumn p#back {
	margin: 6px 20px 10px 10px;
	padding: 20px 0 0 0;
	font-size: 0.750em;
	font-weight: bold;
	border-top: 1px solid #efefef;
}

#maincolumn p#back a:link, #maincolumn p#back a:visited {
	text-decoration: none;
	color: #aa4d22;
}

#maincolumn p#back a:hover, #maincolumn p#back a:active, #maincolumn p#back a:focus {
	text-decoration: none;
	color: #515151;
}

#maincolumn p#to_top img {
	margin: 20px 0 10px 10px;
	padding-top: 10px;
	border-top: 1px solid #9b4110;
}

#maincolumn ul {
	list-style-position: outside;
	list-style-type: circle;
	margin: 0 20px 20px 14px;
}

#maincolumn ul li {
	color: #606060;
	font-size: 0.875em; /* 14px */
	line-height: 140%;
	margin-bottom: 10px;
}

#maincolumn .article ul li a {
	text-decoration: underline;
	color: #606060;
}

#maincolumn .article ul li a:hover, #maincolumn .article ul li a:focus  {
	text-decoration: none;
}

#maincolumn ul.opsomming {
	list-style-position: outside;
	list-style-type: circle;
	margin: 0 20px 20px 14px;
	padding-left: 20px;
}

#maincolumn ul.opsomming li {
	color: #606060;
	font-size: 0.875em; /* 14px */
	line-height: 140%;
	margin-bottom: 0;
}

table {
	margin: 0 0 20px 0;
	width: 470px;
	color: #5a5a5a;
	background-color: #fefff3;
}

tr {
	width: 100%;
}

th {
	text-align: left;
	font-size: 0.750em;
	font-weight: bold;
	padding: 0.2em;
	border: 1px solid #efefef;
}

td {
	padding: 0.2em;
	border: 1px solid #efefef;
	font-size: 0.750em; /* 12px */
	width: auto;
}

#vereniging td, #competitie td {width: 150px; /* 470 - (4x1) : 3 = 155.33 */}

td a:link, td a:visited {
	text-decoration: underline;
	background-color: transparent;
	color: #5a5a5a;
}

td a:hover, td a:active, td a:focus {
	text-decoration: none;
}

/* @end */

/* @group rightcolumn */

#content #rightcolumn {
	float: left;
	width: 220px;
	margin-top: -16px;
}

#rightcolumn .tip {
	margin: 0 20px 20px 0;
	padding: 6px 16px 20px;
	background: #f1ffee;
	text-align: center;
	color: #5e5e5e;
	border: 1px solid #efefef;
	width: 168px;
}

#rightcolumn .tip h3 {
	font-size: 0.875em; /* 14px */
	line-height: 120%;
	margin-bottom: 10px;
}

#rightcolumn .tip p {
	font-size: 0.625em; /* 10px */
	line-height: 140%;
	font-weight: bold;
	margin-bottom: 10px;
}

#rightcolumn .tip p img {
	margin: 10px 0 10px 0;
}

#rightcolumn .article a:link img, #rightcolumn .article a:visited img {
	text-decoration: none;
	border: 1px solid #828282;
}

#rightcolumn .article a:hover img, #rightcolumn .article a:active img, #rightcolumn .article a:focus img {
	text-decoration: none;
	border: 1px solid #ff3600;
}

#rightcolumn h4 {
	font-size: 0.875em; /* 14px */
	font-weight: bold;
	font-style: normal;
	margin: 20px 20px 10px 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #dfe0d6;
	color: #666;
}

#rightcolumn .article {
	margin: 0 20px 10px 0;
}

#rightcolumn .article h3 {
	font-size: 0.750em;
	line-height: 120%;	
	color: #6f6f6f;
	margin-bottom: 4px;
}

#rightcolumn .article h3 a {
	text-decoration: none;
	color: #fff;	
	background-color: #51ac2b;
	padding: 2px 4px 4px 4px;
	display: block; /* volle breedte van kolom! */
}

#rightcolumn .article h3 a:hover, #rightcolumn .article h3 a:focus {
	text-decoration: none;
	color: #fff;	
	background-color: #515151;
}

#rightcolumn .article h3 a.active {
	color: #fff;	
	background-color: #515151;
}

#rightcolumn .article p  {
	font-size: 0.750em;
	line-height: 140%;
	color: #606060;
	margin-bottom: 10px;
}

#rightcolumn .article p.more  {
	text-align: right;
	padding-right: 10px;
	font-size: 0.625em; /* 10px */
}

#rightcolumn ol.onderwerpen {
	margin: 0 20px 10px 0;
}

#rightcolumn ol.onderwerpen li {
	font-size: 0.750em;
	line-height: 120%;	
	color: #6f6f6f;
	margin-bottom: 4px;
	font-weight:bold;
}

#rightcolumn ol.onderwerpen li a {
	text-decoration: none;
	color: #fff;	
	background-color: #51ac2b;
	padding: 2px 4px 4px 4px;
	display: block;
	white-space: wrap;  /* om tekst te dwingen op nieuwe regel te beginnen ... !? */}

#rightcolumn ol.onderwerpen li a:hover, #rightcolumn ol.onderwerpen li a:focus {
	text-decoration: none;
	color: #fff;	
	background-color: #515151;
}

#rightcolumn ol.onderwerpen li.active a {
	color: #fff;	
	background-color: #515151;
	cursor: default;
}

#rightcolumn ul.file_download_list {
	padding: 0 20px 0 0;
}

#rightcolumn ul.file_download_list li {
	font-size: 0.750em;
	line-height: 120%;	
	color: #6f6f6f;
	margin-bottom: 8px;
	font-weight: bold;
}

#rightcolumn ul.file_download_list li a:link, #rightcolumn ul.file_download_list li a:visited {
	text-decoration: none;
	color: #fff;	
	background-color: #aeaeae;
	padding: 2px 0 4px 4px;
	display: block;
}

#rightcolumn ul.file_download_list li a:hover, #rightcolumn ul.file_download_list li a:active, #rightcolumn ul.file_download_list li a:focus {
	text-decoration: none;
	background-color: #515151;
}

/* Does this work in IE? */
#rightcolumn iframe, #rightcolumn iframe:visited {
	text-decoration: none;
	border: 1px solid #828282;
}

#rightcolumn iframe:hover, #rightcolumn iframe:active, #rightcolumn iframe:focus {
	text-decoration: none;
	border: 1px solid #ff3600;
}

#rightcolumn dt {
	font-size: 0.750em;
	line-height: 120%;
	margin-right: 20px;
	font-weight: bold;
}

#rightcolumn dd {
	font-size: 0.750em;
	line-height: 140%;
	color: #606060;
	margin: 0 20px 10px 0;
}

#rightcolumn dt a {
	text-decoration: none;
	color: #fff;	
	background-color: #94c9d0;
	padding: 2px 4px 4px 4px;
	display: block;
}

#rightcolumn dt a:hover, #rightcolumn dt a:focus {
	text-decoration: none;
	color: #fff;	
	background-color: #515151;
}

/* @end */

#footer	{
	clear: both;
	float: left;
	padding-bottom: 60px;
	height: auto;
	background: #000 url(design/footer.jpg) no-repeat left bottom;
	width: 960px; /* otherwise float children doesn't work in IE6! */
}

#footer #top {
	width:  960px;
	background-color: #fbfbfb;
	padding-bottom: 20px;
}

#footer #top p#to_top img {
	margin-left: 240px; /* to line with #footer #center! */
	padding-top: 20px;
	border-top: 1px solid #9b4110;
}

#footer #left	{
	float: left;
	width: 230px;
	margin-top: 0;
}

#footer #center	{
	float: left;
	width: 500px;
	margin-top: 0;
}

#footer #right	{
	float: right;
	width: 230px;
	margin-top: 0;
}

#footer #left .article {padding: 20px 10px 0 20px;}
#footer #center .article {padding: 20px 20px 0 10px;}
#footer #right .article {padding: 20px 20px 0 0;}

#footer .article h3 {
	font-size: 0.875em;
	color: #bcbcbc;
}

#footer .article p {
	font-size: 0.750em; /* 12px */
	color: #bcbcbc;
	margin-bottom: 10px;
}

#footer a:link, #footer a:visited {
	text-decoration: none;
	background-color: transparent;
	color: #c05727;
}

#footer a:hover, #footer a:active, #footer a:focus {
	text-decoration: none;
	color: #fff;
}

/* @group form */
/* http://www.alistapart.com/articles/prettyaccessibleforms */
/* zemContactForm */

form.zemContactForm {
	clear: left;	
	color: #515151;
	margin: 0 0 20px 10px;
	padding: 20px 0 40px 20px;
	background-color: #fff;
	width: 450px;
	border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
}

/* waar komt deze div vandaan!? */
form.zemContactForm div {
	margin: 0;
	padding: 0;
}

form.zemContactForm ol {
    margin: 0;
    padding: 0;
}

form.zemContactForm li {
    list-style: none;
    padding: 5px 0;
    margin: 0;
    font-size: 0.875em; /* 14px */
	line-height: 100%; 
}

form.zemContactForm li em {
    font-size: 1.125em; /* 18px */
	color: #e8391e;
}

/* to position label< >input visual ok!  */
form.zemContactForm li label {
    margin-bottom: -8px;
    font-family: "Lucida Grande", Lucida, "Lucida Sans Unicode", Verdana, sans-serif; /* !? */
	font-size: 0.875em; /* 14px */
    
}

form.zemContactForm label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
}

form.zemContactForm input {
    font-size: 0.875em; /* 14px */
    width: 300px;
    padding: 2px;
    border: 1px solid #999;
	color: #464646;
	
}

form.zemContactForm textarea {
	margin: 0;
	padding: 2px;
	width: 400px;
	font-family: "Lucida Grande", Lucida, "Lucida Sans Unicode", Verdana, sans-serif; /* !? */
	font-size: 0.875em; /* 14px */
	border: 1px solid #999;
	cursor: auto;
	color: #464646;
}

form.zemContactForm button.zemSubmit {
	margin: 30px 0 0;
	padding: 0;
	font-size: 86%; /* 14px */
	width: auto;
	border: 0;
	background: transparent;
	cursor: pointer;
}

form.zemContactForm button.zemSubmit img {
	border: 0;
}

/* http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/ */
/* a lot of code (css and js!) only for IE6 ... and it seems to do no good to accessibility ... otherwise just use 'input[type="text"]:focus{...}' ... zie onder!  */

/*
#status {  
	width: ;  
	padding: ;  
	outline: none;  
	height: ;  
}  

.focusField {  
	border: solid 2px #73A6FF;  
	background: #EFF5FF;  
	color: #000;  
}  

.idleField {  
	background: #EEE;  
	color: #6F6F6F;  
	border: solid 2px #DFDFDF;  
} 
*/

/* Ok ... so not for IE6! */


input[type="text"] {
	background-color: #fff;
	}

input[type="text"]:focus {
	background-color: #f4f4f4;
	}

textarea {
	background-color: #fff;
	}

textarea:focus {
	background-color: #f4f4f4;
	}

/* zemError */

form ul.zemError {
	margin: 0;
	padding: 0;
	list-style: none;
}

form ul.zemError li {
	margin-left: -14px; /* overerving margin-left 14 px van #maincolumn ul .. !? */
	padding: 0;	
	font-size: 0.875em; /* 14px */
	line-height: 160%; 
	color: #515151;
	background-color: transparent;
	font-weight: bold;
}

/* zemThanks */

.zemThanks {
	margin: 0;
	padding: 0;
}

.zemThanks p {
	margin: 0;
	padding: 40px 20px 0 10px; /* only padding-top on p gives whitespace top window! */
	font-size: 0.875em; /* 14px */
	font-weight: bold;
	line-height: 160%; 
	color: #515151;
	background-color: transparent;
}

/* @end */

/* @group .clearfix */

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* @end */