@charset "utf-8";
@import url("reset.css");

/*
TO THOSE VIEWING THIS FILE:
---------------------------------
This entire website was written by myself from scratch as a demonstration of my abilities with CSS.  I appreciate any feedback and welcome any criticism.  My goal isn't limited to making my design render properly in all browsers but to ensure proper understanding of CSS in general.  There are obviously an unlimited number of ways to write this file but I'd like to learn the aspects that make one approach better than another.
*/

/* ======[QUICK LIBRARY]====== */
.fRight { float:right; }
.fLeft { float:left; }
.cRight { clear:right; }
.cLeft { clear:left; }
.clear {
	width:100%;
	clear:both;
}
.pad10 { padding:10px; }

/* ======[DEFAULT ELEMENT DEFINITIONS]====== */
body { background: #110C08 url(../images/body_bg.jpg) top center repeat; }
h1, h2, h3, h4, h5, h6, p, a, table, ul, ol, label, input { font-family:Arial, Helvetica, sans-serif; }


/* ======[CONTAINER]====== */
div#container {
	width:900px;
	margin:10px auto;
}

/* ======[HEADER]====== */
div#header {
	position:relative;
	width:900px; height:84px;
}
div#header .logo {
	position:absolute;
	left:0; bottom:0;
}
#menu {
	position:absolute;
	bottom:0; right:0;
	width:595px; height:46px;
	padding-top:10px;
	list-style:none;
}
#menu li { display:inline; }
#menu a {
	display:block;
	float:left;
	padding:0 26px 30px 26px;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;
	color:#dcd0cb;
	background-repeat:no-repeat;
	background-position:center 15px;
}
#menu .selected, #menu a:hover {
		background:url(../images/menu-bg2.jpg) bottom center no-repeat;
		color:#FFF;
}
#menu a:hover { text-decoration:underline; }
#menu a.invisible { opacity:0; }
#menu a.home { background-image:url(../images/menu_home_bg.png); }
#menu a.about_me { background-image:url(../images/menu_aboutme_bg.png); }
#menu a.portfolio { background-image:url(../images/menu_portfolio_bg.png); }
#menu a.services { background-image:url(../images/menu_services_bg.png); }
#menu a.contact { background-image:url(../images/menu_contactme_bg.png); }

/* ======[MAIN]====== */
#main {
	position:relative;
	display:block;
	clear:both;
	width:904px;
	height:269px;
	background:url(../images/main-bg.jpg) 0px 0px no-repeat;
}
#light, #dark {
	position: absolute;
	left: 0; top: 0;
}
#dark { z-index: 10; }
#main a.button { z-index:15;display:block; background-position:top left; background-repeat:no-repeat; position:absolute; top:170px; height:44px; }
#main a.button:hover { background-position:bottom left; }
#main a.a { left:161px; width:203px; background:url(../images/button1.png); }
#main a.b { left:366px; width:174px; background:url(../images/button2.png); }
#main a.c { left:541px; width:203px; background:url(../images/button3.png); }
#main .welcome { font-size:14px; position:absolute; top:105px; left:155px; text-align:center; width:575px; }

/* ======[PAGE]====== */
#page {
	width:900px;
	margin-bottom:10px;
	background: url(../images/page_bg.png) repeat-y;
}
#page a { color:#262835; text-decoration:underline; }

/* ======[LEFT]====== */
#left {	float:left; }
#left img {	display:block; }
#left .social { margin-left:20px; }
#left .social a { display:inline; }
#left .resume ul img { float:right; }
#left .resume ul li { padding:8px 0; }
#left .resume {
	margin:15px auto;
	width:170px;
	font-size:12px;
}
#left .resume h3 {
	font-size:18px;
	font-weight:bold;
	padding:0 0 5px 5px;
}
#left .resume ul {
	list-style:disc;
	margin-left:20px;
	padding:5px 0 30px 0;
}
#left .social img {
	display:inline;
	margin-right:10px;
}


/* ======[RIGHT]====== */
#right { padding:10px 20px; }
#right p, #right label { color:#000; }
#right a, #right p, #right ul { font-size:12px; }
#right p { margin:6px 0; }
#right h1 {
	font-size:20px;
	color:#262835;
	font-weight:bold;
}
#right ul { margin-left:30px; }


