@media screen
{
	html { height: 100%; }
	body { 
		font-family:"Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:0.821em;
		background-color:#fdfdfd;
		color:#666;
		font-weight:400;
		line-height:199%;
		margin: 0; 
		height: 100%; 
	}
	h1 { letter-spacing:-0.055em; font-weight:300; line-height: 120%; font-size:3.7em; color: #444; padding: 0; padding-bottom: 0.1em; margin: 10px 0 10px 0; }
	h2 { font-weight: 300; font-size: 175%; line-height: 140%; color: #000; padding: 0; padding-bottom: 0.45em; }
	h3 { font-weight: 300; font-size: 130%; line-height: 140%; color: #000; padding-top: 0.4em; padding-bottom: 0.05em; }
	
	em, strong { font-style: normal; color: #0c0c0c; font-weight: 700; font-size: 100%; }
	
	::selection { background: #c0c0c0; color: #000; }
	::-moz-selection { background: #c0c0c0; color: #000; }
	
	img, img a, img a:visited { border: none; }
		
	a { text-decoration: none; color: #2ab9ee; border-bottom:solid #2ab9ee 1px; }
	a:visited {	text-decoration: none;	color: #0b7197; border-bottom:solid #0b7197 1px; }
	a:hover { text-decoration: none; color: #000; border-bottom:solid #0b7197 1px; }
	a:active { text-decoration: none; color: #fff; border-bottom:solid #0b7197 1px; background-color: #2ab9ee; }
	
	ul { list-style-type: none; margin: 0; padding: 0; } 
	li a, li a:visited {
		display: block; border-bottom: 0; width: 100%;
		padding: 0.8em 3.6em 0.8em 2em; margin: 0 0 0 0; text-decoration: none; color: #666; text-align: right; float: right;
	}
	li a:hover { text-decoration: none; color: #000; border-bottom: 0;
		background-color: #fafafa; animation-name: def; animation-duration: 0.34s; }
	
	body.mycv li.mycv, body.myband li.myband, body.usability li.usability, body.theend li.theend {  }
	body.mycv li.mycv a, body.myband li.myband a, body.usability li.usability a, body.theend li.theend a { 
		text-decoration: none; color: #2ab9ee; font-weight: 700; background-color: #fafafa; 
	}
	
	.small { font-size: 94%; }	
	#toplogo, #toplogo a, #toplogo a:active { width: 76px; height: 30px; padding-bottom: 3em; padding-right: 2.6em; border: none; float: right; }
	
	#left { width: 21%; min-height: 100%; height:auto !important; height: 100%; top: 0; left: 0; bottom: 0; margin: 0; float: left; background-color: #fafafa; }
	#right { width: 79%; height: 100%; overflow-y: scroll; overflow-x:hidden; top: 0; right: 0; bottom: 0; margin: 0; float: right; }
	
	nav { float: right; width: 120px; padding-top: 55px; font-family:"Titillium Web", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; }
	
	#header { float: left; width: 770px; margin-left: 50px; padding-bottom: 35px; padding-top: 55px; }
	#article { clear: left; width: 770px; margin-left: 50px; padding-bottom: 30px; }
	
	respmenu { display: none; }
	respbut { display: none; }
}

@keyframes def {
    0%   { background-color: #fafafa; color: #666; }
	50%   { background-color: #f1f1f1; color: #222; }
    100% { background-color: #fafafa; color: #000; }
}

@media screen and ( max-width : 1160px ) 
{ 
	#left { width: 200px; } 
	#right { width: calc(100% - 200px); }

	#header { width: 80%; padding-right: 20%; }
	#article { width: 80%; padding-right: 20%; } 
}

@media screen and ( max-width : 720px )
{
	body { background-color: #f6f6f6; margin: 0; padding: 0; }
	#left { display: none; }
	#right { float: none; overflow: auto; width: 98%; height: auto; margin-left: auto; margin-right: auto; background-color: #fdfdfd; border-radius: 0 0 10px 10px; }
	
	nav { display: none; }
	
	#header { display: none; }
	#article { width: 88%; padding: 0 6% 32px 6%; margin: 0; }
	
	p { font-size: 96%; }
	.topmo { width: 80px; padding: 0; margin-left: -8px; }
	
	respmenu { display: inline; }
	respbut { display: block; }

    li a, li a:visited { 
		clear: both; 
		position: relative; 
		width: 94%; 
		z-index: 10000; 
		display: block;
		border: none; 
		list-style-type: none; 
		float: none;  
		text-align: left;
		padding: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		padding-left: 6%;
		margin: 0; 
		font-family:"Titillium Web", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-image: url(/imgs/mob-arr.png);
		background-repeat: no-repeat;
		background-position: right;
	}
	
	li a:hover { border: none; }
	li a:active { border: none; }
	
	body.mycv li.mycv, body.myband li.myband, body.usability li.usability, body.theend li.theend {  }
	body.mycv li.mycv a, body.myband li.myband a, body.usability li.usability a, body.theend li.theend a { 
		border: none;
	}
	
	h1 { font-size: 3.1em; }
	h2 { font-size: 150%; }
	h3 { font-size: 120%; }
}

@media screen and ( max-width : 400px )
{
	h1 { font-size: 2.8em; }
	h2 { font-size: 127%; }
	h3 { font-size: 112%; }
}

@media print
{
	#left, #right { display: none; }
}