/**
 * Indien u met betrekking tot dit bestand wijzigingen doorvoert draagt
 * Crowd Surfing niet langer de verantwoordelijk voor een correcte
 * werking van uw website
 *
 * If you make changes concercing this file, Crowd Surfing will no
 * longer bear responsibility for a correct functioning of your website
 *
 * CSS for SalsaZandvoort
 * Author: Jeroen Dijkstra | Crowd Surfing 2010
 */

/* 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; }
:focus { outline: 0; } /* Outline for input fields in Webkit */
/* END CSS RESET */

/* GENERAL STYLES */
html, body, div#Container
{
	width: 100%;
}

body
{
	background-color: #FFFFBF;
	color: black;
	font: 13px/1.3 Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
	margin: 0;
}

div#Container
{
	background-image: url('/Application/Includes/Themes/SalsaZandvoort/Images/TropischAchtergrondBeeld.gif');
	background-repeat: no-repeat;
	margin-top:	-55px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

div#Container.ContainerNext
{
	background-image: url('/Application/Includes/Themes/SalsaZandvoort/Images/TropischAchtergrondBeeld_vervolg.gif');
	background-position: -118px top;
}


img#BackgroundImage
{
	left: 0;
	position: absolute;
	top: 0;
	z-index: -1;
}

h1
{
	font-size: 20px;
	font-weight: normal;
}

h2
{
	color: #000000;
	font-size: 12px;
	font-weight: bold;
	padding: 0 15px 0 25px;

	text-shadow: 2px 2px 4px #FFFFFF, 2px 2px 4px #FFFFFF;
}

h3
{
	color: #000000;
	font-size: 10px;
	font-weight: bold;
	padding: 0 15px 0 25px;
}

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

a:hover
{
	text-decoration: underline;
}

a:visited
{
	color: #BE1F33;
}

p
{
	color: #5D3B19;
	font-size: 14px;
	line-height: 23px;
	margin-bottom: 20px;
}

strong
{
	font-weight: bold;
}

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

li
{
	list-style-type: none;
}

textarea
{
	overflow: auto; /* No scrollbars in IE when there is enough room */
	min-width: 400px;
	min-height: 200px;
}

label
{
	display: inline-block;
	min-width: 150px;
	vertical-align: top;
}

div.Row
{
	line-height: 3;
	vertical-align: top;
}

    div.Row .Hint
    {
    	right: 13px;
    }

    div.ErrorMessage
    {
		color:red;
		float:left;
		margin-left:126px;
		margin-top: 0;
		width:222px;
    }

blockquote
{
	border-left: 2px solid #5D3B19;
	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;
}

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

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

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

	/* GENERAL STYLES CONTENT */

/* END GENERAL STYLES */

/* HEADER */
div#Header
{
	height: 360px;
}
/* END HEADER */

/* TOPIMAGE */
img#TopImage
{
	height: 331px;
	left: 395px;
	margin-top:-55px;
	position: absolute;
	top: 390px;
	width: 498px;
	z-index: 1;
}

div.TopImageLoader
{
	background: #FFFFFF url('/Application/Includes/Themes/SalsaZandvoort/Images/Icons/preloader.gif') no-repeat scroll center;
	display: none;
	height: 331px;
	left: 395px;
	position: absolute;
	top: 335px;
	width: 498px;
	z-index: 1;
}

/* END TOPIMAGE */

/* NAVIGATION */
div#NavigationContainer
{
	height: 360px;
	margin-left: 230px;
	text-align: left;
	width: 845px;
}

div.ContainerNext div#NavigationContainer
{
	float: left;
	min-height: 435px;
	width: 177px;
}

	ul#Navigation
	{
		float: left;
		margin: 45px 0 0 30px;
	}

		ul#Navigation li
		{
			height: 45px;
		}

			ul#Navigation li a
			{
				color: #000000;
				font-family: "Times New Roman", serif;
				font-size: 21px;
				font-style: italic;
				font-weight: bold;

				text-shadow: 2px 2px 4px #FFFFFF, 2px 2px 4px #FFFFFF;
			}

			ul#Navigation li a:hover,
			ul#Navigation li.Active a
			{
				text-decoration: none;

				text-shadow: 2px 2px 4px #5D3B19, 2px 2px 4px #FFFFFF;
			}

/*img#Flyer*/
div#FlyerContainer
{
	float: right;
	margin-top: 60px;
	margin-right: 30px;

	-moz-box-shadow: 2px 2px 50px #FFFFFF;
	-webkit-box-shadow: 2px 2px 50px #FFFFFF;
	box-shadow: 2px 2px 50px #FFFFFF;

	-moz-transform: rotate(7.5deg);
	-o-transform: rotate(7.5deg);
	-webkit-transform: rotate(7.5deg);
}

div#FlyerContainer img#Flyer
{
	height: 239px;
	width: 168px;
}

div#FlyerShadowContainer
{
	height: 239px;
	position: absolute;
	right: 25px;
	top: 65px;
	width: 168px;
	z-index: -1;
}

	div#FlyerShadowContainer div#Shadow
	{
		background-color: #FFFFFF;
		height: 239px;
		width: 168px;

		filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2, makeshadow='true', ShadowOpacity=0.50);
	}

