/*----------------- Generic tags ----------------*/

img, p, li, div, a, h1, h2, h4, h3, ul, input {behavior: url(css/iepngfix.htc)/*ie6 transparency*/}

* {
	list-style: none;
	padding: 0;
	margin: 0;
	border: none;
}

a:link, a:visited {
	text-decoration: none;
	outline: none;
	color: #c43668;
}

a:hover {
	cursor: pointer;
	color: #c43668;
	text-decoration: underline;
}

body {
	background: #7ccbe9 url("../images/body-bg-index-pets.gif") center top repeat-x;
	font-family: tahoma;
	font-size: 12px;
}


/*----------------- Header -------------------*/

#header {
	background: url("../images/header-bg-new.png") no-repeat -3px 0;
	margin: 0 auto;
	width: 918px;
	height: 173px;
	position: relative;
	z-index: 3;
}
		
#header .playnow {
	width: 200px;
	height: 175px;
	background: url("../images/header-play-now-zen.png") no-repeat;
	display: block;
	text-indent: -9999px;
	position: absolute;
	left: 15px;
	top: 11px;
}


#header .kayoki {
	width: 137px;
	height: 179px;
	background: url("../images/header-kayoki.png") no-repeat;
	display: block;
	text-indent: -9999px;
	position: absolute;
	right: 135px;
	top: 25px;
}

#header h1 a{
	width: 360px;
	height: 100px;
	background: url("../images/header-logo-plain-index.png") no-repeat;
	display: block;
	text-indent: -9999px;
	position: absolute;
	left: 286px;
	top: 100px;
}

#header .loggedin {
	width: 135px;
	height: 140px;
	position: absolute;
	display: block;
	background: url("../images/logged-in-bg.png") no-repeat;
	right: 0px;
	top: 20px;
	padding: 15px 0px 15px 12px;
}

#header .humanavatar {
	position: relative;
	left: 20px;
}


#header .loggedin a:hover {color:#78c9e8;text-decoration:underline;}

	
#header .login {
	width: 154px;
	float: right;
	padding: 25px 10px 0 0;
}

#header .login a:link, #header .login a:visited {
	font-size: 11px;
	color: #78c9e8;
	margin: 0 0 2px 0;
	display: block;
}

#header .login a:hover {color:white;}

#header .facebook {margin-bottom: 12px;}
#header .login input, #header .login p, #header .login div  {float: right;}

#header .login .textfield {
	background: url("../images/header-input.png") no-repeat;
	width: 130px;
	height: 16px;
	margin-bottom: 5px;
	padding: 7px 0 10px 10px;
}
#header .login #submit {
	background: url("../images/header-login.png") no-repeat;
	text-indent: -9999px;
	display: block;
	width:59px;
	border-style: none;
	height: 33px;
	text-indent: -9999px;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

#header .login #submit:hover { background: url("../images/header-login-over.png") no-repeat; }


/*----------------- Slideshow --------------------*/

.slideshow-bg {
	background: url("../images/slideshow-bg.gif") no-repeat center top;
	height: 320px !important;
	height: 308px;
	padding: 10px 40px 0px 40px;
	margin: 0 auto;
	position: relative;
	width: 920px;
}

#slideshow {
	width: 920px;
	position: absolute;
	left: 40px;
	height: 318px;
}

#slideshow #mascot {
	background: url("../images/slideshow-mascot-wyrae.png") no-repeat;
	position: absolute;
	top: 63px;
	right: -70px;
	width: 190px;
	height: 254px;
	}
	
#slideshow ul {
	background: url("../images/slideshow-list-bg.png") no-repeat;
	width: 200px;
	position: absolute;
	z-index: 1;
	display: inline-block; /*FF FIX*/
	height: 25px;
	bottom: 2px;
	left: 309px !important;
	left: 350px;
	padding-top: 10px;
	padding-right: 0 !important;
	padding-left: 93px !important;
	padding-right: 40px; /* IE6 */
	padding-left: 41px; /* IE6 */
} 
	
#slideshow li  {	
	float: left;
	margin-left: 5px;
}
	
#slideshow a  {
	width: 18px;
	height: 17px; 
	display: block;
	background: url("../images/slideshow-button.gif") no-repeat;
}


