:root {
    --content-width: 800px;
    --right-content-width: 575px;
    -webkit-text-size-adjust:none;
}

body {
    background: white;
    margin: 0 auto;
    padding: 10px;
    font: small Verdana, Sans-serif;
    font-size: 82%;
    color: black;
}

a {
    color: #36a;
}

a img {
    border-width: 0;
}

h1, h2, h3, ul, li, form {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}


/* =Page
----------------------------------------------- */
body {
    background: #666 url("../img/bg-body-blue.gif") repeat 0 0;
    color: #fff;
}

.page {
    width: 824px; /*this is the width + 2*padding + left border + right border*/
    margin: 0 auto;
}

.page2 {
    background: white;
    float: left;
    width: var(--content-width);
    padding: 10px;
    border: solid #444;
    border-width: 1px 3px 3px 1px;
    font-size: 1.0em;
    line-height: 1.5em;
    color: black;
    margin: 0 auto;
}


/* =Headings
----------------------------------------------- */
h2 {
    font-size: 1.5em;
}

h3 {
    background: black;
    margin: 0;
    font: bold 1.5em/1.3em Helvetica, Arial, Sans-serif;
    padding: 4px 9px 3px;
    border-bottom: 1px solid #9c0;
    text-transform: uppercase;
    color: yellow;
}


