/*
'//////////////////////////////////////
'// FILE: /include/css/newMoz2.css
'// DESC: mobile zone styles
'// $Revision: 3$
'// $Date: 10/31/2007 4:51:51 PM$
'// $Author: Richard Travis Davis$
'//////////////////////////////////////
*/
/* BEGIN BASICS */
body {
  margin:0;
  padding:0;
  color: #8c8c8c;
  background: #fff;
  font: x-small/1.4em Arial, Helvetica, Sans-Serif;
  voice-family: "\"}\""; voice-family:inherit; 
font-size:small;
} html>body { font-size:small; 
line-height: 22px;
}

form, table, tr, td {
  margin: 0;
  padding: 0;
}
td {
  vertical-align: top;
}

.button  {
  border: 2px outset #ccc;
  border-top-width: 2px;
  border-left-width: 2px;
  background-color: #bf0000;
  font-weight: bold;
  font-size: .9em;
  padding: 1px;
  color: #fff;
}
a { color: #584b88; }
h3 { color: #584b88; margin: .4em; padding: 10px 0; padding-left: 0px;}
h4 { color: #584b88; text-transform: uppercase; padding-top: 4px; }

.featureHeading { 
    color: #584b88; 
    text-transform: uppercase; 
    padding-top: 4px; 
    font-weight: bold;
    font-size: 14px;
}
/* END BASICS */


/* ABL */

/* not an ideal class name, but some files that are being
   reused use it, so it seems safe */
.small { font-size: .9em; }
.red { color: #bf0000; }

.whiteLink { color: #fff }
.textbox {
    font-size: 11px; 
    background-color: #fff;
    border: 1px solid #584b88;
    padding: 2px;
    margin: 2px 0;
}

.formLeft {
    float: left;
    width: 110px;
    text-align: right;
    padding: 0 8px 0 0;
}
.formRight { 
    padding-bottom: 10px;  
    margin: 0; 
}
h2 { color: #000; font-size: 15px; margin: .4em; }

.whiteBox {
    background-color: #fff;
    border: 1px solid #584b88;
    padding: 5px;
}

.imageAlign {
    position: relative;
    top: 4px;
}

.bottomPadding {
    padding-bottom: 6px;
}

/* 
adds some extra padding to help pages 
and main login page. better for readability
*/
#loginContent div, #helpContent div {
  padding: 15px 3px 3px 3px;
}

#helpContent b { color: #584b88; font-size: 14px; }

.leftPadding30 {
    padding-left: 30px;
}

.margin3px { margin: 3px; }

.mobileText { 
    font-weight: bold; 
    color: #c5d24e; 
    font-size: 14px; 
}
.standout {
    font-size: 14px;
    font-weight: bold;
    color: #006;
}
/* /ABL */


#main {
  width: 760px; 
  margin: auto; 
}
#nav {
  float:left;
  background-color: #fff;
  width:85%; 
  font-size: 93%;
  line-height:normal;
}
#inviteFriendsNav a {
  float: right;
  line-height:normal;   
  font-size: 93%;
  font-size: 12px;
  color: #BF0000;
  vertical-align: bottom;
  margin: 16px 0 0 0px;   
}
#rightInviteFriendsIMG {
  float: right;
}
#footer {
  font-size: 10px;
  background-color: #fff;
}

ul.navList {
  margin:0;
  padding: 10px 0 0 0;
  list-style: none;
}
ul.navList li {
  display: inline;
  margin: 0;
  padding: 0;
}
#nav a {
  float:left;
  background:url("/images/mobile/tran_left.gif") no-repeat left top;
  background-color: #e7e7e7;
  margin: 0;
  padding: 0 0 0 9px;
  text-decoration: none;
}
#nav a span {
  float: left;
  display: block;
  background: url("/images/mobile/tran_right2.gif") no-repeat right top;
  padding: 5px 15px 4px 6px;
  font-weight: bold;
  color: #666666;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
  color:#bf0000;
}


/* stretch the active tab a little further down to give all the other tabs a gap */
#main.login #login a span, 
#main.rewardsCenter #rewardsCenter a span, 
#main.callLog #callLog a span, 
#main.myPhone #myPhone a span, 
#main.contacts #contacts a span, 
#main.txtMessages #txtMessages a span, 
#main.settings #settings a span, 
#main.accountInfo #accountInfo a span,
#main.help #help a span,
#main.fax #fax a span { padding-bottom: 7px; color:#bf0000; }



