/**
 * Niets uit dit bestand mag worden gekopieerd, gewijzigd, veranderd of
 * gebruikt zonder de expliciete toestemming van Crowd Surfing
 * (ITC Portal B.V.)
 *
 * Indien u met betrekking tot dit bestand wijzigingen doorvoert draagt
 * Crowd Surfing niet langer de verantwoordelijk voor een correcte
 * werking van uw website
 *
 *
 * Nothing from this file may be copied, changed or used
 * without the explicit consent of Crowd Surfing (ITC Portal B.V.)
 *
 * If you make changes concercing this file, Crowd Surfing will no
 * longer bear responsibility for a correct functioning of your website
 */

/**
 * CSS for SalsaZandvoort 
 *
 * Updates:
 * - 2010-04-08		Added Notices
 *
 * @author	 		Jeroen Dijkstra, Crowd Surfing
 * @author			Pim Elshoff, Crowd Surfing
 * @copyright		(c) Crowd Surfing 2010
 * @license			http://crowd-surfing.com/algemenevoorwaarden/Module-01-licentie-programmatuur.pdf
 */

/* 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, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
body 	{ background: white; color: black; line-height: 1; }
del 	{ text-decoration: line-through; }
table 	{ border-collapse: collapse; border-spacing: 0; } /* Tables still need cellspacing="0" in the HTML */
:focus 	{ outline: 0; } /* Removes outline for input fields in Webkit */
/* END CSS RESET */

/* GENERAL STYLES */
html, body, div#Container
{
}

body
{	
	background-color: 	#B90D03;
	background-repeat: 	repeat-y;
	color: 				white;
	font: 				12px/1.3 Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
	margin: 			0;
	text-align: 		center;
}

h1
{
	font-family: 		'DroidSerifItalic', Arial, Helvetica, sans-serif;
	font-size: 			24px;
	font-weight: 		bold;
}

h2
{
	color:				#000000;
	font-family: 		'DroidSerifItalic', Arial, Helvetica, sans-serif;
	font-size: 			18px;
	font-weight: 		bold;
}

h3
{
	font-family: 		'DroidSerifItalic', Arial, Helvetica, sans-serif;
	font-size: 			16px;
	font-weight: 		normal;
}

h4
{
	font-family: 		'DroidSerifItalic', Arial, Helvetica, sans-serif;
	font-size: 			12px;
	font-weight: 		normal;
}

a
{
	color: 				#333333;
	text-decoration: 	underline;
}

a:hover
{
	text-decoration: 	none;
}

a:visited
{
	color: 				#333333;
}

p
{
	color: 				#333333;
	line-height:		1.3;
	margin-bottom: 		10px;
	padding: 			0 10px 10px 0;
}

strong
{
	font-weight: 		bold;
}

em
{
	color: 				#333333;
	font-style: 		italic;
}

li
{
	list-style-type: 	none;
}

textarea
{
	overflow: 			auto; /* No scrollbars in IE when there is enough room */
}

blockquote
{
	border-left: 		2px solid #333333;
	margin: 			5px 0 15px 15px;
	padding-left: 		15px;
}

pre
{
	font-family: 		"Courier New", Courier, monospace, serif;
  	margin: 			0 0 1.5em;
}

blockquote,
blockquote p
{
	font-size: 			15px;
	font-style: 		italic;
	text-align: 		justify;
}

div#Container
{
	overflow: 			hidden;
	
}

	/* GENERAL STYLES CONTENT */
	div#Content ol,
	div#Content ul
	{
		line-height:			1.3;
		margin-left: 			15px;
	}

	div#Content ol li
	{
		list-style-type:	decimal;
	}

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

	/* GENERAL STYLES CONTENT */

