Код:
<!--HTML--><div class="postcolor"> <link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic,900italic|Bree+Serif" rel="stylesheet" type="text/css"> <style type="text/css"> .jgcontainer { margin: 20px auto; height: 250px; width: 480px; font: normal normal normal 11px/105% 'Book Aqua', Calibri; text-align: justify; color: #ac7b46; overflow: hidden;} .jgtabs { margin: 0px 0px 0px 30px; position: relative; width: 350px; height: 230px; top: 20px;} .jgtab { display: block; } .jgtab label { display: block; width: 90px; height: 20px; background: ; font-size: 12px; color: #372503; text-align: center; padding: 1px; margin: 0px 0px 0px 2px; position: relative; top: 5px; left: 355px; z-index: 1; border-radius: 10%; opacity: .85;} .jgtab input[type=radio]:checked ~ label { background: ; z-index: 2;} .jgtab input[type=radio] { display: none; } .jgcontent { position: absolute; top: 230px; bottom: 0px; left: 0px; right: 0px; font-size: 12px; color: #372503; padding: 0px 3px; background: #ac7b46; background-image:url(http://weblabfon.com/_ld/2/227_Texture0106.jpg); overflow: auto; opacity: 0; transition: all 0.4s linear 0s; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s;} .jgtab input[type=radio]:checked ~ label ~ .jgcontent { z-index: 1; left: 0px; top: 0px; opacity: 1; transition: all 0.4s linear 0s; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; } .jgtab input[type=radio]:checked ~ label ~ .jgcontainerheader { opacity: 1; left: -140px; transition: all 0.4s linear 0s; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; } .jgcontainerheader { width: 250px; height: 30px; margin: 0px; font: italic bold normal 25px/30px 'Book Aqua', 'Calibri'; text-align: left; text-transform: lowercase; color: #ac7b46; text-shadow: 1px 1px 0px #000; position: absolute; top: 80px; left: -170px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); z-index: 3; opacity: 0; } .jgcontainer h1 { margin: 4px 0px; padding: 3px; font: normal normal normal 15px/100% 'Book Aqua', 'Calibri'; text-transform: uppercase; text-align: center; color: #ac7b46; background-color: #ac7b46;} .jgcontainer h1:nth-of-type(1) { margin-top: 0px; } .jgcontainer a:link, .jgcontainer a:active, .jgcontainer a:visited, .jgcontainer a:hover { color: #412f1b; text-decoration: none; font-style: none; font-weight: normal; letter-spacing: 1px; transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s;} .jgcontainer a:hover { color: #ac7b46!important; } </style> <center> <div style="width:520px; background-image:url(http://www.bankoboev.ru/fons/ODE5NA==/Bankoboev.Ru_struktura_dereva.gif); border-radius:40px; -webkit-border-radius:40px; -moz-border-radius:40px;"> <br> <div style="width:500px; height: 170px; background-image:url(http://funkyimg.com/i/ThXT.jpg); border-radius: 110px 110px 0px 0px; -khtml-border-radius:0px 0px 110px 110px -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 110px; -moz-border-radius-topright: 110px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-top-left-radius: 110px; -webkit-border-top-right-radius: 110px;"></div> <div style="text-align: left; width:480px; background-image:url(http://weblabfon.com/_ld/2/227_Texture0106.jpg); padding: 10px; border-radius: 0px 0px 110px 110px; -khtml-border-radius:110px 110px 0px0px -moz-border-radius-bottomleft:110px; -moz-border-radius-bottomright: 110px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -webkit-border-bottom-left-radius: 110px; -webkit-border-bottom-right-radius: 110px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; "> <center> <div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">вакансии</div><br><hr> <div class="jgcontainer"> <div class="jgtabs"> <div class="jgtab"> <input type="radio" id="jgtab-1" name="jgtab-group-1" checked=""> <label for="jgtab-1">администрация</label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">администрация</div></div> <div class="jgcontent"><br> » мэр города:<br><br> » заместитель мэра:<br><br> » судьи:<br><br> » гл.прокурор:<br><br> » зам. прокурора:<br><br> » адвокаты:<br><br> » юристы: <a href="https://irishflock.rusff.me/profile.php?id=188">Lissa Nolan</a><br><br> » следователи:<br><br> » шериф:<br><br> » агенты:<br><br> » секретари:<br><br> </div> <div class="jgtab"> <input type="radio" id="jgtab-2" name="jgtab-group-1"> <label for="jgtab-2"> медицина </label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">медицина</div></div> <div class="jgcontent"><br> » врачи различных отделений:<br><br> » парамедик: <a href="https://irishflock.rusff.me/profile.php?id=178">Logan Ryan</a><br><br> » невролог: <a href="https://irishflock.rusff.me/profile.php?id=186">Alfred Lloyd</a><br><br> » интерны: <br><br> » фельдшеры:<br><br> » лаборанты: <br><br> » ветеринары: <a href="https://irishflock.rusff.me/profile.php?id=180">Kimberly Fitzgerald</a><br><br> » психолог частной клиники: <a href="https://irishflock.rusff.me/profile.php?id=166">Caitríona Branagh</a><br><br> </div></div> <div class="jgtab"> <input type="radio" id="jgtab-3" name="jgtab-group-1"> <label for="jgtab-3"> образование</label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">образование</div></div> <div class="jgcontent"><br> » ректоры:<br><br> » школьные директора:<br><br> » учитель рисования в школе: <a href="https://irishflock.rusff.me/profile.php?id=185">Nicholas Branagh</a><br><br> » преподаватель английской литературы: <a href="https://irishflock.rusff.me/profile.php?id=187">Aedan O'Reilly</a><br><br> » воспитатели:<br><br> » нянечки:<br><br> » студенты: <a href="https://irishflock.rusff.me/profile.php?id=191">Olivia Brooks</a>, <a href="https://irishflock.rusff.me/profile.php?id=176">Dáiríne O’Donnell</a><br><br> » ученики:<br><br> » волонтеры:<br><br> » аспиранты:<br><br> </div></div> <div class="jgtab"><input type="radio" id="jgtab-4" name="jgtab-group-1"><label for="jgtab-4">досуг</label><div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">досуг</div></div><div class="jgcontent"><br> » владельцы ресторанов, кафе, клубов:<br><br> » арт-директор художественной галереи: <a href="https://irishflock.rusff.me/profile.php?id=44">Lilian Trevelian</a><br><br> » инвесторы:<br><br> » официанты:<br><br> » бармены:<br><br> » танцовщицы:<br><br> » стриптизеры:<br><br> » pr-агенты:<br><br> » инструктора:<br><br> » аниматоры:<br><br> » консьержи: <br><br> » хостесс:<br><br> » повара:<br><br> » ди-джеи:<br><br> </div></div> <div class="jgtab"><input type="radio" id="jgtab-5" name="jgtab-group-1"><label for="jgtab-5">искусство</label><div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">искусство</div></div><div class="jgcontent"><br> » арт-менеджер : <a href="https://irishflock.rusff.me/profile.php?id=176">Brendan Flynn</a><br><br> » художники:<br><br> » фотографы: <a href="https://irishflock.rusff.me/profile.php?id=164">Emmanuelle Martin</a><br><br> » музыканты:<br><br> » критики:<br><br> » дизайнеры:<br><br> » модели:<br><br> » маникенщицы:<br><br> » визажисты:<br><br> » стилисты:<br><br> » косметологи:<br><br> » парикмахеры:<br><br> » актеры:<br><br> » писатели:<br><br> » архитектора:<br><br> » тату-мастера:<br><br> </div></div> <div class="jgtab"> <input type="radio" id="jgtab-6" name="jgtab-group-1"> <label for="jgtab-6"> преступность</label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">преступность</div></div> <div class="jgcontent"><br> » дилеры:<br><br> » наркобароны:<br><br> » воры:<br><br> </div></div> <div class="jgtab"> <input type="radio" id="jgtab-7" name="jgtab-group-1"> <label for="jgtab-7">сми</label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">масс медиа</div></div> <div class="jgcontent"><br> » редактор в газете: <a href="https://irishflock.rusff.me/profile.php?id=189">Renan Faster</a><br><br> » журналисты:<br><br> » репортеры:<br><br> » телеведущие:<br><br> » операторы:<br><br> » режиссеры:<br><br> » звукооператоры:<br><br> </div></div> <div class="jgtab"> <input type="radio" id="jgtab-8" name="jgtab-group-1"> <label for="jgtab-8"> другое</label> <div class="jgcontainerheader"><div style="font-family: palatino linotype; font-size: 18px; letter-spacing: 1px; font-style: italic; color: #372503; text-shadow: #a79168 1px 1px 0px;">другое</div></div> <div class="jgcontent"><br> » то, что не вошло в предыдущие списки<br><br> »работник инвестиционной компании: <a href="https://irishflock.rusff.me/profile.php?id=40">Robert Lloyd</a><br><br> » уборщики:<br><br> » дворники: <br><br> » дворники:<br><br> » технологи:<br><br> » программисты:<br><br> » хакер: <a href="https://irishflock.rusff.me/profile.php?id=190">David Carter</a><br><br> » садовники:<br><br> » флористы:<br><br> » домохозяйка:<br><br> » курьеры:<br><br> » кинологи:<br><br> » переводчик: <a href="https://irishflock.rusff.me/profile.php?id=141">Albert Kelly</a><br><br> </div></div> </div></div> </div><hr><br><center><div style="font-family: palatino linotype; font-size: 14px; letter-spacing: 1px; color: #372503; ">шаблон для включения в список</div><br> » занимаемая должность: < a href ="ссылка на профиль" >имя персонажа< /a><br><br><br><br> </div><br></div>