/*
 * PG HEADER, auto generated by JS:
 *
 *  <header>
 *      <div id=title class=outer>
 *          <div class="inner">TITLE
 *      <div id=hw_header class=outer>
 *          <div class="hw inner">  <!-- 0 or more of these for each type of hw to use in this project >
 *              <table>
 *                  <tr><td>
 *                      <div class="hw_count"><p>1
 *                      <div class="hw_count_separator"><p>x
 *                      <div class="hw_img"><img>
 *                  <tr><td colspan="3">Item Name
 *                  <tr><td colspan="3">(Cell Name)
 */
@import "fonts.css";

/*
 * overall header
 */
body {
    width: 95%;
    margin: auto;
}
header {
    margin-bottom: 0.5in;
}
div.outer {
    background: hsl(210, 64%, 45%); /* Header blue */
    border-radius: 10px;
    text-align: left;
    font-size: 0px;
    font-weight: bold;
    margin: 10px 0 10px 0;
    padding: 10px;
}
div.inner {
    font-size: 36px;
    text-align: center;
    background: hsl(210, 64%, 82%); /* Header light blue */
    border-radius: 10px;
}

/*
 * Challenge Ordered lists
 */
div#challenge ol {
    list-style-type: none;
    margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: li-counter;
}
div#challenge ol > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 3px solid #222222;
}
div#challenge ol > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

/*
 * Header title
 */
div.outer#title {
    -webkit-box-shadow: 0px 20px 10px rgba(0,0,0,0.5);
    box-shadow: 0px 20px 10px rgba(0,0,0,0.5);
    margin-bottom: 30px;
}
div.outer#title.stuck {
    border-radius: 0 0 10px 10px;
}

/*
 * Header hardware
 */
