/* -------------------------------------------------------------- 
  
   Reset.css
   * Resets default browser CSS styles.
   
   Created by Erik Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

.clear
{
	clear: both;
}

/* ************************************************************************** */

#debug
{
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	border-top: 2px solid #c00;
	padding: 2px 6px 2px 6px; 
	background-color: #fcc; 
	color: #c00;
	font-size: 90%;
	font-weight: bold;
	font-family: monospace;
}
#debug span { font-weight: normal; }

/* ************************************************************************** */

body
{
	color: #ccc;
	font-size: 0.9em;
	font-family: Verdana, "sans-serif";
	line-height: 110%;
	background: #000 url(/i/background-gradient.jpg) 0 70px repeat-x;
}

h1
{
	margin: 5px 0 25px 0;
	color: #00fefe;
	font-size: 140%;
}
#select h1 { margin-left: 15px; }

h2
{
	margin-bottom: 15px;
	color: #00fefe;
	font-size: 100%;
	font-weight: bold;
}
h3
{
	margin-bottom: 5px;
	color: #ccc;
	font-size: 120%;
	font-weight: bold;
}
h4
{
	margin-bottom: 5px;
	color: #ccc;
	font-weight: bold;
}

p { margin-bottom: 10px; }
p.small { font-size: 70%; }
p.space-below { padding-bottom: 10px; }

a { color: #00fefe; text-decoration: none; }
a:hover { text-decoration: underline; }

a.button
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	border: 1px solid #00fefe;
	text-align: center;
	text-transform: uppercase;
}
a.button:hover { text-decoration: none; }

a.callout-button
{
	display: block;
	width: 115px;
	padding: 15px;
	background: transparent url(/i/donate-btn.png) top left no-repeat;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}
a.callout-button:hover { text-decoration: none; }

