/* Clear any extra spacing for basic elements. */

html, body, img, div {
    border:0px;
    margin:0px;
    padding:0px;
}

/********************************************************************
 *
 *  Fonts
 *
 ********************************************************************/


h1 {
    font-size:14pt;
}

h2 {
    font-size:12pt;
}

h3 {
    font-size:11pt;
}

#main-menu {
    font-size:10pt;
}

#sidebar {
    font-size:9pt;
}

h4, #breadcrumb {
    font-size:8pt;
}

#footer, #topbar {
    font-size:7pt;
}

#content {
    line-height:20pt;
}

* {
    font-family: Arial, Verdana, sans-serif;
}

/* By default, h1 (page title) and h2 (section heading) elements are
   displayed in ALL UPPERCASE LETTERS.  This can be overridden in the
   per-page .css files.
*/
#content h1, #content h2 {
    text-transform:uppercase;
}

/* Since links have a default behavior (e.g. turning from blue to
   purple the first time it is clicked) that users may prefer,
   we only override the default for links outside of the content area.
*/
#main-menu a, #topbar a, #sidebar a, #breadcrumb a, #footer a {
    text-decoration: none;
}
#main-menu a:hover, #topbar a:hover, #sidebar a:hover, #breadcrumb a:hover, #footer a:hover {
    text-decoration:underline;
}

/********************************************************************
 *
 *  Colors
 *
 ********************************************************************/

/* Override default behavior of links outside of the content area.
   Note: This doesn't work in IE, so we have to specify the color
   directly (marked below as IE Hack).  */
#main-menu a, #topbar a, #sidebar a, #breadcrumb a, #footer a {
    color:inherit;
}

#main-menu, #main-menu a {
    color:black;
}

.submenu {
    background-color:#EEEEEE;
    opacity:0.85;
    filter:alpha(opacity=85);
}

#content, #sidebar, #sidebar a, #breadcrumb a /* IE Hack */ {
    color:#333333;
}

#topbar, #topbar a /* IE Hack */ {
    color:#dadada;
    background-color:#3f3f3f;
}

#bluebar {
    background-color:#2e3092;
    border-left-color:white;
}

#image {
    background-color:#a8a8a8;
}

#sidebar, #image {
    border-color:#fcc431;
}

#page {
    background-color:#ffe497;
}

#footer {
    clear:both;
}

#footer, #footer a /* IE Hack */ {
    color:#555555;
    background-color:white;
}

#sidebar #learn-about {
    background-color:#fda331;
}

/********************************************************************
 *
 *  Borders and decorative separators
 *
 ********************************************************************/

#main-menu .menuitem, #bluebar, #sidebar, #image, #breadcrumb span {
    border-left-width:1px;
    border-left-style:solid;
}

#breadcrumb span.first, #main-menu .first.menuitem {
    border:none;
}

#main-menu li {
    list-style-type:none;
}

#sidebar #learn-about, .inset {
    -moz-border-radius:10px;
}

#content h2 {
    margin-top:1em;
    padding-top:1em;
    background-image:url(separator.jpg);
    background-repeat:no-repeat;
    background-position:center top;
}

#content h2.first {
    padding-top:0;
    background-image:none;
}

/********************************************************************
 *
 *  Backgrounds
 *
 ********************************************************************/

#sidebar .figure {
    background-image:url(sidebar-figure.jpg);
    background-repeat:no-repeat;
    background-position:bottom right;
}

#sidebar .gradient {
    background-image:url(sidebar-gradient.jpg);
    background-repeat:repeat-y;
    background-position:right;
}

#bluebar {
    background-image:url(bluebar-disclaimer.jpg);
    background-repeat:no-repeat;
    background-position:5px 5px;
}

/********************************************************************
 *
 *  Padding and margins
 *
 ********************************************************************/

#main-menu .menuitem {
    padding:0 .5em;
}

.submenu {
    margin:0;
    padding:.2em;
    padding-top:.4em;
}

.submenu li {
    padding:2px .5em;
}

#content, #footer #faclc-info {
    padding:30px 50px;
}

#breadcrumb span {
    padding:0 5px 0 8px;
}

#breadcrumb span.first {
    padding-left:0;
}

#footer #faclc-info {
    padding-top:10px;
}

#faclc-info span {
    padding-right:.5em;
}

#footer #taproot-info {
    padding:10px;
}

#footer #taproot-info img {
    margin-top:4px;
}

#sidebar #quote {
    padding-top:25px;
}

#sidebar #learn-about {
    margin:40px 20px 20px 20px;
    padding:10px;
}

/********************************************************************
 *
 *  Positioning
 *
 ********************************************************************/

/*
 * BLUEBAR_BORDER_WIDTH = 1px
 * BLUEBAR_WIDTH        = 86px/59px(home)
 * IMAGE_HEIGHT         = 136px/193px(home)
 * IMAGE_WIDTH          = 210px/294px(home)
 * LOGO_WIDTH           = 200px
 * MENU_HEIGHT          = 120px
 * SIDEBAR_BORDER_WIDTH = 2px
 * SIDEBAR_WIDTH        = SIDEBAR_BORDER_WIDTH + IMAGE_WIDTH + BLUEBAR_BORDER_WIDTH + BLUEBAR_WIDTH
 */

body {
    position:absolute;
    left:0;
    top:0;
    padding:100px;
    width:50em;
    min-width:600px;
}

#logo {
    position:absolute;
    left:30px;
    top:39px; /* MENU_HEIGHT - 81px */
}

#menu {
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:120px; /* MENU_HEIGHT */
}

