/*-----------------------------------------
title:     Weblings Style
version:   1.0
author:    chad geraci
email:     cgeraci@electric-bat.com
website:   http://www.electric-bat.com

-------------------------------------------*/


/* page structure 
--------------------------------------------- */

body {
	padding: 0 5px;
	margin:0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	background: url(../img/bg.gif) repeat-x;
	font-size: 62.5%;
	color:#dbffef;
}

ul, li, h4, h3, h2, h1 {
	padding:0;
	margin:0;
	list-style:none;
}

p {
	margin: 0 0 10px 0;
}

#wrap {
	width: 80%;
	max-width: 1021px;
	min-width: 1021px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:1px solid #333;
	background: url(../img/mid_section_tile.jpg) repeat-y;
}



/* Navigation and header stuff
--------------------------------------------- */

#nav {
	float: left;
	width: 680px;
	margin: 3px 0 0 10px;
	padding: 5px 0 0 0;
	list-style: none;
	background: none;
	}
	
#nav li {
	float: left;
	margin: 0 1px 0 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	font-size: 90%;
	font-weight:bold;
	letter-spacing:1px;
	}
#nav a {
	float: left;
	display: block;
	margin: 0;
	padding: 4px 14px;
	color: #40361c;
	text-decoration: none;
	background: none;
	text-transform:capitalize;
}
#nav a:hover, body#about #t-about a {
	color: #e80cad;
	background: none;
}

#nav a:hover, body#playguide #t-playguide a, body#haven #t-playguide a, body#adventures #t-playguide a,
body#combat #t-playguide a, body#friends #t-playguide a, body#weblings #t-playguide a, body#tokens #t-playguide a,
body#interaction #t-playguide a, body#kennel #t-playguide a, body#market #t-playguide a, body#battle #t-playguide a,
body#stamina #t-playguide a, body#mood #t-playguide a, body#tokenspage #t-playguide a {
	color: #e80cad;
	background: none;
}

#nav a:hover, body#account #t-account a, body#wurl #t-shop a {
	color: #e80cad;
	background: none;
}

#nav a:hover, body#faqs #t-faqs a, body#parental #t-faqs a {
	color: #e80cad;
	background: none;
	}

#nav a:hover, body#downloads #t-shop a  {
	color: #e80cad;
	background: none;
	}

#nav a:hover, body#collectors #t-shop a  {
	color: #e80cad;
	background: none;
	}



#nav a:hover, body#news #t-news a {
	color: #e80cad;
	background: none;
	}

.homeIcon {
	display: block;
	float:left;
	width: 33px;
	height: 33px;
	background:url(../img/home_icon_off.gif) bottom;
	text-indent: -9999px;
	margin:3px 0 0 50px;
}

.homeIcon:hover {
	background-position: 0 0;
	background:url(../img/home_icon_on.gif) bottom;
}


.homeIconOn {
	display: block;
	float:left;
	width: 33px;
	height: 33px;
	background:url(../img/home_icon_on.gif) bottom;
	text-indent: -9999px;
	margin:3px 0 0 50px;
}

/* Header Images
--------------------------------------------- */
	
#head {
	width: 100%;
	height:316px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_about.jpg) no-repeat;
}

#headerHome {
	width: 100%;
	height:316px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background: url(../img/header_back.jpg) no-repeat;
}

#headInterior {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_about.jpg) no-repeat;
}

#headAbout {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_about.jpg) no-repeat;
}

#headPlayguide {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_playguide.jpg) no-repeat;
}

#headAccount {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_account.jpg) no-repeat;
}

#headSupport {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_support.jpg) no-repeat;
}

#headShop {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_shop.jpg) no-repeat;
}

#headNews {
	width: 100%;
	height:263px;
	max-width: 1021px;
	min-width: 700px;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.3em;
	border:none;
	background:url(../img/header_news.jpg) no-repeat;
}


#logo {
	width:537px;
	height:326px;
	margin-left:238px;
	padding-top:25px;
	clear:both;
}

#logoInterior {
	width:470px;
	height:173px;
	margin-left:260px;
	padding-top:25px;
	clear:both;
}


/* sub navigation
================================== */

#subNav {
	display:block;
	width: 720px;
	margin: 0 0 0 129px;
	padding: 0;
	list-style: none;
}
	
#subNav li {
	float: left;
	margin: 0 1px 0 0;
	padding: 0;
	font-family: Verdana, "Lucida Grande", sans-serif;
	font-size: 90%;
	}
