<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

<style type="text/css">
/*********** colours
january garnet 701627 
february amythest 793268
march aquamarine 6BCAE2
april diamond E5EBF2
may emerald 248868
june lt amythest E6CCFF
july ruby 8F0732
august peridot ACDA2D
september sapphire 1E5192
october rose FF404B
november topaz FFE675
december blue zircon 10859B
***********/
 .nicole-tracker {
    width: 500px;
    background-color: white;
    border: 15px solid #f1f1f1;
    outline: 1px solid #ddd;
    margin: 5px auto;
    overflow: auto;
    font: normal normal normal 11px/120% 'Source Sans Pro', sans-serif;
    text-align: center;
    color: #222;
    position: relative;
}
.nicole-tracker a {
    text-decoration: none;
    color: #666;
    font: normal normal bold 0.9em/100% 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    padding: 2px;
    margin: 0 5px 0 0;
}
.nicole-tracker a:hover {
    color: #666!important;
}
.nicole-tracker h1 {
    font: normal normal bold 34px/100% 'Source Sans Pro', sans-serif;
    letter-spacing: -1px;
    margin: 20px 0 0;
    text-transform: lowercase;
}
.nicole-tracker h2, .nicole-tracker h3 {
    text-transform: uppercase;
    font: italic normal normal 12px/100% 'Source Sans Pro', sans-serif;
    letter-spacing: 3px;
    margin: 3px 50px 30px;
    text-align: left;
}
.nicole-tracker p.float-left {
    margin: 10px 317px 10px 8px;
    background-color: #f1f1f1;
    padding: 10px;
}
.nicole-tracker ul.months {
    list-style: none;
    margin: 0 300px 5px 5px;
    padding: 0;
    overflow: auto;
    clear: left;
}
.nicole-tracker ul.months li {
    width: 52px;
    padding: 18px 0 0;
    height: 52px;
    box-sizing: border-box;
    background-color: transparent;
    outline: 2px solid #f1f1f1;
    box-shadow: inset 0 0 0 0 #f1f1f1, inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-in-out;
    text-align: center;
    margin: 4px;
    float: left;
    font-weight: normal;
    font-size: 14px;
    color: #ddd;
}
.nicole-tracker ul.months li:hover {
    box-shadow: inset 0 0 0 110px #f1f1f1, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.nicole-tracker ul.months li.active {
    color: #ccc;
    outline-color: #ccc;
}
/* JANUARY */
 .nicole-tracker ul.months li.jan:hover {
    box-shadow: inset 0 0 0 110px #701627, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #701627;
}
/* FEBRUARY */
 .nicole-tracker ul.months li.feb:hover {
    box-shadow: inset 0 0 0 110px #793268, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #793268;
}
/* MARCH */
 .nicole-tracker ul.months li.mar:hover {
    box-shadow: inset 0 0 0 110px #6BCAE2, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #6BCAE2;
}
/* APRIL */
 .nicole-tracker ul.months li.apr:hover {
    box-shadow: inset 0 0 0 110px #afcdf0, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #afcdf0;
}
/* MAY */
 .nicole-tracker ul.months li.may:hover {
    box-shadow: inset 0 0 0 110px #248868, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #248868;
}
/* JUNE */
 .nicole-tracker ul.months li.jun:hover {
    box-shadow: inset 0 0 0 110px #bf9fdf, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #bf9fdf;
}
/* JULY */
 .nicole-tracker ul.months li.jul:hover {
    box-shadow: inset 0 0 0 110px #ab0010, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #ab0010;
}
/* AUGUST */
 .nicole-tracker ul.months li.aug:hover {
    box-shadow: inset 0 0 0 110px #ACDA2D, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #ACDA2D;
}
/* SEPTEMBER */
 .nicole-tracker ul.months li.sep:hover {
    box-shadow: inset 0 0 0 110px #1E5192, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #1E5192;
}
/* OCTOBER */
 .nicole-tracker ul.months li.oct:hover {
    box-shadow: inset 0 0 0 110px #FF404B, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #FF404B;
}
/* NOVEMBER */
 .nicole-tracker ul.months li.nov:hover {
    box-shadow: inset 0 0 0 110px #FFC87C, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #FFC87C;
}
/* DECEMBER */
 .nicole-tracker ul.months li.dec:hover {
    box-shadow: inset 0 0 0 110px #10859B, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline-color: #10859B;
}
.nicole-tracker ul.links {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    height: 292px;
    width: 300px;
    bottom: 8px;
    right: 8px;
    outline: 1px solid #f1f1f1;
    text-align: justify;
    box-sizing: border-box;
}
.nicole-tracker ul.links li {
    display: none;
    background-color: transparent;
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding-right: 4px;
    overflow: auto;
}
.nicole-tracker ul.links li.current {
    display: block;
}
.nicole-tracker ul.links li h1 {
    text-align: right; 
    margin: 0;
    position: relative;
    font-size: 28px;
}
.nicole-tracker ul.links li h3 {
    text-align: center; 
    margin: 8px 0 3px;
    position: relative;
}
.nicole-tracker ul.links li.jan h1, .nicole-tracker ul.links li.jan a {
    color: #701627;
}
.nicole-tracker ul.links li.feb h1, .nicole-tracker ul.links li.feb a {
    color: #793268;
}
.nicole-tracker ul.links li.mar h1, .nicole-tracker ul.links li.mar a {
    color: #6BCAE2;
}
.nicole-tracker ul.links li.apr h1, .nicole-tracker ul.links li.apr a {
    color: #afcdf0;
}
.nicole-tracker ul.links li.may h1, .nicole-tracker ul.links li.may a {
    color: #248868;
}
.nicole-tracker ul.links li.jun h1, .nicole-tracker ul.links li.jun a {
    color: #bf9fdf;
}
.nicole-tracker ul.links li.jul h1, .nicole-tracker ul.links li.jul a {
    color: #8F0732;
}
.nicole-tracker ul.links li.aug h1, .nicole-tracker ul.links li.aug a {
    color: #ACDA2D;
}
.nicole-tracker ul.links li.sep h1, .nicole-tracker ul.links li.sep a {
    color: #1E5192;
}
.nicole-tracker ul.links li.oct h1, .nicole-tracker ul.links li.oct a {
    color: #FF404B;
}
.nicole-tracker ul.links li.nov h1, .nicole-tracker ul.links li.nov a {
    color: #FFE675;
}
.nicole-tracker ul.links li.dec h1, .nicole-tracker ul.links li.dec a {
    color: #10859B;
}
.nicole-tracker ::-webkit-scrollbar {
    width: 3px;
    height: 1px;
}
.nicole-tracker ::-webkit-scrollbar-track {
    background-color: #ddd;
    border: 1px solid white;
}
.nicole-tracker ::-webkit-scrollbar-thumb {
    background-color: #ddd;
}
</style>
<div class="nicole-tracker">
     nicole&rsquo;s coding portfolio

     <h2 class="month">this will overwrite automatically</h2>

    <p class="float-left">Click each square to view a month's activity.</p>
    <ul class="months">
        <li class="jan">A-B</li>
        <li class="feb">C-D</li>
        <li class="mar">E-F</li>
        <li class="apr">G-H</li>
        <li class="may">I-J</li>
        <li class="jun">K-L</li>
        <li class="jul">M-N</li>
        <li class="aug">O-P</li>
        <li class="sep">Q-R</li>
        <li class="oct">S-T</li>
        <li class="nov">U-V-W</li>
        <li class="dec">X-Y-Z</li>
    </ul>
    <ul class="links">
        <li class="jan">
            <h1>January</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="feb">
            <h1>February</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="mar">
            <h1>March</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="apr">
            <h1>April</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="may">
            <h1>May</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="jun">
            <h1>June</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="jul">
            <h1>July</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> title <br />
            <a href="link">link</a> title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> description <br />
            <a href="link">link</a> description <br />
            <a href="link">link</a> description <br />
            
        </li>
        <li class="aug">
            <h1>August</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="sep">
            <h1>September</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="oct">
            <h1>October</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="nov">
            <h1>December</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
        <li class="dec">
            <h1>January</h1>
            
            <h3>coding resources</h3>
            <a href="link">link</a> - title <br />
            <a href="link">link</a> - title <br />
            
            <h3>coding help</h3>
            <a href="link">link</a> - information <br />
            
            <h3>coding requests</h3>
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            <a href="link">link</a> - description <br />
            
        </li>
    </ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
    var today = new Date();
    var month = today.getMonth() + 1;
    var year = today.getFullYear();

    var past = year - 1;


    if (month === 1) {
        $('.nicole-tracker h2').html('Currently January ' + year);
        $('.nicole-tracker ul.months li.jan').addClass('current active');
        $('.nicole-tracker ul.links li.jan').addClass('current active');
        $('.nicole-tracker ul.links li.jan').nextUntil().addClass('this');
    } else if (month === 2) {
        $('.nicole-tracker h2').html('Currently February ' + year);
        $('.nicole-tracker ul.months li.feb').addClass('current active');
        $('.nicole-tracker ul.links li.feb').addClass('current active');
    } else if (month === 3) {
        $('.nicole-tracker h2').html('Currently March ' + year);
        $('.nicole-tracker ul.months li.mar').addClass('current active');
        $('.nicole-tracker ul.links li.mar').addClass('current active');
    } else if (month === 4) {
        $('.nicole-tracker h2').html('Currently April ' + year);
        $('.nicole-tracker ul.months li.apr').addClass('current active');
        $('.nicole-tracker ul.links li.apr').addClass('current active');
    } else if (month === 5) {
        $('.nicole-tracker h2').html('Currently May ' + year);
        $('.nicole-tracker ul.months li.may').addClass('current active');
        $('.nicole-tracker ul.links li.may').addClass('current active');
    } else if (month === 6) {
        $('.nicole-tracker h2').html('Currently June ' + year);
        $('.nicole-tracker ul.months li.jun').addClass('current active');
        $('.nicole-tracker ul.links li.jun').addClass('current active');
    } else if (month === 7) {
        $('.nicole-tracker h2').html('Currently July ' + year);
        $('.nicole-tracker ul.months li.jul').addClass('current active');
        $('.nicole-tracker ul.links li.jul').addClass('current active');
    } else if (month === 8) {
        $('.nicole-tracker h2').html('Currently August ' + year);
        $('.nicole-tracker ul.months li.aug').addClass('current active');
        $('.nicole-tracker ul.links li.aug').addClass('current active');
    } else if (month === 9) {
        $('.nicole-tracker h2').html('Currently September ' + year);
        $('.nicole-tracker ul.months li.sep').addClass('current active');
        $('.nicole-tracker ul.links li.sep').addClass('current active');
    } else if (month === 10) {
        $('.nicole-tracker h2').html('Currently October ' + year);
        $('.nicole-tracker ul.months li.oct').addClass('current active');
        $('.nicole-tracker ul.links li.oct').addClass('current active');
    } else if (month === 11) {
        $('.nicole-tracker h2').html('Currently November ' + year);
        $('.nicole-tracker ul.months li.nov').addClass('current active');
        $('.nicole-tracker ul.links li.nov').addClass('current active');
    } else {
        $('.nicole-tracker h2').html('Currently December ' + year);
        $('.nicole-tracker ul.months li.dec').addClass('current active');
        $('.nicole-tracker ul.links li.dec').addClass('current active');
    }

    $('.nicole-tracker').each(function () {

        $(this).find('ul.links li.current').nextUntil().addClass('last');
    });

    $('.nicole-tracker ul.links li').each(function () {
        if ($(this).hasClass('jan')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('01/' + past);
            } else {
                $(this).children('h1').html('01/' + year);
            }
        } else if ($(this).hasClass('feb')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('02/' + past);
            } else {
                $(this).children('h1').html('02/' + year);
            }
        } else if ($(this).hasClass('mar')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('03/' + past);
            } else {
                $(this).children('h1').html('03/' + year);
            }
        } else if ($(this).hasClass('apr')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('04/' + past);
            } else {
                $(this).children('h1').html('04/' + year);
            }
        } else if ($(this).hasClass('may')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('05/' + past);
            } else {
                $(this).children('h1').html('05/' + year);
            }
        } else if ($(this).hasClass('jun')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('06/' + past);
            } else {
                $(this).children('h1').html('06/' + year);
            }
        } else if ($(this).hasClass('jul')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('07/' + past);
            } else {
                $(this).children('h1').html('07/' + year);
            }
        } else if ($(this).hasClass('aug')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('08/' + past);
            } else {
                $(this).children('h1').html('08/' + year);
            }
        } else if ($(this).hasClass('sep')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('09/' + past);
            } else {
                $(this).children('h1').html('09/' + year);
            }
        } else if ($(this).hasClass('oct')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('10/' + past);
            } else {
                $(this).children('h1').html('10/' + year);
            }
        } else if ($(this).hasClass('nov')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('11/' + past);
            } else {
                $(this).children('h1').html('11/' + year);
            }
        } else if ($(this).hasClass('dec')) {
            if ($(this).hasClass('last')) {
                $(this).children('h1').html('12/' + past);
            } else {
                $(this).children('h1').html('12/' + year);
            }
        } else {}
    });

    $('.nicole-tracker ul.months li').click(function () {
        if ($(this).hasClass('active')) {} else if ($(this).hasClass('jan')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.jan').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.jan').addClass('active');
        } else if ($(this).hasClass('feb')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.feb').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.feb').addClass('active');
        } else if ($(this).hasClass('mar')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.mar').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.mar').addClass('active');
        } else if ($(this).hasClass('apr')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.apr').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.apr').addClass('active');
        } else if ($(this).hasClass('may')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.may').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.may').addClass('active');
        } else if ($(this).hasClass('jun')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.jun').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.jun').addClass('active');
        } else if ($(this).hasClass('jul')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.jul').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.jul').addClass('active');
        } else if ($(this).hasClass('aug')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.aug').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.aug').addClass('active');
        } else if ($(this).hasClass('sep')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.sep').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.sep').addClass('active');
        } else if ($(this).hasClass('oct')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.oct').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.oct').addClass('active');
        } else if ($(this).hasClass('nov')) {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.nov').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.nov').addClass('active');
        } else {
            $(this).parents('ul').siblings('ul.links').children('li').fadeOut(500);
            $(this).parents('ul').siblings('ul.links').children('li.dec').delay(600).fadeIn(500);
            $(this).siblings('li').removeClass('active');
            $(this).parents('ul').children('li.dec').addClass('active');
        }
    });

});
</script></div>

