@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto_light_macroman/Roboto-Light-webfont.eot');
    src: url('../fonts/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/roboto_light_macroman/Roboto-Light-webfont.svg#robotoblack') format('svg');
    font-weight: normal;
    font-style: normal;

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

}


body {
	background:#ccc;	
	font-family:'robotolight',sans-serif;
	color:#333;
}

  
.box {
	position:fixed;
	top:0;
	left:40px;
	width:140px;
	height:120px;
	background:white url(../img/box.svg) no-repeat 0 0;
	z-index:999;
}

.wrapper {
	margin:100px 50px 100px 250px;
 }

.welcome-message {
	color:white;
	margin-bottom:60px;
}

ul.file-list,
ul.file-list li {
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-image:none;
}
ul.file-list {
	float:left;
	clear:left;
}
ul.file-list > li {
	display:block;
	float:left;
	clear:left;
	padding-bottom:50px;
	margin-bottom:50px;
	width:450px;
}
ul.file-list > li {
	border-bottom:1px solid #dedede;
}
ul.file-list > li .fileicon {
	display:block;
	float:left;
	clear:left;
	margin-right:10px;
}
ul.file-list > li .fileinfo {
	display:block;
	float:left;
	margin-right:10px;
	width:360px;
}
ul.file-list > li .filetype {
	background:transparent url('img/zip.svg') no-repeat;
	background-size: 100% auto;
	display:block;
	height:70px;
	width:70px;
}
ul.file-list > li .filename {
	display:block;
	font-family:'robotoblack',sans-serif;
	margin-top:5px;
	margin-bottom:0.5em;
}
ul.file-list > li .comment {
	display:block;
	margin-bottom:0.5em;
}
ul.file-list > li .filesize,
ul.file-list > li .filedate {
	display:block;
	color:white;
	font-size:12px;
}
ul.file-list > li a.download-link,
ul.file-list > li a.preview-link {
	background:transparent url('img/download.svg') no-repeat left center;
	background-size: auto 100%;
	display:block;
	float:left;
	height:20px;
	text-indent:30px;
	color:white;
	text-transform:uppercase;
	font-size:12px;
	padding-top:4px;
	text-decoration:none;
	margin-top:10px;
	margin-right:30px;
}
ul.file-list > li a.download-link {
	clear:both;
}
ul.file-list > li a.preview-link {
	background-image:url('img/preview.svg');
}
ul.file-list > li a.download-link:hover {
	text-decoration:underline;
}

ul.archive-contents,
ul.archive-contents > li {
	margin:0;
	padding:0;
}
ul.archive-contents {
	margin-top:10px;
	margin-bottom:10px;
}
ul.archive-contents > li {
	font-size:10px;
}