/* //CSS document// */

/* Global reset */

html, body {
	margin: 0;
	padding: 0
}

fieldset, img {
	border: 0
}

ol, ul, li {
	list-style: none
}

caption, th {
	text-align: left
}

strong {
	font-weight: bold
}

em {
	font-style: italic
}

* a {
	position: relative
}

a {
	outline: none
}

a img {
	border: none
}

/* Gets rid of IE's blue borders */

/* ======================= basic site styles ======================= */

body {
	font-family: "Adobe Caslon Pro", georgia, times, "times new roman", serif;
	font-size: 12px;
	line-height: 1.2em;
	color: #000;
	background-color: #f0f0f0;
	min-width: 970px;
}

p {
	font-size: 1.2em;
	line-height: 2em;
	color: #222;
}

h1 {
	font-size: 2.5em;
	color: #5e5e5e;
}

h2 {
	color: #5a310a;
	font-size: 1.8em;
	font-variant: normal;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
}

h3 {
	font-size: 1.2em;
	color: #434343;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	text-transform: lowercase;
}

h4 {
	font-size: 1em;
	text-align: left;
	text-transform: none;
	color: #3b3b3b;
}

ul {
	text-align: left;
	list-style: none;
	list-style-position: outside;
	display: inline;
}

a img {
	border-width: 1px;
	border-color: #454545;
	border-style: solid;
}

a img:hover {
	opacity: .7;
}

img {
	border-color: #545454;
	border-style: solid;
	border-width: 1px;
}

li {
	color: #676767;
	list-style: none;
	text-align: left;
	font-size: 1.3em;
	line-height: 1.5em;
	font-weight: normal;
	font-style: normal;
}

a:link {
	color: #482708;
	text-decoration: none;
}

a:visited {
	color: #363e3a;
	text-decoration: none;
}

a:hover {
	color: #cdcdcd;
}

a:active {
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	font-style: normal;
}

/* ==================== Nav Bar ======================= */

#nav {
	margin: 0 auto;
	background-image: url(http://sebastianmendes.com/images/masthead.png);
	background-repeat: no-repeat;
	height: 195px;
	width: 840px;
	padding: 0;
	position: relative;
}

#nav ul {
	
}

#nav li {
	position: relative;
	left: 7px;
	display: block;
	letter-spacing: 2px;
	text-transform: uppercase;
	;
	list-style: none;
	text-align: left;
	line-height: 28px;
	float: left;
	margin-top: 151px;
}

#nav li a {
	padding: 10px 10px;
	font-size: 24px;
	text-decoration: none;
	color: #666666;
	text-transform: uppercase;
	padding-left: 7px;
	background-color: #888;
	opacity: .8;
	border-left: solid 1px #919191;
}

#nav li a:hover {
	color: #fff;
	background-color: #292d34;
}

#nav li a.active {
	color: #fff;
	background: #292d34;
}

/* ==================== Wrapper ======================= */

#content {
	padding-bottom: 100px;
	display: block;
	height: 100%;
	width: 830px;
	top: 200px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 30px;
	margin: 0 auto;
}

/* ==================== Main Content ======================= */

#maincontent {
	width: 400px;
	float: left;
	;
}

/* ==================== Sidebar ======================= */

#sidebar {
	width: 400px;
	float: right;
	padding-left: 20px;
	;
	overflow: inherit;
}

/* ==================== Footer ======================= */

#footer {
	color: gray;
	text-align: center;
	margin: auto;
	clear: both;
	height: 100px;
	background-color: #202221;
	padding-top: 10px;
	font: 10px/2em Georgia, "Times New Roman", Times, serif;
}

/* ======================= index ======================= */

#index {
	background: url(../images/name.png) no-repeat;
	height: 72px;
	width: 924px;
	margin: 0 auto;
	margin-top: 25%;
	border: none;
}

#index:hover {
	opacity: .5;
}

#index h1.title a {
	display: block;
	height: 73px;
	overflow: hidden;
	width: 925px;
	border: none;
	text-indent: -9999px;
}

/* ======================= about ======================= */

.portrait {
	margin-left: 10px;
}

/* ======================= work ======================= */

#grouptwo {
	display: block;
	clear: both;
}

#groupthree {
	display: block;
	clear: both;
}

.work li {
	padding-right: 20px;
	float: left;
	display: block;
}

