/*
    Stylesheet for the Agape Productions Inc site, model 2009.

    The styling of the menu and some other bits came from
    a stylesheet at the GNU Image Manipulation Program site.
    I'd give more credit, but I didn't keep that much of
    their original design.
*/

body {
    background: rgb(14, 36, 38);
    color: black;
    font-family: Candara, Sans-Serif;
    margin: 0px;
    padding: 0px;
    font-size: 10pt;
}

hr {
    border: 0;
    width: 100%;
    height: 2px;
    background: rgb(120, 120, 120);
}

img {
    border: none;
}

/*
    "h1" is used as the page title.
*/

h1 {
    color: rgb(120, 120, 120);
    border-bottom: 1px solid rgb(68, 68, 68);
    max-width: 70%;
    padding: 5px 5px 5px 5px;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 130%;
    clear: left;
    text-transform: uppercase;
    font-family: Tahoma, "Trebuchet MS", Sans-Serif;
    font-weight: bold;
}

/*
    "h2" is used as a section header, but has other purposes, too.
*/

h2 {
    color: rgb(110, 110, 110);
    font-weight: bold;
    font-size: 120%;
    margin-top: 1.5em;
    margin-bottom: 1em;
    clear: left;
}

h3 {
    color: rgb(120, 120, 120);
    font-weight: bold;
    font-size: 110%;
    letter-spacing: .1em;
    margin-top: 1.5em;
    margin-bottom: 1em;
    clear: left;
}

p {
    margin: 1.33em 3em;
    line-height: 1.2em;
}

li {
    margin-left: 20px;
    margin-right: 40px;
    line-height: 1.5em;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: rgb(255, 43, 143);
}

a:hover {
    color: rgb(170, 0, 81);
}

/*
    #outer should be the outer-most page content element in the body.
    In this way the content is left-to-right centered and sized,
    and top and bottom margins are set.
*/

#outer {
    min-width: 58em;
    max-width: 60em;
    margin: 10px auto 20px auto;
}

/*
    #header describes the web page (or site).

    The owner of the web page is right-justified on the page.
    Traditionally, this is also a link to the home page.

    A tag line (or slogan) is on the left side.  Or perhaps
    a image.  This, too, should be a link to the home page
    because it is expected behavior.
*/

#header {
    height: 68px;
    background: rgb(255, 147, 198);
}

#header > span.leftfloat {
    float: left;
    padding: 35px 0px 0px 20px;
    color: rgb(170, 0, 81);
}

#header > span.rightfloat {
    float: right;
    padding: 3px 20px 0px 0px;
    font-size: 24pt;
    color: rgb(170, 0, 81);
}

#header a {
    text-decoration: none;
    color: rgb(170, 0, 81);
}

/*
    #corpus is the body of the web page.  If it were called "#body"
    then there would be potential confusion with the "body" tag.
*/

#corpus {
    min-height: 38em;
    margin: 0px;
    padding: 0px;
    background-color: rgb(255, 230, 241);
}

/*
    #menu is a narrow, vertical menu that lives on the
    right upper edge of the web page body.

    The anchors are colored differently for internal
    and external links.

    The "listing" class provides a name to distinguish
    the menu contents from the bottom DIV that contains
    a corner graphic.  Dividing the margins and padding
    between them meant that using an "em" width had to go.
*/

#menu {
    float: right;
    z-index: 1;
    width: 13em;
    margin: 0 0 0 14px;
    padding: 14px 0px 0px 0px;
    font-weight: bold;
    white-space: nowrap;
    background: rgb(255, 202, 227);
}

#menu .listing {
    padding: 0px 0px 0px 20px;
}

#menu a {
    display: block;
    margin: 2px;
    padding: 2px 4px 2px 8px;
    font-size: 110%;
    text-decoration: none;
    color: rgb(255, 43, 143);
}

#menu a:hover {
    border-left: 2px solid rgb(255, 43, 143);
    padding: 2px 2px 2px 6px;
    color: rgb(170, 0, 81);
}

#menu a[href^=http] {
    color: rgb(206, 92, 0);
}

#menu a[href^=http]:hover {
    border-left: 2px solid rgb(114, 159, 207);
    padding: 2px 2px 2px 6px;
    color: rgb(52, 101, 164);
}

/*
    #frontwindow is the region:
    *   top edge is the bottom of the #header
    *   bottom edge is where the page content will begin
    *   left edge is left edge of page content
    *   right edge is the left side of the floating menu block

    It contains the Agape logo and can be considered a trophy case
    or a area to highlight things about the current page.

    The MSIE browser is acting differently than the FireFox or
    Safari brower does.  The #frontwindow block is needed to
    prevent the #pagecontent DIV from being rendered as a narrow,
    extruded block of text, sandwiched between the Agape logo
    and the trophies.  The browser doesn't recognize that the
    available page width enlarges.  With the #frontwindow block
    the MSIE browser begins the following DIV after the bottom
    of the rendered #menu.  It doesn't really make sense, but
    there you are.

    The FireFox browser renders as you would expect.  The
    min-height attribute forces some whitespace, so the FireFox
    display is thus much like that rendered by MSIE.  The page
    could use a bit of whitespace there anyways.

    Interleaved here is the "trophy" class.  Items in the front
    window use it, along with the #logo item.
*/

