/*--- Links ---*/
a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    a#header:hover { text-decoration:none;}    
    a.external { background: url(Images/ExternalLink.png) center right no-repeat; padding-right: 13px; }    

/* --- Commands ---*/
    a.command { color: black; display: block; padding: 2px 4px 1px 1px; border: 1px solid transparent;  
                font-size: small; margin: 0px 2px; text-decoration:none;
                height:20px; overflow:hidden; width:90%; text-wrap:none;
    }    
a.command:hover { color:black; background: #EEEEEE; border: 1px solid #DDDDDD;  }
a.command:active { background: #DDDDDD;}
img.command { border: 0; height:20px; vertical-align:middle; margin-right:4px; margin-top:-2px}
span.command-list { /*border: 1px solid #EEEEEE; */text-align:left; position:absolute; margin-left:-26px; width: 26px; opacity:0.5;transition-duration:0.3s }
span.command-list:hover { width: 65px; margin-left:-65px; opacity:1;background-color:rgba(255,255,255,0.8);  }
.concept-popup a.command {display: none} /* No commands in concept popups */
.concept-summary-item a.command {display: none} /* No commands in concept summaries */

/* --- Margins --- */
.content > *, .notredtrack-content > * { margin-left: 115px; margin-right:50px; }
.notredtrack-content > * { margin-left: 100px;  }
.widesidebar-container, .notredtrack { margin-left:0px; margin-right:0px; }
 .toc > * { margin-left:40px; margin-right:40px; }
.widefigure, .widetable { margin-left:10px; margin-right:10px; }


/*--- Start of page content ---*/
#page-top {margin-top: 30px; margin-right:60px;}
#running-header {
   font-variant: small-caps; font-size: larger; padding:5px 15px; color:#656D78;
}
#running-header:hover {
   background-color:#f0f0f0; text-decoration:none;
}
#running-header img { vertical-align: middle; padding-left:5px; padding-bottom:3px; }

div.chapter-first{
   font-weight: bold; font-size: x-large
}
.watermark {
    color: #F3F3F3; font-size:40px; margin-top:-30px; margin-left:-30px; margin-bottom:-10px; text-align:center;
}


/*--- End of page content ---*/
div.section-next, div.chapter-next {
   padding-top:20px; text-align: right; 
}

/* --- Feedback ---*/
section.feedback {
    text-align:center; width:100%; font-size:smaller; 
    margin-left:10px; margin-right:-10px
}