/* END NAVIGATION */

/* CONTENT */
div#ContentContainer
{
	background-color: transparent;
	color: #5D3B19;
	margin: 50px 0 0 230px;
	text-align: left;
	width: 845px;
}

div.ContainerNext div#ContentContainer
{
	float: left;
	margin: 22px 0 0 0;
	width: 660px;
}

div.ContainerNext div#ContentWrapper
{
	background-color: #FFFFBF;
	margin-bottom: 20px;
	margin-top: 32px;
	min-height: 334px;
	height: auto !important;
	height: 334px;
	width: 668px;

	opacity: 0.9;
	filter: alpha(opacity = 90);
	zoom: 1;
}

	div.ContainerNext div#Content
	{
		overflow: hidden;
		padding: 0 10px 10px 10px;
		position: relative;
		z-index: 3;
	}

	div#ContentContainer h1
	{
		margin-bottom: 15px;
		margin-left: 25px;
	}

	div.ContainerNext div#ContentContainer h1
	{
		color: #A30024;
		font-weight: bold;
		margin-left: 0;
		padding-top: 5px;

		text-shadow: 2px 2px 4px #FFFFFF, 2px 2px 4px #FFFFFF;
	}

	div#ContentContainer h1 img.LetsDance
	{
		height: 32px;
		margin-right: 15px;
		width: 261px;
	}

	div#ContentContainer h1 img.Star
	{
		height: 40px;
		margin-right: 15px;
		vertical-align: top;
		width: 42px;
	}

/* END CONTENT */

/* FOOTER */
div#Footer
{
	background-image: url('/Application/Includes/Themes/SalsaZandvoort/Images/RodeVeeg.png');
	background-repeat: no-repeat;
	clear: left;
	height: 9px;
	margin: 20px 0 20px 225px;
	width: 851px;
}

/* END FOOTER */

/* DEVELOPMENT */
div#Development
{
	margin:			20px 0 20px 225px;
	width:			851px;
	text-align:		center;
	font-size:		10px;
}
/* END DEVELOPMENT*/


/* jCarousel */
div.PhotoContainer
{
	position: relative;
}

.jcarousel-skin-salsa
{
	float: right;
	margin-right: 60px;
	margin-top: 10px;
}

/* No JS */
ul.jcarousel-skin-salsa
{
	height: 375px;
	margin-right: 33px;
	overflow: auto;
	width: 120px;
}

/* END No JS */

div.jcarousel-container
{
	height: 375px;
}

div.jcarousel-clip
{
	height: 335px;
	top: 20px;
	width: 80px;
}

	div.jcarousel-clip li.jcarousel-item
	{
		margin: 4px 0 5px 0;
	}

		div.jcarousel-clip li.jcarousel-item img
		{
			border: 2px solid #FFFFFF;
			height: 69px;
			width: 69px;

			-moz-box-shadow: 2px 2px 8px #000000;
			-webkit-box-shadow: 2px 2px 8px #000000;
			box-shadow: 2px 2px 8px #000000;
		}

/* END jCrousel */

/* VIDEO */
div#VideoContainer
{
	position: 	relative;
}

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

/* END VIDEO */

/* FORM */
form div.ErrorMessage
{
	display: none;
}

	/* LOGIN */
	div#login
	{

		height: 90px;
		margin-top: 32px;
		padding-top: 20px;
	}

	/* END LOGIN */

/* END FORM */

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;
}

	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;
	}

	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;
	}

	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;
	}

	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;
		}

/* FORM HINTS */
	form div.Row
	{
		display: block;
		position: relative;
		width: 440px; /* Thanks to IE for the 3 extra pixels */
	}

		form div.ErrorMessage
		{
			color: #FF0000;
			float: right;
			padding-right: 10px;
		}

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

		form div.Row input[type=text],
		form div.Row input[type=password]
		{
			width: 250px;
		}

		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 span.Hint
		{
			background-color: #FFFFFF;
			border: 1px solid #B3B3B3;
			display: none;
			font-family: Verdana, Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
			font-size: 12px;
			line-height:	1.5;
			padding: 3px 5px;
			position: absolute;
			right: -200px;
			top: 0;
			width: 225px;

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

		div#Admincontent form div.Row span.Hint /* For the admin panel only */
		{
			right: -195px;
			top: 26px;
		}

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

/* END FORM HINTS */