@charset "utf-8";

/*
================================
General Stlyes
================================
*/

/* Body Styles */
body { 
font: normal 62.5% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
margin: 0; 
background: #fff url(../images/brochure/background.png) repeat-x top left; 
color: #333;
text-align: center; 
min-width: 959px;
}

body#homepage {
background-image: url(../images/brochure/home-background.png);
}

/* Site Wrapper */
#wrapper { 
width: 958px;       
text-align: left; 
margin: 0 auto; 
}

/* Resetting margins on headers and paragraphs */
h1,  h2, h3, h4, h5, h6, p { 
margin: 0 0 10px 0;
}

/* Remove border from linked images and fix vertical align */
img { 
border: none; 
vertical-align: bottom; 
}

/* Remove Text decoration on images */
a { 
text-decoration: none;
color: #000;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
color: #555;
}
 
.no-underline a,
.no-underline a:hover {
border-bottom: none;
}
 
/* Hide text where necessary */
.hide-text { 
display: block; 
text-indent: -99999px; 
overflow: hidden; 
text-align: left !important;  
font-size: 0.1em;
}

/* Set the font, text size and alignment of inputs */
input, textarea, select { 
vertical-align: middle; font: normal 1.0em Verdana, Arial, Helvetica, sans-serif; color: #333; 
}

/* Accessible way of hiding content */
#accessibility, .full-hide { 
position: absolute; top: 0; left: -9999px; height: 0px;
}

/* Setting a height on all li and a's for IE 6 */
* html ul li, * html a { 
height: 1px; 
}

/* Fieldsets and Legends */
fieldset, legend { 
margin: 0; 
padding: 0;
border: none;
}
    
legend { display: none; }

/* Forms */
form { margin: 0; padding: 0; display: inline; }

.bold { font-weight: bold; }

.error-box
{
line-height: 1.3em;
font-size: 14px;
}

.home-announce
{
float: left; 
width: 620px;
padding: 10px;
line-height: 1.4em;
font-size: 14px;
color: #444; 
background: #FFFFCC;
}

/*
================================
Header
================================
*/

#header {
float: left;
display: inline;
}

#header #logo {
float: left;
display: inline;
margin: 15px 44px 0 45px;
}
    
#homepage #header #logo {
margin: 48px 0 0 45px;
}
    
#header #nav {
float: left;
position: relative;
line-height: 35px;
height: 35px;
width: 590px;
background: #355462 url(../images/brochure/nav_bg.png) no-repeat top left;
margin: 21px 0 0 173px;
}
    
#homepage #header #nav {
margin: 90px 0 0 173px;
height: 35px;
}
    
#header #nav ul {
margin: 0;
padding: 0;
list-style: none;
}
        
#header #nav ul li {
display: block;
float: left;
margin: 0;
padding: 0;
}
            
#header #nav ul li a {
display: block;
float: left;
padding: 0 20px;
color: #fff;
text-transform: uppercase;
font-size: 1.1em;
text-decoration: none;
}
                
#header #nav ul li a:hover,
#header #nav ul li a:focus,
#header #nav ul li a:active,
#header #nav ul li a.selected {
color: #FFB31B;
}
                
#header #nav #sign-up {
position: absolute;
right: 5px;
top: 4px;
background: url(../images/brochure/sign-up-bg.png) no-repeat top left;
width: 136px;
text-align: center;
line-height: 27px;
height: 36px;
color: #fff;
}
        
#header #nav #sign-up a {
text-transform: uppercase;
color: #fff;
text-decoration: none;
font-size: 1.1em;
display: block;
float: left;
display: inline;
width: 68px;
text-align: center;
}
            
#header #nav #sign-up a:hover,
#header #nav #sign-up a:active,
#header #nav #sign-up a:focus,
#header #nav #sign-up a.selected {
color: #000;
font-weight: bold;
}

/*
================================
Callout
================================
*/

#callout-wrapper {
float: left;
display: inline;
width: 100%;
margin: 0 0 24px 0;
height: 127px;
background: #99D7EB url(../images/brochure/callout-bg.png) repeat-x top left;
}

#homepage #callout-wrapper 
{
height: 289px;
background: #99D7EB url(../images/brochure/callout-home-bg.png) repeat-x top left;
}

#callout-wrapper #callout {
float: left;
width: 100%;
}
    
#homepage #callout-wrapper #callout {
background: transparent url(../images/brochure/homepage-photo.jpg) no-repeat top right;
height: 289px;
}
    