/* =Lists
----------------------------------------------- */
ul {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

li {
    background: none;
    margin: 0;
    padding: 0 0 0 15px;
}

.pointed-list ul, .pointed-list li {
    list-style-type: circle;
    padding-inline-start: 0;
    margin-left: 10px;
}

.numbered-list li, .numbered-list ol {
    background: none;
    padding-inline-start: 0;
    margin-left: 15px;
    list-style: decimal;
}

/* =Misc
----------------------------------------------- */
p {
    margin: 0 0 .75em;
}

p.btn {
    background: url("../img/bg-btn.gif") repeat 0 0;
    margin: 0 0 .5em;
    padding: 15px 5px;
}

p.btn img {
    display: block;
    margin: 0 auto;
}

.unit {
    white-space: nowrap;
}


/* =Header
----------------------------------------------- */
.header {
    background: black;
    float: left;
    width: var(--content-width);
    height: 60px;
    padding: 10px 0 0;
    font-size: 2.0em;
    font-family: "Times New Roman", Times, serif;
    color: lime;
}

.logo {
    float: left;
    display: block;
    font: bold 2.0em/1.3em "Times New Roman", Times, serif;
    width: 400px;
    height: 60px;
    text-align: center;
}

.logo2 a, .logo2 img {
    float: right;
    margin-bottom: -2px;
    margin-right: 10px;
    text-align: right;
    font: small Verdana, Sans-serif;
    color: #FFFF00
}

.banner {
    padding-bottom: -10px
}

.banner img {
    display: block;
    float: left;
    width: var(--content-width);
}

/* =Nav
----------------------------------------------- */
.nav {
    background: black url("../img/bg-nav.jpg") repeat-x 0 0;
    float: left;
    width: var(--content-width);
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #135;
    list-style: none;
    font-size: 0.9em;
}

.nav li {
    background: none;
    display: inline;
    padding: 0;
}

.nav li a, .nav li strong {
    float: left;
    width: auto;
    padding: 5px 7px 3px;
    border-left: 1px solid #579;
    border-right: 1px solid #135;
    color: #def;
    text-transform: uppercase;
    text-decoration: none;
}

.nav li strong {
    background: #900;
    color: #fff;
}

.nav li a strong {
    padding: 0;
    border-width: 0;
}

.nav li a:hover {
    background: #900;
    border-left-color: #246;
    color: #cf0;
}


/* =H1
----------------------------------------------- */
h1 {
    background-color: black;
    float: left;
    width: var(--content-width);
    height: 104px;
    margin: 0 0 10px;
    border-bottom: 6px solid black;
}

h1 img {
    display: block;
}


/* =Content
----------------------------------------------- */
.plain-blue-text {
    color: #003399;
    font-size: 1.25em;
}

.small-underlined-heading {
    font-size: 1.0em;
    text-decoration: underline;
    font-weight: bold;
}

.bold-body {
    float: left;
    font-weight: bold;
    display: block;
}

.large-bold-body {
    background: white;
    font: small Verdana, Sans-serif;
    font-size: 1.5em;
    color: black;
    font-weight: bold;
}

.bold-body img {
    padding-bottom: 10px;
}

.bold-body-centered {
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    display: block;
}

.content {
    float: left;
    padding-top: 10px;
    width: var(--content-width);
}

.right-image {
    float: right;
    display: block;
    padding-left: 10px;
    padding-bottom: 10px;
}

.content img {
    float: left;
}

.content-group {
    float: right;
    width: var(--right-content-width);
}

.content-main {
    float: left;
    width: var(--right-content-width);
}

.padded-img img {
    padding-top: 5px;
    padding-bottom: 10px;
}

.content-extra {
    float: right;
    width: 190px;
}

.content-sub {
    float: left;
    width: 200px;
    font: 1.2em/1.3em Helvetica, Arial, Sans-serif;
    padding-top: 5px;
}


/* =MainCol Content
----------------------------------------------- */
h2 {
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font: bold 2.2em/1.3em Helvetica, Arial, Sans-serif;
    color: #233;
}

.h2-centered {
    margin: 0 auto;
    text-align: center;
    display: block;
    font: bold 2.2em/1.3em Helvetica, Arial, Sans-serif;
    color: #233;
}

/* =Featured Artists and Friends
----------------------------------------------- */
ul.featured {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul.featured li {
    float: left;
    width: 100%;
    margin: 5px 0 0;
    padding: 8px 0;
    line-height: 1.5em;
    border-top: 1px solid #cf6;
}

.coverart {
    float: left;
    width: 150px;
    padding: 0 8px;
}

.coverart img {
    display: block;
    border-width: 2px;
    border-color: black;
}

.propname, .desc {
    margin: 0 0 0 81px;
}

.propname {
    display: block;
    color: #000;
}

/* =Footer
----------------------------------------------- */
.footer {
    float: left;
    width: 100%;
    border-top: 6px solid #999999;
}

.footer hr {
    display: none;
}

.footer p {
    background: black;
    margin: 0;
    padding: 10px;
    text-align: center;
    color: #fff;
}


/* =Subnav
----------------------------------------------- */
.subnav h3 {
    background: black;
    margin: 0;
    padding: 4px 9px 3px;
    border-bottom: 1px solid #9c0;
    text-transform: uppercase;
    color: yellow;
}

.subnav ul {
    padding-top: 5px;
}

.subnav li {
    background: none;
    width: 190px;
    padding: 0;
}

.subnav li a {
    background: url("../img/bullet.gif") no-repeat 10px 50%;
    display: block;
    width: 158px;
    padding: 3px 10px 3px 21px;
    text-decoration: none;
    color: #357;
}

.subnav li a:hover {
    background-color: #FFFF00;
}

.subnav p {
    padding: 0 10px;
    color: #677;
}

.subnav img {
    float: left;
    display: block;
    margin-bottom: 2px;
}

.delete_button {
    float: right;
    background-color: transparent;
    border: none;
    color: #990000;
    padding: 0px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2em;
}

.delete_button:hover {
    color: red;
}

.move_button {
    float: right;
    background-color: transparent;
    border: none;
    color: #009900;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.5em;
}

.move_button:hover {
    color: #00DD00;
}

/* =Variations (default is SMX)
----------------------------------------------- */
.mxs .content {
    background-position: right top;
}

.mxs .content-group {
    float: left;
}

.mxs .content-sub {
    float: right;
}

.xms .content {
    background-position: right top;
}

.xms .content-group {
    float: left;
}

.xms .content-sub {
    float: right;
}

.xms .content-main {
    float: right;
}

.xms .content-extra {
    float: left;
}

.ms .content {
    background-position: right top;
}

.ms .content-group {
    float: left;
}

.ms .content-main {
    width: var(--right-content-width);
    margin-bottom: 15px;
}

.ms .content-sub {
    float: right;
}

.ms .content-extra {
    width: var(--right-content-width);
    display: none;
}

.sm .content-main {
    width: var(--right-content-width);
    margin-bottom: 15px;
}

.sm .content-extra {
    width: var(--right-content-width);
    display: none;
}

.m .content {
    background-image: none;
}

.m .content-group {
    width: var(--content-width);
}

.m .content-main {
    width: var(--content-width);
}

.m .content-sub {
    width: var(--content-width);
    display: none;
}

.m .content-extra {
    width: var(--content-width);
    display: none;
}

.center-img, .center-img img {
    float: none;
    display: block;
    margin: 0 auto;
}