/* =========================== */
/*  DSVD WEBSITE               */
/*  VERSIE 1.0.00              */
/*  2010 KW 1                  */
/* =========================== */
/*  © 2010 LuSaneT Group       */
/*  www.lusanet.nl             */
/* =========================== */
/*  Basis DSVD-website         */
/*  includes/base.css          */
/* =========================== */

/* === Body === */
	html, body {
		height: 100%;
		margin: 0px;
		padding: 0px;
		color: #000000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 9pt;
	}
	
	body {
		background-image: url('../images/body_background.jpg');
		background-position: center top;
		background-repeat: no-repeat;
	}
	
	.floatBreak {
		clear: both;
		float: none;	
	}

/* === WRAPPER === */
	#wrapper {
		clear: both;
		float: none;
		width: 1000px;
		min-height: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: -2px;
		border: 1px solid #FF0000;
		background-color: #FFFFFF;
	}

	#wrapper .columnLeft, #wrapper .columnCenter, #wrapper .columnRight {
		clear: none;
		float: left;
		margin-bottom: 30px;
		margin-top: 1px;
	}
	
	#wrapper .columnLeft {
		width: 200px;
		background-image: url('../images/header_background.jpg');
		background-position: 0px 0px;
		background-repeat: repeat-x;
	}
	
	#wrapper .columnCenter {
		width: 600px;
		background-image: url('../images/header_background.jpg');
		background-position: 0px 0px;
		background-repeat: repeat-x;
	}
	
	
/* === COLUMN LEFT === */
	.columnLeft .logo {
		clear:both;
		float: none;
		width: 178px;
		height: 181px;
		background-image: url('../images/header_logo.jpg');
		background-position: 0px 0px;
		background-repeat: no-repeat;
	}
	
/* === COLUMN CENTER === */
	.header {
		clear: both;
		float: none;
		width: 600px;
		height: 91px;
	}
	
	.headerImage {
		clear: both;
		float: none;
		width: 600px;
		height: 47px;
		margin-top: -1px;
		background-image: url('../images/header_image.jpg');
		background-position: center center;
		background-repeat: no-repeat;
	}

	/* === TOPMENU === */
		.topMenu {
			clear: both;
			float: none;
			overflow: visible;
			height: 21px;
			color: #FFFFFF;
			font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
			font-size: 14px;
		}
		.topMenu a, .topMenu a:active, .topMenu a:visited {
			color: inherit;
			text-decoration: none;
		}
		
		.topMenu .item {
			clear: none;
			float: left;
			overflow: visible;
			width: auto;
			padding-left: 9px;
			padding-right: 9px;
			border-right: 1px solid #DC0005;
			border-left: 1px solid #FF9194;
			line-height: 20px;
		}
		.topMenu .item:hover {
			color: #000000;
			background-color: #E1E1E1;
		}

		.topMenu .first {
			margin-left: 0px;
			border-left: 0px;
		}
		.topMenu .active {
			background-color: #FF9194;
		}
		
		.topMenu br {
			display: none;
		}
		
		/* === SUBMENU === */
			.topMenu .subMenu {
				display: none;
				position: absolute;
				width: 150px;
				margin-left: -11px;
				padding: 5px;
				border: 1px solid #FF0000;
				border-top: 0px;
				background-color: transparent;
				background-image: url('../images/submenu_background.png');
				background-position: 0px 0px;
				background-repeat: repeat;
			}

			.topMenu .item:hover .subMenu {
				display: block;
			}
			
			.topMenu .subMenu ul {
				margin: 0px;
				margin-left: 4px;
				padding: 0px;	
			}
		
			.topMenu .subMenu li {
				list-style: none;
			}
			
			.topMenu .subMenu li ul {
				display: none;
			}
			.topMenu .subMenu li:hover ul {
				display: block;
			}

			.topMenu .subMenu a {
				line-height: 22px;
			}			
			.topMenu .subMenu a:hover {
				color: #FF0000;
			}
		
	/* === PAGE === */
		.page {
			clear: both;
			float: none;
			width: 570px;
			margin-top: 60px;
		}
		
		.page h1 {
			margin-bottom: 25px;
			color: #FF0000;
			font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
			font-size: 17pt;
			font-weight: normal;
		}
		
		.page h2 {
			color: #FF0000;
			font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
			font-size: 14pt;
			font-weight: normal;
		}
		
		/* === INFORMATION TABLE === */
			.page .informationTable, .page .informationTable tr, .page .informationTable td {
				border: 0px;
			}
			
			.page .informationTable tr:nth-child(even) {
				background-color: #E6E6E6;
			}

