/* -Ian! D. Allen - idallen@idallen.ca - www.idallen.com */

.bold { font-weight: bold }
.boldit { font-weight: bold; font-style: italic }
.middle { vertical-align: middle }

/* http://brickybox.com/2010/09/15/html-vertical-text-safari-firefox-chrome-and-opera */
/*
.vText {
   -moz-transform: rotate(-90deg) translate(0, 100%);
   -moz-transform-origin: 0% 100%;
   -o-transform: rotate(-90deg) translate(0, 100%);
   -o-transform-origin: 0% 100%;
   -webkit-transform: rotate(-90deg) translate(0, 100%);
   -webkit-transform-origin: 0% 100%;
   transform: rotate(-90deg) translate(0, 100%);
   transform-origin: 0% 100%;
   writing-mode: bt-rl;
   filter: flipV flipH;
}
*/

/* causes problems in Chrome with images stretching down */
.full {
    width: 100%;
    height: 100%;
}

body {
  font-family: verdana,arial,helvetica,sans-serif,georgia;
  background-color: #ffffee;
  max-width: 55em;
  padding: 0.5em;
  margin: 0.5em 0 0 0.5em;
  border: 0.25em solid #ddddcc;
  border-radius: 2em;
}

/* all images stay inside their containers */
/* http://www.cssnewbie.com/sizing-images-responsively/ */
img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* All hover gets an outline */
a:hover {
    outline: dotted 0.2em ;
}

/**************************************************************************/

div#topblock {
  /* position: relative; /* captures all enclosed absolute positions */
  float: left;
  background-color: #ffdd66;
  border-top: 0.2em solid #ff9900 ;
  border-bottom: 0.2em solid #ff0000;
  border-radius: 1em 1em 0 0;
  width: 100%;
  height: 100%;
}

.updated {
  float: right;
  font-style: italic;
  font-size: 70%;
  margin: 0 0.5em 0 0.8em;
  padding: 0;
}

/**************/

div#topleftblock {
  width: 25%;
  float: left;
  text-align: center;
  background-color: #ff9900;
  padding: 0.1em 0.5% 0.1em 0.5% ;
  border-right: 0.15em solid #ff0000;
  border-radius: 1em 0 0 0;
}

div#topleftblock img {
  width: 80%;
  border: 0.25em solid red;
  border-radius: 2em 2em 1em 1em;
}

/**************/

div#toprightblock {
  width: 71%;
  background-color: #ffdd66;
  float: left;
  padding-left: 2%;
  border-radius: 0 1em 0 0;
}

div#toprightblock h1, div#toprightblock h2, div#toprightblock img {
    clear: right; /* go under the .updated */
    text-align: left;
    margin: 0;
    padding: 0;
    font-variant: small-caps;
}
div#midrightblock h1, div#midrightblock h2 {
    font-variant: small-caps;
    text-align: center;
}

/**************************************************************************/

div#midblock  {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  clear: left;
  background-color: #ffffaa;
  border-bottom: 0.15em solid #ff9900;
}

/**************/

div#midleftblock {
  width: 25%;
  min-width: 10em;
  float: left;
  background-color: #ffdd66;
  padding: 0.2em 0.5% 0.2em 0.5% ;
  border-right: 0.15em solid #ff9900;
}

div#midleftblock ul {
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-left: 1em;
}

div#midleftblock li {
    list-style-type: none ;
    font-family: 'Open Sans Condensed', sans-serif ;
    line-height: 1 ;
    margin-bottom: 0.1em ; 
}

div#midleftblock a {
    display: inline-block ;
    color: #0000ff ;
    text-decoration: none ;
    padding: 0 0.3em 0 1.3em;
    line-height: 1 ;
    text-indent: -1em; 
}
div#midleftblock ul a:hover {
    color: #ffffff ;
    background-color: #000000 ;
}
/* removed Oct 2015
div#midleftblock div.notes ul a  {
    font-family: sans-serif ;
    font-weight: bold ; 
    font-variant: small-caps;
    background-color: #eecc55;
    border: 0.2em solid #ff9900;
    border-radius: 0.5em;
    padding: 0 0.8em 0 1.8em;
}
*/
.notesbyweek {
    background-color: #ccff88;
    border: 1px solid green ;
    border-radius: 15% ;
}
.assignmentsbyweek {
    background-color: #ffcc99;
    border: 1px solid red ;
    border-radius: 15% ;
}
div#midleftblock div.week a {
}
div#midleftblock div.links a {
    margin-bottom: 0.2em ; 
}

/* Left list item (exam, study week) - not a button */
.leftli2 {
    color: grey ;
    padding-left: 0.3em ;
}

div#midleftblock .jump * {
 font-size: 95%;
}

div#midleftblock h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    padding: 0;
}

div#midleftblock .jump * {
    font-style: italic;
}

table.impdate {
    padding: 0.3em;
    background: #ffee99;
    border: 0.2em solid #ff9900;
    border-radius: 0.5em;
}
table.impdate tr {
    vertical-align: top;
}
table.impdate td.impdate {
    /*
    font-family: monospace, Courier, "Courier New" ;
    font-weight: bold;
    color: red ;
    */
    white-space: nowrap ;
}
table.impdate td.week {
    white-space: nowrap ;
    text-align: center;
}
ul.impdate {
    list-style-type: none ;
    margin-left: 25%;
    text-indent: -37%;
}

