/* eXeLearning Style Designer Compatible Style */
html{font-size:105%}
body{font:100%/1.5 'Open Sans',Arial,Verdana,Helvetica,sans-serif;padding:15px;margin:0;text-align:left}
h2{font-size:1.3em}
h3{font-size:1.2em}
h4{font-size:1.1em}
h5{font-size:1em}
p{margin:1em 0}
.score.js-feedback{margin-bottom:1em}
#header,#emptyHeader,#nodeDecoration{padding:0 20px;height:auto!important;height:120px;min-height:120px;font-size:1.6em;font-weight:300;border-style:1px;border-width:1px}
#headerContent{padding-top:70px}
#header h1,#nodeDecoration h1{margin:-.5em 0 1em 0;font-size:1em;text-align:left}
#nodeDecoration{margin-bottom:15px}
 /* Single page */.nodeDecoration h1{font-size:1.5em}
/* iDevices */.iDevice{margin:20px 0 30px 0}
.iDevice_header{letter-spacing:.5px;padding:.5em 40px .5em 0;height:auto!important;height:1.7em;min-height:1.7em;position:relative}
.iDevice_header[style]{background-image:none!important}
.iDeviceTitle{font-size:1.3em;vertical-align:bottom;top:auto;display:inline-block;font-weight:300;padding:0 10px 0 35px;background-repeat:no-repeat;background-position:0 50%;margin:0}
.iDevice_header_noIcon .iDeviceTitle{background-image:none;padding-left:20px}
.iDeviceTitle{*display:inline;*line-height:2em}
/* IE6, IE7 */.iDevice_inner{padding:10px 20px;border-width:1px;border-style:solid;border-radius:5px}
/* Clearfix */.iDevice_content{overflow:auto}
.FileAttachIdeviceInc .iDevice_content{margin-bottom:-.5em}
/* Hide/Show iDevice */.toggle-idevice{display:block;margin:0;text-align:right}
.iDevice_header .toggle-idevice{position:absolute;top:14px;right:0}
.toggle-idevice a{display:inline-block;width:16px;height:16px;background:url(_style_icons.png) no-repeat -50px -50px;outline:none}
.toggle-idevice .show-idevice{background-position:0 -50px}
.toggle-idevice span{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:0}
.toggle-idevice a:hover,.toggle-idevice a:focus{filter:alpha(opacity=100);opacity:1}
/* iDevice title with background-color */input.feedbackbutton{margin:0}
.iDevice_header{border-width:1px;border-style:solid;padding-left:13px;border-top-left-radius:5px;border-top-right-radius:5px}
.hidden-idevice .iDevice_header{border-radius:5px}
.iDevice_header .toggle-idevice{margin-right:15px}
.iDevice_inner{border-top-right-radius:0;border-top-left-radius:0;border-top:0}
.ExternalUrlIdevice iframe{border:0}
/* Reset base.css */.block,.feedback{padding:0}
.feedback{font-family:inherit;font-size:1em}
li{list-style-position:outside}
.styled-qc{margin-top:2.5em}
.exe-dl .icon,.exe-dl-toggler a{width:24px;height:24px;border-radius:12px}
.exe-dl-toggler a{line-height:22px}
.js .exe-dl dd{margin-left:44px}
.exe-enlarge-icon b{font-size:1.2em}
/* Forms */input,select{font-size:1em;font-family:inherit}
.iDevice_hint_title a{padding-left:25px}
.iDevice_buttons input{font-size:1em;margin-right:.5em;padding:.15em .45em}
.MultichoiceIdevice .feedback p:first-child{margin-top:0}
.MultichoiceIdevice .activity-form,.MultiSelectIdevice .activity-form{margin-bottom:1em}
.TrueFalseIdevice .activity-form{margin-top:1.5em}
.TrueFalseIdevice .activity-form:first-child{margin-top:0}
.TrueFalseIdevice label{margin:0 1em}
.MultichoiceIdevice input[type=radio],.MultiSelectIdevice input[type=checkbox],.QuizTestIdevice input[type=radio]{width:16px;height:16px;margin:5px 0 0 12px}
.custom-inputs .iDevice_answer-field{width:40px}
.custom-inputs  .iDevice_answer-content,.custom-inputs  .iDevice_answer-feedback{padding-left:55px}
.custom-inputs  .iDevice_answer-content{padding-top:4px}
.styledRadio,.styledCheckbox{margin-left:12px}
.MultichoiceIdevice .feedback{margin-top:1em}
.right-option,.wrong-option{font-style:italic}
.readingIdevice .iDevice_content:first-child p:last-child,.CasestudyIdevice .iDevice_content:first-child p:last-child{margin-bottom:0}
.readingIdevice .feedbackbutton,.CasestudyIdevice .feedbackbutton,.ReflectionIdevice .feedbackbutton{margin:.5em 0 1em 0}
.TrueFalseIdevice .exe-radio-option.styledRadio{display:inline-block;vertical-align:middle;margin:-2px 5px 0 0}
/* Licenses */#packageLicense{margin:2.5em 0 1.5em 0;text-align:left;line-height:1.2em;font-size:.9em}
#packageLicense.cc{padding-left:95px;background:url(_style_licenses.png) no-repeat 0 0}
#packageLicense.cc-by-sa{background-position:0 -100px}
#packageLicense.cc-by-nd{background-position:0 -200px}
#packageLicense.cc-by-nc{background-position:0 -300px}
#packageLicense.cc-by-nc-sa{background-position:0 -400px}
#packageLicense.cc-by-nc-nd{background-position:0 -500px}
#packageLicense.cc-0{background-position:0 -600px}
#siteFooter{padding:20px}
/* Download package iDevice */.download-packageIdevice .exe-download-package-link a{background:#333}
/* Lightbox */.lightboxOverlay{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=95);opacity:0.95}
#lightbox .lb-caption{font-size:1em}
/* Effects - iDevices with emphasis */.emphasis1 .exe-fx .fx-C2,.emphasis1 .exe-fx .fx-C2 a,.emphasis1 .fx-pagination a{background:#ededed;}
@media print {    div.node{page-break-after:auto}
 /* base.css */    .iDevice{margin-bottom:20px}
	html body{background:#fff;color:#000;font-size:11pt}
	@page{margin:1.5cm}
	/* Uncomment this to print URL after links:	a{font-weight:bolder;text-decoration:none!important}
	a[href^=http]:after{content:" <" attr(href) "> "}
	*/	#main .iDeviceTitle{background:none;padding-left:0}
	body #header,body #emptyHeader,body #nodeDecoration{height:auto!important;min-height:0;border:none;padding:0}
	body #headerContent{padding-top:40px}
	#packageLicense.cc{padding-left:0;text-align:center}
	.toggle-idevice{display:none}
}
/* eXeLearning Style Designer */
.iDevice_header{
/*emTitleColor*/
color:#005da8;
/*emTitleBGColor*/
background-color:#ffffff;border-color:#ff9027;
}
.iDevice_inner{
/*emBGColor*/
background-color:#ffffff;border-color:/*emBorderColor*/
#ff9027;
}
.iDeviceTitle{
background-image:url(icon_star.png);
}
.activityIdevice .iDeviceTitle{
background-image:url(icon_assignment.png);
}
.readingIdevice .iDeviceTitle{
background-image:url(icon_unread.png);
}
.FileAttachIdeviceInc .iDeviceTitle{
background-image:url(icon_download.png);
}
.WikipediaIdevice .iDeviceTitle{
background-image:url(icon_description.png);
}
.ListaIdevice .iDeviceTitle,.QuizTestIdevice .iDeviceTitle,.MultichoiceIdevice .iDeviceTitle,.TrueFalseIdevice .iDeviceTitle,.MultiSelectIdevice .iDeviceTitle,.ClozeIdevice .iDeviceTitle{
background-image:url(icon_question.png);
}
.preknowledgeIdevice .iDeviceTitle{
background-image:url(icon_announcement.png);
}
.GalleryIdevice .iDeviceTitle{
background-image:url(icon_media.png);
}
.objectivesIdevice .iDeviceTitle{
background-image:url(icon_info.png);
}
.ReflectionIdevice .iDeviceTitle{
background-image:url(icon_account.png);
}
body{
/*fontFamily*/
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
/*bodyColor*/
color:#191919;
/*contentBGColor*/
background-color:#fcdaba;
}
a{
/*aColor*/
color:#2495ff;
}
#header,#emptyHeader,#nodeDecoration{
height:auto!important;
/*headerHeight*/
height:220px;min-height:220px;
/*headerBGColor*/
background-color:#ffffff;
/*headerBGURL*/
background-image:url(dgeschico.png);
/*headerBGRepeat*/
background-repeat:no-repeat;
/*headerBGPosition*/
background-position:right 50%;border:1px solid /*headerBorderColor*/
#ff9027;
}
#headerContent{
/*headerTitleTopMargin*/
padding-top:70px;
/*headerTitleColor*/
color:#005da8;
/*headerTitleFontSize*/
font-size:150%;
}
#siteFooter{
border:1px solid /*footerBorderColor*/
#005da8;
/*footerColor*/
color:#ffffff;
/*footerBGColor*/
background-color:#2495ff;
}
/* eXeLearning Style Designer (custom CSS) */
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
