body {
    background: #fff;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    font-family: 'Noto Sans', "Helvetica Neue", Helvetica, sans-serif;
}

#appname {
    font-size: 30px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}


#container{
    max-width: 980px;
    margin: auto;
    text-align: left;
}

#topmenu{
         background-color: #555555;
         color: #fff;
         padding: 5px;
                margin-top:10px; 
         border-top: 2px solid #a61717;
         border-bottom: 2px solid #a61717;
	 margin-bottom: 10px;
}

      a.menuitem {
         padding-left: 10px;
         padding-right: 10px;
         color: #fff;
         text-decoration: none;
      }

      a.menuitem:hover{
         color: #efefef;
      }

      #summary {
         margin-top: 10px;
	 margin-bottom: 10px;
         padding: 5px;
         color: #555555;
      }

      #sumdiv{
	  margin-top: 10px;
      }

      div.hresult {
         background-color: #555555;
         color: #fff;
         padding: 5px;
                margin-top:10px; 
      }

      div.tresult {
         padding:5px;
      }

      div.result { 
         white-space:pre;
         font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
         padding: 5px;
         border: 1px solid #cccccc;
         background-color: #efefef;
	 overflow: auto;
      }

      span.match {
        color: #a61717;
      }

      span.mroot {
        font-weight: bold;
      }

      span.mstart {
         font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
        background-color: #efefef;
        font-size: 12px;
        color: #a61717;
        border-left: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        padding:1px;
      }

      #querydiv{
         background-color:#efefef;
         border: 1px solid #cccccc;
         padding: 5px;

      }

      #buttondiv{
	  text-align: center;
    }

/*** meta box  ***/
#metatable {
    float: right;
    width: 270px;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid #cccccc;
}

#metatable td {
  border-bottom: 1px solid #cccccc;
  vertical-align: top;
}


#metabox {
    float:right;
    min-width:250px;
    margin-right:2px;
    overflow:hidden;
    border: 1px solid #cccccc;
    border-bottom: none;
    white-space: normal;
}

.metaline {
    border-bottom: 1px solid #cccccc;
    min-width: 250px;
    background-color: white;
}

.metavalue {
    float:right;
    width: 130px;
    padding-left: 10px;
}

#metafix {
    clear: both;
}

/* documentation */

.queryexample {
             white-space:pre;
         font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
         padding: 5px;
         border: 1px solid #cccccc;
	 color: white;
         background-color: #000000;
	 margin: 10px;
}

.outputexample {
         white-space:pre;
         font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
         padding: 5px;
         border: 1px solid #cccccc;
	 color: black;
         background-color: #efefef;
	 margin: 10px;
}

.sidenote{
    border: 1px solid #cccccc;
    margin: 20px;
    padding: 10px;
    background-color: #ccccef;
}

/* summary  */

#summary_button {
//    color: #a61717;
    color: navy;
    cursor: hand;
}

td {
  font-size: 14px;  
}

td.header{
       padding: 3px;
        background-color: #555555;
         color: #fff;
}

td {
    padding-left: 3px;
    padding-right: 3px;
}

td.count {
    text-align: right;
} 


.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}