small { font-size: 80%; font-weight: normal; }
strong { font-weight: bold; }
strong.username { color: #ccc; }

textarea { font-family: inherit; font-size: 100%; }

table.form-grid td
{
	padding: 2px 12px 2px 2px;
	vertical-align: top;
}

/* ************************************************************************** */

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.half-left { width: 48%; float: left; }
.half-right { width: 48%; float: left; }

.content-area { display: none; }

#error, #login-error, #stf-error, .error { color: #c00 !important; }

#spinner
{
	display: none;
	width: 16px;
	height: 16px;
	background: url(/i/spinner.gif) top left no-repeat;
}

/* ************************************************************************** */

#container
{
	margin: 0 auto;
	padding: 0;
}

/* ************************************************************************** */

#content
{
	width: 990px;
	margin: 0 auto;
}

#primary-content
{
	clear: both;
	float: left;
	width: 988px;
	padding-top: 20px;
	border: 1px solid #222;
	background: #000 url(/i/img_bg_water.jpg) bottom left no-repeat;
}
#home #primary-content { width: 994px; border-width: 0; padding: 0; background: none; }
#share #primary-content
{
	background: #000 url(/i/share-bg.jpg) bottom left no-repeat;
}

#home #flash-content { z-index: 2; xbackground-color: #000; }
#home #non-flash-content
{
	border: 1px solid #222;
	padding: 50px 220px 50px 320px;
	background: #000000 url(/i/img_bg_water.jpg) bottom left no-repeat;
}
#home #non-flash-content img 
{
	
}

#share #flash-content { margin-bottom: 25px; }

/* ************************************************************************** */

#header
{
	z-index: 100;
	position: relative;
	float: left;
	width: 988px;
	margin-bottom: 45px;
}
a#liveblue-logo
{
	float: left;
	display: block;
	margin: 5px 50px 5px 10px;
}
#nav { float: left; }
#nav li
{
	float: left;
	text-indent: -7000px;
}

#nav li#nav-explore
{
	width: 274px;
	height: 52px;
	background: transparent url(/i/nav/topnav_sprite.jpg) 0 0 no-repeat;
}
#nav li#nav-explore.active { background: transparent url(/i/nav/topnav_sprite.jpg) 0 -53px no-repeat; }
#nav li#nav-explore a
{
	display: block;
	width: 274px;
	height: 52px;
}

#nav li#nav-select
{
	width: 197px;
	height: 52px;
	background: transparent url(/i/nav/topnav_sprite.jpg) -274px 0 no-repeat;
}
#nav li#nav-select.active { background: transparent url(/i/nav/topnav_sprite.jpg) -274px -53px no-repeat; }
#nav li#nav-select a
{
	display: block;
	width: 197px;
	height: 52px;
}

#nav li#nav-view
{
	width: 197px;
	height: 52px;
	background: transparent url(/i/nav/topnav_sprite.jpg) -663px 0 no-repeat;
}
#nav li#nav-view.active { background: transparent url(/i/nav/topnav_sprite.jpg) -663px -53px no-repeat; }
#nav li#nav-view a
{
	display: block;
	width: 197px;
	height: 52px;
}

#nav li#nav-share
{
	width: 192px;
	height: 52px;
	background: transparent url(/i/nav/topnav_sprite.jpg) -472px 0 no-repeat;
}
#nav li#nav-share.active { background: transparent url(/i/nav/topnav_sprite.jpg) -472px -53px no-repeat; }
#nav li#nav-share.disabled { background: transparent url(/i/nav/topnav_sprite.jpg) -472px -104px no-repeat; }
#nav li#nav-share a
{
	display: block;
	width: 192px;
	height: 52px;
}

a#logo
{
	float: right;
	display: block;
	margin: 5px 10px 5px 0;
}

/* ************************************************************************** */

#login-cta
{
	position: absolute;
	bottom: -45px;
	right: -2px;
	xwidth: 300px;
	padding: 2px 15px 2px 25px;
	background-color: #04cccb;
	color: #000;
	font-size: 90%;
	text-align: center;
}
#home #login-cta { right: -6px; }
#login-cta a { color: #000; }
#login-cta a:hover { color: #333; text-decoration: none; }

#login
{
	display: none;
	position: absolute;
	z-index: 10;
	top: 98px;
	right: -2px;
	border: 1px solid #444;
	border-top: 0;
	border-right: 0;
	padding: 15px;
	background-color: #000;
	font-size: 70%;
}
#home #login { top: 97px; right: -6px; }
#login-spinner
{
	display: none;
	position: absolute;
	bottom: 27px;
	left: 60px;
	width: 16px;
	height: 16px;
	background: url(/i/spinner.gif) top left no-repeat;
}

#login-form
{
	font-family: Arial, sans-serif;
}
#login-form p { margin-bottom: 5px; }
#login-form label
{
	display: block;
	font-weight: bold;
}
#login-form .inputText, #login-form .inputPassword
{
	width: 200px;
	border: 1px solid #444;
	margin-bottom: 1px;
	background-color: #000;
	color: #999;
}
#login-form .inputSubmit
{
	width: 130px;
	margin-top: 5px;
	border: 1px solid #00fefe;
	padding: 5px 5px;
	background-color: #000;
	color: #00fefe;
	cursor: hand;
	cursor: pointer;
}

/* ************************************************************************** */

#footer
{
	clear: both;
	margin-bottom: 25px;
	padding-top: 15px;
	color: #444;
	font-size: 70%;
	text-align: right;
}
#footer ul li 
{
	display: inline;
	padding-left: 15px;
}
#footer ul li a { color: #444;  }
#footer ul li a:hover { color: #ccc; }

/* ************************************************************************** */

#cube
{
	float: left;
	width: 155px;
	margin: 45px 28px 0 0;
	padding: 10px;
	text-align: center;
}
#cube img { margin-bottom: 25px; }
#cube #plot { padding-left: 10px; text-align: left; }
#cube p { color: #999; }
#cube p.lat, #cube p.lng
{
	min-height: 20px;
	text-align: center;
}
#cube p.lat
{
	margin-top: 10px;
	color: #fff;
	font-size: 140%;
}
#cube p.lng
{
	margin-bottom: 25px;
	color: #ccc;
	font-size: 120%;
}
#view #cube p.lat { font-size: 160%; }
#view #cube p.lng { font-size: 120%; }

#plot { font-size: 110%; font-weight: bold; color: #04cccb; text-align: center; }

#select #cube
{
	margin-top: 0;
	padding: 5px 0 5px 15px;
	font-size: 70%;
	color: #999;
	text-align: left;
}

/* ************************************************************************** */

#main
{
	float: left;
	position: relative;
	width: 580px;
}
#main p#instructions
{
	float: left;
	width: 343px;
	height: 41px;
	margin: 0 0 10px 0;
	padding: 2px 10px 2px 14px;
	background: transparent url(/i/step-brackets.gif) top left no-repeat;
	font-size: 70%;
	color: #fff;
	text-transform: uppercase;
}
#main #extents-choice
{
	float: right;
	margin: 0 0 10px 0;
}
#main #extents-choice p
{
	margin: 0 3px 3px 1px;
	font-size: 75%;
}
#main #extents select
{
	border: 1px solid #444;
	color: #999;
	background-color: #000;
	font-size: 80%;
}
#main #spinner
{
	position: absolute;
	left: -25px;
	top: 55px;
}

/* ************************************************************************** */

#map
{
	clear: both;
	position: relative;
	height: 300px;
}
#map-load
{
	position: relative;
	height: 300px;
	border: 1px solid #222;
	background: #000 url(/i/spinner-map.gif) 50% 50% no-repeat;
	color: #444;
	font-size: 80%;
	text-align: center;
}

/* ************************************************************************** */

#panel
{
	display: none;
	width: 548px;
	margin-bottom: 25px;
	border: 1px solid #444;
	padding: 15px;
	background-color: #000;
	color: #999;
	font-size: 70%;
}
#panel .panel-left { float: left; width: 48%; padding-right: 15px; }
#panel .panel-right { float: right; width: 48%;   }
#panel h3 { margin-bottom: 15px; font-size: 140%; }
#panel h4 { font-size: 120%; }

/* ************************************************************************** */

#panel form
{
	font-family: Arial, sans-serif;
}
#panel form p { margin-bottom: 5px; }
#panel form label
{
	display: block;
	font-weight: bold;
}
#panel form .inputText, #panel form .inputPassword, #panel form select, #panel form textarea
{
	width: 260px;
	border: 1px solid #444;
	margin-bottom: 1px;
	background-color: #000;
	color: #999;
}
#panel form select
{
	margin-bottom: 5px;
}
#panel form textarea
{
	margin-bottom: 10px;
	font-family: Arial, sans-serif;
	font-size: 130%;
}
#panel form #city, #panel form #state, #panel form #country
{
	width: 75px;
}
#panel form .inputSubmit
{
	width: 160px;
	margin-top: 25px;
	border: 1px solid #00fefe;
	padding: 5px 15px;
	background-color: #000;
	color: #00fefe;
}
#panel form p.choices-dropdown select
{
	width: 250px;
	border: 1px solid #444;
	color: #666;
	background-color: #000;
}
#panel optgroup { font-style: normal; }


/* ************************************************************************** */

#secondary
{
	padding: 25px;
}
#secondary h2 { color: #ccc; }
#secondary p
{
	color: #999;
	font-size: 70%;	
}

/* REMOVED, Phase 2
#secondary .cta p
{
	font-size: 100%;
	text-align: center;
}
#secondary .cta p
{
	margin-bottom: 15px;
	line-height: 120%;
}
#secondary .cta p a
{
	display: block;
	width: 160px;
	margin: 0 auto;
	padding: 5px;
	border: 1px solid #00fefe;
	font-size: 80%;
}
#secondary .cta p a:hover { text-decoration: none; }
#secondary .cta p a.inactive
{
	border: 1px solid #444;
	color: #444;
}
*/

#view #secondary
{
	padding: 25px 0;
}
#view #secondary p { font-size: 90%; }

/* ************************************************************************** */

#sidebar
{
	float: right;
	margin: 55px 0 0 26px;
	right: 0;
	width: 150px;
	padding: 5px 10px 5px 0;
	font-size: 70%;
	color: #999;
}
#select #sidebar { margin-top: -20px; }
#view #sidebar { margin-top: 0; }
#sidebar h3 { margin: 15px 0 0 0; font-size: 95%; text-transform: uppercase; }
#view #alt-sidebar h3 a { color: #ccc; }
#view #alt-sidebar h3 a:hover { color: #ccc; }
#sidebar img { margin: 10px 0 15px 0; }

#view #alt-sidebar
{
	position: relative;
	z-index: 100;
	width: 130px;
	margin-top: 10px;
	padding: 10px 0 10px 10px;
	font-size: 70%;
	color: #999;
	text-align: left;
}
#view #alt-sidebar h3 { margin: 15px 0 0 0; font-size: 95%; text-transform: uppercase; }
#view #alt-sidebar p { color: #999; }
#view #alt-sidebar img { margin: 10px 0 15px 0; }
#view #alt-sidebar ul { float: left; margin: 5px 0 15px 0; }
#view #alt-sidebar ul li
{
	float: left;
	margin-right: 6px;
	text-indent: -7000px;
}
#view #alt-sidebar ul li a { display: block; width: 25px; height: 25px; }
#view #alt-sidebar ul li.facebook a { display: block; width: 25px; height: 25px; background: transparent url(/i/facebook_small.png) 50% 50% no-repeat; }
#view #alt-sidebar ul li.twitter a { display: block; width: 25px; height: 25px; background: transparent url(/i/twitter_small.png) 50% 50% no-repeat; }
#view #alt-sidebar ul li.stumbleupon a { display: block; width: 25px; height: 25px; background: transparent url(/i/stumble_small.png) 50% 50% no-repeat; }
#view #alt-sidebar ul li.email a { display: block; width: 25px; height: 25px; background: transparent url(/i/email_small.png) 50% 50% no-repeat; }

#view #sendtofriend
{
	display: none;
	position: absolute;
	z-index: 5;
	top: -245px;
	left: 0;
	width: 235px;
	border: 1px solid #444;
	padding: 15px;
	background-color: #000;
	font-size: 100%;
}
#view #sendtofriend #stf-spinner
{
	position: absolute;
	bottom: 25px;
	display: none;
	width: 16px;
	height: 16px;
	background: url(/i/spinner.gif) top left no-repeat;
}
#view #sendtofriend form
{
	font-family: Arial, sans-serif;
}
#view #sendtofriend form p { margin-bottom: 5px; }
#view #sendtofriend form label
{
	display: block;
	font-weight: bold;
}
#view #sendtofriend form .inputText, #login-form .inputPassword
{
	width: 200px;
	border: 1px solid #444;
	margin-bottom: 1px;
	background-color: #000;
	color: #999;
}
#view #sendtofriend form .inputSubmit
{
	width: 130px;
	margin-top: 15px;
	border: 1px solid #00fefe;
	padding: 5px 5px;
	background-color: #000;
	color: #00fefe;
}

#view #updates p
{
	float: left;
	margin-bottom: 15px;
	border-bottom: 1px solid #222;
	padding-bottom: 15px;
}
#view #updates palign-right { border: 0; }

/* ************************************************************************** */

.map-infowindow
{
	width: 200px;
	color: #333;
	font-size: 90%;
}
.map-infowindow h5
{
	margin-bottom: 3px; 
	color: #0d2b4d;
	font-weight: bold;
	font-size: 110%;
}
.map-infowindow.featured h5
{
	margin-left: -10px;
	padding-left: 17px;
	background: url(/i/star-white.gif) 0 1px no-repeat;
}
.map-infowindow .lat, .map-infowindow .lng { font-size: 80%; color: #999; }
.map-infowindow p { margin-bottom: 5px; }
.map-infowindow a { color: #4d9ca0; }
.map-infowindow a:hover { color: #4d9ca0; }


/* ************************************************************************** */

#share #view-plot-cta { margin-top: 25px; }
#share #featured-content
{
	float: left;
	width: 780px;
}
#share #sidebar
{
	width: 147px;
	margin-top: 0;
	padding: 10px;
}
#share #congrats
{
	float: left;
	width: 325px;
	padding: 50px 0 0 50px;
}
#share #congrats p { font-size: 110%; line-height: 120%; font-weight: normal; }
#share #cube
{
	float: left;
	width: 293px;
	margin: 0;
	padding: 25px;
}
#share #share-tools
{
	position: relative;
	float: left;
}
#share #social, #share #tshirt
{
	float: left;
	width: 330px;
	padding: 0 25px 15px 25px;
	
}
#share #tshirt
{
	position: relative;
	height: 163px;
}
#share #tshirt img
{
	position: absolute;
	top: 0px;
	right: 0px;
}
#share #tshirt p
{
	width: 170px;
}
#share #tshirt a.button { width: 75px; }

#share #social ul { float: left; margin-bottom: 15px; }
#share #social ul li
{
	float: left;
	margin-right: 15px;
	text-indent: -7000px;
}
#share #social ul li a { display: block; width: 56px; height: 56px; }
#share #social ul li.facebook a { display: block; width: 56px; height: 56px; background: transparent url(/i/facebook.png) 50% 50% no-repeat; }
#share #social ul li.twitter a { display: block; width: 56px; height: 56px; background: transparent url(/i/twitter.png) 50% 50% no-repeat; }
#share #social ul li.stumbleupon a { display: block; width: 56px; height: 56px; background: transparent url(/i/stumble.png) 50% 50% no-repeat; }
#share #social ul li.email a { display: block; width: 56px; height: 56px; background: transparent url(/i/email.png) 50% 50% no-repeat; }

/* ************************************************************************** */

#share #sendtofriend
{
	display: none;
	position: absolute;
	z-index: 5;
	top: -245px;
	left: 25px;
	width: 235px;
	border: 1px solid #444;
	padding: 15px;
	background-color: #000;
	font-size: 70%;
}
#share #sendtofriend #stf-spinner
{
	position: absolute;
	bottom: 25px;
	display: none;
	width: 16px;
	height: 16px;
	background: url(/i/spinner.gif) top left no-repeat;
}
#share #sendtofriend form
{
	font-family: Arial, sans-serif;
}
#share #sendtofriend form p { margin-bottom: 5px; }
#share #sendtofriend form label
{
	display: block;
	font-weight: bold;
}
#share #sendtofriend form .inputText, #login-form .inputPassword
{
	width: 200px;
	border: 1px solid #444;
	margin-bottom: 1px;
	background-color: #000;
	color: #999;
}
#share #sendtofriend form .inputSubmit
{
	width: 130px;
	margin-top: 15px;
	border: 1px solid #00fefe;
	padding: 5px 5px;
	background-color: #000;
	color: #00fefe;
}


/* ************************************************************************** */

#select #sidebar h2, #view #sidebar h2 { font-size: 140%; }

#secondary
{
	position: relative;
	padding: 15px;
}
.separator-bar { border-top: 1px solid #222; }

#panel-open
{
	position: absolute;
	top: 15px;
	right: 0;
	display: block;
	width: 80px;
	padding: 4px 6px 6px 6px;
	border: 1px solid #00fefe;
	background-color: #000;
	color: #00fefe;
	font-size: 120%;
	text-align: center;
	text-decoration: none;
}
#panel-open:hover { text-decoration: none; }
#panel-open.inactive
{
	border: 1px solid #39c;
	background-color: #011618;
	color: #999;
}	

#back-to-cube
{
	position: absolute;
	top: 15px;
	left: 0;
	display: block;
	width: 80px;
	padding: 4px 6px 6px 6px;
	border: 1px solid #39c;
	background-color: #011618;
	color: #999;
	font-size: 120%;
	text-align: center;
}
#back-to-cube a { color: #999; font-size: 120%; text-decoration: none; }
#back-to-cube a:hover { text-decoration: none; }

#secondary #already-registered
{
	margin-top: 25px;
}

#sidebar h3.featured
{
	margin-left: -15px;
	padding-left: 15px;
	background: url(/i/star-black.gif) 0 1px no-repeat;
}

#view #plot
{
	font-size: 80%;
}

#sidebar .expert { display: none; }

/* ************************************************************************** */

h2.fb-connect-header { clear: both; }
a.FB_Link, a:hover.FB_Link { color: #00fefe !important; }
#fb-connect-content { float: left; font-size: 70%; }
#fb-connect-content #RES_ID_fb_login {  }
#fb-connect-content #fb-connect-pic
{
	float: left;
	margin: 5px 10px 10px 0;
	border: 1px solid #00fefe;
}
#fb-connect-content p { margin-bottom: 5px; }