@import url("http://fonts.googleapis.com/css?family=Cardo"); 
@import url("http://fonts.googleapis.com/css?family=Lato");
@import url("http://fonts.googleapis.com/css?family=Quicksand");
/* put hyphen in name to distinguish from regular font
*/
@font-face {
    font-family: 'GFS-Porson';
/*    src: url('http://heml.mta.ca/rigaudon/static/Fonts/Porson/GFSPorson.eot');
    src: url('http://heml.mta.ca/rigaudon/static/Fonts/Porson/GFSPorson.eot?#iefix') format('embedded-opentype');
*/ 
   src: url('../font/GFSPorson.woff') format('woff'),
         url('../font/GFSPorson.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    
    unicode-range:
         U+590-5ff, U+300-345, U+370-3ff, U+1e00-1fff;
}
/* colour definitions */
:root {
    --imperceptable-blue: #E5FFFF;
    --perceptable-blue:  #B3FFFF;
    --true-green: #C9E8C9;
    --sub-green: #BFCE67;
    --noacc-green: #A6D9A6;
    --split: #D4C26A;
    --primary-text: goldenrod;
    --app-crit: chocolate;
    --page-number: #bdb76b;
    --translation: #4682B4;
    --title: #FF6347;
    --commentary: #E1DABB;
    
}


#footer {
    font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', 'Lato', sans-serif!important;
}
body {
  font-family: 'GFS-Porson', 'Quicksand', 'Lato', sans-serif!important;
/*
  font-family:  'GFS-Porson', 'New Athena Unicode', 'GFS Philostratos', serif;
*/
  font-size: 14px;
  background: #eee;
  line-height: 130%;
}



.resize {
  width:200px;
  height:40px;
}

span.ocr_word:first-of-type {
    margin-left:0;
}

span.ocr_word:last-of-type {
    margin-right:0;
}

span.index_word {

  border-style: dashed;
    border-width: 2px;
  border-color: green;
  margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
  min-width: 25px;/* This will only work with inline-block */
  color: #777777;
}
span.ocr_line {
    display: block;
    line-height: 1.9em;
    font-size: 15px;
    text-align: left;
}

p{
    margin: 0;
    padding: 0;
}

.inserted_line {
  border-style: dashed;
    border-width: 2px;
  border-color: green;
  display: inline-block;
  text-align: left;
  min-width:200px;
}

.runsNotAvailable .notAvailable{
    color: #CCCCCC;
}

.documentation {
    margin-bottom: 1em;
}

p span:first-child {
	text-indent: 2em;
}

p:first-child span:first-child {
       text-indent: 0em;
}
span[data-spellcheck-mode] {
   min-width: 10px;
   padding-left: 2px;
   padding-right: 2px;
   margin-left: 2px;
   margin-right: 2px;
}
span[data-spellcheck-mode="True"],
span[data-spellcheck-mode="TrueLower"]
 { 
    background-color: var(--true-green);
}
span[data-spellcheck-mode^="Sub"] {
    background-color: var(--sub-green);
}
span[data-spellcheck-mode="NoAcc"] {
    background-color: var(--noacc-green);
}
span[data-spellcheck-mode^="Dedup"] {
    background-color: #EBF7A5;
}
span[data-spellcheck-mode^="Split"] {
    background-color: var(--split);
}
span[data-spellcheck-mode^="Numerical"] {
    background-color: #55AA55;
}
span[data-spellcheck-mode="PunctStrip"] {
    background-color: #2D882D;
}
span[data-spellcheck-mode="None"] {
    background-color: #FFCCCC;
}
span[data-spellcheck-mode="Manual"] {
    background-color: var(--imperceptable-blue);
}
span[data-manually-confirmed="true"] {
    background-color: var(--imperceptable-blue);
}

