/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; } :focus { 	outline: 0; } ins { 	text-decoration: none; } del { 	text-decoration: line-through; } table { border-collapse: collapse; 	border-spacing: 0; }

/* //////////////////////////////////////
GENERAL STYLES
////////////////////////////////////// */

a {
  color: #fff;
  text-decoration: none;
  }
  
/* //////////////////////////////////////
GENERAL LAYOUT
////////////////////////////////////// */

body {
  text-align: center;
  font-size: 62.5%;
  font-family: "Lucida Grande", Lucida, Helvetica, Arial, Verdana, sans-serif;
  color: #fff;
  background-color: #000;
  }
  
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

#wrap {
  width: 880px;
  margin: 0 auto;
  }
  
#splash_inner {
  width: 880px;
  height: 605px;
  float: left;
  text-align: left;
  background: #000 url(media/graphics/interface/puzzle_world.gif) bottom right no-repeat;
  }
  
#header {
  position: relative;
  width: 880px;
  height: 120px;
  }
  
#navigation {
  float: left;
  width: 260px;
  padding-left: 60px;
  }
  
#content {
  float: right;
  width: 560px;
  }
  
#footer {
  clear: both;
  width: 880px;
  text-align: left;
  line-height: 1.4em;
  color: #aaa;
  }
  
/* //////////////////////////////////////
TOP NAV
////////////////////////////////////// */

#top_nav {
  width: 880px;
  background-color: #000;
  }
  
#top_nav ul {
  float: right;
  }
  
#top_nav ul li {
  float: left;
  background-color: #000;
  }
  
#top_nav ul li a {
  display: block;
  padding: 3px 10px;
  margin: 3px 0;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.0em;
  }
  
#top_nav ul li a:hover {
  color: #96d2f2;
  }
  
#top_nav ul li.break_after a {
  margin-right: 10px;
  padding-right: 20px;
  border-right: 1px solid #333;
  }
  
/* //////////////////////////////////////
HEADER
////////////////////////////////////// */

#header h1 a {
  display: block;
  position: absolute;
  width: 385px;
  height: 0px;
  top: 55px;
  left: 18px;
  padding-top: 80px;
  overflow: hidden;
  font-size: 1px;
  color: #000;
  }
  
#header h2 {
  position: absolute;
  right: 15px;
  top: 30px;
  line-height: 1.4em;
  text-align: right;
  font-size: 0.8em;
  }
  
#header h2 a {
  color: #fff;
  font-family: Georgia, Palatino, Times New Roman, Times, serif;
  font-size: 1.2em;
  }
  
#header h2 a:hover {
  text-decoration: underline;
  }
  
#header h2 a sup {
  font-size: 0.6em;
  vertical-align: super;
  }
  
/* //////////////////////////////////////
NAVIGATION
////////////////////////////////////// */

#navigation ul {
  padding: 40px 20px 20px 20px;
  }
  
#navigation ul li a {
  width: 160px;
  display: block;
  padding: 17px 0 17px 60px;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  }
  
#navigation ul li a:hover {
  color: #96d2f2;
  }
  
li.orange a {
  background: transparent url(media/graphics/interface/splash_orange_puz1.gif) center left no-repeat;
  }
  
li.green a {
  background: transparent url(media/graphics/interface/splash_green_puz1.gif) center left no-repeat;
  }
  
li.blue a {
  background: transparent url(media/graphics/interface/splash_blue_puz1.gif) center left no-repeat;
  }
  
li.orange2 a {
  background: transparent url(media/graphics/interface/splash_orange_puz2.gif) center left no-repeat;
  }
  
li.green2 a {
  background: transparent url(media/graphics/interface/splash_green_puz2.gif) center left no-repeat;
  }
  
li.blue2 a {
  background: transparent url(media/graphics/interface/splash_blue_puz2.gif) center left no-repeat;
  }
  
#navigation ul li p {
  display: none;
  }
  
/* //////////////////////////////////////
CONTENT
////////////////////////////////////// */

#slideshow {
  width: 364px;
  height: 244px;
  position: relative;
  margin-top: 70px;
  margin-left: 20px;
  overflow: hidden;
  opacity: 1;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #fff;
  }
  
.trans_bg {
  background: transparent url(media/graphics/interface/popup_bg.png) top left repeat;
  }
  
.solid_bg {
  background-color: #0077C7;
  }
  
ul#preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 2912px;
  height: 244px;
  color: #fff;
  }
  
ul#preview li {
  float: left;
  width: 324px;
  height: 204px;
  padding: 20px;
  font-size: 1.4em;
  font-weight: bold;
  }
  
#slideshow h2 {
  padding: 0.8em 0;
  border-bottom: 1px solid #fff;
  font-size: 1.6em;
  }
  
#slideshow p {
  padding: 1em 0;
  line-height: 1.5em;
  }
  
/* //////////////////////////////////////
FOOTER
////////////////////////////////////// */

#footer p {
  margin-left: 80px;
  }
  
#footer p a {
  color: #aaa;
  text-decoration: underline;
  }
  
#footer p a:hover {
  color: #ddd;
  }
  
#footer p sup {
  vertical-align: super;
  font-size: 85%;
  }