@charset "UTF-8";
/* ----------------------------
	Description: website css file
	Version: 1.0
---------------------------- */

@import url('reset.css'); /* RESET AND BASE STYLES */
@import url('type.css'); /* TYPOGRAPHY STYLES */
@import url('forms.css'); /* FORM STYLES */
/* ----------------------------
	MAIN STYLES
---------------------------- */
body {
     background:#4c4c4c url(../images/body-bg.png) repeat-x;
     color:#4c4c4c;     
     margin:0;
     padding:0;
}

img {border:none;}

#container {
    margin:0 auto;
    width:1152px;
}

#intHeader {
    margin:50px 0 0;
}

#intHeader .left{
    float:left;
    width:258px;
}

#intHeader .right{
    float:left;
    width:661px;
}
/* ----------------------------
	NAV MENU STYLES
---------------------------- */
#intHeader .right ul#menu {    
    height:30px;
    list-style:none;
    margin:40px 0 0 55px;
    overflow:hidden;
    padding:0;
    width:661px;
}

#intHeader .right ul#menu li {
    float:left;
}

#intHeader .right ul#menu li a{
    background:url(../images/menu-bg.png) no-repeat scroll top left;
    display:block;
    height:30px;
    position:relative;
}

#intHeader .right ul#menu li em{
    position:absolute;
    text-indent:-999em;
}
/* ----------------------------
	NAV ANIMATION STYLES
---------------------------- */
#intHeader .right ul#menu li a.home {
   width:118px;
}

#intHeader .right ul#menu li a.about {
    background-position:-128px 0px;
    width:120px;
}

#intHeader .right ul#menu li a.features {
    background-position:-260px 0px;
    width:120px;
}

#intHeader .right ul#menu li a.pricing {
    background-position:-406px 0px;
    width:120px;
}

#intHeader .right ul#menu li a.contact {
    background-position:-540px 0px;
    width:120px;
}


#intHeader .right ul#menu li a span {
    background:url(../images/menu-bg.png) no-repeat scroll bottom left;
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:100;
}

#intHeader .rightul#menu li a span:hover{cursor:pointer;}

#intHeader .right ul#menu li a.home span{
    background-position:0px -30px;
}

#intHeader .right ul#menu li a.about span{
    background-position:-128px -30px;
}

#intHeader .right ul#menu li a.features span {
    background-position:-260px -30px;
}

#intHeader .right ul#menu li a.pricing span{
    background-position:-406px -30px;
}

#intHeader .right ul#menu li a.contact span{
    background-position:-540px -30px;
}

/* ----------------------------
	MEAT STYLES
---------------------------- */
#meat{clear:both;}

#meatHeader {}

/* ----------------------------
	INDEX STYLES
---------------------------- */
#indexContent h1 {
    color:#4c4c4c;
    font-size:71px;
    font-weight:bold;
}

#indexContent h1 span{
    color:#34c6f4;    
}

#indexContent .indexLeft{
    float:left;
    margin:55px 0 0 75px;
    text-align:right;
    width:391px;
}

#indexContent .indexLeft p {
    color:#4c4c4c;
    font-family: Arial,Helvetica,sans-serif;
    font-size:12px;
    margin:7px 0 0;
}

#indexContent .indexLeft p span{
    color:#34c6f4;
    font-size:18px;
    font-weight:bold;
}

#indexContent .indexLeft a.intrigued {
    background:url(../images/button-intrigued.png) no-repeat;    
    display:block;
    float:right;
    height:44px;   
    width:170px;
}


#meat #content .left #indexContent .indexRight{
    margin:0;
}

/* ----------------------------
	ABOUT STYLES
---------------------------- */
 #aboutContent {
    background:url(../images/slc.png) bottom no-repeat;
    height:585px;
    width:1152px;
}

#aboutContent h1 {
    color:#4c4c4c;
    font-size:71px;
    font-weight:bold;
}

#aboutContent h1 span{
    color:#34c6f4;
}

