@import "grid.less";

@column-width: 60;
@gutter-width: 5;
@columns: 15;
@total-width: 100%;

* {
   outline: 0px;
   padding: 0px;
   margin: 0px;
   border: 0px;
}

body {
   background: black;
}



h1 {
   color: white;
   text-align: center;
   padding-top: 15px;
   padding-bottom: 10px;
}

h2 {
   .column(15);
   text-align: center;
   border-bottom: thin #888 solid;
   padding-top: 10px;
   padding-bottom: 5px;
}

ul#nav {
   list-style: none;
}

ul#nav > li {
   padding: 5px;
   text-decoration: none !important;
}


.paragraph + .paragraph {
   margin-top: 5px;
}

p + p {
   margin-top: 3px;
}

.paragraph {
   border-radius: 5px;
   clear: both;
   position: relative;
   overflow: hidden;
   background: white;
   padding-left: 0px;
   padding-right: 0px;
}

.paragraph > div {
   padding-top: 5px;
   padding-bottom: 5px;
}

.orig {
   .column(5);
   //position: -webkit-sticky;
   top: 5px;
   height: 100%;
}

.expand {
   .column(9);
   .push(3);
}


.comment {
   .column(9);
   border-left: thin #888 solid;
   padding-left: 5px;
   height: 100%;
}

.hidden {
   display: none;
}

section#commentary {
   .column(10);

   background: green;
}

.instructions{
   margin-top: 1em;
}

@media print {
  .button {
    display: none;
  }

  section#sidebar {
    display: none;
  }

  article {
     .column(15);
     text-align: justify;
  }

}

@media screen {
  .paragraph {
    border: thin #888 solid;
 }

  .button {
    font: lighter small monospace;
    color: blue;
    border: groove grey 3px;
    background: grey;
    position:absolute;
    left: 2em;
    top: 1em;
    padding: 0.25em;
  }

  section#sidebar {
     .column(2);
     .push(1);
     color: white;
     background: #888;
     position: -webkit-sticky;
     top: 0px;
     border: thin #888 solid;
     border-radius: 5px;
     text-align: center;
  }

  article {
     .column(11);
     text-align: justify;
  }

}