/* CSS Document */
/* Copyright (c) Fuzzy Future Inc., All Rights Reserved. */

body { 
  font-family: arial,helvetica,sans-serif; 
  font-size: 12px;
  background: #484848;
  color: #EEEEEE;
  margin: 0px;
  padding: 0px;
  background: #112F15 url( ../images/hunters-bg.jpg ) top left repeat-x;
}
#body-wrap {
	width: 1024px;
	background: url( ../images/hunters-title.jpg ) top left no-repeat;
}
a, a:visited {
  color: #FF6600;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #FFFF66;
  font-weight: bold;
  text-decoration: underline;
}
#container {
  width: 1024px;
  text-align: left;
  overflow: hidden;
}
h1,h2,h3,h4,h5 {
  padding: 0px;
  margin: 0px;
}

/* BANNER */

#banner { 
  width: 400px;
  height: 300px;
  padding-left: 20px;
}
#banner #site-title {
  font-family: Arial Black, sans-serif; 
  font-size: 36px; 
  color: #FFFF66; 
  padding-top: 5px;
  padding-left: 5px;
  font-weight: normal;
}
#banner #site-desc {  
  font-family: Arial,sans-serif; 
  font-size: 16px; 
  color: #FFFFFF;
  font-weight: bold; 
}
#banner #pet-count {
	position: absolute;
	top: 20px;
	right: 0px;
}

#banner a {
	color: #FFFF66;
}

/* NAVBAR */

#navbar {
	height: 300px;
	width: 600px;
	position: absolute;
	left: 425px;
}
#navbar #navset {
	padding-left: 0px;
}
#navbar #navset .navitem,
#navbar #navset .navtext {
	color: #000;
	border-left: 1px solid white;
	font-size: 14px;
	font-weight: bold;
	margin-right: 15px;
	padding-left: 9px;
	padding-top: 20px;
	float: left;
	background: url( ../images/navbox.gif ) bottom left no-repeat;
}
#navbar #navset .navitem a,
#navbar #navset .navitem a:visited,
#navbar #subnavset .navitem a,
#navbar #subnavset .navitem a:visited {
	color: #FFF;
	font-weight: bold;
}
#navbar #navset .navitem a:hover,
#navbar #subnavset .navitem a:hover {
	color: #FFFF66;
	font-weight: bold;
	text-decoration: none;
}
#navbar #subnavset {
	padding-left: 15px;
	display: none;
}
#navbar #subnavset .navitem,
#navbar #subnavset .navtext {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	margin-right: 15px;
	padding-left: 10px;
	padding-top: 5px;
	margin: 0 auto;
	float: left;
}
.info-alert {
	color: #FFF;
	font-size: 12px;
	font-style: italic;
}
.browse-pets {
	color: #FFFF00;
}


/* HEADING STYLES */

.heading {
  margin-bottom: 8px;

}
h2, h3 {
	color: #FFFF66;
	align: left;
	font-weight: bold;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 16px;
	font-weight: bold;
	color: #FFFF66;
}

.title {
	 font-size: 14px;
     color: #FFFF66;
     font-family: serif;
     text-transform: uppercase;
	 text-decoration: none;
}

#announce-box {
	width: 610px;
	height: 213px;
	position: absolute;
	text-align: justify;
	left: 385px;
	top: 85px;
}

#announce-box table {
	width: 98%;
	font-size: 12px;
	font-weight: normal;
	padding: 5px;
}

#announce-box td {
	text-align: center;
}

/* WELCOME BOX */

#welcome-box {
	padding-bottom: 10px;
}

#welcome-box .welcome-text {
	font-size: 14px;
	
	font-weight: bold;
}

/* NEWS ITEM */

.news-item {
	padding-bottom: 10px;
	font-size: 12px;
	border-bottom: 1px dotted #0b68cf; 
	padding-top: 10px;
	text-align: center;
}

.news-item a, .news-item a:visited {
	text-decoration: none;
	color: #0b68cf;
}

.news-item a:hover {
	text-decoration: underline;
}

/* NEWS TITLE */

.news-title {
	padding-top: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-transform: capitalize;
}

.news-title a, .news-title a:visited {
	text-decoration: none;
	font-size: 14px;
	color: #FF6600;
}

.news-title a:hover {
	color: #FFFF66;
	text-decoration: underline;
}

/* INNER BOX */

#inner-box {  
     width: 120px; 
	 position: absolute;
	 top: 0px;
	 left: 270px;
     padding: 10px; 

}

