Style sheet formatting cleanup

[mckoss]

I prefer a CSS style that wraps long styles into nested blocks for readability. It's good to have short styles on one line, as you are doing, but you have some long ones that are wrapped in such a way that it is hard for me to read.

Here's a sample (again, don't use verbatim, as this is not working):

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    background: none;
}

h1 { margin: 5px 0 0 0; }
hr { border: 2px solid black; }
img { border: 0; }
div { padding:0; margin:0; }
p { margin: 0 0 5px 0; }
div.page { width: 980px; margin: auto; }
div.warning { display: none; }

textarea {
    font-family: "Courier New", Courier, monospace;
    width: 100%;
    height: 200px;
}

div.box {
    display: inline-block;
    text-transform: uppercase;
    margin: 3px 2px;
    font-weight: bold;
    -moz-box-shadow: 2px 4px 3px #888;
    -webkit-box-shadow: 2px 4px 3px #888;
    box-shadow: 2px 4px 3px #888;
}

#display {
    background-color: #333;
    display:inline-block;
    border-color: #333;
    border-style: solid;
    border-width: 2px 5px 4px 2px;
}

.rdiv { margin:0; padding:0; text-align: center; vertical-align: middle; }

@-webkit-keyframes spin {
    0% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotateX(0deg) skew(0deg, 0deg);
        background-color: #555;
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotateX(90deg) skew(10deg, 0deg);
        background-color: #777;
        opacity: 0.7;

    }
}

@-webkit-keyframes spin2 {
    0% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(90deg) skew(-5deg, 0deg);
        background-color: #777;
        opacity: 0.7;
    }
    100% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(0deg) skew(0deg, 0deg);
        background-color: #555;
        opacity: 1;
    }
}

.box span { display:inline-block }
.scale { -webkit-animation: spin 0.08s infinite linear; }
.scale2 { -webkit-animation: spin2 0.08s infinite linear; }

.dv {
    background-color: #555;
    color: #FFF;
    border:1px solid #333;
    display:block;
    overflow:hidden;
    text-align: center;
}

.dv > div > span { width:100%; vertical-align:middle }
.dv > div { height:200%; }
.down > div { position:relative; top:-100%; }
.spn { position:absolute; }
.spn.top { z-index:20 }
.spn.top > .dv { z-index:15 }
.spn.bottom { z-index:10 }
.spn.bottom > .dv { z-index:5 }

#nav { margin: 2px 0; }

#nav a {
    display: inline-block;
    background-color: #333;
    padding: 3px;
    margin: 2px 0;
    text-decoration: none;
    color: white;
    border:1px solid #555;
}

#nav a:hover {
    border:1px solid #AAA;
    color: #CCC;
}

[grg021]

CSS is now clean.

[mckoss]

good