/*************************************
 * TITLE: Sinorca Screen Stylesheet  *
 * MODIF: 2003-Apr-30 19:31 +0800    *
 *                                   *
 * Considerable modifications from   *
 *   the original have been made by  *
 *   Aaron Curley                    *
 *                                   *
 *************************************/



/* ################################################ */
/* ##### Common Styles                        ##### */
body {
  color: black;
  background-color: rgb(193,157,113);  /* brownish */
  font-family: verdana, helvetica, arial, sans-serif;
  margin: 0;
  padding: 0;
}
.doNotDisplay { /* for encoding text into the html page that does NOT display when using CSS but is "there" for semantics purposes*/
  display: none;
}
/* ############################################## */



/* ################################################ */
/* ##### Site Header (top "tall" shaded area) ##### */

/* Site header area - The title logo and gradient background.*/
#siteHeader {
  background-color: rgb(231,110,52);
  background-image:url('./images/headertitleandbackground.png');
  background-repeat:no-repeat;
  background-position:top center;

  height: 140px;
  
  margin: 0 0 0 0;
  padding: 0 0 0 0;

  color: black;
}

/* "Enrich your HS homeschool program" graphic box - left of main title+logo image. */
#siteHeader #enrichBox{  
  background-image:url('./images/enrichbox.png');
  background-repeat:no-repeat;
  background-position:center center;
  
  float: left;     /* floated, thus we need to specify width */
  clear: left;
  
  height: 140px;
  width: 140px;
  
  margin-left: 15px;
}

/* Home button area - left, just above bar.*/
#siteHeader #homeButton{  
  background-image:url('./images/homebutton.png');
  background-repeat:no-repeat;
  background-position:top left;
  
  float: right;
  
  height: 10px;       /* 20  = 10 + 5 + 5  */
  width: 110px;       /* 110 = 110 + 0 + 0 */
  
  margin-top: 120px;  /* 140 - 120 = 20   Place the home button area right above the horizontal bar. */
  
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 0px;
  padding-right: 0px;
  
  color: rgb(255,255,191);
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
}
#siteHeader #homeButton a {
  background-color: transparent;

  color: rgb(255,255,191);
  text-decoration: none;
}
#siteHeader #homeButton a:hover {
  text-decoration: underline;
}
/* ################################################ */



/* ################################################ */
/* ### Site horizontal "bar"                    ### */
#barHeader {
  background-color: rgb(106,17,17);
  
  height: 6px;
  width: 100%;
  
  margin: 0px 0px 0px 0px;
}
/* ################################################ */



/* ################################################ */
/* ##### Side Bar / menu section              ##### */
#sideBar {
  float: left;
  clear: left;
  
  width: 165px;            /*change margin in pageContent if you change this!*/
  
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
  font-size: 16px;
  line-height: 16px;
}
#sideBar ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  
  list-style-type: none;
  list-style-position: outside;
  
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/  
}
#sideBar li {
  margin: 6px 0 0 0;
  padding: 0.1ex 0 0 0;  /* Circumvents a rendering bug (?) in MSIE 6.0 */
  
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
}
#sideBar li a {
  background-image: url('./images/menubutton.png');
  background-repeat: no-repeat;
  background-position: 0 0;  /* Top half of 160x200 button image is the "unpressed" button. */

  display: block;

  /* button picture is 160x100 */
  height: 45px;   /*  100 = 45 + 38 + 17  */
  width: 120px;   /*  160 = 120 + 20 + 20  */
  
  padding-top: 38px;
  padding-bottom: 17px;
  padding-left: 20px;
  padding-right: 20px;
  
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
  text-decoration: none;
  text-align: center;
}
#sideBar li a:hover {
  background-position: 0 -100px;  /* Bottom half of 160x200 button image is the "pressed" button. */

  /* Move the text up 3px and right 2px along with pushed-in button. */
  padding-top: 35px;
  padding-bottom: 20px;
  padding-left: 22px;
  padding-right: 18px;  
}
/* ################################################ */



/* ################################################ */
/* ##### Right bar - shown on main page only. ##### */
#rightBar { 
  float: right;
  
  width: 150px;            /*change margin in rightBarPageContent if you change this!*/
    
  margin-left: 10px;
  margin-right: 5px;
    
  font-size: 15px;
}
#rightBar ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  
  list-style-type: none;
  list-style-position: outside;

  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
}
#rightBar li {
  background-image:url('./images/rightbaritembackground.png');
  background-repeat:no-repeat;
  background-position:top left;
  
  height: 130px;
  width: 150px;
  
  margin-top: 10px;
  
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
  vertical-align: middle;
  text-align: center;
}
#rightBar li a {
  color: rgb(255,255,191); /*change color value in all substyles if you change this*/
  text-decoration: none;
}
#rightBar li a:hover {
  text-decoration: underline;
}

