/*** Sections 
--------------------------------------------------------------------------- ***/
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
/*** Grouping
--------------------------------------------------------------------------- ***/
.group:before,
.group:after {
  content:"";
  display:table;
}
.group:after {
  clear:both;
}
.group {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/*** Grid Column Setup
--------------------------------------------------------------------------- ***/
/* Default is no left margin for 1 col display */
.col {
  display: block;
  float:left;
  margin: 0% 0 1% 0%;  top changed from 1% to 0 */
/* padding-right: 5%;
padding-left: 5%;
*/
}

/*  Set margin left >= 640 PIXELS */
@media only screen and (min-width:40em ) {
  .col { 
    margin: 0% 0 1% 1.6%;  top changed from 1% to 0 */
/* padding-right: 2%;
padding-left: 2%;
*/
  }
  .col:first-child { margin-left: 0; }  /* all browsers except IE6 and lower */
}
/*  GRID OF THREE   ============================================================================= */
/* Default mobile size */
  .span_3_of_3 {
    width: 100%; 
  }
  .span_2_of_3 {
    width: 100%; 
  }
  .span_1_of_3 {
    width: 100%;
  }

  .nowrap_1_of_3 {
    width: 32.26%; 
  }
  .wrapsm_1_of_3 {
    width: 100%; 
  }
/*  Set the 3 columns to 2 columns at greater than or equal to 640 pixels */
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  .span_1_of_3 {
    /* width: 49.1  should be 49.2% but IE7 screws up the float and wraps the last 1 in 3 on desktop */
    width: 49.2%;
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  .span_3_of_3 {
    width: 100%; 
  }
  .span_2_of_3 {
    width: 66.13%; 
  }
  .span_1_of_3 {
    /* width: 32.2  should be 32.26% but IE7 screws up the float and wraps the last 1 in 3 on desktop */
    width: 32.26%; 
  }
}
/*  GRID OF FOUR   ============================================================================= */
/* Default mobile size */
  .span_4_of_4 {
    width: 100%; 
  }
  .span_3_of_4 {
  width: 100%; 
  }
  .span_2_of_4 {
    width: 100%; 
  }
  .span_1_of_4 {
    width: 100%; 
  }
/*  Set the 4 columns to 2 columns at greater than or equal to 640 pixels */
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  .span_1_of_4 {
    width: 49.1%; /* should be 49.2% but IE7 screws up the float and wraps the last 1 in 4 on desktop */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  .span_4_of_4 {
    width: 100%; 
  }
  .span_3_of_4 {
    width: 74.6%; 
  }
  .span_2_of_4 {
    width: 49.2%; 
  }
  .span_1_of_4 {
    width: 23.7%; /* should be 23.8% but IE7 screws up the float and wraps the last 1 in 4 on desktop */
    /* width: 20.9%;  should be 21% but IE7 screws up the float and wraps the last 1 in 4 on desktop */
  }
}
.nowrap_1_of_3 {
  width: 32.26%; 
}

#wrapper {
/*   max-width: 1024px; 1824px;  did have it as 960px; */
  width: 100%;
  position: relative;
  text-align: left;
  margin: 0 auto;
}
.blankdivider {
  background-color: #FA8072; /* LAVENDER MIST */
  height: 4px; 
}
.blankdividerwhite {
  background-color: white; /* LAVENDER MIST */
  height: 4px; 
}
img.middle {
    vertical-align: middle;
}
/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}

