/* Care of Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* Remember to define focus styles! */
:focus {
    outline: 0;
}

body {
    line-height: 1;
    color: black;
    background: white;
}

ol, ul {
    list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/* WRAPPERS */
.wrapper6  { width: 459px; margin: 0 auto; }
.wrapper7  { width: 533px; margin: 0 auto; }
.wrapper8  { width: 607px; margin: 0 auto; }
.wrapper9  { width: 681px; margin: 0 auto; }
.wrapper10 { width: 755px; margin: 0 auto; }
.wrapper11 { width: 829px; margin: 0 auto; }
.wrapper12 { width: 903px; margin: 0 auto; }

/* ROWS */
.endrow { clear: both; }

/* COLUMNS */
.col { float: left; margin-right: 15px; }
.firstcol { margin-left: 15px; }
.lastcol { margin-right: 0; }

/* COLUMN WIDTH */
.span1  { width: 59px; }
.span2  { width: 133px; }
.span3  { width: 207px; }
.span4  { width: 281px; }
.span5  { width: 355px; }
.span6  { width: 429px; }
.span7  { width: 503px; }
.span8  { width: 577px; }
.span9  { width: 651px; }
.span10 { width: 725px; }
.span11 { width: 799px; }
.span12 { width: 873px; }

/* COLUMN INTERNAL PADDING LEFT */
.ipadl1  { padding-left: 74px; }
.ipadl2  { padding-left: 148px; }
.ipadl3  { padding-left: 222px; }
.ipadl4  { padding-left: 296px; }
.ipadl5  { padding-left: 360px; }
.ipadl6  { padding-left: 444px; }
.ipadl7  { padding-left: 518px; }
.ipadl8  { padding-left: 592px; }
.ipadl9  { padding-left: 666px; }
.ipadl10 { padding-left: 740px; }
.ipadl11 { padding-left: 814px; }

/* COLUMN INTERNAL PADDING RIGHT */
.ipadr1  { padding-right: 74px; }
.ipadr2  { padding-right: 148px; }
.ipadr3  { padding-right: 222px; }
.ipadr4  { padding-right: 296px; }
.ipadr5  { padding-right: 360px; }
.ipadr6  { padding-right: 444px; }
.ipadr7  { padding-right: 518px; }
.ipadr8  { padding-right: 592px; }
.ipadr9  { padding-right: 666px; }
.ipadr10 { padding-right: 740px; }
.ipadr11 { padding-right: 814px; }

/* COLUMN EXTERNAL PADDING LEFT */
.epadl1  { margin-left: 74px; }
.epadl2  { margin-left: 148px; }
.epadl3  { margin-left: 222px; }
.epadl4  { margin-left: 296px; }
.epadl5  { margin-left: 360px; }
.epadl6  { margin-left: 444px; }
.epadl7  { margin-left: 518px; }
.epadl8  { margin-left: 592px; }
.epadl9  { margin-left: 666px; }
.epadl10 { margin-left: 740px; }
.epadl11 { margin-left: 814px; }

/* COLUMN EXTERNAL PADDING RIGHT */
.epadr1  { margin-right: 74px; }
.epadr2  { margin-right: 148px; }
.epadr3  { margin-right: 222px; }
.epadr4  { margin-right: 296px; }
.epadr5  { margin-right: 360px; }
.epadr6  { margin-right: 444px; }
.epadr7  { margin-right: 518px; }
.epadr8  { margin-right: 592px; }
.epadr9  { margin-right: 666px; }
.epadr10 { margin-right: 740px; }
.epadr11 { margin-right: 814px; }

/* INSET COLUMNS */
.insetl  { float: left; margin-right: 15px; }
.insetr  { float: right; margin-left: 15px; }

/* OUTSET COLUMNS LEFT */
.outsetl1  { float: left; margin-left: -74px; margin-right: 15px; }
.outsetl2  { float: left; margin-left: -148px; margin-right: 15px; }
.outsetl3  { float: left; margin-left: -222px; margin-right: 15px; }
.outsetl4  { float: left; margin-left: -296px; margin-right: 15px; }
.outsetl5  { float: left; margin-left: -360px; margin-right: 15px; }
.outsetl6  { float: left; margin-left: -444px; margin-right: 15px; }
.outsetl7  { float: left; margin-left: -518px; margin-right: 15px; }
.outsetl8  { float: left; margin-left: -592px; margin-right: 15px; }
.outsetl9  { float: left; margin-left: -666px; margin-right: 15px; }
.outsetl10 { float: left; margin-left: -740px; margin-right: 15px; }
.outsetl11 { float: left; margin-left: -814px; margin-right: 15px; }

/* OUTSET COLUMNS RIGHT */
.outsetr1  { float: right; margin-right: -74px; margin-left: 15px; }
.outsetr2  { float: right; margin-right: -148px; margin-left: 15px; }
.outsetr3  { float: right; margin-right: -222px; margin-left: 15px; }
.outsetr4  { float: right; margin-right: -296px; margin-left: 15px; }
.outsetr5  { float: right; margin-right: -360px; margin-left: 15px; }
.outsetr6  { float: right; margin-right: -444px; margin-left: 15px; }
.outsetr7  { float: right; margin-right: -518px; margin-left: 15px; }
.outsetr8  { float: right; margin-right: -592px; margin-left: 15px; }
.outsetr9  { float: right; margin-right: -666px; margin-left: 15px; }
.outsetr10 { float: right; margin-right: -740px; margin-left: 15px; }
.outsetr11 { float: right; margin-right: -814px; margin-left: 15px; }

body {
    background: #3A0000 url("../images/background.png") repeat fixed;
}

p {
    font: 14px Georgia, "Times New Roman", serif;
    line-height: 24px;
    padding: 0 3px;
    margin-bottom: 24px;
    text-align: justify;
}

ul,
ol {
    font: 14px Georgia, "Times New Roman", serif;
    line-height: 24px;
    margin-bottom: 24px;
}

h1 {
    font: 24px "Times New Roman", serif;
    letter-spacing: 0.5px;
    line-height: 24px;
    color: #855410;
    padding: 16px 2px 7px 2px;
    border-bottom: 1px solid #222;
}

h2 {
    font: 18px Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    line-height: 24px;
    color: #000;
    padding: 0 2px;
}

h3 {
    font: 11px Georgia, "Times New Roman", serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 23px;
    color: #222;
    padding: 0 3px;
    border-bottom: 1px solid #666;
}

hr {
    border: 0;
    border-bottom: 3px double #222;
    padding: 0;
    padding-top: 10px;
    margin: 0;
    margin-bottom: 11px;
}

hr.top {
    border: 0;
    border-bottom: 3px double #222;
    padding: 0;
    margin: 0;
    margin-bottom: 21px;
}

hr.bottom {
    border: 0;
    border-bottom: 3px double #222;
    padding: 0;
    padding-top: 21px;
    margin: 0;
}

pre {
    font: 13px "Courier New", Courier, monospace;
    line-height: 24px;
    color: #333;
    padding: 0 3px;
    margin-bottom: 24px;
}

br {
    line-height: 24px;
}

em {
    font-style: oblique;
}

strong {
    font-weight: bold;
}

a {
    color: #600;
}

a:hover {
    color: #C00;
}

a img {
    border: 0;
}

.smallcaps {
    font-size: 85%;
    text-transform: uppercase;
}

blockquote {
    margin: 0px 24px 24px 24px;
    font: 14px Georgia, "Times New Roman", serif;
    line-height: 24px;
    text-align: justify;
    font-style: oblique;
}

blockquote em {
    font-style: normal;
}

div#content {
    background: #FFF0CC url("/images/grad_parch.png") repeat-x 0 0;
    color: #222;
    border-left: 7px solid #630000;
    border-right: 7px solid #630000;
    padding-bottom: 48px;
}

