/*------------------------------------------------------------------
[Table of contents]

1. Body + reset general tags
2. Links
3. Forms / Inputs
4. Containers #site
5. Header / #headerCon
6. Navigation / #navigationCon
7. Left column / .leftCol
8. Right column / .rightCol
9. Content / #contentCon
10. Boxes / .box
11. Footer / #footerCon
12. Tabs
13. Pagination
14. Shadowbox 'bedankt'

-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[ 1. Body + reset general tags ]
------------------------------------------------------------------*/

html {
	width:100%;
	height:100%;
}

body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-size:13px;
	color:#000;
	font-family: Georgia, Serif;
	background:url(../images/backgrounds/body-bg.png) center 342px #313131;
}

img {
	display:inline;
	border:none;	
	vertical-align:bottom;
}

form {
	display:inline;
}


h1 {
	margin:0px 0 15px 0;
	height:54px;
	color:#000;
	font-size:2.7em;
	line-height:1.25em;
	font-weight:bold;
	font-family: Arial, Sans-Serif;
	text-transform:uppercase;
	background:#f0e600;
	z-index:100;
}
h1 span {
	display:none;
	line-height:1.6em;
}
h1 img {
	margin-left:20px;
}


h2 {
	margin:13px 0 8px 0;
	color:#ff006c;
	font-size:3.6em;
	line-height:1.0em;
	font-weight:normal;
	text-transform:uppercase;
}

h3 {
	margin:0 0 5px 0;
	color:#ff006c;
	font-size:1.7em;
	font-weight:normal;
}

h4 {
	margin:0 0 5px 0;
	color:#000;
	font-size:1.0em;
}


p {
	margin:0px 0 18px 0;
	padding:0;
	line-height:1.5em;
}


ul {
	list-style-type:  square;
	list-style-image:url(../images/icons/list-bullit.gif);
	color:	#009aff;
	line-height:1.5em;
}

hr {
	margin: 2 0 14px 0;
	height:4px;
	color:#666666;
	border:none;
	border-bottom:4px solid #666666;
	background:#666666;
}

/*------------------------------------------------------------------
[ 2. Links ]
------------------------------------------------------------------*/

a {
	color:#000;
	text-decoration:underline;
}
a:visited {
	color:#ff006c;
}
a:hover {
	color:#ff006c;
	text-decoration:underline;
}

/* no borders around active links */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}





/*------------------------------------------------------------------
[ 3. Forms / Inputs ]
------------------------------------------------------------------*/

div.error {
	width:				195px;
	margin:				5px 20px 15px 0;
	border:				1px solid #f00;
	padding:			10px 10px 10px 35px;
	color:				#bf0000;
	background:			url(../images/icons/exclamation.png)  10px 10px no-repeat #ffd9d9;
}


div.formblock {
	width:				auto;
}

div.formblock table {
	border-collapse:	collapse;
	border-spacing:		0;
}

div.formblock table th {
	padding: 			7px 30px 4px 0;
	font-weight:		normal;
	vertical-align:		top;
	text-align:			left;
}

div.formblock table td {
	position:			relative;
	padding: 			5px 5px 4px 0;
	vertical-align:		top;
}

div.formblock label {
	display:			block;
}

input.text {
	width:				230px;
	padding:			3px 5px 3px 5px;
	color:				#6e6265;
	font-size:			1.2em;
	font-family: 		Georgia, Serif;
	border:				1px solid #abadb3;
}

textarea {
	width:				230px;
	padding:			1px 5px 1px 5px;
	overflow:			auto;
	font-family: 		Georgia, Serif;
	font-size:			1.2em;
	color:				#6e6265;
	border:				1px solid #abadb3;
}

select {
	border:				1px solid #abadb3;
}

input.radiobttn {
	width:				10px;
	margin-top:			1px;
	#width:				15px;
	#margin-top:		0px;
	border:				none;
	background:			none;
}


input:hover,
textarea:hover,
select:hover {
	border:				1px solid #ff006c;
}


select#filterselector {
	width:				215px;
	min-width:			215px;
	font-size:			1.2em;
	#font-size:			1.1em;
	color:				#6e6265;
}

input#searchkeywords {
	width:				144px;
	padding:			2px 5px 2px 5px;
}

