@charset "utf-8";
body {
  background-image: url(/images/ice/cooks-bay-background.jpg);
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: repeat;
  background-position: center top;	
  background-attachment: scroll;
  font-family: 'Roboto', sans-serif; font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding-left: 2%;
  padding-right: 2%;
}

img {
  border-style: none;
} 

h1 {
	color: #000000;
	font-size: 24px;
    font-family: 'Broadway Regular', sans-serif;
}

h2 {
  font-size: 16px;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

h3 {
	color: #000000;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	text-align: left;
}

h4 {
  color: #000000;
  font-size: 16px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

h5 {  
  color: #000000;
  font-size: 16px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

a {
  color: #3300ff;
  font-size: 14px;  
  text-decoration: none;
}

a:visited {
  font-size: 14px;
  color: #ff0000;
  text-decoration: none;
}

p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

i {
  font-size: 12px;
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

em {
  font-size: 14px;
  font-style: italic;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

.smaller-text {
    font-size: smaller;
}

.responsive-image {
    width: 100%; /* Makes the image take up the full width of its container */
    height: auto; /* Maintains the aspect ratio */
    max-width: 100%; /* Prevents the image from getting larger than its container */
    display: block; /* Removes the extra space at the bottom of images */
}

.clearfix {
  clear: both;
}

div {
  padding: 5px;
}

* , *:before, :after {
	box-sizing: border-box;
}
	
.container {
  display: grid;
  grid-template-areas: 
    "section1 section1 section1 section1"
    "section2 section2 section2 section2"
	"section3 section3 section3 section3"
    "section4 section5 section5 section7"
    "section10 section10 section10 section10";
	
  grid-template-columns: 1fr 24% 24% 26%;  
  overflow-x: auto;
  background-color:  #ffffff;
  border: 1px solid purple; 
  border-radius: 20px;
  /* grid-gap: 1px; */
}

.header {
  grid-area: section1;
}

.searchbox {
  grid-area: section2;
}	

.byline {
	grid-area: section3;
	overflow: auto;
	text-align: left;
	vertical-align: top;
}

.sidebar {
  grid-area: section4;
  text-align: center;
}

.bodytext {
  grid-area: section5;
}

.bodytext2 {
  grid-area: section7;
  text-align: center;
}

.footer {
  grid-area: section10;
  text-align: center;
}

@media all and (max-width: 768px) {

body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}

.container {
      grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section7"
	  "section10";
      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color:  #ffffff;
}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}

  .container {
      grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section7"
	  "section10";

      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color:  #ffffff;
    }
}