@charset "UTF-8";
/* CSS Document */


/* inspire.css
------------------------------------------------------------------------------

Author:  			Peter Richman
E-mail:				peter@plugandplaydesign.co.uk
Company: 			Plug and Play Design
Date:				12/06/2008

Version:			1.0
Designed for:		FireFox 2

CSS file:			Design One

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





/* =USUAL SUSPECTS
------------------------------------------------------------------------------*/

body{
font-family:		Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size:			62.5%;
color:				#444444;
background:			#ebf3cd;
}

img{
border:				none;
}

h1, h2, h3, h4, h5, h6{
font-family:		Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}


.centre p strong{
color:				#000;
}


a{
text-decoration:	none;
}

q{
font-style:			italic;
color:				#000;
}

.clear{
clear:				both;
}

strong{
color:				#000;
}



/* HACK for FIREFOX!! - to always display right hand scroll bars in short pages
this prevents the page bouncing left when changing pages */

html {
overflow: -moz-scrollbars-vertical;
height: 100%;
}

/*Hack over*/

p{
font-size:			1.2em;
line-height:		1.8em;
}

p a{
text-decoration:	none;

}

p img{
margin:				10px;
padding:            0px;

}

p a:hover{
text-decoration:	underline;
}

a:hover{
text-decoration:	underline;
}

/* REMOVES HORIZONTAL SCROLL BARS */
html{
overflow-x:			hidden;
}

/* =WRAPPER
------------------------------------------------------------------------------*/


/* =MENU
------------------------------------------------------------------------------*/


.menuWrapper{
margin-top:			-43px;
}

*html .menuWrapper{
_margin-top:			-33px;
_position:				absolute;
}

* div[class="menuWrapper"]{
* margin-top:			-52px;
}

.mainMenu{
list-style:			none;
text-indent:        -5000px;
width:				1000px;
position:			relative;
left:				50%;
margin-left:		-543px;
}

*html .mainMenu{
_margin-left:		-495px;
}

* .mainMenu{
* margin-left:		-505px;
}


.mainMenu li{
float:				left;
margin-left:		1px;
}

.mainMenu li a{
display:			block;
height:				33px;
}

.mainMenu li #home{
width:				84px;
background:			url(../images/pixiHome.gif) no-repeat left top;
}

.mainMenu li #home:hover{
background-position:	right top;
}

.mainMenu li #play{
width:				146px;
background:			url(../images/pixiPlay.gif) no-repeat left top;
}

.mainMenu li #play:hover{
background-position:	right top;
}

.mainMenu li #buy{
width:				123px;
background:			url(../images/pixiBuy.gif) no-repeat left top;
}

.mainMenu li #buy:hover{
background-position:	right top;
}

.mainMenu li #med{
width:				119px;
background:			url(../images/pixiBeInspired.gif) no-repeat left top;
}

.mainMenu li #med:hover{
background-position:	right top;
}

.mainMenu li #wisdom{
width:				98px;
background:			url(../images/pixiPoetry.gif) no-repeat left top;
}

.mainMenu li #wisdom:hover{
background-position:	right top;
}

.mainMenu li #community{
width:				110px;
background:			url(../images/pixiChat.gif) no-repeat left top;
}

.mainMenu li #community:hover{
background-position:	right top;
}

.mainMenu li #qualities{
width:				125px;
margin-top:			1px;
background:			url(../images/pixiQualities.gif) no-repeat left top;
}

.mainMenu li #qualities:hover{
background-position:	right top;
}


.topWrapper .mainMenu .selected #home, .topWrapper .mainMenu .selected #play, .topWrapper .mainMenu .selected #buy, .topWrapper .mainMenu .selected #med, .topWrapper .mainMenu .selected #wisdom, .topWrapper .mainMenu .selected #qualities, .topWrapper .mainMenu .selected #community{
background-position:	right top;
}


/* =SUB MENU
------------------------------------------------------------------------------*/

.subBar{
width:					100%;
height:					30px;
background:				#ee81b5;
float:					left;
margin:					-1px 0px 0px 0px;
padding:                0px;
}

