[html]<style type="text/css">
*, ::after, ::before {
box-sizing:content-box; -moz-box-sizing:initial; -webkit-box-sizing:initial;
}
/*ВСЯ ТАБЛИЦА ЦЕЛИКОМ*/
.AB2C {
margin:5px auto; /*ОТСТУПЫ*/
width:460px; /*ШИРИНА*/
text-align:left; /*ТЕКСТ СЛЕВА*/
font-family:Arial; /*ШРИФТ*/
line-height:16px; /*ВЫСОТА ЛИНИЙ*/
}
.AB2C::after {
content:''; display:table; clear:both;
}
/*ВКЛАДКИ*/
.AB2C input[type=radio] {
display:none;
}
.AB2C label {
display:block;
float:left;
clear:left;
margin-right:10px; /*ОТСТУП СЛЕВА*/
margin-bottom:5px; /*ОТСТУП СНИЗУ*/
width:150px; /*ШИРИНА ВКЛАДКИ*/
height:40px; /*ВЫСОТА ВКЛАДКИ*/
padding-top:10px;
overflow:hidden;
text-align:center; /*ТЕКСТ ПО ЦЕНТРУ*/
text-transform:uppercase; /*ВСЕ БУКВЫ ЗАГЛАВНЫЕ*/
font-size:24px; /*РАЗМЕР ШРИФТА*/
line-height:normal; /*ВЫСОТА ЛИНИЙ НОРМАЛЬНАЯ*/
background:#98000d; /*ЦВЕТ ФОНА*/
color:white; /*ЦВЕТ ШРИФТВ*/
opacity:0.5; /*ПРОЗРАЧНОСТЬ ЕСТЬ*/
filter:grayscale(1); -webkit-filter:grayscale(1); /*ФИЛЬТР ЕСТЬ*/
}
/*ВКЛАДКА ПРИ НАВЕДЕНИИ*/
.AB2C label:hover {
opacity:1; /*ПРОЗРАЧНОСТИ НЕТ*/
filter:grayscale(0); -webkit-filter:grayscale(0); /*ФИЛЬТР ЕСТЬ*/
}
/*НЕАКТИВНЫЕ ВКЛАДКИ*/
.AB2C [id^="OAB2C"]:checked + label {
opacity:1; /*ПРОЗРАЧНОСТИ НЕТ*/
filter:grayscale(0); -webkit-filter:grayscale(0); /*ФИЛЬТР ЕСТЬ*/
}
#OAB2C1:checked ~ #contentAB2C1,
#OAB2C2:checked ~ #contentAB2C2,
#OAB2C3:checked ~ #contentAB2C3,
#OAB2C4:checked ~ #contentAB2C4,
#OAB2C5:checked ~ #contentAB2C5,
#OAB2C6:checked ~ #contentAB2C6,
#OAB2C7:checked ~ #contentAB2C7,
#OAB2C8:checked ~ #contentAB2C8 {
display:block;
}
/*КОНТЕНТ ВКЛАДОК*/
.contentAB2C {
display:none;
width:270px; /*ШИРИНА*/
height:405px; /*ВЫСОТА*/
padding:12px; /*ОТСТУП*/
overflow-y:auto;
border:3px solid #F7F7F7; /*ШИРИНА, ЦВЕТ И ТИП ЛИНИИ*/
text-align:justify; /*ТЕКСТ ПО ШИРИНЕ*/
font-size:11px; /*РАЗМЕР ШРИФТА*/
font-family:Arial; /*ВИД ШРИФТА*/
background:#f1f1f1; /*ЦВЕТ ФОНА*/
color:black; /*ЦВЕТ ТЕКСТА*/
}
/*БУКВЫ ВО ВКЛАДКАХ С ЛИНИЯМИ*/
.contentAB2C span {
display:block;
margin-bottom:5px; /*ОТСТУП СНИЗУ*/
padding-bottom:3px; /*ОТСТУП СНИЗУ*/
border-bottom:2px solid black; /*ЛИНИЯ СНИЗУ*/
text-align:right; /*ТЕКСТ СПРАВА*/
font-weight:bold; /*ТЕКСТ ЖИРНЫЙ*/
color:black; /*ЦВЕТ ШРИФТА*/
}
</style>
<div class="AB2C"><!-- CREDIT/КОПИРАЙТ, НЕ УБИРАЙТЕ, ПОЖАЛУЙСТА : CODAGE PAR SKAEMP / CCCRUSH --><a class="cdtAB2C" href="http://crushcrushcrush.actifforum.com/" target="_blank"></a>
<!-- ВКЛАДКИ - A B C --><input type="radio" name="AB2C" id="OAB2C1" checked ><label for="OAB2C1">A B C</label>
<!-- D E F --><input type="radio" name="AB2C" id="OAB2C2"><label for="OAB2C2">D E F</label>
<!-- G H I --><input type="radio" name="AB2C" id="OAB2C3"><label for="OAB2C3">G H I</label>
<!-- J K L --><input type="radio" name="AB2C" id="OAB2C4"><label for="OAB2C4">J K L</label>
<!-- M N O --><input type="radio" name="AB2C" id="OAB2C5"><label for="OAB2C5">M N O</label>
<!-- P Q R --><input type="radio" name="AB2C" id="OAB2C6"><label for="OAB2C6">P Q R</label>
<!-- S T U V --><input type="radio" name="AB2C" id="OAB2C7"><label for="OAB2C7">S T U V</label>
<!-- W X Y Z --><input type="radio" name="AB2C" id="OAB2C8"><label for="OAB2C8">W X Y Z</label>
<!-- КОНТЕНТ A B C --><div id="contentAB2C1" class="contentAB2C">
<!-- A --><span>A</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- B --><span>B</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- C --><span>C</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ D E F --><div id="contentAB2C2" class="contentAB2C">
<!-- D --><span>D</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- E --><span>E</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- F --><span>F</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ G H I --><div id="contentAB2C3" class="contentAB2C">
<!-- G --><span>G</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- H --><span>H</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- I --><span>I</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ J K L --><div id="contentAB2C4" class="contentAB2C">
<!-- J --><span>J</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- K --><span>K</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- L --><span>L</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ M N O --><div id="contentAB2C5" class="contentAB2C">
<!-- M --><span>M</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- N --><span>N</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- O --><span>O</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ P Q R --><div id="contentAB2C6" class="contentAB2C">
<!-- P --><span>P</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Q --><span>Q</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- R --><span>R</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ S T U V --><div id="contentAB2C7" class="contentAB2C">
<!-- S --><span>S</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- T --><span>T</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- U --><span>U</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- V --><span>V</span><b>Фамилия Имя прототипа</b> - Персонаж</div>
<!-- КОНТЕНТ W X Y Z --><div id="contentAB2C8" class="contentAB2C">
<!-- W --><span>W</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- X --><span>X</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Y --><span>Y</span><b>Фамилия Имя прототипа</b> - Персонаж
<!-- Z --><span>Z</span><b>Фамилия Имя прототипа</b> - Персонаж</div></div>[/html]
[b]1. Исходное имя персонажа[/b] [b]2. Фэндом[/b]
