/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/drops/pro_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
@charset "utf-8";
body {
	margin: auto;
	padding: auto;
	background: rgb(255, 255, 255) url(images/bg.png) bottom left repeat-x fixed;
	font-family: "century gothic";
}

h1 {
	font-size: 12px;
	color: #000;
	text-decoration:underline;
}


a:link {
	color: #ce2f00;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #ce2f00;
}
a:hover {
	text-decoration: underline;
	color: #C60;
}
a:active {
	text-decoration: none;
	color: #F90;
}

.ttmain #header {
	width: 1024px;
	height: 311px;
	position: relative;
	margin: auto;
	border: 0px solid #000000;
	background: rgb(255, 255, 255) url(images/header.png);
	
}

.ttmain #container {
	width: 1022px; 
	margin: auto;
	min-height: 400px;
    height: auto !important;
    height: 400px;
	position: relative;
	border: 1px solid #999999;
	background: url(images/trans_spac.png) repeat;


	
}

.ttmain #footer {
	width: 1022px; 
	height: 100px; 
	display:block; 
	margin: auto; 
	text-align: left; 
	font-size:11px; 
	position: relative; 
	text-indent:5px; 
	color:#000; 
	text-decoration:none; 
	border:0px solid #000; 
	border-width:0 0 0 1px;
	background: url(images/trans_spac.png) repeat;
}

.ttmain #container #content {
	padding: auto;
	margin: auto;
	width: 700px; 
	margin-left: 160px;
	margin-bottom: 40px;
	margin-top: 40px;
	text-align:left;
	font-family: "century gothic";
	font-size:13px;

}

#navigation {
	position: absolute;
	width: 396px;
	height: 93px;
	z-index: 1;
	left: 575px;
	top: 158px;
}
	
#date {
	position: absolute;
	width: 170px;
	height: 40px;
	z-index: 2;
	left: 850px;
	top: 7px;
	text-align:left;
	font-family: "century gothic";
	font-size:30px;
}

#navigation .pad {float:left;}
#navigation .pad2 {float:left;}

/* The drop styling */
/* Remove the padding, margins and bullets from the lists */
.drop, .drop ul {
	list-style-type:none;
	padding:0;
	margin:0;
	font-family:arial, sans-serif;
	text-align: right;
}

/* Set up the top level list items and float left to place inline */
.drop li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the drop function. The font size is necessary for IE5.5 */
.drop table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.drop li.top a.top_link {display:block; float:left; height:35px;}
.drop li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */

.drop li.p1 {width:89px; background:url(nl/img/progr2.png) no-repeat;}
.drop li.p2 {width:89px; background:url(nl/img/artist2.png) no-repeat;}
.drop li.p3 {width:89px; background:url(nl/img/pract2.png) no-repeat;}
.drop li.p4 {width:89px; background:url(nl/img/organi2.png) no-repeat;}


/* set up the normal unhovered images in the links */

.drop li a#program {width:89px; background:url(nl/img/progr1.png) no-repeat;;}
.drop li a#artists{width:89px; background:url(nl/img/artist1.png) no-repeat;;}
.drop li a#practical {width:89px; background:url(nl/img/pract1.png) no-repeat;;}
.drop li a#organisation{width:89px; background:url(nl/img/organi1.png) no-repeat;;}


/* Style the list OR link hover. Depends on which browser is used */
.drop a:hover {visibility:visible;} /* for IE6 */
.drop li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */

.drop li a#program:hover, .drop li:hover a#program,
.drop li a#artists:hover, .drop li:hover a#artists,
.drop li a#practical:hover, .drop li:hover a#practical,
.drop li a#organisation:hover, .drop li:hover a#organisation {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.drop ul, 
.drop :hover ul ul, 
.drop :hover ul :hover ul ul,
.drop :hover ul :hover ul :hover ul ul,
.drop :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.drop :hover ul.sub {left:0; top:35px; padding:3px 0; white-space:nowrap; width:93px; height:auto;}
.drop :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.drop :hover ul.sub li a {display:block; text-align: left; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#fff; text-decoration:none; border:3px solid #fff; border-width:0 0 0 2px;}
.drop :hover ul.sub li a:hover { color:#fff; text-decoration:underline}