/*
bmstructjs/jsmoltut.css
by Orjan Hansson, www.lundberg.gu.se/~orjan

Cascading style sheet for the design of the JSmol tutorial.

Version 1.0, 2016-01-26
  Modified from a version by:
  Angel Herráez; version 2013.06.18 (based on v.0.7a, changed for JSmol)
  Available from  http://biomodel.uah.es/Jmol/  and  http://wiki.jmol.org/
Version 1.1, 2016-04-26
  Set all panels except #mainPane to overflow: hidden (no scroll).
  Set all panels except #mainPane to text-align: center.
  Added a border to the top of #mainPane and #footerPane.
Version 1.1, 2016-04-27
  Moved text-align: left from #mainPane to .content.
  Tried setting overflow: auto in .content instead of #mainPane, but didn't work.
Version 1.2, 2016-05-01
  Added .absPanels, #leftPane, #middlePane, #rightPane and button
Version 1.3, 2016-05-02
  Renamed the file from jstutorial.css to jsmoltut.css.
  Experimented with button styling.
Version 1.4, 2016-05-11
  Deleted .JmolPanels and .textPanels.
Version 1.5, 2016-05-14
  Changed #leftPane etc to classes (.leftPane).
  Added styles for vertical placement of items in header and footer
Version 1.6, 2017-01-22
  Updated to correspond to molorb/jsmoltut.css v.0.3, 2016-05-21, in particular:
  Changed .content to .textContent.
  Changed #mainPane and #JmolPane to #mainPaneLeft and #mainPaneRight.
  Changed .leftPane, .middlePane and .rightPane to .L00W20, .L20W60 and .L80W20.
  Added Gadgets .centeredList, .noBulletList and .scrollTable.
  Reorganized Coloring and Borders.
  Changed .textContent to padding: 0 1em;.
  Added .centeredTable and .jmolCss.
*/

/* These DIV classes are important, don't change: */
html, body { 
  height: 100%; 
  overflow: hidden; /* No scroll bar */
  margin: 0; 
  padding: 0; 
}
.absPanels { 
  position: absolute; 
  overflow: hidden; /* No scroll bar */
  text-align: center; 
}
/* Don't add margin nor padding to absPanels. Instead, use an inner div .textContent: */
.textContent { 
  padding: 0 1em; 
  text-align: left; 
}
.textContent h1, h2, h3 { 
  text-align: center; 
}
/* IDs of DIVs that have a specific position in the window (the layout) */
#headerPane { /* A text pane at the top with full width and 10 % height of window */
  left: 0%; width: 100%; top: 0px; height: 10%;
} 
#mainPane { /* The main pane in the middle with full width and 80 % height */
  left: 0%; width: 100%; top: 10%; height: 80%;
  overflow-y: auto; /* A vertical scroll bar if necessary */
} 
/* The main pane is divided in two columns: */
#mainPaneLeft { 
  left: 0%; width: 50%; top: 10%; height: 80%;
  overflow-y: auto; 
} 
#mainPaneRight { 
  left: 50%; width: 50%; top: 10%; height: 80%;
} 
#footerPane { /* A text pane at the bottom with full width and 10 % height */
  left: 0%; width: 100%; top: 90%; height: 10%;
} 
/* The header and footer panes are further divided in three columns (all classes should be .absPanels). */
.L00W20 { /* A column at the left with 20% width */
  left: 0%; width: 20%;
/*  padding: 0px; */
} 
.L20W60 { /* A column in the middle with 60% width */
  left: 20%; width: 60%;
} 
.L80W20 { /* A column at the right with 20% width */
  left: 80%; width: 20%;
} 
/* Gadgets */
.boxed {
  margin: 0 auto; 
  padding: 0.5em;
}
.noBulletList {
  padding-left: 0;
  list-style-type: none;
  text-align:left; 
}
.centeredList {
  display:table; 
  margin: 0 auto; 
  text-align:left; 
}
.centeredTable {
  margin: 0 auto; 
  border-collapse: collapse;
}
.centeredTable th {
  text-align: center;
  padding: 4px;
}
.centeredTable td {
  text-align: center;
}
.button {
  display: inline-block;
  border-radius: 2px;
  padding: 8px 16px;
  margin: 2px 1px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}
/* Adjust vertical placement of items in header and footer */
.button {
  margin-top: 1em; 
/*  margin-top: 2%; */
}
#headerPane h1 { 
  margin-top: 0.6em; 
/*  margin-top: 0%; */
}
#footerPane h3 { 
  margin-top: 1.4em; 
}
/* Coloring */
body, .absPanels, .button { 
  background-color: #ffffc0; /* #FFFFC0 = yellow, #FFFFCC slightly lighter, but no diff w 256 colors */
}  
.button:hover { /* Invert colors */
  background-color: #800;
  color: #ffffc0;
  border-radius: 2px; /* Doesn't work */
}
p, h1, h2, h3, h4, li, tr, .button {
  color: #800; /* #800 = brown */
}
label { /* For JSmol controls */
  color: #800; /* #800 = brown */
}
a {
  color: #048;
}
a:hover {
  color: #808;
}
a.active {
  color: #f0f;
}
.colorSpecial {
  color: #c30; /* #cc3300 = red */
}
.colorWeak {
  color: #ccc;
}
/* Borders */
#mainPane, #mainPaneLeft, #mainPaneMiddle, #mainPaneRight, #footerPane { 
  border-top: thin solid #ccc;
} 
.boxed, .centeredTable, .centeredTable th, .button {
  border: thin solid #ccc; 
}
.centeredTable td {
  border-left: thin solid #ccc; 
  border-right: thin solid #ccc; 
}
.jmolCss { 
/*  background-image: url(/jsmol/j2s/img/play_make_live.jpg); */ /* Doesn't work */
  background-image: url(JSmol_loading2.png); 
  background-repeat: no-repeat; 
  background-position: center; 
}