@import url("reset.css");

body { font: 62.5% Trebuchet MS; background: #dcddde}

.wrapper{ width:847px; height:609px; margin: 30px auto 0 auto; background:#dcddde url(../images/bkg.gif) no-repeat; padding:45px 49px 0px 37px;}

/*--------------- main content -------------------------*/

.main_content { background:#fff; position:relative; height:530px}

.home .main_content {background: url(../images/red_bar.gif) no-repeat left -21px}
.beauty .main_content {background: url(../images/grey_bar.gif) no-repeat left -21px}
.beasts .main_content {background: url(../images/blue_bar.gif) no-repeat left -21px}
.bestiary .main_content {background: url(../images/orange_bar.gif) no-repeat left -21px}
.contact .main_content {background: url(../images/green_bar.gif) no-repeat left -21px}

.images { margin:19px 0 0 46px; overflow: auto; position: relative;}
.images img { float:left; border:1px solid #000; margin:0 5px 0 0}

.text {width:100%; float:left; margin:40px 0 0 46px}
.text img {float:left;}

a { color:#7ab750; text-decoration:none}
a:hover {text-decoration:none}
/*--------------- main navigation -------------------------*/

.main_nav { width:100%; height:21px}
.main_nav ul { width:474px; float:left; margin:1px 0 0 45px}
.main_nav li { float:left;}
.main_nav a { background:url(../images/main-nav.gif) no-repeat;height:21px; display:block; text-indent:-9999px}

.main_nav li.nav1 a {width:94px; background-position: 0 0; }
.main_nav li.nav2 a {width:95px; background-position: -94px 0; }
.main_nav li.nav3 a {width:96px; background-position: -189px 0;}
.main_nav li.nav4 a {width:95px; background-position: -285px 0;  }
.main_nav li.nav5 a {width:94px; background-position: -380px 0; }


.main_nav li.nav1 a:hover, .main_nav li.nav1 a:focus {background-position: 0 -21px; }
.main_nav li.nav2 a:hover, .main_nav li.nav2 a:focus {background-position: -94px -21px; }
.main_nav li.nav3 a:hover, .main_nav li.nav3 a:focus {background-position: -189px -21px;}
.main_nav li.nav4 a:hover, .main_nav li.nav4 a:focus {background-position: -285px -21px; }
.main_nav li.nav5 a:hover, .main_nav li.nav5 a:focus  {background-position: -380px -21px;}

.main_nav li.nav1 a.selected {background-position: 0 -21px; }
.main_nav li.nav2 a.selected {background-position: -94px -21px; }
.main_nav li.nav3 a.selected {background-position: -189px -21px;}
.main_nav li.nav4 a.selected {background-position: -285px -21px; }
.main_nav li.nav5 a.selected  {background-position: -380px -21px;}


#flash { height: 222px; width: 155px;float: left }
#flashoverlay { height: 222px; width: 155px; position: absolute; top: 0; right: 6px; cursor: pointer; background: blue; opacity: 0; filter: alpha(opacity=0); z-index: 100 }
/* Home
----------------------------------------------------------------------------------------------------*/

.home p {background:url(../images/home_txt.gif) no-repeat; text-indent:-9999px; display:block; width:230px; height:170px; float:left;}
.home h1 {background:url(../images/title.gif) no-repeat; text-indent:-9999px; display:block; width:345px; height:100px; float:left;}
.home h2 {background:url(../images/author_txt.gif) no-repeat; text-indent:-9999px; display:block; width:350px; height:78px; float:left;}
.home #flash { background:url(../images/tipi_hendren1.gif) no-repeat; }
.home #flashoverlay {right: 6px;}
/* Beauty
----------------------------------------------------------------------------------------------------*/
.beauty .text {width:100%; float:left; margin:30px 0 0 46px}
.beauty p {background:url(../images/beauty_para1.gif) no-repeat; text-indent:-9999px; display:block; width:394px; height:115px; float:left; clear:both;}
.beauty p.para2 {background:url(../images/beauty_para2.gif) no-repeat; text-indent:-9999px; display:block; width:394px; height:100px; float:left;}
.beauty h1 {background:url(../images/tippi_main.jpg) no-repeat top right; text-indent:-9999px; display:block; width:332px; height:450px; position:absolute; right:-10px; top:35px }
.beauty #flashoverlay {right: 326px;}
.beauty #flash { background:url(../images/lion_sketch.gif) no-repeat}

/* Beasts
----------------------------------------------------------------------------------------------------*/
.beasts .text {width:100%; float:left; margin:30px 0 0 46px}
.beasts p {background:url(../images/beasts_para1.gif) no-repeat; text-indent:-9999px; display:block; width:442px; height:100px; float:left; clear:both;}
.beasts p.para2 {background:url(../images/beasts_para2.gif) no-repeat; text-indent:-9999px; display:block; width:442px; height:100px; float:left;}
.beasts h1 {background:url(../images/giraffe.jpg) no-repeat top right; text-indent:-9999px; display:block; width:332px; height:546px; position:absolute; right:-10px; top:18px }
.beasts #flashoverlay {right: 326px;}
.beasts #flash { background:url(../images/seahorse.gif) no-repeat}

/* Bestiary
----------------------------------------------------------------------------------------------------*/
.bestiary .text {width:100%; float:left; margin:30px 0 0 46px}
.bestiary p {background:url(../images/bestiary_para1.gif) no-repeat; text-indent:-9999px; display:block; width:442px; height:78px; float:left; clear:both;}
.bestiary p.para2 {background:url(../images/bestiary_para2.gif) no-repeat; text-indent:-9999px; display:block; width:442px; height:100px; float:left;}
.bestiary h1 {background:url(../images/tiger_main.jpg) no-repeat top right; text-indent:-9999px; display:block; width:332px; height:561px; position:absolute; right:-10px; top:3px }
.bestiary #flashoverlay {right: 326px;}
.bestiary #flash { background:url(../images/leopard.gif) no-repeat}
/* Contact
----------------------------------------------------------------------------------------------------*/
.contact p.portfolio {background:url(../images/contactBook.gif) no-repeat; text-indent:-9999px; display:block; width:322px; height:205px; float:left; margin:0 60px 0 60px}
.contact h1 {background:url(../images/title.gif) no-repeat; text-indent:-9999px; display:block; width:353px; height:100px; float:left;}
.contact p {font-family:Arial, Helvetica, sans-serif; font-size:1.5em; color:#000; float:right; margin:0 60px 0 0;}
.contact #flashoverlay {right: 6px;}
.contact #flash { background:url(../images/seahorse.gif) no-repeat}
/* Thickbox
----------------------------------------------------------------------------------------------------*/
.modal-inside {position:relative}
.modal-inside h4 { font-size:12px; font-style:italic; margin:5px 0 0 0}
/* IE6 Browser upgrade
----------------------------------------------------------------------------------------------------*/

#upgrade-browser { font-family:Arial, Helvetica, sans-serif; color:#000; padding:20px; background: #fff url(file:///S|/KBA%20marketing/Swaylands/imgs/ie6-warning/grad.png) repeat-x bottom left    }
#upgrade-browser p { font-size:12px; background:url(file:///S|/KBA%20marketing/Swaylands/imgs/ie6-warning/warning-icon.png) no-repeat; padding-left:35px; margin:0}
#upgrade-browser a { text-decoration:underline; font-weight:bold; color:#000}
#upgrade-browser a:hover, #upgrade-browser a:focus { text-decoration:none; color:#000}