/******************************************************************************/
/* html5doctor.com Reset Stylesheet                                           */
/* (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27            */
/* Authors: Eric Meyer & Richard Clark                                        */
/* html5doctor.com/html-5-reset-stylesheet/                                   */
/******************************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

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

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

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

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/******************************************************************************/
/* SITE DEFAULTS AND TAG-WIDE DIRECTIVES                                      */
/******************************************************************************/

html{
    position: relative;
    overflow-y: scroll;
    cursor: default;

    /* Do not allow the user to select items on the page unless otherwise
       specified*/
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;  

    /* maxvoltar.com/archive/-webkit-font-smoothing */
    html { -webkit-font-smoothing: antialiased; }
}

body {
    /* This custom font is loaded in two CSS files loaded prior to this file */
    font-family: menomonia;
    background-color: #660700; /* Blood Red */
    /* There is a black background that fades in when a lightbox is opened. This
       min-width style allows it to cover completely even when the window is
       made very small. Without it you could shrink the window and then scroll
       right to make the black background disappear */
    min-width: 1040px;
    color: #1f0504; /* Very dark red */
}

h1 {
    font-weight: 600;
    font-size: larger;
}

h2 {
    font-weight: 600;
    font-size: large;
}

p {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* The CSS clear at the beginning undoes this, so we need to redo it */
strong{
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #c94545; /* red */
    cursor: pointer;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}

a:visited {
    color: #c94545; /* red */
    cursor: pointer;
}

a:hover{
    color: #660700; /* Blood Red */
}

textarea, input[type="text"], input[type="password"], select{
    padding: 5px;
    border-radius: 5px;
    border:solid 1px #ccc; /* light grey */
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
select:focus{
    outline:none;
    border-color:#aaa; /* medium grey */
}

textarea, input {
    -webkit-user-select: text; /* Chrome/Safari */        
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: text;
    user-select: text; 
}

textarea { 
    resize: none; 
}

input[type="submit"], button {
    cursor: pointer;
    background-color: #1f0504; /* Very Dark Red */
    color: #ffffff; /* White */
    font-family: menomonia;
    border: #660700 solid 2px; /* Blood Red */
    font-size: large;
    outline:none;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;  
}

/******************************************************************************/
/* USER'S MANUAL                                                              */
/******************************************************************************/

#toc{
    position: fixed;
    margin-left: 680px;
    border: #1f0504 solid 2px; /* Very Dark Red */
    width: 175px;
    height: 160px;
    padding: 10px;
    background-color: white;
    font-weight: bold;
}

/* This confines the guide to a small enough space that the table of contents
   does not overlap */
#manual_div{
    width: 640px;
}

/* Style for captions beneath pictures */
.caption{
    text-align: center;
    width: 640px;
    padding-top:5px;
    padding-bottom: 5px;
    font-weight: bold;
}

.ordered_list{
    margin-left: 10px;
}

.ordered_list > li{
    margin-top: 10px;
    margin-bottom: 10px;
}

/******************************************************************************/
/* ARCHIVE                                                                    */
/******************************************************************************/

.list {
    margin-top: 10px;
    height: 1000px;
    overflow: scroll;
}

.list > li {
    display: block;
    background-color: #eee; /* Light Grey */
    padding: 10px;
    box-shadow: inset 0 1px 0 #fff; /* White */
}

/* This keeps the comments in a defined box no matter how many there are */
#comment_list{
    width: 600px;
    height: 300px;
    overflow: auto;
}

.comment_user{
    font-weight: bold;
}

.comment_date{
    font-size: small;
}

.list_image{
    float: left;
    margin-right: 10px;
    height: 64px;
    width: 64px;
}

input.search , select#instrument_filter, select#comment_filter {
    border:solid 1px #ccc;
    border-radius: 5px;
    padding:7px 14px;
    margin-bottom:10px
}

input.search:focus, select#instrument_filter:focus, select#comment_filter:focus {
    outline:none;
    border-color:#aaa;
}

.custom_sort {
    width: 170px;
    display:inline-block;
    color:#fff;
    text-decoration: none;
    height:30px;
    font-size: medium;
}

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

.custom_sort:focus {
    outline:none;
}

.custom_sort:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    content:"";
    position: relative;
    top:-10px;
    right:-5px;
}

.custom_sort.asc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content:"";
    position: relative;
    top:13px;
    right:-5px;
}

.custom_sort.desc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    content:"";
    position: relative;
    top:-10px;
    right:-5px;
}

/* These fields are used to allow javascript to read the data associated with
   each song. They are hidden from the user */
.list_instrument, .list_songtext, .list_meter, .list_tempo, .list_recent_comment_date{
    display: none;
}

