@charset "utf-8";
/* CSS Document */

html{
min-height: 100%;
	height: auto;
}
:focus { outline:none; }
body {
	
	background: #1a172c url(../images/bkg.jpg) top center no-repeat;
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. */
	/* default font and color*/
	font: 10pt/12pt normal Arial, Helvetica, sans-serif;
	color: #e9e3c8;
}


.hidden
{
display:none;	
}

img {
	border:none;
}

a:link, a:visited{
color:#ddfaa5;
}

a:hover, a:active{
color:#ffffff;
text-decoration:none;
}

h1{
	color: #a4d347;
	font-size: 24pt;
	line-height: 26pt;
	font-weight:bold;
	margin: 35px 0px 5px 0px;
	padding: 0px;
}

h2, label{
	color: #e7f8c5;
	font-size: 16pt;
	font-weight:normal;
	margin: 0px;
	padding: 5px 0px 0px 0px;
}

h3{

	color:#cbc3ff;
	font-size: 14pt;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
}

.required
{
	color: #d1ff76;
	font-weight:bold;
}

#contactMessages
{
	float:left;
	width: 400px;
	margin:0px;
	padding-left: 0px;
	padding-top: 15px;
	
}

#contactForm
{
	float:left;
	width: 600px;
	margin:0px;
	padding-left: 0px;
	
}

.subtitle {
 font-size: 80%;
 font-weight: normal;

}

#wrap {
	width: 980px;  /* flexible width of the background */
	text-align: left; /* this centers the container in IE 5* browsers. */
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 0px;
	
}
#header {
	float: left;
	position: absolute;
	top: 0px;
	z-index:10;
	width: 980px; /* fixed width of the header and site */
	height: 90px;
	margin:0px auto;
	padding: 0px;
	
	background: url(../images/header_bkg.png) bottom center no-repeat; 
	margin:0px;
	padding: 0px;
}
#header h1 {
	float: left;
	text-align: left; 
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0px 0px 10px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	border: none;
}

#header .utilities {
	font-size: 0.9em;
	float: right;
	text-align: right; 
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 5px 15px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	border: none;
}

#iconList {
	
	float: right;
	position:relative;
	z-index:3;
	top: -1000px;

	overflow:hidden;
	width: 140px;
	margin: 0px;
	padding: 0px 0px;
	
}

#iconList ul{
	float: left;
	list-style:none;
	margin:0px;
	padding:100px 0px 0px 0px;
	
}

#iconList ul li{
	float: left;
	width: 85px;
	height: 46px;
	list-style:none;
	margin:0px;
	padding:1px 0px 0px 0px;
	background: none;
}

#iconList ul li img{
	float: left;
	border:none;
	margin:0px;
	padding:2px 0px 0px 5px;
}

#iconHover {
	
	position:relative;
	display:block;
	z-index:4;
	top: 100px;
	left: 880px;
	width: 223px;
	height: 138px;
	background: url(../images/hover_bkg.png) top center no-repeat;

	margin: 0px;
	padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	visibility:hidden; /* its still there, just not visible, which is okay since it is not changing other divs*/
	
}

#iconHover p{
	font-size: 0.9em;
	font-weight: bold;
	position:relative;
	width: 223;
	color:#4a2398;

	margin: 0px;
	padding: 0px 0px 0px 23px; 
	
}

#iconHover img{
	border:none;
	margin: 0px;
	padding: 3px 0px 0px 8px; 
	
}

/*home*/
#homeIcons {
	
	float: right;
	position:absolute;
	text-align:center;
	z-index:5;
	top: -1000px;
	bottom: 55px;
	overflow:hidden;
	width: 960px;
	margin: 0px 10px 0px 10px;
	padding: 100px 0px; 
	
	
}


#homeIcons ul{
	float: left;
	position:relative;
	width: 960px;
	list-style:none;
	margin:0px;
	padding:0px 0px 0px 15px;
	
	
}

