/* Fancy heading like http://pegjs.majda.cz/online */
#title h1 {
  float: left;
  margin: 0;
  padding: .5em 1.5em;
  border-top-left-radius: .5em; -moz-border-radius-topleft: .5em;
  border-bottom-left-radius: .5em; -moz-border-radius-bottomleft: .5em;
  font-size: 1em; text-shadow: black 0 0 1.25px;
  text-align: center;
  background-color: #3b7; color: white;
}
#title h1 a {
  text-decoration: none;
}
#title h2 {
  float:left;
  padding: .5em 1.5em;
  border-top-right-radius: .5em; -moz-border-radius-topright: .5em;
  border-bottom-right-radius: .5em; -moz-border-radius-bottomright: .5em;
  font-size: 100%; text-shadow: black 0 0 1.25px;
  text-align: center;
  background-color: #37b; color: white;
}
a, a:visited { color: #3d586c; }
#title a, #title a:visited { color: #ff7; }


/* Course layout elements */
#main { display: none; position: absolute; top: 0em; left: 0; right: 0; bottom: 0;}
h2 { margin: 0; border: none; }
.column { float:left; margin-right: 1em; }
.task    { float:left; }
.disabled { color: gray; background-color: #fff; }
.save { display: none; }


/* Fancy messages like http://pegjs.majda.cz/online */
.message {
  border-radius: .3em; -moz-border-radius: .3em;
  padding: .28em .5em;
  float:left;
  margin-left: .2em; 
  margin-top: 0;
  margin-bottom: 0;
}
.message a.view { display: block; float: right; }
.message .size-and-time { visibility: hidden; float: right; font-size: 70%; margin: .3em 1em; color: #800; }
.message:hover .size-and-time { visibility: visible; }
.message .error { background-color: #f77; white-space: pre-wrap; }
.message .warnings { background-color: #ff7; white-space: pre-wrap; }
.message .progress {
  padding-left: 40px;
  /* Spinner image generated by http://www.loadinfo.net/. */
  background: #ffff80 url("spinner-16x16-progress.gif") 14px center no-repeat;
}


/* Schema gets color A, Data color B, and Validation a gradient A to B. */
.textInput         { clear:both; padding: 2px; margin: 0em; text-indent: 0px; border: 1px; }
.schema-color      { background-color: #afa; }
#schema .textInput { border-left: .7em solid #afa; }
.data-color        { background-color: #9bf; }
#data .textInput   { border-left: .7em solid #9bf; }
.validation-color.error { background: none; }
.validation-color  {
    background-color: #9ee;
    background: -webkit-linear-gradient(left, #afa , #9bf); /* For Safari */
    background: -o-linear-gradient(right, #afa, #9bf); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #afa, #9bf); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #afa , #9bf); /* Standard syntax */
}

#settings         { padding: .5em 0; }
#starting-node    { background-color: #9bf; } /* needs Data so color B */
#view a           { /* these need a Schema so use color A */
    background-color: #afa;
    border-radius:.3em;
    padding: .3em;
    font-size: small;
    line-height: 200%;
}
#view a:hover     { background-color: #9d9; }
#view a.disabled  { color: #eee; background-color: #777; }


/* Validation results */
#valResults-header {
  /*margin: 1.25em 0 0 0;*/
  border: none;
  padding: .25em 1.2em .25em 1.2em;
  font-size: 80%;
  background-color: #ccc;
}
#valResults {
  /*overflow: auto;*/
  padding-left: 1em;
  background-color: #fff;
}


/* permalink controls */
#permalink { clear:both; padding: .5em 0; }


.hilightSolution { background-color: #fea; }
.hilightRule { border-top: 1px solid #8fc; border-bottom: 1px solid #8fc; border-left: .25em solid #8fc; border-right: .25em solid #8fc; background-color: #fea; }
.hilightData { border-top: 1px solid #7bf; border-bottom: 1px solid #7bf; border-left: .25em solid #7bf; border-right: .25em solid #7bf; background-color: #fea; }
.remainingData { background-color: #dae; border: thin solid #dae; }
.allRemainingData { background-color: #fdf; border: thin solid #ece; }
.remainingDataContainer {
  margin: 0;
}
.schemaflow { border-top: 1px solid #8fc; border-bottom: 1px solid #8fc; border-left: .25em solid #8fc; border-right: .25em solid #8fc; }
.schemapre { border:.5em solid #7fb; }
.dataflow { border-top: 1px solid #7bf; border-bottom: 1px solid #7bf; border-left: .25em solid #7bf; border-right: .25em solid #7bf; }
.datapre { border:.5em solid #7bf; }
.solution { border-top: 1px solid #fb7; border-bottom: 1px solid #fb7; border-left: .25em solid #fb7; border-right: .25em solid #fb7; }
.inputBox { float:left; margin: .5em; }
.textButton { background-color: #ddd; border: 1px solid #000; }
.preload { float:left; border:3px solid #efe; margin-left: 1em;}
.preload-desc { float:left; border:3px solid #fff; text-align: right;}
.keyword { color: #a020f0; }
.prefix { color: #228b22; }
.localName { color: #008b8b; }
.shapeName { color: #a0522d; }
.shape {  }
.IRI { color: #00f; }
.bnode { color: #a3a; }
#schema .shapeName > .IRI { color: #a0522d; }   /* .shapeName trumps .IRI */
#schema .shapeName > .bnode { color: #a0522d; } /* .shapeName trumps .bnode */
.literal { color: #722; }
.langtag { color: #770; }
/*
.rule:nth-child(even) { border-left: thin solid #119; border-right: thin solid #119; }
.shape { border-left: thick solid #191; border-right: thick solid #191; }
*/
.code { color: #7bb; }
.comment { color: #911; }
.error { color: #d00; }
.error .prefix, .error .localName, .error .IRI, .error .bnode, .error .literal, .error .langtag { color: #d00; }
.small { font-size: 60%; }
.success { color: #0d0; }
.success a.success, .success a:visited { color: #0d0; }
.parseError { border: solid thin #d00; }
.parseError::before { content: "⇐☠"; }
.highlightError { border: solid thick #d00; background-color: #F77; font-size: 300%; position: absolute; opacity: .5; line-height: 40%; }
.highlightError::before { content: "⇖☠"; }

/* adapted from http://www.menucool.com/tooltip/css-tooltip */
.hasToolTip {outline:none; }
.hasToolTip strong999 {line-height:3ex;}
.hasToolTip:hover {text-decoration:none;}
.toolTipDiv, .hasToolTip .toolTip {
    z-index:10; display:none; padding:1.4em 2.0ex;
    width: 25em; line-height:2ex;
}
.hasToolTip .toolTip {
    margin-top:2em; margin-left:-10em;
}
.hasToolTip .toolTip .pushLeft {
    width: 80%;
    margin-top:2em; margin-left:-100em;
}
.toolTipDiv, .hasToolTip:hover .toolTip {
    display:inline; position:absolute; color:#111;
    border:thin solid #DCA; background:#fffAF0;}
/*CSS3 extras*/
.toolTipDiv, .hasToolTip .toolTip {
    border-radius:1em;
    box-shadow: .5em .5em .8em #CCC;
}

.highlightTerms { background-color: #de9; } /* couldn't decide bewteen hover and click for data selection UI. */

.selected {
  border:4px solid #1F75CC;
  margin:-4px;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#ddd;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  margin-left: 15px;
  position:absolute;
  z-index:50;
  padding: 25px 25px;
}

.resultsDiv { border-left: solid 1em #ddf; margin-bottom: 2ex; } /* !! never got this working */