body {
	color: #212121;
	background-color: #ffffff;
	font-size: 85%; /*base font size is 14px*/
	font-family: Verdana, Arial, 'Lucida Sans Unicode', sans-serif;
	line-height: 1.5;
	text-align: left;
	background-image: url("website/zips/bg2_10.jpg");
}


.mainBody {
	margin: 0 auto;
	width: 70%;
	clear: both;
}

h1 {
	
}

h2 {
	color: #000000;
	font-size: 100%;
}



a {
	text-decoration: none;
}

a:link, a:visited {
	color: #4d98c8;
	text-decoration: underline;
}

a:hover, a:active {
	color: #99c6e2;
	text-decoration: underline;
}





.mainHeader nav {
	/*background-color: #a9a9a9;*/
	height: 25px;
	margin-top: 2%;  /* space from browser top */
	margin-bottom: 3%;  /* space to content */
}

.mainHeader nav ul {
	list-style: none;
	margin: 0 auto;
}

.mainHeader nav ul li {
	/*background-color: #aaff98;*/
	float: center;
	display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #212121;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	padding: 0px 7px 4px 7px;  /* space between the navigation elements */
}

.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	/*background-color: #99ffaa;*/
	background-image: url('website/images/navigation_arrow.gif');
	background-repeat: no-repeat;
	background-position: bottom;
	text-shadow: none;
	text-decoration: none;
}

.navigation_seperator {
	padding: 0px 2px;
}



.mainContent {
	line-height: 20px;
}

.content {
	/*background-color: #ff88ff;*/
	width: 70%;
	float: left;
	text-align: justify;
}

.contentProjects {
	/*background-color: #ff8800;*/
	width: 100%;
	float: left;
	text-align: justify;
}

.contentONE {
	/*background-color: #efefef;*/
	padding: 0% 2% 0% 2%;  /* space between content blocks */
	margin-top: 2%;
}

.contentSeperator {
	/*background-color: #efefef;*/
	/*padding: 10px 0px 0px 0px;*/
	/*display: block;*/
    margin-top: 3%;
    margin-bottom: 3%;
    /*margin-left: 10px;*/
    /*margin-right: 10px;*/
    /*margin-bottom: 5%;*/
    border-style: solid;
    border-width: 1px;
    border-color: #dddddd;
}

.headlineInfo {
	font-style: italic;
	color: #999999;
	font-size: 90%;
	line-height: 120%;
}

.contentTWO {
	
}


.sidebarONE {
	background-color: #f5f5f5;
	width: 26%;  /* 100 - .content-width - sidebar-margin - sidebar-padding = width */ 
	float: left;
	padding: 1% 1%;
	margin-left: 1%;  /* space between content & sidebar*/
	margin-bottom: 1%;
}

.sidebarTWO {
	background-color: #f5f5f5;
	width: 26%;  /* 100 - .content-width - sidebar-margin - sidebar-padding = width */ 
	float: left;
	padding: 1% 1%;
	margin-left: 1%;  /* space between content & sidebar*/
	margin-bottom: 1%;
}

.sidebarPhoto {
	width: 28%;  /* 100 - .content-width - sidebar-margin - sidebar-padding = width */
	float: left;
	padding: 2% 0%;
	margin-left: 1%;  /* space between content & sidebar*/
	margin-bottom: 1%;
}

.sidebarPhoto img {
	width: 100%;
	padding: 0px 0px;
}



.mainFooter {
	/*background-color: #eeeeee;*/
	width: 100%;
	float: left;
	margin-top: 10%;
	margin-bottom: 1%;
}

.mainFooter p {
	font-size: 10px;
	color: #acacac;
	text-align: center;
}






/*@media screen and (max-width:640px) {*/



/*    for scaling in web-browser, middle-Stage    */

@media only screen and (min-width : 641px) and (max-width : 959px) {
	
	/*
	- navigation multiline
	- side blocks underneath
	- 
	*/

}