body { 
/*  background-color: #FDFFFC;  Baby Powder */ 
/* font-size changed from 1em to 14/16 i.e. 0.875 */
  font-size: 0.875em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  margin : 0 auto;
  padding : 0;
  font-family: 'Droid Sans', sans-serif;
  /* avoid auto resizing of text on some devices */
  -webkit-text-size-adjust:100%;
  color : #000; /* black */ 
  text-align: left;
}
h1, h2, h3, h4 {
  font-family: 'Fjalla One', sans-serif;
}
/*** Default will be for small devices < 640px ***/
h1 {
  background-color: #B91717; /* dark red */
  font-size: 1.75em; /* 28px */           
  font-weight: bold;
  color: white;
  line-height: 1.5; /* 42px */
  padding-left: 10%; 
/* margin: 0; */
/*  margin-bottom : 0.2em; */
}
.h1white {
  color: white;
  text-decoration: none; 
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  h1 {
    font-size: 2.5em;  /* 2.5x body copy size = 2.5x14px = 35px */            
    line-height: 1.25; /* 1.25x 35px = 43.75px */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  h1 {
    font-size: 3.5em;    /* 3.5x body copy size = 3.5x14px = 49px */
    line-height: 1.2;  /* 1.25x 42px = 52.5px */
    /* keep to a multiple of the 20px line height 
    and something more appropriate for display headings */
  }
}
h2 {
  background-color: #B91717; /* dark red */
  font-size: 1.5em;           /* 1.5x parent */
  font-weight: bold;
  color: white;
  line-height: 1.2;
  padding-left: 10%; 
margin: 0;
/*  margin-bottom : 0.2em; */
}

@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  h2 {
    font-size: 1.75em;  /* 1.75x body copy size = 1.75x14px = 24.5px */            
    line-height: 1.25; /* 1.5x 24.5px = 36.75px */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  h2 {
    font-size: 2.5em;    /* 2.5x body copy size = 2.5x14px = 35px */    
    line-height: 1.25; /* 1.5x 35px = 52.5px */
  }
}
h3 {
  /* for body keep to a multiple of the 20px line height i.e. 1.25 times 16px = 20px 
     and something more appropriate for display headings */
  font-family: 'Dosis', sans-serif;
  font-size: 1.3em; /* 28px */
  font-weight: bold;
  line-height: 1.25; /* 24px */ 
  padding: 0em 0.25rem; /* em for top bottom changed from 0.25, rem for left and right paddings */
  text-decoration: underline; 
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  h3 {
    font-size: 1.5em;  /* 1.75x body copy size = 1.75x14px = 24.5px */            
    line-height: 1.25; /* 1.5x 24.5px = 36.75px */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  h3 {
    font-size: 1.75em;    /* 2.5x body copy size = 2.5x14px = 35px */    
    line-height: 1.25; /* 1.5x 35px = 52.5px */
  }
}
h4 {
  /* for body keep to a multiple of the 20px line height i.e. 1.25 times 16px = 20px 
     and something more appropriate for display headings */
  font-family: 'Dosis', sans-serif;
  font-size: 1.15em; /* 24px */
  font-weight: bold;
  line-height: 1.25;  
  padding: 0.25em 0.25rem; /* em for top bottom, rem for left and right paddings */
  text-decoration: underline; 
  margin-bottom : 0.2em; 
  margin-top : 0.3em; 
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  h4 {
    font-size: 1.3em;  /* 1.75x body copy size = 1.75x14px = 24.5px */            
    line-height: 1.25; /* 1.5x 24.5px = 36.75px */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  h4 {
    font-size: 1.5em;    /* 2.5x body copy size = 2.5x14px = 35px */    
    line-height: 1.25; /* 1.5x 35px = 52.5px */
  }
}
h5 {
  /* for body keep to a multiple of the 20px line height i.e. 1.25 times 16px = 20px 
     and something more appropriate for display headings */
  font-family: 'Dosis', sans-serif;
  font-size: 1.25em; /* 17.5px */
  font-weight: bold;
  font-style: italic;
  color: white;
  line-height: 1.25;  
  padding: 0.25em 0.25rem; /* em for top bottom, rem for left and right paddings */
  text-decoration: none; 
  margin-bottom : 0.2em; 
  margin-top : 0.3em; 
}
.fontcolorblack {
  color: black;
}
.seasonlow {
  text-align:center;
  background-color: #FFFF33; 
}
.seasonmed {
  text-align:center;
  background-color: #33FF33; 
}
.seasonrien {
  text-align:center;
  background-color: #FFFFFF; 
}
.seasonhigh {
  text-align:center;
  background-color: #FA9900; 
}
.pblank {
  line-height: 1.5;
}
#headcontainer {
  width: 100%;
}
.cgbgcolordblue {
  background-color:#E1E8ED; /* PATTENS BLUE */
}
.redwhite {
  color: white;
  text-align:center;
  font-weight: bold;
  background-color: #B91717; /* dark red */
}
.nounderline {
  text-decoration: none; 
}
.boldtxt {
  font-weight: bold;
}
.imgcenter {
/*  padding-top: 5%; */ 
  display: block; 
width:100%; /* have to do this to ensure the img works in IE10 */
}
.hyperlinktxt {
  font-weight: bold;
}
.ErrMsg {
  color: #B91717; /* dark red */
  text-align:left;
  font-weight: bold;
/*  background-color: #B91717; dark red */
}
.MandAsterix {
  vertical-align: sub;
}
.imgalignmiddletxt {
  text-align:center;
}
.imgalignmiddle {
  text-align:center;
  display: block;
}
.centraliseimgsm {
  margin:10px 8px 0 0px; /*** top 10px, right 8px ***/
  width: 56px;
  height:56px;
}
.centraliseimg {
  margin:10px 8px 0 0px; /*** top 10px, right 8px ***/
  width: 48px;
  height:48px;
}
.ppadding {
  margin-left: auto;
  margin-right: auto;
padding-right: 5%;
padding-left:5%;
/* width: 90%; */ 
/* height: 118px; */  
/*    height: auto; */
    width: auto\9; /* ie8 */
}

button {
  border: 1px solid #fa8072; /* salmon, #0066cc; blue */
  background-color: #b91717; /* red, #0099cc; blue */
  color: white;
  padding: 5px 10px;
    cursor: pointer;
}
button:hover {
/*  border: 1px solid #b91717;  #0099cc; blue */
  background-color: #E89338; /* brown #00aacc; blue */
  color: white; /* white */
  padding: 5px 10px;
}
/* maybe have to remove the first one here button:disabled:hover */
button:disabled:hover, button[disabled]:hover {
  border: 1px solid #999999; /* grey */
  background-color: #cccccc; /* grey */
}
button:disabled,
button[disabled]{
  border: 1px solid #999999; /* grey */
  background-color: #cccccc; /* grey */
  color: #666666; /* dark grey */
  pointer-events: none;
}
.button.disabled {
  opacity: 0.65; 
  cursor: not-allowed;
}
/* https://stackoverflow.com/questions/5485642/how-do-you-style-disabled-textarea-in-ie8 */
button[disabled] {background-color: #cccccc;;cursor: not-allowed;} /* set background lime green - works in IE7+ and modern browsers */
button[disabled="disabled"] {background-color:#cccccc;;cursor: not-allowed;} /* set to yellow to prove -  IE8+ and modern browsers */

#subclear-1,
#subclear-2,
#subclear-3,
#subclear-4,
#subclear-5,
#subclear-6 {
  clear: both;
}
.linkmore {
  color: white;
  display:block;
}
.phonestyle, .phonestylet {
  background-color: #D68021;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em; /* 14pt in Word equals 19px in CSS */
  font-weight: bold;
  color: white;
  border-bottom: 4px solid #8C5416;
  text-align: center;
}
div.phonestylet:hover { 
  color:#fff; 
  background-color:#E89338; 
  cursor:pointer;  
}
.TelephoneNum {
  display: none;
}
.enqwhite {
  color: white;
  font-weight: bold;
}
a.enqwhite:visited {text-decoration: none; color: lime; font-weight:bold;}
a.enqwhite:hover {text-decoration: underline; color: yellow; font-weight:bold;}

#HowManyCols{
  width: 100px;
  height: 80px;
  background-color: blue;
  display: none;
}
.gallerydispnone {
  display: none;
}
#ieblock1, #ieblock2, #ieblock3, #ieblock4, #ieblock5, #ieblock6  {
  margin-left: 0;
}
#ieblock7, #ieblock8, #ieblock9, #ieblock10, #ieblock11, #ieblock12 {
  margin-left: 0;
}
#ieblock17, #ieblock18, #ieblock19, #ieblock20 {
  margin-left: 0;
}
#ieblock1 img:hover, #ieblock2 img:hover, #ieblock12 img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  #ieblock1, #ieblock3, #ieblock5, #ieblock7, #ieblock9, #ieblock11, #ieblock17, #ieblock19 { 
    margin-left: 0; 
  } 
  #ieblock2, #ieblock4, #ieblock6, #ieblock8, #ieblock10, #ieblock12, #ieblock18, #ieblock20 { 
    margin-left: 1.6%; 
  } 
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
/*** 20190214 ***/
  #ieblock1, #ieblock4, #ieblock7, #ieblock10, #ieblock17 { 
    margin-left: 0; 
  } 
/*** 20190214 ***/
  #ieblock2, #ieblock3, #ieblock5, #ieblock6, #ieblock8, #ieblock9, #ieblock11, #ieblock12, #ieblock18, #ieblock19, #ieblock20 { 
    margin-left: 1.6%; 
  } 
}
textarea {
  font-family: 'Droid Sans', sans-serif;
}
ol.c {
  list-style-type: decimal;
  padding-left: 2em; 
}
/*  Set the padding of the ordered list slightly less at greater than or equal to 640 pixels */
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  ol.c {
    list-style-type: decimal;
    padding-left: 1.5em; 
  }
}
.txtboldul {
  font-weight: bold;
  text-decoration: underline; 
}