/* Global Styles ------------------------------------------------------------ */
* { margin: 0; padding: 0; }
.hidden { display: none; visibility: hidden; }

/* Elements ----------------------------------------------------------------- */
body { background-color: rgb(60, 74, 60); font-family: Verdana; font-size: 0.8em; }
img { border: 0; }
li { list-style-type: none; }
p { margin: 3px; text-align: justify; text-shadow: 1px 1px #E7D9AF; }
p a { text-decoration: none; }
p a, p a:link, p a:visited { border-bottom: dotted 1px #726c48; color: #726c48; }
p a:hover { border-bottom: solid 1px #726c48; color: #726c48; }

/* Layout ------------------------------------------------------------------- */
#OuterLayoutWrapper { margin: 0 auto; width: 720px; }
#InnerLayoutWrapper { height: 520px; margin-top: -260px; position: absolute; top: 50%; width: 720px; }
.LeftColumn, .RightColumn { float: left; padding: 7px; height: 282px; width: 292px; }
.LeftColumn { margin: 100px 5px 0 100px }
.RightColumn { margin-top: 100px; }

#Copyright { color: #586658; font-size: 0.7em; margin-left: 115px; }

/* Pages -------------------------------------------------------------------- */
.Page { height: 100%; width: 100%; }
#Pages-Home { background: url("Images/Home.gif"); }
#Pages-Work { background: url("Images/Page-OneColumn.gif"); }
#Pages-Contact { background: url("Images/Page-TwoColumn.gif"); }
#Pages-About { background: url("Images/Page-TwoColumn.gif"); }

/* Links -------------------------------------------------------------------- */
#Pages-Home a, #Links a { display: block; position: absolute; }

#Links a div { display: none; }

/* Page Links */
#Links-Work { height: 100px; left: 0; top: 0; width: 100px; } #Links-Work div, #Work-Index #Links-Work { background-image: url(Images/Links-Page-Work.gif); height: 100px; width: 100px; }
#Links-Contact { height: 80px; left: 20px; top: 100px; width: 80px; } #Links-Contact div, #Contact-Index #Links-Contact { background-image: url(Images/Links-Page-Contact.gif); height: 80px; width: 80px; }
#Links-About { height: 80px; left: 100px; top: 20px; width: 80px; } #Links-About div, #About-Index #Links-About { background-image: url(Images/Links-Page-About.gif); height: 80px; width: 80px; }

#Home-Index #Links-Work { height: 120px; left: 240px; top: 140px; width: 120px; } #Home-Index #Links-Work div { background-image: url(Images/Links-Work.gif); height: 120px; width: 120px; }
#Home-Index #Links-Contact { height: 80px; left: 280px; top: 260px; width: 80px; } #Home-Index #Links-Contact div { background-image: url(Images/Links-Contact.gif); height: 80px; width: 80px; }
#Home-Index #Links-About { height: 100px; left: 360px; top: 160px; width: 100px; } #Home-Index #Links-About div { background-image: url(Images/Links-About.gif); height: 100px; width: 100px; }

/* About -------------------------------------------------------------------- */
#Pages-About p { line-height: 1.6em; }

/* Work --------------------------------------------------------------------- */
.Samples { float: left; padding: 115px 0 0 115px; width: 106px; }
.Samples ul li { background: #e7d9af; border: solid 1px #b1a170; display: block; float: left; margin: 0 3px 3px 0; }
.Samples ul li:hover { background-color: #efe5c7; border-color: #8e8258; }
.Samples ul li a {
	background-position: center top;
	background-repeat: no-repeat;
	display: block;
	height: 48px;
	width: 48px;
}
.Samples ul li:hover a, .Samples ul li a.selected {
	background-position: center bottom;
	color: #8e8e72;
}
#Sample {
	float: left;
	margin-top: 115px;
}
#SampleDetails {
	background: #e7d9af;
	background-position: center top;
	background-repeat: no-repeat;
	border: solid 1px #b1a170;
	display: block;
	height: 335px;
	width: 480px;
}
#SampleDetails-Text {
	height: 40px;
	margin-top: 5px;
	padding: 3px;
	text-align: justify;
	width: 475px;
}

#Modal-Background {
	background: url(Images/Modal-Background.png);
	cursor: pointer;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#Sample-Zoom {
	background-color: #e0e0c8;
	background-position: center center;
	background-repeat: no-repeat;
	border: solid 1px #636350;
	cursor: pointer;
	left: 50%;
	top: 50%;
	padding: 4px;
	position: absolute;
}

/* Contact ------------------------------------------------------------------ */
#OtherContact { padding-top: 6px; }
#OtherContact li a {
	background-color: #e7d9af;
	background-position: 6px 6px;
	background-repeat: no-repeat;
	border: solid 1px #b1a170;
	color: #b1a170;
	display: block;
	font-size: 1.0em;
	padding: 6px 0 6px 26px;
	margin: 0 6px 4px 6px;
	text-decoration: none;
	
	border-radius: 3px;
}
#OtherContact li a:hover {
	background-color: #efe5c7;
	border-color: #8e8258;
	color: #726c48;
}

/* Contact Buttons */
#LinkedIn { background-image: url(Images/Icons/LinkedIn.gif); }
#Twitter { background-image: url(Images/Icons/Twitter.gif); }
#Email { background-image: url(Images/Icons/Email.gif); }
#Resume { background-image: url(Images/Icons/Resume.gif); }

/* Forms -------------------------------------------------------------------- */
label { display: block; float: left; margin: 0 12px; }
label.error { color: #c00; float: right; }

input, textarea {
	background: #e7d9af;
	border: solid 1px #b1a170;
	color: #b1a170;
	font-family: Verdana;
	font-size: 1.4em;
	margin: 0 6px 0.6em 6px;
	padding: 4px;
	width: 275px;
	
	border-radius: 3px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

input:focus, textarea:focus { background: #efe5c7; border-color: #8e8258; color: #726c48; }
textarea { font-size: 1.4em; height: 198px; resize: none; }
button { display: block; margin: 0 auto; width: 100px; }