body, html {
	background-image: url(../files/img/background_200-200.jpg);
	margin: 0px;
	padding: 0px;
}

* {						/* changing the default margins in different browsers */
	margin: 0px;
	padding: 0px;
}

#popup {
	background-color: #000000;
	overflow: auto;
}

#div_all {
	background-image: url(../files/img/background_black_bar.jpg);
	background-repeat: repeat-x;
	height: 40px;
}

#grunge_name {
	width: 372px;
	height: 183px;
	background-image: url(../files/img/hi_my_name_is_372-183.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	position: absolute;
	top: 0px;
	left: 0px;
}

#right_div_all {
	width: 611px;				/* brings the div next to grunge_name */
	position: relative;			/* else, the menu would not float to the right */	
	float: right;
	background-image: url(../files/img/grunge_right_113-40.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

#content_div {
	width: 498px;
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 12px;
}


/* ----------horizontal menu-----------*/
#menu {
	height: 40px;
}

#menu ul li {
	height: 38px;
	display: block;
	list-style: none;
	position: absolute;	
}

#menu ul li a {
	height: 38px;
	display: block;
}
	
#mi01_nieuws {					/* positioning button */
	background-image: url(../files/img/mi01_nieuws_62-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 0px;
	width: 62px;
}

#mi01_nieuws a:hover {			/* hover: positioning background */
	background-image: url(../files/img/mi01_nieuws_62-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	left: 0px;
	width: 62px;
}

#mi02_profiel {				/* positioning button */
	background-image: url(../files/img/mi02_profiel_79-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 62px;
	width: 79px;
}

#mi02_profiel a:hover {			/* hover: positioning background */
	background-image: url(../files/img/mi02_profiel_79-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	left: 62px;
	width: 79px;
}

#mi03_traject_mct {				/* positioning button */
	background-image: url(../files/img/mi03_traject_mct_118-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 141px;
	width: 118px;
}

#mi03_traject_mct a:hover {		/* hover: positioning background */
	background-image: url(../files/img/mi03_traject_mct_118-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	left: 141px;
	width: 118px;
}

#mi04_curriculum_vitea {			/* positioning button */
	background-image: url(../files/img/mi04_curiculum_vitea_153-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 259px;
	width: 153px;
}

#mi04_curriculum_vitea a:hover {	/* hover: positioning background */
	background-image: url(../files/img/mi04_curiculum_vitea_153-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	left: 259px;
	width: 153px;
}


#mi05_showcase {				/* positioning button */
	background-image: url(../files/img/mi05_showcase_86-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 412px;
	width: 86px;
}

#mi05_showcase a:hover {			/* hover: positioning background */
	background-image: url(../files/img/mi05_showcase_86-40.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	left: 412px;
	width: 86px;
}

/* ----------content left----------*/
#left {
	width: 324px;
	float: left;
}

	/* content left main */
.left_main {					/* selected content in this div */
	background-color: #FFFFFF;
	width: 324px;
	margin-top: 68px;
}

.left_main a {
	color: #363737;
	background-color: #F3F3F3;
	text-decoration: none;
}

.left_main a:hover {
	background-color: #EAEAEA;
}

#ti01_nieuws {					/* title in div "left_main" */
	background-image: url(../files/img/ti01_nieuws_236-87.jpg);
	background-repeat: no-repeat;
	height: 87px;
	border-bottom: dashed;
	border-width: 1px;
	border-color: #CCCCCC;
}

#ti02_profiel {				/* title in div "left_main" */
	background-image: url(../files/img/ti02_profiel_236-87.jpg);
	background-repeat: no-repeat;
	height: 87px;
	border-bottom: dashed;
	border-width: 1px;
	border-color: #CCCCCC;
}

#ti03_traject_mct {				/* title in div "left_main" */
	background-image: url(../files/img/ti03_traject_mct_236-87.jpg);
	background-repeat: no-repeat;
	height: 87px;
	border-bottom: dashed;
	border-width: 1px;
	border-color: #CCCCCC;
}

