body{
    background-color:#0a0a1a;
    font-family: malgun gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: url('/res/img/bg.jpg');
    background-repeat:repeat;
    background-attachment:fixed;
}


#inside {
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom:40px;
}

.cells {
}

.cell, .button, input[type=submit], input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], button, textarea {
    border:1px solid rgba(255, 255, 255, 0.15);
    padding:0px;
    margin:0px;
    background:rgba(255, 255, 255, 0.1);
}

input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"] {
    padding: 3px 5px;
    margin: 3px;
    font-size: 10pt;
    line-height: 1.45em;
}

.cell {
    border-top:none;
    float:left;
    width:100%;
    position:relative;
}

body, .cell, textarea, input[type=submit], input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], button {
    color: #bbb;
    font-size:14px;
}

.link, a:link, a:visited, input[type=submit], button {
    color: #adf;
    text-decoration: none;
}

a.dark:link, a.dark:visited {
    color:#9bb2c0;
}

a.green:link, a.green:visited {
    color: rgb(52, 208, 140);
}

.link:hover, a:hover, a.dark:hover, a.green:hover, input[type=submit]:hover, button:hover {
    color: #888;
}

.cell.post {
    min-height:200px;
}

.cell.first{
    border-top:1px solid #444;
}

.post .left {
    float:left;
    width:150px;
    text-align:center;
}

.post .right {
    margin-left:150px;
    margin-bottom:40px;
}

.markdown {
    word-wrap:break-word;
}

.markdown img {
    max-width:100%;
}

#header{
    padding: 5px 10px;
    margin-left: 60px;
    margin-right:60px;
}

.post .tools {
    position:absolute;
    bottom:0px;
    right:0px;
    padding:5px;
}

#header .current {
    margin-left:50px;
    margin-top:10px;
    font-size:20px;
}

#header .arrow {
    font-size:12px;
}

#headerleft {
    float:left;
}

div.clear{
    clear:both;
}

label {
    line-height:2.2em;
    vertical-align:middle;
    float:left;
    display:block;
    width:11em;
}

#headerright {
    float:right;
    text-align:right;
}

.button, input[type=submit], button {
    display:inline-block;
    padding: 4px 10px 4px 10px;
}

a.button:hover, input[type=submit]:hover, button:hover {
    background:rgba(255, 255, 255, 0.8);
    color: #47d;
    cursor:pointer;
}

textarea {
    background:rgba(255, 255, 255, 0.075);
    color:#ddd;
}
textarea.wide {
    width:100%;
    height:200px;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-ms-input-placeholder {
    color: #000000;
}

.new_comment {
    margin-top:10px;
    background:none;
    border:none;
}

.post blockquote {
    display:inline-block;
    background:rgba(255, 255, 255, 0.05);
    border:1px solid #444;
    padding-left:8px;
    padding-right:8px;
    width:auto;
    margin:5px;
}

.post code {
  font-family: monaco, courier new;
  background:rgba(255, 255, 255, 0.05);
  border:1px solid #444;
  display:inline-block;
}

.scrobble {
    display:table;
    margin:7px;
    position:relative;
    left:15%;
    transform:translate(-15%,0);
}

.scrobble .albumart {
    display:table-cell;
    width:24px;
    height:24px;
}

.scrobble .info {
    display:table-cell;
    vertical-align:top;
    padding-left:5px;
}

#stripe-payment-form {
    position:relative;
    max-width:500px;
    border: 1px solid #444;
    border-radius:10px;
    background:rgba(255, 255, 255, 0.1);
    padding:20px;
}
#stripe-payment-form button {
    background: rgba(52, 208, 140, 0.7);
    color: white;
    border-radius: 8px;
    border: 0;
    margin-top: 20px;
    font-size: 19px;
    font-weight: 400;
    width: 50%;
    min-height: 47px;
    line-height: 25px;
    outline: none;
    position:relative;
    left:50%;
    transform:translate(-50%, 0);
}

#stripe-payment-form button:focus {
    background: #24B47E;
}

#stripe-payment-form button:active {
    background: #159570;
}
#stripe-payment-form #card-errors {
    color: #e85746;
}

.flash-error {
    color: #e85746;
}

#stripe-payment-form .field {
  background: transparent;
  font-weight: 300;
  border: 0;
  color: white;
  outline: none;
  cursor: text;
  display: block;
  width: 100%;
  line-height: 32px;
  padding-bottom: 3px;
  transition: opacity 200ms ease-in-out;
  font-size:19px;
  height:35px;
}

.loader {
    border: 6px solid rgba(255, 255, 255, 0.4); /* Light grey */
    border-top: 6px solid rgba(255, 255, 255, 0.8); /* Blue */
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 1s linear infinite;
    position:relative;
    left:50%;
    transform:translate(-50%, 0);
}

@keyframes spin {
    0% { transform: translate(-50%, 0) rotate(0deg); }
    100% { transform: translate(-50%, 0) rotate(360deg); }
}

#stripe-payment-form .field::-webkit-input-placeholder { color: #8898AA; }
#stripe-payment-form .field::-moz-placeholder { color: #8898AA; }