/* 
Title:		Master styles for screen media
Author: 	dan@perrera.com
*/

body {
	background: #ffffff;
	color: #403c36;
	font-family: Arial, Helvetica, sans-serif;
	margin:0 auto;
	width: 960px;
	}

/* typography
--------------------------------------------- */
h1 {
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	}
h2 {
	font-size: 14px;
	font-weight: bold;
	}
h1.section_title {
	border-bottom: 2px solid #999691;
	color: #c2bfbc;
	font-size: 14px;
	padding-bottom: 10px;
	}
p {
	color: #807d79;
	font-size: 14px;
	line-height: 20px;	
	margin-top: 10px;
	}

/* links */

a:link, a:visited {
	font-weight: bold;
	text-decoration: none;
	outline: none;
	color: #3674b2;
	}
p.link {
	font-size: 13px;
	border-top: 1px solid #c2c0bd;
	padding-top: 10px;
	margin-top: 20px;
}
	
/* page structure 
--------------------------------------------- */

section.main {
	float: right;
	position: relative;
	width: 720px;
	}
footer {
	display: block;
	margin-right: 38px;
	width: 198px;
	}
footer h2 {
	font-weight: normal;
}
footer h2.project_title {
	font-weight: bold;
}

/* header 
--------------------------------------------- */

header {
	display: block;
	margin-top: 50px;
	margin-bottom: 90px;
	}

/* logo */

#logo h1 a{
	background: url(../img/logo.jpg) no-repeat top left;
	display: block;
	float: left;
	height: 21px;
	text-indent:-9999px;
	width: 198px;
	}
#logo h1 img {
	display: block;
	height: 0;
	}
	
/* navigation */
	
nav ul {
	display: inline-block;
	float: left;
	margin-left: 38px;
	}
nav ul li {
	float: left;
	margin-right: 16px;
	}
nav ul li a {
	font-size: 14px;
	}
nav ul li a.active {
	color: #c2bfbc;
	}

/* home styles 
--------------------------------------------- */
article {
	border-bottom: 1px solid #c2c0bd;
	clear: both;
	display: block;
	float: left;
	margin-: 10px;
	padding: 10px 0;
	width: 720px;
}
article img {
	float: left;
	margin-right: 30px;
}
article h1 {
	margin-top: 5px;
}
.main article h1 a:hover {
	color: #000000;
}
.main article h2 a, .main article h2 {
	color: #3f3c37;
	font-weight: normal;
}
	
/* project styles 
--------------------------------------------- */
h2.project_title {
	margin-top: 10px;
}
ul.role {
	border-bottom:1px solid;
	border-top:1px solid; 
	font-size: 13px;
	margin: 20px 0 10px 0;
	padding: 10px 0 20px 0;
}
.main {
	padding-bottom: 25px;
}
img.project_img {
	margin: 14px 0;
}
.main article a img, img.project_img {
	border: 2px solid #ffffff;
	outline: 1px solid #c1c0bc;
}
.main article a img:hover {
	outline-color: #000000;
}

/* experience styles 
--------------------------------------------- */
#experience.main {
	width: 960px;
}
#experience.main h1.section_title {
	border-bottom: 0;
	margin-left: 235px;
}
#experience.main section {
	float: left;
	margin-bottom: 10px;
}
.first .firm, .first .description  {
	border-top: 2px solid #999691;
}
.firm {
	border-bottom: 1px solid #c2c0bd;
	border-top: 1px solid #c2c0bd;
	float: left;
	margin-right: 38px;
	padding: 5px 0 10px 0;
	width: 198px;
}
.firm p, .title_date p {
	color: #403c36;
	font-size: 13px;
	font-weight: normal;
	margin-top: 0;
}
.title_date {
	border-bottom: 1px solid #c2c0bd;
	padding-bottom: 10px;	
}
.description {
	border-top: 1px solid #c2c0bd;
	float: left;
	padding-bottom: 20px;
	padding-top: 5px;
	width: 720px;
}
.details {
	float: left;
	margin-right: 38px;
	width: 428px;
}
#experience .role {
	border: 0;
	float: left;
	line-height: 18px;
	margin: 0;
	padding: 0;
}

/* misc. 
--------------------------------------------- */

hr, .hide {
	display: none;
	}
a img {
	border: none;
	}

/* self-clear floats */

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }