/**
 * GENERAL
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body {
  color: #222;
  font-family: arial, sans-serif;
  font-size: 14px;
}

p {
  font-size: 1em;
  line-height: 1.25;
}

a {
  color: #AC1B33;
  font-weight: bold;
  text-decoration: none;
}

a:hover,
a:focus,
a.active {
  text-decoration: underline;
}

/**
 * SECTIONS
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header, footer, nav {
  display: block;
}

header {
  background: rgba(175, 222, 227, 0.80);
  border-bottom: 1px solid #CCC;
  color: #00697C;
  font-size: .857em;
  position: fixed;
  top: 0;
  width: 100%;
}

footer {
  background: rgba(175, 222, 227, 0.80);
  border-top: 1px solid #CCC;
  bottom: 0;
  color: #00697C;
  left: 0;
  position: fixed;
  width: 100%;
}

#header-inner,
#footer-inner {
  height: 25px;
  padding: 5px;
}

#content {
  margin-top: 40px;
}

/**
 * HEADINGS
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
h1 {
  font-size: 1.143em;
  font-weight: bold;
  margin: 0;
}

h2 {
  font-size: 2em;
  font-weight: normal;
  margin: 0.3em 0;
}

/**
 * EXAMPLES
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.example {
  display: block;
  float: left;
  height: 120px;
  margin: .5%;
  overflow: hidden;
  text-align: center;
  width: 24%;
}

.example .info {
  color: #888;
  display: block;
  height: 15px;
  padding: .3em;
  width: 100%;
}

.example h4 {
  display: none;
  float: left;
  font-size: 	.857em;
  font-weight: normal;
}

.example p {
  font-size: 	1.143em;
}

.allan h2,
.allan p {
  font-family: 'Allan', sans-serif;
}

.allerta h2,
.allerta p {
  font-family: 'Allerta', sans-serif;
}

.allerta-stencil h2,
.allerta-stencil p {
  font-family: 'Allerta Stencil', sans-serif;
}

.anonymous h2,
.anonymous p {
  font-family: 'Anonymous Pro', sans-serif;
}

.arimo h2,
.arimo p {
  font-family: 'Arimo', sans-serif;
}

.bentham h2,
.bentham p {
  font-family: 'Bentham', serif;
}

.brawler h2,
.brawler p {
  font-family: 'Brawler', serif;
}

.buda h2,
.buda p {
  font-family: 'Buda', serif;
}

.cabin h2,
.cabin p {
  font-family: 'Cabin', sans-serif;
}

.calligraffitti h2,
.calligraffitti p {
  font-family: 'Calligraffitti', sans-serif;
}

.caudex h2,
.caudex p {
  font-family: 'Caudex', serif;
}

.cherry-cream h2,
.cherry-cream p {
  font-family: 'Cherry Cream Soda', sans-serif;
}

.chewy h2,
.chewy p {
  font-family: 'Chewy', sans-serif;
}

.coda h2,
.coda p {
  font-family: 'Coda', sans-serif;
}

.coming-soon h2,
.coming-soon p {
  font-family: 'Coming Soon', sans-serif;
}

.copse h2,
.copse p {
  font-family: 'Copse', serif;
}

.corben h2,
.corben p {
  font-family: 'Corben', serif;
}

.cousine h2,
.cousine p {
  font-family: 'Cousine', serif;
}

.covered-by h2,
.covered-by p {
  font-family: 'Covered By Your Grace', serif;
}

.crafty-girls h2,
.crafty-girls p {
  font-family: 'Crafty Girls', sans-serif;
}

.crushed h2,
.crushed p {
  font-family: 'Crushed', sans-serif;
}

.damion h2,
.damion p {
  font-family: 'Damion', sans-serif;
}

.fontdiner h2,
.fontdiner p {
  font-family: 'Fontdiner Swanky', serif;
}

.geo h2,
.geo p {
  font-family: 'Geo', serif;
}

.gruppo h2,
.gruppo p {
  font-family: 'Gruppo', sans-serif;
}

.homemade h2,
.homemade p {
  font-family: 'Homemade Apple', sans-serif;
}

.irish h2,
.irish p {
  font-family: 'Irish Growler', serif;
}

.droid-sans h2,
.droid-sans p {
  font-family: 'Droid Sans', sans-serif;
}

.jura h2,
.jura p {
  font-family: 'Jura', sans-serif;
}

.just-another h2,
.just-another p {
  font-family: 'Just Another Hand', sans-serif;
}

.just-me h2,
.just-me p {
  font-family: 'Just Me Again Down Here', sans-serif;
}

.kenia h2,
.kenia p {
  font-family: 'Kenia', sans-serif;
}

.kranky h2,
.kranky p {
  font-family: 'Kranky', sans-serif;
}

.kristi h2,
.kristi p {
  font-family: 'Kristi', sans-serif;
}

.lato h2,
.lato p {
  font-family: 'Lato', sans-serif;
}

.lekton h2,
.lekton p {
  font-family: 'Lekton', sans-serif;
}

.luckiest h2,
.luckiest p {
  font-family: 'Luckiest Guy', sans-serif;
}

.lobster h2,
.lobster p {
  font-family: 'Lobster', serif;
}

.mako h2,
.mako p {
  font-family: 'Mako', sans-serif;
}

.metrophobic h2,
.metrophobic p {
  font-family: 'Metrophobic', sans-serif;
}

.merriweather h2,
.merriweather p {
  font-family: 'Merriweather', serif;
}

.mountains-of h2,
.mountains-of p {
  font-family: 'Mountains of Christmas', serif;
}

.orbitron h2,
.orbitron p {
  font-family: 'Orbitron', sans-serif;
}

.permanent h2,
.permanent p {
  font-family: 'Permanent Marker', sans-serif;
}

.podkova h2,
.podkova p {
  font-family: 'Podkova', sans-serif;
}

.droid-serif h2,
.droid-serif p {
  font-family: 'Droid Serif', serif;
}

.yanone h2,
.yanone p {
  font-family: 'Yanone Kaffeesatz', serif;
}

.nobile h2,
.nobile p {
  font-family: 'Nobile', sans-serif;
}

.reenie h2,
.reenie p {
  font-family: 'Reenie Beanie', serif;
}

.rock-salt h2,
.rock-salt p {
  font-family: 'Rock Salt', serif;
}

.schoolbell h2,
.schoolbell p {
  font-family: 'Schoolbell', serif;
}

.shanti h2,
.shanti p {
  font-family: 'Shanti', serif;
}

.slackey h2,
.slackey p {
  font-family: 'Slackey', serif;
}

.sniglet h2,
.sniglet p {
  font-family: 'Sniglet', sans-serif;
}

.sunshiney h2,
.sunshiney p {
  font-family: 'Sunshiney', sans-serif;
}

.syncopate h2,
.syncopate p {
  font-family: 'Syncopate', sans-serif;
}

.tangerine h2,
.tangerine p {
  font-family: 'Tangerine', sans-serif;
}

.pt-sans h2,
.pt-sans p {
  font-family: 'PT Sans', serif;
}

.play h2,
.play p {
  font-family: 'Play', serif;
}

.molengo h2,
.molengo p {
  font-family: 'Molengo', serif;
}

.ofl-sorts h2,
.ofl-sorts p {
  font-family: 'OFL Sorts Mill Goudy TT', serif;
}

.vollkorn h2,
.vollkorn p {
  font-family: 'Vollkorn', serif;
}

.ultra h2,
.ultra p {
  font-family: 'Ultra', serif;
}

.cantarell h2,
.cantarell p {
  font-family: 'Cantarell', serif;
}

.inconsolata h2,
.inconsolata p {
  font-family: 'Inconsolata', serif;
}

.crimson h2,
.crimson p {
  font-family: 'Crimson Text', serif;
}

.cardo h2,
.cardo p {
  font-family: 'Cardo', serif;
}

.arvo h2,
.arvo p {
  font-family: 'Arvo', serif;
}

.neucha h2,
.neucha p {
  font-family: 'Neucha', serif;
}

.droid-sans-mono h2,
.droid-sans-mono p {
  font-family: 'Droid Sans Mono', serif;
}

.cuprum h2,
.cuprum p {
  font-family: 'Cuprum', serif;
}

.old-standard h2,
.old-standard p {
  font-family: 'Old Standard TT', serif;
}

.neuton h2,
.neuton p {
  font-family: 'Neuton', serif;
}

.nunito h2,
.nunito p {
  font-family: 'Nunito', sans-serif;
}


.im-fell-dw h2,
.im-fell-dw p {
  font-family: 'IM Fell DW Pica', serif;
}

.philosopher h2,
.philosopher p {
  font-family: 'Philosopher', serif;
}

.puritan h2,
.puritan p {
  font-family: 'Puritan', sans-serif;
}

.raleway h2,
.raleway p {
  font-family: 'Raleway', sans-serif;
}

.ruslan-display h2,
.ruslan-display p {
  font-family: 'Ruslan Display', sans-serif;
}

.girl-next-door h2,
.girl-next-door p {
  font-family: 'The Girl Next Door', sans-serif;
}

.tinos h2,
.tinos p {
  font-family: 'Tinos', serif;
}

.ubuntu h2,
.ubuntu p {
  font-family: 'Ubuntu', serif;
}

.unifrakturcook h2,
.unifrakturcook p {
  font-family: 'UnifrakturCook', serif;
}

.josefin-sans h2,
.josefin-sans p {
  font-family: 'Josefin Sans', sans-serif;
}

.josefin-slab h2,
.josefin-slab p {
  font-family: 'Josefin Slab', serif;
}

.unifrakturmaguntia h2,
.unifrakturmaguntia p {
  font-family: 'UnifrakturMaguntia', serif;
}

.unkempt h2,
.unkempt p {
  font-family: 'Unkempt', serif;
}

.vibur h2,
.vibur p {
  font-family: 'Vibur', sans-serif;
}

.walter-turncoat h2,
.walter-turncoat p {
  font-family: 'Walter Turncoat', sans-serif;
}

.wire-one h2,
.wire-one p {
  font-family: 'Wire One', sans-serif;
}

/* Typekit fonts */
.fertigo-pro h2,
.fertigo-pro p {
  font-family: "fertigo-pro-1","fertigo-pro-2",sans-serif;
}

