/* Base CSS for PS-Semantics documentation (and similar) */

/*
   This stylesheets serves two purposes
   1. define the style of standard html comments
   2. add number of class definitions to simplify typesetting
      - "rm", "tt", "sf" can be used as classes in any tag (including <span>s)
        to typeset in roman, monospace and sans-serif respectively
      - "comment", "missing" and "alert" mark comments, missing material 
        and alerts (duh)
      - there are a few classes that can be used to set physical properties

        * foreground colors: "red", "blue", "green", "white" and "psblue",
        * background colors: "redbg", "bluebg", "greenbg", "whitbg" and "psbluebg"
        * no border around box: "noborder"

      - h2 and h3, but no other level, are numbered.

      - in a consistent way. remember you can set more than one class, e.g.
        <span class="red whitebg noborder">

*/

html
{ 
  font-size: 12pt;
  font-family: times new roman, times, serif;
  background-color: #f0f0f0;
  margin: 10pt 10pt 10pt 10pt;
}

body
{ 
  background-color: #ffffff;
  padding: 10pt 5% 10pt 5%;
  color: #303030;
  counter-reset: section 0;
}

h1
{ 
  font-family: american typewriter, sans serif;
  letter-spacing: 2px;
  font-weight: normal;
  counter-reset: subsection 0;
}

h2
{ 
  font-family: helvetica neue, helvetica, arial, sans serif;
  letter-spacing: 1px;
  text-shadow: 1px 2px 5px;
  color: #418dd9;
  counter-reset: subsection 0;
  margin-top: 30px;
  margin-bottom: 10px;
}