#frontwindow {
    min-height: 18em;
}

/*
    The logo lives on the upper-left corner of the web page body.
*/

#logo {
    float: left;
    width: 220px;
    padding: 10px 20px;
    color: rgb(170, 0, 81);
}

#logo > img {
    width: 220px;
}

/*
    Finally, the web content!
*/

#pagecontent {
    margin: 0;
    padding: 10px 20px;
}

/*
    #festivalbox is a floating "where is this film showing now?" box.
*/

#festivalbox {
    float:right;
    padding: 10px;
    text-align: left;
    background: rgb(255, 238, 246);
}

#festivalbox ul {
    margin: 0px;
    padding: 0px;
}

#festivalbox li {
    margin-right: 0px;
}

/*
    #footer copyrights the page, and perhaps provides some site navigation.

    Note that the "copyright" class is used to distinguish the DIV contents
    from the DIVs used for rounded corners.
*/

#footer {
    clear: both;
    min-height: 37px;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    text-align: center;
    color: rgb(191, 0, 91);
    background: rgb(255, 147, 198);
}

.copyright {
    padding: 10px 10px 0px 0px;
}

/*
    These classes format the DIVs used to display rounded corners.
    Those Javascript classes that did automatic corner rounding
    just didn't work for my application.  Sad.

    I got the images from wigflip.com/cornershop/.  I made them
    with no transparency.  If you use a tranparent background the
    non-rounded DIV just shows through, and you gained nothing.
*/

.header_ne {
  font-size: 0;
  height: 12px;
  background: url('../images/header_ne.gif') no-repeat top right;
}

.header_nw {
  font-size: 0;
  height: 12px;
  background: url('../images/header_nw.gif') no-repeat top left;
}

.footer_se {
  font-size: 0;
  height: 12px;
  background: url('../images/footer_se.gif') no-repeat bottom right;
}

.footer_sw {
  font-size: 0;
  height: 12px;
  background: url('../images/footer_sw.gif') no-repeat bottom left;
}

.menu_sw {
  font-size: 0;
  height: 14px;
  background: url('../images/menu_sw.gif') no-repeat bottom left;
}

/*
    The "trophy" class displays some content in the #frontwindow.

    The "news" class displays the highlighted news items on the index page.
*/

.trophy {
    float:right;
    padding: 10px 0px 10px 10px;
    text-align: center;
}

.news li {
    margin-left: 40px;
    margin-right: 40px;
    line-height: 1.5em;
}

.news a:hover {
    color: rgb(170, 0, 81);
}

.news a {
    font-weight: bold;
    text-decoration: none;
    color: rgb(255, 43, 143);
}

/*
    The "address" class is used mostly when presenting snail mail addresses.
    The "email" class is used for formatting email links.
    The "navlink" class is mostly used for navigation links at the top
    of the page content.
*/

.address {
    line-height: 1em;
}

.address li {
    list-style-type: none;
}

.email a {
    font-weight: bold;
    text-decoration: none;
    color: rgb(255, 43, 143);
}

.email a:hover {
    color: rgb(170, 0, 81);
}

.navlink {
    font-size: 110%;
    font-weight: bold;
    text-decoration: none;
    color: rgb(255, 43, 143);
}

.navlink :hover {
    color: rgb(170, 0, 81);
}

/*
    The "session" class helps with displaying picklist information on the Conferences page.
    The "redbullet" class gives the bulleted picklist lines a more interesting bullet.
    The "leftcaption" class is used when displaying text with pictures.
    The other classes seem self-evident.
*/

.session li {
    list-style-type: none;
}

.redbullet {
    list-style-image: url('../images/bullet_red.gif');
}

.allcaps {
    text-transform: uppercase;
}

.nicegrey {
    color: rgb(120, 120, 120);
}

.darkred {
    color: rgb(170, 0, 81);
}

.smaller {
    font-size: 80%;
}

.larger {
    font-size: 110%;
}

.centered {
    text-align: center;
}

.leftalign {
    text-align: left;
}

.rightalign {
    text-align: right;
}

.leftcaption {
    line-height: 1.2em;
    margin: 1.33em 1em;
    text-align: justify;
    vertical-align: top;
}

/*
    The "question" class is used on the Quiz page to label the answers "a, b, c".
    The "rfloat" class is used to put pictures onto the page with the captions
    on the left.
*/

.question {
}

.question ol {
    list-style-type: lower-alpha;
}

img.rfloat {
    float: right;
    margin: 0 0 10px 20px;
}

.lfloat {
    float: left;
}

.webdesigner {
    color: rgb(192, 192, 192);
    font-family: Candara, Sans-Serif;
    margin: 5px 0px;
    padding: 0px;
    font-size: 10pt;
    float: right;

}

.webdesigner a {
    color: rgb(192, 192, 192);
    font-family: Candara, Sans-Serif;
    font-weight: bold;
    text-decoration: none;
}

.webdesigner a:hover {
    color: rgb(255, 147, 198);
}

/*
    When printing, change the styles for elements
    that are clutter on the printed page.
*/

@media print {

#header, #footer, #menu, #topspacer {
    display: none
}

#pagecontent {
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

}