/* 	CSS BY RYAN URBACH
--------------------------
	STUFF ON EACH PAGE
*/
body {background: white; margin: 0; text-align: center; font-family: "Lucida Grande", "Helvetica", "Verdana", sans-serif; color: #000; font-size: 1em; background: url("images/header/background.gif") repeat-x; min-height: 100%;}

small {font-size: 60%;}
a {text-decoration: none; color: #6083ad; text-transform: uppercase; font-size: smaller;}
a:hover {background-color: #6083ad; color: white;}

/* HEADER */
#headercontain {position: relative; width: 950px; height: 200px; margin: auto;}

/* NAVIGATION */
#nav {position: relative; width: 950px; text-align: left; margin: auto; padding-top: 2px;}
#nav a {color: #fff; padding: 5px; text-decoration: none; letter-spacing: 1px;}
#nav a:hover {color: #333; background: none;}
#nav .onpage {color: #333}

/* BODY ORGANIZED IN TIERS */
.tier {position: relative; margin: auto; min-height: 160px; width: 936px; border-bottom: solid 1px #333; border-right: solid 1px #333; text-align: left;}
.sidenames {float: right; margin-right: -15px; margin-top: 8px;}

/* GRAY DIVIDERS */
.graybar {position: relative; margin: auto; height: 25px; width: 936px; background: #333; border-right: solid 1px #333;} 
.whitespace {float: right; width: 40px; height: 25px; background: #fff;}

/* FOOTER FIXED AT BOTTOM */
#footer {position: fixed; top: 100%; margin-top: -30px; background: #333; width: 100%; height: 29px; z-index: 2; font-size: 0.6em; color: #666; text-transform: uppercase; padding-top: 5px; border-top: solid 1px #444;}
#footer img {vertical-align: middle; border: 0px; margin-top: -2px;}
#footer a {font-size: 100%; color: #666;}
#footer a:hover {background: none; color: #CCC;}
#footer h3 {display: inline; margin-left: 150px; font-size: 150%; color: #DDD; letter-spacing: 1px;}


/* 	STUFF SPECIFIC TO PAGES
--------------------------
	HOMEPAGE 
--------------------------
	RECENT WORK TIER
*/
#recentwork {margin-top: -10px; text-align: left;}
#recentwork ul {list-style: none; padding-left: 0px; padding-top: 15px;}
#recentwork li {float: left; width: 158px; padding-left: 140px;}

#work1 	{background: url("images/recentworks/flunkd.jpg") no-repeat;}
#work2	{background: url("images/recentworks/theaterads.jpg") no-repeat;}
#work3	{background: url("images/recentworks/scorrweb.jpg") no-repeat; border-right: none;}

/* ABOUT RYAN TIER */
#aboutryan {height: 220px; line-height: 120%;}
#aboutryan .sidenames {margin-top: 40px;}
#aboutryan p {margin-top: 0px; padding: 10px; padding-right: 40px; text-align: left;}
#photo {float: left; width: 590px; background: url("images/photos/door.jpg"); height: 100%; margin-right: 10px;}

/* EPHEMERA TIER */
#ephemera {border-bottom: none; text-align: left; font-size: smaller; color: #aaa; margin-top: -13px; padding-top: 20px;}
#ephemera h3 {font-size: 0.9em; color: #333; margin-top: 0px; padding-top: 10px; margin-bottom: -10px;}
#ephemera ul {list-style: none;}
#ephemera li {margin-left: -30px; margin-bottom: 5px;}

.ephemera {float: left; width: 298px;}
/* 
---------------------
	CONTACT PAGE 
---------------------
*/
#contact {text-align: left; margin-top: 3px; padding-top: 20px;}
#email {padding-top: 20px; border-bottom: none;}
.left {float: left; width: 180px;}
label {text-transform: uppercase; color: #333; font-size: 0.8em; width: 100%; display: block; margin-bottom: -4px;}
input {border: solid 1px #333;}
textarea {border: solid 1px #333; width: 710px; height: 155px;}
.button {border: solid 1px #333; background: #333; color: #fff; font-family: "Lucida Grande", sans-serif; font-size: bold; text-transform: uppercase; width: 150px; margin-top: 85px;}

/* 
--------------------
	RESUME 
--------------------
*/
#college {float: left; width: 350px; text-align: left;}
#education {height: 100px; margin-top: 4px;}
#knowledge {margin-top: -16px;}
#knowledge ul{list-style: none; text-align: left; padding: 0px; height: 130px; padding-top: 15px;}
#knowledge li{float: left; width: 150px; height: 100%; border-right: solid 1px #333; padding-left: 10px;}
#csusm {text-align: left; margin-top: -16px;}
#freelance {margin-top: -16px;}
#urbach {margin-top: -16px;}
#unk {margin-top: -16px;}
.resumeleft{float: left; width: 330px;}
.resumeright{position: relative; width: 496px; padding-right: 40px; padding-left: 400px; padding-top: 15px; text-align: left;}
.resumeright li{list-style: circle;}
/* 
--------------------
	WORK 
--------------------
*/
#secondnav {text-align: left; width: 936px; margin: auto; margin-top: 4px; border-right: solid 1px #333; padding-top: 2px; padding-left: 0px;}
#secondnav a {color: #333; letter-spacing: 0.5px;}
#secondnav a:hover {background: none; color: #6083ad;}
#secondnav .onnav {color: #6083ad;}
#secondnav b {color: #666; font-weight: normal; letter-spacing: 0.5px; font-size: 70%; text-transform: uppercase;}
.portinfo {float: right; width: 280px; margin-right: 40px;}
.portinfo h2 {margin-bottom: 2px; font-size: 1.2em; margin-top: 0px;}

#showcase {position: relative; width: 100%; background: #333; margin: auto; margin-top: 5px; padding-top: 5px; text-align: left;}
#casecontain {position: relative; width: 940px; margin: auto;}
.study {float: left; width: 235px; font-size: 0.9em;}
.study dt {font-size: 110%; font-weight: bold; background: #333; color: white; border-left: solid 1px #fff; margin: auto;}
.study dd {text-align: justify; padding: 10px; margin: 0;} 
/* 
--------------------
	CASE STUDY 
--------------------
*/
#casestudylinks {float: right; width: 290px; margin-right: 5px;}
#casestudylinks a {display: block; width: 290px; margin: 0px; padding: 0px; line-height: 0px;}
#casestudylinks a:hover {background: none;}
#casestudylinks img {border: none; margin: 0px; padding: 0px;}