<!--HTML-->
<center>
<dic class="classic">
<div class="rap">хочу к вам.</div>
<div class="hephap">когда ты просыпаешься, остается только реальность. <br>сны тем и страшны, что всему приходит конец.</div><br>
<div class="rap2">Ты попал: в город Портленд, штат Орегон, США<br>
Рейтинг: NC-21<br><br>
Здесь пахнет алкоголем, играет музыка и россыпью бородатые шутки. Точно знают, какой сорт алкоголя ты предпочитаешь. Любят травить старинные байки и городские легенды, которым сложно поверить. Готовы слушать и вовремя кивать, даже когда твоё настроение совсем на нуле. У нас принято оставлять на чай и принимать каждого, как своего. Расслабься, ты уже в банде. И мы сделаем всё в лучшем виде.<br><br>
Держим тебе внешность <b>2 суток</b>. Можем продлить на <b>1 сутки</b>. Будь внимателен - у нас есть <b>выкупленные имена</b>, их хозяева не хотят повторений.
</div>
<div class="code-box" style="width:440px;"><strong class="legend"><a href="#" onclick="select_text(this.parentNode.parentNode.childNodes[1].getElementsByTagName('pre')[0]); return false;">Выделить код</a></strong><div class="blockcode"><div class="scrollbox" style="height: 100%; text-align:left;"><pre>[align=center][font=Palatino Linotype][size=14]YOU ARE HERE[/size]
[size=10]фамилия, имя [/size][/font][/align]

