/*------------------------------------------------------------------------------------
 * KRN Montage BV Website Screen Presentation Layer
 * Author:	{naam}
 * Created:	{datum} 
 * Notes:	{notities, bugs, etc.}
-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                		BODY	                                     */
/*                                                                                   */
/* ################################################################################# */



html, body {
	height: 			100%;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

body {
	background: 		#FFF url(../images/bg_all.jpg) top left repeat-x;
	font-family: 		Arial, "Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	font-size: 			62.5%; /* 62.5%, standaard font grootte is nu 10px, dus 1.2em = 12px */
	font-weight:		normal;
	color: 				#000;
	line-height: 		140%; /* standaard: 140% */
	margin: 			0px;
	padding: 			0px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                VLAKVERDELING                                      */
/*                                                                                   */
/* ################################################################################# */

#wrapper {
	margin:				0 auto;
	clear:				both;
	width:				960px;
}

#header {
	background:			#016446 url(../images/bg_groen.jpg) top left repeat-x;
	clear:				both;
	height:				130px;
	margin:				0 auto;
}

#content {
	background:			#FFF;
	clear:				both;
	margin:				0 auto;
	padding:			25px 0 0 0;
}

#footer {
	background:			#00FF00;
	clear:				both;
	margin:				0 auto;
}

#wrapper {
	background-color:	#FFF;
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -40px auto; /* the bottom margin is the negative value of the footer's height */
	width:				900px;
}

#footer, #footerclearer {
	background:			#016446 url(../images/bg_footer.jpg) top left repeat-x;
	height: 			40px; /* .footerclearer must be the same height as .footer */
	margin:				0 auto;
	text-align:			center;
	width:				100%;
}




/* ################################################################################# */
/*                                                                                   */
/*                                   DEFAULT                                         */
/*                                                                                   */
/* ################################################################################# */

/*------------------------------------------------------------------------------------
 * 
 * Gebruik font-size alleen bij html tags en niet bij classes en id's,
 * dit mag slechts bij uitzondering.
 *
 * Deze eigenschap zal altijd blijven ondanks verdere classes
 * 		!important
 * IE 6 and below
 *     	* html {}
 * IE 7 and below
 *     	*:first-child+html {} * html {}
 * IE 7 only
 *     	*:first-child+html {}
 * IE 7 and modern browsers only
 *     	html>body {}
 * Modern browsers only (not IE 7)
 *     	html>/**/body {}
 /*
 * Recent Opera versions 9 and below
 *     html:first-child {}
 *
-------------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

button, input, option, select, textarea {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	color:				#333333;
	letter-spacing: 	0;
	padding: 			2px;
}

a {
	color: 				#01573D;
	text-decoration:	underline;
}

a:active {
	color:				#01573D;
	text-decoration:	underline;
}

a:hover {
	color:				#000;
	text-decoration:	underline;
}

a:visited {
	color:				#01573D;
	text-decoration:	underline;
}


/* ################################################################################# */
/*                                                                                   */
/*                             CUSTOM STYLES                                         */
/*                                                                                   */
/* ################################################################################# */

#footercontent {
	color:				#023927;
	text-align:			right;
	padding-top:		15px;
	width:				900px;
}

#footercontent a {
	color:				#023927;
	text-decoration:	none;
}

#footercontent a:hover {
	color:				#FFF;
	text-decoration:	none;
}

#footercontent ul li {
	display:			inline;
	font-size:			1.15em;	
}

/* ################################################################################# */
/*                                                                                   */
/*                             HEADER                                                */
/*                                                                                   */
/* ################################################################################# */


#header img.logo {
	margin-top:			13px;
}

#header #logo {
	float:				left;
	height:				130px;
	width:				165px;
}

.menu .slogan {
	height:				93px;
	text-align:			right;
	margin-right:		68px;
}

.menu .slogan img {
	margin-top:			40px;
}

#navi {
	height:				26px;
	text-align:			right;
	text-transform:		uppercase;
	padding-top:		11px;
}

#navi ul  {
}

#navi ul li {
	display:			inline;
	padding:			0 0 11px 0;
	margin-left:		-3px;
}

#navi ul li a {
	color:				#FFF;
	font-size:			1.2em;
	font-weight:		bold;
	text-decoration:	none;
	padding:			11px 13px 11px 13px;
}

#navi ul li a:hover, #navi ul li.active a {
	color:				#01573D;
	background-color:	#FFF;
}

/* ################################################################################# */
/*                                                                                   */
/*                            TOPCONTENT		                                     */
/*                                                                                   */
/* ################################################################################# */

img.devider, #topinfo h2, #topinfo p, #box-breed p  {
	margin-bottom:		10px;
}

#topfoto {
	margin-right:		15px;
	margin-bottom:		20px;
	float:				left;
}

#topfoto_home {
	margin-right:		15px;
	margin-bottom:		20px;
	float:				left;
}

#topinfo_home {
	background:			#01573D url(../images/bg_topinfo.jpg) bottom left repeat-x;
	float:				left;
	height:				184px;
	padding:			13px;
	margin-bottom:		25px;
	width:				209px;
}

#topinfo {
	background:			#01573D url(../images/bg_topinfo.jpg) bottom left repeat-x;
	float:				left;
	height:				374px;
	padding:			13px;
	margin-bottom:		25px;
	width:				209px;
}

#topinfo table a, #topinfo_home table a {
	color:				#FFF;
	text-decoration:	underline;
}

#topinfo p, #topinfo td, #topinfo_home p, #topinfo_home td {
	color:				#FFF;
	font-size:			1.15em;
	font-style:			italic;
	line-height:		1.45em;
}