#homeIcons ul li{
	float: left;
	position:relative;
	text-align:left;
	width: 277px;
	height: 170px;
	list-style:none;
	margin:0px 10px 6px 10px;
	padding:0px 9px;
	background: url(../images/home_icon_off_NOT.png) top center no-repeat;
	color:#c2bffe;
	text-decoration:none;
	
}

#homeIcons ul li:hover{

	background: url(../images/home_icon_on.png) top left no-repeat;
	color:#000;
}


#homeIcons ul li a:link, #homeIcons ul li a:visited{
	text-decoration:none;
	color:#c2bffe;

}

#homeIcons ul li a:hover, #homeIcons ul li a:active{
	text-decoration:none;
	color:#000;
}

#homeIcons ul li img{
	float: left;
	border:none;
	margin:0px;
	padding:3px 0px 0px 6px;
}

#homeIcons ul li p{
	float: left;
	clear:both;
	width:250px;
	margin:0px 5px 0px 5px;
	padding:2px 0px 0px 15px;
	text-decoration:none;
	font-weight:bold;
	font-size:12pt;
}


/*content*/
#scrollingContentBlock {
	
	float: left;
	position:absolute;
	overflow:hidden;
	z-index:5;
	width: 770px;
	height: 85%;
	top: -900px;
	/*bottom: 965px; */
	background: url(../images/content_bkg_purple.png) repeat;
	margin: 0px 0px 0px 10px;
	padding: 0px 0px; 
	
}

#content, #contact_section, #resume_section{
	float: left;
	position:relative;
	top: 0px;  /*this changes with the tops of the big images*/
	width: 700px;
	margin:0px;
	padding: 0px 0px 0px 35px; 

}


.rotatingFeature {
	float: left;
	clear: both;
	width: 700px;
	text-align:right;
	display:block;
	margin: 0px;
	padding: 0px; 
	border: none;
}

.featuredImageBlock {
	float: left;
	width: 628px;
	height: 310px;
	text-align:left;
	display:inline;
	margin: 0 auto;
	padding: 0px; 
	border: none;
}

.featuredImage{
	float: left;
	position:relative;
	top: 0px;
	left: 0px; /*this changes with the rotation */
	text-align:left;
	display:inline;
	margin: 0px;
	padding: 0px; 

}

.featuredImage img{
	float: left;
	display:inline;
	padding: 0px;
	border: none;
}

.featuredImage .mainImageCover{
	float: left;
	position:relative;
	width: 700px;
	index: 6;
	display:inline;
	margin-left: -700px;
	padding: 0px;
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
	filter: alpha(opacity=0);
	opacity: .0;
	
	border: none;

}

.featuredImage img.mainImage{
	float: left;
	position:relative;
	width: 700px;
	index: 1;
	display:inline;
	padding: 0px;
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
	filter: alpha(opacity=50);
	opacity: .5;
	
	border: none;

}

.featuredImage img.mainImageHover{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	filter: alpha(opacity=100);
	opacity: 1;

}

.rotatingCaption {
	display:block;
	clear: both;
	float: left;
	width:690px;
	height: 15px;
	text-align:left;
	display:block;
	margin: 0px;
	padding: 3px 5px;
	font-size: 0.9em;
	color:#565376;
	background: #e9e3c8;
	border-top: 1px solid #adabc4;
}

.rotatingIcons {
	float: right;
	width: 700px;
	text-align:right;
	display:block;
	margin: 0px;
	padding: 5px 0px 5px 0px;
}

.rotatingIcons img {

background: none;
}

.rotatingIcons img:hover{
background: url(../images/rotating_thumb_hover.png) center no-repeat;

}

.rotatingIcons a:active , .rotatingIcons img:active{

outlien: none;
}

#content p, #contact_section p, #resume_section p {
	line-height: 14pt;
	float: left;
	width: 430px;
	margin: 0px;
	padding: 5px 0px; 
}

#content ul {
	float: left;
	width: 150px;
	margin: 0px 0px 0px 60px;
	padding: 5px 0px 0px 15px; 
	list-style: square;
}