/* set the basic background color for the content and the active tab */
/*.MoZ, */

.login #login a, .rewardsCenter #rewardsCenter a,
.myPhone #myPhone a, .callLog #callLog a, 
.contacts #contacts a, 
.txtMessages #txtMessages a, .settings #settings a,
.accountInfo #accountInfo a, .help #help a,
.fax #fax a { background-color: #bf0000; }

/* TODO - still need to get rid of the stuff on the top left */
/*  actually it is OK to leave it with the transparent style, but we must remove it if the edge is stroked */
#logout a { background-color: #fff; margin-left: 20px; padding-top: 5px; }

#main.login #nav #login span, 
#main.rewardsCenter #nav #rewardsCenter span, 
#main.callLog #nav #callLog span,
#main.myPhone #nav #myPhone span,
#main.contacts #nav #contacts span,
#main.txtMessages #nav #txtMessages span,
#main.settings #nav #settings span,
#main.accountInfo #nav #accountInfo span,
#main.help #nav #help span,
#main.fax #nav #fax span { color: #fff; }


.confirmationMsg { color: #bf0000; }
.callLog .confirmationMsg { color: #222; } /* not yellow since callLog is a short-bus orange */

/* round the TL corner */ 
#contentWrap {
  clear: both;
  background: url("/images/mobile/tran_left.gif") no-repeat left top; 
/* no longer rounding corner of content */
  background: url();
  border: 1px solid red;
  border: 0px;
}
/* round the TR corner */ 
#content {
  background:url("/images/mobile/tran_right0.gif") no-repeat right top;
  padding: 5px;  /* just playing with this... not ready */
  background: url(); /* no more rounding here */
  padding: 0px;
}
/* The first tab's content does not get a rounded corner */
/* first table doesn't matter any more since they all get the same treatment */
/*
#contentWrap.firstTab { background-position: left -10px; }
*/

/* round the bottom corners too */
/* TODO - No longer needed? */
#bottomWrap {
  clear: both;
  background: url("/images/mobile/tran_left_bottom.gif") no-repeat left bottom;
  background: url();
}
#bottom {
  background:url("/images/mobile/tran_right0_bottom.gif") no-repeat right bottom;
  height: 10px;
  background: url();
}

img { border: 0; }


/*  ----------- from intranet divLayout.css ------ */
.infoBlob {
  margin-bottom: 5px;
  display: block;
  font-weight: normal;
  border: 0;
}

.header { height: 30px; }
.infoBlob .header {
  font-size: 14px; 
  display: block;
  font-weight: bold;
  color: #584b88;
  padding: 3px;
}
.infoBlob .title {
/*  float: left; */
/*  border: 1px solid;
 text-transform: uppercase; */
 font-size: 24px;
 font-weight: normal; 
}

.infoBlob .bonusTitle {
    font-size: 18px;
    font-weight: normal; 
}

