﻿/* March general */

.march-text
{
    font-style: italic;
    font-family: Georgia;
    font-size: 20px;
    line-height: 30px;
}

.line-left, .line-right
{
    height: 6px;
    width: 308px;
}

.top-content .bottom-gray-image, .right-gray-image
{
    background: #f1f1f1;
    clear: both;
    float: right;
}

.yellow-stripe .title, .category .title
{
    font-family: 'PT Sans Narrow', sans-serif;
}

.title-orange
{
    border-bottom: 7px solid #ffa02f;
    color: #ffa02f;
}

.title-violet
{
    border-bottom: 7px solid #b062b2;
    color: #b062b2;
}

.title-blue
{
    border-bottom: 7px solid #4074c2;
    color: #4074c2;
}

.sortable-unit
{
    float: left;
    margin: 0 7px;
    position: relative;
    top: -3px;
    cursor: pointer;
}

    .sortable-unit .text
    {
        display: inline-block;
        top: -4px;
        position: relative;
    }

    .sortable-unit .sort-icon
    {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-position: 0 -1424px;
    }

    .sortable-unit:hover .text
    {
        color: #000;
    }

    .sortable-unit:hover .sort-icon
    {
        background-position: 0 -1452px;
    }

    .sortable-unit.active .text
    {
        color: #000;
        text-decoration: underline;
        font-weight: bold;
    }

    .sortable-unit.active .sort-icon
    {
        background-position: 0 -1480px;
    }

    .sortable-unit.active:hover .sort-icon
    {
        background-position: 0 -1508px;
    }

    .sortable-unit.active .sort-icon.desc
    {
        background-position: 0 -1536px;
    }

    .sortable-unit.active:hover .sort-icon.desc
    {
        background-position: 0 -1564px;
    }


.popup-icon
{
    width: 22px;
    height: 22px;
    cursor: pointer;
    background: url("/Media/images/march/popup.png") no-repeat;
    display: inline-block;
    position: relative;
    top: 5px;
}

.no-data
{
    position: relative;
    top: -5px;
}

/* March top content */
.top-content
{
    position : relative;
}
.top-content h2
{
    font-family: 'PT Sans Narrow', sans-serif;
    padding-left: 0px;
    font-size: 30px;
}

.top-content .left
{
    float: left;
    width: 314px;
}

    .top-content .left .document
    {
        height: 351px;
        width: 293px;
        padding: 18px 0 0 20px;
    }

    .top-content .left .line-left
    {
        padding: 23px 0 0 19px;
    }

    .top-content .left .description
    {
        width: 310px;
        height: 221px;
        background: #f1f1f1;
        margin-top: -9px;
    }

        .top-content .left .description > span
        {
            display: block;
            padding: 14px 0 0 37px;
            font-size: 13px;
            line-height: 20px;
        }


        .top-content .left .description span .popup
        {
            margin: -5px 0 0 5px;
        }
        .top-content .left .description .download-link
        {
            display : inline-block;
            width: 16px;
            height: 16px;
            margin : 0 0 0 4px;
        }

        .top-content .left .description .download-link .popup
        {
            display : inline-block;
            width: 16px;
            height: 16px;
            background-position: -62px -743px;
            position: relative;
            top: 4px;
            margin: 0 4px 0 0;
            cursor : pointer;
        }

.top-content .text
{
    padding: 22px 54px 0 0;
    width: 569px;
    float: right;
}

.top-content .arrow
{
    height: 76px;
    width: 78px;
    position: absolute;
    top: 45px;
    z-index: -1;
}

.top-content .bottom-gray-image
{
    width: 690px;
    height: 30px;
    margin-top: -30px;
}

.top-content .right-gray-image
{
    width: 30px;
    height: 131px;
    margin-top: -161px;
}

/* Yellow stripe */

.yellow-stripe
{
    clear: both;
    height: 80px;
    background: #fdc82f;
}

    .yellow-stripe .title
    {
        float: left;
        font-size: 30px;
        padding: 29px 0 0 20px;
        color: #fff;
        font-weight: bold;
    }

    .yellow-stripe .right-text
    {
        float: right;
        display: block;
        color: #fff;
        font-size: 13px;
        padding: 10px 102px 0 0;
        font-style: italic;
		display: none;
    }

        .yellow-stripe .right-text a
        {
            color: #fff;
        }

