/*
    Stylesheet for Present Thoughts article that has notes
    file:    has_notes.css
    version: 1.3
*/

#content {
  height:   calc(100% - 261px);
  margin: 0 auto;
}

#photo-box {
  margin: 0 auto;
  text-align: center;
  background-color: #330907;
  border: 1pt solid #330907;
}

#photo-display {
  margin: 0 auto;
  height: auto;
}

#displayed-image {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

#float-frame {
  height:   calc(100% - 65px);
  width: 100%;
}

#float-frame::after {
  content: "";
  clear:   both;
  display: block;
}

#leftside-wrapper {
  width:    60%;
  height:   100%;
  float:    left;
  padding:  0 10px 0 10px;
}

#text {
  height:      100%;
  padding:     5px;
  font-size:   1.4em;
  line-height: 1.5em;
  color:       #000064;
  overflow-y:  scroll;
  border:      solid 1px #C0C0C0;
}

#rightside-wrapper {
  width:    40%;
  height:   300px;
  float:    left;
  padding:  0 10px 0 10px;
}

#notes-container {
  height: 100%;
}

#notes-title {
  padding:     5px 0;
  font-weight: bold;
  color:       #073310;
}

#notes-box {
  height:      100%;
  margin:      0;
  padding:     5px;
  overflow-y:  scroll;
  border:      solid 1px #C0C0C0;
}

span.title {
  font-size:   1.2em;
  color:       #45227a;
}

span.note, .scrip {
  color: blue;
  cursor: pointer;
  cursor: hand;
}

span.note:hover, .scrip:hover {
  color: #FF4000;
}

@media screen and (min-width: 1910px) {
    #content {
      width: 50%;
    }
}

@media screen and (max-width: 1909px) {
    #content {
      width: 55%;
    }
}

@media screen and (max-width: 1499px) {
    #content {
      width: 65%;
    }
}

@media screen and (max-width: 1199px) {
    #content {
      width: 75%;
    }
}

@media screen and (max-width: 1024px) {
    #content {
      width: 85%;
    }
}

@media screen and (max-width: 768px) {
    #content {
      width: 100%;
      height: calc(100% - 200px);
      padding: 0 5px;
    }

    #site-title, .article-title {
      font-size: 1.4em;
      line-height: 1.6em;
    }

    #float-frame {
      height: calc(100% - 74px);
    }

    #leftside-wrapper {
      float:  none;
      width:  100%;
      height: 78%;
      padding: 0 5px;
    }

    #rightside-wrapper {
      float:  none;
      width:  100%;
      height: 18%;
      padding: 0 5px;
    }
}

@media screen and (max-width: 768px) and (max-height: 800px) {
    #content {
      height: calc(100% - 145px);
    }

    #float-frame {
      height: calc(100% - 75px);
    }

    #leftside-wrapper {
        height: 58%;
    }
    
    #rightside-wrapper {
        height: 38%;
    }
}