/*
Regular green - #8cc63f
Compensated for green on black - #87c133

obfuscated email class is 'email'
*/



* {
	margin: 0;
	padding: 0;
	/*line-height: 1;*/
}

body {
	background: url(assets/images/bg2.png) #333333;
	color: #e5e5e5;
	font: normal 62.5% Helvetica, Arial, sans-serif;
	margin-bottom: 5em;
	/*font: normal 62.5% Georgia, Times, serif;*/
}

img {
	border: none;
}



/* ------ TYPOGRAPHY ------ */

h1 {
	color: #ffffff;
	font-family: Georgia, Times New Roman, serif;
	font-size: 3.2em;
	font-weight: normal;
	letter-spacing: 0.01em;
	line-height: 1.3em;
} /* for headline on home page */

h3 {
	color: #8cc63f;
	font-family: Georgia, Times New Roman, serif;
	font-size: 2em;
	font-weight: normal;
} /* page/heading title, eg. 'Work' or 'Testimonials' */

h4 {
	color: #e5e5e5;
	font-family: Georgia, Times New Roman, serif;
	font-size: 1.5em;
	font-style: italic;
	font-weight: normal;
} /* italic item heading, eg. project title */

h5 {
	color: #888888;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
}

p {
	font-size: 1.3em;
	line-height: 1.3em;
}

li {
	list-style-type: none;
	font-size: 1.3em;
}

a {
	color: #e5e5e5;
}

span.green {
	color: #8cc63f;
}



/* ------ STRUCTURE ------ */

#wrap {
	background: #333333;
	border-top: 2px solid #8cc63f;
	width: 540px;
	margin: auto;
	margin-top: 3em;
	padding: 30px 30px 40px 30px;
}

.content-block {
	border-bottom: 1px solid #666666;
	margin-bottom: 15px;
	padding-bottom: 18px;
}

.content-block h3, .work-content-block h3 {
	margin-bottom: 10px;
}

.content-block h4 {
	margin-bottom: 2px;
}

.content-block.last {
	border: none;
	margin: 0;
	padding: 0;
}


/* ------ HEADER ------ */

#home-header {
	/*background: url(images/raindrops1.jpg) no-repeat;*/
	border-bottom: 1px solid #666666;
	margin-bottom: 15px;
	padding-bottom: 18px;
	position: relative;
	height: 175px;
}

#header-trans {
	background: white;
	bottom: 18px;
	height: 100px;
	left: 0;
	position: absolute;
	width: 540px;
	z-index: 1;
	
	opacity: 0.3;
	filter: alpha(opacity=30);
	-khtml-opacity: 0.3;
	-moz-opacity:0.3;
}

#home-header .logo {
	position: absolute;
	bottom: 50px;
	left: 15px;
	z-index: 10;
}

#home-header #main-nav {
	float: right;
	bottom: 45px;
	right: 15px;
	position: absolute;
	z-index: 10;
}

#home-header #main-nav li {
	background: url(assets/images/home-line-break.gif) no-repeat top right;
}

#home-header #main-nav li a:hover, #home-header #main-nav li a:hover em {
	color: #444444;
}

#home-header li a.active {
	color: #111111;
	font-weight: bold;
}
	
#home-header li a.active:hover, #home-header li a.active:hover em {
	color: #111111;
}


/* other header
*/
#header {
	border-bottom: 1px solid #666666;
	height: 27px;
	margin-bottom: 15px;
	padding-bottom: 18px;
	overflow: hidden;
}

.logo {
	float: left;
	height: 20px;
	width: 99px;
}

#main-nav {
	float: right;
	padding: 0;
	margin: 0;
}

#main-nav li {
	float: left;
	margin-right: 20px;
	padding-right: 20px;
	background: url(assets/images/line-break.gif) no-repeat top right;
}

#home-header #main-nav li.last, #main-nav li.last {
	margin: 0;
	padding: 0;
	background: none;
}

#main-nav li a {
	color: #ffffff;
	float: left;
	text-decoration: none;
	padding: 0;
	margin: 0;
}

#main-nav em {
	display: block;
	font-size: 0.8em;
	font-style: normal;
}



#main-nav li a:hover, #main-nav li a:hover em {
	color: #b3b3b3;
}

#main-nav .active {
	color: #8cc63f;
}

#main-nav .active:hover, #main-nav .active:hover em {
	color: #8cc63f;
}



/* ------ HOME PAGE ------ */

#headline {
	margin-bottom: 20px;
}

.project {
	float: left;
	width: 263px;
	position: relative;
}

.project.right {
	float: right;
}

.project img {
	margin-bottom: 7px;
}

.project h5 {
	margin-bottom: 7px;
}

p.project-extract {
	border-top: 1px solid #666666;
	padding-top: 8px;
}

.trans {
	background:url("assets/images/thumb-trans.png") no-repeat 0 160px;
	display:block;
	height:150px;
	width: 263px;
	left:0;
	position:absolute;
	top:0;
}

