style.css

/*
 *      Filename: style.css
 *      Date:     2011-06-12
 *      author:   Mathieu Charron <mathieu@hyberia.ca>
 *      Project:  G-Anime Cargo
 *      desc:     File Uploader in HTML5
 *
 *      Copyright 2011 Hyberia Inc.
 *
 *      Redistribution and use in source and binary forms, with or without
 *      modification, are permitted provided that the following conditions are
 *      met:
 *
 *      * Redistributions of source code must retain the above copyright
 *        notice, this list of conditions and the following disclaimer.
 *      * Redistributions in binary form must reproduce the above
 *        copyright notice, this list of conditions and the following disclaimer
 *        in the documentation and/or other materials provided with the
 *        distribution.
 *      * Neither the name of the Hyberia Inc. nor the names of its
 *        contributors may be used to endorse or promote products derived from
 *        this software without specific prior written permission.
 *
 *      THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 *      "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 *      LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 *      A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 *      OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 *      SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 *      LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 *      DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 *      THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *      (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 *      OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 */

*:focus { outline: none; }
body {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12pt;
}
.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both; }

#file { width: 378px; }

#progressIndicator { font-size: 10pt; }

#fileInfo {
    font-size: 10pt;
    font-style: italic;
    color: #aaa;
    margin-top: 10px;
}
#progressBar {
    height: 14px;
    border: 1px solid #cccccc;
    display: none;
    background-image: -moz-linear-gradient(top, #66cc00, #4b9500);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
}
#uploadForm {
    padding: 20px;
    border: 1px solid #cccccc;
    -webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
    width: 400px;
    margin: 20px auto;
    background-image: -moz-linear-gradient(top, #ffffff,#f2f2f2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
}
input {
    border:1px solid #ccc;
    font-size: 13pt;
    padding: 5px 10px 5px 10px;
}
#fileInfo {
    font-size: 10pt;
    font-style: italic;
    color: #aaa;
    margin: 10px;
}
#uploadResponse {
    margin-top: 10px;
    padding: 20px;
    overflow: hidden;
    display: none;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    /* DEBUG
    width: 95%;
    position: absolute;
    top: 0px;
    left: 10px; */
}
.mehResponse {
    background-image: -moz-linear-gradient(top, #ff9900, #c77800);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#c77800));
}
.badResponse {
    background-image: -moz-linear-gradient(top, #FF2200, #C71B00);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FF2200), to(#C71B00));
}
.goodResponse {
    background-image: -moz-linear-gradient(top, #4BFF00, #3BC700);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4BFF00), to(#3BC700));
}