.smeasures {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  color: #4c4c4c;
}

a {
  text-decoration: none;
  color: #13ae5c;
}

ul, p {
  margin: 5px 0 10px 0;
}

.clear {
  clear: both;
}

.container {
  width: 1024px;
  height: 590px;
  position: relative;
  margin: 0 auto;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#loader {
  background: white url("../gif/loader.gif") no-repeat center center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 401;
}

#home {
  background: aliceblue;
}

#courtroom {
  background-image: url("../png/crown-courtroom.png");
}
#courtroom .sidebar {
  width: 269px;
}
#courtroom #special ul li button {
  width: 230px;
}

#magistrates-court {
  background-image: url("../png/magistrates.png");
}
#magistrates-court .sidebar {
  width: 269px;
}
#magistrates-court #special ul li button {
  width: 230px;
}
#magistrates-court .defence {
  top: 350px;
  left: 630px;
}
#magistrates-court .prosecution {
  top: 350px;
  left: 540px;
}
#magistrates-court .security {
  left: 735px;
}

#waiting-room {
  background-image: url("../png/waitingroom.png");
}
#waiting-room.girl {
  background-image: url("../png/waitingroom-girl.png");
}

#outside-court {
  background-image: url("../png/outsidecourt.png");
}
#outside-court .lightbox#faq {
  top: 10%;
}
#outside-court .lightbox#my-bag {
  top: 7%;
}
#outside-court .speech {
  top: 60px;
}
#outside-court .lightbox#young-witness-supporter {
  top: 13%;
}
#outside-court.girl {
  background-image: url("../png/outsidecourt-girl.png");
}

#after-court {
  background-image: url("../png/aftercourt.png");
}
#after-court .lightbox#faq {
  top: 10%;
}
#after-court .speech {
  top: 60px;
}
#after-court.girl {
  background-image: url("../png/aftercourt-girl.png");
}

#video-link-room {
  background-image: url("../jpg/live-link.jpg");
}
#video-link-room #sm_interpreter {
  background: url(../png/live-link-interpreter.png) no-repeat;
  height: 415px;
  width: 274px;
  position: absolute;
  top: 173px;
  left: 408px;
  z-index: 1;
  display: none;
}
#video-link-room #sm_interpreter-screen {
  background: url(../png/llr-screen-interpreter.png);
  height: 150px;
  width: 120px;
  position: absolute;
  top: 130px;
  left: 118px;
  display: none;
}
#video-link-room #sm_intermediary {
  background: url(../png/live-link-intermediary.png);
  height: 339px;
  width: 248px;
  position: absolute;
  top: 158px;
  left: 405px;
  z-index: 1;
  display: none;
}
#video-link-room #sm_intermediary-screen {
  background: url(../png/llr-screen-intermediary.png);
  height: 150px;
  width: 120px;
  position: absolute;
  top: 130px;
  left: 118px;
  display: none;
}

#video-link-room.girl {
  background-image: url("../png/live-link-girl.png");
}
#video-link-room.girl #sm_interpreter {
  background: url(../png/live-link-interpreter-girl.png) no-repeat;
  width: 192px;
  height: 399px;
  top: 191px;
  left: 385px;
}
#video-link-room.girl #sm_interpreter-screen {
  background: url(../png/llr-screen-interpreter-girl.png);
}
#video-link-room.girl #sm_intermediary {
  background: url(../png/live-link-intermediary-girl.png);
  width: 271px;
  height: 387px;
  top: 203px;
  left: 383px;
}
#video-link-room.girl #sm_intermediary-screen {
  background: url(../png/llr-screen-intermediary-girl.png);
}

.lightbox {
  width: 670px;
  padding: 24px;
  border: 8px solid #dfdfdf;
  border-radius: 20px;
  background-color: white;
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 999;
  margin-left: -360px;
  display: none;
  -webkit-box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.4);
}
.lightbox h2 {
  color: #20a25e;
  font-size: 28px;
  margin: 0;
  font-weight: normal;
}
.lightbox#faq {
  top: 7%;
  width: 770px;
  z-index: 800;
}
.lightbox#notice-board {
  width: 704px;
  top: 10%;
  margin-left: -377px;
}