.crm { border: 2px solid #6b6b6b; color: #000; }
.infoBlob .crm {
 padding-top: 5px;
 background-color: #fff;
}

.blob .title {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.blob .copy {
  padding: 0 0 0 20px;
}
.handyStuff {
    float: right;
    text-align: right;
    position: relative;
    right: 0;
    font-size: 12px; 
}

.handyStuff a {
    font-size: 12px;
    font-weight: normal;
}
.infoBlob.blueWhite {
  border-color: #584b88;
}

.infoBlob.greenWhite {
  border-color: #427b7b;
}

.infoBlob.blueWhite .header {
  background-color: #fff;
  color: #584b88;
}

.infoBlob.greenWhite .header {
  background-color: #427b7b;
  color: #fff;
}

.infoBlob.blueWhite .blobs {
  background-color: #fff;
  color: #000;
}

.infoBlob.greenWhite .blobs {
  background-color: #fff;
  color: #000;
}

.infoBlob.white .blobs {
  background-color: #fff;
  color: #000;
}


.blobs { }
.stroked { border: 0px solid #000; }

.blobs table { padding: 0; }
.blob { padding: 3px; }
.blob.nopadding { padding: 0; }
.bolts {
    width: 205px;
    float: right;
}
.nuts { width: 100%; }
.nutsAndBolts { /* nuts and bolts... yeah not really that funny or even that cute.  change the names */
  float: none;
  width: 540px;
}

.bolts .infoBlob ,
.nuts .infoBlob { margin-bottom: 10px; }

.left  { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

#banner {
    margin: 0;
    padding: 0;
    background: url(/images/mobile/MoZ_headLogo2.gif) left top no-repeat;
    background-color: #fff;
    height: 41px;
    padding-bottom: 10px;
    margin-top: 20px;
}

#banner_beta {
    margin: 0;
    padding: 0;
    background: url(/images/MoZ_headLogo5_beta.gif) left top no-repeat;
    background-color: #fff;
    height: 41px;
    padding-bottom: 10px;
    margin-top: 20px;
}

#banner_sms_beta {
    margin: 0;
    padding: 0;
    background: url(/images/MoZ_headLogo_sms.gif) left top no-repeat;
    background-color: #fff;
    height: 41px;
    padding-bottom: 10px;
    margin-top: 20px;
}

#banner a img {
  height: 100%;
  width: 50%;
  margin-top: -20px;  
}
/* Not sure why this needs to have different margins that 'banner'.
They should be exactly the same. */
#banner_beta a img {
  height: 100%;
  width: 50%;
}

.mozInfo {
    width: 100%;
}

td { padding: 0 3px; }

table {
  width: 100%;
  border-spacing: 0;
  border: 0;
}

table.autoWidth { width: auto; }

table.mozInfo tbody td { padding: 3px; }
table.mozInfo thead {
  background-color: #fff;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid #666;
}

table.mozInfo thead tr { margin-bottom: 5px; }
table.mozInfo thead tr td { border-bottom: 1px solid #666; }

/*table.mozInfo .altColor { */
.altColor { background-color: #e7e7e7; }

.greenWhite .altColor { background-color: #e7e7e7; }

.settings .border { 
    /*background-color: #e7e7e7;*/
    border-bottom: 1px solid #666;
    padding: 10px 0;
}

#legend {
  padding-top: 20px;
  width: 200px;
}

#tipWrap { clear: both; }

.tip { padding-top: 2px; }

.tip .title { font-weight: bold; }

.tip .icon { float: left; }

/* disable and dotted lines under an acronym */
acronym { border: 0; }

.problemArea { background-color: #d44; }
.updatedArea { background-color: #6a6; }


/* ------- RTD --------------- */

  .heading {
    text-align: right;
  }
  .heading .title {
    font-size: 15px;
    font-weight: bold;
    float: left;
  }
  .label {
    float: left;
    font-weight: bold;
    font-size: 1em;
    padding-top: .2em;
  }
  .setting .value {
    float: left;
    padding-top: .2em;
  }
  .setting .modify {
    text-align: right;
  }
/* ------- /RTD -------------- */


/* Added for generic login pages and 4.0 User Guide */ 
.blueLine { border-top: 3px solid #86a7ba; } 

#loginBox { 
    width: 535px; 
    margin: 20px 0 10px 200px; 
    border: 4px solid #e7e7e7; 
} 

#loginContent { 
    padding: 15px 30px 10px 30px; 
    border: 0px solid green; 
} 
#logoPadding { 
    padding: 3px 30px 0 200px; 
    padding-bottom: 10px;
    margin-top: 20px;
}

#boxTitle { 
    color: #584b88; 
    font-size: 23px; 
    font-weight: bold; 
    padding: 5px 0; 
}

.imageIcon {
    position: relative;
    top: 3px;
}
.clear { clear: both; }


.bonusBorder {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 10px 0;
    margin: 10px 0;
    
}

#tabUnderline {
    width: 760px;
    background: url(/images/mobile/MoZ_red_tab_sliver_2.gif) top right no-repeat;
    height: 3px;
    
}

.legend { font-size: 15px; font-weight: bold; text-transform: uppercase; }


.subLinks { font-size: 11px; float: right; width: 400px; text-align: right; margin-right: 10px; line-height: 20px; }
.subLinks a { font-size: 11px; color: #8c8c8c; }
.extraSpace { padding: 10px 0; }

sup {
  font-size: 0.6em;
}