p.small {line-height:150%; font-size:17px; font-weight:2}
p.smallest {line-height:2% }
p.big {line-height:200%}


* {
  -webkit-user-select: none;
  -webkit-user-drag: none;
  outline: none;
}

html {
  position: relative;
  min-width: 1280px;
  min-height: 720px;
  height: 100%;
}

li { list-style:none; }

div { outline:none; }

body { font-family:Helvetica; margin:0; padding:0; color:black; background: url("../images/home/backgroundOverflow.jpg") center center fixed no-repeat; }

/* don't dim the arrows when they're inactive on Apple TV */
@media (-webkit-apple-tv) {
  body {
    background-image: none;
  }
}

#navigation { position:absolute; top:50%; left:50%; margin-left:-640px; margin-top:-360px; height:720px; width:1280px; overflow:hidden; z-index: 0; background: none; }

#homeButton { 
  position:absolute; 
  z-index:99; 
  left:75px; 
  top:38px; 
  width:79px; 
  height:20px; 
  cursor: pointer;
  -webkit-transition: opacity 500ms;
}


#xButton { 
  position:absolute; 
  z-index:99; 
  left:150px; 
  top:38px; 
  width:25px; 
  height:24px; 
  cursor: pointer;
  -webkit-transition: opacity 500ms;
}

#songsButton { 
  position:absolute; 
   z-index:99; 
   left:75px; 
   top:38px; 
   width:81px; 
   height:20px; 
   cursor: pointer;
   -webkit-transition: opacity 500ms;
}

#songsButton:hover { 
}

/* --- HOME --- */

#home{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: white;
  -webkit-transform: translate3d(0,0,0);
}

#home #title{
  position: absolute;
  top: 213px;
  right: 207px;
  background: url('../images/home/title.png');
  width: 323px;
  height: 105px;
  z-index: 100;
  -webkit-transform: scale(1);
  -webkit-transition: opacity 250ms, -webkit-transform 5s;
  -webkit-transition-delay: 2.5s;
}

#home.appear #title{
  -webkit-transform: scale(1.05);
  opacity: 0;
}

#home #bg{
  position: absolute;
  left: 0px;
  right: 0px;
  height: 720px;
  width: 1280px;
  z-index: 1;
  background: url('../images/home/backgroundClean.jpg');
  -webkit-transform: scale(1);
  -webkit-transition: opacity 250ms, -webkit-transform 5s;
  -webkit-transition-delay: 0s;
}

#home.appear #bg{
  -webkit-transform: scale(1.05);
  opacity: 0;
}

#home ul#toolbar{
  position: absolute;
  left: 920px;
  top: 336px;
  margin: 0px;
  padding: 0px;
  width: 154px;
  z-index: 100;
  -webkit-transform: scale(1);
  -webkit-transition: opacity 250ms, -webkit-transform 5s;
  -webkit-transition-delay: 5s;
}

#home.appear ul#toolbar{
  opacity: 0;
}

#home ul#toolbar li{
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 154px;
  height: 20px;
  margin-bottom: 24px;
  cursor: pointer;
  overflow: hidden;
}


/* --- SONG LIST --- */

#songlist{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: url('../images/songs/songList.jpg');
}

#songlist ul{
  position: absolute;
  left: 342px;
  top: 182px;
  width: 388px;
  padding: 0px;
  margin: 0px;
}

#songlist ul.right{
  left: 730px;
}

#songlist li{
  position: relative;
  padding: 0px;
  margin: 0px;
  height: 66px;
  width: 388px;
  cursor: pointer;
}

#songlist li#song2{
  height: 33px;
}

#songlist li#song3{
  height: 33px;
}

#songlist li#song10{
  height: 33px;
}
/* --- songplayback --- */

#songplayback{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: #b0181c;
}

#songplayback #homebuttonholder{
  z-index: 999;
  position: absolute;
  left: 0px;
  top: 35px;
  background: url('../images/songs/homeButtonWhiteStrip.png');
  width: 255px;
  height: 24px;
}

#songplayback #homebuttonholder #songsButton{
  top: 2px;
}

#songplayback #playButton{
  position: absolute;
  left: 154px;
  top: 199px;
  cursor: pointer;
  z-index: 100;
  width: 66px;
  height: 20px;
}

#songplayback #previousButton{
  position: absolute;
  cursor: pointer;
  z-index: 100;
  left: 135px;
  top: 141px;
  width: 13px;
  height: 18px;
}

#songplayback #nextButton{
  position: absolute;
  cursor: pointer;
  z-index: 100;
  left: 573px;
  top: 141px;
  width: 13px;
  height: 18px;
  -webkit-transform: rotate(180deg);
}

