/*----- Swatches -----*/
/*
#538d4f -- DarkGreen (Link,)
#616161 -- DarkGrey
#d5d5d5 -- LightGrey (Borders)
#e9e9e9 -- LighterGrey (Backgrounds)
#edece7 -- LightCream (Background)
#78643c -- Brown (Header2)
#e6781e -- Orange (Header2)

#dce6f1 -- Light Blue

#f5f5dc -- Cream (Messagebox)
#b2f1a2 -- Light Green (MessageBox)
#fcc072 -- Light Red (MessageBox)
*/

body{
	font-family: Tahoma, Arial, Helvetica, "ＭＳ Ｐゴシック", Osaka, clean, sans-serif;
	background: #edece7 url(/img/background-top.png) left -36px repeat-x;	
	font-size: 13px;
	margin: 0px;
	padding: 0px;
	color: black;/*#515151;*/
	}

/*
Only need this if we're using ie7-js
#bg{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 60px;
	width: 100%;
	background: #edece7 url(../img/background-top.png) left -36px repeat-x;	
	}
*/
a, a:visited{
	text-decoration: none;
	color: #2f74c0;
	outline-color:#2f74c0;
	outline-style:none;
	outline-width:0;
	}

a:hover{
	color: #e6781e;
	}

img{
	border: none;
	}

/*simple opacity link*/
a.opa:hover img{
	-moz-opacity:0.80;
	opacity:0.80;
	filter: alpha(opacity=80);
	}

hr{
	border: none;
	border-bottom: 1px solid #d5d5d5;
	}

ul{
	margin: 10px 0 10px 0;
	padding-left: 20px;
	}

li{
	margin-bottom: 3px;
	}

#container{
	position: static;
	width: 972px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	}

/* ---- Flash Notification DIV ---- */
#alert_area{
	margin-top: 3px;
	min-height: 25px;
	#height: 25px;
	}

/* ----- Background Worker -----*/
#notify_bar{
	position:fixed;
	top:0px;
	width:972px;
	#width: 100%;
	z-index:600;
	}
#notify_load{
	position:fixed; 
	top:0px;
	left: 50%;
	padding: 5px;
	margin-left: -50px; /*half the width to center it*/
	z-index:600;
	background-color: #edece7;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	}  	

/* ----- Header -----*/

#header{
	position: relative;
	background: url(../img/header.jpg) no-repeat center top;
	height: 78px;
	width: 100%;
	top: 0px;
	left: 0px;
	font-size: 13px;
	z-index: 10;
	}

#header a#homelink{
	display: block;
	height: 72px;
	width: 180px;
	text-indent: -5000px;
	}

#login, #login a{
	position: absolute;
	z-index: 500;
	top: 5px;
	right: 12px;
	text-align: right;
	color: #fff;
	font-size: 12px;
	}

/* ----- Navigation -----*/

#menu {
 	position: absolute;
	z-index: 400;
	top: 33px;
	left: 190px;
	width: 782px;
	height: 24px;
	margin: 0;
	padding: 0;
	z-index: 30;
}

#menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#menu ul li {
  list-style: none;
}

#menu ul li a {
  float: left;
  display: block;
  text-decoration: none;  
  color: white;
}

#menu ul.horizontal li.level1 {
  	float: left;
  	height: 21px;
	/*#width: 80px;*/	
	/*padding: 3px 10px 0 10px;*/
	margin-right: 10px;
	color: white;
	background: black;
}

#menu ul.horizontal li.level1 a {
  color: white;
  padding: 3px 10px 5px 10px;
}

#menu ul.horizontal li.level1 a:hover {
	background-color: #a4a4a4;
}

#menu ul.horizontal li.level1:hover {
	background-color: #a4a4a4;
}

#menu ul.horizontal > li.level1 a {
  width: auto;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu ul li a { float:none; }
/* End IE5-Mac hack */

#menu ul.dropdown,
#menu ul.flyout {
	position: absolute;
	top: 0px;
	left: 0px;
	visibility: hidden;
  	padding: 0 0 0px 0px;
	width: 157px;
	background: #000 url(/img/nav-flyout.jpg) left top no-repeat;
	border: 1px solid #000;	
	}

#menu ul.dropdown li.level2,
#menu ul.flyout li.level3 {
	border-bottom: 1px solid #000;
	border: 0px;
	}

#menu ul.dropdown li.level2 a,
#menu ul.flyout li.level3 a {
  color: white;
  padding: 4px 4px 2px 5px;
  height: 19px;
  }

#menu ul.dropdown li.level2 a:hover,
#menu ul.flyout li.level3 a:hover {  
  background-color: #a4a4a4;
}