/* OUTER BOX */

#outer-box {  
    width: 279px;
	position: absolute;
	top: 0px;
	left: 415px;
    padding-left: 15px;
    padding-right: 15px;
}

#outer-box img {
    border: 5px solid #0b68cf;
	margin-bottom: 5px;
    align: center;
}
    
.img-center {
    text-align: center;
}

/* FULL BOX */

#full-box {
	width: 980px;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    border-left: 1px #999 solid;
	overflow: scroll;
}



/* ITEM VIEW */

#item-view {
	font-size: 14px;
}

#item-view .title {
	font-size: 18px;

}

#item-view .body-text {
	margin-top: 10px;
}

#item-view .item-source {
	font-size: 11px;
	padding-left: 5px;
}

#item-view .item-source .point{
	color: #0b68cf;
}

/* COPYRIGHT */

.checkout {
	font-weight: bold;
	font-size: 14px;
}
.checkout a, .checkout a:visited {
	color: #FF6600;
}
.checkout a:hover {
	color: #FFFF00;
}

#copyright-text {
	color: #000;
	text-align: center;
	width: 950px;
	font-size: 12px;
	font-weight: bold;
	background-color: #FFF;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 15px;
	margin-bottom: 10px;
}
#copyright-text a, #copyright-text a:visited {
	text-decoration: none;
}
#copyright-text a:hover {
	text-decoration: underline;
}

/* NEWS-COL */

#news-col {
	position: absolute;
	width: 215px;
	height: 1675px;
	text-align: left;
	right: 250px;
	padding-left: 15px;
	padding-right: 5px;
	top: 310px;
	border-left: 1px solid white;
}

#news-col h4 {
	font-size: 16px;
	font-weight: bold;
	margin-top: 15px;
}

/* NAVINFO */

#navinfo {
	margin-top: 8px;
	width: 285px;
	float: right;
	color: #FFF;
	overflow: hidden;
	margin-bottom: 10px;
}

#navinfo h2 {
	padding-bottom: 8px;
}

#navinfo h3 {
	color: #FFF;
	text-align: center;
}

#navinfo a {
	font-size: 14px;
}

#navinfo .link-box {
	padding-top: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-bottom: 1px solid #FFFF66;
}

#navinfo #sponsor-box {
	padding-top: 5px;
	margin-bottom: 5px;
	margin-left: 8px;
	height: 260px;
}

#navinfo .sponsor-ad {
	margin-bottom: 5px;
	width: 125px;
	height: 125px;
	float: left;
	margin-left: 5px;
	background-color: #005500;
}

/* PETS */

#breadcrumbs {
	text-align: center;
	padding-top: 5px;
	width: 670px;
	font-size: 14px;
}

#pet-groups {
	margin-top: 8px;
	width: 690px;
}
#pet-groups .pet-type {
	padding-top: 5px;
	padding-bottom: 10px;
}

#pet-groups h2 {
	padding-bottom: 8px;
}
#pet-groups .heading {
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-top: 5px;
}
#pet-groups a, #pet-groups a:visited {
	color: #FF6600;
}
#pet-groups .pet-type a:hover {
	color: #FFFF66;
}
#pet-groups .pet-family {
	font-size: 18px;
	padding-left: 10px;
	position: relative;
	margin-bottom: 4px;
	width: 330px;
	float: left;
}
#pet-groups .pet-family img.familyImage {
	width: 125px;
	height: 63px;
	margin-right: 5px;
}
#pet-groups .pet-family .pet-family-info {
	position: absolute;
	top: 10px;
	left: 150px;
}
#pet-groups .pet-family .pet-stats {
	font-size: 12px;
	position: absolute;
	top: 35px;
	left: 150px;
}

#pet-groups .pet-family .pet-stats .highlight {
	color: #FFFF66;
}

#pet-family-set {
	width: 685px;
	overflow: hidden;
}

.pet-model {
	float: left;
	text-align: center;
	margin: 2px;
	border: 2px solid #000;
	background-color: #005500;
}

.pet-model img {
	border: 0px;
	height: 120px;
	width: 162px;
}

.pet-model h3 {
	font-size: 12px;
	font-weight: bold;
	padding-top: 3px;
}

#pet-family-info {
	margin-left: 15px;
	font-size: 12px;
	font-weight: bold;
}
#pet-family-info .heading {
	margin-top: 10px; 
	padding: 0px;
}

#pet-family-info .pet-family-details {
	margin-left: 15px;
}