.list_buttons {
    float: right;
    margin-left: 10px;
    width: 130px;
    height: 64px;
}

.list_playback, .list_export{
    padding: 0px;
    margin: 0px;
    width: 130px;
    line-height: 23px;
    font-size: medium !important;
}

.list_rating{
    width: auto;
    display: inline-block;
    margin-right: 10px;
}

.rateplus {
    display: inline-block;
    position: relative;
    width: 17px;
    height: 17px;
    cursor: pointer;
    background-image: url('../image/plus.png');
    vertical-align: text-bottom;
    bottom: 2px;
}

.list_playback{
    margin-bottom: 10px;
}

.date_div{
    display: inline-block;
    width: 250px;
    margin-top: 4px;
}

.comment_div{
    display: inline-block;
    width: 200px;
}

.rate_div{
    display: inline-block;
    width: 150px;
}

/******************************************************************************/
/* HOME PAGE                                                                  */
/******************************************************************************/

#donate{
    margin-top: 15px;
}

/******************************************************************************/
/* HEADER                                                                     */
/******************************************************************************/

/* This container div allows the primary content to be centered and the footer
   to be properly positioned */
.container {
    /* These directives help position the footer in a way that doesn't
       allow it to increase the max size of the page */
    min-height: -moz-calc(100% - 100px);
    min-height: calc(100% - 100px);
    padding-bottom: 100px;

    position: relative;
    width: 100%;
    background: url('../image/header.png') repeat-x center top;
}

#login_div, #logout_div {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 175px;
    font-weight: 600;
    text-align: right;
    font-size: larger;
}

#username_display{
    font-weight: normal;
    font-size: medium;
    /* just in case they have a really long username */
    word-wrap: break-word;
}

#username_display_edit {
    /* just in case they have a really long username */
    word-wrap: break-word;
}

/* center the title */
.banner-holder {
    display: block;
    width: 959px;
    padding-left: 42px;
    padding-right: 42px;
    margin-left: auto;
    margin-right: auto;
}

#leftdragon {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.banner {
    vertical-align: top;
    margin-left: 159px;
    margin-right: 159px;
}

/* center the navbar */
.navbar {
    position: absolute;
    top: 95px;
    left: 0px;
    right: 0px;
    width: 755px;
    padding-left: 144px;
    padding-right: 144px;
    height: 105px;
    margin-left:auto;
    margin-right:auto;
}

.navtitle {
    display: inline-block;
    opacity: 0;
    color: #660700;
    text-align: center;
    font-size: larger;
    width: 64px;
    margin-left: 11px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#navtitle1 {
    margin-left: 8px;
}

/* format the navbar icons */
.navicon {
    display: inline-block;
    height: 64px;
    width: 64px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    border: #660700 solid 3px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* animate on hover */

a.navicon:hover {
    margin-top: 5px;
    margin-bottom: 10px;
    opacity: 0.7;
}

#navico1:hover ~ #navtitle1, #navico2:hover ~ #navtitle2,
#navico3:hover ~ #navtitle3, #navico4:hover ~ #navtitle4,
#navico5:hover ~ #navtitle5, #navico6:hover ~ #navtitle6,
#navico7:hover ~ #navtitle7, #navico8:hover ~ #navtitle8,
#navico9:hover ~ #navtitle9, #navico10:hover ~ #navtitle10{
    opacity: 1;
}

/* give images to each navicon */
#navico1 {
    background: #666699 url('../image/waypoint.png') no-repeat;
    margin-left: 5px;
}

#navico2 {
    background: url('../image/bell.png') no-repeat;
}

#navico3 {
    background: url('../image/flute.png') no-repeat;
}

#navico4 {
    background: url('../image/horn.png') no-repeat;
}

#navico5 {
    background: url('../image/harp.png') no-repeat;
}

#navico6 {
    background: url('../image/lute.png') no-repeat;
}

#navico7 {
    background: url('../image/bell2.png') no-repeat;
}

#navico8 {
    background: url('../image/bass.png') no-repeat;
}

#navico9 {
    background: url('../image/chest.png') no-repeat;
}

#navico10 {
    background: url('../image/page.png') no-repeat;
}

/* format the content */
.content {
    color: #1f0504;
    font-size: large;
    padding: 40px 40px 40px 40px;
    width: 878px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border: #660700 solid 1px;
}

/******************************************************************************/
/* LIGHTBOX AND LIGHTBOX CONTENTS                                             */
/******************************************************************************/

/* This is the black background that comes up when a lightbox is opened */
.black_overlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-height: 100%;
    min-width: 1040px;
    border: #000000 solid 1px;
    background-color: black;
    z-index:1002;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

