#visual-tci {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#visual-tci > svg {
  width: 100%;
  height: 100%;
}

#visual-tci > svg,
#visual-tci > svg * {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#visual-tci > svg g:hover {
  cursor: pointer;
}

#visual-tci > svg g > circle {
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 0;
  opacity: 1;
  -webkit-transition: opacity 0.25s, stroke-width 0.25s;
  -moz-transition: opacity 0.25s, stroke-width 0.25s;
  -o-transition: opacity 0.25s, stroke-width 0.25s;
  transition: opacity 0.25s, stroke-width 0.25s;
}
#visual-tci.hover-states-allow > svg g:hover > circle {
  opacity: 0.75;
  stroke-width: 1;
}
#visual-tci > svg g.selected > circle {
  opacity: 0.5;
  stroke-width: 4;
}

#primary {
  position: absolute;
  right: 240px;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;

}
#secondary {
  position: absolute;
  width: 240px;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
  background-color: #222;
  color: #EFFFEF;
}

#content {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 1%;
  bottom: 46%;
  padding: 0;
  overflow: auto;
}
#visual-tci-controls {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 56%;
  bottom: 1%;
  overflow: auto;
}

#visual-tci-controls-taxonomies {
  display: table;
}

#visual-tci-controls-taxonomies > label {
  display: table-row;
  cursor: pointer;
}

#visual-tci-controls-taxonomies > label > span {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em 0.2em;
  line-height: 1em;
}




/*The left results slice.*/
#visual-tci-results-slice {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  overflow: hidden;
  visibility: hidden;
}
#visual-tci-results-clip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  visibility: visible;
  background: rgba(34, 34, 34, 0.9);
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
#visual-tci-results {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  overflow: auto;
}
#main.results #visual-tci-results-clip {
  width: 240px;
}

#visual-tci-results.loading:after {
  content: "Loading...";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  height: 1em;
  margin: auto;
  font-size: 3em;
  text-align: center;
  opacity: 0.5;
}
#visual-tci.loading:after {
  content: "Loading...";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  height: 1em;
  margin: auto;
  font-size: 3em;
  text-align: center;
  opacity: 0.5;
}

/*The center content slice.*/
#visual-tci-content-slice {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 240px;
  overflow: hidden;
  visibility: hidden;
  -webkit-transition: left 1s;
  -moz-transition: left 1s;
  -o-transition: left 1s;
  transition: left 1s;
}
#main.results #visual-tci-content-slice {
  left: 240px;
}
#visual-tci-content-clip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  overflow: hidden;
  visibility: visible;
  background: rgba(136, 136, 136, 0.9);
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
#visual-tci-close-button {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 40px;
  height: 40px;
  text-indent: -999px;
  background: #000000;
  background: rgba(0,0,0,0.75);
  border: 2px solid #AAAAAA;
  cursor: pointer;
  opacity: 0.75;
  -khtml-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
  overflow: hidden;
}
#visual-tci-close-button:hover,
#visual-tci-close-button:focus {
  opacity: 0.5;
}
#visual-tci-close-button:after {
  content: "";
  display: block;
  position: absolute;
  left: 9px;
  top: 5px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid #AAAAAA;
  border-bottom: 15px solid transparent;
}
#main.content #visual-tci-content-clip {
  width: 100%;
}
#visual-tci-content {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
#visual-tci-content > div {
  display: block;
  width: 100%;
  min-height: 100%;
  background: #FFFFFF;  
}
#visual-tci-content > iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0 none;
  background: #FFFFFF;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}


#main.content #visual-tci-results:after {
  content: "";
  position: absolute;
  
}
#visual-tci-results:focus {
  outline: 0;
}
#visual-tci-results .tagged-with {
  color: #D5AA00;
}
#visual-tci-results ul,
#visual-tci-results ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#visual-tci-results > .header,
#visual-tci-results > ul {
  margin: 10px;
}
#visual-tci-results > .header {
  font-size: 1.5em;
  color: #EEEEEE;
}
#visual-tci-results > ul > li {
  font-size: 1.2em;
  margin: 0.5em 0;
}
#visual-tci-results a.visual-tci-results-result {
  display: block;
  padding: 0.2em;
  background: #DDDDDD;
  opacity: 1;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
#visual-tci-results a.visual-tci-results-result:hover,
#visual-tci-results a.visual-tci-results-result:focus {
  opacity: 0.75;
}
#visual-tci-results .visual-tci-results-result .title,
#visual-tci-results .visual-tci-results-result .byline {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
#visual-tci-results .visual-tci-results-result .title {
  font-size: 1em;
}
#visual-tci-results .visual-tci-results-result .byline {
  font-size: 0.8em;
}
#visual-tci-results ul {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
#visual-tci-results ul:empty {
  opacity: 0;
  -webkit-transition: opacity 0s;
  -moz-transition: opacity 0s;
  -o-transition: opacity 0s;
  transition: opacity 0s;
}
#primary #old-browser {
  display: none;
}


#primary.old-browser #old-browser {
  display: block;
}
#primary.old-browser #visual-tci {
  display: none;
}
#primary.old-browser #old-browser {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 400px;
  height: 15em;
  background: #3A3A3A;
  color: #EEEEEE;
  margin: auto;
  text-align: center;
}
#primary.old-browser #old-browser:hover {
  background: #6A6A6A;
}
#primary.old-browser #old-browser h1 {
  margin: 0.5em;
  padding: 0;
}
#primary.old-browser #old-browser p {
  margin: 0.5em;
  padding: 0;
}


@media only screen and (max-width: 1280px) {
  #secondary {
    width: 200px;
  }
  #primary {
    right: 200px;
  }
  #content {
    left: 5px;
    right: 5px;
    padding: 0;
  }
  #visual-tci-controls {
    left: 5px;
    right: 5px;
  }
  #visual-tci-results-slice {
    width: 200px;
  }
  #visual-tci-results {
    width: 200px;
  }
  #main.results #visual-tci-results-clip {
    width: 200px;
  }
  #visual-tci-content-slice {
    right: 200px;
  }
  #main.results #visual-tci-content-slice {
    left: 200px;
  }
  #visual-tci-results > header,
  #visual-tci-results > ul {
    margin-left: 5px;
    margin-right: 5px;
  }
  #visual-tci-content {
    left: 3px;
    right: 3px;
  }
}

@media only screen and (max-width: 760px) {
  /*Really needs special functionality with colapsing side panel to fit.*/
}