body {font-family: Verdana, Arial, Helvetica, sans-serif; color: black; font-size: 11px; line-height: normal; padding: 0; text-align: center; background: white}
* {margin: 0; padding: 0;}
td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px;}

a {color: #333333; text-decoration: underline; -moz-outline-style: none;}
a:hover {text-decoration: underline;}
a img  {border: 0;}

#slb20 ul {padding-left: 20px;}


#sbb20 a, .bb10 a, .bb20 a, .bb30 a {text-decoration: none;}

#schoolWrapper a {border: 0;}
#schoolWrapper a:hover {border: 0; text-decoration: none;}

/*#slb20 ul, #slb20 ol {clear: both; margin: 0 0 1em 2em; padding: 0 0 0 20px; list-style-position: outside;}*/
.bb20 li, .bb30 li, #sbb20 li, #sbb30 li {clear: both; margin: 0 0 5px 0; padding: 0 0 0 20px; list-style-type: none;}

p {margin: 0 0 1em 0;}

h1 {font-size: 18px; font-weight: normal; margin: 0 0 0.5em 0; padding: 0;}
h2 {font-size: 12px; font-weight: bold; margin: 0 0 0.5em 0; padding: 0;}
h3 {font-size: 12px; font-weight: bold; margin: 0; padding:	0;}

.jquery-corner {position: relative;}

#ctrRoot {width: 1000px; padding: 0; margin: 20px auto 0 auto; text-align: left; overflow: hidden;}
	#ctrBanner {float: left; position: relative; z-index: 1500; width: 1000px; height: 22px; margin-bottom: 2px;}
	#ctrTopMenu {float: left; position: absolute; right: 0; bottom: 0; width: 1000px;}
	#ctrMenu {float: left; width: 1000px; height: 30px; padding: 0;}
		#ctrMenu .title {float: left; width: 300px; padding: 0 10px;}
			#ctrMenu .title a {display: block; color: #fff; text-decoration: none;}
			#ctrMenu h1 {font-size: 22px; font-weight: bold;}
		#ctrMenu .menu {float: left; width: 660px; padding: 0 10px;}
	#ctrContent {float: left; width: 1000px; padding: 15px 0;}



		/*** PORTAL ***/
			#portalTopWrap {list-style-type: none; margin:0 0 15px 0; padding: 0; float: left; width: 1000px;}
				#portalTopWrap .tb10, #portalTopWrap .tb20 {float:left; position: relative; height: 200px; padding: 0; overflow: hidden; list-style-type: none;}
					.tb10 {width: 320px;  margin-right: 20px; line-height: 18px;}
					.tb20, .tb20 img {width: 660px; height: 200px; margin:0;padding:0}
		
			#portalMidWrap {list-style-type: none; margin:0 0 15px 0; padding: 0; float: left; width: 1000px;}
				#portalMidWrap .mb10, #portalMidWrap .mb20, #portalMidWrap .mb30 {float:left; position: relative; width: 320px; height: 240px; padding: 0; overflow: hidden; list-style-type: none;}				
					.mb10 {margin-right: 20px;}
					.mb20 {margin-right: 20px;}
					.mb30 {}
					
						.mb20 .mb21, .mb20 .mb22 {float: left; position: relative; width: 320px; height: 117px; padding: 0; overflow: hidden; list-style-type: none;}
								.mb21 {margin-bottom: 6px;}
								.mb22 {}					
		
			#portalBotWrap {list-style-type: none; margin:0; padding: 0; float: left; width: 1000px;}
				#portalBotWrap .bb10, #portalBotWrap .bb20, #portalBotWrap .bb30 {float:left; position: relative; width: 320px; height: 125px; padding: 0; overflow: hidden; list-style-type: none;}
					.bb10 {margin-right: 20px;}
					.bb20 {float: left; margin-right: 20px;}
					.bb30 {}

.boxHeader {position: absolute; z-index: 10; width: 100%; height: 15px; padding: 4px 5px;}
	.boxHeader h2 {font-size: 12px; font-weight: bold; margin: 0;}
	.boxHeader a {color: white; text-decoration: none;}
.mb10 .boxContent, .mb30 .boxContent {position: absolute; z-index: 5; top: 8px; width: 100%; height: 224px; line-height: 18px; padding: 8px 0 0 0;}
	.leesverder {display: block; position: absolute; z-index: 10; bottom: 0; right: 0; width: 76px; height: 16px; padding: 2px 0 2px 10px;}
.mb20 .boxContent {position: absolute; z-index: 5; top: 8px; width: 310px; height: 84px; line-height: 18px; padding: 20px 5px 5px 5px;}
	.mb20 .boxContent a {text-decoration: none;}
	.newsarrow {position: absolute; z-index: 10; bottom: 5px; right: 5px; width: 13px;}

.mb20 .newsimg {float: left; width: 115px; height: 84px; margin-right: 10px; overflow: hidden}

.bb10 .boxContent, .bb20 .boxContent, .bb30 .boxContent {position: absolute; z-index: 5; top: 8px; width: 310px; height: 92px; padding: 20px 5px 5px 5px;}


.ctrVideo {float:left; position: relative; width: 250px; height: 182px; margin: 0 10px 10px 0; padding: 0; overflow: hidden; list-style-type: none;}
	.videoImage {position: absolute; z-index: 5; top: 8px; width: 100%; height: 173px; line-height: 18px; padding: 8px 0 0 0;}
	.videoHeader {position: absolute; z-index: 10; width: 100%; height: 15px; padding: 4px 5px; background: url('../../media/bg_header_blackVid.png') no-repeat;}
		.videoHeader h2 {font-size: 12px; font-weight: bold; margin: 0;}
		.videoHeader a {color: white; text-decoration: none;}
	.butPlay {display: block; position: absolute; z-index: 10; top: 106px; left: 135px; width: 16px; height: 16px;}
	.ctrVideo .butPlay {display: block; position: absolute; z-index: 10; top: 78px; left: 100px; width: 16px; height: 16px;}

	


		/*** SUB ***/
#ctrBannerSub {float: left; position: relative; z-index: 1500; width: 1000px; height: 120px; margin-bottom: 2px;}

#subLeftWrap {float: left; position: relative; width: 813px; margin-right: 10px; margin-bottom: 10px;}
	
	#slb10 {float: left; position: relative; width: 248px; margin-right: 10px;}
	#slb20 {float: left; position: relative; width: 525px; min-height: 400px; line-height: 18px; padding: 15px;}

		#slb10 .boxHeader {position: relative; z-index: 10; width: 228px; height: 25px; padding: 0 10px;}
		#slb10 .boxContent {float: left; position: relative; z-index: 5; width: 248px; padding: 0 0 10px 0;}

#subRightWrap {float: left; position: relative; width: 177px;}

	#srb10, #srb20, #srb30 {float: left; position: relative; width: 177px; height: 134px; margin-bottom: 10px;}
	#srb40 {float: left; position: relative; width: 177px; height: 134px;}

		#srb10 .imageboxHeader {position: absolute; z-index: 10; width: 167px; height: 15px; padding: 1px 5px;}
		#srb10 .imageboxContent {position: absolute; z-index: 5; top: 2px; width: 177px; height: 130px; overflow: hidden; padding: 2px 0 0 0;}

#subBotWrap {float: left; position: relative; width: 1000px;}

	#sbb10 {float: left; position: relative; width: 228px; padding: 10px; margin-right: 10px; line-height: 18px;}
	#sbb20 {float: left; position: relative; width: 535px; padding: 10px; margin-right: 10px; line-height: 18px;}
	#sbb30 {float: left; position: relative; width: 157px; padding: 10px; line-height: 18px;}
	
		#sbb10 h2 {font-size: 14px; font-weight: bold;}
		#sbb20 h2, #sbb30 h2 {font-size: 14px; font-weight: bold;}

.bb10 dl {padding: 0;}
.bb10 dt {float: left; padding: 0 0 .5em 0; font-weight: bold;}
.bb10 dd {display: block; margin-left: 50px; padding: 0 0 .5em 0;}

.default dl {}
.default dt {float: left; clear: left; width: 40px; text-align: left; font-weight: bold;}
.default dd {margin: 0 0 0 50px; padding: 0 0 0.5em 0;}



/*** MENU LAYOUT ***/
.sf-menu, .sf-menu * {margin: 0; padding: 0; list-style: none; font-weight: normal;}
.sf-menu {font-size: 14px; line-height: normal;}
.sf-menu ul {position: absolute; top: -999em; /*width: 210px;*/} /* left offset of submenus need to match (see below) */

.sf-menu ul li {width: 100%;}
.sf-menu li:hover {visibility: inherit;} /* fixes IE7 'sticky bug' */

.sf-menu li {float: left; margin-right: 20px; position: relative;}
.sf-menu a {display: block; position: relative;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {left: 0; top: 30px; z-index: 99;} /* match top ul list item height */
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top: -999em;}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left: 210px; top: 0;} /* match ul width */
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top: -999em;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left: 210px; top: 0;} /* match ul width */