h3, h4, h5, h6
{ 
  font-family: helvetica neue, helvetica, arial, sans serif;
  letter-spacing: 1px;
  text-shadow: 1px 2px 5px;
  color: #418dd9;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* if a headline is a link, do not mark that */

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, 
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{ 
  color: #418dd9;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{ 
  color: #d07000;
}

h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active
{ 
  color: #d07070;
}

h2:before
{ 
  content: counter(section) " ";
  counter-increment: section 1; 
}

h2.notnumbered:before, *.notnumbered h2:before
{ 
  content: "";
}


h3:before
{ 
  content:  counter(section) "." counter(subsection) " ";
  counter-increment: subsection 1; 
}

h3.notnumbered:before, *.notnumbered h3:before
{ 
  content: "";
}

p
{ 
  line-height: 125%;
}

/* note that the color can be changed, see color section below*/
hr
{   
  width: 100%;
  border-style: none;
  border-top: 1px solid #008;
}


/* lists */

dt
{ 
  font-weight: bold;
  color: #602020;
  padding: 6pt 0pt 3pt 0pt;
}

dt:first
{ 
  font-weight: bold;
  color: #602020;
  padding: 6pt 0pt 3pt 0pt;
}

dd
{ 
  font-weight: bold;
  color: #505050;
  padding: 0pt 0pt 6pt 0pt;
}

li
{ 
  padding: 3pt 0pt 3pt 0pt;
}

ul, ol, dl
{ 
  padding: 3pt 0pt 3pt 24pt;  
}

/* to make embedded lists a little bit more compact */
li ul, li + ul {  padding: 0pt 0pt 2pt 24pt; }
li ul li ul, li ul li + ul,  li + ul li ul, li + ul li + ul { padding: 0pt 0pt 0pt 24pt; }

/* class to switch of bullet display 
   note that this will still increment the counter.
 */

.nobullet
{ 
  list-style-type: none;
}

table
{ 
  border-collapse: collapse;
  border: thin solid #000000;
}


td
{ 
  padding: 2px 8px 2px 8px;
  border: thin dotted #404040;
}

td:first-child
{ 
  padding: 2px 8px 2px 2px;
  border: thin dotted #404040;
}



/***************************
 * pre-formatted and other *
 * display environments    *
 ***************************/


pre, .display, iframe
{ 
  margin: 10pt 20pt 10pt 20pt;
  padding: 10pt 10pt 10pt 20pt;
  background: #f8f8f8;
  border-top: thin solid #e0e0e0;
  border-right: thin solid #f0f0f0;
  border-bottom: thin solid #f0f0f0;
  border-left: thin solid #e0e0e0;
}

.display
{ 
  white-space: pre;
  font-family:  times new roman, times, serif;
  font-size: 90%;
  font-weight: normal;
}

iframe
{ 
  margin: 10pt 20pt 10pt 20pt;
  padding: 10pt 10pt 10pt 20pt;
  width: 90%;
  height: 360px;
}

iframe.tall
{ 
  height: 720px;
}

pre
{ 
  font-family: courier new, courier, monospace;
  font-size: 80%;
  font-weight: bold; 
}


li pre, dd pre
{ 
  margin: 10pt 0pt 10pt 0pt;
  padding: 10pt 10pt 10pt 20pt;
}

/* force wrapping in PRE, thanks to Brendan */



.wrapped
{ 
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  white-space: normal;
}

.with-indentation
{
  text-indent: -80pt ;
  padding-left: 100pt;
}





/* coloring links */

a:link    { color: #418dd9; }
a:visited { color: #20466c; }
pre > a:visited { color: #418dd9; }
a:hover   { color: #d07000; }
pre > a:hover   { color: #d07000; }
a:active  { color: #d07000; }
pre > a:active  { color: #d07000; }


.markbar
{ 
  display: block;
  border-left: 5px solid #418dd9;
  margin-left: -10px;
  padding-left: 5px;
}

/* special formatting class definitions */

/* roman font */
.rm
{ 
  font-family: times new roman, times, serif;
  font-weight: normal;
}

/* be sure pre.rm is scaled back up */

pre.rm
{ 
  font-family: times new roman, times, serif;
  font-size: 90%; 
  font-weight: normal;
}

pre span.rm
{ 
  font-family: times new roman, times, serif;
  font-size: 125%; 
  font-weight: normal;
}


/* weirdclass only setting preformatting of white-space */
.pre
{ 
  white-space: pre;  
}

/* sans serif font */
.sf
{ 
  font-family: helvetica neue, helvetica, arial, sans serif;
  font-size: 95%;
}

/* monospace font */
.tt, tt, code, kbd
{ 
  font-family: courier new, courier, monospace;
  font-size: 100%;  
  color: #404040;
  font-weight: bold;  
}

/* in headlines, give them headline color... */
h2 .tt, h2 tt, h2 code, h2 kbd,
h3 .tt, h3 tt, h3 code, h3 kbd,
h4 .tt, h4 tt, h4 code, h4 kbd,
h5 .tt, h5 tt, h5 code, h5 kbd,
h6 .tt, h6 tt, h6 code, h6 kbd
{ 
  color: #418dd9;
}


a img
{ 
  border: thick solid #ffffff;
  background: #ffffff;
  
}

a:hover img
{
  border: thick solid #ffffe0;
  background: #ffffe0;
}

/* alignment */

.center  { text-align: center; }
.left    { text-align: left; }
.right    { text-align: right; }
.justify { text-align: justify; }



/**********
 * colors * 
 **********/

.red   { color: #800000; }
.blue  { color: #000080; }
.green { color: #008000; }
.white { color: #ffffff; }
.yellow { color: #ffff00; }
.black { color: #000000; }
.psblue { color: #418dd9; }
.greyF             { color: #f0f0f0;}
.greyE             { color: #e0e0e0;}
.lightgrey, .greyD { color: #d0d0d0;}
.greyC             { color: #c0c0c0;}
.greyB             { color: #b0b0b0;}
.greyA             { color: #a0a0a0;}
.grey,.grey9       { color: #909090;}
.grey8             { color: #808080;}
.grey7             { color: #707070;}
.grey6             { color: #606060;}
.grey5             { color: #505050;}
.darkgrey, .grey4  { color: #404040;}
.grey3             { color: #303030;}
.grey2             { color: #202020;}
.grey1             { color: #101010;}


.redbg   {  background-color: #800000; }
.bluebg  {  background-color: #000080; }
.greenbg {  background-color: #008000; }
.whitebg {  background-color: #ffffff; } 
.yellowbg { background-color: #ffff00; } 
.blackbg {  background-color: #000000; } 
.psbluebg { background-color: #418dd9; }
.lightyellowbg { background-color: #fffff0; }


.redbar   {  border-left-color: #800000; }
.bluebar  {  border-left-color: #000080; }
.greenbar {  border-left-color: #008000; }
.whitebar {  border-left-color: #ffffff; } 
.yellowbar { border-left-color: #ffff00; } 
.blackbar {  border-left-color: #000000; } 
.psbluebar { border-left-color: #418dd9; }

/* color names change the color of a horizontal rule */
hr.red    { border-color: #800000; }
hr.blue   { border-color: #000080; }
hr.green  { border-color: #008000; }
hr.white  { border-color: #ffffff; }
hr.yellow { border-color: #ffff00; }
hr.black  { border-color: #000000; }
hr.psblue { border-color: #418dd9; }

/* change color of borders, also making it visible*/
.noborder     { border-style: none; }
.redborder    { border: thin solid #800000; }
.blueborder   { border: thin solid #000080; }
.greenborder  { border: thin solid #008000; }
.whiteborder  { border: thin solid #ffffff; }
.yellowborder { border: thin solid #ffff00; }
.blackborder  { border: thin solid #000000; }
.psblueborder { border: thin solid #418dd9; }

.nounderline   { text-decoration: none; }
/* backward compatibility with typo: */
.nouderline   { text-decoration: none; }


/************************
 * special environments *
 ************************/


.picture
{ 
  display: block;
  max-width:95%;
  text-align: center;
  font-style: italic;
  white-space: pre;
  line-height: 120%;
}


.picture img
{ 
  max-width: 100%;
  text-align: center;
}


.interface
{ 
  font-family: courier new, courier, monospace;
  font-weight: bold;
  font-size: 90%;
  background-color: #d0d0d0;
  color: #000000;
}


.button
{  
  border-bottom: 2px solid #606060;
  border-left: 2px solid #f8f8f8;
  border-top: 2px solid #f8f8f8;
  border-right: 2px solid #b0b0b0;
}


.menu
{  
  
}


.codecomment, .cc
{ 
  color: #000080;
}

.comment
{ 
  font-family: chalkboard, comic sans ms, times new roman, times, serif;
  color: #000080;
  font-weight: bold;  
}


.missing
{ 
  font-family: american typewriter;
  font-size: 90%;
  font-weight: bold;  
  color: #a00040;
}


.alert
{ 
  background: url("http://tools.powerset.com/stylesheets/caution.gif") no-repeat;
  padding: 0pt 84pt 0pt 84px;
  display: block;
  min-height: 92px;
  font-style: arial rounded;
}