/* ### base.css ### */
/* 2010.Nov.01 : created by Dave Robbins with credits indicated below */

a         {color: #db7003;}  /* dark blue  */
a:visited {color: #3399cc;}  /* light blue */
a:hover   {color: #564b47;}  /* gold  */
a:active  {color: #000000;}  /* white */

a.follow: hover {color: #007093;} /* light blue */

a.pushbutton
   {
   display: block; 
   border: 1px solid; 
   border-color: #aaa #000 #000 #aaa; 
   background: #fc0; 
   }

a.pushbutton: hover
   {
   position: relative; 
   top: 1px; 
   left: 1px; 
   border-color: #000 #aaa #aaa #000; 
   }

body
   {
   background-color: #0255a7;
   background-image: url(/library/images/gradients/blue-to-white-2x1600.gif);
   background-repeat: repeat-x;  
   /*
   background-color: #a7a7a7;
   */
   font-size: small;
   font-family: Verdana, Helvetica, sans-serif;
   color:#564b47;
   padding: 1% 0% 1% 0%;
   margin:0px;
   }

p, pre
   {
   padding: 5px 10px;
   margin:0px;
   }

img { border: none; }

/* ### main layout container ### */
#container
   {
   width: 831px;
   margin-bottom: 1.0em;

   /* center the container on the page */
   margin-left: auto;
   margin-right: auto;
   /* end of 'center the container on the page' */

   background-color: white;
   border:#0033ff solid;
   border-width:1px;
           border-radius:9px;
      -moz-border-radius:9px;
   -webkit-border-radius:9px;
           box-shadow: 0 0 1em 0.5em #bcd2e7;
      -moz-box-shadow: 0 0 1em 0.5em #bcd2e7;
   -webkit-box-shadow: 0 0 1em 0.5em #bcd2e7;
   }


/* ### banner ### */
#banner
   {
   background-color: white;
   padding: 0px;
   margin: 0px;
   border-radius:9px;
   -moz-border-radius:9px;
   -webkit-border-radius:9px;
   }

#banner img {padding:10px 0px;} 

/* ### menubar ### */
#menubar
   {
   text-align: left;
   padding: 0em;
   margin: 0em;
   }


/* ### content ### */
#content
   {
   background-color: white;
   padding: 0px;
   margin-left: 11.0em;
   margin-right: 0em;
   }

div#content
   {
   min-height:600px;
   height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
   }

#column-left
   {
   width: 21.0em;
   padding: 0.5em;
   text-align:left;
   background-image: url(/library/images/skyblue-fade-a.jpg);
          border-radius:9px ;
      -moz-border-radius:9px;
   -webkit-border-radius:9px;
   }

#column-right
   {
   float:right;
   width: 21.0em;
   padding: 0.5em;
   margin: 0em 3.5em 0em 0em;
   text-align:left;
   background-image: url(/library/images/skyblue-fade-a.jpg);
          border-radius:9px ;
      -moz-border-radius:9px;
   -webkit-border-radius:9px;
   }


/* ### sidebar ### */
#sidebar
   {
   background-color: white;
   float: left;
   /* 
   The encroachment of items in the sidebar into the left margin
   is controlled by the property, width, below.
   Decrease of the width forces items further into the left margin.
   */
   width: 10.0em;
   margin: 0em;
   padding: 1.0em 0em 0em 0em;
   height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
   }


/* ### footer ### */
#footer
   {
   font-size: x-small;
   text-align: center;
   clear: both;
   padding: 0.2em;
   }

.bold
   {
   font-weight:600;
   }

.italic
   {
   font-style:italic;
   }

.italic_dim
   {
   font-style:italic;
           opacity: 0.333333;
      -moz-opacity: 0.333333;
   -webkit-opacity: 0.333333;
   }

.superscript
   {
   vertical-align: baseline;
   font-size: 0.8em;
   position: relative;
   top: -0.4em;
   }

.img-centering
   {
   text-align:center;
   margin-top:0em;
   margin-bottom:0em;
   padding:0em;
   }

.img-styling
   {
   margin: 5.0em 0em 0em 0em;  /* Force image to appear below the menu bar */
   border-radius:12px;
   -moz-border-radius:12px;
   -webkit-border-radius:12px;
   }

.rounded-corners
   {
           border-radius:1.2em;
      -moz-border-radius:1.2em;
   -webkit-border-radius:1.2em;
   }

.img-shadow
   {
   float:right;
   background:
      url(/library/images/transparent-shadow.png)
      no-repeat bottom right;
      /* Most major browsers (other than IE) support transparent shadow.
      Newer release of IE should be able to support that. */
   }

.img-shadow img
   {
   display: block;            /* fix IE which won't do well without this */
   position: relative;        /* make shadow's position relative to its image */
   padding: 5px;              /* create a border around the image */
   background-color: #fff;    /* bg color of the border created by padding */
   border: 1px solid #cecece; /* apply 1 pixel greyish border
                                 to the white border created by the padding */
   margin: -6px 6px 6px -6px; /* offset image by pixels to reveal shadow and
                                 since the shadows are 6 pixels wide,
                                 offset it by 6 to get a perfect shadow */
   }

#gradient
   {
   color: #fff;
   height: 100px;
   padding: 10px;

   /* for WebKit (Safari, Chrome) */
   background: -webkit-gradient(linear, left top, left bottom,
      from(#00f), to(#fff));

   /* for Mozilla/Gecko (Firefox) */
   background: -moz-linear-gradient(top, #00f, #fff);

   /* for Internet Explorer 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.gradient
      (startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);

   /* for Internet Explorer 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}

.oval-link a:link    
   {
   color: white;
   background-color:#2d6cb5;
   text-align:center;
   text-decoration: none
   font-family: Verdana, Arial, sans-serif;
   font-size: 1.6em;
   font-weight: 900; 
   padding:0 0.7em;
   margin:0.5em;
   border-radius:9px;
   -moz-border-radius:9px;
   -webkit-border-radius:9px;
   }

.oval-link a:visited 
   {
   color: white;
   background-color:#2d6cb5;
   text-align:center;
   text-decoration: none
   font-family: Verdana, Arial, sans-serif;
   font-size: 1.6em;
   font-weight: 900;
   padding:0 0.7em;
   margin:0.5em;
   }

.oval-link a:hover
   {
   color: #5064f3;
   background-color: white;
   text-align:center;
   font-family: Verdana, Arial, sans-serif;
   font-size: 1.6em;
   font-weight: 900;
   padding:0 0.7em;
   margin:0.5em;
   border-radius:9px;
   -moz-border-radius:9px;
   -webkit-border-radius:9px;
   }

.oval-link a:active
   {
   color: white;
   background-color:#2d6cb5;
   text-align:center;
   text-decoration: none
   font-family: Verdana, Arial, sans-serif;
   font-size: 1.6em;
   font-weight: 900;
   padding:0 0.7em;
   margin:0.5em;
   }

/* ### text-slideshow ### */
#slideshow {width: 600px; background-color: white;}

#slideshow ul
   {
   margin: 0;
   padding: 0;
   list-style-type: none;
   height: 1%; /* IE fix */
   }

#slideshow ul:after
   {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
   }

#slideshow .slides    {overflow: hidden; width: 600px;}
#slideshow .slides ul {width: 2880px;}
#slideshow .slides li {width: 600px; float: left; padding: 20px;}
#slideshow .slides h2 {margin-top: 0;} 

#slideshow .slides-nav      {background-color: white;}
#slideshow .slides-nav li   {float: left;}
#slideshow .slides-nav li a {display:block; padding: 15px 30px; outline: none;}

.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {background-color: white;}
.js #slideshow .slides-nav li.on a {position: relative; top: -4px;}
/* ### end of text-slideshow ### */


/* ### captioned-image : START ### */
/* p { margin-top:0; } must remain declared for captioned-image */
.floatright
   {
   float: right;
   width: 103px;
   margin: 0 0 10px 10px;
   background-color: #fff;
   padding: 10px;
   border-top: 1px solid #999;
   border-right: 2px solid #555;
   border-bottom: 2px solid #555;
   border-left: 1px solid #999;
   text-align: center;
   }

div.floatright img
   {
   border-top: 2px solid #555;
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
   border-left: 2px solid #555;
   }

.floatright-noborder
   {
   float: right;
   width: 103px;
   margin: 0 0 10px 10px;
   background-color: #fff;
   padding: 10px;
   text-align: center;
   }

/* ### captioned-image : END ### */



#gallery
   {
   margin-top: 2.0em;
   width:12.0em;
   padding:1.0em;
   }

#gallery dt
   {
   background:#ffcc00;              /*      gold : menu header background*/
   color:#009;                      /* navy blue : menu header text      */
   text-align:center;
   font-weight:900;
   padding:5px 0;
   margin:7px 0;

   border:1px solid #fff;
   border-color:#000 #cde #cde #000;
   }

#gallery dd
   {
   padding:0;
   margin:3px 0;
   text-align:center;
   background:#ffcc00;   /* gold : menu button */
   }

#gallery div, #gallery span { border:1px solid #000; }
#gallery .hh {padding:1px 0;}
#gallery span {display:block;}

#gallery .aa {border-color:#58acfe #0080ff #0080ff #58acfe;}
#gallery .bb {border-color:#0174df #224b83 #224b83 #0174df;}
#gallery .cc {border-color:#0174df #006ade #006ade #0174df;}
#gallery .dd {border-color:#0174df #006ade #006ade #0174df;}
#gallery .ee {border-color:#0080ff; padding:0 2px 0 0;}

* html #gallery .ee {padding:0;}

#gallery a, #gallery a:visited
   {
   display:block;
   width:100%;
   border:1px solid #000;
   color:#006;
   text-decoration:none;
   }

#gallery .ff {border-color:#e0f8f7 #5f6962 #5f6962 #d0ddd4;}
#gallery .gg {border-color:#c9d7cd #7c8980 #7c8980 #c8d6dd;}
#gallery .hh {border-color:#c0d0c5 #9aaa9f #9aaa9f #bfd0c5;}

#gallery a:hover
   {
   background:#000066;         /* navy blue : */
   color:#fc0;
   }

#gallery a:hover .ff
   {
   display:block;
   border-color:#5f6962 #d0ddd4 #d1ddd5 #5f6962;
   }

#gallery a:hover .gg
   {
   display:block;
   border-color:#7c8980 #c8d6dd #c9d7cd #7c8980;
   }

#gallery a:hover .hh
   {
   display:block;
   border-color:#9aaa9f #bfd0c5 #c0d0c5 #9aaa9f;
   padding:2px 0 0 0;
   }




/* ### pretty-table : START ### */

.pretty-table
   {
   padding: 0;
   margin: 0 auto 0 auto;
   border-collapse: collapse;
   border: 1px solid #333;
   font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size: 1.2em;
   color: #000;
   }

.pretty-table caption
   {
   caption-side: top;
   font-size: 0.9em;
   font-style: italic;
   text-align: right;
   padding: 0.5em 0;
   }

/* table data */
.pretty-table th, .pretty-table td
   {
   border: 1px dotted #666;
   padding: 0.5em;
   text-align: left;
   color: #009;
   }

/* table header : left column */
.pretty-table th[scope=col]
   {
   color: #000;
   background: url(/library/images/gradients/white-to-blue-16x200)
      bottom repeat-x;
   font-size: 0.9em;
   border-bottom: 2px solid #333;
   /* border-right: 2px solid #333; */
   }

/* table header : middle & right columns */
.pretty-table th+th[scope=col]
   {
   color: #000;
   background: url(/library/images/gradients/white-to-blue-16x200)
      bottom repeat-x;
   /* background-color: #7d98b3; */
   border-right: 1px dotted #666;
   }

.pretty-table th[scope=row]
   {
   background-color: #b8cfe5;
   border-right: 2px solid #333;
   }

.pretty-table tr.alt th, .pretty-table tr.alt td
   {
   /* color: #2a4763; */
   color: #000099;
   }

.pretty-table tr:hover th[scope=row], .pretty-table tr:hover td
   {
   background-color: #006ce1;
   color: #fff;
   }
/* ### pretty-table : END ### */



/* ### Mouse RollOver Image Popup : START ### */

   /*Credits: Dynamic Drive CSS Library */
   /*URL: http://www.dynamicdrive.com/style/ */

.thumbnail
   {
   position: relative;
   z-index: 0;
   }

.thumbnail:hover
   {
   background-color: transparent;
   z-index: 50;
   }

.thumbnail span                  /*CSS for enlarged image*/
   {
   position: absolute;
   background-color: lightyellow;
   padding: 5px;
   left: -1000px;
   border: 1px dashed gray;
   visibility: hidden;
   color: black;
   text-decoration: none;
   }

.thumbnail span img              /*CSS for enlarged image*/
   {
   border-width: 0;
   padding: 2px;
   }

.thumbnail:hover span            /*CSS for enlarged image on hover*/
   { 
   visibility: visible;
   top: 0;
   left: 60px; /*position where enlarged image should offset horizontally */
   }
/* ### Mouse RollOver Image Popup : END ### */



/* ### FollowTab : START ### */
#followTab
   {
   /* No bullets */
   list-style: none;

   /* Position and float the tab */  
   position: fixed;
   z-index: 1;
   right: 0;
   top: 240px;
  
   /* Give the tab width and padding */
   width: 24px;
   padding: 16px 5px 0px;
  
   /* Add the curved white border */
   border: 3px solid #fff;
   border-right: none;
      -moz-border-radius: 10px 0 0 10px;
   -webkit-border-radius: 10px 0 0 10px;
           border-radius: 10px 0 0 10px;
  
   /* Add the drop shadow */
      -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
   -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
           box-shadow: 0 0 7px rgba(0, 0, 0, .6);
  
   /* Add the semitransparent gradient background */
   background: rgba(255, 204, 102, .75);
   background: -moz-linear-gradient(top,
               rgba(254, 203,  50, .75),
               rgba(255, 204, 102, .75));
   background: -webkit-gradient( linear, left top, left bottom, from(
               rgba(254, 203,  50, .75) ), to(
               rgba(255, 204, 102, .75) ) );
   background: linear-gradient(top,
               rgba(254, 203,  50, .75),
               rgba(255, 204, 102, .75));
   filter: progid:DXImageTransform.Microsoft.Gradient(
           startColorStr='#fecb3208', endColorStr='#ffcc990a', GradientType=0 );
   }


/* Items within the tab */
#followTab li
   {
   margin: 9px 0 0 0;
   line-height: 0;
   }

#followTab li:first-child
   {
   margin-top: 0;
   }


/* General style for buttons within the tab */
#followTab a
   {
   display: block;
   width: 24px;
   }

#followTab a span
   {
   display: none;
   }


/* "A to G" button */
#followTab a.A_to_G
   {
   height: 20px;
   background-position: 0 -32px;
   }

#followTab a.A_to_G:hover
   {
   background-position: 0 -52px;
   }


/* "H to L" button */
#followTab a.H_to_L
   {
   height: 20px;
   background-position: 0 -60px;
   }

#followTab a.H_to_L:hover
   {
   background-position: 0 -80px;
   }



/* "M to R" button */
#followTab a.M_to_R
   {
   height: 20px;
   background-position: 0 -88px;
   }

#followTab a.M_to_R:hover
   {
   background-position: 0 -108px;
   }


/* "S to Z" button */
#followTab a.S_to_Z
   {
   height: 20px;
   background-position: 0 -116px;
   }

#followTab a.S_to_Z:hover
   {
   background-position: 0 -136px;
   }

/* ### FollowTab : END ### */


/* IE compatibility */
.rounded
   {
   padding:15px;
   background:#FFD;
   border:1px solid #333;
   }

.rounded li
   {
   padding-top:2px;
   padding-bottom:2px;
   }

.ts_hover img
   {
   -webkit-transform:scale(0.8);      /*Webkit: Scale image to 0.8 x orig*/
      -moz-transform:scale(0.8);      /*Mozilla scale version*/
        -o-transform:scale(0.8);      /*Opera scale version*/
   -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
      -moz-transition-duration: 0.5s; /*Mozilla duration version*/
        -o-transition-duration: 0.5s; /*Opera duration version*/
   opacity: 0.7;                      /*initial opacity of images*/
   margin: 0 10px 5px 0;              /*margin between images*/
   }

.es_hover img:hover
   {
   -webkit-transform:scale(1.1);         /*Webkit: Scale image to 1.2 x orig*/
      -moz-transform:scale(1.1);         /*Mozilla scale version*/
        -o-transform:scale(1.1);         /*Opera scale version*/
           box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow*/
   -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
      -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
   opacity: 1;
   }

#chalkboard
   {
   width:640px;
   height:495px;
   padding:3.0em;
   color:white;
   background-image: url(/library/images/chalkboard-bg.gif);
   background-repeat: no-repeat;
   }

#mailing_address
   {
   width:640px;
   height:378px;
   margin: 0em;
   padding: 8.0em 0em 0em 9.0em;
   font-size: 1.6em;
   font-weight:700;
   color:black;
   background-image: url(/library/images/ShadowedEnvelope-640x378.gif);
   background-repeat: no-repeat;
   }