body{font:13px/1.5 runda-1,runda-2,'Helvetica Neue',Helvetica,Arial,sans-serif}

a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}


html {
  background:#444 url(/images/landing/bg.jpg);
  color:#fff;

  -moz-font-feature-opentype: "dlig=1,ss01=1";
}

p,ul,li,h1,h2,h3,h4,h5,h6 {
  line-height:1.5;
}

nav ul {
  list-style:none;
}

a {
  color:#6abed0;
  text-decoration:none;

  -webkit-transition:color .5s ease-in-out;
  -moz-transition:color .5s ease-in-out;
  transition:color .5s ease-in-out;
}

a:hover {
  color:#6dcff6;  
}

.amp {
  font-family:"sorts-mill-goudy-1","sorts-mill-goudy-2",Georgia,"Times New Roman",Times,serif;
  font-weight:500;
}

.huge {
  font-size:64px;
}

.large {
  font-size:48px;
}

input, button, textarea, .button, select {
  font-family:runda-1,runda-2,Helvetica,Arial,sans-serif;
}

button, .button, input[type=submit] {
  background:#347386 url(/images/landing/bg-button.png) 0 0 repeat-x;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(60,136,157)),
    color-stop(1, rgb(52,115,134))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(60,136,157) 0%,
    rgb(52,115,134) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(60,136,157) 0%,
    rgb(52,115,134) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(60,136,157) 0%,
    rgb(52,115,134) 100%
  );
  
  /* Causes problems on Webkit/Win and Webkit/Linux. Temporarily disabled.
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.5);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.5);*/

  /* Temporary shadow without inset */
  -moz-box-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 #87c1d1;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 #87c1d1;
  -o-box-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 #87c1d1;
  box-shadow:0 1px 0 rgba(0,0,0,.5), 0 -1px 0 #87c1d1;

  cursor:pointer;

  border:0;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  -o-border-radius:30px;
  border-radius:30px;

  color:#fff;
  font-size:24px;
  -moz-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -webkit-text-shadow:0, 1px 0 rgba(0,0,0,.5);
  -o-text-shadow:0 1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.5);

  padding:0.5em 1em;
}

button:active, .button:active, input[type=submit]:active {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(52,115,134)),
    color-stop(1, rgb(60,136,157))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(52,115,134) 0,
    rgb(60,136,157) 100%
 );
  background-image: -moz-linear-gradient(
    center top,
    rgb(52,115,134) 0,
    rgb(60,136,157) 100%
 );
  background-image: -o-linear-gradient(
    center top,
    rgb(52,115,134) 0,
    rgb(60,136,157) 100%
 );

  
  /* Webkit issue
   * -moz-box-shadow:inset 0 1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.25);
  -webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,0,255,.25), 0 1px 0 rgba(255,255,255,.25);
  */


  /* Temporary shadow without inset */
  -moz-box-shadow:0 1px 0 #50a4bc, 0 -1px 0 rgba(0,0,0,.5);
  -webkit-box-shadow:0 1px 0 #50a4bc, 0 -1px 0 rgba(0,0,0,.5);
  -o-box-shadow:0 1px 0 #50a4bc, 0 -1px 0 rgba(0,0,0,.5);
  box-shadow:0 1px 0 #50a4bc, 0 -1px 0 rgba(0,0,0,.5);
}

a.button:hover {
  color:#fff;
}

h1, h2, h3, h4, h5, h6, #teaser {
  font-family: runda-1,runda-2, Helvetica, sans-serif;
  font-weight:700;
  letter-spacing:-0.05em;

  -moz-text-shadow:0 0.15em 0.15em rgba(0,0,0,0.5);
  -webkit-text-shadow:0 0.15em 0.15em rgba(0,0,0,0.5);
  -o-text-shadow:0 0.15em 0.15em rgba(0,0,0,0.5);
  text-shadow:0 0.15em 0.15em rgba(0,0,0,0.5);
}

#masthead {
  padding:15px 0;
  background: url(/images/landing/bg-top.jpg) bottom left repeat-x;
  border-bottom:1px solid #222;
  min-width:960px;
}

