body {
	margin: 0 0 10px 0; padding: 0;
	font-family: verdana, arial, sans-serif; font-size: 62%;
	background-color: #fff;
	color: #000;
}
/* ----------------------------------------------------- */
/* ------------------  Layout Styles  ------------------ */
/* ------------------     Custom      ------------------ */
/* ------------------       ID        ------------------ */
/* ----------------------------------------------------- */
#wrapper {
 padding: 0 0 0px 0; width: 795px; float:left;
	background: white url("../img/wrapper_bg.png") bottom left no-repeat;
	border: 0;
	color: inherit;
}

strong {color:#818fb6;}

a:link{color:#112870;
		text-decoration:none;}
		a:visited{color:#112870;
text-decoration:none;}

a:active{color:#112870;}
a:hover{color:#112870;
		text-decoration:underline;}

/* Content wrapper added as a non-floating container, ie seems to cry at floating elements using the auto margin */
#contentwrapper {
	width: 775px;
	margin: 0 auto;
}
#header {
margin-left:10px;
width:775px;
}


#header_logo {
float:left;clear:none;
	width: 245px; 
	height: 80px; 

}
#animation{float:right;clear:none;}


#banner {
	clear: both; margin: 0 auto 0 auto; padding: 0; width: 765px; height: 150px;
	background: url("../img/banner.png") 0 0 no-repeat;
}

#main_content {
	display: block; float: left; /* floated left now */
	margin: 0px 0 10px 10px; padding: 0; width: 600px; /* width adjusted to 510 to match image size in #main_content h2 */
	min-height: 434px;
}



#main_content.popbop h2{background: url("../img/PopBops_logo.png") 0 0 no-repeat; height: 65px;
padding-left:230px;width:370px;
}

.downloadtext h1 {margin-left:210px;;}
.downloadtext{margin-top:100px; text-align:center;}

.characterbox {float:left;margin-top:50px;}

.tekbop { }

.iconPDF{

	font-size: 12px;

	background:  url(../img/icon_PDF.gif) no-repeat;

	padding: 0 0 0 20px;

	

}


h1 { 

	display: block; float:left; clear:right; margin-top:0px; margin-bottom:10px; width: 600px; overflow: hidden;
	color: #a2a2a2; 
	font-size: 35px;
	padding-left:0px;
}
#popboxtext h1 {margin-top:0px; margin-bottom:0px; font-size:17px; color:#a2a2a2; width:300px;}
.bopheader h1 {margin-top:5px; margin-bottom:0px; font-size:20px; color:#a2a2a2;}
#cardtext h1 {width:250px; font-size:20px;}

h2 {margin-top:0px; margin-bottom:0px; font-size:17px; color:#a2a2a2;}

.popbop h1 {font-size:30px; width:300px; margin-bottom:0px;}

#main_content h3 {
	font-size: 1.3em; line-height: 1.5em;
	margin-bottom:0px;
	color: #233e75;
	clear:both;
	background-color: inherit;
}

#main_content p {
	font-size: 1.1em; line-height: 1.5em; 

	background-color: inherit;
}

#main_content a img {
	border: 0;
}

.gadget{ float:left;  margin-right:10px; width:273px; background:url("../img/gadget_middle.jpg") repeat-y; z-index:3;
}

.gadgetheader{width:100%; float:left;  
background:url("../img/gadget_top.jpg") 0 0 no-repeat; z-index:3;}


.gadgetbody{font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7; height:100%; width:233px; clear:both; padding:0px 20px 20px 20px; background:url("../img/gadget_bottom.jpg") bottom left no-repeat; z-index:3;
}

.gadgetbody2{font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7; height:120px; width:233px; clear:both; padding:0px 20px 20px 20px; background:url("../img/gadget_bottom.jpg") bottom left no-repeat; z-index:3;
}

.gadgetImgLeft{padding-left:20px;}
.gadgetimage_right{z-index:1;
position:relative; bottom:20px; left:170px;}
.gadgetTxt_left{
position:relative; bottom:60px; left:0px; font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7; font-weight:bold;}
.gadgetBlank_txt{font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7; font-weight:bold;}

.gadgetBlank h1 {margin-top:0px; margin-bottom:0px; font-size:45px; width:233px;}

.gadgetBlank{ font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7; height:150px; float:left; clear:none; padding:3px 20px 20px 20px; margin-right:10px; width:233px; 
}

