[html]<div id="baraholka"><div id="shop" class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Вкладка 1">Торговая лавка</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Вкладка 2">Продовольствие и лекарства</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Вкладка 3">Галантерея и одежда</label>

    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="Вкладка 4">Оружие и инструмент</label>

    <input id="tab5" type="radio" name="tabs">
    <label for="tab5" title="Вкладка 5">Редкие товары</label>

    <section id="content-tab1">

<div id="dealer1"></div>
<div id="dealer2">Добро пожаловать на барахолку Варгас. Мы закупаем и продаём товары по всему Лонг-Айленду. Наш ассортимент обширен: от продуктов питания до очень редких вещей, приобрести которые возможно только наладив с нами приятельские отношения. Наш "прилавок" - это фургон, на котором мы разъезжаем по острову. Каждую неделю мы останавливаемся и в вашей местности. Мы продаём товары за местную валюту, но также можем согласиться на обмен — если заинтересуемся в предлагаемой вами вещи.<br />Мы — это: глава семьи Альфред <i>(пятьдесят семь лет, коренастое телосложение, седые волосы, всегда деловой тон)</i>; жена Эстер <i>(всё ещё очень красивая пятидесятиоднолетняя женщина с тёмными волосами, невысокая)</i>, старший сын Алехандро <i>(тридцать четыре года, настоящий латиноамериканский красавец)</i> и его супруга Каталина <i>(тридцатилетняя красотка с чёрными волосами)</i>, средний сын Густаво <i>(тридцать один год, симпатичный, с шикарной каштановой шевелюрой, очень юркий, ловкий и хитрый)</i>, младшая дочь Мария <i>(двадцатипятилетний цветок - нежная и ласковая девушка)</i>.</div>
<div id="dealer3">Члены семьи Варгас всегда по-деловому приветливы с посетителями барахолки, к покупателям уважительны. Но для обманщиков и грабителей "под их прилавками" припрятаны грубая сила и метко стреляющее оружие.
<div id="dealer3nameall"><div id="dealer3name">Альфредо</div><div id="dealer3name">Эстер</div><div id="dealer3name">Алехандро</div><div id="dealer3name">Густаво</div><div id="dealer3name">Мария</div><div id="dealer3name">Каталина</div></div></div>
<table class="tableshopdiler" style="width: 100%;">
<tbody><tr>
<td><div class="dealer4"><div id="dealer41">Уникальное предложение</div>
<div id="dealer42">Только на этой неделе вы сможете приобрести этот товар <i>(товар аккуратно разложен на деревянных ящиках, выставленных перед фургоном)</i>. Каждая вещь имеется исключительно в единственном экземпляре!
<! ------Уникальное предложение-----><div id="dealer422up">
<div id="dealer422"><img src="http://upforme.ru/uploads/001b/6f/15/3/t899937.png" title="Несмотря на достаточно потертый вид, байк полностью в рабочем состоянии. Двигатель работает как часы. Видимо, прошлый хозяин ухаживал за своим железным конем как надо." /><br />Старый байк, 5000$</div>
<div id="dealer422"><img src="http://upforme.ru/uploads/001b/6f/15/3/t656573.png" title="Переносной источник энергии. Не слишком мощный, но для зарядки или включения какого-нибудь небольшого устройства вполне подойдет." /><br />Топливный мини-генератор, 5000$</div>
<div id="dealer422"><img src="http://upforme.ru/uploads/001b/6f/15/3/t625047.png" title="Немного потрепанная временем карта острова Лонг-Айленд. Отпечатана еще до зомби-апокалипсиса, поэтому ее актуальность частично утрачена." /><br />Старая карта острова, 100$</div>
<div id="dealer422"><img src="http://upforme.ru/uploads/001b/6f/15/3/t665241.png" title="Незаменимая вещь для связи с другими выжившими. Рация поможет вам всегда оставаться в курсе событий, возможно, вы даже сможете поймать с ее помощью что-то интересное." /><br />Портативная рация, 1000$</div>
<div id="dealer422"><img src="http://upforme.ru/uploads/001b/6f/15/3/t770705.png" title="Курица собственного приготовления от нашей прекрасной Эстер. Уверены, попробовав ее однажды, вы станете нашим постоянным покупателем." /><br />Курица гриль от Эстер, 15$</div>
</div></div></div></td>
<td><div class="dealer5"><div id="dealer51">Игра в кости</div>
<div id="dealer52">Средний сын торговца, Густаво, заядлый игрок. От своей пагубной привычки он не отказался даже в зомби-постапокалипсис, поэтому посетителям барахолки каждый раз предлагает сыграть в кости. На один бросок Густаво готов поставить до десяти патронов. Сыграй с Густаво, испытай Госпожу Удачу на благосклонность (а выигрыш сможешь потратить на нужды или развлечения)!
<div id="dealer53">Правила: <i>кидаешь дайсы за себя; кидаешь дайсы за Густаво; у кого выпало большее значение, тот победил. Ход денежных средств контролирует Мастер Игры</i>.</div></div></td>
</tr>
</tbody>
</table>
    </section> 
    <section id="content-tab2">

