/* Global styles, font settings */

body {
  padding:0px;
  margin:0px;
  background-color:#999999;
  background-image:url(/images/autopage_background.gif);
  background-repeat:repeat-x;
}

body, table {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

img { padding:0px; margin:0px; border:0px; }

/* Headers */

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  margin-left:40px;
  padding-bottom:3px;
  padding-top:0px;
  /*border-bottom:solid 1px black;*/
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  margin-left:40px;
  padding-bottom:3px;
  border-bottom:solid 1px black;  
}

h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin-top: 0.38em;
  margin-bottom: 0.55em;
  font-weight: bold;
}

/* ------- General styles ------- */
#error,
.error {
  color: #dd0000;
  font-weight: bold;
  text-align: left;
  padding-bottom: 0.5em;
}

#notice,
.notice {
  color: #00dd00;
  font-weight: bold;
  text-align: left;
  padding-bottom: 0.5em;
}

#noResults {
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.clear {
  clear: both;
}

/* Outer wrapping divs */

div.contentWrapper {
  text-align:center;
  padding-top:30px;
  padding-bottom:8px;
}

div.contentSelector {
  width:775px;  
  margin-left:auto;
  margin-right:auto;
}

div.contentMainFrame {
  background-color:#fff;
  border:solid 2px black;
  width:771px;
  text-align:left;
  padding-bottom: 2em;
}

div.contentMainFrame.promotion,
div.contentSelector.promotion {
  width: 900px;
}


#header {
  background-color:black;
  background-image:url(/images/autopage_logo.png);
  height:78px;
  text-align:right;  
}

#dealer_header {
  background-image:url(/images/autopage_logo_dealer.png);
  background-color:black;
  height:78px;
  text-align:right;  
}

#headernav {
  float:right;
  background-image:url(/images/autopage_header_bg.jpg);  
  color:white;
  height: 23px; 
  padding-right:14px;
  padding-top:4px;
}

#headernav a {
  margin: 7px;
  color: white;
  font-weight: bold;
  text-decoration: none;
}

#headernav a:hover {
  color:#c9c9c9;
}

#headernavcap {
  float:right;
  width:17px;
  height:27px;  
  background-image:url(/images/autopage_header_cap.jpg);
}

#mainContent {
  padding-left: 4em;
  /* TODO: Clean up the CSS so this makes sense. */
  /* padding-right: 4em; */
}

/**
 * Fall Promotion Styles
 */
.promotion .big {
  font-size: 48px;
  font-weight: bold;
}

.promotion .medium {
  font-size: 32px;
  font-weight: bold;
}

.promotion .small-med {
  font-size: 26px;
  font-weight: bold;
}

.promotion .small {
  font-size: 18px;
  font-weight: bold;
}

.promotion .blue {
  color: #006699;
}

.promotion table {
}

.promotion table td {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

/* Mini-navbar (outside the main frame, support, FAQ, login/out) */

div.mininav {
  text-align:right;
  padding-right:10px;
  padding-bottom:4px;
  font-size:80%;
  color: #fff;
}

div.mininav a {
  color:#cccccc; text-decoration:none; 
  margin-left:10px;
}
div.mininav a:hover {
  color:white;
}

div.navbar {
  background-color:#fff;  
  float:right;
  width:450px;
  height:32px;  
}

div.navbar div {
  float:right;
  padding-top:5px;
}

div.navbar span {  
  height:30px;
  background-image:url(/images/navbar_gradient1.gif);
  background-repeat:no-repeat;
  width:1px;
  padding-top:23px;
}

div.navbar a {  
  display:block;
  float:left;
  height:26px;
  color:#dddddd;
  text-align:center;
  text-decoration:none;
  padding-top:10px;
  background-image:url(/images/navbar_gradient1.gif);
  padding-left:15px;
  padding-right:15px;  
}

div.navbar a:hover {
  background-image:url(/images/navbar_gradient2.gif);
  color:#ffffff;
}

div.navbar a.highlighted {
  background-image:url(/images/navbar_gradient2.gif);
  color:#ffffff;
  font-weight:bold;
}

/* iPhone link */
#iphone_link {
  position: absolute;
  right: 8px;
  bottom: 0px;
  font-size: 12pt;
  text-align: right;
  height: 70px;
}

#iphone_link a {
  text-decoration: none;
}

#iphone_link img {
  vertical-align: middle;
}

/* Section div classes */

div.splash {
  margin-bottom:1em;
}

div.section {
  width:665px;  
  margin-bottom: 1.5em;
  border:solid 1px black;  
  text-align:left;  
}

