/*
 * CSS for KVG
 * Author: Jeroen Dijkstra | Crowd Surfing 2010
 */

/* GENERAL CSS RESET */
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { line-height: 1; color: black; background: white; }
/* END GENERAL CSS RESET */

/* GENERAL STYLES */
html
{
	font-family: Arial;
	font-size: 13px;
}

html, body, div#Container
{
	width: 100%;
}

body
{
	background-color: #8ED7F7;
	background-image: url('/Includes/Themes/KVG/Images/BlauwVerloop.jpg');
	background-repeat: repeat-x;
	background-position: bottom center;
	color: #FFFFFF;
	margin: 0;
	text-align: center;
}

div#Container
{
	overflow: hidden;
}

div#ContentContainer
{
	background-color: #0060B3;
	background-image: url('/Includes/Themes/KVG/Images/AchtergrondMid.jpg');
	background-repeat: no-repeat;
	background-position: left bottom;
	color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 980px;
}

h1
{
	font-size: 20px;
}

h2
{
	font-size: 16px;
}

h3
{
	font-size: 14px;
}

a
{
	color: #FFFFFF;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

p
{
	color: #FFFFFF;
	line-height: 1.5;
	margin-bottom: 10px;
	padding: 10px;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italic;
}

li,
ul#NavigationList li
{
	list-style-type: none;
}

div#Content ol li
{
	line-height: 1.3;
	list-style-type: square;
}

div#Content ul li
{
	line-height: 1.3;
	list-style-type: disc;
}

/* END GENERAL STYLES */

/* HEADER */
div#Header
{
	background-image: url('/Includes/Themes/KVG/Images/KopBalk.jpg');
	background-repeat: repeat-y;
	height: 246px;
	margin: 25px auto 0 auto;
	text-align: left;
	width: 980px;
}

	div#Header a#HomeAnchor
	{
		left: 35px;
		position: relative;
		top: 40px;
	}

	div#Header p.Address
	{
		color: #808080;
		font-size: 18px;
		left: 30px;
		position: relative;
		top: 30px;
	}

	div#Header div.ContactDetails
	{
		color: #F48120;
		display: inline; /* IE6 Double margin fix */
		float: right;
		font-size: 17px;
		margin: -80px 55px 0 0;
		line-height: 1.1; /* Fixes @-sign cut off in IE */
		width: 150px;
	}

	div#Header div.ContactDetails a
	{
		color: #F48120;

	}

	div#Header div.ContactDetails a:hover
	{
		text-decoration: underline;
	}

	div#Header p.OpeningHours /* Avoid floating for IE here */
	{
		color: #0094D9;
		font-size: 15px;
		margin-top: 40px;
		text-align: right;
		width: 910px;
	}

/* END HEADER */

/* CONTENT */
div#ContentContainer
{
	min-height: 475px;
	height: auto !important;
	height: 475px;
	overflow: hidden;
}

div#Content
{
	display: inline; /* IE6 Double margin fix */
	float: left;
	margin-left: 40px;
	margin-top: 20px;
	padding-bottom: 25px;
	line-height: 25px;
	width: 515px;
}

div#ContentContainer > div#Content
{
	width: 515px;
}

div#Content h1
{
	color: #F48120;
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
}

div#Content h2
{
	font-size: 16px;
	font-weight: bold;
}

div#Content p
{
	padding-left: 0;
	padding-top: 0;
}

div#Content ul
{
	margin-left: 25px;
}

	div#Content ul li
	{
		line-height: 1.4;
	}

div#Content div.PhotoContainer
{
	text-align: center;
	width: 100%; /* IE needs this width */
}

	div#Content div.PhotoContainer img
	{
		border: 1px solid #FFFFFF;
		margin-bottom: 5px;
	}

    /*
	div#Content div.PhotoContainer img#MediumImageContainer
	{
		min-height: 279px;
		min-width: 469px;
	}
    */

	div#Content div.PhotoContainer h2
	{
		font-size: 14px;
		margin-bottom: 10px;
	}

	div#Content div.PhotoContainer ul
	{
		margin: 0;
		padding: 0;
	}

		div#Content div.PhotoContainer ul li
		{
			list-style-type: none;
		}

div#Content small a
{
	color: #FFFFFF !important;
}

div#Content a
{
	text-decoration: underline;
}

div#Content a:hover
{
	text-decoration: none;
}

/*
div#Content a.ReadMore
{
	background-image: url('/Includes/Themes/KVG/Images/LeesVerderKnop.png');
	background-position: center right;
	background-repeat: no-repeat;
	display: block;
	float: right;
	height: 29px;
	line-height: 27px;
	padding-right: 40px;
}

div#Content a.ReadMore:active
{
	left: 1px;
	position: relative;
	top: 1px;
}
*/

/* END CONTENT */

/* CONTENT TABS */
div#Content div#TabsContainer
{
	margin-bottom:		10px;
}

div#Content div#TabsContainer a
{
	border:				1px solid #FFFFFF;
	border-bottom:		0;
	font-weight:		bold;
	padding:			4px 9px;
	text-decoration:	underline;
	z-index:			10;
}

div#Content div#TabsContainer a:hover
{
	text-decoration:	none;
}

div#Content div#TabsContainer a.Active
{
	background-color:	#F38120;
}

div#Content div#TabsContainer div#TabsUnderline
{
	border-top:			1px solid #FFFFFF;
	margin-left:		-15px;
	margin-top:			-1px;
	z-index:			0;
}
/* END CONTENT TABS */

/* FORMS */
form
{
	width: 423px;
}

div.Row label
{
	display: inline-block;
	height: 30px;
	vertical-align: top;
	width: 120px;
}

div.Row input,
div.Row textarea
{
	border: 1px solid #FFFFFF; /* Border needed, IE sets the border outside the box */
	width: 295px;
}

div.Row textarea
{
	height: 110px;
}

div.Row input.Button
{
	background-color: transparent;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	float: right;
	font-weight: bold;
	margin-top: 10px;
	padding: 0 5px;
	width: auto;
}

div.Row input.Button:active
{
	left: 1px;
	position: relative;
	top: 1px;
}

/* END FORMS */

/* NAVIGATION */
div#Navigation
{
	border-right: 1px solid #FFFFFF;
	display: inline; /* IE6 Double margin fix */
	float: left;
	margin-left: 30px;
	margin-top: 65px;
	overflow: hidden;
	width: 375px;
}

	div#Navigation ul
	{
		float: left;
		overflow: hidden;
		width: 185px;
	}

	div#Navigation ul#NavigationListRight
	{
		margin-left: 65px;
	}

	div#Navigation ul li
	{
		margin-bottom: 60px;
	}

		div#Navigation ul li a
		{
			background-image: url('/Includes/Themes/KVG/Images/KnopjeOranje.png');
			background-position: left center;
			background-repeat: no-repeat;
			padding-left: 16px;
			font-weight: bold;
		}

		div#Navigation ul li.Last
		{
			margin-bottom: 5px;
		}

/* Sub items */
div#Navigation ul li ul
{
	background-color: #F48120;
	display: none;
	margin-left: -109px;
	margin-top: 16px;
	position: absolute;
	width: 156px;

	-moz-box-shadow: 5px 5px 10px #005EA8;
	-webkit-box-shadow: 5px 5px 10px #005EA8;
}

div#Navigation ul#NavigationListRight li ul
{
	margin-left: -130px;
}

div#Navigation ul li ul:last-child, /* Hurray IE's bad support */
div#Navigation ul#NavigationListRight li ul:last-child
{
	margin-left: 7px;
	margin-top: 2px;
}


div#Navigation ul li:hover ul
{
	display: block;
}

	div#Navigation ul li ul li
	{
		margin: 20px 0;
	}

		div#Navigation ul li ul li a
		{
			background-image: none;
		}

/* END NAVIGATION */

/* FOOTER */
div#Footer
{
	background-color: #FFFFFF;
	background-image: url('/Includes/Themes/KVG/Images/BalkOnderPagina.jpg');
	background-repeat: no-repeat;
	background-position: bottom center;
	color: #F48120;
	margin: 0 auto;
	min-height: 257px;
	width: 980px;
}

	div#Footer p
	{
		color: #0094D9;
		font-size: 16px;
	}

	div#Footer div#PhotoStrip
	{
		float: left;
		padding: 30px 0 0 50px;
		text-align: left;
		width: 708px;
	}

		div#Footer div#PhotoStrip div.Image
		{
			height: 176px;
			text-align: right;
			width: 425px;
		}

			div#Footer div#PhotoStrip div.Image img
			{
				border: none;

				-moz-box-shadow: none;
				-webkit-box-shadow: none;
			}

		div#Footer div#PhotoStrip div.Titles
		{
			overflow: hidden;
		}

		div#Footer div#PhotoStrip div.Titles p
		{
			color: #F48120;
			float: left;
			font-size: 15px;
			font-weight: bold;
			margin-right: 17px;
			padding: 10px 0;
			text-align: center;
			width: 158px;
		}

			div#Footer div#PhotoStrip div.Titles p span
			{
				display: block;
				font-weight: normal;
				margin-top: -5px;
			}

		div#Footer div#PhotoStrip img
		{
			border: 1px solid #FFFFFF;
			margin-right: 15px;

			-moz-box-shadow: 4px 4px 5px #7C7C7C;
			-webkit-box-shadow: 4px 4px 5px #7C7C7C;
		}


	div#Footer div#Buttons
	{
		float: left;
		font-weight: bold;
		margin-top: 40px;
	}

	div#Footer div#Buttons a
	{
		background-repeat: no-repeat;
		display: block;
		height: 41px;
		line-height: 41px;
		width: 171px;

		-moz-box-shadow: 4px 4px 5px #7C7C7C;
		-webkit-box-shadow: 4px 4px 5px #7C7C7C;
	}
	
	div#Footer div#Buttons div.fb-like-box
	{
		background-repeat: no-repeat;
		display: block;
		line-height: 41px;
		width: 171px;
		margin-top: 15px;
		border: 1px solid #7C7C7C;

		-moz-box-shadow: 4px 4px 5px #7C7C7C;
		-webkit-box-shadow: 4px 4px 5px #7C7C7C;
	}

	div#Footer div#Buttons a.Contact
	{
		background-image: url('/Includes/Themes/KVG/Images/VraagBalk.jpg');
		margin-bottom: 15px;
	}

	div#Footer div#Buttons a.Order
	{
		background-image: url('/Includes/Themes/KVG/Images/BestellingBalk.jpg');
	}

	div#Footer div#Buttons a:active
	{
		left: 1px;
		position: relative;
		top: 1px;

		-moz-box-shadow: 2px 2px 5px #7C7C7C;
		-webkit-box-shadow: 2px 2px 5px #7C7C7C;
	}

	div#Footer p.FooterText
	{
		clear: left;
	}

/* END FOOTER */

span.Error
{
	color: red;
}


/* FORM HINTS */
	form div.Row
	{
  		position: 			relative;
  		width:				100%;
	}

		form div.ErrorMessage
		{
			color: 				#FF0000;
		}

		form div.Row input.ErrorVeld
	    {
	    	border: 			2px solid #FF0000;
			height: 			14px; /* To compensate the extra 2 border px */

			-moz-box-shadow: 	0px 0px 4px #FF0000;
			-webkit-box-shadow:	0px 0px 4px #FF0000;
			box-shadow: 		0px 0px 4px #FF0000;
		}

		form div.Row span.Hint
		{
			background-color: 	#FFFFFF;
			border: 			1px solid #B3B3B3;
			color:				#000;
			display: 			none;
			font-family: 		Verdana, Arial, Helvetica, sans-serif;
			font-size: 			12px;
			padding: 			3px 5px;
			position: 			absolute;
			right: 				-85px;
			top: 				-5px;
			width: 				125px;

			-moz-box-shadow: 	0px 0px 4px #000000;
			-webkit-box-shadow:	0px 0px 4px #000000;
			box-shadow: 		0px 0px 4px #000000;
		}

			form div.Row span.Hint span.Pointer
			{
				background: 		url('/Includes/Themes/KVG/Images/Icons/pointer.png') no-repeat;
				display: 			block;
				height: 			9px;
				left: 				-8px;
				position: 			absolute;
				top: 				5px;
				width: 				9px;
			}


/* END FORM HINTS */

/* NOTICES */
div.Notice
{
	background-color:	#FFFFCC;
	border:				1px dotted #CC9933;
	color: 				#CC9933;
	font-weight:		bold;
	line-height:		2;
	margin-bottom:		10px;
	padding: 			10px;

	-moz-box-shadow:	0 0 4px #CC9933;
	-webkit-box-shadow:	0 0 4px #CC9933;
	box-shadow:			0 0 4px #CC9933;
}

	div.Notice.Error
	{
		background-color:	#FFD4D4;
		border:				1px dotted #FF0000;
		color: 				red;
		font-weight:		bold;

		-moz-box-shadow:	0 0 4px #FF0000;
		-webkit-box-shadow:	0 0 4px #FF0000;
		box-shadow:			0 0 4px #FF0000;
	}

	div.Notice.Message
	{
		background-color:	#E2F1F8;
		border:				1px dotted #0398CA;
		color: 				#0398CA;
		font-weight:		bold;

		-moz-box-shadow:	0 0 4px #0398CA;
		-webkit-box-shadow:	0 0 4px #0398CA;
		box-shadow:			0 0 4px #0398CA;
	}

	div.Notice.Success
	{
		background-color:	#AEA;
		border:				1px dotted #008000;
		color: 				#008000;
		font-weight:		bold;

		-moz-box-shadow:	0 0 4px #008000;
		-webkit-box-shadow:	0 0 4px #008000;
		box-shadow:			0 0 4px #008000;
	}

	div.Notice a
	{
		border: 			1px solid black;
		border-color:		#CC9933;
		color: 				#CC9933;
		display:			inline-block;
		float: 				right;
		text-align:			center;
		text-decoration:	none;
		width:				24px;
	}

		div.Notice a:hover,
		div.Notice.Error a:hover,
		div.Notice.Message a:hover,
		div.Notice.Success a:hover
		{
			background-color: 	#000000;
			text-decoration: 	underline;

			opacity: 			0.3;
			filter:				progid:DXImageTransform.Microsoft.Alpha(opacity=30);
		}

		div.Notice.Error a
		{
			border-color: 		#0398CA;
			color: 				#0398CA;
		}

		div.Notice.Message a
		{
			border-color: 		#0398CA;
			color: 				#0398CA;
		}

		div.Notice.Success a
		{
			border-color: 		#008000;
			color: 				#008000;
		}

/* END NOTICES */