#masthead h1 {
  float:left;
  margin:0;
}

#masthead nav {
  float:right;
  margin-top:5px;
}

#masthead nav li {
  float:left;
  margin:0 10px 0 0;
  font-size:20px;
}

#masthead nav a {
  padding:10px 15px;
  color:#999;
}

#masthead a.active, #masthead nav a.active:hover {
  background:#000; /* For browsers that don't understand rgba() */
  background:rgba(0,0,0,.5);

  /* Webkit bug strikes again :(
  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  -o-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255.25);
  */


  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.5);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.5);
  -o-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255.25), 0 -1px 0 rgba(0,0,0,.5);

  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius:30px;
  color:#fff;
}

#masthead nav a:hover {
  background:rgba(0,0,0,.15);

  /* Webkit bug strikes again!
  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  -o-box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255.25);
  */


  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.7);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.7);
  -o-box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.7);
  box-shadow: 0 1px 0 rgba(255,255,255.25), 0 -1px 0 rgba(0,0,0,.7);

  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius:30px;
}

#masthead nav a:hover {
  color:#ccc;
}

#masthead nav .active a, #masthead nav .active a:hover {
  color:#fff;
}

#content {
  border-top:1px solid #444;
}

#teaser, #pagehead {
  text-align:center;
  padding:90px 0;
  border-bottom:1px solid #303030;
  background:url(/images/landing/board-bg.jpg) center top no-repeat;
}

#pagehead {
  padding:30px 0;
}

#pagehead em {
  color:#f3da74;
}

#teaser header {
  margin-bottom:30px;
}

#teaser header h1, #teaser header h2 {
  margin-bottom:0;
}

#teaser h2 {
  font-size:18px;

  -webkit-text-shadow:none;
  -moz-text-shadow:none;
  text-shadow:none;
}

#teaser small {
  text-align:center;
  padding:15px 0;
  background:transparent;
  color:#888;
}

.artnav {
  padding-top:30px;
  font-size:18px;
  color:#ccc;
  clear:both;
}

ul.buttons, #teaser .buttons, .artnav .buttons {
  display:block;
  margin:15px auto;
  list-style:none;
  text-align:center;
}

#teaser .buttons li, .artnav .buttons li {
  margin:0 35px 0 0;
}

#teaser .buttons li:last-child, #teaser .buttons li.last,
.artnav .buttons li:last-child, .artnav .buttons li.last {
  margin:0 auto;
}

#teaser .buttons a {
  display:block;
  cursor:pointer;
  width:260px;
  margin:0 auto;

  -moz-transition:all .35s cubic-bezier(0,1.5,.54,1.5);
  -webkit-transition:all .35s cubic-bezier(0,1,.54,1);
  -o-transition:all .35s cubic-bezier(0,1.5,.54,1.5);
  -ms-transition:all .35s cubic-bezier(0,1.5,.54,1.5);
  transition:all .35s cubic-bezier(0,1.5,.54,1.5);
}

#teaser .buttons a:hover {
  -moz-transform:scale(1.05);
  -webkit-transform:scale(1.05);
  -o-transform:scale(1.05);
  -ms-transform:scale(1.05);
  transform:scale(1.05);
}

#what, .about {
  padding-top:30px;
  border-top:1px solid #444;
}

article h1, section h1 {
  font-size:24px;

  -moz-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -webkit-text-shadow:0 1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

article p {
  font:14px/1.5 runda-1,runda-2,Helvetica,Arial,sans-serif;
  color:#fff;
  
  -moz-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -webkit-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -o-text-shadow:0 1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

.screenshot {
  -moz-box-shadow:0 0 10px rgba(0,0,0,.5);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,.5);
  -o-box-shadow:0 0 10px rgba(0,0,0,.5);
  box-shadow:0 0 10px rgba(0,0,0,.5);

  -moz-opacity:0.5;
  opacity:0.5;

  -moz-transition:opacity 1s ease-in;
  -webkit-transition:opacity 1s ease-in;  
  -o-transition:opacity 1s ease-in;  
}

.screenshot:hover {
  -moz-opacity:1;
  opacity:1;
}

/* Features */
.feature {
  margin-top:30px;
}

.feature img {
  -moz-box-shadow:0 0 10px rgba(0,0,0,.5);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,.5);
  -o-box-shadow:0 0 10px rgba(0,0,0,.5);
  box-shadow:0 0 10px rgba(0,0,0,.5);
}

