body > header > h1 > a {
	background-position:0 -97px;
}

body > header > h1 > a:hover {
	background-position:0 0;
}

body > header > nav {
	border-bottom: 1px solid #a1692e; 
}

body > header > nav ul li > a:hover {
	color : #a1692e;
}

body > header > nav ul img
{
	opacity:0.4;
	transition: opacity 0.5s;
}

body > header > nav ul img:hover
{
	opacity:1.0;
	transition: opacity 0.5s;
}

body > footer 
{            
	border-top: 1px solid #a1692e;
}

/**  **/

#body > article {
	width:680px;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
	color:#6c6c6c;
	font: 1.0em  'Roboto Condensed', Arial, Tahoma, Verdana, sans-serif;
}

#body > article > h1
{
	font: italic 2.1em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	text-align:center;

}

ul.shortcuts
{
	text-align:center;
	margin:10px;
}

ul.shortcuts li
{
	 display:inline;
	 font: italic 1.2em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	 	
}

ul.shortcuts li:not(:first-child):before
{
	content:" | ";
}

ul.shortcuts li a 
{
	color: #5c5c5c;
	text-decoration: none;
}

ul.shortcuts li a:hover 
{
	color: #a1692e;
	border-bottom: 1px dotted #a1692e;
}

ul#portfolio-list > li
{
	margin: 20px 0;
}

#body > article ul
{
   list-style:none;   	
}

ul#portfolio-list > li > h1, ul#resume h1
{
	font: italic 2.0em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	color:#a1692e;
	width:100%;
	border-bottom: 2px solid #a1692e;
	margin-bottom : 20px;
}

ul#portfolio-list > li > ul, ul#resume
{
	margin-bottom:60px;
}

ul#portfolio-list > li > ul > li > section, ul#portfolio-list > li > ul > li > div, ul#resume p, ul#resume ul, #portfolio-collapseAll a
{
	 background: url("../../../design/img/bg_pattern_dark.png") repeat scroll left top #000000;
	 border: 1px solid #2A2A2A;
	 padding:10px;
	 margin:30px 0 0 0;
}  

ul#portfolio-list > li > ul > li > section > h1
{	 
	 	margin:0 0 20px 0;
	 	font-size:1.5em;
}

ul#portfolio-list > li > ul > li > section > h1 span
{
	display:block;
	font: italic 1.1em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	opacity:0.4;
	float:right;
}

ul#portfolio-list > li > ul > li
{
	text-align:justify;
	font-size: 0.9em;
}            

ul#portfolio-list div.portfolio_item_desc {
	margin-bottom: 20px;
}

ul#portfolio-list div.portfolio_item_desc img
{
	margin: 0 10px 0 0;
	float:left;
	/*padding-top:10px;*/
}

ul#portfolio-list div.portfolio_item_desc p
{
	/*margin-left: 110px;*/         

}

ul#portfolio-list div.more {
	border-top: 1px dotted #222;
	padding: 10px;

}

ul#portfolio-list div.more pre {
	overflow:hidden;
	text-shadow: none;
	background-color:#111;
	border:1px solid #111;
	margin:10px 0;
	margin-bottom:20px;
	padding:5px;
	font-size:0.75em;
	line-height:0.8em;
	white-space:pre;
	
	-moz-box-shadow: inset 0px 0px 10px 0px #000000;
	-webkit-box-shadow: inset 0px 0px 10px 0px #000000;
	-o-box-shadow: inset 0px 0px 10px 0px #000000;
	box-shadow: inset 0px 0px 10px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=90, Strength=20);	
}

ul#portfolio-list div div img {
	float:left;
	padding-top:3px;
	opacity:1.0;
}

ul#portfolio-list div div a.link_video img {
	float:none;
	opacity:0.6;
}

ul#portfolio-list .more p img, video {
	margin: 20px auto;
	margin-bottom:0;
	padding:5px;
	opacity:1;
	float:none;
	display:block;
	text-align:center;
	border: 1px solid #272727;
}

