﻿.sample
{
    margin: 30px;
    border: 1px solid #92cdec;
    background: #d7e7ff;
    padding: 30px;
}

.easy-accordion h1
{
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 2em;
}
.easy-accordion h2
{
    margin: 0px 0 20px 0;
    padding: 0;
    font-size: 1.6em;
}

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

.easy-accordion
{
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

    .easy-accordion dt, .easy-accordion dd
    {
        margin: 0;
        padding: 0;
    }

    .easy-accordion dt, .easy-accordion dd
    {
        position: absolute;
    }

    .easy-accordion dt
    {
        margin-bottom: 0;
        margin-left: 0;
        z-index: 5; /* Safari */
        -webkit-transform: rotate(-90deg); /* Firefox */
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 20px 0px; /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*IE*/
        -ms-transform: rotate(-90deg);
        cursor: pointer;
    }

    .easy-accordion dd
    {
        z-index: 1;
        opacity: 0;
        overflow: hidden;
    }

        .easy-accordion dd.active
        {
            opacity: 1;
        }

        .easy-accordion dd.no-more-active
        {
            z-index: 2;
            opacity: 1;
        }

        .easy-accordion dd.active
        {
            z-index: 3;
        }

        .easy-accordion dd.plus
        {
            z-index: 4;
        }

    .easy-accordion .slide-number
    {
        position: absolute;
        bottom: 0;
        left: 10px;
        font-weight: normal;
        font-size: 1.1em; /* Safari */
        -webkit-transform: rotate(90deg); /* Firefox */
        -moz-transform: rotate(90deg); /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*IE*/
        -ms-transform: rotate(90deg);
    }


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

dd p
{
    line-height: 120%;
}

#accordion-1
{
    width: 800px;
    height: 245px;
    padding: 30px;
    background: #fff;
    border: 1px solid #b5c9e8;
}

    #accordion-1 dl
    {
        width: 800px;
        height: 245px;
    }

    #accordion-1 dt
    {
        height: 46px;
        line-height: 44px;
        text-align: right;
        padding: 0 15px 0 0;
        font-size: 1.1em;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: #fff url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-inactive-1.jpg) 0 0 no-repeat;
        color: #26526c;
    }

        #accordion-1 dt.active
        {
            cursor: pointer;
            color: #fff;
            background: #fff url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-active-1.jpg) 0 0 no-repeat;
        }

        #accordion-1 dt.hover
        {
            color: #68889b;
        }

        #accordion-1 dt.active.hover
        {
            color: #fff;
        }

    #accordion-1 dd
    {
        padding: 25px;
        background: url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide.jpg) bottom left repeat-x;
        border: 1px solid #dbe9ea;
        border-left: 0;
        margin-right: 3px;
    }

    #accordion-1 .slide-number
    {
        color: #68889b;
        left: 100px;
        font-weight: bold;
    }

    #accordion-1 .active .slide-number
    {
        color: #fff;
    }

    #accordion-1 a
    {
        color: #68889b;
    }

    #accordion-1 dd img
    {
        float: right;
        margin: 0 0 0 30px;
    }

    #accordion-1 h2
    {
        font-size: 2.5em;
        margin-top: 10px;
    }

    #accordion-1 .more
    {
        padding-top: 10px;
        display: block;
    }

#accordion-2
{
    width: 850px;
    height: 300px;
    background: #fff;
}

    #accordion-2 h2
    {
    	font-family:"Segoe UI Light";
        font-size: 25px;
        /*color: #de5c26;*/
        color: #ff9c00;
    }

    #accordion-2 dl
    {
        width: 850px;
        height: 300px;
    }

    #accordion-2 dt
    {
        height: 56px;
        font-family: "Segoe UI Light";
        text-align: right;
        padding: 0px 15px 0 0;
        font-size: 20px;
        letter-spacing: 1px;
        /*background-color: #CCC8C3;
        color: #de5c26;*/
        color: #FFFFFF;
        background-image: url("/images/tab_inactive.png");
    }
        
    #accordion-2 dt:hover
    {
        color: white;
    }
    #accordion-2 dt.active
    {
        cursor: pointer;
        color: white;
        /*background-color: #de5c26;*/
        background-image: url("/images/tab_active.png");
    }
    #accordion-2 dt.active:hover .slide-number
    {
        color: white;
    }

    #accordion-2 dd
    {
        padding: 20px;
        background: url('/images/slide.jpg') bottom left repeat-x;
        /*border: 2px solid #de5c26;*/
        border: 2px solid #E5E5E5;
        border-left: 0;
        font:14px/normal "Segoe UI"
    }

    #accordion-2 .slide-number
    {
	    font-family: "Segoe UI";
	    font-size:36px;
        color: white;
        left: 15px;
    }

    #accordion-2 dd img
    {
        float: right;
        margin: 0 0 0 30px;
        position: relative;
        top: -20px;
    }

#accordion-3
{
    width: 700px;
    height: 195px;
    padding: 30px;
    background: #fff;
    border: 1px solid #b5c9e8;
}

    #accordion-3 h2
    {
        font-size: 2.5em;
        margin-top: 10px;
    }

    #accordion-3 dl
    {
        width: 700px;
        height: 195px;
    }

    #accordion-3 dt
    {
        height: 56px;
        line-height: 44px;
        text-align: right;
        padding: 10px 15px 0 0;
        font-size: 1.1em;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: #fff url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-inactive-2.jpg) 0 0 no-repeat;
        color: #26526c;
    }

        #accordion-3 dt.active
        {
            cursor: pointer;
            color: #fff;
            background: #fff url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-active-2.jpg) 0 0 no-repeat;
        }

        #accordion-3 dt.hover
        {
            color: #68889b;
        }

        #accordion-3 dt.active.hover
        {
            color: #fff;
        }

    #accordion-3 dd
    {
        padding: 25px;
        background: url(http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide.jpg) bottom left repeat-x;
        border: 1px solid #dbe9ea;
        border-left: 0;
        margin-right: 3px;
    }

    #accordion-3 .slide-number
    {
        color: #68889b;
        left: 13px;
        font-weight: bold;
    }

    #accordion-3 .active .slide-number
    {
        color: #fff;
    }

    #accordion-3 a
    {
        color: #68889b;
    }

    #accordion-3 dd img
    {
        float: right;
        margin: 0 0 0 30px;
        position: relative;
        top: -20px;
    }