.overlay#board {
  background: rgba(255, 255, 255, 0.5) url("../png/board.png") no-repeat center center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  display: none;
}

.sidebar {
  position: absolute;
  top: 120px;
  right: 27px;
  z-index: 200;
  width: 214px;
  height: 0;
  padding: 0px 0 0 0;
  border-radius: 5px;
  background-color: white;
  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  /*display: none;*/
}
.sidebar p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  padding: 0 10px;
  margin: 10px 0;
}
#courtroom .sidebar p {
  margin-top: 8px;
  margin-bottom: 5px;
}

.page, .tabs {
  display: none;
}

.page1, .tab1 {
  display: block;
}

.pagination {
  float: right;
}
.pagination span {
  font-size: 15px;
  color: #4d4d4d;
}
.pagination a {
  background-color: #4d4d4d;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 3px 10px 5px 10px;
  margin-top: 5px;
  border-radius: 2px;
  font-size: 18px;
  line-height: 30px;
}
.pagination a:hover {
  background-color: black;
}

.tablinks {
  margin-top: 20px;
  width: 100%;
}
.tablinks h3 {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #4d4d4d;
}

a.tablink {
  float: left;
  text-align: center;
  margin: 0 9% 0 0;
  display: block;
  text-decoration: none;
}
a.tablink.last {
  margin: 0;
}
a.tablink.first {
  padding: 0;
  border: 0;
  background-color: transparent;
}

.profile {
  width: 131px;
  height: 131px;
  float: left;
  border-radius: 50%;
  margin-right: 20px;
  background-color: #6abcfc;
  overflow: hidden;
}
.profile img {
  width: 100%;
  height: auto;
}
.profile.no-blue-bg {
  background-color: transparent;
}

.close {
  background: url("../png/buttons-sprite.png") no-repeat -234px -135px;
  position: absolute;
  top: -25px;
  right: -25px;
  width: 47px;
  height: 49px;
  padding-top: 5px;
  text-align: center;
  cursor: pointer;
}
.close:hover {
  background-position: -234px -192px;
}

.speech {
  background: url("../png/speech.png") no-repeat;
  position: absolute;
  top: 100px;
  left: -54px;
  width: 54px;
  height: 74px;
}

.overlay > .close {
  top: 60px;
  right: 40px;
}

p {
  font-size: 16px;
  line-height: 30px;
}

ul.ticks, ul.exes {
  padding-left: 0px;
}
ul.ticks li, ul.exes li {
  padding-left: 40px;
  list-style: none;
  background-position: 10px 7px;
  background-repeat: no-repeat;
}
ul.ticks li {
  background-image: url(../png/tick.png);
}
ul.exes li {
  background-image: url(../png/x.png);
}
ul li {
  font-size: 16px;
  line-height: 30px;
}
ul li.list-head {
  list-style: none;
  font-weight: bolder;
  font-size: 1.2em;
  margin-bottom: 1em;
  background: none;
}
ul.column li {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.half-column-list {
  width: 50%;
  float: left;
  box-sizing: border-box;
}

/* NAV */
nav {
  position: absolute;
  top: 10px;
  left: 10px;
}
nav > a {
  display: block;
  float: left;
  height: 56px;
  text-indent: -9999px;
  background: url("../png/menu-sprite.png") no-repeat;
}
nav > a#home-link {
  width: 159px;
  background-position: 0 -5px;
}
nav > a#home-link:hover, nav > a#home-link.active {
  background-position: 0 -74px;
}
nav > a#out-link {
  width: 171px;
  background-position: -159px -5px;
}
nav > a#out-link:hover, nav > a#out-link.active {
  background-position: -159px -74px;
}
nav > a#wr-link {
  width: 167px;
  background-position: -330px -5px;
}
nav > a#wr-link:hover, nav > a#wr-link.active {
  background-position: -330px -74px;
}
nav > a#cr-link {
  width: 151px;
  background-position: -497px -5px;
}
nav > a#cr-link:hover, nav > a#cr-link.active {
  background-position: -497px -74px;
}
nav > a#vl-link {
  width: 185px;
  background-position: -648px -5px;
}
nav > a#vl-link:hover, nav > a#vl-link.active {
  background-position: -648px -74px;
}
nav > a#ac-link {
  width: 165px;
  background-position: -833px -5px;
}
nav > a#ac-link:hover, nav > a#ac-link.active {
  background-position: -833px -74px;
}

