html {
    margin:0px;
    padding:0px;
}
body {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #ffffff 1%, #cbede9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #ffffff 1%,#cbede9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #ffffff 1%,#cbede9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cbede9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family:helvecta, arial;
}



i {
    color:white;
}

span.green {color:green}
span.red {color:red}


.greenText {
    color:#366f79;
}

#contentArea {
    padding:2%;
    font-size:1.4em;
}

#searchBar {
    z-index:3;
    height:38px;
    width:346px;
    position:fixed;
    right:0px;
    top:48px;
    background:#e2edf0;
    transition:right .5s;
    border-bottom-left-radius:.4em;
    box-shadow: 0px 0px 4px grey;
}
#searchBar.closed {
    right:-307px;
}


mark.current {
    background:yellow;
    border:1px solid #8edfd5;
    border-radius:.2em;
    
}
mark {
    background:#8edfd5;
    border-radius:.2em;
}

#searchOpen {
    float:left;
    width:28px;
    height:28px;
    border-radius:.4em;
    margin:5px 0px 0px 6px;
    background: white;
    border:1px solid #366f79;
    cursor:pointer;
}

#searchUp {    
    float:left;
    width:28px;
    height:28px;
    border-radius:.4em;
    margin:5px 0px 0px 6px;
    background: white;
    border:1px solid #366f79;
    cursor:pointer;
}

#searchDown {
    float:left;
    width:28px;
    height:28px;
    border-radius:.4em;
    margin:5px 0px 0px 6px;
    background: white;
    border:1px solid #366f79;
    cursor:pointer;
}

#searchInput {
    float:left;
    height:28px;
    border-radius:.4em;
    margin:5px 0px 0px 5px;
    border:1px solid #366f79;
    width:214px;
    font-weight: 600;
    color: #366f79;
    padding: 0px 4px;
}

#searchIndicator {
    margin: 8px 0px 0px 120px;
    color: #366f79;
    float: left;
    padding: 0px 4px;
    background: white;
    border-radius: .4em;
}


/* #1e7145 */
.excelLogo {
    background:#fff url(../excel.png) left no-repeat;
    background-size:46px 46px;
    width:46px;
    height:46px;
    float:left;
    margin:-10px 0px 0px -6px;
}
.excel {
    margin:20px 0px;
    background:#1e7145;
    padding:4px 6px;
    color:white;
    width:100%;
    border-radius:6px;
    text-align:center;
}


.leapLogo {
    background: url(../leapLogo.svg) no-repeat;
    opacity:0.2;
    width:500px;
    height:470px;
    float:left;
    background-size:cover;
    margin-top: 60px;
}

.bookLogo {
    background: url(../book.svg) no-repeat;
    opacity:0.2;
    width:776px;
    height:430px;
    float:left;
    background-size:cover;
    margin-top: 60px;
}

.titleBar {
    min-width:500px;
    padding:0px 2%;
    background:#5f959e;
    color:white;
    height:48px;
    width:100%;
    box-shadow:0px 0px 4px gray;
    z-index:2;
    line-height:48px;
    font-size:16px;
    font-family:helvecta, arial;
    position:fixed;
}


.btn {
    background:#366f79;
    padding:7px 7px;
    border:1px solid white;
    border-radius:.4em;
    padding-top:8px;
    color:white;
    text-align:center;
    transition:all .5s;
}

.btn:hover {
    color:white;
    box-shadow:0px 0px 6px white;
}

select {
    background:#366f79;
    color:white;
    border:1px solid white;
    border-radius:.4em;
    padding:3px 4px 2px 4px;
    display:inline-block;
}

.msgIcon {
    border-radius: 55px;
    margin: 0px auto;
    border: 1px solid #5f959e;
    width: 55px;
    height: 55px;
}

/* START QUIZ CSS */



/* The container */
.quizContent {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #ffffff 1%, #cbede9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #ffffff 1%,#cbede9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #ffffff 1%,#cbede9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cbede9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding: 14px;
    border-radius:.4em;
    border:1px solid #5f959e;
}

.container {
  font-weight:400;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height:24px;
    margin-left:none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  text-align:center;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  border: 1px solid #366f79;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #cbede9;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #366f79;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.result {
    font-style:italic;
    font-size:.8em;
    margin:3px 0px 0px 4px;
    
    color:#366f79;
}

/* END QUIZ CSS */
#menu {
    margin-top:1px;
    float:right;
}

.textContentTop {
    float:left;
    margin-top:-297px;
    width: 100%;
}

.textContent {
    float:left;
    width: 100%;
}
.manualTitle {
    text-align:center;
    font-size:2.4em;
    color:#366f79;
}

.manualTitleSub {
    text-align:center;
    font-size:.8em;
    font-style:italic;
    color:#5f959e;
}

.chapter {
    padding:100px 0px;
}

.chapterTitle {
    color:#366f79;
    padding-left:2%;
    font-size:1.4em;
    height:28px;
    width:100%;
    margin:0px 0px 20px 0px;
    border-bottom:2px solid #5f959e;
    line-height: 31px;
}

