Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

<center><div class="b-facepad">
<section class="facetabl">
<div><input id="ac-22" name="accordion-1" type="radio" checked/>
<label for="ac-22"><div class="b-fctitle"> A-L</div></label><article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> A - F </div>
<div class="b-face01">

Abbott<br>
Adreci<br>
Ainsworth<br>
Alderton<br>
Alexander<br>
Anthony<br>
Applebee<br>
Aragon<br>
Arnaud<br>
Ashdown<br>
Avery<br>
Avre<br>
Audrieu<br><br>

Baddock<br>
Bagshot<br>
Bagman<br>
Bargeworthy<br>
Barkwith<br>
Barthon<br>
Beamish<br>
Belby<br>
Bell<br>
Bethencourt<br>
Binns<br>
Birch<br>
Blane<br>
Blenkinsop<br>
Bletchley<br>
Blishen<br>
Blishwick<br>
Blotts<br>
Bloxam<br>
Bode<br>
Boilevesque<br>
Bole<br>
Boot<br>
Bones<br>
Bonhabille<br>
Bonham<br>
Borgin<br>
Bott<br>
Brand<br>
Brereton<br>
Broadmoor<br>
Brocklehurst<br>
Brodwick<br>
Brown<br>
Budge<br>
Buchanan<br>
Bullock<br>
Bulstrode<br>
Burgh<br>
Burke<br>
Burrow<br><br>

Cadogan<br>
Cadwallader<br>
Campbell<br>
Carpe<br>
Carrow<br>
Carter<br>
Catchlove<br>
Cattermole<br>
Cavelier<br>
Chang<br>
Chamberlin<br>
Chittock<br>
Choudry<br>
Clagg<br>
Clearwater<br>
Cleve<br>
Cloggs<br>
Coliar<br>
Connolly<br>
Coote<br>
Corner<br>
Cornfoot<br>
Corviser<br>
Cotton<br>
Comstock<br>
Courtemanche<br>
Craggy<br>
Creewey<br>
Cresswell<br>
Crickerly<br>
Croaker<br>
Crockett<br>
Crockford<br>
Cronk<br>
Crowdy<br>

Dacre<br>
Danlmur<br>
Davies<br>
Dawlish<br>
d'Eath<br>
Delaney<br>
DeMassard<br>
Derrick<<br>
Derwent<br>
Deverill<br>
Diggle<br>
Diggory<br>
Dingle<br>
Dippet<br>
Dodderidge<br>
Dorkins<br>
Doulcet<br>
Dunbar<br>
Du Perron<br>
Dupont<br>
Dursley<br><br>

Edgecombe<br>
Egg<br>
Ellerby<br>
Elphick<br>
Entwhistle<br>
Etkins<br>
Eveque<br>
Evermonde<br>
Evreux<br><br>

Fairfax<br>
Falaise<br>
Fancourt<br>
Fawley<br>
Finnes<br>
Finnigan<br>
Finch-Fletchley<br>
Finwick<br>
Flack<br>
Flamant<br>
Fleabert<br>
Fleet <br>
Fletwock<br>
Flint<br>
Flitney<br>
Flourish<br>
Floyd<br>
Ford<br>
Forfang<br>
Fortescue<br>
Frater<br>
Frisby<br>
Fronsac<br>
Fudge<br>
Furmage<br>
</div></td>
<td>
<div class="b-smttl">G-L </div>
<div class="b-face02">


Gael<br>
Gagwilde<br>
Gambol<br>
Garin<br>
Giscard<br>
Goix<br>
Goldstein<br>
Gore<br>
Gorgovitch<br>
Goshawk<br>
Gould<br>
Goyle<br>
Grancourt<br>
Grant<br>
Greengrass<br>
Gregory<br>
Griffiths<br>
Grimaldi<br>
Grunnion<br>
Gudgeon<br>
Gueron<br><br>

Hamblin<br>
Hanworth<br>
Harcourt<br>
Harkiss<br>
Harper<br>
Hawksworth<br>
Heriey<br>
Hewse<br>
Hipworth<br>
Higgs<br>
Higglebottom<br>
<s>Hitchens</s><br>
Holkham<br>
Hookum<br>
Hopkins<br>
Hopkirk<br>
Hopwood<br>
Hornby<br>
Horton<br>
Howard<br>
Howell<br>
Hughes<br>
Humble<br>
Hynde<br><br>

Idlewind<br>
Inglebee<br><br>

Jacknife<br>
Japes<br>
Jernigan<br>
Jenkins<br>
Jigger<br>
Johnson<br>
Jones<br>
Jordan<br>
Jorkins<br>
Jugson<br><br>


