body.modal-open 
{
    overflow: hidden;
    height: 100%;
}

.content
{
    font-family: "PT Serif";
    font-size: 14pt;
    line-height: 25pt;
}

/* --------- FORMATTING ------------- */

.content p,
.content li
{
    font-size: inherit;
    line-height: inherit;
}


.hero-unit p { line-height: 120%; }
table { display: inline-table; }
center > * {display: inline-block; text-align: left;}
hr 
{ 
    clear: both;
    border-top: 1px solid #555;
}
hr.clear
{
    border-top: 1px solid transparent;
}
.clear { clear: both; }
.offsetted0  { margin-left: 0px;   }
.offsetted1  { margin-left: 40px;  }
.offsetted2  { margin-left: 60px;  }
.offsetted3  { margin-left: 80px;  }
.offsetted4  { margin-left: 120px;  }
.offsetted5  { margin-left: 160px; }
.offsetted6  { margin-left: 200px; }
.text-justify { text-align: justify; }
.draft 
{ 
    color: #f44; 
    background: #ddd;
}

/* ----------- Citation & References ------------ */

.citation
{
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}
/* references in body */
.popover
{
    font-size: 80%;
}
.popover-content span.index 
{
    margin-right: 10px;
    font-weight: bold;
}

.popover .close-popover
{
    position: relative;
    top: -10px;
    opacity: 1.0;
}
/* references in citation */
.citation span.index
{
    background: #555;
    color: #fff;
    display: inline-block;
    width: 40px;
    height: 30px;
    padding: 10px 0 0 0px;
    border-radius: 50%;
    text-align: center;
    margin-right: 5px;
    font-weight: bold;
}
a.ref
{
    font-size: 150%;
    color: #08c;
    display: inline-block;
    min-width: 20px;
    text-align: center;
} 
a.ref:hover { text-decoration: none; }


/* ----------- QUIZZES ---------------- */
.choice
{
    -webkit-user-select: none;
}
.choice input[type='checkbox']
{
    margin-right: 5px;
}
.choice.correct
{
    color: #0a0;
}
.choice.incorrect
{
    color: #f44;
}
.quiz .check-quiz span.correct
{
    display: none;
}
.quiz .check-quiz
{
    background: #f00;
    color: #fff;
}
.quiz.correct .check-quiz
{
    background: #0a0;
    color: #fff;
    font-weight: bold
}
.quiz.correct .check-quiz span.incorrect
{
    display: none;
}
.quiz.correct .check-quiz span.correct
{
    display: inline-block;
}

/* ---------- PROGRAMS --------------- */

.program,
.program li,
.program ol li span
{
    font-size: 12pt; 
    line-height: 25px;
    font-family: Inconsolata;
}
pre.program
{
    padding: 14px;
    background: transparent;
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: RGBA(100,100,0,0) }
code
{
    color: #006644;
    background: transparent;
    border: none;
    font-size: 90%;
}

/* ----------- MathJAX -------------- */

mathjax 
{ 
    color: #006644; 
    font-size: 90%;
}

/* ---------- MARGIN ---------------- */
.margin .margin-content
{
    display: block;
    max-width: 150px;                   /* $marginWidth */
    font-size: 12pt;
    line-height: 20px;
    z-index: 2;
}
.margin.wide .margin-content
{
    max-width: 800px;
}
.margin .margin-anchor
{
    border: 2px solid #fff;         /* $anchorPadding */
    border-radius: 3px;
    background: #fff;
}
.margin .margin-anchor > a
{
    width: 30px;                    /* $anchorSize */
    height: 30px;                   /* = $anchorSize */
    display: inline-block;
    text-align: center;
    color: #888;
}
.margin .margin-anchor > a span 
{
    font-size: 30px; /* = $anchorSize */
    line-height: 38px;
}
.margin.closed .margin-anchor > a
{
    color: #000;
    text-decoration: none;
}
.margin .margin-anchor > a:hover span
{
    font-size: 40px;
}
.margin[static] .margin-anchor > a:hover span
{
    font-size: 30px; /* = $anchorSize */
}
.margin.closed .margin-content
{
    display: none;
}
.margin .margin-content .popover-content > div
{
    color: #555;
    overflow: visible;
}