#header #nav-bar{
	position: absolute;
	z-index: 400;
	top: 33px;
	left: 190px;
	width: 782px;
	height: 24px;
	margin: 0;
	padding: 0;
	z-index: 30;
	}

#header #nav-bar li{
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	}

#header #nav-bar li a{	
	display: inline-block;	
	height: 21px;
	/*#width: 80px;*/	
	padding: 3px 10px 0 10px;
	margin-right: 10px;
	color: white;
	background: black;
	}

#header #nav-bar li a:hover{
	background: #a4a4a4;
	}

#header #nav-bar div.flyout{
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0 0 5px 0px;
	
	width: 157px;
	/*height: 91px;*/
	background: #000 url(/img/nav-flyout.jpg) left top no-repeat;
	border: 1px solid #000;	
	}

#header #nav-bar div.flyout a{
		position: relative;
		display: block;
		margin: 0;		
		width: 137px;
		white-space: nowrap;
		text-align: left;
		background: transparent;		
		}

	#header #nav-bar div a:hover{
		background: #a4a4a4;		
		}



/*
#header #nav-bar a{
	display: inline-block;	
	height: 21px;	
	padding: 3px 10px 0 10px;
	margin-right: 10px;
	color: white;
	background: black;
	}

#header #nav-bar a:hover{
	background: #a4a4a4;
	}

#header .nav-flyout{
	position: absolute;
	width: 157px;
	height: 91px;
	background: #000 url(/img/nav-flyout.jpg) left top no-repeat;	
	}

#header .nav-flyout a{
	width: 100%;
	height: 20px;	
	}

#header .nav-flyout a:hover{
	background: #a4a4a4;
	}
*/

/* ----- Banners ----- */
a.upgrade{
	display: block;
	width: 555px;
	height: 104px;
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -1000em;
	}
	
a.upgrade:hover{
	background-position: bottom left;
	}
a.upgrade.test{background-image:url(../img/upgrade-tests.jpg);}
a.upgrade.lesson{background-image:url(../img/upgrade-lessons.jpg);}


/* ----- Sidebar ----- */

#sidebar{
	position: relative;
	margin: 0 0 0 10px;
	_margin: 0 0 0 1px;
	width: 255px;
	float: right;
	}

#sidebar .widget{	
	position: relative;
	width: 100%;	
	margin-bottom: 20px;	
	font-size: 12px;
	border: 1px solid #D5D5D5;
	border-right: solid 1px #616161;
	border-bottom: solid 1px #616161;
	background: white url(/img/bg_widget.png) right bottom no-repeat;	
	}

.widget p{
	padding: 5px;
	}

.widget h1{
	padding: 8px;		
	margin: 0px;
	color: #fff;
	font-size: 18px;
	font-weight: normal;
	text-align: left;
	color: #2e2e2e;
	}

/* Icon Width: 32px Icon Set every 50 px; */
.widget h1.icon{
	padding: 8px 8px 8px 43px;
	background: transparent url(/img/widget-icons.png) 7px 3px no-repeat;
	}
.widget h1.icon.news{ background-position: 7px 3px;}
.widget h1.icon.user{ background-position: 7px -47px;}
.widget h1.icon.star{ background-position: 7px -97px;}
.widget h1.icon.chat{ background-position: 7px -147px;}
.widget h1.icon.calendar{ background-position: 7px -197px;}


.widget h2{
	width: 100px;
	color: #d8135b;
	font-size: 10px;
	padding: 0px;
	margin: 0px 0px 10px;
	font-family: MS Georgia,Times New Roman,Garamond, serif;
	border-bottom: dotted 1px black;
	}

.widget dl{	
	/*width: 210px;*/	
	margin: 2px 0 2px 0;
	min-height: 36px; /*was set at 36*/
	#height: 36px;
	padding: 3px;
	border-bottom: 1px solid #d5d5d5;
	}
.widget dt{
	margin: 0 0 3px 0;
	font-size: 14px;	
	}
.widget dd{
	margin: 0px;
	font-size: 10px;
	}
/*
.widget dt a:hover{
	background:url(/img/widget-hover-bg.jpg) no-repeat;
	}
*/
.widget img.icon{
	width: 35px;
	height: 35px;
	float: left;
	margin-right: 3px;
	}
.widget .hider{
	
	}