span.impdate {
    font-family: monospace, Courier, "Courier New" ;
    font-weight: bold; color: red ;
}

/**************/

/* margin must be zero on this or it pushes even the float down */
div#midrightblock > *:first-child { margin-top: 0; }

div#midrightblock {
  float: left;
  width: 71%;
  padding-top: 0.5em;
  padding-left: 2%;
  background-color: #ffffaa;
}

div#midrightblock #midrightblockcol1of3 {
    float: left;
    width: 22%;
    /* height: 20%; */
}

/* two photos of Ian! */
div#midrightblockcol1of3 img, #midrightblockcol3of3 img {
    border: 0.2em solid red ; 
    border-radius: 5em 3em ;
}

div#midrightblock #midrightblockcol2of3 {
    float: left;
    width: 44%;
    min-width: 10em;
    margin-top: 0;
    margin-left: 3%;
    margin-right: 1%;
}

div#midrightblock #midrightblockcol2of3 > *:first-child {
    margin-top: 0;
}

div#midrightblock #midrightblockcol3of3 {
    float: left;
    width: 30%;
    /* height: 30%; */
}

/**/

div#midrightblock #midrightblockcol1of2 {
    float: left;
    width: 68%;
    min-width: 10em;
    margin-top: 0;
    margin-right: 2%;
}

div#midrightblock #midrightblockcol1of2 > *:first-child {
    margin-top: 0;
}

div#midrightblock #midrightblockcol2of2 {
    float: left;
    width: 30%;
    height: 30%;
}

/**/

div#midrightblock ul {
 margin-top: 0;
 margin-bottom: 0.5em;
 padding-left: 1.5em;
 padding-right: 0.5em;
}


div#midrightblock dt {
 font-weight: bold; font-style: italic;
}

div#midrightblock dd {
    margin-left: 1em;
}

/* if you clear both, it goes under *all* the floats on the page,
 * even the sidebar, unless you make the container a float too */
div#midrightblock #midrightblocklowblock {
  clear: both;
}

/**************************************************************************/

div#lowblock {
  clear: both;
  padding-top: 0.2em;
  padding-left: 1em;
  padding-right: 1em;
  /*
  XXXfloat: left;
  XXXwidth: 100%;
  XXXmax-width: 40em;
  */
}

div#lowblock > p {
  padding-left: 1em;
}

div#lowblock > h3 + h4 {
  margin-top: -1em;
  padding-left: 1em;
}

/*
div#lowblock XXXol {
 margin-top: 0;
 margin-bottom: 0.5em;
 padding-left: 1.5em;
 padding-right: 0.5em;
}
*/

/**************************************************************************/

div#footer  {
  clear: both;
  background-color: #ffdd66;
  border-top: 0.3em double red;
  padding-left: 1em;
  padding-right: 1em;
  font-style: italic;
  font-size: 80%;
  /*
  XXXfloat: left;
  XXXwidth: 100%;
  XXXmax-width: 40em;
  XXXmargin-right: 2%;
  */
}

div#footer > p {
    margin-top: 0.5em;
    margin-left: 0em;
}

div#footer  img.wide {
    width: 90%;
    max-width: 440px;
}

div#footer #signature  {
  font-style: normal;
  font-size: 100%;
}

/**************************************************************************/
/* flag a term as being finished */
body.finished {
    border: 0.5em solid black;
    border-radius:  2em ;
    background-color: #eeeeee;  /* grey */
}

/* flag a term as being finished vertically along bottom edge */
body.finished:after {
    content: "  This Term Is Finished - Material may not be updated  " ; /* line contains no-break spaces */
    bottom: 0;
    position: fixed;
    color: white;
    background-color: black;
    border: 0.5em double red;
    border-radius: 3em 3em 0 0 ;
    text-align: center;
    font-family: monospace ;
    font-size: 120%;
    font-weight: bold ;
}

/* flag a term as being finished vertically along right edge */
body.finished:before {
    content: " THIS TERM IS FINISHED " ; /* line contains no-break spaces */
    word-wrap: break-word;
    text-transform: uppercase;
    width: 0.9em;
    top: 1em;
    right: 0;
    position: fixed;
    color: white;
    background-color: black;
    border: 0.5em double red;
    margin: 0;
    border-radius: 3em 0 0 3em ;
    text-align: center;
    font-family: monospace ;
    font-size: 120%;
    font-weight: bold ;
}

/* flag a term as being finished in top right */
/*
XXXbody.finished:before {
    content: "This Term Is Over" ;
    top: 0;
    right: 0;
    position: fixed;
    color: white;
    background-color: black;
    width: 4em;
    border: 1em double red;
    margin: 0;
    padding: 0.3em 0.3em 0.6em 0.6em ;
    border-radius: 0 0 0 3em ;
    text-align: center;
    font-variant: small-caps;
    font-size: 150%;
    font-weight: bold ;
}
*/

body.finished #midrightblock:before {
    content: "This Term Is Finished" ;
    font-variant: small-caps;
    font-weight: bold ;
    display: block ;
    font-size: 150%;
    text-align: center;
    color: white;
    background-color: black;
    border: 0.5em double red;
    border-radius: 1em ;
}
