/* umbrella blue : rgb(141,189,232) */
/* gradient blue : rgb(141,89,255) */

* {
box-sizing: border-box;
}

img { 
	border: 0;
}

#container {
max-width: 900px;
/*width:expression(document.body.clientWidth > 900? "900px": "auto" );*/
width: 900px;
align: center;
/*margin: 10px auto;*/
color: #333;
border: 1px solid gray;
line-height: 130%;
font-family: sans-serif;
padding: 0;
background: url(fade-blue-left.gif) 0 0 repeat-y;
}

#top {
margin: 0 0 -10px 0 ;	
padding: 0;
}


#top h1
{
padding: 0;
margin: 0;
align: center;
font-size: 250%;
color: rgb(63,63,63);
text-align: center;
}

#leftnav
{

float: left;
width: 175px;
margin: 0 0 0 0;
padding: 0 0 0 0 ;
}

#content
{
background-color: white;
margin-left: 175px;
 /* border-left: 1px solid gray;  */
padding: 10px;
/*position: relative;*/
}

#footer
{
padding: 0;
margin: 0;
align: center;
}

#leftnav ul { padding-left: .5em}

/*#leftnav p { }*/
#content h2 { margin: 0 0 .5em 0; }
#content h4 { font-size: 1.1em; font-style: italic; }
#leftnav a.currentlink { color: rgb(247,123,41); }

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

ul li
{
background-image: url(/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;
}

.quotebox-right {
float: right;
/*width: 30%;*/
background-color: blue;
color: rgb(63,63,63);
margin: 1em 0 1em 1em;
padding: .5em;
font-size: larger;
}

.quotebox-blue {
background-color: #0066CC;
color: white;
margin: .5em;
padding: .5em;
font-size: larger;
text-align: center;
}

.quotebox-white {
background-color: #FFFFFF;
color: orange;
margin: .5em;
padding: .5em;
font-size: larger;
text-align: center;
}


.quotebox-left {
float: left;
/*width: 30%;*/
background-color: blue;
color: rgb(63,63,63);
margin: 1em 1em 1em 0;
padding: .5em;
font-size: larger;
}

.pic, {
border-color: #666666;
border: 1px solid;
margin: 5px; 
}

.pic-right {
border-color: #666666;
border: 1px solid;
margin: 5px; 
float: right; 
position: relative;
}

.pic-left {
border-color: #666666;
border: 1px solid;
margin: 5px; 
float: left; 
position: relative
}

.bulletbox {
/*float: right;*/
background-color: #FFFACD;
margin: 1em;
padding: .5em;
border: 1px solid gray;
align: center;
}

div.bulletbox table {
margin: 0 1em 0 1em;
align: center;
}

div.bulletbox td {
  width: 50%;
}

.picturebox {
margin: 1em auto;
padding: .5em;
align: center;
}

  a:link { 
    font-weight: bold;
    text-decoration: none;
    color: #0066CC;
  }

  a:visited {  
   font-weight: bold;
    text-decoration: none;
    color: #0066CC;
  }

  a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #FFD700;
  }

#top a:link, #footer a:link, .quotebox a:link,.quotebox-right a:link,.quotebox-left a:link { 
    font-weight: bold;
    text-decoration: underline;
    color: yellow;
  }
#top  a:visited,#footer  a:visited, .quotebox  a:visited,.quotebox-right  a:visited,.quotebox-left  a:visited {
    font-weight: bold;
    text-decoration: underline;
    color: yellow;
  }


#top  a:hover,#footer  a:hover, .quotebox  a:hover,.quotebox-right  a:hover,.quotebox-left  a:hover {
    font-weight: bold;
    text-decoration: underline;
    color: #87CEFA;
  }


#demo-table {
  font: 100% sans-serif;
  background-color: rgb(141,189,232);
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid FFFFFF;
  }

#demo-table > caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em;
  margin-bottom: .5em;
  }


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: center;
  padding-right: .5em;
  border-style: inset;
  border-width: 1px;
  width: 10em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
  color: white;
  }


/* header */
#demo-table > thead > tr:first-child > th {
  text-align: center;
  color: white;
  }

#demo-table > thead > tr + tr > th {
  font-style: italic;
  color: rgb(141,189,232);
  }

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
  }

/* body */
#demo-table td {
  background-color: #FFFFCC;
  text-align: center;
  padding:.5em .5em .5em 3em;
  }

#demo-table tbody th:after {
  content: ":";
  }


/* footer */
#demo-table tfoot {
  font-weight: bold;
  }

#demo-table tfoot th {
  color: rgb(141,189,232);
  }

#demo-table tfoot th:after {
  content: ":";
  }

#demo-table > tfoot td {
  background-color: rgb(141,189,232);
  }

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
  }

table.twocol td {
    width: 50em;
}