/* The Reptile Experience style v1.01 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* Images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
* { box-sizing: border-box; }

body {
    font: normal 0.9em/1.3em arial;
    color: white;
    text-align: left;
    background: #9f7851 ;
}

em { font-style: normal; font-weight: bold; color: #FF3333; }

h1 {                    /* Only used for website name in Title Bar */
	font-size: 2em;
	font-weight: bold;
	color: #33FF33;
	text-align: right;
	margin:0;
	padding:0.5em 0;
	overflow: auto;
}

h2 {                    /* Standard section headers */
  font-size: 1.2em;
  color: #33FF33;
  margin: 10px 0 10px 0;
}
h2 em { font-style: italic; }

h3 { font-weight: normal; display: inline; } /* Used for animal names in animals.php */

a { color: #33FF33; font-style: italic; }
a:hover { color: #FF3333; }

li { text-align: left; }

/* specific divs */
#outer_container {
	margin: 15px auto 0 auto;
	max-width: 970px;
}

.video_container {
   position: relative;
   width: 100%;               /* Normally use all of parent... */
   max-width: 640px;          /* ...but no wider than this. */
   padding-top: 56.25%;       /* Trick to maintain 560:315 aspect ratio */
   border: 2px solid #33ff33; /* Green border to box */
   margin: 0 auto 10px auto;  /* Centred in parent */
}

.video {                      /* Use all of container */
   width:100%; height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#coronavirus {
  margin-top: 10px;
	border: 1px #ff3333 solid;
	border-radius: 5px;
}

#centre_column {
  margin-top: 10px;
  width: 75%;
  float: left;
  overflow: hidden;
	border: 1px black solid;
	border-radius: 5px;
}

#right_column {
  margin-top: 10px;
  width: 25%;
  float: left;
}

#comments {
	background: #333333;
	border: 1px black solid;
  border-radius: 5px;
	padding: 5px 10px 10px 10px;
	font-style: italic;
}
#as_featured { color: #99e8ff; font-weight: bold; }

#intro {
	padding:0 10px;
	background: url(./images/background3.jpg) bottom ;
	border: 1px solid black;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-bottom-width: 0;
}

.footer { text-align: right; }

#sectioned_page {
	padding: 10px 10px 10px 10px;
	background: url(./images/background3.jpg)  ;
}

.page_section, .large_page_section {
  margin: 0px 0px 15px 0px;
  background: #333333;
  border: 1px black solid;
}

.large_page_section{
  padding: 10px 10px 10px 10px;
}

.large_page_section ul{
  overflow: hidden;
}

.large_page_section b{
	font-weight: bold;
	color: #33FF33;
}

.page_section_content { padding: 0px 10px 0px 10px; }

.quote {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px 20px 0px 20px ;
	font-style: italic;
}

.imagedivider { width: 690px; }

.centerimage {
        text-align: center;
        color: white;
        margin: 0 auto 0 auto;
        font-style: italic ;
        }

.leftimage {
        margin: 0px 10px 0px 0px;
        float: left;
        font-size: 8pt ;
        font-style: italic ;
        color: white ;
        }

.rightimage {
        margin: 0px 0px 0px 10px;
        float: right;
        font-size: 8pt ;
        font-style: italic ;
        color: white ;
}

.animal {
  margin: 20px 0 20px 0;
  overflow: hidden;
  clear: both;
}
.animal img { border: 1px #cccccc solid; max-width: 100%}

.description, .more_info {
  margin-left: 130px;
}

.latin_name { float: right; font-style: italic; }

#functions, #fetes { width: 50%; float: left; }

#signature { font-size: 0.7em ; float: right ; }
#signature img { vertical-align: middle ; }

#menu_bar {background-color:#f4bb61; width: 100%; display: flex; }
ul.menu {list-style: none; margin: 0; padding: 0; color: white;}
ul.menu * {margin:0; padding:0}
ul.menu a, ul.menu a:visited {display:block; color:#000; text-decoration:none}
ul.menu a:hover {display:block; text-decoration: underline; color: #FF0000;}
ul.menu li {position:relative; float:left; margin:3px 0 3px 15px; background:#f4bb61}
ul.menu ul {position:absolute; top:23px; left:0; background:#f4bb61; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:140px; margin:0}
ul.menu ul li a, ul.menu ul li a:visited {display:block; padding:3px 7px 5px; background-color:#f4bb61}
ul.menu ul li a:hover {text-decoration: underline; color: #FF0000}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {font-weight:bold; font-style:normal;}
ul.menu .menulink:hover, ul.menu .menuhover {}
ul.menu .sub {background:#d1d1d1 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #fff}
.menu_drop {border: 0;vertical-align:middle;float:right}

@media only screen and (max-width:800px) {
  /* For tablets: */
  #centre_column, #right_column {
    width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width:500px) {
  /* For mobiles: */
  .leftimage, .rightimage {
    float: none;
  }
  #functions, #fetes {
    width: 100%;
    float: none;
  }
  .description, .more_info { margin-left: 0; }
  .latin_name { float: none; }
}