@media (min-width: 800px) {
    .margin 
    { 
        height: 0px;
        position: relative;
    }
    .margin .margin-content
    {
        top: -20px;                     /* = -$arrowOffset */
    }

    .margin-content.popover .arrow {
        top: 20px;                      /* $arrowOffset */
    }
    .margin-left .margin-anchor
    {
        position: absolute;
        top: -15px;                     /* = $anchorSize / 2 */
        left: -44px;                    /* = $anchorSize + $borderSize */
    }
    .margin-left .margin-content 
    {
        left: -208px;             /* = -($marginWidth + $anchorSize + $borderSize + 2*$anchorPadding) */
    }
    .margin-left .margin-content .arrow 
    {
        border-left-color: #f7f7f7;     /* ref to title color */
    }
    .margin-right {
        float: right;
    }
    .margin-right .margin-anchor
    {
        position: absolute;
        top: -15px;                     /* = $anchorSize / 2 */
        right: -44px;                   /* = $anchorSize + $borderSize */
    }
    .margin-right .margin-content
    {
        left: 46px;             /* = $anchorSize + anchorPadding + $borderSize */
    }
}
@media (max-width: 799px) {
    .margin {
        width: 100%;
        color: red;
    }
    .margin-left { text-align: left; }
    .margin-right { text-align: right; }
    .margin .margin-anchor,
    .margin .margin-content 
    {
        display: inline-block;
        vertical-align: top;
        text-align: left;
    }
    .margin:after {
        clear: both;
        content: ".";
        visibility: hidden;
        height: 0;
    }
    .margin .margin-content.popover { 
        position: relative;
        width: auto;
        max-width: 80%;
    }
}

/* ----------------- POPUP ----------------- */

.popup
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: table;
    z-index: 2001; /* = $navbarZindex + 1 */
}
.popup.closed
{
    display: none;

}
.popup .popup-middle
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.popup .popup-middle .popup-inner
{
    display: inline-block;
    text-align: left;
    background: #fff;
    max-width: 80%;
    overflow-y: auto;
}

/* ----------------- CAROUSEL ----------------- */

.carousel-inner > .item > img 
{
    display: inline-block;
}

/* ----------------- TABS ----------------- */

.nav.nav-tabs > li a
{
    color: #aaa;
    font-weight: bold;
}
.nav.nav-tabs > li.active a 
{
    background: #555;
    color: #fff;
}
.tab-content
{
    overflow: visible;
}

/* ---------------- MEDIA ------------------ */
.media
{
    display: inline-block;
}
.overlay-media
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: table;
    z-index: 2000;
}
.overlay-media.closed
{
    display: none;
}
.overlay-media .jp-video
{
    background: #aaa;
}
.overlay-media.audio .jp-video
{
    background: transparent;
}
.overlay-media .jp-exit
{
    position: fixed;
    left: 0;
    top: 0;
    border: 5px solid #fff;
    background: RGBA(0,0,0,0.8);
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    line-height: 36px;
    padding: 5px;
    text-align: center;
    width: 60px;
    height: 60px;
    margin: 10px 10px;
}
.overlay-media .jp-container
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
.overlay-media .jp-container .jp-jplayer
{
    display: inline-block;
}
.overlay-media .jp-container .jp-type-single
{
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
}
body.media-playing
{
    background: #555;
}

/* ---------------- TABLE OF CONTENT ------------------ */

.navbar.piqunity .nav > li > .dropdown-menu
{
    min-width: 100px;
}
.navbar.piqunity li.revision .dropdown-menu
{
    min-width: 500px;
    padding-left: 10px;
}
/* make the dropdown square */
.navbar.piqunity ul.dropdown-menu 
{
    border-radius: 0;
    -webkit-border-radius: 0;
}
.navbar.piqunity .nav > li > .dropdown-menu ul
{
    list-style: none;
    margin-left: 0;
}
#navbar-scrollspy
{
    color: #000;
    font-weight: bold;
}

/* +------------------+
   | Handheld device  |
   +------------------+ */
@media (max-width: 767px)
{
    .content
    {
        font-size: 15pt;    /* =1.5*desktop font size */
        line-height: 25pt;
    }

    .hero-unit h1 { font-size: 170%; }
    .hero-unit h2 { font-size: 150%; }
    .hero-unit p  { font-size: 150%; }
    .hero-unit
    {
        padding: 10px;
    }

    .offsetted0,
    .offsetted1,
    .offsetted2,
    .offsetted3,
    .offsetted4,
    .offsetted5,
    .offsetted6,
    .offsetted7,
    .offsetted8,
    .offsetted9,
    .offsetted10 { margin-left: 0px; }
    .text-justify { text-align: left; }
}

/*============= Experimental ================ */

body.metalic
{
background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
body.argyle
{
    background-color: #6d695c;
    background-image:
    -webkit-repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    -webkit-repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    -webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    -webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;
}