@charset "utf-8";

html, body{ margin:0; padding:0; background: #FFF url("../gfx/background.jpg") no-repeat center 31px; text-align:center; border:none; height:100%; font-family: Arial; font-size: 12px;}

img{ border:0; }

#rect_top{ position:absolute; height: 20px; width:100%; background:rgb(255,255,255); top:0px; }
#rect_right{ position:absolute; height: 230px; width:50%; background:rgb(102,90,42); top:20px; text-align:right; right:0; }
#rect_left{ position:absolute; height: 230px; width:50%; background:rgb(44,93,160); top:20px; text-align:left; left:0; }

#wrapper{
 position:relative;
 width:980px;
 margin:auto;
 min-height:100%;
 height:auto !important;
 height:100%;
 overflow:visible;
 z-index:3;
 display:table;
}

#left_column {
	width: 248px;
	float: left;
	padding-top: 103px;
	padding-left: 25px;
}
#right_column {
	width: 692px;
	float: left;
	padding-top: 70px;
	padding-left: 15px;
	text-align: left;
}

#hbb_logo {
	position: absolute;
	width: 314px;
	height: 37px;
	margin-top: -63px;
	margin-left: -63px;
}

#search {
	width: 199px;
	height: 26px;
	background-image: url(../gfx/search_bg.png);
	background-repeat: no-repeat;
	margin-bottom: 15px;
}

#search input[type=text] {
	background: transparent;
}

#top_intro {
	width: 648px;
	height: 197px;
	margin-bottom: 25px;
}

#top_intro #slider {
	position: absolute !important;
	width: 473px;
	height: 197px;
	z-index: 1;
	overflow: hidden;
}

#top_intro #webcam_1,
#top_intro #webcam_2,
#top_intro #webcam_3 {
	display: none;
	position: absolute !important;
	width: 473px;
	height: 197px;
	z-index: 10;
	overflow: hidden;
}

#top_intro #overlay {
	position: absolute;
	width: 147px;
	height: 189px;
	padding-left: 81px;
	padding-top: 8px;
	margin-left: 420px;
	z-index: 15;
	background-image: url(../gfx/top_intro_right.png);
	background-repeat: no-repeat;
	font-size: 11px;
}

#top_intro #overlay .overlay_title {
	font-size: 12px;
}

#top_intro #overlay ul {
	margin: 0;
	padding: 0 0.5em;
	list-style-type: none;
	list-style-image: url(../gfx/arrow.png);
}

#top_intro #overlay ul li {
	margin-bottom: 5px;
	cursor: pointer;
}

#menu {
	width: 164px;
	background-image: url(/gfx/menuvlak_top.png);
	background-repeat: no-repeat;
	padding: 10px 17px;
	text-align: left;
}

#menu #hilversum_logo {
	width: 164px;
	height: 20px;
	padding-top: 20px;
	margin-bottom: 30px;
	text-align: right;
	background-image: url(/gfx/hsum_logo.png);
	background-repeat: no-repeat;
}

#menu #hilversum_logo a {
	color: #000;
	font-size: 11px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu ul li {
	width: 163px;
	min-height: 22px;
        margin: 8px 0;
}

#menu ul li a {
	display: block;
        width: 143px;
        height: 16px;
        padding: 3px 10px;
        background-image: url(/gfx/menu_item.png);
        background-repeat: no-repeat;
	color: #000;
}

#menu_1 {
	margin-bottom: 30px !important;
}

#menu_1 li {
}

#menu ul li:hover a,
#menu ul li a:hover,
#menu ul li.active a {
	background-image: url(/gfx/menu_item_hover.png);
	color: #ffcc00;
}

#menu ul li ul li a,
#menu ul li:hover ul li a,
#menu ul li.active ul li a {
	background-image: none;
	color: #34629d;
}

#menu ul li ul {
	margin-left: 20px;
}

#menu ul li ul li {
	width: 141px;
	height: 22px !important;
	margin: 4px 0 !important;
}

#menu ul li ul li a {
	width: 121px;
}

#menu ul li ul li:hover a,
#menu ul li ul li a:hover,
#menu ul li ul li.active a {
        background-image: url(/gfx/sub_menu_item_hover.png);
	color: #ffcc00;
}

#menu #links {
	margin-top: 40px;
	margin-left: -5px;
	text-align: left;
}


#menu_bottom {
	width: 198px;
	height: 24px;
	background-image: url(/gfx/menuvlak_bottom.png);
}

#content {
	width: 648px;
}

#twitter {
/*	background-image: url(/gfx/twitter.png); */
	background-position: right 15px;
	background-repeat: no-repeat;
	padding-top: 2px;
	margin-bottom: 30px;
}