#ti04_curriculum_vitea {			/* title in div "left_main" */
	background-image: url(../files/img/ti04_curriculum_vitea_236-87.jpg);
	background-repeat: no-repeat;
	height: 87px;
	border-bottom: dashed;
	border-width: 1px;
	border-color: #CCCCCC;
}

#ti05_showcase {				/* title in div "left_main" */
	background-image: url(../files/img/ti05_showcase_236-87.jpg);
	background-repeat: no-repeat;
	height: 87px;
	border-bottom: dashed;
	border-width: 1px;
	border-color: #CCCCCC;
}

span.displaynone {
	display: none;
}

.list {
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.list_line {			/* when there are one more items, only text */
	background-image: url(../files/img/list_style_line_5-5.jpg);
	background-repeat: no-repeat;
	background-position: center left;
	margin-top: -4px;
	margin-bottom: -4px;
}

.list_line p {
	margin-left: 10px;
}

.list_minder {			/* when there is only one list item, text or links */
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 8px;
}

.list_line_linken {		/* when there are more then one list item, only links */
	background-image: url(../files/img/list_style_line_5-5.jpg);
	background-repeat: no-repeat;
	background-position: center left;
	margin-top: -1px;
	margin-bottom: -1px;
}

.list_line_linken p {
	margin-left: 10px;
}

		/* parts for nieuws */
.title_nieuws {
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 4px;		/* nessesary for white space at bottom of "left_main" */
}

.title_nieuws h1 {
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 14px;
	color: #FFFFFF;
}

span.title_background {
	background-color: #363737;
}

.title_nieuws h2 {				/* style for date-text */
	margin-bottom: 40px;
	text-align: right;
	font-weight: normal;
	font-size: 12px;
	color: #999999;
}

.title_nieuws h3 {
	margin-top: 30px;
	margin-bottom: 6px;
	text-align: left;
	font-weight: normal;
	font-size: 12px;
	color: #363737;
	font-size: 14px;
	font-style: italic;
}

.space {
	height: 30px
}

.title_nieuws p {
	margin-bottom: 4px;			/* alineaspace in mycomment */
	text-align: left;
	color: #363737;
}

.read_all_about_it {
	margin-top: 73px;
	background-image: url(../files/img/read_all_about_it_324-231.jpg);
	background-repeat: no-repeat;
	width: 324px;
	height: 231px;
	padding-bottom: 20px;
}

.quote {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
	border-color: #EAEAEA;
	border-style: solid;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	background-color: #F3F3F3;	
}

.quote p {
	margin: 5px;
}

.image_container {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
}

.image {
	padding: 5px;
	margin-bottom: 20px;
	border-color: #EAEAEA;
	border-style: solid;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	background-color: #F3F3F3;
}

.image p {
	margin-top: 10px;
	color: #999999;
}

.image a {
	color: #999999;
	text-decoration: underline;
}

.image a:hover {
	color: #999999;
	background-color: #EAEAEA;
}

		/* parts for profiel */
.title_profiel {
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 4px;		/* nessesary for white space at bottom of "left_main" */
}

.title_profiel h1 {
	margin-top: 58px;
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 14px;
	color: #FFFFFF;
}

span.title_background {
	background-color: #363737;
}

.title_profiel p {
	margin-bottom: 4px;			/* alineaspace in mycomment */
	text-align: left;
	color: #363737;
}

.mugshots {
	margin-top: 44px;
	background-image: url(../files/img/profiel_mugshots_324-287.jpg);
	background-repeat: no-repeat;
	width: 324px;
	height: 287px;
	padding-bottom: 20px;
	
}

		/* parts for traject mct */
.title_traject_mct h1 {
	margin-top: 58px;
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 14px;
	color: #FFFFFF;
}

span.title_background {
	background-color: #363737;
}

		/* parts for curriculum vitea */
.curriculum_vitea {
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 4px;		/* nessesary for white space at bottom of "left_main" */
}

.table {
	color: #363737;
	line-height: 16px;
	margin-top: 58px;
}

.table h1 {
	font-weight: normal;
	letter-spacing: 1px;
	color: #363737;
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 1px;
}

ul.grey_line {
	margin-left: 17px;
	list-style-image: url(../files/img/list_style_line_3-11.jpg);
}

td {
	vertical-align: top;
}

.table_block {
	margin-bottom: 13px;
}

.table_title {
	margin-top: 30px;
	margin-bottom: 2px;
}

span.table_title {
	background-image: url(../files/img/background_text_small_1-18.jpg);
	background-repeat: repeat-x;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 1px;
}

.table_cell_height {
	height: 50px;
}

.voetnoot {
	background-color: #FFFFFF;
	margin-top: 25px;
}

.voetnoot p{
	color: #363737;
	margin-left: 10px;
}

		/* parts for showcase */
.left_preview {				/* positioning preview image */
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
}

.left_preview p {				/* text layout "bekijk grotere versie */
	margin-top: 0px;
	text-align: right;
	color: #63636d;
}

.title_mycomment {				/* making a place for the 2nd title */
	margin-bottom: 6px;			/* !alineaspace! */
}

span.title_mycomment {			/* nessesary because else the background-color would fill the whole text-rule */
	background-color: #363737;
	text-align: left;
	color: #FFFFFF;
	font-size: 14px;
}

.mycomment {
	margin-top: 20px;
	padding-bottom: 4px;		/* nessesary for white space at bottom of "left_main" */
}

.mycomment p {
	margin-bottom: 4px;			/* alineaspace in mycomment */
	text-align: left;
	color: #363737;
}

		/* content left bottom */
#left_bottom {
	margin-top: 0px;
}

