Layer placemark description

by yurikhan

HTML

<div id="dark">
<div class="callout">
<div style='font-size: 13px; font-weight:bold; color:#0da5d7;'>СТИЛЬ ЖИЗНИ</div>
<div style='font-size: 12px; font-weight:bold; color:#0da5d7;'>Лимузин-тур, транспортная компания</div>
    <div style='font-size: 12px; font-weight:bold; color:#777777;'>Некрасова, 12, офис 3</div><BR />
<div style='font-size: 12px; font-weight:normal; color:#000000;'><b>Время работы:</b>
    <font color="black">Круглосуточно</font></div>
<div style='font-size: 12px; font-weight:norma;'><b>тел.</b>
    <font color="black">915-601, 915-602</font></div><BR />
<div style='font-size: 12px; font-weight:normal; color:#000000;'><b>Скидка:</b>
<span class="style1"><font color="black">10-25%</font> </span> </div></div>

<div class="callout">
<h1>Лимузин-тур, транспортная компания</h1>
<h2>Некрасова, 12, офис 3</h2>
<p><strong>Время работы:</strong> Круглосуточно</p>
<p>тел. 915-601, 915-602</p>
<p><strong>Скидка по карте «Стиль жизни»:</strong> 10–25%</p>
</div>
</div>

<div id="light">
<div class="callout">
<div style='font-size: 13px; font-weight:bold; color:#0da5d7;'>СТИЛЬ ЖИЗНИ</div>
<div style='font-size: 12px; font-weight:bold; color:#0da5d7;'>Лимузин-тур, транспортная компания</div>
    <div style='font-size: 12px; font-weight:bold; color:#777777;'>Некрасова, 12, офис 3</div><BR />
<div style='font-size: 12px; font-weight:normal; color:#000000;'><b>Время работы:</b>
    <font color="black">Круглосуточно</font></div>
<div style='font-size: 12px; font-weight:norma;'><b>тел.</b>
    <font color="black">915-601, 915-602</font></div><BR />
<div style='font-size: 12px; font-weight:normal; color:#000000;'><b>Скидка:</b>
<span class="style1"><font color="black">10-25%</font> </span> </div></div>

<div class="callout">
<h1>Лимузин-тур, транспортная компания</h1>
<h2>Некрасова, 12, офис 3</h2>
<p><strong>Время работы:</strong> Круглосуточно</p>
<p>тел. 915-601, 915-602</p>
<p><strong>Скидка по карте «Стиль жизни»:</strong> 10–25%</p>
</div>
</div>

CSS

.callout {
    font-family: Liberation Sans, Arial, sans;
    font-size: 10pt;
}

#dark, #light {
    display: inline-block;
}

#dark .callout {
    background-color: #4F4F4D;
    color: #ACACAC;
}
#light .callout {
    background-color: white;
    color: black;
    border: 1px solid gray;
}
.callout {
    padding: 0.5em 0.5em 1em;
    border-radius: 0.25em;
    width: 25em;
    margin-bottom: 1em; 
}

#dark h1 {
    color: #DFBC48;
}
#light h1 {
    color: #0da5d7;
}
h1 {
    font-size: 1.21em;
}
#dark h2 {
    color: #E3E3E1;
}
#light h2 {
    color: #777777;
}
h2 {
    font-size: 1.1em;
}
h1, h2 {
    margin-top: 0.25em;
    margin-bottom: 0em;
}
p {
    margin-top: 0.25em;
    margin-bottom: 0em;
}
h1+p, h2+p {
    margin-top: 1em;
}