html,body {
    width:100%;
    font-family:Arial;
}

body {
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #F6F6F6;
}

img {
    border-style: none;
}
    
#banner {
    width: 100%;
    height: 200px;
    padding: 0;
    background-color: #E9E9E9;
    z-index: 100;
}

#bannerContent {
    margin: 0 auto;
    width: 1000px;
    position: relative;
}

#banner img.otago {
    position: absolute;
    top: 15px;
    left: 0;
}

#banner img.parasite {
    padding-top: 5px; 
    z-index: -10;
    opacity: .6;
    filter: alpha(opacity=60)
}

#banner h1 {
    position: absolute;
    top: 20px;
    right: 0;
    text-align:  right;
    font-size: 32pt;
    padding: 0;
    margin: 0;
    text-shadow: 1px 1px 1px #999999;
    color: #222222;
}

#banner h2 {
    position: absolute;
    top: 90px;
    right: 0;
    text-align:  right;
    font-size: 20pt;
    padding: 0;
    margin: 0;
    text-shadow: 1px 1px 1px #999999;
    color: #222222;
}

#navbar {
    position: fixed;
    background-color: #133567;
    z-index: 1000;
    box-shadow: 0 0 1px #000;
    text-align: left;
    width: 100%;
    top: 150px;
    left: 0;
    height: 50px;
}

#navContent {
    margin: 0 auto;
    width: 998px;
}

#navbar a {
    text-decoration: none;
    display: block;
    cursor: pointer;
    color: #F6F6F6;
    position: relative;
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
    height: 50px;
}

#navbar .navtext {
    padding: 16px;
    display: block;
}

#navbar a:hover {
    background-color: #0D264D;
}

#navbar a.current {
    background-color: #0D264D !important;
    cursor: default;
}

#navbar ul,
#navbar li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar li {
    display: block;
    width: auto;
    float: left;
    margin-left: -1px;
}

#navbar ul {
    text-align: left;
    width: auto;
    display: inline-block;
    position: relative;
}

#navbar ul + ul {
    text-align: right;
    float: right;
}

#navbar li li {
    display: block;
    width: 100%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #0D264D !important;
    padding: 8px 16px !important;
    height: 20px !important;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color: white !important;
    background-color: #AAA !important;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#search_form {
    padding-top: 9px;
    float: right;
}

#search_input
{
    color: #222222;
    padding: 7px;
    width: 180px;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    box-shadow: none; 
    outline: 0;
    margin: 0;
    float: right;
    margin-right: 4px;
}

#search_input:focus
{
    border: 1px solid #DDDDDD;    
}

#search_button
{
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 1px;
    background: #133567 url('Images/search.png') no-repeat center;
    outline: none;
    cursor: pointer;
    float: right;
}

#search_button:hover
{
    background-color: #0D264D;
}


#content {
    margin: 0 auto;
    width: 1000px;
    padding-bottom: 60px;
}

.hrule {
    height: 1px;
    width: 600px;
    margin: 0 auto;
    background-color: #999999;
}

a {
    color: #4285f4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p {
    text-align: justify;
}

p.imgText {
    font-size: 10pt;
    text-align: center !important;
}

h2 {
    margin: 0;
    padding: 60px 0 6px 0;
    text-align: center;
}

li {
    text-align: left !important;
}

.item img {
    margin: 0 18px;
}

h3 {
    margin: 0;
    padding: 30px 0 0 0;
    text-align: center;
}

.insearch {
    display: none;
}

.searching {
    background: url(Images/loading.gif) 50% 5% no-repeat;
    background-size: 50px;
    background-color: #F6F6F6;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: -5px;
    right: -5px;
    z-index: 500;
    display: none;
}

.box {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #E9E9E9;
    border-radius: 6px;
    clear: both;
    overflow: hidden;
    position: relative;
}

.box p {
    padding: 0;
    margin: 0;
    text-align: left;
}

.box img {
    border-radius: 6px;
}

.box img.people {
    margin-bottom: 18px;
}

.box .right .order {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.left {
    float: left;
    height: 100%;
    margin-right: 20px;
}

.right {
    float: right;
    height: 100%;
    margin-left: 20px;
}

.peopleP {
    padding-left: 220px !important;
}

.hide+.hide {
	display: none;
}

.button {
	-moz-box-shadow: 0px 2px 0px 0px #444444;
	-webkit-box-shadow: 0px 2px 0px 0px #444444;
	box-shadow: 0px 2px 0px 0px #444444;
	background-color:#d1d1d1;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid rgba(33, 33, 33, 0.1);
	display:inline-block;
	color:#333333 !important;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
/*	height: 36px;*/
	text-decoration: none;
	text-align: center;
    outline: none;
    padding: 8px 20px;
    margin: 0;
    
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover {
	background-color:#d1d1d1;
    cursor: pointer;
	border:1px solid rgba(33, 33, 33, 0.3);
    text-decoration: none;
}

.button:active {
	-moz-box-shadow: 0px 1px 0px 0px #333333;
	-webkit-box-shadow: 0px 1px 0px 0px #333333;
	box-shadow: 0px 1px 0px 0px #333333;
}

.blue {
	background-color: #133567 !important;
    color: #F9F9F9 !important;
}

.blue:hover {
	background-color: #0D264D !important;
}

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 100%; min-width: 600px; max-width: 1000px; min-height: 400px; margin: 0 auto; padding: 0; position: relative;
    background: url(Images/loading.gif) 50% 50% no-repeat;
    background-size: 50px;
    background-color: #F6F6F6;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 900;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 50%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(Images/left_arrow.png) 10% 50% no-repeat;}
.cycle-next { right: 0; background: url(Images/right_arrow.png) 90% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .8; filter: alpha(opacity=80) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/
/*
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
}
*/

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #E9E9E9;
    color: #444444;
    display: none;
}
#footerContent {
    max-width: 1000px;
    min-width: 700px;
    padding: 6px 0;
    height: 40px;
    margin: 0 auto;
}

#footer p {
    float: left;
    font-size: 9pt;
}

#footer p.version {
    float: right;
    text-align: right;
}