/* general css for all lightboxes */
.white_content {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    padding: 16px;
    border: #660700 solid 1px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

/* light box dimensions */

#login_lightbox {
    width: 185px;
    height: 265px;
}

#register_lightbox {
    width: 318px;
    height: 420px;
}

#edit_lightbox {
    width: 300px;
    height: 365px;
}

#forgot_lightbox {
    width: 200px;
    height: 150px;
}

#load_lightbox {
    width: 500px;
    height: 325px;
}

#export_lightbox {
    width: 500px;
    height: 335px;
}

#export2_lightbox {
    width: 500px;
    height: 620px;
}

#comments_lightbox {
    width: 600px;
    height: 415px;
}

#add_comment_lightbox {
    width: 400px;
    height: 315px;
}

/* width of divs in export lightbox */
#manual, #automatic, #mbnotation, #blishHUDArea {
    width: 500px;
}

/* css for the button that closes the lightboxes */
#closelightbox {
    float: right;
    font-weight: 600;
    font-size: larger;
}

/* style for all error divs */
#add_err_login, #add_err_register, #add_err_edit, #add_err_forgot, #add_err_song, #add_err_load,
#add_err_export, #add_err_comments, #add_err_export2, #add_err_add_comment {
    color: #c94545; /* Red */
}

#comment_text{
    width: 400px;
    height: 212px;
    resize: none;
}

.comment_text_class{
    -webkit-user-select: text; /* Chrome/Safari */        
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: text;
    user-select: text;
    word-wrap: break-word;
}

/* width of the song list in the load song lightbox */
#songlist {
    width: 500px;
}

/******************************************************************************/
/* SONG SETTINGS AND GENERAL OPTIONS                                          */
/******************************************************************************/

.columnA, .columnB, .columnC, .columnD {
    padding-top: 4px;
    padding-bottom: 4px;
    height: 30px;
    vertical-align: middle;
}

/* This div is only here so the javascript can access the song_id */
#song_id {
    display: none;
}

.columnA {
    width: 150px;
}

.columnB {
    width: 289px;
}

.columnC {
    width: 219px;
}

.columnD {
    width: 200px;
    padding-left: 19px;
}

.columnD_volume {
    width: 180px;
    padding-left: 39px;
    height: 38px;
}

#volume_label, #volume_control{
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#volume_control{
    margin-left: 17px;
}

#volume_label, #publish_label{
    line-height: 30px;
}

/* This div communicates to the user whether or not there are unsaved changes */
#unsaved{
    display: inline-block;
    vertical-align: middle;
    width: 147px;
    margin-left: 25px;
    color: #c94545; /* red */
    line-height: 30px;
}

#publish_label{
    margin-left: 25px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}

#publish_checkbox{
    margin-top: 11px;
    margin-bottom: 6px;
    vertical-align: middle;
}

#songname {
    width: 250px;
}

.minus, .plus{
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-top: 7px;
    margin-bottom: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.minus {
    background-image: url('../image/minus.png');
}

.plus {
    background-image: url('../image/plus.png');
}

#tempo, #meter, #volume, #volume_edit {
    display: inline-block;
    width: 40px;
    height: 17px;
    margin-top: 7px;
    margin-bottom: 6px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
}

/* this class contains all of the input [type="submits"] in the settings
   container */
.action_button {
    width: 200px;
}

/* the divider between the settings and the song entry interface */
#divider {
    color: #1f0504; /* Very Dark Red */
    background-color: #1f0504; /* Very Dark Red */
    height: 5px;
    border: none;
    margin: 8px 0px 14px 0px;
}

/******************************************************************************/
/* SONG ENTRY INTERFACE                                                       */
/******************************************************************************/

#containinterface{
    position: relative;
    width: 878px;
    height: 150px;
    cursor: default;
    -webkit-transform: translateZ(0);
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Not implemented yet */
    -o-user-select: none;
    user-select: none;  
}

/* This targets the parent container for the note length multiplier */
#nextnotelength {
    position: absolute;
    top: 5px;
    left: 58px;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

/* This targets the words "Numerator:" and "Denominator:" */
#num_label {
    margin-right: 16px;
}

/* This targets the parent containers of the individual numbers */
#numerators, #denominators {
    display: inline-block;
}

#numerators {
    margin-top: 5px;
    margin-bottom: 1px;
}

/* This targets the individual numbers */
.num, .denom {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    border: rgba(0, 0, 0, 0) solid 2px;
    border-radius: 10px;
    cursor: pointer;
}

/* Select 1 for numerator and denominator by default */
#num_1, #denom_1 {
    border: #1f0504 solid 2px;
}

/* This targets the right box on the song interface that holds the chord mode
   button on the harp page */
