/*  ==========================================================================================
	Project: 					Sint-Maartenscollege, nieuwe website juli 2005
	Original author :			Gaston Jamin (g.jamin@nexwork.nl)
 	------------------------------------------------------------------------------------------
	Laatste aanpassing door :	Gaston Jamin
	Laatste aanpassing datum:	13-07-2005
	
	========================================================================================== */

#print { display: none; }

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	margin: 0; padding: 0;
	background-image: url(../media/totaal_bg.gif);
	behavior:url("stylesheet/csshover.htc");
}

a { color: #ce003d; text-decoration: underline; }
a:hover { text-decoration: none; }

/* -----------------------------------------------------------------------------------------------
Dit is de eerste laag in de layout: de header. Deze omvat de hele bovenbalk met foto, logo en de
zoekfunctie.
-------------------------------------------------------------------------------------------------- */

#headercontainer {
	width: 100%;
	height: 190px;
	max-width: 1003px;
	width: expression(document.body.clientWidth > 1003 ? "1003px" : "");
	/*background: #ce003d url(../media/contentheader_01.jpg) 200px top repeat-x;*/
	overflow: hidden;
	border-bottom: 2px solid white;
}
body div.background01 { background: #ce003d url(../media/contentheader_01.jpg) 200px top repeat-x; }
body div.background02 { background: #ce003d url(../media/contentheader_02.jpg) 200px top repeat-x; }
body div.background03 { background: #ce003d url(../media/contentheader_03.jpg) 200px top repeat-x; }
body div.background04 { background: #ce003d url(../media/contentheader_04.jpg) 200px top repeat-x; }
body div.background05 { background: #ce003d url(../media/contentheader_05.jpg) 200px top repeat-x; }
body div.background06 { background: #ce003d url(../media/contentheader_06.jpg) 200px top repeat-x; }
body div.background07 { background: #ce003d url(../media/contentheader_07.jpg) 200px top repeat-x; }
body div.background08 { background: #ce003d url(../media/contentheader_08.jpg) 200px top repeat-x; }

#headerleftcol { padding-top: 115px; width: 200px; height: 190px; background: #dfcaa6 url(../media/header_id.gif) top left no-repeat; float: left; }
#headerlogo { float: right; width: 283px; height: 190px; background: #ce003d url(../media/logo.jpg) left top repeat-x; }

#headerutilities { float: right; width: 125px; height: 33px; margin: 46px 8px 0 0; }	
#headerutilities ul { margin: 0; padding: 0; }
#headerutilities li { display: inline; list-style: none; }
#headerutilities a { background: transparent url(../media/btn_home.gif) left top no-repeat; width: 39px; height: 33px; float: right; text-decoration: none; text-indent: -9999px; }
#headerutilities a:hover { background-position: left bottom; }
#headerutilities .btn_home { background-image: url(../media/btn_home.gif); }
#headerutilities .btn_mail { background-image: url(../media/btn_mail.gif); }
#headerutilities .btn_print { background-image: url(../media/btn_print.gif); }

#headerzoek { width: 200px; height: 75px; }
#headerzoek form { margin: 22px 0 0 8px; }
#headerzoek input { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: black; background:silver;/*background-image: url(../media/btn_bg.gif);*/ height:15px; width: 125px; border: 1px solid black; }
#headerzoek .btn_submit { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal;line-height: 12px; color: white; background-image: url(../media/btn_bg.gif);height: 19px; width: 45px; border: 1px solid #828282; cursor: pointer; }
* html #headerzoek .btn_submit { border: 0px solid black;	}

/* -----------------------------------------------------------------------------------------------
Dit is de tweede laag in de layout van de indexpagina: het gedeelte voor de content. De basis staat
in een table om ervoor te zorgen dat als de pagina naar 800x600 gaat, de blokken in het middelste content-
gedeelte onder elkaar blijven staan in het midden.
-------------------------------------------------------------------------------------------------- */

#contentcontainer { width: 100%; overflow: hidden; background: transparent url(../media/werkveld_bg2.jpg) left top repeat-y; }

#contentcontainer table {
	width: 100%;
	max-width: 1003px;
	width: expression(document.body.clientWidth > 1003 ? "1003px" : "");
	height: 100%;	
	padding: 0;
	margin: 0;
}

#contentcontainer table .colmenu{
	width: 200px;
	vertical-align: top;
	background-color: #dbc49c;
	border-right: 2px solid white;

}
#contentcontainer table .colcontent{
	vertical-align: top;
	background-color: #f3ebdb;border-right: 2px solid white;
}

#contentcontainer table .colnews{
	width: 281px;
	vertical-align: top;
	background: white url(../media/nieuwskolom_bg.gif) right top repeat-y;
	padding-bottom: 30px;
	text-align: left;
}

#contentcontainer .paragraaf table {
	width: auto;
	max-width: auto;
	height: auto;	
	padding: 0;
	margin: 0;
}

#colcontainer { padding: 15px; 	}

#contentcontainer, #contentcontainer p { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 12px;	line-height: 17px; color: #6e6e6e; }

#contentcontainer h1 { margin: 15px 15px 15px 0; color: #ce003d; letter-spacing: 0em; font-size: 18px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}
#contentcontainer h2 { margin: 0; color: #ce003d; letter-spacing: 0em; font-size: 12px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;}

#contentcontainer .paragraaf { margin: 0 15px 15px 0; clear: both; overflow: hidden;}
#contentcontainer .paragraaf p { margin-top: 0; /*overflow:auto;*/ }
#contentcontainer .paragraaf img { float: left; border: 1px solid #858483; margin: 3px 8px 3px 0; padding: 0; }
/*#contentcontainer .paragraaf table { border-collapse: collapse; border: 1px solid black; }
#contentcontainer .paragraaf td { border: 1px solid black; padding: 4px; }*/

#contentcontainer a.topbutton {	float: right;	width: 17px; height: 16px; margin: 15px 0 5px 0; background: transparent url(../media/topbutton.gif) left top no-repeat; text-indent: -9999px; text-decoration: none; }


/* -----------------------------------------------------------------------------------------------
De opmaak van linkerkolom, homepage
------------------------------------------------------------------------------------------------- */
#logout { display: none; }
#login { width: 200px; height: 130px; background-color: #ede2ce; border-bottom: 2px solid white; }
#login p { margin: 0 0 5px 0;   }
#login label { margin-left: 5px; font-size: 10px; letter-spacing: 0; }
#login h2 { width: 190px; height: 25px; padding: 5px 0 0 0;	margin: 0 0 5px 8px; font-size: 16px; color: #83817d; }
#login form { padding-bottom: 5px; margin: 8px 0 0 8px; overflow: hidden; }
#login input { line-height: 15px; color: #828282; background-color: #f6f0e6; height: 15px; width: 125px; margin-bottom: 3px; border: 1px solid #828282; }
#login .btn_submit { border: 0; line-height: 15px; color: white; background-image: url(../media/btn_bg.gif); height: 19px; width: 45px;	float: right; margin: 10px 12px 0 0; cursor: pointer;	font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
* html	#login .btn_submit { border: 0px solid black; } /* voor explorer geen border vanwege vieze dubbele lijn */

#margefoto { display: none; width: 200px; height: 115px; margin: 0; padding: 0; border: 2px solid white; border-width: 0 0 2px 0}
#margefoto.foto01 { background: transparent url(../media/margefoto_01.jpg) left top no-repeat; }
#margefoto.foto02 { background: transparent url(../media/margefoto_02.jpg) left top no-repeat; }

#contentcontainer .bannercontainer { width: 185px; margin: 10px 0 10px 6px; padding: 0; }				
#contentcontainer .bannercontainer img { border: 1px solid #5b5b5b; margin: 0 0 10px 0; padding: 0; display: block;	}

/* -----------------------------------------------------------------------------------------------
Kruimelpad
-------------------------------------------------------------------------------------------------- */

#pad { font-size: 10px; color: #83817d; text-align: left; font-family: Arial, Helvetica, sans-serif; }
#pad ul { width: 100%; margin: 0;	padding: 0; }
#pad li { list-style: none; display: inline; padding: 0 2px 0 0; }
#pad a { text-decoration: none;	color: #83817d; }
#pad img { border: 0; margin-right: 5px; }
#pad a:hover { text-decoration: underline; color: #ce003d; }


/* -----------------------------------------------------------------------------------------------
De opmaak van de rechterkolom (nieuws)
-------------------------------------------------------------------------------------------------- */

#indexnewscol { overflow: hidden; background: white url(../media/nieuwskolom_bg.gif) left top repeat-y;}
#indexnewscol h2.nieuwstitel { margin: 0; text-indent: -9999px; width: 206px; height: 25px; background: transparent url(../media/nieuws_titelhavovwo.png) right top no-repeat; }
#indexnewscol h2.agendatitel { margin: 0; text-indent: -9999px; width: 206px; height: 25px; background: transparent url(../media/nieuws_titelvmbo.png) right top no-repeat; }
#indexnewscol h5 { width: 140px;margin: 6px 0 20px 0; font-size: 11px; font-weight: normal; padding-left: 5px; color: #ce003d; background: transparent url(../media/opsommingsblokje.gif) right 5px no-repeat; }
#indexnewscol h5 a { text-decoration: none; }
#indexnewscol h5 a:hover{ text-decoration: underline; }
#indexnewscol .teaser {	position: relative;width: 268px; min-height: 70px; } /* dit zorgt ervoor dat er in firefox geen scrollbalk komt als de teaser te kort is */
#indexnewscol .teaser p {	width: 198px;	font-size: 11px; line-height: 17px; color: #6e6e6e;padding-left: 5px;margin: 0 0 5px 0; }
#indexnewscol .teaser p a { font-weight: bold; color: #6e6e6e; }
#indexnewscol .teaser p a:hover { font-weight: bold; color: #6e6e6e; text-decoration: none; }
#indexnewscol .teaser h3 { width: 198px; margin: 8px 0 8px 0; font-size: 14px; padding-left: 5px; color: #ce003d; }
#indexnewscol .teaser img { position: absolute; bottom: 0; right: 0; border: 1px solid #858483; margin: 0; width: 58px; }
* html #indexnewscol .teaser img { margin-bottom: 7px; } /* hack voor IE, afwijkende maat voor uitlijning foto tov de hr */
#indexnewscol .teaser hr { width: 206px; height: 1px; padding: 0;	margin-bottom: 0; margin-left: 0;text-align: left; }


/* -----------------------------------------------------------------------------------------------
De footer
-------------------------------------------------------------------------------------------------- */
#footer { width: 100%; max-width: 1003px; width: expression(document.body.clientWidth > 1003 ? "1003px" : ""); height: 25px; background: transparent url(../media/footer_bg.gif) bottom left repeat-x; border-top: 2px solid white; }	
#footer .tekst { margin: 3px 0 0 8px; color: white; letter-spacing: -0.02em; font-family: Trebuchet MS, Arial, Helvetica, sans-serif;	font-size: 12px; }
#footer .tekst a { color: white; text-decoration: underline; }
#footer .tekst a:hover { text-decoration: none; }


/* -----------------------------------------------------------------------------------------------
Hoofdrubrieken pulldown en het Submenu
-------------------------------------------------------------------------------------------------- */

#hoofdrubrieken { width: 200px; height: 75px; background-color: #ede2ce; border-bottom: 1px solid #c8b89a; }
#hoofdrubrieken p { margin: 0; }
#hoofdrubrieken h2 { width: 190px; height: 25px; padding: 5px 0 0 0; margin: 0 0 5px 8px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 16px; color: #83817d; }
#hoofdrubrieken form { padding-bottom: 5px; margin: 8px 0 0 8px; overflow: hidden; }
#hoofdrubrieken select { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #828282; background-color: white; height: 19px; width: 180px; margin-bottom: 5px; border: 1px solid #828282; }

#submenu { font-family: Arial; width: 200px; background: #ede2ce; border-bottom: 2px solid white; } /*font-family zorgt voor IE bug*/
#submenu ul, #submenu li, #submenu a { display:block; margin:0; padding:0; border:0; }
#submenu ul { width:200px; background: #c8b89a; list-style:none; }
#submenu li { position:relative; padding: 0 0 1px 0; z-index:9; }
	#submenu li.folder ul {	position:absolute; left:200px; top:0; border:1px solid #715523;	border-width: 1px 1px 0px 1px; background: #715523; }		
#submenu a { padding:4px 25px 4px 25px; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #696969; text-decoration:none; width:150px; /* IE */ background: #e1d3bb url(../media/submenu_bg.gif) left top repeat-x; }
	#submenu li>a { width:auto; padding-top: 5px; } /* others */
#submenu li a.folder { background: #e1d3bb url(../media/submenu_folder_bg.gif) left top no-repeat; }
/* regular hovers */
#submenu a:hover { color:#ce003d; background: #d8c7a8 url(../media/submenu_rollbg.gif) left top repeat-x;}
#submenu li.folder a:hover { background: #d8c5a8 url(../media/submenu_folder_rollbg.gif) left top no-repeat; }
	#submenu li.folder ul a { background: #a08b66; color: white; padding-left: 7px; }
	* html #submenu li.folder ul a { width: 168px; } /*boxmodel*/
	#submenu li.folder ul a:hover { background: #d0c0a3; color:#ce003d;}
/* hovers with specificity */
#submenu li.folder:hover { z-index:10; }		
#submenu ul ul, #submenu li:hover ul ul { display:none; }
#submenu li:hover ul, #submenu li:hover li:hover ul { display:block; }		


/**  IE5.5  **********************************************/

	#submenu li { margin-left:-16px; }
	#submenu a { width: 200px; }
	* html #submenu li.folder ul a { width: 200px }

	#s\ubmenu li { margin-left: 0; }
	#s\ubmenu a { width: 150px; }
	* html #s\ubmenu li.folder ul a { width: 168px }

/*********************************************************/

/**  IE5.0  **********************************************/

	#submenu li { margin-bottom: -4px; height: 0px;}

	#submenu li/**/ { margin-bottom: 0; height: auto;}

/*********************************************************/


/* -----------------------------------------------------------------------------------------------
Zoekmachine
-------------------------------------------------------------------------------------------------- */
#zoekmachine_header { background-image: url(../media/zoekmachine_header.gif); width: 100%;  }
#zoekmachine_header p { margin: 0; height: 25px; color: white; font: bold 12px Arial; line-height: 25px; margin-left: 11px; background: transparent url(../media/zoekheader1_logo.jpg) right top no-repeat;}
#zoekmachine_header ul { border: 1px solid #dfcaa6; margin: 0; padding: 5px 23px; background: #ede2ce url(../media/zoekheader2.gif) bottom left repeat-x;}
* html #zoekmachine_header ul { padding-left: 25px; }
#zoekmachine_header li { list-style-image: url(../media/zoekmachine_li.gif); }

#zoekmachine_voorkeur { background-image: url(../media/zoekmachine_voorkeur.gif); width: 100%; margin-top: 20px;  }
#zoekmachine_voorkeur p { margin: 0; height: 25px; color: white; font: bold 12px Arial; line-height: 25px; margin-left: 11px; background: transparent url(../media/zoekmachine_voorkeur_logo.jpg) right top no-repeat;}
#zoekmachine_voorkeur ul { border: 1px solid #dfcaa6; margin: 0; padding: 5px 23px; background: #ede2ce url(../media/zoekheader2.gif) bottom left repeat-x;}
* html #zoekmachine_voorkeur ul { padding-left: 25px; }
#zoekmachine_voorkeur li { list-style-image: url(../media/zoekmachine_li.gif); }
#zoekmachine_voorkeur li a { text-decoration: none; }
#zoekmachine_voorkeur li a:hover { text-decoration: underline; }

#zoekmachine .zoekmachine_results { background-image: url(../media/zoekmachine_results.gif); width: 100%; margin-top: 20px;  }
#zoekmachine .zoekmachine_results p { margin: 0; height: 25px; color: white; font: bold 12px Arial; line-height: 25px; margin-left: 11px; background: transparent url(../media/zoekmachine_results_logo.jpg) right top no-repeat;}
#zoekmachine .zoekmachine_results ul { border: 1px solid #dfcaa6; margin: 0; padding: 5px 2px; background: #ede2ce url(../media/zoekheader2.gif) bottom left repeat-x;}
* html #zoekmachine .zoekmachine_results ul {  }
#zoekmachine .zoekmachine_results li { list-style: none; background: white url(../media/zoekmachine_li.gif) 11px 5px no-repeat; padding: 3px 23px; margin-bottom: 1px; }
#zoekmachine .zoekmachine_results li a { text-decoration: none; }
#zoekmachine .zoekmachine_results li a:hover { text-decoration: underline; }
#zoekmachine .zoekmachine_results li.pagina { background: none; margin-top: 5px; padding: 0 11px; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px;}
#zoekmachine .zoekmachine_results li.pagina a { display: inline; background: none; padding: 0; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px;  }




/* -----------------------------------------------------------------------------------------------
Rooster
-------------------------------------------------------------------------------------------------- */
#rooster { background-image: url(../media/zoekmachine_header.gif); width: 100%;  }
#rooster p { margin: 0; height: 25px; color: white; font: bold 12px Arial; line-height: 25px; margin-left: 11px; background: transparent url(../media/zoekheader1_logo.jpg) right top no-repeat;}
#rooster table { width: 100%; border: 1px solid #dfcaa6; margin: 0; padding: 2px; background: #ede2ce url(../media/zoekheader2.gif) bottom left repeat-x;}
#rooster th, #rooster td { background: white; padding: 2px 5px; margin: 0; text-align: left; }
#rooster li { list-style-image: url(../media/zoekmachine_li.gif); }
#rooster a { font-weight: bold; }


/* -----------------------------------------------------------------------------------------------
De opmaak van de hallways (blokken met links in het werkveld)
-------------------------------------------------------------------------------------------------- */

#contentcontainer .hallwaycontainer{
	overflow: hidden;
	width: 100%;
	background: #ede2ce url(../media/hallwaycontainer_bg.jpg) left bottom no-repeat;
 	border-bottom: 2px solid white;
}
#contentcontainer .hallwayfooter{
	width: 100%;
	height: 100px;
	overflow: hidden;
	background: transparent url(../media/hallwayfooter_bg.gif) left top repeat-x;
}

#contentcontainer .indexhallway {
	width: 258px;
	float: left;		
	padding-bottom: 20px;
}
#contentcontainer .indexhallway h2 {
	margin: 8px 15px 8px 15px;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ce003d;
	letter-spacing: 0em;
}
#contentcontainer .indexhallway ul {
	margin: 8px 15px 8px 15px;
	padding: 0;
}

#contentcontainer .indexhallway li {
	list-style: none;
}
#contentcontainer .indexhallway a {
	display: block;
	margin: 0;
	padding: 3px 10px 0 3px;
	border-bottom: 1px solid #b5a17c;
	background: transparent url(../media/portal_opsommingsblokje.gif) right top no-repeat;
	text-decoration: none;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #6e6e6e;
	letter-spacing: normal;
} * html #contentcontainer .indexhallway a { padding-top: 2px; height: 20px;}
#contentcontainer .indexhallway a:hover{
	background-color: #f6f0e6;
	color: #ce003d;
}


/**************************************************************************************************/
#contactform {  }
#contactform span { margin-top: 4px;float: left; width: 180px; font-weight: normal; }
#contactform label { display: block; margin: 10px 0; font-size: 12px; }
#contactform input, #contactform textarea { width: 200px;  }
#contactform .radio, #contactform .checkbox { width: auto; }
#contactform input.submit, #contactform input.reset { border: 1px solid black; background-color: #ce003d; font-size: 10px; color: #FFF; width: 60px; }
#contactform input.reset { width: 40px; }

#jarigen { display: none; }