﻿/* Apply the canvas background */
#fountain  
{
    background-image: url(fountain_background.png); 
    background-color: #222;
}
input[type=text] { position: relative; width: 30px; }
fieldset { display: none; }
fieldset.show { display: block; }

canvas#fountain  
{
    -moz-box-shadow: 5px 5px 25px #444;
    -webkit-box-shadow: 5px 5px 25px #444;
    box-shadow: 5px 5px 25px #444; 
}


#fpsReport 
{
    width: 125px;
    float: right;
    text-align: right;
    background-color: #4A1DFF;
    color: #ddd;
    font-size: smaller;
    margin-right: 25px;
    border-top-left-radius: 20px;
    box-shadow: 5px 5px 25px #444; 
    /* IE10 */ 
    background-image: -ms-radial-gradient(right center, circle cover, #4A1DFF 20%, #93BEF6 100%);
    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(right center, circle cover, #4A1DFF 20%, #93BEF6 100%);
    -moz-box-shadow: 5px 5px 25px #444;
    /* Opera */ 
    background-image: -o-radial-gradient(right center, circle cover, #4A1DFF 20%, #93BEF6 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, right center, 0, right center, 899, color-stop(0.2, #4A1DFF), color-stop(1, #93BEF6));
    -webkit-box-shadow: 5px 5px 25px #444;
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(right center, circle cover, #4A1DFF 20%, #93BEF6 100%);
    /* Proposed W3C Markup */ 
    background-image: radial-gradient(right center, circle cover, #4A1DFF 20%, #93BEF6 100%);
}
#fpsReport span 
{
    font-size: 36pt;
}
progress { width: inherit; height: 5px; margin: 0; position: relative; display: block; }
progress.custom { background-color: Gray; 
                  /* IE10 */ 
                  background-image: -ms-linear-gradient(top, #2C2C2C 0%, #AEAEAE 100%);
                  /* Mozilla Firefox */ 
                  background-image: -moz-linear-gradient(top, #2C2C2C 0%, #AEAEAE 100%);
                  /* Opera */ 
                  background-image: -o-linear-gradient(top, #2C2C2C 0%, #AEAEAE 100%);
                  /* Proposed W3C Markup */ 
                  background-image: linear-gradient(top, #2C2C2C 0%, #AEAEAE 100%);
}
progress.custom div { background-color: Blue; width: 1px; height: 100%; 
    /* IE10 */ 
    background-image: -ms-linear-gradient(top, #4A1DFF 0%, #8BF2F6 50%, #4A1DFF 100%);
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #4A1DFF 0%, #8BF2F6 50%, #4A1DFF 100%);
    /* Opera */ 
    background-image: -o-linear-gradient(top, #4A1DFF 0%, #8BF2F6 50%, #4A1DFF 100%);
    /* Proposed W3C Markup */ 
    background-image: linear-gradient(top, #4A1DFF 0%, #8BF2F6 50%, #4A1DFF 100%);                      
}

.multicol 
{
    column-count: 3;
    -ms-hyphens: auto;
}

.multicol p 
{
    padding-bottom: 0.5em;
}

.multicol p::first-letter
{
    margin-left: 15px;
}

.multicol li
{
    list-style-position: inside;
}
