@import url('//www.google.com/css/gcs-v3.css');
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin&effect=smoothing');

body {
  color:#222;
  font-family:'Open Sans','Droid Sans',Arial,sans-serif;
  margin-top:0;
  padding-top:0;
}
h1,h2,h3,h4,h5,h6,strong {
  font-weight:600;
}

.g-doc {
  margin:0 auto;
  max-width:960px;
  min-width:760px;
}
.header {
  background:#fff;
  border-bottom:1px solid #ddd;
  height:45px;
  margin:0 10px;
  padding:15px 0 0;
  position:fixed;
  width:940px;
  z-index:20;
}
.content {
  line-height:1.6;
}

.intro,.features {
  margin:0 10px;
}

.intro {
  min-width:250px;
  max-width:320px;
  padding-top:60px;
  position:fixed;
  width:30%;
  z-index:10;
}
h1 {
  color:#444;
  font-size:1.6em;
  margin-top:4em;
}

.button {
  margin:1px 0 0 1px;
}
.button a {
  background:#3369e8 url('images/button.png') 0px 0px no-repeat;
  color:#fff;
  display:block;
  font-size:1.3em;
  font-weight:600;
  margin:-1px auto 13px -1px;
  position:relative;
  text-align:center;
  text-decoration:none;
  text-shadow:-1px -1px 0 rgba(0,0,0,.25);
    -moz-text-shadow:-1px -1px 0 rgba(0,0,0,.25);
    -o-text-shadow:-1px -1px 0 rgba(0,0,0,.25);
    -webkit-text-shadow:-1px -1px 0 rgba(0,0,0,.25);
  width:12em;
  z-index:5;
}
.button a span {
  background:url('images/button.png') right -120px no-repeat;
  display:block;
  height:40px;
  line-height:37px;
  position:relative;
  z-index:8;
}
.button a:hover {
  background-position:left -40px;
}
.button a:hover span {
  background-position:right -160px;
}
.button a:active {
  background-position:left -80px;
  margin:0 auto 12px 0;
}
.button a:active span {
  background-position:right -200px;
}
.fineprint {
  color:#777;
  font-size:.85em;
}

.features {
  background:#e6f0f9;
  float:right;
  margin:60px 10px 0;
  padding:15px;
  position:relative;
  width:60%;
  z-index:5;
}
.feature {
  float:left;
  width:50%;
}
.feature div {
  background:#fff;
  border:1px solid #ddd;
  border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
  box-shadow:0 0 3px rgba(0,0,0,.2);
    -moz-box-shadow:0 0 3px rgba(0,0,0,.2);
    -o-box-shadow:0 0 3px rgba(0,0,0,.2);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
  margin:15px;
  position:relative;
}
.feature img {
  border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -o-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
  display:block;
  position:relative;
  width:100%;
  z-index:1;
}
.feature h2 {
  background:#f5f5f5;
  border:1px solid #ddd;
  border-width:1px 1px 0 0;
  border-radius:0 3px 0 0;
    -moz-border-radius:0 3px 0 0;
    -o-border-radius:0 3px 0 0;
    -webkit-border-radius:0 3px 0 0;
  color:#444;
  display:block;
  float:left;
  font-size:.85em;
  font-weight:normal;
  line-height:18px;
  margin:-19px 0 0;
  padding:0 5px;
  position:relative;
  z-index:2;
}
.feature p {
  background:#3369e8 url('images/titles.png') 0 0 repeat-x;
  border-top:1px solid #ccc;
  border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -o-border-radius:0 0 3px 3px;
    -webkit-border-radius:0 0 3px 3px;
  clear:left;
  color:#fff;
  font-size:1em;
  font-weight:bold;
  height:1.8em;
  line-height:1.8em;
  margin:0;
  text-indent:5px;
  text-shadow:0 0 4px rgba(0,0,0,.5);
    -moz-text-shadow:0 0 4px rgba(0,0,0,.5);
    -o-text-shadow:0 0 4px rgba(0,0,0,.5);
    -webkit-text-shadow:0 0 4px rgba(0,0,0,.5);
  width:100%;
}
.blue p {
  background:#3369e8 url('images/titles.png') 0 0 repeat-x;
}
.red p {
  background:#d50f25 url('images/titles.png') 0 -40px repeat-x;
}
.yellow p {
  background:#f9cd24 url('images/titles.png') 0 -80px repeat-x;
}
.green p {
  background:#009939 url('images/titles.png') 0 -120px repeat-x;
}