/* 

Juni 2008
Door : Koen Haarbosch  |  Bit Squad

*/

/* --------------------------------------------- // -------- ALGEMENE SITE */

*
{
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    border: 0;
}

a:link
{
    color: #000000;
    text-decoration: underline;
}
/*  niet bezochte link */
a:hover
{
    color: #000000;
    text-decoration: none;
}
a:active{
    outline: none;
}
/*  roll over  */

body
{
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 100%; /* font-size wordt op 100% van de browser instellingen van de gebruiker gezet, deze grootte wordt dus overgenomen */
    background: #FFFFFF url(/grafx/bg_body.gif) repeat-x 0px 0px;
}
.clear
{
    clear: both;
    height: 0px;
    font-size: 1px;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
#wrapper
{
    width: 986px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: left;
}

#address
{
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.7em;
    color: #868789;
}
#address a
{
    text-decoration: none;
    color: #868789;
}

/* --------------------------------------------- // -------- Instellen Fonts */
#breadcrumb, #back_print, #language, #content
{
    font-size: 0.75em;
}
#menu, #video, .txtSearch, .txtSearch_large, #articles, #downloads
{
    font-size: 0.7em;
}
#content h1
{
    font-size: 1.6em;
}
#content h2
{
    font-size: 1.4em;
}
#content h3
{
    font-size: 1.2em;
}

/* --------------------------------------------- // -------- Header */
#header
{
    float: left;
    width: 986px;
    height: 39px;
    background: #FFFFFF url(/grafx/bg_header.gif) no-repeat 0px 0px;
}
#address
{
    float: left;
    width: 421px; /* 781 */
    height: 26px;
    padding: 13px 0 0 360px;
}
#language
{
    float: left;
    width: 177px;
    height: 39px;
    line-height: 39px;
    text-align: right;
    padding: 0 28px 0 0;
}
#language a
{
    text-decoration: none;
    font-weight: bold;
    margin: 0 5px 0 5px;
    color: #646466;
}
#language a.active
{
    color: #009EE1;
}
#language a:hover
{
    text-decoration: underline;
}
#headerMain
{
    float: left;
    width: 986px;
    height: 192px;
    background: #FFFFFF url(/grafx/bg_headerMain.jpg) no-repeat 0px 0px;
}
#lefttop
{
    float: left;
    width: 165px;
    height: 22px;
    padding: 150px 0 0 45px;
}
img#placeholder
{
    margin: 84px 0 0 12px;
}

.txtSearch, .txtSearch_large, .txtSearch2
{
    float: left;
    width: 120px;
    height: 19px;
    padding: 4px 3px 0 4px;
    background: #FFFFFF url(/grafx/bg_search_box.gif) no-repeat 0px 0px;
}
.txtSearch_large
{
    width: 139px;
    background: #FFFFFF url(/grafx/bg_search_box_large.gif) no-repeat 0px 0px;
}
.search_button
{
    float: left;
}
#visual
{
    float: left;
    width: 571px;
    height: 192px;
    background: url(/grafx/visual.jpg) no-repeat 0px 0px;
}
#righttop
{
    float: left;
    width: 178px;
    height: 135px;
    padding: 38px 0 0 27px;
}
#righttop img.name
{
    margin: 10px 0 0 0;
}

/* --------------------------------------------- // -------- Breadcrumb */

#breadcrumbContainer
{
    float: left;
    width: 986px;
    height: 55px;
    background: #FFFFFF url(/grafx/bg_breadcrumb.jpg) no-repeat 0px 0px;
}
#logo
{
    float: left;
    width: 163px; /* 210 */
    height: 55px;
    padding: 0 0 0 47px;
}
#breadcrumb
{
    float: left;
    width: 435px; /* 450 */
    height: 55px;
    line-height: 55px;
    padding: 0 0 0 15px;
    color: #0FA3E2;
}
#breadcrumb span
{
    color: #646466;
}
#breadcrumb a
{
    color: #646466;
}
#breadcrumb span
{
    margin: 0 5px 0 5px;
}
#back_print
{
    float: left;
    width: 100px;
    height: 55px;
    line-height: 55px;
    text-align: right;
}
#back_print a
{
    margin: 0 5px 0 5px;
    color: #646466;
}
#search2
{
    float: left;
    height: 30px;
    margin: 15px 0 0;
    padding: 0 0 0 20px;
    width: 200px;
}
#search2 .txtSearch, #content .txtSearch
{
    background: url("/grafx/bg_search_box.gif") no-repeat scroll 0 0 #FFFFFF;
    color: #87888A;
    float: left;
    height: 27px;
    padding: 0px 3px 0 10px;
    width: 140px;
}
#search2 .txtSearch2, #content .txtSearch2
{
    background: url("/grafx/bg_search_box.gif") no-repeat scroll 0 0 #FFFFFF;
    color: #87888A;
    float: left;
    height: 27px;
    padding: 0px 3px 0 10px;
    width: 140px;
}
#search2 .search_button
{
    float: left;
}
/* --------------------------------------------- // -------- ColumnContainer */

#columnContainer
{
    float: left;
    width: 986px;
    background: url(/grafx/bg_columnContainer.gif) repeat-y top left;
}

/* --------------------------------------------- // -------- colLeft */

#colLeft
{
    float: left;
    width: 210px;
}
#menu
{
    float: left;
    width: 210px;
    margin: 0 0 75px 0;
}
#menu ul
{
    list-style: none;
    padding: 0px;
    margin: 3px 0 0 0;
}
#menu ul ul
{
    margin: 0;
}
#menu li
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav a
{
    display: block;
    float: left;
    width: 167px;
    text-decoration: none;
    color: #9C9D9F;
    letter-spacing: 0.1em;
    padding: 7px 5px 7px 38px;
    margin: 0;
    border: 0;
    background: url(/grafx/bg_menu_item.gif) no-repeat 0px 0px;
}
#nav a:hover, #nav a.active
{
    color: #FFFFFF;
    background: url(/grafx/bg_menu_item_over.gif) no-repeat 0px 0px;
}


/* Submenu */
#nav li ul
{
    /*display: none;*/
}
#nav li span.opened ul
{
    display: block;
}
#nav li li a
{
    display: block;
    float: left;
    width: 157px;
    text-decoration: none;
    color: #9C9D9F;
    background: #FFFFFF url(/grafx/bg_submenu_item.gif) no-repeat 0 0;
    letter-spacing: 0.1em;
    margin: 0;
    padding-left: 48px;
    border: 0;
}
#nav li li a:hover, #nav li ul li a.active
{
    color: #2D2C2F;
    background: url(/grafx/bg_submenu_item_over.gif) no-repeat 0 0;
}
#nav li
{
    float: left;
    cursor: default;
    padding: 0;
    margin: 0;
}
#nav li li
{
    display: block;
    float: left;
    clear: left;
    padding: 0;
    margin: 0;
    border: 0;
}
#nav li.footer
{
    float: left;
    width: 210px;
    height: 16px;
    background: url(/grafx/bg_menu_footer.gif) no-repeat 0 0;
}

#menuExtra
{
    padding: 20px 0 50px 38px;
}
#menuExtra a
{
    color: #9C9D9F;
}
/* --------------------------------------------- // -------- colMiddle */

#colMiddle
{
    float: left;
    width: 571px;
}
#content
{
    float: left;
    width: 499px; /* 571 */
    line-height: 1.4em;
    padding: 29px 40px 30px 32px;
}
#content h1
{
    display: block;
    color: #646466;
    margin: 0 0 20px 0;
}
#content h2
{
    color: #646466;
}
#content h3
{
    color: #646466;
}
#content p
{
    margin: 10px 0 10px 0;
}
#content a
{
    color: #0FA3E2;
}
#content ul
{
    list-style: none;
}
#content li
{
    padding: 0 0 0 12px;
    background: url(/grafx/list_style_sub_item.gif) no-repeat 0 8px;
}
#content table tr td
{
    /*border-top: solid 1px #CCCCCC;*/
    padding: 5px 10px 5px 0;
    font-size: 12px;
    vertical-align: top;
}
#content table tr td p
{
    margin: 0;
}

/* Sitemap */
#content ul#sitemap li
{
    margin: 2px 0 2px 0;
}
#content ul#sitemap li a
{
    font-weight: bold;
}
#content ul#sitemap li ul li a
{
    font-weight: normal;
}
#content ul#sitemap ul
{
    margin: 0 0 0 15px;
}

/* List */
#list dt
{
    color: #646466;
    font-weight: bold;
}
#list dd.summary
{
    color: #646466;
    margin: 3px 0 3px 0;
}
#list dd.link
{
    padding: 0 18px 0 0;
}
#list dd.link a
{
    display: block;
    width: 95%;
    color: #0FA3E2;
    font-weight: bold;
    padding: 1px 0 10px 22px;
    margin: 0 0 10px 0;
    border-bottom: solid 3px #F1F1F1;
    background: url(/grafx/arrow_double.gif) no-repeat 2px 5px;
}



/* Paging */
#paging ul
{
    list-style: none;
}
#paging ul li
{
    float: left;
    background: none;
}
#paging ul li a.active
{
    color: #666666;
    font-weight: bold;
    text-decoration: none;
}

/* --------------------------------------------- // -------- colRight */
#colRight
{
    float: left;
    width: 205px;
}
#colRight dl
{
    width: 192px;
    margin: 0 0 10px 0;
    background: url(/grafx/blocks/bg_block_verloop.gif) no-repeat bottom left;
}
#colRight dt
{
    width: 192px;
    height: 11px;
    background: url(/grafx/blocks/bg_block_header.gif) no-repeat 0px 0px;
}
#colRight dd.mainTitle
{
    color: #646466;
    font-weight: bold;
    font-size: 1.5em;
    margin: 0 0 15px 0;
    padding: 0 18px 0 18px;
}
#colRight dd.title
{
    color: #646466;
    font-weight: bold;
    padding: 0 18px 0 18px;
}
#colRight dd.teaser
{
    padding: 0 18px 0 18px;
}
#colRight dd.summary
{
    color: #646466;
    padding: 0 18px 0 18px;
    margin: 3px 0 3px 0;
}
#colRight dd.link
{
    padding: 0 18px 0 18px;
}
#colRight dd.link a
{
    display: block;
    width: 90%;
    color: #0FA3E2;
    font-weight: bold;
    padding: 1px 0 10px 22px;
    margin: 0 0 10px 0;
    border-bottom: solid 1px #CCCCCC;
    background: url(/grafx/arrow_double.gif) no-repeat 2px 5px;
}
#colRight #downloads dd.link a
{
    background: url(/grafx/icons/icon_pdf.gif) no-repeat 0px 0px;
    padding: 1px 0 10px 22px;
}
#colRight dd.footer
{
    width: 192px;
    height: 11px;
    margin: 15px 0 0 0;
    background: #FFFFFF url(/grafx/blocks/bg_block_footer.gif) repeat-y 0px 0px;
}
#colRight #video dd.teaser {  
	float: left;
	width: 60px;
	padding-right: 10px;
}
#colRight #video dd.videoTitle {
	font-weight: bold;
	color: #707173;
	padding: 0 0 10px 17px;
}
#colRight #video dd.teaser img {
	border: solid 1px #000000;
}
#colRight #video dd a {
	float: left;
	color: #707173;
	text-decoration: none;
	padding: 0 0 0 18px;
	margin: 5px 0 0 0;
	background: url(/grafx/play_icon.gif) no-repeat 0px 0px;
}
#colRight #video dd a span.playvideo { text-decoration: underline; }
#colRight #video dd a:hover span.playvideo { text-decoration: none; }