#callout-wrapper #callout .callout-text {
float: left;
display: inline;
clear: both;
margin: 50px 0 0 45px;
width: 700px;
height: 50px;
background-repeat: no-repeat;
background-position: top left;
}
        
#homepage #callout-wrapper #callout .callout-text {
height: 98px;
margin: 90px 0 24px 45px;
background: url(../images/brochure/harness-the-power-of-mobile.png) no-repeat top left;
width: 255px;
}
        
.cta-button {
float: left;
clear: both;
display: inline;
background: url(../images/brochure/button-bg.png) no-repeat top right;
line-height: 37px;
text-align: center;
}
        
.cta-button a {
display: block;
background: url(../images/brochure/go-left-button.png) no-repeat top left;
color: #000;
text-decoration: none;
font-size: 1.2em;
padding: 0 13px;
}
            
* html .cta-button a {
display: inline;
padding: 0 10px 0 0;
text-indent: 0;	
}
        
#homepage #callout-wrapper #callout .cta-button {
float: left;
clear: both;
display: inline;
width: 131px;
margin: 0 0 0 45px;
background: url(../images/brochure/left-button.png) no-repeat top left;
line-height: 37px;
text-align: center;
padding-left: 10px;
}
        
#homepage #callout-wrapper #callout .cta-button a {
display: block;
background: url(../images/brochure/button-bg.png) no-repeat top right;
color: #000;
text-decoration: none;
font-size: 1.6em;
text-indent: -10px;
}
            
#callout-contact-us {
background-image: url(../images/brochure/text-contact-us.png);
}
    
#callout-feature {
background-image: url(../images/brochure/text-if-you-can-browse.png);
}
    
#callout-why-choose-mobile {
background-image: url(../images/brochure/text-why-choose-mobile.png);
}
    
#callout-sign-up {
background-image: url(../images/brochure/text-sign-up.png);
}
    
#callout-tour {
background-image: url(../images/brochure/text-tour.png);
}
    
#callout-enter-login {
background-image: url(../images/brochure/text-enter-login.png);
}

/*
================================
Content
================================
*/

#content {
color: #666;
font-size: 1.3em;
line-height: 1.5em;
margin: 0 0 10px 45px;
}

/*
================================
Introtext
================================
*/

#intro-text-wrapper {
float: left;
position: relative;
display: inline;
margin: 0 0 18px -45px;
padding: 20px 0 20px 45px;
background-color: #E1EAF7;
width: 100%;
}

#intro-text-wrapper #intro-text {
float: left;
display: inline;
width: 457px;
color: #214791;
}
    
#intro-text-wrapper #intro-text h1 {
font-size: 1.0em;
text-transform: uppercase;
}
        
#intro-text-wrapper #intro-text p {
font-size: 1.46em;
}
        
#intro-text-wrapper #intro-text p.learn-more {
margin: 0;
font-size: 1.0em;
text-transform: uppercase;
}
        
#intro-text-wrapper #intro-text p.learn-more a {
color: #000;
}
            
#intro-text-wrapper #intro-text-actions {
float: left;
margin-left: 63px;
width: 374px;
}
    
#intro-text-wrapper #intro-text-actions img {
float: left;
}

/*
================================
General Content Styles
================================
*/

#content h2 {
text-transform: uppercase;
color: #999;
font-size: 1.2em;
font-weight: bold;

}
    
#content #main-content-column {
float: left;
display: inline;
width: 458px;
margin: 0 155px 0 0;
}
    
#content #main-content-column table {
border: 1px solid #ccc;
border-left: none;
border-right: none;
border-collapse: collapse;
margin: 0 0 10px -45px;
position: relative;
width: 503px;
}
        
#content #main-content-column table td,
#content #main-content-column table th {
border: 1px solid #ccc;
border-right: none;
padding: 5px 3px;
background-color: #f5f5f5;
color: #214791;
text-align: center;
}
            
#content #main-content-column table th {
text-transform: uppercase;
font-weight: normal;
color: #555;
text-align: left;
}
            
#content #main-content-column table tr.header th {
background-color: #dededd;
text-align: center;
}
            
#content #main-content-column table td.first,
#wrapper #content #main-content-column table th.first {
text-indent: 45px;
border-left: none;
text-align: left;
}
            
#content #sub-content-column {
float: left;
display: inline;
margin: 0;
width: 300px;
}
    
#content #sub-content-column hr {
border: none;
border-bottom: 2px solid #ccc;
clear: both;
margin: 0 0 10px;
height: 2px;
}
        