[align=center][font=Palatino Linotype][size=14]TELL ME YOUR STORY [/font][/size]
[size=10][font=Palatino Linotype]каким вы видите Вашего персонажа[/font][/size][/align]

[align=center][size=14][font=Palatino Linotype]COMING HOME[/font][/size]
[size=10][font=Palatino Linotype]дополнительная информация. связь с Вами[/font][/size][/align]</pre></div></div></div>
<br><br><br></div>
</center>

111

<!--HTML-->
<div id="ferbag"><h2 style="padding-bottom: 2px">

the<b>title</b>goeshere
 
</h2><div id="phineasag">

here's a signature! any text you'd like will go here! <3

<p></p>

<h4>+ note</h4>
<h4>+ note</h4>
<h4>+ note</h4>

</div><h2></h2>

<div class="agentperryag"> <! up to SIX links !>
 
 <a href="link" title="titleoflink"><span class="fa fa-home"></span></a>
 
 <a href="link" title="titleoflink"><span class="fa fa-folder"></span></a>
 
 <a href="link" title="titleoflink"><span class="fa fa-comment"></span></a>
 
 <a href="link" title="titleoflink"><span class="fa fa-heart"></span></a>
 
 <a href="link" title="titleoflink"><span class="fa fa-user-plus"></span></a>
 
 <a href="link" title="link6"><span class="fa fa-tags"></span></a>
 
 <! DO not EDIT PAST HERE !>