.question{
	font-weight:600;
    font-size:.9em;
}
.answers {
    font-weight:bold;
    margin:14px 0px 10px 0px;
    font-size:.8em;
}
.submitBtn {
	font-family: sans-serif;
	font-size:.8em;
	background-color: #366f79;
	color: #fff;
	border: 0px;
	border-radius:.4em;
	padding: 8px;
	cursor: pointer;
	margin: 10px 0px 0px 0px;
}
.submitBtn:hover{
	background-color: #3a8;
}





.divider
{
	position: relative;
	height: 1px;
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(95,149,158), transparent);
}

.div-dot:after /*leapLogo*/
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -3px;
	left: calc(50% - 9px);
	width: 8px;
	height: 8px;
	background-color: rgb(95,149,158);
    border-radius:18px;
}




/* IMAGE VIEWER STUFF */

.center-align {
  display: table;
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.center-align .wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.center-align .content {
  display: -moz-inline-stack;
  display: inline-block;
  text-align: left;
}
h3 {
  font-family: inherit;
  font-weight: bold;
  color: #CCC;
  font-size: 1.1em;
}
img {margin: 0 10px;}

/* ddfullscreenimageviewer */
body.revealviewer {
  overflow: hidden;
}
#fullscreencanvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: white;
  z-index: 9000;
  pointer-events: none;
  display: block;
  transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
  background:#5f959e;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fullscreencanvas img {
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
div#closeviewer {
/* Large x close button  */
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  z-index: 100000;
  top: 10px;
  right: 10px;
}
div#closeviewer::before, div#closeviewer::after {
/* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: white;
  top: 50%;
  opacity: 0;
  margin-top: -3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 1;
}
body.revealviewer div#closeviewer::after {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 1;
}
/* Loading DIV CSS */
#fullimageloadingdiv, #zoomioloadingdiv {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: white;
}
#fullimageloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/* zoomio */
#zoomiocontainer {
/* container containing enlarged image (native sized image) */
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  background: white;
  visibility: visible;
  border-radius: 6px;
  margin:2px 0px 0px 2px;
}
#zoomiocontainer img {
/* image inside zoom container */
  width: auto;
  height: auto !important;
  position: absolute !important;
  display: block !important;
  cursor: move;
}
.disablepointer {
  pointer-events: none;
}
#zoomiocontainer.mobileclass {
/* CSS class added to zoom container on mobile OS */
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
/* opsional */
.thumbnails {
    border:1px solid #5f959e;
    border-radius:.4em;
    cursor: zoom-in;
    margin: 20px 20px;
    transition:all .5s;
}
.thumbnails:hover {box-shadow:0px 0px 6px #5F959E;}

.thumbsContainer label {
    float:left;
    font-style:italic;
    font-size:.8em;
    font-weight:200;
}


.term {
    color:#366f79;
    font-weight:600;
    font-size:20px;
}

.def {
    color:#232323;
}

.bottom {
    background: url(../bottom.png) repeat-x;
    width:100%;
    height:205px;
    background-size:259px 205px;
    
}


.divider.div-transparent.div-dot.spacer {
    margin:30px 0px;
}

#scopeCont {
    width:298px;
    height:48px;
    float:right;
    margin-right:-2%;
    line-height:29px;
    color:white;
    transition:all 1s;
    margin-top:-50px;
}
#scopeCont.on {
    margin-top:9px;
}
.scopeLabel {
    float:left;
    margin:1px 0px 0px 4px;
}

.scopeLevel {
    font-size: 16px;
    font-weight: normal;
    float:left;
    padding:0px 8px;
    border:1px solid white;
    border-radius:.4em;
    margin-left:10px;
    text-align:center;
    transition:all .5s;
    cursor:pointer;
}
.scopeLevel:hover {box-shadow:0px 0px 6px white;}
.scopeLevel.on {
    background:#366f79;    
}

.alphMarker {
    background: #366f79;
    opacity: .3;
    color: white;
    height: 58px;
    width: 58px;
    border-radius: 60px;
    text-align: center;
    font-size: 68px;
    line-height: 67px;
    margin: 60px auto 60px auto;
    box-shadow: 0px 0px 3px black;
}

.indentedDivs {
    margin-left:2%;
}

@media (max-width: 820px) {

    .titleBar {
        height:91px;
    }
    #menu {
        margin-top:-6px;
    }
    #searchBar {
        top:91px;
    }
    #scopeCont {
        margin-top:9px;
        margin-right:-320px;
    }
    #scopeCont.on {
        margin-top:9px;
        right:none;
        margin-right:-14px;
    }
    
    
}

@media (max-width: 630px) {
    #scopeCont {margin-top:2px;}
    #scopeCont.on {margin-top:2px;margin-right:-11px;}
}


@media (max-width: 400px) {
    #menu {margin-top:6px;width:100%;float:left;}
    label {display:none;}
    select {font-size:15px;float:left;}
    .btn {width: 24%;}
    #menu {margin-top:0px;}
    .leapLogo {
        width: 300px;
        height: 304px;
    }
    #contentArea {padding-top:120px;}
    select {height: 35px;}
    .bookLogo {
        width: 300px;
        height: 270px;
    }
    #scopeCont.on {margin-right:102px;}
}