/*colors
dark blue - 31353e
blue - 445978
light blue - b4dedd
white - ffffff
gray - 999ca1
dark gray - 696b6f
*/

/* html5 display rule */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display:block;
}

/*
@font-face {
    font-family: 'DIN1451StdEngschrift';
    src: url('../fonts/dinengschriftstd-webfont.eot');
    src: url('../fonts/dinengschriftstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dinengschriftstd-webfont.woff') format('woff'),
         url('../fonts/dinengschriftstd-webfont.ttf') format('truetype'),
         url('../fonts/dinengschriftstd-webfont.svg#DIN1451StdEngschrift') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, a, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html{
	background-color: #ffffff;
	font-family:Century Gothic, Arial, Helvetica, sans-serif;
	font-size:11pt;
}

a {
	text-decoration:none;
	color:white;
}

a:hover {
	color:#999ca1;
}

ol, ul {
	list-style: none outside none;	
}

body{

}

.table {
	display:table;
	margin: 0 auto;
}

.fontsize20 {font-size:20pt;}
.fontsize18 {font-size:18pt;}
.fontsize16 {font-size:16pt;}
.fontsize15 {font-size:15pt;}
.fontsize14 {font-size:14pt;}
.fontsize13 {font-size:13pt;}
.fontsize12 {font-size:12pt;}
.fontsize11 {font-size:11pt;}
.fontsize10 {font-size:10pt;}

.thumbnail {
-webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;	
}

.thumbnail_wrapper {
	overflow:hidden;
}

div#wrapper {
}










/************************ HEADER **************************/			
div#header_wrapper {
	position:fixed;
	top:0px;
	width:100%;
	z-index:1000;
}

div#header_main_wrapper {
	background-color:#31353e;
	height:75px;
	padding: 0px 50px 0 50px;
}

div#header_main {
	width:1024px;
	margin:0 auto;
}

div#header_main_title {
	float:left;
	margin-top:14px;
}

div#header_main_title p#title{
	font-size:26pt;
	line-height:22pt;
	font-weight:bold;
}

div#header_main_title p#title a:hover{
	color:#b4dedd;
}

div#header_main_title p#subtitle{
	color:#999ca1;
	font-size:12pt;
}

nav#header_main_nav {
	text-align:right;
	line-height:75px;
}

nav#header_main_nav ul{
	
}

nav#header_main_nav ul li{
	display:inline;
}

nav#header_main_nav ul li + li:before{
    content: " | ";
	padding:0 3px;
	color:#999ca1;
}


div#header_sub {
	background-color:#445978;
	height:12px;
}










/************************ MAIN CONTENT **************************/
div#main_content_wrapper {
	margin-top:100px;
}

div.main_content_page_wrapper {
}

div.main_content_page {
}










/************************ MAIN CONTENT - HOMEPAGE **************************/
div#main_content_home {
	width:820px;
	margin:0 auto;
}

div#main_content_home div#feature_work_header {
  background-color:#445978;
	height:40px;
  padding:0px 10px;
}

div#main_content_home div#feature_work_header p{
  color:#FFFFFF;
  font-size:13pt;
  float:left;
  line-height:40px;
}

div#main_content_home div#feature_work_header div#filter_wrapper {
}

div#main_content_home div#feature_work_header div#filter_wrapper ul{
	text-align:right;
}

div#main_content_home div#feature_work_header div#filter_wrapper ul li{
	display:inline-table;
  line-height:10px;
  position:relative;
  margin-top:16px;
}

div#filter_wrapper ul li a{
	background: url("../img/home/filter_gray.png") no-repeat scroll 0 100% transparent;
  display: block;
  height: 10px;
    overflow: hidden;
    text-indent: -9000px;
    width: 10px;
  	padding:0px 2px;
}

div#main_content_home div#feature_work_header div#filter_wrapper ul li.hovered a{
	background: url("../img/home/filter_lightblue.png") no-repeat scroll 0 100% transparent;
}

div#main_content_home div#feature_work_header div#filter_wrapper ul li.selected a{
	background: url("../img/home/filter_white.png") no-repeat scroll 0 100% transparent;
}

div#main_content_home div#feature_work_header div#filter_wrapper ul li a{
	background: url("../img/home/filter_gray.png") no-repeat scroll 0 100% transparent;
}

div#main_content_home div#box_wrapper {
	color:#445978;
border-left:solid 10px;
border-right:solid 10px;
border-bottom:solid 10px;
-webkit-box-shadow: 5px 5px 5px #999ca1;
  box-shadow: 5px 5px 5px #999ca1;
}

div#main_content_home div#feature_work_progress {
width:100%;
text-align:center;
float:left;
margin-top:260px;
}

div#main_content_home div#feature_work_progress progress {
}

div#main_content_home div#feature_work_wrapper {
  background-color:#F7F7F7;
  height:540px;
  text-align:center;
}

div#main_content_home div#feature_work_wrapper div.feature_work{
position:absolute;
width:800px;
height:540px;
}

div#main_content_home div#feature_work_wrapper div.feature_work img{
	margin-top:0px;
	margin-left:0px;
	width:800px;
	height:540px;
}

div#main_content_home div#feature_work_wrapper div.feature_work img:hover{
margin-top:-20px;
margin-left:-30px;
width:860px;
height:580px;
}