#subNav a {
	float: left;
	display: block;
	margin: 0 3px 0 0;
	padding: 4px 8px;
	color: #333;
	text-decoration: none;
	border-bottom: none;
	background: #beb690 url(../img/off_bg.gif) repeat-x top left;
	text-transform:uppercase;
}

#subNav a:hover, body#playguide #t-collection a, body#tokens #t-collection a, body#interaction #t-haven a, body#kennel #t-haven a, body#market #t-haven a,
body#battle #t-combat a, body#stamina #t-combat a, body#mood #t-combat a, body#tokenspage #t-combat a  {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#account #t-accountSub a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#shop #t-wurlbar a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#collectors #t-collectors a{
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#wurl #t-wurl a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}


#subNav a:hover, body#haven #t-haven a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}


#subNav a:hover, body#adventures #t-adventures a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#combat #t-combat a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}


#subNav a:hover, body#friends #t-friends a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#weblings #t-weblings a {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}


#subNav a:hover, body#faqs #t-faqsSub a, body#parental #t-parental a  {
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}

#subNav a:hover, body#community #t-welcome a{
	color: #ea0469;
	background: #e0dcc1 url(../img/on_bg.gif) repeat-x top left;
}






/* clear some stuff
================================== */

.clear {
  clear: both;
}


/* rounded corner box
================================== */

.box {
  margin:0 auto;
  color: #36270d;
  font-size:130%;
}


.box {
  width: 910px;
  background:url(../img/tile.png) repeat-y;
}

.box h2 {
  background: url(../img/top.png) no-repeat left top;
  padding-top: 20px;
  padding-bottom:5px;
  color: #e61270;
  font-size:125%;
/*  border-bottom: 2px dashed #aca68c; */
}

.box .title {
	background:none;
 	padding-top: 20px;
 	padding-bottom:5px;
 	color: #e61270;
	font-size:105%;
}

.box .last {
  background:url(../img/bottom.png) no-repeat left bottom;
  padding-bottom: 36px;
}

/* IE7 and IE6 fix for bottom rounded corners */
*+html .box .last, * html .box .last { position: relative; bottom: -20px;} 

.box h2, .box h3, .box p {
  padding-left: 36px;
  padding-right: 36px;
}

.box p {
  line-height:1.3em;
  font-size:85%;
  margin-bottom:20px;
}

.box a {
	color: #e61270;
}


.box h3 {
	color: #4955a1;
	font-size:85%;
}

hr {
	margin:36px 36px 36px 36px;
	border:1px dashed #aca68c;
}

/* Box Bullets
--------------------------------------------- */

.box ul {
	list-style-type:none;
	margin-left:60px;
	margin-top:10px;
	margin-bottom:20px;
	float:left;
}


.box ul li {
	background: url(../img/bullet.png) no-repeat 0 50%;
	padding-left:20px;
	line-height:1.7em;
	font-size:85%;
}



.box #wideBullet li {
	float:left;
	margin-left: 20px;
	background: url(../img/bullet_pink.png) no-repeat 0 50%;
	padding-left:14px;
	font-size:85%;

}

.box #wideBullet ul {
	margin-left:0px;
	float:left;
	display:block;
	width:675px;
}



/* third level navigation
================================== */

.thirdNav {
	float:left;
	height:500px;
}


.thirdNav ul {
	margin-top:18px;
}

.thirdNav ul li {
	background:none;
	width:125px;
}

.thirdNav ul li a:hover {
	text-decoration:none;
	color:#e61270;
}

.thirdNav ul li a {
	text-decoration:none;
	color:#36270d;
}


.thirdNav a:hover, body#playguide #t-unlocking a, body#tokens #t-tokens a, body#haven #t-decoration a, body#interaction #t-interaction a, body#kennel #t-kennel a,
body#market #t-market a, body#combat #t-bugs a, body#battle #t-battle a, body#stamina #t-stamina a, body#mood #t-mood a, body#tokenspage #t-tokens a  {
	text-decoration:none;
	color:#e61270;
}



/* Footer Stuff
--------------------------------------------- */

#footer {
	background:url(../img/footer_wood_trans.png) no-repeat;
	margin-top:20px;
	height:90px;

}

#footerLogo {
	margin: 0 auto 0 auto;
	width:600px;
	
}

#siteFooter {
	background:#38427b;
	border-top:3px solid #da62a3;
	height:317px;
}


#siteFooter #invite {
	float:left;
	width:400px;
	margin: 20px 0 0 56px;
}


