:root
{
    --secondary: #ffd800;
    --border:  #c5c5c5;
    --border2:  #aaaaaa;
    --titlebar: #9057c3;
    --titlebartext: #ffffff;
    --background: #bbbbbb;
    --navlink: #310659;
    --text: #310659;
    --moospurple: #4b137e;
    --tocbg: #cccccc;
    --tocborder: #444;

    --codetagbg: #97b4e9;
    --codetagtxt: #0f3273;

    --cpp1: #bf0062;
    --cpp2: #ad2a26;
    --cpp3: #6d00a1;
}

a:hover {
    color: var(--titlebar);
}

table {
    margin: 20px auto;
}

@media only screen and (max-width: 1200px) {
    body {
        margin: 0;
        padding: 0;
    }

    #page-container {
        width: 100% !important;
        margin: 0 0;
        padding: 0;
    }

    #page-container section#navigation,
    #page-container section#content,
    #page-container section#footer {
        display: block;
        position: relative;
        width: 100%;
        margin: 0 0;
    }

    #page-container .sub-content {
        margin: 50px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #page-container section#navigation .logo img {
        width: 50px;
        height: 50px;
    }

    #page-container .thumbnail-gallery .thumbnail {
        width: 75% !important;
        margin: 10px auto !important;
        float: none;
    }

    .button-link a {
        display: block;
        clear: both;
        width: 80% !important;
        margin: 0 auto !important;
    }
}

body
{
    background: url( "../images/bg-texture2.png" );
    font-family: sans-serif;
    color: #fff;
}

body.esperanto
{
    background: url( "../images/eo-texture.png" );
}

body.framed-page
{
    background: var(--moospurple);
}