.txt_large {font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#8290b7;}
#content_top{float:left; margin-bottom:30px;}
#content_bottom{ float:left; margin-bottom:30px;}

.gadgetmovie {margin-left:15px; margin-top:1%;}





/* --------- Boxes for the planetbop.html page -------------*/
/* --------- Images need to be resized so that they fit 500px in total -------------*/
/* --------- 500px / 4 characters = 120px slices -------------*/

#main_content img.characters {vertical-align:bottom;
	border: 0;
}
/* --------- box for the 'card' images for the characters -------------*/
/* --------- takes up half the area, approx. 250px images are 227px so space is provided -------------*/
#main_content #card {
		float: left;
		width: 273px;
		margin-left:30px;
}
/* ------ box for the 'card' text description -------------*/
/* ------ takes up roughly the other half of the 500px area, -------------*/
/* ------ maybe needs a margin-left of about 20px to space the text out -----*/
#main_content #cardtext {
	width: 45%;
	float: left;
	clear: none;
	color: #233e75;
	background-color: inherit;
}
/* box for the popbox image (the one with the download button below (box.html)) */
/* will fit the current box images */
#main_content #box {
margin-left:30px;
	width: 40%;
	float: left;
	clear: none;
	margin-bottom:30px;
}
/* box for the popbox image description, dno what content goes here yet */
/* note that this will extent below the box image if text is sufficient */
/* but will not wrap around the bottom */
#main_content #popboxtext {
	width: 50%;
	float: left;
	clear: none;
	margin-right:0px;
	margin-bottom:0px;
}

.download {float:left; width:50%; }
.content {float:left; width:30%; margin-left:30px; }

/* these are the layout commands for the popbox 'download' image */
#main_content #popbox #download {
	width: 100%;
	margin: 0px 0 0 0;
	text-align: center;
}
/* this is the div class repeated for the background tiles */
/* the spacing is not 100% centered in the 500px content area */
/* would need a wrapper container with width 100% and text-align center */
#main_content .background_tile {
	width: 110px; 
	margin: 5px 0 5px 10px;
	height: 142px;
	float: left;
	clear: none;
	background-color: #8290b7;
	color: #fff;
}

.group{vertical-align:baseline;
}
/* --------- End of Dougs added CSS -------------*/


#main_content object {clear:none;}
#sidebar {
display: block; float: left;
clear:none;
	width: 146px;
	height:434px;
	font-size:14px;
	border:0;
	margin-bottom: 1em;
	font-family: 'Arial', 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background: url("../img/side_window.png") 0 0 no-repeat;
	
	margin-top:5px;
	text-transform: uppercase;
	font-weight:500;
	
	}


#sidebar ul {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		margin-left:18px;
		margin-top:25px;
		width: 103px;}
#sidebar ul li{padding-left:1px; width:108px; border-bottom:2px #8290b7 solid;

		}
		
	#sidebar .submenu li{	width: 103px;}
#sidebar li a {
		display: block;
		padding: 5px 5px 5px 0.5em;
		color: #fff;
		text-decoration: none;
		
		
		}

#sidebar li a:hover {
list-style:circle;
text-decoration:none;
		color: #fff;
		background:#194171;		}
		
		#sidebar .submenu li a:hover {
list-style:circle;
text-decoration:none;
		color: #fff;
		background:#194171;		}

 #sidebar li li
{
border-bottom: 0;
margin: 0;
}

#sidebar li li a
{width:300px;
display: block;
padding: 0px;
padding-top:3px;
color: #555;
text-decoration: none;
width: 100%;
}

.active a
{font-weight:800;
}
#sidebar ul li ul {
width:100px;
font-size:10px;
font-weight:300;
margin-top:-5px;
margin-left:5px;
margin-bottom:0px}


#footer {
	clear: both; 
	margin: 10px 10px 0 10px; 
	padding: 30px 0 0 0; 
	width: 775px; /*width altered*/
	height: 55px;
	background: #8290b7 url("../img/footer_bg.png") 0 0 no-repeat;
	color: inherit;
}

#footer p {
	margin: 0 20px 10px 20px;
	font-size: 1.1em; line-height: 1em;
	text-align: center;
	color: #fff;
	background-color: inherit;
}

#footer p a {
	color: #fff; 
	text-decoration: underline;
	background-color: inherit;
}

#footer p a:hover {
	text-decoration: none;
}

div.clearfix:after {
	content: "................................................................";     
	display: block; height: 0; clear: both; visibility: hidden;
}

/*--- Hides the border on images, affects the logo at the top ---*/
/*--- Personally i think the image at the top (logo) should be in the css*/
.image_center{width:500px;margin-left:auto;
    margin-right:auto;}
	.image_center2{margin-left:auto;
    margin-right:auto; margin-top:15px;}
.image_right{ float:right;}
.image_left{ float:left;}