/***
  Default for phones will be 
  6 col - 3 rows of 2 cols
  =====
  2 col - 2 rows of 1 col
  =====

  >= 640
  6 col - 2 rows of 3 cols
  =====
  2 col - 1 row of 2 col
  =====

  >= 800
  6 col - 1 row of 6 cols
  =====
  2 col - same as >= 640 - 1 row of 2 cols
  =====
***/
/***
  'Late Deals, Rates, Jan'
  Default for phones will be 
  3 rows of 1 col

  >= 640
  Late Deals
  Rate  Jan
  i.e 2 rows, 1 with 1 col and the other with 2 cols

  >= 800
  Late Deals  Rate  Jan
  i.e 1 rows  with 3 cols
***/
#tblock1, #tblock2, #tblock3 {
  margin-left: 0; 
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  #tblock1, #tblock2 { 
    margin-left: 0; 
  } 
  #tblock3 { 
    margin-left: 1.6%; 
  } 
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  #tblock1 { 
    margin-left: 0; 
  } 
  #tblock2, #tblock3 { 
    margin-left: 1.6%; 
  } 
}
/*** The 6 month default mobile display will be 6 rows of 1 col ***/
#tblock4, #tblock5, #tblock6, #tblock7, #tblock8, #tblock9 {
  margin-left: 0; 
/* 2021feb */
/* Below is to allow a padding to left and right and a top border to ensure the text doesn't hug the sides  */
/* of a 1 col (i.e. mobile) layout, and also to try and split the month up vertically by putting a vertical */
/* rose line at the top of each month 8/
/* see https://ux.stackexchange.com/questions/73142/what-is-the-recommended-minimal-margin-for-text-to-the-border-of-the-screen-on-a */
  box-sizing: border-box;
  padding: 0.125rem 0.625rem; /* top and bottom 0.75rem, right and left 3% */
  border-top-style: solid;
  border-top-color: #FA8072; /* LAVENDER MIST */;
  border-top-width: 0.25rem; 
/* 2021feb End */
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
/*** for medium screen it will be 3 rows of 2 cols ***/
  #tblock4, #tblock6, #tblock8 {
    margin-left: 0; 
/* 2021feb */
/* To negate the padding and border top of the mobile layout above */
  padding: 0; /* TRBL padding 0 */
  border-top-width: 0px; 
/* 2021feb End */
  } 
  #tblock5, #tblock7, #tblock9 {
    margin-left: 1.6%; 
/* 2021feb */
/* To negate the padding and border top of the mobile layout above */
  padding: 0; /* TRBL padding 0 */
  border-top-width: 0px; 
/* 2021feb End */
  } 
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop - 2 rows of 3 cols ***/
  #tblock4, #tblock7 {
    margin-left: 0; 
  } 
  #tblock5, #tblock6, #tblock8, #tblock9 {
    margin-left: 1.6%; 
  } 
}
#tblock10, #tblock11 {
  margin-left: 0; 
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
/*** for medium screen it will be 3 rows of 2 cols ***/
  #tblock10 {
    margin-left: 0; 
  } 
  #tblock11 {
    margin-left: 1.6%; 
  } 
}




#sblock1, #sblock3, #sblock5, #sblock7, #sblock8 { 
  margin-left: 0; 
} 
#sblock2, #sblock4, #sblock6 { 
  margin-left: 1.6%; 
} 
#sblock9, #sblock11, #sblock13 { 
  margin-left: 0; 
} 
#sblock10, #sblock12, #sblock14 { 
  margin-left: 1.6%; 
} 
#sblock15, #sblock17, #sblock19 { 
  margin-left: 0; 
} 
#sblock16, #sblock18, #sblock20 { 
  margin-left: 1.6%; 
} 
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  #sblock1, #sblock4 { 
    margin-left: 0; 
  } 
  #sblock2, #sblock3, #sblock5, #sblock6 { 
    margin-left: 1.6%; 
  } 
  #sblock7 { 
    margin-left: 0; 
  } 
  #sblock8 { 
    margin-left: 1.6%; 
  } 
  #sblock9, #sblock12 { 
    margin-left: 0; 
  } 
  #sblock10, #sblock11, #sblock13, #sblock14 { 
    margin-left: 1.6%; 
  } 
  #sblock15, #sblock18 { 
    margin-left: 0; 
  } 
  #sblock16, #sblock17, #sblock19, #sblock20 { 
    margin-left: 1.6%; 
  } 
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  #sblock1, #sblock7, #sblock9, #sblock15 { 
    margin-left: 0; 
  } 
  #sblock2, #sblock3, #sblock4, #sblock5, #sblock6, #sblock8 { 
    margin-left: 1.6%; 
  } 
  #sblock10, #sblock11, #sblock12, #sblock13, #sblock14 { 
    margin-left: 1.6%; 
  } 
  #sblock16, #sblock17, #sblock18, #sblock19, #sblock20 { 
    margin-left: 1.6%; 
  } 
}
#sblock1 img, #sblock2 img, #sblock3 img, #sblock4 img, #sblock5 img  {
  opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#sblock6 img, #sblock7 img, #sblock8 img {
  opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#sblock1 img:hover, #sblock2 img:hover, #sblock3 img:hover, #sblock4 img:hover, #sblock5 img:hover  {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
