/*---------------------------
            RESET 
----------------------------*/


/*removing margins and padding*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, code, form, p, blockquote, fieldset, input { 
    margin: 0; 
    padding: 0; 
}

/*removing list bullets and numbers*/
ul, ol { 
    list-style: none;
    list-style-image: none;
}

/*replacing numbers with a background image*/
ol li {
    background: url('../images/diamond-bullet.gif') no-repeat left top;
    padding-left: 15px;
    margin-bottom: 7px;
}

/*removing link underlines*/
a, a:visited, a:hover { 
    text-decoration: none; 
}

/*removing image borders*/
img { 
    border: none; 
}

/*removing dotted outlines*/
*:focus {
    outline: none;
}


/*---------------------------
        OVERALL STYLES
----------------------------*/


/*forcing sidebar in non-IE*/
html { 
    overflow-y: scroll; 
}

/*font and page background*/
body {
    font: 16px/120% Garamond, "Hoefler Text", Palatino, "Palatino Linotype", sans-serif;
    color: #6A6A6A;
    background: url('../images/grey.jpg');
}

/*display for the entire site div with center, border and side gradient (plus drop shadow for compatible browswers)*/
#container {
    width: 955px;
    margin-right: auto;
    margin-left: auto;
    background: url('../images/piano-gradient.jpg') repeat-y #fff -8px;
    -webkit-box-shadow: 2px 3px 5px #666;
    -moz-box-shadow: 2px 3px 5px #666;
    box-shadow: 2px 3px 5px #666; 
}

/*paragraph margins*/
p {
    margin: 10px 0;
}

/*testimonials*/
blockquote {
    line-height: 120%;
    font-size: 11px;
    margin: 20px 8px 0 340px;
    padding: 2px 10px 4px 12px;
    font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif;
    border-left: 2px solid #A36100;
}


/*---------------------------
        LINK COLORS
----------------------------*/


/*default yellow link color*/
a, a:visited {
    color: #A36100;
}

/*gray link color (navigation and footer)*/
#navigation a, #navigation a:visited, #footer a, #footer a:visited {
    color: #6A6A6A;
}

/*white h1 link color (website title)*/
h1 a, h1 a:hover, h1 a:visited {
    color: #fff;   
}

a:hover {
    text-decoration: underline;
}

/*default purple hover (all but title)*/
#navigation a:hover, #footer a:hover {
    color: #A1207C;
    text-decoration: none;
}


/*---------------------------
        HEADER AREA
----------------------------*/


/*header area*/
#header {
    background: #720057;
    height: 85px;
    padding: 80px 0 35px 390px;
}

/*hidden website title*/
h1 {
    position: relative;
    left: -9999px;
}

/*site tagline*/
#header h2 {
    color: #fff;
    margin-left: 7px;
    font-size: 18.5px;
}


/*---------------------------
        LEFT COLUMN
----------------------------*/


/*left column (containing navigation)*/
#leftcol {
    position: absolute;
    width: 185px;
    margin: 30px 0 0 30px;
    text-align: center;
}

/*spacing left column images*/
#leftcol img {
    margin-bottom: 15px;
}

/*Sonja Wilson Music heading*/
h2 {
    font-size: 17px;
    font-weight: normal;
}


/*---------------------------
        NAVIGATION
----------------------------*/


/*ul spacing*/
#navigation {
    margin-top: 19px;
}

/*li borders, padding, no background*/
#navigation li {
    width: 145px;
    border-bottom: 1px solid #7A7A7A;
    background: none;
    padding: 20px 0;
    margin-left: 20px;
}

/*top li border line*/
#navigation #first {
    border-top: 1px solid #7A7A7A;
}

/*non-selected navigation (left margin instead of border)*/
#navigation a, #navigation a:visited {
    padding-left: 5px;
    margin-left: 4px;
}

/*selected navigation (left border instead of margin)*/
#navigation a.selected {
    margin-left: 0;
    border-left: 4px solid #A1207C;
    color: #A1207C;
}


/*---------------------------
        MAIN CONTENT
----------------------------*/


/*overall content div padding*/
#content {
    padding: 0 30px 30px 240px;
}

/*banner spacing*/
.banner {
    margin: 30px 0 0 0;
}

/*look of caption divs*/
.caption {
    text-align: center;
}

/*actual caption*/
.caption p {
    margin-top: 2px;
}

/*captioned image*/
.caption img {
    background-color: #aaa;
    padding: 4px;
    border: 1px solid #888;
}

/*lower columns class*/
.column {
    padding: 0 25px 0 0;
    text-align: justify;
}

/*page sub-headings*/
h3 {
    font-size: 16px;
    margin: 10px 0;
}

/*content ul bullets and position*/
#content ul {
    list-style: circle;
    margin-left: 15px;
}

/*left column of text*/
#lefttext {
    float: left;
    width: 300px;
    margin-right: 5px;
}

/*keep right main content ul on the right*/
#righttext ul {
    padding-left: 330px;
}

/*extra spacing for right column images*/
#righttext img {
    margin: 10px 0 0 0;
}

/*Google map*/
#google {
    margin: 15px 0 30px 0;
    border: 1px solid #aaa;
}


/*---------------------------
        CONTACT FORM
----------------------------*/


/*shift right main content contact ul more to the left*/
#righttext #contactform {
    padding-left: 315px;
}

/*remove bullets, add spacing to contact form*/
#contactform li {
    list-style: none;
    margin-bottom: 10px;
}

/*labels on separate lines*/
label {
    display: block;
    margin-bottom: 2px;
}

/*required stars match purple hover*/
.required {
    color:#A1207C;
}

/*user input areas*/
input, textarea {
    font: 15px Garamond, "Hoefler Text", Palatino, "Palatino Linotype", sans-serif;
}

/*selected user input area*/
input:focus, textarea:focus {
    background: #eee;
}

/*set submit button size (for Opera)*/
#submit {
  width: 130px;
}


/*---------------------------
        FOOTER AREA
----------------------------*/


/*footer styles (size, spacing, right align, top border)*/
#footer {
    clear: both;
    width: 670px;
    text-align: right;
    margin: 0 0 0 240px;
    background: #fff;
    border-top: 2px dotted #A9A9A9;
}

/*footer navigation elements*/
h4 {
    font-size: 14px;
    font-weight: normal;
    padding: 10px 0 27px 0;
    letter-spacing: .5px;
}

/*lower nav selected items*/
#footer .lower-selected {
    color: #A1207C !important;
}