div#ContentContainer
{
	background-color:	#9AA3B3;
	margin:				50px auto;
	min-height:			550px;	
	width:				960px;
	position:			relative;
	overflow:			hidden;
}

	div#ContentContainer div#Left
	{
		float:				left;
		width:				285px;
	}
	
		div#ContentContainer div#Left div#Languagebar
		{
			height:				20px;
		}
		
			div#ContentContainer div#Left div#Languagebar a
			{
				float:				left;
				margin-left:		5px;
				margin-top:			5px;
			}
	
		div#ContentContainer div#Left div#ImageContainer
		{
			min-height:			485px;
		}
			
			div#ContentContainer div#Left div#ImageContainer a
			{
				display:			block;
			}
				
				div#ContentContainer div#Left div#ImageContainer a img
				{
					display: 			block;
					margin: 			10px auto 30px;
				}
			
		div#ContentContainer div#Left div#Logo
		{
			bottom:				0;
			height:				45px;
			left:				0;
			position:			absolute;
			text-align: 		center;
			width:				285px;
		}
	
			div#ContentContainer div#Left div#Logo a
			{
				color:				#333333;
				font-family:		Arial;
				font-size:			35px;
			}
			
				div#ContentContainer div#Left div#Logo a span
				{
					font-weight:		bold;
					margin-right:		-10px;	
				}

	div#ContentContainer div#Right
	{
		background-color:	#ffffff;
		float:				left;
		min-height:			550px;	
		width:				675px;
	}
	
		div#ContentContainer div#Right div#MainNavigation
		{
			float:				left;
			height:				30px;
			width:				675px;
			z-index:			5;
		}
		
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li
			{	
				float:				left;	
				margin-left:		7px;
				z-index: 			6;
			}
				
				div#ContentContainer div#Right div#MainNavigation ul#NavigationList li a
				{
					color:				#A1AAB8;
					font-size:			15px;
					line-height:		30px;
					text-decoration:	none;
					z-index:			7;
				}
				
					div#ContentContainer div#Right div#MainNavigation ul#NavigationList li a:hover
					{
						color:				#67696C
					}
			
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems
			{
				position:			relative;
			}
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems ul
			{
				display:			none;
				background-color:	#9AA3B3;
				left:				0;
				padding-right:		7px;
				padding-top:		5px;								
				position:			absolute;
				top:				25px;
				z-index:			10;
			}
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems:hover ul
			{
				display:			block;
			}			
			
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems ul li		
			{
				margin-top:			-6px;
			}
			
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems ul li a
			{
				color:				#FFFFFF;				
				text-decoration:	underline;				
				font-size:			14px;
			}
			
			div#ContentContainer div#Right div#MainNavigation ul#NavigationList li.HasSubItems ul li a:hover
			{
				text-decoration:	none;
							
			}									
			
			div#ContentContainer div#Right div#Content
			{
				background-image:	url("/Includes/Themes/SalsaZandvoort/Images/ContentBackground.jpg");
				background-repeat:	no-repeat;
				background-position:bottom;
				float:				left;
				min-height:			504px;
				padding:			8px;
				text-align:			left;
				width:				659px;	
				z-index:			0;
			}
			
				div#ContentContainer div#Right div#Content h1#Heading
				{
					color:				#000000;
				}
				
				div#ContentContainer div#Right div#Content h2.AndresHeader
				{
					cursor:				pointer;
					margin-bottom:		5px;				
				}
				
				div#ContentContainer div#Right div#Content h2.AndresHeader span
				{
					color:				#9AA3B3;
				}
				
				div#ContentContainer div#Right div#Content h2.AndresHeader span.AndresHeaderSpan
				{
					color:				#000000;
					margin-left:		10px;
						
				}
				
				div#ContentContainer div#Right div#Content h2.AndresHeader span.AndresHeaderSpan:hover
				{
					text-decoration:	underline;
				}
/* PHOTOALBUM */
div#ContentContainer div#Left div#ImageContainer ul#PhotoAlbums
{
	margin-top:			20px;
}

	div#ContentContainer div#Left div#ImageContainer ul#PhotoAlbums li
	{
		margin-left:		30px;
		text-align:			left;	
	}

		div#ContentContainer div#Left div#ImageContainer ul#PhotoAlbums li p
		{
			font-weight:		bold;
		}
		
		div#ContentContainer div#Left div#ImageContainer ul#PhotoAlbums li a
		{
			color:				#000000;
		}
		
		div#ContentContainer div#Left div#ImageContainer ul#PhotoAlbums li a.Active
		{
			color:				#CD0000;
			font-size:			14px;
			font-style:			italic;
		}

