/*********** Reset default browser CSS. Based on work by Eric Meyer. ***************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { font-weight: heavy; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table {	border-collapse: collapse;	border-spacing: 0; }
a img {	border: none; }

/************ General global settings ************/
h1, h2, h3, h4, h5, h6, p, blockquote, ul, li, ol, dl, fieldset { margin: .55em 0px; } 
li, dd { margin-left: 0px; }
img { border: 0; }
a:link, a:visited { color: #000099; font-weight: 700; }
a:hover, a:focus, a:active { color: #CC0000; }


/************ The layout stuff ************/

.clock {position:relative;left:25px;top:0px;}

body  {
   background-color:lightgrey;
  
   background-repeat: repeat;
   background-image: url("ocean.jpg");
}

.container {
margin: 0 auto; /* To center the page */
text-align: left;
width: 1000px;
background-color: orange; /* pale yellow */
background-image: url("brightonpier3.jpg");
background-repeat: no-repeat;
border: 2px solid #000000;
line-height: 1.4;
}

.header { 
padding-top: 10px; /* to enclose top margin */ 
height: 200px;
color: white;

background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 2px solid #000000;
}

.mainbox1 {
overflow: hidden;
background-color: #92b7de;
border: 1px solid #000000;
padding: 24px;
}


.mainboxrh {
overflow: hidden;
background-color: lightyellow;
border: 1px solid #000000;
padding: 24px;

}


.mainboxhr {
overflow: hidden;
background-color: #b3f0ff;
border: 1px solid #000000;
padding: 24px;
}


.mainbox93mr {
overflow: hidden;
background-color: #ffe6ff;
border: 1px solid #000000;
padding: 24px;
}


.mainbox44ss {
overflow: hidden;
background-color: #e6ffee;
border: 1px solid #000000;
padding: 24px;
}


.mainbox30smp {
overflow: hidden;
background-color: #f9cb9c;
border: 1px solid #000000;
padding: 24px;
}


.mainbox37smm {
overflow: hidden;
background-color: #ccffcc;
border: 1px solid #000000;
padding: 24px;
}

.mainbox29ss {
overflow: hidden;
background-color: #e6f5ff;
border: 1px solid #000000;
padding: 24px;
}

.mainboxng {
overflow: hidden;
background-color: #FFB6C1;
border: 1px solid #000000;
padding: 24px;
}


.mainboxip {
overflow: hidden;
background-color: #ffffe6;
border: 1px solid #000000;
padding: 24px;
}

.mainboxpv {
overflow: hidden;
background-color: #03fce3;
border: 1px solid #000000;
padding: 24px;
}



.mainbox164qpr {
overflow: hidden;
background-color: #e6e6ff;
border: 1px solid #000000;
padding: 24px;
}


.mainbox162qpr {
overflow: hidden;
background-color:  #ffe6e6;
border: 1px solid #000000;
padding: 24px;
}


.mainbox2 {
float: left;
width: 1100px;
overflow: hidden;
background-color: lightblue;
border: 1px solid #000000;

}

.sidebox {      
float: left;
width: 250px;
overflow: hidden;
border: 1px solid #000000;
margin: 2px 0 0 8px;
background-color: lightgrey;
}

.sidebox2 {      
float: left;
width: 250px;
overflow: hidden;
border: 1px solid #000000;
margin: 2px 0 0 8px;
background-color: lightgrey;
}


.footer {
clear: both;
overflow: hidden;
border-top: 1px solid #000000;
background-color: #CCCCCC;
text-align: center;
}

iframe { border: 0;}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-radius: 50px;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  max-width: 105px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

.imageright { 
float: right;
margin-left: 24px;
padding: 12px;
border-radius: 50px;
}



.menu a {
background-color: #FFCC66;
border: 1px solid #000000;
display: block;
float: left;
width: 77px;
padding: 6px;
margin: 6px;
border: 1px solid #000000;
text-align: center;
text-decoration: none;
border-radius: 50px;

}




.button {
  background-color: #EFD48E;
  border: none;
  color: white;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
}