div.sectionHeader {
  border-bottom:solid 1px black;
  /* background-color:#2f6ecc; */
  background-image: url(/images/autopage_header_bg.jpg);
  background-position:center right;
  padding:2px 5px 2px 20px;
  font-size:110%;
  font-weight:bold;
  color:#fff;  
}

div.sectionLeft {
  float:left; 
  width:350px; 
  padding-left:30px;
  margin-top:20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

div.sectionRight {
  float:right; 
  width:250px; 
  text-align:right;
  margin-right:30px;
  margin-bottom: 10px;
  padding-top: 1em;
  padding-bottom: 1em;
}

div.sectionFull {
  width: 560px;
  text-align: left;
  margin-right: 30px;
  margin-left: 50px;
  margin-bottom: 1em;
}

div.sectionFooter {
  border-top:solid 1px #666666;
  background-color:#dddddd;
  padding:1px;
  color:black;
}

#addButton {
  text-align: right;
  padding-right: 5em; 
}

/* ------- Other styles ------- */
div.smallHeader {
  font-size: 14px;
  font-weight: bold;
  font-variant: small-caps;
}

.detailKey {
  width: 50%;
  font-size: 12px;
  color: #0000AA;
}

.detailValue {
  width: 50%;
  font-size: 12px;
}

.inactive {
  font-weight: bold;
  color: red;
}

div.payRadio {
  font-weight: bold;
}

div.payDescription {
  margin-left: 2em;
}

div.details table {
  margin-left: 1em; 
}

div.details table td {
  padding-top: 4px;
}

div.information {
  margin-top: 1em;
}

div.infoIcon {
  float: left;
  margin-top: -10px;
  margin-left: -50px;
}

div#logControl {
  padding-bottom: 1em;
  padding-top: 1em;
}

div.controlInfo {
  padding-bottom: 1em;
  padding-top: 1em;
}

div.controlInfo table td {
  font-size: 90%; 
}

div.controlInfo div.car {
  margin-left: 1em;
}

div.controlInfo div.log,
div.controlInfo div.phone {
  margin-left: 1em;
}

div.controlInfo div.log {
  font-size: 80%;
}

div.buttons {
  float: right;
  text-align: right;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

div.verticalButtons {
  text-align: right;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

div.cancelSubscription {
  float: left;
  text-align: right;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

div.extraInfo {
  font-size: 10px;
  margin-top: -1em;
  margin-bottom: 0.5em;
  margin-left: 1em;
}

#welcomeNoticeBox {
  padding: 1em;
  position: absolute;
  left: 330px;
  width: 300px;
  border: 1px solid black;
  background-color: white;
}

/* Our generic "button" link style */

a {
  color: #1d4583;  
}

a:hover {
  color: #386db7;
}

a.button {
  border: 1px solid #9cb6db;
  padding: 3px 24px 3px 4px;
  color: #386db7;  
  font-weight: bold;
  text-decoration: none;
  background: white url(/images/button_arrow1.gif) center right no-repeat;
  margin-bottom: 10px;
  margin-top: 10px;
}

a.button:hover {
  background-color:#eeeeee;
  border:solid 1px #386db7;
  background-image:url(/images/button_arrow2.gif);
}

a.backButton {
  border:solid 1px #9cb6db;
  padding:2px 4px 2px 24px;
  color:#386db7;  
  font-weight:bold;
  text-decoration:none;
  background-color:white;
  background-image:url(/images/left_button_arrow1.gif);  
  background-position:center left;
  background-repeat:no-repeat;  
  margin-bottom:10px;
  margin-top:10px;
}

a.backButton:hover {
  background-color:#eeeeee;
  border:solid 1px #386db7;
  background-image:url(/images/left_button_arrow2.gif);
}

/* Phone Wizard Selection */

ul.phonewizard li {
  margin-top:7px;
  margin-bottom:7px;
  list-style-type: none;
}

ul.phonewizard li a {
  color:#4f3f3f;
  border:solid 1px #bfbfbf;
  padding:2px 24px 2px 4px;
  background-color:#f3f3f3;
  text-decoration:none;
  width:190px;
  display:block;
}

ul.phonewizard li a:hover {
  border:solid 1px #8f8f9f;
  background-color:#e9e9e9;
  color:black;
}

ul.phonewizard .phone_model_thumbnail {
  position: absolute;
  background-color:white;
  border:solid 1px #bfbfbf;
  padding: 10px;
  margin-left: 225px;
  margin-top: -22px;
}

a.simple {
  text-decoration:none;
  color: #1d4583;
}

a.simple:hover {
  text-decoration:underline;
  color: black;
}

div#phonewizardFloat {
  float:right;
}

div#phonewizardBreadcrumbs {
  margin-left:10px;
  padding-left:5px;
  border-left:solid 1px black;
  width:140px;
  margin-bottom:2em;
}

