/*
 
 File: style.css
 
 Abstract: Glen Modification of CSS properties for the Finger Tips sample.
 
 Version: 1.0
 
 7/29/08 trying to add Mosaic button
 7/28/08 basic operation from FingerTips
 
  */

body {
  /* disable some default behaviors that would not fit nicely in a web app */
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  /* make the page the same size as the available screen real estate */
  width: 320px;
  height: 416px;
  margin: 0;

  /* set up the default font */
  font-family: Helvetica;

  /* set up background shadows */
  background-color: rgb(25, 25, 25);
  background-image: url('../Media/gradient_top.png'), url('../Media/gradient_bottom.png');
  background-position: 0 0, 0 326px;
  background-repeat: repeat-x, repeat-x;
}

/* ============================== RING ============================== */

#ring-container {
  /* all our containers are positioned in absolute space */
  position: absolute;

  /* make the perspective origin be the center of the screen */
  -webkit-perspective-origin: 160px 208px;
  /* set up the amount of perspective on the children of this container */
  -webkit-perspective: 1000;
  /* make sure contents live in 3D space */
  -webkit-transform-style: preserve-3d;

  /* base transform for this container, need a value to transition from */
  -webkit-transform: translateX(0);

  /* set up core properties for the sliding transitions, the changes of
  values is done directly by script */
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 0.5s;
}

#ring-aligner {
  /* all our containers are positioned in absolute space */
  position: absolute;
  
  /* make sure contents live in 3D space */
  -webkit-transform-style: preserve-3d;

  /* push back the contents in Z to cancel individual transforms set on
  ring items by script */
  -webkit-transform: translateZ(-248px); /* was 235 */
}

#ring {
  /* all our containers are positioned in absolute space */
  position: absolute;

  /* position the ring to the center of the screen in height */
  left: 5px;
  top: 208px;

  /* override some user agent styles on <ol> elements */
  margin: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
  
  /* make sure contents live in 3D space */
  -webkit-transform-style: preserve-3d;
}

/* this matches all items within the ring */
#ring > li {
  /* all our containers are positioned in absolute space */
  position: absolute;

  /* set the bounds of an item */
  width: 310px;
  height: 117px;
  
  /* offset each item by half its height so that they overlay
  the center of the transform on the ring */
  top: -58px; 

  /* hide the back of the elements so that we don't see anything
  but the items currently in the front of the ring */
  -webkit-backface-visibility: hidden;
}

.image {
  position: absolute;

  top: 2px;
  left: 2px;
  width: 125px;
  height: 107px; /* origionally 113 px */

  background-repeat: no-repeat;
  background-color: black;
  background-position: center;

  -webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 5px;
}

.desc {
  position: absolute;

  top: 5px;
  left: 136px;
  width: 172px;
  height: 110px;

  color: white;

  /* make sure contents is clipped to the bounds of the element */
  overflow: hidden;
}

.desc > h1 {
  margin-top: 0;
  font-size: 13pt;
}

.desc > p {
  font-size: 9pt;
}

/* ============================== INFO CONTAINER ============================== */

#info-pane {
  /* all our containers are positioned in absolute space */
  position: absolute;

  /* make the info pane the same size as the available screen real estate */
  width: 320px;
  height: 416px;

  /* default all contained text color to white */
  color: white;

  /* base transform for this container, need a value to transition from */
  -webkit-transform: translateX(480px); /* was 320 */

  /* set up core properties for the sliding transitions, the changes of
  values is done directly by script */
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 0.5s;
}

/* ============================== INFO BACK BUTTON ============================== */

#info-back-button {
  position: absolute;

  top: 15px;
  left: 10px;
  height: 22px;

  /* set up the chrome of the button */
  -webkit-border-image : url('../Media/back_button.png') 0 4 0 15;
  border-width : 0 4px 0 14px;

  padding-top: 8px;
  padding-right: 4px;

  text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: white;
}

/* the :active pseudo-class kicks in when the button is pressed */
#info-back-button:active {
  -webkit-border-image : url('../Media/back_button_touched.png') 0 4 0 15;
}
/* ============================== INFO MOSAIC BUTTON ============================== */