/* puts vertical bars alongside text that has been 
identified as app-crit
*/
span.ocr_line[data-app-crit=true] { border-right-color: #341BFF; border-left-color: #341BFF;
border-left-style: solid; border-right-style: solid;
border-right-width: 2px; border-left-width: 2px;
padding-right: 6px; padding-left: 0px;}

.complete_text 
{ 
  border-color: var(--perceptable-blue); 
  border-width:3px; 
  border-style:solid; 
}

#translation_button:hover {
    background-color: var(--translation);
}
.translation_circle {
    fill: var(--translation);
    color: var(--translation);
}

.translation_rectangle {
    fill: var(--translation);
    color: var(--translation);
    stroke: var(--translation);
}


#primary_text_button:hover {
    background-color: var(--primary-text);
}
.primary_text_circle {
    fill: var(--primary-text);
    color: var(--primary-text);
}

.primary_text_rectangle {
    fill: var(--primary-text);
    color: var(--primary-text);
    stroke: var(--primary-text);
}

.selected_rectangle {
    fill-opacity: 0.20;
}

#app_crit_button:hover {
    background-color: var(--app-crit);
}

.app_crit_circle {
    fill: var(--app-crit);
    color: var(--app-crit);
}

.app_crit_rectangle {
    fill: var(--app-crit);
    color: var(--app-crit);
    stroke: var(--app-crit);
}
#page_number_button:hover {
    background-color: var(--page-number);
}

.page_number_circle {
    fill: var(--page-number);
    color: var(--page-number);
}

.page_number_rectangle {
    fill: var(--page-number);
    color: var(--page-number);
    stroke: var(--page-number);
}

#title_button:hover {
    background-color: var(--title);
}

.title_circle {
    fill: var(--title);
    color: var(--title);
}

.title_rectangle {
    fill: var(--title);
    color: var(--title);
    stroke: var(--title);
}


#commentary_button:hover {
    background-color: var(--commentary);
}

.commentary_circle {
    fill: var(--commentary);
    color: var(--commentary);
}

.commentary_rectangle {
    fill: var(--commentary);
    color: var(--commentary);
    stroke: var(--commentary);
}

rect[data-rectangle-line-mode="true"] {
  stroke-dasharray: 10 5;
}

/* Style the form - display items horizontally */
#edits-since-form {
  display: inline;
}

.fhs {
  display: inline;
}
.ctsurn-span {
    width: 5%;
}


/* code to make blinking elements */
@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: blue    
    }    
}    
@keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: blue    
    }    
}    
span.ocr_word{    
    border:2px solid blue;
    border-color: transparent  
}


span.blinker{    
    border:2px solid blue;
    border-color: transparent;  
    -webkit-animation: borderBlink 0.5s ease-in-out 3;    
    animation: borderBlink 0.5s ease-in-out 3;    
}

span.zoning_hilight{    
    border:2px solid blue;
}

code {
    color: black;
}

/* For Markdown */
section p {
  margin-bottom: 15px; /* between paragraphs */
  margin-left: 10px;
  }
   
/* For KWIC search return */

.search_results .ocr_word {
    background-color: inherit;
}
.match {
    font-weight: bold;  
    background-color: white;
}
.modal-dialog {
    text-align: left;
}

button { 
    background-color: white;
}

button a {
    color: black;
}

.announcement {
    padding-bottom: 10px;
}

/** position context menu and tooltip relative to each other,
 *  so tooltip is below
 **/
.context-menu-list {
    z-index: 100;
}
.tooltip {
    z-index: 1;
}

.inactive {
    opacity: 0.5;
}

/* new material for new typeahead */

.typeahead,
.tt-query,
.tt-hint {
    /*
  width: 200px;
    font-size: 14px;
  line-height: 30px;
  height: 20px;
  padding: 8px 12px;
*/
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.twitter-typeahead {
      /* the new typeahead puts this down with the 
     top at the bottom of the line, so we raise it
     here
  */
  vertical-align: top;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 200px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 14px;
  line-height: 20px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}