/* Firm 57 */
/* MileTracker */
/* Created June 5, 2008 - TR
--------------------------------------- */

.left {float: left; margin-right: 1em;}
.right {float: right; margin-left: 0.5em;}
.small {font-size: smaller; line-height: 1.5em;}
.large {font-size: larger; line-height: 1.5em;}
.hide {display: none;}

li ul, li ol { margin:0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 2em; }

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
	
pre,code { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1.25em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

abbr, acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#666; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }
p {margin: 0 0 1.5em 0;}

label { font-weight: bold; }
fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size:1.2em; }

#logInForm input.text, #logInForm input.title,
#logInForm textarea, #logInForm select {
  margin: 0.5em 0;
  border:1px solid #bbb;
}

/* Structure and Layout
--------------------------------------- */
html {overflow-y: scroll;}

body {
	text-align: center;
	background: #000000; /*---- was 001b4d ----- */
	color: #2C2C2C;      /*---- was 0a2052 ----- */  
	font-family: verdana, Arial, helvetica, sans-serif;
	font-size: 75%;
	line-height: 1.5em;	
	}

#frame {background: #4C4C4C url(../images/frame_bg.gif) repeat-y center top;} /* -------- was #002c67 ------ */
.oneCol #frame {background-image: url(../images/frame_bg_oneCol.gif);}
.home #frame {background: #4C4C4C;} /* -------- was #002c67 ------ */
.noBrand #frame {background:  #000000 url(../images/frame_bg_nobrand.gif) repeat-y center top;}  /*---- was 001b4d ----- */
#wrapper {background: url(../images/header_bg.jpg) no-repeat center top;}
.oneCol #wrapper {background-image: url(../images/header_bg_oneCol.jpg);}
.home #wrapper {background-image: url(../images/header_bg_home.jpg);}
.noBrand #wrapper {background-image: url(../images/header_bg_nobrand.gif);}

	
.contents {
	text-align: left;
	margin: 0 auto;
	width: 856px;
	padding: 0 52px;
}

#header {
	padding: 24px 0 0 0;
	height: auto !important;
	height: 126px;
	min-height: 126px;
	position: relative;	
	}

#container {
	float: left;
	display: inline;
	width: 482px;
	margin-left: 48px;
}

.oneCol #container {
	width: 776px;
}

.home #container {	
	width: 548px;	
	margin-left: 18px;
	}

#mainCol {
	padding: 2em 0;
	color: #333;
}

.home #mainCol {
	float: left;	
	display: inline;
	width: 230px;
	padding: 1em 15px 1em 20px;
	color: #cccccc;  /* --------------- was #13a6ea ---------*/ 
	}	

#subCol, .oneCol #subCol {display: none;}

.home #subCol {
	display: inline;
	float: right;
	width: 230px;
	padding: 1em 15px 1em 20px;
	color: #cccccc;  /* --------------- was #13a6ea ---------*/
	}

#extraCol {
	float: right;
	display: inline;
	width: 240px;
	margin-right: 30px;
	color: #333;
	padding: 2.5em 0 0 0;
}

.oneCol #extraCol {display: none;}

.home #extraCol {	
	width: 230px;
	padding: 1em 15px 1em 20px;	
	margin-right: 18px;
	color: #cccccc;  /* --------------- was #13a6ea ---------*/
	}

#footer {
	clear: both;
	color: #8C8C8C; /* --------------- was #004275 ---------*/
	padding: 2.5em 0;
	background: url(../images/footer_bg.gif) no-repeat center top;
	}
.oneCol #footer {background-image: url(../images/footer_bg_oneCol.gif);}
.home #footer {background: none;}
#footer .contents {text-align: center;}

/* Links
--------------------------------------- */

a, a:link, a:visited {
	color: #11548F; /* --------- WAS #0c5793 -----------*/
	text-decoration: none;
	font-weight: bold;
	}

a:hover, a:active {
	color: #11548F;  */ ------- was #35c6f9 -----------*/ 
	text-decoration: underline;
	}
	
.home a {
	color: #FFF;  */ ------- was #56bbea -----------*/ 
	}

.home a:hover, .home a:active {
	color: #11548F;
	text-decoration: none;
	}

#footer a {
	color: #8C8C8C; /* --------------- was #004275 ---------*/
	text-decoration: none;
}

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

.nav {margin: 0; padding: 0;}
.nav li {display: inline; list-style: none;}

#header .nav {
	position: absolute;
	top: 70px;
	right: 0;
}