.sf-menu {float: left; position: relative; z-index: 500; width: 660px;}
.sf-menu a {padding: 6px 0; text-decoration: none;}
/*.sf-menu a, .sf-menu a:visited {color: #fff;}*/ /* visited pseudo selector so IE6 applies text colour*/

.sf-menu li {list-style: none;}

.sf-menu li li {font-size: 12px;}
.sf-menu li li a {padding-left: 30px;}
.sf-menu li ul {padding-bottom: 5px; width: 210px;}

/*.sf-menu li li li {background: #9AAEDB;}*/

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li.current a
{outline: 0;}
.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active, .sf-menu li li.current
{outline: 0;}

/*** MENU ARROWS **/
.sf-menu a.sf-with-ul {padding-right: 2.25em; min-width: 1px;} /* trigger IE7 hasLayout so spans position accurately */
.sf-sub-indicator {position: absolute; display: block; left: .75em; top: 1.05em; /* IE6 only */
width: 13px; height: 8px; text-indent: -999em; overflow: hidden;} /* 8-bit indexed alpha png. IE6 gets solid image only */
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;} /* use translucent arrow for modern browsers*/



/*** TOPMENU LAYOUT ***/
.sf-topMenu, .sf-topMenu * {margin: 0; padding: 0; list-style: none; font-weight: normal;}
.sf-topMenu {font-size: 12px; line-height: 1.0;}
.sf-topMenu ul {position: absolute; top: -999em; width: 180px;} /* left offset of submenus need to match (see below) */

