@charset "UTF-8";
/* CSS Document */


/* body */
html {-webkit-text-size-adjust:none}

body#entrance {background: #3a2313 url(img/zoobkg.jpg) no-repeat top center;  -webkit-background-size: 2000px 1416px; margin:0 auto;  padding:0px!important; /*this padding hack fixes things */ padding:0px 0px 0px 1px;border:0; width:800px; color:#382a27; font: 100%/100% Arial, Helvetica, sans-serif; text-align: center}
body#white {background: #ffffff url(img/white-zookeeper-bkg.gif) no-repeat top center; margin:0 auto; padding:0px!important; /*this padding hack fixes things */ padding:0px 0px 0px 1px;border:0; width:800px; color:#382a27; font: 100%/100% Arial, Helvetica, sans-serif; text-align: center}
body#blog {background: #f80000 url(img/blog-zookeeper-bkg3.gif) no-repeat top center;  -webkit-background-size: 4000px 1800px; margin:0 auto;  padding:0px!important; /*this padding hack fixes things */ padding:0px 0px 0px 1px;border:0; width:800px; color:#3a2313; font: 100%/100% Arial, Helvetica, sans-serif; text-align: center}


/* Container */
#zoocrate {width: 800px;margin: 0 auto;text-align: left; padding: 0;position: relative;}

/* text and imagestyles */

