/** Fonts **/

@font-face {
	font-family: 'Zero&ZeroIsRegular';
	src: url('fonts/zero-zero/zero_and_zero_is.eot');
	src: local('☺'), url('fonts/zero-zero/zero_and_zero_is-webfont.woff') format('woff'), url('fonts/zero-zero/zero_and_zero_is.ttf') format('truetype'), url('fonts/zero-zero/zero_and_zero_is-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

/** Page Styles **/

body {
  margin: 0;
  padding: 0;
  font-family: verdana, arial, helvetica, sans-serif;
  background-color: #242424;
  background-image: url("images/concrete.png");
  background-repeat: repeat;
}

div#container {
  margin: 0;
  padding: 40px 0 0 0;
  position: relative;
  overflow: hidden;
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 800%;
  color: rgba(0,0,0,0.3);  
  font-weight: bold;
  position: absolute;
  white-space:nowrap;
  top: 0;
  font-family: 'Zero&ZeroIsRegular', verdana, arial, helvetica, sans-serif;
}


div#header {
  background-image: url("images/topleft.png");
  background-repeat: no-repeat;
  margin: -10px 0 0 -10px;
  padding: 0;
}

div#header > div#header-content {
  margin: -10px -15px 0 0;
  padding: 20px 0 0 20px;
  min-height: 95px;
}

div#header h2 {
  margin: 0;
  position: absolute;
  top: 15px;
  left: 30px;
  color: rgba(255,255,255,0.9);
  font-family: 'Zero&ZeroIsRegular', verdana, arial, helvetica, sans-serif;
  text-shadow: 5px 5px 6px rgba(0,0,0,0.90);
  font-size: 45px;
  transform: rotate(-02deg);
  -webkit-transform:rotate(-2.5deg);
  -moz-transform:rotate(-2.5deg);
  -o-transform:rotate(-2.5deg);
}

/** Navigation **/

div#navigation {
  position: absolute;
  top: -10px;
  right: -15px;
  margin: 0;
  padding: 0;
  background-image: url("images/topright.png");
  background-repeat: no-repeat;
  background-position: 100% 0;
}

div#navigation div.title {
  position: absolute;
  top: 24px;
  right: 24px;
  font-weight: normal;
  font-size: 0px;
  color :#0086ed;  
  width: 60px;
  height: 60px;
  box-shadow: -2px 2px 10px rgba(0,0,0,0.50);
  -moz-box-shadow: -2px 2px 10px rgba(0,0,0,0.50);
  -webkit-box-shadow: -2px 2px 10px rgba(0,0,0,0.50);
  border-radius: 0 6px 0 60px;
  -moz-border-radius: 0 6px 0 60px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-left-radius: 60px;
  background-color: rgb(60,60,60);
  background-repeat: repeat-x;
  background-image: url("images/device-base.png");
  /*background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.22, rgb(60,60,60)), color-stop(0.76, rgb(175,175,175))); Conflict with li:hover causing webkit gradient to break up */
  background-image: -moz-linear-gradient(top left, rgb(60,60,60), rgb(175,175,175));
  overflow: hidden;
  z-index: 10;
}

div#navigation h3 {
  display: block;
  margin: 0;
  padding: 0;
  color :#0086ed;  
  width: 52px;
  height: 52px;
  border-radius: 0 5px 0 52px;
  -moz-border-radius: 0 5px 0 52px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 52px;
  background-color: rgb(175,175,175);
  background-repeat: repeat-x;
  background-image: url("images/device-top.png");
  /*background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.1, rgb(175,175,175)), color-stop(0.8, rgb(60,60,60))); Conflict with li:hover causing webkit gradient to break up */
  background-image: -moz-linear-gradient(top left, rgb(175,175,175), rgb(60,60,60));
  position: absolute;
  top: 3px;
  right: 3px;
}

div#navigation h3 span {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("images/skater.png");
  background-repeat: no-repeat;
  padding-top: 200px;
}

div#header div#navigation ul {
  margin: 24px 23px 0 0;
  padding: 2px 2px 0 0;
  z-index: 2;
  position: relative; 
  overflow: hidden;
  background-color: rgba(255,255,255,0.2);
  width: 160px;
  height: 160px;
  border-radius: 0 6px 0 120px;
  -moz-border-radius: 0 6px 0 120px;
  -webkit-border-top-right-radius: 6px; /* Split out border-radius for Safari */
  -webkit-border-bottom-left-radius: 120px; /* Split out border-radius for Safari */
  box-shadow: -2px -2px 10px rgba(0,0,0,0.80);
  -moz-box-shadow: -2px -2px 10px rgba(0,0,0,0.80);
  -webkit-box-shadow: -2px -2px 10px rgba(0,0,0,0.80);
  border-style: solid;
  border-color: rgba(0,0,0,0.5);
  border-width: 0 0 1px 0px;
}