.sf-topMenu ul li {width: 100%;}
.sf-topMenu li:hover {visibility: inherit;} /* fixes IE7 'sticky bug' */

.sf-topMenu li {float: left; margin-left: 8px; position: relative; text-align: center;}
.sf-topMenu a {display: block; position: relative;}
.sf-topMenu li:hover ul, .sf-topMenu li.sfHover ul {left: 0; top: 22px; z-index: 99;} /* match top ul list item height */
ul.sf-topMenu li:hover li ul, ul.sf-topMenu li.sfHover li ul {top: -999em;}
ul.sf-topMenu li li:hover ul, ul.sf-topMenu li li.sfHover ul {left: 180px; top: 0;} /* match ul width */
ul.sf-topMenu li li:hover li ul, ul.sf-topMenu li li.sfHover li ul {top: -999em;}
ul.sf-topMenu li li li:hover ul, ul.sf-topMenu li li li.sfHover ul {left: 180px; top: 0;} /* match ul width */

/*** SKIN ***/
.sf-topMenu {float: right; position: relative; z-index: 500;}
.sf-topMenu a {padding: 5px 10px; text-decoration: none;}

.sf-topMenu li {list-style: none;}
.sf-topMenu li ul {border-top: 2px solid white; padding: 0 0 5px 0; font-size: 0;}

.sf-topMenu li li {font-size: 10px; margin: 0; text-align: left;}
.sf-topMenu li li a, .sf-topMenu li li a:visited {padding: 5px 10px; line-height: normal;}

/*.sf-topMenu li li li {background: #9AAEDB;}

.sf-topMenu li:hover, .sf-topMenu li.sfHover, .sf-topMenu a:focus, .sf-topMenu a:hover, .sf-topMenu a:active {outline: 0;}*/
.sf-topMenu li li:hover, .sf-topMenu li li.sfHover, .sf-topMenu li li a:focus, .sf-topMenu li li a:hover, .sf-topMenu li li a:active {outline: 0;}


/*** TOPMENU ARROWS **/
.sf-topMenu a.sf-with-ul {padding-right: 2.25em; min-width: 1px;} /* trigger IE7 hasLayout so spans position accurately */
.sf-sub-indicator {position: absolute; display: block; left: .75em; top: 1.05em; /* IE6 only */
width: 13px; height: 8px; text-indent: -999em; overflow: hidden;} /* 8-bit indexed alpha png. IE6 gets solid image only */
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;} /* use translucent arrow for modern browsers*/


#webmail {width: 125px; background: url('../../media/bg_topmenu125.png') no-repeat;}
#schoolSelect {width: 180px; background: url('../../media/bg_topmenu180.png') no-repeat;}



/*** SIDEMENU LAYOUT ***/
.sidemenu {float: left; display: block; width: 248px;}
.sidemenu ul {display: block; list-style-type: none; margin: 0; padding: 0;}
.sidemenu ul li {}

.sidemenu li a {display: block; padding: 5px 0; padding-left: 30px; text-decoration: none;}

.sidemenu ul li a {display: block; padding: 5px 0; padding-left: 40px; text-decoration: none;}


/*** FORM **/
label {position: absolute; text-align: right; width:130px;}
input, textarea {margin-left: 140px;}
form p {margin: 0 0 0.5em 0;}
fieldset {border: 0;}
legend {padding: 2px 6px}

	form label.required{background-image:url(/media/required_star.gif);	background-position:right;background-repeat:no-repeat;
		}
	
	form span.required{
		padding-right:15px;
		}
		
	form .clean
		{
		border:none;
		}
		
	form .info{
		padding-top:0.5em;
		font-size:80%;
		line-height:100%;
		color:#aaa;
		}
		
	form .indent{
 		padding:2px 20px; 
		width:auto !important;
		white-space:nowrap;
		padding-left: 25px !important;
 		}
		
	form label.disabled{
		color:#aaa;
		}
	
	form .highlight{
		background-color:#e2e2e2;
		}
	
	.off{
		display:none !important;
		}
		
	.clear{
		clear:both;
		}