/* 45px Seperated Sprite */
.widget .rank{	background:url(/img/widget-rank.png)right 5px no-repeat;}
.widget .val1{ background-position: 98% 10px;}
.widget .val2{ background-position: 98% -35px;}
.widget .val3{ background-position: 98% -80px;}
.widget .val4{ background-position: 98% -125px;}
.widget .val5{ background-position: 98% -170px;}
.widget .val6{ background-position: 98% -215px;}
.widget .val7{ background-position: 98% -260px;}
.widget .val8{ background-position: 98% -305px;}
.widget .val9{ background-position: 98% -350px;}
.widget .val10{ background-position: 98% -395px;}

/* ----- Main Content ----- */

#content{
	position: relative;
	width: 700px;	
	margin-left: 6px;
	_margin-left: 2px;	
	padding-bottom: 100px;
	}

#content #page-title-en{
	position: relative;
	font-size: 15px;
	text-align: right;
	margin-bottom: 7px;
	border-bottom: 1px dotted #d5d5d5;
	}

/* ----- Flash Results ----- */
.message{
	color: #000;
	text-align: center;
	background: lightYellow;
	border: 1px solid #d5d5d5;
	padding: 2px 0px 2px 0px;
	margin: 0 0 5px 0;
	}
.message a{
	color: #e6781e;
	}
.message a:hover{
	text-decoration: underline;
	}
.flash_success{
	background-color: #b2f1a2;
	border-color: #2bad39;
	}
#authMessage,
.flash_failure{
	background-color: #fcc072;
	border-color: #ff0000;
	}

/* ----- Notice Boxes ----- */

/* gray default */
.article .notice{
	position: relative;
	color: #000;
	text-align: left;	
	border: 1px solid #d5d5d5;
	margin: 10px 0 5px 0;
	padding: 15px 0px 15px 113px;	
	font-size: 18px;
	background-color: #e9e9e9;
	background-position: right bottom;
	background-repeat: no-repeat;
	min-height: 80px;
	#height: 80px;
	}
.article .notice .icon{
	position: absolute;
	left: 20px;
	top: 15px;
	width: 80px;
	height: 80px;
	background-position: center center;
	background-repeat: no-repeat;
	}
.article .notice a:hover{text-decoration: underline;}