#menu #main-menu {
    position:absolute;
    left:200px; /* LOGO_WIDTH */
    right:-100px; /* allow the main menu to extend outside of the menu area */
    bottom:.2em;
}

#main-menu .menuitem {
    position:relative;
    float:left;
}

.submenu {
    position:absolute;
    top:1.3em;
    left:0;
    min-width:12em;
}

.submenu li {
    white-space:nowrap;
}

#page {
    position:absolute;
    left:0;
    right:0;
    top:120px; /* MENU_HEIGHT */
    padding-top:136px; /* IMAGE_HEIGHT */
}

#page #content {
    min-height:350px;
    margin-right:299px; /* SIDEBAR_WIDTH */
}

#topbar {
    position:absolute;
    left:0;
    top:0;
    height:136px; /* IMAGE_HEIGHT */
    width:100%;
}

#topbar #image {
    position:absolute;
    top:0;
    right:87px; /* BLUEBAR_WIDTH + BLUEBAR_BORDER_WIDTH */
    width:210px;  /* IMAGE_WIDTH */
    height:136px; /* IMAGE_HEIGHT */
    border-left-width:2px; /* SIDEBAR_BORDER_WIDTH */
}

#bluebar {
    position:absolute;
    top:0;
    width:86px; /* BLUEBAR_WIDTH */
    border-left-width:1px; /* BLUEBAR_BORDER_WIDTH */
    right:0;
    bottom:0;
}

#sidebar {
    position:absolute;
    top:0;
    right:87px; /* BLUEBAR_WIDTH + BLUEBAR_BORDER_WIDTH */
    bottom:0;
    width:210px;           /* IMAGE_WIDTH */
    border-left-width:2px; /* SIDEBAR_BORDER_WIDTH */
}

#sidebar .gradient, #sidebar .figure {
    position:absolute;
    top:0;
    left:0;
    height:100%; /* IE Hack */
    width:100%;  /* IE Hack */
}

#sidebar .content {
    top:136px; /* IMAGE_HEIGHT */
    position:absolute;
    left:0;
    bottom:0;
    width:100%; /* IE Hack */
}

#sidebar #quote, #sidebar #learn-about {
    display:block;
}

#sidebar #quote {
    margin:auto;
}

#sidebar #learn-about {
    position:relative;
}

#footer {
    position:relative;
    height:6em;
    min-height:65px;
    margin-right:299px; /* SIDEBAR_WIDTH */
}

#footer #faclc-info {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#footer #taproot-info {
    position:absolute;
    top:0;
    width:12em;
    min-width:100px;
    right:0;
    bottom:0;
    text-align:center;
}

#donate {
    position:absolute;
    top:0;
    right:100px;
}

#logo       { z-index:9;  }
#donate     { z-index:9;  }
#menu       { z-index:8; }
#bluebar    { z-index:5;  }
#topbar     { z-index:4;  }
#sidebar    { z-index:3;  }
#page       { z-index:1;  }
body        { z-index:0;  }

#sidebar .gradient { z-index:0; }
#sidebar .figure   { z-index:1; }
#sidebar .content  { z-index:2; }

/********************************************************************
 *
 *  Utility
 *
 ********************************************************************/

.clear {
    clear:both;
}

.disabled {
    display:none;
}

.inset {
    background:#fdd460;
    padding:30px;
    margin:1em;
    line-height:1.2em;
}

.left {
    float:left;
    margin-left:0;
    margin-right:2em;
}

.right {
    float:right;
    margin-right:0;
}

.center {
    display:block;
    float:none;
}

img.center, .inset.center img {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.warning {
    padding-left:50px !important;
    padding-top:15px !important;
    padding-bottom:15px !important;
    background-image:url(icon-warning.png) !important;
    background-repeat:no-repeat !important;
    background-position:left center !important;
}

#form-disclaimer {
    padding-top:10px;
}

#form-disclaimer h2.first {
    text-transform:none;
}

/********************************************************************
 *
 *  Drop shadows
 *
 ********************************************************************/

.shadowed {
    position:relative;
}

.shadow {
    position:absolute;
    left:0px;
    top:0px;
    bottom:-12px;
    right:-12px;
    z-index:-1;
    opacity:0.5;
}

.shadow div {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
}

.shadow .top {
    background-image:url(shadows/curved/shadow-top.png);
    background-repeat:repeat-x;
    background-position:top;
    margin:0 24px;
}

.shadow .top-right {
    background-image:url(shadows/curved/shadow-top-right.png);
    background-repeat:no-repeat;
    background-position:right top;
}

.shadow .right {
    background-image:url(shadows/curved/shadow-right.png);
    background-repeat:repeat-y;
    background-position:right;
    margin:24px 0;
}

.shadow .bottom-right {
    background-image:url(shadows/curved/shadow-bottom-right.png);
    background-repeat:no-repeat;
    background-position:right bottom;
}

.shadow .bottom {
    background-image:url(shadows/curved/shadow-bottom.png);
    background-repeat:repeat-x;
    background-position:bottom;
    margin:0 24px;
}

.shadow .bottom-left {
    background-image:url(shadows/curved/shadow-bottom-left.png);
    background-repeat:no-repeat;
    background-position:left bottom;
}

.shadow .left {
    background-image:url(shadows/curved/shadow-left.png);
    background-repeat:repeat-y;
    background-position:left;
    margin:24px 0;
}

.shadow .top-left {
    background-image:url(shadows/curved/shadow-top-left.png);
    background-repeat:no-repeat;
    background-position:left top;
}