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

Cascading style sheet for the design of the JSmol tutorial.

Version 0.1, 2016-05-14
  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/
  Further modified from: bmstructjs/jsmoltut.css
Version 0.2, 2016-05-18
  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.
Version 0.3, 2016-05-21
  Changed .textContent to padding: 0 1em;.
  Added .centeredTable and .jmolCss.
Version 0.4, 2017-12-09
  Changed widths of #mainPaneLeft and #mainPaneRight to 30%.
Version 0.5, 2017-12-24
  Added styles for #singelPane, dt, dd, pre and .centeredTable tfoot
Version 0.6, 2017-12-26
  Deleted style #singelPane
Version 0.7, 2017-12-29
  Adjusted styles #headerPane, #footerPane, .button, 
  to make them adjust for small and medium devices. 
  Adapted from /test/rwd/jsmoltut_rwd.js, v.2017-02-15.
  However, only slight improvement with HTC 10 in landscape (resolution: 2560 x 1440 px)
  Since the padding around text blocks was screwed up, these adjustements were commented out.
Version 0.8, 2017-12-31
  Tested new positions of main panes ("Experimental") for screens with low aspect ratio.
*/

/* Layout */
/* The following DIV classes have been carefully tested and shouldn't need changes. */
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; 
}
/* The following are IDs of DIVs that divide the window in rows (all should be .absPanels). */
#headerPane { /* A 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 */
} 
/* Alternatively, 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%;
} 
*/
/* Alternatively, the main pane is divided in three columns: */
#mainPaneLeft { /* A column at the left with 40% width */
/*  left: 0%; width: 40%; top: 10%; height: 80%;*/
  left: 0%; width: 30%; top: 10%; height: 80%; /* Changed to 30% width */
/*  left: 0%; width: 20%; top: 10%; height: 80%;*/ /* Changed to 20% width */
/*  left: 0%; width: 100%; top: 70%; height: 20%;*/ /* Experimental for low aspect ratio */
  overflow-y: auto; /* A vertical scroll bar if necessary */
} 
#mainPaneMiddle { /* A column in the middle with 40% width */
/*  left: 40%; width: 40%; top: 10%; height: 80%;*/
  left: 30%; width: 40%; top: 10%; height: 80%;
/*  left: 20%; width: 50%; top: 10%; height: 80%;*/ /* Changed to 50% width */
/*  left: 0%; width: 50%; top: 10%; height: 60%;*/ /* Experimental for low aspect ratio */
} 
#mainPaneRight { /* A column at the right with 20% width */
/*  left: 80%; width: 20%; top: 10%; height: 80%;*/
  left: 70%; width: 30%; top: 10%; height: 80%; /* Changed to 30% width */
/*  left: 50%; width: 50%; top: 10%; height: 60%;*/ /* Experimental for low aspect ratio */
  overflow-y: auto; /* A vertical scroll bar if necessary */
} 
#footerPane { /* A 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;
}
/*
.button {
  display: inline-block;
  border-radius: 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
}
*/
/* Layout for mobile phones (small device): */
/*
#headerPane, #footerPane {
  padding: 5px;
}
.button {
  padding: 2px 4px;
  margin-bottom: 1px;
}
*/
/* Layout for tablets (medium device): */
/*
@media only screen and (min-width: 600px) {
  #headerPane, #footerPane { padding: 10px; }
  .button { padding: 4px 8px; margin-bottom: 2px; }
}
*/
/* Layout for desktop (large device): */
/*
@media only screen and (min-width: 768px) {
  #headerPane, #footerPane { padding: 15px; }
  .button { padding: 8px 16px; margin-bottom: 4px; }
  .button { font-size: 16px; }
}
*/
/* Text, alignment */
/*
#headerPane, #footerPane {
  text-align: center;
}
#headerPane h1, h2 { 
  margin: 0; 
  line-height: 1em;
}
#footerPane h3, p { 
  margin: 0; 
}
.centered {
  text-align: center;
}
*/
/* Adjust vertical placement of items in header and footer */
.button {
  margin-top: 1em; 
}
#headerPane h1 { 
  margin-top: 0.6em; 
}
#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, dt, dd, pre, .button {
  color: #800; /* #800 = brown */
}
dt {
  font-weight: bold;
}
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, .centeredTable tfoot, .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; 
}