@charset "utf-8";

/* 

Styling rules

An interactive element is always inside an element with class 
hc-included. The element itself has class hc-element and one of 
the classes horstmann_algosim, horstmann_codecheck, horstmann_ma, 
multiple-choice [sic], horstmann_objectdiagram, and so on. 

Code and handwriting fonts in the elements are achieved with 
the .hc-code and .hc-hand mixins. These are marked !important 
so that they override any others. Description authors should not
use these but stick with code, pre, and .pseudo.

Let's keep the common rules simple and easy to override. (In CSS,
a longer sequence of class, pseudo-class and attribute selectors
wins over a shorter sequence; see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) 

*/

/* Fonts */

.hc-code {
    font-family:"DejaVuSansMonoSemiCondensed", "Courier New", monospace  !important;
    font-size: 95% !important;
}

.hc-hand {
    font-family:"Kalam-Regular", "Comic Sans", "MarkerFelt-Thin", cursive !important;
    font-size: 105% !important;
    letter-spacing:-1px !important;
}

.hc-included {
   font-family:"STIXTwoText", "Times New Roman", serif;
   font-size: 12pt;
  /* margin-left: 2em;
   margin-bottom: 1.5ex;*/
}

.hc-included th {
    font-family:"DejaVuSans", "Arial", sans-serif;    
}

.hc-included pre, .hc-included code {
    font-family:"DejaVuSansMonoSemiCondensed", "Courier New", monospace;
}

.hc-included .pseudo {
    font-family:"Kalam-Regular", "Comic Sans", "MarkerFelt-Thin", cursive;
    font-size: 105%;
    letter-spacing:-1px;
}

.hc-message, .hc-button {
    font-family:"DejaVuSans", "Arial", sans-serif;    
}

.hc-circled-number {
    font-family:"NanumGothic-Bold", "Lucida Sans Std", "Arial", sans-serif;
}

/* Colors and backgrounds */

/* blue */

.hc-circled-number, .hc-included pre strong, .hc-message, .hc-message.hc-step {
    color: #006cb7;
}

.hc-button.hc-step {
    background: #006cb7;
}

/* orange */

.hc-message.hc-retry {
    color: #E19042;
}

.hc-button.hc-retry {
    background: #E19042;
}

/* green */

.hc-button.hc-start, .hc-step.hc-reset {
    background: #24ADAE;
}

/* light green */

.hc-message.hc-good {
    color: #63B147;
}

/* gray */

.hc-instructions {
    background: #F3F3F4;
}

/*------------------------------------------------------------------*/

.hc-message .hc-circled-number {
    font-size: 1.25em;
    vertical-align: middle;
}

/* This is for styling the p, pre, code, etc. in an included item */

.hc-included p {
    line-height:1.143; 
    margin-bottom:1em;
    margin-left:0px;
    margin-right:1em;
    /*margin-top:1em;*/
    text-align:left;
    text-indent:0;
}

.hc-included li {
    line-height:1.143;
    margin-bottom:6px;
    margin-top:6px;
}

.hc-included pre {
    line-height:1.25;
}
.hc-included code {
    white-space: pre-wrap;
}

.hc-included th {
    font-size: 85%;
    font-weight: bold;
}

.hc-included td {
    font-size: 90%;
}


/*------------------------------------------------------------------*/

/* All styling that is common to multiple elements goes here */

/*------------------------------------------------------------------*/

/* Shape for all buttons */

.hc-button {
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    padding: 0.2em .56em;
    border-radius: 0.56em;
    position: relative;
    font-size: 75%;
    margin-left: 0.2em;
    margin-right: 0.2em;
    user-select: none;
}

.hc-button code {
    font-size: 98%;
}

.hc-button.hc-start {
    margin-left:1.25em;
}

.hc-step.hc-reset {
    margin-left:6em;
}


/* Good job message */

.hc-message.hc-good::after {
    content: url("../images/tick.png");
    vertical-align: baseline;
}

/* Disabled buttons */

.hc-button.hc-disabled {
    background: gray;
    pointer-events: none; 
}

/* Font for all messages */

.hc-message {
    font-weight: bold;
    font-size:75%;
    margin-top: 1em;
}

.hc-message2 {
    font-size: 0.6em;
}

/* Bottom panel */

.hc-bottom {
    text-align: center;
    clear: both;
}

.hc-bottom .hc-message {
    text-align: left;
}

/* Instruction pane */

.hc-instructions {
    line-height: 1.1em;
    margin: 1em;
    padding: 1em;
}

/*------------------------------------------------------------------*/

/* Zoom button for enlarging images */

.hc-zoombutton {
    margin-left: 5px;
}

/*------------------------------------------------------------------*/

.hc-glossary {
    color: black;
    z-index: 100;
    background-size: auto 85%;
    box-shadow: 4px 4px 4px #999999;
    border-radius: 10px;
    padding: 0.3em; 
    bottom: auto; 
    width: 20em;
    overflow: hidden;
    background-color: #F3F0DD;
    display: inline;
    position: absolute;
    font-family:"DejaVuSans", "Arial", sans-serif;
    font-size: .75em;
}

.hc-glossary code {
    font-family:"DejaVuSansMonoSemiCondensed", "Courier New", monospace;
    font-size: 98%;
}

.hc-glossary > div {
    text-align: left;
    padding: 0.8em;
    display: inline-block;
}

.hc-glossary > div > p:first-child {
    font-weight: bold;
    margin-bottom: 1em;
}