/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	
		    Filename: 	    shell.css
		    Date: 	        Wednesday July 22, 2009
		    Desccription:	Presentation handler for 2009 portfolio
		    Author:	        Rich Gustke - hello@richgustke.com
			
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

body, html {
	padding: 0 0 0 0;
	margin: 0 auto;
	border-collapse: collapse;
	background: url(../_ui/bg.jpg);
	background-attachment: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	}
	
img {
    border: 0;
	}
	
/* ==========================================================
CORE WRAPPERS AND CONTAINERS
========================================================== */	


#wrap {
    margin: 0 0 0 0;
	min-width: 940px;
	max-width: 1240px;
	margin-top: 50px;
	padding-bottom: 50px;
	margin-left: 50px;
	clear: both;
	}
	
.leftpanel {
    position: fixed;
	left: 55px;
	top: 90px;
	height: 400px;
	float: left;
	width: 140px;
	margin-top: 30px;
	}

.logo {
    position: fixed;
	width: 152px;
	left: 55px;
	top: 35px;
	}

/* ==========================================================
NAVIGATION
========================================================== */
	
.leftpanel ul,li {
    list-style: none;
	list-style-type: none;
	padding: 0 0 0 0;
	margin: 0 auto;
	line-height: 18px;
	}

/* Navigation Main Links */	
.leftpanel a:link.nav, a:visited.nav {
    font-family: Arial, Helvetica, "Lucida Grande", sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #999;
	text-decoration: none;
	}
	
.leftpanel a:hover.nav {
	color: #e4e4e4;
	}

/* Navigation Active Link */	
a:link.active, a:visited.active {
    font-family: Arial, Helvetica, "Lucida Grande", sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	}
	
/* Navigation Index Link */	
a:link.index, a:visited.index {
    font-family: Arial, Helvetica, "Lucida Grande", sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #ddd;
	text-decoration: none;
	border-bottom: 1px solid #666;
	}
	
a:hover.index {
	color: #fff;
	border-bottom: none;
	}
	
/* About */	
a:link.about, a:visited.about {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 14px;
	color: #ddd;
	text-decoration: underline;
	}
	
a:hover.about {
	color: #fff;
	text-decoration: none;
	}
	
/* ==========================================================
WORK THUMBNAILS
========================================================== */

#project-listing {
    float: left;
	padding-top: 74px;
	margin-left: 180px;
	}

.project {
    float: left;
	width: 200px;
	height: 195px;
	margin-bottom: 20px;
	margin-right: 30px;
	}
	
.project:hover h1 {
    text-decoration: underline;
	}
	
.project h1 {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	margin-top: 16px;
	color: #ddd;
	}
	
.project h2 {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	text-align: center;
	color: #666;
	margin-top: -6px;
	}
	
/* MAIN THUMBNAIL HEADER */	
.project a:link, a:visited {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	}
	
.project a:hover {
    color: #ddd;
	}
	
/* ==========================================================
PROJECT CONTENT
========================================================== */

#project-content {
    float: left;
	margin-top: 74px;
	margin-left: 180px;
	width: 700px;
	}

h3 {
    font-family: Arial, "Lucida Grande", Helvetica, Arial, "Lucida Sans Unicode", sans-serif;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: #fff;
	text-indent: 5px;
	margin: 0 auto;
	padding: 0 0 0 0;
	}

br { line-height: 10px; }

h4 {
    font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #999;
	text-indent: 5px;
	margin: 0 auto;
	margin-top: 8px;
	margin-bottom: 5px;
	padding: 0 0 0 0;
	}

.project-detail {
    float: left;
	width: 600px;
	margin-bottom: 30px;
	}
	
.project-header {
    float: left;
	width: 600px;
	margin-bottom: 10px;
	}

.project-screen {
    float: left;
	width: 638px;
	margin-bottom: 10px;
	}
	
.project-screen img {
    border: 5px solid #222;
	}
	
p {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ccc;
	text-align: left;
	line-height: 18px;
	margin: 0 auto;
	padding: 0 0 0 0;
	width: 600px;
	}

p.sep {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #555;
	}
	
p.role {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999;
	line-height: 18px;
	text-align: left;
	text-indent: 5px;
	margin: 0 auto;
	padding: 0 0 0 0;
	}
	
a:link.external, a:visited.external {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #fff;
	border-bottom: 1px solid #ffc000;
	text-decoration: none;
	}
	
a:hover.external {
    border-bottom: none;
	}
	
a:link.agency, a:visited.agency {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999;
	text-decoration: none;
	}
	
a:hover.agency {
    text-decoration: underline;
	}
	
/* ==========================================================
ABOUT
========================================================== */

#abcontainer {
    float: left;
	padding-top: 68px;
	margin-left: 180px;
	}
	
.ab-detail {
    float: left;
	width: 600px;
	margin-bottom: 10px;
	margin-top: 10px;
	}

.ab-detail img {
    margin-bottom: 10px;
	}
	
.ab-detail p {
    font-size: 11px;
	font-weight: normal;
	color: #999;
	line-height: 18px;
	}
	
a:link.ab, a:visited.ab {
    font-size: 12px;
	font-weight: normal;
	color: #ddd;
	border-bottom: 1px solid #ffc000;
	text-decoration: none;
	}
	
a:hover.ab {
    color: #fff;
	border-bottom: none;
	}
	
/* ==========================================================
CONTACT SPRITES
========================================================== */

#contactFB {
    float: left;
	width: 63px;
	height: 9px;
	padding: 2px;
	}
	
#contactElance {
    float: left;
	width: 48px;
	height: 9px;
	clear: both;
	padding: 2px;
	margin-top: 6px;
	}
	
#contactLinkedIn {
    float: left;
	width: 58px;
	height: 8px;
	clear: both;
	margin-top: 6px;
	padding: 2px;
	}
	
/* Facebook Sprite */
a:link.fb, a:visited.fb {
    background: url(../_ui/contact-sprite.png) no-repeat;
	background-position: -11px -11px;
	width: 63px;
	height: 9px;
	display: block;
	}
	
a:hover.fb {
    background-position: -93px -11px;
	}
	
/* Elance Sprite */
a:link.elance, a:visited.elance {
    background: url(../_ui/contact-sprite.png) no-repeat;
	background-position: -11px -35px;
	width: 48px;
	height: 9px;
	display: block;
	}
	
a:hover.elance {
    background-position: -93px -35px;
	}
	
/* Elance Sprite */
a:link.linkedin, a:visited.linkedin {
    background: url(../_ui/contact-sprite.png) no-repeat;
	background-position: -11px -60px;
	width: 58px;
	height: 8px;
	display: block;
	}
	
a:hover.linkedin {
    background-position: -93px -60px;
	}