#aboutContent .aboutLeft{
    float:left;
    margin:25px 0 0 75px;
    text-align:right;
    width:391px;
}

#aboutContent .aboutLeft p {
    color:#4c4c4c;
    font-family: Arial,Helvetica,sans-serif;
    font-size:12px;
    margin:7px 0 0;
}

#aboutContent .aboutLeft p span{
    color:#34c6f4;
    font-size:18px;
    font-weight:bold;
}

#aboutContent .aboutRight{
    border-left:solid 1px #000;
    margin:50px 0 0 35px;
    padding:0 0 0 35px;
    float:left;
    width:487px;
}

#aboutContent .aboutRight h2 {
    color:#4c4c4c;
    font-size:18px;
    font-weight:bold;
}

#aboutContent .aboutRight h2 span {
    font-size:12px;
    font-weight:normal;
}

#aboutContent .aboutRight p {
    color:#4c4c4c;
    font-family:Arial;
    margin:12px 0 30px 25px;
}
/* ----------------------------
	FEATURE STYLES
---------------------------- */
#featuresContent {
    background:url(../images/iphone-features.png) bottom center no-repeat;
    height:618px;
    margin:0 0 -85px 0;
    position:relative;
    text-align:center;
    z-index:1;
}

#featuresContent h3 {
    color:#4c4c4c;
    font-size:25px;
    font-weight:bold;
    margin:35px 0 35px 0
}

#featuresContent h3 span{color:#70d7f7;}

#featuresContent .featuresLeft {
    float:left;
    margin:0 0 0 75px;
    text-align:left;
    width:325px;
}

#featuresContent .featuresRight {
    float:right;
     margin:0 75px 0 0;
    text-align:left;
    width:325px;
}

#featuresContent .featureList{
     background:url(../images/salty-features-bg.png) no-repeat;
     font-family:Arial, Helvetica, sans-serif;
     color:#4c4c4c;
     height:133px;
     margin:0 0 10px 0;
     width:314px;
}

#featuresContent .featureList h4{
    font-size:15px;
    font-weight:bold;
    padding:15px 0 0 20px;
}

#featuresContent .featureList p{
    font-size:11px;
    padding:10px 20px 0 20px;
}

#featuresContent .featureList a.featurePricing {
    background:url(../images/button-pricing.png) no-repeat;
    display:block;
    float:right;
    height:28px;
    margin:0 15px 0 0;
    width:68px;
}

#featuresContent .featureList a.featureLearn {
    background:url(../images/button-learnmore.png) no-repeat;
    display:block;
    float:right;
    height:24px;
    margin:0 15px 0 0;
    width:95px;
    display:none; /* REMOVE WHEN BACKEND IS DONE. */
}
/* ----------------------------
        CONTACT STYLES
---------------------------- */
#contactContent {
    color:#4c4c4c;
    height:508px;
}

#contactContent h1 {    
    font-size:71px;
    font-weight:bold;
}

#contactContent h1 span{
    color:#34c6f4;
}

#contactContent p {    
    font-family: Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    padding:12px 0 0;
    }

#contactContent address{
    font-style:normal;
    font-weight:bold;
    margin:12px 0 0;
    display:none; /*DELETE WHEN REAL ADDRESS IS AVAILABLE */

}

#contactContent .contactLeft {
    float:left;
    text-align:right;
    margin:55px 0 0 127px;
    width:314px;
}

#contactContent .contactLeft p.phone{font-size:18px;}

#contactContent .contactLeft a{
    color:#4c4c4c;
    text-decoration:underline;
}


#contactContent .contactRight {
    border-left:solid 1px #4c4c4c;
    float:left;
    margin:65px 0 0 37px;
    padding:0 0 0 25px;
    width:327px;
}

/* ----------------------------
	LOGIN STYLES
---------------------------- */
#loginContent {
    background:url(../images/login-bg.png) no-repeat;
    height:187px;
    margin:0 auto 350px auto;
    width:392px;
}