div#phonewizardBreadcrumbs div {
  padding-left:3px;
}

div#phonewizardProgress {
  margin-right:20px;
}

div#phonewizardPartial {
  margin-right:10em;
}

/* Subscription help info class */
.largeHelp {
  position:absolute;
  border:dashed 1px black;
  background-color:#f5ff84;
  padding:4px;
  width:400px;
}

#nextel_step1_div, #nextel_step2_div, #nextel_step3_div {
  border:solid 1px black;
  margin:5px;margin-left:0px;
  padding:4px;padding-right:15px;
}

/* ------- Rails Error box formatting ------- */
.noticeBox,#noticeBox{width: 600px;margin-bottom:5px;padding:5px 16px 4px 50px;border:1px solid #DFDEDE;background: url(/images/success.gif) no-repeat 10px center #F0FAE3;font-size:14pt;line-height:30px;color:#393939}
.errorBox,#errorBox{width: 600px;margin-bottom:5px;padding:5px 16px 4px 50px;border:1px solid #DFDEDE;background: url(/images/error.gif) no-repeat 10px center #FFF1EA;font-size:14pt;line-height:30px;color:#393939}
.warningBox,#warningBox{width: 600px;margin-bottom:5px;padding:5px 16px 4px 50px;border:1px solid #DFDEDE;background: url(/images/warning.gif) no-repeat 10px center #FFF1EA;font-size:14pt;line-height:30px;color:#393939}


div.formError {
  font-size: 12px;
  color: red;
}

div.fieldWithErrors input {
  border: 2px solid red;
}

/* Support */

div.support h2 {
  border-bottom:none;
  margin-left:0px;
}

div.support li {
  padding-top: 5px; padding-bottom: 5px;
}

/** Setup */
#congratulations {
  padding-right: 60px;
}

#congratulations dl {
  padding-left: 3em;
}

#congratulations dl dt {
  font-weight: bold;
}

#congratulations dl dd {
  margin-top: 1em;
  margin-bottom: 1em;
}

/** Welcome page */
#welcome_page {
  position: relative;
}

#welcome_page #welcome_splash {
  float: left;
  width: 223px;
} 

#welcome_page #login_form {
  padding-top: 0.5em;
}

#mapWrapper {
  padding: 0;
  margin: 0;
}

#map {
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  border: 1px solid black;
  height: 400px;
  width: 465px;
} 

#locationsWrapper {
  float: left;
  margin-top: 5px;
  padding-left: 1em;
  overflow: auto;
  height: 400px;
  width: 175px;
}

#locations img {
  vertical-align: middle;
} 

#timer {
  text-align: center;
  font-weight: bold;
  margin-top: 1em;
}

#timer img {
  vertical-align: middle;
}

#timeForm {
  margin-left: 5em;
  margin-top: 2em;
}

#phonesList,
#settingsForm,
#emailsList {
  margin-left: 2em; 
}

#phonesList p {
  margin-left: -2em;
} 

#emailsList {
  margin-top: -1em;
}

#emailsList a {
  text-decoration:none;
}

#emailsList p {
  margin-left: -2em;
}

#settingsForm select {
  margin-left: 0.5em;
}

#twelveHour,
#oneHour {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

.locationSearch {
  border: solid 1px #9cb6db;
}

.locationSearch .header {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.5em;
  background-color: white;
  background-image: url(/images/button_arrow1.gif);  
  background-position: center right;
  background-repeat: no-repeat;  
}

.locationSearch .header.hover {
  background-color:#eeeeee;
  border:solid 1px #386db7;
  background-image:url(/images/button_arrow2.gif);
}

.locationSearch .header {
  cursor: pointer;
  color: #386db7;  
  font-weight: bold;
  text-decoration: none;
}

.locationSearch .internal {
  border-top: 1px solid #9cb6db;
  padding: 1em;
}

.location {

}

.location .speed {
  margin-left: 3em;
}

#paymentPlans {
  margin-left: 3em;
}

#paymentWarning {
  width: 60%;
  margin: auto;
  text-align: center;
  padding-left: 35px;
  font-weight: bold;
  font-size: 0.9em;
  background: url(/images/warning.gif) no-repeat top left;
  padding-bottom: 10px;
}

#ccImages {
  vertical-align: top;
  margin: 0.5em;
  margin-bottom: 1em;
}

/***********/
/** Dealer */
/***********/
#features_list {
  padding-left: 30px;
}

