/*
 *   PANOPTIC
 *
 *   Stylesheet for screen and projection
 *   
 *   /styles/panoptic-screen.css
 *
 *   vizi | vorm geven aan inhoud
 *
 *   V0.1 - 18/05/2007 - Jeroen Visser
 *   V0.2 - 09/07/2007 - Jeroen Visser
 *
 *********************************************************** */



/*  CLEAN START
-------------------------------------------- */
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, img, 
table, tr, th, td, form, fieldset, legend, button, div, object
{
	margin:0;padding:0;border:0;list-style:none;font:normal 11px/1.5 arial,helvetica,geneva,sans-serif;text-align:left;vertical-align:top;
}

input, select, textarea, button
{
	font:normal 100% verdana,helvetica,arial,sans-serif;
}

h1
{
	font-size: 100%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.25;
}

h1 span
{
	font-weight: normal;
}

h2
{
	margin-top: .5em;
	font-weight: bold;
}

p, address
{
	margin-bottom: .5em;
}

p.keyinfo
{
	color: #374d5d;
	font-size: 90%;
	text-transform: uppercase;
	letter-spacing: .05em;
}

p.setapart
{
	margin-top: 1.5em;
}

dl, dt, dd
{
	margin: 0;
}

dt
{
	color: #374d5d;
	font-size: 90%;
	text-transform: uppercase;
	letter-spacing: .05em;
}

dd
{
	margin-bottom: .5em;
}

address
{
	font-style: normal;
	line-height: 1.5;
}

a
{
	color: #374d5d;
	text-decoration: none;
}

a:visited
{
	color: #8e9aa7;
}

a:hover, a:focus
{
	color: #566878;
	text-decoration: underline;
}

/*  BASE DEFINITIONS
-------------------------------------------- */
html
{
	width: 100%;
	height: 100%;
}

body
{
	width: 100%;
	height: 100%;
	background: #374d5d;
}

#wrap
{
	width: 920px;
	height: 100%;
	min-height: 652px;
	position: relative;
	margin: 0 auto;
	background: #ffffff;
}

/*  COMMON CLASSES
-------------------------------------------- */
.hidden
{
	position: absolute;
	top: -10000px;
}



/*  HEADER: PRINT & SCREEN LOGOS
-------------------------------------------- */
#header
{
	width: 920px;
	border-top: 15px solid #374d5d;
}

#header div
{
	width: 900px;
	height: 100px;
	margin: 0;
	border: 10px solid #ffffff;
	border-bottom-width: 0;
	background: #374d5d url(../images/bg-colorbar.gif) no-repeat left bottom;
	color: #ffffff;
}

#header #logo-print
{
	display: none;
}

#header a
{
	display: block;
	position: absolute;
}

#header a span
{
	position: absolute;
	top: -10000px;
}

#header a#logo-screen
{
	width: 202px;
	height: 49px;
	top: 43px;
	left: 35px;
	background: url(../images/panoptic-logo-screen.gif) no-repeat;
}

#header a#mailto
{
	width: 110px;
	height: 15px;
	top: 39px;
	right: 35px;
	background: url(../images/panoptic-email.gif) no-repeat;
}


/*  MAIN MENU
-------------------------------------------- */
#menu
{
	display: block;
	width: 900px;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 10px;
	border-bottom: 15px solid #374d5d;
	background: url(../images/bg-colorbar.gif) repeat-y 10px 0;
}

#menu h2
{
	position: absolute;
	top: -10000px;
	height: 0;
}

#menu ul
{
	display: block;
	width: 900px;
	position: relative;
	border-bottom: 10px solid #ffffff;
}

#menu ul:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#menu li
{
	display: block;
	float: left;
	margin: 0 0 0 3px;
}

#menu li a
{
	display: block;
	padding-bottom: 17px;
	border-bottom-width: 0;
	border-bottom-style: solid;
	text-decoration: none;
}

#menu li#menu-1 a { border-bottom-color: #000000; }
#menu li#menu-2 a { border-bottom-color: #8e9aa7; }
#menu li#menu-3 a { border-bottom-color: #434549; }
#menu li#menu-4 a { border-bottom-color: #000000; }
#menu li#menu-5 a { border-bottom-color: #6c7c8b; }
#menu li#menu-6 a { border-bottom-color: #566878; }
#menu li#menu-7 a { border-bottom-color: #374d5d; }
#menu li#menu-8 a { border-bottom-color: #6f7072; }

#menu li.over a, #menu li.over a:focus, #menu li.active a
{
	padding-bottom: 5px;
	border-bottom-width: 12px;
	background-color: #ffffff;
	text-decoration: none;
}

#menu li ul
{
	position: absolute;
	bottom: 10000px;
	left: 0;
	z-index: 200;
	width: 900px;
	padding: .8em 0 .7em;
	border-bottom: 0;
	background: #ffffff url(../images/bg-colorbar.gif) no-repeat 0 -13px;
}

#menu li ul li
{
	display: block;
	float: none;
	margin: 0;
	border: 0;
	padding: .5em 0;
	background: #ffffff;
}

#menu li#menu-1 li { padding-left: 13px; }
#menu li#menu-2 li { padding-left: 125px; }
#menu li#menu-3 li { padding-left: 263px; }
#menu li#menu-4 li { padding-left: 407px; }
#menu li#menu-5 li { padding-left: 519px; }
#menu li#menu-6 li { padding-left: 612px; }
#menu li#menu-7 li { padding-left: 720px; }
#menu li#menu-8 li { padding-left: 799px; }

