tyv/dabblet.css

## dabblet.css
/* testtask */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}

@-webkit-keyframes  chooser-label {
	from   { left: 0 }
	to { left: -140px; }
}

@-moz-keyframes  chooser-label {
	from   { left: 0 }
	to { left: -140px; }
}

@-o-keyframes chooser-label {
	from   { left: 0 }
	to { left: -140px; }
}

@keyframes chooser-label {
	from   { left: 0 }
	to { left: -140px; }
}

body
{
	font-family: 'PT Sans', sans-serif;
}

.card
{
	width: 690px;
	height: 310px;
	background-color: #f1ecd0;
	overflow: show;
	position: relative;
	padding: 5px;
}

.card:after
{
    position: absolute;
    width: 300px;
    height: 20px;
    content: '';
    bottom: 5px;
    right: 10px;
    z-index: -1;
    box-shadow: 0 0 20px rgba(0,0,0,.7);
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    -0-transform:rotate(2deg);
    transform:rotate(2deg);
}

.close
{
	position: absolute;
	right: 8px;
	top: -2px;
	font-size: 32px;
	color: #70693f;
	cursor: pointer;
}

.card input[type=radio]
{
	display: none;
}

.photo-chooser
{
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	margin: 65px 0 0 65px;
	position: relative;
    float: left;
	background-color: #474747;
	vertical-align: top;
	width: 100px;
	height: 40px;
	overflow: hidden;
    padding: 100px 0 10px 0;
    padding-left: 0px;
}

.photos
{
    left: 0;
    top: 0;
    position: absolute;
    width: 600px;
	height: 100px;
	overflow: hidden;
    -webkit-transition: left 0.1s linear;
    -moz-transition: left 0.1s linear;
    -o-transition: left 0.1s linear;
    transition: left 0.1s linear;
}

.photos div
{
	display: inline-block;
}

