/** ===global settings
* the following styles apply to all pages 
* within the reading program
************************************************************
************************************************************/

/** ==fonts for major elements
*********************************************/

/*
  We use "font stacks," with each font separated by a comma.
  The web browser (e.g. Internet Explorer) will read the stack from left to right 
    until it finds a font that is available on the user's machine. That font will be used.
    For example, given ->  font-family: Arial, Helvetica, Verdana, sans-serif;
     ...if a computer doesn't have Arial or Helvetica, Verdana will be used. 
  
  Multiple-word fonts need to be enclosed in quotation marks.
*/

body, h2, h3, h4, h5, .heading2 {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

p, td,
#content li,
#footer {
  font-family: Georgia, "Trebuchet MS", Times, "Times New Roman", sans-serif;
}

/** ==backgrounds and colors for major elements
*********************************************/

/* backgrounds / images 
  These are pretty tricky. Note that the first three are "repeating" backgrounds:
  The first repeats from left to right, and the next two repeat from top to bottom.

  For best results with all images:
   1. open the default images in image-editing software.
   2. paste the new image on top of the old one and save. Use "save for web" if available.
   3. Be sure to preserve the images' height and width.
*/

body                    { background: #f5ec5a url(images/bg-body.png) repeat-x 0 0; }
#content                { background: url(images/bg-content.png) repeat-y 0 0; }
.content-inner          { background:  transparent url(images/bg-content-border.png) repeat-y 286px 0; }
#nav-main               { background: url(images/bg-nav-main.png) no-repeat 0 0; }
#reading-program-title  { background-image: url(images/reading-program-title.png); }
#footer                 { background: transparent url(images/bg-footer.png) no-repeat 0 0; }

/* alternate reading program title for Internet Explorer 6 */
#reading-program-title  { background-image: url(images/reading-program-title.gif); }

/* text styles */
p, ul, ol, dl, li, td {
  color: #796344;
}

h2, h3, .heading2 {
  color: #352c1e;
}

#content em {
  color: #352c1e;
  font-style: italic;
}
#footer {
  color: #ba8b0c;
}

/** ==links and buttons and image replacement
*********************************************/

/* default link gets no underline */
a { text-decoration: none; }

#content a {
  color: #ee2424;
}


#footer a {
  color: #ba8b0c;
  border-bottom: 1px solid #e4cf42;
}


/* main buttons
  The main buttons use a special "image sprite" named button.png in the theme's images folder.
  Image sprites are important for good web page performance, but require great precision when editing .
 */
 
#content .btn {
  color: #fff;
  font-weight: bold;
}


/** ==navigation
*********************************************/
#nav-patron li {
  color: #9a5e00;
}

#nav-patron a,
#nav-user a {
  color: #f5ec5a;
  background-color: #ee2424;
}
#nav-patron a:hover,
#nav-user a:hover {background-color: #d91212; }

#nav-main a {
  border: 1px solid #fff;
  color: #ee2424;
  font-weight: bold;
}
#nav-main a:hover,
#nav-main .active a,
.home #nav-main .nav-home a,
.events #nav-main .nav-events a {
  color: #f5ec5a;
  background-color: #ee2424;
  border: 1px solid #ee2424;
}


/** =="view & submit" tables
*********************************************/
table {
  border: 1px solid #f4e1ad;
}

/* table header cells */
thead th {
  background-color: #f4e1ad;
}

/* table header and body cells */
th, td {
  border-right: 1px solid #fff;
}

/*  the last cell of each row has the same border-right color as 
  the table's. 
*/

th.last,
td.last {
  border-right: 1px solid #f4e1ad;
}

/* every other row gets a different background color */
tr.even td {
  background-color: #fffcc7;
}

/* these next two are for the fading notice within a reading-log table */
table tr td.notice {
  background-color: #7460b6;
  color: #fff;
}
#content table tr td.notice a {
  color: #fff;
}

/** ==forms
*********************************************/

.form-intro {
  border-bottom: 1px solid #f4e1ad;
}
.signup .continue,
.signup .actions,
.login .actions {
  border-top: 1px solid #f4e1ad;
}

/** ===theme images
*  No changes need to be made to the style rules below.
************************************************************
************************************************************/

/* the main PDL logo is used for this link */
#logo a { background-image: url(images/logo-pdl.png); }

/* alternate logo for Internet Explorer 6 */
* html #logo a { background-image: url(images/logo-pdl.gif); }

/** =sidebar 
********************/
.read-to-me .sidebar-events { background-image: url(images/sidebar-events-read-to-me.png); }
.elementary-readers .sidebar-events { background-image: url(images/sidebar-events-elementary.png); }
.teens .sidebar-events { background-image: url(images/sidebar-events-teens.png); }
.adults .sidebar-events { background-image: url(images/sidebar-events-adults.png); }

.read-to-me .sidebar-reading-log { background-image: url(images/sidebar-reading-log-read-to-me.png); }
.elementary-readers .sidebar-reading-log { background-image: url(images/sidebar-reading-log-elementary.png); }
.teens .sidebar-reading-log { background-image: url(images/sidebar-reading-log-teens.png); }
.adults .sidebar-reading-log { background-image: url(images/sidebar-reading-log-adults.png); }

/** =homepage
********************/


.home .main {
  background: url(images/banner-home.png) no-repeat 0 0;
}

/* these are the four image buttons at the bottom of the home page */

.home #nav-sub li.read-to-me a {
  background: url(images/home-read-to-me.png) no-repeat 0 0;
}
.home #nav-sub li.elementary-readers a {
  background: url(images/home-elementary.png) no-repeat 0 0;
}
.home #nav-sub li.teens a {
  background: url(images/home-teens.png) no-repeat 0 0;
}
.home #nav-sub li.adults a {
  background: url(images/home-adults.png) no-repeat 0 0;
}

/** ===reading level pages
************************************************************
************************************************************/

/* The first image is the default. 
  It will show up on pages that aren't tied to a particular reading level 
  The four following images appear on their respective reading-level pages
*/

#banner                     { background-image: url(images/banner-default.png); }
.read-to-me #banner         { background-image: url(images/banner-read-to-me.png); }
.elementary-readers #banner { background-image: url(images/banner-elementary.png); }
.teens #banner              { background-image: url(images/banner-teens.png); }
.adults #banner             { background-image: url(images/banner-adults.png); }