/* Main Design CSS
 * Hsl - Wasigh - 2010
 */

body {
	background: url(../images/bg_body.gif) left top repeat-x;	
}
 
a
{
	color: #4E8414;
	text-decoration: none;
}

a:hover
{
	color: #4E8414;
	text-decoration: underline;
}


#container 
{
	width: 800px;
	margin: auto;
}

/* HEADER */
#header {
	text-align: right;
	height: 41px;
}

#header ul {
	display: inline-block;
	margin: 10px 10px 10px 0;
	height: 20px
}

#header ul li {
	display: inline;
	margin: 4px 10px 0 0;
	padding: 4px 0 0 0;
}

#header a {
	color: #4E8414;
	text-decoration: none;
}

#header a:hover {
	color: #4E8414;
	text-decoration: underline;
}

#header input {
	margin: 8px 0;
	padding: 4px;
	color: #000;
	border: 1px solid #cccccc;
	background: #fff;
}

	#header input.button {
		font-weight: bold;
		border: none;
		background: #fff;
		color: #4e8413;
	}

/* FOOTER */
#footer
{
	clear: both;
	border: 1px solid #CCCCCC;
	background-color: #EEFDAC;
	padding: 15px;
	
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.disclaimer
{
	margin: 10px 0 0;
	padding: 0;
	color: #666666;
	text-align: left;
	float: left;
}

#footer ul
{
	/*display: inline-block;*/
	margin-right: 110px;
	margin-left: 0;
}

#footer ul li
{
	display: inline;
}

#footer ul li a, footer ul li a:active, footer ul li a:hover
{
	display: inline;
	color: #4E8413;
	margin: 10px;
	font-weight: bold;
}

.footer_image
{
	position: relative; 
	display: block;
	float: right; 
	top: -160px;  
}

/* TOPMENU */
#topmenu {
	float: left;
	position: relative;
	color: #FFFFFF;
	padding: 8px 0 0 0;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/bg_topmenu_glow.png);
}

	#topmenu img {
		display: block;
		float: left;
	}

	#topmenu h1 {
		float: right;
		font-family: Trebuchet MS, Georgia, Verdana, Arial, sans-serif;
		font-size: 50px;
		font-weight: normal;
		padding: 18px 10px 0 0;
	}

	#topmenu h2 {
		clear: right;
		float: right;
		font-size: 14px;
		padding: 0 10px 0 0;
		font-weight: normal;
	}

#topmenu #nav {
	float: left;
	width: 806px;
	height: 53px;
	margin: 8px 0 0 -3px;
	padding: 0;
	background: url(../images/bg_menu.png) left top no-repeat;
}

#topmenu ul {
	position: absolute;
	width: 800px;
	left: 0;
	margin: 3px 0 0 3px;
	padding: 0;
	list-style-type: none;
	z-index: 1;
}

	#topmenu li {
		position: relative;
		display: block;
		margin: 0;
		float: left;
		background: url(../images/menu_divider.gif) left top no-repeat;
	}
		#topmenu li:first-child 
		{ 
			background: none;
			border-top-left-radius: 4px 4px;
		}
		
		#topmenu li a {
			display: block;
			margin: 0;
			padding: 16px 20px 16px 20px;
			text-decoration: none;
			font-size: 15px;
			color: #4e8413;
			overflow:hidden;			
		}
			
				
		#topmenu li.over,
		#topmenu li.active,
		#topmenu li:hover{
			display: block;
			color: #fff;
			background: #b3ce3f;
		}
		
	/* UITKLAP */

	#topmenu ul li ul { 
		position: absolute;
		left: -3px;
		top: 47px;
		padding: 5px 0 10px;
		display: none;
		list-style-type: none;
		z-index: 2;
		background: #fff;
		border-top: 3px solid #b3ce3f;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

		#topmenu ul li ul li {
			display: block;
			float: left;
			margin: 5px 10px;
			padding: 8px 0 0 5px;
			border-top: 1px solid #e8e8e8;
			background: none;
		}
		
			#topmenu ul li ul li:first-child { border: none; }
			#topmenu ul li ul li:hover{ background: none; }
			
		#topmenu li ul li a {
			display: block;
			float: left;
			width: 205px;
			color: #000;
			font-size: 12px;
			margin: 0;
			padding: 0;
			background: #fff;
		}
		
			#topmenu li ul li a:hover { 
				color: #b3ce3f;
			}
		
	#topmenu li.over ul,
	#topmenu li:hover ul { 
		display: block;
		width: 230px;
		background: #fff;
	}