ul#portfolio-list .more p a.link_video, video, ul#portfolio-list div div a.link_video {
	background:url('../img/video.png') center center no-repeat;
	display:block;
}

ul#portfolio-list .more p a.link_video img{
	opacity:0.65;
	transition: opacity 0.5s;
}

ul#portfolio-list .more p a.link_video img:hover{
	opacity:0.9;
	transition: opacity 0.5s;
}

ul#portfolio-list .more h1
{
	font-size:1.3em;
	margin: 10px 0;
}

ul#portfolio-list .portfolio-more
{                    
	text-align:center;
	font: italic 1.2em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	text-transform : lowercase;
	margin-top: 2px;
	padding:0;
}

ul#portfolio-list .portfolio-more a 
{
	color: #444;
	text-decoration: none;
	display:block;
	width:100%;
	height:20px;
	padding:5px 0;
	transition: 0.5s;
}

ul#portfolio-list .portfolio-more a:hover 
{
	color: #a1692e;
	background-color:#0C0C0C;
	transition: 0.5s;
}

.portfolio-locked h1 {
	color:#444;
}

.portfolio-locked h1:after {
	content:" [LOCKED]";
}

.portfolio-form-locked {
	margin: 0 0 1em;
	padding:1em;
	border: 1px dotted #a1692e;
	text-align:center;
	font-weight:bold;
	font-size:1.1em;
	background-color:#000;
	color: #a1692e;
}

.portfolio-form-locked input {
	border: 1px solid #555;
    background-color: #999;
    font: 0.9em  'Roboto Condensed', Arial, Tahoma, Verdana, sans-serif;
    text-align:center;
    color:#000;
    opacity:0.6;
    transition: opacity 0.5s;

    -webkit-box-shadow: inset 0px 0px 3px 0px #000; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
    box-shadow: inset 0px 0px 3px 0px #000; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}

.portfolio-form-locked input:hover, .portfolio-form-locked input:focus {
    opacity:1.0;
    transition: opacity 0.5s;	
}


.portfolio-input-code 
{
	margin: 0 0.5em;
}

#portfolio-collapseAll {
	position:fixed;
	bottom:40px;
	right:30px;
	padding:0;
	margin:0;
	z-index:10;
}

#portfolio-collapseAll a {
	color:#444;
	text-decoration:none;
	display:block;
	width:100%;
	height:100%;
	padding:10px;
	text-align:center;
	font: italic 1.2em Georgia,"Times New Roman",Times,"Palatino Linotype","Book Antiqua",Palatino,serif;
	text-transform : lowercase;
	transition: 0.5s;
	
}

#portfolio-collapseAll a:hover
{
	color: #a1692e;
	background-color:#0C0C0C;
	transition: 0.5s;
}


ul#portfolio-list .portfolio-locked .more p img {
	display:inline-block;
}


/** Resume **/
ul#resume p, ul#resume ul
{
	font: 1.0em  'Roboto Condensed', Arial, Tahoma, Verdana, sans-serif;
}


#resume p, #resume_skills ul, #resume_softwares ul, #resume_miscellaneous ul {
	font-size:1.2em;
}

#resume li {
	margin: 30px 0;
}


#resume {
	text-align:justify;
}

#resume_experience dd, #resume_education dd {
	margin-top:-7px;
	margin:0 0 0 170px;
}

.resume_year {
	font-family: monospace;
	display:block;
	clear:left;
	float:left;
	letter-spacing : -0.15em;
	font-size:2.3em;
	text-align:right;
	padding-right: 20px;
	width:5em;
	height:3em;
	color:#333;
	margin-top:10px;
}

.resume_project_title {
	display:inline-block;
	font-size:1.8em;
	font-weight:bold;
}

.resume_project_platform {
	margin-left:10px;
	font-size:0.8em;
	color:#4c4c4c;
}

.resume_project_studio {
	color:#2e2e2e;
}