<a href="http://is.gd/shadowplay" title="thank you agnes (silentstorm_) @ shadowplay!"><span class="fa fa-thumbs-up"></span></a></div></div><link href='https://fonts.googleapis.com/css?family=Work+Sans:400,600' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><style type="text/css">
 #ferbag { margin: 30px auto; width: 320px; height: 150px; font-family: 'Work Sans', sans-serif; font-weight: 400; padding: 10px 0px; line-height: 100% }
 #ferbag h2 { font-size: 22px; color: #F34425; text-shadow: -2px 0px #fff, 2px 0px #6DDEEE; font-weight: 400; letter-spacing: -2px; margin: 0px 25px; padding: 0px 0px 0px 40px; border-bottom: 1px #F34425 solid }
 #phineasag { margin: 0px auto; padding: 10px 20px; border-bottom: 15px rgba(109,222,238,1) solid; height: 60; width: 200px; background-color: #fff; overflow-y: auto; overflow-x: hidden; font-size: 10px; line-height: 110% }
 #phineasag h4 { font-weight: 600; font-size: 12px; letter-spacing: -0.5px; background-color: rgba(243,68,37,0.5);  color: #fff; padding: 2px 3px; margin: 2px 15px; line-height: 95% }
 #phineasag h4:nth-child(even) { background-color: rgba(109,222,238,0.7) }
 #phineasag::-webkit-scrollbar { width: 2px; background-color: rgba(243,68,37,0.5); border: 0.5px #fff solid }
 #phineasag::-webkit-scrollbar-thumb { background-color: rgba(109,222,238,1); border: none }
 #phineasag b, #ferb b { font-weight: 600 }
 .agentperryag { overflow: hidden; text-align: center; margin: 0px auto; margin-top: -12px; width: 187px;  line-height: 200% }
 .agentperryag a { font-size: 10px; background-color: #F34425; color: #fff; padding: 4px; margin: 0px }
 .agentperryag a:nth-child(even) { background-color: #fff; padding: 3px; color: #F34425; border: 1px #F34425 solid }
 .agentperryag a:hover { background-color: #6DDEEE; border: none; border-bottom: 1px #f34425 solid; padding: 4px; padding-bottom: 3px; color: #fff }
</style>

<!--HTML-->
<center>

<div class="mystory""><div style="padding: 20px; ">
<div class="rap">

ИМЯ НА АНГЛИЙСКОМ ЯЗЫКЕ

</div>
<div class="hephap1">

ВНЕШНОСТЬ;

</div>
<br>
<img src="ВАШЕ ИЗОБРАЖЕНИЕ 245 ПО ШИРИНЕ"> <img src="ВАШЕ ИЗОБРАЖЕНИЕ 245 ПО ШИРИНЕ">
<div class="mystory1">
→ Все местные меня знают, как - <b>ИМЯ НА РУССКОМ ЯЗЫКЕ</b><br>
→ Мне наливают, потому что в паспорте - <b>ВОЗРАСТ, ДАТА РОЖДЕНИЯ</b><br> 
→ Зарабатываю деньги - <b>ДОЛЖНОСТЬ</b><br>
→ Всегда обращаю внимание на - <b>МУЖЧИН/ЖЕНЩИН</b>
</div>
<br>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<div class="mystory2"> <div class="rap9">исповедь бармену</div>
<br>

БИОГРАФИЯ И ХАРАКТЕР В СВОБОДНОЙ ФОРМЕ


<div class="rap9">вопрос</div>
<br><center>

ВАШ ОТВЕТ

</center>
<div class="rap9">контакты</div>
<table><tr><td align="center"><div class="linkbox1">ВАШЕ ИМЯ</div></td> <td align="center"><div class="linkbox2">СВЯЗЬ С ВАМИ</div></td></tr></table>
<a href="/" onClick="op('div1'); return false;"><center><div class="linkbox3">пример поста</div></center></a>
<div id="div1" style="display:none">ЗДЕСЬ ПРОБНЫЙ ПОСТ
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст  текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div></div></center> </div>

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {


  }
.ttable-main { margin-left: -25px;
}



/* A2.3 */
.punbb ul { background-image: url(картинка );
background-repeat : no-repeat;
background-position: bottom right;}
.punbb dd, .punbb dl, .punbb li,  .punbb dt {
  padding: 0px;
  list-style: none;
font-family: solid; 
font-size: 12px; 
letter-spacing: 0px; 
color: #534e28; 


  }

}

li.pa-fld4 {
width: 200px;
}
.post-author ul li.pa-fld4 {text-align:justify;}

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 92.01%;
  }

/* A3.2 */
.punbb {
  font: normal 70.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb th {
  font-size: 1em;
  font-weight: normal;

  }
.punbb table{
 height: 190px;
  font-size: 1em;
  font-weight: normal;
  width: 850px;
margin-left: -10px;

}
/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }


/* A3.7 */
.punbb address, .punbb em {
  font-style: NautilusPompilius
  }

/* A3.8 */
.punbb .post-content em {
  font-style: NautilusPompilius
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }
/* A5 Basic page layout and borders
-------------------------------------------------------------*/
/* A5.1 */
#pun {
  position: center top;
  width:  1043px;
  margin: auto;


  }

/* A5.2 */
.punbb {
  float: none;
  height: auto;
  width: 925px;
  position: center top;
  margin-left: 70px;}


/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

#pun-redirect .main-title {    
    font-size: 0em;   }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 0px;
  width: 96%;
  }

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
  }
/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none none solid none;
  border-width: 0px 0px 2px 0px
  }

/* A5.9 */
.punbb .container {
  border-style: solid;
  border-width: 1px;
margin-left: 6px;
margin-top: 3px;
  }

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
  }


