ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{
  margin: 0; padding: 0;
}

a img,:link img,:visited img { border: none; }

a:link, a:visited, .jlink
{
  text-decoration: none;
  font-style: normal;
 /*   color:#48609c;   pale blue, from designers */
  color: #180C78;  /* From original mobspin look */
}

a:hover, .jlink:hover
{
  text-decoration: underline;
}


body, td, textarea
{
  margin: 0;
  padding: 0;
  font-family: verdana;
  font-size: 9pt;
}

body
{
  text-align: left;
  background: url('../images/bg.jpg') no-repeat;
/*  background-color: #7997a2; */
  background-color: #e5e5e5;  
/*   background-color: #d4d4d4; */
/*  background-color: #314578; */
/* background-color: #00002E;  */
  background-attachment: fixed;
}


#splash
{
 margin-top: 60px;
 width: 411px;
 margin-bottom: 20px;
 border: 1px solid #d4d4d4;
 background-color: white;
 background-image: url('../images/mob_header_signin.png');
 background-repeat: no-repeat;

}

div#content-splash
{
 min-height: 300px;
 margin-left: 40px;
 margin-right: 40px;
}

/* 
Main div is the fixed-width "stuff" that sits over our background image (body)
It includes the header image at the top and a white background. 
It includes 3 sub-divs: header, main-content, and footer.
Main-content is rendered on top of some of the header image
*/

#main
{ 
  /* width + padding-left + padding-right should be 850, width of mob_header.png
   padding-left and padding-right essentially provide left and right margin
   to all the content of the page (including the menus and sign-in/sign-out jazz)
  */
  width: 730px;
  padding-left: 60px;  /* values here for left and right should match vals in #footer below */
  padding-right: 60px;
  margin-top: 25px;   /* val should match val in #subfooter below */

  text-align: left;
  background-color:white;
  background-image: url('../images/mob_header.png');
  background-repeat: no-repeat;
}

.headerFooterBar
{
  color: #888888;
}

#splash-footer
{
  background-color: #F6eddb;
  height: 23px;
  padding-top: 9px;
  width:100%;
}

#footer
{ 
  /* Get color to span entire div area, without using an image. */
  /* Same height as peach bar at top, which is 32 pixels. idea
     is that height + padding should equal 32, padding determines
     vertical alignment within the bar */
  /* Color matches the color of bar above too */
  background-color: #F6EDDB;
  height: 23px;
  margin-left: -60px;
  margin-right: -60px;
  padding-top: 9px;
}

.footerText, .footerText  
{
  font-family: arial,helvetica,sans-serif;
  font-size: 8pt;
  margin-left: 60px;
  margin-right: 60px;
}

.footerText :link, .footerText :visited
{
  color: #352BCE; /* Note same as headerTop */
}

#subfooter
{
  height: 25px;
}

#header
{
}

.headerTop, .headerTop :link, .headerTop :visited 
{
  color: #352BCE;  /* note same as footerText below */
  font-family: arial,helvetica,sans-serif;
  font-size: 11pt;
}

/*****
 * logolink div represents the clickable rectangle corresponding to
 * the "mobspin" word/logo within the header. If that word moves
 * or changes height, these coordinates need to be adjusted appropriately.
 * Turn on border to see.
 */
#logolink {
  margin-top: 10px;
  margin-left: 50px;
  width: 226px;
  height: 57px; /* technically probably 58, but going to 57 so bounding box
                   doesn't touch gray background of h1 image */
/*   border: 1px dashed #333; */
}

#splashlogovertoffset {
  height:50px;
  display:block;
}

#splashlogolink {
  width: 226px;
  height: 57px; /* technically probably 58, but going to 57 so bounding box
                   doesn't touch gray background of h1 image */
/*  border: 1px dashed #333;  */
}

/* This magic below turns entire div into a hyperlink.. see
   http://archivist.incutio.com/viewlist/css-discuss/35729
 */

#logolink a {
  display: block;
  width: 100%;
  height:100%;
}

#splashlogolink a {
  display: block;
  width: 100%;
  height:100%;
}

div#headerBottomLeft {
  margin-top: 24px;
  margin-left: 432px;
}


div#header img.fb 
{
  vertical-align: bottom;
}

div#content-main-nonIE
{
  min-height: 640px;
}

div#content-main-IE
{
  height: 640px;
}

div#intro-layout-main-nonIE
{
 /* should be same as signindiv below */
  min-height: 500px;
}

div#intro-layout-main-IE
{
  height: 500px;
}

.signdiv
{
 /* should be above value 125, for ie */
  height: 375px;
}

.big
{
 font-size:36px;
 font-family: arial,helvetica,sans-serif;
 font-weight: normal;
}

.signup
{
 font-size:24pt;
 font-family: arial,helvetica,sans-serif;
}

/* god this is tricky.. see message_message.php */
/* This stuff works on ALL browsers */
.detailMessageGeneric
{
  line-height:150%;
  vertical-align:top;
  min-height:50px;
  margin-right:5px;
}

/* This one required for Safari/Chrome */
.detailMessageNonIE
{
  display:block;
}

/* This one required for IE.. mmutually exclusive from one above */
.detailMessageIE
{
  display:inline;
}



h1
{
 /* The 22 provides a nice vertical delta beyond the last rendered element in the
    header (i.e., the mobspin logo). For text

    The 2px defines in part the distance to the matching hr for each h1.
    If that changes, the h1_imagehr offset below will likely need to change to make the hr
    continue to look like it's "under" the image...

    The vertical offset here must be closely cordinated with padding-top
    of h1_image to get alignment..
 */
  padding-top: 23px;
  padding-bottom: 2px;
  font-size: 18pt;
  font-weight: normal;
  font-family: arial,helvetica,sans-serif;
  color: black;
}

h1 span
{
  margin-left: 20px;
  font-size: 8pt;
  font-style: italic;
  font-weight: normal;
  font-family: verdana;
}

/* This assumes an 87 x 87 circle with no background being rendered
   in a way that overlaps 13 pixels of the header and is offset a bit to the left.
   (top 13 pixels of image should be aliased assuming a gray header background of
   e4e4e4
*/

.h1_image
{
 padding-top: 1px; /* how much space beyond last element -- logolink block in this case */
/* FS margin-top: -60px;*/
 margin-left: -22px;
 position: absolute;
}

/* for linking on top of the image... */
.h1_block
{ 
 /* our circles are 87 x 87 */
 width: 87px;
 height: 87px;
 z-index: 2; /* shows up over h1text */
 position: absolute;
}

.h1_block a
{ 
 width: 100%;
 height: 100%;
 display: block;
}
/* Here's the h1 text that is overlaid on top of the h1_image... */
.h1_imagetext
{
 /* Note: 52 + 626 + 52 = 730, the total body width from content_main... */
 margin-left:52px;
 width:626px;  /* could be 626 + 52 for no right border */
 z-index: 1; /* so h1 text text appears on top of image */
 position: absolute;
/* FS margin-top: -61px; /* 1 more than h1_image */
}

.h1_imagehr
{
 /* So the <hr> bar when used with h1 is offset a bit to make it look
    like it's "under" the h1image. This value would change if you adjust
    the distance between the bar and the
 */
 margin-left:10px;
}

/* Space after h1 text/hr before text */
.h1_imagevertspace
{
   height:88px; 
/*  FS height: 27px;  */
  display:block;
}

.h1_vertspace
{
  height:10px;
  display:block;
}

h2
{
  padding-top: 3px;
  padding-left: 4px;
  padding-bottom: 3px;
  padding-right: 4px; 

  /* These 4 must match h2style below */
  font-size: 11pt;
  font-weight: bold;
  font-family: arial,helvetica,sans-serif;
  color: #505050;

  margin-bottom:10px;
  border-bottom: 1px solid #d4d4d4;
  background-color: #F6eddb
}


.h2style {
  font-size: 11pt;
  font-weight: bold;
  font-family: arial,helvetica,sans-serif;
  color: #505050;
}

h3
{
  padding: 0px 2px 0px 0px;
  font-size: 12pt;
  font-weight: normal;
  font-family: arial,helvetica,sans-serif;
  margin-bottom:10px;
  color: black;
  border-bottom: 1px solid #d4d4d4;
}

h5
{
  padding: 0px 2px 0px 0px;
  font-size: 12pt;
  font-weight: normal;
  font-family: arial,helvetica,sans-serif;
  margin-bottom:10px;
  color: black;
  border-bottom: 1px solid #d4d4d4;
}


h4
{
  padding: 0px 2px 2px 0px;
  font-size: 12pt;
  font-weight: normal;
  font-family: arial,helvetica,sans-serif;
  margin-bottom:10px;
  color: black;
  /* border-bottom: 1px solid #CBC5FE; // #140A66; */  
  background-color: #E8E8E8;  /* #F2F2F2; */
}

.prodBizResults {
  height: 100px;
  width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.prodBizScroll {
  border-top:1px solid #d4d4d4;
  border-bottom:1px solid #d4d4d4;
}

.prodBizResultsPopup {
  height: 300px;
  width: 250px;
  overflow-x:hidden;
  overflow-y:auto;
}

  

hr
{
  background-color:white;
  border:none;
  height: 1px;
  border-top:solid 1px #d4d4d4;
  clear:both;
  padding-bottom:2px;
}

.main-border-left
{
  border-left: solid 1px #d4d4d4;
}
.main-border-home
{
/*  border-left: solid 1px #D0D0D0; */
}

.main-form.pad-top 
{
 margin-top: 15px;
}

.main-form th
{
 font-weight: bold;
 padding-right: 6px;
 padding-top: 4px;
 text-align: right;
 vertical-align: top;
 /* Following 2 lines essentially set min width to width */
 white-space: nowrap;
}

.main-form td
{
 margin-left: 0px;
 padding-left: 0px;
 text-align: left;
}

.main-form input.width5
{
 width: 250px;
}
.main-form input.width4
{
 width: 200px;
}
.main-form input.width3
{
 width: 150px;
}
.main-form input.width2
{
 width: 100px;
}
.main-form input.width1
{
 width: 50px;
}

.main-form th.two-line
{
 font-weight: bold;
 padding-right: 6px;
 padding-top: 0px;
 text-align: right;
 vertical-align: top;
}

.main-form th.two-line div
{
 font-weight: normal;
 font-style: italic;
 font-size: 8pt;
}

.small
{
  font-size: 8pt;
  font-weight: normal;
}

.normal
{ 
  font-family: verdana;
  font-size: 9pt;
}

.form_error
{ 
  font-size: 8pt;
  color: #BE0000;
}

.volumetip
{
  font-size: 8pt;
  font-style: italic;
  color: #140a66;
}

/**
 * briseno started adding the stuff below
**/
.msgError
{
 color: #BE0000;
}
.msgSuccess
{
  color:green;
}
.msgWarning
{
  color:#003EBA;
}


.msgFaint
{
  color:#808080;
}


/* Inspired from here: http://www.jorkas.com/lab/css/rounded_button/ 

As long as buttons are 24 pixels high, and left and right "borders"
are each 8 pixels wide, the only thing you need to change for each
specific button is the background image and text color as below with
.button.tab

*/


/* Handle right part... outer element. Note, Firefox will "eat" a regular
space coming after this button. Use &#160; if you really want a space after such
a button--that seems to work fine in IE too. */
.mob-button {
       cursor:pointer; 
       cursor:hand; 
       background-repeat: no-repeat;
       background-position: right top;
       line-height:21px;
       height:22px;
       padding-right:8px; 
       vertical-align: middle;
       display:block; /*opera*/ 
       display:inline-block; /*ie*/
       display:-moz-inline-box; /*  ff  */ 
}

.mob-button:hover {
       text-decoration: none;
}

/* Handle left part */
.mob-button span { 
       background-position: left top;
       background-repeat: no-repeat;
       display:block;
       display:inline-block;
       padding-left:8px;
       height:22px;
   /* If this worked in IE, we wouldn't have to repeat this in the child :(
       Works in firefox.
       background-image: inherit;
   */
}

/* Firefox doesn't seem to allow me to put a style on a button? */
button {
       border:0; 
       border:none; 
       background:transparent;
       width:1;
       overflow:visible;
       white-space:nowrap; 
       padding:0 2px 0 0; /* needed for little IE button-push animation */
       cursor:pointer; 
       cursor:hand;
       font-family:verdana; 
}


/* 
Now, for each new button with style such as "tab", where a button
is a 24 pixel high image with left and right borders of 8 pixels each,
add two rules as follows, where we specify the URL in both rules and
the color for the button text in the first. Then, the hyperlink for
the button should be of style "button tab"
*/

.mob-button.tab, 
.mob-button.tab:link,
.mob-button.tab:visited {
       background-image:url('../images/tab_button.png');
       font-size: 9pt;
       color: white;
}

.mob-button.tab span {
       background-image:url('../images/tab_button.png');
}

/* The fill color of this button is currently used in _searchBusinessJS
   as well, to highlight the cell of a business */

.mob-button.body, 
.mob-button.body:link,
.mob-button.body:visited {
       background-image:url('../images/body_button.png');
       font-size: 11pt;
       font-family: arial,helvetica,sans-serif;
       color: white;
}

.mob-button.body span {
       background-image:url('../images/body_button.png');
}

.mob-button.body-disabled,
.mob-button.body-disabled:link,
.mob-button.body-disabled:visited {
       background-image:url('../images/body_button_disabled.png');
       font-size: 9pt;
       color: #a0a0a0;
}

.mob-button.body-disabled span {
       background-image:url('../images/body_button_disabled.png');
}



/**
 * briseno created this to test out
 * formatting input text fields
 *
 * At the moment it does not style password fields.
 * input[type=text][type=password]
 * input[type~=submit]
 * see http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
**/

input[type=text], input[type=password], select, textarea
{
   background-color: #eeeeee;
   /* background-image: url('../images/tab_header_stretch.png'); */
   border-top: 1px solid #c0c0c0;
   border-right: 2px solid #140A66;
   border-left: 1px solid #c0c0c0;
   
   border-bottom: 2px solid #140A66;
   padding: 3px 2px 3px 2px;
   font-family: verdana;
   font-size: 9pt;
   color: #000000;
}

.noshow {
   display:none;
}

/**
 * File uploading html is a nightmare to restyle...
 * See http://www.quirksmode.org/dom/inputfile.html
 */
.file-upload {

  /* Turn these 4 off to muck with different browsers.
     Tested 10/6/08, ok w/ IE 6, FF2, Safari, Chrome 
  */
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  -khtml-opacity: 0; 
  opacity: 0;  

  position: relative;
  z-index: 2;
  font-size: 18px;
  padding-top: -2px;
/*  text-align: right; */
}

.fakefile {
  margin-top: -26px;
  z-index: 1;
}

#bottom {
  background-color: #FFFFFF;
  height: 2px;
  width: 100%;
  height: 100%;
}