@charset "utf-8";
/* CSS Document */

* {
	border:				0;
	margin:				0;
	padding:			0;
}

body {
	background:			url(../image/bg-body.jpg) repeat #999 top center;	
	font-family:		"Trebuchet MS", Verdana, Arial;
	font-size:			0.7em;
	color:				#000;
	line-height:		18px;
}

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

#side a { 				color:#fff; text-decoration:none; }
#side a:hover { 		color:#ffc524; }

p {
	margin:				0 0 10px 0;	
}

.clear {
	clear:				both;
	height:				0;
	font:				0/0 serif;	
}

div#wrapper {
	width:				986px;
	margin:				0px auto;
}

div#resize {
	display:			none;	
}

div#header {
	width:				986px;
	height:				185px;
	background-repeat:	no-repeat;
	position:			relative;
}

div#header div.left {
	width:				783px;
	height:				185px;
	float:				left;
	background:			url(../image/img-header.png) no-repeat;
	position:			relative;
	z-index:			100;
}

div#header div.right {
	width:				199px;
	height:				185px;
	float:				left;
}

div#container {
	width:				982px;
	height:				100%;
	background:			transparent url(../image/bg-line.png) repeat-y scroll 20px 0px;
	padding:			34px 4px 20px 0px;
	position:			relative;	
	min-height:			430px;
	height:				auto !important;
	height:				430px;
}

/*menu*/
div#container div#menu {
	float:				left;
	width:				155px;
	height:				100%;
}

div#container div#menu ul {
	width:				155px;
	height:				345px;
	list-style:			none;
}

div#container div#menu ul li {
	width:				155px;
	height:				43px;
	float:				left;
}

div#container div#menu ul li a {
	outline:			none;	
}

div#container div#menu div.logo {
	position:			absolute;
	bottom:				0px;
	left:				24px;
	background:			url(../image/img-straatvoetbalontour.gif) no-repeat;
	width:				130px;
	height:				91px;
}

div#container div.topteams {
	position:			absolute;
	bottom:				2px;
	right:				12px;
	background:			url(../image/img-bekijktopteams.gif) no-repeat;
	width:				139px;
	height:				84px;
}

div#container div.topteams a {
	display:			block;
	width:				139px;
	height:				84px;
}

/*content*/
div#container div#content {
	float:				left;
	width:				628px;
	height:				100%;
	position:			relative;
}

div#container div#content div.text {
	width:				364px;
	float:				left;
	text-align:			justify;
	padding:			0 28px;	
}

div#container div#content div.images-wrapper {
	width:				207px;
	height:				479px;
	float:				left;
}

div#container div#content div.images {
	width:				207px;
	height:				479px;
	overflow:			hidden;
	position:			relative;
	z-index:			1;
}

div#container div#content div.image-set {
	width:				207px;
	height:				479px;
	overflow:			hidden;
}

div#container div#content div.images-overlay {
	width:				207px;
	height:				479px;
	overflow:			hidden;
	background:			url(../image/img-sideimages-overlay.png);
	float:				left;
	margin-top:			-479px;
	position:			relative;
	z-index:			2;

}

/*sidebar*/
div#container div#side {
	float:				left;
	width:				175px;
	height:				100%;
	padding:			0px 8px;
}

div#container div#side div.agenda-item {
	width:				175px;
	margin:				0 0 10px 0;
}

div#container div#side div.agenda-item span {
	display:			block;
	color:				#fff;
}

div#container div#side div.agenda-item span.location {
	font-size:			16px;
	font-weight:		bold;
	background:			url(../image/ico-location.gif) no-repeat center left;
	padding:			0 0 0 21px;
}

div#container div#side div.agenda-item span.date {
	background:			url(../image/ico-date.gif) no-repeat center left;
	padding:			0 0 0 21px;
}

/*footer*/
div#footer {
	background:			url(../image/bg-bottom.png) no-repeat scroll 20px 0px;
	width:				986px;
	height:				5px;
	margin:				0px auto;
}

/* agenda */
div#container div.agenda table.table-agenda {
	border-collapse:	0;
	border-spacing:		0;
	width:				364px;
	height:				100%;
}

div#container div.agenda table.table-agenda tr td {
	background:			url(../image/bg-agendarow.jpg) repeat-x;
	height:				50px;
	text-align:			center;
	width:				182px;
	font-weight:		bolder;
	font-size:			110%;
}

div#container div.agenda table.table-agenda tr td.coltop {
	color:				#eb3125;
	font-size:			16px;
	font-weight:		bold;
}

div#container div.agenda table.table-agenda tr td.coltop img {
	width:				17px;
	height:				17px;
	vertical-align:		top;
}

/* submenu */
div#container div#content div.images div.menu {
	/*background:			url(../image/bg-agendarow.jpg) repeat-x;*/
	padding:			0 15px;
}