Kegg<br>
Keitch<br>
Kettleburn<br>
Kettleridge<br>
Kiely<br>
King<br>
Kirke<br>
Knatchbull<br>
Kneen<br>
Knightley<br>
Knotgrass<br><br>

LaFolle<br>
Lament<br>
Lamont<br>
Laughalot<br>
Leach<br>
Ledum<br>
Lee<br>
Leslie<br>
Li<br>
Lima<br>
Llewellyn<br>
Longbottom<br>
Lovegood<br>
Lufkin<br>
Lupin<br>
Lynch<br>

<br><br>
</div></td></TR></table></div></article></div><div>
<input id="ac-21" name="accordion-1" type="radio" />
<article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td>
<div class="b-smttl"> M-S </div>
<div class="b-face03">


Mackenzie<br>
Maddock<br>
<s>Malfoy</s><br>
Malleville<br>
Malone<br>
Marchbanks<br>
Marchmain<br>
Marjoribanks<br>
Maromme<br>
Massard<br>
McAvoy<br>
McBride<br>
McCormack<br>
McDougal<br>
McFarlan<br>
McGonagall<br>
McLaggen<br>
McLaird<br>
McLeod<br>
McManus<br>
<s>McMillan</s><br>
McNair<br>
McPhail<br>
McTavish<br>
Meadery<br>
Meliflua<br>
Merteuil<br>
Mesniel<br>
Middleton<br>
Milliphutt<br>
Mimsy<br>
Minchum<br>
Mintumble<br>
Mitchell<br>
Mole<br>
Moor<br>
Monaghan<br>
Montague<br>
Montgomery<br>
Montfault<br>
Montfort<br>
Montmorency<br>
Moran<br>
Morgan<br>
Mowbery<br>
Mulciber<br>
Mulckin<br>
Muldoon<br>
Mullet<br>
Mumps<br>
Murray<br><br>

Nenad<br>
Nott<br>
Nutcombe<br><br>

Oakby<br>
O'Fay<br>
O'Flaherty<br>
O'Hare<br>
Ogden<br>
Oglethorpe<br>
Otherhaus<br>
Oldridge<br>
Oliphant<br>
Ollertone<br>
Ollivander<br>
Ormond<br>
Orpington<br>
Osbert<br>
Osmont<br>

Page<br>
Parkin<br>
Parkinson<br>
Peakes<br>
Peel<br>
Pericard<br>
Perkins<br>
Perks<br>
Perroy<br>
Picardy<br>
Pilliwickle<br>
Pince<br>
Pinkstone<br>
Platt<br>
Plumpton<br>
Plunkett<br>
Po<br>
Podmore<br>
Poke<br>
Pokeby<br>
Pomfrey<br>
Porpington<br>
<s>Potter</s><br>
Potts<br>
Prang<br>
Preece<br>
Prestcote<br>
Proctor<br>
<s>Proudfoot</s><br>
Pucey<br>
Puckle<br>
Puddifoot<br>
Pursell<br><br>

Quigley<br>
Quince<br>
Quintin <br><br>

Radford<br>
Raleigh<br>
Rastrick<br>
Rennes<br>
Restault<br>
Revain<br>
Reymes<br>
Rice<br>
Rickett<br>
Ridgebit<br>
Rivers<br>
Robards<br>
Robins<br>
Rookwood<br>
Roper<br>
Rosengard<br>
<s>Rosier</s><br>
Ross<br>
Rowle<br>
Ryan<br>

Sakndenberg<br>
Samuels<br>
Sanders<br>
Savage<br>
Sawbridge<br>
Scamander<br>
Schletter<br>
Scrimgeour<br>
<s>Selwyn</s><br>
Servian<br>
Shacklebolt<br>
Shafiq<br>
Shimpling<br>
Shingleton<br>
Shunpike<br>
Somerville<br>
Somneri<br>
Slinkhard<br>
Sloper<br>
Slughorn<br>
Smethley<br>
Smethwyck<br>
Smith<br>
Snowyowl<br>
Spangle<br>
Spavin<br>
Spellman<br>
Spinnet<br>
Spore<br>
Spudmore<br>
Stainwright<br>
Stafford<br>
Stalk<br>
Starkey<br>
Strivelyn<br>
Stretton<br>
Stroulger<br>
Stuart<br>
Stump<br>
Summerby<br>
Sweeting<br>
Switch<br>
Swott<br>
Sykes<br><br>