.photo-chooser label
{
    left: 0px;
    cursor: pointer;
    padding: 5px 5px 0 5px;
	display: table-cell;
    position: relative;
    -webkit-animation: chooser-label 3s infinite alternate linear;
    -moz-animation: chooser-label 3s infinite alternate linear;
    -o-animation: chooser-label 3s infinite alternate linear;
    animation: chooser-label 3s infinite alternate linear;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.photo-chooser label img
{
    border-radius: 5px;
    width: 30px;
    height: 30px;
}

.animation-runner
{
    left: 0;
    cursor: pointer;
    width: 100px;
    height: 10px;
    position: absolute;
    bottom: 0;
    background-color: #6c6c6c;
    border-radius: 0 0 10px 10px;
}

.animation-runner:hover
{
    background-color: #a3a3a3;
}

.animation-runner:hover ~ label
{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

.texts
{
    position: relative;
	font-size: 12px;
	display: inline-block;
	width: 400px;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
	vertical-align: top;
	margin: 65px 0 0 20px;
	padding: 0;
}

.texts div
{
    position: absolute;
    opacity: 0;
    width: 400px;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

.texts h1
{
	font-weight:100;
	padding: 0;
	margin: 0;
}

.texts h1::first-letter
{
    color: red;
}

.texts p
{
    margin: 15px 0 15px 0;
}

/* -------------------------------- */

#photo-1:checked ~ .photo-chooser .photos {left: 0;}
#photo-2:checked ~ .photo-chooser .photos {left: -100px;}
#photo-3:checked ~ .photo-chooser .photos {left: -200px;}
#photo-4:checked ~ .photo-chooser .photos {left: -300px;}
#photo-5:checked ~ .photo-chooser .photos {left: -400px;}
#photo-6:checked ~ .photo-chooser .photos {left: -500px;}

#photo-1:checked ~ .texts .text-1 {opacity: 1;}
#photo-2:checked ~ .texts .text-2 {opacity: 1;}
#photo-3:checked ~ .texts .text-3 {opacity: 1;}
#photo-4:checked ~ .texts .text-4 {opacity: 1;}
#photo-5:checked ~ .texts .text-5 {opacity: 1;}
#photo-6:checked ~ .texts .text-6 {opacity: 1;}

#photo-1:checked ~ .photo-chooser label[for=photo-1] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
#photo-2:checked ~ .photo-chooser label[for=photo-2] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
#photo-3:checked ~ .photo-chooser label[for=photo-3] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
#photo-4:checked ~ .photo-chooser label[for=photo-4] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
#photo-5:checked ~ .photo-chooser label[for=photo-5] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
#photo-6:checked ~ .photo-chooser label[for=photo-6] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}

## dabblet.html
<div class="card">
        <span class="close">×</span>

        <input type="radio" id="photo-1" name="photo" checked>
        <input type="radio" id="photo-2" name="photo">
        <input type="radio" id="photo-3" name="photo">
        <input type="radio" id="photo-4" name="photo">
        <input type="radio" id="photo-5" name="photo">
        <input type="radio" id="photo-6" name="photo">


        <div class="photo-chooser">
            <div class="animation-runner"></div>
            <label for="photo-1">
                <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@">
            </label
            ><label for="photo-2">
                <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
            </label
            ><label for="photo-3">
                <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
            </label
            ><label for="photo-4">
                <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
            </label
            ><label for="photo-5">
                <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
            </label
            ><label for="photo-6">
                <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
            </label>

            <div class="photos">
                <div class="photo-1">
                    <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@">
                </div
                ><div class="photo-2">
                    <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@">
                </div
                ><div class="photo-3">
                    <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@">
                </div
                ><div class="photo-4">
                    <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@">
                </div
                ><div class="photo-5">
                    <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@">
                </div
                ><div class="photo-6">
                    <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@">
                </div>
            </div>
        </div>

        <div class="texts">
            <div class="text-1">
                <h1>Юра Ткаченко</h1>
                <p>
                    Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
                </p>
                <p>
                    Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
                </p>
            </div>
            <div class="text-2">
                <h1>Сергей Никитин</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-3">
                <h1>Иван Широков</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-4">
                <h1>Алексей Андросов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
            <div class="text-5">
                <h1>Дмитрий Филатов</h1>
                <p>
                    Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
                </p>
            </div>
            <div class="text-6">
                <h1>Михаил Корепанов</h1>
                <p>
                    Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
                </p>
                <p>
                    Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
                </p>
            </div>
        </div>
    </div>

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/* testtask */
	@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/7YGmE4Ls5b94ct65u07hVQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
	}

	@-webkit-keyframes chooser-label {
	from { left: 0 }
	to { left: -140px; }
	}

	@-moz-keyframes chooser-label {
	from { left: 0 }
	to { left: -140px; }
	}

	@-o-keyframes chooser-label {
	from { left: 0 }
	to { left: -140px; }
	}

	@keyframes chooser-label {
	from { left: 0 }
	to { left: -140px; }
	}

	body
	{
	font-family: 'PT Sans', sans-serif;
	}

	.card
	{
	width: 690px;
	height: 310px;
	background-color: #f1ecd0;
	overflow: show;
	position: relative;
	padding: 5px;
	}

	.card:after
	{
	position: absolute;
	width: 300px;
	height: 20px;
	content: '';
	bottom: 5px;
	right: 10px;
	z-index: -1;
	box-shadow: 0 0 20px rgba(0,0,0,.7);
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-0-transform:rotate(2deg);
	transform:rotate(2deg);
	}

	.close
	{
	position: absolute;
	right: 8px;
	top: -2px;
	font-size: 32px;
	color: #70693f;
	cursor: pointer;
	}

	.card input[type=radio]
	{
	display: none;
	}

	.photo-chooser
	{
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	margin: 65px 0 0 65px;
	position: relative;
	float: left;
	background-color: #474747;
	vertical-align: top;
	width: 100px;
	height: 40px;
	overflow: hidden;
	padding: 100px 0 10px 0;
	padding-left: 0px;
	}

	.photos
	{
	left: 0;
	top: 0;
	position: absolute;
	width: 600px;
	height: 100px;
	overflow: hidden;
	-webkit-transition: left 0.1s linear;
	-moz-transition: left 0.1s linear;
	-o-transition: left 0.1s linear;
	transition: left 0.1s linear;
	}

	.photos div
	{
	display: inline-block;
	}

	.photo-chooser label
	{
	left: 0px;
	cursor: pointer;
	padding: 5px 5px 0 5px;
	display: table-cell;
	position: relative;
	-webkit-animation: chooser-label 3s infinite alternate linear;
	-moz-animation: chooser-label 3s infinite alternate linear;
	-o-animation: chooser-label 3s infinite alternate linear;
	animation: chooser-label 3s infinite alternate linear;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
	}

	.photo-chooser label img
	{
	border-radius: 5px;
	width: 30px;
	height: 30px;
	}

	.animation-runner
	{
	left: 0;
	cursor: pointer;
	width: 100px;
	height: 10px;
	position: absolute;
	bottom: 0;
	background-color: #6c6c6c;
	border-radius: 0 0 10px 10px;
	}

	.animation-runner:hover
	{
	background-color: #a3a3a3;
	}

	.animation-runner:hover ~ label
	{
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	-o-animation-play-state: running;
	animation-play-state: running;
	}

	.texts
	{
	position: relative;
	font-size: 12px;
	display: inline-block;
	width: 400px;
	height: 250px;
	overflow-y: auto;
	overflow-x: hidden;
	vertical-align: top;
	margin: 65px 0 0 20px;
	padding: 0;
	}

	.texts div
	{
	position: absolute;
	opacity: 0;
	width: 400px;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	}

	.texts h1
	{
	font-weight:100;
	padding: 0;
	margin: 0;
	}

	.texts h1::first-letter
	{
	color: red;
	}

	.texts p
	{
	margin: 15px 0 15px 0;
	}

	/* -------------------------------- */

	#photo-1:checked ~ .photo-chooser .photos {left: 0;}
	#photo-2:checked ~ .photo-chooser .photos {left: -100px;}
	#photo-3:checked ~ .photo-chooser .photos {left: -200px;}
	#photo-4:checked ~ .photo-chooser .photos {left: -300px;}
	#photo-5:checked ~ .photo-chooser .photos {left: -400px;}
	#photo-6:checked ~ .photo-chooser .photos {left: -500px;}

	#photo-1:checked ~ .texts .text-1 {opacity: 1;}
	#photo-2:checked ~ .texts .text-2 {opacity: 1;}
	#photo-3:checked ~ .texts .text-3 {opacity: 1;}
	#photo-4:checked ~ .texts .text-4 {opacity: 1;}
	#photo-5:checked ~ .texts .text-5 {opacity: 1;}
	#photo-6:checked ~ .texts .text-6 {opacity: 1;}

	#photo-1:checked ~ .photo-chooser label[for=photo-1] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	#photo-2:checked ~ .photo-chooser label[for=photo-2] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	#photo-3:checked ~ .photo-chooser label[for=photo-3] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	#photo-4:checked ~ .photo-chooser label[for=photo-4] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	#photo-5:checked ~ .photo-chooser label[for=photo-5] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	#photo-6:checked ~ .photo-chooser label[for=photo-6] img {box-shadow: 0 0 10px rgba(255,255,255,255.5);}
	<div class="card">
	<span class="close">×</span>

	<input type="radio" id="photo-1" name="photo" checked>
	<input type="radio" id="photo-2" name="photo">
	<input type="radio" id="photo-3" name="photo">
	<input type="radio" id="photo-4" name="photo">
	<input type="radio" id="photo-5" name="photo">
	<input type="radio" id="photo-6" name="photo">


	<div class="photo-chooser">
	<div class="animation-runner"></div>
	<label for="photo-1">
	<img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@">
	</label
	><label for="photo-2">
	<img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@">
	</label
	><label for="photo-3">
	<img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@">
	</label
	><label for="photo-4">
	<img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@">
	</label
	><label for="photo-5">
	<img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@">
	</label
	><label for="photo-6">
	<img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@">
	</label>

	<div class="photos">
	<div class="photo-1">
	<img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@">
	</div
	><div class="photo-2">
	<img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@">
	</div
	><div class="photo-3">
	<img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@">
	</div
	><div class="photo-4">
	<img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@">
	</div
	><div class="photo-5">
	<img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@">
	</div
	><div class="photo-6">
	<img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@">
	</div>
	</div>
	</div>

	<div class="texts">
	<div class="text-1">
	<h1>Юра Ткаченко</h1>
	<p>
	Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.
	</p>
	<p>
	Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.
	</p>
	</div>
	<div class="text-2">
	<h1>Сергей Никитин</h1>
	<p>
	Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
	</p>
	<p>
	Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
	</p>
	</div>
	<div class="text-3">
	<h1>Иван Широков</h1>
	<p>
	Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
	</p>
	<p>
	Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
	</p>
	</div>
	<div class="text-4">
	<h1>Алексей Андросов</h1>
	<p>
	Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
	</p>
	<p>
	Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
	</p>
	</div>
	<div class="text-5">
	<h1>Дмитрий Филатов</h1>
	<p>
	Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
	</p>
	<p>
	Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости"
	</p>
	</div>
	<div class="text-6">
	<h1>Михаил Корепанов</h1>
	<p>
	Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute).
	</p>
	<p>
	Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают.
	</p>
	</div>
	</div>
	</div>