body{				
	height: auto; 
	background-color: rgb( 250, 250, 255 );
	font-family: sans-serif;
	color: rgb( 128, 80, 80 );
	background-image: url( "images/background_wave_img.png" );
	background-position: 100% 100%; 
}

#ultra_ego_area{
	position: fixed;
	left: 0px;
	top: 0px;
	padding-top: 2px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 25px;
	font-family: "Kreon", "arial";
	font-weight: 100;
	font-size: 42px;
	color: rgb( 192,  115,   97 );
	background-image: url( "images/white_75pc_transp.png" );
	z-index: 10;
}

#navigation_bar{
	position: fixed;
	top: 0px;
	right: 30px;
	min-width: 300px;
	height: 10px;		
	font-family: "Kreon", "arial";
	font-size: 14px;
	font-weight: lighter;
	text-align: center;
	z-index: 15;
}

.navigation_bar_item{
	float: left;
	width: 100px;
	height: 40px;
	margin-left: 10px;
	padding: 5px;
	color: rgb( 216, 216, 157);
	background-image: url("images/navBar_green_75pc_transp.png");
}

#outer_area{
	padding-right: 40px;
}

/* main area */
#main_area{
	position: relative;
	left: 8%;
	top: 150px;
	/* border: 1px dashed rgb( 255, 255, 0); */
	min-width: 500px;
	/* max-width: 1200px; */
	min-height: 500px;
}


/* ||||||||  index page specific |||||||| */
/* ||||||||  index page specific |||||||| */
/* ||||||||  index page specific |||||||| */


#hello{
	position: relative;
	left: 0.3125em;
	width: 4.6875em;
	/* height: 2.4375em; */
	/* background-image: url(images/beige_transp_227_227_180__85pc_transp.png); */
	background-color: rgba(240, 240, 208, 0.5);
	font-family: Kreon, arial;
	font-weight: 100;
	font-size: 3.4375em;
	color: rgb( 124, 27, 2 );
}

#self_description{
	position: relative;
	left: 2.3125em;
	top: 1.3125em;
	/* width: 100px; */
	min-width: 55%;
	/* max-width: 65%; */
	max-width: 8.875em;
	/* height: 100px; */
	padding-left: 1.375em;
	padding-top: 0.875em;
	padding-right: 3.25em;
	padding-bottom: 0.8125em;
	/* background-image: url(images/beige_transp_227_227_180__85pc_transp.png); */
	background-color: rgba(240, 240, 208, 0.5);
	color: rgb( 124, 27, 2 );
	font-family: Open Sans, arial, sans-serif;
	font-weight: 500;
	font-size: 0.8125em;
	line-height: 1.5875em;
}


/*	 |||||||||||||||  projects listings    ||||||||||   	*/
/*	 |||||||||||||||  projects listings    ||||||||||   	*/
/*	 |||||||||||||||  projects listings    ||||||||||   	*/


/* about me text area */
#aboutMeText_area{
	position: relative;
	left: 37px;
	width: 267px;
	height: 71px;
	/* background-color: rgba(247, 247, 198, 0.5); */
	background-color: rgba(240, 240, 208, 0.5);
	/* background-image: url("images/beige_transp_227_227_180__85pc_transp.png"); */
	font-family: Kreon, arial;
	/* font-style: book ; */
	font-weight: 100;
	font-size: 55px;
	color: rgb( 124, 27, 2 );
}

#self_description_short{
	position: relative;
	left: 37px;
	top: 21px;
	/* width: 100px; */
	min-width: 300px;
	/* max-width: 65%; */
	max-width: 600px;
	/* height: 100px; */
	padding-left: 22px;
	padding-top: 14px;
	padding-right: 52px;
	padding-bottom: 13px;
	/* margin-right: 200px; */
	/* background-color: rgba(247, 247, 198, 0.5); */
	background-color: rgba(240, 240, 208, 0.5);
	/* background-image: url("images/beige_transp_227_227_180__85pc_transp.png"); */
	color: rgb( 124, 27, 2 );
	font-family: Open Sans, arial, sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 19px;
}

.linkstyle{
	color: rgb( 190, 85, 85 );
}

/* remove link decorations please */
a:link { text-decoration:none; }      /* unvisited link */



/*   main outer area  */
#projects_listing_outer_area{
	position: relative;
	left: 0em;
	top: 6.375em;
}