button {
	margin: 0 0 -6px 5px;
	#margin:0 0 0 5px;
	padding:0px 3px 1px 3px;
	color: #fff !important;
	font-weight: bold !important;
	font-size:1.3em;
	#font-size:1.2em;
	background:url(../images/backgrounds/bttn-background.gif);
	border:none;
}
button:hover {
	color: #fff !important;
	background:#000;
	border:none;
}


tr.error th {
	color:				#f00;
}
tr.error input,
tr.error textarea,
tr.error select {
	border:				1px solid #f00;
	background:			#fff2f2;
}

tr.error td div {	
	width:				195px;
	margin:				5px 20px 15px 0;
	border:				1px solid #f00;
	padding:			10px 10px 10px 35px;
	color:				#bf0000;
	background:			url(../images/icons/exclamation.png)  10px 10px no-repeat #fff2f2;
}




/* all button elements have the same layout */

p.verder {
	float:right;
	margin-top:15px;
	zoom:1;
}
p.terug {
	float:left;
	margin-top:15px;
	zoom:1;
}

p.bttn {
	margin-left:10px;
}
.button {
	display: inline-block;
	height: 27px;
	color: #fff !important;
	font-weight: bold !important;
	font-size:1.3em;
	line-height:26px;
	text-decoration: none !important;
	padding: 0 15px;
	position: relative;
	background:url(../images/backgrounds/bttn-background.gif);
	border-right: 1px solid #6d0230;
	border-bottom: 1px solid #6d0230;
}
.button:hover {
	color: #fff !important;
	background:#000;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
}
button.button {
	height:29px;
	/*line-height:22px !important;*/
	padding-bottom:4px;
}


/*------------------------------------------------------------------
[ 4. Containers ]
------------------------------------------------------------------*/

div#outerCon {	
	width:100%;
	overflow:hidden;
	z-index:3;
	overflow:hidden;
}

div#innerCon {
	position:relative;
	width:971px;
	margin:0 auto;
	z-index:5;
}

div#leftcircles {
	position:absolute;
	float:left;
	top:525px;
	height:395px;
	width:100px;
	background:url(../images/backgrounds/circles-left.png) right top no-repeat;
	z-index:1;
}

div#rightcircles {
	position:absolute;
	height:530px;
	width:100px;
	top:575px;
	right:0px;
	background:url(../images/backgrounds/circles-right.png) left top no-repeat;
	z-index:2;
}


/*------------------------------------------------------------------
[ 5. Header ]
------------------------------------------------------------------*/

div#headerCon {
	height: 342px;
	position: relative;
	background: url(../images/backgrounds/header-bg.gif) top center #f0e600;
	z-index:4;
}


/*------------------------------------------------------------------
[ 6. Navigation ]
------------------------------------------------------------------*/

div#navigationCon {
	position:relative;
	width:970px;
	height: 342px;
	margin:0 auto;
		
}

div#navigationCon #logo {
	float:left;
	padding-top:25px;
}

div#navigationCon ul {
	float:right;
	list-style:none;
	list-style-image:none;
	margin:10px 0 0 0;
	padding:0;
}
div#navigationCon ul li {
	position:relative;
	height:38px;
	text-align:right;
}

div#navigationCon ul li a {
	position:absolute;
	right:0;
}

#nav-home a {
	z-index:50;
	top:0;
	width:132px;
	height:51px;
	background:url(../images/nav/home.gif) center right no-repeat;
}
	#nav-home a:hover {
		z-index:100;
		background:url(../images/nav/home-hover.gif) center right no-repeat;
	}
	#nav-home.active a {
		background:url(../images/nav/home-active.gif) center right no-repeat;
	}
	
#nav-schrijfjein a {
	z-index:51;
	top: 0px;
	width:293px;
	height:48px;
	background:url(../images/nav/schrijf-je-in.gif) center right no-repeat;
}
	#nav-schrijfjein a:hover {
		z-index:100;
		background:url(../images/nav/schrijf-je-in-hover.gif) center right no-repeat;
	}
	#nav-schrijfjein.active a {
		background:url(../images/nav/schrijf-je-in-active.gif) center right no-repeat;
	}

#nav-videos a {
	z-index:52;
	top: 0px;
	width:180px;
	height:48px;
	background:url(../images/nav/videos.gif) center right no-repeat;
}
	#nav-videos a:hover {
		z-index:100;
		background:url(../images/nav/videos-hover.gif) center right no-repeat;
	}
	#nav-videos.active a {
		background:url(../images/nav/videos-active.gif) center right no-repeat;
	}