<table class="tableshop" style="width: 100%;">
<tbody>
<tr>
<td><p><strong>Вода</strong></p>
<p>Чистая фильтрованная вода.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t761193.png" /><br />
<strong>1$</strong></p></td>
</tr>
<tr>
<td><p><strong>Консервы</strong></p>
<p>Продукт производства фермерского сообщества. Банки сделаны из переработанных материалов. Срок годности таких консервов не слишком большой, но зато они достаточно компактны и очень питательны.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t479790.png" /><br />
<strong>3$</strong></p></td>
</tr>
<tr>
<td><p><strong>Сырое мясо</strong></p>
<p>Свежий сырой продукт от самых честных поставщиков. Можно употреблять как самому, так и накормить им своего питомца. Также используется иногда в качестве приманки.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t570790.png" /><br />
<strong>3$</strong></p></td>
</tr>
<tr>
<td><p><strong>Спирт</strong></p>
<p>Важно-необходимая жидкость в период зомби-постапокалипсиса.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t38234.png" /><br />
<strong>5$</strong></p></td>
</tr>
<tr>
<td><p><strong>Обезболивающее</strong></p>
<p>Незаменимая вещь для любого выжившего. В наши дни достать достаточно сложно. Временно снимает любую боль, помогает забыть обо всех тяготах жизни.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t650469.png" /><br />
<strong>25$</strong></p></td>
</tr>
</tbody>
</table>

    </section>
    <section id="content-tab3">

<table class="tableshop" style="width: 100%;">
<tbody>
<tr>
<td><p><strong>Мех (шкура)</strong></p>
<p>Желаете утеплиться к зиме? Наш мех самый лучший на рынке. Ручная выделка от местных производителей!</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t487964.png" /><br />
<strong>15$</strong></p></td>
</tr>
<tr>
<td><p><strong>Рюкзак</strong></p>
<p>Что мы всегда берем с собой на вылазку? Конечно же, рюкзак! Наши рюкзаки необыкновенно вместительные, сделаны из прочного износостойкого материала, имеют множество дополнительных креплений под разные нужды хозяина. Увеличивает количество переносимых предметов до одиннадцати.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t487643.png" /><br />
<strong>50$</strong></p></td>
</tr>
<tr>
<td><p><strong>Легкий бронежилет</strong></p>
<p>Надежная локальная защита от укусов и враждебно настроенных выживших. Экземпляр фабричного производства. Ограниченная серия. Успевай приобрести по рыночной цене!</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t424582.png" /><br />
<strong>500$</strong></p></td>
</tr>
<tr>
<td><p><strong>Костюм с усиленной защитой</strong></p>
<p>Разработка местных мастеров. Такой костюм подойдет истинному ценителю острых ощущений. Защитит от значительного количества укусов зомби. Единственный минус – в нем вы станете чуточку медлительней.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t543895.png" /><br />
<strong>1000$</strong></p></td>
</tr>
<tr>
<td><p><strong>Фильтрующая маска</strong></p>
<p>Вы когда-нибудь задумывались, что эта штука вам может пригодиться? Нет? А зря! В какое время живем! Фильтрующие маски на любой вкус и цвет только у нас! Покупай и дыши свободно.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t473064.png" /><br />
<strong>2500$</strong></p></td>
</tr>
</tbody>
</table>

    </section>
    <section id="content-tab4">

