baseline.css/baseline_mint.css

/* 
    This is my baseline for creating websites. All pages MUST inherit
    from these styles in order to be thrown into production.
    You can expand them at will to, for example, create a color scheme,
    but these minimal rules must remain intact.

    This library is provided under the conditions of the GNU GPL.

    For more information, please visit http://www.gnu.org/licences

    THEME: mint.
*/

html {
    background: #DAE4DF;
    color: #475747;
}
/* 
 * Ok, so font choice is a hard one. 
 * It seems that Verdana is more readable at smaller sizes, but Trebuchet
 * seems a little more presentable at larger sizes.
 */
body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
}
h1, h2, h3 {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-weight: normal;
}
h1 {
    font-size: 2.5em;
}
h2 {
    font-size: 2em; 
}
h3 {
    font-size: 1.7em;
}
p, li, blockquote {
    line-height: 1.5em;
}
a, a:visited {
    color: #3EAB75;
    text-decoration: none;
}
a:hover {
    color: #30C67C;
    text-decoration: underline;
}
blockquote {
    font-size: 1.3em;
    width: 400px;
    font-style: italic;
    padding: 5px;
    margin: 0 auto;
}
.rightfloat {
    float: right;
    margin: 10px;
}
.leftfloat {
    float: left;
    margin: 10px;
}
img {
    border: 5px solid #888;
    display: block;
    margin: 5px 10px;
    border-radius: 4px;
}
form label {
    display: block;
    margin: 5px 0;
}
form {
    margin: 10px;
    padding: 10px;
    background: #cecece;
}
/* All the text inputs in HTML */
form input[type="text"], form input[type="password"],
form input[type="email"], form input[type="search"], form textarea {
    border: 1px solid #000;
    padding: 5px;
}
form input[type="text"]:focus, form input[type="password"]:focus,
form input[type="email"]:focus, form input[type="search"]:focus,
form textarea:focus {
    box-shadow: 0 0 2px 3px #009b28;
}
form input[type="button"], form input[type="submit"],
form button {
    padding: 7px;
    background: #aeaeae;
    margin: 5px;
    border: 1px solid #444;
    cursor: pointer;
}
form input[type="button"]:hover, form input[type="submit"]:hover,
form button:hover {
    background: #bfbfbf;
}
form input[type="button"]:active, form input[type="submit"]:active,
form button:active {
    background: #939393;
}
form input[type="button"].alt, form input[type="submit"].alt,
form button.alt {
    padding: 7px;
    background: #c82626;
    margin: 5px;
    color: #FFF;
    border: 1px solid #9d0909;
    cursor: pointer;
}
form input[type="button"].alt:hover, form input[type="submit"].alt:hover,
form button.alt:hover {
    background: #d94a4a;
}
form input[type="button"].alt:active, form input[type="submit"].alt:active,
form button.alt:active {
    background: #9d0909;
}
form textarea {
    height: 300px;
    width: 95%;
}
/* tables need love too */
table {
    border-spacing: 0;
    background: #FFF;
    border: 1px solid #888;
}
table thead {
    background: #555;
    color: #FFF;
}
table td, table th {
    border: 1px solid #888;
}
table tbody tr:nth-child(2n+1) {
    background: #CCC;
}
footer {
    background: #555;
    color: #FFF;
    text-align: center;
    font-size: 0.8em;
    margin: 0;
    padding: 20px;
}
/*Responsive design section*/
@media screen and (min-width: 900px) {
    body {
        width: 900px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 899px) {
    body {
        margin: 0 5%;
        font-size: 12pt;
    }
    form input:not([type="checkbox"],[type="radio"]), form textarea, 
    form button {
        width: 93%;
    }
    blockquote {
        width: 80%;
    }
    .rightfloat, .leftfloat, img {
        float: none;
        display: block;
        margin: 0 auto;
    }
    img {
        max-width: 92%;
    }
    /* REQUIRES WORK! Has to be scrollable in mobile devices... */
    table {
        width: 95%;
        overflow: scroll;
    }
    table td, table th {
        min-width: 150px;
    }
}