/* ---------------------------
 * Site Wide styles for elements like links, buttons, images 
 * --------------------------- */
body, html {
   height: 100%; /* Need this for sticky footer */
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Lucida Grande', 'Helvetica Neue', Verdana, Arial, sans-serif;
    color: #FFF;
    line-height: 1.2;
}

p {
  margin-bottom: 0.5em;
}

input {
    font-size: 13px;
}

input[type=text], input[type=password] {
    float: left;
    height: 24px;
    padding: 3px;
    width: 300px;
    border: 1px solid #76d9fa;
    border-radius: 3px;
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;
    outline: 0;
    background: #FFFFFF;
    /* drop shadows for opera, gecko, and webkit */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 7px;
}

input:hover, input:focus {
    border-color: #C9C9C9;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 7px; /*darker shadow*/
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 7px;
}

label {
    float: left;    
    display: block;
    margin-right: 10px;
    width: 100px;
    text-align: right;
}

/* Awesome CSS3 buttons by ZURB Inc.
 * Copied with permission from http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
.awesome, .awesome:visited {
    background: #222 url(../images/alert-overlay.png) repeat-x; 
    display: inline-block; 
    padding: 5px 10px 6px; 
    color: #fff; 
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
}

.awesome:hover                          { background-color: #111; color: #fff; }
.awesome:active                         { top: 1px; }
.small.awesome, .small.awesome:visited          { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited        { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited          { font-size: 14px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited      { background-color: #91bd09; }
.green.awesome:hover                        { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited        { background-color: #27809A; }
.blue.awesome:hover                         { background-color: #1E6377; }
.red.awesome, .red.awesome:visited          { background-color: #e33100; }
.red.awesome:hover                          { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited      { background-color: #a9014b; }
.magenta.awesome:hover                          { background-color: #630030; }
.orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
.orange.awesome:hover                           { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
.yellow.awesome:hover                           { background-color: #fc9200; }

/* Pulsing goodness */
@-webkit-keyframes pulse {
 from {
    -webkit-box-shadow: 0px 2px 4px #0fa0d1;
    -moz-box-shadow: 0px 2px 4px #0fa0d1;
    box-shadow: 0px 2px 4px #0fa0d1;
    border-color: #76d9fa;
 }
 to {
    -webkit-box-shadow: 0px 2px 4px #032029;
    -moz-box-shadow: 0px 2px 4px #032029;
    box-shadow: 0px 2px 4px #032029;
    border-color: #26454f;   
 }
}

.pulsed {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-box-shadow: 0px 2px 4px #0fa0d1;
    -moz-box-shadow: 0px 2px 4px #0fa0d1;
    box-shadow: 0px 2px 4px #0fa0d1;
    border-color: #76d9fa;
}


/* ---------------------------
 * Header and navigation 
 * --------------------------- */
#header {
    padding: 10px;
    height: 50px;
    margin-bottom: 70px;
    background: rgb(17, 17, 17); /* Fallback - opaque */
    background: rgba(17, 17, 17, 0.7);
    border-bottom: 1px solid #76d9fa;
    background: -moz-linear-gradient(top, rgba(70, 70, 70, 0.7) 0%, rgba(17, 17, 17, 0.7); 40%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,rgba(17, 17, 17, 0.7)),  color-stop(0%,rgba(70, 70, 70, 0.7))); /* webkit */
}

#header h1 {
    width: 400px;
    float: left;
}
#header nav {
    margin-top: 10px
    margin-right: 10px
}

#menu ul {
    /*float: right;*/
    list-style: none;
    padding-right: 20px;
}

#menu {
    float: right;
}

#clock {
    margin-left: -50px;
}

#menu li {
    float: left;
    width: 70px;
}

#menu li a, #menu li a:visited {
    color: #C5C5C5;
    text-transform: uppercase;
    text-decoration: none;
}

#menu li a:hover {
    color: #FFFFFF;
}