#songplayback .songPanel{
  opacity: 0;
  -webkit-transition: opacity 350ms;
}

#songplayback .songPanel.fadein{
  opacity: 1;
  -webkit-transition: opacity 350ms;
}


#songplayback img#bg{
  z-index: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 720px;
  width: 1280px;
}

#songplayback #lyricsBox{
  position: absolute;
  top: 226px;
  left: 130px;
  padding: 20px;
  z-index: 50;
  overflow-x: hidden;
  overflow-y: auto;
  width: 442px;
  height: 386px;
  opacity: 1;
  -webkit-transition: opacity 250ms;
}

#songplayback #lyricsBox::-webkit-scrollbar { width:10px; cursor: pointer; }

#songplayback #lyricsBox::-webkit-scrollbar-track{ background: none }

#songplayback #lyricsBox::-webkit-scrollbar-thumb { background: #363636; cursor:pointer; }

/* --- PHOTOS --- */

#photos{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: url('../images/photos/background.jpg');
}


#photos .sliding-view{
  position: absolute;
  top: 70px;
  left: 0px;
  height: 450px;
  width: 1280px;
}

#photos .sliding-view-element {
  position: absolute;
  left: 277px;  /* 324 */
  width: 725px;
  height: 540px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  cursor: pointer;
  text-align: center;
}

#photos .sliding-view-element div{
/*border: 2px solid red;    */
  -webkit-transition: -webkit-transform 500ms
}

#photos .sliding-view-element.sliding-view-element-after div,
#photos .sliding-view-element.sliding-view-element-before div{
  -webkit-transform: scale(0.8);
}

#photos .sliding-view-element div img {
  margin: auto;
  max-height: 466px;
  max-width: 715px;
  border: 5px solid red;
  margin: 5px;
  -webkit-transition: -webkit-transform 500ms;
  -webkit-transform: translate(0);
}

#photos .page-control {
  position: absolute;
  left: 482px;
  bottom: 125px;
  width: 315px;
  height: 15px;
}

#photos .page-control-page-element {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid white;
  cursor: pointer;
}

#photos .page-control-page-element:hover {
  position: absolute;
  width: 13px;
  height: 13px;
  background: white;
  border: 2px solid white;
}

#photos .page-control-indicator-element {
  position: absolute;
  width: 13px;
  height: 13px;
  background: white;
  border: 2px solid white;
}

#photos #leftArrow{
  position: absolute;
  bottom: 125px;
  left: 225px;
  height: 25px;
  width: 25px;
  -webkit-transform: rotate(180deg);
  cursor: pointer;
  z-index: 1000;
}

#photos #rightArrow{
  position: absolute;
  bottom: 125px;
  right: 225px;
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 1000;
}

#slideshow{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1280px;
  height: 720px;
  text-align: center;
  background: none;
}

/* custom background on Apple TV */
@media (-webkit-apple-tv) {
  #slideshow {
    background-image: url('../images/photos/slideshowBackgroundATV.jpg');
  }
}

#slideshow #arrowLeft{
  position: absolute;
  bottom: 125px;
  left: 225px;
  height: 25px;
  width: 25px;
  -webkit-transform: rotate(180deg);
  cursor: pointer;
  z-index: 1;
}


#slideshow #arrowRight{
  position: absolute;
  bottom: 125px;
  right: 225px;
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 1;
}


#slideshow #arrowRight:hover,
#slideshow #arrowLeft:hover {
  background-position: 0 100%;
}

#slideshow #arrowRight.inactive,
#slideshow #arrowLeft.inactive {
  opacity: 0;
  
  pointer-events: none;
}

#slideshow.activity-hidden #xButton,
#slideshow.activity-hidden #arrowRight,
#slideshow.activity-hidden #arrowLeft {
  opacity: 0;
}

/* AppleTV shouldn't hide things */
@media (-webkit-apple-tv) {
  #slideshow.activity-hidden #xButton,
  #slideshow.activity-hidden #arrowRight,
  #slideshow.activity-hidden #arrowLeft {
    opacity: 1;
  }
}

#slideshow .sliding-view-element {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 720px;
  width: 1280px;
  text-align: center;
  opacity: 0 !important;
  -webkit-transition: opacity 500ms;
}

#slideshow .sliding-view-element-focused {
  opacity: 1 !important;
}

#slideshow .sliding-view-element img {
  min-height: 720px;
}
/* --- VIDEOS --- */

#videos{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: url('../images/videos/background.jpg');
}