#pet-family-info .pet-family-details .highlight {
	color: #FFFF66;
}

#pet-family-info .pet-family-details a, 
#pet-family-info .pet-family-details a:visited {
	color: #FF6600;
} 

#pet-family-info .pet-family-details a:hover {
	color: #FFFF66;
	text-decoration: underline;
}

#pet-family-skills {
	width: 400px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 150px;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	border: 2px solid #FFFF00;
	background: url( ../images/worldofwarcraftcataclysm.jpg ) bottom center no-repeat;
}

#pet-family-skills h5 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

#pet-family-skills #skill-title {
	color: #FFFF00;
	font-size: 16px;
	font-weight: bold;
}
#pet-family-skills #skill-desc {
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 1px solid #FFFF00;
	margin-bottom: 10px;
}
#pet-family-skills #skill-now {
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	padding-top: 10px;
	border-top: 1px solid #FFFF00;
	margin-top: 10px;
	margin-bottom: 5px;
}

.pet-profile {
	width: 670px;
	padding: 5px;
	position: relative;
	padding-bottom: 15px;
	text-align: center;
	overflow: hidden;
	

}

.pet-profile .profile-image {
}

.pet-profile img {
	border: 4px solid #000;
	height: 482px;
	width: 600px;
}
.pet-profile .pet-list {
	text-align: center;
	font-size: 16px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
}
.pet-profile .heading {
	text-align: left;
	padding-top: 2px;
	margin-left: 410px;
}

.pet-ability {
	font-size: 10px;
	font-style: italic;
}

#pet-profile-box {
	width: 670px;
	padding: 5px;
	position: relative;
	padding-bottom: 15px;
	text-align: center;
	overflow: hidden;
}
#pet-profile-box #pet-profile-video,
#pet-profile-box #pet-profile-embed {
	display: none;
}

#pet-profile-box #pet-profile-video {
	width: 600px;
	height: 100px;
	background-color: #005500;
}

#pet-profile-box #pet-profile-embed {
	margin-bottom: 20px;
	background-color: #005500;
	padding-bottom: 10px;
}
#pet-profile-box #pet-profile-tabs {
	width: 100px;
	position: absolute;
	right: 40px;
	top: 40px;
	height: 20px;
}
#pet-profile-box #pet-profile-tabs .pet-profile-tab {
	float: left;
	margin-right: 5px;
	width: 100px;
	height: 25px;
	font-weight: bold;
	padding-top: 8px;
	background: url( ../images/hunters-tab.jpg ) top left no-repeat;
}

#pet-profile-box #pet-profile-tabs .pet-profile-tab-active {
	float: left;
	margin-right: 5px;
	width: 100px;
	height: 25px;
	color: #000;
	font-weight: bold;
	padding-top: 8px;
	background: url( ../images/hunters-tab-active.jpg ) top left no-repeat;
}
#pet-profile-box #pet-profile-tabs .pet-profile-tab-active a,
#pet-profile-box #pet-profile-tabs .pet-profile-tab-active a:visited {
	color: #000;
}
#pet-profile-box #pet-profile-title {
	margin-bottom: 10px;
}
#pet-profile-box .pet-profile-ads {
	position: absolute;
	top: 0px;
	right: 0px;	
}

#pet-profile-box #pet-profile-model {
	border-top: 10px solid #000;
	border-bottom: 4px solid #000;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	padding: 0px;
	width: 600px;
	margin: 0 auto;
	position: relative;
	top: 28px;
}

#pet-profile-box img {
	width: 600px;
	height: 482px;
	border: 0px;
}
#pet-profile-box .pet-profile-details {
	font-size: 14px;
	color: #FFF;
	width: 590px;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	font-weight: bold;
	margin: 0 auto;
	position: relative;
	padding: 5px;
	text-align: left;
	text-transform: capitalize;
	background: #000;
}
#pet-profile-box #right-side {
	float: right;
	width: 280px;
}

#pet-profile-box #left-side {
	border-right: 1px solid #005500;
	width: 300px;
}

#pet-profile-box .heading {
	margin-top: 5px; 
	padding: 0px;
	text-align: left;
}

#pet-profile-box .pet-profile-details .pet-profile-section {
	color: #FFFF66;
}
#pet-profile-box .pet-profile-details div {
	margin-bottom: 3px;
}

.pet-section {
	margin-bottom: 5px;
}

.pet-section .title {
	font-size: 18px;
	font-weight: bold;
}
.pet-section a.name {
	font-size: 16px;
}