.courtroom-nav-item {
  float: left;
  width: 151px;
  height: 56px;
  position: relative;
}

.nav-button {
  background: url("../png/menu-sprite.png") no-repeat;
  background-position: -497px -5px;
  text-indent: -9999px;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-button:focus, .nav-button:hover, .nav-button.active {
  background-position: -497px -74px;
  outline: 0;
}

.nav-dropdown {
  display: none;
  position: absolute;
  z-index: 1000;
  background: #96cef2;
  border: solid 4px #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
  left: 50%;
  width: 120%;
  text-align: center;
  transform: translateX(-50%);
}
.nav-dropdown a {
  display: block;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px #60a0cf, -1px 1px 1px #60a0cf, 1px -1px 1px #60a0cf, -1px -1px 1px #60a0cf;
  padding: 10px 4px;
  border-bottom: solid 1px #2584c0;
  border-top: solid 1px #a6d6f4;
  background: #96cef2;
  background: linear-gradient(to bottom, #96cef2 0%, #60aada 100%);
}
.nav-dropdown a:last-child {
  border-bottom: 0;
}
.nav-dropdown a:hover, .nav-dropdown a:focus {
  background: linear-gradient(to bottom, #74aadb 0%, #4b86b8 100%);
}
.nav-item-is-open > .nav-dropdown {
  display: block;
}

#rooms {
  padding: 110px 0 0 140px;
}
#rooms a {
  margin: 20px;
  display: inline-block;
  width: 316px;
  height: 229px;
  position: relative;
}
#rooms a:hover > span {
  display: block;
}
#rooms a img {
  position: absolute;
  top: 0;
  left: 0;
}
#rooms a span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 80%;
  height: 65%;
  padding: 25% 10% 0 10%;
  display: block;
  background: rgba(50, 50, 50, 0.8);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  line-height: 35px;
  display: none;
}