#twitter #icon {
	width: 39px;
	height: 37px;
	position: absolute;
	margin-top: -40px;
	margin-left: 590px;
	background-color: transparent !important;
}

#twitter div {
	padding: 5px;
	width: 638px;
	background-color: #f3f9fe;
	font-size: 12px;
	color: #000;
}

#twitter div a {
	color: #4b84ce;
}

#twitter div p {
	margin-top: 0;
	padding-top: 0;
	padding-left: 0;
	height: 12px;
}

#hbb_logos {
	width: 648px;
	height: 380px;
	background-image: url(/gfx/downloads_logos.png);
	margin-bottom: 30px;
}

#logos_link {
	position: absolute;
	width: 118px;
	height: 22px;
	text-decoration: none;
	margin-top: 334px;
	margin-left: 506px;
}

#banners_link {
	position: absolute;
	width: 118px;
	height: 22px;
	text-decoration: none;
	margin-top: 334px;
	margin-left: 506px;
}

#hbb_banners {
	width: 648px;
	height: 380px;
	background-image: url(/gfx/downloads_banners.png);
	margin-bottom: 30px;
}

.numbered_list {
	text-align: center;
}

.numbered_list span {
	display: block;
	width: 20px;
	position: absolute;
	margin-top: 25px;
	margin-left: 6px;
	font-size: 10px;
	color: #FFF;
}

#footer_links {
	margin-top: 20px;
	font-size: 10px;
	margin-bottom: 20px;
	clear: both;
}

#footer_links a {
	color: #000;
	font-size: 10px;
}

.space-0{ position:relative; width:100%; height:2px; background:rgb(255,255,255); overflow:hidden; }

#toplevel-0,#toplevel-1,#toplevel-2,#toplevel-3{
 position:relative;
 width:100%;
 overflow:hidden;
 background:rgb(255,255,255);
}



#toplevel-0{ height:20px; z-index:2; overflow:visible; }
#toplevel-1{ height:228px; }
#toplevel-2{ height:42px; }
#toplevel-3{ height:26px; }
#toplevel-4{ padding-left:3px; padding-right:3px; width:774px; position:absolute; background:rgb(255,255,255) url("../gfx/menu-4-bg.jpg") repeat-y left top; min-height:100%; margin-left:-3px; }

#menu-0,#menu-1,#menu-2,#menu-3{
 position:relative;
 height:100%;
}

#menu-0{ width:148px; background:url("../gfx/banner_01.jpg") no-repeat left top; overflow:visible; float:left; }
#menu-1{ width:626px; background:url("../gfx/menu-2-bg.jpg") no-repeat center top; overflow:hidden; float:right; }
#menu-2{ width:626px; background:rgb(247,199,81); overflow:hidden; text-align:left; float:right; }
#menu-3{ width:134px; background:url("../gfx/menu-4-corner.jpg") no-repeat center top; float:left; overflow:hidden; position:relative; padding-top:12px; text-align:left; position:relative; clear:both; font-family: arial; margin-left: 14px;}
#menu-3 #twitter {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 10px;
}

#menu-3 #twitter li {
	margin-bottom: 10px;
}

#menu-3 #twitter a {
	font-size: 10px;
}

#banner,#link,#image,#content{
 position:relative;
 background:rgb(255,255,255);
 height:100%;
 overflow:visible;
}

/*#flashcard{ width:696px; float:right; z-index:30; position:absolute; overflow:visible; left:0; top: 0; }*/
#flashcard{ width:696px; z-index:30; position:absolute; overflow:visible; margin-left:-20px; top: 0; }
#banner{ width:626px; background:url("../gfx/banner_02.jpg") no-repeat right top; float:right; z-index:1; }
#link{ width:148px; float:left; }
/* #search{ width:146px; background:rgb(195,208,204); float:left; text-align:left; padding-left:2px; padding-top:1px; } */
#image{ width:148px; height:155px; background:url("../gfx/image_01.jpg") no-repeat center top; }
#content-container{ background:rgb(255,255,255) url("../gfx/content-bg.jpg") repeat-x left top; width:465px; text-align:left; bottom:0; position:absolute; overflow:visible; top:0; left:153px; padding:0 5px 0 5px; font-family:arial; color:rgb(51,51,51); font-size:12px; font-weight:normal;}

#map-image{ position:absolute; top:637px; left:0; width:696px; height:41px; }
#map-map{ position:absolute; top:-5px; left:0; width:696px; height:672px; }
#map-container{ position:absolute; top:-668px;/* left:264px; */width:696px; height:725px; overflow:hidden; }

#menu-1-content{ height:228px; width:146px; }
#menu-2-content{ height:42px; width:626px; }
#menu-3-content{ height:26px; width:626px; }
#menu-4-content{ margin-top:14px; margin-bottom: 50px;}
.submenu-4-content{ margin-top:-15px; margin-bottom:15px;}