/* === COLUMN RIGHT === */
	/* === CATEGORIES === */
		.categories {
			clear: both;
			float: none;
			width: 180px;
			height: 86px;
			margin-left: 10px;
			margin-right: 10px;
		}
		
		.categories .category {
			clear: both;
			float: none;
			width: 180px;
			height: 15px;
			margin-bottom: 3px;
			background-color: #FF0000;
			color: #FFFFFF;
			font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			line-height: 15px;
		}
		.categories .category:hover {
			background-color: #FF9194;
		}
	
		.categories .category a {
			color: #FFFFFF;
			text-decoration: none;
		}
		
		.categories .last {
			background-image: url('../images/categories_lastcorner.png');
			background-position: right bottom;
			background-repeat: no-repeat;
		}

	/* === MODULEBOX === */
		.modulebox {
			clear: both;
			float: none;
			width: 180px;
			margin: 10px;
			margin-top: 30px;
		}
		.columnLeft .modulebox {
			width: 158px;
		}
		
		.modulebox .title {
			clear: both;
			float: none;
			width: 180px;
			height: 18px;
			background-color: #FF0000;
			background-image: url('../images/modulebox_titlebackground.jpg');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			color: #FFFFFF;
			font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
			font-size: 10pt;
			font-weight: bold;
			text-align: center;
			line-height: 16px;
		}
		.columnLeft .modulebox .title {
			width: 158px;
			background-image: url('../images/modulebox_titlebackground_small.jpg');
		}
		
		.modulebox .content {
			clear: both;
			float: none;
			width: 172px;
			min-height: 30px;
			padding: 3px;
			padding-bottom: 15px;
			border: 1px solid #FF0000;
			background-color: #F0F0F0;
			background-image: url('../images/modulebox_background.jpg');
			background-position: right bottom;
			background-repeat: repeat-x;
			font-size: 8pt;
		}
		.columnLeft .modulebox .content {
			width: 150px;
		}
		
		.modulebox .content a {
			color: #000000;
			text-decoration: none;
		}
		.modulebox .content a:hover {
			text-decoration: underline;
		}
		
		.modulebox .content .sponsorLogo {
			width: 150px;
			border: 0px;
		}
		
		.modulebox .content .sponsorLine {
			height: 2px;
			margin-bottom: 11px;
			margin-top: 7px;
			border: 0px;
			color: #FF0000;
			background-color: #FF0000;
		}
	
		.modulebox .contentNews {
			background-image: url('../images/modulebox_newsbackground.jpg');
		}
		.modulebox .contentCompetition {
			background-image: url('../images/modulebox_competitionbackground.jpg');
		}
		.modulebox .contentCalendar {
			background-image: url('../images/modulebox_calendarbackground.jpg');
		}
		
		/* === TABLE === */
			.moduleboxTable {
				width: 172px;
				border: 0px;
			}
			
			.moduleboxTable .team {
				width: 66px;
			}
			
			.moduleboxTable .goals {
				width: 20px;
			}

			.moduleboxTable .date {
				width: 40px;
			}
			
			.moduleboxTable .message {
				width: 172px;
				font-style: italic;
				text-align: center;
			}
		
