/**************** menu coding *****************/
#menu { width: 100%; background: #2772f9; float: left; height: 50px;  margin-left: 46px;margin-top: 0; position: fixed;  z-index: 1;
}

#menu ul { list-style: none; margin: 0; padding: 0; min-width: 150px; float: left; top: 0;
    } 

#menu a, #menu  h2 {
	font: bold 12px/16px arial, helvetica, sans-serif;
	display: block;
	border-width: 0px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 15px 15px;
}

#menu ul h2 {
	color: #000;
	background: #2772f9;
	text-transform: uppercase;
}

#menu a { color: #000; background: #2772f9 ; text-decoration: none; }

#menu a:hover { background: #fff; }

#menu li {position: relative;} 

#menu ul ul { position: absolute; z-index: 500; background: #19f6f6;}

#menu ul ul ul { position: absolute; top: 0; left: 100%; background: #19f6f6; } 

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;} 

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
      {display: block;} 

.sls-answer {
    position: relative;
    display: block;
    padding: 0.7em 0.5em 0.3em 2.6em;
    background: rgba(0,0,0,.06);
    color: #444;
    width: 400px;
    margin-top: .3em;
    margin-bottom: .3em;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    transform: translateX(25px);
}

.sls-small {
    position: relative;
    display: block;
    background: #FFFFFF;
    color: #444;
    width: 400px;
    margin-top: .3em;
    margin-bottom: .3em;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    transform: translateX(25px);
    font-size: 10px;
    text-align: right;
}

.sls-card-header {
    border-radius: 25px 25px 0px 0px;
    border-bottom: 3px solid rgba(0,0,0,.125);
}

.sls-card-footer {
    border-radius: 0px 0px 25px 25px;
    border-top: 3px solid rgba(0,0,0,.125);
}

.sls-card-name {
    display: inline-block;
    color: blueviolet;
}

.sls-card {
    width: 500px;
    border-radius: 25px;
    border-width: medium;
    margin-bottom: 20px;
    margin-top: 50px;
    z-index: -1;
}


.sls-card-non-absolute {
    width: 500px;
    border-radius: 25px;
    border-width: medium;
    margin-bottom: 20px;
}

.sls-next-card-btn {
    position: relative;
    margin-top: 25px;
    margin-bottom: 15px;
    border-width: 2px;
    width: 400px;
    transform: translateX(25px);
}

.subato-logo-in-card {
    position: absolute;
    right: 2.0%;
    bottom: 0px;
}

.numberlist_ {
    width:450px;
}

.numberlist_ ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    transform: translateX(27px);
    margin-top: 15px;
}

.numberlist_ ol ol {
    margin: 0 0 0 2em;
}

.numberlist_ ol li {
    margin-top: 4px;
}
 
.numberlist_ button {
    position: relative;
    display: block;
    padding: 0.8em 0.8em 0.4em 1.2em;
    color: #444;
    width: 400px;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    font: 15px 'trebuchet MS', 'lucida sans';
    background: rgba(0,0,0,.06);
    white-space: normal;
}

.numberlist_ button:hover,  .numberlist_ a:hover {
  background: #cbe7f8;
  text-decoration:underline;
}

.numberlist_ button:before, .numberlist_ a:before {
  box-sizing: content-box;
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: #87ceeb;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  color:#FFF;
}

.numberlist_ label {
    position: relative;
    display: block;
    padding: 0.3em 1.2em 0.3em 0em;
    background: #FFF;
    color: #444;
    width: 380px;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
}

.question, .cloze {
   font: 25px 'trebuchet MS', 'lucida sans';
}

.singleRow {
    padding: .2em .0em .2em 2.2em;
    height: 28px;
    width: 400px;
    padding-left: 2.2em
}

#textField {
    width: 398px;
    height: 220px;
}

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 10pt !important; 
}

#code {
    display: block;
    white-space: pre-wrap;   
    font-size: 12px;
    font-family: 'Courier New', 'Lucida Console';
    text-align: left;
    width: 398px;
    height: 280px;
}