/* ---------------------------------------------------------------------------------------------
Cascading Style Sheet behorende bij de de 'Mereltron' Look and Feel set gemaakt
voor de TopicList publicatie "Three Columns"

Deze CSS kent een aantal secties
1) 'Single Column Homepage'. In deze sectie staan de style die worden gebruikt in het geval 
	van een 'single column' homepage. Deze stylen zijn veelal afgeleid van de reguliere stijl
	bijv. ".SingleColumnHome #menu" prevereerd boven "#menu" (waar #menu wordt gebruikt op de 
	vervolgpaginas).
2) 'Vervolg pagina'

--------------------------------------------------------------------------------------------- */
/* Single Column Homepage */
.SingleColumnHome{
	/* centreer midden de inhoud van de pagina  */
	text-align: center;
	padding-bottom:10px;
}

.SingleColumnHome #mainShape {
	text-align: left;
	width:770px;
	margin-left:auto;
	margin-right:auto;
	font-family : Arial, Helvetica, sans-serif; 
	font-size : 12px; 
	color : #666666;  
}

.SingleColumnHome #main { 
    background-image: url(../images/contentBG.gif);
} 

.SingleColumnHome #menu {
	text-align: right;
	height: 105px;
	background-image: url(../images/MenuBar.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
	padding-right: 8px;
	padding-top: 40px;
	line-break: strict;
}

.SingleColumnHome #menu .menuseparator{
	width:18px;
	padding-left: 9px;
	padding-right: 9px;
	background-image: url(../images/IndexSeperator.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}

.SingleColumnHome #main_head {

}


#main_head_content {
	position:relative;
	top:20px;
	margin-left:10px;
      overflow:auto;
}


#main_head_content p{
	margin-top:0px;
	padding-top:0px;
}


.SingleColumnHome #main_content {
}


.homePageTopic{
	padding-top:10px;
	padding-bottom:1px;
}

.SingleColumnHome .homePageTopic .topic_title{
	color : #ffffff; 
	font-weight:bold;
	font-size : 14px; 
	border-right : 2px solid #2e839f;
	background-color : #5cbbda; 
	width:250px;
	margin:0px 0px 10px 0px;
	padding-left: 30px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom:2px
}

.SingleColumnHome .homePageTopic .topic_content{
	margin-left:30px;
	margin-right:30px;
	margin-bottom:15px;
	padding-left:0px;
	padding-right:0px;
	padding-top:1px;
	padding-bottom:1px;
	border-bottom:1px solid grey;
}

.SingleColumnHome .homePageTopic h2{
	color : #666666; 
	font-size : 12px;
	margin-top:1px; 
} 

.SingleColumnHome .homePageTopic p{
	margin-top:1px; 
	margin-bottom:8px;

} 


.SingleColumnHome #main_footer {
	margin-top:0px;
	background-image: url(../images/home_main_footer.jpg);
	background-repeat: no-repeat;
	background-possition:bottom;  
	text-align:right;
	padding-right:25px;
	padding-top:1px;
	padding-bottom:1px;
}


	



/* Reguliere pagina's */
#columnRightCopyRight {
	font-size: 70%;
}


BODY {
    text-align: center;
    background-color: #002087;
    background-image: url(../images/bg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    scrollbar-3dlight-color:#002087;
    scrollbar-base-color:#002087;
    scrollbar-arrow-color:#FFFFFF;			
    overflow: auto;
} 

TD {
    vertical-align:top;
}

#mainShape{
    width: 770px;
    margin-left: auto;
    margin-right: auto;
}

#menu  {
	text-align: right;
	height: 105px;
	background-image: url(../images/MenuBar.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
	padding-right: 8px;
	padding-top: 40px;
	line-break: strict;
}

#menu .menuseparator {
	width:18px;
	padding-left: 9px;
	padding-right: 9px;
	background-image: url(../images/IndexSeperator.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}

#menu a {
	color: #122665;
	font-family: Arial, Helvetica, sans-serif;
	Font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	text-align: right;
	vertical-align: bottom;
}

