/*-- Default Page Styles --*/
* {
   font-family: helvetica,arial,verdana,sans-serif;
}

html, body {
   height: 100%;
   background: #EEE;
   color: #383838;
   font-size: 0.7em;
   margin: 0;
   padding: 0;
}

a, a:visited {
   position: relative;
   color: #27AE60;
   text-decoration: none;
}

a:hover {
   cursor: pointer;
   text-decoration: underline;
}

h2, h3, h4, h5, h6 {
   position: relative;
   display: block;
   padding: 0;
   margin: 0;
   font-weight: bold;
   color: #FFF;
}

img {
   border: none;
   text-decoration: none;
   color: transparent;
}

.pull-left {
   float: left;
}

.pull-right {
   float: right;
}

.container {
   position: relative;
   width: 1000px;
   margin: 0 auto;
   overflow: hidden;
}

::selection {
   background-color: #444;
   color: #DDD;
}

::-moz-selection {
   background-color: #444;
   color: #DDD;
}



/*----- Header Styles -----*/
#header {
   background: #222;
   position: relative;
   display: block;
   width: 100%;
}

#header > .container > .pull-left {
   padding: 22px 0;
}

#header > .container > .pull-left > .logo {
   font-size: 3em;
   font-weight: bold;
   position: absolute;
   color: #FFF;
   text-transform: capitalize;
   transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -khtml-transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
}

#header > .container > .pull-left > .logo:hover {
   color: #27AE60;
   text-decoration: none;
}

#header > .container > .pull-right {
   list-style: none;
   margin: 0;
   padding: 0;
}

#header > .container > .pull-right > li {
   display: inline-block;
   *display: inline;
   zoom: 1;
   float: left;
   margin: 0 0 0 20px;
   padding: 30px 0;
}

#header > .container > .pull-right > li.active {
   background: url('../img/nav_active.png') no-repeat bottom center;
}

#header > .container > .pull-right > li > a,
#header > .container > .pull-right > li > a:visited {
   color: #FFF;
   font-size: 1.5em;
   text-transform: uppercase;
   font-weight: bold;
   transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
   -moz-transition: color 0.2s ease-in-out;
   -khtml-transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
}

#header > .container > .pull-right > li > a:hover,
#header > .container > .pull-right > li.active > a {
   color: #27AE60;
   text-decoration: none;
}



/*----- Hero Styles -----*/
#hero {
   width: 100%;
   position: relative;
   background: #27AE60 url('../img/hero.png') top center fixed;
   text-align: center;
   color: #FFF;
   padding: 0 0 100px 0;
}

#hero > .container {
   padding: 60px 0;
}

#hero > .container > h2 {
   color: inherit;
   font-size: 2.8em;
   margin: 0 0 10px 0;
   text-transform: capitalize;
}

#hero > .container > p {
   display: block;
   padding: 0;
   margin: 0;
   font-size: 1.8em;
   color: inherit;
   opacity: 0.7;
   filter: alpha(opacity=70);
}



/*----- Main Styles -----*/
#main {
   background: #EEE;
   margin: -100px auto 0 auto;
   min-height: 600px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   padding: 14px;
   width: 972px;
}

#main > .content {
   width: 954px;
   padding: 8px;
   margin: 0 0 14px 0;
   background: #FFF;
   border: 1px solid #DDD;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}



/*----- Form Styles -----*/
#hash_select,
#hash_salt,
#hash_submit,
#hash_clear {
   width: 200px;
   padding: 8px 4px;
   margin: 0 8px 0 0;
   color: #222;
   font-size: 1.8em;
   background-color: #FFF;
   border: 1px solid #DDD;
   display: inline-block;
   *display: inline;
   zoom: 1;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#hash_submit,
#hash_clear {
   text-align: center;
   color: #FFF;
   cursor: pointer;
}

#hash_submit {
   background-color: #2ECC71;
   border-bottom: 3px solid #27AE60;
}

#hash_submit:hover {
   text-decoration: none;
   background-color: #40d47e;
   border-bottom: 3px solid #2cc36b;
}

#hash_clear {
   background-color: #4AA3DF;
   border-bottom: 3px solid #2E8ECE;
}

#hash_clear:hover {
   text-decoration: none;
   background-color: #50ACEB;
   border-bottom: 3px solid #4AA3DF;
}

a.loading {
   background-image: url('../img/loading.gif');
   background-repeat: no-repeat;
   background-position: 10px center;
}

#main > .content > #hash_input,
#main > .content > #hash_output {
   width: 944px;
   min-width: 944px;
   max-width: 944px;
   min-height: 240px;
   padding: 4px;
   font-size: 2em;
   color: #222;
   background-color: #FFF;
   border: 1px solid #DDD;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}



/*----- Footer Styles -----*/
#footer {
   background: #222;
   padding: 20px 0;
}

#footer > .container > span {
   font-size: 1.8em;
   color: #FFF;
   text-transform: capitalize;
}