#sidequote p,
#sidedemo p,
#sidenews p {
    font-size: 12px;
    line-height: 24px;
    text-align: left;
}

#sidequote {
    background: #EFE2C2;
    padding: 1px 5px;
    padding-top: 23px;
    margin: 0;
}

#sidequote p.quote {
    font-style: oblique;
}

#sidequote p.quoteby {
    font-style: oblique;
    text-align: right;
}

#sidedemo p {
    font-style: oblique;
}

#sidedemo h3,
#sidenews h3 {
    margin-top: 21px;
    border-top: 3px double #222;
    line-height: 23px;
    border-bottom: 1px solid #222;
}

#sidenews h4 {
    font-size: 12px;
    font-style: oblique;
    line-height: 24px;
    margin: 0;
}

div#footer {
    background: #222 url("/images/grad_gray.png") repeat-x 0 0;
    color: #999;
    border: 7px solid #630000;
    border-top: 0;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
}

div#footer h3 {
    color: #999;
}

div#footer p,
div#footer li {
    font-size: 11px;
    margin-bottom: 0;
    text-align: left;
    color: #999;
    line-height: 24px;
    padding: 0 3px;
    letter-spacing: 0.25px;
}

div#footer p {
    text-align: center;
}

div#footer a {
    color: #999;
}

