@charset "utf-8";
/*
	----------------------------
	  Table of Contents
	----------------------------
	  - Reset
	  - Defaults
	  - Header
		- Logo
		- Menu
		- Splash
	  - Content
	    - Tagline
		- Call to Action
		- Divider
		- Download
		- Testimonials
		- How (Homepage Steps)
		- Who's Joined
		- Setup Screenshots
		- FAQ
	  - Sidebar
		- Ping
		- Online
		- Update
	  - Footer
	  - Forms
		- Validation
		- General
	  - Homepage
	----------------------------
*/

/* ------------------
   Reset
-------------------- */
a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
h5, h6, hr, html, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
tr, tt, ul, var {margin:0;padding:0;vertical-align:baseline}

/* ------------------
   Defaults
-------------------- */
:focus {outline:0}
a, a:visited {color:#069}
a:hover, a:focus {}
body {background:#FFF url(../img/bg-sub.png) repeat-x;color:#666;font:75%/150% "Lucida Sans", "Lucida Sans Unicode", Arial, Sans-Serif}
* html body {behavior:url(../js/hover.htc)}
img {border:0;vertical-align:bottom}
fieldset {border:0}
p {margin:0 0 1em}
h1, .componentheading {color:#069;font-size:1.75em;margin:0 0 10px;text-transform:uppercase}
h2 {color:#333;font-size:1.2em;margin:0 0 10px;text-transform:uppercase}
h3 {color:#006aa7;font:bold 1.1em Arial}
td {vertical-align:middle}
textarea {font:1em Arial;overflow:auto}
#page {margin:0 auto;position:relative;width:940px}

/* ------------------
   Header
-------------------- */
	/* Logo */
	#logo {background:url(../img/logo-bg-sub.png) no-repeat left bottom;height:60px;margin:0 0 30px -15px;padding:37px 0 0;position:relative;width:333px}
	#logo img {margin:-5px 0 0 25px}

	/* Menu */
	#menu {background:url(../img/divider.gif) no-repeat left center;height:21px;padding:12px 0 12px 15px;position:absolute;right:-30px;top:8px;width:560px}
	* html #menu {background-position:left top}
	#menu li {float:left;font-weight:bold;list-style:none}
	#page #menu li.action a {color:#209ccb}
	#menu li.divider {background:url(../img/divider.gif) no-repeat left center;clear:none;height:44px;margin:-12px 10px 0;width:1px}
	#menu li.back {background:url(../img/menu.png) no-repeat left top;height:21px;padding:0 0 0 5px;position:absolute;width:9px;z-index:8}
	#menu li.back .left {background:url(../img/menu.png) no-repeat right bottom;height:21px;margin-right:9px}
	#page #menu li a {color:#000;cursor:pointer;float:left;height:15px;outline:none;overflow:hidden;padding:3px 13px 3px 10px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;top:0;z-index:10}
	* html #page #menu li a {padding:3px 9px 3px 10px}
	* html #menu li.back .left {margin-right:17px}
	*+html #page #menu li a {padding:3px 9px 3px 10px}
	*+html #menu li.back .left {margin-right:14px}
	#page #menu li a:hover, #menu a:active, #menu li a:visited {border:none;color:#FFF}
	#page #menu li.current, #page #menu li.current a {background:url(../img/menu.png) no-repeat left top;height:21px;padding:0 0 0 5px}
	#page #menu li.current a {background:url(../img/menu.png) no-repeat right -21px;color:#FFF;height:15px;margin-right:4px;padding:3px 10px 3px 5px}
	
	/* Splash */
	#page #splash-container {height:100%;position:relative}
	#splash {background:url(../img/splash.jpg) no-repeat 95% 0%;float:right;font-family:Arial, Sans-Serif;height:256px;margin:-12px 0 0 10px;overflow:hidden;position:relative;width:930px}
	#splash h1 {color:#FFF;font-size:26px;line-height:1em;margin:40px 0 0;text-transform:uppercase;width:500px}
	#splash p {color:#bae6fe;font-size:14px;text-transform:uppercase;width:480px}
	#splash #warcraft {background:url(../img/warcraft.png) no-repeat;bottom:0;height:58px;position:absolute;right:0;width:146px}
	#splash #before-after {font:1em Arial;height:90px;list-style:none;position:absolute;right:245px;top:128px;width:145px}
	#splash #before-after strong {color:#FFF;font-size:11px}
	#splash #before-after .green p {background:url(../img/ping-green.png) no-repeat 0 4px;color:#04e004}
	#splash #before-after .orange p {background:url(../img/ping-orange.png) no-repeat 0 4px;color:#d9d607}
	#splash #before-after .red p {background:url(../img/ping-red.png) no-repeat 0 4px;color:#bc2020}
	#splash #before-after h2 {color:#FFF;font-size:26px;margin:0}
	#splash #before-after p {font-size:24px;height:34px;margin:0;padding:0 0 0 30px;text-transform:lowercase;width:90px}

/* ------------------
   Content
-------------------- */
#page-register #content {display:block;float:none;width:98%}
#content {display:inline;float:left;font-size:1.1em;margin:0 0 15px 10px;position:relative;width:585px}
#content ul {margin:0 0 -2px 10px}
#content ul li {margin:0 0 3px}
#content ol {margin:0 0 1em 22px}
	
	/* Tagline */
	#tagline {color:#333;display:inline;float:left;font:italic 1.5em Georgia;margin: 0em 0 1em 10px;width:460px;line-height: 2.5em;}
	
	/* Call to Action */
	#cta {float:right;list-style:none}
	#cta li {display:inline;float:right;margin:5px 10px 0 0;width:210px}
	#cta li a {background:#2f6c0f url(../img/button-cta.png) no-repeat;color:#FFF;float:right;font-size:16px;font-weight:bold;height:30px;padding:12px 0 0;text-align:center;text-decoration:none;text-transform:uppercase;width:210px}
	#cta li a:hover {background-position:left bottom}

	/* Divider */
	.divider {background:url(../img/divider.png) no-repeat center top;clear:both;height:25px}
	
	/* Download */
	.download {background:#EEE;border:1px solid #CCC;font-weight:bold;padding:5px}
	.download a {color:#390}
	
	/* Testimonials */
	h2.testimonial {font-size:1.1em; padding-top: 40px;}
	#testimonials {background:#d8e9ef url(../img/quote.png) no-repeat;border:1px solid #9bc3d0;color:#333;height:80px;-moz-border-radius:5px;overflow:hidden;padding:10px 30px 1px;-webkit-border-radius:5px}
	#testimonials blockquote {font-style:italic;margin:5px 35px 0;width:532px}
	#testimonials cite {color:#069}
	
	/* How (Homepage Steps) */
	h2.how {color:#27aadb;font-size:20px;text-align:center}
	#how {background:url(../img/steps.png) no-repeat;height:208px;margin:0 0 15px 0;padding:15px 0;width:602px}
	#how a {background:#2f6c0f url(../img/button-cta.png) no-repeat;color:#FFF;display:block;font-size:16px;font-weight:bold;height:30px;margin:0 auto;padding:12px 0 0;text-align:center;text-decoration:none;text-transform:uppercase;width:210px}
	#how a:hover {background-position:left bottom}
	#content #how ol {color:#666;font-size:14px;font-weight:400;list-style:none;padding:60px 0 0 0;margin:0;overflow:hidden;width:100%}
	#how ol li {float:left;height:53px;width:160px;padding:0 20px 35px;text-align:center}
	#how ol li.last {padding:0 10px 0 30px}
	#how ol strong {color:#333;display:block;font-size:20px;text-transform:uppercase}
	
	/* SPE Splah */
	
	#spesplash { margin-bottom: 15px;  }
	
	/* Who's Joined Marquee */
	#latest {background:#f6f6f6;border:1px solid #e4e1e1;clear:both;height:1%;margin:0 10px 25px;overflow:hidden;padding:5px}
	#latest h3 {float:left;font:bold 1em/150% "Lucida Sans", "Lucida Sans Unicode", Arial;margin:0 10px 0 0}
	#latest marquee {float:left;width:720px}

	/* Setup Screenshots */
	.screenshot {background:#F6F6F6;border:1px solid #E4E1E1;display:block;margin:0 auto;moz-border-radius:3px;padding:5px;webkit-border-radius:3px}
	.caption {font-style:italic;margin:5px 0 1em;text-align:center}

	/* Setup Icons */
	.icon {
		padding: 10px;
	}

	/* Faq */
	.faq {border-top:1px dotted #CCC;margin:0;padding:1em 0 1px}

	/* Image Alignment */
	img.right {float:right;margin:0 0 10px 10px}
	img.left {float:left;margin:0 10px 10px 0}

	/* About Bio's */
	.bio {border-bottom:1px dotted #CCC;padding:10px 0}
	.bio img {float:left;margin:0 10px 0 0}

	/* Table Styling */
	.left-th th {text-align:left}
	.vtop td, .vtop th {vertical-align:top}
	.hcenter td, .hcenter th {text-align:center}

	#overview, #refer, #account, #setup1 {background:#FFF;border:1px solid #CCC;padding:15px;position:relative;z-index:10}
	#refer, #account, #setup1 {display:none}
	#overview h3 {margin:0 0 10px}
	#page #content table.rounded {border-width:1px}
	.round {border:1px solid #CCC;padding:15px}
	.rounded td.top, #page #content td.top, #page #content th.top {border-top:0}
	.rounded td.left,  #page #content td.left, #page #content th.left {border-left:0}
	.plan td b {color:#3e9219}
	.plan td em {color:#008ebc;font-style:normal}
	#content #tabs {list-style:none;margin:0 0 -4px;overflow:hidden;width:100%}
	#content ul#tabs li {float:left;margin:0 0 0 5px}
	#tabs li.current a {background:#FFF;position:relative;z-index:15}
	#tabs li a {background:#EEE;float:left;padding:5px 10px 8px;border:1px solid #CCC;border-bottom:0;line-height:15px;position:relative;z-index:5}
	.blue td {background:#dff5ff;border-color:#9ccce2;border-top:0px}
	.blue th {background:#c0e5f7;border-color:#9ccce2;border-top:0px}
	.blue {border-color:#9ccce2}
	
	.rounded, #overview table, #refer table, #account table, #setup1 table {border:solid #CCC;border-width:0 1px 1px 0;margin:0 0 1em}
	.rounded th, #overview th, #refer th, #account table, #setup1 table {background:#EEE;border:solid #CCC;border-width:1px 0 0 1px;padding:5px 10px}
	.rounded td, #overview td, #refer td, #account td, #setup1 td {border:solid #CCC;border-width:1px 0 0 1px;padding:5px 10px}

/* ------------------
   Sidebar
-------------------- */
#sidebar {display:inline;float:right;margin:0 10px 15px 0;width:295px}
#sidebar .box {background:url(../img/sidebar-bottom.gif) no-repeat left bottom;margin:0 0 10px;padding:0 0 5px;position:relative}
#sidebar .box h3 {background:url(../img/sidebar-top.png) no-repeat;color:#333;font-size:16px;height:31px;padding:12px 0 0 10px;text-transform:uppercase}
#sidebar .box ul {border:solid #EEE;border-width:0 1px;list-style:none}
#sidebar .box ul li {border-top:1px solid #EEE;overflow:hidden;padding:4px 10px}
#sidebar .box ul li strong {float:left;width:120px}

	/* Online Users */
	#sidebar .box ul li .status {color:#390;float:left;width:80px}
	#sidebar .box ul li .users {color:#39C;float:left;width:60px}
	
	/* Ping */
	#test {background:url(../img/button-ping.png) no-repeat;color:#FFF;font-size:12px;height:24px;padding:8px 0 0;position:absolute;right:4px;text-align:center;text-decoration:none;text-transform:uppercase;top:5px;width:121px}
	#test:hover {background-position:left bottom}
	#testing {background:url(../img/testing.png) no-repeat;color:#FFF;font-size:12px;height:26px;padding:8px 0 0;position:absolute;right:4px;text-align:center;text-decoration:none;text-indent:-1000em;text-transform:uppercase;top:5px;width:121px}
	#pingtest .ping ul li strong {float:left;width:200px}
	#pingtest .ping ul li span {color:#39C}
	#pingtest .box .best {color:#390;font-weight:bold}
	/*#pingtest .box {background:url(../img/sidebar-bottom2.gif) no-repeat left bottom;margin:0 0 10px;padding:0 0 5px;position:relative}*/
	#pingtest .box h3 {background:url(../img/sidebar-top-ping.png) no-repeat;color:#333;font-size:16px;height:31px;padding:12px 0 0 10px;text-transform:uppercase}
	#pingtest .box ul {border:solid #EEE;border-width:0 1px;list-style:none}
	#pingtest .box ul li {border-top:1px solid #EEE;overflow:hidden;padding:4px 10px}
	#pingtest .box ul li strong {float:left;width:120px}
	
	/* Updates */
	#sidebar #update {background:url(../img/update.png) left top no-repeat;clear:both;float:left;height:48px;overflow:hidden;width:298px}
	#sidebar #update:hover {background-position:left -48px;cursor:pointer}
	#sidebar #update strong {color:#fff;display:block;font-size:1.5em;text-decoration:none;text-transform:uppercase}
	#sidebar #update a {color:#98d0e2;display:block;letter-spacing:-.3px;padding:6px 0 0 11px;text-decoration:none}
	
	/* PingTest */
	#sidebar #pingbutton {margin-bottom: 10px;background:url(../img/pingbutton.png) left top no-repeat;clear:both;float:left;height:48px;overflow:hidden;width:298px}
	#sidebar #pingbutton:hover {background-position:left -48px;cursor:pointer}
	#sidebar #pingbutton strong {color:#fff;display:block;font-size:1.5em;text-decoration:none;text-transform:uppercase}
	#sidebar #pingbutton a {color:#ffbebd;display:block;letter-spacing:-.3px;padding:6px 0 0 11px;text-decoration:none}

/* ------------------
   Sections
-------------------- */
#sections {background:url(../img/sections-middle.png) center repeat-y;margin:0 0 20px;width:100%}
#sections div {background:url(../img/sections-top.png) left top no-repeat;width:100%}
#sections div div {background:url(../img/sections-bottom.png) no-repeat left bottom;overflow:hidden;width:100%}
#sections div div div {background:none;float:left;height:20em;margin:0 0 10px;padding:15px 20px;position:relative;width:270px}
* html #sections div div div p {line-height:18px}
*+html #sections div div div p {line-height:18px}
#sections h2 {color:#27aadb;font-size:20px}
#sections a {background:url(../img/arrow.gif) no-repeat right center;bottom:10px;color:#000;display:block;font-weight:bold;left:20px;position:absolute;text-decoration:none;font:bold 14px Arial;text-transform:uppercase;width:270px}
#sections a:hover {color:#390;text-decoration:underline}

/* ------------------
   Footer
-------------------- */
#footer {background:url(../img/footer.png) repeat-x;height:51px;font-size:10px}
#footer div {margin:0 auto;overflow:hidden;height:1%;padding:15px 0;width:940px}
#footer ul {float:left;list-style:none;text-transform:uppercase;height:1%;width:700px}
#footer ul li {display:inline;margin:0 15px 0 0}
#footer ul li a {color:#FFF;cursor:pointer;font-weight:bold;text-decoration:none}
#footer ul li a:hover {text-decoration:underline}
#footer p {color:#84c1d5;float:right;margin:0}

/* ------------------
   Forms
-------------------- */
	/* Validation */
	.LV_validation_message {font-weight:bold;margin:0 0 0 5px}
	.LV_validation_message img, #msgImg img {margin:4px 0 0;vertical-align:middle}
	.LV_valid img {margin:0}
	.LV_valid {color:#0C0}
	.LV_invalid {color:#C00}
	
	/* General */
	#emailForm label {font-weight:bold}
	.inputbox, .inputbox {background:#f4f4f4;border:1px solid #CCC;color:#333;-moz-border-radius:3px;padding:3px;-webkit-border-radius:3px;width:244px}
	.textbox, .textbox {background:#f4f4f4;border:1px solid #CCC;color:#333;-moz-border-radius:3px;padding:3px;-webkit-border-radius:3px;}
#emailForm .inputbox {margin:0 0 10px}
	.inputbox:focus, .inputbox:active, .inputbox:active, .inputbox:focus {background:#EEE}
	#emailForm #copy {display:block;font-weight:normal;margin:0 0 5px}
	#emailForm textarea {font:1em Arial;overflow:auto}
	#error {background:#FFC;border:1px solid #FC6;color:#333;margin:0 0 10px;padding:5px}

	.bold {font-weight:bold}

/* ------------------
   Homepage
-------------------- */
#homepage {background:#FFF url(../img/bg.png) repeat-x}
#homepage #logo {background:url(../img/logo-bg.png) no-repeat left bottom;margin:0 0 0 -15px}
#homepage #menu {right:-10px}
#homepage #content {width:580px}

/* ------------------
	Errors/Success (Flashes)
--------------------- */
.warning {background:#ffe1e1;border:1px solid #d34141;margin-bottom:15px;padding:5px}
.notice {background:#defcd1;border:1px solid #79d651;margin-bottom:15px;padding:5px}
.error-message {color:#C00;padding:0 0 5px}

/* ------------------
	Live Validation
--------------------- */
.LV_validation_message {font-size:12px;font-weight:bold;margin:0 0 0 5px}
.LV_validation_message img {margin:0 5px 0 0}
.LV_valid {color:#090;font-weight:bold}
.LV_invalid {color:#C00;font-weight:bold}

.pstrength-minchar {font-size:10px}
.ajaxmsg img {margin:0 5px 0 0}
.ajaxmsg em {color:#666;font-style:normal}

/* ------------------
	Members Area
--------------------- */
/* REQUIRED BUTTON STYLES: */		
button { 
	position: relative;
	border: 0; 
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

button span { 
	position: relative;
	display: block; 
	white-space: nowrap;	
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Safari and Google Chrome only - fix margins */
	button span {
		margin-top: -1px;
	}
}


/* OPTIONAL BUTTON STYLES for applying custom look and feel: */		
button.submitBtn {
	text-transform: uppercase;
	padding: 0 10px 0 0; 
	margin-top: 5px; 
	margin-bottom: 5px;
	font-size:1em; 
	text-align: center; 
	background: transparent url(../img/btn_sprite.gif) no-repeat right -140px; 
}
	
button.submitBtn span.sp {
	padding: 0px 0 0 10px; 
	height:32px;
    line-height: 32px;
	background: transparent url(../img/btn_sprite.gif) no-repeat left top; 
	color:#fff; 
}
	
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
	background-position: right -210px; 
}
	
button.submitBtn:hover span.sp, button.submitBtnHover span.sp {
	background-position: 0 -70px;
}

/* ------------------
   Make text very noticable
-------------------- */
.jump {
	color: red;
	font-weight: bold;
	font-size: 16px;
}