.pet-section .pet-section-set {
	font-weight: bold;
}

/* ADSENSE */

#top-adgroup {
	height: 90px;
}

#top-adgroup #top-ad {
	height: 90px;
	width: 728px;
	background-color: #FFF;
}

#top-adgroup #top-links {
	float: right;
	width: 245px;
	height: 90px;
	background-color: #203455;
}

#bottom-adgroup {
	margin-top: 5px;
}

#bottom-adgroup #bottom-ad {
	height: 60px;
	width: 468px;
	margin-left: 115px;
}

.highlight {
	color: #FFFF66;
}

/* TALENT CALCULATOR */

#talent-info {
	float: right;
	width: 195px;
	padding: 10px;
	margin-top: 70px;
	background-color: #005500;
	display: none;
}
#talent-info .talent-desc {
	display: none;
	font-weight: bold;
	font-size: 14px;
}

#talent-calculator {
	width: 470px;
	height: 590px;
	position: relative;
}
#talent-calculator #tc-talentpoints {
	top: 522px;
	left: 320px;
	font-weight: bold;
	position: absolute;
}
#talent-calculator #tc-talenttree {
	top: 550px;
	left: 55px;
	font-weight: bold;
	position: absolute;
}
#talent-calculator #tc-talentspent {
	top: 65px;
	left: 380px;
	font-weight: bold;
	position: absolute;
}
#talent-calculator #tc-body {	
	position: relative;
	width: 385px;
	top: 90px;
	left: 35px;
	height: 420px;
}

#talent-calculator .tc-tier {
	position: relative;
	width: 385px;
	height: 80px;
	overflow: hidden;
	margin-top: 4px;
}
#talent-calculator .tc-tier .tc-col {
	position: relative;
	width: 88px;
	height: 80px;
	margin-left: 3px;
	margin-right: 3px;
	overflow: hidden;
	float: left;
}

#talent-calculator .tc-tier .tc-col img.talent-icon {
	margin-left: 20px;
	margin-top: 15px;
	width: 55px; 
	height: 55px;
	border: 0px;
}
#talent-calculator .tc-tier .tc-col .rank-count {
	position: absolute;
	width: 15px;
	height: 15px;
	border: 1px solid yellow;
	background-color: #005500;
	text-align: center;
	font-weight: bold;
	top: 55px;
	left: 60px;
}

.tier2, .tier3, .tier4, .tier5 {
	display: none;
}
.cunning {
	background: url( ../images/cunning-talent-calculator.jpg ) top left no-repeat;
}
.ferocity {
	background: url( ../images/ferocity-talent-calculator.jpg ) top left no-repeat;
}
.tenacity {
	background: url( ../images/tenacity-talent-calculator.jpg ) top left no-repeat;
}

/* OTHER */

#permalink-box {
	margin-left: 20px;
	width: 450px;
}

#permalink-box input {
	padding: 5px;
	width: 415px;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
	border: 4px solid #FFF;
	padding-5px;
	background-color: #333333;
	position: relative;
}

#main {  
	padding: 10px;
	overflow: hidden;
}
     
 .footer {
      font-size: 9px;
      color: #000;
      font-family: sans-serif;
      text-transform: none;
      text-align: center;
   }
   
.selectOptionDrop {
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}

.selectOptionDrop select {
	font-weight: bold;
	padding: 5px;
}

.spiffy-grey{display:block}
.spiffy-grey *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #39557A; }
.spiffy-grey1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background: #39557A }
.spiffy-grey2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background:#333333;}
.spiffy-grey3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-grey4{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-grey5{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-greyfg{
  background: #39557A;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px; }
	
.spiffy-green{display:block}
.spiffy-green *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #005500; }
.spiffy-green1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background:#005500}
.spiffy-green2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background:#333333;}
.spiffy-green3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-green4{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-green5{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-greenfg{
  background: #005500;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px; }
  
.spiffy-red{display:block}
.spiffy-red *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background: #903; }
.spiffy-red1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background:#903;}
.spiffy-red2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;
  background:#333333;}
.spiffy-red3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-red4{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-red5{
  border-left:1px solid #333333;
  border-right:1px solid #333333;}
.spiffy-redfg{
  background: #903;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px; }
  
 #expansionIcon {
	 float: right;
	 margin-top: 60px;
 }
 
 #expansionIcon img {
	width: 36px;
	height: 13px; 
 }
  
  /* CLEAR FIX */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */