/* PRACTICE.HTML */

body { font-size: 13px;  /* don't resize text here, too difficult */ }
img#help_icon { bottom: 2px; right: 80px; top: inherit; }
#breadcrumbs { margin-bottom: 0; padding-left: 20px; padding-top: 3px; margin-top: 0; }

/* STATUS BAR */

div#status_bar { width: 716px; height: 49px; border-bottom: 2px solid;
		 position: relative;}

/* review bar */

#item_progress_bars {
 position: absolute; left: 20px; top: 13px; background-color: white; }
#item_progress_bars div.back { width: 115px; float: left; height: 23px; 
			       position: relative; }
#item_progress_bars span { color: white; text-shadow: 0 1px 0 #CCAACC;
			   text-align: center; z-index: 1; }
#item_progress_bars div.fore { height: 23px; top: 0; position: absolute; }
#item_progress_bars img.fore { height: 23px; }

#to_review_bar {
    background: url(/images/practice/topbar_groove_blue_center.png) repeat-x; }
#to_review_bar div.fore { right: 0;
    background: url(/images/practice/topbar_blue_liquid_center.png) repeat-x; }
#to_review_bar img.fore { position: absolute; left: -10px; top: 0; }
#to_review_bar span { position: absolute; right: 10px; top: 3px; }

#added_bar { 
    background: url(/images/practice/topbar_groove_green_center.png) repeat-x; }
#added_bar div.fore { left: 0;
    background: url(/images/practice/topbar_green_liquid_center.png) repeat-x; }
#added_bar img.fore { position: absolute; right: -10px; top: 0; }
#added_bar img.back { position: absolute; right: -1px; }
#added_bar span { position: absolute; left: 10px; top: 3px; z-index: 2; }

#add_word_button {
    height: 18px; width: 18px; float: left; margin: 2px 0 0 12px;
    background: url(/images/practice/manual_add.png) repeat-x; 
}

#add_word_button.enabled { background-position: 0 -54px; }
#add_word_button.enabled:hover { background-position: 0 -36px; }
#add_word_button.enabled:active { background-position: 0 -18px; }
#add_word_button.disabled { background-position: 0 0px; }


/* time */

div#time { text-align: center; color: #b3b3b3; font-size: 11px; 
	   position: absolute; left: 384px; top: 10px; background: white; }
div#time #session_time { font-size: 20px; }
div#time #prompt_time { font-size: 11px; margin-top: -4px; }


/* tools and settings buttons */

div#tools_settings_wrapper { position: absolute; right: 7px; top: 6px; }
div.tools_settings_button { background: white;
 float: left; height: 38px; width: 51px; margin-left: 10px; }



div#active_lists_button { 
    background-image: url(/images/practice/active_lists.png); }
div#settings_button { 
    background-image: url(/images/practice/settings.png); }

div.unactive_button { background-position: 0 -76px; }
div.unactive_button:hover { background-position: 0 -38px; }

div.active_button { z-index: 3; position: relative; }

/* volume */

#volume_control { position: relative; }

#volume_sprite_case { width: 34px; height: 24px; cursor: hand; cursor: pointer; 
		      position: absolute; right: 8px; top: 0px; }
#volume_sprite {
 background: transparent url(/images/volume.png) no-repeat -18px -28px;
 width: 18px; height: 14px; z-index: 5;
 position: absolute; top: 5px; left: 8px; font-size: 1px;
}

#volume_slider {
 position: absolute; top: 24px; left: 4px; height: 10px; width: 40px; }

#volume_slider_bar {
 height: 4px; width: 40px; background: #ccc; margin: 3px 0; position: relative;}

#volume_slider div.select_area { 
 position: absolute; top: -6px; height: 16px; z-index: 10; 
 cursor: hand; cursor: pointer; }
#volume_slider_knob {
 position: absolute; left: 0px; top: -2px;
 width: 2px; height: 8px; background: #777; }



        /* Skritter Window, outer divs */

#skritter { outline: none; }
#skritter_window { width: 676px; padding: 24px 20px; z-index: 1; }
#vert_border { float: left; }
#border_wrapper { float: left; }
#interactive_frame {
 float: left; width: 350px; position: relative; }

        /* Skritter Window, inner divs */

