/*
 * $Id: meeting.css,v 1.28 2015/03/06 11:39:48 potse Exp $
 * 
 * Style sheet for the Malt meeting 2015
 * Mark Potse, CCMC-ICS-USI Lugano, January 2015.
 */


/* Each html body contains a a viewport-filling table (class global) in
 * which there are one or more "pages" (td elements). These elements have
 * the td.page class, which we make white and slightly transparent.
 * The global table has a background image associated with it (on smartphone
 * browsers this works better than associating it with the body).
 * The pages get rounded corners.
 */

body {     
  background-color: #dcebf5;   /* just in case */
  margin: 0px;       /* suppress margins and padding around the table */
  padding: 0px;
}

table.global {
  border: 0px;
  cellspacing: 0px;
  margin: 0px;
  background-color: #dcebf5;   /* match top of image */
  background-image: url(Lake3.jpg);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-attachment: fixed;
  background-size: 100% auto;
}

table.malthome {
  border: 0px;
  cellspacing: 0px;
  margin: 0px;
  background-color: #f9f3e7;
  background-image: url(screens25.jpg);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-attachment: fixed;
  background-size: 100% auto;
}

td.page {                  /* for normal cells: semitransparent background */
  background-color: rgba(255, 255, 255, 0.7); /* match meeting.js */
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 8px;  /* replaces  cellpadding on the <table> */
}

td.maltpage {              /* for the MALT logo cell */
  background-color: none;
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 8px;  /* replaces  cellpadding on the <table> */
}

td.opage {  /* more opacity and different color for the MALT home page */
  background-color: rgba(255, 204, 102, 0.95);   /* match 2014 meeting page */
  margin-top: 0px;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 8px;  /* replaces  cellpadding on the <table> */
}

/* font-size: it is recommended to do this in percents or em
   (better). One em or 100% should be the user's preferred font size.
 */
p, li {
  font-family: "Bitstream Vera Sans", "Verdana", "Helvetica", "sans-serif";
  font-style: normal;
  font-size: 1.0em;  
  line-height: 1.33em;
  color: black;
  margin-top: 0px;
  margin-bottom: 4px;
}  
p.toc {		/* equal spacing above and below for table-of-content items,
                   so the text goes in the middle of the "button" */
  margin-top: 2px;
  margin-bottom: 2px;
}  

/* paragraph class for past meetings introduced under a different name by Cees */
p.pastmeeting {
  font-family: "Bitstream Vera Sans", "Verdana", "Helvetica", "sans-serif";
  font-style: normal;
  font-size: 1.0em;  
  line-height: 1.50em;
  color: black;
}

/* for the meeting name on top of each page */
p.header {
  margin-top: 0px;
  font-size: 40px;       /* in pixels so we can match the logo size */
  font-weight: bold;
  line-height: 50px; 
  color: #ff4422
}

/* for the MALT logo on top of each page */
p.maltheader {
  margin-top: 0px;
  font-size: 40px;       /* in pixels so we can match the logo size */
  font-weight: bold;
  line-height: 50px; 
  color: rgba(100, 200, 255, 0.6);
}

/* Text styles have to be set on table and td as well */ 
table, td {
  font-family: "Bitstream Vera Sans", "Verdana", "Helvetica", "sans-serif";
  font-style: normal;
  font-size:   1.0em;  
  line-height: 1.33em;
  color: black;
}

/* for normal tables, in the pages */
table.mtab {
  background-color: none;
  padding: 6px;
}
table.mtab th {              /* descendant selector */
  background-color: #aaccff;
  padding: 6px;
}
table.mtab td {               /* descendant selector */
  background-color: #aaccff;
  padding: 6px;
  vertical-align: baseline;
}

/* for tables that should hardly be recognizable as such */
table.subtle {
  background-color: none;
  padding: 0px;
}
table.subtle th {              /* descendant selector */
  background-color: none;
  padding: 0px;
}
table.subtle td {               /* descendant selector */
  background-color: none;
  padding: 0px;
  vertical-align: baseline;
}

/* Header styles. Use a single (red-orange) color for everything that
 * is special. Set margins to associate the headers clearly with the
 * following paragraph.
 */
 
h6 { font-size: 1.00em; line-height: 1.25em; margin-top: 1.33em; margin-bottom: 0.5em}
h5 { font-size: 1.00em; line-height: 1.25em; margin-top: 1.33em; margin-bottom: 0.5em}
h4 { font-size: 1.16em; line-height: 1.5em; margin-top: 1.33em; margin-bottom: 0.5em;
     color: #ff4422 }
h3 { font-size: 1.33em; line-height: 1.5em; margin-top: 1.33em; margin-bottom: 0.5em;
     color: #ff4422 }
h2 { font-size: 1.5em; line-height: normal; margin-top: 1.33em; margin-bottom: 0.5em;
     color: #ff4422 }
h1 { font-size: 1.5em; line-height: normal; margin-top: 1.33em; margin-bottom: 0.5em;
     color: white; background-color: #ff4422 }

     
/* Links. The same colors again. The "oplink" class is for links in
 * a Table of Contents, to the other pages of the site. The "cplink"
 * is a stand-in for the link to the current page. It should stand out
 * clearly, to show where the reader is.
 */    
a:link    {color: dimgray ; text-decoration: none}
a:visited {color: dimgray } /* place before active and hover */
a:active  {color: #ff4422 } 
a:hover   {color: #ff4422 }  /* placed after visited, overrides it */

a.cplink {
  background-color: #ff4422;
  color: white;
  font-weight: bold;
  outline-color: #ff4422;
}
a.oplink {
  font-weight: bold;
  outline-color: white;    /* no text color spec: make hover work */
}
a.bigcplink {            /* two for toc.html */
  background-color: #ff4422;
  color: white;
  font-weight: bold;
  outline-color: #ff4422;
  font-size:   2.0em;
  line-height: 3.0em;
}
a.bigoplink {
  font-weight: bold;
  outline-color: white;     /* no text color spec: make hover work */
  font-size:   2.0em;
  line-height: 3.0em;
}

/* We need those properties also on the table cells where the links are enclosed */
td.cplink {
  background-color: #ff4422;
  padding: 5;
  border-radius: 6px;
  outline-color: white;
  margin-bottom: 8px;
  text-align: center;
}
td.oplink {
  padding: 5;
  border-radius: 6px;
  outline-color: none;
  margin-bottom: 8px;
  text-align: center;
  /* No border: it suggests the presence of a button, but actually the
     hyperlink is only on the text. Could be fixed by implementign it in
     the onClick property but then the functionality of the site begins
     to rely on Javascript...
    border-color: dimgray;
    border-width: 1px;
    border-style: solid;
  */
}