/*
Color Scheme: retro spanky

dark: 262223
blue: 5FC5B8
green: 8EBF45
yellow: F2B90C
red: F24C27

*/

A:hover {color: #F24C27;}

html {
padding:0px;
margin:0px;
}

body {
background-color: #262223;
background-image:  url('');
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
color:#ffffff;
padding:0px;
margin:0px;
text-align: center;
}



#logo{
z-index:5;
position: absolute;
left: 0px;
width: 100px;
height: 150px;
top: 0px;
border-right: 0px solid #F24C27;
background-color: transparent;
}

/* Top Navigation */

#navBox1holder{
z-index:1;
position: absolute;
left: 120px;
top: 60px;
width: 100px;
height: 70px;
padding: 10px;
border-left: 2px solid #5FC5B8;
background-color: transparent;
}

#navBox1{
z-index:1;
position: absolute;
left: 0px;
top: 35px;
width: 100px;
height: 70px;
padding: 10px;
text-align: left;
border-left: 0px solid #5FC5B8;
background-color: transparent;
}

#navBox2holder{
z-index:1;
position: absolute;
left: 240px;
top: 60px;
width: 100px;
height: 70px;
padding: 10px;
border-left: 2px solid #8EBF45;
background-color: transparent;
}

#navBox2{
z-index:1;
position: absolute;
left: 0px;
top: 35px;
width: 100px;
height: 70px;
padding: 10px;
text-align: left;
border-left: 0px solid #5FC5B8;
background-color: transparent;
}

#navBox3holder{
z-index:1;
position: absolute;
left: 360px;
top: 60px;
width: 100px;
height: 70px;
padding: 10px;
border-left: 2px solid #F2B90C;
background-color: transparent;
}

#navBox3{
z-index:1;
position: absolute;
left: 0px;
top: 35px;
width: 100px;
height: 75px;
padding: 10px;
text-align: left;
border-left: 0px solid #5FC5B8;
background-color: transparent;
}

/* Content area */

#content {
top: 0px;
position: relative;
text-align: left;
z-index: 5;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 800px;
height: 450px;
background-color:#262223;
background-image:  url('');
border-left: 0px solid #3D1806;
border-right: 0px solid #3D1806;
border-bottom: 0px solid #3D1806;
}

#contentImage {
top: 0px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 800px;
height: 350px;
background-color:#262223;
background-image:  url('');
border-left: 0px solid #3D1806;
border-right: 0px solid #3D1806;
border-bottom: 8px solid #F24C27;
}

#recentProject {
top: 370px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 350px;
height: 125px;
background-color:transparent;
border-top: 2px dashed #afadad;
border-bottom: 2px solid #afadad;
}

#recentProjectImage {
top: 20px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 4px;
width: 100px;
height: 70px;
background-color:transparent;
border: 1px solid #afadad;
}

#recentProjectDes {
top: 20px;
left: 125px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 210px;
height: 70px;
background-color:transparent;
border: 0px solid #afadad;
}


#connect {
top: 370px;
left: 450px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 350px;
height: 125px;
font-family: Helvetica, Arial, sans-serif;
background-color:transparent;
border-top: 2px dashed #afadad;
border-bottom: 2px solid #afadad;
}

#connectContent {
top: 20px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 350px;
height: 120px;
background-color:transparent;
border: 0px solid #afadad;
}

#connectContentinstruct {
top: 0px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 80px;
height: 120px;
background-color:transparent;
border: 0px solid #afadad;
}

#connectContentflickr {
top: 0px;
left: 90px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 80px;
height: 120px;
background-color:transparent;
border: 0px solid #afadad;
}

/* Recent Project */

#projectInfo{
top: 20px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
padding: 0px;
width: 800px;
height: 25px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 2px solid #afadad;
}

#projectFinal{
top: 35px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 350px;
height: 263px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 1px solid #afadad;
}

#projectDes{
top: 70px;
left: 370px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 270px;
height: 235px;
color: #afadad;
font-size: 8pt;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #afadad;
}

#howWe{
top: 35px;
left: 668px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 120px;
height: 40px;
background-color: transparent;
font-size: 8pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 2px solid #F2B90C;
}

#helpLinks{
top: 120px;
left: 668px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 120px;
height: 200px;
background-color: transparent;
font-size: 8pt;
font-family: Helvetica, Arial, sans-serif;
padding: 10px;
border-left: 2px solid #afadad;
}

/* Projects Area */

#project1{
top: 60px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 250px;
height: 250px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #8EBF45;
}

#project2{
top: 60px;
left: 270px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 250px;
height: 250px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #8EBF45;
}

#project3{
top: 60px;
left: 540px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 250px;
height: 250px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #8EBF45;
}

#projectImageHold{
top: 5px;
left: 50px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 150px;
height: 100px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 1px solid #afadad;
}