#header .nav a {
	font-size: 1.333em;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	line-height: 32px;
	height: 33px;
	float: left;
	text-align: center;
	margin-right: 0.75em;
}

#header .nav a:hover {color: #cccccc;} /* ------ WAS #FF1F55 -------*/

#header .nav a.what {
	background: url(../images/nav_what.png);
	width: 144px;
}

#header .nav a.how {
	background: url(../images/nav_how.png);
	width: 152px;
}

#header .nav a.sign {
	background: url(../images/nav_sign.png);
	width: 102px;
}

#header .nav a.account {
	background: url(../images/nav_account.png);
	width: 138px;
}

#header .nav a.forms{
	background: url(../images/nav_forms.png);
	width: 121px;
}

#footer .nav a {
	font-weight: bold;
	color: #0096D4; /* ------------- was #c5793 --------------*/
	text-decoration: none;
	margin: 0 0.5em;
}

#footer .nav a:hover {
	color: #FFFFFF; /* ------------- WAS #4eace3 ------------- */
}

/* Headers
--------------------------------------- */

h1 {
	font-size: 2em;
	line-height: 1em;
	margin: 10px 0px;
	color: #000000; /* ------------ WAS #001d52 ----------*/ 
	}

h2, #extraCol h1 {
	font-size: 2em;
	line-height: 1em;
	margin: 1.125em 0 .375em;
	color: #001d52;
	}

h3, #extraCol h2 {
	font-size: 1.5em;
	line-height: 1em;
	margin: 1.5em 0 .5em;
	color: #001d52;
	}

h4, #extraCol h3, .feedburnerFeedBlock span.headline {
	font-size: 1.1667em;
	line-height: 1.286em;
	margin: 1.929em 0 0.643em;
	color: #333;
	}

h5, #extraCol h4 {
	font-size: 1em;
	line-height: 1.5em;
	margin: 2.25em 0 0.75em;
	font-weight: bold;
	color: #333;
	}

h6, #extraCol h5 {
	font-size: 1em;
	line-height: 1.2857em;
	margin: 2.25em 0 0;
	font-weight: bold;
	color: #333;
}

.home #h1, .home h2, .home h3, .home h4, .home h5, .home h6 {
	font-size: 1.41667em !important;
	color: #FFF !important;
	font-weight: bold !important;
	margin: 0.5em -1em 1em 0 !important;
	padding: 0;
	line-height: 1.1764em;
}

#logInForm h1, #logInForm h2, #logInForm h3, #logInForm h4, #logInForm h5, #logInForm h6 {
	color: #FFF;
}

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

#header h1 {
	margin: 0 0 0 -12px !important;
	background: url(../images/miletracker_logo.png);
	width: 326px;
        height: 70px;
	text-indent: -9999em;
}

#header h1 a {
	height: 126px;
	display: block;
	text-decoration: none;
}

#ribbon {
	background: url(../images/version2.png);
	text-indent: -9999em;
	position: absolute;
	right: 0;
	top: 0;
	width: 124px;
	height: 106px;
	display: none; /* activate when 2.0 features launch */
}

.home #feature {
	height: auto !important;
	height: 332px;
	min-height: 332px;
}

.home #mainCol p, .home #subCol p, .home #extraCol p {clear: both;}

.home h2 img {vertical-align: text-top;}

.error {
	background: #f3e09e url(../images/alert.png) no-repeat 0.25em 0.5em;
	border: 1px solid #f39b2f;
	color: #4C4C4C; /* ----- was #00163f -----*/
	padding: 0.5em 0.5em 0.5em 22px;
	margin: 1em 0;
}

.feedburnerFeedBlock ul {margin: 0 0 1.5em 0; padding: 0;}
.feedburnerFeedBlock li {
	list-style: none;
	margin: 0 0 1.5em 0;
	padding: 0;
}

.feedburnerFeedBlock p.date {
	color: #999;
	margin: 0;
}

.bordered {border: 1px solid #CCC;}

/* Login drawer
--------------------------------------- */

#promo {	
	color: #0096D4; /*------- was #35c6f9 ---------*/
	font-size: 1.0833em;
}

#promo .contents {
	text-align: right;
	padding: 0.5em;	
	}

#promo p {
	padding: 0 1em;
	margin: 0;
}

#promo a {color: #FFF;}
#promo a:hover {color: #0096D4;} /*------- was #33cce7 ---------*/ 

#logInForm {	
	color: #0096D4;         /* ---- was # 13a6ea ----*/
	background: #4C4C4C url(../images/login_tile.gif) repeat-x left bottom;  /* ----- was #00163f -----*/
	display: block;
	padding: 0.5em 0 1.5em 25em;
	display: none;
}
#logInForm a {color: #C9C9C9;} /* -----------was #8cddf9 -----------*/
#logInForm a:hover {color: #FFF;}