div#container div#content div.images div.menu a {
	color:				#000;
	font-weight:		bold;
	display:			block;
	background:			url(../image/bg-submenu.gif) repeat-y;
	margin:				2px 0;
	padding:			3px;
	text-decoration:	none;
}

div#container div#content div.images div.menu a:hover {
	color:				#ef3125;
}

/* news */
ul.news-side,
ul.news {
	list-style:			none;
}

ul.news-side li {

}

ul.news-side li a {
	display:			block;
	width:				100%;
	padding:			3px 0;
	margin:				0 0 2px 0;
/*	border-bottom:		1px dotted #fff;*/
	background:			url(../image/bg-news-side.jpg) repeat-y;
}

ul.news-side li span {
	color:				#ffc524;	
}

ul.news {
	margin-top:			10px;	
}

ul.news li {
	position:			relative;
	min-height:			90px;
	height:				auto !important;
	height:				90px;
	margin:				0 0 20px 0;
	padding:			10px;
	background:			url(../image/bg-agendarow.jpg) repeat-x;
}

ul.news li h3 {
	margin-bottom:		5px;
	font-size:			14px;
}

ul.news li p span {
	font-style:			italic;
}

.news-img {
	float:				left;
	margin:				5px 10px 5px 0;
	border:				1px solid #ffc524;
}

.news-date {
	font-style:			italic;	
}

ul#pagecount {
	list-style-type:	none;
	width:				100%;
	height:				20px;
	clear:				both;
	margin:				10px 0 10px 0;
}

ul#pagecount li {
	float:				left;
	height:				18px;
	margin:				7px 9px 0 0;
	color:				#797979;
}

ul#pagecount li a {
	float:				left;
	width:				20px;
	height:				20px;
	border:				1px solid #dcdcdc;
	background-color:	#e7e7e7;
	text-decoration:	none;
	text-align:			center;
}

/* youtube controls */
.controls {
	background:			url(../image/bg-video.gif) repeat-x;
	width:				551px;
	height:				17px;
	padding:			6px 0 0 10px;
}

.controls a {
	margin:				0 5px 0 0;	
}

.btn-play {	
	display:			inline-block;
	width:				15px;
	height:				17px;
	background:			url(../image/btn-play.gif) no-repeat;
	outline:			none;
}

.btn-mute {
	display:			inline-block;
	width:				21px;
	height:				17px;
	background:			url(../image/btn-unmuted.gif) no-repeat;	 
	outline:			none;
}

/* fotos */
a.foto-item {
	display:			inline-block;
	width:				252px;
	border:				1px solid #dbdbdb;
	background:			url(../image/bg-fotos.jpg) repeat-x;
	height:				104px;
	padding:			10px;
	text-decoration:	none;
	margin:				0 10px 10px 0;
	float:				left;
}

a:hover.foto-item {
	background:			url(../image/bg-fotos-active.jpg) repeat-x;	
}

a.foto-item img {
	width:				90px;
	height:				90px;
	border:				4px solid #ffe69f;	
	float:				left;
	margin:				0 10px 0 0;
}

a.foto-item span.small {
	font-size:			10px;
	color:				#c82c23;
}

a.foto-item span.phototitle {
	display:			block;
	font-weight:		bold;
}

a:hover.foto-item img {
	border:				4px solid #ffc524;	
}

a.picture {
	float:				left;
	margin:				0 5px 5px 0;
}

a.picture img {
	width:				90px;
	height:				90px;
	border:				4px solid #ffe69f;
}

a:hover.picture img {
	border:				4px solid #ffc524;
}

/* forms */
div.form {
	float:				left;
	margin:				0 0 15px 0;
}

div.form p {
	margin:				0 0 15px 0;
	color:				#525252;
	font-size:			11px;
	float:				left;
	line-height:		20px;
}

div.form h2 {
	margin:				0;
}

div.form span.verplicht {
	float:				left;
	width:				10px;
	padding:			0 0 0 5px;
	color:				#ef3125;
}

form {
	margin:				10px 0 15px 0;
}

label {
	width:				135px;
	height:				25px;
	margin-right:		15px;
	padding:			0 10px 0 0;
	float:				left;
	clear:				left;
	font-size:			12px;
	color:				#232323;
	text-align:			left;
}

input, textarea {
	font-size:			11px;
	font-family:		"Trebuchet MS", Verdana, Arial;
	color:				#000;
	width:				342px;
	margin:				0 0 10px 0;
	padding:			5px 0 0 5px;	
	float:				left;
	border:				1px solid #ffcc00;
}

input {
	height:				20px;
}

textarea {
	margin:				0 0 10px 0;
	height:				150px;
}

input.submit {
	width:				90px;
	height:				23px;
	cursor:				pointer;
	border:				0;
	margin:				0;
	padding:			0;
	background:			#ffcc00;
	margin:				0 0 0 125px;
}

div.form p.error {
	background:			#ef3125;
	color:				#fff;
	font-weight:		bold;
	padding:			5px;
}