/* rightColomn */
#rightColumn
{
	width: 250px;
	float: right;
	clear: right;
	border: 1px solid #CCCCCC;	
	padding-bottom: 80px;
	margin-bottom: 40px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#rightColumn_top
{
	width: 250px;
	float: right;
	clear: right;
	margin-bottom: 14px;
	border: 1px solid #CCCCCC;	
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#rightColumn h2
{
	margin-top: 10px;
	margin-left: 15px;
	color: #4E8413;
	font-size: 15px;
	
}



#actionbuttons
{
	margin: 0;
	list-style-type: none;
}

#actionbuttons_small
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: right;
}

.actionbutton
{
	padding: 4px;
	color: #FFFFFF;
	background-color: #b3ce3f;
	
	margin: 4px;
	text-align: center;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;
}

a.actionbutton_link_small
{
	color: white;
	text-decoration: none;
}



a.actionbutton_link 
{
	display: block;
	padding: 8px;
	width: 100%;
	text-decoration: none;
	color: #FFFFFF;

}





h3 a.actionbutton_link 
{
	padding: 0;
	width: 100%;
	text-decoration: none;
	color: #FFFFFF;
}

#actionbuttons li
{
	padding: 0;
	/*width: 220px;*/
	color: #FFFFFF;
	/*background-color: #b3ce3f;*/
	margin: 5px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;
}

#actionbuttons li:hover
{
	color: black;
	text-decoration: none;
	box-shadow: 0px 0px 10px #888888;
	border-color:black;	
}

#actionbuttons_small li
{
	
	padding: 4px;
	text-align: right;
	display: inline-block;
	color: #FFFFFF;
	/*background-color: #b3ce3f;*/
	margin: 5px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;
	
	font-weight: bold;
}

#actionbuttons_small li:hover
{
	color: black;
	text-decoration: none;
	box-shadow: 0px 0px 10px #888888;
	border-color:black;	
}

#nieuweoefeningen
{
	margin: 10px;
	list-style-type: none;
	/*background-color: #000;*/
	color: #FFF;
	padding: 10px;
	background-image: url("../images/schoolbord.png");
	background-repeat: no-repeat;
	height: 130px;
}

#nieuweoefeningen li
{
	padding: 3px;
}

#nieuweoefeningen li a
{
	color: #fff;
}

/* content */
#content
{
	float: left;
	width: 526px;
	margin: 0 20px 0 0;
	font-size: 14px;
}

#content div
{
	/*display: inline-block;*/	
}


.content-text
{
	font-size: 1.2em;
	text-align: justify;	
}

#uitleg_content
{
	font-size: 1.2em;
	text-align: justify;
    width: 95%;
    display: inline-block;
}

#uitleg_content h2 {
	margin-bottom: 15px;
}

#uitleg_content h3 {
	color:#4E8413;
	font-size:1.4em;
	margin-bottom: 10px;
	margin-top: 10px;
}

#intro_block
{
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CCCCCC;
	width: 525px;
	background-color: #F5FDD8;
	vertical-align: top;
	float: left;
}