#char_pinyin_frame   {  height: 93px;  text-align:center;  }
#char_english_frame  {  height: 132px;  text-align:right;  }
#vocab_pinyin_frame    {  height: 47px;   text-align:center; color: #8494a1;}
#vocab_english_frame   {  height: 97px;  text-align:right;   }

#flash_frame_350 { text-align: center;    height: 405px; }
#flash_frame_250 { text-align: center; height: 289px; margin-top: 50px; }


        /* Prompt Text */

#word_rune, #word_rdng, #word_defn, #readiness_value, #char_bubble {
 background: white; }

#prompt_wrapper, .prompt { width: 310px; background: white; }
#prompt_wrapper { float: left; margin-left: 10px; position: relative; 
		  overflow: hidden; min-height: 400px; }
/*.prompt { position: absolute; }*/
.prompt div.line_end { display: inline-block; position: relative; width: 24px; }
.prompt div.line_end.hidden { display: none; }
.prompt div.grader { position: absolute; left: 3px;
 height: 18px; width: 18px; background: url(/images/practice/graders.png); }
.prompt div.grader1 { background-position: 0px -18px; }
.prompt div.grader1:hover { background-position: 0px 0; }
.prompt div.grader2 { background-position: -18px -18px; }
.prompt div.grader2:hover { background-position: -18px 0; }
.prompt div.grader3 { background-position: -36px -18px; }
.prompt div.grader3:hover { background-position: -36px 0; }
.prompt div.grader4 { background-position: -54px -18px; }
.prompt div.grader4:hover { background-position: -54px 0; }
.prompt div.style { font-size: 10px; position: absolute; top: -6px; left: 2px; }

.prompt .score_msg { position: absolute; left: 27px; width: 125px; 
		     font-size: 12px; z-index: 0; }

/* word buttons */

div.word_buttons, div.char_buttons { float: right; margin-top: 5px; }

div.prompt div.button { margin-left: 5px; float: left; position: relative; }

div.play_button { height: 14px; width: 16px;
    background:  url(/images/practice/play.png) 0 -14px; }
div.play_button:hover, div.playing { background-position: 0 0; }
div.lookup_button { height: 20px; width: 20px; margin-top: -3px; 
    background:  url(/images/practice/magnifying_glass.png) 0 -40px; z-index:6;}
div.button .click_area {
    width: 100%; height: 200%; position: absolute; top: -5px; }
div.lookup_button:hover { background-position: 0 -20px; }
div.lookup_button.open { background-position: 0 0; }
div.star_button { height: 15px; width: 18px; margin: -2px -4px 0 5px;
    background:  url(/images/practice/star.png); }
div.offstar { background-position: 0 -15px; }


/* word */

.word_rdng, .word_defn { margin-top: 16px; }

.word_rune .value { font-size: 30px; }
.word_rune { display: inline-block; }
#word_rune span.value { padding: 2px 2px 3px; }
#word_rune.trad span.value { background-color: #FDD4D4; }
#word_rune.simp span.value { background-color: #FFEC99; }
.word_rune div.grader, .word_rune .score_msg { top: -22px; }
.no_style div.grader, .no_style .score_msg { margin-top: 5px; }

.word_rdng .value { font-size: 20px; }
.word_rdng div.grader, .word_rdng .score_msg { top: -17px; }

.word_defn .value { font-size: 20px; }
.word_defn .inner, .char_defn .inner { display: block; }
.word_defn div.grader, .word_defn .score_msg { top: -17px; }

