/* unvisited link */
a:link {
    color: #ffffff;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

/* 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; font-size: 100%; color: #1a6f38;}


/* These classes only appear in desk-top envrionments  They work in concert with the items below, max-width 489, where they dissappear.*/
@media only screen and (min-device-width: 490px) {
/* table.zombieLimitedWidth { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate; max-width: 989px; } */
table.zombieLimitedWidth { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate; max-width: 989px; }
table.zombie { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate; }
table.CenterTenWidthLimit2 { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate; border:10px solid #1a6f38; border-radius:10px;}
table.CenterSixWidthLimit { margin-left:auto; margin-right:auto; border-spacing: 6px; border-collapse: separate; max-width: 600px; border:6px solid #1a6f38; border-radius:10px; background-color: #1a6f38;}
td.ZeroWithColorWhiteZombie {padding: 4px; background-color: #ffffff; border:6px solid #ffffff; border-radius:10px;}
img.MiniMeZombie { display: block; margin-left: auto; margin-right: auto; width:100%; height:auto; max-width: 192px; max-height: 192px; } 
.Switch { display: block;  } 
img.RightZombie { position: absolute; right: 0px; width: 250px;}
}

@media only screen and (max-device-width: 489px) {
table.zombie {display: none !important;}
/* table.CenterSixWidthLimit {display: none !important;} */
table.CenterTenWidthLimit2 {display: none !important;}
td.ZeroWithColorWhiteZombie {display: none !important;}
img.MiniMeZombie {display: none !important;} 
img.RightZombie {display: none !important;} 
.Switch {display: none !important;} 
}

/* this centers and sets the max width the main table. */
table.center { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate; max-width: 989px; height: 100%; }
table.zero { border-spacing: 0px; border-collapse: separate; }

/* this centers a table with 10 pixels of space around it */
table.CenterTen { margin-left:auto; margin-right:auto; border-spacing: 10px; border-collapse: separate; }
table.CenterTenWidthLimit1 { margin-left:auto; margin-right:auto; border-spacing: 10px; border-collapse: separate; max-width: 500px;}
table.CenterZeroWidthLimit { margin-left:auto; margin-right:auto; border-spacing: 0px; border-collapse: separate;max-width: 1000px; }

table.GreenRoundedCorners { margin-left:auto; margin-right:auto; border-spacing: 6px; border-collapse: separate; max-width: 800px; border:6px solid #1a6f38; border-radius:10px; background-color: #1a6f38;}
table.GrayRoundedCorners { margin-left:auto; margin-right:auto; border-spacing: 6px; border-collapse: separate; max-width: 700px; border:6px solid #1a6f38; border-radius:10px; background-color: #d4d5d6;}
table.GreenRoundedCornersWB { margin-left:auto; margin-right:auto; border-spacing: 6px; border-collapse: separate; max-width: 800px; border:3px solid #ffffff; border-radius:10px; background-color: #1a6f38;}
table.iconKey { margin-left:auto; margin-right:auto; border-spacing: 6px; border-collapse: separate; max-width: 990px; border:6px solid #1a6f38; border-radius:10px; background-color: #1a6f38;}


/* this class sets up the background color and padding of the main content and navigation cells  */
td.TenWithColor1 {padding: 10px; background-color: #1a6f38;}
td.ZeroWithColor1 {padding: 0px; background-color: #ffffff;}
td.ZeroWithColorWhite {padding: 4px; background-color: #ffffff; border:6px solid #ffffff; border-radius:10px;}
td.TenWithColor2 {padding: 10px; background-color: #3b4626;}
/* td.TenWithColor3 {padding: 10px; background-color: #ffffff; border: 1px solid #1a6f38; max-width: 560px;} */
td.TenWithColor3 {padding: 10px; background-color: #ffffff; border: 1px solid #1a6f38; }
td.TenWithColor3Rounded {padding: 10px; background-color: #ffffff; border: 1px solid #1a6f38; border-radius:10px; max-width: 300px; }
td.TenWithColor3Little {padding: 10px; background-color: #ffffff; border: 1px solid #1a6f38; width: 120px;}
td.TenWithColor3Little2 {padding: 10px; background-color: #ffffff; border: 1px solid #1a6f38; width: 150px;}
td.ZeroWithoutColor {padding: 0px;}
td.HomeMainContentCellBG {padding: 0px; background-color:#d5d0cd; background-image: url(HomeHands989x764.jpg); background-repeat: no-repeat; background-position: center top; height:764px;}
td.content {padding: 0px;  vertical-align:top; min-height: 800px; margin:auto; }
td.zero {padding: 0px;}
td.Padding5 {padding: 5px;}
td.ZeroCenter {padding: 0px; text-align: center;}
td.ZeroCenter5 {padding: 5px; text-align: center;}
td.spacer {padding: 0px; width: 85px;}
td.nav {padding: 0px; width: 1px;}
td.cellback {background: url("NavCellBackground.gif"); padding: 0px;}
td.TenWidthLimit {padding: 0px 0px 0px 10px; width: 550px;}


div.centre
{ margin:auto; width:100%;}

div.footer
{ position: absolute; bottom:0px;}



/* this is how I center an image  */
img.center { display: block; margin-left: auto; margin-right: auto; } 
/* this is how I center and scale the header banner  */
img.header { display: block; margin-left: auto; margin-right: auto; width:100%; height:auto; max-width: 665px; max-height: 192px; } 
/* img.MiniMe { display: block; margin-left: auto; margin-right: auto; width:100%; height:auto; max-width: 162px; max-height: 192px; }   */
img.borderless {border:0;}
/* the next class will make any image flexible with the broswer */
img.flex { display: block; width:100%; height:auto; }
img.Borderlessflex { display: block; width:auto; max-height:27px; border:0; margin-left: auto; margin-right: auto;}
img.flex400 { display: block; max-width: 400px; height:auto; padding: 0px 0px 0px 10px;}
img.Padding10Left { display: block; max-width: 400px; height:auto; padding: 0px 0px 0px 10px;}
img.FlexRight {float: right; margin: 0 0 10px 0px; display: block; max-width: 350px; width:100%; height:auto;}


/* this defines the color, font face, size and centering of a page heading  */
span.opening  {color: #000000; font-family:Arial; font-size:120%; text-align: left;}
span.content  {color: #000000; font-family:Arial; font-size:100%; text-align: left;}
span.contentBlue  {color: blue; font-family:Arial; font-size:100%; text-align: left;}
span.OpeningWhite  {color: #ffffff; font-family:Arial; font-size:150%; text-align: left;}
span.TimesXLWhite  {color: #ffffff; font-family:"Times New Roman"; font-size:150%; text-align: left;}
span.ContentWhite  {color: #ffffff; font-family:Arial; font-size:100%; text-align: left;}
span.contentG  {color: #1a6f38; font-family:Arial; font-size:100%;}

/* the content class defines the color, font face, and width of the main paragrpahs in pixels  */
p.content  {color: #000000; font-family:Arial; font-size:100%;}
p.contentG  {color: #1a6f38; font-family:Arial; font-size:100%;}

/* this defines the color, font face, size and centering of a closing heading  */
p.center  {color: #1a6f38; font-family:Arial; font-size:100%; text-align: center;}
p.right  {color: #1a6f38; font-family:Arial; font-size:80%; text-align: right;}


/* 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;}
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;}}




/* 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(http://www.royalny.com/sandbox/MobileMasthead407x107.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 407px !important;
      height: 107px !important;
    }
    img[id=Houdini1] {display: none !important;}
  }
  

/* This is a bit of insanity to overlay a space for a link in the mobile header  */
@media only screen and (max-device-width: 489px) {
#MobileLink {
    display:block;
    height:47px;
    width:407px; }
}


@media only screen and (max-device-width: 489px) {
    span[id=Switcher2] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/BrewingGuidesHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini2] {display: none !important;}
  }


@media only screen and (max-device-width: 489px) {
    span[id=Switcher3] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  /* margin-left: auto; margin-right: auto; */
      background-image: url(http://www.royalny.com/sandbox/MobileSubNavGraphic.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 53px !important;
      height: 47px !important;
    }
    img[id=Houdini3] {display: none !important;}
  }
  
 

@media only screen and (max-device-width: 489px) {
    span[id=Switcher4] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/ContactUsHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini4] {display: none !important;}
  }
  

@media only screen and (max-device-width: 489px) {
    span[id=Switcher5] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/OfferingsHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini5] {display: none !important;}
  }
  
@media only screen and (max-device-width: 489px) {
    span[id=Switcher6] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/FAQsHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini6] {display: none !important;}
  }
  

@media only screen and (max-device-width: 489px) {
    span[id=Switcher7] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/QualityHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini7] {display: none !important;}
  } 
  

@media only screen and (max-device-width: 489px) {
    span[id=Switcher8] {
      display:block;
	  /* use the next line only if you want to center the mobile image  */
	  margin-left: auto; margin-right: auto;
      background-image: url(http://www.royalny.com/sandbox/VideosHeaderM.png) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 300px !important;
      height: 60px !important;
    }
    img[id=Houdini8] {display: none !important;}
  } 
  
 @media only screen and (max-device-width: 489px) {
     span[id=Switcher9] {
       display:block;
 	  /* use the next line only if you want to center the mobile image  */
 	  margin-left: auto; margin-right: auto;
       background-image: url(http://www.royalny.com/sandbox/PhotoGalleryHeaderM.png) !important;
       background-repeat: no-repeat !important;
       background-position: center !important;
       width: 300px !important;
       height: 60px !important;
     }
     img[id=Houdini9] {display: none !important;}
  } 
  
  @media only screen and (max-device-width: 489px) {
       span[id=Switcher10] {
         display:block;
   	  /* use the next line only if you want to center the mobile image  */
   	  margin-left: auto; margin-right: auto;
         background-image: url(http://www.royalny.com/sandbox/FarmBiosHeaderM.png) !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         width: 300px !important;
         height: 60px !important;
       }
       img[id=Houdini10] {display: none !important;}
  } 
  

@media only screen and (max-device-width: 489px) {
       span[id=Switcher11] {
         display:block;
   	  /* use the next line only if you want to center the mobile image  */
   	  margin-left: auto; margin-right: auto;
         background-image: url(http://www.royalny.com/sandbox/OrderingHeaderM.png) !important;
         background-repeat: no-repeat !important;
         background-position: center !important;
         width: 300px !important;
         height: 60px !important;
       }
       img[id=Houdini11] {display: none !important;}
  }