iframe { background: #fff; }

a,
a:visited,
a:target
{
    color: #310659;
    font-weight: bold;
}

.titlebar
{
    background: var(--titlebar);
    color: var(--titlebartext);
    border-bottom: solid 5px var(--border);
    margin: 0;
    padding: 5px;
    text-align: left;
    font-weight: bold;
}

.esperanto .titlebar
{
    background: var(--EOtitlebar);
    color: var(--EOtitlebartext);
}

.full-page-content {
    width: 100%;
}

#page-container
{
    width: 90%;
    margin: 0 auto;
}

body.framed-page #page-container
{
    width: 100%;
    margin: 0;
    padding: 0;
}

#page-container #navigation
{
    width: 250px;
    position: fixed;
    margin-left: -10px;
    border: outset 5px var(--border);
    background: var(--background);
}

#page-container #content
{
    width: 80%;
    margin-left: 300px;
}

#page-container #full-content
{
    width: 100%;
}

body.framed-page #page-container .sub-content
{
    width: 98%;
    margin: 25px auto;
}

#page-container  .sub-content
{
    margin: 25px;
    padding: 5px;
    width: 90%;
    border: outset 5px var(--border);
    background: var(--background);
    color: var(--text);
}

.esperanto #page-container  .sub-content
{
    color: var(--EOtext);
}

#page-container .sub-content .sub-content
{
    border: solid 1px var(--border2);
}

#page-container #full-footer
{
    margin-top: 20px;
    width: 100%;
}

#page-container #footer
{
    margin-left: 300px;
    width: 80%;
}

#page-container #footer,
#page-container #full-footer
{
    margin-top: 20px;
    border: outset 5px var(--border);
    background: #000;
    color: #fff;
    font-family: monospace;
}

#page-container #navigation p.logo
{
    text-align: center;
}

#page-container #navigation img
{
    width: 80%;
}

#footer .socials,
#full-footer .socials
{
    margin: 10px;
}

#footer .socials a,
#full-footer .socials a
{
    color: #fff;
    text-decoration: none;
}

#footer .socials a:hover,
#full-footer .socials a:hover
{
    color: var(--secondary);
}

#page-container #navigation #socials
{
    text-align: center;
    margin: 10px;
}

#page-container #navigation #socials img
{
    width: auto;
}

nav ul
{
    padding: 5px;
}

nav ul li
{
    list-style-type: none;
    width: 80%;
}

nav ul li a
{
    color: var(--navlink);
    padding: 5px 15px;
    font-weight: bold;
    margin-bottom: 10px;
    border: outset 5px #dfdfdf;
    background: #d0d0d0;
    width: 100%;
    display: block;
    text-decoration: none;
}

.esperanto nav ul li a
{
    color: var(--EOnavlink);
}

nav ul li a:hover
{
    background: #e0e0e0;
}

.button-link
{
    text-align: center;
}


.button-link a
{
    color: var(--navlink);
    padding: 5px 15px;
    font-weight: bold;
    margin-bottom: 10px;
    border: outset 5px #dfdfdf;
    background: #d0d0d0;
    width: 100%;
    text-decoration: none;
}

.esperanto .button-link a
{
    color: var(--EOnavlink);
}

.button-link a:hover
{
    background: #e0e0e0;
}

#page-container #content iframe
{
    width: 100%;
    border: none;
    height: 1000px;
}

#page-container #content .sub-content:nth-child(even)
{
    /*margin-right: 5%;*/
}

#page-container #content .sub-content:nth-child(odd)
{
    /*margin-left: 5%;*/
}

#page-container .sub-content h2
{
    background: var(--moospurple);
    color: #fff;
    margin: 0 0 10px 0;
    padding: 5px;
}

.esperanto #page-container .sub-content h2
{
    background: var(--EOtitlebar2);
}

.banner-gallery
{
}

.banner-gallery .banner
{
    width: 90%;
    margin: 1% auto;
    text-align: left;
    color: var(--navlink);
    padding: 5px 15px;
    font-weight: bold;
    margin: 10px auto;
    border: outset 5px #dfdfdf;
    background: #d0d0d0;
    width: 90%;
    text-decoration: none;
}

.esperanto .banner-gallery .banner
{
    color: var(--EOnavlink);
}

.banner-gallery .banner .image
{
    width: 20%;
    float: left;
    margin-right: 2%;
}

.banner-gallery .banner .image img
{
    width: 100%;
}

.banner-gallery .banner .content
{
    float: left;
    width: 75%;
}

.banner-gallery .banner .topic-link
{
    font-size: 1.2em;
}

.banner-gallery .banner .description
{
    font-weight: normal;
}

.thumbnail-gallery .thumbnail
{
    float: left;
    width: 23%;
    margin: 1%;
}

.thumbnail-gallery .thumbnail img
{
    width: 100%;
    border: solid 2px #000;
}

.columned .column
{
    float: left;
}

.columned
{
    margin: 10px;
}


.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.center
{
    text-align:center;
}

.back-to-home a {
    color: #fff;
    text-decoration: none;
}

.back-to-home img {
    height: 50px;
}

p.back-to-home {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------=----- LABS */

pre {
    font-size: 14pt;
}

.src-terminal
{
    background: #201826;
    color: #e5d3f4;
    font-weight: bold;
}

.src-terminal:before
{
    content: "TERMINAL";
}


.src-file
{
    background: #aaaaaa;
    color: #333333;
    font-weight: bold;
}

.src-file:before
{
    content: "FILE";
}

.src-txt
{
    max-height: 400px;
    overflow: scroll;
}

.src-form
{
    background: #bddfff;
    color: #001528;
    font-weight: bold;
}

.src-form:before
{
    content: "FORM";
}

/* UML */

table.uml
{
    margin: 20px auto;
}

table.uml code,
table.funcspecs code{
    background: none !important;
    font-size: 12pt;
}

table.funcspecs
{
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
}

table.funcspecs tr td {
    border: solid 1px #aaa;
}

/* Lab hint widget ----------------------------------------------------- */
.HINT {
    background: #e4ffde;
    border: solid 1px #00ff00;
    padding: 5px;
    cursor: pointer;
    margin: 10px;
}
.HINT i,
.HINT i b,
.HINT i code,
.HINT .org-src-container,
.HINT pre,
.HINT pre span
{
    color: #e4ffde !important;
    background: none !important;
    border: none;
    font-size: 12pt;
}

.HINT p {
}

.HINT:hover i,
.HINT:hover i b,
.HINT:hover i code,
.HINT:hover .org-src-container,
.HINT:hover pre,
.HINT:hover pre span
{
    color: #000 !important;
}

.HINT i {
    font-style: normal !important;
}

.HINT b { color: #000; }


/* ------------------------------------- READING / CONCEPT INTROS */

hr {
    border: dashed 2px #aaa;
}

code
{
    padding: 2px;
    margin: 2px;
    font-weight: bold;
    font-size: 1.1em;
    background: var(--codetagbg);
}

.figure p {
    max-width: 75%;
    margin: 0 auto;
}

.figure p {
    font-size: 0.9em;
    color: #777;
}

.figure a {
    color: #777;
}

.REVIEW, .ReviewQuestion {
    border: outset 2px #8600b7;
    background: #f6e4fc;
    margin: 20px 50px;
    font-size: 0.9em;
}

.REVIEW p,
.ReviewQuestion p {
    margin-left: 15px;
}

.REVIEW code,
.ReviewQuestion code,
.REVIEW pre,
.ReviewQuestion pre {
    font-size: 12pt;
}

.REVIEW code,
.ReviewQuestion code {
    background: #faefff;
}

.REVIEW ul {
    margin-bottom: 15px;
    list-style-type: none;
}

.REVIEW ul li p,
.ReviewQuestion ul li p {
    margin-left: 10px;
}

.REVIEW ul li ul li,
.ReviewQuestion ul li ul li {
}

.REVIEW ul li ul,
.ReviewQuestion ul li ul {
    list-style-type: "-";
}

.OVERVIEW {
    margin: 20px auto;
    padding: 10px;
    width: 95%;
    background: var(--background);
    border: outset 5px var(--border);
    color: var(--text);
}

.RIGHT6 {
    float: right;
    width: 66%;
}

.RIGHT3 {
    float: left;
    width: 33%;
}

.LEFT3 {
    float: left;
    width: 30%;
    text-align: center;
}

.LEFT3 a {
    color: #fff;
}

.CENTER {
    margin: 0 auto;
    text-align: center;
}


/* -------------------------------------------------------- EMACS */

#content {
    width: 90%;
    max-width: 90%;
    font-size: 14pt;
}

h2 {
    background: var(--moospurple);
    color: var(--titlebartext);
    border-bottom: solid 5px var(--border);
    margin: 0;
    padding: 5px;
    text-align: left;
    font-weight: bold;
}

.outline-2 {
    background: var(--background);
    margin: 25px auto;
    padding: 5px;
    width: 90%;
    border: outset 5px var(--border);
    background: var(--background);
    color: var(--text);
}

#table-of-contents {
    width: 30%;
    float: right;
}

@media only screen and (max-width: 1200px) {
    #table-of-contents {
        width: 90%;
        float: none;
    }
}

.outline-text-2 {
}

.outline-3 {
    margin-left: 10px;
    padding-left: 10px;
    border-left: solid 1px var(--border2);
}

.outline-text-3 {
}

.outline-4 {
    margin-left: 10px;
    padding-left: 10px;
    border-left: solid 1px var(--border2);
}

.outline-text-4 {
}

#postamble {
    margin-top: 20px;
    font-size: 0.8em;
}

#table-of-contents {
    background: var(--tocbg);
    font-size: 12pt;
    margin: 25px;
    padding: 5px;
    border-left:   solid 5px var(--tocborder);
    border-bottom: solid 5px var(--tocborder);
    border-top:    solid 4px var(--tocborder);
    border-right:  solid 4px var(--tocborder);
    color: var(--text);
}

ul.assignments li {
    font-size: 16pt;
    font-weight: bold;
    margin: 10px 0;
}