/* The Reset ---------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
    margin: 0;
    padding: 0;
}

fieldset, img, abbr {
    border: 0;
}

address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, th, var {
    font-style: normal;
    font-weight: normal;
}

caption, th {
    text-align: left;
}

q:before, q:after {
    content: '';
}

a {
    text-decoration: none;
}

body {
    font-size: 62.5%;
    background: #fff;
    font-family: Calibri, Trebuchet MS, Verdana, Sans-Serif;
    line-height: 22px;
    color: #555;
    margin-bottom: 40px;
}
/* -------------------------------------------- */


code {
    font-family: Consolas, Monaco, "Courier New", Courier, monospace;
}

pre {
    background: #f5f5f5;
    border: 1px solid #dadada;
    padding: 11px;
    font-size: 11px;
    line-height: 1.3em;
    overflow: auto;
}

    pre a {
        font-weight: normal;
    }

a {
    color: #445a7c;
    text-decoration: none;
    font-weight: bold;
}

    a:hover {
        text-decoration: underline;
    }

    a.external {
        background: url('images/external.png') right;
        padding-right: 12px;
        background-repeat: no-repeat;
    }

    a:hover {
        color: #2f3c4f;
    }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #555;
}

h1 a {
    font-weight: lighter;
}

    h1 a:hover {
        color: #555;
    }

h3 {
    font-weight: bold;
}

strong {
    font-weight: bold;
}

em, cite {
    font-style: italic;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
    clear: both;
}

#header {
    height: 88px;
    min-width: 960px;
}

@media only screen and (max-width: 1000px) {
    .wrapper {
        width: 800px;
    }
}

    #header.base {
        background: #303d50 url(images/headerbg.png) repeat-x;
    }

    #header.bass {
        background: #cc6904 url(images/bassheaderbg.png) repeat-x;
    }

    #header.drums {
        background: #ab052b url(images/drumheaderbg.png) repeat-x;
    }

    #header.guitar {
        background: #012f7c url(images/guitarheaderbg.png) repeat-x;
    }

    #header.keyboard {
        background: #0e8823 url(images/keysheaderbg.png) repeat-x;
    }

    #header h1 a {
        display: block;
        background: url(images/logo.png) center left no-repeat;
        text-indent: -9999px;
        min-width: 400px;
        height: 88px;
        float: left;
    }

#mainmenudiv {
    float: right;
    clear: right;
    text-align: right;
    margin-top: 25px;
}

#logintopdiv {
    float: right;
    text-align: right;
    min-height: 38px;
    max-height: 38px;
    margin-right: 10px;
    color: #ddd;
}

    #logintopdiv a {
        color: White;
    }

.mainmenu {
    list-style: none;
}

.topm {
    display: inline;
    float: left;
}

    .topm a {
        font-weight: normal;
        display: block;
        line-height: 26px;
        padding: 0 10px;
        font-size: 14px;
        color: #ccc;
    }

        .topm a:hover {
            color: #fff;
        }

        .topm a.current {
            color: black;
            font-weight: bold;
            background: #eee;
        }

    .topm:hover ul {
        display: block;
    }

.submenu {
    display: none;
    position: absolute;
    margin: 0px;
    text-align: left;
    background: #eee;
    border: 1px solid #999;
    z-index: 1000;
    box-shadow: 3px 3px 5px 0px #666;
}



.subm {
    clear: both;
    display: block;
    width: 100%;
    background: #eee;
}

    .subm a {
        color: #555;
        width: 100%;
    }

        .subm a:hover {
            color: #000;
        }



#home-above {
    border-bottom: 1px solid #ccc;
    background: #eee;
}

    #home-above h1 {
        margin-top: -30px;
        padding: 20px 0 15px 0;
    }

    #home-above .wrapper {
        padding: 30px 0px 0px 0px;
        font-size: 11pt;
    }

    #home-above p {
        margin-bottom: 20px;
    }


.hmscreenshot {
    float: left;
    padding-right: 30px;
}

.alphapara {
    font-size: 13pt;
    font-family: Georgia;
    line-height: 26px;
}

.subscribebutton {
    padding: 5px 10px 5px 10px;
    background: #009;
    color: white;
}

    .subscribebutton:hover {
        color: #555;
    }

