lexstar.css

/*
 * This is the Lexstar 7000 CSS file.  It does CSS-like things to the running
 * joke we have at Lexmark known as the Lexstar weather service.
 */

/**
 * No borders, no padding.  This will cover the entire screen.
 */
body
{
    margin:0px;
    border:0px;
    padding:0px;
    color:white;
    font-family:arial;
}

a:link,
a:visited
{
    color:white;
}

a:active
{   
    color:black;
}

/**
 * The main map just splashes down behind everything.  It needs to be focused
 * somewhere near Lexington.  JS will take care of exact centering.
 * 
 * Note that Lexington, KY is at 2404px, 690px on the original map image.  We
 * ultimately want the display to be centered somewhat west of that so we can
 * see when storm systems are coming.  Of course, the window size will need to
 * be accounted for when working out this centering, hence the JS requirement.
 */ 
#mainmap
{
    /* 
     * We know the exact size of the map image (actually, we sort of depend on
     * it staying this size).  The jQuery draggable property will be working on
     * this to move it around.
     */
    width:3400px;
    height:1600px;
/*    background-image:url("http://radar.weather.gov/Conus/Loop/NatLoop.gif"); */
    background-repeat:no-repeat;
    position:fixed;
    cursor:move;
}

.locationdot
{
    height:16px;
    width:16px;
    position:absolute;
    background-image:url("images/locationdot.png");
}

#dotlexington
{

    left:2396px;
    top:682px;
}

.locationtext
{
    background-color:rgba(0,0,255,0.85);
    position:absolute;
    font-size:8pt;
    color:white;
    font-weight:bold;
    left:20px;
    top:0px;
    padding:1px;
    transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
}

/**
 * The infocontainer box just sort of sits there.  JS buttons will reposition it
 * if it seems to be in the way of something.
 */
#infocontainer
{
    position:fixed;
    width:392px;
    background-color:rgba(0,0,255,0.85);
    left:16px;
    top:16px;
    right:auto;
    bottom:auto;
    border:0px;
    margin:0px;
    padding:4px;
    transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
}

#topbar,
#bottombar
{
    clear:both;
    padding:4px;
}

#mainarea
{
    border-top:2px solid white;
    border-bottom:2px solid white;
    padding:4px;
}

#mainblock
{
    min-height:151px;
}

/*
 * The status area shows up if we're loading data (or if there's an error).  It
 * needs really big ol' text.  Big!  BIG!
 */
#statusarea
{
    font-size:xx-large;
    text-align:center;
    font-weight:bold;
}

/*
 * The conditions should be hidden until we get data in.  Likewise, the status
 * will be hidden after we get data in.
 */
.datapage
{
    display:none;
}

#cityname
{
    text-align:left;
    font-size:large;
    font-weight:bold;
    vertical-align:middle;
}

#timeaccessed
{
    text-align:right;
    font-size:small;
    font-style:italic;
    vertical-align:middle;
}

#leftside
{
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    padding:16px;
    max-width:112px;
}
#rightside
{
    display:inline-block;
    text-align:left;
    vertical-align:middle;
    padding:16px;
    max-width:200px;
}

#forecast
{
    display:inline-block;
    vertical-align:middle;
    padding:8px;
}

.forecastblock
{
    width:80px;
    display:inline-block;
    margin:4px;
    text-align:center;
    vertical-align:top;
}

.conditionimage
{
    display:inline-block;
    width:48px;
    height:48px;
    margin:4px;
    background-repeat:no-repeat;
}

.conditiondata
{
    font-weight:bold;
}

.forecasttemperature
{
    font-size:smaller;
}

.forecaststring
{
    text-transform:capitalize;
}

.conditionblock
{
    padding-top:4px;
    padding-bottom:4px;
}

#conditiontext
{
    font-size:larger;
}

#conditionwindgust
{
    font-size:smaller;
    text-indent:16px;
}

#optionbuttons
{
    text-align:right;
    border-top: 2px solid white;
}

.optionbutton
{
    background-color:rgb(0,0,176);
    display:inline-block;
    color:white;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    width:32px;
    height:32px;
    margin:4px 4px 0px 4px;
    border-width:1px;
}

.forecasttoggle
{
    font-size:16px;
    width:auto;
}

#celsiustoggle
{
    padding:4px;
}

#centerbutton
{
    background-image:url("images/centermap.png");
}

#creditlink
{
    font-size:smaller;
    font-style:italic;
    text-align:right;
}