@import url("colorbox.css");

/* global reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:top;}
a img {border:none;}
a, a:visited{color:#ffffff; text-decoration:underline;}
a:hover{color:#000000;}

/* style rules */
body{
	background:#026687 url(../../images/body.png) left top repeat-x;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
	line-height:1.45;
	margin:0;
	padding:0 0 40px;
}

html>body{font-size: 10px;}

/* ================================ #wrap ================================ */

#wrap{
	background:#0f2437 url(../../images/wrap.png) right bottom no-repeat;
	margin:0 auto;
	position:relative;
	width:986px;
}

/* ================================ #wrap #header ================================ */

#header{
	background:transparent url(../../images/header.png) no-repeat;
	height:150px;
	width:986px;
}

#header div.logo{
	display:inline;
	float:left;
	height:128px;
	margin:8px 0 0 15px;
	overflow:hidden;
	text-align:center;
	width:121px;
}

#header div.logo a{
	background:transparent url(../../images/shakyplanet_2012.png) no-repeat;
	display:block;
	height:128px;
	line-height:117px;
	text-indent:-9999px;
	width:121px;
}

#header div.tagline{
	background:transparent url(../../images/tagline.png) no-repeat;
	display:inline;
	float:left;
	height:58px;
	margin:22px 0 0 24px;
	overflow:hidden;
	width:370px;
}

#header div.tagline p{
	line-height:58px;
	text-align:center;
	text-indent:-9999px;
}

/* ================================ #wrap #header #topnav ================================ */

#topnav{
	float:right;
	width:394px;
	height:35px;
	margin:25px 22px 0 0;
	list-style:none;
	list-style-type:none;
}

#topnav li{
	float:left;
	margin:0;
	padding:0;
	border:0;
	list-style:none;
	list-style-type:none;
}

#topnav li a{
	display:block;
	float:left;
	height:35px;
	border:0;
	padding:0;
	text-decoration:none;
	text-indent:-9999px;
	-webkit-text-size-adjust:none;
	background:transparent url(../../images/topnav-sprt.png) no-repeat 0 0;
}

#topnav li.faq a{width:94px;}
#topnav li.support a{width:136px; background-position: -94px 0;}
#topnav li.contact-us a{width:164px; background-position: right 0;}

#topnav li.faq a:hover,
#topnav li.faq a.hover,
#topnav li.faq a:focus{background:transparent url(../../images/topnav-sprt.png) left bottom no-repeat;}
#topnav li.support a:hover,
#topnav li.support a.hover,
#topnav li.support a:focus{background:transparent url(../../images/topnav-sprt.png) -94px bottom no-repeat;}
#topnav li.contact-us a:hover,
#topnav li.contact-us a.hover,
#topnav li.contact-us a:focus{background:transparent url(../../images/topnav-sprt.png) right bottom no-repeat;}

/* ================================ #wrap #main ================================ */

#main{
	clear:both;
	overflow:hidden;
	margin:0 0 50px;
	width:986px;
}

/* ================================ #wrap #main #subnav ================================ */

#subnav{
	background:transparent url(../../images/subnav.png) left top no-repeat;
	width:986px;
	height:110px;
	list-style:none;
	padding:0 0 0 22px;
}

#subnav li{
	display:inline;
	float:left;
	margin:-4px 22px 0 0;
	width:298px;
}

#subnav li a span{
	display:inline-block;
	font-size:13px;
	line-height:17px;
	font-weight:bold;
	height:73px;
	padding:12px 0 0 83px;
	width:200px;
}

#subnav li a{
	color:#acf5ff;
	display:block;
	float:left;
	font-size:1em;
	height:85px;
	outline:none;
	text-decoration:none;
	width:298px;
}

#subnav li:hover{
	color:#60cfec;
	cursor:pointer;
}

#subnav li.video a{background:url(../../images/subnav-b-sprite.png) -22px top no-repeat;}
#subnav li.download a{background:url(../../images/subnav-b-sprite.png) -342px top no-repeat;}
#subnav li.share a{background:url(../../images/subnav-b-sprite.png) -662px top no-repeat;}

