/* CSS Color Guide
 * GLOBALS ....... #72610f
 * LINEWORK ...... #d3dd58
 * ACTIVE NAV .... #f7fafd
 * LINKS ......... #669cd3
 * LINK LINE ..... #d9e6f4
 *
 * Dimensions
 * CONTAINER: 1000
 * HEADER: 1000 * 367 / MARGIN BOTTOM: 15
 * NAV ITEM: 34 * 225 / MARGIN: 25
 * H1: 40 * 366 / MARGIN TOP: 35
 * P: MARGIN TOP: 17
 * CONTENT/FOOTER: 725 / MARGIN: L 275 R 25
 */

/* defaults */
body {
	font: 13px/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	color: #72610f;
	text-align: center;
	}

#upload {
	width: 100px; height: 50px;
	position: absolute;
	top: 50px;
	left: 10px;
	z-index: 100;
	background: url(../images/upload.png) no-repeat 0 0;
	}

.clear { line-height: 0; height: 0; clear: both; }

a:link,
a:visited,
a:hover,
a:active {
	color: #669cd3;
	text-decoration: none;
	border-bottom: 2px solid #d9e6f4;
	} a:hover { border-bottom-color: transparent; }

#project #slimHeader a:link,
#project #slimHeader a:visited,
#project #slimHeader a:hover,
#project #slimHeader a:active { border-bottom: 0; }

/* box model and everything else */

#container {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	}

#header {
	width: 100%;
	height: 367px;
	padding-bottom: 15px;
	background: url(../images/header_bg.gif) left top no-repeat;
	}

#nav, #project #sidebar {
	float: left;
	width: 225px;
	margin: 0 25px;
	}

#project #sidebar { margin: 80px 25px 0 0; }
#project #nav { float: none; margin: 0; width: 250px; }

#nav li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #d3dd58;
	}

#nav li a, #nav li span {
	display: block;
	height: 35px;
	padding: 5px 0 0 25px;
	color: #72610f;
	font-size: 1.3em;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	border: none;
	} #nav li a:hover { background-color: #f7fafd; }

html > body #nav li a,
html > body #nav li span { height: 30px; }

#nav li span {
	background: #f7fafd url(../images/nav_active_bg.gif) right center no-repeat;
	}

/* content edition */
#content {
	margin: 0 25px 25px 275px;
	}

h1 {
	width: 370px;
	height: 40px;
	margin-top: 35px;
	background-repeat: no-repeat;
	background-position: left top;
	}
h1 span { margin-left: -10000px; }

h1#who_is_sasi { margin-top: 5px; background-image: url(../images/h1_who_is_sasi.gif); }
h1#what_does_he_do { background-image: url(../images/h1_what_does_he_do.gif); }
h1#whats_cool_to_work_on { background-image: url(../images/h1_whats_cool_to_work_on.gif); }
h1#why_designsuperhero { background-image: url(../images/h1_why_designsuperhero.gif); }
h1#blogging { background-image: url(../images/h1_blogging.gif); }
h1#anything_else_to_say { background-image: url(../images/h1_anything_else_to_say.gif); }
h1#contact_me { margin-top: 5px; background-image: url(../images/h1_contact_me.gif); }
h1#projects { margin-top: 5px; background-image: url(../images/h1_projects.gif); }

#content p { margin: 17px 0 0 5px; }

#footer {
	margin: 50px 25px 50px 250px;
	padding: 15px 25px;
	border-top: 1px solid #d3dd58;
	}

/* Project page operations */
#projectList {
	margin: 35px 0 0 5px;
	}

#projectList li {
	height: 30px;
	width: 100%;
	margin-top: 10px;
	line-height: 30px;
	}

#projectList li.odd { background: #f7fafd; }
#projectList li.hover {
	background-image: url(../images/arrow_project.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#projectList li a:hover { font-weight: bold; }
#projectList li a:visited { text-decoration: line-through !important; }

#projectList li span { padding-right: 0.8em; }

/* Project subpage */
#slimHeader {
	height: 28px;
	width: 100%;
	padding-top: 5px;
	margin: 5px 0 20px;
	background-color: #f7fafd;
	}

#slimHeader .logo { float: left; }

#slimHeader .backBtn { float: right; }

#nav li.projectInfo { padding: 10px 0 0; }
#nav li.projectInfo p { margin-bottom: 10px; font-size: 0.85em; color: #72610f; }
#nav li.projectInfo p b { font-weight: bold; }

#projectLinks { margin-top: 20px; font-size: 0.9em; }
#projectLinks li {
	padding-left: 20px;
	line-height: 20px;
	margin-bottom: 3px;
	background: url(../images/icon_plus.gif) no-repeat 0 4px;
	}

#project h2 {
	font-size: 2.77em;
	letter-spacing: -0.04em;
	}

#project .shortDescr {
	margin: 10px 0 0; padding: 0;
	}

.refImg { margin: 30px 0 -10px; }
.refImg img {
	margin: 0;
	padding: 0 1px;
	background-color: #7e8d9d;
	border-left: 10px solid #f7fafd;
	border-right: 10px solid #f7fafd;
	}
p.subImg {
	position: relative;
	top: -13px;
	padding-left: 10px;
	font-size: 0.8em;
	color: #b7af86;
	background: url(../images/icon_arrow_right.gif) no-repeat left center;
	}

#project h3 {
	margin: 15px 0 -5px 5px; 
	font-weight: bold;
	font-size: 1.03em;
	}

/*
		<div class="refImg">
			<img src="static/images/project_image_1.jpg" alt="Part of the layout" title="Part of the layout" />
			<p class="subImg">Part of the layout</p>
		</div>

*/