/* the overlayed element */ 
#overlay { 
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
 	width:926px;     
}



/* close button positioned on upper right corner */ 
#overlay .cross { 
    background-image:url("images/overlay/close.png"); 
    position:absolute; 
    right:-17px; 
    top:-10px; 
    cursor:pointer; 
    height:35px; 
    width:35px;
	z-index:10001;
}

#overlay .button {
	bottom: -40px;
	right: 0;
}

#overlay-logo {
	height: 86px;
	width: 112px;
	position: absolute;
	left: -25px;
	top: -50px;
	background: transparent url("images/logos/leerrijk-logo_overlay.png") no-repeat top left;
	z-index: 1001;
}


/*
 * login & register box
 */

#overlay {
	height: auto;
}

#overlay-login, #overlay-register {
	width: 380px;
	height: 145px;
	background-color: #FFF;
	padding: 30px 40px 0 40px;
}

#overlay-login h1, #overlay-register h1 {
	font-size: 22px;
}

#overlay-login form {
	padding: 10px 0;
}

#overlay-login div, #overlay-register div {
	clear: both;
	height: 36px;
}

#overlay-login input, #overlay-register input {
	width: 280px;
	line-height: 29px;
	background-color: #E6E6E6;
	float: right;
	border: solid 4px #E6E6E6
}

#overlay-login.error h1, #overlay-login.error input, #overlay-register.error h2, #overlay-register.error input {
	color: #db007a;
	color: #FF0000;
}

#overlay-login label, #overlay-register label {
	float:right;
	margin-right:8px;
	padding:4px;
}

/*
 * register box only
 */

#overlay-register form {
	padding: 5px 0 10px 0;
}

/*
 * Subscription box
 */

#overlay-subscription {
	width: 380px;
	height: 145px;
	background: transparent url("images/overlay_preview/background_subscription.png") no-repeat top left;
	position: absolute;
	top: 0;
	right: 0;
	padding: 30px 40px 0 40px;
}

#overlay-subscription h1 {
	font-size: 22px;
	color: #FFBD27;
}

#overlay-subscription p {
	margin: 10px 0;
	color: #888;
}		

#overlay-subscription a {
	float: none;
	margin: 0 auto;
	position: relative;
	width: 165px;
	margin-top: 30px;
}

#overlay.preview #overlay-content {
	width: 846px;
	margin-top: 7px;
	background: #FFF;
	padding: 30px 40px 60px 40px;
	overflow-y: auto;
}

/*
 * full article style
 */

#overlay {

}

#overlay.full .left {
	float: left;
}

#overlay.full .right {
	float: right;
}

#overlay.full .button {
	position: relative;
	float: right;
	margin-top: 7px;
	bottom: 0;
}
/*
 * TOC
 */
#overlay-toc {
	width: 170px;
	height: 80%;
	background: #FFF;
	padding: 45px 10px 20px 10px;
}

#overlay-toc .scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 170px; 
    height:292px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
#overlay-toc .scrollable .items { 
    /* this cannot be too large */ 
    height:20000em; 
    position:absolute; 
} 


#overlay-toc a.prevPage {
	width: 170px;
	height:50px;
	background: transparent url("images/buttons/arrow_up.png") no-repeat center center;
	display: block;
	cursor: pointer;
}

#overlay-toc a.nextPage {
	width: 170px;
	height:50px;
	background: transparent url("images/buttons/arrow_down.png") no-repeat center center;
	display: block;
	cursor: pointer;
}

#overlay-toc ul {
	
}

#overlay-toc ul a {
	display: block;
	width: 150px;
	height: 32px;
	border-bottom: 1px solid #D9D9D9;
	padding: 20px 10px;
	font-size: 14px;
	cursor: pointer;
}

#overlay-toc ul a:hover {
	background-color: #F5F1E5;
}	

#overlay-toc span {
	display: block;
	float: left;
}	

#overlay-toc span.number {
	color: #4E4E4E;	
}	

#overlay-toc span.description {
	color: #888;
	width: 125px;
	margin-left: 5px;
	float: right;
}	

#overlay-print {
	width: 190px;
	height: 64px;
	background: #FFF;
	margin-top: 7px;
}

#overlay-print a {
	display: block;
	width: 140px;
	height: 24px;
	padding: 20px;
	line-height: 24px;
	color: #333;
	font-size: 16px;
	background: transparent url("images/icons/icon_print.png") no-repeat center right;
	cursor: pointer;
}

