style.css

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

/*Expand Result Window*/
div.sbResult {
    min-height: 20%;
    max-height: 100%;
}

iframe#resultContainer {
    /*height: 100%;*/
    height: 1000px;
}

iframe {
  border: 0px;
}

/*Fix Height for History Content Window*/
.sbHistoryContentTab{
  /*height: 400px;
  overflow: auto;*/
}

/*Accordion CSS BEG*/
.ac-container{
    /*width: 400px;*/
    width: 100%;
    margin: 10px auto 30px auto;

    height: 800px;
    overflow: auto;
}

.ac-container label{
    /*font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;*/
   /* padding: 5px 20px;*/
    position: relative;
    z-index: 20;
    display: block;
    /*height: 2em;*/
    cursor: pointer;
    /*color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);*/
    /*line-height: 33px;*/
    /*font-size: 19px;*/
    /*background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);*/
}

.ac-container label:hover{
    /*background: #fff;*/
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    /*box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);*/
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    /*background: transparent url(../images/arrow_down.png) no-repeat center center;  */
}

.ac-container input:checked + label:hover:after{
    /*background-image: url(../images/arrow_up.png);*/
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;
    /*box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);*/
}

.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

	/*“auto” height would of course be the best option here, but since we can’t animate to that, we need to set some heights for the transition.
	Please note that in some mobile browsers, clicking on a label might not trigger the checking or focusing of the associated input.*/
.ac-container input:checked ~ article.ac-small{
    height: 50px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
    height: 230px;
}
.ac-container input:checked ~ article.ac-auto{
    height: auto;
}
/*Accordion CSS END*/