<table class="tableshop" style="width: 100%;">
<tbody>
<tr>
<td><p><strong>Инструменты</strong></p>
<p>Сломалось авто? Нужно что-то срочно починить? У нас вы найдете то, что вам нужно. Ключи различных видов и размеров, фиксаторы и многое другое. Стоимость за 1 ед. товара.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t719132.png" /><br />
<strong>5$</strong></p></td>
</tr>
<tr>
<td><p><strong>Бензин</strong></p>
<p>Легко воспламеняющаяся горючая смесь. Поможет вам уехать на своем транспорте дальше или что-нибудь нещадно поджечь. Цена за литр.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t999475.png" /><br />
<strong>7$</strong></p></td>
</tr>
<tr>
<td><p><strong>Мачете</strong></p>
<p>Станет вашим незаменимым товарищем в борьбе против зомби. Несмотря на свои размеры – не занимает много места. Услуга заточки в подарок.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t306919.png" /><br />
<strong>250$</strong></p></td>
</tr>
<tr>
<td><p><strong>Пистолет</strong></p>
<p>Отличный приятель, который поможет вам поверить в себя. Чищен, смазан, готов к применению. Справится даже ребенок.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t111706.png" /><br />
<strong>250$</strong></p></td>
</tr>
<tr>
<td><p><strong>Автомат</strong></p>
<p>Отличная вещь для самообороны и самоутверждения. В знающих руках может творить чудеса. А автоматический огонь просто сказка.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t98897.png" /><br />
<strong>500$</strong></p></td>
</tr>
</tbody>
</table>

    </section>   

    <section id="content-tab5">

<table class="tableshop" style="width: 100%;">
<tbody>
<tr>
<td><p><strong>Элитный алкоголь</strong></p>
<p>Такое ты сейчас вряд ли где-нибудь найдешь! Самый эксклюзивный товар. Подойдет для истинных ценителей прекрасного!</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t441115.png" /><br />
<strong>50$</strong></p></td>
</tr>
<tr>
<td><p><strong>Яды</strong></p>
<p>Действенное средство против любой «заразы». Эффект уже после первого применения.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t888340.png" /><br />
<strong>100$</strong></p></td>
</tr>
<tr>
<td><p><strong>Взрывчатка</strong></p>
<p>Эта малышка может справится не только с толпой зомби, но и с любыми преградами. Очень опасна и непредсказуема.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t751475.png" /><br />
<strong>500$</strong></p></td>
</tr>
<tr>
<td><p><strong>Наркотики</strong></p>
<p>Псс… Только тихо! У нас есть кое-что интересное для тебя. Поможет расслабиться и добавить в жизнь новые краски. Осторожно, вызывает привыкание!</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t566035.png" /><br />
<strong>500$</strong></p></td>
</tr>
<tr>
<td><p><strong>Раб</strong></p>
<p>Знаешь, друг, есть тут еще один интересный товарчик. Встретили недавно на дороге, говорит, забирайте – делайте что хотите, главное, кормите. Он пока нам с товаром помогает, но если хочешь, по старой дружбе можем и уступить.</p></td>
<td><p><img src="http://upforme.ru/uploads/001b/6f/15/3/t209218.png" /><br />
<strong>25000$</strong></p></td>
</tr>
</tbody>
</table>

    </section>   
</div></div>

<style>
#baraholka {
    width: 100%;
    height: 420px;
    overflow: hidden !important;
}
div#shop {
    width: 100%;
    height: auto;
}
div#shop.tabs {
    width: 100%;
    padding: 0px;
    margin: 0 auto;
}
div#shop.tabs>section {
    display: none;
    width: calc(100% - 32px);
    height: 345px;
    padding: 15px 15px 5px 15px;
    background: #1a1a1a;
    border: 1px solid #000000;
    font: 100 13px Cuprum;
    overflow-y: scroll;
}
div#shop.tabs>section>p {
    margin: 0 0 5px;
    line-height: 1.5;
    color: #ffffff;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
}
@keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
}
div#shop.tabs>input {
    display: none;
    position: absolute;
}
div#shop.tabs>label {
    display: table-cell;
    font: 100 12px Cuprum;
    width: 2%;
    height: 40px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    color: #cbcbcb;
    text-shadow: 1px 1px 1px #000000;
    background: #101010;
    transition: 1s;
    vertical-align: middle !important;
    outline: 1px solid #202a20;
}

