/* Meme in text by DrummerHead */


/*
 * Baseline
 * - - - - - - - */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-image: url('/meme/img/noise.png');
  background-color: #222;
  color: #eee;
}
header, main {
  display: block;
}
a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
img {
  display: block;
  max-width: 100%;
  border: 0;
}
button,
input {
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="text"],
input[type="url"] {
  display: block;
  width: 100%;
  height: 2.3125em;
  padding: 0.5em;
  border: 1px solid #ccc;
  font-size: 0.875em;
  font-family: inherit;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.75);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-border-radius: 0;
          border-radius: 0;
  -webkit-appearance: none;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
     -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
          transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
}
input[type="text"]:focus,
input[type="url"]:focus {
  -webkit-box-shadow: 0 0 5px #999999;
     -moz-box-shadow: 0 0 5px #999999;
          box-shadow: 0 0 5px #999999;
  border-color: #999999;
}
input[type="text"]:focus,
input[type="url"]:focus {
  background: #fafafa;
  border-color: #999999;
  outline: none;
}
input[type="text"][disabled],
input[type="url"][disabled] {
  background-color: #dddddd;
}
/* End Baseline */




/*
 * Modular
 * - - - - - - - */

button,
.button {
  display: inline-block;
  position: relative;
  padding: .8125em 1.5em .75em 1.5em;
  margin: 0;
  border: 1px solid #2284a1;
  font-size: 1em;
  line-height: normal;
  text-align: center;
  font-weight: bold;
  font-family: inherit;
  text-decoration: none;
  background-color: #2ba6cb;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
}
button:hover,
button:focus,
.button:hover,
.button:focus {
  background-color: #2284a1;
  color: white;
}
button.expand,
.button.expand {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
button.disabled,
button[disabled],
.button.disabled,
.button[disabled] {
  background-color: #2ba6cb;
  border-color: #2284a1;
  color: #fff;
  cursor: default;
  opacity: .6;
  -webkit-box-shadow: none;
          box-shadow: none;
}
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
  color: white;
  background-color: #2ba6cb;
}
/* End Modular */




/*
 * Subscriptions
 * - - - - - - - */

[role="main"],
#meme-area,
#first-line,
#second-line {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

header:before,
header:after,
.share:before,
.share:after {
  content: '';
  display: table;
}
header:after,
.share:after {
  clear: both;
}
/* End Subscriptions */



/*
 * Persistent
 * - - - - - - - */

[role='main'] {
  padding: 16px;
}
#meme-frame {
  position: relative;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#meme {
  display: block;
  height: 100%;
  margin: 0 auto;
  color: #222;
}
#first-line,
#second-line {
  width: 100%;
  padding: .5em;
  position: absolute;
  left: 0;
  margin: 0;
  font-size: 2em;
  line-height: 1.07;
  letter-spacing: 1px;
  text-align: center;
  font-family: Impact,
               HelveticaNeue-CondensedBlack,
               Futura-CondensedExtraBold,
               Nimbus Sans L,
               Garuda,
               FreeSans,
               sans-serif;
  font-weight: bold;
  font-stretch: condensed;
  text-transform: uppercase;
  word-wrap: break-word;
  color: #fff;
  text-shadow:  0     -.050em 0 #000,
               .025em -.050em 0 #000,
               .050em -.050em 0 #000,
               .050em -.025em 0 #000,
               .050em   0     0 #000,
               .050em  .025em 0 #000,
               .050em  .050em 0 #000,
               .025em  .050em 0 #000,
                0      .050em 0 #000,
              -.025em  .050em 0 #000,
              -.050em  .050em 0 #000,
              -.050em  .025em 0 #000,
              -.050em   0     0 #000,
              -.050em -.025em 0 #000,
              -.050em -.050em 0 #000,
              -.025em -.050em 0 #000;
}
#first-line {
  top: 0;
}
#second-line {
  bottom: 0;
}
/* End Persistent */




/*
 * Specific page: Landing / Creation page
 * - - - - - - - */

header {
  height: 32px;
  padding: 0 0 16px 0;
}
header input[type="url"],
header input[type="text"] {
  float: left;
  width: 32.53333333333333%;
  margin: 0 1.2% 0 0;
}
header input:last-child {
  margin-right: 0;
}
#actions {
  padding: 16px 0 0 0;
}
#actions,
.share-trigger,
.share-field {
  height: 44px;
}
#actions .button + .button,
#actions button + button {
  margin-left: .6em;
}
.share-trigger {
  width: 11.5em;
  float: left;
}
.share-trigger button {
  width: 100%;
}
.share-trigger button[disabled]:after {
  content: "Supply a valid image url to share";
  width: 17em;
  line-height: 2;
  position: absolute;
  right: -18em;
  top: .4em;
  text-align: center;
  background-color: #ef0;
  color: #444;
}
.share-field {
  margin: 0 0 0 12.7em;
}
.share-field input {
  height: 100%;
  font-size: 1em;
}
/* End Specific page: Landing / Creation page */




/*
 * Media Queries
 * - - - - - - - */

@media (max-width: 480px){
  #meme-frame {
    font-size: .67776em !important;
  }
}
@media (max-width: 347px){
  #actions button,
  #actions .button {
    font-size: .95em;
  }
}
/* End Media Queries */