#nav-festival a {
	z-index:53;
	top: 0px;
	width:219px;
	height:52px;
	background:url(../images/nav/festival.gif) center right no-repeat;
}
	#nav-festival a:hover {
		z-index:100;
		background:url(../images/nav/festival-hover.gif) center right no-repeat;
	}
	#nav-festival.active a {
		background:url(../images/nav/festival-active.gif) center right no-repeat;
	}
	
#stuurin {
	position:absolute;
	display:inline-block;	
	top:226px;
	left:826px;
	
}
	#stuurin a {
		width:217px;
		height:112px;
		display:block;
		background:url(../images/nav/stuur-je-eigen-filmpje-in.gif) top left no-repeat;
	}
	#stuurin span {
		display:none;
	}
	#stuurin a:hover {
		background:url(../images/nav/stuur-je-eigen-filmpje-in-hover.gif) top left no-repeat;
	}
	#stuurin a.active {
		background:url(../images/nav/stuur-je-eigen-filmpje-in-active.gif) top left no-repeat;
	}


#nav-tips a {
	width:101px;
	height:54px;
	background:url(../images/nav/tips.gif) center right no-repeat;
	border-right:2px solid #fff;
}
	#nav-tips a:hover {
		background:url(../images/nav/tips-hover.gif) center right no-repeat;
	}
	#nav-tips a.current {
		background:url(../images/nav/tips-active.gif) center right no-repeat;
	}
	
#nav-new a {
	width:106px;
	height:54px;
	background:url(../images/nav/new.gif) center right no-repeat;
	border-right:2px solid #fff;
}
	#nav-new a:hover {
		background:url(../images/nav/new-hover.gif) center right no-repeat;
	}
	#nav-new a.current {
		background:url(../images/nav/new-active.gif) center right no-repeat;
	}	
	
#nav-topvideos a {
	width:230px;
	height:54px;
	background:url(../images/nav/top-videos.gif) center right no-repeat;
}
	#nav-topvideos a:hover {
		background:url(../images/nav/top-videos-hover.gif) center right no-repeat;
	}
	#nav-topvideos a.current {
		background:url(../images/nav/top-videos-active.gif) center right no-repeat;
	}		

/*------------------------------------------------------------------
[ 7. Left Column ]
------------------------------------------------------------------*/

div.leftCol {
	position:relative;
	float:left;
	display:inline;
	width:441px;
	border:5px solid #f8f8f8;
	background:#f8f8f8;
}

/*------------------------------------------------------------------
[ 8. Rightcolumn ]
------------------------------------------------------------------*/

div.rightCol {
	float:right;
	margin: 0 0 20px 0px;
	width:490px;
	border:5px solid #f8f8f8;
	background:#f8f8f8;
}



/*------------------------------------------------------------------
[ 9. Content ]
------------------------------------------------------------------*/

div#centerCon {
	margin: 25px 0 20px 0;
	padding:0;
	z-index:10;
	background:url(../images/backgrounds/centercon-bg.gif) repeat-y ;
	border-top:1px solid #000;
}

.spacer {
	float:right;
	margin: 0;
	width:500px;
	height:20px;
	background:#000;
}

div.textblock {
	padding:0 25px 0px 25px;
}

div#filterCon {
	height:30px;
	padding:0px 0 3px 0;
	margin-bottom:10px;
	border-bottom:4px solid #666666;
}

div#playerCon {
	margin:10px 0 15px 0;
}

/*------------------------------------------------------------------
[ 10. Boxes ]
------------------------------------------------------------------*/


div.videoCol {
	display:block;
	width:440px;
	margin-bottom:15px;
	zoom:1;
	overflow:hidden;
}
div.videoCol ul {
	float:left;
	display:inline;
	list-style:none;
	list-style-image:none;
	margin:0;
	padding:0;
}
div.videoCol ul li {
	list-style:none;
	list-style-image:none;
	margin-bottom:4px;
	zoom:1;
	overflow:hidden;
}

div.videoCol ul li a {
	text-decoration:none;
}