#options {
    position: absolute;
    top: -1px;
    right: 100px;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

/* This is the parent div for the current notes in the chord */
#currentNotesInChord{
    height: 44px;
    width: 220px;
}

/* This targets the individual numbers in the chord array above the enable
   chord mode button */
.chordArrayMember{
    width: 17px;
    height: 19px;
    margin-right: 1px;
    margin-top: 1px;
    text-align: center;
    border: #745f41 solid 1px;
    background-color: #f6eea5;
    display: inline-block;
}

/* These divs prevent the user from interacting with the note length multiplier
   and enable chord mode buttons while in play mode */
#blockui1, #blockui2 {
    position: absolute;
    display: block;
    top:0;
    left:0;
    z-index:4;
}

#blockui1 {
    width: 281px;
    height: 68px;
}

#blockui2 {
    width: 220px;
    height: 74px;
}

/* This targets the enable and disable chord mode button */
#chord {
    width: 220px;
}

/* this holds the combat mode background */
#centerskillbackground{
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('../image/combat.png') no-repeat -161px -125px;
    width: 878px;
    height: 160px;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    border-radius: 10px;
}

/* The skill bar */
#centerskillbar {
    position: relative;
    width: 840px;
    height: 117px;
    padding-right: 38px;
    padding-top: 43px;
}

#swap{
    display: inline-block;
    margin-right: 18px;
    margin-bottom: 25px;
    width: 40px;
    height: 40px;
    background: #000000 url('../image/swap.png') no-repeat 0px 0px;
    cursor: pointer;
}

.skill {
    display: inline-block;
    width: 65px;
    height: 65px;
    -webkit-transition: -webkit-transform .25s;
    -moz-transition: -moz-transform .25s;
    -ms-transition: -ms-transform .25s;
    -o-transition: -o-transform .25s;
    transition: transform .25s;
    cursor: pointer;
}

#health {
    display: inline-block;
    vertical-align: bottom;
    background: -webkit-linear-gradient(#ce2004, #440705); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ce2004, #440705); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ce2004, #440705); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ce2004, #440705); /* Standard syntax */
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    border-radius: 55px;
    border: #000000 solid 1px;
    cursor: pointer;
}

/* The text in the center of the health */
#healthtext{
    text-align: center;
    color: #ffffff;
    width: 110px;
    height: 20px;
    margin-top: 45px;
}

#skill1{
    background: #000000 url('../image/skill1.png') no-repeat -10px -10px;
}

#skill2{
    background: #000000 url('../image/skill2.png') no-repeat -10px -10px;
}

#skill3{
    background: #000000 url('../image/skill3.png') no-repeat -10px -10px;
}

#skill4{
    background: #000000 url('../image/skill4.png') no-repeat -10px -10px;
}

#skill5{
    background: #000000 url('../image/skill5.png') no-repeat -10px -10px;
}

#skill6{
    background: #000000 url('../image/skill6.png') no-repeat -10px -10px;
    margin-right: 10px;
}

#skill7{
    background: #000000 url('../image/skill7.png') no-repeat -10px -10px;
}

#skill8{
    background: #000000 url('../image/skill8.png') no-repeat -10px -10px;
}

#skill9{
    background: #000000 url('../image/octave_down.png') no-repeat -10px -10px;
    margin-right: 10px;
}

#skill9_flute{
    background: #000000 url('../image/lock.png') no-repeat -10px -10px;
    margin-right: 10px;
}

#skill0{
    background: #000000 url('../image/octave_up.png') no-repeat -10px -10px;
}

/* The small circles at the base of each skill */
.key_label{
    display: block;
    position: absolute;
    bottom: 0px;
    padding-top: 3px;
    width: 19px;
    height: 16px;
    background-color: rgba(0,0,0,0.6);
    color: #ffffff;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: small;
}

#key_1 {
    left: 81px;
}

#key_2 {
    left: 146px;
}

#key_3 {
    left: 211px;
}

#key_4 {
    left: 276px;
}

#key_5 {
    left: 341px;
}

#key_6 {
    left: 518px;
}

#key_7 {
    left: 593px;
}

#key_8 {
    left: 658px;
}

#key_9 {
    left: 723px;
}

#key_0 {
    left: 798px;
}

/* The main text area that contains the notes of the song */
#songarea{
    width: 878px;
    height: 200px;
}

/******************************************************************************/
/* FOOTER                                                                     */
/******************************************************************************/

.footer {
    position: absolute;
    background: url('../image/footer.png') repeat-x center bottom;
    left: 0px;
    bottom: 0px;
    height: 256px;
    width: 100%;
    min-width: 1040px;
    z-index: -101;
}