.switcher {
    /* this can be whatever selector you want */
    width: 910px; /* the full width of the switcher */
    position: relative; /* important */
    font-family: Georgia;
    margin: 0 auto;
}

.switcher > div {
    height: 60px; /* the height of the boxes when collapsed */
    position: absolute;
    left: 660px; /* the width of the switcher minus the outer width of the collapsed boxes (including margin, padding and border) */
    right: 0; /* important */
    margin: 4px; /* the margin between collapsed boxes */
    padding: 5px; /* the padding for the collapsed boxes */
    border: 1px solid #C2C2C2; /* the border for collapsed boxes */
    overflow: hidden; /* important */
    cursor: pointer;

    border-radius: 10px;
    background: #a4b357; /* Old browsers */
    background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a4b357), color-stop(100%, #75890c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a4b357 0%, #75890c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a4b357 0%, #75890c 100%); /* IE10+ */
    background: linear-gradient(top, #a4b357 0%, #75890c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#a4b357', endColorstr = '#75890c', GradientType = 0); /* IE6-9 */

}

.switcher > div .content {
    opacity: 0; /* impotant */
}

.switcher > div > h3 {
    text-align: center;
    line-height: 60px; /* used to vertically center the text in collapsed boxes, should be the height of the collapsed boxes */
    font-size: 18px;
    font-family: Helvetica;
    color:white;
}

.switcher .active {
    height: auto; /* important */
    width: auto; /* important */
    top: 0; /* important */
    left: 0; /* important */
    bottom: 0; /* important */
    right: 250px; /* the outer width of the collapsed boxes */
    cursor: default;

    background: #fefcea; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%); /* IE10+ */
    background: radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.switcher .active .content {
    opacity: 1; /* important */
}

.switcher .active > h3 {
    line-height: 48px; /* the line height of the box heading when active */
    color:black;
}

p {
    line-height: 22px;
    font-size: 14px;
    padding: 5px;
}