/*******************r STYLE SHEETS FOR RESET ********************/ 
    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, /*ol, ul, li,*/
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    /*
    ol, ul {
      list-style: none;
    }
    */
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    dt {
      font-weight: bold;
    }
    .subtle {
      color: #aaaaaa;
    }

    /***************************** STYLING OF JQUERY UI ELEMENTS*******************************/

    .ui-datepicker-header {
      color: #11a8be;
    }

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
      border: 1px solid #c5c5c5;
      background-color: #63bc45;
      background-color: #17A750;
    }

    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
      border: 1px solid #c5c5c5;
      background: #777777;
      color: #ffffff;
    }


    /***************************** DEFAULT STYLING *******************************/

    html, body {
      font-size: 14pt;
      line-height: 1.2;
      height: 100%;
    }
    body {
      color: #010101;
      font-family: Metrophobic, sans-serif;
      z-index: 1;
    }
    a {
      color: #010101;
      font-family: Metrophobic, sans-serif;
      text-decoration: underline;
    }
    a:hover {
      color: #11a8be;
    }
    b {
      font-weight: 800;
    }
    p {
      font-family: Metrophobic, sans-serif;
      padding: 0.5em 0;
    }
    h1 {
      font-size: 22pt;
      color: #010101;
      font-family: Quicksand, Metrophobic, sans-serif;
      font-weight: normal;
      padding: 0 0 0.5em;
    }
    h2 {
      font-size: 16pt;
      line-height: 18pt;
      color: #11a8be;
      font-family: Quicksand, Metrophobic, sans-serif;
      font-weight: normal;
      padding: 0.5em 0 0.5em;
    }
    h3 {
      font-family: Metrophobic, sans-serif;
      color: #11a8be;
    }
    ol li {
      margin-bottom: 0.5em;
      font-family: Metrophobic, sans-serif;
    }
    #error_message, .error_message {
      color: #cc0000;
    }
    #message, .message {
      color: #00b200;
    }
    .half_left {
      float: left;
      width: 45%;
      margin-right: 5%;
      padding-top: 1em;
      padding-bottom: 1em;
    }
    .half_right {
      float: right;
      width: 45%;
      margin-left: 5%;
      padding-top: 1em;
      padding-bottom: 1em;
    }
    .artistclerk_speech_bubble {
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      border: solid 3px #11a8be;
      margin: 10px;
      padding: 10px;
      width: 75%;
      float: left;
    }
    .user_speech_bubble {
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      border: solid 3px #63bc45;
      border: solid 3px #17A750;
      margin: 10px;
      padding: 10px;
      width: 75%;
      float: right;
    }
    .artistclerk_speech_bubble ul.vertical li label, 
    .user_speech_bubble ul.vertical li label {
      float: left;
      text-align: left;
      width: 75%;
    }
    .artistclerk_speech_bubble ul.vertical li input, 
    .user_speech_bubble ul.vertical li input {
      float: left;
    }
    /*
    .user_speech_bubble ul.vertical li input.submit-button {
      float: right;
    }
    .user_speech_bubble ul.vertical li input.submit-button-2 {
      float: left;
    }
    */

    #list.displayme, #details.displayme, #list_close_button_top.displayme, #list_close_button_bottom.displayme, #add_button.displayme
    {
      display: block;
    }
    #list.hideme, #details.hideme, #list_close_button_top.hideme, #list_close_button_bottom.hideme, #add_button.hideme
    {
      display: none;
    }
    #sidebar h1.artist_clerk_logo {
      font-family: Kalam, cursive;
    }
    .button, .button-2 {
      float: right;
      outline: 0 none;
      background-color: #63bc45;
      background-color: #17A750;
      color: #ffffff;
      font-weight: bold;
      border: 1px solid transparent;
      border-radius: 0;
      cursor: pointer;
      display: inline-block;
      font-size: 0.9rem;
      line-height: 1;
      margin: 0 0.3rem 1rem;
      padding: 0.6rem 0.8rem;
      text-align: center;
      transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;
      vertical-align: middle;
      text-decoration: none;
    }
    .button-2 {
      background-color: #11a8be;
      float: left;
    }
    #sidebar .button {
      color: #17A750;
      background-color: #ffffff;
      margin: 15px auto;
      display: block;
    }
    .button:hover {
      background-color: #11a8be;
      color: #ffffff;
    }
    .float-right {
      float: right !important;
    }
    .text-right {
      text-align: right;
    }
    img {
      padding: 5px;
    }
    img {
      border-style: none;
    }
    #sidebar {
      float: left;
      width: 11%;
      height: 100%;
      padding: 2%;
      background-color: #11a8be;
      color: #ffffff;
      font-family: Quicksand, Metrophobic, sans-serif;
      font-size: 1.4rem;
      z-index: 1;
    }
    #sidebar h1 {
      color: #ffffff;
      font-family: Quicksand, Metrophobic, sans-serif;
      text-align: center;
    }
    #sidebar .menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* TO DO: Figure out why tool tips flicker in IE. Order of onMouseOver and onMouseOut may be reversed compared to other browsers. */
    #sidebar ul li  {
      height: 1.4em;
    }
    #sidebar .menu a {
      color: #ffffff;
      font-family: Quicksand, Metrophobic, sans-serif;
      font-weight: normal;
      font-size: 20pt;
      padding: 1rem 0;
      text-decoration: none;
    }
    span.menu-hint {
      font-family: Quicksand, Metrophobic, sans-serif;
      font-size: 14pt;
      line-height: 1.2;
      width: 120px;
      background-color: black;
      color: #fff;
      padding: 5px;
      border-radius: 6px;
      top: -2em;
      left: 4em; 
      position: relative;
      z-index: 100;
      visibility: hidden;
    }
    span.menu-hint::after {
      content: " ";
      position: absolute;
      top: 50%;
      right: 100%; /* To the left of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }
    #page {
      float: left;
      width: 81%;
      max-width: 600px;
      height: 100%;
      padding: 2%;
    }
    #wide_page {
      float: left;
      width: 81%;
      max-width: 900px;
      height: 100%;
      padding: 2%;
    }
    #list {
      display: block;
      float: left;
      width: 26%;
      padding: 2%;
      border-right: solid 3px #63b345;
      border-right: solid 3px #17A750;
      min-height: 100%;
      z-index: 1;
    }
    #list_close_button_top, #list_close_button_bottom {
      display: none;
    }
    #add_button {
      display: block;
    }
    #details {
      float: left;
      width: 50%;
      padding: 2%;
      z-index: 1;
    }
    #details img {
      width: 40%;
    }
    #buttons {
      float: left;
      width: 96%;
      padding: 2%;
      display: none;
      border-bottom: solid 3px #efaa3a;
      margin-bottom: 1em;
      text-align: center;
    }
    #browser_window {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%; 
      height: 100%; 
      z-index: 100; 
      background-color: #000000;
      filter: alpha(opacity=80);
      -moz-opacity:0.8;
      opacity: 0.8;
    }
    #history_popup {
      width: 90%;
      max-width: 600px;
      padding: 20px;
      background-color: #ffffff;
      border: solid 1px #999999;
      border-radius: 7px;
      z-index: 1001;
      position:fixed;
      left: 50%;
      top: 50%;
      -ms-transform: translate(-50%,-50%);
      -moz-transform:translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    #history_image {
      height: 250px;
      max-height: 80%;
      margin: 10px auto;
    }
    table.report, table.report td {
      margin: 20px auto;
      border: solid 1px #cccccc;
      border-collapse: collapse;
    }
    table.report tr td {
      padding: 5px;
    }
    table.report tr.heading td {
      color: #ffffff;
      background-color: #17A750;
    }

    /***************************** FORM STYLING ************************************/
    ul.vertical, ul.vertical2 {
      padding: 1em 1em 0 1em;
      list-style: none;
    }
    ul.vertical li, ul.vertical2 li {
      /* float: left; to ensure parent li expands to hold floated child label */
      clear: left; /* see page 130 The Art and Science of CSS */
      width: 100%; /* see page 130 The Art and Science of CSS */
      padding-bottom: 0.5em;
      line-height: 14px;
    }
    ul.horizontal {
    }
    ul.horizontal li {
      display: inline;
      padding-right: 10px;
    }
    ul.vertical li label {
      float: left;
      width: 200px;
      margin-right: 1em;
      line-height: 18px;
      text-align: right;
    }
    ul.vertical2 li label {
      float: left;
      width: 28em;
      margin-right: 1em;
      line-height: 18px;
      text-align: right;
    }
    ul.vertical li input[type=text], ul.vertical2 li input[type=text] {
      width: 250px;
    }
    ul.vertical li select, ul.vertical2 li select {
      width: 250px;
    }
    ul.vertical li textarea, ul.vertical2 li textarea {
      float: left;
      width: 250px;
      height: 120px;
    }
    /* Format these so that big lists of checkboxes and radio buttons look good. */
    /* This includes districts, species and products. */
    ul.list {
      padding: 0px;
    }
    ul.list li {
      line-height: 14px;
      padding-bottom: 0px;
    }
    ul.padded li {
      line-height: 1.2rem;
      padding-bottom: 10px;
    }

    /***************************** FOR LOW RES PHONES ************************************/

    @media only screen and (max-width: 480px) {
      html, body {
        font-size: 12pt;
      }
      h1, #sidebar h1 {
        font-size: 14pt;
      }
      #sidebar  {
        text-align: center;
      }
      #sidebar h1.artist_clerk_logo {
        display: none;
      }
      #sidebar ul li  {
        height: 1.6em;
      }
      /* large font-awesome icons used here */
      #sidebar .menu a {
        text-align: center;
        font-size: 22pt;
        color: #ffffff;
      }
      span.menu-text {
        display: none;
      }
      span.menu-hint {
        display: inline;
      }
      #buttons {
        display: block;
      }
      #list {
        display: none;
        float: left;
        width: 81%;
        padding: 2%;
        border-right: solid 0 #efaa3a;
      }
      #list_close_button_top, #list_close_button_bottom {
        display: none;
      }
      #add_button {
        display: block;
      }
      #details {
        float: left;
        width: 81%;
        padding: 2%;
      }
      ul.vertical li label {
        text-align: left;
      }
      #sidebar .button {
        color: #ffffff;
        background-color: #11a8be;
        font-size: 0.7rem;
        margin: 15px auto;
	text-decoration: underline;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
        display: block;
      }
    }

    /***************************** FOR LOW RES MONITORS ************************************/

    @media only screen and (min-width: 481px) and (max-width: 1050px) {
      html, body {
        font-size: 13pt;
      }
      h1, #sidebar h1 {
        font-size: 15pt;
      }
      #sidebar  {
        text-align: center;
      }
      #sidebar ul li  {
        height: 1.6em;
      }
      /* large font-awesome icons used here */
      #sidebar .menu a {
        text-align: center;
        padding: 0.75rem 0.75rem;
        font-size: 22pt;
        color: #ffffff;
      }
      #sidebar .button {
        font-size: 0.7rem;
      }
      span.menu-text {
        display: none;
      }
      span.menu-hint {
        display: inline;
      }
      #list {
        display: block;
      }
      #list_close_button_top, #list_close_button_bottom {
        display: none;
      }
      #add_button {
        display: block;
      }
      ul.vertical li label {
        text-align: left;
      }
    }

    /***************************** MEDIUM RES MONITORS ************************************/

    @media only screen and (min-width: 1051px)  and (max-width: 1330px) {
      #sidebar .menu a {
        color: #ffffff;
      }
      span.menu-text {
        display: none;
      }
      span.menu-hint {
        display: inline;
      }
      #list {
        display: block;
      }
      #list_close_button_top, #list_close_button_bottom {
        display: none;
      }
      #add_button {
        display: block;
      }
    }
    @media only screen and (min-width: 1051px)  and (max-width: 1200px) {
      #sidebar .menu a {
        font-size: 14pt;
      }
    }
    @media only screen and (min-width: 1201px)  and (max-width: 1330px) {
      #sidebar .menu a {
        font-size: 16pt;
      }
    }

    @media only screen and (min-width: 1331px)  and (max-width: 1600px) {
      #sidebar .menu a {
        font-size: 18pt;
        color: #ffffff;
      }
      span.menu-text {
        display: inline;
      }
      span.menu-hint {
        display: none;
      }
      #list {
        display: block;
      }
      #list_close_button_top, #list_close_button_bottom {
        display: none;
      }
      #add_button {
        display: block;
      }
    }

    @media only screen and (min-width: 1051px) {
      html, body {
        font-size: 14pt;
      }
      h1, #sidebar h1 {
        font-size: 22pt;
      }
      #sidebar  {
        text-align: left;
      }
      #sidebar .menu a {
        text-align: left;
      }
      span.menu-text {
        display: inline; 
      }
      span.menu-hint {
        display: none;
      }
      #list {
        display: block;
      }
    }

    /***************************** HIGH RES MONITORS ************************************/

    @media only screen and (min-width: 1601px) {
      #sidebar .menu a {
        font-size: 22pt;
      }
    }