/* Setting the base font size here to 100% will give us a default of 16 pixels, and allow us to make the fonts scalable.  */
/* The color defined here is that of the base font, not a background color of the body tag.  */
/* body { margin: 0; padding: 0; color: #000000; background-color: #c9cacf;} */
body { margin: 0; padding: 0; color: #000000; background-color: #000f4b;}


img.logo { display: block; width:100%; height:auto; max-width: 300px; max-height: 47px; }
img.FlexRight400 { display: block; width:100%; max-width: 400px; height:auto; float:right; margin: 10px 0px 10px 10px;}
img.FlexRight350 { display: block; width:100%; max-width: 350px; height:auto; float:right; margin: 10px 0px 10px 10px;}
img.FlexRight320 { display: block; width:100%; max-width: 320px; height:auto; float:right; margin: 10px 0px 10px 10px;}
img.FlexJack { display: block; width:100%; max-width: 181px; height:auto; float:right; margin: 10px 0px 10px 10px;}


/*  As of June 8th, this is not working,a nd is not being used.  Not sure why yet, as it has worked well in other sites.  */  
/* I'm using the switcher and Houdinis to swap one image for another from desktop to mobile  */
@media only screen and (max-device-width: 489px) {
    span[id=Switcher1] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(BodaciousLogo160x25.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 160px !important;
      height: 25px !important;
    }
    img[id=Houdini1] {display: none !important;}
  }



/* the SeeYa class is what we will use to make things dissappear on screesn less than 489 pixels  */

@media only screen and (max-device-width: 489px) {
img.SeeYa {display: none !important;}
td.SeeYa {display: none !important;}
td.ZeroCenterSeeYa {padding: 0px; text-align: center; display: none !important;}
#SeeYa {display: none !important;}
#SeeYa2 {display: none !important;}
#SeeYa3 {display: none !important;}
#SeeYa4 {display: none !important;}
table.SeeYa {display: none !important;}
br.SeeYa {display: none !important;}
}


/* Or you can use the class mobilehide, and this:  */
   .mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 489px){  .mobileHide { display: none;}}
   

/* I have used this CLASS in a div, td, or a span, to make elements only appear in mobile  */
   .mobileShow { display: none;}
   #mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 489px){ .mobileShow { display: inline;}}
   

span.white  {color: #ffffff; font-family:Arial; font-size:100%;}
span.whiteXL  {color: #ffffff; font-family:Arial; font-size:150%;}
span.WhiteCenter  { display: block; color: #ffffff; font-family:Arial; font-size:100%; text-align: center;}
span.blue  {color: #000e4b; font-family:Arial; font-size:100%;}

div.center
{margin-left:auto; margin-right:auto; max-width: 600px; max-height: auto;}

div.BlockQuote
{ margin: 0px 10px 10px 10px;}

div.SmallRightCarousel
{max-width: 350px; float: right; margin: 10px 0px 10px 10px;}

div.WhiteDots
li { color: #ffffff; }