/* stolen from tom jennings  */

/* the order of a: stuff matters: link/visited/hover/active */

A:link { 
  color: #808080;
  text-decoration: underline dashed #ec008c;
}

A:visited { 
  color: #808080;
  text-decoration: underline dashed #ec008c;
}

A:hover { 
  color: #ec008c;
  text-decoration: underline dashed #ec008c;
}

A:active { 
  color: #000000; 
  text-decoration: underline dashed yellow;
}

/* default style, for large screens */

body {
  margin:10px;
  color: #404040;
  font-family:Rubik;
  font-size:12;
  background-color:#f0f0f0;
}

p {font-size:12pt; font-family:Rubik; margin-left:40px; margin-right:120px; margin-bottom:10px;}
pre {font-family:Courier; font-size:12pt;}
small {font-size:10pt;}
strong {font-weight:bold;}
med {font-size:13pt; font-weight: bold;}
big {font-size:14pt; font-weight: bold;}
code {
  font-family:Courier, monospace; 
  font-weight:bold;
  color: #000000;
}

h1 {margin-left: 20px; font-size: 22pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h2 {margin-left: 20px; font-size: 18pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h3 {margin-left: 20px; font-size: 14pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h4 {margin-left: 20px; font-size: 13pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h5 {margin-left: 20px; font-size: 13pt; font-family:Rubik; font-weight: bold; color:#ec008c;}

/* deprecated */
span.shead {margin-left: 60px; font-size:125%; font-weight: bold;}
span.head {margin-left: 60px; font-size:150%; font-weight: bold;}

/* constraint image width, full screen (100%) is too much on a big screen. */
img   {width:50%; margin-left: 40px;}
table {width:60%; vertical-align: top; margin-left: 40px; border:1 solid; 
      margin-right: 20px;}

/* td    {white-space: nowrap; } /* somehow makes width default to the 
 *       minimum necessary, rather than expand to max. */ 

/* this allows text to wrap to default width */
td    {font-size:12pt; word-wrap:break-word; } 
ul    {font-size:12pt; margin-left: 80px; margin-right: 20px; width="100%";}
ol    {margin-left: 40px; margin-right: 20px; width="100%";}
dl    {margin-left: 40px; margin-right: 20px; width="100%";}
li    {padding: 4px; width="100%";}

blockquote {
  font-family:Courier,monospace;
  font-weight:bold;
  font-size:12pt;
  background-color:#f0f0f0; 
  color:#1a1a1a;
  white-space:pre;
  margin-left:60px;
  margin-right:10%;
}

tt {
  word-wrap:break-word;
  font-family:Rubik;
  font-size:12pt;
  background-color:#FFFFFF; 
  color:#98005a;
  margin-left:80px;
  margin-right:10%;
}

quote {
  font-family:Courier,monospace;
  font-size:12pt;
  background-color:#f0f0f0; 
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;
}

div {
  display: inline-block;
}

figcaption {
  word-wrap:break-word;
  font-size:14pt;
  width:24%;
}

h1+br+img {
  max-width: 100%
}





/* small screen styles */

@media (max-width: 640px) {

body {
  margin:4px;
  font-family:Rubik;
  font-size:12pt;
}

/* this works great for mobile. */
img   {width:100%; margin-left: 20px;}
table {width:100%; vertical-align: top; margin-left: 40px; border:1 solid; 
      margin-right: 20px;}

p {font-size:12pt; margin-left:10px; margin-right:10px; margin-bottom:10px;}
pre {font-family:Courier; font-size:12pt;}
small {font-size:12pt;}
strong {font-weight:bold;}
med {font-size:13pt; font-weight: bold;}
big {font-size:14pt; font-weight: bold;}
code {
  font-family:Courier, monospace; 
  font-weight:bold;
  color: #000000;
}

blockquote {
  background-color:#f0f0f0; 
  color:#183d02;
  font-family:Courier,monospace; 
  font-weight:bold;
  padding:4px; 
  margin-left:10px; 
  margin-right:10px; 
  white-space:pre;
}

tt {
  word-wrap:break-word;
  font-family:Rubik;
  font-size:12pt;
  background-color:#FFFFFF; 
  color:#98005a;
  margin-left:80px;
  margin-right:10%;
}


quote {
  font-family:Courier,monospace;
  background-color:#f0f0f0; 
  margin-left:5px;
  margin-right:5px;
  margin-bottom:5px;
}

h1 {margin-left: 0px; font-size: 18pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h2 {margin-left: 0px; font-size: 16pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h3 {margin-left: 0px; font-size: 14pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h4 {margin-left: 0px; font-size: 13pt; font-family:Rubik; font-weight: bold; color:#ec008c;}
h5 {margin-left: 0px; font-size: 13pt; font-family:Rubik; font-weight: bold; color:#ec008c;}


table {margin-left: 10px;}
td {white-space: nowrap;}
ul {margin-left: 10px;}
ol {margin-left: 10px;}
dl {margin-left: 10px;}

} /* end small screen ... */