body {margin: 0px; font: normal 13px Arial, Helvetica, sans-serif; color: #333333; line-height: 16px; cursor: default; background: #000000; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none}
#lightbox {position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); font: bold 10px Verdana, Arial, Helvetica; color: #888888; text-align: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none}
#content {position: fixed; width: 100%; height: 80%; left: 50%; top: 50%; border: 0px solid white; transform: translate(-50%, -50%)}
#close {position: absolute; right: 0px; top: 0px; margin-right: 20px; margin-top: 20px; cursor: pointer}
#leftright {position: absolute; bottom: 0px; left: 50%; margin-left: -60px}
#left, #right {display: inline-block; cursor: pointer; margin: 10px}
#left img, #right img, #close img {opacity: 0.8; filter: alpha(opacity=80)}
#left img:hover, #right img:hover, #close img:hover {opacity: 1; filter: alpha(opacity=100)}
#image {position: fixed; width: 100%; height: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer}
@media screen and (min-width: 900px) and (orientation: landscape) {#image {width: 90vw; height: auto}}
@media screen and (min-width: 900px) and (orientation: portrait) {#image {width: auto; height: 90vh}}
@media screen and (max-width: 900px) and (orientation: landscape) {#image {width: auto; height: 90vh} #close img{width: 50%; height: 50%}}
@media screen and (max-width: 900px) and (orientation: portrait) {#image {width: 90vw; height: auto} #close img{width: 50%; height: 50%}}