/**************************************************************************************************************************************
   A Cascading Style Sheet (CSS) for use with the Central Queensland Seismology Resaerch Group (CQSRG) Seismic Event Catalogue
   web pages. This CSS is used to manipulate the look and feel of the table used to display the seismic event catalogue.
**************************************************************************************************************************************/

/* 
 *  This uses the CSS basic ID selector. There can only be one element in the HTML page that has this ID.
 *  In this particular case it is used to identify the Seismic catalogue table element.
 */
#seiscat
{
   font-family: "Trebuchet MS", 
                Arial, 
                Helvetica, 
                sans-serif;     /* Give text a matter-of-fact look with no fancy stuff. */
   width: 100%;                  /* Spread the table across 100% of the page width to leave room for a sidebar later. */
   border-collapse: collapse;   /* Collapse the table and table cell borders down to a single artifact. */
}                               /* By default the table and table cell borders are separate artifacts. */

/* 
 * This is an example of the CSS descendant selector combinator; used here to select multiple elements. 
 * It selects all td and th elements within the table that has the #seiscat ID.   
 * It applies some initial attributes to all td and th elements that are within Seismic Catalogue table.
 */
#seiscat td, #seiscat th 
{
   color: #000000;            /* Use black text. */
   font-size: 0.65em;         /* Reduce the text size to 65% of one em. */
   border: 1px solid #8D1919; /*  Use a solid, single pixel border with a darkish maroon colour. */
   padding: 3px 7px 2px 7px;  /* Padding for top, right, bottom, left - in that order. */
}

/*
 * This is an example of the CSS descendant selector combinator; used here to select a single element. 
 * Refine the look of all th elements that are within Seismic Catalogue table (it overrides the previously applied style).
*/
#seiscat th
{
   color: #ffffff;            /* Use white text. */
   font-size: 1.1em;          /* Increase the text size for the headings. */
   text-align: center;        /* The th text is centred by default - just making it explicite. */
   padding-top: 5px;          /* Increase the top padding a bit. */
   padding-bottom: 4px;       /* Increase the top padding a bit less than the top. */
   background-color: #CC9999; /* A dark maroon, but not too dark. */
}

/*
 * This syntax is tricky. It is an example of nested CSS descendant selector combinator. Read it from right to left.
 * It selects all td elements that are within a tr element of class alt, that is within the Seismic Catalogue table.
*/
#seiscat tr.alt td 
{
   background-color: #E6CCCC;  /* Add a light maroon background to every alternate table row within the Seismic Catalogue table. */
}

.eventTypeFieldLabel
{
    text-align: right;
}