.work p {
	width: 250px;
	display: block;
	padding: 0px;
	font-size: 1em;
}

.work a {
	width: 250px;
	display: block;
	padding: 0px;
}

.work h4 {
	width: 250px;
	display: block;
	padding: 0px;
	
}

.work h5 {
	width: 250px;
	display: block;
	padding: 0px;
	
}

/* ======================= Contact ======================= */

/* hcard styles */

.fn {
	font-size: 22px;
	line-height: 32px;
}

.org {
	font-size: 20px;
	line-height: 30px;
}

.email {
	color: navy;
	font-size: 18px;
	line-height: 28px;
}

.adr {
	font-size: 18px;
	line-height: 28px;
	padding-left: 20px;
	display: block;
}

.tel {
	font-size: 18px;
	line-height: 28px;
}

/* PHP Contact Form v.2.0 Basic Styles by Mike Cherim */

/* for main form wrapping div */

div#gb_form_div {
	
}

/* id for the form itself */

form#gb_form {
	
}

/* form and results heading size */

.main_formhead, .formhead {
	font-size: 1.4em;
	color: #cc9900;
}

/* outer fieldset - it's common to make this border : 0; */

fieldset#formwrap {
	border: 0;
}

/* section fieldsets - it's common to make this border : 0; */

fieldset {
	background-color: #f0f0f0;
}

/* form legends and dt "heading" */

legend, dt {
	font-weight: bold;
	color: #666;
}

/* main legend at top of the form */

legend#mainlegend {
	font-size: 1.2em;
	color: #669900;
}

/* form label text */

label {
	color: #669900;
}

/* all inputs, select, and textarea */

input.med, input.short, select.med, textarea.textbox {
	font: 80% 'Trebuchet MS', sans-serif;
	color: #666;
	padding: 2px;
	border: 1px solid #cc9000;
	background-color: #fffffa;
}

/* to make focus stable in IE 6 */

* html input.button {
	color: #000;
	border: 1px solid #669900;
	background-color: #cc9900;
}

* html input.button.hover {
	color: #000;
	border: 1px solid #000;
	background-color: #cc9900;
}

* html input.button.focus {
	color: #000;
	border: 1px solid #000;
	background-color: #cc9900;
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */

input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus {
	color: #000;
	border: 1px solid #000;
	background-color: #fff;
}

/* for the checkbox input */

input.checkbox {
	
}

/* error heading weight and color - bold is for the error reason text */

span.error, dt.error, strong.error {
	color: #cd0000;
	font-weight: bold;
}

/* success heading color */

span.success {
	color: #669900;
	font-weight: bold;
}

/* privacy and "Why?" small element link sizes (relative to their parent element */

small.privacy, small.whythis {
	font-size: 80%;
}

/* set up relativity to position small Why? text */

small.whythis {
	position: relative;
}

/* Why? link style */

small.whythis a {
	text-decoration: underline;
	font-size: 0.95em;
}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active {
	text-decoration: none;
}

/* hide the Why? text span */

small.whythis a span {
	border: 1px solid #fafafa;
	background-color: #fafafa;
	padding: 0 4px 0 4px;
	color: #fafafa;
	text-decoration: none;
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */

small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span {
	border: 1px solid #000;
	background-color: #eecc11;
	color: #000;
	padding: 0 4px 0 4px;
	text-decoration: none;
}

/* the link back to me for form credit */

p.creditline {
	float: right;
	margin: -17px 0;
	padding-bottom: 1px;
	font-size: 80%;
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */

abbr, .abbr {
	cursor: help;
	border-bottom: 1px dotted #999;
}

/* set result color for blockquote dt "heading" */

dl#result_dl_blockq dt, dl.result_dl_blockq dt {
	color: #669900;
}

/* position result blockquote flush with parent */

dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
	margin-left: 0;
}

/* style the input names in the result */

div#hf_form_div span.items {
	font-weight: bold;
	color: #cc9900;
}

input.button {
	border: 3px double #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
	padding: 0.25em;
	background-color: #FFFFFF;
	background-repeat: repeat-x;
	color: #333333;
	font-size: 75%;
	font-weight: bold;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}

/* ============================ CV ============================ */

.title {
	font-style: italic;
	padding-right: 5px;
	color: #222
}

.date {
	padding-right: 20px;
	color: #111;
	;
}

.divider {
	padding-bottom: 5px;
	border-bottom: dashed 1px #222;
}