/*
    awesome buttons are based on a blog post by ZERB
    Read there blog post for more information:
    [Super awesome Buttons with CSS3 and RGBA](http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba)

    this buttons are even more awesome, as the need only one color for all three states,
    and have an super awesome onclick state

    Licensed under the MIT license
    http://swik.net/License:MIT/License+Text
*/

/* set an awesome color for the buttons, feel free to add new colors like an .awesome.green or .awesome.secondary */
.awesome {
  background-color: #f90;
  color: #fff;
}
.awesome_alt {
  background-color: #09f;
}

/* the awesome size gets set here. Feel free to add new sizes, like .awesome.small or .small.large */
.awesome { padding: 5px 10px 6px; font-size: 13px; }
.awesome:active { padding: 6px 10px 5px; }

/* Touch the rest at your onw risk. */
.awesome {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-style: normal;
  font-weight: bold;
  line-height: 1em;
  position: relative;
  text-align: center;
  text-decoration: none;

  /* vertical margin is the opposite of button's awesomeness */
  margin-top: 0;
  margin-bottom: 0;

  /* not all browser support these, but who cares? */
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25);

          border-radius: 5px;
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
          box-shadow: 0 1px 2px rgba(0,0,0,0.5);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);

  /* who needs images these days? */
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(150,150,150,.2), rgba(0,0,0,.0));
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(0,0,0,.0)));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#10000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2);

  /* cross browser inline block hack
     see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *display: inline;
  position: relative;

  /* IE luv */
  zoom: 1;

  /* disable text selection (Firefox only) */
  -moz-user-select: none;

  /* no text selection for iOS */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* OPERA only
   if there is no border set, Opera shows a transparent background-color if border-radius is set. */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
  input.awesome {
    border: 1px solid RGBa(0,0,0,0);
  }
}

/* hide selection background color */
.awesome::selection {
  background: transparent;
}

.awesome {
  outline: 0; /* remove dotted line, works for links only */
}
.awesome::-moz-focus-inner {
  border: none; /* remove dotted lines for buttons */
}
.awesome:focus,
.awesome:hover {
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.4), rgba(150,150,150,.3), rgba(0,0,0,.0));
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)), color-stop(0.5, rgba(150,150,150,.3)), to(rgba(0,0,0,.0)));
  #filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50ffffff,endColorstr=#20000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2);
}
.awesome:active {
  background-image: -moz-linear-gradient(top, rgba(0,0,0,.2), rgba(150,150,150,.2), rgba(255,255,255,.2));
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(255,255,255,.2)));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#50ffffff) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=315,strength=1);

          box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}

.large.awesome {
  font-size: 2.2em;
  padding: 0.6em 1em;
}

/* Safari doesn't support inset box shadow, so we better remove it */
@media screen and (-webkit-min-device-pixel-ratio:0){
  .awesome:active {
    -webkit-box-shadow: none;
  }
}

body, html { padding: 0; margin: 0; font-family: Helvetica, Geneva, Arial, sans-serif; font-size: 1em; line-height: 1.5; }
.pitch {
  color: #654;
}
.banner {
  background: #ddd;
  margin: 0 0 1em 0;
  padding: 1em 0;
}
.banner_alternate {
  background: #222;
  color: #ddd;
}
.focus { margin: 0 0.6em; }
.lede {
  font-style: italic;
  font-size: 2em;
}
header {
  background:#300;
  font-size: 3em
  overflow: hidden;
  margin: 0;
  border: 1px solid #300;
  text-align: center;
}
h1, h2 {
  line-height: 1.1;
}
h1 {
  font-size: 4em;
  margin: 0 0 0.5em;
  text-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
}
h2 {
  clear: left
}
footer {
  background: #444;
  color: #fff;
  margin: 0;
  padding: 1em;
  border: 1px solid #444;
}
blockquote {
  padding: 0.2em 0.5em;
  margin: 0.5em;
  font-size: 1.3em;
  font-family: Georgia, Times, serif;
}
p em { background-color: #ffe; }
.image, .intro {
  width: 50%;
  float: left;
}
.image {
  text-align: right;
}
.customer {
  background: #dfd;
  color: #030;
}
.quoted-person {
  display: inline;
  float: left;
  margin: 0.5em;
  border: 1px solid #666;
}

.signup-button {
  font-size: 1.2em;
}
.bundle {
  background-color: #ffe;
  color: #432;
  margin: 1em;
  border: 1px solid #eee;
}
.bundle>* {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#subForm, .form_header {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
#subForm {
  background-color: #ddefdd; border: 5px solid #797;
}
.form_header {
  margin: 0; padding: 0;
}
#subForm>* {
  margin-right: 0.2em;
  margin-left: 0.2em;
}
input {
  background: #eee;
}

.headshot {
  margin: 0 1em 1em 0;
  float: left;
}
.book, .aside {
  float: right;
  margin: 1em;
}
.book a {
  color: #000;
  display:block;
  text-align: center;
}
.spaced {
  text-align: right;
  padding-top: 1em;
}
.package {
  text-align: center;
}
.aside {
  width: 180px;
}
.big {
  font-size: 1.3em;
  max-width: 100%;
  min-width: 90%;
}

/* desktops */
@media only screen and (min-width: 64.063em) {
  .focus { width: 40em; margin: 0 auto; position: relative; max-width: 60%; }
  #subForm {
    margin-left: 1em;
    max-width: 100%;
  }
  #subForm>*{
    margin-right: 0.5em;
    margin-left: 0.5em;
  }
  .customer {
    padding-left: 100px;
  }
  blockquote {
    padding: 0em 0.3em;
  }
  blockquote .quoted-person {
    margin-left: -80px;
  }
}