div.videothumb {
	float:left;
}
	div.videothumb img { /* base sizes */
		width:132px;
		height:99px;
	}
	.largethumbs div.videothumb img { /* large sizes */
		width:217px;
		height:163px;
	}
	
	div.videothumb span.thumboverlay {
		position:absolute;
		display:block;
		width:132px;
		height:99px;
	}
	.largethumbs div.videothumb span.thumboverlay {
		width:220px;
		height:163px;
	}	
	div.videoCol a:hover div.videothumb span.thumboverlay {
		background: url(../images/backgrounds/thumb-overlay.gif);
	}
	
	div.videothumb span.playbttn {
		position:absolute;
		display:block;
		width:135px;
		height:95px;
		background: url(../images/buttons/play-bttn.png) right bottom no-repeat;
	}
	.largethumbs div.videothumb span.playbttn {
		width:220px;
		height:158px;
		background: url(../images/buttons/play-bttn.png) right bottom no-repeat;
	}
	div.videoCol a:hover div.videothumb span.playbttn {
		background: url(../images/buttons/play-bttn-hover.png) right bottom no-repeat;
	}

div.videotext {
	margin-left:150px;
	padding: 5px 40px 0px 0px;
}		
.largethumbs div.videotext {
	margin-left:235px;
}	
div.videotext p {
	padding:0;
	margin:0;
}

a:hover div.videotext h4 {
	color:#ff006c;
	text-decoration:underline;
}


#banner {
	padding-top:5px;
	border-top:4px solid #666666;
}	
#banner img {
	border-right:1px solid #9a9a9a;
	border-bottom:1px solid #9a9a9a;
}


table.videodetails {
	margin:0 0 20px 0;
	padding-bottom:10px;
	border-collapse:collapse;
	background: url(../images/backgrounds/videodetails-tab-bg.gif) left bottom repeat-x;
}
table.videodetails th {
	padding:5px 30px 5px 0;
	text-align:left;
	vertical-align:top;
}
table.videodetails td {
	padding:5px 30px 5px 0;
	text-align:left;
	vertical-align:top;
}

.icons img {
	margin-right:5px;
}
.spacer {
	height:20px;
}

span.votes {
	display:inline-block;
	padding:1px 5px 3px 5px;
	background:#009cff;
	color:#fff;
	font-weight:bold;
	line-height:1.2em;
}



div.clearer {
	clear:both;
	font-size:0;
	line-height:0;
}


/*------------------------------------------------------------------
[ 11. Footer ]
------------------------------------------------------------------*/


div#footerCon {
	padding-bottom:50px;
	border-top:4px solid #fff;
	z-index:11;
	zoom:1;
	overflow:hidden;
}

div#footerCon a {
	color:#b6b6b6;
}
div#footerCon a:hover {
	color:#ff006c;
}

div#footerCon div#logos {
	position:relative;
	float:left;
	display:inline;
	width:450px;
	padding-top:18px;
	color: #7f7f7f;
	font-weight:bold;
}

div#footerCon div#serviceNav {
	float:right;
	display:inline;
	width:360px;
	margin-right:0px;
	padding-top:15px;
	text-align:right;
	font-size:11px;
}
	div#footerCon div#serviceNav ul {
		float:right;
		list-style:none;
		margin: 0 4px 0 10px;
		padding:0;
	}
	div#footerCon div#serviceNav ul li {
		float:left;
		margin-left:10px;
		color: #b6b6b6;
	}


/*------------------------------------------------------------------
[ 12. Tabs ]
------------------------------------------------------------------*/




/*------------------------------------------------------------------
[ 13. Pagination ]
------------------------------------------------------------------*/

/*  pagination */

.customnav {
	position:relative;
	padding: 3px 30px 0px 20px;
	text-align: left;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	background-color: none;
	clear:left;
}
.customnav a {
	display: inline-block;
	margin-left: 5px;
	padding: 5px 4px;
	font-weight: bold;
	color:#f26522;
}
.customnav a.selected {
	color:#000;
	text-decoration:none;
}
.customnav a.prev {
	background: url(../images/icons/arrow-prev.gif) center center no-repeat;
}
.customnav a.next {
	background: url(../images/icons/arrow-next.gif) center center no-repeat;
}
.customnav a.prev.disabled {
	background: url(../images/icons/arrow-prev-disabled.gif) center center no-repeat;
}
.customnav a.next.disabled {
	background: url(../images/icons/arrow-next-disabled.gif) center center no-repeat;
}
.customnav a span {
	display:none;
}

/*------------------------------------------------------------------
[ 14. Shadowbox 'Bedankt' ]
------------------------------------------------------------------*/

div#thanks {
	background-image: url('/images/backgrounds/bedankt.png');
	height: 222px;
	font-size: 22px;
	color: #FFFFFF;
}	

div#thanks p{
	padding: 104px 0px 0px 26px;
}

div#thanks img{
	border: none;
}