#content ul li {
	margin: 0px;
	padding: 2px 0px 0px 0px; 

}

#content p.nextProject {
	font-size: 0.9em;
	clear:both;
	float: right;
	text-align:right;
	width: 700px;
	margin: 35px 0px 5px 0px;
	padding: 0px; 
}

#content h1{
	float: left;
	width: 700px;
	margin: 0px;
	padding: 5px 0px 5px 0px;
}

#content #contact_section h1, #content #resume_section h1{
	float: left;
	width: 700px;
	margin: 0px;
	padding: 0px;
}

#content h2 {
	float: left;
	width: 700px;
	margin: 0px;
	padding: 5px 0px;
}


#content .launchProject {
	float: left;
	clear: both;
	width: 430px;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 80px 0px;
	outline:none;
}

#content .codeLink {
	float: left;
	width: 150px;
	margin: 0px 0px 0px 45px;
	padding: 10px 0px 0px 15px; 
}

#content a.launchButton:link, #content a.launchButton:visited {
	float: left;
	width: 164px;
	height: 43px;
	background:url(../images/launch_off.png) center no-repeat;
	margin: 0px;
	padding: 0px;

}

#content a.launchButton:hover{
	background:url(../images/launch_hover.png) center no-repeat;
	outline:none;
}

#content a.launchButton:active {
	background:url(../images/launch_clicked.png) center no-repeat;
	outline:none;
}
/******************/

/* RESUME SECTION */
#resume_section ul {
	float: left;
	width: 210px;
	margin: 0px 0px 30px 10px;
	padding: 5px 0px 0px 20px; 
	list-style: square;
}

#resume_section ul#resume {
	float: left;
	width: 190px;
	margin: 0px 0px 15px 10px;
	padding: 5px 0px 0px 8px; 
	list-style: none;
}


#resume_section ul li {
	margin: 0px;
	padding: 5px 0px 0px 0px; 

}

#resume_section h2{

	margin: 0px;
	padding: 30px 0px 0px 0px; 
}

#resume_section p{

	margin: 0px;
	padding: 5px 0px 0px 0px;
	width:300px;
}

/* CONTACT SECTION */
#contact_section #contactForm{
	float: left;
	width: 700px;
	margin:0px;
	padding: 0px; 
	border: none;

}

#contact_section #contactForm h3{
	text-align:right;

}
/*styled buttons*/
#contact_section #contactForm input#submit, #contact_section #contactForm input#reset{
	font-size: 13pt;
	line-height:12pt;
	text-transform:uppercase;
	font-weight:bold;
	width:100px;
	height: 43px;
	margin:0px 10px 0px 0px;
	padding: 0px;
	color:#403d5e;
	border:none;

}

#contact_section #contactForm input#submit{
	background:url(../images/submit_off.png) bottom center no-repeat;
}

#contact_section #contactForm input#reset{
	background:url(../images/reset_off.png) bottom center no-repeat;
}


#contact_section #contactForm input#submit:hover{
	background:url(../images/submit_hover.png) bottom center no-repeat;
	outline:none;
	color: #4f48ae;
}

#contact_section #contactForm input#reset:hover{
	background:url(../images/reset_hover.png) bottom center no-repeat;
	outline:none;
	color: #4f48ae;
}

#contact_section #contactForm input#submit:active{
	background:url(../images/submit_clicked.png)  bottom center no-repeat;
	outline:none;
	color: #633;
}

#contact_section #contactForm input#reset:active {
	background:url(../images/reset_clicked.png)  bottom center no-repeat;
	outline:none;
	color: #633;
}

/********************/

#footer { 
	float: left;
	position:absolute;
	bottom: 0px;
	z-index:9;
	width: 980px; /* fixed width of the header and site */

	margin:0px;
	padding: 0px;

} 

#footer #scrollContent{
	display:none;

}

#footer p {
	color:#CCC;
	text-align:right;
	font-size:.75em;
	margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 6px 0px 10px 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}