.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.3; /* Safari, Opera */
-moz-opacity:0.30; /* FireFox */
filter: alpha(opacity=30); /* IE */
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
right: 0px;
}

    .graph { 
        position: relative;
        width:50px; 

        border-width: 1px;
        border-style: solid;
        padding: 2px; 
    }

    .lgraph { 
        position: relative; /* IE is dumb */
        width:100px; 
    border-width: 1px;
        border-style: solid;
        padding: 2px; 
        margin-right: 4px;
        
        height: 10px; 
        line-height: 10px; 
    }
    .graph .bar, .lgraph .bar { 
        display: block;
        position: relative; 
    	 text-align: center; 
        color: #333; 
        height: 10px; 
        line-height: 10px;     
    }
    .graph .bar span { position: absolute; left: 1em; }
    
    .gred {
    	border-color: Salmon;
    }
    
    .gred strong {
    	background: Salmon;
    }
    
    .ggreen {
   	border-color: LawnGreen;
    }
    
    .ggreen strong {
    	background: LawnGreen;
    }

.red {
	color:red;
}

.green {
	color:green;
}

.unknown {
	color: #FFB89C;
}

/* used for kanji quizzes that have the kanji in giant, what blocks */
.quizkanji {
	padding: 5px;
	margin: 2px;
	font-size: 30px;
	text-align: center;
	vertical-align: middle;
	
}
.quizkanji_res {
	padding: 3px;
	margin: 2px;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
}
.quizdrop {
	font-size: 30px;
	text-align: center;
	padding: 10px;
	margin: 2px;
}
/* end kanji quiz blocks */

/* header / footer */


.headdiv, .headdiv div a, .headdiv div, .prodiv div, .prodiv a {
	color: white;
}

/* this is the piece above the tabs that contains the actual links */
.user_bar , .mlink_bar
{
	border-color: #99ccff;
	border-style: solid;
	background-color: white;
	padding: 4px 7px 4px 7px;
	margin-bottom: 8px;
	text-align:left;
}
.user_bar 
{	
	border-width: 0 1px 1px 1px;
}

.mlink_bar
{
	border-width: 0 1px 1px 0;
}

.menu_sub 
{
	border-color: #99ccff;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	background-color: white;
	padding: 4px 3px 4px 7px;
	height: 11pt;
	text-align:left;
	clear: both;
	position: absolute; 
	width: 535px;  
	top: 39px; 
	left: 0px;
}

.menu_sub select
{
	margin: -3px 0 -3px 0px;
}



#bodydiv {
	margin-left: auto;
	margin-right: auto;
	width: 990px;
	text-align: left;
	z-index: 2;
}

body {
	font-family: 'arial',sans-serif;
	text-align: center;
	font-size: 12px;
	margin: 0;
	padding: 0;
}

form {
	margin: 0;
}

/* end header / footer */

/* select_lesson */
dl {
	margin-top: 2px;
	padding: 0;
}
dd {
	position: relative;
	display: block;
	float: left;
	width: 98px;
	height: 10px;
	margin: 0;
	background: url("http://img.renshuu.org/g_colorbar2_small.jpg");
}
* html dd {
	float: none;
}
dd div {
	position: relative;
	background: url("http://img.renshuu.org/g_colorbar_small.jpg");
	height: 10px;
	text-align: right;
	overflow: hidden;
}

dd.bg_star {
	position: relative;
	display: block;
	width: 90px;
	height: 19px;
	background: url("http://img.renshuu.org/ratings_base.png");
}
* html dd {
	float: none;
}
dd.bg_star div {
	position: relative;
	background: url("http://img.renshuu.org/ratings_color.png");
	height: 19px;
	text-align: right;
	overflow: hidden;
}

/* for the rating selector */
.rating_box *
{
	list-style:none;
	padding: 0;
	margin: 0;
}

ul.rating{
background:url(http://img.renshuu.org/rating_star.png) bottom;
height:21px;
width:115px;
overflow:hidden;
}

ul.rating li{
display:inline
}

.rating span {
display:block;
width:23px;
height:21px;
float:left;
text-indent:-9999px;
position:relative;
}

span.rating_stick, .rating span:hover {
background:url(http://img.renshuu.org/rating_star.png) center;
width:115px;
margin-left:-92px;
position:static;
}

.rating span:active {
background-position:top;
}

.lessondiv {
	overflow: scroll;
	height:180px;
}

.lessondiv tr td {
	vertical-align: top;
}


#lessonbox {
	width: 100%;
}
#lessonbox tbody tr td, #lessonbox tr td {
	padding-bottom: 10px;
}