p {font-size:11.5px; line-height: 17px; margin: 0; padding: 0}
h1 {color:#382a27; font-weight: bold; font-size:10px; line-height: 14px; margin: 0; padding: 0}
h1 a {color: #382a27; outline: none;}
h1 a:visited {color: #382a27} 
h1 a:hover {color: #958a0A; text-decoration: underline} 
h1 a:active {color: #958a0A; text-decoration: underline;outline: none} 

h2 {color:#382a27; font-weight: bold;  font-size: 11px; line-height: 14px; margin: 0; padding: 0}
h2 a {color: #382a27; outline: none;}
h2 a:visited {color: #382a27} 
h2 a:hover {color: #958a0A; text-decoration: underline} 
h2 a:active {color: #958a0A; text-decoration: underline;outline: none} 

h3 {color:#382a27 ; font-weight: bold; font-size:18px; line-height: 25px; margin: 0; padding: 0}
h3 a {color: #382a27 ; outline: none;}
h3 a:visited {color: #382a27} 
h3 a:hover {color: #958a0A; text-decoration: underline} 
h3 a:active {color: #958a0A; text-decoration: underline;outline: none}

a {color: #958a0A;text-decoration:none;outline: none} a:visited {color: #958a0A} a:hover {text-decoration: underline} a:active {text-decoration: underline;outline: none}
img {border-style: none}

.floatleft {float: left; margin: 0; padding: 3px 8px 3px 0px }
.floatright {float: right; margin: 0; padding: 3px 0px 3px 8px }

/* header */
#header {clear:left; float:left; width:800px;background-color: white;height: 125px;display: inline; position: relative; overflow: hidden}
#logo {display: block;position:absolute;outline:none;border:0;margin:0;padding:0;top:0; left:0;width:169px; height: 125px; float:left}
#cage {display: block;position:absolute;outline:none;top:0; left:169px;width:55px; height: 50px; float:left}
#blacknav {display: block;position:absolute;outline:none;top:0; left:787px;width:13px; height: 50px; background-color: #382a27;float:left;overflow: hidden}
#logotype {display: block;position:absolute;outline:none;top:50px; left:170px;width:266px; height: 75px; float:left}
#tagline {display: block;position:absolute;outline:none;top:50px; left:458px;width:168px; height: 30px; float:left}
#mission {display: block;position:absolute;outline:none;top:80px; left:458px;width:385px; height:45px; float:left;text-align: justify; font-size:0.55em;line-height:1.2em}


/* flash */
#flash {clear:left; float:left; width:800px;height: 200px;display: inline; position: relative; overflow: hidden}

/* White Space */

#whitespace50 {clear:left; float:left; width:800px;height: 50px;display: inline; position: relative; overflow: hidden}


/* column container */
	.colmask {
	    position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
            width: 798px;			/* width of whole page */
	    overflow:hidden;		/* This chops off any overhanging divs */
            border:1px solid #382a27;}
/* holy grail 3 column settings */
    .holygrail { }
    .holygrail .colmid {
            float:left;
            width:200%;
            margin-left:-200px; 	/* Width of right column */
            position:relative;
            right:100%;}
    .holygrail .colleft {
            float:left;
            width:100%;
            margin-left:-50%;
            position:relative;
            left:400px;         	/* Left column width + right column width */  }
    .holygrail .col1wrap {
            float:left;
	    width:50%;
	    position:relative;
	    right:200px;        	/* Width of left column */
            padding-bottom:0; 	/* Centre column bottom padding. Leave it out if it's zero */ }
    .holygrail .col1 {
            margin:0 200px;     /* Centre column side padding: Left padding = left column width + centre column left padding width     Right padding = right column width + centre column right                 padding width */
            width: 396px;
            position:relative;
	    left:200%;
	    overflow:hidden;
            border-left:1px solid #382a27;
            border-right:1px solid #382a27; }
    .holygrail .col2 {
            float:left;
            float:right;			/* This overrides the float:left above */
            width:200px;        	/* Width of left column content (left column width minus left and right padding) */
            position:relative;
            right:0px;         	/* Width of the left-had side padding on the left column */ }
    .holygrail .col3 {
            float:left;
            float:right;			/* This overrides the float:left above */
            width:200px;        	/* Width of right column content (right column width minus left and right padding) */
            margin-right:0px;  	/* Width of right column right-hand padding + left column left and right padding */
            position:relative;
            left:50%; }


.overlay {position: absolute; top: 0; bottom: 0; left: 0; border:0; width: 100%; height: 100%; min-height: 1900px; background: #ffffff; opacity: 0.80; -moz-opacity: 0.80; filter:alpha(opacity=85);}
.container {position: relative; float: left}
.content {position: relative; float: left}
#column-1 {width: 396px;position:relative; top: 23px; border:0}
#column-1 .content {width: 376px;padding: 10px;position:relative}
* html #column-1 .overlay {height: expression(document.getElementById("column-1").offsetHeight);}

#column-2 {width: 200px;position:relative; top: 23px; border:0}
#column-2 .content {width: 180px; padding: 10px;position:relative}
* html #column-2 .overlay {height: expression(document.getElementById("column-2").offsetHeight);}

#column-3 {width: 200px;position:relative; top: 23px; border:0}
#column-3 .content {width: 180px;padding: 10px;position:relative}
* html #column-3 .overlay {height: expression(document.getElementById("column-3").offsetHeight);}



/* Top Column Cages */

div.columncage {clear: both;display: block; position: absolute; outline:none; top: 0; left:0; width: 100%; height: 23px; float:left; margin:0; padding:0;}

div.whoweare {clear: both;display: block; position: absolute; outline:none; top: 0; left:0; width: 100%; height: 23px; float:left; margin:0; padding:0; background-image:url("img/who-we-are-green.gif");}
div.whoweare a, div.whoweare a:link, div.whoweare a:visited {display:block;}
div.whoweare img {width:100%;height:100%; border:0}
div.whoweare a:hover img {visibility:hidden;}

div.zookeepernews {clear: both;display: block; position: absolute; outline:none; top: 0; left:0; width:100%; height: 23px; float:left; margin:0; padding:0; background-image:url("img/zookeeper-news-black.gif");}
div.zookeepernews a, div.zookeepernews a:link, div.zookeepernews a:visited {display:block}
div.zookeepernews img {width:100%;height:100%; border:0}
div.zookeepernews a:hover img {visibility:hidden;}

div.connectwithus {clear: both;display: block; position: absolute; outline:none; top: 0; left:0; width:100%; height: 23px; float:left; margin:0; padding:0; background-image:url("img/connect-with-us-black.gif");}
div.connectwithus a, div.connectwithus a:link, div.connectwithus a:visited {display:block}
div.connectwithus img {width:100%;height:100%; border:0}
div.connectwithus a:hover img {visibility:hidden;}

div.zookeeperblog {clear: both;display: block; position: absolute; outline:none; top: 0; left:0; width:100%; height: 23px; float:left; margin:0; padding:0; background-image:url("img/zookeeper-blog-black.gif");}
div.zookeeperblog a, div.zookeeperblog a:link, div.zookeeperblog a:visited {display:block}
div.zookeeperblog img {width:100%;height:100%; border:0}
div.zookeeperblog a:hover img {visibility:hidden;}

/*navigation*/

div.entrance {display: block;position:absolute;outline:none;top:0; left:224px;width:90px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/entrance-glow.gif")}
div.entrance a, div.entrance a:link, div.entrance a:visited {display:block}
div.entrance img {width:100%;height:100%;border:0}
div.entrance a:hover img {visibility:hidden}

div.portfolio {display: block;position:absolute;outline:none;top:0; left:314px;width:90px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/portfolio-glow.gif")}
div.portfolio a, div.portfolio a:link, div.portfolio a:visited {display:block}
div.portfolio img {width:100%;height:100%;border:0}
div.portfolio a:hover img {visibility:hidden}

div.clients {display: block;position:absolute;outline:none;top:0; left:404px;width:70px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/clients-glow.gif")}
div.clients a, div.news a:link, div.clients a:visited {display:block}
div.clients img {width:100%;height:100%;border:0}
div.clients a:hover img {visibility:hidden}

div.news {display: block;position:absolute;outline:none;top:0; left:474px;width:60px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/news-glow.gif")}
div.news a, div.news a:link, div.news a:visited {display:block}
div.news img {width:100%;height:100%;border:0}
div.news a:hover img {visibility:hidden}

div.blog {display: block;position:absolute;outline:none;top:0; left:534px;width:60px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/blog-glow.gif")}
div.blog a, div.blog a:link, div.blog a:visited {display:block}
div.blog img {width:100%;height:100%;border:0}
div.blog a:hover img {visibility:hidden}

div.about {display: block;position:absolute;outline:none;top:0; left:594px;width:65px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/about-glow.gif")}
div.about a, div.about a:link, div.about a:visited {display:block}
div.about img {width:100%;height:100%;border:0}
div.about a:hover img {visibility:hidden}

div.contact {display: block;position:absolute;outline:none;top:0; left:659px;width:70px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/contact-glow.gif")}
div.contact a, div.contact a:link, div.contact a:visited {display:block}
div.contact img {width:100%;height:100%;border:0}
div.contact a:hover img {visibility:hidden}

div.shop {display: block;position:absolute;outline:none;top:0; left:729px;width:60px; height: 50px; float:left;margin:0;padding:0;background-image:url("img/navigation/shop-glow-orange.gif")}
div.shop a, div.shop a:link, div.shop a:visited {display:block}
div.shop img {width:100%;height:100%;border:0}
div.shop a:hover img {visibility:hidden}

/* Images */

.image350 {display: block; text-align: center; margin-left: auto; margin-right: auto; vertical-align: middle; border: 1px solid #382a27; padding: 13px; background: #ffffff; position: relative; overflow: hidden; min-height: 150px; width: 350px;}

/* Profile and Testimonial */

.profile {float: left; position: relative; display: inline; font:11.5px/17px "times new roman", times, serif; color: #ffffff; margin: 10px 0 0 0; padding: 5px; border:1px solid #382a27; background: #958a0A}
.profile a {color: #D4CA6E; outline: none;}
.profile a:visited {} 
.profile a:hover {color: #382a27; text-decoration: underline} 
.profile a:active {color: #382a27; text-decoration: underline;outline: none} 

.testimonialcontainer {float: left; position: relative; display: inline; border: 1px solid #382a27; font: 13px/19px "times new roman", times, serif; background-color: #958a0a; color: #fff; width: 366px;padding: 5px; margin-bottom: 10px }


/* Thumb Containers */

.thumbcontainer {display: inline; border: none; position: relative; min-height: 21px; text-align: left; float: left; overflow: hidden; width: 100%; margin: 0; padding-top: 5px;padding-bottom: 5px}
.thumbcontainer60 {display: inline; border: none; position: relative; text-align: left; float: left; overflow: hidden; width: 100%; margin: 0;  padding-top: 5px;padding-bottom: 10px}

.thumb25 {float: left; position: relative; display: inline; padding: 2px;margin-right:5px; height: 25px; width: 25px; border: 1px solid #ffffff; overflow: hidden; outline: none;}
.thumb25:visited {}
.thumb25:hover {border: 1px solid #958a0a;}
.thumb25:active {border: 1px solid #958a0a;}

.thumb50 {float: left; position: relative; display: inline; padding: 2px; height: 50px; width: 50px; border: 1px solid #D4CA6E; overflow: hidden; outline: none;}
.thumb50:visited {}
.thumb50:hover {border: 1px solid #382a27;}
.thumb50:active {border: 1px solid #382a27;}

.thumb60 {float: left; position: relative; display: inline; padding: 2px;margin-right:9px; height: 60px; width: 60px; border: 1px solid #ffffff; overflow: hidden; outline: none;}
.thumb60:visited {}
.thumb60:hover {border: 1px solid #958a0a;}
.thumb60:active {border: 1px solid #958a0a;}

.thumb70{float: left; position: relative; display: inline; padding: 2px; height: 70px; width: 70px; border: 1px solid #D4CA6E; overflow: hidden; outline: none;}
.thumb70:visited {}
.thumb70:hover {border: 1px solid #382a27;}
.thumb70:active {border: 1px solid #382a27;}


.thumb100 {float: left; position: relative; display: inline; padding: 2px; height: 100px; width: 100px; margin-right:15px; border: 1px solid #D4CA6E; overflow: hidden; outline: none;}
.thumb100:visited {}
.thumb100:hover {border: 1px solid #382a27;}
.thumb100:active {border: 1px solid #382a27;}

.newscontainer {display: inline; border: none; position: relative; min-height: 21px; text-align: left; float: left; overflow: hidden; width: 100%; padding-bottom: 10px}
.thumbnews {float: left; position: relative; display: inline; padding: 2px;margin-right: 5px; height: 25px; width: 25px; border: 1px solid #ffffff; overflow: hidden; outline: none;}
.thumbnews:visited {}
.thumbnews:hover {border: 1px solid #958a0a;}
.thumbnews:active {border: 1px solid #958a0a;}

.portfoliocontainer {display: block; height:80px; margin: 0; overflow: hidden; position: relative; }

.contentthumb2 {display: inline;margin: 5px; height: 114px;width: 60px;padding: 5px;float: left; position: relative; border: 1px solid #382a27;outline: none;}
.contentthumb2:visited {}
.contentthumb2:hover {border: 1px solid #958a0a}
.contentthumb2:active {border: 1px solid #958a0a;outline: none;}

.contentthumb {display: inline;margin: 5px;height: 50px;width: 75px;padding: 5px;float: left;position: relative;border: 1px solid #382a27; outline: none;}
.contentthumb:visited {}
.contentthumb:hover {border: 1px solid #958a0a;}
.contentthumb:active {border: 1px solid #958a0a; outline: none;}

.contentthumbs {display: inline;margin: 5px;padding: 5px;float: left;position: relative;border: 1px solid #382a27; outline: none;}
.contentthumbs:visited {}
.contentthumbs:hover {border: 1px solid #958a0a;}
.contentthumbs:active {border: 1px solid #958a0a;outline: none;}

.contentthumb5 {display: inline;adding: 5px;margin: 20px; border: 1px solid #382a27;float: left;outline: none;}
.contentthumb5:visited {}
.contentthumb5:hover {border: 1px solid #958a0a;}
.contentthumb5:active {border: 1px solid #958a0a;outline: none;}

.floatright {float: right; margin-top: 5px; margin-left: 20px; margin-bottom: 10px; padding: 4px; border: 1px solid #382a27;}
       

/* Blog Styles */

.posted {font-size: 10px;}
.paginate {font-size: 10px;}
.pagecount {font-size: 10px;}

/* Mailing List */
	
 #mailinglist {font-size: 10px; line-height: 14px; color: #382a27; text-decoration: none;  text-align: left; white-space: nowrap; float: left; margin:0px; padding:0px; clear:both; overflow:hidden; display: inline; position: relative}	
.input {border-top: 1px solid #958a0a; border-left: 1px solid #958a0a; background-color:  #fff; color: #000; font-size: 9px; width: 90px; padding: 2px; 1px 2px 1px; margin:0px; display: inline; position: relative}
.textarea {border-top: 1px solid #958a0a; border-left: 1px solid #958a0a; background-color:  #fff; color: #000; font-size: 7px; margin:0px; padding:0px; display: inline; position: relative}
.submit {background-color: #958a0a; font-size: 8.5px; font-weight: normal; letter-spacing: .1em; color: #fff; margin:0px;  padding: 2px; 1px 2px 1px; display: inline; position: relative}
.checkbox {background-color: transparent; border: 0; margin:0 0 2px 0; padding:0px; display: inline; position: relative}

/* twitter styles */
#twitterbox {float: left; position: relative; display: inline; color: #ffffff; margin-left: 10px; padding: 10px; background: #382a27; border: 1px solid #D4CA6E; width: 160px}
#twitter_update_list  {font: 12px/16px "times new roman", times, serif; color:#ffffff;}
ul#twitter_update_list {margin-left: 0;outline: none; padding:0;list-style-type: none}	
ul#twitter_update_list li {outline: none; padding: 5px 0 5px 0; margin:0px; display: block; border-bottom: 1px dotted #ffffff}
ul#twitter_update_list li a:link {color: #33ccff;text-decoration: none; text-align: left; outline: none; }			
ul#twitter_update_list li a:visited {color: #33ccff;}	
ul#twitter_update_list li active {color: #33ccff; text-decoration: underline;}
ul#twitter_update_list li a:hover{color: #33ccff; text-decoration: underline;}

.twitter-link {font-size:11.5px;display:block;text-align:right;}
.twitter-link a {color: #33ccff;text-decoration: none;  outline: none; }	
.twitter-link a:link {color: #33ccff;}		
.twitter-link a:visited {color: #33ccff;}		
.twitter-link a:hover{color: #33ccff; text-decoration: underline;}

/* footer */
#footer {clear:left; float:left; width:800px; height: 100px; background-color: #382a27;height: 60px;display: inline; position: relative; overflow: hidden; text-align:left}
		
#footer p {color: white;font-size: 11px; line-height:14px; margin: 7px 50px}