div#ContentContainer div#Right div#Content div#Photos
{
	margin-left:		7px;
}
	div#ContentContainer div#Right div#Content div#Photos a.PhotoAlbumThumbnail img
	{
		margin:				7px;
		
		-moz-box-shadow:2px 2px 10px #151518; 
		-webkit-box-shadow: 2px 2px 10px #000; 
	  	box-shadow: 2px 2px 10px #000; 	
	} 
/* END PHOTOALBUM */

/* SIGN IN FORM*/
div#Content form#SignIn div.Row
{
	float:					left;
	line-height:			30px;
	margin-bottom:			3px;
	width:					302px;
}

	div#Content form#SignIn div.Row label
	{
	 	color:					#000000;
		width:					130px; 
	}
	
	div#Content form#SignIn div.ApplySubform
	{
		float:					left;
		margin-top:				20px;
	}
	
		div#Content form#SignIn div.ApplySubform div.Row
		{
			width:					650px;
		}
	
			div#Content form#SignIn div.ApplySubform div.Row label
			{
				width:					300px;
			}
	
			div#Content form#SignIn div.ApplySubform div.Row textarea
			{
				height:					137px;
				width:					580px;
			}
	
	div#Content form#SignIn div.Row input.SendForm
	{
		height:					25px;	
	}
/* END SIGN IN FORM*/

/* CONTACT FORM */
div#Content form#Contact div.Row
{
	line-height:			30px;
	width:					409px;
}

	div#Content form#Contact div.Row label
	{
		color:					#000000;
	}
	
	div#Content form#Contact div.Row input
	{
		
	}
	
	div#Content form#Contact div.Row textarea
	{
		height:					121px;
		width:					250px;
		vertical-align:			top;
	}
	
	div#Content form#Contact div.Row input.SubmitButton
	{
		float:					right;
		height:					23px;
	}
/* END CONTACT FORM*/

/* VIDEO */
div#VideoContainer
{
	margin-top:				15px;
	position: 				relative;
}

	div#VideoContainer img#Clickety
	{
		bottom: 			27px;
		display: 			block;
		height: 			43px;
		right: 				8px;
		position: 			absolute;
		width: 				90px;
	}
	
div.CourseContainer
{
	
}

	div.CourseContainer h2
	{
		margin-left:		16px;
		margin-top:			20px;
	}
	
		div.CourseContainer ul.VideoList
		{
			
		}
		
			div.CourseContainer ul.VideoList li
			{
				
			}
			
				div.CourseContainer ul.VideoList li a
				{
					color:					#333333;
				}
				
		div#Content ul#Controls
		{
			float:				right;	
		}
		
			div#Content ul#Controls li a
			{
				color:				#333333;
				font-size:			15px;
			}

/* END VIDEO */

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

		form div.ErrorMessage
		{
			color: 				#FF0000;
		}

		form div.Row input
		{
			height: 			16px;
		}

		form div.Submit input
		{
			height: 			auto;
		}

		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 label
		{
			display: 			inline-block;
			width: 				150px;
		}

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

			-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/SalsaZandvoort/Images/Icons/pointer.png') no-repeat;
				display: 			block;
				height: 			9px;
				left: 				-8px;
				position: 			absolute;
				top: 				5px;
				width: 				9px;
			}

/* LOGIN VIDEO FORM */
form#Apply div.Row
{
	margin-bottom:		10px;
	width:				145px;
}

form#Apply div.Row input
{
	height:		14px;
}

form#Apply div.Row label
{
	color:		black;
}

form#Apply div.Row span.Hint
{
	color:		#000000;
	right:		-215px;
}

form#Apply div.Row input[name="send"]
{
	height:		24px;
	float:		right;
	margin-top: -20px;	
}
/* END LOGIN VIDEO FORM */


/* 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 */