/* HOTSPOTS */
.hotspot {
  width: 47px;
  height: 49px;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  background: url("../png/buttons-sprite.png") no-repeat -234px -12px;
  z-index: 5;
}
.hotspot:hover {
  background-position: -234px -72px;
}
.hotspot.videolink {
  top: 245px;
  left: 150px;
}
.hotspot.video {
  top: 245px;
  left: 150px;
  display: none;
}
.hotspot.pre-recorded-exam {
  top: 245px;
  left: 150px;
  display: none;
  z-index: 20;
}
.hotspot.videolink2 {
  top: 254px;
  left: 225px;
}
.hotspot.judge {
  top: 140px;
  left: 660px;
}
.hotspot.judges {
  top: 140px;
  left: 620px;
}
.hotspot.jury {
  top: 320px;
  left: 920px;
}
.hotspot.gallery {
  top: 480px;
  left: 345px;
}
.hotspot.witness {
  top: 160px;
  left: 340px;
}
.hotspot.prosecution {
  top: 300px;
  left: 570px;
}
.hotspot.defence {
  top: 300px;
  left: 665px;
}
.hotspot.defendant {
  top: 460px;
  left: 855px;
}
.hotspot.intermediary, .hotspot.interpreter {
  top: 260px;
  left: 245px;
  display: none;
}
.hotspot.clock {
  top: 88px;
  left: 219px;
}
.hotspot.board {
  top: 143px;
  left: 585px;
}
.hotspot.wc {
  top: 134px;
  left: 779px;
}
.hotspot.usher {
  top: 180px;
  left: 465px;
}
.hotspot.magistrates-usher {
  left: 870px;
  top: 160px;
}
.hotspot.security {
  top: 430px;
  left: 685px;
}
.hotspot.clerk {
  left: 630px;
  top: 235px;
}
.hotspot.books {
  top: 332px;
  left: 157px;
}
.hotspot.mobile {
  top: 270px;
  left: 400px;
}
.hotspot.drinks {
  top: 360px;
  left: 486px;
}
.hotspot.packs {
  top: 445px;
  left: 475px;
}
.hotspot.witness-wr {
  top: 634px;
  left: 194px;
}
.hotspot.viccode {
  top: 262px;
  left: 376px;
}
.hotspot.charter {
  top: 360px;
  left: 667px;
}
.hotspot.dodont {
  top: 456px;
  left: 177px;
}
.hotspot.guard {
  top: 268px;
  left: 612px;
}
.hotspot.ramp {
  top: 392px;
  left: 352px;
}
.hotspot.sworker {
  top: 422px;
  left: 898px;
}
.hotspot.you {
  top: 580px;
  left: 559px;
}
.hotspot.supporter {
  top: 545px;
  left: 424px;
}
.hotspot.car {
  top: 628px;
  left: 67px;
}
.hotspot.monitor {
  top: 405px;
  left: 436px;
}
.hotspot.screen {
  top: 583px;
  left: 286px;
}
.hotspot.camera {
  top: 80px;
  left: 579px;
}
.hotspot.intermediary2 {
  top: 370px;
  left: 948px;
}
.hotspot.person2 {
  top: 470px;
  left: 584px;
}
.hotspot.after {
  left: 560px;
  top: 230px;
}
.hotspot.visualaid {
  top: 250px;
  left: 340px;
}
.disable-hotspots .hotspot {
  display: none !important;
}
.disable-hotspots .hotspot.smeasures {
  display: block !important;
}

/* HOTSPOTS: Outside Court */
#hotspot-security-guard {
  top: 155px;
  left: 623px;
}

#hotspot-travel {
  top: 327px;
  left: 147px;
}

#hotspot-my-bag {
  top: 426px;
  left: 454px;
}

#hotspot-young-witness-supporter {
  top: 304px;
  left: 690px;
}

#hotspot-entrance {
  top: 105px;
  left: 447px;
}

#hotspot-ramp {
  top: 356px;
  left: 795px;
}

/* HOTSPOTS: Live Link Room */
#hotspot-llr-court-screen {
  top: 245px;
  left: 131px;
}

#hotspot-llr-camera {
  top: 66px;
  left: 456px;
}

#hotspot-llr-web-camera {
  top: 147px;
  left: 540px;
}

#hotspot-llr-room-screen {
  top: 170px;
  left: 680px;
}

#hotspot-llr-intermediary {
  top: 185px;
  left: 415px;
  display: none;
}

#hotspot-llr-interpreter {
  top: 215px;
  left: 415px;
  display: none;
}

#hotspot-llr-young-witness-supporter {
  top: 300px;
  left: 956px;
}

#hotspot-llr-public-gallery {
  top: 488px;
  left: 260px;
}

#llr-play-video {
  position: absolute;
  background: url(../png/play-video.png);
  cursor: pointer;
  height: 64px;
  width: 64px;
  top: 236px;
  left: 567px;
  z-index: 5;
}
.girl #llr-play-video {
  top: 224px;
}

/* HOTSPOTS: Waiting Room */
#hotspot-wr-domestics {
  top: 139px;
  left: 797px;
}

#hotspot-wr-notice-board {
  top: 145px;
  left: 615px;
}

#hotspot-wr-clock {
  top: 99px;
  left: 200px;
}

#hotspot-wr-mobile {
  top: 276px;
  left: 415px;
}

#hotspot-wr-drinks {
  top: 326px;
  left: 490px;
}

