/* ------------------------------------------------>
|
|	CSS & HTML by Josiah Ruddell
|	Copyright Ariamedia 2010
|
\* ------------------------------------------------>																											*/

* 									{ margin: 0; padding: 0 }

/* --------------------------------> 
|	LAYOUT & BACKGROUNDS
\* --------------------------------> 																															*/


/*.positioner 						{ margin: 50px auto; width: 975px;}*/
.positioner 						{ margin: 1px auto; width: 975px;border: }

/*.main 								{ width: 963px; position: relative; padding-bottom: 75px; _height: 910px; clear:both;}*/
.main 								{ width: 963px; position: relative; padding-bottom: 75px; _height: 980px; clear:both; }
.main * 							{ font: 12px Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Sans-Serif; color: #666666;}
.bg							        { position: absolute; width: 975px; background: Transparent url(images/main_bg.jpg) 0 0 no-repeat; left: 0; }	
/*.bg.t							    { height: 40%; top:0; _height: 51% }*/
.bg.t							    { height: 40%; top:0; _height: 51%;}
/*.bg.b							    { background-position: left bottom; height: 60%; _height: 51%; bottom:0; }*/
.bg.b							    { background-position: left bottom; height: 60%; _height: 51%; bottom:0; }
.main .bg.ico						{ background: url(images/exploricons.gif) 0 0 no-repeat; height: 100%; top:0; }

.main .logo							{ position: absolute; } 
/*.main .frame 						{ position: relative; width: 964px; left: 5px; top: 65px; _top: 85px; _height: 850px; _margin: 0 27px; }*/ /* ie6 requires explicit height of parent for %heights */
.main .frame 						{ position: relative; width: 964px; left: 5px; top: 65px; _top: 85px; _height: 895px; _margin: 0 27px; }
/*.main .frame .bg					{ width: 910px; background-image: url(images/content_bg.png); padding: 0 27px; margin-top: 0px; _background-image: url(images/content_bg.gif); _padding: 0 2px; }*/
.main .frame .bg					{ width: 910px; background-image: url(images/content_bg.png); padding: 0 27px; margin-top: 0px; _background-image: url(images/content_bg.gif); _padding: 0 2px; }

.main .frame .cols  				{ padding: 0 32px 38px; _padding: 0 7px; _position: absolute; _top: -30px; } 	
.main .frame .left 					{ width: 199px;  vertical-align: top; float:left;  }

/*.main .frame .left  .bg				{ width: 199px; background-image: url(images/left_bg.jpg);}*/
.main .frame .left  .bg				{ width: 199px; background-image: url(images/left_bg_new.jpg); }
.main .frame .right 				{ width: 700px;   vertical-align: top; float:left;}
.main .frame .position				{ margin-top: 40px; position: relative}

.main .frame  .left .position		{ _height: 804px; }
.main .frame .right .position		{ margin-left: 2px; }
.main .frame .position .content		{ position: relative }
/* phase 3 addition */
.main .frame .position .content	.col_header { width: 670px; height: 45px; text-align: right; margin: 0 0 0 25px; background: transparent url(images/Endless_Ways.jpg) bottom left no-repeat; }
.main .frame .position .content	.col_header a img { border: none; }
/* phase 3 addition */
/*.main .frame  .left .content		{ height: 813px; padding: 0 3px 0 6px; }*/
.main .frame  .left .content		{ height: 858px; padding: 0 3px 0 6px; }
.main .frame  .left .content p		{ text-align:justify; }

.main .frame .video_wall			{ position:relative; height: 302px; background: Transparent url(images/advertisment.jpg) 0 0 no-repeat; margin-left: 5px;  }  
.main .frame .video_wall	a       { display: block; background-color: #dbdbdb; color: #333; position: absolute; bottom: 10px; right: 25px; text-decoration: none; font-size: 8px; }
.main .frame .video_wall	a.hide  { background: url('images/video_hide.png') no-repeat center right; padding: 4px 22px 4px 0; }
.main .frame .video_wall_bar      { position:relative; text-align: right; height: 15px; padding: 3px 25px 7px 0; margin: 0 0 10px 0; background: url('images/videowall_bar.jpg') no-repeat top left; }
.main .frame .video_wall_bar	a   { display: block; background-color: #dbdbdb; color: #333; text-decoration: none; font-size: 8px; vertical-align: middle;}
.main .frame .video_wall_bar	a.unhide {  background: url('images/video_show.png') no-repeat center right; padding: 4px 22px 4px 0; vertical-align: middle; }

.main .frame .position .position    { position: relative; margin:0; height: auto; }
.main .frame .products,				
/*.main .frame .product               { height:512px; position: absolute; }*/
.main .frame .product               { height:512px; position: absolute; }
.main .frame .product .data         { position: relative; padding: 10px; padding-left: 10px; _height: 500px;}
.main .frame .products .bg,
.main .frame .product .bg           { background-image: url(images/products_bg.jpg); }
.main .frame .products .header		{ height: 31px; padding: 10px 20px 0;  width: 675px; background: Transparent url(images/products_bar_675x30.jpg) 12px 10px no-repeat; position: relative;}
.main .frame .products .header a            { margin: 0 0 0 425px; }
.main .frame .products .header a img        { border: 0; }
.main .frame .products .header input{ position: absolute; right: 38px; top:18px; }
.main .frame .products .header .unhide{ right: 100px; }
/*.main .frame .products .listing		{ overflow: auto; height: 446px; margin: 2px 10px 0 12px; width: 675px; position: relative; }*/
.main .frame .products .listing		{ overflow: auto; height: 446px; margin: 2px 10px 0 12px; width: 675px; position: relative; }


.main .frame .product .col1         { float: left; width: 495px; border-right: 1px solid #a3da6d; padding: 10px 25px 10px 10px; } 
.main .frame .product .col2         { float: left; width: 130px;  padding: 10px 0 10px 10px; }
.main .frame .media					{ width: 667px; height: 304px; background: url(images/media_shadow.jpg) left bottom no-repeat; position: relative; margin-top: 19px; }
/*.main .frame .media               { height: 312px; background: Transparent url(images/MediaPlaceHolder.jpg) 0 0 no-repeat;  }*/
.main .frame .media img.PackFront	{ width: 246px; height: 223px; position: absolute; top:0; left: 42px;  }
.main .frame .media img.PackFront2	{ width: 193px; height: 303px; position: absolute; top:0; left: 42px;  }
.main .frame .media2 img.PackFront	{ margin: 0 0 0 42px;  }
.main .frame .media div.handheld	{ width: 439px; height: 282px; position: absolute; right: 0; bottom: 23px; background: url(images/media_handheld.png) 0 0 no-repeat; _background: url(images/media_handheld.gif) 0 0 no-repeat;}
.main .media div.handheld .video    { width: 181px; height: 138px; position: absolute; top: 96px; left: 129px; }
.main .frame .media div.Age			{ width: 46px; height: 44px; padding: 6px 0 0 0px; position: absolute; background: url(images/media_age.png) 0 0 no-repeat; _background-image: url(images/media_age.gif); left: 30px; bottom: 56px; _height: 39px; _width: 39px; _bottom: 64px; text-align: center; }
.popup                              { width: 260px; height: 166px; padding: 0 0 7px 8px; _padding: 0; color: #666; font: 11px Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Sans-Serif; }
.popup .bg                          { background-image: url(images/popup.png); _background-image: url(images/popup.gif); width: 268px; }
.popup .position                    { position: relative }
.popup .position a.close            { position: absolute; right: 15px; color: #666; text-decoration: none; top: 0; }
.popup .position td                 { text-align: left; padding: 5px 10px; }
.popup .position td a               { color: #339933; }
.popup .position p                  { font-weight: bold; padding-top: 15px; }

/* phase 3 addition */
.leaplet                            { position: absolute; left: 142px; bottom: 0; width: 268px; height: 185px; padding: 0; _padding: 0; color: #666; font: 10px Arial, Helvetica, Sans-Serif; background: transparent url(images/leaplet_back.png) 0 0 no-repeat; _background: transparent url(images/leaplet_back.gif) 0 0 no-repeat; }
.leaplet div.closer					{ position: absolute; right: 6px; top: 4px; width: 38px; font-size: 10px; background: transparent url(images/close_box.gif) right center no-repeat; }
.leaplet div:hover.closer			{ cursor: pointer; }
.leaplet .box						{ padding: 26px 25px 22px 23px; }
.leaplet .box h3         		    { color: #76a943; font-size: 12px; font-weight: bold; padding-bottom: 10px; }
.leaplet .box p                		{ font-size: 10px; }
/* phase 3 addition */

/* --------------------------------> 
|	ELEMENTS
\* --------------------------------> 																															*/


.main h1, .main h2 					{ font-size: 14px; font-weight: bolder; color: #fff;  }
.main h1							{ padding: 7px 0 3px 11px; margin-bottom: 0px; font-size: 16px;  }
.main h1 a img                          { border: 0;}
.main h2 							{ padding: 4px 0px 4px 40px; background: Transparent url(images/bar.jpg) 0 0 no-repeat; cursor: pointer;}
.main h2.active						{ background: Transparent url(images/bar_down.jpg) 0 0 no-repeat;  } 
.main ul							{ margin: 0; }	
.main ul li							{ list-style: none; margin:0 } 

.main .left li 						{ padding: 4px 5px 2px 19px; border-top: 1px solid #cccccc; line-height: 0; position: relative;}	
.main .left li a					{ position: absolute; bottom: 3px; left: 170px; display: block; padding: 0 5px; text-decoration: none; background: Transparent url(images/help.gif) 0 0 no-repeat; color: #fff; font-weight: bold;  }
.main  .left li.last				{ border-bottom: 1px solid #ccc; } 
.main  .left li.active				{ background-color: #f3f2fd; }
.main  .left li label				{ margin-left: 5px; font-size: 11px; } 
.main  .left p						{ padding: 11px; }
.main  .left p.endless				{ padding: 0 11px 2px 11px; color: #fff; font-size: 11px; font-weight: bold;}



.main .products li					{ width: 126px; height: 258px; border: 1px solid #dadada; float: left; margin: 4px 3px 8px 0px; _margin: 4px 2px 8px 0px; }
.main .products li a				{ display: block; padding: 4px; _padding: 2px; text-decoration: none; color: #339900; }
.main .products li span.New		{ color: #ff0000; font-weight: bold; }
.main .products li span.Title		{ color: #333399; }
.main .products li span.Title i		{ color: #333399; font-style: italic; }
.main .products .ProductThumbImage  { background: none; border: none; }
.main .products li span.WTB		    { font-size: 11px; color: #666666; display: block;}

.main .products .counter 			{ color: #f58635; font-size: 22px; font-weight: bolder }

.main .frame .product .back         { position: absolute; top: 10px; right: 15px; }
.main .frame .product .Title        { font-weight: bold; font-size: 16px; color: #6d6d6d; margin-left: 10px; }
.main .frame .product .Title i      { font-weight: bold; font-size: 16px; color: #6d6d6d; font-style: italic; }
.main .frame .product .Category     { font-size: 16px; font-weight: bold; color: #3e217d }

.main .frame .product ul.Teaches	{  margin-left: 2px; padding-left: 5px; }
.main .frame .product .Details li	{ font-size:10px; margin-left: 12px; *margin-left: 15px; padding-left: 0; list-style-image: url(images/bullet.jpg); color: #6d6d6d; }
.main .frame .product .Teaches li   { font-size:10px; margin-left: 7px; *margin-left: 10px; padding-left: 0; list-style-image: url(images/bullet.jpg); color: #6d6d6d; }
.main .frame .product .Description  { color: #6d6d6d; font-weight: bold; }
.main .frame .product .Description i { color: #6d6d6d; font-weight: bold; font-style: italic; }
.main .frame .product .Legal        { color: #6d6d6d; position: relative; bottom: -10px; font-size: 8px; }
.main .frame .product .TeachesTitle { color: #6da336; font-weight: 400 }
/* phase 3 addition */
.main .frame .product div.info			{ color: #76a943; font-weight: bold; text-decoration: none; margin: 5px 0 }
.main .frame .product div:hover.info	{ cursor: pointer; text-decoration: underline; }
/* phase 3 addition */
.main .frame .media div.Age span    { color: #fff; font-weight: bold; font-size: 11px; display: block; }
.main .frame .media div.Age span.Age { font-size: 14px; font-weight: bold; }
.main .frame .media div.Age span.Years { font-size: 9px }

.main .product .PreorderButton      { margin-top: 4px; border:none;}
.main .product div.retailers      	{ width: 75%; color: #6da336; font-weight: bold; margin-left: 4px; cursor: pointer; }
.main .product div:hover.retailers 	{ text-decoration: underline; }
/* phase 6 for TRU link */
.main .product a.retailers      	{ color: #6da336; font-weight: bold; text-decoration: none; }
.main .product a:hover.retailers 	{ text-decoration: underline; }
/* phase 6 for TRU link */
.main input.green                   { width: 51px; font-weight: bold; background: Transparent url(images/btn_green.gif) 0 0 no-repeat; border: 0; color: #fff; padding: 2px; }
.main input.orange                  { width: 130px; font-size: 12px; font-weight: bold; background: Transparent url(images/btn_orange.jpg) 0 0 no-repeat; border: 0; color: #fff; padding: 4px; }
.main div.coming_soon               { margin-top: 10px;  width: 130px; font-size: 9px; font-weight: bold; background: Transparent; border: 0; padding: 4px; color: #6da336;  }

.main div.bolder					{ font-family:Verdana, Geneva, sans-serif; }
/* --------------------------------> 
|	MISC
\* --------------------------------> 																															*/

.clear                              { clear: both; }
.main input                         { cursor: pointer; }
.positioner .copyright				{ color: #666; font: 9px Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Sans-Serif; }
.legal                              { color: #666; font: 9px Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Sans-Serif; padding-bottom: 20px; }

/* --------------------------------> 
|   Clear/Select All buttons
\* --------------------------------> 																															*/

.reset								{ margin-top: 20px; }
.reset button					{ position: relative; border: 0; padding: 0; cursor: pointer; overflow: visible; /* removes extra side padding in IE */ }
.reset button::-moz-focus-inner	{ border: none;  /* overrides extra padding in Firefox */ }
.reset button span				{ position: relative; display: block; white-space: nowrap; font-size: 12px; font-weight: bolder; height:20px;}
.reset button  { 
	padding: 0; 
	margin-left: 20px;
	*margin-left: 22px;
	text-align: center;
	background: transparent;
}

.reset button .clearAll { color: #036; text-decoration: underline; }

.reset button .resetAll {
	padding: 2px 9px 0 9px;
	height:20px; 
	color:#fff;
	background: transparent url(images/select_back_72x20.gif) no-repeat left top;
}



/* --------------------------------> 
|	FIXES
\* --------------------------------> 																															*/


@media screen and (-webkit-min-device-pixel-ratio:0) {
   .bg					            { margin-top: 1px !important; }
}

.qtip-content { font: 11px Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Sans-Serif; color: #666; }