#subnav li.video a:hover, #subnav li.video a:focus{background:url(../../images/subnav-b-sprite.png) -22px bottom no-repeat;}
#subnav li.download a:hover, #subnav li.download a:focus{background:url(../../images/subnav-b-sprite.png) -342px bottom no-repeat;}
#subnav li.share a:hover, #subnav li.share a:focus{background:url(../../images/subnav-b-sprite.png) -662px bottom no-repeat;}

/* ================================ #wrap #main div.cola ================================ */

#main div.cola{
	display:inline;
	height:1%;
	float:left;
	width:600px;
}

/* ================================ #wrap #main div.content ================================ */

#main div.content h2{
	display:inline;
	height:25px;
	float:left;
	width:245px;
	color:#69bccc;
	font-size:17px;
	line-height:1;
	font-weight:bold;
	margin:10px 0 0 22px;
}

#main div.content h2.tt{
	width:230px;
}

#main div.content span.follow-h2{
	display:inline;
	height:1%;
	float:left;
	width:300px;
	margin-top:14px;
	color:#69bccc;
	font-size:11px;
	line-height:1;
	font-weight:bold;
}
#main div.content span.tts{
	width:348px;
	margin-top:14px;
	font-size:10.25px;
	display:inline;
	height:1%;}

#main div.content h3{
	color:#98cfff;
	font-size:16px;
	font-weight:bold;
	margin:5px 0 0 0;
}

#main div.content p{
	clear:both;
	font-size:1.15em;
	color:#a5c1d2;
	margin:0 0 15px 24px;
}

#main div.content ul{
	clear:both;
	font-size:1.15em;
	color:#a5c1d2;
	margin:0 0 15px 44px;
}

#main div.content li{
	margin:0 0 8px;
}

#main div.content a, #main div.content a:visited{text-decoration:underline; color:#a5c1d2;}
#main div.content a:hover{color:#cccccc;}
#main div.content a.mt span{display:inline-block; text-decoration:underline; width:10px; background:transparent url(../../images/icon_asym.png) no-repeat 0 3px;}
#main div.content a.mt:hover span{background-position: 0 -27px;}


/* ================================ #wrap #main div.globebox ================================ */

#main div.globebox{
	background:transparent url(../../images/flashbox.png) left top no-repeat;
	height:360px;
	position:relative;
	width:540px;
	z-index:200;
}

#main div.globebox img{
	float:left;
	margin:0 0 0 30px;
}

#main div.globebox ul{
	list-style:none;
}

#main div.globebox li{
	position:absolute;
}

/* Positioning */
#main div.globebox li.future{left:330px; top:45px; z-index:4;}
#main div.globebox li.edition{left:357px; top:113px; z-index:3;}
#main div.globebox li.time{left:357px; top:179px; z-index:2;}
#main div.globebox li.location{left:330px; top:242px; z-index:1;}

#main div.globebox li.edition:hover, #main div.globebox li.time:hover,
#main div.globebox li.location:hover{z-index:5; border-right:1px solid #0f2437;}

#main div.globebox li a{
	display:block;
	outline:none;
	overflow:hidden;
	text-indent:-9999px;
}

#main div.globebox li.edition a{
	background:url(../../images/edition-trans.png) left top no-repeat;
	height:31px;
	width:190px;
}

#main div.globebox li.future a{
	background:url(../../images/future-trans.png) left top no-repeat;
	height:33px;
	width:298px;
}

#main div.globebox li.location a{
	background:url(../../images/location-trans.png) left top no-repeat;
	height:33px;
	width:222px;
}

#main div.globebox li.time a{
	background:url(../../images/time-trans.png) left top no-repeat;
	height:31px;
	width:270px;
}

#main div.globebox ul li div.pillbox{
	background:transparent url(../../images/pillbox-trans.png) left top no-repeat;
	display:none;
	height:260px;
	padding:20px;
	position:absolute;
	width:260px;
}


#main div.globebox ul li div.pillbox p.title{
	color:#acf5ff;
	font-size:1.4em;
	font-weight:bold;
	margin:0 0 10px;

}