#hotspot-wr-young-witness-packs {
  top: 386px;
  left: 528px;
}

#hotspot-wr-other-witnesses {
  top: 523px;
  left: 329px;
}

#hotspot-wr-usher {
  top: 230px;
  left: 932px;
}

#hotspot-1-02 {
  top: 86px;
  left: 443px;
}

#hotspot-wr-nb-victims-code {
  top: 130px;
  left: 530px;
}

#hotspot-wr-nb-witness-charter {
  top: 160px;
  left: 140px;
}

#hotspot-wr-nb-lgbt {
  top: 240px;
  left: 280px;
}

.sub-lightbox {
  display: none;
}
.sub-lightbox#lightbox-home-sub {
  display: block;
}

/* ACTIONS */
.faq {
  background-position: -9px 0px;
  width: 105px;
  height: 105px;
  position: absolute;
  top: 80px;
  left: 17px;
  z-index: 20;
  cursor: pointer;
}
.faq:hover {
  background-position: -118px 0px;
}

.friends {
  background-position: -9px -110px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  position: absolute;
  top: 200px;
  left: 17px;
  cursor: pointer;
}
.friends:hover {
  background-position: -118px -110px;
}

#friends {
  top: 20%;
}

.answers, .answer {
  display: none;
}

a.question {
  display: block;
  color: #4c4c4c;
  background-color: #20a25e;
  font-weight: 400;
  text-decoration: none;
  padding: 5px 10px;
  margin-top: 8px;
  border-radius: 5px;
  border: 3px solid white;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.18);
  background: #f3f3f3;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f3f3f3 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f3f3f3 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f3f3f3 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f3f3f3 0%, white 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #f3f3f3 0%, white 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3f3f3", endColorstr="#ffffff", GradientType=0);
  /* IE6-9 */
}
a.question:hover {
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, white 0%, #f3f3f3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f3f3f3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, white 0%, #f3f3f3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, white 0%, #f3f3f3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, white 0%, #f3f3f3 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, white 0%, #f3f3f3 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#f3f3f3", GradientType=0);
  /* IE6-9 */
}

.smeasures {
  background-position: -300px -12px;
  top: 65px;
  right: 20px;
  z-index: 250;
  width: 229px;
  height: 72px;
  text-indent: -9999px;
  border-radius: 0;
}
.smeasures:hover {
  background-position: -300px -90px;
}
.smeasures.active {
  background-position: -300px -169px;
}
.smeasures.active:hover {
  background-position: -300px -249px;
}

/* SPECIAL MEASURES */
#sm_screens {
  background-image: url("../png/screen.png");
  position: absolute;
  top: 165px;
  left: 203px;
  width: 253px;
  height: 282px;
  z-index: 600;
  display: none;
}

#sm_gallery {
  background-image: url("../png/gallery.png");
  position: absolute;
  top: 456px;
  left: 194px;
  width: 459px;
  height: 134px;
}

#sm_judge {
  background-image: url("../png/judge.png");
  position: absolute;
  top: 98px;
  left: 615px;
  width: 53px;
  height: 62px;
}

#sm_judge_nowig {
  background-image: url("../png/judge-nowig.png");
  position: absolute;
  top: 98px;
  left: 615px;
  width: 53px;
  height: 62px;
  display: none;
}

#sm_prosecution {
  background-image: url("../png/prosecution.png");
  position: absolute;
  top: 275px;
  left: 533px;
  width: 54px;
  height: 66px;
}

#sm_prosecution_nowig {
  background-image: url("../png/prosecution-nowig.png");
  position: absolute;
  top: 275px;
  left: 533px;
  width: 54px;
  height: 66px;
  display: none;
}

#sm_defence {
  background-image: url("../png/defence.png");
  position: absolute;
  top: 275px;
  left: 692px;
  width: 54px;
  height: 83px;
}