/* Benefit filter */

    .benefit .category
    {
        float: left;
        width: 323px;
        padding-bottom: 23px;
    }

        .benefit .category .title
        {
            margin-left: 15px;
            float: left;
            font-size: 22px;
            font-weight: bold;
            text-decoration: none;
            padding: 23px 0 9px 0;
        }

        .benefit .category img
        {
            float: left;
            margin: 20px 0 0 4px;
            cursor: pointer;
            width: 14px;
            height: 14px;
        }

        .benefit .category ul
        {
            float: left;
            padding: 21px 0 0 12px;
        }

            .benefit .category ul li span
            {
                padding: 0 5px;
                font-size: 14px;
                line-height: 31px;
                text-decoration: none;
                color: #777;
                cursor: pointer;
            }

            .benefit .category ul li .hover-orange:hover,
            .benefit .category ul li .hover-orange.active
            {
                color: #fff;
                text-decoration: none;
                padding: 6px 5px;
                background: #ffa02f;
            }

            .benefit .category ul li .hover-violet:hover,
            .benefit .category ul li .hover-violet.active
            {
                color: #fff;
                text-decoration: none;
                padding: 6px 5px;
                background: #b062b2;
            }

            .benefit .category ul li .hover-blue:hover,
            .benefit .category ul li .hover-blue.active
            {
                color: #fff;
                text-decoration: none;
                padding: 6px 5px;
                background: #4074c2;
            }

/* Benefit nav */

.benefit-filter
{
    clear: both;
}

    .benefit-filter .line-left
    {
        float: left;
        padding-top: 7px;
    }

    .benefit-filter .line-right
    {
        float: right;
        padding-top: 6px;
    }

    .benefit-filter .menu-area
    {
        width: 330px;
        padding-left: 23px;
        font-size: 16px;
        color: #777;
        font-style: italic;
    }

    .benefit-filter .menu-area, .sort, .dash, .data, .damage
    {
        float: left;
    }

        .benefit-filter .menu-area .data, .damage
        {
            padding: 0 7px;
        }

            .benefit-filter .menu-area .data:hover
            {
                color: #1a1a1a;
                cursor: pointer;
            }

            .benefit-filter .menu-area .data:active
            {
                color: #1a1a1a;
            }

        .benefit-filter .menu-area .damage:hover
        {
            color: #1a1a1a;
            cursor: pointer;
        }

/* Benefit content */

    .benefit-content .container
    {
        border-bottom: 2px solid #e5e5e5;
        clear: both;
    }

        .benefit-content .container.last,
        .benefit-content .container:last-child
        {
            border: none;
            clear: both;
        }


    .benefit-content h2
    {
        font-size: 21px;
        padding: 19px 0 16px 0;
    }

    .benefit-content .data
    {
        font-size: 16px;
        color: #777;
        line-height : 24px;
    }

    .benefit-content .damage
    {
        padding: 11px 7px;
        background: #1a1a1a;
        color: white;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
        position : relative;
        top : 34px; 
        left : -80px;

    }

    .benefit-content .damage-size
    {
        font-size: 14px;
    }

    .benefit-content .money
    {
        width: 145px;
        height: 39px;
        padding: 22px 0 0 16px;
        font-size: 26px;
        font-weight: bold;
        border: 1px solid #1a1a1a;
        float : left;
        position : relative;
        top : 34px; 
        left : -80px;
    }

        .benefit-content .money .size
        {
            font-size: 16px;
            font-weight: normal;
        }

    .benefit-content .text-area
    {
        width: 623px;
        line-height: 24px;
        float: right;
        font-size: 16px;
        margin: 0px 33px 20px 0;
    }

        .benefit-content .text-area .revenue
        {
            color: #0046ad;
        }

        .benefit-content .text-area .minister
        {
            color: #ffa02f;
        }

        .benefit-content .text-area .add
        {
            color: #767676;
            font-style: italic;
        }

        .benefit-content .text-area .popup
        {
            margin: -5px 0 0 0;
        }

    .benefit-content .benefit-content-line
    {
    }

/* Bottom content */

.bottom-content
{
    clear: both;
    height: 638px;
    background: #d2492a;
}

    .bottom-content .top-line
    {
        margin: 0 18px;
        height: 5px;
        background: #080606;
    }

    .bottom-content .user-pic
    {
        padding: 45px 0 0 50px;
        height: 90px;
        width: 90px;
        float: left;
    }

    .bottom-content .text
    {
        width: 635px;
        height: 566px;
        float: right;
        margin: -42px 155px 0 0;
    }

    .bottom-content .arrow-black
    {
        height: 76px;
        width: 78px;
        position: relative;
        right: -14px;
        top: 31px;
    }
