/* 3.7: Improved layout of the metadata panel. Added panelBody div, which serves as a
  flex container in the horizontal view. This style sheet sets the panel in vertical
  mode. Viewer.js switches between horizontal (based on viewerHorizontal.css) and vertical
  depending on space available for any given image. 
  Nesting levels shown in comments--taken into account for setting z-index.
*/
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  font-family: "Lucida", arial, helvetica, sans-serif;
  font-size: .8em;
  border: none;
}

a {
  text-decoration: none;
  display: inline;
  font-style: italic;
  color: blue;
}

p {
  margin: 0;
}

a:visited {
  color: blue;
}

/*level 1*/
#imgLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/*level 2*/
#imgLayer img {
  display: block;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 1.0;
  cursor: default;
  z-index: 0;
}

/*level 1*/
#zoom {
  position: fixed;
  top: 1em;
  right: 1em;
  text-align: right;
  padding: 0 .5em 0 .5em;
  color: black;
  background-color: #fff;
  font-size: 1.2em;
  z-index: 2;
}

/*level 1*/
#panel {
  position: fixed;
  width: 400px;
  padding: .1em 1em .1em 1em;
  text-decoration: none;
  border-radius: 1em;
  display: block;
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, .9);
  opacity: 1.0;  
  z-index: 3;
}

/*level 2*/
#panelHeading {
  font-size: 1.2em;
  margin-bottom: .5em;
  margin-right: .6em;
  border-bottom-style: outset;
  z-index: 2;
}

/*level 3*/
#panelHead {
  text-decoration: underline;
  color: black;
  padding-bottom: .2em;
}

/*level 2*/
#panelCloser {
  position: absolute;
  right: 1.2em;
  top: .2em;
  width: 1em;
  letter-spacing: -.6em;
  z-index: 3;
}

/*level 3*/
#panelCloserTT {
  visibility: hidden;
  position: absolute;
  left: 1.5em;
  top: 0;
  width: 16em;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 1.1em;
  letter-spacing: 0;
  color: #000;
  padding: .2em;
  background-color: #ffe;
  border: 1px solid #000;
  padding: .2em;
  border-radius: .3em;
}

#panelCloser:hover #panelCloserTT {
  visibility: visible;
}

/*level 2*/
#panelBody {
  display: inherit;
}

/*level 3*/
#nav {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 23em;
  padding-right: 1em;
  z-index: 4;
}

/*level 4*/
#prev, #next {
  width: 1.7em;
  vertical-align: text-bottom;
}

#prev:hover + #lefttooltip {   
  visibility: visible;
}

#next:hover + #rttooltip {   
  visibility: visible;
}

/*level 4*/
#imgCounter {
  position: relative;
  display: inline;
  padding-left: 1.5em;
  padding-top: 0;
  top: -.3em;
  z-index: 4;
}

/*level 4*/
#lefttooltip {
  visibility: hidden;
  font-family: "Lucida Console", "Courier New", monospace;
  position: absolute;
  padding: .2em;
  border-radius: .3em;
  top: 1.9em;
  left: 0;
  font-size: 1.1em;
  color: #000;
  background-color: #ffe;
  border: 1px solid #000;
  z-index: 5;
}

#lefttooltip::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 4%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/*level 4*/
#rttooltip {
  visibility: hidden;
  font-family: "Lucida Console", "Courier New", monospace;
  position: absolute;
  padding: .2em;
  border-radius: .3em;
  top: 1.9em;
  left: 1.6em;
  font-size: 1.1em;
  color: #000;
  background-color: #ffe;
  border: 1px solid #000;
  z-index: 5;
}

#rttooltip::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 4%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/*level 5*/
#lefttooltip p {
  white-space: nowrap;
}

/*level 5*/
#rttooltip p {
  white-space: nowrap;
}
/*level 3*/
#md {
  margin-top: 1em;
  margin-bottom: .5em;
  z-index: 1;
}

/*level 4*/
#imgTitle {
  font-size: 1.2em;
  margin-bottom: 0;
  margin-top: 0;
}

/*level 4*/
#latitude, longitude, altitude {
  font-size: 1em;
}

/*level 4*/
#container {
  margin-top: .3em;
  margin-bottom: .2em;
}

/*level 6*/
#rating {
  font-size: 1.2em;
  display: inline;
}

/*level 6*/
#star {
  font-size: 1.3em;
  display: inline;
}

/*level 5*/
.mditem {
  display: block;
  padding-top: .5em;
}

/*level 6*/
.itemIcon {
  height: 1.2em;
  width: 1.2em;
  display: inline;
}

/*level 6*/
.itemLabel {
  padding-right: 1em;
  padding-left: .2em;
  display: inline;
}