#intro_text
{
	width: 310px;
	padding: 20px;
	border-right:  1px solid #CCCCCC;
	background-color: #FFF;
	float: left;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#intro_text h2
{
	color: #4E8413;
	font-size: 20px;
	margin-bottom: 10px;
}

#intro_text h3
{
	color: #4E8413;
	font-size: 16px;
	margin-top: 20px;
	-moz-border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#intro_oefeningen
{
	width: 130px;
	float: left;
	background-color: #F5FDD8;
	margin-top: 0px;
	padding: 20px;
	height: 100%;
	display: inline-block;
	
}

#intro_oefeningen h3
{
	color:#4E8413;
	font-size: 16px;
	margin-bottom: 16px;
}

#intro_oefeningen ul
{
	margin-left: 0px;
	list-style-type: none;
}

#intro_oefeningen ul li
{
	padding-top: 3px;
}

#intro_oefeningen a, #intro_oefeningen a:active, #intro_oefeningen a:hover
{
	color: #4E8413;
	text-decoration: underline;
	font-weight: bold;
}

.aboblock
{
	width: 167px;
	margin: 0;
	margin-right: 5px;
	margin-top: 20px;
	border: 1px solid #CCCCCC;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: inline-block;
	font-size: 12px;
}

.aboblock_last
{
	width: 167px;
	margin-right: 0;
	
}

.aboblock_list
{
	margin-left: 20px;
	height: 60px;	
	color: #000;
	margin-bottom: 15px;
}

.aboblock_list li
{
	padding: 3px;	
}

.aboblock h2
{
	color: #4E8413;
	background-color: #EEFDAC;
	border-bottom: 1px solid #CCCCCC;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
		
	border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
		
	border-top-left-radius:4px;
	-moz-border-radius-topleft: 4px;
	
}

.subtitel h1
{
	color: #4E8413;
	display: inline-block;
	font-size: 24px;
}

#content .subtitel
{
	font-size: 1em;
	text-align: left;
	background-color: #fff;
	display: block;
	clear: both;
	margin: 4px;
	
	border-bottom: 1px solid #CCCCCC;
	
}


#breadcrumb
{
	height: 30px;
	clear: both;
	border-bottom: 1px solid #CCC;
	margin-bottom: 10px;
}


/* Content  */

.content_subtitle
{
	font-weight: bolder;
	font-size: 1.2em;
	color: #4E8413;
	padding: 10px;
	height: 12px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-top-left: 4px;
	-moz-border-radius-top-right: 4px;
	background-image: url("../images/bg_cat_title.png");
}

.content_catgroep
{
	display: inline-block;
	margin: 0;
	margin-bottom: 20px;
	width: 95%;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.content_divider
{
	height: 1px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	clear: both;
	float: left;
}

.content_oefeningen
{
	width:45%;
	display: block; 
	float: left; 
	margin-left: 10px;
	margin-bottom: 10px;
}

.content_oefeningen span
{
	padding-bottom: 5px;
	width: 100%;
	display: block;
}

.content_uitleg
{
	display: block; 
	float: left; 
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.content_uitleg span
{
	padding-bottom: 5px;
	width: 100%;
	display: block;
}


.content_oefening_link
{
	clear: left;
	padding: 2px 2px 2px 20px;
	color: #4E8413;
	list-style-type: none;
}

.content_oefening_link a
{
	color: #4E8413;
	background-image: url("../images/arrow_right.png");
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 8px;
}

h2
{
	font-size: 1.8em;	
	color: #4E8413;
}

/*
#rightColumn, 
#rightColumn_top {
	float: left;
}
*/

#rightColumn h3
{
	margin: 5px;
	margin-left: 15px;
}

h4
{
	margin-top: 10px;	
	margin-bottom: 5px;
}


.oefening_menu_toggle
{
	cursor: pointer;
	text-decoration: underline;
	background-image:  url("../images/plus.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 0 0 5px 20px;
	
	margin-left: 15px;
}

.oefening_menu_toggle_display
{
	
	background-image:  url("../images/min.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	padding-left: 20px;
	padding: 0 0 5px 20px;
}

.oefening_list
{
	margin: 0;
	margin-left: 15px;
	margin-bottom: 5px;
	list-style-type: none;
	display: none;
	
}

.oefening_list_display
{
	display: block;
}

.oefening_category_list
{
	margin: 10px;
	list-style-type: none;
}

/* breadcrumb */
#breadcrumb_list {
				float: left;
				
				margin: 0;
				margin-top: 10px;
				padding: 0;
				list-style: none;
        		
		        font-size:12px;
			}
				
				#breadcrumb_list li {
					float: left;
					margin: 0 5px 0 0;
					padding-left: 10px;
					color: #999999;
					background: url(../images/arrow_right.png) 2px 4px no-repeat;
				}
				
					#breadcrumb_list li a {
						color: #797B7A;
						text-decoration: underline;
					}
					
						#breadcrumb_list li a:hover {
							text-decoration: underline;
						}
	

	
#breadcrumb a.lastchild
{
	color: #6F6F6F;
	text-decoration: none;

}
#personalMenu
{
	float: right;
	margin-left: 15px;
  font-family:"Trebuchet MS";
  font-size:12px;
}

#personalMenu a
{
	color: #EE8907;
	font-weight: bold;
	margin-left: 15px;
}

#personalMenu {
				/*float: left;
				width: 378px;*/
				margin: 0;
				padding: 0;
				list-style: none;
				text-align: right;
			}
				
				#personalMenu li {
					display: inline;
					margin: 0 10px 0 0;
				}
				
					#personalMenu li a {
						color: #F4A80A;
						text-decoration: none;
					}
					
						#personalMenu li a:hover {
							color: #9BBE00;
							text-decoration: underline;
						}


.oefening_nakijken
{
	padding: 4px;
	text-align: center;
	display: inline-block;
	color: #FFFFFF;
	/*background-color: #b3ce3f;*/
	
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	padding: 10px 20px 10px 20px;
	font-weight: bolder;
		
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;
}

.oefening_voorzeggen
{
	padding: 4px;
	display: inline-block;
	color: #4E8413;
	margin: 5px;
	text-decoration: underline;
	background: none;
	border: none;
	
}


h2.username {
	display:block;
	clear:both;
	border-bottom: 1px solid black;
	margin-left:0;
	padding: 0;
	text-decoration: none;
}




.abonnementContent {
	
	padding: 0;
	margin-bottom: 10px;

}

.abonnementContentLinks {
	padding: 0;
	margin-bottom: 15px;

}

#message {
	background-color: #E8F5A6;
	display: none;
	margin-bottom: 10px;
	padding: 5px;
}


