/*
	╔═══════════════════════════╗
	║  CSS-Галерея, Dr.Holerik  ║
	╚═══════════════════════════╝
*/

/* ═════════ ГЛОБАЛЬНЫЕ СТИЛИ ═════════ */

/* Eric Meyer’s Global Reset */
html, body, div, p, pre, span,
h1, h2, h3, h4, h5, h6,
abbr, acronym, address, big, cite,
code, del, dfn, em, ins, kbd, samp,
small, strong, sub, sup, var, q,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td,
fieldset, form, label, legend,
a, area, map, img, object {
	margin: 0; padding: 0;
	outline: 0; border: 0;
	background: transparent repeat scroll;
	vertical-align: baseline;
	text-align: left;
	text-indent: 0;
	letter-spacing: normal;
	line-height: 1.5;
	white-space: normal;
	word-spacing: normal;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
}



/* ═════════ ГАЛЕРЕЯ ═════════ */

/* блок галереи */
#gallery {
	text-align: center; /* центрирует список фотобокcов */
	font-family: "Verdana", sans-serif;
	color: #999;
}

	/* объединяет все основные боксы */
	#gallery > h1, .preview,
	.photoboxes:after, .photoboxes > li {
		background-color: #eee;
		border: 2px solid #ccc;
	}
	
	/* заголовок галереи */
	#gallery > h1 {
		width: 25%;
		min-width: 7.5em;
		padding: 0.25em;
		margin: 0.25em auto;
		text-align: center;
		font-size: 175%;
	}
	
	/* лента миниатюр */
	.preview {
		width: 50%;
		min-width: 17.5em;
		overflow: auto;
		margin: 0.75em auto;
	}
	
		/* ячейка с миниатюрой */
		.preview > li { display: table-cell; /* ячейки в строку */ }
		
			/* ссылка миниатюры */
			.preview > li > a {
				display: block;
				margin: 0.5em;
				padding: 0.5em;
			}
			
			/* не посещённая ссылка миниатюры */
			.preview > li > a:link {
				background-color: #fff;
				border: 1px solid #ddd;
				opacity: 0.85;
			}
			
			/* посещённая ссылка миниатюры */
			.preview > li > a:visited {
				background-color: #fff;
				border: 1px dashed #eee;
				opacity: 0.75;
			}
			
			/* выделенная ссылка миниатюры */
			.preview > li > a:hover,
			.preview > li > a:focus { opacity: 1; }
			
			/* нажатая ссылка миниатюры */
			.preview > li > a:active { border-color: #ccc; }
			
				/* изображение миниатюры */
				.preview > li > a > img {
					display: block; /* без лишнего поля снизу */
					width: 75px;
					height: 75px;
				}
				
	/* список фотобокcов */
	.photoboxes {
		display: inline-block; /* обёртывает содержимое */
		counter-reset: photo; /* счётчик установлен на 0 */
	}
	
		/* псевдоэлемент со счётчиком общего числа фотографий */
		.photoboxes:after {
			display: block;
			width: 5em;
			padding: 0.125em;
			margin-left: auto; /* смещает к правому краю */
			margin-top: 0.25em; /* отступ от фотобокса */
			content: counter(photo) " фото"; /* вывод числа фотографий */
			text-align: center;
			font-size: 115%;
		}
		
		/* фотобокc */
		.photoboxes > li {
			position: absolute; /* «колода» фотобокcов */
			visibility: hidden; /* невидимые фотобокcы */
			display: block; /* без маркера */
			padding: 0.75em;
			counter-increment: photo; /* +1 к счётчику с каждым фотобокcом */
		}
		
		/* фотобокc синхронизированный со ссылкой */
		.photoboxes > li:target {
			position: static; /* достаём фотобокc из «колоды» */
			visibility: visible; /* проявляем фотобокc */
		}
		
			/* псевдоэлемент с фотографией */
			.photoboxes > li:before {
				display: block;
				padding: 0.75em;
				margin: 0 auto; /* центрирует блок */
				text-align: center; /* центрирует фотографию */
				background-color: #fff;
				border: 1px solid #ddd;
			}
			
			/* псевдоэлемент со счётчиком порядкового номера фотографии */
			.photoboxes > li:after {
				display: block; /* счётчик под описанием */
				content: "№" counter(photo); /* вывод номера фотографии */
				text-align: right; /* номер в нижнем правом углу */
				font-size: 105%;
			}
			
			/* наименование фотографии */
			.photoboxes > li > h2 {
				max-width: 10em;
				margin: 0.25em auto;
				text-align: center;
				font-size: 125%;
			}
			
			/* описание фотографии */
			.photoboxes > li > p {
				max-width: 20em;
				margin: 0 auto;
				font-size: 100%;
			}
			
			
			
/* ═════════ ФОТОГРАФИИ ═════════ */

/* горизонтальные фотографии */
#photobox-19:before,
#photobox-18:before,
#photobox-16:before,
#photobox-15:before,
#photobox-14:before,
#photobox-13:before,
#photobox-12:before,
#photobox-9:before,
#photobox-7:before,
#photobox-5:before,
#photobox-4:before,
#photobox-2:before,
#photobox-1:before {
	width: 300px;
	height: 225px;
}

/* вертикальные фотографии */
#photobox-20:before,
#photobox-17:before,
#photobox-11:before,
#photobox-10:before,
#photobox-8:before,
#photobox-6:before,
#photobox-3:before {
	width: 225px;
	height: 300px;
}

/* загрузка фотографий в соответствующие фотобоксы при активации ссылки */
#photobox-20:target:before { content: url("photo/0020.jpeg"); }
#photobox-19:target:before { content: url("photo/0019.jpeg"); }
#photobox-18:target:before { content: url("photo/0018.jpeg"); }
#photobox-17:target:before { content: url("photo/0017.jpeg"); }
#photobox-16:target:before { content: url("photo/0016.jpeg"); }
#photobox-15:target:before { content: url("photo/0015.jpeg"); }
#photobox-14:target:before { content: url("photo/0014.jpeg"); }
#photobox-13:target:before { content: url("photo/0013.jpeg"); }
#photobox-12:target:before { content: url("photo/0012.jpeg"); }
#photobox-11:target:before { content: url("photo/0011.jpeg"); }
#photobox-10:target:before { content: url("photo/0010.jpeg"); }
#photobox-9:target:before { content: url("photo/0009.jpeg"); }
#photobox-8:target:before { content: url("photo/0008.jpeg"); }
#photobox-7:target:before { content: url("photo/0007.jpeg"); }
#photobox-6:target:before { content: url("photo/0006.jpeg"); }
#photobox-5:target:before { content: url("photo/0005.jpeg"); }
#photobox-4:target:before { content: url("photo/0004.jpeg"); }
#photobox-3:target:before { content: url("photo/0003.jpeg"); }
#photobox-2:target:before { content: url("photo/0002.jpeg"); }
#photobox-1:target:before { content: url("photo/0001.jpeg"); }