* .subBar{
* margin-top:			-20px;
}

.subMenu{
list-style:				none;
margin-top:				8px;
padding:                0px;
width:					992px;
position:				relative;
left:					50%;
margin-left:			-480px;
margin-bottom:			0px;
}

.subMenu li{
float:					left;
margin-right:			25px;

}

.subMenu li a{
color:					#FFF;
}

* .myHomePage{
* padding-right:			15px;
}

/* =TOP
------------------------------------------------------------------------------*/

.topWrapper{
background:			#cbe08a;
height:				141px;
position:			absolute;
top:				0px;
left:				0px;
width:				102%;
}


.top{
width:				1089px;
background:			url(../images/topBG.jpg) top left no-repeat;
height:				141px;
position:			relative;
left:				50%;
margin-left:		-632px;
}

*html .top{
* margin-left:		-622px;
}


.top h1{
padding-top:		10px;
position:			relative;
left:				110px;
margin:				0px;
}

/* =BODY LAYOUT
------------------------------------------------------------------------------*/

.bodyWrapper{
width:					990px;
margin-left:			auto;
margin-right:			auto;
padding:				170px 0 10px 0;
}

.bodyLeft{
float:					left;
width:					600px;
}

.bodyRight{
float:					right;
width:					380px;
}

.bodyJust{

width:					1000px;
padding-bottom:         10px;
}


/* =THOUGHT OF THE DAY
------------------------------------------------------------------------------*/

.thoughtTop{
background:				url(../images/totdTop.gif) top left no-repeat;
width:					601px;
height:					25px;
}

.thought{
background:				url(../images/totdMid.gif) top left repeat-y;
width:					601px;
}

.thought p{
margin-bottom:			0px;
color:					#ee81b5;
font-style:				italic;
padding-right:			25px;
background:				url(../images/totdBottom.gif) bottom left no-repeat;
padding-left:           25px;
padding-bottom:         30px;
min-height:             68px;
}

.thought h3{
margin-top:				0px;
color:					#e82a8c;
font-weight:			lighter;
font-size:				2em;
margin-left:			25px;

}

.thoughtBottom{
background:				url(../images/totdBottom.gif) top left no-repeat;
width:					601px;
height:					68px;
margin-top:				-30px;
}

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

.bodyContent{
background-color:		#FFF;
width:					570px;
margin:					14px 0px 0px 10px;
}

.bodyContentJust{
background-color:		#FFF;
width:					984px;
margin:					10px 0px 0px 0px;
border:					3px solid #CBE08A;
}

.bodyContent p, .bodyContent h1, .bodyContent h2, .bodyContent h3, .bodyContent h4, .bodyContent h5, .bodyContent h6, .bodyContent ul, .bodyContent ol, .bodyContent table{
margin-left:			12px;
margin-right:			12px;
}


.bodyContentJust p, .bodyContentJust h1, .bodyContentJust h2, .bodyContentJust h3, .bodyContentJust h4, .bodyContentJust h5, .bodyContentJust h6, .bodyContentJust ul, .bodyContentJust ol, .bodyContentJust table{
margin-left:			12px;
margin-right:			12px;
}


.bodyContent h1, .bodyContent h2, .bodyContent h3, .bodyContent h4, .bodyContent h5, .bodyContent h6{
color:					#64ac43;
font-style:				italic;
font-weight:			lighter;
margin-top:				0px;
margin-bottom:			0px;
padding-top:            10px;
}

.bodyContentJust h1, .bodyContentJust h2, .bodyContentJust h3, .bodyContentJust h4, .bodyContentJust h5, .bodyContentJust h6{
color:					#64ac43;
font-style:				italic;
font-weight:			lighter;
margin-top:				0px;
margin-bottom:			0px;
padding-top:            10px;
}



.bodyContent h1, .bodyContent h2, .bodyContentJust h1, .bodyContentJust h2{
font-size:				2em;
}

.bodyContent h3, .bodyContentJust h3{
font-size:				1.9em;
}

.bodyContent h4, .bodyContentJust h4{
font-size:				1.7em;
}

