/* COLOURS

#eaeaea - light grey - body background
#cccccc - grey - divider
#2e2e2e - dark grey - text / nav

#ff2dad - pink

*/

/* Sections flagged with =
	GENERIC
	TOP
	BRANDING
	MAIN
	CONTENT
	SIDEBAR
	NAVIGATION (main)
	FOOTER
	SECTION-SPECIFIC
		Portfolio
		Resume
		Contact
		Mobile
*/


/* =GENERIC
----------------------------------------------------*/

* { margin: 0; padding: 0; }

html {

}

body {
	background: #eaeaea;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; ;
}

h1, h2, h3, h4 {
	font-weight: normal;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
}

a:link, a:visited {
	color: #2e2e2e;
}

a:focus, a:hover, a:active {
	color: #ff2dad;
	overflow: hidden;
}

a img {
	border: none;
}

.clear {
	clear: both;	
}

@font-face {
    font-family: 'QuicksandLight';
    src: url('/fonts/Quicksand_Light-webfont.eot') format('eot'),
         url('/fonts/Quicksand_Light-webfont.woff') format('woff'),
         url('/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
         url('/fonts/Quicksand_Light-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* =TOP
----------------------------------------------------*/

#top {
	width: 920px;
	margin: 0 auto;
	padding: 40px;
	position: relative;
}


/* =BRANDING
----------------------------------------------------*/

#branding {
	height: 97px; width: 100%;
	background: url('/images/branding-background.png') top center no-repeat;
	position: relative;
	top: 40px;
	margin-bottom: 40px;
}

#branding #logo {
	width: 960px;
	margin: 0 auto;
	position: relative;
	background: #eaeaea;
}

#branding #logo a {
	display: block;
	width: 607px; height: 97px;
	background: url('/images/design-by-gray-logo.png') no-repeat;
	text-indent: -9999px;
}


/* =MAIN
----------------------------------------------------*/

#main {
	
}


/* =CONTENT
----------------------------------------------------*/

#content {
	width: 630px;
	float: right;
	padding: 20px 0 20px 40px;
	border-left: 1px solid #cccccc;
}

#content h1, #content h2, #content h3 {
	color: #ff2dad;
	margin-bottom: 20px;
	font-family: 'QuicksandLight';
	letter-spacing: -5px;
}

#content h1 {
	font-size: 70px;
}

#content h2 {
	font-size: 50px;
	letter-spacing: -4px;
	margin-top: 40px;
}

#content h3 {
	font-size: 30px;
	letter-spacing: -3px;
}

#content p {
	font-family: Georgia;
	font-size: 16px;
	color: #2e2e2e;
	margin-bottom: 20px;
	line-height: 1.5;
}

#content p.intro {
	font-size: 20px;
	font-style: italic;
	line-height: 1.2;
}

#content ul, #content ol {
	margin: 0 0 20px 40px;	
	font-family: Georgia;
	font-size: 16px;
	color: #2e2e2e;
}

#content ul li ul {
	margin-bottom: 0;	
	margin-top: 5px;
}

#content li {
	margin-bottom: 5px;	
}


/* =NAVIGATION (main)
----------------------------------------------------*/

#main-navigation {
	list-style: none;
	padding-top: 20px;
}

#main-navigation li a {
	text-decoration: none;
	color: #2e2e2e;
	font-size: 50px;
	line-height: 45px;
	background: url('/images/nav.png') no-repeat;
	width: 198px; height: 48px;
	display: block;
	text-indent: -9999px;
}

#main-navigation li a.personal {
	
}

#main-navigation li a.personal:hover, #main-navigation li a.personal.current {
	background-position: -198px 0;
}

#main-navigation li a.portfolio {
	background-position: 0 -48px;
}

#main-navigation li a.portfolio:hover, #main-navigation li a.portfolio.current {
	background-position: -198px -48px;
}

#main-navigation li a.resume {
	background-position: 0 -96px;
}

#main-navigation li a.resume:hover, #main-navigation li a.resume.current {
	background-position: -198px -96px;
}

#main-navigation li a.contact {
	background-position: 0 -144px;
}

#main-navigation li a.contact:hover, #main-navigation li a.contact.current {
	background-position: -198px -144px;
}


/* =FOOTER
----------------------------------------------------*/

#footer {
	margin-bottom: 40px;
}


/* =SECTION-SPECIFIC
----------------------------------------------------*/

/* Portfolio
----------------------------------------------------*/

.portfolio #content p.intro {
	font-size: 20px;
	font-style: italic;
	margin-bottom: 30px;
	line-height: 1.2;
}

.portfolio #content p {
	font-size: 16px;
	font-style: italic;
}

.portfolio #content h2 {
	margin-top: 40px;	
}

/* Resume
----------------------------------------------------*/

.resume #content h2 {
	margin-top: 30px;
	margin-bottom: 0;
}

.resume #content #jobs h3 {
	margin-bottom: 0;
	margin-top: 30px;
}

.resume #content #jobs h4 {
	font-family: Georgia;
	font-size: 18px;
	margin-bottom: 5px;
}

.resume #content #jobs p.date {
	font-style: italic;
	font-size: 14px;
}

.resume #content #skills {
	background: #2e2e2e;
	padding: 20px 20px 1px 20px;
}

.resume #content #skills p, .resume #content #skills li {
	color: #eaeaea;
}

.resume #content #skills h2 {
	margin-top: 10px;
}

/* Contact
----------------------------------------------------*/

label {
	display: inline-block; 
	float: left; 
	height: 26px; 
	line-height: 26px; 
	width: 175px; 
	padding: 5px;
	font-size: 1.3em; 
}

input, textarea, select {
	margin: 0 0 10px 0; padding: 5px;
	color: #666; 
	background: #f5f5f5; 
	border: 1px solid #ccc;
	font-size: 1.2em; 
	-moz-border-radius: 5px; 
	-webkit-border-radius:5px;
}   

textarea#comments {
	margin-top: -36px;
	margin-left: 185px;
}

input:focus, textarea:focus, select:focus { 
	border: 1px solid #999; 
	background-color: #fff; 
	color:#333; 
}

input.submit { 
	cursor: pointer; 
	border: 1px solid #222; 
	background:#333; 
	color:#fff; 
	-moz-border-radius: 5px; 
	-webkit-border-radius:5px; 
}

input.submit:hover { 
	background:#444; 
}

fieldset { 
	padding: 20px; 
	border: 1px solid #eee; 
	-moz-border-radius: 5px; 
	-webkit-border-radius:5px; 
}

legend { 
	padding:7px 10px; 
	font-weight: bold; 
	color: #000; 
	border: 1px solid #eee; 
	-moz-border-radius: 5px; 
	-webkit-border-radius:5px; 
}

span.required { 
	font-size: 13px; color: #ff0000; /* Select the colour of the * if the field is required. */
} 

/* Style for the error message */

.error_message { 
	display: block; 
	height: 22px; 
	line-height: 22px; 
	background: #FBE3E4 url('/images/error.gif') no-repeat 10px center; 
	padding: 3px 10px 3px 35px; 
	margin: 10px 0; 
	color: #8a1f11;
	border: 1px solid #FBC2C4; 
	-moz-border-radius: 5px; 
	-webkit-border-radius:5px; }

#succsess_page h1 { 
	background: url('/images/success.gif') left no-repeat; padding-left:22px;
}