#colRight #video dd a span.soundon 
{
	display: block;
	color: #999999;
	margin: 3px 0 0 0;
	text-decoration: none;
}
/* Uitzondering video referenties */
#colRight dd.ammount {
	color: #646466;
	font-size: 1.4em;
	font-weight: bold;
	padding: 5px 18px 30px 80px;
	margin: 3px 0 10px 0;
	border-bottom: solid 1px #CCCCCC;
	background: url(../_images/tank.gif) no-repeat 10px 0px;
}

/* --------------------------------------------- // -------- Footer */

#footer
{
    float: left;
    width: 986px;
    height: 45px;
    padding-left: 15px;
    background: #FFFFFF url(/grafx/bg_footer.jpg) no-repeat 0px 0px;
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    font-size: 9px;
    color: #9C9D9F;
}

/* --------------------------------------------- // -------- .wide
	Als wrapper class="wide" heeft dan wordt rechterkolom niet zichtbaar gezet en middenkolom breder.
 */

.wide #colRight
{
    display: none;
}

.wide #colMiddle
{
    width: 776px; /* 571 + 205 van colRight */
}

.wide #content
{
    width: 704px; /* 499 + 205 van colRight */
    padding-left: 11px;
}

/* --------------------------------------------- // -------- Form */
.txtBox
{
    width: 100%;
    border: solid 1px #CCCCCC;
    padding: 0 0 0 3px;
    margin: 0 0 5px 0;
}

