body, html {
  margin:0;
  padding:0;
}

body {
	color:#fff;
	font:12px Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	background-image:url('img/gradient.png');
	background-repeat:repeat-x;
	background-color:#555;
}

h1 {
	text-shadow:1px 3px 5px #000;
	font:1.8em Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-weight:bold;
	text-align:center;
}

p, li {
    color:#ccc;
    text-shadow:1px 3px 5px #000;
	font:1.1em Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
}

.ulInText {
    margin-left:30%;
}

a:link    { color:#FFF; }                   /* unvisited link  */
a:visited { color:#FFF; }                   /* visited link    */
a:hover   { color:#FFF; font-weight:bold; } /* mouse over link */
a:active  { color:#FFF; }                   /* selected link   */ 

#logotype {
	text-align:center;
}

#ywText {
	text-shadow:1px 3px 5px #000;
	font:1.5em Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:30px;
	text-align:center;
	font-style:italic;
}

.textBlock::before
{
    content:"";
    font-size:1px;
    position: relative;
    padding-left: 20%;
    padding-right: 20%;
    left: 30%;
    color: #000;
    width: 100%;
    background: #666;
    bottom:10px;
}

.textBlock {
	margin-left:20px;
	margin-right:10px;
	margin-bottom:40px;
}

.rightColumnDiv {
	margin-top:43px;
	text-align:center;
}

#iPhone {
    text-align:center;
    padding-top:15px;
    padding-left:1px;
  	background-image: url(img/iphone53.png);
  	background-repeat:no-repeat;
  	background-position:center;
	height: 385px; width: 250px; border: 0px solid white;
}

#screenShots {
	text-align:center;
}

#screenShotsInLine, #smallScreenShots {
    text-align:center;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:30px;
}

#appStoreBadge {
    margin-bottom:43px;
}
#googlePlayBadge {
    margin-bottom:43px;
}

#appStoreBadgeSmall {
    text-align:center;
    margin-bottom:30px;
}
#googlePlayBadgeSmall {
    text-align:center;
    margin-bottom:30px;
}

#facebook {
	text-align:center;
	background:#ffffff;
}

#facebookSmall2 {
    margin-bottom:10px;
}

img {
  max-width:100%;
  max-height:100%;
  border:0px;
}

#content {
  min-width:320px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

#contentColumns {
  position:relative;
}

#leftColumn {
  margin-right:280px;
}

#rightColumn {
  float:right;
  width:250px;
  margin-right:20px;
  margin-left:10px;
}

#footer {
  clear:both;
  text-align:center;
  font:0.9em Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
  color:#111;
  margin-bottom:7px;
}

@media only screen and (min-width: 1051px) {

  #facebook {
    display:show;
  }

  #facebookSmall, #facebookSmall2, #screenShotsInLine, #appStoreBadgeSmall, #googlePlayBadgeSmall, #smallScreenShots {
    display:none;
  }

}

@media only screen and (min-width: 801px) and (max-width: 1050px) {

  #facebook, #facebookSmall2, #screenShotsInLine, #appStoreBadgeSmall, #googlePlayBadgeSmall, #smallScreenShots {
    display:none;
  }

  #facebookSmall {
    display:show;
  }

  .ulInText {
    margin-left:25%;
  }
}

@media only screen and (min-width: 401px) and (max-width: 800px) {

  #facebook, #smallScreenShots {
    display:none;
  }

  #facebookSmall {
    display:show;
  }

  #screenShots {
    display:none;
  }

  #rightColumn {
    clear:right;
    width:0px;
    display:none;
  }

  #leftColumn {
    margin-right:0px;
  }

  .ulInText {
    margin-left:22%;
  }
  
}

@media only screen and (min-width: 0px) and (max-width: 400px) {

  #facebook, #screenShotsInLine {
    display:none;
  }

  #facebookSmall {
    display:show;
  }

  #screenShots {
    display:none;
  }

  #rightColumn {
    clear:right;
    width:0px;
    display:none;
  }

  #leftColumn {
    margin-right:0px;
  }

  .ulInText {
    margin-left:8%;
  }
  
  h1 {
	text-shadow:1px 3px 5px #000;
	font:1.7em Verdana,"Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-weight:bold;
	text-align:center;
  }
  
}


#slideshow {
	background-color:#000000;
	border:0px solid #FFFFFF;
	height:288px;
	margin:0px auto 0;
	position:relative;
	width:162px;
}

#slideshow ul {
	height:288px;
	left:-40px;
	right:0px;
	list-style:none outside none;
	overflow:hidden;
	position:relative;
	top:0px;
	bottom:0px;
	width:162px
}

#slideshow li{
	position:relative;
	display:none;
	z-index:10;
	top:0px;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('img/arrows.png') no-repeat;
	top:50%;
	margin-top:-43px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}