/* @charset "utf-8"; */
/* The charset encoding declaration must be on the first line. */
/* Encode the sheet without a signature (no Byte Order Mark) */
/* charset commented out because w3C */

/* Works in conjunction with menuTree.css */

/* Author: John Bentley */
/* Softmake page version: 1.31   version date: 04 Apr 2006 13:02*/

/***********************************
General Appearance
************************************/
body, td, th
{
    font-size: small;
}

body
{
    font-family: Verdana, Sans-Serif;
    background-color: #fff;
    color: #333;
    visibility: visible
}

p
{
    margin: 1em 0;
}

acronym
{
    cursor: help;
    border-bottom: 1px dotted;
}

a:link, a:hover
{
    text-decoration: none;
}

a:link
{
    color: #4142af;
}

/*****************************************************************************
    Hack Name:  Prevent background images from disappearing on mult line
				inline links.
    Remarks:
        When using background-image on inline elements that wrap in IE 6 then the image
        disappears. Eg
        <a class="pdf" href="#">Temp</a>
        a.pdf { background: url(images/pdf.gif) no-repeat 100% 0%;
                padding-right: 1.5em;}

    Fixes bad Browser: IE 6.

    Works In Browswers:
                FF 2.0, IE 6.0

    Side-Effects:
      This will cause the element onto a new line if
      it is larger than one line (in IE6). But at least the image
      will be displayed allright. Internally this cause the
      element to get the IE propriety prop "hasLayout" set to true
      (which is what we want).

    Solution:
        Add  "display: inline-block;"

        Eg
          a.pdf { background: url(images/pdf.gif) no-repeat 100% 0%;
                  padding-right: 1.5em;
                  display: inline-block;}
    Source:
                http://www.satzansatz.de/cssd/wrappinglinkbg.html
                http://www.satzansatz.de/cssd/onhavinglayout.html
                John Bentley Experimentation.
*/
a.external {
  background: url(images/externalLink/unvisited.gif) no-repeat 100% 10%;
  padding-right: 1.2em;
  display: inline-block;
}
a.external:link {color: #7b8500;}
a.external:visited  {
  background-image: url(images/externalLink/visited.gif);
  color: #a8b500;
}
a.external:hover {
  background-image: url(images/externalLink/hover.gif);
  color: #333;
}

/*****************************************************************************
    Hack Name:  Prevent background images from disappearing on mult line
				inline links.
    Remarks:
        When using background-image on inline elements that wrap in IE 6 then the image
        disappears. Eg
        <a class="pdf" href="#">Temp</a>
        a.pdf { background: url(images/pdf.gif) no-repeat 100% 0%;
                padding-right: 1.5em;}

    Fixes bad Browser: IE 6.

    Works In Browswers:
                FF 2.0, IE 6.0

    Side-Effects:
      This will cause the element onto a new line if
      it is larger than one line (in IE6). But at least the image
      will be displayed allright. Internally this cause the
      element to get the IE propriety prop "hasLayout" set to true
      (which is what we want).

    Solution:
        Add  "display: inline-block;"

        Eg
          a.pdf { background: url(images/pdf.gif) no-repeat 100% 0%;
                  padding-right: 1.5em;
                  display: inline-block;}
    Source:
                http://www.satzansatz.de/cssd/wrappinglinkbg.html
                http://www.satzansatz.de/cssd/onhavinglayout.html
                John Bentley Experimentation.
*/
a.pdf, a.pdf:visited, a.pdf:hover, .pdf
{
  background: url(images/externalLink/pdf.gif) no-repeat 100% 0%;
  padding-right: 1.3em;
  display: inline-block;
}

a.amazon, a.amazon:visited, a.amazon:hover, .amazon
{
  background: url(images/externalLink/amazon.gif) no-repeat 100% 0%;
  padding-right: 1.6em;
  display: inline-block;
}

a.wikipedia, a.wikipedia:visited, a.wikipedia:hover, .wikipedia
{
  background: url(images/externalLink/wikipediaW.gif) no-repeat 100% 0%;
  padding-right: 1.4em;
  display: inline-block;
}

.source
{
  font-size: 1em;
  font-style: italic;
  margin-left: 2em;
}

.source a.pdf
{
}


.menuTree span
{
    color: #3f3737;
}

a:visited
{
    color: #cf74b3;
}

a:hover
{
    text-decoration: underline;
}

code
{
    font-size: 1.2em;
}

.raising, #imageSection
{
    display: block;
    background: #f5f5f5;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    text-align: center;
}

.noLink
{
    /* background-color: #eff5ff; */
}


div.output
{
    margin-bottom: 1em;
}

#siteName  {
  color: #666699;
}

#siteName, h1
{
  font-family: Pristina, Cursive;
  font-weight: normal;
}


h2
{
    margin: 1.5em 0 0.5em 0;
    font-size: 130%;
    font-weight: normal;
}

h3
{
    font-size: 110%;
    font-style: italic;
}

dt
{
  font-weight: bold;
    margin: 1em 0 0.5em 0;
}

dt:after {
  content: ":";
}

dd
{
    margin-bottom: 1em;
}


.keyPoint
{
 border: 1px solid #8f0d00;
  background-color: #ffe4e1;
  padding: 0.5em 1em;
}

img { margin: 0 auto;  }

