body {
    font-family: sans-serif;    /* This is the default font face for the site.
                                 * You can specify a font by name, such as
                                 * 'verdana', but it a good idea to include at
                                 * least one fall-back font, including a generic
                                 * font such as 'serif' or 'sans-serif'. You
                                 * specify fall-back fonts in the following
                                 * manner:
                                 * font-family: 'times new roman', verdana, serif;
                                 * You must put quotes around font names
                                 * containing spaces. */
    font-size: 11pt;
    color: rgb(0,0,0);
    background-color: rgb(255,255,255);
}

a {
    text-decoration: none;
    color: rgb(0,0,255);
    background-color: inherit;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: rgb(0,0,255);
    background-color: inherit;
}

h1 {
    font-size: 1.4em;
}

h2 {
    font-size: 1.2em;
}

h3 {
    font-size: 1.0em;
}

.invisible {
    display: none;
}

/*************/
/* The menu. */
/*************/

#navigationMenu {
    /* Basic prettiness. */
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    
    position: absolute;
}

#navigationMenu li {
    /* Basic prettiness. */
    width: 10em;    /* This is the width of each menu item. */
    border-width: 1px;  /* This is the width of the border of each menu item. */
    border-style: solid;
    border-color: rgb(255,255,255); /* This is the colour of the border of each
                                     * menu item when it is NOT being hovered
                                     * over.*/
    background-color: rgb(255,255,255); /* This is the background colour of the
                                         * top strip of each menu item when it
                                         * is NOT being hovered over. */
    color: rgb(0,0,0);
    text-align: center;
    
    /* Make the top-level list inline. */
    float: left;
}

#navigationMenu li:hover {
    border-color: rgb(0,0,0);   /* This is colour of the border of each menu
                                 * item when it IS being hovered over. */
    background-color: rgb(130,63,57); /* This is the background colour of the
                                       * top strip of each menu item when it is 
                                       * being hovered over. */
    color: rgb(0,0,0);
}

#navigationMenu li:hover a {
    color: rgb(255,255,255);    /* This is the color of a main section link when
                                 * it is being hovered over. */
    background-color: inherit;
}

#navigationMenu ul {
    /* Basic prettiness. */
    list-style-type: none;
    padding: 0;
    padding-top: 0.2em;
    margin: 0;
    margin-top: 0.2em;
    background-color: rgb(255,255,255); /* This is the background colour of each
                                         * sub-menu. If you change this value,
                                         * make sure to change the value of
                                         * border-color and background-color in
                                         * the '#navigationMenu LI:hover UL LI'
                                         * section. */
    color: inherit;
    
    /* The sub-list should not be visible at first. */
    display: none;
}

#navigationMenu li:hover ul a {
    color: rgb(0,0,255);
    background-color: inherit;
}

#navigationMenu li:hover ul {
    /* The sub-list should appear when the appropriate top-level list item is
     * hovered over. */
    display: block;
}

#navigationMenu ul li {
    /* Basic prettiness. */
    padding: 0;
    margin: 0;
    border-width: 0;
    
    /* Without this, the sub-list items extend to the right a little bit beyond
       the top-level list whichs cuts two holes in the border. */
    width: 99%;
    
    /* Only the top-level list should be inline. */
    float: none;
}

#navigationMenu li:hover ul li {
    background-color: rgb(255,255,255); /* Make sure this value is the same as
                                         * the value of background-color in the
                                         * '#navigationMenu UL' section. */
}

/***********************/
/* Resources container */
/***********************/

#resourcesContainer {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0;
    padding-right: 2%;
    padding-top: 3em;
}

#resourcesList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.resourceTitle {
    font-weight: bold;
}

.resourceNews {
    padding-left: 0.5em;
}

/******************/
/* Main container */
/******************/

#mainContainer {
    float: left;
    width: 56%;
    padding-top: 3em;
}

/******************************************/
/* The announcement bar on the main page. */
/******************************************/
#announcementContainer {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
    margin-bottom: 1em;
}

/******************/
/* News container */
/******************/

#newsContainer {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.newsTitle {
    font-weight: bold;
}

.news {
    padding-left: 0.5em;
}

/*****************************/
/* Urgently needed container */
/*****************************/

#urgentNeedContainer {
    float: left;
    width: 20%;
    padding-left: 2%;
    padding-top: 1em;
}

/*****************************/
/* Myths and facts container */
/*****************************/

#mythsAndFactsContainer {
    float: left;
    width: 20%;
    padding-left: 2%;
    padding-top: 3em;
}

/******************/
/* Resources page */
/******************/

.leftColumn {
    width: 48%;
    float: left;
}

.rightColumn {
    width: 48%;
    float: right;
}

.resourceTitle {
    font-weight: bold;
}

/********************/
/* Footer container */
/********************/

#footerContainer {
    clear: both;
    text-align: center;
    font-size: 0.8em;
}