#menu a:hover{
    color: #5FA434;
}

#menu a.selected{
    color: #5FA434;
}

#columnLeft0{
	width: 185px;
	background-image: url(../images/columnLeftBG0.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	float:left;
	
}

#columnLeft1{
	width: 185px;
	background-image: url(../images/columnLeftBG1.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	float:left;
	
}

#columnLeft2{
	width: 185px;
	background-image: url(../images/columnLeftBG2.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	float:left;
	
}

#columnLeft3{
	width: 185px;
	background-image: url(../images/columnLeftBG3.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	float:left;
	
}

#columnLeft4{
	width: 185px;
	background-image: url(../images/columnLeftBG4.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	float:left;
	
}

#columnLeft5{
	width: 185px;
	background-image: url(../images/columnLeftBG5.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px;
	float:left;

}

.columnLeftContent {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
	padding-bottom:0px;
	border-bottom:1px solid green;
}

.columnLeftContent #title{
	color: #ffffff;
	background-image: url(../images/columnLeftTitle.gif);
	background-repeat: no-repeat;
	height: 30px;
	font-size: 13px;
	font-weight: bold;
	padding: 7px 10px 20px 15px;
}

.columnLeftContent ul{
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 15px;
    list-style-type: none;
    padding: 0;
}

.columnLeftContent ul ul{
    margin-left: 0px;
}
.columnLeftContent li{
    font-size: 13px;
    font-weight: bold;
    list-style-type: none;
}

.columnLeftContent LI A {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5FA434;
    font-weight: bold;
    text-decoration: none;
}

.columnLeftContent LI A:hover {
    color: #26356A;
}

.columnLeftContent LI.selected {
    /*
    border-bottom: 1px solid #F5F5EC;
    margin-right: 10px;
    */
}

.columnLeftContent LI A.selected {
    color: #26356A;
}



.columnLeftContent A.selected {
    color: #0582D1;
}

#footerLeft{
	display:none; 
   width: 185px;
    height: 1px;
    background-position: top;
    background-repeat: no-repeat;
}

#marginLeft{
    width: 0px;
}

#content {
	width: 361px;
	background-position: bottom;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-justify: newspaper;
	background-image: url(../images/contentBG.gif);
  
}
#columnCenterContent{
 	height:100%; 
	overflow:auto;
	
}

#content #title{
	color: #ffffff;
	background-image: url(../images/contentTitle.gif);
	background-repeat: no-repeat;
	height: 30px;
	font-size: 13px;
	font-weight: bold;
	padding: 7px 10px 0px 15px;
	margin-bottom: 15px;
	background-position: center top;
}

#content #title #lyrics{
    height: 16px;
    overflow: hidden;
    text-overflow: clip;
}
#content h1{
    font-size: 110%;
    font-weight: bold;
    margin: 0px 10px 15px 15px;
    padding: 0px;
}

#content h2{
    font-size: 105%;
    font-weight: bold;
    margin: 0px 10px 2px 15px;
    padding: 0px;
}
#content p, #content table{
    margin: 0px 10px 15px 15px;
}

#content table{
	border-collapse : collapse;
}

#content ul{
    margin: 0px 10px 15px 32px;
    list-style-image: url(../images/bullet.gif);
    padding: 0;
}

#content ol{
    margin: 0px 10px 15px 38px;
    padding: 0;
}

#content li{
    margin-bottom: 5px;
}

#content td {
    font-size: 70%;
    border: 1px solid Silver;
}

#content td p{
    margin-left:3px;    
    margin-right:3px;   
    margin-top:3px; 
    margin-bottom:3px;  

}

#content a{
    color: #26356A;
    font-weight: bold;
    text-decoration: none;
}

#content a:hover{
    color: #000000;
}

#content table.tf_definition td.column1 {
    width: 120px;
    vertical-align: top;
}

#contentFooter{
	display:none;
    width: 361px;
    height: 1px;
    background-position: top;
    background-repeat: no-repeat;
}

#marginRight{
    width: 0px;
}

