/* Reset
 ------------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.625em;
}

/* Typography
 ------------------------------------*/
h1 { font-size: 6em; }
article h2 {
  font-family: Palatino, Times, serif;
  font-size: 8em;
}

h3 { font-size: 2em; }

p, a, i, button { font-size: 2em; }
a { color: #000; }
p { color: #666; }

.modal-status{ font-size: 2em; }
.error { color: #661215; }
.warning { color: #765a0c; }
.success { color: green; }
.default { color: white; }

/* Layout
 ------------------------------------*/
header { overflow: hidden; }
header > h1 {
  float: left;
}
header > ul {
  padding-left: 15px;
  border-left: 1px solid #CCC;
  list-style-type: none;
  float: right;
}

nav {
  background-color: #CCC;
  text-align: center;
  padding: 10px 0;
}

nav a {
  display: inline-block;
  margin: 0 10px;
}

article  { position: relative; }
article h2 { 
  margin: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  color: #FFF;
  font-weight: 200;
}

article img {
  width: 100%;
}

.main {
  margin: auto;
  width: 1000px;
}

.list { 
  border-bottom: 1px solid #CCC;
  padding: 5px 0 5px 15px; 
}

/* Components
 ------------------------------------*/
.grid {}
.grid-unit {
  display: inline-block;
  margin-left: -4px;
  vertical-align: top;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-unit img { width: 100%; }
.grid-unit:first-child { margin-left: 0; }

.grid-unit--3-4 { width: 75%; }
.grid-unit--2-3 { width: 66.66%; }
.grid-unit--1-2 { width: 50%; }
.grid-unit--1-3 { width: 33.33%; }
.grid-unit--1-4 { width: 25%; }

.grid-col { padding: 10px; }
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: rgba(0,0,0, .75);
  opacity: 0;
}

.modal {
  margin: auto;
  width: 25%;
  position: relative;
  top: 150px;
}

.modal .modal-icon {
  /*display: none;*/
  position: absolute;
  top: 15px;
  right: 15px;
}

.modal-status{
  border-radius: 4px;
  padding: 14px 7px;
  width: 100%;
  position: absolute;
  top: -48px;
  text-align: center;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;

  -webkit-transition: background-color .15s ease-in;
  -moz-transition: background-color .15s ease-in;
  transition: background-color .15s ease-in;
}

.modal-status.error {
  background-color: #DB585C;
}

.modal-status.warning {
  background-color: #D7B457;
}

.modal-status.success {
  background-color: #54BDA2;
}

.modal-status.default {
  background-color: rgba(0,0,0, .5);
}

/* Buttons
 ------------------------------------*/
button {
  border-radius: 4px;
  border: 1px solid #54BDA2;
  padding: 14px 7px;
  position: relative;
  background-color: #54BDA2;
  color: #FFF;
  width: 100%;
  cursor: pointer;

  -webkit-transition: all .40s ease-in;
  -moz-transition: all .40s ease-in;
  transition: all .15s ease-in;
}

button:hover {
  background-color: #469d87;
}

button:active {
  top: 3px;
}

#preview-ad {
  display: none;
  position: absolute;
  z-index: 999999999;
  right: 0;
  width: auto;
}

/* Forms
 ------------------------------------*/
input[type="text"] {
  border: 1px solid;
  border-radius: 4px;
  padding: 14px 7px;
  width: 100%;
  opacity: .8;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  -webkit-transition: all .40s ease-in;
  -moz-transition: all .40s ease-in;
  transition: all .15s ease-in;
}

input[type="text"]:hover {
  opacity: 1;
}

/* Animations
 ------------------------------------*/
.fade {
  transition: opacity .40s ease-in-out;
}

.fade.in { opacity: 1; }
.fade.out { opacity: 0; }