#controls li
{
        display: inline;
        list-style-type: none;
        padding-right: 20px;
}

h2.step {
  width:600px;
  font-size: 14px;
  background-color: lavender;
  border: 1px solid black;
}

div#open_div {
  display:none
}
div#reopen  a {
  margin-right:10px;
}
div#reopen {
  padding:4px;
  background-color:DarkOrange;
  border:1px solid black;
}

input#url_to_reopen {
  padding:10px;
  width:500px;
}
div#rendered_doremi_script {
  border: 2px dotted #CCCCCC;
}

span.note_wrapper {
    position: relative;
}

.show_sargam_source {
    border: 1px solid black;
    font-family: monospace; 
    font-size: 18px;
    padding-left: 10px;
}
textarea#entry_area, textarea.entry_area {
    white-space: nowrap;
    overflow: auto;
    font-family: monospace; 
    font-size: 18px;
    padding-left: 10px;

}
#parse_tree,#warnings_div {
    border: 1px solid black;
    width: 70%;
    height:550px;
    overflow:scroll;
    margin-left: 20px;
    padding:4px;
    display:none;
}
#warnings_div {
  height:auto;
}
div.line {
    position: relative;
    font-family: sans-serif;
}

span.beat.looped {
    border-top: 0px;
    border-bottom: .1em solid;
    padding-bottom: .75em;
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    border-style: solid;
    border-color:black;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width:1px;
    border-right-width: 0px;
}


span.beat {
    margin-right: 1em;
    margin-left: .3em;
}

span.slur {
    position:absolute;
    margin-top: 1.5em;
    border-top: .1em solid;
    padding-top: 3.2em;
    border-radius: .5em;
    border-style: solid;
    border-color: black;
    border-top-width: 2px;
    border-bottom-width: 0em;
    border-bottom:none;
    border-left-width: 0em;;
    border-right-width: 0em;
}

span.ornament_item {
  position: static;
  display:inline;
}
span.ornament_item.octave_2, span.ornament_item.octave_2 {
  /* octave of -2 or 2 */
}
span.upper_attribute.ornament {
    position: absolute;
    bottom: 1.6em;
    font-size: .5em;
    margin-left: 1.8em;
}

span.ornament span.note {
    padding-right: .2em;
}

div.sargam_line {
    /* font-size: 1em; */
   /*  font-family: sans-serif; */
    /* border: 1px black dotted; */
    border: none;
    height: 11.5em;
    padding-top: 0em;
    padding-left:1em;
    line-height: 10em; /* don't change this */
    margin-bottom:0.4em;
    padding-top:0em;
}

span.note.dash {
  margin-left: 0.09em;
  margin-right: 0.09em;
}

span.note.barline {
    letter-spacing: -0.2em;
    margin-right: .2em;
    margin-left: .2em;
    padding:.2em;
}

span.note.double_barline {
    font-weight:bold;
}

div.composition {
  /*
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px highlight dotted;
  */
  padding-left: 10px;
  padding-top:4px;
  white-space:nowrap;
}

@media print {
    div.composition {
      border:none;
  }
}

span.ornament {
    font-size: 1em;
}
span.mordent {
/* TODO: use background image like ornaments bullet */
    font-size: 1.5em;
    left:0.13em;
}
span.upper_attribute + span.upper_attribute {
            margin-top: -0.7em;
}
span.upper_attribute span.ornament {
  font-size: .5em;
}

span.ornament span.note_wrapper span.note {
    font-size: .5em;
}


span.ornament_item.upper_octave_1 {
  padding-top: .5em;
  padding-bottom: .5em;
  /* Embed the bullet in the css file, that will make it easier to create standalone html pages that don't need image files travelling along with them */
  background: url(data:image/gif;base64,R0lGODlhCQAHAID/AAAAAMDAwCH5BAEAAAEALAAAAAAJAAcAQAINjI8Bu8idomHpgQpDAQA7);
  background-repeat: no-repeat;
}

span.ornament_item.lower_octave_1 {
  padding-top: .5em;
  padding-bottom: .5em;
  /* Embed the bullet in the css file, that will make it easier to create standalone html pages that don't need image files travelling along with them */
  background: url(data:image/gif;base64,R0lGODlhCQAHAID/AAAAAMDAwCH5BAEAAAEALAAAAAAJAAcAQAINjI8Bu8idomHpgQpDAQA7);
  background-repeat: no-repeat;
}

span.ornament_item.lower_octave_1 {
  background-position:bottom;
}

/******
 *
 *  Note that ornament dots are implemented differently than regular notes
 */
span.ornament span.upper_octave_1, 
span.ornament span.lower_octave_1 {
    position: static;
    display:inline;
}
span.ornament span.upper_octave_1  {
    top: 1.2em;
    left: .45em;
}
span.ornament span.lower_octave_1  {
    top: -1.2em;
    left: .45em;
}

span.ornament span.ornament_item.upper_octave_1
{
  background-position:top;
}

span.lower_octave_2 {
    bottom: -.79em;
}

span.lower_octave_1 {
    left: 0.2em;
    bottom: -.79em;
}

span.upper_octave_1, span.upper_octave_2, span.mordent{
    top: -1.3em;
}
span.upper_octave_1{
    left: 0.2em;
}
span.note.whitespace {
}
span.upper_octave_indicator {
    top: -1em;
}
span.tala {
  top: -2.2em;
}
span.chord_symbol, span.ending {
  font-family:"Times New Roman",Georgia,Serif;
  font-size: 1em;
  top: -2em;
  left:.2em;
}

span.ending {
  font-family:"Times New Roman",Georgia,Serif;
  font-size: .8em;
  top: -2.75em;
  left:.2em;
}


span.lower_octave_2,span.upper_octave_2 {
  left:.3em;
}
span.lower_octave_1, span.upper_octave_2, span.lower_octave_2,span.upper_octave_1,span.mordent, span.upper_attribute {
    z-index: 2;
    position: absolute;

}

span.kommal_indicator {
 left: 0.2em;
 bottom: 0.05em;
}

span.attribute_key,span.attribute_value {
    font-family: sans-serif;
    font-size: 1.6em; 
}
span.attribute_key {
    font-weight: bold;
}

span.note, span.note_wrapper {
    font-family: sans-serif;
    font-size: 1.6em; 
    position: relative;
    margin-right: -.75px;
    margin-left: -.75px;
    display: inline-block;
}

span.flat, span.sharp {
  position: absolute;
  bottom: 0.7em;
  left: 1em;
}
span.breath_mark {
    /*bottom: .75em;*/
}


span.whitespace {
    margin-right: 0em;
    margin-left: 0em;
}

/* unicode chars need this */
span.note.left_repeat, 
span.note.right_repeat,
span.note.repeat_symbol,
span.note.barline,
span.note.final_barline,
span.note.reverse_final_barline,
span.note.double_barline
{
    margin-right: 0.4em;
    margin-left: 0.4em;
}

span.syllable {
    position: absolute;
    bottom: -2.1em;
    margin-left: 0.03em;
    font-size: 1.01em; 
    font-family: serif;
}