.orgovan-rounded h2,
.orgovan-rounded p {
  font-family: "orgovan-rounded-web-1","orgovan-rounded-web-2",fantasy;
}

/* Settings */
.shadow {
  text-shadow: 1px 1px 2px #888;
}

.example .settings {
  background: #FFF;
  color: #AC1B33;
  cursor: pointer;
  display: none;
  float: right;
  font-size: 	.857em;
  padding: 0 .5em;
}

#settings {
  background: rgba(0, 0, 0, 0.9);
  bottom: 36px;
  color: #EEE;
  display: none;
  font-size: 12px;
  font-weight: bold;
  height: 120px;
  left: 0;
  position: fixed;
  text-align: left;
  width: 100%;
}

#settings-inner {
  padding: 5px;
}

code {
  background: #EEE;
  border: 1px solid #AAA;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #222;
  display: block;
  line-height: 1.2;
  padding: 5px;
}

code.css {
  width: 50%;
}

/**
 * FORM
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
form {
  text-align: left;
}

label {

}

input {
  border: 1px solid #AAA;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0px 2px 2px #CCC inset;
  -webkit-box-shadow: 0px 2px 2px #CCC inset;
  box-shadow: 0px 2px 2px #CCC inset;
  padding: 2px;
}

#heading,
#paragraph {
  width: 150px;
}

#lorem,
#reset {
  background: #EEE;
  border: 1px solid #AAA;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 3px 8px;
  text-align: center;
}

#font-color,
#back-color {
  width: 70px;
}

#icp_font-color,
#icp_back-color {
  position: relative;
  top: 3px;
}

/**
 * FOOTER
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#links {
  float: left;
  width: 300px;
}

#menu {
  float: right;
}

#twitter,
#flattr {
  padding: 0 5px;
}

#logo {
  float: left;
  font-family: "Arvo";
  font-size: 18px;
  font-weight: bold;
  margin: 5px 15px 0 5px;
  text-shadow: 1px 1px 1px #FFF;
}

#logo a {
  color: #00697C;
  text-decoration: none;
}

ul {
  float: right;
  list-style-type: none;
}

li {
  float: left;
  list-style-image: none;
  padding-right: 10px;
}

/**
 * IN PROGRESS
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#in-progress {
  display: block;
  margin: 100px auto;
  text-align: center;
  width: 400px; 
}

#in-progress p {
  margin: 1em 0;
}

#fix {
  clear: both;
  display: block;
  height: 35px;
}