#main div.globebox ul li div.pillbox div.desc{
	height:220px;
	overflow:auto;
}

#main div.globebox ul li div.pillbox div.desc p{
	color:#acf5ff;
	font-size:1.1em;
	font-weight:normal;
	margin:0 0 10px;
}


#main div.globebox li.future div.pillbox{left:167px;top:-35px;}
#main div.globebox li.edition div.pillbox{left:140px;top:-103px;}
#main div.globebox li.time div.pillbox{left:140px;top:-169px;}
#main div.globebox li.location div.pillbox{left:167px;top:-232px;}

#main div.globebox li:hover div.pillbox{display:block;}

/* ================================ #wrap #main div.cola div.scrollmenu ================================ */

#main div.cola div.scrollmenu{
	background:url(../../images/scrollmenubox.png) left top repeat-x;
	display:inline;
	float:left;
	height:109px;
	margin:0 0 19px 22px;
	overflow:hidden;
	padding:2px;
	width:577px;
}

#main div.cola div.scrollmenu div{
	background:url(../../images/scrollmenu.png) left top repeat-x;
	width:577px;
	height:109px;
	overflow:hidden;
	position:relative;
}

#main div.cola div.scrollmenu ul{
	float:left;
	display:inline;
	height:1%;
	position:absolute;
	margin:0;
	padding:0;
	list-style:none;
	list-style-type:none;
}

#main div.cola div.scrollmenu ul li{
	float:left;
	width:95px;
	height:95px;
	padding:0;
	line-height:95px;
	margin:7px 10px 0;
	text-align:center;
	list-style:none;
	list-style-type:none;
}

/* ================================ #wrap #main div.colb ================================ */

#main div.colb{
	display:inline;
	height:1%;
	float:right;
	min-height:1143px;
	width:322px;
}

/* ================================ #wrap #main div.sidebar ================================ */

#main div.sidebar h3{
	color:#98cfff;
	font-size:15px;
	font-weight:bold;
	height:25px;
	margin:10px 0 4px 0;
}

/* ================================ #wrap #main div.colb div.featured ================================ */

#main div.colb div.featured{
	background:transparent url(../../images/featured.png) left top no-repeat;
	height:285px;
	margin:0 0 16px;
	position:relative;
	width:300px;
}

#main div.colb div.featured p img{
	height:170px;
	margin:2px 2px 0;
	vertical-align:bottom;
	width:296px;
}

#main div.colb div.featured div.scrollmenu{
	background:url(../../images/scrollmenu.png) left top repeat-x;
	height:110px;
	margin:0 2px;
	overflow:hidden;
	position:relative;
	width:296px;
}

#main div.colb div.featured div.scrollmenu ul{
	position:absolute;
	margin:0;
	padding:0;
	list-style:none;
	list-style-type:none;
}

#main div.colb div.featured div.scrollmenu ul li{
	display:inline;
	float:left;
	height:95px;
	line-height:95px;
	margin:7px 10px;
	text-align:center;
	width:95px;
}

#main div.colb ul.featured{
	font-size:1.2em;
	list-style:none;
	list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
	right:0;
	top:-30px;
}

#main div.colb ul.featured li{
	display:inline;
}

#main div.colb ul.featured li a{
	border:1px solid #98cfff;
	color:#98cfff;
	text-decoration:none;
	padding:0 3px;
	text-align:center;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

#main div.colb ul.featured li.current a,
#main div.colb ul.featured li a:hover, #main div.colb ul.featured li a:focus{
	background:#98cfff;
	color:#0f2437;
}

/* ================================ #wrap #main div.colb #register ================================ */

#register{
	background:transparent url(../../images/register.png) left top repeat-x;
	height:170px;
	margin:0 0 16px;
	overflow:hidden;
	padding:8px 14px;
	position:relative;
	width:272px;
}

#register h4{
	color:#98cfff;
	font-size:13px;
	font-weight:bold;
	line-height:1.35;
	height:40px;
	padding:5px 0 0 0;
	text-align:center;
}

#register div{
	clear:both;
	margin:3px 0 5px;
	overflow:hidden;
	width:276px;
}