div#header div#navigation ul li {
  display: block;
  margin: 0 10px 0 0;
  padding: 12px 0px 12px 15px;
  position: relative; 
  transform-origin: 130px 15px;
  -moz-transform-origin: 130px 15px;
  -webkit-transform-origin: 140px 15px;
  -o-transform-origin: 140px 15px;
  font-family: 'Zero&ZeroIsRegular', verdana, arial, helvetica, sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,.5);
  text-shadow: 1px 1px 3px rgba(0,0,0,1);
  border-style: solid;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(255,255,255,0) rgba(0,0,0,0);
  border-width: 1px 0 1px 0;
}

div#header div#navigation ul li:nth-child(1) {
  transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
}

div#header div#navigation ul li:nth-child(2) {
  transform:rotate(-30deg);
  -moz-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  top: -42px;
  right: 9px
}

div#header div#navigation ul li:nth-child(3) {
  -moz-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  -o-transform:rotate(-60deg);
  top: -78px;
  right: 8px;
}

div#header div#navigation ul li:nth-child(4) {
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  top: -115px;
}

div#header div#navigation ul li:hover {
  background-color: rgba(0,0,0,0.1);
  color: rgba(255,255,255,1);
  border-style: solid;
  border-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1) rgba(255,255,255,0.3) rgba(0,0,0,0.1);
  border-width: 1px 0 1px 0;
  z-index: 5;
}


/** Content Area **/

div#contentarea {
  margin: 15px 50px 50px 50px;
  padding: 0;
  background-color: rgba(0,0,0,0.6);
  border-style: solid;
  border-color: rgba(255,255,255,0.3);
  border-width: 1px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  position: relative;
  box-shadow: 0px 0px 25px rgba(0,0,0,0.60);
  -moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.90);
  -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.60);
  min-height: 300px;
  background-image: url("images/cityscape.png");
  background-repeat: repeat-x;
  background-position: 0 100%;
}

div#contentarea > div#content {
  min-height: 300px;
  padding: 0 30px 20px 30px;
  color: #fff;
}

/* Content Items */

div.item {
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
  background-color: rgba(0,0,0,0.3);
  background-image: -moz-radial-gradient(top left, circle, rgba(255,255,255, 0.2) 10%, rgba(0,0,0,0.1) 45%);
  background-image: -webkit-gradient(radial, 0 0, 0, 40% 40%, 800, from(rgba(255,255,255, 0.2)), to(rgba(0,0,0,0.1)));
  border-style: solid;
  border-color: rgba(255,255,255,0.3);
  border-width: 2px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
  box-shadow: 0px 0px 25px rgba(0,0,0,0.60);
  -moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.90);
  -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.60);
  font-size: 11px;
}

div.item:hover {
  margin: 0 10px 20px 10px;
  background-image: -moz-radial-gradient(top left, circle, rgba(0,0,0, 0.1) 10%, rgba(0,108,255,0.2) 65%);
  background-image: -webkit-gradient(radial, 0 0, 0, 40% 40%, 800, from(rgba(0,0,0, 0.1)), to(rgba(0,108,255,0.2)));
  transform: translate(0px, 0px) scale(1.1, 1.1);
  -moz-transform: translate(0px, 0px) scale(1.1, 1.1);
  -moz-transition-property: transform; /* FF4 */
  -moz-transition-duration: 1s; /* FF4 */
  -webkit-transform: translate(0px, 0px) scale(1.1, 1.1);
  -webkit-transition-property: transform;
  -webkit-transition-duration: 1s;
  -o-transform: translate(0px, 0px) scale(1.1, 1.1);
  position:relative;
  z-index: 20;
}

div.item:nth-child(1) {
  margin-right: 150px;
}

div.item h3 {
  margin: 0 0 0 90px;
  padding: 5px;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.80);
}

div.item p {
  margin: 0 0 0 90px;
  padding: 5px;
}

div.item img {
  float: left;
  margin: -40px 0 0 -20px;
  padding: 0;
}


/** Footer **/

div#footer {
  background-image: url("images/baseleft.png");
  background-repeat: no-repeat;
  background-position: 0 100%;
  margin: 0 0 -10px -10px;
  padding: 0;
}

div#footer > div#footer-content {
  background-image: url("images/baseright.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  margin: 0 -15px 0 0;
  padding: 20px 50px 20px 50px;
  min-height: 90px;
  color: #fff;
  font-family: 'Zero&ZeroIsRegular', verdana, arial, helvetica, sans-serif;
  font-size: 16px;
}

div#footer > div#footer-content a:link {
  color: rgba(255,255,255,1);
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.80);
}

div#footer > div#footer-content p.credit {
  float: right;
  white-space:nowrap;
  transform: rotate(03deg);
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
}

div#footer > div#footer-content a:visited {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.80);
}

div#footer > div#footer-content a:hover {
  color: rgba(0,108,255,0.8);
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.80);
}