/*
CSS for course materials
By Jadrian Miles

== HTML Style Guide ==

Tags should be used as follows:
<strong>
  Important points.
<em>
  Less important points.
<code>
  Pre-existing text presented to the user by the computer.  Classes include:
   - <none>: Filenames, names of programs or commands as used in prose, etc.
   - gui: Text that's part of a GUI element, like a menu title.
   - cli: Text shown on the command line, or as command-line output.
<kbd>
  Text the user types into the computer.  By default this is assumed to be typed
  into a CLI, but there's also a class for GUI text input:
   - key: A single key that the user presses.
   - gui: Text that's typed into a GUI text box.
   - cli: Text that's typed into a CLI.
<pre>
  Multi-line code.  Classes:
   - out: Output from a program.
   - in: Input to a program, or code to be typed in.
   - list: The contents of an existing program.

Within <code> and <kbd> elements, spans indicate important sub-parts.  Use the
following classes:
   - repl: Text that ought to be replaced with something.
   - note1: A highlighted sub-part, to be explained in the surrounding text.
             Classes .note1 through .note9 are defined.

<div class="example-box"> creates a centered box set off from the text that contains
whatever example you want to show.  This could be an image, a code snippet, etc.
*/

@import url("https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic");

/* Page width stuff for multiple platforms and printing. */
@media screen, projection, tv {
  body {
    margin: 10%;
  }
}
@media screen and (max-width: 500px) {
  body {
    margin: 2%;
  }
}
@media print {
  body {
    margin: 0px;
  }
}

/* Layout for Template and Basic Elements */
body {
  line-height: 135%;
  font-family: 'Lora', serif;
  font-size: 91%;
}
#head-l {
  float: left;
  width: 20%;
  margin: 0px;
}
#header {
  height: 3ex;
}
#head-c {
  float: left;
  text-align: center;
  width: 60%;
  margin: 0px;
}
#head-r {
  float: right;
  text-align: right;
  width: 20%;
  margin: 0px;
}
h1 {
  margin-top: 2ex;
  margin-bottom: 1ex;
  text-align: center;
}
#date {
  text-align: center;
}
h2 {
  margin-top: 4ex;
  margin-bottom: 0.5ex;
}
h3 {
  margin-top: 2ex;
  margin-bottom: 0.5ex;
}
li {
  margin-top: 1.75ex;
}
li li {
  margin-top: 1ex;
}
ol, ul {
  padding-left: 1.5em;
}
.example-box img {
  display: block;
}
code, kbd {
  white-space: pre;
  display: inline-block;
}