img.withText {
  margin: 2em 3em 2em 1em;
  float: left;
  /* border: 1px solid #666699; */
}
  
  

pre
{
    letter-spacing: 0;
    padding: 1em 1em 1em 1em;
    border: #999999 1px solid;
    background-color: #efefef;
    font-size: 1em;
}

ul
{
    list-style: disc outside;
    padding-left: 1.5em;
    margin: 0;
}

ol
{
    margin-left: 0;
    padding-left: 1.75em;
    list-style-position: outside;
}

ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
ol ol ol ol { list-style-type: decimal; }
ol ol ol ol ol { list-style-type: lower-alpha; }

ol li li
{
    margin-top: 0.1em;
    padding: 0;
    border: 0;
}



.download
{
      /* background-color: #d1d7ef;
    border: 1px solid #eff2ff; */
    background-color: #eff2ff;
    border: 1px solid #d1d7ef;
    padding: 3em;
    width: 20em;
}


/***********************************
Layout
************************************/
/* Neutralize Dimensions */
body
{
    padding: 0;
    margin: 0;
}


/* Set Dimensions */
#navigationArea
{
    position: absolute;
    left: 0;
    width: 270px;
}
#contentArea
{
    margin-left: 270px;
}

/* Firefox hack */
#navigationArea, #contentArea
{
   border: 1px solid #fff;
}

.buffer
{
    margin: 20px 20px 40px 1px;
}

.topSpacer
{
    margin: 6em;
}

#navigationArea .buffer
{
    margin: 20px 20px;
}

.header
{
    text-align: center;
    border: 1px solid #fff;
    position: relative;
}

#contentArea .header
{
    margin-bottom: 4.5em;
}

 /* .header h1 */
h1
{
    margin-top: 0.3em;
    padding-top: 0.3em;
    font-size: 2.5em;
}

table
{
    border-collapse: collapse;
    margin-left: 1px; /* To show the border in Firefox */
    
}

tbody {
  counter-reset: col01PhaseCounter col02PhaseCounter;
}

tbody td.col01Phase { counter-increment: col01PhaseCounter; }

tbody td.col01Phase:before {
    content:  counter(col01PhaseCounter) ". ";
} 

tbody td.col02Phase { counter-increment: col02PhaseCounter; }

tbody td.col02Phase:before {
    content:  counter(col02PhaseCounter) ". ";
} 

td, th
{
    border: 1px solid #7f7f7f;
    padding: 0.1em 0.5em;
}

caption
{
    font-style: italic;
    text-align: left;
    padding-bottom: 0.3em;
}

th
{
  text-align: left;
  background-color: #ffe4e1;
}

thead, thead th
{
    background-color: #d8bfd8;
    font-weight: bold;
}

form
{
    padding: 0;
    margin: 0;
}

fieldset
{
    margin: 0.5em 0;
    padding: 0 1em 1em 1em;
    border-style: none;
    /* border: 1px solid #666699; */
}

input, select
{
    margin: 1em 1em 0 0;
}

#contentArea input
{
    margin-left: 0;
}

select
{
    margin-top: 1.1em;
}

label
{
    text-align: left;
    line-height: 1.5em;
    margin: 0 0.5em 0 1.5em;
}

img
{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.header span
{
    display: block;
}

.websiteUpdated
{
    margin-top: 0;
    color: #afafaf;
    text-align: right;
    position: relative;
    top: -0.5em;
    margin-right: 1em;
}


#validationFail, .validationFail
{
    color: Red;
    margin-left: 1em;
}

#logo
{
    display: block;
    padding: 1em 0;
}

#siteName
{
    font-size: 3em;
    letter-spacing: 10px;
}

#slogan
{
    font-size: 0.9em;
    letter-spacing: 6px;
    line-height: 1.5em;
}


#navigationArea  a
{
  text-decoration: none;
}

#navigationArea .header a
{
    padding: 2px 0 0 2px;
}

/* Applies to slogan */
#navigationArea .header a:link, #navigationArea .header a:visited 
{
  color: #333;
}

#navigationArea .header a:hover
{
    text-decoration: none; /* border: 1px solid #f5f5f5; */
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    color: #005dff;
    margin: 0 0 0 1px;
    padding: 0 0 0 14px; /* background-color: #cfcfcf    */
}

#navigationArea .header a:hover
{
    margin: 2px 0 0 2px;
    padding: 0 0 0 0;
}

.spartan
{
    margin: 50px auto 0 auto;
    width: 70%;
}

.spartan ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.spartan li
{
    margin: 0;
    padding: 0;
}

.milestone
{
    font-style: italic;
}


@media print
{
    body
    {
        margin: 0;
        padding: 0;
    }
    p, td, th
    {
        font: 12pt garamond, serif;
        color: black;
    }
    /* for Mozila */
    li
    {
        font: 12pt garamond, serif;
        color: black;
    }
    blockquote
    {
        font: 12pt garamond, serif;
        color: black;
    }
    .raising
    {
        border: none;
        background-color: #fff;
    }
    pre
    {
        background-color: Transparent;
    }
    #contentArea
    {
        margin-left: 0;
        top: 0;
    }
    #contentArea .header
    {
        text-align: left;
        margin-left: 85mm;
    }
    thead, tbody
    {
        background-color: #fff;
    }
    em
    {
        margin-left: 0.3em;
    }
}