#logInForm .L {
	width: 23em;
	float: left;
	display: inline;
	padding: 0 0 0 4.5em;
	background: url(../images/selected_48.png) no-repeat left 2em;
}

#logInForm .R {
	width: 25em;
	float: left;
	display: inline;
	padding: 2.5em 0 0 0;
}

#logInForm .R label {display: block;}
#logInForm .R p {margin: 0 0 0.5em;}
#logInForm .R input {padding: 0.125em 0.25em; font-size: 1.0833em; color: #002968;}

#logInForm .fbButton {
	width: 86px;
	display: block;
	padding: 34px 0 0 0;
	overflow: hidden;
	border: none;
	height: 34px;;
	background: url(../images/btn_sign-in.png) no-repeat;
	margin-bottom: 1em;
}

#logInForm .fbButton:hover {background-position: left -34px;}
#logInForm .R .small {white-space: nowrap;}
#logInForm .R .small:hover {color: #FFF;}


/* Feature carousel
--------------------------------------- */

#mySlides {
	overflow: hidden;
	width: 856px;
	height: 255px
	}

#mySlides .slide {
	color: #4C4C4C;  /* ---------- WAS #b5e5f7 ------------- */
	padding: 25px 30px 25px 38px;
	font-size: 1.25em;
	line-height: 1.333em;
}

#mySlides .slide h2 {
	font-size: 2.1333em !important;
	margin: 0.75em 0 0.5em 0 !important;
	width: 350px;
}

#mySlides .slide p {width: 350px;}

#feature .nav {
	background: #000000; /* --------- WAS #00123C -------------*/
	font-size: 1.41667em;
	color: #D43F00; /* --------- WAS #13a6ea -------------*/
	height: 44px;
	position: relative;
	padding-left: 30px;
}

#feature .nav a {
	color: #D43F00; /* --------- WAS #13a6ea -------------*/
	float: left;
	height: 58px;
	line-height: 58px;
	margin-top: -7px;
	margin-right: 1em;
	padding-left: 62px;
}

#feature .nav .one a {background: url(../images/one.png) no-repeat left top;}
#feature .nav .two a {background: url(../images/two.png) no-repeat left top;}
#feature .nav .three a {background: url(../images/three.png) no-repeat left top;}

#feature .nav a:hover, #feature .nav a.jFlowSelected {
	color: #FFF;
	text-decoration: none;
	background-position: left -58px;
}
#feature .nav .hide {display: none;}

/* Form builder admin
--------------------------------------- */

h2 img.left {margin: 0 0.25em 0 0;}

ul.manageForms {margin: 0; padding: 0;}

ul.manageForms li {
	display: inline;	
	list-style: none;
	padding: 0;
	margin: 0 1em 0 0;
}

ul.manageForms a img {
	vertical-align: middle;
}

.listItem h3 {
	padding: 0.75em 24px;
	clear: both;
	margin-top: 0;
	background: #0c5793;
	color: #FFF;
	margin: -12px -18px 12px;
	font-size: 1.1667em;
}

.listItem {
	padding: 12px 18px;
	background: #e7f7fc;
	margin-bottom: 1.5em;
}

.linklist {
	margin: 0 0 1.5em 0;
	padding: 0;
}
.linklist li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.linklist a {
	display: block;
	color: #333;
	font-weight: normal;
	padding: 1em 18px;
}