.bodyContent h5, .bodyContentJust h5{
font-size:				1.5em;
}

.bodyContent h6, .bodyContentJust h6{
font-size:				1.3em;
}

.bodyContent ul, .bodyContent ol, .bodyContentJust ul, .bodyContentJust ol{
margin-left:			12px;
padding-left:           40px;
font-size:				1.2em;
line-height:			1.8em;
}


.bodyContent a, .bodyContentJust a{
color:					#E82A8C;
}

.bodyContent img, .bodyContentJust img{
margin:					10px;
padding:                0px;
}


/* =LOGIN BOX
------------------------------------------------------------------------------*/

.loginBox{
background-color:		#FFF;
border:					3px solid #E82A8C;
margin-top:				10px;
}

.loginBox h3{
color:					#E82A8C;
font-weight:			lighter;
font-size:				2em;
margin:					10px 0px 0px 7px;
float:					left;
width:					310px;
}

.loginBox .formElements{
margin-top:				50px;
}

.loginBox .signUp{
color:					#00b9f3;
width:					343px;
float:					left;
font-size:				1.5em;
margin-left:			14px;
margin-bottom:			20px;
}

.signUpError{
color:					#CC0033;
width:					343px;
float:					left;
font-size:				1.2em;
margin-left:			14px;
}

.loginBox input, .bodyContent input{
background:				url(../images/inputBG.gif) bottom left repeat-x;
border:					1px solid #CCC;
height:					20px;
font-family:		    Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size:              1.5em;
font-weight:            ligher;
color:                  #555
}



.loginBox .signUp span a{
display:				block;
width:					80px;
height:					20px;
background:				#00b9f3;
color:					#FFF;
float:					right;
padding-left:           17px;
padding-bottom:         6px;
}

* .loginBox .signUp span a{
* margin:				-10px 0px 10px 0px;
* padding-left:          19px;
* padding-bottom:        7px;
}

*html .loginBox .signUp span a{
_padding-bottom:		4px;
}

*html .loginBox .signUp span a{
position:				relative;
left:					-15px;
}

/* =FORMS
------------------------------------------------------------------------------*/


label{
color:					#E82A8C;
font-size:				1.5em;
margin-left:			14px;
}

#checkout{
position:				relative;
top:					-12px;
}


.radio{
height:					12px;
background:				none;
}

table th{
vertical-align:			top;
text-align:				left;
font:					Verdana, Arial, Helvetica, sans-serif;
font-size:				0.8em;
font-weight:			lighter;
}

.loginBox input, .bodyContent input{
width:					230px;

padding-bottom:			2px;
padding-top:            2px;
margin-bottom:			13px;
margin-right:			20px;
}

.loginBox input{
float:					right;
}
.bodyContent input{
float:					left;
}

.loginBox label, .bodyContent label{
float:					left;
margin-bottom:			15px;
margin-top:				5px;
}

body .loginBox .submit, body .bodyContent .submit{
width:					150px;
height:					25px;
padding-left:           8px;
padding-bottom:         4px;
background:				#E82A8C;
color:					#FFF;
cursor:					pointer;
}


body .loginBox .submitRight{
position:				relative;
left:					255px;
width:					93px;
height:					25px;
padding-left:           8px;
padding-bottom:         4px;
background:				#E82A8C;
color:					#FFF;
cursor:					pointer;
}


.bodyError{
margin-top:				0px;
margin-bottom:			0px;
padding-left:           10px;
color:					#F00;
}

.errorWrapper{
border:					3px solid #FF0000;
padding:                10px 0px 10px 0px;
margin-bottom:          20px;
margin-left:			20px;
margin-right:			20px;
}

.bodyWrapper .loginBox input[type="checkbox"], .bodyWrapper .bodyContent input[type="checkbox"]{
height:					20px;
width:					20px;
background:				none;
border:					none;
}


/* =ADVERTS
------------------------------------------------------------------------------*/

.leftAdvert{
margin-top:				10px;
margin-left:            22px;
}


/* =CARDS
------------------------------------------------------------------------------*/

