
#extended.details-view {
	display: none;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			white-space: nowrap;
			clear: both;

			&.header {
				a, a:active, a:visited {
					padding-bottom: 18px;
					color: #555;
					text-decoration: none;
					opacity: 0.4;
					cursor: pointer;
					.transition( all 0.2s ease-in-out );
	
					&:hover {
						color: #555;
						opacity: 0.9;
					}
					img {
						width: 12px;
						height: 12px;
						padding: 0 8px;
					}
				}
			}
			&.entry {
				border-bottom: 1px solid #ddd;

				a, a:active, a:visited {
					display: block;
					color: #555;
					text-decoration: none;
					cursor: pointer;
					
					&:hover, &.hover {
						background-color: #f6f6f6;
						color: #e80;
					}
				}
				&.error {
					a, a:active, a:visited {
						color: #aaa;
					
						.label {
							.hint {
								margin-left: 12px;
								font-size: 0.9em;
								color: #c55;
							}
						}
						&:hover, &.hover {
							opacity: 1;
							background-color: #f6f6f6;
							color: #e80;
						}
					}
				}
			}
			.icon, .label, .date, .size {
				padding: 6px;
			}
			.icon {
				display: inline-block;
				position: absolute;
				left: 0;
				top: 2px;
				width: 16px;

				img {
					width: 16px;
					height: 16px;
				}
			}
			.icon.big {
				display: none;
			}
			.label {
				display: block;
				margin: 0 270px 0 24px;
				overflow: hidden;
				white-space: nowrap;
				text-align: left;
			}
			.date {
				position: absolute;
				right: 100px;
				top: 0;
				text-align: right;
				width: 160px;
				white-space: nowrap;
			}
			.size {
				position: absolute;
				right: 0;
				top: 0;
				text-align: right;
				width: 80px;
				white-space: nowrap;
			}
		}
	}
	.empty {
		text-align: center;
		margin: 50px 0;
		color: #ddd;
		font-size: 5em;
		font-weight: bold;
	}
}


#extended.icons-view {
	display: none;
	padding: 3px;
	border: 1px solid #eee;
	border-radius: 15px;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			&.header {
				display: none;
			}
			&.entry {
				float: left;

				a, a:active, a:visited {
					display: block;
					margin: 8px;
					padding: 8px;
					width: 100px;
					height: 120px;
					float: left;
					text-align: center;
					text-decoration: none;
					overflow: hidden;
					border-radius: 5px;
					color: #555;
					cursor: pointer;
					border: 2px solid rgba(0,0,0,0);
			
					&:hover, &.hover {
						color: #e80;
						border-color: #eee;
						background-color: #f6f6f6;
					}
					.icon {
						display: block;

						img {
							width: 48px;
							height: 48px;
							margin-bottom: 8px;
						}
					}
					.icon.small {
						display: none;
					}
					.label {
						display: block;
						word-wrap: break-word;
					}
					.date, .size {
						display: none;
					}
				}
				&.error {
					a, a:active, a:visited {
						color: #aaa;
						text-decoration: none;
					
						.label {
							.hint {
								padding: 0 6px;
								font-size: 0.9em;
								color: #c55;
							}
						}
						&:hover, &.hover {
							color: #e80;
							border-color: #eee;
							background-color: #f6f6f6;
						}
					}
				}
			}
		}
	}
	.empty {
		padding: 16px;
		height: 120px;
		text-align: center;
		color: #ddd;
		font-size: 5em;
		font-weight: bold;
	}
}
