house.css

/*
  The house style sheet for disconnect.me.

  Copyright 2010, 2011 Disconnect, Inc.

  This program is free software: you can redistribute it and/or modify it under
  the terms of the GNU General Public License as published by the Free Software
  Foundation, either version 3 of the License, or (at your option) any later
  version.

  This program is distributed in the hope that it will be useful, but WITHOUT
  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along with
  this program. If not, see <http://www.gnu.org/licenses/>.

  Authors (one per line):

    Brian Kennish <byoogle@gmail.com>
*/
html { -webkit-text-size-adjust: none }

body, input { font-family: 'Lucida Sans', Tahoma, Verdana, sans-serif }

body, a { color: #333 }

body { margin: 0 }

#content {
  margin: auto;
  padding-right: 50px;
  width: 840px
}

#header { border-bottom: 1px solid #93b4d9 }

#header > table { margin-bottom: -50px }

#header td, #content > .description, #actions td, #press td, #footer {
  text-align: center
}

#content img { border: none }

#header img { width: 320px }

#header .description, .name, .feature, input { font-size: 20px }

#header .description, #footer { color: #999 }

#header .description { background: white }

#tabs {
  margin-bottom: -4px;
  text-align: right
}

#tabs.ie { margin-bottom: -3px }

#tabs table {
  display: inline-block;
  border-collapse: collapse
}

#tabs td {
  padding: 0;
  text-align: center;
  vertical-align: bottom
}

.inactive, .button.inactive { color: graytext }

.tab {
  border-top: 1px solid #93b4d9;
  border-right: 1px solid #93b4d9;
  border-bottom: 1px solid white;
  border-left: 1px solid #93b4d9;
  border-top-left-radius: 8px;
  -moz-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  -moz-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  background: white;
  width: 126px
}

.tab.verbose { font-size: 14px }

.tab.inactive {
  border-top: 1px solid #bdc7d8;
  border-right: 1px solid #bdc7d8;
  border-bottom: 1px solid #93b4d9;
  border-left: 1px solid #bdc7d8;
  cursor: pointer;
  outline: none
}

.tab.inactive.highlighted {
  border-top: 1px solid #a8bed9;
  border-right: 1px solid #a8bed9;
  border-left: 1px solid #a8bed9;
  color: #706e66
}

.tab-surface {
  border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-right-radius: 8px;
  -moz-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  background: white;
  height: 36px
}

.inactive .tab-surface { background: #edeff4 }

.inactive.highlighted .tab-surface { background: #f6f7fa }

.tab .label { padding-top: 9px }

.tab.verbose .label { padding-top: 2px }

#actions { margin-left: 32px }

#preview, #installation, #subscription { display: inline-block }

#preview {
  position: relative;
  width: 320px;
  height: 420px
}

#preview img, .feature, .response { display: none }

#preview img {
  position: absolute;
  top: 0;
  left: 0
}

#installation { width: 475px }

#features { height: 16px }

.button, input { margin: 8px 0 }

.button {
  display: inline-block;
  border: 1px solid #2f5bb7;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: white;
  height: 64px;
  text-align: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
  outline: none
}

.button.inactive {
  border: 1px solid #c9c7ba;
  cursor: default
}

.button.highlighted { color: #eee }

.button-surface { width: 254px }

.button-surface.top {
  border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  background: #4d90fe;
  height: 40px
}

.inactive .button-surface.top { background: #f5f4ea }

.highlighted .button-surface.top { background: #357ae8 }

.button-surface.bottom {
  border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  background: #357ae8;
  height: 24px
}

.inactive .button-surface.bottom { background: #e2dfd6 }

.highlighted .button-surface.bottom { background: #4d90fe }

.button .label {
  position: relative;
  margin-top: -44px
}

.button .name { font-size: 24px }

.note, #press { font-size: small }

.note .name { font-size: medium }

#subscription, input { padding: 8px }

#subscription, .email { border: 1px solid #fc0 }

#subscription {
  margin-left: 20px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background: #fe8;
  width: 366px;
  color: black
}

.email { width: 226px }

.email.iphone { width: 200px }

#mc-embedded-subscribe {
  float: right;
  border: 1px solid #9b001d;
  border-radius: 4px;
  -moz-border-radius: 4px;
  background: #d42014;
  color: white;
  cursor: pointer
}

#mc-embedded-subscribe.ie {
  width: 112px;
  height: 40px
}

span.mce_inline_error, .response {
  margin-bottom: 8px;
  font-style: italic
}

span.mce_inline_error, #mce-error-response { color: maroon }

#mce-success-response { color: green }

#press td {
  width: 120px;
  height: 48px
}

a { text-decoration: none }

#footer {
  border-top: 1px solid #93b4d9;
  padding-top: 8px;
  font-size: 12px
}

#footer a:hover, #footer a:active { border-bottom: 1px solid #333 }

#copyright {
  margin-top: -14px;
  text-align: right
}

img { border: 1px solid #333 }