*
{
    margin: 0; padding: 0;
}
body
{
    font-family: 'Comic Sans MS', arial, sans-serif;
    background-color: #808080;
}
div#paul
{
    display: block; position: fixed; z-index: 1000;
    left: 0px; bottom: 0px; width: 160px; height: 480px;
    margin: -240px 6px 0 6px;
    background: url("../img/paul.png") no-repeat left top;
}
@media ( max-height: 480px )
{   div#paul    {   top: 0px !important; bottom: auto !important; margin-top: 0 !important; }   }
@media ( max-width: 360px )
{   div#paul    {   top: auto !important; bottom: -280px !important; left: 0px !important; }    }

ul
{
    display: block; box-sizing: border-box; -moz-box-sizing: border-box;
    width: 100%; height: 100%;
    padding: 0 0 0 172px;
    list-style: none outside none;
}
@media ( max-width: 360px )
{
    ul  {   padding: 0 !important;  }
    ul > li { min-width: 256px !important; }
    ul > li:last-child  {   height: 352px !important; border-bottom: 160px solid #808080 !important;    }
    ul > li > div { left: 150px !important; }
}

li
{
    display: table; float: left; position: relative;
    box-sizing: border-box; -moz-box-sizing: border-box;
    min-width: 204px; height: 192px;
    padding: 8px 8px 40px 8px;
}
@media ( min-width: 1192px )
{   li  {   width: 20% !important;  }   }
@media ( min-width: 988px ) and ( max-width: 1191px )
{   li  {   width: 25% !important;  }   }
@media ( min-width: 784px ) and ( max-width: 987px )
{   li  {   width: 33% !important;  }   }
@media ( min-width: 580px ) and ( max-width: 783px )
{   li  {   width: 50% !important;  }   }
@media ( max-width: 579px )
{   li  {   width: 100% !important; }   }

li > p
{
    display: table-cell;
    margin: 8px; padding: 16px 16px;
    border: 3px solid #000; border-radius: 32px;
    font-style: italic;
    text-align: center; vertical-align: middle;
    background-color: #fff;
}
li > p.sound
{
    font-style: normal;
}
li.active > p
{
    background-color: #f0fff0;
}
li > div
{
    display: block; position: absolute;
    left: 16px; top: 149px; width: 64px; height: 32px;
    background: url("../img/bubble.png") no-repeat left top;
}
li.active > div
{
    background-position: -64px 0;
}