/*   individual project :  outer area  */
.project_main_page_entry_outer{
	position: relative;
	float: left;
	margin-right: 1.5em;
	margin-bottom: 2.25em;
	width: 17.625em;
	height: 11.0625em;
	background-image: url("images/beige_transp_227_227_180__85pc_transp.png");
	background-size: 100%;
	/* background-attachment:fixed;
	background-position: 50px -70px; */
}

/* indivudal project: description area */
.individual_project_description_area__for_light_backgrounds{
	position: absolute;
	bottom: 0px;
	max-width: 100%;
	max-height: 3.5625em;
	padding-left: 0.8125em;
	padding-right: 0.625em;
	padding-top: 0.4375em;
	padding-bottom: 0.5em;
	background-color: rgba(251, 251, 230, 0.85);
	/* background-color: rgba(255, 251, 223, 0.85); */
	/* background-color: rgba(231, 218, 133, 0.85); */
	/* background-image: url("images/black_40pc_transp.png"); */
}

/* indivudal project: description area */
.individual_project_description_area__for_DARK_backgrounds{
	position: absolute;
	bottom: 0em;
	max-width: 100%;
	max-height: 3.5625em;
	padding-left: 0.8125em;
	padding-right: 0.625em;
	padding-top: 0.4375em;
	padding-bottom: 0.5em;
	background-color: rgba(251, 251, 230, 0.95);
	/* background-color: rgba(255, 251, 223, 0.85); */
	/* background-color: rgba(231, 218, 133, 0.85); */
	/* background-image: url("images/black_40pc_transp.png"); */
}			


/* individual project;   description area    : 	title */
.individual_project__title_text{
	position: relative;
	/* top: 10px; */
	/* color: rgb( 255, 255, 255); */
	color: rgb(124, 27, 2);
	font-family: Open Sans, arial, sans-serif;
	font-weight: 500;
	font-size: 0.75em;
}

/* individual project;   description area    :   description text */
.individual_project__description_text{
	position: relative;
	top: 0.0625em;
	/* color: rgb( 255, 255, 255); */
	color: rgb( 124, 27, 2 );
	font-family: Open Sans, arial, sans-serif;
	font-weight: 100;
	font-size: 0.6625em;
	line-height: 1.4em;
	letter-spacing: 0.0625em;
}

/* for the images used */
img.individual_description_back_image{
	position: absolute;
	width: 100%;
	height: 100%;
}


/*	 |||||||||||||||  self description details area  listings    ||||||||||   	*/

/*   main outer area  */
#self_description_details_outer_area{
	position: relative;
	left: 0px;
	top: 60px;
	/* margin-right: 200px; */
}


/*  self description details : Version : Single Body */
/*     this is a simple implementation, with 
		all the text in one long flow.
		with a bit of luck we can change it for something better later */
#selfdescription_details_area__singleBodyVersion{
	position: relative;
	left: 37px;
	top: 0px;
	/* width: 100px; */
	min-width: 400px;
	/* max-width: 65%; */
	max-width: 590px;
	/* height: 100px; */
	/* min-height: 300px; */
	padding-left: 22px;
	padding-top: 27px;
	padding-right: 12px;
	padding-bottom: 100px;
	/* background-color: rgba(247, 247, 198, 0.5); */
	background-color: rgba(240, 240, 208, 0.5);
	/* background-image: url("images/beige_transp_227_227_180__85pc_transp.png"); */
	color: rgb( 124, 27, 2 );
	font-family: Open Sans, arial, sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 19px;
}


/* general listings area   - we might have several of these, 
	for each part of the cv */
.specific_cv_details_area{		
	float: left;		
	position: relative;
	padding-left: 0px;
	padding-top: 0px;
	margin-bottom: 80px;
	width: 100%;
	/* border: 1px dashed darkred; */
}

.specific_cv_details_area__area_title_text{
	font-family: Kreon, arial, sans-serif;
	font-size: 20px;
	color: rgb( 124, 27, 2 );
}

.specific_cv_details_area__below_title_area_description_text{
	width: auto;
	max-width: 500px;
	padding-top: 22px;
	padding-right: 50px;
	font-family: Open Sans, arial, sans-serif;
}

.specific_cv_details_area__details_listing_cssTable{
	position: relative;
	width: 100%;
	min-height: 100px;
	padding-top: 20px;
}

.cv_details_css_tableA__row{
	position: relative;
	float: left;
	/* padding-top: 35px; */
	padding-bottom: 11px;
	margin-bottom: 0px;
	width: 100%;
	height: auto;
	border: 0px dashed yellow;				
}