#loginContent form {
   padding:20px 0 0 35px;
}

#loginContent label{
    display:inline-block;
    font-family:Arial, Helvetica;
    font-size:12px;
    margin:0 5px 0 0;
    width:58px;
}

#loginContent input {
    border:none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    width:169px;
}

#loginContent button {
    background:url(../images/button-login.png) no-repeat;
    border:none;
    cursor:pointer;
    float:right;
    height:31px;
    margin:0 105px 0 0;
    width:96px;
}

#regPass {
    font-size:8px;
    height:28px;
    width:128px;
}

#regPass a {
    color:#34c6f4;
    text-decoration:underline;
}

h2.loginHeader {
    color:#4c4c4c;
    font-size:25px;
    font-weight:bold;
    margin:0 auto 0 auto;
    width:392px;
}

h2.loginHeader span{
   color:#34c6f4;
}

/* ----------------------------
	PRICING STYLES
---------------------------- */
#pricingContent {
    background:url(../images/salt.png) bottom left no-repeat;
}

#pricingContent h3 {
    color:#4c4c4c;
    font-size:25px;
    font-weight:bold;
    margin:0 0 15px 0;
    text-align:center;
}

#pricingContent h3 span {
    color:#34c6f4;  
}

#pricingContent table{
    color:#4c4c4c;
    font-family:Arial, Helvetica, sans-serif;
    height:580px;
    margin:0 0 25px 55px;
    width:780px;
}

#pricingContent table thead {
    font-family:"Myriad Pro", Verdana, sans-serif;
    font-size:21px;
    font-weight:bold;
    text-align:center;

}

#pricingContent table thead span {
    color:#34c6f4;
}

#pricingContent table .pricesubHeader {
    background:transparent url(../images/sub-head-bg.png) right no-repeat;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    line-height:1.5em;    
}

#pricingContent table .pricesubHeader p{
    display:block;
    margin:0;
    padding:0;
    text-align:right;
    width:272px;
}

#pricingContent table .pricesubHeader td {
    height:19px;    
}

#pricingContent table .priceOptions td {
    padding:1px 0;
}

#pricingContent table .priceOptions td.priceText {
    font-size:10px;
    padding-right:20px;
    text-align:right;
}

.salt{background-color:#cae9f2; border-right:solid 2px #fff; text-align:center;}
.salty{background-color:#a4e0f3; border-right:solid 2px #fff; text-align:center;}
.extraSalty{background-color:#7ed7f3; text-align:center;}
.rowDivider{background-color:#e7f2f4; text-align:center;}
.dividerBorder{border-right:solid 2px #fff;}
.contract{font-size:13px; font-weight:bold;}
.fee{font-size:18px; font-weight:bold;}
/* ----------------------------
	FOOTER STYLES
---------------------------- */
#extFooter {
    background:#4c4c4c url(../images/ext-footer-bg.png) top repeat-x;
    clear:both;
    height:185px;
    width:100%;
}

#extFooter #footerContent {
    margin:0 auto;
    width:1152px;
}

#footerContent #footerMenu{
    background:url(../images/footer-nav-bg.png) no-repeat;
    float:left;
    height:134px;
    margin:25px 0 0;
    width:212px;
}

#footerMenu .left {
    float:left;
    margin:10px 0 0 15px;
    width:74px;
}

ul.left li{display:block; width:74px;}

#footerMenu .right {
    float:right;
    margin:10px 15px 0 0;
    width:98px;
}

ul.right li{display:block; width:98px;}


#footerMenu li a{
    color:#fff;
    text-decoration:none;
}

#footerMenu li a:hover{
    color:#fff;
    text-decoration:underline;
}

#extFooter #follow{    
    height:93px;   
    float:left;
    margin:-15px 0 0 750px;
    width:100px;
    display:none; /* Remove when social network links are ready 8*/
}

#extFooter #blog {
    float:right;
    height:151px;
    margin:15px 0 0;
    width:37px;
}