/* internet Advisor Style Sheet */

html, body {
  padding: 0;
  margin: 0;
}

bodyindexblock
{    background:white; /* very outer border */
     font-family:Verdana,Arial,sans-serif; }

  
    
     
.bodybox {
/*	 max-width:960px; */
	 background:white;
     background:transparent;     
	 margin:0;
	 padding:0;
     margin-left:auto;
     margin-right:auto;  }

.oldpage{
     font-size:80%;
     color:green;
     font-weight:bold;
 }     
     
.bus_links{
  width: 95%;
  margin:0 auto;
  text-align:center;
}
.bus_link{
/*   background-color:#e3e0ea;
   border-style:solid; 
   border-color:orange;
   border-width:3px;
   border-radius: 25px;
*/   
   position: relative;
   color:black;
   margin:5px 15px 15px 0;
/*   
   width: 180px;
   height:160px;
  */
   display:inline-block;
   page-break-inside:avoid;
   background-color:white;
   height:220px;
   overflow:hidden;
   
/*float:left; */
margin:15px 5px 0 5px;
width: 300px;
height: 250px;
background-color:white;
padding-left:5px;
padding-top:5px;
border-radius:20px
}

.middle{
    color:black;
    text-align:center;

width: 290px;
height: 220px;
    
    border: 0;
    margin: 0 auto;
    padding: 0;
 }
 
.middle::after {
  content: "More...";
  font-weight: normal;
  background-color:white;
  font-size:75%;
  position: absolute;
  bottom: 0;
  right: 15px;
  height:15px;
} 

.bus_link:hover{
   background-color:white;
   border-color:red;
 }

.bus_link:hover p{
    color : red;
}

.bus_link:hover h2{
    color : red;
}

.bus_link a{
    color:black;
    text-decoration:none;
}
 