/*@media only screen and (min-device-width : 150px) and (max-device-width : 640px) {*/




/*    for scaling in phone    */
@media only screen and (min-device-width : 150px) and (max-device-width : 640px) {

	.mainBody {
		width: 95%;
		font-size: 95%;
	}




	.mainHeader nav {
		/* background-color: #ffffff; */
		height: 125px;
		margin-top: 2%;  /* space from browser top */
		margin-bottom: 15%;  /* space to content */
	}

	.mainHeader nav ul {
		padding-left: 0px;
	}

	.mainHeader nav ul li {
		background-color: #434343;
		width: 100%;
		text-align: center;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited {
		color: #656565;  /* font color of other nav text */
		display: block;
		padding: 1% 7px 1% 7px;  /* space between the navigation elements */
	}

	.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
		background-color: #d7d7d7;  /* color of active bar */
		background-image: none;
	}

	.navigation_seperator {
		padding: 0px 0px;
		/*visibility: hidden;*/
		height: 0px;
	}




	.content {
		/*background-color: #d8d444;*/
		width: 100%;
		float: left;
		/*margin-top: 1%;*/
		padding-bottom: 2%;
	}

/*
	.headlineInfo {
		display: none;
	}
*/
	.sidebarONE {
		/*background-color: #f5f5f5;*/
		width: 96%;  /* 100 - sidebar-paddings */
		float: left;
		padding: 0% 2%;
		margin-left: 0%;  /* space between website edge */
		margin-bottom: 1%;
	}

	.sidebarPhoto {
		width: 100%;
		padding: 2% 0%;
		margin-left: 0%;  /* space between content & sidebar*/
	}

	.sidebarPhoto img {
		width: 50%;
		display: block;
    	margin: 0 auto;
	}

	.sidebarTWO {
		/*background-color: #f5f5f5;*/
		width: 96%;  /* 100 - sidebar-paddings */
		float: left;
		padding: 0% 2%;
		margin-left: 0%;  /* space between website edge */
		margin-bottom: 1%;
	}
}




/*    for scaling in web-browser    */

@media only screen and (min-width : 150px) and (max-width : 640px) {
	
	.mainBody {
		width: 95%;
		font-size: 95%;
	}




	.mainHeader nav {
		/* background-color: #ffffff; */
		height: 125px;
		margin-top: 2%;  /* space from browser top */
		margin-bottom: 15%;  /* space to content */
	}

	.mainHeader nav ul {
		padding-left: 0px;
	}

	.mainHeader nav ul li {
		background-color: #434343;
		width: 100%;
		text-align: center;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited {
		color: #656565;  /* font color of other nav text */
		display: block;
		padding: 1% 7px 1% 7px;  /* space between the navigation elements */
	}

	.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
		background-color: #d7d7d7;  /* color of active bar */
		background-image: none;
	}

	.navigation_seperator {
		padding: 0px 0px;
		/*visibility: hidden;*/
		height: 0px;
	}




	.content {
		/*background-color: #d8d444;*/
		width: 100%;
		float: left;
		/*margin-top: 1%;*/
		padding-bottom: 2%;
	}

	/*
	.headlineInfo {
		display: none;
	}*/

	.sidebarONE {
		/*background-color: #f5f5f5;*/
		width: 96%;  /* 100 - sidebar-paddings */
		float: left;
		padding: 0% 2%;
		margin-left: 0%;  /* space between website edge */
		margin-bottom: 1%;
	}

	.sidebarPhoto {
		width: 100%;
		padding: 2% 0%;
		margin-left: 0%;  /* space between content & sidebar*/
	}

	.sidebarPhoto img {
		width: 50%;
		display: block;
    	margin: 0 auto;
	}

	.sidebarTWO {
		/*background-color: #f5f5f5;*/
		width: 96%;  /* 100 - sidebar-paddings */
		float: left;
		padding: 0% 2%;
		margin-left: 0%;  /* space between website edge */
		margin-bottom: 1%;
	}


}