.ui.accordion { } .ui.accordion .title { cursor: pointer; font-size: 16px; font-weight: bold; color: #3E2151; margin-top: 8px; padding: 8px 8px; border: 1px solid transparent; border-top: 1px solid #E0E0E0; -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; -moz-box-shadow: 0px 1px 0px #FFFFFF inset; box-shadow: 0px 1px 0px #FFFFFF inset; transition: color 0.2s ease-out; } .ui.accordion .title:first-child { margin-top: 0px; border-top-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ui.accordion .title:hover, .ui.accordion .title.active { color: #335687; } .ui.accordion .title.active { background-color: #E0E0E0; border: 1px solid #BBBBBB; -webkit-box-shadow: 0px 1px 0px #FFFFFF inset; -moz-box-shadow: 0px 1px 0px #FFFFFF inset; box-shadow: 0px 1px 0px #FFFFFF inset; color: #335687; } .ui.accordion .icon { margin: 0px 4px 4px 2px; display: inline-block; text-indent: -9999px; vertical-align: middle; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #3E2151; border-right: 4px solid transparent; } .ui.accordion .title:hover .icon { border-left-color: #335687; } .ui.accordion .title.active .icon { border-left: 4px solid transparent; border-top: 6px solid #335687; margin-left: 0px; margin-bottom: 0px; } .ui.accordion .content { display: none; padding: 10px 20px; margin: 0px; font-size: 12px; line-height: 2; } .ui.accordion .content p { margin: 12px 0px; font-size: 12px; } .ui.accordion .content.active { display: block; background-color: #EEEEEE; -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; } /* Connected Accordion */ .ui.accordion.connected { background-color: #FAFAFA; border: 1px solid #DDDDDD; } .ui.accordion.connected .title { margin-top: 0px; }