</div></td>
<td>
<div class="b-smttl"> T-Z </div>
<div class="b-face03">

Talkalot<br>
Tate<br>
Temple<br>
Theroux<br>
Thicknesse<br>
Thomas<br>
Thurkell<br>
Tillyman<br>
Toke<br>
Tomkins<br>
Toothill<br>
Toots<br>
Tourmente<br>
Tranchant<br>
Travers<br>
Trefle<br>
Tremlett<br>
Trimble<br>
Troy<br>
Tuft<br>
Tugwood<br>
Turpin<br>
Twonk<br>
Twycross<br><br>

Umbridge<br>
Undercliffe<br>
Urquhart<br>

Vablatsky<br>
Vandes<br>
Vane<br>
Vanity<br>
Vaughan<br>
Vernold<br>
Vesci<br>
Villiers<br>
Viridan<br>
Vitalis<br>
Vosper<br>
Vymont<br><br>

Wadock<br>
Waffling<br>
Wagtail<br>
Walkin<br>
Warbeck<br>
Warble<br>
Warrington<br>
Watkins<br>
<s>Weasley</s><br>
Wellbeloved<br>
Wenlock<br>
Whisp<br>
Whitehorn<br>
Widdershins<br>
Wigworthy<br>
Wilbin<br>
Wildsmith<br>
Wilkins<br>
Williams<br>
Williamson<br>
Winickus<br>
Withers<br>
Withey<br>
Wood<br>
Woodville<br>
Worple<br>
Wright<br>
Writingham<br><br>

Yaxley<br>
York<br>
Youdle<br><br>	

Zabini<br>


</div></td></TR></table></div></article><label for="ac-21"><div class="b-fctitle">M-Z</div></label></div> 
<br>
<div><input id="ac-23" name="accordion-1" type="checkbox" />
<label for="ac-23">



<br>
</div></article></div>
</section>

</div><div style="padding-left: 380px; font-family: trebuchet ms; font-size: 8px;">
</div></center>





<style type="text/css"> 
.facetabl label{ position: relative; z-index: 20; display: block; cursor: pointer; color: black; }
.facetabl label:hover{ background: #fff; }
.facetabl input:checked + label,.facetabl input:checked + label:hover{ background: #fff;}
.facetabl label:hover:after,.facetabl input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; }
.facetabl input:checked + label:hover:after{}
.facetabl input{ display: none; }

.facetabl article{ background: fff; margin: -0px; overflow: hidden; height: 0px; position: relative; z-index: 10;
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; transition: height 0.5s ease-in-out, box-shadow 0.6s linear; }

.facetabl input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; }
.facetabl article p{ font-family: courier new; color: black; font-size: 14px; padding: 0px; }

.facetabl input:checked ~ article.ac-face{ height: 290px; } 
.facetabl input:checked ~ article.ac-code{ height: 220px; }



.b-facepad { background: #f8f8f8; width: 430px; padding: 10px; margin-top: 10px;}
.b-fctitle { background: #000; width: 370px; height: 10px; padding: 30px 30px 30px 30px; color: #fff; font-family: oswald; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; }
.b-fctitle:hover { background: #323232; }

.b-face01 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; padding-top: -5px; }
.b-face02 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }
.b-face03 { width:190px; height:220px; overflow:auto; text-align: center; line-height:120%; overflow: auto; font-family: trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase;   }

.b-fcpad { width: 380px; height: 280px; padding: 0px 10px; background-color: #fff; border-top: 15px solid #fff;  overflow:auto;  }
.b-fcpad ::-webkit-scrollbar { background:#eaeaea; width: 3px; }
.b-fcpad ::-webkit-scrollbar-thumb { background: #800000; width: 3px; }
.b-fcpad ::-webkit-scrollbar-track { background:#eaeaea}


.b-smttl { width: 170px; height: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 20px; color: #000; border-bottom: 5px solid #800000; line-height: 100%; text-align: center; padding-left: 10px; } 

.b-smtitle2 { width: 380px;  font-family: oswald;  text-transform: uppercase; font-size: 15px; color: #000; text-align: center; letter-spacing: 2px; padding-top: 10px; } 

.b-face01 a:link, .b-face01 a:active, .b-face01 a:visited {
text-transform: uppercase;
color: #a50e18; }
.b-face02 a:link, .b-face02 a:active, .b-face02 a:visited {
text-transform: uppercase;
color: #0e75a5; }
.b-face03 a:link, .b-face03 a:active, .b-face03 a:visited {
text-transform: uppercase;
color: #a5670e; }

</style>