.feature .screenshot {
  text-align:right;
}

.feature strong {
  display:block;
  font-size:18px;
  margin-bottom:1em;
}

/* Plans */
#plans {
  padding-top:60px;
}

#plans li {
  display:inline;
  width:23%;
  float:left;
  margin:0 1px 0 0;
}

#plans > li {
  -moz-box-shadow:0 0 5px rgba(0,0,0,.5);
  -o-box-shadow:0 0 5px rgba(0,0,0,.5);
  -webkit-box-shadow:0 0 5px rgba(0,0,0,.5);
  box-shadow:0 0 5px rgba(0,0,0,.5);
}

#plans dl {
  margin:0;
}

#plans li dt {
  -moz-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -o-text-shadow:0 1px 0 rgba(0,0,0,.5);
  -webkit-text-shadow:0 1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.5); 
  padding:10px 15px; 
}

#plans li dt.plan-name {
  font-size:18px;
  color:#fff;
  vertical-align:baseline;
}

#plans .price {
  text-align:center;
}

#plans .price .fee {
  font-size:28px;
}

#plans .price .fee span {
  font-size:18px;
}

#plans .featured .price .fee {
  font-size:48px;
}

#plans .featured .price .fee span {
  font-size:36px;
}

#plans .price .fineprint {
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:12px;
  font-style:italic;
  color:#888;
}

#plans .featured .price .fineprint {
  font-size:14px;
}

#plans dd {
  font-size:18px;

  background:#f5f5f5; /* For IE & Opera */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(220,220,220)),
    color-stop(1, rgb(255,255,255))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(220,220,220) 0%,
    rgb(255,255,255) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(220,220,220) 0%,
    rgb(255,255,255) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(220,220,220) 0%,
    rgb(255,255,255) 100%
  );

}

#plans dd ul {
  margin:0;
}

#plans dd li {
  display:block;
  width:auto;
  float:none;
  clear:both;
  text-align:center;

  padding:8px 15px;
  border-bottom:1px solid #ddd;
  border-top:1px solid #fff;

  color:#888;
  -moz-text-shadow:0 1px 0 rgba(255,255,255,.5);
  -webkit-text-shadow:0 1px 0 rgba(255,255,255,.5);
  -o-text-shadow:0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

#plans .button {
  text-align:center;
  text-transform:uppercase;
  font-size:14px;
}

#plans .featured {
  position:relative;
  top:-20px;
  width:30%;
}

#plans .featured dd {
  font-size:24px;
}

#plans .price {
  background:#222; /* For IE / Opera */

  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(66,66,66)),
    color-stop(1, rgb(44,44,44))
  );
  background-image: -webkit-linear-gradient(
    center bottom,
    rgb(66,66,66) 0%,
    rgb(44,44,44) 100%
  );
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(66,66,66) 0%,
    rgb(44,44,44) 100%
  );
  background-image: -o-linear-gradient(
    center bottom,
    rgb(66,66,66) 0%,
    rgb(44,44,44) 100%
  );
}

#plans .personal .plan-name {
  background:#d9824e; /* For IE / Opera */

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(218,160,78)),
    color-stop(1, rgb(217,130,78))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(218,160,78) 0%,
    rgb(217,130,78) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(218,160,78) 0%,
    rgb(217,130,78) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(218,160,78) 0%,
    rgb(217,130,78) 100%
  );

  border-top:1px solid #ffd18f;
  border-bottom:1px solid #663110;
}

#plans .corporate .plan-name {
  background:#222; /* For IE / Opera */

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(44,44,44)),
    color-stop(1, rgb(33,33,33))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(44,44,44) 0%,
    rgb(33,33,33) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(44,44,44) 0%,
    rgb(33,33,33) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(44,44,44) 0%,
    rgb(33,33,33) 100%
  );


  border-top:1px solid #444;
  border-bottom:1px solid #000;
}