#home-below {
    background: white;
    padding: 10px 0 30px 0;
    font-size: 11pt;
    clear: both;
}

    #home-below li {
    }

    #home-below h2 {
        font-size: 13pt;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
        margin-top: 20px;
    }

    #home-below h3 {
        font-size: 12pt;
    }

    #home-below p {
        margin-bottom: 20px;
    }

.sidebox {
    float: right;
    width: 240px;
}

    .sidebox ul li ul a {
        font-weight: normal;
    }

    .sidebox ul li ul li {
        margin-left: 10px;
        list-style: none;
        font-size: 9pt;
    }

.mainbox {
    margin-right: 270px;
}


/* homepage columns */
.hpcolumn1 {
    padding: 0px;
    margin-right: 25px;
    float: left;
    width: 300px;
}

    .hpcolumn1 .latestpost span {
        text-transform: uppercase;
        font-size: 8pt;
        font-family: Verdana;
    }

.hpcolumn2 {
    padding: 0px;
    float: left;
    width: 300px;
}

    .hpcolumn2 ol {
        list-style: none;
    }

    .hpcolumn2 li {
        padding-bottom: 10px;
        padding-left: 40px;
        margin-top: 0px;
        padding-top: 0px;
        margin: 0px !important;
    }

    .hpcolumn2 .item1 {
        background: url(images/item1.png) top left no-repeat;
        margin-left: 0px;
    }

    .hpcolumn2 .item2 {
        background: url(images/item2.png) top left no-repeat;
    }

    .hpcolumn2 .item3 {
        background: url(images/item3.png) top left no-repeat;
    }


.hpcolumn3 {
    padding: 0px;
    margin-left: 10px;
    float: right;
    width: 300px;
}

    .hpcolumn3 p {
        font-family: Georgia;
        font-style: italic;
    }

        .hpcolumn3 p span {
            font-size: 8pt;
            text-transform: uppercase;
            font-family: Verdana;
            font-style: normal;
        }


#footer {
    background: white;
    min-width: 960px;
    clear: both;
}

    #footer .wrapper {
        border-top: 1px solid #ccc;
    }

    #footer p {
        float: left;
    }

    #footer h2 {
        text-transform: uppercase;
        font-size: 10px;
        float: right;
    }

.langbar {
    float: right;
}

.lessontext {
    padding-right: 20px;
    vertical-align: top;
}

.lessonextras {
    vertical-align: top;
}

.sidebox ol {
    margin-left: 25px;
}

.error {
    color: Red;
}

.freelesson {
    float: right;
    color: #990000;
}

    .freelesson a {
        color: #990000;
    }

.subscriberlesson {
    float: right;
    color: #333;
    font-weight: normal;
    font-size: x-small;
}

.testimonials p {
    font-family: Georgia;
    font-style: italic;
}

    .testimonials p span {
        font-size: 8pt;
        text-transform: uppercase;
        font-family: Verdana;
        font-style: normal;
    }

.avgscore {
    margin-top: -15px;
}

.porttable {
    xborder: solid 1px #ccc;
    border-collapse: collapse;
    margin-top: 30px;
}

    .porttable td, .porttable th {
        border-collapse: collapse;
        border: solid 1px #ccc;
        padding: 5px;
    }

    .porttable tr.tableheader {
        background: #ddd;
        color: Black;
    }

    .porttable tr.gradehead {
        background: #eee;
        font-size: 130%;
        font-weight: bold;
        color: Black;
    }

    .porttable tr.gradesubhead {
        background: #fafafa;
        font-weight: bold;
        font-size: 120%;
    }

    .porttable tr.spacerhead td {
        border: none;
    }

    .porttable tr.spacerhead {
        border: none;
    }

    .porttable tr.gradehead td {
        border-top: solid 1px #ccc;
    }

td.center {
    text-align: center;
}

#moregigajam {
    width: 64px;
    height: 64px;
    background: url(../images/moregigajam.png) top right no-repeat;
    float: right;
    text-indent: -9999px;
    position: absolute;
    top: 0;
    right: 0;
}

    #moregigajam:hover {
        width: 150px;
        height: 150px;
        background: url(../images/moregigajam2.png) center left no-repeat;
        cursor: hand;
    }

    #moregigajam h2 {
        font-size: large;
    }