#playingBoard {
background:url(../images/playing-board.jpg) top left no-repeat;
width:990px;
height:628px;
padding:0;
position:relative;
}
#playingBoardQuestion {
background:url(../images/playing-board-question.jpg) top left no-repeat;
width:990px;
height:628px;
padding:0;
position:relative;
}
#playingBoardQuestionCards {
background:url(../images/playing-board-question-cards.jpg) top left no-repeat;
width:990px;
height:628px;
padding:0;
position:relative;
}
#playingBoard img, #playingBoardQuestionCards img {
position:absolute;
cursor:pointer;
cursor:hand;
}
#playingBoard img#deck { top:224px; left:772px; }
#playingBoard img#card_1 { top:432px; left:25px; }
#playingBoard img#card_2 { top:432px; left:176px; }
#playingBoard img#card_3 { top:432px; left:327px; }
#playingBoard img#card_4 { top:432px; left:478px; }
#playingBoard img#card_5 { top:229px; left:403px; }
#playingBoard img#card_6 { top:229px; left:252px; }
#playingBoard img#card_7 { top:229px; left:101px; }
#playingBoard img#card_8 { top:25px; left:25px; }
#playingBoard img#card_9 { top:25px; left:176px; }
#playingBoard img#card_10 { top:25px; left:327px; }
#playingBoard img#card_11 { top:25px; left:478px; }
#playingBoardQuestionCards img#deck { top:252px; left:568px; }
#playingBoardQuestionCards img#card_1 { top:252px; left:306px; }
#playingBoard input#cardsSubmit {
position:absolute;
top:287px;
left:770px;
height:45px;
width:123px;
background:url(../images/cards-submit.gif) no-repeat;
border:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
color:#FFF;
cursor:pointer;
cursor:hand;
}
#playingBoardQuestionCards input#cardsSubmit {
position:absolute;
top:312px;
left:566px;
height:45px;
width:123px;
background:url(../images/explain-button.gif) no-repeat;
border:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
color:#FFF;
cursor:pointer;
cursor:hand;
}
div#questionAsked {
position:absolute;
top:130px;
left:311px;
width:542px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1.5em;
font-weight:bold;
}
input#askButton {
position:absolute;
top:343px;
left:605px;
height:45px;
width:123px;
background:url(../images/ask-button.gif) no-repeat;
border:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
color:#FFF;
cursor:pointer;
cursor:hand;
}
input#question {
position:absolute;
top:283px;
left:272px;
width:450px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:1.5em;
font-weight:bold;
}
#cardsForm, #questionForm { margin:0; }
div#preload img { height:0; width:0; }

#musicPlayer {
float:right;
width:48px;
height:39px;
padding:1px 0 0 7px;
margin-bottom:10px;
background:url(../images/player-bg.gif) no-repeat;
}

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

.footerMenu{
width:				970px;
position:			relative;
left:				50%;
margin-left:		-485px;
list-style:			none;
padding-left:       0px;
border-top:			2px solid #64AC43;
padding-top:        7px;
}

* .footer{
* margin-top:		-160px;
}

* .IEfooter{
* display:			block;
* width:			1000px;
* height:			160px;
}


.footerMenu li{
float:					left;
margin-right:		20px;
}

.footerMenu li a{
color:				#64AC43;
}

/* =COLOR SPANS FOR TEXT HIGHLIGHTING
------------------------------------------------------------------------------*/
.pink{
color:					#E82A8C;
}
.blue{
color:					#00b9f3;
}



/* =TABLES
------------------------------------------------------------------------------*/

.basketTable{
border-collapse:		collapse;
width:					550px;
}

.bodyContent .basketTable thead tr{
background:				#E82A8C;
color:					#FFF;
font-size:				1.5em;
}

.lastrow_right, .lastrow price{
text-align:				right;
}

.bodyContent .basketTable tr td{
border-bottom:			1px solid #CCC;
}

.bodyContent .basketTable td input{
margin-top:				3px;
margin-bottom:			3px;
width:					50px;
}

.buttonWrapper{
width:					550px;
}

.buttonWrapper input{
float:					right;
}

.price{
text-align:				right;
}

.quantity{
width:					50px;
}