/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
height: auto;
  border-top: 1px solid #432113;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #738C27;
  border-bottom: 1px solid #738C27;
  border-left: solid 6px #738C27;
  border-right: solid 6px #738C27;
background: rgba(69, 190, 43, 0.09);
  border-radius: 25px;
padding: 7px;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: none;
  border-width: 1px;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
 height: 100%;
  margin: 0;

  }


/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;

  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 57%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  background-color: transparent;
  text-align: center;
  width: 5%;
  }

/* C2.3 */
.punbb .main .tcr {
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  width: 32%;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
background-color: transparent;
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
background-color: transparent;
  text-align: center;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
background-color: transparent;
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
background-color: transparent;
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
padding-bottom: 1px;
color: #1A150A;
font: 18px/11px Impact;
text-transform: lowercase;
width: 440px;
text-align: center;
text-shadow: #FFFFFF 1px 1px;
margin-bottom: 0px;
margin-top: 2px;

  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
    .punbb .main .tcl {
      border-left-style: none;
      border-left-width: 0
      }

    * html .tclcon {height: 1px}

    /* C2.14 */
    .punbb td div.tclcon {
  margin-left: 15px;
  font-size: 11px;
  width: 430px;
   border-top: 1px solid #632336;
  border-bottom: 1px solid #632336;
  border-left: solid 6px #632336;
  border-right: solid 6px #632336;
  text-shadow: rgba(249, 242, 242, 0.94) 1px 1px 0px;
  border-radius: 25px;
box-shadow: 0 0 2px rgba(0,0,0,0.4);
  padding: 8px;
line-height: 12px;
 background-color: #e5e1b5;
  
}
    /* C2.15 */
    .punbb div.icon {
        float: left;
        display: block;
        width: 60px;
        height: 60px;
        margin-top: 12px;}
 /* C3 Topics

-------------------------------------------------------------*/
#pun-title, #pun-navlinks {
  border-color: #202021 ;
}



/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
  border-color:  transparent;
  }


/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent;

  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent ;

  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;

  }

/* CS2.5 */
.punbb th {
  border-color: transparent ;

  }


/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #d6d6d6;

  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent;

  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent ;

  }

.punbb .divider {
  border-color: transparent;

  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid transparent ;

  }

li.pa-online {
  border-left-color: transparent ;

  }








/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  }

/* C3.3 */
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }


/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
  overflow: hidden;
 margin-left: -7px; }


/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
  }

/* C3.7 */

 .pa-author {
  font-size: 1.1em;
  font-weight: bold;
margin-top: -5px; 
  }

/* C3.8 */
.pa-author a, li#profile-name {
text-decoration: none;
color: #D7C89E !important;
font-size: 13px;
padding-bottom: 1px;
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.2em;
 font-style: italic;



  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */


.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 16em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: NautilusPompilius;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }
/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin-bottom: 100px;
  border-style: none none none none;
  border-width: 1px 1px 0 1px;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

/* D1.3 */
#pun-title .container {
  border-style: none none none none;
  }

/* D1.4 */
#pun-title h1 span  {
  font-size: 1.5em;
  }

/* D1.4 */
#pun-title h1 span  {
  display: none;
  }

#pun-title h1 span  {
  font-size: 1.5em;
  }


/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -10px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }





/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
  border-style: none;
  border-width: 0;

  }

/* D3.2 */
#pun-navlinks .container {
  padding: 1em 1em;
margin-top: -349px;
padding-top: 0px;

  }

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;
  }

/* D3.4 */
#pun-navlinks li a {
  font-size: 12px;
  font-family: oswald;
  text-transform: normal;
  letter-spacing: 0px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
padding-left: 5px;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
border-style: none;
  border-width: 0;
  }

/* D4.2 */
#pun-ulinks .container {;
  border: 1px solid transparent;
  margin-top: -25px;
  padding-bottom: 180px;
  height: 15px;
  font-size: 15px;
  font-family: tahoma;
  letter-spacing: 0px;
  text-transform: lowercase;
  font-weight: normal;
  font-style: normal;
  color: #3d3b3b;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding:  0 0.3em 0 0.6em  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }
/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding:1em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 1em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
  }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: -2em 1em 1em 1em;
margin-top: -170px;
margin-left: 43px;
  }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px; 
 padding: 0.7em 0 0 0;
  float: left;

  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
text-align: center;
line-height: 150%;
}
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
 margin-top: -30px;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
  height: 0;
  z-index: 1;
  }

/* D8.9 */
div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
  }


/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }
/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

html, body { background: url("----------") top center repeat-x, url("http://funkyimg.com/i/UQ2B.png") fixed; center; background-color : #eccb8d; }


.pa-respect {
border: 2px rgb(147, 128, 152);
background-color: rgb(238, 229, 207));
  display: inline-block; 
    text-align: center; text-transform: lowercase;
padding:10px 5px;
    width: 70px;
color: #55422b;
}

.pa-posts { margin-left: 0px;
border: 2px rgb(147, 128, 152);
background-color: rgba(211, 193, 150, 0.47));
    display: inline-block; margin-left: 0px;
    text-align: center; text-transform: lowercase;
padding:10px 5px;
    width: 70px;
color: #55422b;
}

.form-buttons table{ 
height:100%;
 width:100%;}

.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
}


.image.first {
opacity:1px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}

.hr1 {
  color:#AA8650;
border-style: dotted; 
  height:1px;
 width=100%;
margin: 0;
}



/* профиль и лз */

#pun-main .post-author ul  {font-size: 12px; text-align:center;}
.pa-author{font-size: 25px;  font-weight: bold; text-transform: uppercase;height: 20px;}
.punbb .post-sig dt {
    background: url("") no-repeat scroll 0 0 transparent;
    border: medium none;
    height: 43px;
    width: 314px;

   
}
li.pa-fld1 {
width: 180px;
text-align:justify;
}
li.pa-gifts {
display:none;
}