/* ----------------------------
 * Content 
 * ---------------------------- */
/* For wrapping around all the body content */
#wrap {
    color: #FFF;     /* All font should be white */
    min-height: 100% /* For sticky footer goodness */
}

/* IE7 fix for wrap */
.ie7 #wrap {
    display: table;
    height: 100%;
}

#content {
    width: 960px; /*960 aw yeah*/
    margin: 0 auto;
    overflow: auto;
    padding-bottom: 261px; /* must be same height as the footer ... or not */
}

#page {
    min-height: 200px; 
    /* rounded corners in webkit/gecko ... might as well */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #76d9fa;
    margin: 10px;
    padding: 10px;
}

/* Footer */
/* for the "menu" of sorts, within the "rooms" */
#footer {
    -webkit-box-shadow: 0px 0px 6px #0fa0d1;
    -moz-box-shadow: 0px 0px 6px #0fa0d1;
    box-shadow: 0px 0px 6px #0fa0d1;
    margin-top: -161px; /* negative value of footer height */  
    border-top: 1px solid #76d9fa;
    height: 160px;
    position: relative;
    clear: both;
}

/* Opera Fix for sticky footer */
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

/* Footer Nav */
.map-thing {
    list-style: none;
    margin: 0 auto;
    width: 960px;
}
.map-thing li {
    float: left;
    width: 120px;
    height: 160px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
}
.map-thing li.go-button {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  height: auto;
}
.map-thing li.go-button a {
  margin-bottom: 10px;
}
.map-thing li a.image_link {
    display: block;
}
.map-thing li a.text_link {
    margin-top: 4px
}
/* Map image things only 100% opacity when hovered */
.map-thing li img {
   opacity: 0.5;  
}
.map-thing li.current img, .map-thing li a:hover img {
   opacity: 1.0;
}

/* ----------------------------
 * Room specific styling
 * ---------------------------- */

body.room {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}

/* Specific body IDs for each page ... for controlling bgimage etc */
#welcome {
    background-image: url(../images/earth.jpg);
    background-position: bottom left;
}

#login {
    background-image: url(../images/quantum.jpg);
    background-position: top left;
}

#credits {
    background-image: url(../images/credits.jpg);
    background-position: center left;
}

#room1 {
    background-image: url(../images/moon.jpg);
    background-position: top right;
}

#room2 {
    background-image: url(../images/dune.jpg);
    background-position: top left;
}

#room3 {
    background-image: url(../images/orion.jpg);
    background-position: center left;
}

#room4 {
    background-image: url(../images/sss.jpg);
    background-position: center left;
}

#room5 {
    background-image: url(../images/memento.jpg);
    background-position: center left;
    background-size: 100%;
}

/* Because the bullet points overlap with the blue frame */
#tab li {
   margin-left: 50px;
}

/* Because there isn't really a better way of doing this ...
Just doing opacity = whatever will affect child elements too */
.opacity-80 {
    background: rgb(17, 17, 17); /* Fallback - opaque */
    background: rgba(17, 17, 17, 0.8);
}

.page-header {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.8em;
    border-bottom: 1px solid #76d9fa;
    padding-bottom: 2px;
    margin-bottom: 0.5em;
}

.page-body {
    font-size: 1.0em;
}

/* Because ... that's why */
.center {
    margin: 0 auto;
    width: 400px;
}
/* for the login error page mainly */
.text-center {
    text-align: center;
    line-height: 1.7em;
}

/* For hyperlinks in the page body ... white, underline on hover */
.page-body a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.page-body a:hover {
    /* the equivalent of text-decoration: underline, but nicer */
    border-bottom: #FFFFFF solid 1px;
}

/* -----------------------
 * Styling for the login form
 * ---------------------- */
.login {
  width: 500px;
  margin: 0 auto;
}

.submit input {
    border: 0px; /* to get rid of the border imposed above */
    margin: 0 auto;
    width: 70px;
    display: block;
}