#features_list .features {
  padding-left: 15px;
}

.auxChannels {
  margin-left: 2em;  
  margin-bottom: 1em;
}

/*********************/
/** New User Wizard **/
/*********************/
#wizard_steps .wizard_step {
  background-repeat:no-repeat;
  border:1px solid black;
  color:#777777;
  margin-bottom:10px;
  margin-right: 4em;
  padding:5px 5px 5px 70px;
  height: 5em;
}

#wizard_steps .step_1 {
  background-image: url(/images/wizard_step_1.png);
}

#wizard_steps .step_2 {
  background-image: url(/images/wizard_step_2.png);
}

#wizard_steps .step_3 {
  background-image: url(/images/wizard_step_3.png);
}

#wizard_steps .complete {
  background-image: url(/images/wizard_check.png);
}

#wizard_steps .current {
  color: black;
}

#wizard_steps .wizard_step .title {
  font-weight: bold;
  margin-bottom: 1em;
}

#wizard_steps .wizard_step .description {
  
}

/**
 * User Car Tester Tool
 */
.testProgress,
.testResults {
  margin-top: 3em;
}

.testResults .error,
.testResults {
  text-align: right;
}

/**
 * Redbox
 **/
.popupWarning {
  width: 500px;
  background-color: white;
  border: 1px solid black;
}

.popupWarning .info {
  margin: 2em;
}

#promotion {
  text-align: center;
}

/**
 * Payments
 */
.payment {
  margin: 1em;
}

.payment .header {
  font-weight: bold;
  font-size: 120%;
}

.payment table {
  margin-left: 2em;
}

.payment td.key {
  text-align: right;
  padding-right: 1em;
}

#promoCode {
  margin-left: 2em;
}

.faqLink {
  font-size: 80%;
  margin: 0.5em;
  margin-left: 3em;
}

/* Admin */

div.support h2 {
  border-bottom:none;
  margin-left:0px;
}

div.support li {
  padding-top: 5px; padding-bottom: 5px;
}


div.sectionHeaderBad,
div.sectionHeaderGood {
  border-bottom:solid 1px black;
  background-repeat:no-repeat;
  background-position:center right;
  padding:2px 5px 2px 20px;
  font-size:110%;
  font-weight:bold;
  color:#fff;  
}

div.sectionHeaderGood {
  background-color: green;
}

div.sectionHeaderBad {
  background-color: red;
}

#account_history {
  margin-right: 2em;
  overflow: auto;
}

#admin_notice {
  font-weight: bold;
  font-size: 120%;
  margin: 2em;
}

.instructions {
  margin: 2em;
}

.dealer {
  font-weight: bold;
}

.dealer .commands {
  font-size: 80%;
}

.dealer .name {
}

div.big_red_box {
  background-color: #FDD;
  color: #F00;
  border: 2px solid #F00;
  font-size: 10pt;
  padding: 12px;
  margin: 2em 64px 2em 0;
}

div.dealer_message {
  background-color: #DDF;
  border: 2px solid #00F;
  color: #00F;
  font-size: 10pt;
  padding: 12px;
  margin: 2em 2em 2em 0;
}

div.green_success_box {
  background-color: #AFA;
  border: 2px solid #3A3;
  color: #363;
  font-size: 10pt;
  padding: 12px;
  margin: 1em 1em 1em 0;
}

/*
 Testing tool GPS signal strength bar
 */
#signal_bar td {
  border-right: 1px solid black;
}

#signal_bar table {
  border: 1px solid black;
  border-right: none;
  border-collapse: collapse;
}

/**
 * Subscription form styles
 */
.form {
  margin-top: 1em;
  margin-bottom: 1em;
}

.form dl {

}

.form dt {
  float: left;
  width: 30%;
  padding-bottom: 1em;
  padding-right: 1em;
  text-align: right;
  clear: both;
}

.form dd {
  padding-bottom: 1em;
  margin-left: 11em;
}


/*
--------------------------------------------------------------------------------
What:	"Oranges in the sky" Styles(Table data design)
Who:	Krasimir Makaveev(krasi [at] makaveev [dot] com)
When:	15.09.2005(created)

only slightly modified
--------------------------------------------------------------------------------
*/

table.styled {
	border-collapse: collapse;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc; 
	color: #333;

}

table.styled thead tr th {
	background: #e2e2e2;

}

table.styled td, 
table.styled th {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	line-height: 1.8em;
	font-size: 0.8em;
	vertical-align: top;
}

table.styled tr.odd th, 
table.styled tr.odd td {
	background: #efefef;
}