sup {
  vertical-align: super;
  font-size: smaller; 
}
.indentone {
  padding-left: 2em;
}
.boldul {
  font-weight: bold;
  text-decoration: underline;
}
/*** 
  I've put the details of the button into #myBtn as the 'button' is changed in css/contacttwo,css
  for the 'Subit/Envoyer' button

button {
  background-color: #E1E8ED;
  border: none;
  cursor:pointer;
}
***/
#myBtn, #myBtn2 {
  background-color: #E1E8ED;
  border: none;
  cursor:pointer;
  width: 20px;
  height: 20px;
  padding: 0px;
}
#myBtn:hover {
/*  background-color: red; */
}
#myBtn img, #myBtn2 img {
  opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#myBtn img:hover, #myBtn2 img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0);  /* Fallback color */
  background-color: rgba(0,0,0,0.4);  /* Black w/ opacity */
}

/*** Default will be for small devices < 640px ***/
/* Modal Content/Box */
.modal-content {
  background-color: #E1E8ED; /* #fefefe; */
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0px;
  border: 1px solid #888;
  width: 80%; /* 80% Could be more or less, depending on screen size */
}
@media only screen and (min-width:40em) { /* 40em will be 40x16 i.e. >= 640px */
  .modal-content {
    width: 80%; /* 80% Could be more or less, depending on screen size */
  }
}
@media only screen and (min-width:50em) {   /* 50em will be 50x16 i.e. >= 800px */
/*** Desktop and Large Desktop ***/
  .modal-content {
    width: 60%; /* 80% Could be more or less, depending on screen size */
  }
}






/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: yellow;
  text-decoration: none;
  cursor: pointer;
}
.fermercursor {
  cursor: pointer;
}
.plusdinfo {
  vertical-align: sub;
}
.modal-header {
  padding: 2px 16px;
  background-color: #B91717; /* #5cb85c; */
  color: white;
}
.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #B91717; /* #5cb85c; */
  color: white;
}
.smalldivider {
  height: 4px; 
}
.gallerydispnone {
  display: none;
}
/***
  To ensure we don't need different versions of onecol.js, twocol.js, threecol.js, we'll
  set the 'More Info' to a height of zero and don't display
***/
.childOfDivToZero {
  height: 0px;
  display: none;
  line-height: 0;
}
.seasonmed {
  text-align:center;
  background-color: #33FF33; 
}
.seasonhigh {
  text-align:center;
  background-color: #FA9900; 
}
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; 
  }
}