#slideshow a:hover {background-position: bottom;}
	
#slideshow .tour {
	display: block;
	text-indent: -9999px;
	background: url("../images/slideshow-tour.png") no-repeat;
	width: 151px;
	height: 143px;
	float: right;
	position: relative;
	z-index: 2;
	margin-top: 86px;
	margin-right: 70px !important;
	margin-right: 35px; /*IE6 FIX*/
}

	
/*----------------- Content ----------------------*/

#content {
	background: url("../images/content-bg.jpg") no-repeat bottom center;
	margin: 0 auto;
	width: 921px;
	height: auto;
	padding: 0 0 60px 0;
}

#content .threecols-left, #content .threecols-center,  #content .threecols-right {
	float: left;
	width: 307px;
	height: 225px;
	position: relative;
}
		
#content .threecols-left h3 {
	text-indent: -9999px;
	background: url("../images/content-welcome.png") no-repeat;
	display: block;
	width: 97px;
	height: 21px;
	margin: 10px 0 0 0;
}
	
#content .threecols-left p {
	margin-top: 10px;
	line-height: 18px;
	font-size: 14px;
	color: #0e567e;	
}

#content .threecols-center a {
	background: url("../images/content-signup.png") no-repeat;
	width: 247px;
	height: 229px;
	display: block;
	position: absolute;
	left: 31px;
	top: -13px !important;
	top: 0px; /* IE6 FIX*/
	}
#content .threecols-right h3 a:link, #content .threecols-right h3 a:visited{
	text-indent: -9999px;
	background: url("../images/content-news.jpg") top center no-repeat;
	width: 195px;
	height: 46px;
	margin: 0 auto;
	display: block;
}

#content .threecols-right h3 a:hover { background-position: center bottom; }
		
#content .threecols-right ol {margin-bottom: 15px;}
	
#content .threecols-right ol li {
	background: url("../images/content-news-bg.png") no-repeat;
	width: 300px;
	height: 48px;
	margin-bottom: 2px;
	_margin-bottom: 0px; /* IE6 FIX */
	*margin-bottom: 0px; /* IE7 FIX */
}
	
#content .threecols-right .date {
	width: 51px;
	height: 44px;
	text-align: center;
	padding-top: 4px;
	float: left;
}
	
#content .threecols-right .date p {font-weight: bold;color: #2eb2c3;}
#content .threecols-right .date p span {font-size: 18px;}
	
#content .threecols-right .text {
	width: 228px;	
	height: 27px;
	float: left;
	padding: 7px 10px 9px 10px;
	color: #aaf1fa;
	line-height: 16px;
}

.items-threecols-left, .items-threecols-center, .items-threecols-right {
	float: left;
	width: 307px;
	height: 184px;
	background: url("../images/items-bg.png") no-repeat right 37px;
	}


.items-threecols-left ul, .items-threecols-center ul, .items-threecols-right ul {
	height: 144px;
	padding: 3px 0 0 7px !important;
	padding-left: 4px; /* IE6 FIX */
	}

.items-threecols-left li, .items-threecols-center li, .items-threecols-right li {
	float: left;
	margin-left: 3px;
	}
	
.items-threecols-left li a, .items-threecols-center li a, .items-threecols-right li a {
	display: block;
	width: 94px;
	}
	
.items-threecols-left li a:hover span, .items-threecols-center li a:hover span, .items-threecols-right li a:hover span {
	color: #937860;	
	text-decoration:none!important;
	font-weight:bold;
	}

.items-threecols-left li a:hover, .items-threecols-center li a:hover, .items-threecols-right li a:hover {
	color: #937860;	
	text-decoration:none!important;
	font-weight:bold;
	}
	
.items-threecols-left li span, .items-threecols-center li span, .items-threecols-right li span {	
	display: block;
	background: url("../images/item-description-bg.gif") no-repeat;
	width: 70px;
	height: 28px;
	color: #937860;
	font-size: 11px;
	line-height: 10px;
	text-align: center;
	padding: 7px 12px 0 12px;
	_margin-top: 2px; /* IE6 FIX */
	*margin-top: 2px; /* IE7 FIX */
	text-decoration:none!important;
	}


	
