@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,500,600,700&subset=latin-ext');

body {
  font-family:'Fira Sans';
  background-color:#eee;
}

header, section, footer, nav {
  display:block;
}

#wrapper {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.pagewidth {
  width:90%;
  max-width:1600px;
  margin:0 auto;
}

header {
  position:fixed;
  height:120px;
  width:100%;
  
  z-index:10;
  
  background-color:#104f55;
  color:#9ec5ab;
}

#topbar {
  height:45px;
  width:100%;
  background-color:#222;
}

nav {
  text-align:center;
  height:75px;
  line-height:75px;
}

nav a, .dropdown {
  display:inline-block;
  line-height:50px;
  padding:0 10px;
  color:#9ec5ab;
}

nav a:hover, .dropdown:hover {
  background-color:#a24936;
}

.dropdown:hover .dropcontent {
  display:block;
}

.dropcontent {
  display:none;
  position:absolute;
  min-width:150px;
  text-align:left;
  background:#104f55;
  margin-left:-10px;
}

.dropcontent a::before {
  content: "» ";
}

.dropcontent a {
  display:block;
}

/*************************************/


/*************************************/

#navleft, #navmid, #navright {
  display:inline-block;
  height:inherit;
  box-sizing:border-box;
}

#navleft, #navright {
  width:10%;
}

#navmid {
  width:80%;
}

#navleft {
  padding-left:10px;
}

#navright {
  text-align:right;
  padding-right:10px;
}

#container-wrapper {
  position:relative;
  top:120px;
  width:100%;
  min-height:calc(100% - 120px);
}

section {
  box-sizing:border-box;
  padding:20px;
  text-align:center;
}

footer {
  position:relative;
  top:50px;
  text-align:center;
  line-height:60px;
  width:100%;
  height:60px;
  background-color:#999;
}

/*************************************/

.onethird, .twothird, .one, .half {
  display:inline-block;
  vertical-align:top;
  margin-bottom:20px;
  border-radius:2px;
}

.onethird {
  width:33.3%;
  border:1px solid #ccc;
}

.twothird {
  width:66.6%;
}

.one {
  width:100%;
}

.half {
  width:50%;
}

/*************************************/

h1 {
  margin-top:0;
  font-weight:300;
  text-align:center;
}

a {
  color:#a24936;
  text-decoration:none;
}

p {
  margin:0;
}

table, form {
  margin:0 auto;
}

ul {
  padding-left:20px;
  margin:0;
}

/*************************************/

input, select, option {
  height:30px;
  border:none;
  padding:5px;
  font-family:'Fira Sans';
  border-radius:2px;
}

input[type="submit"] {
  background-color:#ccc;
  padding:0 15px;
  border:1px solid #bbb;
}

input[type="submit"]:hover {
  background-color:#ddd;
  border-color:#9ec5ab;
  cursor:pointer;
}

table.signup {
  margin:0 auto;
  width:80%;
}

table.signup tr td:first-child {
  width:140px;
  text-align:right;
}

table.signup tr td:nth-child(2) {
  width:220px;
}

table.signup tr td:nth-child(3) {
  font-size:15px;
}

table.signup input {
  width:220px;
}

/*************************************/

.notif {
  display:table;
  position:relative;
  min-height:45px;
  width:50%;
  border-right:4px solid;
  /*border-left:75px solid;*/
  border-radius:2px;
  margin: 0 auto 20px;
  text-align:left;
  box-shadow:2px 2px 5px #aaa;
  box-sizing:border-box;
}

.notificon, .notifmsg {
  display:table-cell;
  vertical-align:middle;
}

.notificon {
  width:75px;
  text-align:center;
  padding:15px 0;
  color:#eee;
}

.notifmsg {
  padding:15px;
}

.msg_info {
  border-color:#104f55;
}

.msg_info .notificon {
  background-color:#104f55;
}

.msg_scs {
  border-color:#aed04f;
}

.msg_scs .notificon {
  background-color:#aed04f;
}

.msg_warn {
  border-color:#e39534;
}

.msg_warn .notificon {
  background-color:#e39534;
}

.msg_err {
  border-color:#c54129;
}

.msg_err .notificon {
  background-color:#c54129;
}

.msg_event {
  border-color:#876d4e;
}

.msg_event .notificon {
  background-color:#876d4e;
}

/*************************************/

.petswrapper {
  display:block;
  text-align:center;
}

.petbox, .fishbox {
  display:inline-block;
  vertical-align:top;
  margin:10px;
  padding:5px;
  text-align:center;
  width:200px;
  border:1px solid #000;
  border-radius:2px;
}

.petbox {
  height:260px;
}

.fishbox {
  height:200px;
  
}

/*************************************/

span.critical {
  font-weight:bold;
  color:#d83131;
}

span.bad {
  color:#d83131;
}

/***********************************/

table.pedigree, table.pedigree td {
	border: 1px solid #8d5d52;
	border-collapse: collapse;
}
table.pedigree td {
  width:300px;
	padding: 3px;
	height: 40px;
  text-align:center;
  background-color:#c17f70;
}

table.pedigree tr:nth-child(1) td, table.pedigree tr:nth-child(3) td:nth-child(2) {
  background-color:#d1a197;
}

/*************************************/

form.petcare {
  margin:0;
}

form.petcare input[type="submit"] {
  display:inline-block;
  font-size:17px;
  font-family:'Fira Sans';
	border:1px solid #876d4e;
  background-color:#c6ad8f;
  width:120px;
  height:60px;
  border-radius:3px;
}

form.petcare input[type="submit"]:hover {
  background-color:#d3ba9c;
}

.petcare-option {
  display:inline-block;
	border:1px solid #876d4e;
  background-color:#c6ad8f;
  width:180px;
  height:60px;
  border-radius:3px;
}

.petcare-option:hover {
  background-color:#d3ba9c;
}