/********************/
/* Body and Wrapper */
/********************/

html {
 margin: 0;
 padding: 0;
}

body, .body {
 background-color: #000000;
 background-image: url(/images/bg.gif);
 background-position: top left;
 background-repeat: repeat-x;
 margin: 0;
 padding: 0 0 20px 0;
}

#container {
 margin: 0;
 padding: 0;
}

#wrapper {
 background-color: #53504e;
 background-image: url(/images/wrapper_bg.gif);
 background-position: top left;
 background-repeat: repeat-y;
 width: 811px;
 margin: 0;
 padding: 0;
}

#wrapper_border_left {
 background-color: #000000;
 background-image: url(/images/wrapper_border_left.jpg);
 background-position: top right;
 background-repeat: no-repeat;
 width: 20px;
 height: 800px;
 margin: 0;
 padding: 0;
 float: left;
}

#wrapper_center {
 width: 771px;
 padding: 0;
 margin: 0;
 float: left;
}

#wrapper_border_right {
 background-color: #000000;
 background-image: url(/images/wrapper_border_right.jpg);
 background-position: top left;
 background-repeat: no-repeat;
 width: 20px;
 height: 800px;
 margin: 0;
 padding: 0;
 float: left;
}





/************/
/* Elements */
/************/

p {
 width: 85%;
 margin: 0 auto 15px auto;
 padding: 0;
 text-align: left;
}

h1 {
 width: 85%;
 margin: 0 auto 15px auto;
 font-size: 18px;
 font-family: Trebuchet, Arial, sans-serif;
 font-weight: normal;
 text-align: left;
}

h2 {
 font-family: Notepad, sans-serif;
 margin: 10px 0 5px 10px;
}

.h3 {
 display: block;
}











/*************/
/* Preloader */
/*************/

.preloadbar {
 z-index: 9999;
}














/**********/
/* Header */
/**********/

.header {
 background-position: top left;
 background-repeat: no-repeat;
 width: 771px;
 height: 220px;
 margin: 0;
 padding: 0;
}

.header a {
 text-decoration: none;
}

.header #header_home {
 display: block;
 width: 45px;
 height: 20px;
 float: right;
 margin: 13px 10px 0 0;
}

.header #header_terms {
 display: block;
 width: 142px;
 height: 20px;
 float: right;
 margin: 13px 17px 0 0;
}









/*********************************/
/* Floaters and Mouseover popups */
/*********************************/

.floatercell {
 height: 260px;
 float: left;
 border: none;
 margin: 0px;
 overflow: visible;
}

.paddingDiv {
 float: left;
 margin-right: 60px;
}

.activeImg {
 border: none;
 margin: 0 0 7px 0;
}

#trailimageid {
 font-size: 0.75em;
 position: absolute;
 display: none;
 left: 0px;
 top: 0px;
 width: auto;
 height: 0px;
 z-index: 200;
}








/********************/
/* Forms and Inputs */
/********************/

fieldset {
 border: none;
 text-align: left;
}

fieldset div label {
 width: 90px;
 margin: 3px 10px auto 55px;
 float: left;
 text-align: right;
 clear: both;
}

fieldset div input, fieldset div select {
 float: left;
 height: 21px;
 text-align: left;
 margin: auto auto 5px auto;
 border: none;
 font-family: Trebuchet, Arial, sans-serif;
 font-size: 14px;
 color: #000000;
}

fieldset div textarea {
 width: 425px;
 height: 120px;
 display: block;
 margin: 10px auto;
 border: none;
 font-family: Trebuchet, Arial, sans-serif;
 font-size: 14px;
 color: #000000;
}

fieldset .send_button {
 float: right;
 cursor: pointer;
 border: 0;
 background-color: #CDC5C3;
 background-image: url(/images/send_button.jpg);
 background-position: top left;
 background-repeat: no-repeat;
 width: 75px;
 height: 25px;
 margin: 0;
 padding: 0;
}








/**********/
/* Footer */
/**********/

#footer {
 background-image: url(/images/footer.gif);
 background-position: top left;
 background-repeat: no-repeat;
 width: 771px;
 height: 60px;
 margin: 0;
 padding: 0;
}

#footer a {
 text-decoration: none;
}

#footer #footer_mailto {
 display: block;
 width: 215px;
 height: 20px;
 float: right;
 margin: 30px 30px 0 0;
}

#credits {
 background: #000;
 display: block;
 width: 800px;
 margin: 0 auto 0 auto;
 padding: 20px 0 0 0;
 text-align: center;
 font-family: Tahoma, Helvetica, Tahoma, Arial, sans-serif;
 font-size: 11px;
 letter-spacing: 2px;
 color: #333;
 text-decoration: none;
}