.errormessage {
    color: White;
    background: #ae0000;
}

.information {
    color: White;
    background: #5b9058;
}

.message {
    position: absolute;
    font-size: 120%;
    display: inline;
    text-align: center;
    max-width: 500px;
    padding: 10px;
    cursor: pointer;
}

.inline {
    position: relative;
}

.message .text {
    font-weight: bold;
}

.message .close {
    font-size: small;
}

.groupname {
    font-weight: bold;
    color: White;
    font-size: 100%;
    border: none;
    background: none;
}

    .groupname:hover, .groupdesc:hover {
        background-color: #666;
    }

.groupdesc {
    border: none;
    background: none;
    font-size: 90%;
    font-weight: normal;
    color: #ccc;
}

    .groupname:focus, .groupdesc:focus {
        background-color: white !important;
        border: solid 1px black;
        color: Black;
    }

.movebutton {
    position: absolute;
    left: -1000px;
}

.grouphead {
    background: #999;
    font-size: 130%;
    font-weight: bold;
    color: Black;
    padding: 5px;
    margin-top: 10px;
}

.userrowheadtable {
    border-collapse: collapse;
    width: 100%;
    margin: 0px;
    display: none;
}

    .userrowheadtable td, .userrowheadtable th {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-size: small;
        text-align: center;
        width: 20%;
    }

    .userrowheadtable th {
        font-weight: bold;
        font-size: medium;
    }

.bassth {
    background: #cc6904 url(images/bassheaderbg.png) repeat-x;
    color: White;
}

.drumsth {
    background: #ab052b url(images/drumheaderbg.png) repeat-x;
    color: White;
}

.guitarth {
    background: #012f7c url(images/guitarheaderbg.png) repeat-x;
    color: White;
}

.keyboardth {
    background: #0e8823 url(images/keysheaderbg.png) repeat-x;
    color: White;
}

.aath {
    background: #cc6904 url(images/bassheaderbg.png) repeat-x;
    color: White;
}

.firstcol {
    text-align: left !important;
    padding-left: 5px;
    width: 10% !important;
}

.lastcol {
    padding-right: 5px;
    width: 10% !important;
}

div.mainbox h2.levelhead {
    font-size: xx-large !important;
    border-bottom: 2px solid black !important;
    padding-bottom: 5px !important;
}

#gracemessage {
    text-align: center;
    font-size: small;
    background-color: orange;
}

#livemessage {
    clear: both;
    color: black;
}

.widemessage {
    padding: 3px;
    margin-bottom: 5px;
}

.popupbg {
    background-image: url('http://www.wannabegirl.org/translucent/000.gif');
}

.popup {
    background-color: White;
    border: 2px black solid;
    width: 335px;
    height: 180px;
    padding: 20px;
}

.user {
    width: 600px;
    margin-bottom: 15px;
}

.userwrap {
    background: #EEF;
    width: 100%;
    border-bottom: 1px solid blue;
    border-collapse: collapse;
}

.username {
    font-size: 1.2em;
}

.roles {
    padding-top: 4px;
    text-align: right;
    padding-right: 20px;
}

.role {
    display: inline-block;
    border: 1px solid black;
    border-collapse: collapse;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: .8em;
    font-weight: bold;
    background: white;
    padding: 0px;
}

.roleclose {
    border-left: solid 1px black;
}

.shib {
    background: #fef;
    font-size: 0.7em;
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid blue;
}

    .shib tr:nth-of-type(2n+1) {
        background: #fdf;
    }

.local {
    background: #eff;
    font-size: 0.7em;
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid blue;
}

    .local tr:nth-of-type(2n+1) {
        background: #dff;
    }

.delete {
    text-align: left;
    width: 20px;
    height: 20px;
}

.local td:first-child {
    width: 60%;
}

.shib td:first-child {
    width: 60%;
}

a.celllink {
    display: block;
    padding-left: 5px;
    padding-right: 5px;
}

    a.celllink:hover {
        background: silver;
    }

table.addbox td.addmenu {
    display: none;
    border-right: 1px solid black;
}

table.addbox:hover td.addmenu {
    display: table-cell;
}

