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


/*  

Version: 1.0

Author: Ryan Anderson

Author URL: http://www.ryancanderson.com

*/

/*

Color Swatches

Yellow  -  ffe74f
Teal    -  00a9a6

*/


/* -- General Styles -- */

* { margin: 0; padding: 0; }

html { background: url('images/background-pattern.gif') repeat; }

body {
	width: 960px;
	margin: 20px auto;
	font-family: "ITC Officina Sans STD", Helvetica, Arial, sans-serif; }

#wrapper > div { border: 1px solid #ffe74f; }

#wrapper { width: 960px; }
	
#container {
	background-color: #fff;
	padding: 10px; }

a {
	color: #00a9a6;
	text-decoration: none;
	border-bottom: 1px dashed #00a9a6; }
	
h1, h2, h3, h4 { color: #00a9a6; }

img { border: none; }


/* -- Mailed Styles -- */

#mailed { background-color: #fff; text-align: center; margin-bottom: 20px; padding: 5px 0; }
#mailed h3 { display: inline; padding-right: 10px; }
.green { color: #36d033; }
.red { color: #ff3c33; }


/* -- Header Styles -- */

#header { }
#logo, #name { float: left; margin-right: 20px;}
#name, #title { margin-top: 40px; }
#title { float: left; }


/* -- Navigation Styles -- */

#navigation {
	clear: both;
	position: relative;
	height: 30px;
	border-bottom: 1px solid #ffe74f; }
	
ul { list-style: none; }
#navigation li { float: right; padding: 0 10px; }

a#about-link {
	display: block;
	text-indent: -9999px;
	width: 133px; height: 29px;
	background: url('images/about-contact.gif') no-repeat;
	border-bottom: none; }
a#work-link {
	display: block;
	text-indent: -9999px; 
	width: 119px; height: 29px;
	background: url('images/view-my-work.gif') no-repeat;
	border-bottom: none; }
a#about-link:hover, a#about-link.active { background: url('images/about-contact-over.gif') no-repeat; border-bottom: 3px solid #00a9a6; }
a#work-link:hover, a#work-link.active { background: url('images/view-my-work-over.gif') no-repeat; border-bottom: 3px solid #00a9a6; }	


/* -- Content Styles -- */

#content { margin-top: 10px; }
#content h2 { margin-bottom: 10px; }


/* -- Work Page -- */

.project {
	display: inline-block;
	width: 300px; height: 200px;
	position: relative;
	margin: 2px 1px;
	border: 3px solid #00a9a6;  }
/* .project span { display: none; } */
.project span {
	display: block ;
	position: absolute;
	bottom: 0; left: 0;
	width: 280px;
	color: #fff;
	background-color: #00a9a6;
	padding: 10px; }	
.project img { border: none; }
.project a { border-bottom: none; }


/* -- About Page -- */

#about { width: 550px; }
#about p { font-size: 14px; margin-bottom: 15px; line-height: 1.5em; }

#content-contact-form { float: right; width: 350px; color: #00a9a6; }

#content-contact-form label {
	float: left;
	width: 70px; height: 15px;
	margin-bottom: 15px;
	margin-right: 10px;
	font-weight: bold; }
#content-contact-form input {
	float: left;
	width: 200px; height: 20px;
	margin-bottom: 15px;
	margin-right: 10px; }
#content-contact-form textarea {
	float: left;
	width: 200px; height: 150px;
	margin-bottom: 15px;
	margin-right: 10px; }
#content-contact-form .form-submit {
	float: left;
	margin-left: 80px; }


/* -- Project Page -- */
#sidebar { padding-top: 8px; width: 250px; float: right; }
#sidebar h3 { margin-bottom: 6px; }
#sidebar li { margin-bottom: 10px; font-size: 13px; }
#sidebar a { padding: 2px; padding-bottom: 0; }
#sidebar a:hover, #sidebar a.active { background-color: #ffe74f; }

#project { width: 600px; font-size: 14px; }
#project p { margin-bottom: 10px; }
#project img.border { border: 1px solid #00a9a6; width: 598px; margin-top: 20px; }

#project .noborder { border: 0; }


/* -- Footer Styles -- */

#footer {
	font-size: 11px;
	color: #777;
	margin: 20px 0;
	padding: 20px 20px;
	background-color: #fff;
	height: 320px; }

#info {
	float: left;
	width: 100%;
	padding: 5px 0;
	border-bottom: 1px solid #ffe74f; }
#info p { float: left; margin-right: 25px; position: relative; top: -10px; }
#info p#copyright { float: right; margin-right: 0; position: relative; top: 0; }
#info a { padding: 2px; padding-bottom: 0; }
#info a:hover { background-color: #ffe74f; }

#info .icon { height: 20px; position: relative; top: 7px; margin-right: 5px; }

#contact { width: 265px; margin-top: 20px; margin-right: 55px; float: left; }
#contact p { line-height: 1.4em; }
#contact h2 { margin-bottom: 6px; }

#footer-contact-form {
	float: left;
	width: 260px;
	margin-right: 35px;
	margin-top: 20px; }
#footer-contact-form h2 { margin-bottom: 6px; }
#footer-contact-form label {
	float: left;
	width: 70px; height: 15px;
	margin-bottom: 15px;
	margin-right: 10px;
	font-weight: bold;
	font-size: 1.2em; }
#footer-contact-form input {
	float: left;
	width: 150px; height: 15px;
	margin-bottom: 15px;
	margin-right: 10px; }
#footer-contact-form textarea {
	float: left;
	width: 155px; height: 90px;
	margin-bottom: 15px;
	margin-right: 10px; }
#footer-contact-form .form-submit {
	float: left;
	width: 160px; height: 20px;  
	margin-left: 80px; }

#resume { margin-top: 20px; float: left; width: 300px; }
#resume h2 { margin-bottom: 6px; }
#resume p { margin-bottom: 10px; }
#resume a { padding: 2px; padding-bottom: 0; }
#resume a:hover { background-color: #ffe74f; }
#resume img { height: 35px; }
#resume .pdf { position: relative; top: -15px; left: 5px; }