#plans .small .plan-name {
  background:#44a9bd; /* For IE / Opera */

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(60,150,170)),
    color-stop(1, rgb(30,120,150))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(60,150,170) 0%,
    rgb(30,120,150) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(60,150,170) 0%,
    rgb(30,120,150) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(60,150,170) 0%,
    rgb(30,120,150) 100%
  );


  border-top:1px solid #73e3ea;
  border-bottom:1px solid #000;
}

#plans .freelancer .plan-name {
  background:#aecc49; /* For IE / Opera */

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(174,204,73)),
    color-stop(1, rgb(147,172,62))
  );
  background-image: -webkit-linear-gradient(
    center top,
    rgb(174,204,73) 0%,
    rgb(147,172,62) 100%
  );
  background-image: -moz-linear-gradient(
    center top,
    rgb(174,204,73) 0%,
    rgb(147,172,62) 100%
  );
  background-image: -o-linear-gradient(
    center top,
    rgb(174,204,73) 0%,
    rgb(147,172,62) 100%
  );


  border-top:1px solid #e3edc1;
  border-bottom:1px solid #000;
}

.free-plan {
  font-size:11px;
  text-align:center;
}

.non-profits {
  margin: 40px 0;
}

.non-profits a {
  display:block;
  padding: 1.5em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);

  text-align: center;
  font-size: 1.25em;
  border-top: 1px solid rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(0, 0, 0, .5);

  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  -o-border-radius: 1.5em;
  border-radius: 1.5em;

  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
  -ms-box-shadow: 0 0 5px rgba(0,0,0,.5);
  -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
  box-shadow: 0 0 5px rgba(0,0,0,.5);

  background: #aecc49;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #AECC49), color-stop(1, #93AC3E) );
  background-image: -webkit-linear-gradient( center top, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
  background-image: -moz-linear-gradient( center top, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
  background-image: -o-linear-gradient( center top, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
}

.non-profits a:active {
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0, #AECC49), color-stop(1, #93AC3E) );
  background-image: -webkit-linear-gradient( center bottom, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
  background-image: -moz-linear-gradient( center bottom, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
  background-image: -o-linear-gradient( center bottom, rgb(174,204,73) 0%, rgb(147,172,62) 100% );
}

/* Registration */
.register {
  margin:30px 0 0;
  padding:30px;
  background:#f5f5f5;
  border:10px solid #222;
  border:10px solid rgba(0,0,0,.85);

  color:#333;
}

.register h1 {
  font-family:Helvetica,Arial,sans-serif;
  font-size:30px;
  letter-spacing:-0.05em;

  -webkit-text-shadow:none;
  -moz-text-shadow:none;
  text-shadow:none;
}

.register label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.075em;
  display:block;
  padding:0 1em;
}

.register input[type=text], .register input[type=password] {
  font-size:18px;
  padding:5px;
  display:block;
  border:5px solid #eee;
  width:95%;
}

.register input[type=text]:focus, .register input[type=password]:focus {
  border:5px solid #ddd;
}

.register .checkbox input, .register .checkbox label {
  display:inline;
  text-transform:none;
  font-size:12px;
}

.register .buttons input {
  font-size:18px;
}

.register .workspace {
  position:relative;
}

.register .hint {
  font-size:18px;
  position:absolute;
  text-transform:none;
  top:21px;
  right:16px;
  padding:0 10px;
  color:#999;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  letter-spacing:-0.05em;
  line-height:31px;
}

.register input:focus ~ .hint {
  color:#666;
}

#sign-in .by-email, #sign-in .by-openid {
  width:46%;
  float:left;
  padding:2%;
  display:inline;
}

#sign-in .by-email {
  padding:0 4% 0 0;
}

#sign-in .by-openid {
  padding:0 0 0 4%;
}

.session_errors, .error {
  padding:10px;
  background:#fcc;
  border:1px solid #600;
  color:#600;
  display:block;
  margin:5px 0;
  width:95%;
}