.menu-1-empty{ height:28px; }
#menu-2-empty{ width:10px; float:left; }
#menu-3-empty{ width:10px; float:left; }
.menu-2-link{ float:right; top:0; }
.menu-2-container,.menu-2-container-on{ float:left; }
.menu-2-container:hover,.menu-2-container-on{ background:rgb(102,90,42); color:rgb(255,255,255); }
.menu-3-container,.menu-3-container-on{ float:left; }
.menu-3-container:hover,.menu-3-container-on{ background:rgb(102,153,0); color:rgb(255,255,255); }

#menu-1-1,#menu-1-2,#menu-1-3,#menu-1-4,#menu-1-5,#menu-1-6,#menu-1-7,#menu-1-8,#menu-1-1-on,#menu-1-2-on,#menu-1-3-on,#menu-1-4-on,#menu-1-5-on,#menu-1-6-on,#menu-1-7-on,#menu-1-8-on{
	height:28px;
	width:146px;
	margin:0;
	position:relative;
	overflow:hidden;
	text-align:right;
}

#menu-1-1{ background:url("../gfx/menu/01_men-1.jpg") no-repeat left top; }
#menu-1-2{ background:url("../gfx/menu/02_men-1.jpg") no-repeat left top; }
#menu-1-3{ background:url("../gfx/menu/03_men-1.jpg") no-repeat left top; }
#menu-1-4{ background:url("../gfx/menu/04_men-1.jpg") no-repeat left top; }
#menu-1-5{ background:url("../gfx/menu/05_men-1.jpg") no-repeat left top; }
#menu-1-6{ background:url("../gfx/menu/06_men-1.jpg") no-repeat left top; }
#menu-1-7{ background:url("../gfx/menu/07_men-1.jpg") no-repeat left top; }
#menu-1-8{ background:url("../gfx/menu/08_men-1.jpg") no-repeat left top; height:34px; }
#menu-1-1:hover,#menu-1-1-on{ background:url("../gfx/menu/01_men-1_over.jpg") no-repeat left top; }
#menu-1-2:hover,#menu-1-2-on{ background:url("../gfx/menu/02_men-1_over.jpg") no-repeat left top; }
#menu-1-3:hover,#menu-1-3-on{ background:url("../gfx/menu/03_men-1_over.jpg") no-repeat left top; }
#menu-1-4:hover,#menu-1-4-on{ background:url("../gfx/menu/04_men-1_over.jpg") no-repeat left top; }
#menu-1-5:hover,#menu-1-5-on{ background:url("../gfx/menu/05_men-1_over.jpg") no-repeat left top; }
#menu-1-6:hover,#menu-1-6-on{ background:url("../gfx/menu/06_men-1_over.jpg") no-repeat left top; }
#menu-1-7:hover,#menu-1-7-on{ background:url("../gfx/menu/07_men-1_over.jpg") no-repeat left top; }
#menu-1-8:hover,#menu-1-8-on{ background:url("../gfx/menu/08_men-1_over.jpg") no-repeat left top; height:34px; }

#quicklink-container{ width:147px; background:url('../gfx/quicklink-bg.jpg') repeat-y center center;  position:absolute; overflow:visible; text-align:left; float:right; top:0px; left:630px; min-height:100%; bottom:0; }

#tab-01,#tab-02,#tab-03,#tab-04,#tab-05,#tab-06,#tab-add {
 width:147px;
 height:102px;
}

#tab-webcam{
 width: 147px;
 height: 120px;
}

#tab-add{ padding-left:2px; text-align:center; }
#tab-01{ background:url('../gfx/tab/tab_01.jpg') no-repeat top right; }
#tab-02{ background:url('../gfx/tab/tab_02.jpg') no-repeat top right; }
#tab-03{ background:url('../gfx/tab/tab_03.jpg') no-repeat top right; }
#tab-04{ background:url('../gfx/tab/tab_04.jpg') no-repeat top right; }

#tab-05{ background:url('../gfx/tab/tab_05.jpg') no-repeat top right; }
#tab-06{ background:url('../gfx/tab/tab_06.jpg') no-repeat top right; }
#tab-webcam{ background:url('../gfx/tab/tab_webcam.jpg') no-repeat top right; text-align: left;}


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}
.nivo-controlNav a {
    width: 17px;
    height: 14px;
    z-index:9;
    cursor:pointer;
    text-indent: -99999px;
    background-image: url(../gfx/slider_nav.png);
    background-repeat: no-repeat;
    display: block;
    float: left;
}
.nivo-controlNav a.active {
    font-weight:bold;
    background-image: url(../gfx/slider_nav_active.png);
}