#menu li ul li a, #menu li.over ul li a, #menu li.active ul li a
{
	display: inline;
	border: 0;
	color: #223542;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
}

#menu li.active ul li.active a {
	color: #223542; /* Nog een donkerder blauw voor nemen! */
	font-weight: bold;
	letter-spacing: .05em;
}

#menu li ul li a:hover, #menu li ul li a:focus,
#menu li.active ul li a:hover, #menu li.active ul li a:focus
{
	border: 0;
	color: #374d5d;
	text-decoration: underline;
}

#menu li.over ul
{
	bottom: 40px;
}


/*  CONTENT
-------------------------------------------- */
#content
{
	padding: 0 10px 82px;
}

#content .details
{
	float: right;
	width: 260px;
	height: 415px;
	position: relative;
	margin: 0;
}

#content .details div
{
	height: 375px;
	overflow: auto;
	padding: 40px 60px 0 0;
}

#content .details div div
{
	height: auto;
	padding: 0;
}

#content .visuals
{
	width: 500px;
	height: 375px;
	position: relative;
	padding: 40px 0 0;
	margin-left: 112px;
}

#content .details ul
{
	margin-bottom: .5em;
}


/*  SLIDESHOW & PROJECT NAVIGATION
-------------------------------------------- */
#slideshow p
{
	padding-top: 9px;
}

#slideshow ul, #enlarge, #projectnav
{
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 100;
	overflow: hidden;
	margin: 0 !important;
	padding: 5px 15px 0 0;
	background: #FFF;
}

#enlarge
{
	left: auto;
	right: 0;
	padding: 5px 0 0 0;
}

#slideshow ul li, #projectnav li
{
	float: left;
	list-style: none;
}

#slideshow ul a, #enlarge a, #projectnav a
{
	display: block;
	height: 10px;
	width: 10px;
	margin-right: 5px;
	background-color: #8e9aa7;
	cursor: pointer;
}

#enlarge a
{
	margin-right: 0;
	background-image: url(../images/bg-li-slideshow-enlarge.gif);
	background-repeat: no-repeat;
}

#slideshow ul a.prev, #projectnav a.prev
{
	background-image: url(../images/bg-li-slideshow-prev.gif);
	background-repeat: no-repeat;
}
#slideshow ul a.next, #projectnav a.next
{
	background-image: url(../images/bg-li-slideshow-next.gif);
	background-repeat: no-repeat;
}


/* Slideshow controls */
#slideshow ul #control
{
	padding-left: 15px;
}

#slideshow ul a.on
{
	background-image: url(../images/bg-li-slideshow-pause.gif);
	background-repeat: no-repeat;
}
#slideshow ul a.off
{
	background-image: url(../images/bg-li-slideshow-next.gif);
	background-repeat: no-repeat;
}



#slideshow ul a.active, #slideshow ul a:hover,
#enlarge a.active, #enlarge a:hover,
#projectnav a.active, #projectnav a:hover
{
	background-color: #374d5d;
}

/* Numbering of project navigation */
#projectnav a   { background-repeat: no-repeat; }
#projectnav-1 a { background-image: url(../images/bg-li-projectnav-1.gif); }
#projectnav-2 a { background-image: url(../images/bg-li-projectnav-2.gif); }
#projectnav-3 a { background-image: url(../images/bg-li-projectnav-3.gif); }
#projectnav-4 a { background-image: url(../images/bg-li-projectnav-4.gif); }
#projectnav-5 a { background-image: url(../images/bg-li-projectnav-5.gif); }
#projectnav-6 a { background-image: url(../images/bg-li-projectnav-6.gif); }
#projectnav-7 a { background-image: url(../images/bg-li-projectnav-7.gif); }
#projectnav-8 a { background-image: url(../images/bg-li-projectnav-8.gif); }
#projectnav-9 a { background-image: url(../images/bg-li-projectnav-9.gif); }




/*  IMAGE ENLARGMENTS W/ LYTEBOX
-------------------------------------------- */
#lbOverlay { position: absolute; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; background-color: #ffffff; background-color: #374d5d; }
#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterImageContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
#lbImageDataContainer {	font: 10px Arial, Helvetica, Geneva, sans-serif; background: #ffffff url(../images/bg-colorbar.gif) no-repeat -40px 20px; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; border-top: none; }
#lbImageContainer { padding: 10px; }
#lbLoading { position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(../images/loading.gif) center no-repeat; }

#lbImageData { height: 31px; padding: 0; border-left: 10px solid #ffffff; border-right: 10px solid #ffffff; }

#lbImageDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }

#lbClose { width: 10px; height: 10px; float: right; margin-bottom: 1px; background-color: #8e9aa7; background-image: url(../images/close.gif); background-repeat: no-repeat; }
#lbClose:hover { background-color: #374d5d; }


/*  GOOGLE MAP W/ AARDVARKMAPS
-------------------------------------------- */
.address
{
	width: 500px;
	height: 375px;
	overflow: hidden;
}

#slideshow iframe
{
	display: block;
	width: 582px;
	height: 425px;
	position: relative;
	top: -1px;
	left: -10px;
	border: 0;
	margin: 0;
}

address span.street-address
{
	display: block;
}