#siteFooter #invite #inviteButton {
	margin:0 5px 10px 0;
	float:right;
}

#siteFooter #invite p {
	color:#ddd9bb;
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:80%;
}

#siteFooter #invite a {
	color: #5abbb3;
	text-decoration:none;
}


#siteFooter h2 {
	color: #99ff00;
}

#siteFooter #contact_form {
	float:right;
	width:345px;
	margin: 20px 55px 0 0;
}



/* Contact Form
--------------------------------------------- */

#contact_form {
	background:url(../img/icon_contact.png) no-repeat;
	width:200px;
	padding-right:3px;
}

#contact_form .tk-good-dog {
	margin-left:70px;
	margin-bottom:30px;
}


form {
  font-size: 1.4em;
  width: 30em;
}

#comments_form {
	margin:20px 0 0 0;
}

#comment {
	width: 336px;
}

/* fieldset styling */
fieldset {
  margin: 1em 0; /*  space out the fieldsets a little*/
  padding:0;
  border: none;
  width:360px;
}

/* legend styling */
legend {
  font-weight: bold;
}


/* style for  labels */
label {
  display: block;
  padding-bottom:5px;
  margin-top:5px;
   font-size: 0.75em;
}

/* style for required labels */
label .required {
  font-size: 0.75em;
  color:#d1d5f3;
}

input, select {
	width: 158px;
	background: url(../img/contact_bg.png);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: .9em;
	color:#635a3f;
	border:1px solid #6c78c4;
}



/* style form elements on focus */
input:focus, textarea:focus {
  background: #dbe0ff;
}



fieldset p {
	width:178px;
	float:left;
	padding:0;
	margin:0;
/*	border:1px solid #FFF;*/
}

#commentArea {
	width:360px;
	float:left;
	margin-right:0;
	margin-bottom:10px;
}


#submit {
	float:right;
	width:85px;
	padding: 0;
	margin-right:18px;
}


#submit_btn {
	background:url(../img/button_tile_submit.png) repeat-x;
	padding:5px;
	margin-right:25px;
	color:#ffc502;
	width:86px;
	float:right;
	border:2px solid #262d55;
}


#text {
	width:334px
}

/* Hack to make sure the floated radio buttons
   sit next to the labels correctly in IE/Mac*/

/* This is the style I want IE/Mac to see */
input.radio + label {
  text-indent: 2em;
}

/* Using the commented backslash filter, I'm resetting
   the above rule for everything other than IE5/Mac \*/
input.radio + label {
  text-indent: 0;
}


 
#submitButton {
	float:right;
	margin-top:5px;
}

#button {
	height: 32px;
	width: 184px;
	margin: auto;
}

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

.menu_class {
	border:none;
	margin-top:18px;
}

.dropMenu {
	display:none;
	width:145px;
	margin-left:3px;
	margin-top:0;
}

.dropMenu li {
	background-color: #bcc0da;
	z-index:5000;
}

.dropMenu li a {
	color:#353022; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}

.dropMenu li a:hover {
	padding:10px;
	color: #ae4e82;
}






/* Content
--------------------------------------------- */
#primaryContent {
	background:url(../img/head_wood_trans.png) no-repeat; 
	min-height:550px;
	padding-top: 20px;
}


#primaryContentColumns {
	background:url(../img/head_wood_trans.png) no-repeat; 
	min-height:550px;
	padding-top: 20px;
}


.tk-good-dog {
	color:#ffc600;
	text-transform:uppercase;
	font-size:164%;
	margin-bottom:8px;
}

#primaryContentContainer {
	margin: 90px auto 0 auto;
	width:618px;
	font-size:120%;
	padding-bottom:20px;
}

#primaryContentContainer2 {
	margin: 10px auto 0 auto;
	width:618px;
	font-size:120%;
	padding-bottom:20px;
}

#primaryContentContainer2 em {
	background: url(../img/underline.png);
	padding:5px 0px 6px 0px;
}

.right {
	float:right;
	margin-top:20px;
}

.left {
	float:left;
	margin-top:20px;
}


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


img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 0;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */



/* weblings styles
--------------------------------------------- */

.weblingContainer {
	margin:0 60px 0 60px;
}


/* news styles
--------------------------------------------- */

.newsContainer {
	margin:0 60px 0 60px;
}





/* home styles
--------------------------------------------- */
#playNow {
	position: absolute;
	margin-left:801px;
	margin-top:8px;
}

#comePlay {
	margin: 0 auto;
	width:705px;
}