.button
{
    background: #FFFFFF;
    border: solid 2px #CCCCCC;
    padding: 2px;
    margin: 5px 0 10px 0;
    cursor: pointer;
    font-weight: bold;
}
.OutputTitle
{
    border: 0 none;
}
.zoek
{
    /*border:inherit;*/
}
#footer2
{
    float: left;
    width: 986px;
    padding-right: 25px;
    text-align: right;
    font-size: 9px;
    color: #E2E2E2;
}
#footer2 a
{
    text-decoration: none;
    color: #E2E2E2;
}

.cSuggestBox
{
    border:none 0;
    display: none;
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    position: absolute;
    word-wrap: break-word;
    background-image:url(/grafx/zoek_footer.png);
    background-repeat:no-repeat;
    background-position:bottom center;
    padding-bottom:24px;
    color:#646466;
}
div.cSuggestItem
{
    background-image:url(/grafx/zoek_repeat.png);
    background-repeat:repeat-y;
    padding-left: 10px;
    padding-right: 10px;
    cursor:pointer;
}
div.cSuggestItemOver
{
    background-image:url(/grafx/zoek_repeat_mo.png);
    background-repeat:repeat-y;
    padding-left: 10px;
    padding-right: 10px;
    cursor:pointer;
}
.cSuggestItemInner
{
    cursor: default;
    display: block;
    height: 16px;
    overflow: hidden;
    padding-left: 3px;
    padding-right: 3px;    
}
.cSuggestSearchTerms
{
    display: block;
    float: left;
    margin-left: 0;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 70%;
}
.cSuggestPageCount
{
    color: #339EE1;
    display: block;
    font-size: 10px;
    margin-left: 60%;
    padding-top: 3px;
    text-align: right;
}