@import url(http://fonts.googleapis.com/css?family=Asap:400,400italic,700,700italic&subset=latin,latin-ext);
/* @import url(gnuolane/stylesheet.css);  */

body {
	
	/* background-color: #3c3231; */
	background-color: #f1f1f1;
	color: #161616;
	font-size:11px;
	font-family:'Asap', Arial, Helvetica, Verdana, sans_;
	padding: 0px;
	letter-spacing: 1px;
}

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

#logo {
	position: absolute;
	top: -200px;
	left: 102px;
	border: none;
}


.prodcontent {
	height: 250px;
	overflow: hidden;
}

.prodcontent h4 {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	font-size: 14px;
	font-weight: normal;
}

.scrollcontent {
	margin: 0;
	height: 245px;
	overflow: hidden;
}


.detailbox {
	display: none;
}

a.selectedlink {
	color: #FFC20F !important;
}

.prodcontent table {
	width: 100%;
	border: none;
	margin: 0;
	padding:0;
}
.prodcontent table tr {
	margin: 0;
	padding:0;
}

.prodcontent table td {
	border: none;
	vertical-align: top;
	padding: 0px 5px 5px 0px;
	margin:0;
}

.thumb{
	width: 80px;
	height: 40px;
	border: solid 1px #444;
	margin: 0px 10px 10px 0px;
	cursor: pointer;
	/*box-shadow: 2px 2px 2px #000;*/
}

.selectedthumb{
	border: solid 1px #fff;
}

.movie {
	cursor: default;
}

.mediacontainer{
	position: absolute;
	z-index: 100;
	max-width: 515px;
	max-height: 290px;
	overflow: hidden;
}

/* main container for the productions*/

#videowrapper {
	height: 383px;
	background-color: #E9E9E9;
	position: absolute;
	top: 170px;
	width: 100%;
	left: 0px;
	overflow-y: hidden;
	overflow-x: hidden;
	white-space: nowrap;
	border-bottom: #979797 solid 1px;
	border-top: #979797 solid 1px;
	
	/* box-shadow: 0 0 5px #888; */
}

/* sub-container for videos */
#videos {
	margin-top: 10px;
	left: 20px;
	height: 360px;
	/* width: 100%; */
	/* max-height: 320px; */
	 position: absolute; 
	/* margin: 5px 0px; */
	visibility: hidden;
	
}


#videos .yeartitle {
	padding: 4px 0px 3px 6px;
	font-size: 14px;
	color: #979797;
	opacity: 0;
	font-weight: bold;
	position: absolute;	
}

.newscontent {
	width: 300px;
	opacity: 0;
	overflow: auto;
	height: 290px;
}


#yearFeatured .yeartitlesmall, #yearNews .yeartitlesmall {
	padding: 0px 0px 0px 0px;
	font-size: 14px;
	color: #979797;
	/* margin: 45px 0px 0px -40px; */
	margin: 56px 0px 0px -14px;
	opacity: 1;
	text-align: right;
	font-weight: bold;
	 -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	transform: rotate(-90deg); 
	width: 70px;
}

.yeartitlesmall {
	position: absolute;
	margin-top: 0px;
	font-size: 14px;
	color: #979797;
	margin-left: 15px;
	margin-top: 22px;
	font-weight: bold;
	text-align: right;
	
}

/* main container for productions per year */
.yearcontainer {
	display: inline-block;
	height: 330px;
	cursor: pointer;
	overflow: hidden;
}

/* container for productions */
.yearcontainer .content {
	border-left: solid 2px #CECECE;
	height: 290px;
	overflow: none;
	margin: 25px 0 0 0;
	padding: 0px;
	
}
#yearNews .content {
	border-left: none !important;
}

/* single production */

.yearcontainer .content .movie {
	height: 300px;
	float: left;
	padding: 0px;
	white-space: normal;
	margin: 0px;
}

.details {
	margin-left: 520px;
	width: 580px;
	height: 290px;
	position: relative;
	/* border-left: solid 1px #cecece; */
}

.yearcontainer .content .movie .mcontent {
	height: 310px;
	display: block;
	width: 0px;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	z-index: 20;
	
	/* border-left: solid 1px #cecece; */
}