/* end select_lesson */

/* term lists */

.textbox {
	margin: 1px 1px;
	padding: 4px 3px;
	clear: left;
}


ul.reibun {
	margin: 0;
	line-height: 130%;
}
ul.reibun li {
	font-size: 11pt;
}

.greyrow td {
	color: grey;
}

.klist tr th {
	font-size: 12px;
	text-align: center;
	font-weight: normal;
}
.klist tr td {
	font-size: xx-large;
	text-align: center;
}

/* end term lists */

/* global stuff */

sup {
	text-decoration: none;
}

.grey {
	color: grey;
}

.clear, .pagehead {
	clear: both;
}
.bold {
	font-weight: bold;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-table;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}


.lnk {
	cursor: pointer;
}
.nlnk {
	cursor: pointer;
	text-decoration: none;
	margin: 0 3px 0 3px;
	padding: 1px 2px 1px 2px;
}

H1 {
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0 5px 0;
}

P {
	margin: 4px 2px 4px 2px;
}

.fright {
	float: right;
	text-align: right;
}
.fleft {
	float: left;
	text-align: left;
}


.frow {
	clear: both;
}
.flabel, .fslabel {
	float: left;
	text-align: left;	
}

.flabel {
	width: 25%;
	padding: 0px 0px 10px 0px;
}	

.fslabel {
	width: 15%;
	padding: 0px 0px 5px 0px;
}

.finput, .fsinput {
	float: right;
	text-align: left;
	
}

.finput {
	width: 72%;
	padding: 0px 0px 10px 0px;
}

.fsinput {
	width: 82%;
	padding: 0px 0px 5px 0px;
}

.title {
	font-size:20px;
	margin: 5px 0 5px 0;
}

.ltitle, .ltitle * {
	font-size: 11px;
}
.little, .little option {
	font-size: 10px;
}


.indent {
	margin-left: 10px;
}

.dindent {
	margin-left: 20px;
}

.padd * {
	padding: 2px;
}


.lbox {
	padding: 5px;
}


.rhidden {
	display: none;
}
.rdisplayed {
}

/* Tooltip */

#ttip, #stip, .sub_tip, .sub_tip_blank
{
	position:absolute;
	z-index:1010;
	left:0px;
	top:0px;
	visibility:hidden;
	padding: 0;
	text-align:left;
	max-width: 800px;
}

#ttip, #stip, .sub_tip {
	background-color: #FFFFFF;
}
 
#ttip_inner, #stip_inner {
	padding:3px;
}


/* end tool tip */





/* dictionary */

.radtable tbody tr td input {
	display: block;
}

.klook {
	cursor: pointer;
}

#searchbox {
	position:absolute;
	width:650px;
	z-index: 100;
}


#searchlink {
	border-top-width: 0px;
	margin: 0 5px 0 0;
	float: right;
}

.dictkanji {
	padding: 2px;
	font-size:26px;
}

/* end dictionary */

/* div constructs */

.innerbody, .stdbox {
	background-color: white;
	padding: 3px;
	opacity: 1.0; /* Safari, Opera */
-moz-opacity:1; /* FireFox */
filter: alpha(opacity=100); /* IE */
}

#msgbox
{
	text-align: left;
	margin: 5px 30px 15px 30px;
}

#msgboxtext
{
	padding: 10px;
}

/* end div constructs */

/* quiz/select_lesson */

.togglebutton
{
	color: #aaa;
	text-decoration: none;
	font-size: 20px;
	margin: 0 3px 0 3px;
	padding: 1px 2px 1px 2px;
	text-align:center;
}

a.togglebutton
{
	display: block;
}

.downbutton, .togglebutton:hover
{
	color: black;
}
/* end quiz/select_lesson */
/* quiz/run_quiz */