/* Layout for User Elements */
div.section {
  padding-left: 1.5ex;
}
div.taskbox {
  padding-right: 2ex;
}
div.example-box {
  margin: 2.5ex 0px;
  text-align: center;
}
div.example-box > * {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
div.example-box *:first-child {
  margin-top: 0px;
}
div.example-box *:last-child {
  margin-bottom: 0px;
}


/* Text Styling for Template and Basic Elements */
body {
  /*background-color: #FCFEFF;*/
  color: #23363D;
}
@media print {
  body {
    background-color: #FFFFFF;
    color: #000000;
  }
}
div.section {
  border-left: 3px solid #F0F4FC;
}
div.taskbox {
  border: 1px solid #F0E0E0;
  border-left-width: 3px;
  background-color: #FFFCFC;
}
a, a:visited {
  color: #0B86B5;
  text-decoration: underline;
}
a:hover {
  background-color: #FAFAD0;
  color: #A0363D;
  text-decoration: none;
  outline: 2px solid #F0E0A0;
}
ol ol {
  list-style-type: lower-latin;
}


/* Text Styling for User Elements */
code {
  border: 1px solid #C0C0C0;
  padding: 0.15ex 0.5ex 0.25ex 0.5ex;
}
code.gui {
  font-family: serif;
  padding: 0.05ex 0.2ex 0.1ex 0.2ex;
  outline: 1px solid #D0D0D0;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-right: none;
  border-bottom: none;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f8f8f8; /* Old browsers */
  background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 43%, #e5e5e5 61%, #f0f0f0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(43%,#f0f0f0), color-stop(61%,#e5e5e5), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
}
code.cli {
  border: 1px solid #849096;
  padding: 1ex 2ex;
  color: #FCFEFF;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #23363d; /* Old browsers */
  background: -moz-linear-gradient(top, #23363d 0%, #324d56 75%, #23363d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23363d), color-stop(75%,#324d56), color-stop(100%,#23363d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* IE10+ */
  background: linear-gradient(to bottom, #23363d 0%,#324d56 75%,#23363d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23363d', endColorstr='#23363d',GradientType=0 ); /* IE6-9 */
}
kbd {
  border: 2px solid #A2DCE5;
  padding: 0.15ex 1ex 0.25ex 1ex;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f6fdfe; /* Old browsers */
  background: -moz-linear-gradient(top, #f6fdfe 0%, #ecf8fa 51%, #e9f7f9 75%, #edf9fb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fdfe), color-stop(51%,#ecf8fa), color-stop(75%,#e9f7f9), color-stop(100%,#edf9fb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fdfe', endColorstr='#edf9fb',GradientType=0 ); /* IE6-9 */
}
kbd.gui {
  border: 2px solid #A2DCE5;
  padding: 0.15ex 1ex 0.25ex 1ex;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f6fdfe; /* Old browsers */
  background: -moz-linear-gradient(top, #f6fdfe 0%, #ecf8fa 51%, #e9f7f9 75%, #edf9fb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fdfe), color-stop(51%,#ecf8fa), color-stop(75%,#e9f7f9), color-stop(100%,#edf9fb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fdfe', endColorstr='#edf9fb',GradientType=0 ); /* IE6-9 */
}
kbd.cli {
  border: 2px solid #A2DCE5;
  padding: 0.15ex 1ex 0.25ex 1ex;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f6fdfe; /* Old browsers */
  background: -moz-linear-gradient(top, #f6fdfe 0%, #ecf8fa 51%, #e9f7f9 75%, #edf9fb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fdfe), color-stop(51%,#ecf8fa), color-stop(75%,#e9f7f9), color-stop(100%,#edf9fb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fdfe', endColorstr='#edf9fb',GradientType=0 ); /* IE6-9 */
}
kbd.key {
  font-family: sans-serif;
  font-size: 90%;
  line-height: 130%;
  font-weight: normal;
  border: 2px outset #D0D0D0;
  padding: 0.15ex 0.5ex 0.15ex 0.5ex;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f8f8f8; /* Old browsers */
  background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 43%, #e5e5e5 61%, #f0f0f0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(43%,#f0f0f0), color-stop(61%,#e5e5e5), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f8f8f8 0%,#f0f0f0 43%,#e5e5e5 61%,#f0f0f0 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
}
pre {
  border: 1px solid #C0C0C0;
  padding: 1ex 2ex;
}
pre.out {
  outline: 2px solid #0D252D;
  border: 1px solid #849096;
  padding: 1ex 2ex;
  color: #FCFEFF;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #23363d; /* Old browsers */
  background: -moz-linear-gradient(top, #23363d 0%, #324d56 75%, #23363d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23363d), color-stop(75%,#324d56), color-stop(100%,#23363d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #23363d 0%,#324d56 75%,#23363d 100%); /* IE10+ */
  background: linear-gradient(to bottom, #23363d 0%,#324d56 75%,#23363d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23363d', endColorstr='#23363d',GradientType=0 ); /* IE6-9 */
}
pre.in {
  border: 2px solid #A2DCE5;
  padding: 1ex 2ex;
  /* Gradients by Colorzilla: http://www.colorzilla.com/gradient-editor */
  background: #f6fdfe; /* Old browsers */
  background: -moz-linear-gradient(top, #f6fdfe 0%, #ecf8fa 51%, #e9f7f9 75%, #edf9fb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fdfe), color-stop(51%,#ecf8fa), color-stop(75%,#e9f7f9), color-stop(100%,#edf9fb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f6fdfe 0%,#ecf8fa 51%,#e9f7f9 75%,#edf9fb 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fdfe', endColorstr='#edf9fb',GradientType=0 ); /* IE6-9 */
}
.repl {
  border-bottom: 1px dotted red;
  background-color: #FFF0F0;
}
code a, kbd a {
  text-decoration: none;
}


table {
  border: 1px solid #23363D;
  text-align: center;
  border-collapse: collapse;
}
td, th {
  padding: 0.5ex 1ex;
}


table.texttable {
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: left;
}

table.excel tr:first-child {
  border-bottom: 1px solid #7E8E94;
}
table.excel tr th:first-child {
  border-right: 1px solid #7E8E94;
}

table.fencepost tr:first-child {
  border-bottom: 1px solid #7E8E94;
}
table.fencepost tr.newhead {
  border-top: 3px double #7E8E94;
  border-bottom: 1px solid #7E8E94;
}
table.fencepost td, table.fencepost th {
  border-left: 1px solid #7E8E94;
}
table.fencepost td:first-child, table.fencepost th:first-child {
  border-left: 0px;
}



/* Tweaks for Printing */
@media print {
  body {
    margin: 0px;
    padding: 0px;
    font-size: 75%;
  }
}