body {
    font-family: 'Oswald', Helvetica, sans-serif;
    font-weight: 300 ;
}

h1 {
    font-weight: 700 ;
    text-transform: uppercase;
    margin-top: 30px ;
    margin-left: 30px ;
    letter-spacing: 1px ;
}

h3 {
    font-weight: 400 ;
}

h4 {
    margin-top: 35px ;
    margin-bottom: -10px ;
}

/* first h4 in #demo should not have space above it */
#demo-0 h4 {
    margin-top: 0px ;
}

h4 a {
    -webkit-transition-property: color ;
    -webkit-transition-duration: .3s ;
    -webkit-transition-timing-function: ease ;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease ;
    color: #000 ;
}

h4 a:link, h4 a:visited {
    text-decoration: none;
    color: #000 ;
}

h4 a:hover {
    text-decoration: none;
    /*color: #dd0000 ;*/
}

#demos {
    margin-left: 30px ;
    padding-right: 15px ;
    border-right: 1px dotted #ccc ;
    width: 20% ;
    height: 800px ;
    float: left ;
    overflow: scroll;
}

#demos p {
    color: #777;
}

#demos p a {
    -webkit-transition-property: color ;
    -webkit-transition-duration: .3s ;
    -webkit-transition-timing-function: ease ;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease ;
    color: #777;
}

#demos p a:link, #demos p a:visited {
    text-decoration: none;
    color: #777;
}

#demos p a:hover {
    text-decoration: none;
    color: #000000;
}

/* turn the 'h4' and 'a' elements red */
#demos .demo_selected h4 a, #demos .demo_selected p a {
    color: #dd0000;
}

#demos .demo_note {
    /*border-top: 1px dotted #bbb;*/
    padding-top: 5px ;
    font-family: 'Old Standard TT', serif;
    font-size: 0.7em ;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4em;
}

/*
#demos .demo_selected {
    background-color: #cccccc ;
    border-left: 1px solid red ;
}
*/

/*
STEPS
*/

#steps {
    width: 20% ;
    border-right: 1px dotted #ccc ;
    height: 800px ;
    float: left ;
    overflow: scroll;
    padding-right: 15px ;
    /*background-color: red ;*/
    /*opacity: 0.2 ;*/
}

/*buggy: when the li is active, mousing off the link turns it orange; mousing over turns it gray*/
/*#steps ol li a.download:hover {*/
    /*color: orange;*/
/*}*/

#steps dl {
    counter-reset: counter ;
    line-height: 1.5em ;
}

#steps dl dt:before {
    content: counter(counter, decimal-leading-zero) "." ;
    counter-increment: counter;
    position: absolute;
    left: 30px;
    top: 0;
}

#steps dl dt {
    margin-bottom: 1em ;
    color: #777 ;
    font-size: 1em ;
    position: relative ;
    padding-left: 60px ;
}

#steps dl dt, #steps dl dt a {
    -webkit-transition-property: color ;
    -webkit-transition-duration: .3s ;
    -webkit-transition-timing-function: ease ;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease ;
    text-decoration: none;
}

#steps dl dt a:link, #steps ol li a:visited {
    color: #777;
}

#steps dl dt a:hover {
    color: #000000;
}

/* turn the selected li item red */
#steps dt.step_selected, #steps dt.step_selected a, #steps dt.step_selected a:link {
    color: #dd0000;
}
#steps dl dt a.download {
    /*opacity: 0;*/
    visibility: hidden;
}


#source_code {
    float: left;
    width: 54% ;
    height: 800px ;
    /*background-color: blue ;*/
    /*opacity: 0.2 ;*/
    overflow: scroll;
    /*padding-top: 20px ;*/
}

#spacer {
    clear: both ;
    height: 30px ;
}

#preview {
    clear: both ;
    width: 96% ;
    height: 800px ;
    background-color: green ;
    opacity: 0.2 ;
    margin-left: 30px ;
}

footer {
    border-top: 1px dotted #cccccc ;
    margin-top: 10px ;
    margin-left: 30px ;
    margin-right: 30px ;
    padding-top: 15px ;
    clear: both ;
}

footer a {
    color: #000 ;
    text-decoration: none ;
}

footer a:hover, footer a:focus {
    text-decoration: underline ;
}