div#footer a:hover {
    color: #FFF;
}

a.footer-badge img {
    vertical-align: middle;
    padding-bottom: 4px;
}

div#banners {
    background: #333 url("/images/banner14.jpg") no-repeat 0 0;
}

table.demos {
    font: 14px Georgia, "Times New Roman", serif;
    line-height: 24px;
    width: 100%;
    margin-bottom: 48px;
}

table.demos th {
    font: 11px Georgia, "Times New Roman", serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
    line-height: 21px;
    border-bottom: 3px double #222;
    padding: 0 3px;
    vertical-align: middle;
}

table.demos td {
    line-height: 23px;
    border-bottom: 1px solid #222;
    padding: 12px 3px;
    vertical-align: middle;
}

table.demos th.composer,
table.demos td.composer {
    width: 24%;
}

table.demos th.piece,
table.demos td.piece {
    width: 60%;
    font-weight: bold;
}
table.demos td.piece {
    letter-spacing: 0.25px;
}

table.demos td.piece a {
    display: block;
}

table.demos th.year,
table.demos td.year {
    width: 8%;
    text-align: center;
}

table.demos th.dur,
table.demos td.dur {
    width: 8%;
    text-align: center;
}

table.demos tbody tr:hover {
    background: #EFE2C2;
}

h2.tabletitle {
    line-height: 45px;
    border-bottom: 3px double #222;
}

#demotechinfo {
    background: #EFE2C2;
    padding-top: 24px;
    margin-top: -24px;
}

#demotechinfo p {
    font-size: 11px;
    font-style: oblique;
    padding: 0 7px;
}

body {
    background: #222;
}

div#content {
    border: 0;
    margin: 0;
    width: 100%;
    padding: 24px 0;
}

div#footer {
    border: 0;
    margin: 0;
    width: 100%;
    padding: 6px 0;
}

div#footer p {
    text-align: center;
    line-height: 18px;
}

table.demos {
    margin-bottom: 0;
}

table.demos tbody tr:hover {
    background: transparent;
}

h3 {
    margin-top: 24px;
}

h3.flush {
    margin-top: 0;
    margin-bottom: 24px;
}

.span13-5 {
    width: 1000px;
}

.span18 {
    width: 1332px;
}

.span20 {
    width: 1480px;
}

table.tutorial {
    font: 14px Georgia, "Times New Roman", serif;
    line-height: 24px;
    width: 100%;
    border-top: 3px double #222;
    margin-top: 21px;
}

table.tutorial td {
    line-height: 23px;
    border-bottom: 1px solid #222;
    padding: 12px 3px;
    vertical-align: middle;
}

table.tutorial td.dur {
    text-align: right;
}

table.tutorial td.selected {
    font-weight: bold;
}