.linklist img {vertical-align: text-top;}
.linklist a strong {font-weight: bold; color: #0c5793;}
.linklist a:hover strong {text-decoration: underline; color: #35c6f9;}
.linklist a:hover {text-decoration: none;}
.linklist .selected {background: #FFF; margin-left: -30px; padding-left: 48px;}

.instructions {
	padding: 1px 1.5em 1.5em;
	border-top: 0.25em solid #002c67;
	background: #EEE;
}

.well{
	padding: 1em 1.5em 1.5em;
	border-top: 0.25em solid #002c67;
	background: #e3f7fd;
	margin-bottom: 1.5em;
	width: 92%;
}

.well .L {
	float: left;
	width: 18em;
	margin-right: 2em;
}

div.code, div.invite {margin-bottom: 1.5em;}
div.code textarea {font: 1.25em 'andale mono', 'lucida console', monospace; line-height: 1.5; padding: 0.5em 0;}

table.gvEntries {
	background: #FFF;
	border: 2px solid #0c5793;
	margin: 0;
	width: 100%;
}

table.gvEntries td {
	padding: 0.25em 0.5em;
	font-size: 0.9167em;
	border: 1px solid #EEE;
}

table.gvEntries th {
	font-weight: bold;
	text-align: left;
	background: #0c5793;
	color: #FFF;
	padding: 0.45em 0.65em;
	font-size: 0.9167em;
	border: 1px solid #178cc1;
}

.pnlPager {
	display: block;
	background: #0c5793;
	padding: 0.5em 1em;
	margin-bottom: 1.5em;
	color: #FFF;
}

.pnlPager a {color: #FFF;}

.pnlPageTitle {float: left; padding: 0 1em 0 0; color: #FFF;}

.fbButton {
	padding: 0.4em 0.8em;
	font-size: 1.1em;
	text-decoration: none !important;
	color: #FFF !important;
	overflow: hidden;
	text-align: center;
	background: #B9B9B9;
	border: 1px solid #CCC;
	border-right-color: #999;
	border-bottom-color: #999;
	text-align: center;
}

.fbButton:hover {
	background: #9BC191;
	border-color: #ACD1A7;
	border-right-color: #76A965;
	border-bottom-color: #76A965;
	color: #FFF !important;
	}

.fbButton.cancel:hover {
	background: #DF8A8A;
	border-color: #E7B0AD;
	border-right-color: #C25454;
	border-bottom-color: #C25454;
	color: #FFF !important; 
}

/*label {display: block;}*/

span.highlight {
	background: #e3f7fd;
	padding: 2px;
}

.key {
	background: #e3f7fd;
	padding: 1em 1.5em;
	border: 1px solid #86e0fd;
}

.key h3 {margin-top: 0;}

/* Account/Packages
--------------------------------------- */
 
.packages {
	margin: 0 0 1.5em;
	border: 3px solid #CCC;
}
	
.package {
	float: left;
	width: 126px;	
	}

.packageItem {
	vertical-align: middle;
	padding: 0.5em 5px;
	width: 115px;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	text-align: center;
	}
	
.rowHeader {
	background: #FFF;
	font-weight: bold;
	text-align: left;
	text-indent: 1.5em;
	}

.rowHeader img {
	vertical-align: text-top;
}
 
.rowHeader a {
	font-weight: bold;
	text-decoration: underline;
	}
	
.colHeader {
	height: auto !important;
	height: 110px;
	min-height: 110px;
	text-align: center;
	background: #e3f7fd;
	}

.colHeader strong {
	font-size: 1.5em;
	color: #333;
	line-height: 1.5em;
	font-weight: bold;
}

.colHeader .price {	font-size: 1.25em; text-transform: capitalize;} 
.packageSelected {background: #002c67 url(../images/selected_48.png) no-repeat center 5em; color: #FFF;}
.packageSelected strong {color: #FFF;}
.packageSelected .price {color: #35c6f9; text-transform: capitalize;}
.selectedItem {} 
.selectable {cursor: pointer;}
.packageItem.rowHeader.colHeader {background: #FFF;}

a.signUpBtn, a.changeBtn  {
	width: 87px;
	text-indent: 9999em;
	overflow: hidden;
	text-decoration: none;
	background: url(../images/btn_sign-up.png) no-repeat left top;
	padding-top: 34px;
	height: 0px !important;
	height: 34px;
	margin: 1em auto;
	display: block;
}

* html a.signUpBtn, * html a.changeBtn {
	height: 0;
	cursor: hand;
}

a.changeBtn {
	background-image: url(../images/btn_change.png);
}
 
a.signUpBtn:hover, a.changeBtn:hover {background-position: left -34px;}	

a#videoDemo {
	width: 216px;
	text-indent: 9999em;
	overflow: hidden;
	text-decoration: none;
	background: url(../images/video_demo.png) no-repeat left top;
	padding-top: 39px;
	height: 0px !important;
	height: 39px;
	margin: 1em auto;
	display: block;
}

* html a#videoDemo {
	height: 0;
	cursor: hand;
}

a#videoDemo:hover {background-position: left -39px;}	
	
/* Clearing
--------------------------------------- */

.clearfix:after, #container:after, #frame:after, .contents:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix, #container, #frame {display: inline-block;}
* html .clearfix, * html #container, * html #frame {height: 1%;}
.clearfix #container, #frame {display: block;}
.clear { clear:both; }



#login2 {
	position: absolute;
	text-align: right;
	top: 112px;
	right: 12px;
}

#login2 a:link, #login2 a:active, #login2 a:visited {
	color: #888;
}