.cv_details_css_tableA__datearea{
	position: relative;
	float: left;	
	padding-right: 5px;			
	width: 150px;
	color: rgb( 168, 102, 85 );
	text-align: right;
	letter-spacing: 1px;
	font-size: 11px;
	border: 0px dashed orange;	
}

.cv_details_css_tableA__specificDetailsArea{
	position: relative;
	float: left;
	padding-left: 5px;
	width: auto;	
	min-height: 20px;			
	border: 0px dashed green;	
}

.cv_details_css_tableA__specificDetailsArea__lightertext{
	color: rgb( 148, 52, 45 );
	font-size: 12px;
	/* color: rgb( 154, 107, 92 ); */
}


/* ---  MOBILE LAYOUT !!! --- */
/* ---  MOBILE LAYOUT !!! --- */
/* ---  MOBILE LAYOUT !!! --- */


/* -- navigation bar gets smaller sooner -- */
@media (max-width:650px ) {

	.ultra_ego_area{
		padding-top: 15px;
		padding-left: 18px;
		font-size: 38px !important;
	}

	#navigation_bar {
		position: relative;
		float: left;
		left: 0px;
		top: 54px;
		right: unset;
		min-width: 400px;
		height: 10px;
		font-family: "Kreon", "arial";
		font-size: 14px;
		font-weight: lighter;
		text-align: center;
		z-index: 15;
	}

	.navigation_bar_item{
		height: unset;
	}

}


/* -- even smaller area -- */
@media (max-width:600px) { 

	body{
		background-image: unset;
		background-color: white;
	}

	#outer_area{
		padding-right: 100px;
	}

	/* main area */
	#main_area{
		position: relative;
		left: 1%;
		top: 150px;
		/* border: 1px dashed rgb( 255, 255, 0); */
		min-width: unset;

		/* max-width: 1200px; */
		min-height: 500px;
	}


	/* |||| main inde x   |||| */

	#hello {
		left: 0px;
		width: 250px;
	}


	#self_description {
		position: relative;
		left: 0px;
		top: 20px;
		width: 100%;
		min-width: unset;
		max-width: unset;
		padding-left: 20px;
		padding-top: 27px;
		padding-right: 20px;
		padding-bottom: 27px;
		font-size: 16px;
		line-height: 27px;
	}

	.project_main_page_entry_outer {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		margin-bottom: 27px;
		width: 130%;
		height: 12.0625em;
		background-repeat: none;
		background-image: url(images/beige_transp_227_227_180__85pc_transp.png);
		border: 1px solid rgb( 240, 240, 240);
	}	

	.individual_project_description_area__for_light_backgrounds {
		max-width: 100%;
		max-height: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 14px;
		padding-bottom: 14px;
		font-size: 18px;
		/* background-color: rgba(255, 251, 223, 0.85); */
		/* background-color: rgba(231, 218, 133, 0.85); */
		/* background-image: url(images/black_40pc_transp.png); */
	}

	.individual_project_description_area__for_DARK_backgrounds{
		max-width: 100%;
		max-height: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 14px;
		padding-bottom: 14px;
		font-size: 18px;
	}

	/* ||||   about-me page thigns    |||| */

	#aboutMeText_area {
		position: relative;
		left: 0px;
		top: 00px;
		max-width: 375px;
		
		/* background-color: rgba(247, 247, 198, 0.5); */
		background-color: rgba(240, 240, 208, 0.5);
		/* background-image: url(images/beige_transp_227_227_180__85pc_transp.png); */
		font-family: Kreon, arial;
		font-weight: 100;
		font-size: 55px;
		color: rgb( 124, 27, 2 );
	}

	#self_description_short {
		left: 0px;
		min-width: 300px;
		max-width: 375px;
		font-size: 16px;
		line-height: 26px;
		padding-top: 27px;
		padding-bottom: 27px;
		font-weight: 300;
	}

	#selfdescription_details_area__singleBodyVersion {
		left: 0px;
		min-width: 350px;
		max-width: 400px;
		font-size: 16px;
		line-height: unset;
	}

	.cv_details_css_tableA__row {
		padding-bottom: 20px;
	}

	.cv_details_css_tableA__datearea {
		width: unset;
		/* color: rgb( 168, 102, 85 ); */
		text-align: left;
		letter-spacing: 1px;
		font-size: 11px;
		/* border: 0px dashed orange; */
	}

	.linkstyle{
		color: rgb(171, 100, 83);
		font-size: 14px;
	}

}