div#shop.tabs>label:hover {
    color: #fff;
    cursor: pointer;
    background: #1e1e1e;
    transition: 1s;
}
div#shop.tabs>input:checked+label {
    color: #ffff;
    background: #213021;
}
div#shop #tab1:checked~#content-tab1, div#shop #tab2:checked~#content-tab2,
div#shop #tab3:checked~#content-tab3, div#shop #tab4:checked~#content-tab4, div#shop #tab5:checked~#content-tab5 {
display: block;
}
table.tableshop {
    outline: 5px solid #141414;
    outline-offset: 2px;
    border: 2px solid #262626;
}
table.tableshop td {
    border-color: transparent;
    background: #0e0e0e;
    margin: 3px;
    outline: 2px solid #1a1a1a;
    height: 55px !important;
    vertical-align: middle;
    text-align: center;
}
table.tableshop td:nth-child(2n) {
    width: 20%;
}
table.tableshop p {
    line-height: 1 !important;
    color: #cdccc3;
    font: 100 12px Cuprum;
}
table.tableshop td:nth-child(odd) {
    overflow-y: scroll;
    text-align: left;
}
table.tableshop td:nth-child(odd) strong {
    color: #88b180;
    border-bottom: 2px solid #6c8f66;
    margin-bottom: 2px;
}
div#dealer1 {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    background: url(http://upforme.ru/uploads/001b/6f/15/2/167947.jpg) center center no-repeat #141414;
    border: 1px solid #202020;
}
div#dealer2 {
    position: relative;
    display: block;
    top: -150px;
    left: 0;
    width: 32%;
    padding: 0.5%;
    margin: 5px;
    font-size: 1.4vw;
    height: 128px;
    font-weight: 100;
    font-family: "Cuprum";
    overflow-y: auto;
    color: #ffffff;
    line-height: 1.1;
    opacity: 0.65;
}
div#dealer3 {
    position: relative;
    display: block;
    top: auto;
    margin-top: -285px !important;
    right: -68%;
    width: 30%;
    margin: 5px;
    font-size: 1.2vw;
    height: 130px;
    font-weight: 100;
    font-family: "Cuprum";
    overflow-y: hidden;
    color: #d1d1d1;
    line-height: 1.1;
}
table.tableshopdiler {
    display: block;
    height: auto;
    position: relative;
    margin-top: 20px;
}
table.tableshopdiler td {
    width: 50%;
    height: auto;
    border: 1px solid #212121;
    background: #141414;
    box-shadow: 0 0 0 3px #0e0e0e inset;
}
#dealer4, #dealer5 {
    height: 130px;
    background: #141414;
    border: 22px solid #202020;
}
div#dealer41, div#dealer51 {
display: block;
    font-size: 1.6vw;
    width: 98%;
    height: 2vw;
    margin: 1%;
    background: #2e4027;
    text-align: center;
    color: #ffffff;
}
div#dealer42, div#dealer52 {
    display: inline-block;
    font-size: 1.3vw;
    width: 98%;
    height: 14vw;
    margin: 1%;
    text-align: justify;
    color: #dbdbdb;
    overflow-y: autol;
}
div#dealer53 {
position: relative;
    display: block;
    width: 95.6%;
    height: 3vw;
    padding: 1vw;
    top: 1.3vw;
    background: url(http://upforme.ru/uploads/001b/6f/15/2/734338.jpg) center no-repeat;
    background-size: cover;
    color: transparent;
    transition: 1s;
    outline: 3px solid #212121;
    outline-offset: -3px;
}
div#dealer53:hover {
    background: #080808;
    color: #ffffff;
    transition: 1s;
}
div#dealer3nameall {
    border-top: 3px solid #475c2f7d;
    margin-top: 1vw;
    padding-top: 1vw;
    text-align: center;
}
div#dealer3nameall div {
    display: inline-block;
    width: 4vw;
    margin: 0.2vw 0.2vw;
    height: 7vw;
    background: #000000;
    text-align: center;
    font-size: 0.9vw;
    box-shadow: inset 0 1vw 0 0 #000000e8;
}
div#dealer3nameall div:nth-child(1) {
    background: url(https://cdnn21.img.ria.ru/images/07e5/0 … b7bc42.jpg) center;
    background-size: cover;
}
div#dealer422up {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1vw;
}
div#dealer422 {
    display: table-cell;
    width: 8.5vw;
    height: 7.4vw;
    text-align: center;
    vertical-align: middle;
    background: #000000;
    border: 0.5vw solid #0c0c0c;
    color: #919789;
    font-size: 1.2vw;
}
div#dealer422 img {
    width: 38px;
    height: 38px;
}
</style>
[/html][hideprofile]