/*
   Styles for Home page

           Main: #a89682
     Dark lines: #66523d
   Side Overlay: #a78662
*/

/* General styles. */

html { background-color: #eeeeee; }

body { font-family: helvetica, arial, sans-serif; margin: 0; }
img, table, tr, td, div, a, form, input { border: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: black; }


/* Main page container. */

#container { width: 900px; margin: auto; background-color: white;
                  border-left: 10px solid white; border-right: 10px solid white; }


/* Redesigning Lives banner. */

#redesigning-lives { width: 100%; height: 112px;
                     background-color: #a89682;
                     border-top: 3px solid #66523d;
                     border-bottom: 3px solid #66523d; }
#redesigning-lives #spirograph-top { float: right; height: 110px; margin-top: 1px; }


/* Images of people banner. */

#people-banner { width: 100%; height: 125px; z-index: 5; }
#people-banner .portrait { width: 120px; height: 125px; }
#people-banner .landscape { width: 180px; height: 125px; }


/* Main menu. */

#main-menu { width: 100%; height: 29px;
             background-color: #a89682;
             border-top: 3px solid #66523d;
             border-bottom: 3px solid #66523d; }


/* Main content & sidebar. */

#main { width: 100%; background: url("/ot-images/home/spirograph/spirograph-bottom.gif") top right no-repeat;
            border-bottom: 3px solid #66523d; }
#maintable { width: 100%; margin-top: 10px; margin-bottom: 10px; }

h1 { font-size: 140%; letter-spacing: +2px;
     margin: 0 0 0 20px; padding-top: 1em; color: #990000; }

.focuscolumn { width: 350px; vertical-align: top; }

.focusblock { margin: 0px 10px 10px 10px; padding: 5px 10px 10px 10px;
              border: 1px solid white; background-color: white; clear: both;
              overflow: auto; }
.focusblock:hover { background-color: #eeeeee; border: 1px solid #a89682; }
.focusblock img { float: right; margin: 5px; border: 5px solid #eeeeee; }
.focusblock p { font-size: 80%; color: #666666; margin: 0; padding: 0;
                line-height: 140%; }
.focusblock .focustitle { font-size: 100%; font-weight: bold;
                          line-height: 120%; margin: 5px 0 5px 0; padding: 0; }
.focusblock .focustitle a { color: #66523d; }
.focusblock .focustitle a:hover { color: black; text-decoration: underline; }
.focusblock .focustext a { color: black; }
.focusblock .focustext a:hover { text-decoration: underline; }

.newscolumn { width: 200px; vertical-align: top; border-left: 1px solid #a89682; }
.newstitle { color: #990000; font-weight: bold; padding-left: 15px; margin: 10px 0 0 0; }
.newsitem { font-size: 70%; line-height: 130%; padding: 5px 5px 5px 15px; }
.newsitem p { margin: 0; color: #666666; }
.newsitem .itemtitle { font-weight: bold; margin-top: 0.25em; }
.newsitem .itemtitle a { color: #66523d; }
.newsitem .itemtitle a:hover { color: black; text-decoration: underline; }

.feedtitle { font-size: 70%; padding: 0; padding-left: 15px; font-weight: bold; }
.feedtitle a { color: #66523d; }
.feedtitle a:hover { color: black; text-decoration: underline; }

#content { width: 700px; font-size: 75%; line-height: 175%; vertical-align: top; }
#content p, #content li, #content h2, #content h3 { margin-left: 20px; margin-right: 40px; }
#content p { color: #333333; }
#content a { text-decoration: none; color: #66523d; font-weight: bold; border-bottom: 1px solid #cccccc; }
#content a:hover { border-bottom: 1px solid black; color: black; background-color: #eeeeee; }