.webmessage {
    width: 100%;
    height: 29px;
    background: orange;
    text-align: center;
    font-size: 200%;
    padding-top: 3px;
}

    .webmessage.error {
        color: white;
        background: red;
    }

    .webmessage.information {
        color: black;
        background: #9DEA9D;
    }

    .webmessage.alert {
    }

    .webmessage.information {
        color: black;
        background: #9DEA9D;
    }

    .webmessage span.close {
        float: right;
        cursor: pointer;
        margin-right: 5px;
    }

#abovemenu {
    float: right;
    font-size: smaller;
}

    #abovemenu li {
        display: inline;
    }

    #abovemenu a {
        font-weight: normal;
        display: inline-block;
        padding: 3px 5px 2px 5px;
        color: #666;
    }

        #abovemenu a.selected {
            background: white;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            font-weight: bold;
            color: Black;
        }

#userstrip {
    background: #eee;
    font-size: 160%;
    color: #ccc;
}

    #userstrip div.wrapper {
        text-align: right;
        padding: 3px 20px 3px 0px;
    }

.badgesum {
    font-weight: normal;
    color: #666;
    font-size: smaller;
}

    .badgesum:hover {
        text-decoration: none;
        color: #666;
    }

.ValidationError {
    display: block;
    padding: 15px 15px 15px 15px;
    background: #ae0000;
    cursor: pointer;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}

.groupboxhead {
    border: 1px solid #666;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px;
    color: White;
    background: #999;
    border-bottom: none;
}

    .groupboxhead h2, h3 {
        border: none !important;
        margin: 0px !important;
    }

.groupboxbottom {
    border: 1px solid #666;
    margin-bottom: 20px;
    border-top: none;
}

    .groupboxbottom .pupils {
        max-height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

tr.rowbordertop td {
    border-top: solid 2px !important;
}

.bulletlist {
    margin-left: 40px;
}

.button {
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #ddd url("http://s.twimg.com/a/1285137161/images/buttons/bg-btn.gif") repeat-x 0 0;
    border-bottom-color: #ccc;
    border-color: #ddd;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #333;
    cursor: pointer;
    display: inline;
    font: 11px/14px verdana;
    margin: 0;
    overflow: visible;
    padding: 4px 8px 5px;
    text-shadow: 1px 1px 0 #fff;
}



    .button::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    .button:focus {
        outline: none;
    }

    .button:hover, .button:focus {
        background-position: 0 -6px;
        border-color: #999 #999 #888;
        color: #000;
    }

    .button:active {
        background-image: none;
        text-shadow: none;
        outline: none;
    }

    .button:hover {
        text-decoration: none;
    }

div.portspanner {
    vertical-align: middle;
    float: right;
    margin-right: 10px;
}

.portspanstars {
    position: relative;
    top: 4px;
}

.portspanicon {
    font-size: 80%;
    position: relative;
    top: -1px;
    color: #999;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 23px;
}

    .portspanicon.active {
        color: #333;
    }

    .portspanicon.score {
        background-image: url('/content/images/icnPercent.png');
    }

        .portspanicon.score.active {
            background-image: url('/content/images/icnaPercent.png');
        }

    .portspanicon.kudos {
        background-image: url('/content/images/icnKudos.png');
    }

        .portspanicon.kudos.active {
            background-image: url('/content/images/icnaKudos.png');
        }

    .portspanicon.comments {
        background-image: url('/content/images/icnComments.png');
    }

        .portspanicon.comments.active {
            background-image: url('/content/images/icnaComments.png');
        }

.portspanscore {
    position: relative;
    top: -2px;
    font-weight: bold;
}

div.awardbox div.tick {
    float: right;
}

div.awardbox p {
    margin-right: 20px;
    margin: 0px !important;
}

div.awardbox {
    padding: 10px;
    background: #eee;
    margin-top: 10px;
    border-radius: 8px;
    min-height: 64px;
    border: 1px solid #eee;
    position: relative;
}

    div.awardbox:hover {
        border: 1px solid #ccc;
    }

    div.awardbox div.note {
        font-size: small;
        font-variant: small-caps;
        font-weight: normal;
    }

.fancybox-outer {
    font-size: 160%;
}

.helpbox {
    width: 600px;
}

    .helpbox strong {
        font-weight: bold;
    }


.filelist {
    list-style: none;
}