.hterm
{
	background-image:url(http://img.renshuu.org/translucent.png);
}

.correctbox
{
	background-image:url(http://img.renshuu.org/bg/tile_correct.gif);
}

.wrongbox
{
	background-image:url(http://img.renshuu.org/bg/tile_wrong.gif);
}

/* end quiz/run_quiz */

/* quiz/schedule_settings (liquid) */

.padtable tr td
{
	padding: 1px 2px 1px 2px;
}




 /* top nav bar */

.menu_sub a
{
	margin-top: 1pt;
	text-decoration: none;
}
.menu_sub a:hover
{
	text-decoration: underline;
}



/* end top nav bar */

/* everything below is dynamic on the color */
.outerborder, .stdbox, .pagehead
{
	border: 1px solid #99ccff;
}

.greeninfo
{
	padding: 3px;
	background-image:url(http://img.renshuu.org/bg/tile_correct.gif);
	border: 1px solid green;
}

.redinfo
{
	padding: 3px;
	background-image:url(http://img.renshuu.org/bg/tile_wrong.gif);
	border: 1px solid red;
}


.message_user
{
	width: 125px; 
	padding: 3px;
	border: 1px solid #99ccff;
	background-color: white;
}



.innertitle {
	background-color: #17467e;
	color: white;
	padding: 1px 0 1px 2px;
	border-bottom-color:#99ccff;
	border-bottom-style: solid; 
	border-bottom-width: 1px; 

}

.utab, .rtab, .tab, .ctab {
	border: 1px solid #99ccff;
	z-index:10;
	background-color: white;
	padding: 3px;
	font-weight: bold;
}

.utab {

	border-bottom: 1px solid white;

}

.utab, .utab_off {
	margin: 18px 0px -1px 5px;
	padding: 3px;
}

.rtab {
	border-top-width: 0;
	margin: 0 0px 7px 5px;
}

.tab {
	border-bottom: 1px solid white;
	position: relative;
}

.tab, .tab_off {
	margin: 0 5px -1px 5px;
}

.tab_off {
	border-bottom-width: 0px;
	padding: 3px;
	/*margin: 4px 5px 0 5px;	*/
}

.ctab {
		background-image:url(http://img.renshuu.org/bg/tile_back_alt.gif);
		position: relative;
		border-bottom-width: 0;
}

.ctab, .ctab_off {
	margin: 0 5px -1px 5px;
}

.ctab_off {
	padding: 3px
}


.utab_off, .tab_off, .ctab_off {
	border: 1px solid #99ccff;
	background-color: white;
	
	cursor: pointer;
	text-decoration: none;
	
}






.tab_off:hover, .utab_off:hover, .ctab_off:hover
{
	text-decoration: underline;
}

.midback, .pagehead
{
	background-image:url(http://img.renshuu.org/bg/tile_back_alt.gif)
}


.pagehead {
	padding: 2px 4px 2px 4px;
}

.pageheadtab {
	border: 1px solid #99ccff;
	background-color: white;
	
	border-bottom-width: 0px;
	padding: 1px 4px 1px 4px;
	margin: 4px 5px 0 5px;	
}

.pageheadtab, .pageheadtab *, .pagefoottab, .pagefoottab *
{
	cursor: pointer;
	text-decoration: none;
}

.pagefoottab {
	border: 1px solid #99ccff;
	background-color: white;
	
	border-top-width: 0px;
	padding: 1px 4px 1px 4px;
	margin: 0px 5px 4px 5px;	
}


/* div constructs */


.titlebar
{
	border-top: 1px solid #99ccff;
	border-bottom: 1px solid #99ccff;
	color: white;
	padding: 1px;
	background-color: #336699;
	text-align: center;

}

.innerborder
{
	border: 1px solid #962f64;
	padding: 1px;
	background-color: white;
	text-align:left;
}


/* pop up form boxes */
.cbutton
{
	font-size: 20px;
	background-color: #17467e;
	border: 1px solid #99ccff;
	border-width: 0 0 1px 1px;
	text-decoration: none;
	padding: 2px;
	margin: 0 0 0 2px;
	color: white;
}

/* end div constructs */

/* header/footer */
.headdivinner
{
	background-image: url(http://img.renshuu.org/bg/tile_mizu.gif);
	padding: 6px;
}


.headdiv
{
	border: 1px solid #17467e;
	border-top-width: 0;
	padding: 0 1px 1px 1px;
	background-color: white;
	text-align:left;
	clear: both;
}

#footerbox {	
	font-family: 'arial',sans-serif; 	
	width: 976px;
	
	clear: both;
	z-index: 16;
	position: fixed; 
	bottom: 0; 
	
}

#footerleft, #footerright
{
	background-color: white;
	border: 1px solid #17467e;
	border-bottom-width: 0;
	padding: 2px 6px 2px 6px;
	height: 15px;
}

#footerleft {
	
	width: 910px; 
	left: 0px; 
	position: absolute;
}

#footerright {
	width: 54px; 
	left: 926px; 
	position: relative; 
	text-align: center;
	padding: 2px 4px 2px 4px;
}

.prodiv
{
	border: 1px solid #17467e;
	padding: 1px 1px 1px 1px;
	background-color: white;
	text-align:left;
	clear: both;
	margin-right: 5px;
}

.clink_mizu, .clink_tsuki, .clink_ka, .clink_moku ,.clink_kin ,.clink_do
{
	padding: 3px;
	margin: 0 2px 0 2px;
	width: 3px;
	height: 3px;
}
.clink_mizu
{
	background-image: url(http://img.renshuu.org/bg/tile_mizu.gif);
}

.clink_tsuki
{
	background-image: url(http://img.renshuu.org/bg/tile_tsuki.gif);
}
 .clink_ka
{
	background-image: url(http://img.renshuu.org/bg/tile_ka.gif);
}
 .clink_moku
{
	background-image: url(http://img.renshuu.org/bg/tile_moku.gif);
}
.clink_kin
{
	background-image: url(http://img.renshuu.org/bg/tile_kin.gif);
}
.clink_do
{
	background-image: url(http://img.renshuu.org/bg/tile_do.gif);
}

a
{
	padding: 0;
	color: #17467e;
	text-decoration: none;
}

.tlnk {
	cursor: pointer;
	/*text-decoration: underline;*/
	color: #17467e;
}

.tlnk:hover, a:hover {
	text-decoration: underline;
}

.left {
	text-align: left;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}

.gtable tr td {
	padding: 0px;
	white-space:nowrap;
}

.quizopt {
	float: left;
	text-align: left;
	margin: 7px 30px 0 0;
}

/* grammar/individual */
.g_wordbox {
	border: 1px dashed black; 
	padding: 2px 4px 2px 4px;  
	margin: 2px; 
	font-size:16px;
	float: left;
	text-align: left;
}

.g_model, .g_model_c, .g_model_w {
	margin-left: 6px;
	margin-top: 4px;
}

.g_model div, .g_model_c, .g_model_w {
	font-size: 12pt; 
	margin-bottom: 12px;
}

.g_model_c, .g_word_c {
	background-image: url(http://img.renshuu.org/correct_icon_tile.gif);
}

.g_model_w, .g_word_w {
	background-image: url(http://img.renshuu.org/wrong_icon_tile.gif);
}

.g_advlist {
	border-width: 1px 0 1px 0; 
	font-size:13pt; 
	background-color:white;
	border-color: #99ccff;
	border-style:solid;
	margin-bottom: 10px;
}

/* graphs on the liquid main page */

  .vertgraph, .vertgraph_half {                    

        position: relative; 
      	
    }
    .vertgraph ul, .vertgraph_half ul { 
        width: 16px; 
        margin: 0; 
        padding: 0; 
    }
    
    .vertgraph ul, .vertgraph ul li {
    	height: 100px;
    }
    
    .vertgraph_half ul, .vertgraph_half ul li{
    	height: 50px;
    }
    
    .vertgraph ul li, .vertgraph_half ul li {  
        position: absolute; 
        width: 16px; 
        
        padding: 0 !important; 
        margin: 0 !important; 
 		list-style-type: none;
        line-height: 2.5em;
    }
    
    .vertgraph ul li.grn  {
    	background-color: LawnGreen;
    	bottom: 50px;
    }
    
    .vertgraph ul li.rd {
    	background-color: Salmon;
    	top: 50px; 
    }
    
    .vertgraph_half ul li.rd {
    	background-color: #336699;
    	bottom: 0px; 
    }
    
    .vertgraph_half_title {
    	color: #17467e;
    }
    
#myback {
	background-color: rgb(0, 0, 0);
opacity: 0.3; /* Safari, Opera */
-moz-opacity:0.30; /* FireFox */
filter: alpha(opacity=30); /* IE */
z-index: 15;
		width: 994px;
	height: 22px;
	clear: both;
	margin-left: -2px;
	position: fixed; 
	bottom: 0; 
background-repeat:repeat;
}

/* put the left rounded edge on the track */
#track1-left {
	position: absolute;
	width: 5px;
	height: 9px;
	background: transparent url(http://img.renshuu.org/form/slider-images-track-left.png) no-repeat top left;
}

/* put the track and the right rounded edge on the track */
#track1 {
	background: transparent url(http://img.renshuu.org/form/slider-images-track-right.png) no-repeat top right;
}

.boxtitle {
	font-weight: bold; 
	font-size:12pt; 
	margin: 10px 0 5px 5px
}	

.newstitle {
	font-weight: bold; 
	font-size:14pt; 
	margin: 20px 0 5px 5px
}	

#hanko_link {
	cursor: pointer; 
	position: fixed; 
	width: 50px; 
	height: 64px; 
	left: 0px; 
	bottom: 25px; 
	background-image: url(http://img.renshuu.org/hanko/shop_link.png);
	z-index: -1;
}

#hanko_link:hover {
	background-position: 50px 0;
}