* {
	margin:0;
	padding:0;
}

body {
	font-family:arial;
	background-color:#2e5e88;
	padding-top:145px;
	padding-left:5px;
}

label {
	color:gold;
	margin-right:20px;
}

#settings {
	color:white;
	background-color:#193040;
	padding:10px;
	line-height:1.4em;
	
	position:fixed;
	top:0px;
	left:5px;
	width:100%;
	border-top:5px solid #2e5e88;
	border-bottom:5px solid #2e5e88;
	
	z-index:100;
}

#toggle-categories {
	color:gold;
	cursor:pointer;
}

a:link, a:visited {
	color:gold;
}

#set-steamlookup {
	padding:3px;
	height:30px;
	padding-right:6px;
	padding-left:6px;
	background-color:#040b10;
	color:#6fbbd8;
	border:0;
	font-size:14pt;
}
#steamlookup {
	padding-left:6px;
	height:30px;
	font-size:14pt;
	background-color:#040b10;
	color:#6fbbd8;
	border:0;
}

#categories {
	
}

.category {
	margin-left:5px;
	margin-top:5px;
	color:white;
	background-color:#2b4652;
	padding:5px;
}
.category.collapsed {
	height:18px;
}

.category .header .name {
	font-size:12pt;
	font-weight:bold;
	margin-bottom:10px;
	display:inline-block;
	cursor:pointer;
	
	vertical-align:top;
}
.category.completed .header .name {
	/*color:#50b943;*/
}
.category .header .name:before {
	content:"\25bc";
	margin-right:3px;
}
.category.collapsed .header .name:before {
	content:"\25b6";
	margin-right:5px;
}

.counts {
	display:inline-block;
	font-weight:normal;
	opacity:0.8;
	margin-left:5px;
	margin-top:2px;
	
	position:absolute;
	left:0px;
	top:0px;
	
	width:100%;
	
	opacity:0.8;
}

.counts .percent {
	float:right;
	margin-right:10px;
}

.category .achievements {
	margin-left:30px;
}

.bar-outer {
	background-color:#193040;
	width:300px;
	display:inline-block;
	position:relative;
	height:20px;
}
.bar-outer.completed .bar-inner {
	background-color:#189009;
}
.bar-outer.completed .counts {
	/*text-shadow:1px 1px 1px black;*/
}

.bar-inner {
	width:0px;
	height:100%;
	background-color:#1c85ad;
	overflow:visible;
	white-space:nowrap;
	position:absolute;
	left:0px;
	top:0px;
}

.achievement {
	background-color:#193040;
	color:white;
	margin-bottom:5px;
	margin-right:5px;
	padding:5px;
	width:300px;
	display:inline-block;
	min-height:90px;
	vertical-align:top;
	
	cursor:pointer;
	line-height:1em;
	box-sizing:border-box;
}
.achievement:hover {
	background-color:#203a4c;
}

#pinned .achievement {
	background-color:rgba(255,255,255,0.1);
}

.achievement.earned {
	opacity:0.5;
	/*display:none;*/
}

.achievement.meta {
	background-color:#2c1a3c;
}

.achievement.pinned {
	border:2px solid gold;
	padding-top:3px;
	padding-left:3px;
	margin-bottom:3px;
}

.achievement img {
	display:inline-block;
	max-width:50px;
	float:left;
	margin-right:5px;
}

.achievement .name {
	font-weight:bold;
	margin-bottom:5px;
}

.achievement .desc {
	font-size:8pt;
}

#all-counts .bar-outer {
	background-color:#0c1d29;
	height:30px;
	line-height:30px;
	margin-top:10px;
}

#welcome {
	background-color:#193040;
	color:white;
	margin-bottom:5px;
	margin-right:5px;
	padding:10px;
}

#loading {
	background-color:#193040;
	color:white;
	margin-bottom:5px;
	margin-right:5px;
	padding:10px;
	display:none;
}

#loading .unloaded {
	color:#bd5656;
}

#loading .loaded {
	color:#5cbd56;
	display:none;
}

#error {
	background-color:#b13535;
	color:white;
	padding:10px;
	display:none;
}

#templates {
	display:none;
}

#settings #left {
	width:25%;
	display:inline-block;
	vertical-align:top;
}

#pinned {
	display:inline-block;
	width:73%;
	height:100%;
	vertical-align:top;
}