@import "reset.css"; /* set default styling across browsers */

/* -------------------------------------------------------------- 
   layout -- box sizes, position, backgrounds
-------------------------------------------------------------- */
body {
    background: #f0eeef url('../images/design/page-bg.jpg') repeat-x scroll top left;
    text-align: center;
}
#page {
    width: 962px;
    margin: 0 auto;
    text-align: left;
}
#header {
    background: url('../images/design/header.jpg') no-repeat scroll top left;
    height: 170px;
    position: relative;
}
#content-container-outer {
    background: url('../images/design/content-bg.png') repeat-y scroll top left;
}
#content-container-inner {
    width: 928px;
    margin: 0 17px;
    background: url('../images/design/content-bg.jpg') repeat-y scroll top left;
}
#content {
    background: url('../images/design/content.jpg') no-repeat scroll top left;
    overflow: auto;
    padding-bottom: 12px;
}
#main-column {
    border: 0px solid white;
    margin: 18px 9px 0px 18px;
    padding: 18px;
    background: url('../images/design/white-bg-50.png') repeat-x scroll top left;
    float: left;
    width: 589px;
}
#side-column {
    float: right;
    margin: 18px 18px 0px 9px;
}
#signup, #calendar {
    background: url('../images/design/sidebar-bg.png') repeat-x scroll top left;
    width: 206px;
    border: 12px solid #fff;
}
#calendar {
    padding: 9px;
    margin: 0 0 18px 0;
}
#signup {
    padding: 0 9px;
    margin: 18px 0 0 0;
}
#footer {
    min-height: 20px;
    height: auto !important; /* clever hack for IE min-height */
    height: 20px;
    padding-top: 20px;
    background: url('../images/design/footer.png') no-repeat scroll top left;
}
.navskip {
    position: absolute;
    top: -10px;
    bottom: -10px;
}
.hidden, .cache-image {
    display: none;
}
.float-left {
    float: left;
    margin: 0px 9px 9px 0px;
}
.float-right {
    float: right;
    margin: 0px 0px 9px 9px;
}

/* -------------------------------------------------------------- 
   home -- styles just for the homepage
-------------------------------------------------------------- */
#home #content {
    background: url('../images/design/homepage-content.jpg') no-repeat scroll top left;
    min-height: 511px;
    height: auto !important; /* clever hack for IE min-height */
    height: 511px;
    padding-bottom: 0px;
}
#home #side-column {
    margin: 18px 18px 0 0;
}
#home #signup, #home #calendar {
    margin: 8px 0px;
}


/* -------------------------------------------------------------- 
   navigation -- styles for the top menu bar
-------------------------------------------------------------- */
#navigation {
    width: 962px;
    height: 56px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: url('../images/design/navigation.jpg') no-repeat scroll top left;
    text-align: right;
}
#navigation a { 
    float: left; 
}
#nav-artists {
    margin-left: 396px;
}
#nav-home {
    position: absolute;
    left: 44px;
    top: -80px;
}
#nav-shop {
    position: absolute;
    right: 5px;
    top: -114px;
}
#nav-shop img {
    background: url('../images/design/shop.jpg') no-repeat scroll top left;
}

/* mouse-over styles uses the sprite technique */
#nav-shop:hover img {
    background: url('../images/design/shop-hover.jpg') no-repeat scroll top left;
}
#nav-artists:hover img {
    background: url('../images/design/navigation-hover.jpg') no-repeat scroll -396px 0px;
}
#nav-shows:hover img {
    background: url('../images/design/navigation-hover.jpg') no-repeat scroll -506px 0px;
}
#nav-gallery:hover img {
    background: url('../images/design/navigation-hover.jpg') no-repeat scroll -606px 0px;
}
#nav-blog:hover img {
    background: url('../images/design/navigation-hover.jpg') no-repeat scroll -726px 0px;
}
#nav-remixlounge:hover img {
    background: url('../images/design/navigation-hover.jpg') no-repeat scroll -816px 0px;
}


/* -------------------------------------------------------------- 
   forms -- input boxes, text boxes, etc
-------------------------------------------------------------- */
form {
}
input {
    border: 1px solid #999;
    font-size: 15px;
    color: #666;
    padding: 4px 9px 2px 9px;
    background: #fff url('../images/design/form-field-bg.jpg') repeat-x scroll 0px -4px;
    margin-bottom: 6px;
}
input[type="submit"] {
    background: #fff url('../images/design/form-button-bg.jpg') repeat-x scroll top left;
    color: #666;
    font-weight: bold;
    padding: 0px;
}


/* -------------------------------------------------------------- 
   typography -- fonts, sizes, and text spacings
-------------------------------------------------------------- */

html, body {
	font-family: Helvetica, sans-serif;
    font-size: 14px;
    line-height: 144%;
    color: #333;
}
#footer, #footer a {
    color: #633C3C;
    text-align: center;
}
h1, h2 { 
    font-size: 18px; 
    line-height: 36px;
}