/* Div used to limit size of pageContent section on pages with rightBar. */
#rightBarPageContent{
  margin-right: 155px;    /*change width in right sideBar if you change this!*/
}
/* ################################################ */



/* ################################################ */
/* ##### Page Content Section                 ##### */
#pageContent { 
  min-height: 430px;      /*change if you add more buttons or resize them! */
  height: auto !important;/* hack for IE6 - see http://www.dustindiaz.com/min-height-fast-hack/ */
  height: 430px;

  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 165px;    /*change width in sideBar if you change this!*/
  margin-right: 0px;
  
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0px;
  padding-right: 10px;
  
  font-size: 0.8em;
  color: black;
  line-height: 1.5em;
}
#pageContent p {
  margin: 1em 1ex 2em 1ex;
  padding: 0;
}
#pageContent a {
  background-color: transparent;

  color: rgb(0,0,170);
  text-decoration: underline;
}
#pageContent a:hover {
  text-decoration: none;
}

/* horizontal thin blue bar */
#pageContent .bar {          
  background-color: rgb(100,135,220);

  height: 0.2ex;

  margin: 0.1em 0 0 0;
  padding: 0.5ex 0 0.5ex 1ex;

  color: white;
}

#pageContent h1 {          /* Header 1 is a blue horizontal bar with text inside */
  background-color: rgb(100,135,220);

  margin: 1em 0 0.2em 0;
  padding: 0ex 0ex 0ex 1ex;

  font-size: 0.9em;
  font-weight: bold;
  color: white;
}
#pageContent h2 {          /* Header 2 is just normal text, but bigger! */
  margin: 0 0 0 0;
  padding: 0.05em 0 0.05em 0;

  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.1em;
}
#pageContent h3 {          /* Header 3 is smaller than h2 */
  margin: 0 0 0 0;
  padding: 0.05em 0 0.05em 0;

  font-size: 1.2em;
  line-height: 1.1em;
  font-weight: normal;
}
#pageContent p {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
#pageContent ul {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  list-style-position: outside;
  list-style-type: none;
}
#pageContent ul .indented{
  margin-left: 3em;
}
#pageContent .tablecenter{
  text-align: center;
}
#pageContent .tablecenter table{
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}
/* ################################################ */



/* ################################################ */
/* ####  Order Form styles (within page content)### */
#pageContent #orderForm{
  max-width: 48em;
  width: auto !important;/* hack for IE6 - see http://www.dustindiaz.com/min-height-fast-hack/ */
  width: 90%;
  
  padding: 5px;
}

#pageContent #orderForm legend{
  width: 100%;
  
  margin-bottom: 7px;
  
  border-bottom: 1px solid black;
}

#pageContent #orderForm fieldset{
  width: 100%;
  
  margin-bottom: 25px;
  
  border-style: none;
}

#pageContent #orderForm .buttons{
  text-align: center;
}

#pageContent #orderForm label{
  float: left;
  display: block;
  
  width: 14em;
  
  margin-right: 1em;
  
  text-align: right;
}

#pageContent #orderForm input, select, textarea, p{
  margin-bottom: 4px;
}
/* ################################################ */



/* ######################################################### */
/* ####  Question and Answer styles (within page content)### */
#pageContent .qaList{
  max-width: 800px;
}
#pageContent .qaQuestion{
  /*background-color: rgb(222,72,26);*/
  background-color: rgb(255,255,170);
  
  max-width: 800px;
  
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: none;
  border-left-style: solid;
  border-width: thin;
  
  padding: 5px 5px 5px 5px;
  
  font-weight: bold;
}
#pageContent .qaAnswer{
  /*background-color: rgb(255,255,191);*/
  background-color: white;
  
  max-width: 800px;
  
  border-style: solid;
  border-width: thin;
  margin-bottom: 2em;
  
  padding: 5px 5px 5px 5px;
}
/* ################################################ */



/* ################################################ */
/* ##### Footer                               ##### */
#footer {
  background-color: rgb(106,17,17);
  
  height: 1.4em;
  
  margin: 0 0 0 0;
  padding: 5px 10px 5px 10px;
  
  color: rgb(255,255,191);
  font-size: 0.8em;
}
#footer #lastupdated{
  float: left;
}
#footer #email{
  float: right;
}
/* ################################################ */