@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:-20px;top:8px;width:600px}

	* 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;

}



#MemberAddForm .submit {

	text-align: center;

}