#credits a, #credits a:hover {
 font-family: Tahoma, Helvetica, Tahoma, Arial, sans-serif;
 font-size: 11px;
 letter-spacing: 2px;
 text-decoration: none;
}
#credits a {
 color: #333;
}
#credits a:hover {
 text-decoration: underline;
 color: #999;
}


/**********/
/* Navbar */
/**********/

#navbar {
 width: 771px;
 height: 31px;
 margin: 0;
 padding: 0;
 list-style-type: none;
}

#navbar li {
 background-position: top left;
 background-repeat: no-repeat;
 margin: 0;
 padding: 0;
 height: 31px;
 float: left;
}

#navbar li a {
 display: block;
 text-decoration: none;
 height: 31px;
 margin: 0;
 padding: 0;
}

#navbar #spacer_left {
 background-image: url(/images/navbar_spacer_left.jpg);
 width: 155px;
}

#navbar #about, #navbar #about:hover:active {
 width: 89px;
 background-image: url(/images/navbar_about.jpg);
}
#navbar #about {
 background-position: 0px 0px;
}
#navbar #about:hover {
 background-position: 0px -31px;
}
#navbar #about:active, #navbar #about.selected {
 background-position: 0px -62px;
}

#navbar #products, #navbar #products:hover {
 width: 85px;
 background-image: url(/images/navbar_products.jpg);
}
#navbar #products {
 background-position: 0px 0px;
}
#navbar #products:hover {
 background-position: 0px -31px;
}
#navbar #products:active, #navbar #products.selected {
 background-position: 0px -62px;
}

#navbar #whowesupport, #navbar #whowesupport:hover {
 width: 143px;
 background-image: url(/images/navbar_whowesupport.jpg);
}
#navbar #whowesupport {
 background-position: 0px 0px;
}
#navbar #whowesupport:hover {
 background-position: 0px -31px;
}
#navbar #whowesupport:active, #navbar #whowesupport.selected {
 background-position: 0px -62px;
}

#navbar #photosubmissions, #navbar #photosubmissions:hover {
 width: 152px;
 background-image: url(/images/navbar_photosubmissions.jpg);
}
#navbar #photosubmissions {
 background-position: 0px 0px;
}
#navbar #photosubmissions:hover {
 background-position: 0px -31px;
}
#navbar #photosubmissions:active, #navbar #photosubmissions.selected {
 background-position: 0px -62px;
}

#navbar #contactus, #navbar #contactus:hover {
 width: 99px;
 background-image: url(/images/navbar_contactus.jpg);
}
#navbar #contactus {
 background-position: 0px 0px;
}
#navbar #contactus:hover {
 background-position: 0px -31px;
}
#navbar #contactus:active, #navbar #contactus.selected {
 background-position: 0px -62px;
}

#navbar #spacer_right {
 background-image: url(/images/navbar_spacer_right.jpg);
 width: 48px;
}





/***********/
/* Leftnav */
/***********/

#leftnav_wrapper {
 background-color: #53504e;
 margin: 0;
 padding: 0;
 height: 100%;
 vertical-align: top;
 width: 136px;
}

#leftnav {
 background-color: #53504e;
 background-image: url(/images/leftnav_bg.gif);
 background-position: top left;
 background-repeat: repeat-x;
 width: 136px;
 height: 490px;
 margin: 0;
 padding: 0;
 float: right;
 list-style-type: none;
 vertical-align: top;
}

#leftnav li {
 width: 136px;
 height: 20px;
 margin: 0;
 padding: 0;
}

#leftnav li a {
 display: block;
 width: 136px;
 height: 20px;
 margin: 0;
 padding: 0;
 text-decoration: none;
}

#leftnav #catalog {
 background-image: url(/images/leftnav_catalog.gif);
}
#leftnav #catalog.selected {
 background-image: url(/images/leftnav_catalog_over.gif);
}

#leftnav #cards {
 background-image: url(/images/leftnav_cards.gif);
}
#leftnav #cards.selected {
 background-image: url(/images/leftnav_cards_over.gif);
}

#leftnav #pocketpals {
 background-image: url(/images/leftnav_pocketpals.gif);
}
#leftnav #pocketpals.selected {
 background-image: url(/images/leftnav_pocketpals_over.gif);
}

#leftnav #puzzles {
 background-image: url(/images/leftnav_puzzles.gif);
}
#leftnav #puzzles.selected {
 background-image: url(/images/leftnav_puzzles_over.gif);
}

#leftnav #mgames {
 background-image: url(/images/leftnav_mgames.gif);
}
#leftnav #mgames.selected {
 background-image: url(/images/leftnav_mgames_over.gif);
}