.yearcontainer .content .title {
	position: absolute;
	z-index: 1;
	margin-top: 300px;
	opacity: 0;
	color: #979797;
	padding: 0px;
}

.yearcontainer .content .description {
	position: absolute;
	z-index: 2;
	width: 295px;
	margin-top: 190px;
	opacity: 0;
	padding: 0px;
	visibility: hidden;
}

.yearcontainer .content .openmovie {
	position: absolute;
	z-index: 2;
	width: 30px;
	margin-left: 295px;
	margin-top: 277px;
	opacity: 0;
	padding: 0px;
}
.yearcontainer .content .openmovie img {
	width: 7px;
	height: 10px;
}

.yearcontainer .content .production {
	position: absolute;
	z-index: 3;
	width: 300px;
	margin-top: -17px;
	text-align: right;
	opacity: 0;
	padding: 0px;
}

.yearcontainer  .title h4, .yearcontainer  .description h4{
	color: #FFC20F;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-weight: normal;
}

/* production caption (name, director, duration,...) */
.caption {
	margin: 0px;
	height: 50px;
/* 	color: #979797; */
	color: #000;
}
.yearcontainer .caption h4 {
	color: #FFC20F;
	font-size: 14px;
	margin: 0px 10px 0px 0px;
	font-weight: normal;
}

.submenu {
	/* vertical-align: bottom; */
	margin: 50px 10px 0px 0px;
	/* float: left; */
	width: 130px;
	text-align: right;
	/* bottom: 0px; */
	position: absolute;
	line-height: 20px;
}

.submenu a:hover {
	color: #FFC20F;
	/* color: transparent;
	text-shadow: -2px 0 1px rgba(0,0,0,0.9), 2px 0 1px rgba(0,0,0,0.9); */
}

/* detail part for movie info (submenu and content) */
.display {
	padding: 0px 10px 0px 10px;
	margin-left: 140px;
	height: 300px;
	/* border-left: solid 2px #CECECE; */

	/* background-color: #444; */
	/* width: 400px; */
}

.yearcontainer .content .movie .mainpic {
	width: 515px;
	height: 290px;
	max-width: 515px;
	max-height: 290px;
	cursor: pointer;
	float: left;
	
}

.imgdiv {
/* 	max-width: 515px;
	max-height: 290px; */
	/*box-shadow: 3px 3px 3px #333;*/
	overflow: hidden;
	background-attachment: left top;
	background-repeat: no-repeat;
	float: left;
	margin: 0px;
}

#left, #right {
	display: inline;
	width: 30px;
	height:15px;
	cursor: pointer;
	position: absolute;
	top: 568px;
	background-size: 30px 15px;
}

#left {
	left: 10px;
	background-image: url('../img/pijl_links.png');
}
#right {
	right: 10px;
	background-image: url('../img/pijl_rechts.png');
	
}


#mainmenu {
	position: absolute;
	left: 100px;
	top: 140px;
	font-size: 15px;
	letter-spacing: 2px;
	
}
#mainmenu a{
	color: #161616;
	font-weight: lighter; 
}

#pagecontainer, #newsdetail {
	display: none;
	position: absolute;
	top: 170px;
	left: 0px;
	width: 100%;
	height: 360px;
}
#pagecontainer{
	opacity: 1;
	z-index: 200;
}
#newsdetail {
	display: none;
	z-index: 201;
	opacity: 0;
}
	
.pages {
	display: none;
}

.subpage {
	float: left;
	display: inline-block;
	width: 515px;
	height: 360px;
	overflow: hidden;
	padding-right: 5px;
	margin-left: 100px;
}

.pagecontent {
	overflow: auto;
	width: 100%;
	margin-top: 30px;
	height: 310px;
	/* border: solid 1px; */
}

.mainsubmenu {
	position: absolute;
	top: 20px;
	left: 650px;
	width: 200px;
	padding-top: 50px;
	font-size: 14px;
}

.mainsubmenu a {
	display: block;
	padding-bottom: 4px;
}

.mainsubmenu a:hover {
	color: #FFC20F;
}