#sm_defence_nowig {
  background-image: url("../png/defence-nowig.png");
  position: absolute;
  top: 275px;
  left: 692px;
  width: 54px;
  height: 83px;
  display: none;
}

#sm_witness {
  background-image: url("../png/witness.png");
  position: absolute;
  top: 190px;
  left: 309px;
  width: 25px;
  height: 84px;
}
.girl #sm_witness {
  background-image: url("../png/witness-girl.png");
  left: 300px;
  width: 34px;
}

#sm_interpreter {
  background-image: url("../png/interpreter.png");
  position: absolute;
  top: 175px;
  left: 271px;
  width: 32px;
  height: 103px;
  display: none;
}

#sm_intermediary {
  background-image: url("../png/intermediary.png");
  position: absolute;
  top: 189px;
  left: 273px;
  width: 71px;
  height: 89px;
  display: none;
}

.sm_court_visualaid {
  background-image: url("../png/court-visual-aid.png");
  width: 56px;
  height: 57px;
  position: absolute;
  left: 313px;
  top: 213px;
}
.girl .sm_court_visualaid {
  background-image: url("../png/court-visual-aid-girl.png");
  top: 190px;
  left: 300px;
  width: 66px;
  height: 84px;
}

#sm_pre-recorded-exam {
  background-image: url("../png/pre-recorded-exam.png");
  position: absolute;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  display: none;
  z-index: 20;
}
.girl #sm_pre-recorded-exam {
  background-image: url("../png/pre-recorded-exam-girl.png");
}

#sm_video {
  background-image: url("../png/video-evidence.png");
  position: absolute;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  display: none;
}
.girl #sm_video {
  background-image: url("../png/video-evidence-girl.png");
}

#sm_livelink {
  background-image: url("../png/livelink.png");
  position: absolute;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  display: none;
}
.girl #sm_livelink {
  background-image: url("../png/livelink-girl.png");
}

.sm_livelink_interpreter {
  background: url(../png/llr-screen-interpreter.png);
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_livelink_interpreter {
  background: url(../png/llr-screen-interpreter-girl.png);
}

.sm_livelink_intermediary {
  background: url(../png/llr-screen-intermediary.png);
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_livelink_intermediary {
  background: url(../png/llr-screen-intermediary-girl.png);
}

.sm_tv_interpreter {
  background: url(../png/tv-recorded-interpreter.png);
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_tv_interpreter {
  background: url(../png/tv-recorded-interpreter-girl.png);
}

.sm_tv_intermediary {
  background: url(../png/tv-recorded-intermediary.png);
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_tv_intermediary {
  background: url(../png/tv-recorded-intermediary-girl.png);
}

.sm_tv_live_aid_nobody {
  background: url(../png/tv-live-aid-nobody.png);
  /**/
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_tv_live_aid_nobody {
  background: url(../png/tv-live-aid-nobody-girl.png);
  /**/
}

.sm_tv_live_aid_intermediary {
  background: url(../png/tv-live-aid-intermediary.png);
  /**/
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_tv_live_aid_intermediary {
  background: url(../png/tv-live-aid-intermediary-girl.png);
  /**/
}

.sm_tv_live_aid_interpreter {
  background: url(../png/tv-live-aid-interpreter.png);
  /**/
  display: none;
  top: 131px;
  left: 118px;
  width: 120px;
  height: 150px;
  position: absolute;
}
.girl .sm_tv_live_aid_interpreter {
  background: url(../png/tv-live-aid-interpreter-girl.png);
  /**/
}

.sm_livelink_visualaid {
  width: 81px;
  height: 151px;
  background: url(../png/live-link-visual-aid.png);
  position: absolute;
  left: 753px;
  top: 322px;
  transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}
.girl .sm_livelink_visualaid {
  background: url(../png/live-link-visual-aid-girl.png);
  transform: none;
  -ms-transform: none;
  width: 93px;
  height: 276px;
  left: 745px;
  top: 314px;
}

#special ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
#special ul li {
  height: 38px;
}
#special ul li button {
  background-color: transparent;
  border: 0;
  margin: 0;
  font-size: 13px;
  line-height: 22px;
  font-weight: 400;
  padding: 0 0 0 0;
  width: 155px;
  height: 38px;
  text-align: left;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  color: #4c4c4c;
  cursor: pointer;
  float: left;
}
#special ul li button.two-liner {
  line-height: 13px;
}
#special ul li:nth-child(odd) {
  background-color: #f2f2f2;
}
#special ul li .checkbox {
  background: url("../png/buttons-sprite.png") no-repeat -14px -228px;
  width: 20px;
  height: 19px;
  float: left;
  margin: 2px 8px;
  cursor: pointer;
  display: inline;
}
#special ul li .checkbox.checked {
  background-position: -45px -228px;
}
#courtroom #special ul li {
  height: 36px;
}
#courtroom #special ul li button {
  height: 36px;
}
#courtroom #special ul .info {
  margin: 8px 8px;
}
#special ul .visualaid-item button {
  line-height: 1.2 !important;
}
#special ul .visualaid-item button .checkbox {
  margin-top: 6px;
}
#special ul .visualaid-item-livelink {
  height: 55px;
}
#special ul .visualaid-item-livelink button {
  line-height: 1.2 !important;
  height: 55px;
}
#special ul .visualaid-item-livelink button span {
  overflow: hidden;
  display: block;
}