div#main_content_home div#feature_work_wrapper div#show{
  display:block;
}

div#main_content_home div#feature_work_wrapper div#hide{
  display:block;
}

div#main_content_home div#feature_work_wrapper img{
  border:0;
}

div#main_content_home div#feature_work_captions {
  padding:12px 15px 0px 15px;
}

div#main_content_home div#feature_work_captions p#title{
	color:#999ca1;
	font-weight:bold;
  font-size:14pt;
  text-transform:uppercase;
}

div#main_content_home div#feature_work_captions p#subtitle{
	color:#445978;
  font-size:11pt;
}










/************************ MAIN CONTENT - ABOUT **************************/	
div#main_content_about img#portrait {	
  float:left;
}

div#main_content_about div#about_me {
	color:#999ca1;
  padding-top:30px;
  
}

div#main_content_about div#about_me ul{
}

div#main_content_about div#about_me ul li{
	background-color:#31353e;
  display:table;
  margin: 0 0 2px 0;
  padding: 5px 12px 5px 12px;
}

div#main_content_about div#about_me ul li a{
	color:#b4dedd;
}

div#main_content_about div#about_me ul li a:hover{
	color:white;
}










/************************ MAIN CONTENT - CONTACT**************************/	










/************************ MAIN CONTENT - WORK **************************/
div#main_content_work {
	width:1024px;
	margin:0 auto;
}

nav#work_filter_nav {
	width:250px;
float:left;
}

nav#work_filter_nav ul{
}

nav#work_filter_nav ul li.category_filter{
	border-bottom:1px solid #999ca1;
	cursor:pointer;
	color:#31353e;
	padding:3px 0px 3px 15px;
}

nav#work_filter_nav ul li.category_filter.selected{
	font-weight:bold;
	background-color:#F8F8F8;
}

nav#work_filter_nav ul li.category_filter:hover{
	background-color:#F8F8F8;
}

nav#work_filter_nav ul li.project_filter{
	padding:1px 0px 1px 15px;
	font-weight:normal;
font-size:10pt;
}

nav#work_filter_nav ul li.project_filter.selected{
}

nav#work_filter_nav ul li.project_filter.selected a{
	color:#31353e;
}

nav#work_filter_nav ul li.project_filter a{
	color:#999ca1;
}

nav#work_filter_nav ul li.project_filter a:hover{
	color:#31353e;
}

div#work_content_wrapper {
	width:765px;
float:right;
}

div#work_thumbnail_wrapper {
}

div#work_thumbnail_wrapper ul{
display:inline;
}

div#work_thumbnail_wrapper ul li{
width:245px;
margin:0px 0px 15px 10px;
float:left;
cursor:pointer;
}

div#work_thumbnail_wrapper ul li div.work_thumbnail_image_wrapper{
width:235px;
height:173px;
background-color:#F7F7F7;
border:solid 5px #445978;
-webkit-box-shadow: 5px 5px 5px #999ca1;
box-shadow: 3px 3px 3px #999ca1;
}

div#work_thumbnail_wrapper ul li div.work_thumbnail_image_wrapper img{
	width:235px;
	height:173px;
}

div#work_thumbnail_wrapper ul li div.work_thumbnail_image_wrapper img:hover{
margin-top:-4px;
	width:245px;
	height:180px;
}

div#work_thumbnail_wrapper ul li p.title{
	font-weight:bold;
	color: #999ca1;
font-size:10pt;
text-transform:uppercase;
padding-top:5px;
}

div#work_thumbnail_wrapper ul li p.subtitle{
	color:#445978;
	font-size:10pt;
}










/************************ MAIN CONTENT - WORK DETAIL **************************/
div#work_detail_wrapper {
	margin:0 0 0 10px;
}

div#work_detail_wrapper div.work_detail_coverimage_wrapper{
height:340px;
background-color:#F7F7F7;
}

div#work_detail_wrapper div#info_main {
color:#999ca1;
margin:10px 0 20px 0;
}

div#work_detail_wrapper div#info_main p#title{
font-weight:bold;
color:#31353e;
font-size:15pt;
text-transform:uppercase;
}

div#work_detail_wrapper div#info_main p#subtitle{
font-size:10pt;
text-transform:uppercase;
}

div#work_detail_wrapper div#info_details {
margin:0px 0px 25px 0px;
width:500px;
}

div#work_detail_wrapper div#info_details p {
color:#696b6f;
margin:0px 0 10px 0;
}

/*
div#work_detail_wrapper div#images {
}

div#work_detail_wrapper div#images ul{
}

div#work_detail_wrapper div#images ul li{
margin:10px 0 10px 0;
}

div#work_detail_wrapper div#images ul li + li:before {
	padding:0px 0px;
}
*/

div#work_detail_wrapper div#buttons {
}

div#work_detail_wrapper div#buttons p.work_detail_button {
	color:white;
	background-color:#999ca1;
	font-size:10pt;
	text-transform:uppercase;
	display:inline-block;
padding:5px 10px 5px 10px;
cursor:pointer;
}

div#work_detail_wrapper div#buttons p.work_detail_button:hover {
	color:#31353e;
}

div#work_detail_wrapper div#buttons p#launch {
margin-right:10px;
}

div#work_detail_wrapper div#buttons p#screenshots {
}