#topinfo h2, #topinfo_home h2 {
	color:				#FFF;
	font-size:			1.4em;
	margin-bottom:		8px;
}

#topinfo h2.overig, #topinfo_homeh2.overig {
	background:			url(../images/arrow.jpg) left top no-repeat;
	color:				#FFF;
	font-size:			1.4em;
	font-style:			italic;
	padding-left:		15px;
}

img.foto {
	border:				1px solid #FFF;
	padding:			2px;
	margin:				0 5px 5px 0;
}

/* ################################################################################# */
/*                                                                                   */
/*                            CONTENT		                                         */
/*                                                                                   */
/* ################################################################################# */


#box-content li {
	background:			url(../images/arrow_groen.jpg) top left no-repeat;
	font-size:			1.15em;
	line-height:		1.6em;
	padding-left:		15px;
}

#box-smal ul.leesmeer li, #box-smal-home ul.leesmeer li {
	color:				#FFF;
	background:			url(../images/arrow.png) top left no-repeat;
	font-size:			1.15em;
	line-height:		1.6em;
	padding-left:		15px;
}

#box-smal ul.meer li, #box-smal-home ul.meer li {
	color:				#01573D;
	background:			url(../images/arrow_groen.jpg) top left no-repeat;
	font-size:			1.15em;
	line-height:		1.6em;
	padding-left:		15px;
}

#box-content ul {
	margin-bottom:		10px;
	margin-left:		7px;
}

#box-content ul li ul {
	margin-left:		12px;
	margin-bottom:		0px;
}

#box-content {
	padding:			5px 25px;
}

#box-content {
	padding:			0 25px;
}

#box-breed {
	float:				left;
	width:				600px;
	margin-right:		15px;
}

#box-breed-home, #box-breed-contact {
	float:				left;
	width:				600px;
	margin-right:		15px;
}


#box-smal {
	float:				left;
	width:				230px;
}

#box-smal-home {
	float:				left;
	width:				230px;
}

#box-breed h1, #box-breed-home h1, #box-smal h1, #box-smal-home h1, #box-breed-contact h1 {
	color:				#01573D;
	font-size:			1.6em;
	line-height:		1.45em;
	margin-bottom:		10px;
}

#box-breed h2 {
	color:				#01573D;
	font-size:			1.2em;
	line-height:		1.45em;
	margin-bottom:		5px;
}

#box-breed h3, #box-breed-home h3, #box-smal h3, #box-smal-home h3, #box-breed-contact h3 {
	color:				#01573D;
	font-size:			1.2em;
	line-height:		1.45em;
	margin-top:			15px;
}

#box-breed p, #box-kort p {
	font-size:			1.15em;
	line-height:		1.7em;
	margin-bottom:		10px;
}

#box-text {
	background:			#FFF url(../images/bg_breed.jpg) top left no-repeat;
	padding:			25px;
}

#box-text-home {
	background:			#FFF url(../images/bg_breed.jpg) top left no-repeat;
	margin-top:			195px;
	padding:			25px;
	font-size:			1.15em;
	line-height:		1.7em;
}

#box-kort {
	background:			url(../images/bg_smal.jpg) top left no-repeat;
	float:				left;
	padding:			25px;
	width:				185px;
}

#box-smal img.groot, #box-smal-home img.groot {
	border:				1px solid #01573D;
	padding:			2px;
	margin:				0 auto 15px auto;
}

#box-smal img.groot-logo, #box-smal-home img.groot-logo {
	border:				none;
	padding:			2px;
	margin:				0 auto 15px auto;
}

/*****************************************************************************************/

#box-content ul.overzicht li {
	background:none;
	float:left;
	width:550px;
	margin:0 0 15px 0;
	padding:0;
	text-align:left;
	height:	100px;
}

ul.overzicht li a {
	display:block;
	padding:0;
	height:100%;
	color:#FFF;
	text-decoration:none;
}

ul.overzicht li a {
	color:	#000;
	background-color:#FFF;/*url(../images/overzicht.jpg) repeat 0 0;*/
}

ul.overzicht li a:hover, ul.overzicht li a:focus, ul.overzicht li a:active, ul.overzicht li a.active {
	background:	url(../images/bg_proj.jpg) top left no-repeat;
	/*background-position:-115px 0;*/
}

.overfoto {
	float: left;
	margin-right: 25px;
	width:	140px;
}

.overfoto img {
	background-color:#FFF;
	border:	1px solid #01573D;
	height:	91px;
	padding: 3px;
	width:	135px;
}

.overtekst {
	float: left;
	padding: 5px 10px 0 0;
	width:	375px;
}

.overtekst h2 {
	color: #01573D;
	font-size:	1.0em;
}

#box-breed .overtekst p {
	font-size:	1.1em;
	line-height: 1.3em;
}

#box-breed-home .overtekst p {
	font-size:	1.1em;
	line-height: 1.3em;
}

#topinfo ul.leesmeer li a {
	color:	#FFF;
	font-size: 1.1em;
	text-decoration: underline;
	font-weight: normal;
}

#box-breed-home table, #box-breed table, #box-breed-contact table {
	font-size:		1.2em;
}

#box-text-home table td, #box-breed-contact table td {
	font-size:		0.9em;
}

td input#naam, td input#adres, td input#email, td input#telefoon, td input#wp, td input#pc, td textarea#vraag   {
	color:	#333;
	border:	1px solid #999;
	margin-top: 5px;
}

td input#naam, td input#adres, td input#email, td input#telefoon, td textarea#vraag {
	width:	280px;
}

td input#wp {
	width:	189px;
}

td input#pc {
	margin-right: 3px;
}

td textarea#vraag {
}

#box-text ul.terug {
	margin-left:	400px;
	margin-bottom:	-20px
}