span.info {
  background: url("../png/buttons-sprite.png") no-repeat -79px -228px;
  width: 21px;
  height: 20px;
  margin: 9px 8px;
  display: inline-block;
  cursor: pointer;
  text-indent: -9999px;
  float: right;
}
span.info:hover {
  background-position: -108px -228px;
}

/* SUPPORTERS PANEL */
.room-placeholder {
  width: 41%;
  height: 80px;
  margin: 2.5%;
  padding: 50px 2% 2% 2%;
  float: left;
  border-radius: 2px;
  background-color: #4d4d4d;
  color: white;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.room-placeholder:hover {
  background-color: black;
}

.back_btn {
  background: url("../png/arrow.png") no-repeat left center;
  padding: 0 0 0 18px;
  font-weight: 400;
  color: #4c4c4c;
}

.supporter_btn {
  background: url("../png/buttons-sprite.png") no-repeat -546px -15px;
  width: 267px;
  height: 58px;
  display: block;
  float: left;
  margin: 5px 20px 10px 0;
  padding: 15px;
  position: relative;
}
.supporter_btn:hover {
  background-position: -546px -118px;
}
.supporter_btn .arrow-image {
  position: absolute;
  right: 2em;
  top: 36px;
}

#friends .person {
  background-color: #d270d1;
  float: left;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  margin-bottom: 30px;
}

.person img {
  width: 38px;
  height: 51px;
  position: absolute;
  left: 10px;
  bottom: -1px;
}

#friends h3 {
  margin: 0;
  font-size: 16px;
  color: #4c4c4c;
  font-weight: 400;
  float: left;
  padding-top: 16px;
  padding-left: 13px;
}
#friends h3 span.status {
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  background-color: gray;
  border-radius: 15px;
  padding: 3px 10px;
  margin: 0 0 0 5px;
  color: white;
}
#friends h3 span.status.yes {
  background-color: green;
}
#friends h3 span.status.no {
  background-color: red;
}
#friends h3 span.status.maybe {
  background-color: orange;
}
#friends hr {
  border: 0;
  margin: 20px 0 30px 0;
  background: #dfdfdf;
  height: 1px;
}

.person h3 .arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  left: 5px;
}
.person h3 .open {
  background: url("../png/arrow-up.png") no-repeat;
  background-size: contain;
}
.person h3 .open:hover {
  top: 1px;
}
.person h3 .closed {
  background: url("../png/arrow-down.png") no-repeat;
  background-size: contain;
}
.person h3 .closed:hover {
  top: 4px;
}
.person p {
  margin: 0;
  display: none;
}
.person.first p {
  display: block;
}