.items-threecols-left h3, .items-threecols-center h3, .items-threecols-right h3 {
	text-indent: -9999px;
	clear: both;
	height: 37px;
	}
	
.items-threecols-left h3 {
	background: url("../images/items-header1.png") no-repeat;
	width: 307px;
	}
	
.items-threecols-center h3 {
	background: url("../images/items-header2.png") no-repeat;
	margin-left: 3px;
	width: 304px;
	}
	
.items-threecols-right h3 {
	background: url("../images/items-header3.png") no-repeat;
	margin-left: 4px;
	width: 303px;
	}
	



#page {
	background:#fff;
	padding:20px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior:url(border-radius.htc);
	}

#page h5 {
	color:#2677bc;
	font-size:26px;
	margin-bottom:15px;
	}

#page p {
	margin-bottom:15px;
	}

	
/*----------------- Footer --------------------*/
	
#footer-bg {
	background: #2a85b6 url("../images/footer-bg.gif") repeat-x;
	height: 200px;
	width: auto;
	color: #5b5b5b;
	position: relative;
	z-index: 2;
}

#footer {
	background: url("../images/footer-bg-top.gif") no-repeat 133px 0;
	margin: 0 auto;
	width:1000px;
	height: 200px;
	color: #73f1ff;
	position: relative;
	z-index: 2;
}

#footer a:link, #footer a:visited {color: #73f1ff;}
#footer a:hover {color: #fff;}

#footer #logo {
	background: url(../images/footer-logo-index.png) no-repeat center 45px;
	float:left;
	width:300px;
	height: 200px;
	margin: 0 0 0 50px;
	font-size: 11px;
	display: inline;
}

#footer #logo p{
	text-align: center;
	padding: 113px 0 0 0;
	margin: 0;
}

#footer #logo ul{
	margin: 0 auto;
	display: block;
	width: 177px;
}

#footer #logo li{
	width: auto;
	display: block;
	float: left;
	padding: 0 0 0 10px;
}

#footer #logo li a , #footer #logo li a:visited {text-decoration: underline;}
#footer #logo a:hover{}

#footer #list{
	float: left;
	padding: 43px 20px 0 30px;
}

#footer #list li{
	background: url(../images/footer-bullet-index.gif) no-repeat center left;
	padding: 0 0 0 7px;
	margin: 5px 0 0 0;
}

#footer #social{
	float: left;
	margin: 70px 0 0 0;
}

#footer #social li {
	float:left;
	margin: 0 0 0 30px;
	display: inline;
}

#footer #social a:link, #footer #social a:visited{
	display: block;
	height: 47px;
	text-indent: -9999px;
}

#footer #social #rss a:link, #footer #social #rss a:visited {
	background:url(../images/footer-rss-index.jpg) no-repeat top left;
	width:131px;
}
#footer #social #twitter a:link, #footer #social #twitter a:visited {
	background:url(../images/footer-twitter-index.jpg) no-repeat top left;
	width:113px;
}
#footer #social #facebook a:link, #footer #social #facebook a:visited {
	background:url(../images/footer-facebook-index.jpg) no-repeat top left;
	width:117px;
}
#footer #social #tumblr a:link, #footer #social #tumblr a:visited {
	background:url(../images/footer-tumblr-index.jpg) no-repeat top left;
	width:131px;
}

#footer #social #rss a:hover,#footer #social #twitter a:hover,#footer #social #facebook a:hover,#footer #social #tumblr a:hover {background-position:bottom left;}


#formContainer input {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:300px;
}

#formContainer textarea {
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:300px;
}

#formContainer button{
	clear:both;
	width:125px;
	height:31px;
	background:#666666;
	text-align:center;
	line-height:31px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
}

/*----------------- Alignments ----------------*/

.aligncenter {text-align: center;}
.alignleft {float: left;}
.alignright {float: right;}
img.center, img[align="center"] {display: block;margin-left: auto;margin-right: auto;}
img.alignleft, img[align="left"] {float:left;}
img.alignright, img[align="right"] {float:right;}
.clear {clear:both;}