#visual-ice {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#visual-ice.loading:after {
  content: "Loading...";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  height: 1em;
  font-size: 3em;
  opacity: 0.5;
}

#visual-ice > svg {
  width: 100%;
  height: 100%;
}
#visual-ice > svg .node {
  cursor: pointer;
  fill: #999999;
  stroke: #FFFFFF;
}
#visual-ice > svg .node > text {
  fill: #FFFFFF;
  stroke: none;
}
#visual-ice > svg .node > rect {
  opacity: 1;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
#visual-ice > svg .node:hover > rect {
  opacity: 0.75;
}

#primary {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 240px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#secondary {
  position: absolute;
  width: 240px;
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background: #222222;
  color: #EFFFEF;
}

#content {
  position: absolute;
  right: 10px;
  left: 10px;
  top: 1%;
  bottom: 46%;
  padding: 0;
  overflow: auto;
}
#visual-ice-controls {
  position: absolute;
  right: 20px;
  left: 20px;
  top: 56%;
  bottom: 1%;
  overflow: auto;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 1;
}
#visual-ice-controls.hidden {
  opacity: 0;
  visibility: hidden;
}

#visual-ice-controls-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5em;
}
#visual-ice-controls-content .instructions {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #EEEEEE;
  overflow: auto;
}
 #visual-ice-controls-content .instructions-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #EEEEEE;
  overflow: auto;
} 
#visual-ice-controls-content .thumbnail {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  text-indent: -99999px;
  background-repeat: no-repeat;
  background-position: center center;
}
#visual-ice-controls-content .thumbnail.full {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

#visual-ice-controls-content .thumbnail {
  border: solid 1px #EEEEEE;
  opacity: 1;
}
#visual-ice-controls-content .thumbnail:hover {
  opacity: 0.75;
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  transition: opacity 0.25s;  
}
#visual-ice-controls-content .thumbnail.no-image {
  text-indent: 0;
}
#visual-ice-controls-content .thumbnail > span,
#visual-ice-controls-content .instructions > span,
#visual-ice-controls-content .instructions-open > span  {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1em;
  text-align: center;
  font-size: 2em;
  color: #EEEEEE;
}

#primary #old-browser {
  display: none;
}
#primary.old-browser #old-browser {
  display: block;
}
#primary.old-browser #visual-ice {
  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;
}

#visual-ice-content-slice {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 100%;
  overflow: hidden;
  background: #888888;
  background: rgba(136, 136, 136, 0.9);
  -webkit-transition: right 1s;
  -moz-transition: right 1s;
  -o-transition: right 1s;
  transition: right 1s;
}
#visual-ice-content-slice.content {
  right: 240px;
}
#visual-ice-content {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
#visual-ice-content > div {
  display: block;
  width: 100%;
  min-height: 100%;
  background: #FFFFFF;
}
#visual-ice-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;
}



#visual-ice-content-close {
  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-ice-content-close:hover,
#visual-ice-content-close:focus {
  opacity: 0.5;
}
#visual-ice-content-close: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;
}

