@import url("extras.css");
@import url("games.css");
@import url("shop.css");
@import url("adopt.css");
@import url("mypets.css");
@import url("help.css");
@import url("splash.css");


/* ----------------- CORE LAYOUT ------------------------- */

html, body {margin:0; padding:0; min-height: 100%; height:100%;}
body {background: #dfedff url(../images/bg-grad.gif) repeat-x top;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
#pageWrapper {position:relative;margin:0 auto;height: auto !important;min-height:100%;_height: 100%; min-width: 995px; width: 100%;}
#siteWrapper {position: relative; margin: 0 auto; width: 995px; padding: 0 0 116px 0; height: auto !important; min-height: 100%; background: transparent url(../images/columns-bg.gif) repeat-y center;}
#header {position: relative; width: 995px; height: 127px; background: url(../images/ff-header-bg.gif) no-repeat 0 0;}
#leftBar, #contentWrapper {float: left; _display: inline;}
#leftBar {width: 196px; margin-left: 14px;}
#contentWrapper {width: 714px; margin: 0px; padding: 23px 29px;}

/* ----------------- NON-MEMBER KNAPSACK ------------------------- */

#knapsackTour {background: none; height: 676px; position: relative; width: 100%; margin: -23px 0 0 0;}
#knapsackTour .knapTour1,
#knapsackTour .knapTour2,
#knapsackTour .knapTour3 {width: 196px; background-repeat: no-repeat;}

#knapsackTour .knapTour1 *,
#knapsackTour .knapTour2 *,
#knapsackTour .knapTour3 *,
#knapsackTour .knapTour4 * {display: none;} 

#knapsackTour .knapTour1 {height: 243px; background-image: url(../images/nonmember-knapsack1-off.gif);display:block;}
#knapsackTour .knapTour2 {height: 75px; background-image: url(../images/nonmember-knapsack2-off.gif);}
#knapsackTour .knapTour3 {height: 334px; background-image: url(../images/nonmember-knapsack3-off.gif);}
#knapsackTour .knapTour4 {height: 61px; background-image: url(../images/nonmember-knapsack4-off.gif);}

#knapsackTour .knapTour1on {height: 243px; background-image: url(../images/nonmember-knapsack1-on.gif);}
#knapsackTour .knapTour2on {height: 75px; background-image: url(../images/nonmember-knapsack2-on.gif);}
#knapsackTour .knapTour3on {height: 334px; background-image: url(../images/nonmember-knapsack3-on.gif);}

/* ----------------- FOOTER ------------------------- */

#footer { position:absolute; width:100%; height: 101px; bottom: 0px; _bottom: -2px; padding: 15px 0 0 0; background: #dfedff url(../images/footer-hills-bg.gif) repeat-x center bottom;}
#footerContent {width: 995px; margin: 0 auto; height: 101px; font-size: 0.8em; color: #017101;}
#footerContent ul,
#footerContent .copyright {float: right; clear: right; margin-right: 25px;}
#footerContent .copyright {margin-top: 60px;}
#footerContent li {display: inline;}
#footerContent li a {padding: 0 5px; border-right: 1px solid #017101; line-height: 0.8em; color: #bbffbb;}

/* ----------------- HEADER ------------------------- */

#header a {display: block; position: absolute;}
#header h1 a {height: 108px; width: 342px; left: 328px; top: 1px;}
#header ul {width: 0px; height: 0px;}
#header .home {background: url(../images/home-btn.gif) no-repeat; width: 106px; height: 46px; top: 51px; left: 13px;}
#header .games {background: url(../images/games-btn.gif) no-repeat; width: 126px; height: 48px; top: 8px; left: 64px;}
#header .shop {background: url(../images/shop-btn.gif) no-repeat; width: 130px; height: 58px; top: 47px; left: 156px;}
#header .extras {background: url(../images/extras-btn.gif) no-repeat; width: 120px; height: 46px; top: 8px; left: 241px;}
#header .adopt {background: url(../images/adoptapet-btn.gif) no-repeat; width: 150px; height: 60px; top: 11px; left: 658px;}
#header .mypets {background: url(../images/mypets-btn.gif) no-repeat; width: 132px; height: 52px; top: 52px; left: 789px;}
#header .help {background: url(../images/help-btn.gif) no-repeat; width: 120px; height: 46px; top: 10px; left: 864px;}
#signOut {position: relative; right: 0px; margin-right: 14px;}
#signOut a { display:block; color:#2d6bcb; float:right; font-size:11px; padding:0 7px 6px 7px; background:url(/images/sign-out-bg.gif) no-repeat; }
#signOut a:hover { color:#468fff; }

/* ----------------- GENERIC SUBNAV SETTINGS------------------------- */

#subNav {position: relative; width: 650px; height: 60px; line-height: 60px; vertical-align: middle; overflow: hidden; padding: 0 28px; margin: 0 0 20px 0;}
#subNav h2 a {display: block; height: 60px; float: left; width: 175px; background-repeat: no-repeat; background-position: 0 50%;}
#subNav h2 span {display: none;}
#subNav ul {float: right;}
#subNav li {display: inline;}
#subNav li a {padding: 0 5px; border-right: 1px solid #479bf5;}
#subNav .left,
#subNav .right {position: absolute; width: 28px; height: 60px; top: 0px; background: no-repeat;}
#subNav .left {left: 0px;}
#subNav .right {right: 0px;}

/* ----------------- GENERIC GRAPHICAL SUBNAV SETTINGS -----------------  */

#subNav.graphicalNav {width: 658px;height: 216px;}
#subNav.graphicalNav .left,
/* IE6 requires 'clear: both' otherwise they disappear [hasLayout] */
#subNav.graphicalNav .right {height: 216px; display: block; clear: both;} 
#subNav.graphicalNav ul {position: relative; float:left; padding-left:8px; top:-13px; width:100%;}
#subNav.graphicalNav li {float: left; margin-right: 5px;}

/* ----------------- BODY CONTENT ------------------------- */

#bodyContent {padding: 0;}
#bodyContent.noPadding {padding: 0 0;}
#bodyContent h3 {font-size: 1.4em; font-weight: bold; margin: 1em 0;}
#bodyContent p,
#bodyContent ul,
#bodyContent ol,
#bodyContent dl,
#bodyContent blockquote {margin: 1em 0;}
#bodyContent .bulletList {list-style: circle; padding-left: 1em;}
#bodyContent .alphaList {list-style: lower-alpha; padding-left: 1em;}
#bodyContent .numList {list-style: decimal; padding-left: 1em;}

/* ----------------- GENERIC H3 HEADER SETTINGS ----------------- */

#bodyContent h3 {height: 42px; position: relative; clear: both;}
#bodyContent h3 div {margin: 0 0 0 13px; height: 26px; position: relative; top: 8px;}
#bodyContent h3 div span {display: none;}

/* -----------------  GENERIC ROUND BOX SETTINGS -----------------  */

#bodyContent .rndBox {position: relative; overflow: hidden; _height: 100%;}

#bodyContent .rndBox .t,
#bodyContent .rndBox .l,
#bodyContent .rndBox .b,
#bodyContent .rndBox .r {position: absolute; font-size: 1px; line-height: 1px;}
#bodyContent .rndBox .t,
#bodyContent .rndBox .b {background-repeat: repeat-x; width: 100%; height: 3px;}
#bodyContent .rndBox .l,
#bodyContent .rndBox .r {background-repeat: repeat-y; width: 3px; height: 100%;}

#bodyContent .rndBox .t {top: 0; left: 0;}
#bodyContent .rndBox .l {top: 0; left: 0;}
#bodyContent .rndBox .b {bottom: 0; left: 0;}
#bodyContent .rndBox .r {top: 0; right: 0;}

#bodyContent .rndBox .tl,
#bodyContent .rndBox .tr,
#bodyContent .rndBox .bl,
#bodyContent .rndBox .br {position: absolute; width: 8px; height: 8px; font-size: 1px; background-repeat: no-repeat;}

#bodyContent .rndBox .tl {top: 0; left: 0;}
#bodyContent .rndBox .tr {top: 0; right: 0;}
#bodyContent .rndBox .bl {bottom: 0; left: 0;}
#bodyContent .rndBox .br {bottom: 0; right: 0;}

#bodyContent .rndBox .boxContent {position: relative; background: white; padding: 8px; float: left;}
#bodyContent .rndBox.fixed .boxContent {position: absolute;} /* This fixes a bug with IE were it will make the rndBox borders disappear if you set boxContent with a fixed width */

.lastBox {margin-right: 0px !important;}

/* -----------------  GREEN ROUND BOX SETTINGS -----------------  */

#contentWrapper #bodyContent .green,
#contentWrapper #bodyContent .green .boxContent {background: #beeec0 !important;}
#contentWrapper #bodyContent .green .tl {background-image: url(../images/rndBox-green-tl.gif) !important;}
#contentWrapper #bodyContent .green .tr {background-image: url(../images/rndBox-green-tr.gif) !important;}
#contentWrapper #bodyContent .green .bl {background-image: url(../images/rndBox-green-bl.gif) !important;}
#contentWrapper #bodyContent .green .br {background-image: url(../images/rndBox-green-br.gif) !important;}
#contentWrapper #bodyContent .green .t,
#contentWrapper #bodyContent .green .b {background-image: url(../images/rndBox-green-tb.gif) !important; height: 2px !important;}
#contentWrapper #bodyContent .green .l,
#contentWrapper #bodyContent .green .r {background-image: url(../images/rndBox-green-lr.gif) !important; width: 2px !important;}

/* -----------------  L. Cyan ROUND BOX SETTINGS -----------------  */

#contentWrapper #bodyContent .lightCyan,
#contentWrapper #bodyContent .lightCyan .boxContent {background: #ccecf2 !important;;}
#contentWrapper #bodyContent .lightCyan .tl {background-image: url(../images/rndBox-lightCyan-tl.gif) !important;}
#contentWrapper #bodyContent .lightCyan .tr {background-image: url(../images/rndBox-lightCyan-tr.gif) !important;}
#contentWrapper #bodyContent .lightCyan .bl {background-image: url(../images/rndBox-lightCyan-bl.gif) !important;}
#contentWrapper #bodyContent .lightCyan .br {background-image: url(../images/rndBox-lightCyan-br.gif) !important;}
#contentWrapper #bodyContent .lightCyan .t,
#contentWrapper #bodyContent .lightCyan .b {background-image: url(../images/rndBox-lightCyan-tb.gif) !important; height: 2px !important;}
#contentWrapper #bodyContent .lightCyan .l,
#contentWrapper #bodyContent .lightCyan .r {background-image: url(../images/rndBox-lightCyan-lr.gif) !important; width: 2px !important;}

/* ----------------- LEFTBAR KNAPSACK ------------------------- */

#header {z-index: 0;}
#leftBar {z-index: 1;}
#characterName { width:173px; height:17px; }
#characterName h4 { position: absolute; background-image:url(/images/char-name-bg.gif ); text-align:center; font-size:11px; color: #215cb9; width:173px; height:17px; overflow: hidden; font-weight:normal; margin-left:5px; margin-top:-5px; }

#knapStatus {width: 162px; height: 62px;}
#knapStatusWrap {background: url(../images/knapsack-body-bg.gif) repeat-y; padding: 0 0 6px 12px;}

#knapsack {background: url(../images/knapsack-body-bg.gif) repeat-y; margin-top: 0px; height: auto !important;}
#knap {position: relative; width: 185px; margin: 0 0 0 2px; min-height: 56px; overflow: hidden;padding-bottom: 44px; _height:255px;}
#knap a.toggleKnap {display: block; position: relative; width: 100%; height: 56px; background: url(../images/knapsack-button-bg.gif) no-repeat; z-index: 2; cursor: pointer; _cursor: hand;}
#knapFrame {position: relative;display: none;background: url(../images/knapsack-frame-bg.gif) no-repeat 50% 100%;width: 100%;height: 260px;top: -45px;z-index: 0;overflow: hidden;padding-bottom: 17px;}
#knapFrame .btnDown,
#knapFrame .btnUp {position: absolute; width: 36px; height: 37px; background: purple; cursor: pointer; _cursor: hand;}
#knapFrame .btnUp { bottom: -2px; right: 43px; background: url(../images/knap-btn-up.gif) no-repeat;}
#knapFrame .btnDown { bottom: -2px; right: 6px;  background: url(../images/knap-btn-down.gif) no-repeat;}

#knapItemsWrap li .qty {position: absolute; background: white; font-size: 9px;line-height: 12px; vertical-align: middle; text-align: center; bottom: 3px; right: 3px; _zoom: 1;}

#knapItemsWrap {position: relative;display: block;width: 153px;height: 179px;overflow: hidden;z-index: 1;left: 13px;padding: 0 0 10px 0;margin: -277px 0 0 4px;}
#knapItemsWrap li {_display: inline; position: relative; width:47px; height: 45px; margin: 0 6px 6px 0; float: left; line-height: 45px; vertical-align: middle; text-align: center; _zoom: 1;}
#knapItemsWrap li a {display: block; width: 47px; height: 45px; background-repeat: no-repeat;}
#knapItemsWrap li a span {display: none;}
#knapItemsWrap li.last {margin-right: 0px;}
#knapItemsWrap h5 {position: relative; width: 153px; height: 8px;clear: left; margin-bottom: 6px;}
#knapItemsWrap h5.food {background: url(../images/knap-title-food.gif) no-repeat;}
#knapItemsWrap h5.clothes {background: url(../images/knap-title-clothes.gif) no-repeat;}
#knapItemsWrap h5.accessories {background: url(../images/knap-title-access.gif) no-repeat;}
#knapItemsWrap h5.backgrounds {background: url(../images/knap-title-backgrounds.gif) no-repeat;}
#knapItemsWrap h5 span {display: none;}

#knapsackFlashWrap {background: url(../images/knapsack-body-bg.gif) repeat-y; margin-top: 2px;}
#knapsackFlashWrap .knapsackBg,
#knapsackFlash {width: 183px; height: 244px;}
#knapsackFlashWrap .knapsackBg {background-position: 50% 50%; background-repeat: no-repeat;}

#knapsackTop {position: relative; top: -24px; width: 196px; height: 48px; background: url(../images/knapsack-top-bg.gif) no-repeat; margin-bottom: -26px;}
#knapsackBottom {position: relative; width: 196px; height: 31px;  background: url(../images/knapsack-bottom-bg.gif) no-repeat;}

#knapsackWallet {background: url(../images/knapsack-body-bg.gif) repeat-y; padding: 5px 0 0 0; }
#knapsackWallet p {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #215cb9; padding: 12px 0 0 25px; width: 173px; height: 49px; background: url(../images/knapsack-wallet-bg.gif) no-repeat 7px 0; text-align: center; line-height: 12px; _line-height: 14px;}
#knapsackWallet p .fbCurrency {font-style: italic; font-size: 18px;}
#knapsackWallet p .amount {font-size: 18px; font-weight: bold;}


/* ----------------- TOOLTIP STYLE ------------------------- */

.toolBox {display: none; position: absolute; background: white; border: 2px solid #318CFB; max-width: 200px; min-height: 20px; padding: 5px; top: 0px; left: 0px; cursor: help;}

/* ----------------- FORM STYLES ------------------------- */

form input, form select {border: 2px solid #90DDEA;}
form fieldset {width: 100%;}
form fieldset label {float: left; padding: 5px 0; width: 48%;}
form fieldset input, form fieldset select {float: right; margin: 5px 0; width: 48%;}
form fieldset select.birthYear,
form fieldset select.birthMonth,
form fieldset select.birthDay {width: 16%;}
form fieldset div.half {width: 48%; float: right;}
form fieldset div.half label,
form fieldset div.half input {float: left;}
form fieldset div.half label {width: 10px;}
form fieldset div.half input {width: 30px;}
form p.submit {text-align: center; padding: 20px 0 0 0;}

/* ----------------- GENERAL STYLES ------------------------- */

a {text-decoration: none; color: #302eb3;}
a:hover {text-decoration: underline;}
.lastLink {border-right: 0px !important; margin-right: 0px !important; padding-right: 0px !important;}
.firstLink {border-left: 0px !important; margin-left: 0px !important; padding-left: 0px !important;}
.noBorder {border: 0px;}
.left {float:left;}
.right {float:right;}
.clear { clear:both; }
.flushleft {float:left;padding-right:10px;}
.flushright {float:right;padding-left:10px;}
.fallsbuck {font-style: italic;}
.hideText span {display: none;}

.registrationMessage {display:none; border:1px solid #e47600;padding:3px;margin-bottom:10px;background: #f4cccc; color:#C80000;}

.loginMessage {display:none; border:1px solid #e47600;padding:3px;margin-bottom:10px;background: #f4cccc; color:#C80000; width:375px;}

.contactMessage {display:none; border:1px solid #e47600;padding:3px;margin-bottom:10px;background: #f4cccc; color:#C80000; width:473px;}