/* Forms */
fieldset{
	border: 1px solid #CCC;
	margin-top: 20px;
	padding: 10px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

legend{
	color: #000;
	font-size: 1.4em;
}

.error, .formerror
{
	color: red;
	display: block;
}

.label
{
	color: #000;
	font-size: 1.4em;
	padding-top: 20px;
	padding-bottom: 10px;
}

.label a
{
	color: #4E8413;
	font-size: 12px;
	padding-top: 20px;
	padding-bottom: 10px;
}

.actions a
{
	color: #4E8413;
	font-size: 12px;
	padding-top: 20px;
	padding-bottom: 10px;
}

input.button
{
	padding: 4px;
	color: #FFFFFF;
	background-color: #b3ce3f;
	
	margin: 4px;
	text-align: center;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;

	clear:right;
	float:right;
	margin-bottom:10px;
	margin-right:10px;
}

input.disabled
{
	background-image:none;
	background-color:#3f3f3f;
	color: #EEEEEE;
	border: 1px solid #EEEEEE;
	cursor: default;
}
	
.checkbox
{
	padding:5px;
}
.checkbox label
{
	text-align: left; 
	vertical-align: middle;
}
/* Controller list*/
.controller_action_list
{
	margin: 0;
	margin-bottom: 5px;
	margin-left: 5px;
	list-style-type: none;
}

.controller_action_link
{
	clear: left;
	padding: 2px;
	color: #4E8413;
}

.controller_action_link a
{
	color: #4E8413;
}

a.next_oefening
{
	background-image: url(../images/arrow_right.png); 
	background-repeat:no-repeat;
	background-position:right center; 
	padding-right: 10px;
}

a.previous_oefening
{
	background-image: url(../images/arrow_left.png); 
	background-repeat:no-repeat;
	background-position:left center; 
	padding-left: 10px;
}

#inputform p
{
	padding-bottom: 10px;
}


/* UITLEG */

.uitleg
{
	font-size:12px;
    color:#000000;
    font-weight:normal;
    text-decoration:none;
    margin: 20px 40px 0px 40px;
    border-collapse: collapse;
	border: 0px;
	padding: 10px;

}

.uitleg tbody 
{
	border-color: inherit;
	display: table-row-group;
	vertical-align: middle;
}

.uitleg td
{
	border: 1px solid black;
	padding: 10px;	
}

#uitleg_content ul
{
	padding-bottom: 5px;	
}


table.form{
	border-collapse:separate;
	border-spacing:5px 10px;
	width: 100%;
}

div.ruler 
{
border-top:1px solid #CCC;
clear:both;
margin-top:10px;
padding-top:10px;
width:100%;
}

/* action button */
.btn-cta
{
	padding: 4px;
	text-align: right;
	display: inline-block;
	color: #FFFFFF;
	background-color: #b3ce3f;
	margin: 5px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #4E8414;
	background-image: url("../images/bg_button_large.png");
	background-repeat: repeat-x;
	cursor: pointer;
}

.btn-cta:hover
{
	color: #FFFFFF;
	background-color: #b3ce3f;
	text-decoration: none;
	background-image: url("../images/bg_button_large_rev.png");
	cursor: pointer;
}




/* Homework Tabs */


ul#hw-tabs-buttons
{
	list-style-type: none;
	margin: 0;
	border-bottom: 1px solid grey;
}

ul#hw-tabs-buttons li.tab
{
	display: inline-block;
	border: solid;
	border-width: 1px 1px 0 1px;
	margin: 0 0.5em -1px 0;
}

ul#hw-tabs-buttons li.tab:hover
{
	background-color: #F5FDD8;
}

ul#hw-tabs-buttons  li.tab.active
{
	border: 1px solid black;
	border-bottom: 1px solid white;
	background: white;
	margin-bottom: -1px;
}

ul#hw-tabs-buttons  a
{
	padding: 10px 10px;
	display: block;

}

#hw-tabs-abo
{
	display: inline-block;
	min-width: 200px;
}


#hw-tabs-abo:hover
{
	background-color: #F5FDD8;
}

#hw-tabs-abo:hover > ul
{
	display:inline-block;
}

#hw-tabs-abo-list
{
	display: none;
	margin: 0px;
	position: absolute;
	background-color: white;
	min-width: 200px;
	list-style-type: none;
	border: 1px solid #ccc;
	border-top: 3px solid #F5FDD8;
}

#hw-tabs-abo-list > li > a
{
	 white-space: nowrap; 
	 overflow: hidden;
	 text-overflow: ellipsis;
	 width: 180px;
	 max-width: 180px;
	 min-width: 180px;
}

#hw-tabs-abo-list li{
	border-top: 1px solid #F5FDD8;	
}


.caret
{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}