/*
**
** FILE     : style.css
** UPDATED	: 11/13/2014
**
*/


/*************************************************************************************************/
/*** LAYOUT **************************************************************************************/

.spine, .rib { padding: 8px; }
main { min-height: 512px; }
main.spine { padding: 16px; }

header { height: 96px; }
footer { clear: both; }

div#art {
  clear: both;
  display: block;
  float: left;
  padding: 16px;
}
div#art ul {
  list-style: none;
  margin: 16px 0 16px 0;
  padding: 0;
}
div#art ul li {
  display: block;
  float: left;
  height: 96px;
  margin: 8px 8px 0 0;
  padding: 0;
  width: 96px;
}

div#ui {
  clear: both;
  display: block;
  float: left;
  padding: 16px;
}

#starfield { left: 0; } /* STARSCROLL POSITION FIX */

/*************************************************************************************************/
/*** STYLE ***************************************************************************************/

body { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIW2NkYGD4D8QogJFCQV4OTDMBKSgFFt1nKIIAAAAASUVORK5CYII=") }
nav.spine, main.spine { background-color: rgba(16,16,16,0.6); }

/*************************************************************************************************/
/*** NAVIGATION **********************************************************************************/

nav ul {
  list-style: none;
  margin: 0 auto;
  margin-bottom: 0;
  padding: 0;
}
nav ul li {
  width: 144px;
  height: 32px;
  float: left;
  line-height: 1em !important;
  padding: 8px !important;
  font-weight: bold;
}
nav ul li a { color: rgb(169,169,169); }
nav ul li a.active { color: rgb(248,160,28) !important; }

i.icon {
  display: block;
  float: left;
  width: 32px !important;
  height: 32px !important;
  position: relative;
  top: -8px;
  padding: 8px;
  background-repeat: no-repeat;
  margin-right: 8px;
}
a.active i.icon.home, a.inactive i.icon.home
{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF+KAcAAAANk5VCgAAAAJ0Uk5T/wDltzBKAAAAOElEQVR42mJgJAAYhqACBiCgRAEDFJCrgAEJkKOAAQ2QqoABCyBNAeVuGEwKUFn0VjCkcxZAgAEAQeIC+S/lgBkAAAAASUVORK5CYII=) }
a.active i.icon.work, a.inactive i.icon.work
{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF+KAcAAAANk5VCgAAAAJ0Uk5T/wDltzBKAAAASElEQVR42mJgJAAYhqwCBjAgXwFIihIFEGkIJkcBujQpCmBeQ5UmXgFMEl2aFAXICilRgG4B8QqQPUu+AuRkQp6CIZyzAAIMADaJA4FwzWKQAAAAAElFTkSuQmCC); }
a.active i.icon.labs, a.inactive i.icon.labs
{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF+KAcAAAANk5VCgAAAAJ0Uk5T/wDltzBKAAAAKElEQVR42mJgJAAYRhVQVwEDnGZAFyFJASY5FBVQEg6jKYr2CgACDACfiQOxyshmewAAAABJRU5ErkJggg==); }
a.active i.icon.creds, a.inactive i.icon.creds
{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF+KAcAAAANk5VCgAAAAJ0Uk5T/wDltzBKAAAANklEQVR42mJgJAAYRhWgK2AAAmSaVAUMaGBoKkBVgjMc8CpAKMEZFwQVoAczOQpGUzUuABBgAOn6A2Gk3D9fAAAAAElFTkSuQmCC); }
a.inactive i.icon { -webkit-filter: grayscale(1); }

/*************************************************************************************************/
/*** TYPOGRAPHY **********************************************************************************/

body {
  font-family: sans-serif;
  color: rgb(220,210,210);
}

@font-face {
  font-family: "Joystix";
  font-style: normal;
  font-weight: normal;
  src: url("joystix.otf");
}

h1,h2,h3,nav,footer{ font-family: "Joystix"; }

header h1 {
  color: rgb(220,210,210);
  font-size: 48px !important;
  text-align: center;
  line-height: 64px;
}

.rib p {
  font-family: monospace;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}
.rib ul {
  font-family: monospace;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 24px;
  padding-top: 8px;
  color: rgb(224,224,224);
}
.rib p a, .rib li a{ color: rgb(248,160,28); }

footer small {
  font-size: 10px;
  text-align: center;
  color: rgb(80,80,80);
}

/*************************************************************************************************/
/*** EFFECTS *************************************************************************************/

.buzz_wrapper {
  width: 100%;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
}
.buzz_wrapper .text { position: relative; }

.buzz_wrapper h1 {
  width: 100%;
  position: absolute;
  line-height: 80px;
  text-align: center;
  font-size: 3em;
}
.buzz_wrapper h1 { -webkit-animation: wobble 50ms infinite; }
@-webkit-keyframes wobble {
  50% { opacity: 0.8; left: -1px; }
  51% { opacity: 1.0; left: 0px; }
}

.buzz_wrapper h1:nth-child(1) {
	color: rgb(248,160,28);
}
.buzz_wrapper h1:nth-child(1) { -webkit-animation: jerk-vert 5s infinite; }
@-webkit-keyframes jerk-vert {
  0%  { top: 0; opacity: 1; }
  30% { top: 0; opacity: 1; }
  31% { top: 4px; opacity: 0.5; }
  32% { top: 0; opacity: 1; }
  59% { top: 0; opacity: 1; }
  60% { top: -4px; }
  61% { top: 0; opacity: 1; }
  98% { top: 0; opacity: 1; }
  100% { top: 4px; opacity: 0.5; }
}

/*************************************************************************************************/
/*** EOF *****************************************************************************************/