/* === LEGAL === */
	.legal {
		clear: both;
		float: none;
		width: 1000px;
		height: 18px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -21px; 
		border-bottom: 2px solid #C0C0C0;
		color: #808080;
		font-size: 8pt;
		text-align: center;
	}
	
	.legal a {
		color: #808080;
	}
	.legal a:hover {
		color: #FF0000;
	}
	
/* === MODULES === */
	/* === NEWS === */
		.moduleNews {
			clear: both;
			float: none;
		}
		
		.moduleNews .newsListTitle {
			clear: both;
			float: none;
			width: 100%;
			height: 17px;
			margin-top: 30px;
			border-bottom: 1px solid #808080;
			color: #FF0000;
			font-weight: bold;
			font-size: 11pt;
			text-align: left;
		}
		
		.moduleNews .newsList {
			margin: 0px;
			margin-left: 10px;
			margin-top: 10px;
			padding: 0px;
		}
		
		.moduleNews .newsList li {
			list-style: none;
			line-height: 18px;
		}
		
		.moduleNews .newsList a {
			color: #000000;
			text-decoration: none;
		}
		.moduleNews .newsList a:hover {
			text-decoration: underline;
		}
		
	/* === COMPETITION === */
		.moduleCompetition {
			clear: both;
			float: none;
			width: 550px;
		}
		
		.moduleCompetition .header {
			width: auto;
			height: 20px;
		}
		
		.moduleCompetition .header td {
			border-bottom: 1px solid #808080;
			font-weight: bold;
		}
		
		.moduleCompetition .odd {
			background-color: #e6e6e6;
		}
		
		.moduleCompetition table {
			width: 400px;
		}
		
		.moduleCompetition .date {
			width: 80px;
		}
		
		.moduleCompetition .team {
			width: 160px;
		}
		
		.moduleCompetition .goals {
			width: 40px;
		}
		
	/* === GUESTBOOK === */
		/* ===  SIGNTABLE === */
			.gbSignTable {
				width: 570px;
			}
			
			.gbSignTable .title {
				width: 100px;
				vertical-align: top;
			}
			
			.gbSignTable .value {
				width: 470px;
			}
			
			.gbSignTable .value input, .gbSignTable .value textarea {
				width: 460px;
				height: 16px;
				margin: 4px;
				margin-left: 0px;
				padding: 0px;
				padding-left: 5px;
				padding-right: 3px;
				border: 1px solid #800000;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 9pt;
			}
			.gbSignTable .value textarea {
				height: 150px;
			}
			
			.gbSignTable .value .gbButton, .button {
				width: 110px;
				height: 20px;
				padding-bottom: 4px;
				background-color: #F0F0F0;
				background-image: url('../images/modulebox_background.jpg');
				background-position: left bottom;
				background-repeat: repeat-x;
			}
			
			.gbSignTable .emoticons {
				padding-bottom: 5px;
				text-align: center;
			}
			
			.gbSignTable .emoticons img {
				margin-right: 7px;
				margin-top: 5px;
				border: 0px;
				cursor: pointer;
			}
			
		/* === VIEWTABLE === */
			.gbViewTable {
				width: 570px;
			}
			
			.gbViewTable .title {
				width: 100px;
				padding-right: 10px;
				background-color: #C0C0C0;
				text-align: right;
				vertical-align: top;
			}
			
			.gbViewTable .value {
				width: 470px;
				padding-left: 10px;
				padding-bottom: 2px;
				padding-top: 2px;
				border-right: 2px solid #C0C0C0;
			}
			
			.gbViewTable .messageTop, .gbViewTable .messageBottom {
				width: 570px;
				height: 15px;
			}
			.gbViewTable .messageTop {
				border-bottom: 2px solid #C0C0C0;
			}
			.gbViewTable .messageBottom {
				border-top: 2px solid #C0C0C0;
			}

			.gbViewTable .signButton {
				width: 570px;
				padding-bottom: 2px;
				padding-top: 2px;
				border-bottom: 2px solid #FF0000;
				border-top: 2px solid #FF0000;
				background-color: #C0C0C0;
				color: #000000;
				font-weight: bold;
				text-align: center;
				cursor: pointer;
			}
			.gbViewTable .signButton:hover {
				background-color: #FF0000;
			}
			.gbViewTable .signButton a {
				color: #000000;
				text-decoration: none;
			}
			
			.gbViewTable .pagenumbers {
				width: 570px;
				height: 16px;
				border-bottom: 2px solid #C0C0C0;
				background-color: #C0C0C0;
				text-align: center;
			}
			.gbViewTable .pagenumbers a {
				padding-left: 4px;
				padding-right: 4px;
				color: #000000;
				text-decoration: none;
				line-height: 16px;
			}
			.gbViewTable .pagenumbers a:hover {
				background-color: #FF0000;
				color: #FFFFFF;
				line-height: 16px;
			}
			
	/* === TEAMS TEMPLATE === */
		.sponsorTemplate {
			width: 570px;
			border: 0px;
		}
		
		.sponsorTemplate .teamPhoto, .sponsorTemplate .sponsorLogo {
			width: 275px;
			padding-right: 10px;
		}
		
		.sponsorTemplate .teamPhoto img, .sponsorTemplate .sponsorLogo img {
			width: 275px;
		}
		
		.sponsorTemplate .teamPlayers {
			width: 570px;
			text-align: center;
		}
		
		.sponsorTemplate .spacer {
			width: 570px;
			height: 18px;
		}
		
		.sponsorTemplate .field {
			width: 100px;
			padding-right: 10px;
			font-weight: bold;
			vertical-align: top;
		}
		.sponsorTemplate .value {
			width: 450px;
			padding-left: 10px;	
		}
		
	/* === CALENDAR === */
		.moduleCalendar {
			clear: both;
			float: none;
			width: 570px;
		}
		
		/* === MONTH BUTTONS === */
			.moduleCalendar .monthButtons {
				clear: both;
				float: none;
				width: 570px;
				height: 18px;
			}
			
			.moduleCalendar .monthButtons div {
				clear: none;
				float: left;
				width: 156px;
				height: 18px;
				margin-bottom: 18px;
				margin-left: 18px;
				margin-right: 18px;
				background-image: none;
				color: #FF0000;
				font-weight: bold;
				text-align: center;
				cursor: pointer;
			}
			.moduleCalendar .monthButtons div:hover {
				text-decoration: underline;
			}
		
		/* === MONTH SELECTOR === */
			.moduleCalendar .monthSelector {
				clear: both;
				float: none;
				overflow: hidden;
				width: 570px;
				height: 164px;
			}
			
			.moduleCalendar .monthSelector .divRow {
				clear: both;
				float: none;
				width: 3420px;
				height: 164px;
			}
			
			.moduleCalendar .monthSelector .month {
				clear: none;
				float: left;
				width: 154px;
				height: 162px;
				margin-left: 18px;
				margin-right: 18px;
				border: 1px solid #FF0000;
			}
			
			.moduleCalendar .monthSelector .month .title {
				clear: both;
				float: none;
				width: 154px;
				height: 18px;
				background-color: #FF0000;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				text-transform: capitalize;
				line-height: 18px;
			}
			
			.moduleCalendar .monthSelector .dayHeader {
				clear: both;
				float: none;
				width: 154px;
				height: 12px;
			}
			
			.moduleCalendar .monthSelector .dayHeader div {
				clear: none;
				float: left;
				width: 20px;
				height: 10px;
				margin: 1px;
				font-size: 6pt;
				text-align: center;
			}
			
			.moduleCalendar .monthSelector .month .date {
				clear: none;
				float: left;
				width: 20px;
				height: 20px;
				margin: 1px;
				background-color: #F0F0F0;
				text-align: center;
				line-height: 20px;
				cursor: pointer;
			}
			
			.moduleCalendar .monthSelector .month .dateActive {
				font-weight: bold;
			}
			.moduleCalendar .monthSelector .month .dateSelected {
				background-color: #C0C0C0;
			}
			
			.moduleCalendar .monthSelector .month .dateEmpty {
				clear: none;
				float: left;
				width: 20px;
				height: 20px;
				margin: 1px;
			}
		
		/* === WEEKTITLE == */
			.moduleCalendar .weekTitle {
				clear: both;
				float: none;
				width: 570px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom: 1px solid #808080;
				color: #FF0000;
				font-size: 13pt;
				font-weight: bold;
				line-height: 20px;
			}
			
			.moduleCalendar .weekTitle .week {
				font-size: 9pt;
				font-weight: normal;
			}
		
		/* === ITEM === */
			.moduleCalendar .itemDay {
				clear: both;
				float: none;
				width: 570px;
				height: 18px;
				margin-top: 18px;
				text-transform: capitalize;
				font-weight: bold;
			}
		
			.moduleCalendar .item {
				clear: both;
				float: none;
				overflow: hidden;
				width: 560px;
				height: 18px;
				margin-left: 10px;
				cursor: pointer;
			}
			.moduleCalendar .item:hover {
				background-color: #D0D0D0;
			}
			
			.moduleCalendar .itemActive {
				background-color: #FF0000;
				color: #FFFFFF;
			}
			
			.moduleCalendar .item .date, .moduleCalendar .item .title {
				clear: none;
				float: left;
				overflow: hidden;
				width: 125px;
				height: 18px;
				margin-left: 5px;
				line-height: 18px;
			}
			.moduleCalendar .item .title {
				width: 425px;
			}
			
			.moduleCalendar .itemDetails {
				display: none;
				clear: both;
				float: none;
				width: 430px;
				margin-left: 138px;
				padding-bottom: 5px;
				padding-top: 5px;
				border: 1px solid #FF0000;
				border-top: 0px;
				background-color: #F0F0F0;
			}
			
			.moduleCalendar .itemDetails .title {
				clear: none;
				float: left;
				width: 140px;
				height: 18px;
				margin-bottom: 2px;
				margin-left: 5px;
				margin-top: 2px;
				font-weight: bold;
				line-height: 18px;
			}
			
			.moduleCalendar .itemDetails .value {
				clear: none;
				float: left;
				width: 275px;
				margin-bottom: 2px;
				margin-right: 5px;
				margin-top: 2px;
				line-height: 18px;
			}
			
			.moduleCalendar .itemDetails .description {
				clear: both;
				float: none;
				width: 415px;
				margin-left: 5px;
				margin-right: 5px;
				margin-top: 2px;
			}
			
	/* === GOOGLE MAPS ROUTE === */
		.moduleGmRoute {
			clear: both;
			float: none;
			width: 570px;
		}
		
		.moduleGmRoute .routeSearch {
			clear: both;
			float: none;
			width: 570px;
			margin-bottom: 20px;
			text-align: center;
		}
		
		.moduleGmRoute .routeSearch .field {
			width: 250px;
			height: 16px;
			margin: 3px;
			border: 1px solid #000000;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 9pt;
		}
		
		.moduleGmRoute .routeSearch .button {
			width: 100px;
			height: 20px;
			margin: 3px;
			border: 1px solid #000000;
			background-color: #F0F0F0;
			background-image: url('../images/modulebox_background.jpg');
			background-position: 0px bottom;
			background-repeat: repeat-x;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 9pt;
			font-weight: bold;
		}
		
		.moduleGmRoute #routeText {
			clear: both;
			float: none;
			display: none;
			overflow: auto;
			width: 570px;
			height: 280px;
			margin-bottom: 10px;
			border: 1px solid #C0C0C0;
		}
		
		.moduleGmRoute #routeMap {
			clear: none;
			float: left;
			width: 570px;
			height: 300px;
			margin-bottom: 10px;
			border: 1px solid #C0C0C0;
		}
		
		.moduleGmRoute #gmHome {
			display: none;
		}