/* Style Sheet for iPhone products and associated pages that appear on a black backgound. (The black ground is black for consistency with general
   iPhone practice.) 
   
   Author: Bill Allcorn
*/

/* As in the style sheet for the MobilityWare main pages (Default.css), we don't generally change the color of visited links except in cases, for
   example on the iPhone products page, where seems useful to give the user a clue as to which links he has clicked on.
*/   

A:link  	{color: #1E87BB; text-decoration: none} /* Standard blue */
A:visited	{color: #1E87BB; text-decoration: none}
A:hover 	{color: #E14A9C; text-decoration: none}	/* Purple */
A:active 	{color: #E14A9C; text-decoration: none}

.noborder {
	border-style: none;
	}

.centeredbody {					/* Limit body to a maximum of 800 pixels and center horizontally if the window is wider.
								   Among other things; doing this, including setting an internal padding, seems to avoid
								   a bug in IE6 and IE7 that causes them to sometimes not put the products and support links
								   side by side on the application pages. IE8 doesn't have this problem. */                 
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: .5em;
	padding-right: .5em;
	background-color: #000000;	/* Black */
	color: #1E87BB;				/* The default font color, a fairly bright blue */
	font: normal 100% "Trebuchet MS", helvetica, sans-serif;
	}
.title {
	font-size: 1.5em;
	margin-top: .25em;
	margin-bottom: 0em;
	}
	
.heading {
	clear: left;
	font-size: 1.25em;
	padding-top: 1em;
	}

.appname {
	text-align: center;
	font-size: 2em;
	margin-top: .5em;
	margin-bottom: .5em;
	}
	
.description {
	color: #999999;				/* Medium gray */
	clear: left;
	float: left;
	}
	
.screenshot {					/* "Standard" 320x480 iPhone screen shot */
	width:  160px; 
	height: 240px;
	float: right;
	margin-left: .5em;
	margin-bottom: .5em;
	}
	
.screenshotshort {				/* 320x460 iPhone screen shot */
	width:  160px; 
	height: 230px;
	float: right;
	margin-left: .5em;
	margin-bottom: .5em;
	}
	
.screenshotland {				/* 480x320 landscape format iPhone screen shot */
	width:  240px; 
	height: 160px;
	float: right;
	margin-left: .5em;
	margin-bottom: .5em;
	}
	
.screenshotipad {				/* "Standard" half size (384 x 512) iPad screen shot */
	width:  384px; 
	height: 512px;
	float: right;
	margin-left: .5em;
	margin-bottom: .5em;
	}
	
.productlinks p {
	float: left;
	width: 100px;				/* This is about the largest value that will maintain three products per row on the iPhone screen */	
	margin-top: .25em;
	text-align: center;
	}
	
.productlinks a:visited {
	color: #E14A9C;				/* Leave it purple so that the user can see which links he has clicked  */
	}
	
.smicon {						/* Application icon ("sm" for small (38x38), but we no longer do them small) */
	border-style: none;
	width: 57px;
	height: 57px;
	}
	
.icon72 {						/* Application icon (72x72) */
	border-style: none;
	width: 72px;
	height: 72px;
	}
	
.tinyicon {						/* Very small application icon (standard is 57x57) */
	border-style: none;
	width: 29px;
	height: 29px;
	}
	
.centerlink { 
	clear:left;
	padding-top: 2em;
	text-align: center;
	}

.leftlink {
	clear: left;
	float: left;
	width: 50%;
	text-align: center;
	padding-bottom: 2em;
	}
	
.rightlink { 
	float: left;
	width: 50%;
	text-align: center;
	padding-bottom: 2em;
	}
	
.iconlinks4 p {
	float: left;
	width: 25%;			
	text-align: center;
	margin: 0px;
	padding-top:   2em;
	padding-bottom:2em;
	}

.iconlinks4a p {
	float: left;
	width: 25%;		
	text-align: center;
	margin: 0px;
	padding-bottom:2em;
	}

.icon {						
	border-style: none;
	width: 57px;
	height: 57px;
	}

.appstorediv {
	clear:left;
	margin-left: auto;
	margin-right:auto;
	}	

.appstoreheading {
	clear: left;
	color: #1E87BB;				/* The default font color, a fairly bright blue */
	font-size: 1.25em;
	padding-top: 1em;
	}
	
.appstoreheading a 	{text-decoration: underline}  /* So it stands out from the rest of the heading  */

.appstorecenter {
	clear: left;
	text-align: center;
	padding-bottom: 0em;
	}
	
.appstoreleft {
	clear: left;
	float: left;
	width: 350px;
	text-align: center;		
	padding-right:  30px;
	padding-bottom: 2em;
	}
	
.appstoreright { 
	float: left;
	width: 350px;
	text-align: center;
	padding-left:   30px;
	padding-bottom: 2em;
	}
	
.facebookiframe {
	
	/* The background image is 300x50, so width plus left and right padding should equal 300 and height plus top and bottom padding
	   should equal 50. If the image size changes, adjust accordingly. We use padding because vertical-align: middle and text-align:center
	   didn't seem to have any affect */
	   
	background-image: url('images/FacebookiFrame.png'); /* background:    #77BCDD; */
	width:            288px; 
	padding-left:      12px; 
	height:            38px;
	padding-top:       12px; 
	overflow:         hidden; 
	}
	
.faqlinkheading {
	clear: left;
	font-size: 1.25em;
	font-weight: bold;
	color: #999999;
	}

.faqlinkdiv {
	clear: left;
	float: left;
	width: 100%;
	margin: 0;
	padding-left: 20px;
	}
	
.faqlinkdiv1 {
	float: left;
	width: 50%;			
	margin: 0px;
	}

.faqapp {
	clear: left;
	float: left;
	}
	
.faqlink {
	float: left;
	font-size: 1.25em;
	Vertical-align: middle;
	padding-left: 10px;
	}

.faqdiv {
	clear: left;
	color: #999999;				/* Medium gray */
	}
	
.faqheading {
	font-size: 1.1em;
	margin: 0px;
	padding-bottom: .5em;
	}

.faqsection {
	display: block;
	margin: 0px;
	}
	
.faqintro {
	font-size:   1em;
	font-weight: bold;
	margin: 0px;
	padding-top:     .5em;
	padding-bottom: 1.5em;
	}
	
.faqquestion {
	display: block;
	padding-left: 0px;
	font-size:   1em;
	font-weight: bold;
	margin: 0px;
	padding-bottom: .5em;
	}
	
.faqquestion a:link    {color: #999999; text-decoration: none}
.faqquestion a:visited {color: #999999; text-decoration: none} 
.faqquestion a:hover   {color: #E14A9C; text-decoration: none}	/* To help make clear to users that this is a link */
.faqquestion a:active  {color: #E14A9C; text-decoration: none}

.faqanswer {
	padding-left: 22px;
	font-size:    1em;
	font-weight:  normal;
	margin: 0px;
	padding-bottom: .5em;
	}

.faqanswer p {
	margin: 0px;
	padding-bottom: .5em;
	} 	
	
.faqanswer ul {
	margin: 0px;
	padding-bottom: .5em;
	padding-left: 15px;
	} 	
	
.faqanswer li {
	margin: 0px;
	padding-bottom: .5em;
	} 	
	
.footer {
	clear: left;
	margin-top: 2em;
	color: #1E87BB;				/* The default font color, a fairly bright blue */
	font: normal .75em "Trebuchet MS", helvetica, sans-serif;
	font-style: italic;
	}

.footer a:link    {color: #1E87BB; text-decoration: none}
.footer a:visited {color: #1E87BB; text-decoration: none} /* Use the footer font color for footer visited link so that they don't grab the viewer's attention. */
.footer a:hover   {color: #E14A9C; text-decoration: none}
.footer a:active  {color: #E14A9C; text-decoration: none}

/* The following are used on various iApps promo pages */

.adimage {
	clear:left;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
	
.promotext {
	color: #999999;				/* Medium gray */
	font-size: 1.25em;
	clear: left;
	float: left;
	}
	
.promolink {
	color: #1E87BB;				/* The default font color */
	text-align: center;
	font-size: 1.5em;
	margin-top: .5em;
	margin-bottom: .5em;
	}

	
/* The following are used for the signup forms on Promo pages 

   The goal is for the page to look good and be useable on the iPhone itself. To make the form easier to fill in on the phone when 
   it's zoomed, we ensure that the label field + input field widths are large enough to cause them to be wrapped to two lines
   when a standard zoom in is done on the iPhone display */

.signupform {				/* << This, together with .submit aligns submit button w/input and moves it to left when shrink, but not when get's really
                                  narrow in Fire Fox and Safari (is OK on IE-8); doesn't work in IE-6 (ends up centered on page); need to try on iPhone >> */
	max-width: 422px;
	}
	
.formheading {
	clear: left;
	color: #1E87BB;     	 /* The default font color. */
	font-size: 1.25em;
	}
.signupform label {
	float: left;
	clear: left;
	width: 180px;
	}
.submit {					
	clear: left;
	text-align: center;
	margin-top: 1em;			
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	}