/* Below code is for the highlights in the nav bar */
a:hover { background-color:#a0db17; color:white; }


/* Below codes are for the portfolio section */

#portfolio {
	padding-top: 10px;
	/*the float needs to be set to inherit, to make sure the background colour works for the whole div container. without this, it won't fit around the portfolio left and right divs, as well.*/
	float:inherit;
	background-color: #ddd;
	width:100%;
}

#portfolioleft {
	padding: 2%;
	width:45%;
	float: left;
}

#portfolioright {
	padding: 2%;
	width:45%;
	float: right;
}



/* Below codes the footer section, in a green tint */
#greenfooter {
	max-width: 100%;
	color: #8ab722;
	background-color:rgba(162,220,25,0.5);
	padding-left:7%;
	padding-top:5%;
	padding-bottom: 1%;
	padding-right:6%;
	text-align: right;
	font-size: 0.9em;
	}

#content {
		width: 100%;
	}


/* Below code makes the portfolio containers react responsively */
/* Media Queries */
@media screen and (max-width: 600px) {


	#porfolio {
		margin: 10px 0 10px;
	}

	#portfolioleft {
		width: 100%;
		padding-bottom: 20px;
		float: left;
		clear: left;
		margin: 10px 0 10px; 
	}
	
	#portfolioright {
		width: 100%;
		float: left;
		clear: left;
		margin: 10px 0 10px;
	}
	
	#greenfooter {
	text-align: center;
	font-size: 0.8em;
	}
	
	#content {
		padding-left: 30px;
		padding-right: 30px;
		margin-left: 30px;
		margin-right: 30px;
	}
}