#pun-stats li.item3{ 
display:none;
 }

/* CS1.4 Пан или "тело" форума */
#pun {background-image: url(http://funkyimg.com/i/UQ2A.png);  
}

/* CS1.3 Шапка */
#pun-title table {
background-image : url(http://funkyimg.com/i/UWvb.png); 
background-repeat : no-repeat;
background-position: center top;
border: none;
margin-left: -70px;
height: 582px;
width: 1043px;
}


/* CS1.5 Футеркопирайниз */
#pun-about p.container {background-color: #;
background-image : url(http://funkyimg.com/i/UQ2x.png); 
background-position : center top; 
background-repeat : no-repeat;
height : 237px;
width: 1043px; 
margin-left: -71px;
margin-bottom: -10px;
text-align: center;
border-color: transparent;
}

div#pun-about {
   margin-bottom: -15px;
}





/* CS2 Ссылки */

/* CS2.1 */
.punbb a, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited, .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #738C27;
  text-decoration: none; }

.punbb a:link{
 color: #738C27;
text-decoration: none;
}

/* CS2.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #3B1706; 
  text-decoration: none; font-weight: bold; }

/* CS2.3 */
#pun-navlinks a {
  color: #CF574C;
  text-decoration: none;

 }

/* CS2.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #CF574C;
  text-decoration: none; font-weight: bold}



/* CS5 Прочие элементы */




/* ЛЗ */
.punbb .post .post-author {
  padding:12px 3px!important;
  background: url(http://funkyimg.com/i/Va1W.png) -14px top no-repeat,url(http://funkyimg.com/i/Va1Y.png) -14px bottom no-repeat,url(http://funkyimg.com/i/Va1X.png) -14px 0 repeat-y;
}



/* CS5.4 Область для ввода текста в форме ответа и админке */
.punbb textarea, .punbb select, .punbb input {
background-color: rgba(255, 249, 177, 0.3);
   border-top: 1px solid #632336;
  border-bottom: 1px solid #632336;
  border-left: solid 6px #632336;
  border-right: solid 6px #632336;
 border-radius: 25px;
padding: 11px;
padding-top:10px;
color: #000000
}


/* CS5.5 Двигаем верхний баннер */
#pun-title table tbody tr .title-logo-tdr {
position: absolute; z-index: 1; 
right: 12px; 
top: 40px;}

 /* CS3.1 Иконка старых сообщений*/