.readiness { font-size: 10px; color: #bbb; width: 100%; margin-top: 2px; }
hr { color: #ccc; width: 100%; margin-bottom: 15px; }

.word_prompt { position: relative; }

/* char */

.char_rune { font-size: 25px; }
.char_rdng { font-size: 16px; }
.char_defn { font-size: 16px; margin-top: 5px; }
.char_prompt { position: relative; }
.ja_prompt .char_rune { position: relative; top: -5px; }
.char_rdng, .char_rune { display: inline-block; }
#char_rune { padding: 2px; }
#char_rune.trad { background-color: #FDD4D4; }
#char_rune.simp { background-color: #FFEC99; }

.char_bubble_label { float: left; color: #bbb; padding: 7px; }
.char_bubble { float: left;
	       border: 1px solid #bbb; -moz-border-radius: 8px;
	       -webkit-border-radius: 8px; }
.char_bubble_text { float: left; width: 100%; }

/* prompt span styles */

.target_hide { border-bottom: 2px solid black; }
.target_hide .inner { visibility: hidden; }

.target_show { border-bottom: 2px solid black; }

.non_target_hide { border-bottom: 1px solid #ccc; margin-left: 3px; }
.non_target_hide .inner { visibility: hidden; }

.deemphasize { color: gray; }

.hide_complete { display: none; }

.highlight { background: #ddf; }
.highlight.obscured { background: white; }

.obscured { border: 1px solid #bbb; cursor: hand; cursor: pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; margin-left: 4px; }
.obscured:first-child { margin-left: 0; }
.obscured span { display: none; }
.obscured:after { content: "show"; font-size: 13px;
		  color: #bbb; padding: 0 4px;
		  vertical-align: 2px; }
.ja_prompt .obscured:after { content: "show reading"; }

/* tone colors */

.tones_on .tone1 { color: #EE363E; }
.tones_on .tone2 { color: #F47C36; }
.tones_on .tone3 { color: #73BB4F; }
.tones_on .tone4 { color: #649CD3; }



        /* Misc stuff */

#forms_div {  clear: both; float: left;  width: 270px; }

#user_div {  z-index: 100; }

#tips { text-align: center; }

        /* Feedback Box */

#feedback_tab {
 position: absolute; right: 0; bottom: 0; padding: 0 7px; 
 -moz-border-radius-topleft: 5px; -webkit-border-radius-topleft: 5px;
 border: 2px solid #ccc; border-right: 0; border-bottom: 0;
}

#feedback_text { font-size: 10px; color: #333; }

#user_inputs_div { height: 100%; width: 100%; position: absolute; top: 0; }
#feedback_box { 
 margin: 337px auto 0px auto; padding: 10px; width: 430px; position: relative;
 -moz-box-shadow: 5px 5px 10px #888; -webkit-box-shadow: 5px 5px 10px #888;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
 background-color: white; border: 2px solid black;
 text-align: left; z-index: 10000; }

#feedback_box p.error { color: red; font-weight: bold; }

#feedback { font-family: "Courier New", monospace; font-size: 13px; }

#screen { opacity:0.5; filter: alpha(opacity = 30); background-color: #777;
	  -moz-border-radius: 10px 0 10px 10px;
	  -webkit-border-radius: 10px;
	  -webkit-border-top-right-radius: 0; }

/* settings light boxes */

#active_lists_box, #settings_box {
 position: absolute; top: 60px; left: 8px; width: 657px; padding: 0 20px;
 background: white; border: 2px solid black; 
 -moz-border-radius: 10px;
 -moz-border-radius-topright: 0px;
 -webkit-border-radius: 10px;
 -webkit-border-top-right-radius: 0;
 -webkit-box-shadow: 5px 5px 10px #888;
 -moz-box-shadow: 5px 5px 10px #888;
 box-shadow: 5px 5px 10px #888;
 border-radius: 10px;
 z-index: 10;
}

#active_lists_done { position: absolute; bottom: 15px; right: 15px; }

#settings_box strong.alpha { font-size: 9px; color: green; }


/* UVLP Div */

#uvlistsdiv { clear: both; overflow: hidden;
	      border-top: 2px solid #000; border-bottom: 2px solid #000; }

#uvliststable { width: 100%; margin-bottom: 20px; min-height: 23px; 
	        border: 2px solid #ccc; font-size: 12px; padding: 0 0 0 20px; 
	       -moz-border-radius: 10px; -webkit-border-radius: 10px; }
#uvliststable td { padding: 3px 0; }

#uvliststable .back { float:left; }
#uvliststable div.back { width: 90%; height: 8px; position: relative;
 background: url(/images/practice/smallbar_groove_center.png) repeat; }
#uvliststable div.fore { 
 height: 8px; position: relative; position: absolute; top: 0; left: 0;
 background: url(/images/practice/smallbar_liquid_center.png) repeat; }
#uvliststable img.fore { position: absolute; right: -3px; }

td.playbuttons { width: 44px; }
td.playbuttons div.button { float: left; }
div.pausebutton, div.playbutton { width: 22px; height: 22px; }
div.pausebutton { background-image: url(/images/practice/vocab_pause.png); }
div.playbutton { background-image: url(/images/practice/vocab_play.png); 
	        position: relative; }
td.playbuttons div.disabled { background-position: 0 0px; }
td.playbuttons div.disabled:hover { background-position: 0 -22px; }
td.playbuttons div.enabled { background-position: 0 -44px; }

td.playbuttons div.button_wrapper {
    position: relative;
}
.greyed_out { opacity: .3; filter: alpha(opacity = 30); }

td.list { width: 25%; padding-left: 20px; }
td.sect { width: 25%; }
td.prog { width: 40%; }
td.button { width: 10%; }

#uvliststable td.unclickable { cursor: default; }

#active_lists_box .optionline { margin: 10px 0; }
#active_lists_box fieldset { padding: 0 25px; }
#lists_help_box { text-align: center; float: right; width: 400px; }

/* settings div */

.form fieldset { 
 width: 180px; margin: 0 10px 20px 7px; float: left; padding: 0 10px; 
 background: #eef; border: 1px solid #aaa;
}

.form legend { font-weight: bold; }

.form div.optionline { margin: 10px 0; }

.form label.left { 
 float: left; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
			 
.form li { padding-right:10px; clear: both; list-style: none; }
.form ul { min-height: 20px; margin-top: 0; margin:0; padding: 0; }

.form fieldset input[type="radio"], .form select, div.margin_input input { 
 margin-left: 40px; }

.form select { width: 130px; float: left; }

div.bool input { float: right; }

.form p.submit { text-align: center; }

div.clear { clear: both; }


/* error messages */

#no_words { 
    padding: 40px; background-color: #EEE; border: 2px solid black; 
    top: 140px; left: 150px; position: absolute;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 350px; }

#flash_version_warning, #wacom_plugin_warning {
 padding: 10px; border: 1px solid red; background-color: #FAB;
 position: absolute; bottom: 15px; right: 15px; width: 290px;
}


/* Other */

#Wacom {
 position: absolute;
 left: -9001px;
}
#wacom-plugin {
 position: absolute;
 left: -9001px;
}

