/*---------------------------------------------------------------------------
  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;
border:0;
}

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

.header-login {
float: right;
position: relative;
top: 29px;
color:White !important;
text-decoration:none !important;
}


.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: 65px;
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;}



.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;
}

/*---------------------------------------------------------------------------
  >Side
---------------------------------------------------------------------------*/

.side {
width: 240px;
float: right;
}

.side p {
font-size: 13px;
line-height: 18px;
}

.side-links 
{
margin: 26px 0 20px;
}

.side-links a {
font-size: 15px;
color: #999;
border-left: 4px solid #f2f2f2;
text-decoration:none !important;
}

.side-links a:hover {
color: #2796c0;
text-decoration: none;
background: #f9f9f9;
}

.side-links a,
.side-links span {
padding: 11px 11px !important;
display: block;
}

.side-links li {
list-style: none;
border-bottom: 1px solid #e2e2e2;
padding: 0 !important;
}

.side-links .current span {
border-left: 4px solid #2fa5d2;
font-size: 16px;
}

.side h2 {
text-transform: uppercase;
font-size: 18px;
margin: 0 0 15px;
}

.side-getting-started {
background: url(../images/get-started-button.png) no-repeat;
width: 240px;
height: 65px;
display: block;
margin: 0 0 20px;
}

.side-getting-started:hover {
background-position: 0 -65px;
}

.side-getting-started:active {
background-position: 0 -130px;
}


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

.content {
background: #fff;
border-bottom: 1px solid #DDD;
}

.content h1 {
font-size: 18px;
color: #808080;
padding-bottom: 15px;
margin-bottom: 30px;
text-transform: uppercase;
font-weight: 200;
border-bottom: 1px solid #ddd;
}

.main {
float: left;
width: 680px;
padding: 30px 0 40px;
}

.main h2 {
font-size: 25px;
font-weight: 400;
line-height: 32px;
margin: 10px 0;
}

.main h3 {
font-size: 20px;
line-height: 28px;
margin: 10px 0;
}

h3 {
font-size: 19px;
color:Black;
font-family: 'Open Sans', Arial, sans-serif;
font-weight:bold;
}

li {
font-size: 16px;
color:Black;
font-family: 'Open Sans', Arial, sans-serif;
}

.main h4 {
font-size: 17px;
line-height: 22px;
margin: 10px 0;
}

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

.align-left {
float: left;
margin: 0 30px 20px 0;
}

.align-right {
float: right;
margin: 0 0 20px 30px;
}


/*---------------------------------------------------------------------------
  >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: 23px;
left: 20px;
text-decoration:none !important;
}

.nav a {
color: #7b95b3;
display: block;
text-transform: uppercase;
font-size: 15px;
padding: 15px;
text-decoration:none !important;
}

.nav a:hover {
color: #fff;
}

.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
---------------------------------------------------------------------------*/

.main p,
.main ul,
.main ol
{
padding: 10px 0;
line-height: 22px;
font-size: 14px;
color: #333;
}

.main li
{
padding: 7px 0;
}

* {
margin: 0;
padding: 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;
color: #2FA5D2;
font-size: 18px;
line-height: 26px;
border-left: 4px solid #2FA5D2;
padding: 0 0 0 20px;
margin: 10px 0;
}

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