#leftnav #boxednotes {
 background-image: url(/images/leftnav_boxednotes.gif);
}
#leftnav #boxednotes.selected {
 background-image: url(/images/leftnav_boxednotes_over.gif);
}

#leftnav #journals {
 background-image: url(/images/leftnav_journals.gif);
}
#leftnav #journals.selected {
 background-image: url(/images/leftnav_journals_over.gif);
}

#leftnav #stickerbooks {
 background-image: url(/images/leftnav_stickerbooks.gif);
}
#leftnav #stickerbooks.selected {
 background-image: url(/images/leftnav_stickerbooks_over.gif);
}

#leftnav #magnets {
 background-image: url(/images/leftnav_magnets.gif);
}
#leftnav #magnets.selected {
 background-image: url(/images/leftnav_magnets_over.gif);
}

#leftnav #displays {
 background-image: url(/images/leftnav_displays.gif);
}
#leftnav #displays.selected {
 background-image: url(/images/leftnav_displays_over.gif);
}

#leftnav #namedrop {
 background-image: url(/images/leftnav_namedrop.gif);
}
#leftnav #namedrop.selected {
 background-image: url(/images/leftnav_namedrop_over.gif);
}





/*****************/
/* Content Block */
/*****************/

#content_wrapper {
 width: 771px;
/* background-color: #888380; */
 background-image: url(/images/content_wrapper_bg.gif);
 background-position: top left;
 background-repeat: repeat-y;
 margin: 0;
 padding: 0;
 text-align: left;
}

#content {
 width: 635px;
 background-color: #888380;
 padding: 35px 0 35px 0;
 margin: 0;
 text-align: center;
 float: right;
 color: #FFFFFF;
 font-family: Trebuchet, Arial, sans-serif;
 font-size: 14px;
}

#content_expand_wrapper {
 margin-left: 45px;
 width: 306px;
 float: left;
}

#content_expand_top { 
 height: 30px;
 background-image: url(/images/bg_expand_top.gif); 
 background-repeat: no-repeat;
 width: 320px;
}
#content_expand_mid { 
 width: 250px;
 background-image: url(/images/bg_expand_mid.gif); 
 background-repeat: repeat-y;
 text-align: left;
 font-size: 12px;
 padding-left: 35px;
 padding-right: 35px;
}
#content_expand_bot { 
 height: 30px;
 background-image: url(/images/bg_expand_bot.gif); 
 background-repeat: no-repeat;
 width: 320px;
}

#content-homeimg {
 display: block;
 float: left;
 margin-left: 250px;
}

div.whowe_wrapper {
 margin: 0 0 30px 0;
 clear: both;
}

div.whowe_img {
 width: 20%;
 margin: 0 15px auto 5%;
 padding: 0;
 float: left;
 text-align: right;
}

div.whowe_desc {
 float: left;
 width: 70%;
 font-size: 12px;
 text-align: left;
}

.catalogentries {
 width: 400px;
 text-align: left;
 padding: 0 0 0 120px; 
 margin: 0 auto 0 0;
}

.catalogentries div {
 height: 30px;
}

.catalogentries div a {
 display: block;
 float: left;
 background-image: url(/images/PDF-Icon.jpg);
 background-position: top left;
 background-repeat: no-repeat;
 line-height: 30px;
 height: 30px;
 vertical-align: middle;
 padding: 0 0 0 25px;
}

.catalogentries div span.pagesdesc {
 display: block;
 float: left;
 padding: 5px 0 0 10px;
}









/************/
/* Overlays */
/************/

#overlay
{
	position: absolute;
	left: 0px;
	top: 0px;

	width: 100%;
	height: 100%;

	background-image: url(/images/bg.gif);
	background-position: top left;
	background-repeat: repeat-x;
	
	/* z-index sets the layer order, so that the overlay rests on top.
	Bear in mind that the popup dialogue needs to be even higher! */
	z-index: 1000;
}

#loadingBox
{
	position: absolute;

	left: 50%;
	margin-left: -175px;
	top: 100px;

	width: 350px;
	padding: 20px;

	border: 2px solid #fcc270;
	background-color: #000000;

	z-index: 2000;

/*	background-image: url(/images/logo.jpg);
	background-position: top center;
	background-repeat: no-repeat; 
	padding: 240px 20px 20px 20px; */
	padding: 10px 20px 20px 20px;
	text-align: center;
}










/************************/
/* Standardized Outputs */
/************************/

.errors {
 background-color: #CCCCCC;
 color: #FF0000;
 width: 85%;
 margin: auto auto 10px auto;
 font-size: 15px;
 font-weight: bold;
 text-align: left;
 
}