#info-mosaic-button {
  position: absolute;

  top: 15px;
  left: 212px;
  height: 22px;

  /* set up the chrome of the button */
  -webkit-border-image : url('../Media/forward_button.png') 0 15 0 6;
  border-width : 0 14px 0 4px;

  padding-top: 8px;
  padding-right: 4px;

  text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: white;
}

/* the :active pseudo-class kicks in when the button is pressed */
#info-mosaic-button:active {
  -webkit-border-image : url('../Media/forward_button_touched.png') 0 15 0 6;
}

/* ============================== INFO IMAGE WRAPPER ============================== */

#info-image-wrapper {
  position: absolute;

  top: 60px;
  left: 10px;
  width: 140px;
  height: 105px; /* was 140px */

/*   -webkit-border-radius: 5px;
  border: 1px solid white;*/

  background-color: black;
}

#info-image {
  position: absolute;
  top: 0px; /* was 30px*/
  width: 140px;
}

#info-play-button {
  position: absolute;

  top: 105px;  /* was 107px */
  left: 218px; /* was 104px */
  width: 49px;
  height: 47px;

  /* add some padding so that the touched background can fit */
  background-image: none;
  padding: 4px 3px;

  /* ensure that the play button is layered on top of anything
  at that same position, for instance the poster frame */
  z-index: 1;
}

/* the :active pseudo-class kicks in when the button is pressed */
#info-play-button:active {
  background-image: url('../Media/play_button_ring.png');
}

/* ============================== INFO METADATA ============================== */

#info-metadata {
  position: absolute;

  top: 62px;
  left: 165px;
  width: 148px;  /* was 145*/

  line-height: 18px;
  font-size: 13px;
  color: gray;
}

#info-title {
  font-size: 16px;
  color: white;
}

#info-description {
  position: absolute;
  top: 198px; /* was 218*/
  left: 10px;
  width: 300px;
  height: 215px; /* was 178*/

  line-height: 20px;
  font-size: 14px;

  /* clip the contents of this container */
  /* overflow: hidden; */
  overflow: visible;
}
/* ============================== MOSAIC CONTAINER ============================== */

#mosaic-pane {
  /* all our containers are positioned in absolute space */
  position: absolute;

  /* make the info pane the same size as the available screen real estate */
  width: 320px;
  height: 416px;

  /* default all contained text color to white */
  color: white;

  /* base transform for this container, need a value to transition from */
  -webkit-transform: translateX(960px); 

  /* set up core properties for the sliding transitions, the changes of
  values is done directly by script */
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 0.5s;

}
/* ============================== MOSAIC INFO BUTTON ============================== */

#mosaic-info-button {
  position: absolute;

  top: 15px;
  left: 10px;
  height: 22px;

  /* set up the chrome of the button */
  -webkit-border-image : url('../Media/back_button.png') 0 4 0 15;
  border-width : 0 4px 0 14px;

  padding-top: 8px;
  padding-right: 4px;

  text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: white;
}

/* the :active pseudo-class kicks in when the button is pressed */
#mosaic-info-button:active {
  -webkit-border-image : url('../Media/back_button_touched.png') 0 4 0 15;
}

/* ============================== MOSAIC IMAGE ============================== */

#mosaic-image-wrapper {
  position: absolute;

  top: 60px;
  left: 0px;
  width: 320px;
  height: 416px; /* was 140px */

/*   -webkit-border-radius: 1px;
  border: 1px solid black; */

  background-color: black;
}

#mosaic-image {
  position: absolute;
  top: 60px; 
  left: 0px;
  width: 320px;
}

#mosaic-play-button {
  position: absolute;

  top: 1px;  
  left: 218px; 
  width: 49px;
  height: 47px;

  /* add some padding so that the touched background can fit */
  background-image: none;
  padding: 4px 3px;

  /* ensure that the play button is layered on top of anything
  at that same position, for instance the poster frame */
  z-index: 1;
}

/* the :active pseudo-class kicks in when the button is pressed */
#mosaic-play-button:active {
  background-image: url('../Media/play_button_ring.png');
}


/* ============================== MOVIE ============================== */

#movie {
  /* push the media element outside of the bounds of the screen 
  as we are building our own UI to launch the movie */
  position: absolute;

  left: 1440px; /* was 480 */
}