.punbb table Div.icon {float: right; 
display: block; 
border-style: none none none none;
margin-left: 10px;
margin-right: 15px;
margin-top: 20px;
width: 92px;
height: 21px;
background-image : url(http://funkyimg.com/i/V4DE.png);
background-repeat: no-repeat;}

/* CS3.2 Иконка новых */
TR.inew Div.icon {
background-image : url(http://funkyimg.com/i/V4EE.png);
background-repeat: no-repeat;
width: 92px;
height: 21px;
}
/* CS3.3 Иконка важных*/
TR.isticky Div.icon {
background-image : url(http://funkyimg.com/i/V4EE.png);
background-repeat: no-repeat;
width: 92px;
height: 21px;
}

/* CS3.4 Иконка закрытых*/
TR.iclosed Div.icon {
background-image : url(http://funkyimg.com/i/V4DE.png);
background-repeat: no-repeat;
width: 92px;
height: 21px;
}



/* CS5 Прочие элементы */

/* CS5.1 Статус картинки со статистикой 24*/
#pun-stats ul.container { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://funkyimg.com/i/UWuo.png");
background-origin: padding-box;
background-position: 10px 12px;
background-repeat: no-repeat;
background-size: auto;
padding-left: 70px;
padding-top: 10px;}

/* CS5.2 Статус картинки с надписью "статистика" над статистикой форума*/
#pun-stats.section h2 { 
background-attachment: scroll;
background-clip: border-box;
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;
margin-top: 45px;
background-color: transparent;
background-image: url("http://funkyimg.com/i/UWqP.png");
background-origin: padding-box;
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: auto;
font-size: 0px;}


/* CS4 Картинки категорий */
#pun-category1.category h2 {
background-image: url(------);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category2.category h2 {
background-image: url(-----);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category3.category h2 {
background-image: url(----);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category4.category h2 {
background-image: url(----);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category5.category h2 {
background: url(----);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category6.category h2 {
background: url(http://funkyimg.com/i/Nm2e.png);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category7.category h2 {
background: url(http://funkyimg.com/i/Nm2f.png);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

#pun-category8.category h2 {
background: url(http://funkyimg.com/i/Nm2g.png);
height: 82px;
width: 931px;
font-size:0 !important;
margin-left: -20px;}

/* CS5.6 Совсем другое */
#pun-main div.catleft, #pun-main div.catright {display: none}

#pun-main .post-author ul {text-align: center}
#pun-announcement h2 {display: none}
#pun-status .container, #pun-main .post-links li {text-align: center;}
#pun th, #pun-main h2 {text-align: center}
#pun-crumbs1 .container { text-align: center;}
#pun-navlinks .container, #pun-ulinks .container { text-align: center;}

#pun-main h2, #pun-stats.section h2 {
  padding: 3px 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
  }

a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
font-family: tahoma;
font-size: 11px;
background-color:#bdb8be;
color: #2d1b34; 
font-weight: normal;
text-align:center;
display: block;
margin: 1px;
text-decoration: none;
border-left-style: solid;
border-left-color: #2d1b34;
border-left-width: 5px;
width: 170px;
}

a.tvm:hover {
font-family: tahoma;
font-size: 11px;
color: #bdb8be; 
background-color:#2d1b34;
display: block;
font-weight: bold;
text-align:center;
cursor:crosshair; 
text-decoration: none;
border-left-style: solid;
border-left-color: #bdb8be;
border-left-width: 5px;
width: 170px;
}



.tip {
	padding: 10px; /* расстояние текста от края окна */
	color: #050221; /* цвет шрифта */
	background-color: #d7e5f9; /* фоновый цвет окна */
	display: none;
	position: absolute;
	z-index: 1000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


 
#pun-main .post-author ul, #pun-main .post .container {line-height: 11px;}



/** jQuery plugins
---------------------------------------------------------------*/
.tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('/i/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
.uploadifyQueueItem {background-color: #F5F5F5; border: 2px solid #E5E5E5; font: 11px Verdana, Geneva, sans-serif; margin-top: 5px; padding: 10px; width: 350px;}
.uploadifyError {background-color: #FDE5DD !important; border: 2px solid #FBCBBC !important;}
.uploadifyQueueItem .cancel {float: right;}
.uploadifyQueue .completed {background-color: #E5E5E5;}
.uploadifyProgress {background-color: #E5E5E5; margin-top: 10px; width: 100%;}
.uploadifyProgressBar {background-color: #0099FF; height: 3px; width: 1px;}






a.men:link, a.men:visited, a.men:active{
text-decoration: none;
background: #dcd4f9;
width: 85px;
padding-top: 5px;
padding-bottom: 5px; 
font-family: Verdana;
font-size: 12px;
color: #a5a9db;
display: block;
-moz-border-radius: 7px;
border-radius:7px;
text-align:center;
}
a.men:hover {
background: #0099ef;
-moz-border-radius: 7px;
border-radius:7px;
cursor: default;
}





nav.ph-lift1 > ul > li {
    float: left; }
  nav.ph-lift1 ul li {
    height: 60px;
    line-height: 80px;
    background: #b9b6be;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease; }
    nav.ph-lift1 ul li ul {
      max-height: 0;
      -webkit-transition: all.6s ease;
      -moz-transition: all.6s ease;
      overflow: hidden;
      display: block; }
    nav.ph-lift1 ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: #7962a6; }
    nav.ph-lift1 ul li:hover ul {
      max-height: 300px; }
    nav.ph-lift1 ul li a {
      display: block;
      overflow: hidden;
      text-decoration: none;
      color: #ebe1fb;
      height: 80px; }
    nav.ph-lift1 ul li ul li a {
      color: #ebe1fb; }
    nav.ph-lift1 ul li ul li:hover {
      background: olive; }
    nav.ph-lift1 ul li a span {
        -webkit-transition: all.6s ease;
        -moz-transition: all.6s ease;
        -o-transition: all.6s ease;
        -ms-transition: all.6s ease;
        transition: all.6s ease;
        display: block;
        padding: 0 40px; }
    nav.ph-lift1 ul li:hover > a span {
      margin-top: -80px;
      color: #ebe1fb;
      text-shadow: 0 1px 2px  black; }
      nav.ph-lift1 ul li a span:after {
        content: attr(data-title);
        display: block; }
/* тест */








#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex3:hover {
	line-height: 133px;
	color: #575858;
}
 
#ex3 img{
	float: left;
	margin: 0 15px;
}











/*--Column Styles--*/
ul.columns {
 width: 960px;
 list-style: none;
 margin: 0 auto; padding: 0;
}
ul.columns li {
 width: 150px;
 float: left; display: inline;
 margin: 10px; padding: 0;
 position: relative;
}
ul.columns li:hover {z-index: 99;}
/*--Thumbnail Styles--*/
ul.columns li img {
 position: relative;
 filter: alpha(opacity=30);
 opacity: 0.3;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
 z-index: 999;
 filter: alpha(opacity=100);
 opacity: 1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

/* CS1 Фон и цвет текста*/
#pun .tcr {text-align: right;}
li#navawards, .pa-positive, .lastedit {display: none;}
.linkst .pagelink { 
right: 15px;
position: absolute;
top: -4em;
width: 24em;
 }
li#navawards {display: none;}
#pun-reputation div, #pun-popup_awards div {background-color: #f4d8b2;}
div#smiles-area.container {background-color: #f4d8b2;}
BODY {overflow-x: hidden}
/* CS1.1 Цвет текста на форуме */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, #pun-navlinks .container,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend, .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, #pun-navlinks .container  { background-color: transpanent;
color: #1a0d02;
font-weight: normal;
font-style: normal;}

.tooltip {
	position: relative;
	}
.tooltip em {
	display: none;
	}
.tooltip:hover em {
	font-style: normal;
	display: block;
	position: absolute;
 	background: #d5e4f2;
	color: #FFF;
	padding: 10px 10px;
	bottom: 13px;
	right: 5;
	box-shadow: 0 0 5px #ccc;
 	border-radius: 5px;
	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	-webkit-box-shadow: 0 0 5px #251010;
	-moz-box-shadow: 0 0 5px #251010;
}
.tooltip:hover em i {
	position: absolute;
	bottom: -7px;
	right: 5px;
	border-top: 7px solid #000;
	border-left: 7px solid transparent;
	display: block;
}


a.sbla:link, a.sbla:visited { display: block; margin-bottom: 1px; text-transform: lowercase; font-style: italic; font-family: georgia; font-size: 9px; letter-spacing: 1px;border-radius: 10px; background: #c7c085; color: #43300a;  padding: 1px 2px 2px 10px;}
a.sbla:hover, a.sbla:active { -moz-transition: 1s ease; -webkit-transition: 1s ease;  display: block; text-transform: lowercase; font-family: georgia; font-size: 9px; letter-spacing: 5px; background: #c7c085; text-decoration: none; color: #43300a; text-align: center; padding: 1px 2px 2px 20px;border-radius: 10px;}






.nav {
        opacity: 0;
        font-family: arial;
        font-size: 8px;
        text-transform: uppercase;
        border: 1px solid #e1bb75;
        border-radius: 5px;
        color: #432113;
        background-color: #ebd29b;
        width: auto;
        margin-top:0px;
        padding:5px 5px 3px 5px;
        text-align: center;
        transition: 0.6s;
        -moz-transition: 0.6s;
        -webkit-transition: 0.6s;
    }
    .n2:hover .nav { margin-top: 20px; opacity: 1; }
    .n3:hover .nav { margin-top: 20px; opacity: 1; }
    .n4:hover .nav { margin-top: 20px; opacity: 1; }
    .n5:hover .nav { margin-top: 20px; opacity: 1; }
     
    .navt {
        position: absolute;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
        text-shadow: 0 -2px 0 #cccccc;
        margin-top: -12px;
        margin-left: 18px;
    }
     
    .navigate { width: auto;margin: 5px 0 0 0; }
    .n2, .n3, .n4, .n5 {
        width: 55px;
        height: 10px;
        float: left;
        font-family: arial;
        font-size: 8px;
        text-transform: uppercase;
        text-align: center;
        line-height: 11px;
        transition: 0.6s;
        -moz-transition: 0.6s;
        -webkit-transition: 0.6s;
    }
    .n2 { background-color: #432113; color: #e1bb75; }
    .n3 { background-color: #71270a; color: #e1bb75; }
    .n4 { background-color: #432113; color: #e1bb75; }
    .n5 { background-color: #71270a; color: #e1bb75; }
    .n1:hover, .n2:hover, .n3:hover, .n4:hover, .n5:hover {
        background-color: #e1bb75; color: #432113;
    }

.moverbox
{
  cursor: default;
  list-style: none;
}

.moverbox a
{
  cursor: default;
}

.moverbox a .preview
{
  display: none;
}

.moverbox a:hover .preview
{
  display: block;
  position: absolute;
  top: -33px;
  left: -45px;
  z-index: 1;
}

.moverbox img
{
  background: transpanent;
  border-color: transpanent;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  padding: 2px;
  vertical-align: top;
}

.moverbox li
{
  background: transpanent;
  color: inherit;
  display: inline;
  float: left;
  margin: 3px;
  padding: 5px;
  position: relative;
}













.moverbox
{
  cursor: default;
  list-style: none;
}

.moverbox a
{
  cursor: default;
}

.moverbox a .preview
{
  display: none;
}

.moverbox a:hover .preview
{
  display: block;
  position: absolute;
  top: -33px;
  left: -45px;
  z-index: 1;
}

.moverbox img
{
  background: transpanent;
  border-color: transpanent;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  padding: 2px;
  vertical-align: top;
}

.moverbox li
{
  background: transpanent;
  color: inherit;
  display: inline;
  float: left;
  margin: 3px;
  padding: 5px;
  position: relative;
}















.forumlinks { padding: 5px; font-family: arial; font-size: 7px; text-align: center; line-height: 100%; color: #111; background-color: #e1e1e1; -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; } .forumlinks:hover { padding: 5px; font-family: arial; font-size: 7px; text-align: center; line-height: 100%; color: #111; background-color: #f6e29a; }




h1.cch1 {width: 200px; height: 10px; text-transform: uppercase; letter-spacing: -1px; color: #fff; text-align: right; margin-top: 10px; margin-right: 10px; background-color: #aa8736;; border: 0px; margin-bottom: 3px;-webkit-transition-duration: 1s; transition-duration: 1s;}
h1.cch1:hover{-webkit-transform: translate(20px,0); -moz-transform: translate(20px,0); -o-transform: translate(20px,0); -ms-transform: translate(20px,0); transform: translate(20px,0); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function:ease-out;}







/* описание подфорума */
.tempwordsfor {
padding: 20px;
font-size: 10px;
left: 10px;
width: 420px;
height: 90px;
text-align: justify;
background-color: #f7ffd3;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);}

.tempwordsfor b {color: #5a7c40; text-transform: uppercase;}





/* описание подфорума */
 .desc {
    font-size:12px;
    color: #000;
    font-family: ;
    text-transform: none;
}

.descbox {
   padding: 20px;
font-size: 10px;
left: 20px;
width: 330px;
text-align: justify;
background-color: #fffad3;
    background-color: #fffad3;
    line-height: 90%;
    border: 3px solid #a19531;
}
.dborder:hover {
    background-color: #d1b967;
    border-right: 70px solid #b1c55c;
    -o-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out
}

.dborder {
    width: 310px;
    padding: 100px;
    background-color: #b1c55c;
    border-right: 70px solid #d1b967;
    transition-duration: .5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}


/*Правый бегунок*/
::-webkit-scrollbar {
    width: 7px;
    height: 5px;
}
::-webkit-scrollbar-track {
background: #aac661;
}
::-webkit-scrollbar-thumb {
    background: #632033;
}



/* CS5.6 Совсем другое */
#pun-main div.catleft, #pun-main div.catright {display: none}
#pun-announcement .container {margin-top: -82px}
#pun-main .post-author ul {text-align: center}
#pun-announcement h2 {display: none}
 #pun-main .post-links li {text-align: center;}
#pun th, #pun-main h2 {text-align: center}
#pun-crumbs1 .container { text-align: center;  margin-top: 20px;  }
#pun-navlinks .container, #pun-ulinks .container { text-align: center;}
#pun-stats li.item3 {display: none;}
li#navawards {display: none;}

#pun-main .post-author ul, #pun-main .post .container {line-height: 12px; margin-top: 5px;  }
#pun-main h2, #pun-stats.section h2 {
  padding: 3px 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
  }

.bestcouple {
width: 63px; 
height: 63px;
margin-top: -300px;
margin-left: 150px;
}

<!--HTML-->
<input type="checkbox" id="raz" class="del"/><label for="raz" class="del">нажать</label><div>исчезающий текст</div>