#videos #signage{
  position: absolute;
  left: 0px;
  top: 580px;
  width: 1280px;
  height: 50px;
  overflow: hidden;
  cursor: default;
  point-events: none;
}

#videos #signage .sliding-view{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 1280px;
}

#videos #signage .sliding-view-element {
  position: absolute;
  left: 398px;  /* 324 */
  width: 540px;
  height: 50px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  cursor: pointer;
  text-align: center;
  cursor: default;
  point-events: none;
  opacity: 0;
}

#videos #signage .sliding-view-element.sliding-view-element-focused{
  opacity: 1;
}

#videos #signage .sliding-view-element-hidden {
  display: none;
}

#videos .sliding-view-element div img {
  margin: auto;
  height: 100px;
  width: 535px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  margin-top: 50px;
  background: black;
  -webkit-transition: -webkit-transform 500ms;
  -webkit-transform: translate(0);
}

#videos .sliding-view{
  position: absolute;
  top: 160px;
  left: 0px;
  height: 348px;
  width: 1280px;
}

#videos .sliding-view-element {
  position: absolute;
  left: 398px;  /* 324 */
  width: 540px;
  height: 348px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  cursor: pointer;
  text-align: center;
}

#videos .sliding-view-element-hidden {
  display: none;
}

#videos .sliding-view-element div{
  border: 2px solid white;
  width: 540px;
  height: 348px;
  -webkit-transition: -webkit-transform 500ms
}

#videos .sliding-view-element.sliding-view-element-after div,
#videos .sliding-view-element.sliding-view-element-before div{
  -webkit-transform: scale(0.8);
}

#videos .sliding-view-element div img {
  margin: auto;
  height: 248px;
  width: 540px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  margin-top: 50px;
  background: black;
  -webkit-transition: -webkit-transform 500ms;
  -webkit-transform: translate(0);
}

#videos .sliding-view-element.sliding-view-element-focused div:hover:after{
  content: " ";
  display: inline-block;
  background: url(../images/interface/playBox.jpg) 0 0 no-repeat;
  height: 25px;
  width: 24px;
  position: absolute;
  z-index: 110;
  left: 258px;
  top: 250px;
}

#videos #leftArrow{
  position: absolute;
  bottom: 175px;
  left: 398px;
  height: 25px;
  width: 25px;
  -webkit-transform: rotate(180deg);
  cursor: pointer;
}

#videos #rightArrow{
  position: absolute;
  bottom: 175px;
  right: 338px;
  height: 25px;
  width: 25px;
  cursor: pointer;
}


/* --- CREDITS --- */

#credits{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: url('../images/credits/background.jpg');
}

#credits #text{
  position: absolute;
  top: 80px;
  left: 100px;
  width: 520px;
  height: 560px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* --- linerGRAPHY --- */

#liner{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1280px;
  height: 720px;
  background: url('../images/liner/background.jpg');
}

#liner #text{
  position: absolute;
  top: 123px;
  left: 140px;
  width: 600px;
  height: 443px;
  overflow-y: scroll;
  overflow-x: hidden;
}

#liner #text::-webkit-scrollbar, #credits #text::-webkit-scrollbar { width:12px; }

#liner #text::-webkit-scrollbar-track, #credits #text::-webkit-scrollbar-track { background: gray; margin: 0px 4px 0px 4px; border: 4px solid white}

#liner #text::-webkit-scrollbar-thumb, #credits #text::-webkit-scrollbar-thumb { background: #b0181c}


#visualizer {
  position: absolute;
  width: 1280px;
  height: 720px;
  overflow: hidden;	
  background: white;
}

#visualizer #homebuttonholder{
  z-index: 999;
  position: absolute;
  left: 0px;
  top: 35px;
  background: url('../images/interface/visualizerbar.png');
  width: 255px;
  height: 24px;
  -webkit-transition: opacity 250ms;
}

#visualizer.activity-hidden #homebuttonholder{
  opacity: 0;
}

#visualizer #homebuttonholder #homeButton{
  top: 3px;
}

.image-fader {
  position: absolute;
  cursor: pointer;
  font-size: 0;
}

.image-fader > img {
  -webkit-transition: opacity 0.25s;
}

.image-fader > img:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.image-fader:hover > img:nth-of-type(2),
.image-fader.tk-highlighted > img:nth-of-type(2) {
  opacity: 1;
}

.image-fader:hover > img:nth-of-type(1){
  opacity: 0;
}

/* don't dim the arrows when they're inactive on Apple TV */
@media (-webkit-apple-tv) {
  .inactive {
    opacity: 1;
  }
}