/* UTILITIES ================================================================*/

/* Clearing floats without extra markup. Based on "How To Clear Floats Without
 * Structural Markup by PiE"
 * http://www.positioniseverything.net/easyclearing.html]
 */

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear {
  clear:both;
}

/* New improved and even simplier clearing solution. Normally IE 6 & 7 have
 * problems if the element with a style of 'clear' is actually itself floating.
 * But this solution works in those scenerios
 * http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
 */
.super_clear {
 overflow: auto;
}

* html .super_clear {
 height: 1%;
}

/* PAGE STYLING ==============================================================*/

html, body, .subtext {
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

html, body {
  background: black;
}

a {
  text-decoration: none;
  color: #6CAEF2;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", "Lucida Grande";
  font-size: 30px;
  color: white;
}

h1 .subtext,
h2 .subtext {
  display: block;
  font-size: 12px;
  color: #616669;
  margin-top: -3px;
}

h2 {
  color: #364E73;
  font-weight: bold;
  font-size: 16px;
  margin-top: 25px;
}

p, li {
  color: #EFEFEF;
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
}

#shelf, .container {
  width: 901px;
  margin: 30px auto;
}

#shelf {
  background: url(../images/background.png) no-repeat top center;
  min-height: 700px;
  height: 700px;      /* IE6: Force IE6 to use height */
}

#left, #center, #right {
  float: left;
}

#left, #right {
  width: 280px;       /* ((shelf width - center) / 2) - LeftPadding */
}

#center {
  width: 311px;
}

#left {
  padding-right: 15px;
}

#right {
  padding-left: 15px;
}

a.applink {
  display: inline-block;
  margin-left: 5px;
  margin-top: 30px;
}

p.byline {
  font-size: 10px;
  margin-top: 20px;
  color: #888;
}

/* Phone dimensions with rotating images */

#phone {
  position: relative;
  width: 311px;
  height: 700px;
}

#screen {
  position: absolute;
  top: 95px;
  left: 28px;
}

/* root element for single scroll */
.scroller {
  position: relative;
  overflow: hidden;
  width: 256px;
  height: 384px;
}

/* root element for the scroll pics */
.scroller .pics {
  width: 20000em;
  position: absolute;
  clear: both;
}

/* single scroll item */
.pics img {
  float: left;
  width: 256px;
  margin: 0px;
}

.press_img {
  margin: 20px;
  padding: 10px;
  background: #CCC;
}

/*= LEFT COLUMN STYLING =====================================================*/

#left p {
  color: #CCC;
  font-style: italic;
}

#left h2 {
  margin-top: 5px;
  margin-bottom: 20px;
}

#left h2 .subtext {
  font-weight: normal;
  display: inline;
}

.lquote, .rquote {
  font-size: 22px;
  color: #FFF;
  vertical-align: bottom;
  font-style: normal;
}

.lquote {
  padding-right: 2px;
}

.rquote {
  padding-left: 5px;
}