/*
    Global styles for the San Agustin web site.
*/

body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #463c2f;
}

a:visited, a:active {
    color: inherit;
}

a {
    border-bottom: 1px solid #ff9988;
    text-decoration: none;
    color: #463c2f; /* Stupid IE not recognizing "inherit"! */
}

a:hover {
    color: red;
    border-bottom-color: red;
}

#footer a {
    border-bottom: 0px;
}

.label {
    font-weight: bold;
    font-size: 12px;
    text-align: right;
    padding-right: 5px;
}


td {
    padding-bottom: 5px;
}

td.label {
    width: 175px;
}
#headerSchedule .label {
    width: 75px;
}

.info, .info a {
    font-weight: 300;
    font-size: 12px;
}

td.info {
    width: 200px;
}

p {
    /* IE has trouble with italics--the page can be wider. */
    clear: both;
    padding: 5px 0px 0px 0px;
    border: 0px;
}

p:first-child, p.first {
    padding-top: 0px;
}

p.introduction {
    font-style: italic;
    padding: 0px 100px 10px 100px;
}

h1 {
    clear: both;
    width: 100%;
    font-weight: bold;
    font-size: 18px;
    color: #463C2F;
    padding-top: 15px;
    margin: 0px 0px 10px 0px;
    border-bottom: 2px solid tan;
}

/*
    The top margin is to overcome an irritating problem with the
    subtabs and IE 7. In IE 7 the background of the subtab is
    somehow transparent, allowing the text of the content area
    to show through. Setting z-index for both doesn't help so the
    hack is to lower the content area enough to make room for the
    subtab. Sigh,
*/
h1:first-child {
    border-top: 0px;
}

h2 {
    clear: both;
    width: 100%;
    padding-top: 15px;
    margin: 0px 0px 10px 0px;
    font-size: 14px;
    font-weight: bold;
}

h2:first-child {
    margin-top: 0px;
}

#banner {
    width: 100%;
    height: 35px;
    padding-top: 5px;
    background-color: #d2b48c;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

#homePageHeader {
    background-color: #808080;
    width: 100%;
}

#homePageHeader .image {
    width: 200px;
    height: 200px;
    background-color: gray;
}

#homePageHeader .text {
    height: 160px;
    padding: 10px 20px 30px 20px;
    background-color: tan;
    font-size: 12pt;
    font-weight: bold;
}

#missionStatement {
    padding-top: 5px;
}
#missionStatement p {
    margin: 7px 0px 0px 0px;
    font-size: 9pt;
    font-weight: 300;
}

#otherPageHeader {
    height: 100px;
}
#otherPageHeader .image {
    height: 100px;
    width: 400px;
}
#otherPageHeader .text {
    width: 400px;
    height: 100px;
    background-color: tan;
}

/* The overall look of our main tab bar. The individual tabs are defined by the tab class. */
.tabBar {
    background-color: darkgray;
    padding: 5px 0px 2px 0px;
}

/* Defines the look of an individual tab. */
.tabBar .tab {
    position: relative; float: left;
    padding: 5px;
    border-width: 0px 0px 0px 2px;
    border-color: tan;
    border-style: solid;
}

/* The first tab is a bit different because it doesn't render the tab divider (the left border). */
.tabBar .tab:first-child {
    margin-left: 5px; 
    border-left: 0px;
}

/* The various anchor styles within a tab. */
.tabBar .tab a {
    font: 10pt normal bold helvetica, Verdana, Arial, sans-serif;
    text-decoration: none;
    color: black;
    border-bottom: 0;
}
.tabBar .tab a:active,  .tabBar .tab a:visited {
}
.tabBar .tab a:hover {
    color: tan;
}

/*
    For the tab bar or one of the subtab bars there will be one tab that is the one the user
    selected (or is the default when the page is loaded.)
*/
.tabBar .currentTab a {
    color: #75644e;
    font-weight: bold;
}

/*
    The main tab bar tabs can optionally have a subtab bar that will appear when the user
    mouses over the tab. This subtab is a lot like the main tab bar but does use some
    different colors.
*/
.subTabBar {
    display: none; /* Hidden until the user mouses over the corresponding main tab bar tab. */
    position: absolute;
    left: -50px;
    top: 26px;
    padding: 5px;
    background-color: #d3d3d3; /* IE doesn't seem to recognize lightgray. */
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: darkgray;
    z-index: 100;
}

.subTabBar .subTab {
    position: relative; float: left;
    padding: 5px;
    border-width: 0px 0px 0px 2px;
    border-color: tan;
    border-style: solid;
}

.subTabBar .subTab a {
    border-bottom: 0;    
}
/* When it would be cleaner if the subtab bar had two rows then insert an empty div with this class. */
.subTabBar .divider {
    clear: both;
    width: 100%;
    height: 5px;
}

/* The first tab is a bit different because it doesn't render the tab divider (the left border). */
.subTabBar .subTab:first-child {
    margin-left: 5px;
    border-left: 0px;
}

.subTabBar .subTab a:hover {
    color: tan;
}

/* Placed on a subtab bar when it is visible; for example, when the user is mousing over tabs in the main tab bar.. */
.subTabShowing {
}

/*
    We have a single content area that is below the tab bar. The JavaScript will put HTML into
    this area.
*/
#content {
    width: 780px;
    background-color: #eeeeee;
    padding: 20px 10px 10px 10px;
}

/* Mainly a way of indenting stuff. */
#content .contentBlock {
    position: relative; float: left; clear: both;
    margin: 0px 0px 0px 30px;
    width: 750px;
    z-index: 1;
}

.thumbnail {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border: 2px solid tan;
}
.thumbnailNote {
    width: 80%;
}

#footer {
    width: 100%;
    background-color: white;
    border-top: 1px solid darkgray;
    font-size: 9px;
    font-weight: 300;
    color: darkgray;
    padding: 10px 0px 10px 0px;
}

#footer #inner {
    width: 547px;
    margin-left: auto;
    margin-right: auto;
}

#footer a,
#footer .link a:visited,
#footer .link a:active {
    color: darkgray;
}

#footer .link a:hover {
    color: black;
}