.front-jump-links {
  position: absolute;
  top: 345px;
}
.front-jump-links#front-jump-link-1 {
  left: 24px;
}
.front-jump-links#front-jump-link-2 {
  right: 520px;
}
.front-jump-links#front-jump-link-3 {
  left: 520px;
}
.front-jump-links#front-jump-link-4 {
  right: 24px;
}
.front-jump-links a, .front-jump-links img {
  display: block;
}
.front-jump-links .front-jump-links-shade {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  color: rgba(1, 1, 1, 0);
  border-radius: 15px;
  transition: all 0.4s;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  padding-top: 80px;
  box-sizing: border-box;
}
.front-jump-links .front-jump-links-shade.two-liner {
  padding-top: 60px;
}
.front-jump-links:hover .front-jump-links-shade {
  background: rgba(0, 0, 0, 0.55);
  color: white;
}

#hotspot-intro-witness {
  height: 131px;
  width: 131px;
  background: aliceblue;
  right: 10px;
  top: 140px;
  border-width: 3px;
  border-style: solid;
  border-color: #6abcfc;
  transition: all 0.4s;
}

#hotspot-intro-witness:hover {
  background: #6abcfc;
}

#choose-character-link {
  position: absolute;
  top: 290px;
  right: 30px;
  font-weight: 500;
  text-decoration: underline;
}

#choose-character {
  margin-top: -36px;
  margin-left: -362px;
  text-align: center;
}
#choose-character .close {
  visibility: hidden;
}

.character {
  display: inline-block;
  margin: 0 30px;
  font-size: 20px;
  color: #13ae5c;
  font-weight: 500;
}

.character-icon {
  display: block;
  height: 131px;
  width: 131px;
  margin-bottom: 12px;
  background: aliceblue;
  border-width: 3px;
  border-style: solid;
  border-color: #6abcfc;
  transition: all 0.4s;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}
.character-icon:hover {
  background-color: #6abcfc;
}

#open-text {
  position: absolute;
  top: 17%;
  left: 44%;
  width: 600px;
  margin-left: -300px;
  border: 3px solid #6abcfc;
  padding: 1em;
  border-radius: 15px;
}

.hotspot-switch {
  position: absolute;
  left: 17px;
  bottom: 17px;
  border: solid 4px #fff;
  background: #4ad186;
  border-radius: 4px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hotspot-switch-text {
  font-weight: bold;
  display: inline-block;
  padding: 10px 10px 10px 5px;
  color: #fff;
  text-shadow: 1px 1px 1px #248852, -1px 1px 1px #248852, 1px -1px 1px #248852, -1px -1px 1px #248852;
  vertical-align: middle;
}

.hotspot-switch-checkbox {
  width: 20px;
  height: 19px;
  display: inline-block;
  background: url("../png/buttons-sprite.png") no-repeat -14px -228px;
  margin: 10px 0 10px 10px;
  vertical-align: middle;
}
:checked + .hotspot-switch-checkbox {
  background-position: -45px -228px;
}

.hotspot-switch input {
  width: 1px;
  height: 1px;
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  background: 0;
  clip: rect(0px, 0px, 0px, 0px);
  overflow: hidden;
}

/* e.g. to prevent orphans falling out of alignment due to text length and the
   floated image ot the left */
.oh {
  overflow: hidden !important;
}

.court-name {
  position: absolute;
  color: #FFF;
  top: 90px;
  left: 315px;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
}

#cyp-branding {
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 3em;
}

#home #cyp-branding {
  position: absolute;
  top: 79px;
  right: 64px;
  height: 3em;
}

/* Responsive Scaling */
#wrap {
  position: relative;
  width: 1024px;
  height: 590px;
  margin: 0 auto;
}
#outer {
  position: relative;
  width: 1024px;
  height: 590px;
  transform-origin: 0% 0%;
  overflow: hidden;
}

@media only screen and (min-width: 1024px) {
  #outer {
    transform-origin: 50% 0%;
  }
}