#register label{
	color:#acf5ff;
	float:left;
	font-size:1.2em;
	font-weight:bold;
	margin:5px 0 0 0;
}

#register input{
	background:#0f2437;
	border:2px solid #2c7e81;
	color:#ffffff;
	float:right;
	height:17px;
	margin:0 5px 0 0;
	width:210px;
}

#register div.submit{
	bottom:9px;
	cursor:pointer;
	float:right;
	height:34px;
	line-height:34px;
	margin:0;
	padding:0;
	position:absolute;
	right:12px;
	width:102px;
}

#register div.submit input{
	background:transparent url(../../images/register-bttn.png) left top no-repeat;
	border:0;
	cursor:pointer;
	font-size:1.4em;
	font-weight:bold;
	height:34px;
	line-height:34px;
	margin:0;
	padding:0;
	text-indent:-9999px;
	width:102px;
}

#register div.submit input:hover, #register div.submit input:focus{
	background:transparent url(../../images/register-bttn.png) left bottom no-repeat;
}

/* ================================ #wrap #main div.colb #news ================================ */

#news{
	background:transparent url(../../images/featured.png) left top no-repeat;
	height:285px;
	width:300px;
}

#news h4{
	background:transparent url(../../images/register.png) left top repeat-x;
	color:#98cfff;
	font-size:13px;
	font-weight:bold;
	height:40px;
	padding:10px 0 0 0;
	line-height:1.35;
	text-align:center;
}

#news h4 a{
	color:#98cfff;
	display:block;
	text-decoration:none;
}

#news ul{
	background:#091423 url(../../images/scrollmenu.png) left 150px repeat-x;
	height:231px;
	overflow:auto;
	font-size:1.1em;
	list-style:none;
	margin:0 2px;
}

#news ul li a{
	background:#0F2437 url(../../images/subnav.png) left -15px repeat-x;;
	color:#acf5ff;
	height:50px;
	display:block;
	text-decoration:none;
	overflow:hidden;
	outline:none;
	padding:5px 13px;
}

#news ul li a:hover, #news ul li a:focus{
	background:#0F2437;
	color:#cccccc;
}

/* ================================ #wrap #main div.colb div.retired ================================ */

#main div.retired{
	bottom:135px;
	height:220px;
	position:absolute;
	right:22px;
	width:300px;
}

#main div.retired div.scrollmenu{
	bottom:0;
	height:130px;
	left:102px;
	overflow:hidden;
	position:absolute;
}


#main div.retired ul{
	position:relative;
	list-style:none;
	margin:0;
	width:95px;
}

#main div.retired ul li{
	text-align:center;
	height:95px;
	line-height:95px;
	margin:10px 0 0 0;
}

#main div.retired p{
	color:#98cfff;
	font-size:1.2em;
	margin:-6px 0 0 0;
}

/* ================================ #wrap #footer ================================ */

#footer{
	clear:both;
	color:#5298b0;
	height:1%;
	margin:-10px 0 0 0;
	padding:0 0 10px;
	overflow:hidden;
	width:986px;
}

#footer #footernav{
	display:inline;
	float:left;
	height:1%;
	margin:0 20px 0;
}

#footer #copyright{
	display:inline;
	float:right;
	height:1%;
	margin:0 130px 0 0;
}

#footer a{
	color:#5298b0;
	text-decoration:none;
}

p.beta{
	background:transparent url(../../images/beta-trans.png) left top no-repeat;
	height:130px;
	width:130px;
	top:75px;
	left:862px;
	position:absolute;
}

/* clearing */
.clearfix:after{
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}

.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}

/* utility */
.hide{display:none;}
.show{display:block;}

/* sifr rules */
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 - 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }

  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }

  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }

  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt;
    padding: 0pt;
    overflow: auto;
    letter-spacing: 0px;
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }

  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
	.sIFR-active #subnav li a span,
	.sIFR-active #main h2,
	.sIFR-active #main span.follow-h2,
	.sIFR-active #main div.colb h3,
	.sIFR-active register h4,
	.sIFR-active #main div.retired p{visibility:hidden; white-space:nowrap;}
}