.pages .image {
	position: absolute;
	width: 515px;
	height: 290px;
	overflow: hidden;
	top: 20px;
	left: 850px;
	/*box-shadow: 2px 2px 2px #000;*/
}

.pages .image img{
	max-width: 515px;
}

.subpage h4 {
	color: #979797;
	font-size: 16px;
	font-weight: normal; 
	margin: 10px 0px 10px 0px;
}

/* begin selectboxen */

/* wrapper voor alle filter/selectboxen samen zodat we dat makkelijk kunnen manipuleren */
#filters{
	position: absolute;
	top: 564px;
	left: 100px;
}

/* de items in de dropdown lijst */
select.filter option {
	padding: 3px 3px 3px 3px;
	font-size: 12px;
	-webkit-appearance: none;
	background-color: none;
}

/* wrapper div voor een selectbox, 20 px smaller dan de selectbox zelf met een hidden overflow
   komt erop neer dat we de selectbox in een div stoppen, vervolgens in de div maar bovenop de selectbox een kleine div om het plaatje te vervangen.
   op web komen we vaak pijl als achtergrod tegen maar dat werkt niet goed in de courante browsers.
*/
.selectwrapper {
	float: left;
	overflow: hidden;
	width: 170px;
	height: 19px;
	/* border: solid 1px #CECECE; */
	border: none;
	cursor: pointer;
	
	margin-right: 40px;
	border-radius: 2px;
}

/* dit is het plaatje/pijltje wat we laten zien ipv de originele */
.selectwrapper div{
	pointer-events: none;
	margin-left: 180px;
	z-index: 100;
	position: absolute;
	/* background-image: url('/img/pijltje_ddbox.png');  */
	/* background-image: url('/img/select-icons.png'); */
	background-position: -7px -22px;
	background-position: -7px -122px; 
	background-repeat: none;
	width: 0px;
	height: 19px;
}

/* hover effect voor pijltje */
.selectwrapper:hover  > div, .selectwrapper div:hover {
	/* background-position: -7px -72px;
	background-position: -7px -172px; */
}

/* selectbox zelf 
 
   beetje een hack: voor safari voeg webkit appearance toe

*/
select.filter {
	-webkit-appearance: none;
	webkit-box-shadow: none;;
    -webkit-border-radius: none;
    position: relative;
    top: -2px;
    left: -2px;
	width: 220px;
	padding: 3px 0px 0px 15px;
	font-size: 12px;
	background-color: #444 !important;
	color: #000;
	z-index: 50;
	height: 23px;
	border: none;
}
/* einde selectboxen  */



/* read more for standard pages, news and newsletters*/
.readmore, .readmore2 {
	text-align: right;
	border-bottom: dotted 1px #CECECE;
	padding-bottom: 5px;
	padding-top: 5px;
}

.readmore a, .readmore2 a{
	color: #FFC20F;
 }

.goback {
	text-align: right;
}

/* subscriptionform */
form#subscribeform  {
	padding-top: 50px;
}
form#subscribeform  table tr td:first-child {
	width: 80px;
}

a.google, a.fb, a.twitter, a.lin{
	width: 25px;
	height:25px;
	display: inline-block;
	background-image: url('../img/ap_icons_white_social.png');
	/* background-image: url('../img/ap_icons_black_social.png'); */
}

a.google:hover, a.fb:hover, a.twitter:hover, a.lin:hover{
	background-image: url('../img/ap_icons_white_social.png');
}

a.fb {background-position: -33px 0px;}
a.google {background-position: -66px 0px;}
a.twitter {background-position: 0px -0px;}
a.lin {background-position: -100px -0px;}

.sociallinks{
	text-align: right;
	margin-top: 2px;
	margin-right: 10px;
	display: none;
}

.newscontent h4 {
	color: #FFC20F;
}

.newscontent .readmore a {
	color: #FFC20F;
}

.pages .pagecontent h4 {
	color: #FFC20F !important;
}
.openmovie {
	cursor: pointer;
}

.sociallinksfooter{
	position: absolute;
	right: 30px;
	top: 80px;
}

.pagecontent h4:first-child,
p {
	margin-top: 0;
}

.pagecontent h4 {
}