div.outer#hw_header {
    padding-bottom: 0;
}
div.inner.hw {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
div.hw table {
    border: 0;
    border-spacing: 0;
    min-width: 200px;
    margin: 0;
    white-space: nowrap;
}
div.hw td {
    padding: 0px;
    border: 0;
    background: transparent !important;
}
div.hw_count {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count p {
    letter-spacing: -2px;
    margin: 0;
    font-style: italic;
    padding-left: 5px;
    padding-right: 5px;
    font-family: Arial;
    font-size: 80px;
    font-weight: bold;
    line-height: 0;
}

/* hw_count digit specific letter spacings */
div.hw_count_1 p { letter-spacing: -9px; }
div.hw_count_7 p { letter-spacing: -9px; }

div.hw_count_separator {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count_separator p {
    margin: 0;
    font-family: Arial;
    font-size: 30px;
    text-align: right;
    font-weight: bold;
    padding-left: 5px;
}
div.hw_img {
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
}
div.hw img {
    display: block;
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
    height: 100px;
    width: auto;
}

div.hw tr:nth-child(n+2) p {
    margin: 0;
    line-height: 120%;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

div.hw tr:nth-child(2) p { margin-top: -10px; }
div.hw tr:nth-child(3) p { margin-bottom: 10px; }

/*
 * Header troubleshooting
 */
div.outer#troubleshooting p {
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: normal;
    font-style: italic;
}

/*
 * Heading
 */
.section {
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}
.section > *:first-child {
    margin-top: 0;
}
.section:nth-child(odd)     { background: hsl(0, 0%, 80%); }
.section:nth-child(even)    { background: hsl(0, 0%, 80%); }
.section_heading {
    overflow: hidden;
    font-size: 24pt;
    font-weight: bold;
}
.section_heading div {
    padding: 0.4em 0.0em 0.4em 1em;
    float: left;
    background: hsl(26, 87%, 46%); /* Header orange */
    position: relative;
    z-index: 1;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.section_heading div::after{
    background: hsl(26, 87%, 46%); /* Header orange */
    content: "";
    width: 2.5em;
    height: 2.5em;
    margin-top: -1.25em;
    position: absolute;
    right: -1em;
    top: 50%;
    z-index: -1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/*
 * Steps
 */
.section {
  counter-reset: step;                    /* Set the section counter to 0 */
}
.step::before {
  counter-increment: step;                /* Increment the section counter*/
  content: "Step #" counter(step) ": "; /* Display the counter */
}
.step {
    font-weight: bold;
    font-size: 14pt;
}

/*
 * Footer
 */
p.nextprev {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 20pt;
    margin: 0;
}

/*
 * body headers
 */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.2in;
    margin-bottom: 0.2in;
    color: black;
    line-height: 150%;
    text-align: left;
    font-weight: normal;
}
h1 {
    font-size: 20pt;
    padding: 0.4em;
    background: hsl(26, 87%, 46%); /* Header orange */
    border-radius: 10px;
}
h2 {
    font-size: 16pt;
}
h3 {
    font-size: 12pt;
}
a:link {
}

/*
 * Code blocks
 */
div.code {
    margin: 0.25in;
}
div.code > div:first-child::before {
    content: "Code";
}
div.code > div:first-child {
    font-size: 14pt;
    color: #ffffff;
    background-color: #657777;
    padding: 10px;
}

div.code > textarea {
    width: 100%;
    height: 20em;
}

.CodeMirror-cursor {
    visibility: hidden;
}
.CodeMirror-arrow {
    width: 1em;
    margin-right: 10px;
}
.CodeMirror-lines {
    margin-left: 10px;
}
.CodeMirror-linenumbers {
    margin-right: 15px;
}
.CodeMirror-linemarker {
    color: red;
}
.CodeMirror {
    padding-top: 10px;
    font-size: 12pt;
}



/*
 * Output blocks
 */
div.output {
    margin: 0.25in;
}
div.output > div:first-child::before {
    content: "Program Output";
}
div.output > div:first-child {
    font-size: 14pt;
    color: #ffffff;
    background-color: #657777;
    padding: 10px;
}
div.output pre {
    padding: 10px;
}
div.output * {
    font-family: monospace;
    font-size: 12pt;
    margin-top: 0;
    margin-bottom: 0;
    color: #657777;
    background-color: #002B36;
    margin-left: 0in;
    line-height: 110%;
}

/*
 * Info blocks
 */
div.info {
    border: 2px solid black;
    margin: 0.25in;
    border-radius: 10px;
}
div.info > div:first-child {
    border-radius: 8px 8px 0 0;
    background: url('img/infobulb.png');
    background-repeat: no-repeat;
    background-position: 20px 10px;
    background-size: 50px;
    background-color: #657777;
    line-height: 60px;
    padding: 10;
    padding-left: 90px;
    font-size: 18pt;
    color: #ffffff;
}
div.info div:last-child {
    border-radius: 0 0 8px 8px;
    background-color: white;
    padding: 10;
    font-size: 14pt;
}

/*
 * side-by-side image tables
 */
table.images {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.2in;
    margin-bottom: 0.2in;
    border: 0;
}
table.images td {
    border: 0;
}

/*
 * basic tables
 */
table.basic {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0.2in;
    margin-bottom: 0.2in;
    border: 3px solid black;
    border-spacing: 0;
    border-radius: 20px;
    overflow: hidden;
}
table.basic th {
    background: hsl(0, 0%, 60%);
}
table.basic tr:nth-child(odd) td {
    background: hsl(0, 0%, 99%);
}
table.basic tr:nth-child(even) td {
    background: hsl(0, 0%, 85%);
}
table.basic th, table.basic td {
    text-align: center;
    border: 1px solid black;
    padding: 8px;
}
table.basic tr:first-child th:first-child { border-top-left-radius: 17px; }
table.basic tr:first-child th:last-child { border-top-right-radius: 17px; }
table.basic tr:last-child td:first-child { border-bottom-left-radius: 17px; }
table.basic tr:last-child td:last-child { border-bottom-right-radius: 17px; }
table.basic td:first-child, table.basic th:first-child { border-left: 0px; }
table.basic td:last-child, table.basic th:last-child { border-right: 0px; }
table.basic tr:first-child td, tr:first-child th { border-top: 0px; }
table.basic tr:last-child td, tr:last-child th { border-bottom: 0px; }
table.basic th p {
    font-weight: bold;
}
table.basic p {
    margin: 0;
    margin-left: 5px;
}
table.slim {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/*
 * boring tables
 */
table {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0.2in;
    margin-bottom: 0.2in;
    border: 1px solid black;
    border-spacing: 0;
}
th, td {
    text-align: center;
    border: 1px solid black;
    padding: 8px;
}
th p {
    font-weight: bold;
}
table p {
    margin: 0;
    margin-left: 5px;
}

/*
 * Text overlay on images
 */
div.image_text {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    background: white;
    margin: auto;
}
div.image_text div {
    position: relative;
}
div.image_text div p {
    position: absolute;
    color: black;
    font-weight: bold;
    font-family: 'Indie Flower';
    line-height: 0;
    margin: auto;
}
div.image_text div img {
    position: relative;
    padding: 0;
    width: 100%;
}


/*
 * Images
 */
img {
    display: block;
    width: -webkit-calc(100% - 40px); /* must include left/right padding */
    padding: 20px;
    border-radius: 10px;
    background: white;
    margin: auto;
}
img.inline_icon {
    width: 25px;
    margin: initial;
    display: initial;
    vertical-align: middle;
    padding: 0;
    background: transparent;
}
img.bb {
    margin: auto;
    margin-top: 0.25in;
    margin-bottom: 0.25in;
    width: -webkit-calc(100% - 0.75in);
    max-width: 800px;
}
img.schematic {
    display: block;
    margin: auto;
    margin-top: 0.25in;
    margin-bottom: 0.25in;
    width: -webkit-calc(100% - 0.75in);
    max-width: 600px;
}

/*
 * LED Matrix
 */
pre.matrix {
    display: none;
}