.resume_project_role {
	display:block;
	margin-top:5px;
	font-size:1.4em;
}

#resume_skills ul, #resume_softwares ul, #resume_miscellaneous ul{
	margin-left:15px;
}

#resume_skills li, #resume_softwares li, #resume_miscellaneous li {
	list-style:square outside none;
	padding-left:10px;
	margin:20px;
}

#resume_softwares li, #resume_miscellaneous li {
	line-height:0.1em;
}



/************************************/
/*********** MEDIA QUERIES **********/
/************************************/

@media only screen and (max-width: 995px)
{
	#portfolio-collapseAll {display:none;}
}

@media only screen and (max-width: 750px)
{	  
	body > header,
	body > header > nav,
	body > header > nav ul > li,
	body > header > h1 > a 
	{ height: 45px;}
	
	body > header > nav ul > li
	{	line-height:45px;}
	
	body > header > h1 > a 
	{
		margin-top:0;
		background-position: -18px -112px;
		width:200px;
	}
	body > header > h1 > a:hover 
	{
		background-position: -18px -15px;
	}
	body > header > nav ul li > a
	{ padding: 0 2px;}
	
	body > header > nav ul#menu_left
	{ margin-left:10px;}
	
	body > header > nav ul#menu_right
	{ margin-right:10px;}
	
	body > header > nav ul img
	{ width: 30px;}
	
	#body > article {width:auto;}
	
	ul#portfolio-list video, ul#portfolio-list .more img {max-width:100%; height:auto;}
	
	ul#portfolio-list > li > h1, ul#resume h1 {padding-left:0.2em;}
	
}


@media only screen and (max-width: 570px)   /* small screens */
{
	body { margin: 0 0 24px; }
	
	body > header > h1 > a 
	{ height: 16px;}
	
	body > header
	{
		text-align:center;
		height:auto;		
	} 	
	
	body > header,
	body > header > nav,
	body > header > nav ul > li 
	{
		height:auto;
	}
	
	body > header > nav
	{
	   font-size:0.8em;
	}
	
	body > header > h1
	{
		float: none;
		
	}
		
	body > header > h1 > a 
	{
		margin-top:0;
		background-position: -18px -137px;
		width:200px;
		margin:auto;
		
	}
	body > header > h1 > a:hover 
	{
		background-position: -18px -40px;
	}
	
	body > header > nav { height:auto;}
	  
	body > header > nav ul { padding: 1.1em 0;}
	
	 
	                    
	body > header > nav ul,
	body > header > nav ul > li
	{
	  	line-height:0.2em;
	}
	
	body > header > nav ul img
	{
	   width:20px;
	   margin:0 5px;
	}
	  
	body > header > nav ul#menu_left
	{ margin:auto;}
	
	body > header > nav ul#menu_right
	{
	   margin:auto;
	   float:none;
	   padding:0;
	}
	body > header > nav ul li > a
	{
		padding:0;
	}
	body > header > nav ul li > a:hover
	{
		border:none;	
	}
	
	ul#portfolio-list > li > ul > li > section > h1 span
	{
		font-size:0.8em;
		float:none;
	}
	
	#rss
	{
		background:none;	
	}
	
	#rss span {
		visibility:visible;
	}
	
	body > footer 
	{
		font-size:0.8em;
		height:24px;
		line-height:24px;
	}
	
	footer {white-space : nowrap; overflow:hidden;}
	footer p { padding: none;}
	
	#resume {font-size:0.8em;}
	
	#resume li
	{
		margin:0;
		line-height:1.5em;
		padding-bottom:1.5em;
		
	}
	
	.resume_year 
	{
		float:none;
		height:auto;
		text-align:left;
	}
	
	#resume_experience dd, #resume_education dd
	{
		margin:auto;
	}
	
	
	div#contact {width:auto;}
	
	form#contact_form {padding:10px; margin:10px 0;}
	
	#contact_form input, #contact_form textarea {width:95%}
}