/* ************************ */
/* styles for screen output */ 
/* ************************ */


html {
  background: #183952 url(../img/background.jpg) fixed right;
  font: normal 10pt "Verdana", "Geneva", "Arial", "Helvetica", sans-serif;
}


body {
  margin: 3em 0 0 0;
}


#navigation {
  min-width: 770px;
  max-width: 770px;
  margin: 1em auto;
  padding: 0;
  color: white;
  text-align: right;
}

#navigation a {
  color: white;
  font-weight: bold;
  font-size: 10pt;
  text-shadow: #183952 0pt 0pt 0.25em;
}

#navigation ul {
  margin: 0;
  padding: 0;
}

#navigation ul li {
  color: white;
  display: inline;
}

#navigation ul li:before {
  content: "\2022 \0020";
}


#logo {
  text-align: center;
}


#bilingual {
  display: table;
  margin: 2em 0 1em 0;
  width: 100%;
}

#english, #spanish {
  display: table-cell;
  width: 50%;
}

#english {
  text-align: right;
  padding-right: 1.5em;
}

#english ul li {
  text-align: right;
  direction: rtl;
  margin-right: 3em;
}

#spanish {
  padding-left: 1.5em;
}


#organisations {
  display: table;
  margin: 1em auto 0 auto;
}

#organisation {
  display: table-row;
}

#organisation a {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
}

#organisation a:first-child {
  text-align: right;
}

#organisation img {
  border: none;
}


#logo-small {
  width: 770px;
  height: 155px;
  background-image: url(../img/logo-small.png);
  background-repeat: no-repeat;
  background-position: top right;
  position: absolute;
  padding-left: 7em; 
  z-index: -1;
}


#content {
  background-color: #aab9c4;
  min-width: 770px;
  max-width: 770px;
  margin: 1em auto;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #d4dbde;
  padding: 3em;
  z-index: 1;
}


h1 {
  margin: 0 0 1em 0;
  color:  #183952;
  font-size: 13pt;
  font-weight: bold;
}


h1.monolithic {
  font-size: 20pt;  
}


a.external {
  background: url(../img/link/external.png) center right no-repeat;
  padding: 0 18px 0 0;
}

a:hover.external {
  background-image: url(../img/link/external_active.png);  
}

a.mailto {
  background: url(../img/link/mail.png) center right no-repeat;
  padding: 0 18px 0 0;
}

a:hover.mailto {
  background-image: url(../img/link/mail_active.png);
}

a.citation {
  background: url(../img/link/citation.png) center right no-repeat;
  padding: 0 18px 0 0;
  cursor: help;    
}

a:hover.citation {
  background-image: url(../img/link/citation_active.png);
}

a.lesson {
  background: url(../img/link/lesson.png) center right no-repeat;
  padding: 0 18px 0 0;
}

a:hover.lesson {
  background-image: url(../img/link/lesson_active.png);
}

a.figure {
  background: url(../img/link/figure.png) center right no-repeat;
  padding: 0 18px 0 0;
}

a:hover.figure {
  background-image: url(../img/link/figure_active.png);
}

a.term {
  background: url(../img/link/term.png) center right no-repeat;
  padding: 0 18px 0 0;
  cursor: help;  
}

a:hover.term {
  background-image: url(../img/link/term_active.png);
}

a.unit {
  background: url(../img/link/unit.png) center right no-repeat;
  padding: 0 18px 0 0; 
}

a:hover.unit {
  background-image: url(../img/link/unit_active.png);
}

a, a:visited {
  color: #183952; 
  font-weight: bold; 
  text-decoration: none;
}

a:hover, a:active {
  color: white;
  text-decoration: underline;
  text-shadow: none;
}




p {
  font-size: 10pt;
  line-height: 1.4;
  color: black;
  margin: 0 0 1em 0;
}


#copyright {
  text-align: center;
  min-width: 770px;
  max-width: 770px;
  margin: 1em auto 3em auto;
  padding: 0 3em;
  color: white;
  font-weight: normal;
  line-height: 1.5;
  font-size: 8pt;
  text-shadow: #183952 0pt 0pt 0.25em;
}

#copyright a {
  color: white;
  font-weight: normal;
  line-height: 1.5;
  font-size: 8pt;
  text-shadow: #183952 0pt 0pt 0.25em;
}

#copyright a.cc {
  vertical-align: bottom;
}

#copyright a.cc img {
  border: none;
  vertical-align: bottom;
}

#copyright a.alpandino {
  vertical-align: bottom;
}


#toocool a {
  position: fixed;
  right: 0;
  bottom: 0;
  display: block;
  height: 80px;
  width: 80px;
  background: url("../img/toocool.png") bottom right no-repeat;
  text-indent: -999em;
  text-decoration: none;
}





/* *************** */
/* lesson specific */ 
/* *************** */


/* title */

#lessontitle {
  color: white;
  font-size: 10pt;
  font-weight: bold;
  text-shadow: #183952 0pt 0pt .25em;  
  vertical-align: bottom;
  float: left;
}

#entrytitle {
  margin: 0 0 1em 0;
  color: #183952;
  font-size: 12pt;
  font-weight: bold;
}



/* navigation tree */

#tree {
  position: relative;
  margin: 0 0 1em 1em;
  float: right;
}

div.arrow {
  position: absolute;
  width: 7px;
  height: 12px;
  font-size: 8px;
}

div.dot, div.circle, div.flag, div.head, div.tick {
  position: absolute;
  width: 8px;
  height: 8px;
  font-size: 6px;
}

img.arrow {
  background: url("../img/map/arrow.png") no-repeat;
}

a:visited img.arrow {
  background: url("../img/map/arrow_visited.png") no-repeat;
}

img.arrow_current, a:hover img.arrow {
  background: url("../img/map/arrow_active.png") no-repeat;
}

img.circle {
  background: url("../img/map/circle.png") no-repeat;
}

a:visited img.circle {
  background: url("../img/map/circle_visited.png") no-repeat;
}

img.circle_current, a:hover img.circle {
  background: url("../img/map/circle_active.png") no-repeat;
}

img.dot {
  background: url("../img/map/dot.png") no-repeat;
}

a:visited img.dot {
  background: url("../img/map/dot_visited.png") no-repeat;
}

img.dot_current, a:hover img.dot {
  background: url("../img/map/dot_active.png") no-repeat;
}

img.flag {
  background: url("../img/map/flag.png") no-repeat;
}

a:visited img.flag {
  background: url("../img/map/flag_visited.png") no-repeat;
}

img.flag_current, a:hover img.flag {
  background: url("../img/map/flag_active.png") no-repeat;
}

img.head {
  background: url("../img/map/head.png") no-repeat;
}

a:visited img.head {
  background: url("../img/map/head_visited.png") no-repeat;
}

img.head_current, a:hover img.head {
  background: url("../img/map/head_active.png") no-repeat;
}

img.tick {
  background: url("../img/map/tick.png") no-repeat;
}

a:visited img.tick {
  background: url("../img/map/tick_visited.png") no-repeat;
}

img.tick_current, a:hover img.tick {
  background: url("../img/map/tick_active.png") no-repeat;
}

.arrow img, .circle img, .dot img, .flag img, .head img, .tick img {
  vertical-align: top;
  border: 0;
}


/* text formatting */

b i, i b {
  font-style: italic;
  font-weight: bold;
}

b {
  font-weight: bold
}

i {
  font-style: italic;
}

p.text b {
  color: #183952;
}


sub, sup {
  font-size: 6pt;
  line-height: 1;
}


/* image navigation large */

div.imageNavigationLarge {
  text-align: center;
  margin-top: 2em;
}

div.imageNavigationLarge img {
  border: none;
}



/* titles */

h2 {
  font-size: 11pt;
  color: #183952;
  font-weight: bold;
  margin-top: 0;
}


/* clarify, look, act */

div.clarify, div.look, div.act {
  margin-top: 2em;  
  clear: both;
}


/* lists */

ul li, ol li {
  margin-bottom: 0.3em;
  text-align: left;
  color: #183952;  
}

ul li {
  list-style-type: disc;
}

dl dd {
  margin-bottom: 0.3em;
}

span.listItemContents {
  color: black;
}

span.listItemContents b {
  color: #183952;  
}

ol.listTypeUpperLatin {
  list-style: upper-latin;
}

ol.listTypeLowerLatin {
  list-style: lower-latin;
}


/* citation */

.citation {
  cursor: help;
}


/* image enlargement */

div.imageEnlargement, div.imageEnlargementMoreInfo {
  margin: 0;
  padding: 0;
}

div.imageEnlargementMoreInfo div.image a img {
  border-width: 3px;
}


/* image block */

div.imageBlock {
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

div.imageFrame {
  display: table-cell;
  width: 1px;
}


/* image and caption */

div.image {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div.image a, div.image a:visited {
  color: white;
}

div.image a:hover, div.image a:active {
  color: #183952;
}

div.image a img {
  border-width: 1px;
  border-style: solid;
}


/* image caption */

div.caption {
  font-size: 10pt;
  line-height: 1.2;
  color: #183952;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

div.caption p.text {
  text-align: left;
  margin-top: 1.5em;
  color: white;
}

div.imageViewer div.caption b {
  color: white;
}

div.imageViewer li,
div.imageViewer span.listItemContents {
  color: white;
}


/* learning objectives */

#lob {
  clear: both;
}

#lob p {
  background: #39525a;
  padding: 0.5em 2em;
  color: white;
  font-weight: bold;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -icab-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

#lob ul {
  border: 1px #183952 solid;
  border-top: none;
  background: #d4dbde;
  margin-top: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  border-radius: 0 0 10px 10px;
  -o-border-radius:  0 0 10px 10px;
  -icab-border-radius:  0 0 10px 10px;
  -khtml-border-radius:  0 0 10px 10px;
  -moz-border-radius:  0 0 10px 10px;
  -webkit-border-radius:  0 0 10px 10px;
}

#lob li {
  padding: 0.2em;
}


/* link collection page */

div.linkCollection {
  margin-top: 3em;
}

div.linkCollection h2 {
  background: #39525a;
  border: 1px white solid;
  color: white;
  font-size: 10pt;
  padding: 0.3em 1em;
  float: left;
  margin: 0 3em 0 0;
  text-shadow: none;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.linkCollection div.link {
  display: block;
  margin-left: 10em;
  margin-bottom: 1em;
  font-weight: normal;
  color: black;
}


/* conclusions page */

div.furtherReading, div.acknowledgements, div.glossary, div.bibliography {
  margin-top: 3em;
}

div.furtherReading h2, div.acknowledgements h2, div.glossary h2, div.bibliography h2 {
  background: #39525a;
  border: 1px white solid;
  color: white;
  font-size: 10pt;
  padding: 0.3em 1em;
  float: left;
  margin: 0 3em 0 0;
  text-shadow: none;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
}

div.furtherReading p {
  display: block;
  margin-left: 18em;
  margin-bottom: 1em;
}

div.acknowledgements div.contributor {
  margin-left: 18em;
  margin-bottom: 1em;
}

div.acknowledgements div.contributor div.person {
  margin-bottom: 0.5em;
} 

div.glossary dl {
  margin-left: 18em;
}

div.glossary dl dt {
  font-weight: bold;
  color: #183952;
}

div.bibliography .bibitem {
  margin-left: 18em;
  margin-bottom: 0.5em;
}


/* column layouts */
/* adapted from http://www.glish.com/css/2.asp */

/* image-text-image */

div.columnImageTextImage {
  clear: both;
  width: 100%;
}

div.columnImageTextImage div.columnLeft {
  width: 25%;
  display: table-cell;
  text-align: center;
}

div.columnImageTextImage div.columnMiddle {
  width: 50%;
  display: table-cell;
}

div.columnImageTextImage div.columnRight {
  width: 25%;
  display: table-cell;
  text-align: center;
}

div.columnImageTextImage div {
  vertical-align: top;
  margin-left: 12px;
  margin-right: 12px;
}


/* image-image */

div.columnImageImage {
  clear: both;
  display: table;
  margin: 0 auto;
}

div.columnImageImage div.columnLeft {
  display: table-cell;
  text-align: center;
  width: 1px;
}

div.columnImageImage div.columnRight {
  display: table-cell;
  text-align: center;
  width: 1px;
}

div.columnImageImage div {
  vertical-align: top;
  margin-left: 6px;
  margin-right: 6px;
}


/* image-image-image */

div.columnImageImageImage {
  clear: both;
  display: table;
  margin: 0 auto;
  width: 100%;
}

div.columnImageImageImage div.columnLeft {
  width: 33%;
  display: table-cell;
  text-align: center;
}

div.columnImageImageImage div.columnMiddle {
  width: 34%;
  display: table-cell;
  text-align: center;
}

div.columnImageImageImage div.columnRight {
  width: 33%;
  display: table-cell;
  text-align: center;
}

div.columnImageImageImage div {
  vertical-align: top;
  margin-left: 12px;
  margin-right: 12px;
}


/* image-text */

div.columnImageText {
  clear: both;
  display: table;
  margin: 0 auto;
  width: 100%;
}

div.columnImageText div.columnLeft {
  width: 25%;
  display: table-cell;
  text-align: center;
  width: 1px;
  padding-right: 1em;
}

div.columnImageText div.columnRight {
  width: 75%;
  vertical-align: top;
  display: table-cell;
}

div.columnImageText div {
  vertical-align: top;
  margin-left: 12px;
  margin-right: 12px;
}


/* text-image */

div.columnTextImage {
  clear: both;
  display: table;
  margin: 0 auto;
  width: 100%;
}

div.columnTextImage div.columnLeft {
  width: 75%;
  vertical-align: top;
  display: table-cell;
}

div.columnTextImage div.columnRight {
  width: 25%;
  display: table-cell;
  text-align: center;
  width: 1px;
  padding-left: 1em;
}

div.columnTextImage div {
  vertical-align: top;
  margin-left: 12px;
  margin-right: 12px;
}


/* text-image-text */

div.columnTextImageText {
  clear: both;
  display: table;
  margin: 0 auto;
  width: 100%;
}

div.columnTextImageText div.columnLeft,
div.columnTextImageText div.columnMiddle,
div.columnTextImageText div.columnRight {
  vertical-align: middle;
  display: table-cell;
}

div.columnTextImageText div {
  vertical-align: top;
  margin-left: 12px;
  margin-right: 12px;
}


/* column layouts (common) */

div.columnTextImage,
div.columnImageText,
div.columnImageTextImage,
div.columnImageImage,
div.columnImageImageImage {
  margin-bottom: 2em;
}

/* TODO: problem with missing spacing, e.g. in 02a and 16e */
div.columnLeft div.imageRow,
div.columnRight div.imageRow,
div.columnLeft div.imageMap,
div.columnRight div.imageMap {
  margin-left: auto;
  margin-right: auto;
}


/* image showcase with sidecaps */

div.showcaseSidecaps {
  clear: both;
  margin-top: 3em;
  border: 1px #183952 solid;
  background: #d4dbde;
  width: 70%;
  min-width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.showcaseSidecaps h2 {
  color: white;
  font-size: 10pt;
  font-weight: bold;
  background: #39525a;
  padding: 6px;
  margin: 0;
  text-shadow: none;
  border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -icab-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

div.showcaseSidecaps div {
  display: table-cell;
  vertical-align: top;
  text-align: left;
}

div.showcaseSidecaps div.caption {
  min-width: 100px;  
}

div.showcaseSidecaps div.image, div.showcaseSidecaps div.caption {
  padding: 6px;
}
  

/* image series */

div.imageSeries div.images {
  text-align: center;
}

div.imageSeries div.image {
  display: inline;
  font-weight: bold;
  color: #183952;
  line-height: 2;
  white-space: nowrap;
}

div.imageSeries div.title {
  clear: both;
  font-weight: bold;
  color: white;
  background: #39525a;
  padding: 0.33em;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.imageSeries div.subtitle {
  font-weight: bold;
  color: #1a3a53;
  margin-left: 3em;
  margin-top: 1em;
  margin-bottom: 0.4em;
}

div.imageSeries ol {
  margin: 0;
  padding: 0;
  margin-left: 3em;
  margin-top: 0.2em;
}

div.imageSeries li {
  color: #183952;
}


/* image row */

div.imageRow {
  text-align: center;
  margin: 0 auto 1em auto;
  display: table;
}

div.imageRow div.imageEnlargement div.image {
  margin-left: 0;
  margin-right: 0;
}

div.imageRow div.imageEnlargement, div.imageRow div.imageEnlargementMoreInfo {
  display: table-cell;
  width: 1px;
}

div.imageRow div.imageEnlargement img, div.imageRow div.imageEnlargementMoreInfo img {
  margin: 6px;
}

div.imageRow div.imageEnlargement div.caption, div.imageRow div.imageEnlargementMoreInfo div.caption {
  margin: 6px;
}

div.imageRow div.imageBlock {
  display: table-cell;
  width: 1px;
  vertical-align: top;
  padding: 6px;
}


/* image row shared caption */

div.imageRowSharedCaption {
  display: table-cell;
  width: 1px;
}

div.imageRowSharedCaption img {
  margin: 6px;
}

div.imageRowSharedCaption div.caption {
  margin: 6px;
}

/* strange solution for 18e */
/* TODO: clean up */
div.imageRowSharedCaption div.imageBlock {
  display: inline;
  font-weight: bold;
  white-space: nowrap;
}


/* image viewer */

div.imageViewer {
  margin: -2em auto 1em auto;
  text-align: center;
  display: table;
  background-color: #39525a;
  color: white;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px solid #d4dbde;
  width: 1px;
  padding: 0 3em;
}

div.imageViewer div.back {
  text-align: center; 
  background-color: #39525a;
  color: white;
  padding: 1em;
  border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -icab-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

div.imageViewer div.back:before {
  color: white;
  font-weight: bold;
  content: "< ";
}

div.imageViewer div.back a {
  color: white;
  text-shadow: none;
}

div.imageViewer div.caption {
  color: white;
  margin-bottom: 2em;
}

div.imageViewer img {
  border: none;
}

div.imageViewer a:visited, div.imageViewer a:hover {
  color: white;  
}


/* flash movie */

div.flashMovieBlock {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div.flashMovie {
  display: table-cell;
  width: 1px;
}


/* popup */

p.popupTitle {
  font-weight: bold;
  color: #183952;
  background: url(../img/info.png) no-repeat;
  height: 22px;
  width: 22px;
  margin: 0 0 1em 0;
}

div.popup {
  border: 1px #183952 solid;
  margin-bottom: 1em;
  padding: 0.5em;
  background: #d4dbde;
  margin-left: 35px;
  margin-top: -2.5em;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}


/* image map */

div.imageMap {
  display: table;
  margin: 0 auto;
  width: 1px;
}

div.imageMap img {
  margin: 0;
  padding: 0;
  border: none;
}

div.imageMap table, div.imageMap tr, div.imageMap td, div.imageMap tbody {
  margin: 0;
  padding: 0;
  border: none;
}

div.imageMap table {
  border-collapse: collapse;
}


/* image map zoom series */

span.currentImageNumber {
  font-size: 12pt;
  line-height: 1;
  font-weight: bold;
  text-shadow: white 0pt 0pt 0.25em;
}


/* unhandled eLML object */
/* marked specially to catch one's attention */

div.unhandled {
  background: red;
  color: white;
  padding: 1em;
  font-weight: bold;
  font-size: 18pt;
}


/* tables */

table {
  text-align: center;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: 10px;
  -o-border-radius: 10px;
  -icab-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

th, td {
  vertical-align: top;
  padding: 5px;
}

table.dataTable {
  text-align: center;
  background-color: #d4dbde;
  border-spacing: 0;
  border: 1px solid #183952;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

table.dataTable th, table.dataTable td {
  margin: 0;
  border:0;
  padding: 5px;
}

.tableBackgroundTitle {
  color: white;
  background-color: #39525a;
  font-weight: bold;
  border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  -icab-border-radius: 10px 10px 0 0;
  -khtml-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

.tableBackgroundSubTitle {
  color: #183952;
  background-color: #95a6b6;
  font-weight: bold;
}

p.tableCaption{
  color: #183952;
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: center;
}

table.structuralTable th, table.structuralTable td {
  text-align: left;
  vertical-align: middle;
  padding: 2px;
}


/* act instruction */

p.actInstruction {
  text-decoration: none;
  color: #183952;
  font-weight: bold;
  background: url("../img/act.png") no-repeat;
  padding-left: 38px;
  min-height: 22px;
  text-align: left;
}


/* subtitle */

p.subtitle {
  font-weight: bold;
  font-size: 14px;  
}




/* preamble */

#lessonTableOfContents {
  display: table;
}

#lessonEntry {
  display: table-row;
}

#lessonCover, #lessonTitle {
  display: table-cell;
  vertical-align: middle;
  padding-bottom: 1em;
  padding-right: 1em;
}




/* printable vs. non-printable */

.screen {
  display: inherit;
} 

.print {
  display: none;
}