body
{
  padding:0px;
  font-family: Arial,sans-serif;
  background-color:#EEE;
  color:#111;
  font-size:12pt;
  margin-left:150px;
}

a:link
{
  color:#336666;
  text-decoration:underline;
  font-size:inherit;
  background-color:transparent;
}

a:visited
{
  color:#336600;
  text-decoration:underline;
  font-size:inherit;
  background-color:transparent;
}

a:hover
{
  color:#009900;
  background-color:transparent;
}

a img
{
  border:0px;
}

ul#navigation
{
  position:absolute;
  background-color:#CCC;
  height:auto;
  top:0px;
  left:0px;
  list-style-type:none;
  font-weight:bold;
  font-size:11pt;
  padding:10px;
  padding-top:10px;
  margin:0px;
  border-bottom-right-radius:15px;
}

ul#navigation ul
{
  list-style-type:none;
  font-weight:normal;
  padding:0px;
  margin:0px;
}

ul#navigation li#hydraimg {
  text-align:center;
}

ul#navigation li#monsterimg {
  text-align:center;
}

div#navOpener {
  display: none;
}

h1
{
  text-align:center;
  margin:0px;
  padding:0px;
  margin-top:15px;
  font-size: 15pt;
  font-family: 'Sofadi One';
  color: #444;
}

/* ribbon ref: https://codepen.io/jeffpowrs/pen/DgOjKV */

#ribbon_container {
  display: flex;
  justify-content: center;
}

#ribbon {
  width: 300px;
	padding: .34em 1em;
	margin: 0px;
	position:relative;
	color: #ffffff;
  font-size: 15pt;
	font-family: 'Sofadi One', sans-serif;
	text-align: center;
	letter-spacing:0.1em;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
		inset 0px 0px 20px rgba(0,0,0,0.1),
		0px 1px 1px rgba(0,0,0,0.4);
	background: -webkit-linear-gradient(top,#ff0000, #8b0000);
  display: inline-block;
}

#ribbon a {
  color: #ffffff;
  text-decoration: none;
}

#ribbon a:hover {
  font-weight: bold;
}
	
#ribbon:before, #ribbon:after {
  content: "";
  width:.2em;
  bottom:-.5em;
  position:absolute;
  display:block;
  border: .9em solid #aa0000;
  box-shadow:0px 1px 0px rgba(0,0,0,0.4);
  z-index:-2;
}
	
#ribbon:before {
  left:-1.35em;
  border-right-width: .75em;
  border-left-color:transparent;
}
	
#ribbon:after {
  right:-1.35em;
  border-left-width: .75em;
  border-right-color:transparent;
}
	
#ribbon_content:before, #ribbon_content:after {
  content:"";
  bottom:-.5em;
  position:absolute;
  display:block;
  border-style:solid;
  border-color: #ff0000 transparent transparent transparent;
  z-index:-1;
}
	
#ribbon_content:before {
  left: 0;
  border-width: .5em 0 0 .5em;
}
	
#ribbon_content:after {
  right: 0;
  border-width: .5em .5em 0 0;
}

h1#dinoLogo img {
  width: 386px;
  height: 59px;
}

h2
{
  text-align:center;
  font-style: normal;
  font-weight: bold;
  color: blue;
  margin-top: 20px;
  background-color: #FAFAFA;
  border-bottom: solid 1px #9a9a9a;
  padding-bottom: 0px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 54%);
  font-size: 22pt;
}

h3
{
  font-size:17pt;
  border-bottom: 2px dashed #0033FF;
  color:#990000;
}

h4
{
  font-size:15pt;
  color:#0033FF;
  font-weight:normal;
  padding-left:15px;
}

h4.news
{
  font-size: 13pt;
  font-weight:normal;
  background-color:#DFDFDF;
  color:#000;
  margin:0px;
  padding-left:5px;
  border-top-left-radius: 10px;
}

h4.impnews
{
  font-size: 15pt;
  background-color:#FFF;
  color:#000;
  margin:0px;
  padding-left:5px;
  border-top-left-radius: 10px;
}

h4.news img
{
  float:left;
  padding-top:4px;
  padding-right:2px;
}

h4.impnews img
{
  float:left;
  padding-top:5px;
  padding-right:2px;
}

h5.news
{
  font-size:15px;
  background-color:#CCC;
  padding:0px;
  margin:0px;
  color:#333;
  font-style:italic;
  border-bottom-left-radius: 10px;
}

address#bottom
{
  border-top:solid 1px #FFFFFF;
  margin-top:20px;
  padding-bottom:10px;
  padding-top: 5px;
  text-align: center;
}

address#bottom img
{
  width:88px;
  height:31px;
  border:0px;
}

acronym, abbr
{
  border-bottom:1px dotted #777777;
  cursor:help;
}

q {font-style:italic;}
q:before {content:""}
q:after {content:""}

blockquote
{
  font-size: 12px;
  color:#555;
  margin-left:10px;
  font-style:italic;
  border-left:1px dotted #0000FF;
  padding-left:8px;
  background-color:inherit;
}

p.gallery
{
  text-align:center;
}

p.gallery img, p img
{
  border:solid 3px #DDD;
}

p.gallery a:hover img, p a:hover img
{
  border:solid 3px #FFF;
}

div.newgallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: top;
  justify-content: center;
}
  
div.newgallery figure {
  display: inline;
  margin: 5px;
  text-align: center;
}
  
div.newgallery figure figcaption, .newgalleryCaption {
  font-style: italic;
  font-size: 13px;
  text-align: center;
}

.newgalleryCaption {
  margin-bottom: 15px;
}
  
div.newgallery figure img {
  border: 3px solid #909090;
  border-radius: 2px;
}
  
div.newgallery figure a:hover img {
  border: 3px solid #555555;
  -webkit-box-shadow: 1px 1px 5px 1px rgba(100, 100, 100, 0.75);
  -moz-box-shadow:    1px 1px 5px 1px rgba(100, 100, 100, 0.75);
  box-shadow:         1px 1px 5px 1px rgba(100, 100, 100, 0.75);
}

table.datatable
{
  font-size:15px;
  border:#AAA 1px solid;
  margin-bottom:20px;
}

.datatable th {
  background-color:#AAA;
  color:inherit;
  text-align:left;
  font-weight:bold;
  padding:2px;
}

.datatable td {
  background-color:#CCC;
  color:inherit;
  padding:3px;
}

@media print
{
  #navigation {display:none;}

  /* ul#navigation {
    position: relative;
  }

  ul#navigation ul {
    display: block;
  }

  ul#navigation li {
    display: inline;
  }

  ul#navigation li#hydraimg {
    display: none;
  }
  
  ul#navigation li#monsterimg {
    display: none;
  } */

  #content {padding:0px;}
  body {margin-left:0px;}
  h2 a:link, h2 a:visited {color:#000000; text-decoration:none;}
}

@media screen and (max-width:1023px) {

  body {
    margin-left: 10px;
  }

  ul#navigation {
    position: relative;
    display: none;
  }

  ul#navigation li {
    padding-top: 7px;
  }

  ul#navigation img {
      display: none;
  }

  div#mobilenavigation {
      display: none;
  }

  div#navOpener {
      display: block;
      background-color:#FFF;
      padding: 5px;
      color:#336666;
  }

  div#navOpener.navOpen {
      background-color:#CCC;
      border-radius: 0px;
  }

  ul#navigation.navOpen {
      display: block;
  }

  h1#dinoLogo img {
    width: 300px;
    height: 46px;
  }

  #ribbon_container {
    margin-bottom: 20px;
  }
}