#button {position:fixed;bottom:20px;display:block;z-index:2000;background:#333;color:#777;padding: 5px 7px;cursor:pointer;}
#button:hover {position:fixed;bottom:20px;display:block;z-index:2000;background:#555;color:#fff;padding: 5px 7px;cursor:pointer;}
.grid {background:url(../images/960-grid.png) repeat-y center top;width:100%;height:1000%;display:none;float:left;position:absolute;z-index: 1000;}

/*---------------------------------------------------------------------------
  Framework
---------------------------------------------------------------------------*/

.header,
.content,
.footer,
.home-content,
.focus,
.rock-ribbon,
.sponsor-ribbon,
.lower-area
{
width: 100%;
height: 100%;
float: left;
}

.header .box,
.content .box,
.footer .box,
.home-content .box,
.focus .box,
.rock-ribbon h2,
.sponsor-ribbon .box,
.lower-area .box
{
margin: 0 auto;
width: 960px;
}

.round,
.button
{
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

/* Box Shadow */

.shadow-s
{
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.shadow-m
{
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Text Shadow */

.focus h1, .focus h2,
.focus .view-demo
{
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-webkit-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}


/* Highlight Text Bevel */

.btn-getting-started,
.promo-1-button
{
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}


/* Shadow Text Bevel */

.button-round
{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}



/*---------------------------------------------------------------------------
  Header
---------------------------------------------------------------------------*/

.header {
background: url(../images/header-bg.jpg) repeat-x top;
height: 90px;
}

.header-logo {
margin: 23px 0 20px;
float: left;
}

.header-phone {
float: right;
font-size: 20px;
color: white;
position: relative;
top: 34px;
right: 20px;
}

.header-login {
float: right;
position: relative;
top: 29px;
}

.header-like {
float: right;
position: relative;
top: 34px;
}

/*---------------------------------------------------------------------------
  Focus
---------------------------------------------------------------------------*/

.focus {
background: url(../images/focus-bg.jpg) repeat-x top;
height: 549px;
}

.focus .left {
padding: 100px 0 0;
position: absolute;
}

.focus .right {
position: relative;
top: 60px;
left: 520px;
width: 447px;
}

.focus h1 {
font-size: 55px;
letter-spacing: -3px;
color: white;
font-weight: 600;
margin: 0 0 13px;
}

.focus h2 {
font-size: 38px;
letter-spacing: -1px;
font-weight: 300;
color: #84DCFF;
margin: 0 0 40px;
}

.focus .button {
float: left;
}

.focus .view-demo {
display: block;
clear: left;
color: #fff;
font-weight: 200;
position: relative;
top: 20px;
}

.focus .view-demo i {
font-size: 13px;
}

.focus .button-area {
float: left;
width: 308px;
text-align: center;
}

.btn-getting-started {
background: url(../images/btn-getting-started.png) no-repeat;
float: left;
width: 308px;
height: 36px;
font-size: 30px;
color: #883600;
letter-spacing: -1px;
font-weight: 200;
padding: 21px 0;
}

.btn-getting-started:hover {background-position: 0 -78px; text-decoration: none;}
.btn-getting-started:active {background-position: 0 -156px;}


/*---------------------------------------------------------------------------
  >Home Content
---------------------------------------------------------------------------*/

.home-content {
background: url(../images/globe-bg.jpg) no-repeat center top #020b1b;
height: 940px;
}

/* Rock Ribbon */

.rock-ribbon {
height: 78px;
background: url(../images/rock-bar-bg.png) repeat-x;
}

.rock-ribbon h2 {
background: url(../images/rock-bar-lines.png) no-repeat center;
text-align: center;
font-size: 35px;
color: #003856;
letter-spacing: -1px;
font-weight: 600;
position: relative;
top: 21px;
}

/* Main Promo Area */

.promo1 {
margin: 0 auto;
width: 240px;
color: #fff;
text-align: center;
position: relative;
top: 70px;
}

.promo1 h3 {
font-size: 20px;
text-transform: uppercase;
line-height: 27px;
margin-bottom: 15px;
}

.promo1 p {
font-size: 14px;
font-weight: 300;
line-height: 21px;
margin-bottom: 20px;
}

.promo-1-button {
background: url(../images/promo-1-button.png) no-repeat;
width: 231px;
height: 33px;
display: block;
color: #883600;
font-size: 18px;
text-align: center;
padding-top: 12px;
}

.promo-1-button:hover {text-decoration: none; background-position: 0 -45px;}
.promo-1-button:active {background-position: 0 -90px;}

.promo-segmentation {
background: url(../images/promo-segmentation-bg.png) no-repeat;
position: relative;
top: 360px;
width: 960px;
height: 85px;
float: left;
color: #fff;
}

.promo-segmentation h3 {
text-transform: uppercase;
font-size: 20px;
margin: 20px 0 10px 20px;
font-weight: 600;
}

.promo-segmentation p {
font-size: 14px;
font-weight: 300;
margin: 0 0 0 20px;
color: #AFC5E2;
}

.promo-segmentation .button {
float: right;
margin: 18px 17px 0 0;
border-width: 3px;
border-color: #182738;
}

/* 4 Box Promo*/

.promo-4-boxes {
background: url(../images/promo-4-boxes.png) no-repeat;
width: 960px;
height: 180px;
float: left;
position: relative;
top: 381px;
text-align: center;
}

.promo-4-boxes li {
float: left;
width: 225px;
font-size: 15px;
line-height: 20px;
padding-top: 17px;
}

.promo-4-boxes .box-1,
.promo-4-boxes .box-2,
.promo-4-boxes .box-3 
{
margin-right: 20px;
}

.button-round {
background: url(../images/button-round.png) no-repeat;
width: 85px;
height: 52px;
float: left;
color: white;
cursor: pointer;
padding-top: 33px;
text-transform: uppercase;
font-size: 17px;
margin-left: 72px;
margin-top: 26px;
}
.button-round:hover {text-decoration:none; background-position: 0 -85px;}
.button-round:active {background-position: 0 -170px;}

/* Sponsor Ribbon */

.sponsor-ribbon {
height: 67px;
background: #fff;
margin: 0 0 20px;
}

.sponsor-ribbon .box {
background: #fff;
padding: 10px 0 0;
}

/* Lower Area */

.lower-area .box-1 {
background: url(../images/home-lower-left.png) no-repeat;
width: 470px;
height: 241px;
float: left;
margin-right: 20px;
}

.lower-area .box-2 {
background: url(../images/home-lower-right.png) no-repeat;
width: 470px;
height: 241px;
float: left;
}

.lower-area h2 {
font-size: 20px;
line-height: 23px;
margin-top: 30px;
margin-bottom: 10px;
text-transform: uppercase;
}

.lower-area .box-1 h2 {
float: right;
width: 230px;
margin-right: 30px;
text-align: right;
}

.lower-area .box-2 h2 {
float: left;
width: 230px;
margin-left: 30px;
}

.lower-area .box-1 p {
float: right;
width: 230px;
text-align: right;
margin-right: 30px;
font-size: 13px;
line-height: 18px;
}

.lower-area .box-2 p {
float: left;
width: 230px;
text-align: left;
margin-left: 30px;
font-size: 13px;
line-height: 18px;
}

/* Chart */

.chart-large-circle {
position: absolute;
z-index: 0;
}

.chart-large-circle .data {
position: absolute;
margin: 180px 0 0 126px;
z-index: 500;
width: 195px;
text-align: center;
}

.chart-large-circle .data .number {
font-size: 52px;
font-weight: bold;
display: block;
padding: 0 0 10px;
}

.chart-large-circle .data p {
font-size: 12px;
text-transform: uppercase;
color: #888;
margin: 0 0 5px;
}

.chart-large-circle .chart {
width: 444px;
height: 439px;
}

.chart-large-circle .graphic-1 {
background: url(../images/chart-circle-large-1.png) no-repeat;
width: 317px;
height: 316px;
position: absolute;
z-index: 200;
margin: 64px 0 0 65px;
}

.chart-large-circle .graphic-2 {
background: url(../images/chart-circle-large-2.png) no-repeat;
position: absolute;
z-index: 100;
width: 444px;
height: 439px;
}

.chart-large-circle .graphic-3 {
background: url(../images/chart-circle-large-3.png) no-repeat;
position: absolute;
z-index: 0;
width: 330px;
height: 330px;
margin: 56px 0 0 55px;
}

/* Chart Circle Small */

.chart-small-circle {
position: absolute;
z-index: 100;
margin-left: 305px;
margin-top: 30px;
}

.chart-small-circle .stats {
background: url(../images/chart-small-circle-stats-bg.png) no-repeat left 18px;
position: absolute;
z-index: 0;
width: 172px;
height: 87px;
margin-left: -100px;
margin-top: -34px;
}

.chart-small-circle .stats img {
margin-right: 5px;
margin-top: -2px;
float: left;
}

.chart-small-circle .stats p {
font-size: 12px;
text-transform: uppercase;
color: #d5f3ff;
}

.chart-small-circle .data {
position: absolute;
z-index: 500;
width: 195px;
text-align: center;
}

.chart-small-circle .data .number {
float: left;
font-size: 23px;
font-weight: bold;
width: 68px;
text-align: center;
margin-top: 54px;
margin-left: 41px;
}

.chart-small-circle .data p {
font-size: 12px;
text-transform: uppercase;
color: #888;
margin: 0 0 5px;
}

.chart-small-circle .chart {
width: 149px;
height: 150px;
position: absolute;
z-index: 100;
}

.chart-small-circle .graphic-1 {
background: url(../images/chart-circle-small-1.png) no-repeat;
width: 149px;
height: 150px;
position: absolute;
z-index: 200;
}

.chart-small-circle .graphic-2 {
background: url(../images/chart-circle-small-2.png) no-repeat;
position: absolute;
z-index: 100;
width: 149px;
height: 150px;
}

.chart-small-circle .graphic-3 {
background: url(../images/chart-circle-small-3.png) no-repeat;
position: absolute;
z-index: 0;
width: 149px;
height: 150px;
}

/* Chart Bar */

.chart-bar {
position: absolute;
margin-top: 290px;
margin-left: -70px;
z-index: 400;
}

.chart-bar .data {
position: absolute;
margin-top: 75px;
width: 196px;
}

.chart-bar .data .number {
font-size: 32px;
font-weight: 600;
color: white;
margin: 0 0 8px;
display: block;
}

.chart-bar .data img {
float: left;
margin: 0 3px 0 0;
}

.chart-bar .data p {
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
color: #B7E8FC;
}

.chart-bar .meter {
position: absolute;
z-index: 50;
background: #F80;
width: 70%;
height: 40px;
margin-top: 10px;
margin-left: 12px;
}

.chart-bar .chart {
width: 196px;
height: 66px;
position: absolute;
z-index: 100;
}

.chart-bar .graphic-1 {
background: url(../images/chart-bar-1.png) no-repeat;
width: 196px;
height: 66px;
position: absolute;
z-index: 200;
}

.chart-bar .graphic-2 {
background: url(../images/chart-bar-2.png) no-repeat;
position: absolute;
z-index: 100;
width: 196px;
height: 66px;
}

.chart-bar .graphic-3 {
background: url(../images/chart-bar-3.png) no-repeat;
position: absolute;
z-index: 0;
width: 196px;
height: 66px;
}


/*---------------------------------------------------------------------------
  >Content
---------------------------------------------------------------------------*/

.content li {
list-style: disc;
list-style-position: outside;
margin: 0 0 0 20px;
}


/*---------------------------------------------------------------------------
  >Footer
---------------------------------------------------------------------------*/

.footer {
padding-top: 30px;
padding-bottom: 100px;
}

.footer .menu-large,
.footer .menu-small,
.footer .copyright
{
width: 800px;
}

.footer .menu-large {
float: left;
margin: 0 0 12px;
}

.footer .menu-large li,
.footer .menu-small li
{
float: left;
margin-right: 25px;
}

.footer .menu-large a {
font-size: 13px;
text-transform: uppercase;
color: #9da6b3;
font-weight: 600;
}

.footer .menu-small {
float: left;
margin: 0 0 18px;
}

.footer .menu-small a {
font-size: 11px;
color: #9da6b3;
}

.footer a:hover {
color: #fff;
text-decoration: none;
}

.copyright {
float: left;
font-size: 10px;
color: #77818e;
}

.net-apps-logo {
float: right;
width: 125px;
height: 73px;
}


/*---------------------------------------------------------------------------
  >Navigation
---------------------------------------------------------------------------*/

.nav {
position: relative;
top: 37px;
left: 20px;
}

.nav a {
color: #7b95b3;
text-transform: uppercase;
font-size: 15px;
padding: 15px;
}

.nav a:hover {
color: #fff;
text-decoration: none;
}

.nav li {
float: left;
}

/*---------------------------------------------------------------------------
  >Firefox Styles
---------------------------------------------------------------------------*/

@-moz-document url-prefix() {
/* BEGIN FF STYLES */ 

/* END FF STYLES */ }

/*---------------------------------------------------------------------------
  Retina Graphics
---------------------------------------------------------------------------*/

@media 
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2)
	{
/*BEGIN RETINA STYLES*/
	
/* END RETINA STYLES */}

/*---------------------------------------------------------------------------
  Reset
---------------------------------------------------------------------------*/

.content p,
.content ul,
.content ol,
.content blockquote
{
padding: 15px 0;
line-height: 24px;
}

.content li
{
padding: 7px 0;
}

* {
margin: 0;
padding: 0;
border: 0;
}

html, body, div, span, applet, object, iframe, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
vertical-align: baseline;
font-family: 'Open Sans', Arial, sans-serif;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
background: url(../images/background.jpg);
line-height: 1;
}

a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/*for FireFox*/
input[type="submit"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner {  
border : 0px;
}

/*for IE8 */
input[type="submit"]:focus, 
input[type="button"]:focus {    
outline : none;
}

/*---------------------------------------------------------------------------
	>Buttons
---------------------------------------------------------------------------*/

.button {font-weight: bold;box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);-webkit-box-shadow: rgba(255, 255, 255, 0.2);-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);cursor: pointer;border-width: 1px;border-style: solid;display: inline-block;text-transform: uppercase;}
.button:hover {text-decoration: none;}

.small {font-size: 12px;padding: 1px 12px;}

.medium {font-size: 14px;padding: 7px 20px;}
.medium:hover {color: white; background-position: 0 -28px !important;}
.medium:active {background-position: 0 -56px !important;}

.large {font-size: 20px;padding: 12px 28px;}
.large:hover {color: white; background-position: 0 -45px !important;}
.large:active {background-position: 0 -90px !important;}

.huge {font-size: 26px;padding: 18px 38px;}

/*** Gray ***/
.gray {text-shadow:0px 1px 0px rgba(255,255,255,0.8);color: #333;border-color: #aaa;background: #ddd;}
.gray:hover {color:#111; background: #eee;}
.gray:active {background: #ccc;}

/*** BLUE ***/
.blue {text-shadow:0px -1px 0px rgba(000,000,000,0.6);color: white;border-color: #163863;}
.medium.blue {background: url(../images/button-blue-medium.png) repeat-x;}
.large.blue {background: url(../images/button-blue-large.png) repeat-x;}