a.indxlnk { font-family:Verdana, Arial, sans-serif;font-weight:normal;font-size:16px; color:#002800}
p { color:#002800 }
a:link { color:#004400 }


 
.container { display: flex; flex-wrap: wrap; justify-content: center; background-color:white }

.item {
  background-color: #f1f1f1;
  background-color: red;
  
  width: 280px;
  text-align: center;
  /* border: 6px white solid;*/
  padding:4px;
margin:15px 1% 0 1%; width: 30%;height: 220px;background-color:#efefef; border-top:3px green solid;padding-left:5px;padding-top:5px;border-radius:20px 
}

  
.fullwidthcontainer { float:left ;width: 100%;height:auto; background-color:transparent; }
.halfwidthcontainer { width:44%; height: 84%; float:left;padding:10px }
.indexblock         { float:left; margin:15px 5px 0 5px; width: 300px;height: 230px;background-color:white; padding-left:5px;padding-top:5px;border-radius:20px }
.GoogleSearchBox    { width:100%;padding:0;margin:0;height:40px;margin-bottom:0px;margin-top:2px;z-index:0}
  
/*Headings definition*/
  h1,h2,h3,h4,h5,h6 {color:#336600; padding:0;text-align:left;font-family:Verdana,Arial,sans-serif;}
  h1 {font-size:1.6em;padding-bottom:0;height:auto; margin:10px;text-align:center}
  h2 {font-size:1.6em;padding-bottom:0;height:auto; margin:10px} 
  h3 {font-size:1.4em;padding-bottom:0;height:23px }
  h4 { font-size:1.3em;padding-bottom:0;margin:0;height:auto }
  h5 {font-size:1.2em;padding-bottom:0em;margin:0;height:auto}
  h6 {font-size:1.1em;padding-bottom:0em;margin:0;height:auto}
 .indh2 { font-size:1.2em;line-height:normal;text-align:center;color:#002200 }  
img  { width:100%; height:auto }

/*
.page-header-text2 { font-size:2em;font-weight:bold;text-align:center;margin-top:10px;color:#336600;font-family:'Times New Roman', Times, serif }
*/

.page-header-text2 { font-size:2em;font-weight:bold;text-align:center;margin-top:10px;color:#336600; font-family:sans-serif; color:white; margin-bottom:0; }


h2.banner { font-size:2em;text-align:center }
.snippet   { width: 100%; margin-top:6px; margin-bottom:0px ;margin-left:0; color:#336600;font-size:1.2em; text-align:center;font-family:'Times New Roman', Times, serif; font-weight:lighter }
/* .ltree, .rtree { float:left;width:10%;height:74px } */
.ltree { float:left; height:74px; width:74px;}
.rtree { float:right; height:74px; width:74px;}


/*Paragraph definition*/
  p { color:#112200;font-size:1em;font-weight:normal;text-align:left;font-family:Verdana,Arial,sans-serif}
  p.whatson { color: rgb(128, 128, 128); font-weight: normal; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 1em; width:100%;}
  p.indexpage { color:#333300;font-size:1.2em}
     
/*Link definition*/
.linklook   {background:transparent;color:#336600;font-weight:lighter;font-size:1em;text-decoration:none;}
  a         {color:#112200;font-size:1em;font-weight:normal;text-align:left;font-family:Verdana,Arial,sans-serif} 
  a:link    {background:transparent;color:#336600;font-weight:lighter;font-size:1em;text-decoration:none;}
  a:visited {background:transparent;color:#336600;font-weight:lighter;font-size:1em;text-decoration:none;}
  a:active  {background:transparent;color:#336600;font-weight:lighter;font-size:1em;text-decoration:none;}
  a:hover   {background:transparent;color:#336600;font-weight:lighter;font-size:1em;text-decoration:none;}

.linksize  { font-size:1.5em }

#header { width: 100%; height: 98px; border-bottom:3px #336600 solid;margin-bottom:20px; margin-left: auto; margin-right: auto; margin-top: 0;}


#mainbox {
     height:auto;
     width:962px;
     margin-left:auto;
     margin-right:auto;
     border:4px #FF9900 solid;
     background:white;
}

/* ready for switch of header from wide screen to mobile */
.banner-outer  { width :100%; height:auto;margin-bottom:0px; margin-top: 0;padding:0 ;height: 80px }
.banner-inner  { float:left;  width :100%; height: 91px; margin:0;padding:0 }
.w100pc  { width:100% }
a.indxlnk { font-size:16px; color:black}

.midpic  { width:60%; height:auto; margin-left:auto;margin-right:auto}



/*Menu*/
/* menubox Goes 100% across screen as a container in which menu below has left and right float to centre */
.menubox { float:left;margin:0;padding:0;  width: 100%; height: 23px; margin-top: -13px; border-bottom:3px solid #336600 }
nav      { float:left;margin:0;padding:0;  width: 100%; height: 23px; margin-top: -13px; border-bottom:3px solid #336600 }
/* the container which holds the menu.*/ 
#menu {  margin-left:auto;margin-right:auto;width:510px; height: 20px; margin-top:0px ;margin-bottom:0px; font-size:.9em; font-family: Arial, Helvetica, sans-serif;}

/* defines the outer box which holds the menu items. Note list style none means don't make a vertical list */
#menu ul, #menu li {list-style:none; margin:0; padding:0;width:400px;height:auto }

/* this defines the text and appearance of the top row of buttons +height,padding etc of box holding text */
/* #menu a {display:block; color:#224400; text-decoration:none; padding:0px 4px 0px 4px;font-family:"Courier New", Courier,monospace; font-size:.9em; font-weight:bold; height:auto} */
#menu a {display:block; color:#224400; text-decoration:none; padding:0px 4px 0px 4px;  font-size:.9em; font-weight:bold; height:auto}

/*  drop down text including how wide compared to box it sits in. NB margin top for browser Edge*/   
#menu li ul a { padding:2px 0px 0px 0px; font-weight:normal; font-size:1.2em; width:100%;text-align:center;}

/* top row of menu. height of dividing line, Watch height not to overlap border bottom from 'banner-outer' */ 
/* #menu li {float:left; border-right:2px solid #336600; border-left:2px solid #ffffff;width:auto;height:auto;background-color:#f8f8f0 } */
#menu li {float:left; border-right:2px solid #ffffff; border-left:2px solid #ffffff;width:auto;height:auto;background-color:#f8f8f0 }

/* this line for drop down    Not sure about the width. Margin left shifts whole drop down left   */
#menu li ul {position:absolute; left:-999em; display:none; width:200px; margin-left:-4%; font-weight:lighter; background:#f0f0f0;padding-top:0px; z-index:1000; height:60px  }

/*                width of drop down  border between drop down items  */
#menu li li {padding:0; width: 200px; border:solid #336600; border-width:0 1px 1px 1px }

#menu li ul ul {margin:-1.75em 0 0 14em; border-top:1px solid #ffcccc; }
/*                                      line at top of second pull out */

#menu li:hover ul ul, #menu li:hover ul ul ul {left:-999em; display:block }
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul {left:auto; display:block}
#menu li:hover {background:#C0C0C0; display:block }
/*              of hover position */

#menu li#first-left { border-left:none;}
#menu li#last-right { border-right:none;}
#menu a:focus #mes,nu a:hover {color:#fff;} 
/*                        colour of writing */

#menu a:active {color:#000;}
#menu li:hover a.parent-link {color:#fff;}
#menu li li:hover a.child-link {color:#fff;}
#menu a.current {background-color: #001c26; color: #fff;}

/* JavaScript for menu, for IE6 */
#menu li.js-show a.parent-link {color:#fff;}
#menu li li.js-show a.child-link {color:#fff;}
#menu li.js-show ul {left:auto;}
#main-menu li.js-show li ul {left:-999em;}
#menu li li.js-show ul {left:auto;}
#menu li.js-show {background:#c51c26;}

.jd { border:8px black solid;padding:18px;margin:32px }
.jds { width:90%;padding:24px 0 32px 0;}
.jd h2 { font-size:1.2em }



.strapline{ 
text-align:center;
font-weight:bold;
font-family:sans-serif;
font-size:1.2em;
color:#336600;
}

   @media screen and (max-width: 910px) {
   p        { font-size:0.9em }
    .indexblock    { height: 240px  }
    .indexblock-sp { height: 210px  }
    .indexblock-sp2col { height: 210px  }
}


   @media screen and (max-width: 720px) {
   .indexblock        { height:230px }
   .indexblock-sp     { height:230px }
   .indexblock-sp2col { height:230px }
}


   @media screen and (max-width: 680px) {
    .strapline{ font-size:0.9em; }
    .page-header-text2 { font-size:1.6em } /* was 1.6em */
    .banner-outer  {height: 69px;}
    .menubox  { margin-top:-23px } 
    nav  { margin-top:-23px } 
    #menu li ul { margin-left:-10% }    /* drop down offset to the left */
    .indexblock    { width:47% ;height:220px }
    .indexblock-sp { width:47% ;height:226px }
    .indexblock-sp2col { width:47% ;height:226px }
    p { font-size:.8em}  
    h3   { font-size:1.3em }      
.jd { border:6px black solid;padding:12px;margin:12px }
.jds { width:90%;padding:20px 0 20px 0;}
}



   @media screen and (max-width: 570px) {
   .strapline{ font-size:0.8em;}
    .page-header-text2 { font-size:1.3em; }  /* heading title on home page */
    .banner-outer  {height: 70px}
    #menu { width: 400px;margin-top:2px }            /* box that holds menu. is less than width and centres by float */
    #menu a { padding:0px 2px 0px 2px;font-size:.9em; }  /* top menu line of font size */  
    #menu li ul a { font-size:1.1em;}      /* drop down font size */
    .menubox { margin-top: -33px }    /* goes all across page and holds floating #menu */
    nav { margin-top: -33px }    /* goes all across page and holds floating #menu */
    #menu li ul { margin-left:-18% }    /* drop down offset to the left */
    #menu li ul { margin-left:-22% }    /* drop down offset to the left */
    .indexblock     { height:240px;width:46% }
    .indexblock-sp  { height:260px;width:46% }
    .indexblock-sp2col  { height:260px;width:46% }
.jd { border:4px black solid;padding:8px;margin:8px }
.jd  h2 { font-size:1.1em }
.jds { width:90%;padding:16px 0 16px 0;}
/*   .ltree, .rtree { display:none } */
   .rtree { display:none }
   .midpic { width:250px; height:auto; margin-left:auto;margin-right:auto}
   .linksize  { font-size:.9em }
}

   @media screen and (max-width: 440px) {
    .strapline{ font-size:0.7em;} 
    .page-header-text2 { font-size:1.0em }
    #menu a { font-size:1em }  /* top menu line of font size */  
    #menu li ul a { font-size:0.9em;}      /* drop down font size */
    .snippet { margin-bottom:8px }
    .banner-outer  {height: 68px}
    .indexblock    { height:232px }
    .indexblock-sp { height:250px }
    .indexblock-sp2col { height:250px }
    .halfwidthcontainer { width:98%; height:auto; float:left;padding:0px;margin-bottom:10px }
    h2 { font-size:1em }   
    h3 { font-size:1.1em }   
}

   @media screen and (max-width: 420px) {
    .strapline{ font-size:0.6em;} 
    .page-header-text2 { font-size:.8em } /* was 1em */
    .banner-outer  {height: 56px}
    .indexblock     { height:200px;width:98% }
    .indexblock-sp  { height:170px;width:98% }
    .indexblock-sp2col  { height:170px;width:98% }
/* img.indexpage { width:100%;margin-left:0%;margin-top:2px;margin-bottom:0} */
    #menu a { font-size:.9em }  /* top menu line of font size */  
    #menu li ul { margin-left:-30% }    /* drop down offset to the left */
    #menu li ul a { font-size:.9em;}      /* drop down font size */
}



   @media screen and (max-width: 360px) {
     .strapline{ font-size:0.5em;} 
    .page-header-text2 { font-size:.8em }
    .indexblock     { height:190px;width:98% }
    .indexblock-sp  { height:190px;width:98% }
    .indexblock-sp2col  { height:190px;width:98% }
    #menu a { font-size:.8em }  /* top menu line of font size */  
    #menu li ul { margin-left:-30% }    /* drop down offset to the left */
    #menu li ul a { font-size:.8em;}      /* drop down font size */
    h1 { font-size:1.3em }
    h2 { font-size:1.2em }
    h3 { font-size:1.1em }   
    .indexblock { width:98% ;height: 180px  }
    .item { width:320px }
}

@media screen and (max-width: 192px) {
    .indexblock    { height: 244px  }
    h3.snippet { font-size:1em }   
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  
  top: 50%;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}