@font-face {
	font-family: 'FontSiteSans-Bold';
	src: url('https://www.ottavianidesign.com/fonts/FontSiteSans-Bold-webfont.eot');
	src: url('https://www.ottavianidesign.com/fonts/FontSiteSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('https://www.ottavianidesign.com/fonts/FontSiteSans-Bold-webfont.woff') format('woff'),
	     url('https://www.ottavianidesign.com/fonts/FontSiteSans-Bold-webfont.ttf')  format('truetype'),
	     url('https://www.ottavianidesign.com/fonts/FontSiteSans-Bold-webfont.svg#webfontGdf73omz') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'FontSiteSans-Roman';
  src: url('https://www.ottavianidesign.com/fonts/FontSiteSans-Roman-webfont.eot');
  src: local('☺'),
         url('https://www.ottavianidesign.com/fonts/FontSiteSans-Roman-webfont.woff') format('woff'), url('https://www.ottavianidesign.com/fonts/FontSiteSans-Roman-webfont.ttf') format('truetype');
}
@font-face {
  font-family: 'FontSiteSans-Light';
  src: url('https://www.ottavianidesign.com/fonts/FontSiteSans-Light-webfont.eot');
  src: local('☺'),
         url('https://www.ottavianidesign.com/fonts/FontSiteSans-Light-webfont.woff') format('woff'), url('https://www.ottavianidesign.com/fonts/FontSiteSans-Light-webfont.ttf') format('truetype');
}
@font-face {
  font-family: 'FontSiteSans-LightItalic';
  src: url('https://www.ottavianidesign.com/fonts/FontSiteSans-LightItalic-webfont.eot');
  src: local('☺'),
         url('https://www.ottavianidesign.com/fonts/FontSiteSans-LightItalic-webfont.woff') format('woff'), url('https://www.ottavianidesign.com/fonts/FontSiteSans-LightItalic-webfont.ttf') format('truetype');
}
*{border:0;margin:0;padding:0;}
body{line-height:1;}
#container{
	margin:0 auto;
	max-width:1500px;
}
h1{
	background: url("https://www.ottavianidesign.com/images/static/logo.png");
	float:left;
	margin:13px 0 0 25px;
	width:220px; height:18px;
	text-indent:-9999px;
}
a{color:#999; text-decoration:none;}
nav{
	float:right;
	margin:10px 25px 0 0;
	font-family:FontSiteSans-Light, Helvetica, Arial, sans-serif;
	font-size:20px;
	color:#999;
}
nav li{
	float:left;
	list-style:none;
	padding-left:12px;	
}
nav li:first-child{padding-left:0;}
nav a{display:block;}
nav a:hover{color:#f00;}
.current{color:#f00;}
section{
	float:left;
	margin:139px auto 25px auto;
	clear:both;
}
section ul{margin:0 0 0 25px;}
#projects a{color:#333;}
.thumbnail{
	max-width:220px;
	height:124px;
	float:left;
	margin:0 25px 25px 0;
	overflow:hidden;
	position:relative;
}
.caption{
	position:absolute;
	top:124px;
	background:rgba(255,255,255,0.8);
	font-size:14px;
	padding:4px 0 0 5px;
	height:50px;
	width:100%;
	/* For IE 5-7 */  
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
	/* For IE 8 */  
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.caption h3{font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; color:#333;}
.caption p{font-family:FontSiteSans-Light, Helvetica, Arial, sans-serif; font-size:13px;}
.thumbnail a{color:#333;}
#footer{
	background:#000;
	width:100%;
	height:23px;
	position:fixed;
	bottom:0;
	font-family:FontSiteSans-Roman, Helvetica, sans-serif;
	font-size:12px;
	color:#666;
	min-width:747px;
	z-index:2;
}
#footer a {
	display:inline-block;
	padding:6px 18px;
	line-height:13px;
	background:#000;
	color:#999;
	border-left:1px solid #666;
	text-decoration:none;
}
#footer a:hover{background:#666;}
#footer a:last-child{padding-right:25px;}
.left{
	font-size:11px;
	padding:6px 0 0 29px;
	float:left;
}
.right{float:right;}
@media (max-width: 479px){
	#container{max-width:503px;}
	nav{
		background:#000;
		color:#999;
		display:table;
		float:none;
		height:28px;
		margin:0;
		padding:0;
		position:absolute;
		top:0;
		width:100%;
	}
	nav ul{display:table-row;}
	nav li{
		float:none;
		display:table-cell;
		margin:0 auto;
		padding:3px 0 0 10%;
	}
	nav li:first-child{
		padding:3px 0 0 10%;
	}
	h1{
		float:none;
		position:relative;
		top:35px;
		margin:13px auto;
		width:220px; height:18px;
		text-indent:-500px;
		background: url("https://www.ottavianidesign.com/images/static/logo.png");
	}
	section{
		clear:both;
		float:none;
		margin:60px auto 20px auto;
	}
	section ul{
		margin:0 auto;
		max-width:220px;
	}
	.thumbnail{
		max-width:220px;
		height:124px;
		float:none;
		margin:20px 0;
		overflow:hidden;
		position:relative;
	}
	.caption{
		position:absolute;
		top:74px;
		background:rgba(255,255,255,0.8);
		font-size:14px;
		padding:4px 0 0 5px;
		height:50px;
		width:100%;
		/* For IE 5-7 */  
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
		/* For IE 8 */  
		-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	}
	#footer{
		background:#000;
		color:#666;
		font-family:FontSiteSans-Roman, Helvetica, sans-serif;
		font-size:12px;
		height:23px;
		min-width:0;
		position:relative;
		bottom:0;
		width:auto;
	}
	#footer a {display:none;}
	.left{
		float:none;
		margin:0 auto;
		max-width:156px;
		padding:6px 0 0 0;
	}
}
@media screen and (min-width: 480px) and (max-width: 767px){
	#container{max-width:480px;}
	h1{
		margin:13px 0 0 16px;
	}
	nav{
		margin:10px 16px 40px 0;
	}
	section{
		clear:both;
		float:none;
		margin:40px auto 0 auto;
		max-width:464px;
		width:auto;
	}
	section ul{
		margin:0 0 0 8px;
		max-width:464px;
	}
	.thumbnail{
		margin:0 8px 8px 0;
	}
	.caption{
		position:absolute;
		top:74px;
		background:rgba(255,255,255,0.8);
		font-size:14px;
		padding:4px 0 0 5px;
		height:50px;
		width:100%;
		/* For IE 5-7 */  
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
		/* For IE 8 */  
		-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	}
	#footer{
		clear:left;
		min-width:0;
		position:relative;
		width:auto;
	}
	#footer a{display:none;}
	.left{
		float:none;
		margin:0 auto;
		max-width:156px;
		padding:6px 0 0 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 1019px){
	#container{max-width:760px;}
	section ul{
		margin:0 0 0 24px;
	}
	.thumbnail{
		margin:0 23px 23px 0;
	}
	#footer{min-width:900px;}
}
@media screen and (min-width: 1020px) and (max-width: 1264px){
	#container{max-width:1005px;}
}
@media screen and (min-width: 1265px) and (max-width: 1509px){
	#container{max-width:1250px;}
}