@font-face {
    font-family: 'exobold';
    src: url('../fonts/exo-bold-webfont.eot');
    src: url('../fonts/exo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-bold-webfont.woff2') format('woff2'),
         url('../fonts/exo-bold-webfont.woff') format('woff'),
         url('../fonts/exo-bold-webfont.ttf') format('truetype'),
         url('../fonts/exo-bold-webfont.svg#exobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'exoregular';
    src: url('../fonts/exo-regular-webfont.eot');
    src: url('../fonts/exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-regular-webfont.woff2') format('woff2'),
         url('../fonts/exo-regular-webfont.woff') format('woff'),
         url('../fonts/exo-regular-webfont.ttf') format('truetype'),
         url('../fonts/exo-regular-webfont.svg#exoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
	font-family:'exoregular', sans-serif;
	font-weight:normal;
	font-size:12px;
}

.archive {
	display: inline-block;
}


.archive ul {
	list-style:none;
	margin:0; 
	padding:0;
	width:300px;
	margin:0 auto;
}

.archive ul li label {
	background: #000099; /* fallback colour */
	color: #fff;
}

.archive ul li input[type='checkbox'] {
	display: none;
}

.archive ul li label {
	display:block;
	padding:12px;
	width:auto;
	border-bottom: 1px solid white;
}

.archive ul li i {
	font-size:18px;
	vertical-align: middle;
	width:20px;
	display:inline-block;
}

.archive ul li span {
	display:inline;
	float:right;
	background:#ccc;
	border-bottom:1px solid #fff;
	padding:4px 6px;
	font-size:14px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	position:relative;
}

.archive ul li label:hover {
	background: #ddd; /* fallback colour */
	color: #000099;
}

.archive ul li label:hover span {
	background:#000099;
	
}

.archive ul li input[type='checkbox']:checked ~ label {
	background: #ccc; /* fallback colour */
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.archive ul li input[type='checkbox']:checked ~ label span {
	background: #ccc; /* fallback colour */
}

.archive ul li input[type='checkbox']:checked ~ .options {
	height: auto;
	display:block;
	min-height:40px;
	max-height:400px;
}

.archive ul ul {
	background:#fff; margin:0; padding:0;
}

.archive ul ul li a {
	display:block;
	padding:6px 12px;
	color:#636363;
	text-decoration:none;
}

.archive ul ul li a:hover {
	color:#ccc;
}

.archive ul ul li a span {
	color:#999;
	background:none;
	border:1px solid #ccc; 
}

.archive ul ul li {
	border-bottom:1px solid #000099;
}

.archive ul ul li:first-child {
	padding-top:6px;
}

.archive ul ul li:last-child {
	padding-bottom:6px; border:0;
}

.options {
	height: 0;
	display: block;
	overflow: hidden;
}
	

/*@font-face {
	font-family: 'icomoon';
    src: url('../fonts/exo-bold-webfont.eot');
    src: url('../fonts/exo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/exo-bold-webfont.woff2') format('woff2'),
         url('../fonts/exo-bold-webfont.woff') format('woff'),
         url('../fonts/exo-bold-webfont.ttf') format('truetype'),
         url('../fonts/exo-bold-webfont.svg#exobold') format('svg');
	font-weight: normal;
	font-style: normal;
}*/


@media screen and (max-width: 400px){
	.archive {
		width: 250px;
	}
	
	.archive ul {
		width: 250px;
	}
}