/* CSS Reset */
/************************************************************************************
RESET
*************************************************************************************/
body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px; padding: 0px; border: 0px;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}	




body {
	font-family: Helvetica, Arial, sans-serif; /* Set the global font */ 
	height:4000px;
	background: #1a75bb; /*url(../images/background.jpg);  Add the repeating texture file -disabled */
	color:#ffffff;
	/*hides the scroll*/
	/*overflow-x: hidden;
	overflow-y: hidden;*/
}

		.panel {
			height: 900px;
			padding-top: 160px;/*change the starting point of page here, from about*/
			/*float: left;
			padding-left: 30px;
			padding-right: 1040px;
			
			/*background: #eee;*/
			margin-top: 35px;
			
		}
		
		#banner {

			/*left:200px;*/
			top:100px; /*adjust height of navigation*/
			margin: 0 0px;  
			padding: 0;  
		}
		
		#banner ul {
			position: fixed;
			line-height: 45px;
			margin: 0 30px;
			padding: 0;
		}
		
		#banner ul li {
			display: inline;
			margin-right: 30px;
			color: #ffffff;
		}
		
		#banner ul li a:link  {
				color: #ffffff;
				}
		#banner ul li a:visited {
				color: #ffffff; /* Change the color of the link text on hover */
		}
		
		#banner ul li a:hover, a:focus{
				color: #e89863; /* Change the color of the link text on hover */
		}


#page-wrap {
	background: url(../images/background.png) center top no-repeat; /* An extra DIV allows us to attach the larger background image and position centrally on the page */
}

/* Lay out the page structure with a container */
#container {
	width: 900px; /* Width of the container minus the left padding below */
	margin: 0 auto; /* Aligns the container to the centre of the page */
	padding: 60px 0 0 40px;/* Add some top and left padding */
}

#header {
	margin: 0 0 30px 0;	/* Bottom margin on the header */
}

	#header h1 a {
		/*margin: 0 0 10px 0;/* Bottom margin on the header */
		position: fixed;
		display: block; /* Anchors are inline by default, change it to block... */
		width: 573px; height: 86px;/*...Which then allows us to specify width and height (according to the image) */
		color: #6b5c4e; margin: 0 0 20px 0; /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
		background: url(../images/damianstreet_shadow.png); text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
		clear:both;
	}

#about {
	margin: 0 0 60px 0;
	clear:both;
}

	#about h2 {
		width: 95px; height: 41px; margin: 0 0 10px 0;
		background: url(../images/about_txt.png); text-indent: -9999px;
	}
	
	

		

	
#lcol {
	
	width:400px;	
	float:left;
	padding: 10px; margin: 0 23px 23px 0;
	/*background-color:#339933;*/
}
	
#rcol {
	
	width:400px;
	float:left;
	padding: 10px; margin: 0 23px 23px 0;
	/*background-color:#339933;*/
}

#rcol ul{
	padding-left: 1.5em;
}

	

	
#illustration {
	margin: 0 0 60px 0;
	clear:both;
}
	
	#illustration h2 {
		width: 174px; height: 27px; margin: 0 0 10px 0;
		background: url(../images/illustration_txt.png); text-indent: -9999px;
	}
	
	#illustration ul {
		list-style: none; /* Remove the bullet points from the list */
	}
		#illustration ul li {
			float: left; /* Float the lists to the left, laying them out side by side */
			padding: 10px; margin: 0 23px 23px 0;
			background: url(../images/img-bg.png); /* Add the semi-transparent background, used along with padding to give the impression of a see-through border */
			/* Let's get fancy with some CSS3, only visible in Firefox, Safari & Chrome. Other browsers simply revert to square corners */
			border-radius: 10px; 
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
		}
	
#projects {
	margin:  0 0 40px 0;
}	
	
	#projects h2 {
		width: 133px; height: 34px; margin: 0 0 10px 0;
		background: url(../images/projects_txt.png); text-indent: -9999px;
	}
	
	#projects ul {
		list-style: none; /* Remove the bullet points from the list */
	}
		#projects ul li {
			float: left; /* Float the lists to the left, laying them out side by side */
			padding: 10px; margin: 0 23px 23px 0;
			background: url(../images/img-bg.png); /* Add the semi-transparent background, used along with padding to give the impression of a see-through border */
			/* Let's get fancy with some CSS3, only visible in Firefox, Safari & Chrome. Other browsers simply revert to square corners */
			border-radius: 10px; 
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
		}	
		
#flash {
	margin: 0 0 40px 0;
}
	
	#flash h2 {
		width: 78px; height: 27px; margin: 0 0 10px 0;
		background: url(../images/flash_txt.png); text-indent: -9999px;
	}
	
	#flash ul {
		list-style: none; /* Remove the bullet points from the list */
	}
		#flash ul li {
			float: left; /* Float the lists to the left, laying them out side by side */
			padding: 10px; margin: 0 23px 23px 0;
			/*background: url(../images/img-bg.png);*/ /* Add the semi-transparent background, used along with padding to give the impression of a see-through border */
			/* Let's get fancy with some CSS3, only visible in Firefox, Safari & Chrome. Other browsers simply revert to square corners */
			/*border-radius: 10px; 
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;*/
		}	
		
/*#showreel{
	margin: 0 0 40px 0;
}
	
	#showreel h2 {
		width: 148px; height: 26px; margin: 0 0 10px 0;
		background: url(../images/showreel_txt.png); text-indent: -9999px;
	}
	
	/*#showreel ul {
		list-style: none; Remove the bullet points from the list 
	}
		#showreel ul li {
			float: left;  Float the lists to the left, laying them out side by side 
			padding: 10px; margin: 0 23px 23px 0;
			background: url(../images/img-bg.png);  Add the semi-transparent background, used along with padding to give the impression of a see-through border 
			 Let's get fancy with some CSS3, only visible in Firefox, Safari & Chrome. Other browsers simply revert to square corners *
			border-radius: 10px; 
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
		}	*/
	
	
	
		#footer{
		position: fixed;
		bottom: 20px;
		z-index: 1;
		font-size: 11px; color: #ffffff; display: inline;/* Style up the text */
		}
		#footer ul {				

		}
		
		#footer ul li {
		display: inline;
		margin-right: 30px;
		
		}
		
		#footer ul li a:link  {
			display: block;
			display: inline;
			color: #ffffff;

				}
		
		#footer ul li a:hover, a:focus{
				color: #e89863; /* Change the color of the link text on hover */
		}


	#footerImage {
		position: fixed;
		left: 0px;
		bottom: 0px;
		height: 154px;
		width: 1680px;
		background: url(../images/background_base.png) bottom left no-repeat;
		z-index: 0;
}



/* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */		
.clear:after {
	content: "";
	display: block; visibility: hidden; clear: both;
}
	.clear { zoom: 1; } /* Clearfix IE fix */
}