site.css

/* HTML elements
---------------------------------------------- */
h1,h2,h3 {
  font-weight:bold;
  margin:0 0 10px;
  }
h4,h5,h6 {
  font-weight:bold;
  margin:0 0 5px;
  }
h1 {
  font-size:36px;
  line-height:52px;
  }
h2 {
  font-size:24px;
  line-height:30px;
  }
h3 {
  font-size:22px;
  line-height:28px;
  }
h4 {
  font-size:20px;
  line-height:24px;
  }
h5 {
  font-size:18px;
  line-height:26px;
  }
small {
  font-size:14px;
  line-height:18px;
  }
fieldset {
  margin:0 0 10px;
  }
textarea {
  border-color:#ccc;
  }
textarea:focus {
  border-color:#7092ff;
  }
table {
  table-layout:fixed;
  }
em {
  font-style:italic;
  }
a       { color:#7092ff; }
a:hover { color:#0a44ff; }

.prose blockquote {
  background-color:transparent;
  padding:0;
  font-size:18px;
  line-height:28px;
  }

.grouped-options {
  border:1px solid #7092ff;
  border-radius:3px;
  width:100%;
  margin:0 0 10px;
  line-height:20px;
  }
.grouped-options label {
  cursor:pointer;
  vertical-align:top;
  padding:10px;
  height:40px;
  color:#7092ff;
  border-color:#7092ff;
  font-weight:bold;
  text-align:center;
  }
.grouped-options input[type=radio] { display:none; }
.grouped-options label:hover {
  color:#0a44ff;
  }
.grouped-options input[type=radio]:checked + label {
  background-color:#7092ff;
  color:#fff;
  font-weight:bold;
  }
input[type=text]:focus {
  border:1px solid #7092ff;
  }


/* Structure
---------------------------------------------- */
body { margin-top:40px; margin-bottom:40px; }

/* Sprite
---------------------------------------------- */
.sprite {
  background:transparent url(img/sprite@2x.png) no-repeat 0 0;
  background-size:120px 100px;
  }
  .sprite.logo {
    background-position:0 0;
    width:100px;
    height:100px;
    }
  .sprite.crown {
    background-position:-100px 0;
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:5px;
    }

.bg-hardware {
  background-image:url(img/bg_6.svg);
  background-repeat:repeat;
  background-size:100%;
  background-attachment: fixed;
  }

/* Components
---------------------------------------------- */
.progress-bar {
  border-radius:50px;
  height:35px;
  }
.progress {
  border-radius:50px;
  width:0;
  height:15px;
  top:8px;
  left:8px;
  right:8px;
  min-width:1%;
  max-width:100%;
  }

.sliding {
  min-height:640px;
  }
.tabs {
  border-color:#ccc;
  }
.tabs a {
  color:#808080;
  border-radius:4px 4px 0 0;
  position:relative;
  top:1px;
  padding-right:20px;
  padding-left:20px;
  }
.tabs a:focus {
  -webkit-box-shadow:none;
          box-shadow:none;
  }
.tabs a:hover,
.tabs .active {
  color:#404040;
  }
.tabs .active {
  background-color:#fff;
  border:1px solid #ccc;
  border-bottom-color:#fff;
  }

/* Tooltips
---------------------------------------------- */
[data-tooltip]:after {
  content:attr(data-tooltip);
  position:absolute;
  background:#202020;
  color:#fff;
  border-radius:3px;
  bottom:40px;
  display:none;
  padding:5px 10px;
  width:120px;
  left:50%;
  margin-left:-60px;
  text-align:center;
  }
[data-tooltip]:before {
  content:'';
  display:block;
  border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:5px solid #404040;
  display:none;
  position:absolute;
  bottom:35px;
  left:10px;
  }
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  display:block;
  }

/* Colors
---------------------------------------------- */
.fill-white     { background-color:#fff; }
.fill-light     { background-color:#eee; }
.fill-dark      { background-color:#595959; }
.fill-darkgreen { background-color:#6ecc8e; }
.fill-green     { background-color:#a2e99f; }
.fill-darken0   { background-color:rgba(0,0,0,0.05); }
.fill-darken1   { background-color:rgba(0,0,0,0.10); }

.color-blue { color:#7092ff; }

a.button,
input[type='submit'] {
  background-color:#7092ff;
  }
a.button:hover,
input[type='submit']:hover {
  background-color:#0a44ff;
  }

/* Custom tweaks
---------------------------------------------- */
.logo + div {
  font-size:18px;
  line-height:0;
  top:50px;
  left:120px;
  }
.before-custom-amount {
  position:absolute;
  top:21px;
  left:10px;
  line-height:0;
  display:block;
  }
input#custom-value:focus,
input:focus + .before-custom-amount {
  color:#7092ff;
  }
  input#custom-value:focus { font-weight:bold; }

input.before {
  padding-left:20px;
  }

.avatar {
  display:inline-block;
  width:30px;
  height:30px;
  border-radius:50%;
  background-size:contain;
  vertical-align:middle;
  }
  .avatar.andy        { background-image:url(img/avatars/andy.png); }
  .avatar.zerebubuth  { background-image:url(img/avatars/zerebubuth.png); }
  .avatar.thughes     { background-image:url(img/avatars/thughes.jpg); }
  .avatar.firefishy1  { background-image:url(img/avatars/firefishy1.jpg); }
  .avatar.melaskia    { background-image:url(img/avatars/melaskia.png); }
  .avatar.burgess     { background-image:url(img/avatars/burgess.png); }
  .avatar.lonvia      { background-image:url(img/avatars/lonvia.jpeg); }
  .avatar.anon        { background-image:url(img/avatars/anon.png); }

/* Mobile
---------------------------------------------- */
@media only screen and (max-width: 640px) {
  .sidebar {
    padding:20px;
    }
  .tabs a {
    padding-right:10px;
    padding-left:10px;
    }
  .keyline-left {
    border-left-width:0;
    border-bottom-width:1px;
    }
  .big-donors > div:not(:first-child),
  .grouped-options label {
    border-top-width:1px;
    border-top-style:solid;
    border-bottom:none;
    }
  .big-donors > div {
    border-color:rgba(0,0,0,0.10);
    }
  .grouped-options label[for='amount-15'] {
    border:none;
    }
}