/* ======[FOOTER]====== */
#footer {
	width:888px;
	height:69px;
	padding-top:20px;
	margin:0 auto;
	clear:both;
	background: url(../images/footer_bg.jpg) bottom repeat-x;
}
#footer #address {
	font-size:12px;
	display:block;
	width:250px;
	margin:10px;
}
#footer .phone {
	font-size:14px;
	font-weight:bold;
}
#footer #about_me {
	font-size:10px;
	float:right;
	display:block;
	width:285px;
	text-align:right;
	margin:10px;
}


/* ======[BOTTOM]====== */
#bottom { width:900px; margin:0 auto; }
#bottom .navigation {
	width:320px;
	float:right;
	font-size:12px;
	color:#FFF;
	text-align:right;
}
#bottom .navigation p {	margin:10px 0; }
#bottom .navigation a { color:#FFF; }
#bottom .email { width:540px; height:100px; position:relative; float:left; }
#bottom .email label { color:#FFF; font-size:10px; }
#bottom .email .row { padding: 2px 0; }
#bottom .email .fLeft label{ float:left; width:45px; padding-top:6px; }
#bottom .email .fRight label{ display:block; padding-bottom:3px; }
#bottom .email input[type=text] {
	background: url("../images/input_bg.jpg") repeat-x scroll 0 0 transparent;
	border: 1px solid #DDDDDD;
    height: 20px;
    width: 200px;
	padding:0;
}
#bottom .email .textfieldRequiredState input[type=text]{ background-position:bottom center; }
#bottom .email textarea {
	background: #FFF url("../images/textarea_bg.jpg") bottom center  repeat-x;
    border: 2px solid #DDDDDD;
    display: inline;
    height: 55px;
}


/* ======[PAGE SPECIFIC]====== */
body.home #right{ background: url(../images/featured-bg.jpg) 200px 30px no-repeat; }
body.home #right h1 { padding-top:10px;  }
body.home #right p { 
	line-height:160%;
	margin:20px 0;
	font-size:14px;
}
body.home #right a { font-size:12px;  }
body.home #featured .item { margin:0 4px; }
body.home #blog-entry {
	width:670px;
	margin-left:190px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
body.home #blog-entry dt { padding-top:15px; }

body.about #right p{
	line-height:160%;
	margin:20px 0;
	font-size:14px;
}
body.about #right a { font-size:14px; }

body.contact #email {
	width:525px;
	margin:0 0 50px 5px;
	color:#FFF;
	font-size:10px;
}
body.contact #email a {
	display:block;
	position:absolute;
	width:145px; height:52px;
	background:url(../images/contact-me.png) top no-repeat;
	text-decoration:none;
	margin:38px 0 0 492px;
}
body.contact #email a:hover { background-position:bottom; }
body.contact #email #col1 {
	width:240px;
	float:left;
}
body.contact #email #col1 input[type=text] {
	width:200px; height:20px;
	border:1px solid #DDD;
	margin:2px 0;
}
body.contact #email #col2 {
	width:275px;
	float:right;
}
body.contact #email #col2 label {
	display:block;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:3px;
}
body.contact #email #col2 textarea {
	display:inline;
	height:47px;
	background:url(../images/textarea_bg.jpg) repeat-x;
	border:2px solid #DDD;
	margin-left:10px;
}
body.contact #email #col2 img { display:inline; }
body.contact #email .col1 {
	width:49%;
	float:left;
}
body.contact #email .col2 {
	width:49%;
	float:right;
}
body.contact #email {
	width:505px;
	margin:20px 0 0 190px;
}
body.contact #email label {	font-size:12px; }
body.contact #email input[type=text] {
	margin-bottom:7px;
	width:230px; height:20px;
}
body.contact #email textarea { width:230px; height:70px; }
body.contact #email #submit {
	float:right;
	margin:10px 15px 0 0;
}
body.contact #email #work-needed { padding-top:10px; }
body.contact #email #work-needed input[type=checkbox] {	margin:7px; }

body.portfolio #portfolio {
	width:660px;
	margin-top:10px;
}
body.portfolio #portfolio a {
	border:2px solid #bababa;
	display:block;
	width:206px;
	height:150px;
	text-decoration:none;
	margin-bottom:10px;
}
body.portfolio #portfolio a:hover {	border:2px solid #71275A; }
body.portfolio #portfolio img { border:1px solid #FFF; }