#sblock6 img:hover, #sblock7 img:hover, #sblock8 img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
div.desc {
  font-weight: bold;
  font-size: 0.875em;
  padding: 5px;
  text-align: center;
}
.h4services { 
  color: black;
  padding-left: 0;
  text-decoration: none; 
}
sup {
  vertical-align: super;
  font-size: smaller; 
}
.termslow {
  color: #000000;
  background-color: #FFFF00;
  padding: 10px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.termsbordertbl {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
/*** see http://onwebdev.blogspot.com/2010/11/css-nested-floats.html
     for explanation of nested floats
 see https://stackoverflow.com/questions/13474754/how-to-set-borders-thickness-in-percentages
     for doing percentage borders
***/

.faux-borders, #fb1, #fb2 {
  float:left;
    background-color: black;
    width: 12.91%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-bottom: 0.4%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
}
.faux-borders:first-child { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
.faux-borders:last-child { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
#fb2 { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
#fb2:last-child { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
#t7, #t14 { padding-right: 0.5%; }  /* all browsers except IE6 and lower */

/* Default mobile size */
.span_1_of_7 {
  	width: 100%;
}
.span_2_of_7 {
  	width: 100%;
}
.span_3_of_7 {
  	width: 100%;
}
.span_4_of_7 {
  	width: 100%;
}
.span_5_of_7 {
  	width: 100%;
}
.span_6_of_7 {
  	width: 100%;
}
.span_7_of_7 {
  	width: 100%;
}
/*  Set the 3 columns to 1 + 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_4_of_7 {
    width: 100%;
  }
  .span_1_of_7 {
    width: 25.82% /* has to take care of the 1.6% left margin - was 27.42%; */
  }
  .span_2_of_7 {
    width: 70.97%;
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  .span_4_of_7 {
    width: 56.45%;
  }
  .span_2_of_7 {
  width: 27.42%;
  }
  .span_1_of_7 {
  width: 12.91%;
  }
}
.fbtopleft {
  background-color: black;
  padding-top: 0.4%; /* set padding to simulate border */
  padding-left: 0.5%; /* set padding to simulate border */
}
.fbleft {
  background-color: black;
  padding-left: 0.5%; /* set padding to simulate border */
}
.fbright {
  background-color: black;
  padding-right: 0.5%; /* set padding to simulate border */
}
.fbbottom {
  background-color: black;
  padding-bottom: 0.5%; /* set padding to simulate border */
}
.fbmarginleft {
  margin-left: 0.75%; 
}
.fbmarginright {
  margin-right: 0.75%; 
}
.fblate1of5 {
  float:left;
  background-color: black;
  width: 19.1%;
}
.fbday1of7 {
  float:left;
  background-color: black;
  width: 13.5%;
}
.whiteblack {
  color: black;
  text-align:center;
  background-color: white; /* dark red */
}
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; 
  }
}
/*** 2nd attempt ***/
.fbmonth {
    background-color: black;
    width: 93.37%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
    padding-right: 0.5%; /* set padding to simulate border */
margin-left: 2.815%; 
margin-right: 2.815%; 
}
.fbmonthnotop {
    background-color: black;
    width: 93.37%;
    padding-left: 0.5%; /* set padding to simulate border */
    padding-right: 0.5%; /* set padding to simulate border */
margin-left: 2.815%; 
margin-right: 2.815%; 
}
.fbmonthbottom {
    background-color: black;
    width: 93.37%;
    padding-bottom: 0.4%; /* set padding to simulate border */
}
.fbssmtwt {
  float:left;
    background-color: black;
    width: 12.91%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
}
.fbdate {
  float:left;
    background-color: black;
    width: 18.274%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
}
.fbf {
  float:left;
    background-color: black;
    width: 12.91%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-right: 0.5%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
}
.fbsaving {
  float:left;
    background-color: black;
    width: 18.274%;
    padding-top: 0.4%; /* set padding to simulate border */
    padding-right: 0.5%; /* set padding to simulate border */
    padding-left: 0.5%; /* set padding to simulate border */
}
.fblastweek {
  float:left;
    background-color: black;
    width: 12.91%;
    padding-bottom: 0.4%; /* set padding to simulate border */
}
.monthsat { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
.monthfri { margin-right: 2.815%; }  /* all browsers except IE6 and lower */

.datemargin { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
.savingmargin { margin-right: 2.815%; }  /* all browsers except IE6 and lower */



  .span_5_of_5 {
    width: 100%;
  }

/*** have to declare this again as the specificity rules needs to override for days ***/
.redwhite {
  color: white;
  text-align:center;
  font-weight: bold;
  background-color: #B91717; /* dark red */
}
.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; 
}
.txtbold {
  font-weight: bold;
}
.txtboldul {
  font-weight: bold;
  text-decoration: underline; 
}
#m1wk1s, #m1wk2s { margin-left: 2.815%; }  /* all browsers except IE6 and lower */
#m1wk1f, #m1wk2f { margin-right: 2.815%; }  /* all browsers except IE6 and lower */
/*** end 2nd attempt ***/


#clear-1,
#clear-2,
#clear {
  clear: both;
}
  .span_2_of_5 {
    width: 39.04%;
  }
  .span_1_of_5 {
    width: 18.72%;
  }