/* --- Concepts --- */
.keyconcept,.newkeyconcept { font-weight: bold; }
.concept, .newconcept { font-weight: bold;  }
.term { font-style: italic;  }
a.cref {color: #000040; cursor: help;}
    a.cref:hover { text-decoration: none; color: #0000C0; }
.highlight    a.cref {color: inherit; cursor: help;}
.fwdcref {color: red; font-weight: bold; } /*A concept used before it is defined.*/
.concept-popup {
    background-color: lightyellow;
    color: black;
    border: 1px solid darkgray;
    padding: 0px 10px 0px 10px;
    box-shadow: 3px 3px 3px 0px #BBBBBB; 
    width:500px;
    z-index: 10;
    font-style: normal; font-weight:normal; 
}
div.concept-summary-title{ text-align:center; font-style: italic; margin-bottom:10px; margin-top:50px; }
div.concept-summary-item { margin-top: 10px; }
.popuponly { display:inline; }
div.concept-summary-item .popuponly { display:none; } /* This content should only be shown in popups - not in the end of section summary */
.concept-popup div.concept-summary-item { margin-top: 0px; }
.concept-popup p { margin-top:10px; margin-bottom:10px;}
span.concept-summary-name { font-weight:bold; margin-right: 20px; }


/* --- Text styles ---*/
/* Variable or state */
.var, .state {  font-family: 'Courier New', Courier, monospace; }
/* Factor or distribution */
.factor, .dist { font-style: italic; white-space:nowrap }
.dist { font-family: 'Times New Roman', serif; }
/* General emphasis */
.emph, .textit { font-style: italic }
.underline { text-decoration: underline;}
.textbf { font-weight: bold }
/*.highlight { color: #FF9900; }*/
.critical { color: red;  }
.xlarge { font-size: x-large; }
/* Todo, maydo */
.todo { color: red; }
    .todo:before { content: '[TO DO: '; }
    .todo:after { content: ']'; }
.maydo { color: purple; }
    .maydo:before { content: '[MAY DO: '; }
    .maydo:after { content: ']'; }
    div.center { text-align: center;}
/* References, assumptions */
a.autoref, a.eqref, a.ref { white-space:nowrap; color: #666666 }
span.assumption, a.assumption { border-radius: 50%; border: 1px solid #666666; padding: 2px 5px 2px 5px; margin: 0px 2px 4px 2px; font-size: 80%; }
ol.assumptions li { list-style-type: none; position:relative; margin-bottom:4px;}
ol.assumptions li::before { content: attr(count); position:absolute;left:-30px; top:1px;  border-radius: 50%; border: 1px solid #000000; padding: 0px 5px; margin: 0px 2px 4px 2px; font-size: 80%; }

/* --- Floats and environments --- */ 
.sidebar,.widesidebar { background-color: #F2F2F2; padding: 10px 15px; margin: 10px 35px 10px 100px }
.widesidebar { padding: 10px 10px; margin: 10px 0px }
.sidebar-heading { text-align: center; margin: 0px 0px 10px 0px; }
.figure, .table, .widefigure, .widetable {    text-align: center; clear:both }
.subfigure,.subtable, .minipage { display:inline-block; text-align:center; /*overflow: hidden;*/ padding:1px; vertical-align:middle }
.mdframed { border: 1px solid black; text-align:justify; padding: 0px 20px 0px 0px; margin-top: 5px; margin-bottom: 5px; }
div.external { text-align: right; font-size: small;color: #666666; margin-top:5px; margin-bottom:-5px; }
div.external a { color:#444488 }

/* --- Maths --- */
img.math, img.displaymath, img.align, img.equation, img.eqnarray { vertical-align: middle;   }
div.align, div.equation, div.eqnarray { margin-top:15px ; margin-bottom:15px; text-align:right; padding-right:15px;}
div.equation-starred, div.eqnarray-starred { margin-top:10px ; margin-bottom:10px; text-align:center; padding-right:15px;}

/* --- Figures and captions ---*/
.pdffigure,.jpgfigure { width: 100%; }
.modelfigure {
    margin-left:auto; margin-right:auto
}
span.glofigure { max-height: 350px;  overflow: auto; display:inline-block; max-width:100%; }
.figure .glofigure { max-width: 100%; }
div.caption { margin-bottom:25px; display:block; margin-top:5px; }
span.caption { text-align:justify; margin: 0px auto; display:inline-block;  }
.subfigure div.caption,.subtable div.caption { margin-bottom:0px; margin-top:0px; }
.algorithm div.caption { color: black; font-weight:bold; border-bottom: 1px solid; padding-bottom:5px; margin-bottom:10px; }
.caption-label { font-weight:bold   }
    .caption-label:after { content: ': '    }
.subfigure .caption-label, .subtable .caption-label {    color: black; font-weight: normal}
.subfigure .caption-label:after, .subtable .caption-label:after {  content:' '    }
.sidebar .caption, .widesidebar .caption {    font-weight:bold; font-size:115%; margin-bottom:10px; display:block; text-align:center; }
div.image, div.imagecredit { margin: 5px 20px 10px 10px; float: right;  text-align: center; font-style:italic }
img.image, img.imagecredit { width: 100%; }
.imagecredit-credit { font-size: 7.5pt; text-align:right; margin-top: -6px; color: #777777 }

/* --- Planning ---*/
.plan,.plantheory,.planfigure, .plansidebar, .plantheory { color: blue; border-left: 3px solid; margin:5px; padding:4px }
.planfigure { border: 3px solid; }
    .plan:before { content: 'Plan: '; }
    .plantheory:before { content: 'Planned theory: '; }
    .plantable:before { content: 'Planned table: '; }
    .planfigure:before { content: 'Planned figure: '; }
    .plansidebar:before { content: 'Planned sidebar: '; }

/* --- Headings --- */
h1.chapter, h1.chapternonumber { font-size: xx-large; margin-top: 20px; text-align: left; 
             margin-bottom: 30px; margin-left: 25px;
             padding-bottom:5px; padding-left:90px }
h2.section { font-size: x-large;  margin-left:25px;
              border-bottom: 2px solid; margin-top:10px;}
span.section-number { margin-right:10px; }
h3.subsection { font-weight: bold; font-size: large; margin-bottom:4px }
h4.subsubsection { font-weight: bold; font-size: medium; margin-bottom:4px}

/* --- Table of contents ---*/
.toc { text-align:center; }
.toc-title {font-size: xx-large; margin-bottom:16px  }
td.toc-chapter {vertical-align:top; background-color: #F5F5F5;
                padding:12px 20px;text-align: left; color: #555555; width:50%;  }
    td.toc-chapter.notinprogress:hover { border-left: 4px solid #CCCCEE; color:black; padding-left:16px; }
td.casestudy { /* To do: put in case study styling here */ }
a.toc-chapter { color:inherit; }
a.toc-chapter:hover { text-decoration: none; }
div.toc-chapter-title { padding-bottom: 5px; font-size: x-large;}
td.interlude div.toc-chapter-title {padding-bottom: 0px;font-size:large}
td.interlude   { padding: 6px 20px;}
td.inprogress { opacity: 0.5;}
div.toc-chapter-description { padding-top:4px}

a.toc-chapter-title { color: black;  }
div.toc-concept-list { font-size: 9pt; vertical-align:bottom ;  padding-top:6px; }
.toc-concept-list-header { color:#444444; }
.toc-concept { color: blue; font-style:italic; }
a.toc-concept:visited { color: blue;}

/* --- Algorithms --- */
.algorithm {
    text-align: left; border: 1px solid; padding:10px
}
.KwIn:before { content: 'Input: '; font-weight: bold;   } 
.KwIn { display: block;  } 
.KwOut:before { content: 'Output: '; font-weight: bold; } 
.Repeat-header:before { content: 'repeat '; font-weight: bold; }
.BlankLine { margin-bottom: 10px; }
.ForEach-header:before { content: 'foreach '; font-weight: bold; font-style: normal; } 
.Repeat-footer:before { content: 'until '; font-weight: bold; font-style: normal; } 
.ForEach-header, .Repeat-footer { font-style: italic;  } 
.ForEach-header:after { content: ' do'; font-weight: bold; font-style: normal}
.ForEach, .Repeat { margin-left:10px;padding-left:10px; border-left:1px solid }
.ForEach-footer:before { content: 'end'; font-weight: bold;  }

/* --- Lists --- */
dt { font-weight: bold; float:left; clear:left; margin-right:10px}
dd { margin-bottom:5px }
.enumerate2 { list-style-type:lower-alpha;}
li { margin-bottom:5px}

/* --- Self assessment --- */
.selfassessment .enumerate > li { margin-bottom:15px}
.selfassessment {border: 1px solid #444444; padding:5px 10px;}
div.selfassessment-title { text-align:center; font-style: italic; margin-bottom:10px;  }

/* --- Tabularx ---*/
table.tabularx td { padding: 0px 5px; text-align: left }

/* --- Red track ---*/
/*.redtrack-header { color : #DB4453; border-bottom: solid 2px #DB4453; width:815px; display:block; padding-left:15px;}
.redtrack-description {display:none;  }
.redtrack-content { border-left:15px solid #FBE9EB; padding-top:10px; border-bottom: solid 2px #DB4453; 
                    margin-bottom:20px;width:800px; }*/

.redtrackheader {padding:11px 11px 1px 16px; display:block; background-color: #FBE9EB; }
.redtrack .redtrackheader { margin: -5px -11px 0px -16px;}
.redtrackheader-title { display: block; font-weight: bold; margin-bottom:4px;
 background: url(Images/sub.png) center left no-repeat; padding-left: 40px; padding-top: 3px; padding-bottom:1px; } 
.redtrackheader-description {display:block; }
.redtrack-content { border-left:5px solid #FBE9EB; padding-top:10px; border-bottom: solid 5px #FBE9EB;  margin-left: -16px;
                    padding-left:11px;width:671px;
                    margin-bottom:20px; }

/* --- References --- */
.references-title { text-align:center; font-weight: bold; margin-top:30px;padding-top:10px;  border-top: solid 1px black; }
.citation-item { margin-top: 10px;}
.citation-label {font-weight:bold;}
.citation-text {margin-left:10px;}
a.cite {color:blue; cursor:pointer;}
    a.cite:hover {color:blue; }

/* --- Block styles --- */
.story { font-style: italic }
.important { font-weight: bold; border: 1px solid; margin: 10px 100px 10px 165px; text-align:center; padding:10px}
/*.highlighted { background-color:lightyellow;}*/
.highlight { color: darkorange;}

/* --- Front cover ---*/
#page.front-cover  { text-align:center; margin:0px; color: #AFB6C1; font-weight:lighter; line-height: normal; }
#page.front-cover > *  { margin-left:0px; margin-right:0px; }
#page.front-cover  a, #page.front-cover  a:visited    { color:inherit; }
#page.front-cover > a  { display: block; }
#page.front-cover > a:hover  { text-decoration:none; }
#page.front-cover img { margin-top:10px; margin-bottom:35px; }
#front-title { font-size:40px;  }
#front-info { font-size:20px; color: #EEEEEE ; margin-top:25px; margin-bottom:10px; font-weight:bold;}
#page.front-cover:hover #front-info {color: #888888;}
#front-authors { margin-bottom:20px;}
#front-authors div { font-size:14px;}
#front-authors div:first-child { font-size:22px;}
#front-authors div:last-child { font-size:18px;}

/* --- Switching between svg and no-svg */
.svg { display:none;}
body.svg-supported .svg {display:inline; }
body.svg-supported .no-svg {display:none; }

/* --- Error handling --- */
/* Unknown tag */
.unknown-tag, .error { color: white; background-color: red; }