#columnRight {
	font-family: Arial, Helvetica, sans-serif;
	width: 195px;
	background-image: url(../images/columnRightBG.gif);
	padding: 0px;
	background-position: bottom;
	background-repeat: repeat-y;
	float:right;
	
}

#searchDialog {
    background-image: url(../images/searchBG.gif);
    background-position: top left;
    background-repeat: no-repeat;
    height: 100px;
}

#searchDialog #title{
    color: #FFFFFF;
    padding: 7px 10px 10px 15px;
    font-size: 13px;
    font-weight: bold;
}

#searchDialog table{
    margin-left: 15px;
}

#searchDialog input#jseInput{
    width: 120px; 
    margin-right: 3px;
}

#columnRightContent {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#columnRightContent #title{
	color: #ffffff;
	background-image: url(../images/columnRightTitle.gif);
	background-repeat: no-repeat;
	height: 30px;
	padding-left: 15px;
	padding-top: 7px;
	font-size: 13px;
	font-weight: bold;
	overflow: hidden;
	margin-bottom: 15px;
	padding-right: 10px;
	padding-bottom: 0px;
}

#columnRightContent li{
	font-size: 12px;
	font-weight: bold;
	list-style-type: none;
	margin: 0px;
	margin-right: 10px;
	margin-bottom: 5px;
	vertical-align: bottom;
}

#columnRightContent LI A {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    font-weight: normal;
    text-decoration: none;
}
#columnRightContent LI A:hover {
    text-decoration: underline;
}
#columnRightContent LI A.selected {
    font-weight: bold;
}
#columnRightContent ul{
    padding: 0;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 15px;
    list-style-type: none;
}

#columnRightContent ul ul, #columnRightContent ul ol{
    margin-left: 0px;
}

#columnRightCopyRight{
	position: absolute;
	bottom:35px;
	width:162px;
	font-size: 12px;
	font-weight: normal;
	margin-left: 15px;
	margin-top: 15px;
	margin-right: 15px;
	padding-top: 5px;
	border-top: dotted 1px black;
	padding-bottom: 5px;
}

#columnRightCopyRight a {
	color: #122665;
    font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	text-align: right;
	vertical-align: bottom;
}

#columnRightCopyRight a:hover{
    color: #5FA434;
}

#columnRightCopyRight a.selected{
    color: #5FA434;
}

#columnRightFooter{
	display:none;
    width: 195px;
    height: 1px;
    background-position: top;
    background-repeat: no-repeat;
    float: right;  
}

/* toc */
#tocTitle{
	color: #ffffff;
	background-image: url(../images/columnLeftTitle.gif);
	background-repeat: no-repeat;
	height: 30px;
	font-size: 13px;
	font-weight: bold;
	margin-top:0px;
	padding: 7px 10px 20px 15px;
	text-align:right;
}

.back a{
	margin-bottom: 5px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	cursor: hand;
	text-decoration:none;
	color: #000000;	
	margin-left: 20px;
}

.back A:hover{
	color: #000000;
	text-decoration:underline;
}


.Toc {
	margin-left:15px;
	padding-right: 5px;
	margin-top:10px
	font-size: 10px;
}

.Toc	table{
		width:135px;
}

td .chapter{
	width:5px;
}

.chapter P {
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.topic P {
	margin-bottom: 5px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

.chapter A, .topic A {
	cursor: hand;
	text-decoration:none;
	color: #000000;
}
.chapter A:hover, .topic A:hover {
	color: #000000;
	text-decoration:underline;
}
.chapter .active A, .topic .active A {
	font-weight: bold;
	cursor: hand;
	color: #002d96;
}

#tocNavButtons{
	margin-left:15px;	
}
.btnCloseAll {
	text-align:right;
	padding-top: 3px;
	padding-left: 2px;
	width: 20px;
	height: 20px;
}

.btnOpenAll {
	text-align:right;
	padding-left: 2px;
	padding-top: 3px;
	width: 20px;
	height: 20px;
}

.btnTitle{
	text-align:left;
}

.icon {
	vertical-align:text-bottom;
	margin-right:6px;
}