#projectDesHold{
top: 120px;
left: 50px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 150px;
height: 150px;
color: #afadad;
font-size: 8pt;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #afadad;
}

/*Footer Area */

#footer {
top: 495px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 800px;
height: 25px;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
text-align: right;
border-top: 0px dashed #afadad;
border-bottom: 0px solid #afadad;
}

#footerLeft {
top: 0px;
left: 0px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 350px;
height: 25px;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
text-align: left;
border: 0px solid #afadad;
}

#footerRight{
top: 0px;
left: 675px;
position: absolute;
z-index: 5;
margin: 0px auto;
padding: 0px;
width: 125px;
height: 25px;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
text-align: right;
border: 0px solid #afadad;
}

#boxLeft1holder{
z-index:5;
position: relative;
top: 275px;
left: 100px;
width: 150px;
height: 275px;
border: 0px solid #333333;
background-color:transparent;
}



#topNav {
position: relative;
vertical-align: middle;
top: 0px;
text-align: left;
z-index: 2;
margin: 0px auto;
padding: 0px;
width: 800px;
height: 150px;
background-color: #262223;
border-bottom: 4px dashed #ffffff;
}

#topNavLinks{
position: absolute;
top: 0px;
left: 12.5%;
width: 250px;
height: 30px;
background-color:transparent;
}

/* Site Formating */

p, h1, pre {
margin: 0px;
padding: 0px 0px;
}

h1 {
color: #afadad;
font-size: 10pt;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
}

a {
color: #E2F0D6;
font-size: 17pt;
text-decoration: none;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
}

ul#bottom { margin:0; padding:0; list-style-type:none; }

ul#bottom li { position:relative; float:left; border-bottom:0px solid #6c6a4e; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#bottom  li a { padding:0px 0px; text-decoration:none; font:bold 8pt Helvetica, Arial, sans-serif; color:#ffffff;} 

ul#bottom  li a:hover { color:#F24C27; border:none; }

ul#green {list-style-type:none; margin:0; padding:0; position:absolute; top:0px;}

/* ul#bottom li a:hover span {margin-top: 7px; display:block; color: #89be89;} */


ul#bottomRight { margin:0; padding:0; list-style-type:none; }

ul#bottomRight li { position:relative; float:left; border-bottom:0px solid #6c6a4e; margin-right: 0px; padding-right: 0px; padding-top: 5px;}

ul#bottomRight  li a { padding:0px 0px; text-decoration:none; font:bold 8pt Helvetica, Arial, sans-serif; color:#ffffff;} 

ul#bottomRight  li a:hover { color:#F24C27; border:none; }

ul#bottomRight {list-style-type:none; margin:0; padding:0; position:absolute; top:0px;}

/* ul#bottomRight li a:hover span {margin-top: 7px; display:block; color: #89be89;} */

ul#otherLinks { margin:0; padding:0; list-style-type:none; }

ul#otherLinks li { position:relative; border-bottom:0px solid #ffffff; margin-right: 0px; padding-right: 0px; padding-top: 0px;}

ul#otherLinks  li a { padding:0px 0px; text-decoration:none; font:bold 7pt Helvetica, Arial, sans-serif; color:#5FC5B8;} 

ul#otherLinks  li a:hover { color:#ffffff; border:none; }

ul#otherLinks {list-style-type:none; margin:0; padding:0; position:absolute; top:0px;}

/* ul#otherLinks li a:hover span {margin-top: 7px; display:block; color: #89be89;} */

.highlightit img{
border: 4px solid #ffffff;
}

.highlightit:hover img{
border: 4px solid #F24C27;
}

.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}


pre {
color: #afadad;
font-size: 8pt;
background-color:transparent;
font-family: Helvetica, Arial, sans-serif;
}

/* About Us Section */

#mattTitle{
top: 20px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
padding: 0px;
width: 250px;
height: 25px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 2px solid #afadad;
}

#matt{
top: 60px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 800px;
height: 110px;
background-color: transparent;
color: #afadad;
font-size: 8pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #afadad;
}

#gregTitle{
top: 195px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
padding: 0px;
width: 250px;
height: 25px;
background-color: transparent;
font-size: 14pt;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 2px solid #afadad;
}

#greg{
top: 235px;
left: 0px;
position: absolute;
z-index: 8;
margin: 0px auto;
width: 800px;
height: 110px;
background-color: transparent;
color: #afadad;
font-size: 8pt;
font-family: Helvetica, Arial, sans-serif;
padding: 4px;
border: 0px solid #afadad;
}



/* Contact Page */

#page-wrap {
	width: 660px;
	background: white;
	padding: 20px 50px 20px 50px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#contact-area {
	position: absolute;
	left: 100px;
	border: 0px solid #F24C27;
	width: 600px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 400px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}