#overlay-spacer {
	height: 32px;
	width: 729px;
	background: #FFF;
	position: absolute;
	top: 0;
	right: 0;
}

#overlay.full #overlay-spacer {
	height: 32px;
	width: 729px;
	background: #FFF;
	position: relative;
}


#overlay.full #overlay-content {
	height: 80%;
	width: 649px;
	background: #FFF;
	overflow-y: scroll;
	padding: 30px 40px 60px 40px;
}

/*
 * PDF popup
 */

#overlay.PDF {
	height: auto;
}

#overlay.PDF #overlay-spacer {
	height: 32px;
	width: 100%;
	background: #FFF;
	position: absolute;
	top: 0;
	right: 0;
}

#overlay.PDF #overlay-content {
	width: auto;
	height: 700px;
	margin-top: 7px;
	background: #FFF;
	padding: 30px 0 10px 0;
}

/*
 * content metadata
 */ 

#overlay-content h1 {
	font-size: 35px;
}

#overlay-content h2 {
	font-size: 23px;
}

#overlay-content h2.header {
	background-color: #F5F1E5;
	height: 47px;
	line-height: 47px;
	padding: 0 10px;
}

#overlay-content div.meta {
	margin: 20px 0;
	padding: 20px 0;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
}

#overlay-content h3 {
	font-size: 16px;
}

#overlay-content p {
	font-size: 13px;
	margin: 20px 0;
}

#overlay-content p.author {
	color: #888;
}

#overlay-content p.keywords {
	color: #888;
	margin-bottom: 0;
}
	
#overlay-content p.keywords strong {
	color: #000;	
}

/*
 * overlay content
 */

#overlay-content .Leerrijkkop1 {
	background-color: #F5F1E5;
	height: 47px;
	line-height: 47px;
	padding: 0 10px 0 20px;
	font-size: 23px;
	/* clear: both; */
	margin: 20px 0;
}

#overlay-content .Leerrijkkop2 {
	font-size: 18px;
	margin: 20px 0;
	/* clear: both; */
}

#overlay-content .Leerrijkkop3 {
	font-size: 16px;
	margin: 20px 0;
	/* clear: both; */
}


#overlay-content .basis {
	font-size: 13px;
	margin: 10px 0;
	/*float: left;*/
}

#overlay-content .bold {
	font-weight: bold;
}

#overlay-content .italic {
	font-style: italic;
}

#overlay-content .underline {
	text-decoration: underline;
}

#overlay-content .subscript {
	vertical-align: sub;
}

#overlay-content .superscript {
	vertical-align: super;
}

#overlay-content a {
	color: #c09411;
}

#overlay-content a:hover {
	text-decoration: underline;
}		

#overlay-content img {
	
}

#overlay-content a.error {
	color: #F00;
	font-weight: bold;
	display: block;
	margin: 10px;
}

/*
 * content lists
 */

#overlay-content ol.decimal {
	margin: 20px 0;
	margin-left: 20px;
}

#overlay-content ol.bullet {
	margin: 20px 0;
	margin-left: 15px;
}


/*
 * numbered lists
 */

#overlay-content ol.decimal li.level_0 {
	list-style: decimal;
}

#overlay-content ol.decimal li.level_1 {
	list-style: lower-latin;
	margin-left: 20px;	
}

#overlay-content ol.decimal li.level_2 {
	list-style: disc;
	margin-left: 40px;	
}

/*
 * bulleted lists
 */

#overlay-content ol.bullet li.level_0 {
	list-style-type: disc;	
}

#overlay-content ol.bullet li.level_1 {
	list-style: circle;
	margin-left: 20px;	
}

#overlay-content ol.bullet li.level_2 {
	list-style: square;
	margin-left: 40px;
}
	
	
/* flv player */

/* styling of the container. */ 
a.flv { 
    display:block; 
    width:320px; 
	height:240px;    
    text-align:center; 
	vertical-align: middle;
    margin:20px 15px 20px 0;
	border:1px solid #999; 
	background: #fff url("images/buttons/play_large.png") no-repeat center 80%;
	
	font-size: 16px;
	color: #000; 
} 
 
/* when container is hovered we alter the border color */ 
a.flv:hover { 
    border:1px solid #000; 
}