/* yellow */
.article .notice.alert a{color: #538d4f;}
.article .notice.alert .icon{background-image: url(/img/icon_notice_alert.png); }
.article .notice.alert{
	background-color: #ffff99; 
	background-image: url(/img/icon_notice_alert_bg.png); 
	border-color: #f29b43;
	}
/* blue */
.article .notice.info a{color: #e6781e;}
.article .notice.info .icon{background-image: url(/img/icon_notice_info.png); }
.article .notice.info{
	background-color: #dce6f1; 
	background-image: url(/img/icon_notice_info_bg.png); 
	border-color: #2ba2ad;
	}

	

/* ----- Article Information ----- */

.article{
	position: relative;
	background: #fff;
	padding: 0px 10px 10px 10px;
	border: 1px solid #d5d5d5;
	margin-bottom: 15px;	
	}

/*Fix for articles that show up in a facebox*/
#facebox_content .article{
	background: #fff;
	padding: 0px;	
	border: 0px;
	margin-bottom: 0px;
	position: static;
	}

.article p{
	line-height: 130%;
	}

/*IE BUG: Must have a space between first-letter and the { */
.article p:first-letter {
	font-family: MS Georgia,Times New Roman,Garamond, serif;
	font-size: 16px;	
	}

.article h1{
	font-family: Helvetica, Arial, "ＭＳ Ｐゴシック", Osaka, clean, sans-serif;
	padding: 17px 0 10px 70px;
	margin: 0px 0px 5px 0px;
	height: auto;
	min-height: 52px;	
	background: url(/img/h1_bg.png) no-repeat center left;
	color: black;
	font-size: 32px;
	letter-spacing: -1px;
	font-weight: bold;
	line-height: normal;
	}

.article h2,
.article h3{
	color: white; /*989898*/
	font-size: 18px;
	height: 47px;
	padding: 6px 0px 0px 10px;
	margin: 3px 0px -5px 0px;	
	text-align: left;
	font-weight: normal;
	background-color: #616161;
	background-repeat: no-repeat;
	background-image: url(/img/headers.png);
	background-position: right 0px ; /*53px height*/
	letter-spacing: 1px;
	}

.article h2.red{background-position: right -53px;}
.article h2.green{background-position: right -106px;}
.article h2.brown{background-position: right -159px;}

.article h3{
	font-size: 15px;
	height: 19px;
	text-align: left;
	margin: 2px 0px 5px 0px;
	padding: 4px 0px 0px 4px;;
	background-position: right -212px; /*23 px*/
	}

.article h3.brown{background-position: right -258px;}
.article h3.blue{background-position: right -235px;}
.article h3.red{background-position: right -281px;}

.article h2 a,.article h2 a:visited,
.article h3 a,.article h3 a:visited{color: white;}

.article img{
	/*padding: 3px;
	background: #fff;*/
	vertical-align: text-bottom;
	}

.article img.banner{ margin-top: 10px; padding: 0px; }
.article h1.banner{
	margin-top: 10px;
	padding: 14px 26px 0px 26px;
	width: 626px; /*678*/
	height: 182px; /*229*/
	font-size: 46px;
	text-align: left;
	background: #000 no-repeat bottom left;	
	font-weight: bold;
	border: 0px;
	color: #fff;
	}
.article h1.banner:first-letter {
	padding: 0px;
	background: none;
	}
.article .banner.anime{color: #fff; background-image: url(/img/headers/banner_anime.png);}
.article .banner.jlpt{color: #fff; background-image: url(/img/headers/banner_jlpt.jpg);}
.article .banner.idol{color: #fff; background-image: url(/img/headers/banner_idol.jpg);}
.article .banner.default_image1{color: #000; background-image: url(/img/headers/banner_default1.jpg);}
.article .banner.default_image2{color: #fff; background-image: url(/img/headers/banner_default2.jpg);text-shadow: black 0.1em 0.1em 0.2em}
.article .banner.default_image3{color: #fff; background-image: url(/img/headers/banner_default3.jpg);}
.article .banner.default_image4{color: #fff; background-image: url(/img/headers/banner_default4.jpg);}
.article .banner.default_image5{color: #fff; background-image: url(/img/headers/banner_default5.jpg);}

.article .iconImage{
	border: 1px solid #898989;
}

.article .copy-block{
	margin-left: 230px;
	}

.article .info-block{
	position: relative;
	padding: 5px;
	border: 1px solid #d5d5d5;
	}

.purchase_link a{
	display: block;
	width: 120px;
	height: 40px;
	background: url(/img/btn-buynow.png) center top no-repeat;
	text-indent: -4000px;
	}
.purchase_link a:hover{background-position: center bottom;}


.article .right{ float: right; position: relative;}
.article .left{ float: left; position: relative;}

.lily{	background: #fff url(/img/tour/bg-lily.jpg) no-repeat left bottom;}
.kasa {	background: #fff url(/img/tour/bg-kasa.jpg) no-repeat left bottom;}
.garden {	background: #fff url(/img/tour/bg-garden.jpg) no-repeat left bottom;}
.tera {	background: #fff url(/img/tour/bg-tera.jpg) no-repeat left bottom;}

.catchCopy{
	color: #78643c;
	font-size: 28px;
	font-weight: bold;
	line-height: 29px;
	margin: 1px 6px 0 6px;
	/*padding-right: 60px;*/
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}
/*IE BUG: Must have a space between first-letter and the { */
.catchCopy:first-letter {
	font-size: 35px;
	font-weight: bold;
	}

/* ----- Panel Elements ----- */
/* Half-width boxes that are used to show data to the user, especially
   for the user/admin dashboards, when you don't need an entire box to
   show the data.
   These (hopefully?) will have the benefit of not needing a table, so that they flow liquidly
   
   Full Size Versions also available.   
*/

.panel_wrap{
	position: relative;
	float: left;
	width: 49%;
	padding-right: 0.5%;
	}
.panel_wrap.rt{
	margin-left:5px;
	#margin-left:1px;
	}


.panel{
	position: relative;
	width: auto;
	background-color: white;
	border: 1px solid silver;
	margin: 3px 0 20px 0;
	padding: 5px;
	}

.panel_wrap .panel{
	width: 97%;
	}

.panel h1{
	text-align: left;
	height: 21px;
	min-height: 0;
	border: 1px solid #b7c5d5;
	/*background: #dce6f1 url(/img/searchbar-bg.png) repeat-x;*/	
	background-image: url(/img/searchbar-bg.png) !important;
	background-color: #dce6f1;
	background-position: 0 0;
	background-repeat: repeat-x;
	color: #515151;
	font-size: 14px;
	font-weight: bold;
	margin: -6px -6px 6px -6px;
	padding: 8px 8px 0 4px;
	}

.panel h1:first-letter {
	background: transparent url(/img/control_stop_square.png) 3px center no-repeat;
	padding-left: 24px;
	}
 

/* ----- Content Listing Elements ----- */
ul.content_list{
	position: relative;
	margin: 0px;
	padding: 0 0 0 10px;
	list-style-type: none;
	}
ul.content_list li{
	position: relative;
	background-position: left top;
	background-repeat: no-repeat;
	margin: 0 10px 5px 0;
	padding: 2px 190px 0 20px;
	background-image:url(/img/icon_article.png);	
	min-height: 16px;	
	}

ul.content_list li span{
	position: absolute;
	right: 0px;
	#right: 30px;
	top: 2px;
	font-size: 11px;
	color: silver;
	}

.panel_wrap .panel ul.content_list li{padding-right: 15px;}
.panel_wrap .panel ul.content_list li span{#right: 10px;}

ul.content_list li span img{margin: 0 0 0 3px;}
ul.content_list.pack li{background-image:url(/img/icon_card.png);}
ul.content_list.article li{background-image:url(/img/icon_article.png);}
ul.content_list.lesson li{background-image:url(/img/icon_article.png);}
ul.content_list.test li{background-image:url(/img/icon_article.png);}
ul.content_list.card li{background-image:url(/img/icon_card.png);}

/* Content Listing Elements with Large Icons */
div.content_list{
	padding:14px 0 4px;
	}

div.content_list .item{
	padding: 14px 0 4px 0;
	}

div.content_list img{
	border:1px solid #999999;
	float:left;
	margin:5px 12px 0 4px;
	}
div.content_list h3,
div.content_list h3 a,
div.content_list h3 a:visited{	
	padding-bottom:0;
	padding-top:2px;
	margin: 0 10px 3px 0;
	background:transparent none repeat scroll 0 0;
	border:0 none;
	color:#4C4C4C;
	font-size:20px;
	font-weight:bold;
	height: auto;
	}
div.content_list p{
	color:#444444;
	font-size:13px;	
	line-height: 22px;
	margin:0 10px 0 0;
}
div.content_list a.readmore,
div.content_list a.readcomments{
	font-size:10px;
	background:transparent url(/img/icon_more.gif) no-repeat scroll left center;
	font-weight:bold;	
	color:#5999DE;
	text-decoration:underline;
	padding-left: 14px;
	margin-left: 5px;
	}
div.content_list a.readcomments{
	background:transparent url(/img/icon_comment.png) no-repeat scroll left center;	
	}

/* ----- Data Results ----- */

.inner-memo{
	position: relative;
	margin: 3px 20px 5px 30px;
	padding: 10px;
	background: #f5f5dc;
	border: 1px solid #d5d5d5;
	}

.inner-memo a.close{
	position: absolute;
	top: -10px;
	right: -10px;
	padding: 5px 30px 0 0;
	min-height: 30px;
	#height: 30px;
	background: url(../img/close.png) no-repeat top right;
	}

/*----- Buttons -----*/


a.btn{
	display: inline-block;
	padding: 4px 2px;
	height: 18px;
	font-size: 12px;	
	color: #2f74c0;
	text-align: center;
	margin: 3px 2px 3px 2px;
	}
	
input.btn{
	display: inline-block;
	padding: 2px;	
	font-size: 12px;
	color: #2f74c0;	
	text-align: center;
	height: auto;
	border: 0px;
	padding: 3px 6px 6px 8px;
	#padding: 3px 6px 4px 8px;
	cursor: pointer;
	}
.btn.sm{ 
	width: 51px;	
	background: transparent url(/img/btn-bg-sm.png) no-repeat top left;
	}
.btn.lg{ 
	width: 98px;
	background: transparent url(/img/btn-bg-lg.png) no-repeat top left;
	}
input.btn.sm{
	width:55px;
	}
input.btn.lg{
	width:102px;
	}

.btn:visited{
	color: #2f74c0;
	}
.btn:hover{
	color: #e6781e;
	/*background-position: bottom left;*/
	}

/* The "a" is necessary for font coloring in firefox */
a.btn_huge,
a.btn_huge_up{
	position: relative;
	display: block;
	color: #2f74c0;	
	font-size: 26px;
	font-weight: normal;

	letter-spacing: -1px;	
	text-align: left;
	text-indent: 12px;
	
	padding: 4px 0px 5px 0px;
	width: 279px;
	height: 42px;
	background: url(/img/btn_arrow_lg.png) no-repeat 0 0;
	}
.btn_huge:hover,
.btn_huge_up:hover{color: #e6781e;}
a.btn_huge_up		{background-position: -279px 0;}
a.btn_huge_up.green	{background-position: -279px -51px;}
a.btn_huge_up.red	{background-position: -279px -102px;}
a.btn_huge_up.yellow{background-position: -279px -152px;}
a.btn_huge.green	{background-position: 0 -51px;}
a.btn_huge.red		{background-position: 0 -102px;}
a.btn_huge.yellow	{background-position: 0 -152px;}
/*a.btn_huge.up, a.btn_huge.upie{background-position: 0 right;}*/
a.btn_huge div,
a.btn_huge_up div{
	font-family: Helvetica, Arial, "ＭＳ Ｐゴシック", Osaka, clean, sans-serif;
	position: absolute;	
	top: 32px;
	right: 52px;
	width: 210px;
	height: 11px;
	color: #717171;
	overflow: hidden;
	font-size: 9px;
	text-align: right;
	letter-spacing: 1px; 
	}
/** 
	The IE6 no multiple class bug makes IE6 read only the LAST class
	in a multi-class CSS declaration.
	To fix that we need to use the ie7 hack:
	<!--[if lt IE 7]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
	<![endif]-->
	But we need to test it on the entire site
**/


a.btn_arrow_sm{
	display: inline-block;
	color: #2f74c0;	
	font-size: 12px;
	font-weight: normal;
	text-align: left;	
	
	padding: 6px 0px 5px 13px;
	margin: 4px 0 4px 0;
	width: 138px;
	height: 28px;
	background: url(/img/tour/btn-blank-sm.png) no-repeat 0 0;
	}
a.btn_arrow_sm.up{background-image:url(/img/tour/btn-blank-up-sm.png);}
.btn_arrow_sm:hover{color: #e6781e;}

/*-----  Article Elements ----- */

.paginate-nav{
	text-align: right;
	background: #dce6f1;
	padding: 2px 5px 2px 5px;
}

.paginate-nav .current{
	font-size: larger;
}

a.slideHeader{
	display: block;
	background: #616161;
	color: #fff;
	text-align: right;
	padding: 3px 10px 3px 10px;
	margin-top: 5px;
	font-weight: bold;
	}

a.slideHeader:hover{
	background: #000;
	}

a.folder{
	display: block;
	padding: 3px 3px 5px 20px;
	margin: 3px 0 0 5px;
	background-repeat: no-repeat;
	background-position: left center;
	color: black;
	cursor: pointer;
	}
a.folder:hover{ background-color: #edece7;}
a.folder.closed{background-image: url(/img/btn_tree_open.gif); border-bottom: 2px dotted #dce6f1;}
a.folder.open{background-image: url(/img/btn_tree_close.gif);}

.slideBody{
	display: block;
	padding: 5px;
	background: #edece7;	
	border: 1px dotted #616161;
	}

.article .searchbar{
	position: relative;
	height: 21px;
	border: 1px solid #b7c5d5;
	background: #dce6f1 url(/img/searchbar-bg.png) repeat-x;
	color: #515151;
	font-size: 12px;
	padding: 8px 8px 0 8px;	
	}

.article .searchbar.advanced{
	padding-top: 10px;
	height: 30px;
	background: url(/img/searchbar-advanced-bg.png) center bottom no-repeat;
	border: 0px;
	margin-bottom: 10px;
	}

.article .searchbar .left{position: absolute; left: 18px;}
.article .searchbar .right{position: absolute; right: 18px;}
.article .searchbar .center{text-align:center;}

.article .searchbar input{
	height: 14px;
	border: 1px solid #b7c5d5;
	margin: -3px 0px;
	width: 150px;	
	}
.article .searchbar input.search{
	background: #fff url(/img/search.gif) center right no-repeat;
	padding-right: 15px;
	width: 135px;
	}
	
.article .searchbar select{
	height: 18px;
	border: 1px solid #b7c5d5;
	margin: -3px 0px;
	width: 150px;
	}	
.article .searchbar input[type=checkbox] {
	margin-top: 1px;
	width: auto;
}

.article .searchbar label{
	margin: -5px 0px;
	padding: 0px;
	}



.article .searchbar input.go{
	width: 20px;
	height: 20px;
	background: url(/img/searchbar-go.png) top left no-repeat;
	text-indent: -5000px;
	border: 0px;
	padding: 0px;
	margin: -5px 0 0 5px;
	}
.article .searchbar input.go:hover{
	background-position: bottom left;
	}

/* ----- News Page ----*/

/* Not used */
.news-date{
	background:#4E4E4E url(../img/bg-date-box.gif) repeat-x scroll 0 0;
	border-color:-moz-use-text-color #595656 #595656;
	border-style:none solid solid;
	border-width:medium 1px 1px;
	color:white;
	font-size:12px;
	font-weight:bold;
	left:0;
	position:absolute;
	text-align:center;
	top:0px;
	width:120px;
	height:22px;
	padding-top:4px;
	}

.news-details{
	font-size: smaller;
	color: #616161;
	margin-top: -3px;
	}

/*
.news-tags{
	font-size: smaller;
	padding: 5px 0 5px 0;
	margin-top: 10px;
	border-top: dotted 1px #d5d5d5;
	border-bottom: solid 1px #d5d5d5;
	}

.news-comments{
	padding: 5px 10px 5px 10px;
	border-top: dotted 1px #d5d5d5;
	border-bottom: solid 1px #d5d5d5;
	margin: -10px 20px 10px 20px;
	}
*/


/* ----- Test and Lesson Layouts ----- */
.test-list{
	position: relative;
	border: 1px dotted silver;
	margin-bottom: 5px;
	padding: 5px;
}

.test-list .floater{
	position: relative;
	float: left;
	text-align: center;
	width: 120px;
	}

/*
.test-list .stats{
	position: relative;
	width: 116px;
	background: #edece7;
	border: #616161 1px solid;
	padding: 2px:
}
*/
.test-list .description{
	width: 100% -150px;
	margin-left: 145px;
	/*min-height: 200px;
	#height: 200px;
	*/
	}


/* ----- Display Item ----- */
/*
.article .itemBox{
	width: 500px;
	margin: 0px auto;
	border: dotted 1px #d5d5d5;
}

.article .itemBox h1{
	border: 0px;
	font-size: 15px;
	text-align: left;
}

.article #testIframe{
	border: 0px;
	border-bottom: 1px solid #d5d5d5;
	border-left: 1px solid #d5d5d5;
	width: 100%;
	height: 300px;	
}
*/

/* ----- Item Tables ----- */

.itemBox{
	position: relative;
	width: 100%;
	padding-bottom: 5px;
	border-bottom: 1px #616161 solid;
	}

.itemBox .icon{
	float: left; 
	width:105px;	
	}

.itemBox .detail_box{	
	margin-left: 105px;	
	}

.itemBox h1{	
	color: #e6781e;
	font-size: 18px;
	border: 0px;
	text-align: left;
	margin: 0 0 3px 0;
	
	font-weight:lighter;
	height:20px;
	min-height: 0px;
	padding:0;
	background: transparent;
	}
.itemBox h1:first-letter {
	padding: 0px;
	background: transparent;
	}
	
.itemBox .date{
	float:right;
	margin-right: 20px;
	}

.itemBox .pack_detail{
	position: relative;
	float: left;
	display: inline; /*--- ie6 fix ---*/
	width:105px; 
	margin: 0 10px 0 5px;
	#margin; 0 2px 0 5px;
	color: #515151;
	font-size: 10px;
	}
	
.itemBox .pack_stack{
	position: relative;
	float: left;
	display: inline; /*--- ie6 fix ---*/
	width: 78px;
	height: 78px;
	margin-right: 9px;	
	background: silver url(/img/bg-stripes.png);
	border: 1px #616161 solid;
	color: darkblue;
	text-align: center;
	}

.itemBox .pack_stack em{
	display: block;
	position: absolute;
	bottom: 0px;
	left:0px;
	width: 80%;	
	margin: 0 10% 0 10%;	
	padding: 0px;
	border: 1px #616161 solid;
	border-bottom: 0px;
	text-align: center;
	color: black;
	}

.itemBox .pack_stack em.rank1, td.rank1{ background: #dce6f1 url(/img/packs/rank1.png) repeat-x; }
.itemBox .pack_stack em.rank2, td.rank2{ background: #dcf1dd url(/img/packs/rank2.png) repeat-x; }
.itemBox .pack_stack em.rank3, td.rank3{ background: #eee4cd url(/img/packs/rank3.png) repeat-x; }
.itemBox .pack_stack em.rank4, td.rank4{ background: #f1dcdc url(/img/packs/rank4.png) repeat-x; }
.itemBox .pack_stack em.rank5, td.rank5{ background: #f1dcdc url(/img/packs/rank5.png) repeat-x; }


/* ----- Forms -----*/

form{
	margin: 0px;
	padding: 0px;
}

form.itemized label{
	width: 180px;
	}

label {
	display: inline-block;
	padding-right: 20px;
	padding-bottom: 10px;
	text-align: left;
	/*min-width: 150px;*/
	/*#width: 150px;*/
}

form div {
	/*clear: both;*/
	vertical-align: text-top;	
}
form div.input {
	color: #444;
}
form div.required {
	color: #333;
	font-weight: bold;
}
option {
	padding: 0 3px;
}

input[type=text],
input[type=password],
textarea{
	background: white;
	border: 1px solid silver;
	}
input[type=checkbox] {
	width: auto;
}
input[type=radio] {
	width:auto;
}
div.radio label {
}
input[type=submit] {
	display: inline;
	width: auto;
	vertical-align: bottom;
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
	border: 1px solid #2F74C0;
	}

/* ----- AutoComplete -----*/
div.auto_complete    {
     position         :absolute;
     width            :250px;
     background-color :white;
     border           :1px solid #888;
     margin           :0px;
     padding          :0px;
	}
div.auto_complete ul {
  	list-style-type:none;
 	margin:0;
  	padding:0;
	} 
div.auto_complete ul li.selected { background-color: #dce6f1;}
div.auto_complete ul li {
	list-style-type:none;
	display:block;
	margin:0;
	padding:2px;
	height:32px;
	cursor:pointer;
	}

/* ----- Tables -----*/
.layout-table{
	width: 450px;
}

.items-col{
	width: 200px;
}

.layout-table td{
	border: 0px;
}

table{
	width: 100%;
	border-collapse: collapse;
}

th, th a, th a:visited{
	color: #626262;
	background-color: #c7c7c7;
}
th a:hover{
	color: #d8135b;
	}

tr{
	vertical-align: top;
}

tr.highlight, tbody.highlight{
	background-color: #a9dfb0;
}

tr.even, tbody.even{
	background-color: #edece7;
}

tr.odd, tbody.odd{
	background-color: #fff;
}

td{
	border: 1px solid #e0e0e0;
	padding: 5px 2px 5px 2px;
	margin: 0px;
}

.article td img{
	padding: 0px;
	background: none;
}

/* ----- Layout Table ----*/
table.layout td{
	border: 0px;
	padding: 0px;
	margin: 0px;
}

table.layout th{
	border: 0px;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
}

table.layout td{
	border: 0px;
	padding: 0px;
	margin: 0px;
	}

/* ----- Data Table ----- */
table.data{
	border: 0px;
	font-size: 10px;
	text-align: left;
	margin: 2px;
}

table.data .title{
	text-align: center;
	font-size: 12px;
}

table.data td,
table.data th{
	border: 1px solid #e0e0e0;
	padding: 1px;
	margin: 0px;
}

table.data th{
	font-weight: bold;
	background: #DCE6F1;
	border-color: white;
}

table.data th.title{
	text-align: center;
	background: #C7C7C7;
	border: 0px;
}

/* ----- Comparison Table ----*/
table.comparison{
	 empty-cells:hide;
	 border: 0px;
}
table.comparison th{
	color: white;
	height: 50px;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
	background: #868686 url(../img/tables/bg_td.gif) repeat-x;
}

table.comparison .sub{
	font-size: 11px;
}

table.comparison td{
	color: white;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background: #868686 url(../img/tables/bg_td.gif) repeat-x;
}

table.comparison td.label{
	color: white;
	font-size: 14px;
	text-align: right;
	vertical-align: top;
	background: #2f8ddd url(../img/tables/bg_td_side.gif) repeat-x;
}

table.comparison td strong{
	display: block;
	background: transparent url(../img/tables/table-check.gif) no-repeat scroll center center;
	text-align: left;
	text-indent: -9999px;
}

/* ----- Progress Bar -----*/

.progressBar, .starRanking{
	position: relative;
	border: solid 1px #616161;
	background:url(../img/bar_empty.gif) repeat-x center;
}

.progressBar span{
	position: absolute;
	background:url(../img/bar.gif) repeat-x center;
	height: 100%;
	overflow:hidden;
}

.progressBar em, .starRanking em{
	position:absolute;
	display:block;
	width:100%;
	text-align: center;
	font-size: 15px;
	color: white;
}

/* ----- Footer -----*/
#footer{
	position: static;
	clear: both;
	width: 100%;	
	background: #edece7 url(../img/background-bottom.png) repeat-x bottom;
	height: 69px;
	#height: 58px;
}

#footer .container{
	position: static;
	width: 797px;
	height: 100% -10px;
	margin: 0px auto 0 auto;
	padding-top: 10px;
	color: #fff;
	text-align: right;
}

#footer .container a{
	color: #fff;
	margin: 0 10px 0 10px;
}

#copyright{
	position: relative;
	font-size: 11px;
	padding-bottom: 3px;
	bottom: 0px;
}


/* $Id: ippatsu.generic.css,v 1.2 2009/04/13 02:35:25 administrator Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
	
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #e9e9e9;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #dce6f1;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

/*-----------------------------------------------
	Search Box Settings
*/

.search-options{
	padding: 3px 10px 3px 10px;
	background: url(../img/background-search.png) no-repeat 0 0;
	border-bottom: 1px solid #d5d5d5;
	}

.tabbertab .search-options{
	background: url(../img/background-search-inner.png) no-repeat 0 0;
	}

/*-----------------------------------------------
	Licensing Boxes
*/

.commons-license{
	font-size:smaller;
	text-align:center;
	}