#content_wrapper {
 padding: 0 0 1px 0;
 width: 716px;
}

/* sliders */

.slider_bar {
 height: 4px; width: 100%; background: #ccc; margin: 3px 0; position: relative;}

.slider_bar div.slider_select_area { 
 position: absolute; top: -6px; height: 16px; z-index: 10; 
 cursor: hand; cursor: pointer;
}
.slider_bar .slider_knob {
 position: absolute; left: 0px; top: -2px;
 width: 2px; height: 8px; background: #777;
}
.slider_bar .slider_marker {
 position: absolute; left: 0px; top: 0px;
 width: 2px; height: 4px; background: #777;
}

.slider_left, .slider_right { font-size: 10px; }
.slider_left { float: left; }
.slider_right { float: right; }


/* lookup box */

.lookup_box { position: absolute; top: 2px; right: 18px; background: white; 
	      width: 268px; padding: 5px 10px; border: 2px solid black;
	      -moz-border-radius: 5px 0px 5px 5px;
	      -webkit-border-radius: 5px 0px 5px 5px; 
	      -webkit-box-shadow: 5px 5px 10px #888;
	      -moz-box-shadow: 5px 5px 10px #888;
	      box-shadow: 5px 5px 10px #888;
}

.lookup_box .runes { font-size: 24px; }
.lookup_box .defn { clear: both; }
.lookup a { margin-left: 5px; text-decoration: underline; }
.lookup_box > * { margin: 5px 0; }

.list_sect { font-size: 10px; color: #bbb; margin: 2px 0; }
.list_sect .value { font-weight: bold; }

.lookup_box .lookup { margin-bottom: 5px; float: left; padding: 3px; border: 1px solid #e6e6e6; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.lookup_box select { width: 120px; }
.lookup_box .stroke_order { float: right; font-size: 10px; }

.lookup_box .delete_button { float:right; }

.lookup_box li { position: relative; margin: 7px 0; list-style: none; }
.lookup_box .add_button {
 position: absolute; left: -32px; top: -2px;
 height: 18px; width: 18px; margin: 2px 0 0 10px;
 background-image: url(/images/practice/manual_add.png); 
}
.lookup_box .add_button { background-position: 0 -54px; }
.lookup_box .add_button:hover { background-position: 0 -36px; }
.lookup_box .add_button:active { background-position: 0 -18px; }

.lookup_box hr {
 border: 0; color: #e6e6e6; background-color: #e6e6e6; height: 1px;
 width: 100%; text-align: left;
}