#content #sub-content-column .quote {
padding-right: 60px;
background: url(../images/brochure/quote-box.png) no-repeat bottom right;
}
        
#content #sub-content-column ul {
margin: 0;
padding: 0;
list-style: none;
}
        
#content #sub-content-column ul li {
margin: 0 0 5px 0;
padding: 0 0 6px 0;
border-bottom: 1px solid #ccc;
}
            
#content #sub-content-column ul li.last {
padding-bottom: 0;
border: none;
}
            
#content #sub-content-column ul li a {
text-transform: uppercase;
}
                
/* Arbitrarily changing the column widths makes baby Jesus cry */
#content #sub-content-column .map,
#content #sub-content-column .screenshot {
margin-left: -74px;
position: relative;
}
#content #sub-content-column .screenshot {
margin-left: -18px;
}
        
#content #sub-content-column .spotlight-wrapper {
width: 280px;
background: #e3e3e3 url(../images/brochure/grey-spot-footer.png) no-repeat bottom left;
padding-bottom: 10px;
}
        
#content #sub-content-column .spotlight-wrapper .spotlight {
background: #e3e3e3 url(../images/brochure/grey-spot-header.png) no-repeat top left;
padding: 10px 10px 0;
}
            
#content #sub-content-column .spotlight-wrapper .spotlight .cta-button {
float: right;
display: inline;
margin-top: -10px;
}

/*
================================
Login Form
================================
*/

.form-row {
margin-bottom: 5px;
}

.form-label {
float: left;
width: 70px;
color: #000;
margin-right: 10px;
padding: 4px 0;
}
    
.form-input {
float: left;
width: 280px;
color: #000;
}
    
.form-input input {
vertical-align: middle;
}
    
.form-input .text-input {
border: 1px solid #214791;
padding: 5px;
background-color: #fff;
color: #000;
width: 180px;
}
        
.form-input a {
color: #214791;
}

/*
================================
Footer Wrapper
================================
*/

#footer-wrapper {
background-color: #000;
border-top: 2px solid #ccc;
font-size: 1.2em;
min-width: 958px;
text-align: center;
height: 70px;
}

#footer {
width: 958px;
margin: 0 auto;
text-align: left;
}
    
#footer a {
color: #FFB31B;
}
    
#footer #footer-links {
color: #FFB31B;
float: left;
display: inline;
margin: 24px 0 0 45px;
padding: 0;
list-style: none;
}
        
#footer #footer-links li {
margin: 0 10px 0 0;
line-height: 1.0em;
padding: 0;
float: left;
display: inline;
}
            
#footer #footer-links li a {
display: block;
float: left;
padding: 0 10px 0 0;
border-right: 1px solid #FFB31B;
text-transform: uppercase;
}
                
#footer #footer-links li.last a {
border: none;
padding: 0;
}
        
#footer #footer-details {
float: right;
color: #ccc;
text-align: right;
padding-top: 12px;
}

/*
================================
Clearfix
================================
*/

.clearfix:after { content: "." !important; display: block !important; height: 0 !important; clear: both !important; visibility: hidden !important; }
.clearfix { display: inline-block !important; }  

/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1% !important;}
.clearfix {display: block !important;}
/* End Holly Hack */



#register-wrapper {
background-color:#E3E3E3;
display:inline;
float:left;
margin: 0 0 18px -45px;
padding: 20px 0 20px 45px;
position:relative;
width:100%;
}

.register-button {
display: inline;
background: url(../images/brochure/button-bg.png) no-repeat top right;
height: 37px !important;
text-align: center;
margin-right: 45px;
}
       
.register-button input[type=submit] {
display: block;
background: url(../images/brochure/go-left-button-grey.png) no-repeat top left;
color: #000;
text-decoration: none;
font-size: 1.2em;
padding: 0 13px;
height: 37px !important;
border-style: none;
cursor: pointer;
}
            
* html .register-button input[type=submit] {
display: inline;
padding: 0 10px 0 0;
text-indent: 0;	
}

.register label
{
    display:block;
    width: 200px;
    float: left;
}

.register input[type=text]
{
    width: 300px;
}

.accountInfo
{
    min-height: 15px;
}

.recoverPassword td
{
    color: Black;
}

.forgotpassword-announce
{
    margin: 0 0 18px -45px;
    padding: 20px 0 20px 45px;
    width: 100%;
}

.login-announce
{
    width: 100%;
    padding: 10px 0 10px 0;
}

.login-announce p
{
    margin-left: 20px;
}

.failureNotification
{
    color: Red;
}

.failureNotification li
{
    list-style-type: none;
}