/* 
	v1.0	18 mei 2010			creatie
	v1.1	7 september 2010	#menu-cultuur li:first-child a
*/

@import url("reset.css");

body,html {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
}
#wrapper {
	margin: 25px;
}
#container {
	width: 882px;
	border:1px solid black;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	height: 730px;
	background-color:white;
}
#main-navigation {
	width:824px;
	height:114px;
	background-color:#e51937;
	margin: 15px 15px 15px 15px;
	padding: 14px;
	background-image: url(../images/bg-main-navigation.png);
	background-repeat: repeat-y;
	font-size:10px;
	line-height: 16px;
	text-transform: uppercase;
}
#menu-logo {
	width:256px;
	padding-right:14px;
	float:left;
}
#menu-cultuur {
	width:114px;
	padding-left:14px;
	padding-right:14px;
	float:left;
}
#menu-horeca {
	width:114px;
	padding-left:14px;
	padding-right:14px;
	float:left;
}
#menu-gebouwen {
	width:114px;
	padding-left:14px;
	padding-right:14px;
	float:left;
}
#menu-algemeen {
	width:114px;
	padding-left:14px;
	float:left;
}
#menu-cultuur li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#000;
}
#menu-horeca li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#000;
}
#menu-gebouwen li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#000;
}
#menu-algemeen li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#000;
}
#menu-cultuur li, menu-horeca li, menu-gebouwen li, menu-algemeen li {
	list-style: none;
	color:#fff;
}
#menu-cultuur li:first-child a, #menu-horeca li:first-child a, #menu-gebouwen li:first-child a, #menu-algemeen li:first-child a {
	text-decoration: none;
	color:#000;
}
#menu-cultuur li:first-child a:hover, #menu-horeca li:first-child a:hover, #menu-gebouwen li:first-child a:hover, #menu-algemeen li:first-child a:hover {
	border-bottom: 1px solid #000;
	padding: 2px 0 2px 0;
}
#menu-cultuur a, #menu-horeca a, #menu-gebouwen a, #menu-algemeen a {
	text-decoration: none;
	color:#fff;
}
#menu-cultuur a:hover, #menu-horeca a:hover, #menu-gebouwen a:hover, #menu-algemeen a:hover {
	border-bottom: 1px solid #fff;
	padding: 2px 0 2px 0;
}
#main-teasers{
	background-image: url(../images/bg-main-teasers.png);
	background-repeat: repeat-y;
	margin-left:14px;
	margin-bottom:15px;
	height:255px;
}
#main-teasers li{
	list-style: none;
	padding-left:14px;
	padding-right:14px;
	float:left;
}
#main-teasers span.date {
	padding-top:4px;
	color:#e51937;
	width:256px;
	clear:both;
	font-weight:normal;
	font-size:11px;
	line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#main-teasers span.performer {
	color:#000;
	width:256px;
	clear:both;
	font-weight:bold;
	font-size:11px;
	line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#main-teasers span.title {
	color:#000;
	width:256px;
	clear:both;
	font-weight:normal;
	font-size:11px;
	line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#main-teasers span.rate {
	color:#000;
	width:256px;
	clear:both;
	font-style:italic;
	font-size:11px;
	line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#sub-teasers{
	background-image: url(../images/bg-sub-teasers.png);
	background-repeat: repeat-y;
	margin-left:14px;
	height:122px;
}
#sub-teasers li{
	list-style: none;
	padding-left:14px;
	padding-right:14px;
	float:left;
}
#sub-teasers span.date {
	color:#e51937;
	font-weight:normal;
	font-size:11px;
	width:114px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#sub-teasers span.performer {
	color:#000;
	width:114px;
	clear:both;
	font-weight:bold;
	font-size:11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#sub-teasers span.rate {
	color:#000;
	width:114px;
	clear:both;
	font-style:italic;
	font-size:11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
#sub-teasers img{
	 width:114px;
	 height:80px;
	 border:0;
}
#footer {
	width:824px;
	height:110px;
	background-color:#000;
	margin: 15px 15px 15px 15px;
	padding: 14px;
	background-image: url(../images/bg-footer.png);
	background-repeat: repeat-y;
	font-size:11px;
	line-height: 16px;
}
#expositie li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#e51937;
	text-transform: uppercase;
}
#expositie {
	width:114px;
	padding-right:14px;
	float:left;
}
#expositie a {
	text-decoration: none;
	color:#e51937;
}
#expositie a:hover {
	border-bottom: 1px solid #e51937;
	padding: 2px 0 2px 0;
}
div.footer {
	width:114px;
	padding-left:14px;
	padding-right:14px;
	height:124px;
	float:left;
}
div.footer li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#fff;
	text-transform: uppercase;
}
#bijzonder {
	width:114px;
	padding-left:14px;
	float:left;
}
#bijzonder li:first-child {
	padding-bottom:12px;
	list-style: none;
	font-weight:bold;
	color:#fff;
	text-transform: uppercase;
}
#vandaag a, #speciaal a, #aktueel a, #bijzonder a {
	text-decoration: none;
	color:#fff;
}
#vandaag a:hover, #speciaal a:hover, #aktueel a:hover, #bijzonder a:hover {
	border-bottom: 1px solid #fff;
	padding: 2px 0 2px 0;
}
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 855px;
	height:255px;
}

.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:852px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	width:256px;
	height:198px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}