/* ------------------------------------------------- */
/* DEFAULT RULES
/* ------------------------------------------------- */
html, body { height:100%; }
body { font:11px/18px "Trebuchet MS", Helvetica, Jamrul, sans-serif; color:#1A1A1A; background:#1F1F1F; height:100%; }
h1 { color:#1A1A1A; font-size:12px; line-height:12px; margin-bottom:18px; }
h2 { color:#1A1A1A; font-size:12px; line-height:12px; margin-bottom:12px; }
a { color: #1A1A1A; }
a span { display:none; }

/* ------------------------------------------------- */
/* LAY-OUT RULES
/* ------------------------------------------------- */
#floater { float:left; width:100%; height:50%; margin-bottom:-320px; }
#wrapper { clear:both; width:100%; height:640px; }
#wrapper #header { float:left; padding-left:95px; margin-bottom:60px; margin-top:10px; }
#wrapper #content { float:left; position:relative; width:100%; height:400px; background:#000; }
#wrapper #footer { clear:both; margin-left:95px; padding-top:21px; }

/* ------------------------------------------------- */
/* HEADER RULES
/* ------------------------------------------------- */
#wrapper #header #logo { float:left; display:block; }
#wrapper #header ul { float:left; list-style:none; margin:0; padding:0; margin-top:19px; }
#wrapper #header ul li { display:inline; list-style:none; margin:0; padding:0; }
#wrapper #header ul li a { float:left; display:block; background:url(../img/menu.png); height:17px; width:65px; }
#wrapper #header ul li a span { display:none; }

#wrapper #header ul #btn01 a { background-position:0 0; width:65px; }
#wrapper #header ul #btn02 a { background-position:-65px 0; width:144px; }
#wrapper #header ul #btn03 a { background-position:-209px 0; width:52px; }

#wrapper #header ul #btn01 a:hover { background-position:0 -17px; width:65px; }
#wrapper #header ul #btn02 a:hover { background-position:-65px -17px; width:144px; }
#wrapper #header ul #btn03 a:hover { background-position:-209px -17px; width:52px; }

#wrapper #header ul #btn01 a.current { background-position:0 -17px; width:65px; }
#wrapper #header ul #btn02 a.current { background-position:-65px -17px; width:144px; }
#wrapper #header ul #btn03 a.current { background-position:-209px -17px; width:52px; }

/* ------------------------------------------------- */
/* CONTENT RULES
/* ------------------------------------------------- */
#content #info-pane { position:absolute; padding:30px 30px 20px 25px; width:205px; height:310px; background:#FAFAF9 url(../img/bg-info-pane.png) no-repeat bottom left; z-index:2; }
#content #info-pane h1 { text-transform:uppercase; }
#content #info-pane p { margin-left:20px; color:#6A6969; margin-bottom:20px; }
#content #info-pane a.meer { position:absolute; bottom:20px; left:25px; display:block; width:53px; height:7px; background:url(../img/sprite-nieuws-project.png) no-repeat 0 0; }
#content #info-pane a.meer:hover { background-position:0 -7px; }

#content #info-pane.two { left:260px; background:#FAFAF9 url(../img/bg-info-pane-2.png) no-repeat bottom left; z-index:2; }
#content #info-pane.two #gmap { background: #D0D; height: 310px; border: 1px solid #c5c5c5; }

#scrollable-wrapper { position:relative; padding-left:260px; height:360px; z-index:1; }
#scrollable-wrapper a.navigation { cursor:pointer; position:absolute; display:block; bottom:-29px; left:280px; width:20px; height:16px; background:url(../img/sprite-arrow.png) no-repeat; }
#scrollable-wrapper a.next { left:280px; background-position:0px -16px; }
#scrollable-wrapper a.prev { left:310px; background-position:-20px -16px; }
#scrollable-wrapper a.next:hover { left:280px; background-position:0px 0px; }
#scrollable-wrapper a.prev:hover { left:310px; background-position:-20px 0px; }
#scrollable-wrapper a.disabled { display:none; }

#scrollable-wrapper div.scrollable { float:left; position:relative; width:100%; height:360px; background:#DDD; overflow:hidden; }
#scrollable-wrapper div.scrollable #projects { position:absolute; width:20000em; }
#scrollable-wrapper div.scrollable #projects a.project { float:left; width:220px; height:320px; padding:20px; background:url(../img/bg-project-item.png) -260px 0px; text-decoration:none; }
#scrollable-wrapper div.scrollable #projects a.project:hover { background-position:0 0; }
#scrollable-wrapper div.scrollable #projects a.project img { margin-bottom:12px; }
#scrollable-wrapper div.scrollable #projects a.project h2 { margin-bottom:12px; text-transform:uppercase; }
#scrollable-wrapper div.scrollable #projects a.project p { color:#6A6969; }

#scrollable-wrapper div.scrollable #details { position:absolute; width:20000em; }
#scrollable-wrapper div.scrollable #details a.detail { float:left; overflow:hidden; width:auto; text-decoration:none; height:360px; }
#scrollable-wrapper div.scrollable #details a.detail img { display:block; }

#info-pane-scrollable { position: absolute; width: 260px; height: 360px; background:#FAFAF9 url(../img/bg-info-pane.png) no-repeat bottom left; z-index:2; }
#info-pane-scrollable a.navigation { cursor:pointer; position:absolute; display:block; bottom:-29px; left:0; width:20px; height:16px; background:url(../img/sprite-arrow.png) no-repeat; }
#info-pane-scrollable a.next { left:10px; background-position:0px -16px; }
#info-pane-scrollable a.prev { left:40px; background-position:-20px -16px; }
#info-pane-scrollable a.next:hover { background-position:0px 0px; }
#info-pane-scrollable a.prev:hover { background-position:-20px 0px; }
#info-pane-scrollable a.disabled { display:none; }

#info-pane-scrollable div.scrollable { float:left; position:relative; width:260px; height:360px; overflow:hidden; }
#info-pane-scrollable div.scrollable #news { position:absolute; width:20000em; }
#info-pane-scrollable div.scrollable #news div.item { float: left; display: block; padding: 30px 30px 20px 25px; height: 310px; width: 205px; } 
#info-pane-scrollable div.scrollable #news h2 { margin-bottom:12px; text-transform:uppercase; }
#info-pane-scrollable div.scrollable #news p { color:#6A6969; }