"

From 2014.igem.org

/* THIS CODE STYLES THE COLLAPSE BOX */

.panel {

background: #eee; margin: 0px; padding: 0px 0px 0px; width: 100%; border: 1px solid #999; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

.panelcollapsed { background: #eee; margin: 0px; padding: 0px 0px 0px; width: 200px; border: 1px solid #999; -moz-border-radius: 4px; -webkit-border-radius: 4px;

       cursor: pointer;

}

/* panel heading */

.panel h2

{ font-size: 18px; font-weight: normal; margin: 0px; padding: 4px; background: #CCC url(image/arrow-up.gif) no-repeat 880px; border-bottom: 1px solid #999; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; border-left: 1px solid #FFF; }

.panelcollapsed h2 { font-size: 18px; font-weight: normal; margin: 0px; padding: 4px; background: #CCC url(image/arrow-up.gif) no-repeat 110px; border-bottom: 1px solid #999; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; border-left: 1px solid #FFF; }

/* panel heading on rollover */ .panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; }

/* heading of a collapsed panel */ .panelcollapsed h2 { background: #CCC url(image/arrow-dn.gif) no-repeat 110px; border-color: #CCC; }

/* panel content - do not set borders or paddings */ .panelcontent { background: #EEE; overflow: hidden; }

/* collapsed panel content */ .panelcollapsed .panelcontent { display: none; }

/*PUT STYLE THAT ARE INSIDE A COLLAPSE ELEMENT */

.test-float { float: left; width: 300px; }

.test-float-right { float: right; width: 300px; }