.screenshot {
	/*width: 540px;
	height: 327px;*/
	position: relative;
	/*margin-bottom: 20px;*/
}

.screenshot-overlay {
	background: url("assets/images/screenshot-overlay.png") no-repeat 0 327px;
	display: block;
	height: 327px;
	left: 0;
	position: absolute;
	top: 0;
	width: 540px;
}

.screenshot-overlay-xl {
	background: url("assets/images/screenshot-overlay-xl.png") no-repeat 0 380px;
	display: block;
	height: 380px;
	left: 0;
	position: absolute;
	top: 0;
	width: 540px;
}

.project a:hover, .screenshot a:hover {
	background-position: 0 0;
}

.bum a:hover {
	background-position: 0 0;
}



/* ------ WORK PAGE ------ */

/*.work-content-block {
	border-bottom: 1px solid #666666;
	margin-bottom: 28px;
	padding-bottom: 25px;
}*/

.work-content-block h4 {
	margin-bottom: 2px;
}

.work-content-block p {
	color: #888888;
	font-size: 1.2em;
	font-weight: bold;
}

.work-content-block .project {
	border-bottom: 1px solid #666666;
	margin-bottom: 28px;
	padding-bottom: 25px;
}



/* ------ PROJECT PAGES ------ */

h3.work-title {
	margin-bottom: 3px;
}

.responsibilities {
	margin-bottom: 20px;
}

.project-img {
	margin-bottom: 8px;
}

.project-img.last {
	margin-bottom: 20px;
}


/* jquery viewer
*/
#viewer {
	width: 540px;
	position: relative;
}

#panels {
	width: 540px;
	height: 405px;
	margin-bottom: 8px;
	overflow: hidden;
	position: relative;
	float: left;
}

#panels.last {
	margin-bottom: 20px;
}

#slider {
	width: 2700px;
	height: 405px;
	position: relative;
}

#slider div {
	float: left;
	position: relative;
}

/* larger 4:3 slider dimensions
*/
#plural-panels {
	width: 540px;
	height: 405px;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
	float: left;
}

#plural-slider {
	width: 2700px;
	height: 405px;
	position: relative;
}

#plural-slider div {
	float: left;
	position: relative;
}
/**/

#slider-nav {
	background: #111111;
	padding: 6px 10px 5px 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
	
#slider-nav li {
	display: inline;
	font-size: 1.2em;
	padding: 5px;
}

#slider-nav li a {
	text-decoration: none;
}

ul#slider-nav a:hover {
	color: #b3b3b3;
}

ul#slider-nav a.selected {
    color: #8cc63f;
}





/* ------ SERVICES PAGE ------ */

.service {
	border-bottom: 1px solid #444444;
	margin-top: 20px;
	padding-bottom: 20px;
}

.service.last {
	border: none;
	padding: 0;
}

.service h4 {
	color: #8cc63f;
	margin-bottom: 5px;
}

p.related-projects {
	color: #888888;
	font-weight: bold;
	margin-top: 10px;
}

.services-thumbs {
	margin-top: 10px;
	/*float: left;*/
}

.services-thumbs li {
	display: inline;
	float: left;
	height: 71px;
	margin-right: 10px;
}

.services-thumbs img {
	border: 2px solid #333333;
}

.services-thumbs li img:hover {
	border: 2px solid #8cc63f;
}



/* ------ WORK MENU ------ */

#work-menu {
	background: #111111;
	color: #666666;
	width: 540px;
	margin: auto;
	padding: 30px 30px 40px 30px;
}

#work-menu h4 {
	color: #c6c6c6;
	margin-bottom: 15px;
}

#work-menu a:hover {
	color: #b3b3b3;
}

.work-btns {
	float: left;
	margin-right: 40px;
}

.work-btns li {
	margin-bottom: 5px;
}

.work-btns li a {
	color: #666666;
	text-decoration: none;
}



/* ------ TESTIMONIAL ------ */

#testimonial {
	background: #111111;
	color: #666666;
	width: 540px;
	margin: auto;
	padding: 30px 30px 40px 30px;
}

#testimonial h4 {
	color: #c6c6c6;
	margin-bottom: 15px;
}



/* ------ CLEARFIX & UTILITIES ------ */

.clear {
	clear: both;
}

/*.last {
	border: none;
	margin: 0;
	padding: 0;
}*/



/* ------ FOOTER ------ */

#footer {
	background: #000000;
	color: #222222;
	width: 540px;
	/*height: 100px;*/
	margin: auto;
	padding: 30px 30px 40px 30px;
}

ul#contact-details {
	margin-bottom: 10px;
}

ul#contact-details li {
	display: inline;
	margin-right: 10px;
}

#footer p {
	font-size: 1.1em;
}

#footer .email {
	color: #222222;
	text-decoration: none;
}

#footer .email:hover {
	color: #666666;
}