/*************************************************************************************************
 * 960.gs (www.960.gs) 
 *************************************************************************************************/
/* reset.css */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
/* 960.css */
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}

/*************************************************************************************************
 * application styles 
 * @author Fontaine Shu
 * #1A1A26
 * #4D5059
 * #80838C
 * #D7D7D9
 * #9C9FA6
 *************************************************************************************************/
/*--- GENERAL ----------*/
body {
	text-align: center;
	font: normal 13px "Trebuchet MS", "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #4D5059;
	background: #1A1A26;
}

h1 { }
h2 { font-size: 120px; display: block; color: #9C9FA6; position: absolute; bottom: -35px; right: -10px; letter-spacing: -8px; }
h3 { padding: 10px 20px; font-size: 20px; color: #80838C; }
h4 {}
h5 {}
h6 {}

p { padding: 0px 20px 20px; }
p.footnote { font-size: 11px; color: #888; }

a, a:visited, a:hover { text-decoration: none; color: #111; /*#3F97FF#EF952C*/; }
a:hover { text-decoration: underline; color: #7FB9FF/*#3F97FF#EF952C*/; }
/*a.external { border-bottom: 1px dotted #66AF41#EF952C; }
a.external:hover { text-decoration: none; }*/


#page-container {
	padding: 70px 0px 65px;
	background: #fff;
	border: 1px solid #9C9FA6;
	border-bottom: 2px solid #9C9FA6;
	border-right: 2px solid #9C9FA6;
	text-align: left;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	position: relative;
	min-height: 200px;
	font-size: 14px;
}


/*--- HEADER ----------*/
#header {
	margin-top: 10px;
	position: relative; z-index: 5;
	height: 58px; 
}
	#header h1 a { display: block; color: #D7D7D9; }
	#header h1 a:hover { text-decoration: none; color: #D7D7D9; }
	#header h1 span { position: absolute; text-transform: lowercase; z-index: 1; }
	#header h1 span#portfolio { font-size: 77px; top: -10px; left: -10px; letter-spacing: -2px; }
	#header h1 span#fontaine { font-size: 59px; top: 47px; left: 98px; letter-spacing: -2px; color: #1A1A26; }
	#header h1 span#of { font-size: 25px; top: 68px; left: 64px; color: #1A1A26; }

ul#nav { position: absolute; bottom: 5px; right: 8px; }
	ul#nav li { 
		margin-left: 2px; 
		float: left; 
		text-align: center; 
		font-size: 16px; 
	}
	ul#nav a, ul#nav a:visited { 
		padding: 5px 15px; 
		display: block; 
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px; 
		color: #fff;
		text-shadow: 1px 1px 1px #888;
	}
	ul#nav a:hover { background-color: #D7D7D9; color: #4D5059; text-decoration: none; text-shadow: none; }
	ul#nav a:active, ul#nav li.selected a, ul#nav li.selected a:hover { text-decoration: none; background-color: #80838C; color: #fff; }


/*--- FOOTER ----------*/
#footer { 
	margin-top: 20px; margin-bottom: 10px;
	text-align: right; 
	font: normal 12px 'Lucida Grande', Tahoma, Helvetica, sans-serif;
	background: #D7D7D9;
	border: 1px solid #80838C;
	border-bottom: 2px solid #80838C;
	border-right: 2px solid #80838C;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
	#footer ul.social_networks { padding: 10px; float: left; }
	#footer ul.social_networks li { padding: 0 10px; float: left; text-align: center; }
	#footer ul.social_networks a { color: #1A1A26; }
	#footer .rights { padding: 10px 20px; }


/*--- HOMEPAGE ----------*/
#homepage-container {
	margin-top: 200px;
	text-align: left;
	position: relative;
	height: 180px;
	font-weight: normal;
	color: #D7D7D9;
}
	#homepage-container h1 span { position: absolute; text-transform: lowercase; }
	#homepage-container h1 span#portfolio { font-size: 90px; top: 5px; left: 0px; letter-spacing: -2px; }
	#homepage-container h1 span#fontaine { font-size: 75px; top: 70px; left: 120px; letter-spacing: -3px; color: #9C9FA6; }
	#homepage-container h1 span#of { font-size: 30px; top: 100px; left: 75px; color: #9C9FA6; }
	
ul#nav.homepage { margin-top: 105px; float: right; position: static; }
	ul#nav.homepage li { font-size: 18px; }


/*--- ABOUT ----------*/
#about_items { margin-top: 40px; }	
	#about_items ul { margin-left: 60px; list-style: disc; }
	#about_items li { margin-bottom: 15px; }

#about { margin-top: 10px; }
#about p { line-height: 20px; } 
#about img { padding-left: 15px; float: right; }


/*--- WORK ----------*/
#work_items { margin: auto; width: 900px; }
	#work_items .grid_5, #work_items .grid_10 { margin-bottom: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #D7D7D9; }
	#work_items h3 { padding: 5px 10px; color: #1A1A26; font-weight: normal; font-size: 16px; }
	#work_items a { display: block; }
	#work_items a:hover { text-decoration: none; }
	#work_items .description { margin: 0px 5px 5px; padding: 5px 0px; background: #fff; position: relative; }
	#work_items .info { position: absolute; bottom: 0px; left: 0px; background: #000; overflow: hidden; height: 0px; }
	#work_items dl { padding: 5px; font-size: 11px; }
	#work_items dt { padding: 0px 6px 0px 0px; width: 70px; text-align: right; color: #d7d7d9; float: left; clear: left; }
	#work_items dd { color: #eaeaea; width: 184px; float: left; }
	#work_items dd a { color: #8FC5FF; }

