* {
    font-family: Rockwell, Helvetica;
}
html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
}
header, footer, section {
    display: block;
}

header {
    padding: 20px 0 10px 0;
}
    header h1 {
        text-shadow: 1px 1px 2px #999;
        font-size: 40pt;
        text-align: center;
        margin: 0;
    }
    header h2 {
        text-shadow: 1px 1px 2px #999;
        font-size: 15pt;
        font-weight: normal;
        text-align: center;
        margin: 0;
    }
    header p {
        background-color: #a00;
        overflow: hidden;
        position: absolute;
        left: -3.2em;
        top: 1.8em;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -moz-box-shadow: 0 1px 7px #888;
        -webkit-box-shadow: 0 1px 7px #888;
        box-shadow: 0 1px 7px #888;
    }
    header p.fr {
        left: -3.6em;
        top: 2.4em;
    }
    header a {
        border: 1px solid #f99;
        color: #fff;
        display: block;
        margin: 1px 0;
        padding: .5em 3em;
        text-align: center;
        text-decoration: none;
        text-shadow: 1px 1px 3px #000;
    }
    header p:hover {
        background-color: #f33;
    }

#downloads {
    text-align: center;
    margin: 30px 0 50px 0;
}
    #downloads h1 {
        display: none;
    }
    #downloads ul, #downloads li {
        display: inline;
        margin: 0;
        padding: 0;
    }
    #downloads a {
        text-shadow: #D2D2D2 0px 1px 1px;
        color: #333;
        text-decoration: none;
        padding: 10px 20px;
        margin: 0 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #ffb76b;
        background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 );
        -webkit-box-shadow: 1px 1px 5px #666;
        -moz-box-shadow: 1px 1px 5px #666;
        box-shadow: 1px 1px 5px #666;
    }
    #downloads a:hover {
        color: #000;
        background: #ffc77b;
        background: -moz-linear-gradient(top, #ffc77b 0%, #ffb74d 50%, #ff8c10 51%, #ff8f14 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc77b), color-stop(50%,#ffb74d), color-stop(51%,#ff8c10), color-stop(100%,#ff8f14));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc77b', endColorstr='#ff8f14',GradientType=0 );
    }
    #downloads a:active {
        color: #000;
        background: #ffa75b;
        background: -moz-linear-gradient(top, #ffa75b 0%, #ff972d 50%, #ff6c00 51%, #ff6f00 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa75b), color-stop(50%,#ff972d), color-stop(51%,#ff6c00), color-stop(100%,#ff6f00));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa75b', endColorstr='#ff6f00',GradientType=0 );
    }



#demo {
    width: 780px;
    margin: 0 auto 20px auto;
}
    #demo h1 {
        border-bottom: solid 1px #333;
    }
    #demo ul {
        margin: 0;
        padding: 0;
    }
    #demo li {
        display: inline;
        margin-right: 2em;
    }
    #demo a {
        color: #000;
    }


#features {
    width: 800px;
    margin: 0 auto;
}
    #features h1 {
        display: none;
    }

.feature {
    float: left;
    width: 340px;
    margin: 10px;
    padding: 15px 20px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #45484d;
    background: -moz-linear-gradient(top, #45484d 0%, #333333 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#333333));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#333333',GradientType=0 );
    color: #ddd;
}
    #features .feature h1 {
        display: block;
        font-family: Rockwell, Helvetica;
        margin: 0 0 .5em 0;
        font-size: 14pt;
    }
    .feature p {
        font-family: Rockwell, Helvetica;
        font-size: 12pt;
        margin: 0;
    }

a {
    color: #ddd;
}
a:hover {
    color: #fff;
}
a:active {
    color: #ddd;
}

.feature:before {
    content: " ";
    display: block;
    float: left;
    background-color: #fff;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #000;
    -moz-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
}
#what:before {
    background-image: url(images/textile.png);
}
#highlight:before {
    background-image: url(images/highlight.png);
}
#database:before {
    background-image: url(images/database.png);
}
#auth:before {
    background-image: url(images/auth.png);
}
#search:before {
    background-image: url(images/search.png);
}
#toc:before {
    background-image: url(images/toc.png);
}

footer {
    clear: both;
    padding: 1em;
    text-align: center;
    color: #444;
}
footer a {
    color: #444;
}
footer a:hover {
    color: #000;
}