/***************************************************************************
 * This file is a template allowing you to optionally modify CSS
 * settings relating to the radar animator. All classes are already defined
 * in the animator page and any definitions made below will override those
 * defaults. Specifying too much may detrimentally affect the appearance of
 * the animator!
 *
 * If you choose to use this file, place it in a relevant location
 * under your document root and append the full URL as a parameter 'css' to
 * the radar URL in your iframe's src attribute.
 **************************************************************************/

/* These settings affect the area around the animator and shouldn't
 * matter if your iframe is the correct size.
 */
body {
	background-color: #e8e8e8;
}

/* These settings affect the animator as a whole.
 */
div#twc_anim_radar {
        text-align: center;
        font-family: Verdana, Arial, sans-serif;
        font-size: xx-small;
}

/* Set the colour behind the map (for when the map is turned off).
 */
div#twc_anim_radar div#images {
        background-color: gray;
}

/* Set the colour/font for the control panel as a whole.
 */
div#twc_anim_radar div#controlpanel {
        background-color: #BBBBAA;
}

/* Set the colour/font for the top quater of the control panel - the heading
 * and timestamp.
 */
div#twc_anim_radar div#controlpanel div#description {
        border-bottom: 1px solid gray;
        font-size: 1.2em;
        font-weight: bold;
}

/* Set the colour/font for the heading specifically.
 */
div#twc_anim_radar div#controlpanel div#description div#heading {
}

/* Set the colour/font for the timestamp specifically.
 */
div#twc_anim_radar div#controlpanel div#description div#timestamp {
}

/* Set the colour/font for the zoom buttons panel specifically.
 */
div#twc_anim_radar div#controlpanel div#description div#zoombuttons {
        float: left;
        width: 10%;
        text-align: right;
}

/* Set the appearence of the buttons.
 */
div#twc_anim_radar div#controlpanel div#description div#zoombuttons input {
        background-color: white;
        border: 1px solid gray;
}

/* Set the colour/font for the second quater of the control panel - the
 * layer options.
 */
div#twc_anim_radar div#controlpanel div#layers {
        text-align: left;
        text-transform: lowercase;
}

/* Set the colour/font for the third quater of the control panel - the
 * animation controls.
 */
div#twc_anim_radar div#controlpanel div#controls {
        text-transform: lowercase;
}

/* Set the appearence of the buttons.
 */
div#twc_anim_radar div#controlpanel div#controls div#buttons input {
        background-color: white;
        border: 1px solid gray;
        padding: 3px 5px 3px 5px;
}

/* Set the appearence of the drop-downs.
 */
div#twc_anim_radar div#controlpanel div#controls div#options select {
        font-size: xx-small;
}

/* Set the colour/font for the bottom quater of the control panel - the
 * footer.
 */
div#twc_anim_radar div#controlpanel div#footer {
}

/* Set the colour/font for the legend specifically.
 */
div#twc_anim_radar div#controlpanel div#footer div#legend {
}

/* Set the colour/font for the attribution link.
 */
div#twc_anim_radar div#controlpanel div#footer div#attribution a {
        color: black;
}

div#twc_anim_radar div#controlpanel div#footer div#attribution a:visited {
        color: black;
}