#pagefoot {
  padding-top:50px;
  color:#999;
}

#pagefoot ul {
  list-style:none;
  text-align:center;
}

#pagefoot li {
  display:inline;
  font-size:12px;
}

.info-page {
  background:#f5f5f5;
  border:10px solid #222;
  border:10px solid rgba(0,0,0,.85);
  color:#222;
  padding:15px;
  margin-top:30px;

  -o-box-shadow:0 0 5px rgba(0,0,0,.5);  
  -moz-box-shadow:0 0 5px rgba(0,0,0,.5);
  -webkit-box-shadow:0 0 5px rgba(0,0,0,.5);
  box-shadow:0 0 5px rgba(0,0,0,.5);
}

.info-page h1, .info-page h2, .info-page h3, .info-page h4, .info-page h5, .info-page h6 {
  -moz-text-shadow:none;
  -webkit-text-shadow:none;
  text-shadow:none;
}

.vcard {
  margin-bottom:20px;
}

.vcard p {
  margin:0;
}

.vcard .fn {
  font-weight:900;
}

#ebook {
  margin-top:20px;
}

#ebook em {
  color:#F3DA74;
}

#ebook p, #ebook ul {
  font-size:16px;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

#ebook p {
  color:#ccc;
  padding-left:30px;
  margin-bottom:40px;
}

#ebook .questions {
  background:url(/images/landing/ebook-arrow.png) 0 0 no-repeat;
  padding:20px 30px;
}

#ebook .buttons {
  text-align:left;
}

#ebook .buttons li {
  float:left;
}

#ebook .buttons .tweet {
  float:right;
}

#iphone-app {
  margin-top:30px;
}

#iphone-app .info {
  margin-top:50px;
}

#iphone-app .info h1 {
  color:#fff;
  font-size:36px;
}

#iphone-app .info .amp {
  display:none;
}

#iphone-app .love {
  color:#9b2a31;
}

#iphone-app .picker {
  position:relative;
  min-height:484px;
  height:484px;
}

#iphone-app .devices {
  height:520px;
}

#iphone-app .appstore {
  text-align:center;
}

#iphone-app .device {
  position:absolute;
  display:block;
  text-indent:-999em;

  -moz-opacity:0.35;
  -webkit-opacity:0.35;
  opacity:0.35;
  z-index:0;

  -moz-transition:opacity 0.5s ease-in-out;
  -webkit-transition:opacity 0.5s ease-in-out;
  -o-transition:opacity 0.5s ease-in-out;
  -ms-transition:opacity 0.5s ease-in-out;
  transition:opacity 0.5s ease-in-out;
}

#iphone-app .device .pick {
  display:block;
}

#iphone-app .ipad, #iphone-app .ipad .pick {
  top:42px;
  left:0;
  width:506px;
  height:400px;
}

#iphone-app .iphone, #iphone-app .iphone .pick {
  top:0;
  left:127.5px;
  width:251px;
  height:484px;
}

#iphone-app .ipad {
  background:url(/images/landing/sprite-ipad.png) 0 0 no-repeat;
  z-index:0;
}

#iphone-app .iphone {
  background:url(/images/landing/sprite-iphone.png) 0 0 no-repeat;
  z-index:0;
}

#iphone-app .device .modal {
  display:none;
}

#iphone-app .ipad:target {
  background-position:0 -405px;
  z-index:10;
  opacity:1;
}

#iphone-app .iphone:target {
  background-position:0 -489px;
  z-index:10;
  opacity:1; 
}

#iphone-app .device:target .modal {
  display:inline;
  text-indent:0;
  position:absolute;

  padding:5px 10px;
  color:#fff;
  background:#000;
  background:rgba(0,0,0,.5);
  text-shadow:0 1px 0 #000;
  text-shadow:0 1px 0 rgba(0,0,0,.5);

  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
}

#iphone-app .ipad:target .modal {
  top: 195px;
  left: 183px;
}

#iphone-app .iphone:target .modal {
  top: 220px;
  left: 58px;
}