#ti_10_beste {
	margin-top: 100px;
	margin-bottom: 20px;
	background-image: url(../files/img/ti_under_10_beste_251-52.jpg);
	background-repeat: no-repeat;
	height: 70px;
}

#ti_multimedia {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_multimedia_144-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

#ti_webtechnologie {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_webtechnologie_195-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

#ti_print {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_print_108-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

#ti_foto_manipulatie {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_foto_manipulatie_232-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

#ti_web {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_web_114-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

#ti_tutorials {
	margin-top: 100px;
	background-image: url(../files/img/ti_under_tutorials_110-52.jpg);
	background-repeat: no-repeat;
	height: 65px;
}

.background_grunge {
	background-image: url(../files/img/grunge_pattern_324-514.jpg);
	background-repeat: repeat-x;
	margin-top: -23px;			/* because the space between title and item is smaller than the space between 2 items */
}

#container_items_left_bottom {
	position: relative;
	top: -20px;				/* lifts the container 20px higher then the background */
}

.ti_item_left_bottom {
	text-align: right;
	margin-top: 38px;			/* space between 2 items */
	margin-bottom: 2px;
}

.ti_item_left_bottom a {
	background-color: #FFFFFF;
	color: #363737;
	text-decoration: none;
}

.ti_item_left_bottom a:hover {
	background-color: #363737;
	color: #FFFFFF;
}

* .item_left_bottom_less {	/* only 1 */
	padding: 5px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
}

.item_left_bottom_less {
	padding: 5px;
	padding-bottom: 0px;
	background-color: #FFFFFF;
}

.item_left_bottom {
	padding: 5px;
	padding-bottom: 0px;
	background-color: #FFFFFF;
}

* html .item_left_bottom_more {	/*  6 or more items */
	padding: 5px;
	background-color: #FFFFFF;
}

.item_left_bottom_more {
	padding: 5px;
	padding-bottom: 0px;
	background-color: #FFFFFF;
}


/* ----------content right----------*/
#right {
	width: 174px;
	float: right;
}

#right_main {
	width: 155px;
	margin-left: 19px;
	margin-top: 88px;
	text-align: right;
	position: absolute;			/* for margin-top to work tha same */
}

.title_right {
	margin-top: 50px;
	margin-bottom: 15px;
}

span.title_right {				/* nessesary because else the background-color would fill the whole text-rule */
	background-color: #363737;
	color: #FFFFFF;
	font-size: 14px;
}

.item_right {
	margin-bottom: 5px;
}

.item_right a {
	background-color: #FFFFFF;
	color: #363737;
	text-decoration: none;
}

.item_right a:hover {
	background-color: #363737;
	color: #FFFFFF;
}