html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-size:16px;
      }
      body { overflow:hidden; }

      body, div, p, span, h1,h2,h3,h4,h5,h6,a,ol,ul,li, textarea, input {
        font-family: 'Karla', sans-serif;
      }

      .header {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:56px;
        background:rgba(255,255,255,1);
        overflow:hidden;
        text-align:left;
        padding: 4px 0;
        z-index:99;
      }

      #cc { 
        float:left;
        z-index:9;
        width:49%;
        padding:0px;
        }

      #ccright { 
        float:right;
        text-align:right;
        z-index:9;
        width:49%;
        
        }

      .header h1 {


        font-weight:700;
      }
      p.riversub {font-size:2em; padding:0px; margin:0px;}
      p.rivercoods {}


      #map-canvas {
        position:relative;
        top:0;
        left:0;
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        overflow:hidden;
      }

      /**********OPTIONS********************/
      #options {
        /*for mobile have to start with a width and animate the conatianer not the child*/
        width:auto;
        overflow:hidden;
      }
        #options div.options-label {
          float:left;
          width:auto;
          height:48px;
          padding-top:8px;
          padding-bottom:8px;
          background:#555;
          color:#fff;
          margin-top:26%;
          cursor:pointer;
          text-align:center;
          -webkit-box-shadow: -3px 0px 8px 0px rgba(2, 0, 0, 0.75);
      -moz-box-shadow:    -3px 0px 8px 0px rgba(2, 0, 0, 0.75);
      box-shadow:         -3px 0px 8px 0px rgba(2, 0, 0, 0.75);
      }
        #options div.options-label a,
        #options div.options-label a:link,
        #options div.options-label a:visited,
        #options div.options-label a:hover,
        #options div.options-label a:active {
          color:#ccc;
          font-size:10px;
          text-decoration:none;
          font-weight:700;
        }

        #options div.theoptions {
          
          float:right;
          
          background:transparent;
          color:#aaa;
          
          overflow:hidden;
          
        }
          div.theoptions ul {
            margin:0px;
            padding:0px;
            list-style-type:none;
            float:right;
            margin-right:16px;
          }
            div.theoptions ul li {
              float:right;
              margin:0px;
              padding:0px;
              list-style-type:none;
              text-align:center;
              margin-right:24px;
              margin-top:6px;
            }

            div.theoptions ul li a,
            div.theoptions ul li a:link,
            div.theoptions ul li a:visited {
              color:#777;
              text-decoration:none;
              font-size:26px;
              line-height:10px;
            }
            div.theoptions ul li a.showing,
            div.theoptions ul li a.showing:link,
            div.theoptions ul li a.showing:visited,
            div.theoptions ul li a.showing:hover,
            div.theoptions ul li a:hover,
            div.theoptions ul li a:active {
              color:#64A3FF;
              text-decoration:none;
              font-size:26px;
            }
              div.theoptions ul li a span.iconlabel {
                font-size:10px;
              }

        #mapoptions {
          position:absolute;
          top:16px;
          right:100px;

        }

        .htmlcssjs {
          position:absolute;
          bottom:24px;
          left:12px;
          display:none;
        }

          #mapoptions ul.mapops {

          }
          #mapoptions ul.mapops li {
              font-size:14px;
              line-height:16px;
          }
            #mapoptions ul.mapops li span.desc {
              display:block;
              margin:0px;
              padding:0px;
              font-size:10px;
              line-height:11px;
          }


          #map-settings {
            position:absolute;
            top:-1000px;
            left:0px;
            z-index:97;
            background:rgba(255,255,255,0.8); width:33%; overflow-x:hidden; overflow-y:auto;
            height:auto;
            padding:4px 12px;
            border-radius:4px;
            text-align:center;
          }

            #map-settings .mapSettingsToggle {
                display:inline-block;
                background:#fff;
                width:auto;
                height:auto;
                padding:4px;
                border-radius:4px;
                text-decoration:none;
                color:#666;
            }

            #map-settings ul.ms {
              display:none;
              margin:10px 0px;
              padding:4px;
              list-style-type:none;
              background:rgba(255,255,255,0.7);
              border-radius:4px;
            }

            #map-settings ul.ms li {
              text-align:center;
              color:#999;
              padding:4px 0px;
              cursor:pointer;
            }

            #map-settings ul.ms li:hover {
              color:orange;
            }

            #map-settings ul.ms li.showing {
              color:orange;
            }

            span.sicon {
              font-size:1.8em;
            }

         .section-inside {
          width:88%;
          margin:0 auto;
          overflow:hidden;
        }

          .leftpane_a {
            float:left;
            width:34%;
          }

          .rightpane_a {
            float:left;
            width:66%;
          }

        #the-river {
          /*background-image:url(images/river/c.jpg);
          background-repeat: no-repeat;
          background-size: 100%;*/
        }

        .achart {
          position:relative;
          width:100%;
          height:12em;
          overflow:hidden;
          margin-bottom:0.2em;
          background:rgba(0,0,0,0.0);

        }

        .lblHolder {
          position:relative;
          margin:0;
          padding:0;
          overflow:hidden;
        }
          .lblHolder span.depth_start, .lblHolder span.flow_start {
            display:inline-block;
            width:49%;
            text-align:left;
          }
           .lblHolder span.depth_end, .lblHolder span.flow_end {
            display:inline-block;
            width:49%;
            text-align:right;
          }

        /*FONT SIZES */

        /*LARGESTS*/
        p {font-size:2rem;}
        p.riversub {font-size:1.2rem; padding:0px; margin:.9rem 0 0 0.5rem;}
        div.theresult {margin-top:8px; margin-bottom:8px;}
        div.section-inside h2 {
          font-size:2.5rem;
          margin:2rem 0;
          text-align:center;
        }

        p.compactp {
          font-size:1.3rem;
          padding:0;
          margin:2px 0;
        }

        div.resourcesH {
          position:relative;
          overflow:hidden;
        }

        div.aresource {
          float:left;
          overflow:hidden;

        }
          span.aresrourceTitle {
            font-weight:700;
          }
          p.aresrourceDesc {

          }


        p.addme {
          font-size:3rem;
          font-weight:700;
        }
          p.addme span.addmeadd {
            display:block;
            font-size:0.5rem;
            font-weight:400;
          }



        /*MAP MARKERS*/
        .markerContent {

        }
         .markerContent h1 {font-size:1.4rem;}
         .markerContent h2 {font-size:1.1rem;}
         .markerContent p {font-size:0.9rem;}

         .markerContent p a {

         }

        #work {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #work #closer {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #work #closer a,
            #work #closer a:link,
            #work #closer a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #work #closer a:hover,
            #work #closer a:active {
              color:#ffffff;
              text-decoration:none;
            }

        #contact-form {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #contact-form #closercontact {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #contact-form #closercontact a,
            #contact-form #closercontact a:link,
            #contact-form #closercontact a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #contact-form #closercontact a:hover,
            #contact-form #closercontact a:active {
              color:#ffffff;
              text-decoration:none;
            }

        .over-content {
          margin:0px;
          padding:3rem;
        }

          .over-content form {
            text-align:right;
          }

            .over-content form input {
              width:32rem;
              font-size:1.6rem;
              padding:1rem;
              margin:1rem 0;
            }

            .over-content form textarea {
              width:32rem;
              font-size:1.4rem;
              height:6rem;
              padding:1rem;
              margin:1rem 0;
            }

            a.submitcontact,
            a.submitcontact:link,
            a.submitcontact:visited {
              display:inline-block;
              padding:0.8rem;
              font-size:1.6rem;
              color:#111111;
              background:#eeeeee;
              border-radius:4px;
              text-decoration:none;
            }

            a.submitcontact:hover,
            a.submitcontact:active {
              background:#ffffff;
            }

        @media (max-width: 1000px) {

          #map-settings {
            width:38%;
          }

          #work {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #work #closer {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #work #closer a,
            #work #closer a:link,
            #work #closer a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #work #closer a:hover,
            #work #closer a:active {
              color:#ffffff;
              text-decoration:none;
            }

        #contact-form {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #contact-form #closercontact {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #contact-form #closercontact a,
            #contact-form #closercontact a:link,
            #contact-form #closercontact a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #contact-form #closercontact a:hover,
            #contact-form #closercontact a:active {
              color:#ffffff;
              text-decoration:none;
            }

        .over-content {
          margin:0px;
          padding:3rem;
        }

          .over-content form {
            text-align:right;
          }

            .over-content form input {
              width:32rem;
              font-size:1.6rem;
              padding:1rem;
              margin:1rem 0;
            }

            .over-content form textarea {
              width:32rem;
              font-size:1.4rem;
              height:6rem;
              padding:1rem;
              margin:1rem 0;
            }

            a.submitcontact,
            a.submitcontact:link,
            a.submitcontact:visited {
              display:inline-block;
              padding:0.8rem;
              font-size:1.6rem;
              color:#111111;
              background:#eeeeee;
              border-radius:4px;
              text-decoration:none;
            }

            a.submitcontact:hover,
            a.submitcontact:active {
              background:#ffffff;
            }


        }

        @media (max-width: 900px) {

          #map-settings {
            width:48%;
          }


          #work {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #work #closer {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #work #closer a,
            #work #closer a:link,
            #work #closer a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #work #closer a:hover,
            #work #closer a:active {
              color:#ffffff;
              text-decoration:none;
            }

        #contact-form {
          position:absolute;
          display:none;
          top:7%;
          left:0px;
          height:86%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #contact-form #closercontact {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #contact-form #closercontact a,
            #contact-form #closercontact a:link,
            #contact-form #closercontact a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #contact-form #closercontact a:hover,
            #contact-form #closercontact a:active {
              color:#ffffff;
              text-decoration:none;
            }

        .over-content {
          margin:0px;
          padding:3rem;
        }

          .over-content form {
            text-align:right;
          }

            .over-content form input {
              width:32rem;
              font-size:1.6rem;
              padding:1rem;
              margin:1rem 0;
            }

            .over-content form textarea {
              width:32rem;
              font-size:1.4rem;
              height:6rem;
              padding:1rem;
              margin:1rem 0;
            }

            a.submitcontact,
            a.submitcontact:link,
            a.submitcontact:visited {
              display:inline-block;
              padding:0.8rem;
              font-size:1.6rem;
              color:#111111;
              background:#eeeeee;
              border-radius:4px;
              text-decoration:none;
            }

            a.submitcontact:hover,
            a.submitcontact:active {
              background:#ffffff;
            }

        }

        @media (max-width: 700px) {
          
          p {font-size:1rem;}
          p.riversub {font-size:1.4rem; padding:0px; margin:1.4rem 0 0 0px;}

          #map-settings {
            width:68%;
          }

            div.theoptions ul {
                margin:12px 0 0 0px;
                padding:0px;
                list-style-type:none;
                float:right;
                margin-right:8px;
              }
                div.theoptions ul li {
                  float:right;
                  margin:0px;
                  padding:0px;
                  list-style-type:none;
                  text-align:center;
                  margin-right:16px;
                  margin-top:2px;
                }

                div.theoptions ul li a,
                div.theoptions ul li a:link,
                div.theoptions ul li a:visited {
                  /*color:#ccc;*/
                  text-decoration:none;
                  font-size:16px;
                  line-height:10px;
                }
                div.theoptions ul li a.showing,
                div.theoptions ul li a.showing:link,
                div.theoptions ul li a.showing:visited,
                div.theoptions ul li a.showing:hover,
                div.theoptions ul li a:hover,
                div.theoptions ul li a:active {
                  /*color:#64A3FF;*/
                  text-decoration:none;
                  font-size:14px;
                }
                  div.theoptions ul li a span.iconlabel {
                    font-size:10px;
                  }

            #work {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #work #closer {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #work #closer a,
            #work #closer a:link,
            #work #closer a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #work #closer a:hover,
            #work #closer a:active {
              color:#ffffff;
              text-decoration:none;
            }

        #contact-form {
          position:absolute;
          display:none;
          top:5%;
          left:0px;
          height:90%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #contact-form #closercontact {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #contact-form #closercontact a,
            #contact-form #closercontact a:link,
            #contact-form #closercontact a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #contact-form #closercontact a:hover,
            #contact-form #closercontact a:active {
              color:#ffffff;
              text-decoration:none;
            }

        .over-content {
          margin:0px;
          padding:3rem;
        }

          .over-content form {
            text-align:right;
          }

            .over-content form input {
              width:32rem;
              font-size:1.6rem;
              padding:1rem;
              margin:1rem 0;
            }

            .over-content form textarea {
              width:32rem;
              font-size:1.4rem;
              height:6rem;
              padding:1rem;
              margin:1rem 0;
            }

            a.submitcontact,
            a.submitcontact:link,
            a.submitcontact:visited {
              display:inline-block;
              padding:0.8rem;
              font-size:1.6rem;
              color:#111111;
              background:#eeeeee;
              border-radius:4px;
              text-decoration:none;
            }

            a.submitcontact:hover,
            a.submitcontact:active {
              background:#ffffff;
            }


        }

        /*SMALLEST*/
        @media (max-width: 600px) {
          
          p {font-size:1rem;}
          p.riversub {font-size:1.4rem; padding:0px; margin:21px 0 0 0px;}

          #map-settings {
            width:88%;
          }

            div.theoptions ul {
                margin:12px 0 0 0px;
                padding:0px;
                list-style-type:none;
                float:right;
                margin-right:8px;
              }
                div.theoptions ul li {
                  float:right;
                  margin:0px;
                  padding:0px;
                  list-style-type:none;
                  text-align:center;
                  margin-right:12px;
                  margin-top:2px;
                }

                div.theoptions ul li a,
                div.theoptions ul li a:link,
                div.theoptions ul li a:visited {
                  /*color:#ccc;*/
                  text-decoration:none;
                  font-size:14px;
                  line-height:14px;
                }
                div.theoptions ul li a.showing,
                div.theoptions ul li a.showing:link,
                div.theoptions ul li a.showing:visited,
                div.theoptions ul li a.showing:hover,
                div.theoptions ul li a:hover,
                div.theoptions ul li a:active {
                 /* color:#64A3FF;*/
                  text-decoration:none;
                  font-size:14px;
                }
                  div.theoptions ul li a span.iconlabel {
                    font-size:12px;
                  }


              #work {
          position:absolute;
          display:none;
          top:10%;
          left:0px;
          height:80%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #work #closer {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #work #closer a,
            #work #closer a:link,
            #work #closer a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #work #closer a:hover,
            #work #closer a:active {
              color:#ffffff;
              text-decoration:none;
            }

        #contact-form {
          position:absolute;
          display:none;
          top:5%;
          left:0px;
          height:90%;
          width:100%;
          background:rgba(0,0,0,0.9);
          color:#ffffff;
          z-index:129;
        }
          #contact-form #closercontact {
            position:absolute;
            top:1%;
            right:1%;
            font-size:32px;
            color:#aaaaaa;
            z-index:130;
          }
            #contact-form #closercontact a,
            #contact-form #closercontact a:link,
            #contact-form #closercontact a:visited {
              color:#aaaaaa;
              text-decoration:none;
            }
            #contact-form #closercontact a:hover,
            #contact-form #closercontact a:active {
              color:#ffffff;
              text-decoration:none;
            }

        .over-content {
          margin:0px;
          padding:1.4rem;
        }

          .over-content form {
            text-align:right;
          }

            .over-content form input {
              width:94%;
              font-size:1.1rem;
    
              padding:0.6rem;
              margin:1rem 0;
            }

            .over-content form textarea {
              width:94%;
              font-size:0.9rem;
              height:6rem;
              padding:0.6rem;
              margin:1rem 0;
            }

            a.submitcontact,
            a.submitcontact:link,
            a.submitcontact:visited {
              display:inline-block;
              padding:0.5rem;
              font-size:1.1rem;
              color:#111111;
              background:#eeeeee;
              border-radius:4px;
              text-decoration:none;
            }

            a.submitcontact:hover,
            a.submitcontact:active {
              background:#ffffff;
            }


        }