#work_details { text-align: left; }
#work_details h3 { padding: 0; }

#work_info { margin-top: 20px; margin-right: 10px; padding: 10px 0px; font-size: 14px; float: left; width: 200px; }
#screenshots_wrapper { overflow: auto; float: left; width: 750px; }
	#screenshots_wrapper p { padding: 0; margin-bottom: 15px; text-align: center; font-size: 12px; }

/* non-ajax rendering */
#work_details.work_details_page { padding: 0px 20px 20px; text-align: center; }
#work_details.work_details_page h3 { text-align: left; }
#work_details.work_details_page #work_info { margin: 0px; padding: 10px 0px; width: auto; float: none; text-align: left; font-size: 12px; }
#work_details.work_details_page #screenshots_wrapper { margin: 10px auto 20px; float: none; }

#screenshots.screens1 { width: 750px; }
#screenshots.screens2 { width: 1500px; }
#screenshots.screens3 { width: 2250px; }
#screenshots.screens4 { width: 3000px; }
#screenshots.screens5 { width: 3750px; }
#screenshots.screens6 { width: 4500px; }
#screenshots li { float: left; }


/*--- OVERLAY ----------*/
#overlay-bg { position: absolute; z-index: 99998; top: 0px; left: 0px; width: 100%; height: 100%; display: none; }
#overlay-close { position: absolute; top: 10px; right: 15px; color: #333; }
	#overlay-close:hover { text-decoration: none; }
#overlay-contents { padding: 10px; width: 960px; }

#overlay { margin-left: -500px; position: absolute; z-index: 99999; top: 20px; left: 50%; display: none; }
#overlay td { background-image: url(../img/modal-sprite.png); }
td.top-left, td.top-right, td.bottom-left, td.bottom-right { width: 10px; height: 10px; font-size: 0px; line-height: 0px; }

td.bottom-middle, td.top-middle { 
	font-size: 0px; 
	line-height: 0px; 
	background-position: center bottom; 
	background-repeat: repeat-x;
}
td.middle-left, td.middle-right { background-position: right top; background-repeat: repeat-y; }
td.top-left { background-position: left top; }
td.top-right { background-position: left -10px; }
td.bottom-left { background-position: left -20px; }
td.bottom-right { background-position: left -30px; }

#overlay td.middle-middle { position: relative; background: #f7f7f7; }


/*--- PHOTOGRAPHY ----------*/
#photo_menu { margin-top: 30px; text-align: center; font-size: 14px; }
#photo_menu h3 { margin: 3px 0px 3px 20px; padding: 10px; font-size: 16px; background-color: #80838C; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#photo_menu a { margin: 3px 0px 3px 20px; padding: 10px; font-size: 16px; display: block; color: #80838C; }
	#photo_menu a:hover { text-decoration: none; background-color: #D7D7D9; color: #4D5059; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#photos_container { margin-bottom: 50px; text-align: center; position: relative; }	/* main right side section */
#next { position: absolute; top: 30%; right: -5px; font-size: 80px; text-decoration: none; color: #777; }
#prev { position: absolute; top: 30%; left: -5px; font-size: 80px; text-decoration: none; color: #777; }
#next:hover, #prev:hover { color: #7FB9FF; }
#next.disabled, #prev.disabled, #next.disabled:hover, #prev.disabled:hover { color: #D7D7D9; cursor: default; text-decoration: none; }

#photo_holder { margin: 10px auto; width: 500px; min-height: 338px; text-align: center; }
#photos_list_mask { margin: auto; overflow: hidden; position: relative; height: 90px; width: 637px; }
ul#photos_list { position: absolute; bottom: 0px; left: 0px; width: 910px; }
	ul#photos_list li { margin: 0px 3px; float: left; }
	ul#photos_list a { 
		border: 5px solid #fff; 
		display: block; 
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	}
	ul#photos_list a.selected { border-color: #80838C; }


/*--- CONTACT ----------*/
.contact { margin: 5px 0px 20px; padding-left: 10px; }
	.contact p { margin-bottom: 10px; padding: 0; }
	.contact .social-icon { margin: 0px 11px 11px 0px; display: block; float: left; }
	.contact .footnote { margin-top: 25px; text-align: right; }
	.contact li { font-size: 12px; }

#social_networks { margin-left: 60px; padding-left: 50px; border-left: 1px solid #d7d7d7; }

.form-contact { margin-bottom: 15px; }
	.form-contact input.text, .form-contact textarea { margin-bottom: 8px; padding: 5px; border: 1px solid #d7d7d7; width: 308px; font: normal 12px 'Trebuchet MS', 'Lucida Grande', Tahoma, Helvetica, sans-serif; color: #888; }
	.form-contact input.text:hover, .form-contact textarea:hover, 
	.form-contact input.text:focus, .form-contact textarea:focus { color: inherit; }
	.form-contact input.submit { 
		padding: 2px 20px; 
		float: right; 
		border: 0; 
		background-color: #D7D7D9; 
		color: #4D5059; 
		font: normal 14px 'Trebuchet MS', 'Lucida Grande', Tahoma, Helvetica, sans-serif; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px; 
	}
	.form-contact input.submit:hover { background-color: #9C9FA6; color: #fff; cursor: pointer; }
	.form-contact p.success, .form-contact p.error { padding: 0; float: left; }
	.form-contact p.error { padding-bottom: 8px; font-size: 12px; }


/*--- MISC ----------*/
.success { color: #19CF21 !important; }
.error { color: #EF0E17 !important; }
input.error, textarea.error { border-color: #EF0E17 !important; }