/* GENERAL */

/* skritter blocked */

body > div { display: block; }
#no_css { display: none; }

a { text-decoration: none; }


p, body {
 font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
 font-size: small;
}

body { position: relative; }

*[lang="zh"] { font-family: "SimSun", "Microsoft YaHei", "Arial Unicode MS", "Arial Unicode", "serif"; }
*[lang="ja"] { font-family: "Meiryo", "MS Gothic", "Arial Unicode MS", "Arial Unicode", "serif"; }
*[lang="zh-Latin-pinyin"] { font-family: "Arial Unicode MS", "Arial Unicode", "Lucida Sans Unicode", sans-serif; }

.clear { clear: both; }

        /* Background */
body { margin: 0px; z-index: 0;
       background: #0063be url(/images/bluey/background_dark.png) repeat-x center 0;
}

/*#background_wrapper { height: 600px; }*/
#body_wrapper { width: 728px; margin: 0 auto; }

        /* Header */

#survey{position: absolute; right: 0px; top: 4px; z-index: 150; font-weight: bold;}
#survey:visited{display: none;}
#header_block { height: 70px; width: 720px; margin: auto; position: relative; }
#header_block.logged_in { height: 61px; }
#logo { position: absolute; top: 1px; left: 30px; width: 280px; }
#tagline { position: absolute; font-size: 12px; left: 0px; bottom: -13px;
	   letter-spacing: -0.5px; }
#header_block.logged_in #tagline { display: none; }
#nav_bar_div { position: absolute; top: 9px; right: 0px; }
#vwo_signup_link{ display: none; }
#home_link, #home_link:visited { color: black; }
#beta_mark { position: absolute; left: 174px; top: 26px; }


        /* Link Styling for Navbars, Header and Footer */

.nav_bar { list-style: none; }
.nav_bar li { float: right; padding: 1px 4px 3px;  }
.nav_bar a.nav_link { 
 padding: 0 10px; text-decoration: none; margin: 1px;
 font-size: 18px; color: #333; text-shadow: 1px 1px 0 white; }
.nav_bar a.nav_link:hover { text-decoration: underline; }


#footer_block a {
 padding-left:15px;
 padding-right:15px;
 color: white;
}

#sidebar a {
 margin-top: 2px;
 display: block;
 width: 50px;
}

#admin_bar {
 position: absolute; top: 15px; right: 0px; font-weight: bold; }



        /* Navigation Bar */




        /* Content */

#content_block {
 clear: both;
}

#content_wrapper { 
 position: relative; clear: both;
 -moz-box-shadow: 0px 3px 15px #888;
 -webkit-box-shadow: 0px 3px 15px #888;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 z-index: 0;
}
        /* Footer */

#footer_block {
 clear: both;
 height: 54px;
 text-align: center;
 padding-top: 10px;
}

#footer_wrapper {
 display: inline; /*width:500px;*/
 border-top: 1px solid;
 margin: 0 auto;
 padding-top: 10px;
}

#original_recipe {
 font-size: 12px;
 color: #444;
 margin-bottom: 15px;
}

        /* Sidebar */

#sidebar {
 float: left;
 width: 153px;
 height: 483px;
 margin-left: 0px;
 margin-right: 25px;
}

#sidebar ul {
 list-style: none;
 padding-left: 0px;
 margin-left: 44px;
 margin-top: 35px;
}



/* TABLES, stdtable */

.stdtable { border-collapse: separate; border: 1px solid black; 
	    background:white; border-spacing: 0; border-radius: 8px 8px 8px 8px; }
.stdtable th {
 background: #7E97E0; font-size: 13px; text-align: left; color: white; }
.stdtable th.clickable, th.clickable a, th a { color: #183C60; }
.stdtable th .table_arrow {
 display: none; float: left; height: 6px; width: 9px;
 background-position: 0 6px;
 background-image: url(/images/vocab/table_arrow.png);
 position: relative; top: 6px; margin-right: 3px;
}
.stdtable th.selected .table_arrow { display: block; }
.stdtable td, .stdtable th { border-bottom: 1px solid #aaa; padding: 4px; }

.stdtable tr:last-child td { border-bottom: 0; }
.stdtable tr:last-child td:first-child, .stdtable tr:last-child th:first-child { border-bottom-left-radius: 8px; }
.stdtable tr:last-child td:last-child, .stdtable tr:last-child th:last-child { border-bottom-right-radius: 8px; }
.stdtable tr:first-child th:first-child { -moz-border-radius-topleft: 8px;
					  border-top-left-radius: 8px; }
.stdtable tr:first-child th:last-child { -moz-border-radius-topright: 8px;
					 border-top-right-radius: 8px; }


/* stdtable navigation */

.stdtable_nav { margin-bottom: 4px; }
.stdtable_nav div.nav_block { width: 33%; float: left; min-height: 1px; }
.stdtable_nav div.left_nav { text-align: right; }
.stdtable_nav div.center_nav { text-align: center; }

/* tables w/scrollbars */

div.table_scroll_window { overflow: auto; border: 1px solid black; }
div.table_scroll_window table {
 clear: both; width: 100%; background: white; border: 0; }

/* lazy table */

.lazytable_wrapper .loading_msg {
 background: #aaf; opacity: 0.7; text-align: center;
 position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1;
}
.lazytable_wrapper .loading_msg div { margin-top: 40px; font-size: 24px; }
.lazytable_wrapper .screen_wrapper { position: relative; min-height: 200px; }
.lazytable_wrapper .empty_msg {
 background: #ededfe; border: 1px solid black; text-align: center;
 padding: 20px 40px 80px; border-top: 0; margin-top: 0;
}
.lazytable_wrapper .empty_msg img {
 height: 60px; vertical-align: middle; margin-right: 10px;
}

  /* Progress Bars */

.progressborder {
 width: 90%;
 height: 7px;
 border:2px solid #000;
 text-align: left;
}

.progressbar {
 background: #0c0;
 height: 7px;
}


/*h1, h2, h3, h4, h5, h6 { clear: both; }*/

hr {
 border: none 0; 
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #efefef;
 width: 80%;
 height: 1px;
 margin: auto;
 clear: both;
}

.clickable {
 color: #00E;
 font-weight: bold;
 cursor: hand;
 cursor: pointer;
}
a.clickable:visited {
 color: #66f;
}
span.clickable:hover { text-decoration: underline; }

.clickable_char {
 color: #66f;
 cursor: hand;
 cursor: pointer;
}

.rounded { -moz-border-radius: 8px; -webkit-border-radius: 8px; 
	   border-radius: 8px; }
.rounded_header { -moz-border-radius: 6px 6px 0 0;
		  -webkit-border-top-left-radius: 6px;
		  -webkit-border-top-right-radius: 6px; }
.rounded_bottom { -moz-border-radius: 0 0 8px 8px;
		  -webkit-border-bottom-left-radius: 8px;
		  -webkit-border-bottom-right-radius: 8px; }


.hidden { display: none; }
.inback, .inback * { visibility: hidden !important; }
.invisible { visibility: hidden; }
.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

/* Inner tabs */

/*
.innertab {
 padding: 5px 15px; font-size: 15px; float: left; border-left: 1px solid;
 border-right: 1px solid; border-top: 1px solid; z-index: 1;
 margin-top: 6px; margin-left: 10px; margin-right: 0px; background: #ddf;
 margin-bottom: 0;
}
*/

.innertabs { z-index: 1; position: relative; top: 1px; }
.innertab {
 padding: 5px 15px; float: left;
 margin: 0; cursor: hand; cursor: pointer; font-size: 12px;
 border: 1px solid #aaa; position: relative; z-index: 0; height: 17px; 
 -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0;
}

div.selectedinnertab { background: #eeefff; position: relative; top: 1px;
		       border-bottom: 0; }

.windowframe { background: #eeefff; clear: both; position: relative;
	       border: #aaa 1px solid; padding: 10px; }


/* remix box */

div.remixbox { margin-top: 10px; }
div.remixbox img { float: left; }
div.remixbox div { float: left; margin-left: 10px; width: 135px; }


/* breadcrumbs */

#breadcrumbs a:visited { color: blue; }
#breadcrumbs { font-size: 10px; margin: -15px 0 7px 0; height: 13px; }


#screen { height: 100%; width: 100%; z-index: 100; background: #eef;
	  position: absolute; left: 0; top: 0; text-align: center; }


/* tool lists */

#tools_wrapper { margin-bottom: 10px; }
#tools_wrapper h3 { margin: 0; }

#tools_wrapper div.button { 
 float: left; border: 0; margin-right: 7px; 
 width: 62px; height: 62px; background-position: 0 -124px; }
#tools_wrapper div.button:hover { background-position: 0 -62px; }
#tools_wrapper div.button:active { background-position: 0 0px; }

#tools_wrapper div.tool_wrapper {
    width: 100%; margin-bottom: 15px; background: white; }
#tools_wrapper div.desc_wrapper {
    float: left; }
#tools_wrapper p { margin: 0 2px; width: 590px; }
#tools_wrapper a { text-decoration: underline; }



/* admin and teacher consoles */

#admin_console, #teacher_console { 
    position: absolute; max-width: 150px;
    background-color: white; z-index: 10000; 
    -moz-border-radius: 5px; -webkit-border-radius: 10px; 
    border: 1px solid #33f;
    -moz-box-shadow: 5px 5px 10px #333; -webkit-box-shadow: 5px 5px 10px #333;
}
#admin_console_border, #teacher_console_border { 
    width: 100%; height: 20px; background-color: #aaf; 
    -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 10px 10px 0 0; 
}

#admin_console_window { padding: 10px; text-align: center; }

#teacher_console_window { padding: 10px; }
#teacher_console h3 { margin: 0 0 5px 0; }
#teacher_console h4 { margin: 0 0 10px 0; }
#teacher_links div.managing { margin: 5px 0; background: #ddf; padding: 2px; }
#teacher_links div.managing a { color: black; }

#admin_console hr, #teacher_console hr { margin: 10px 0; width: 100%; }
#admin_console input { width: 100px; }
p#on_off_hint { font-size: 10px; width: 106px; margin: 2px 0; text-align: center; }

#admin_console textarea {
 width: 300px; height: 300px; color: white; background: black; }




/*    drop-down signin menu    */
/* deleted rules with the *-prefix -- hacks for IE6/7
   maybe there's a better way to handle this? */
#nav_bar_div a.signin {
    background:#89B2DA none repeat scroll 0 0;
    border: 1px solid #89B2DA;
    color:#FFFFF6;
    padding:2px 6px 3px 6px;
    text-decoration:none;
    text-shadow: none;
    width: 80px;
    margin: 2px;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
}
#nav_bar_div a.signin:hover { background:#59B; }
a.signin span {
	background-image:url("/images/toggle_down_light.png");
	background-repeat:no-repeat;
	background-position:100% 50%;
	padding:4px 20px 5px 0;
}
#nav_bar_div a.menu-open {
	background:#ddeef6!important;
	color:#778899;
	outline: none;
	border: 1px solid;
	position:relative;
	top:2px;
	z-index:101;
	border-bottom: 0px;
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-bottom-right-radius:0;
}
a.signin.menu-open span { background-image:url("/images/toggle_up_dark.png"); color:#789; text-shadow: none; }
#signin_menu {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	border: 1px solid;
	display:none;
	background-color:#ddeef6;
	width:210px;
	z-index:100;
	text-align:left;
	padding:10px 8px;
	margin-top:12px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
}
#nav_bar_div #signin_menu { 
	position:absolute;
	top: 28px; 
	right: 0px; 
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 6px;
	padding:5px;
	width:203px;
}
#signin_menu p { margin:0; }
#signin_submit::-moz-focus-inner { padding:0; border:0; }
#signin_menu a {
    color:#778899;
    font-size: small;
    margin:0px;
    padding:0px;
    text-shadow: none;
}
#signin_menu #openidlink { text-decoration: underline; }


/*    in-field labels    */
#signin_menu p { position:relative }
#signin_menu h3 { margin: 6px 0; }
#signin_menu label  { position:absolute; top:0; left:0}
#signin_menu form { top: 10px; }
#signin_menu form p { position: relative; margin: 2px 0;}
#signin_menu form p label { position: absolute; top: 5px; left: 7px;}
#signin_menu form p br {display: none;}
#signin_menu form fieldset p label {
	width: 380px;
	display: block;
	margin: 5px 5px 5px 6px;
	padding: 0;
}

/*    logged-in user nav w/ language switcher    */
.nav_userlinks { float:right; margin: 1px 0 0 4px; }
#nav_userlang { text-align: right; }
.nav_userlinks a, a.visited { color: #0A6893; text-shadow:0 1px 0 #FFFFFF; }
.nav_userlinks a:hover { text-decoration: underline; }
#nav_bar_div .nav_userlinks a.menu-open { border:none; }
#lang_menu p { font-size: 11px; margin: 5px; padding: none; }
#lang_menu a { margin: none; padding: none; }

#lang_menu {
	border: 1px solid;
	display:none;
	background-color:#ddeef6;
	position:absolute;
	z-index:100;
	text-align:left;
	padding:0 0 0px;
	top: 28px; 
	right: 0px; 
	margin-top:8px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
}

#nav_bar_div .nav_userlinks a.menu-open {
	outline: none;
	border: none;
	margin: 0px;
	position:relative;
	top:0;
	z-index:101;
}

#lang_menu p { margin:0; }
#lang_submit::-moz-focus-inner { padding:0; border:0; }
#lang_menu a {
    color:#778899;
    margin:0px;
    padding:0px;
    text-shadow: none;
}

#lang_menu { padding: 6px; }
#lang_menu a { padding: 3px; margin-left: 19px; }
#lang_menu img { float: left; margin:0 6px 0 0; }

#langswitch { list-style-type: none; margin:0 0 0 2px; padding: 0; }
#langswitch li { float: none; }


/* Misc */

/*
.study_button { background-image: url(/images/practice/cram_button.png); }
.remove_button { background-image: url(/images/practice/remove_button.png); }
.study_button, .remove_button {
 height: 24px; width: 70px; background-position: 0 -48px; margin: 0 auto; }
.study_button:hover, .remove_button:hover { background-position: 0 -24px; }
.study_button:active, .study_button:active { background-position: 0 0; }
*/

/* popup */

#popup_screen {
 position: absolute;
 left: 0; top: 0; right: 0; bottom: 0; /*width: 100%; height: 100%;*/
 background: black; opacity: 0.4; filter: alpha(opacity = 40); z-index: 3;
 /*-moz-box-shadow: 0 0 10px; -webkit-box-shadow: 0 0 10px;*/
}

#popup_wrapper { position: absolute; top: 150px; width: 100%; }
.popup {
 background: white; border: 2px solid #339; margin: 0 auto; 
 padding: 10px 20px; position: relative; z-index: 4;
 -moz-box-shadow: 5px 5px 10px #000; -webkit-box-shadow: 5px 5px 10px #000;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

.popup.draggable { cursor: move; }
.popup .popup_draggable_bar {
 position: absolute; left: 0; top: 0;
 width: 94%; height: 20px; background: #bbb; }

.popup_loading { text-align: center; }
/*.popup_bar { height: 0; }*/
.popup_close {
 background-image:url("/images/vocab/list_editor_x.png");
 background-position: 0 -17px; height: 17px; width: 17px;
 position: absolute; top: 9px; right: 10px; color: red;
}
.popup_close:active { background-position: 0 0; }

.root_popup { width: 577px; }
.child_popup { position: absolute; top: 35px; width: 80%; }
.leaf_node_popup  { left: 4%; right: 4%; }
.inner_node_popup { width: 577px; left: -2px; }

.popup_prev input, .popup_next input {
 min-width: 30px !important; font-size: 16px; font-weight: bold !important; }

/* canvas buttons */

.canvas_button { position: relative; display: inline-block; 
	         padding: 0;
		 overflow: hidden;
		 cursor: hand; cursor: pointer; -moz-user-select: none;
		 -khtml-user-select: none; user-select: none;
		 z-index: 0;
	       }
.alt_button { text-align: center; }
.canvas_button input, .alt_button {
 color: white; font-weight: bold; border: 0; 
 text-transform: capitalize; /* keep it uniform! */ background: transparent;
 min-width: 60px; z-index: 0; cursor: hand; cursor: pointer;
 white-space: normal; min-height: 23px; }
.canvas_button input::-moz-focus-inner { border: 0; }
.canvas_button.white input, .alt_button.white {
 color: black; font-weight: normal; }

.canvas_button canvas {
 position: absolute; z-index: -1; left: 0; height: 600%; width: 100%; top: 0; }

input:hover        + canvas.button { top: -100%; }
input:active:focus + canvas.button { top: -200%; }
input:focus        + canvas.button { top: -300%; }
input:focus:hover  + canvas.button { top: -400%; }
.canvas_button.disabled canvas.button { top: -500% !important; }
.alt_button.disabled { background-color: #aaa !important; }
.canvas_button.disabled, .alt_button.disabled { cursor: default; }
.canvas_button.disabled input { cursor: default; }

a.canvas_button, a.alt_button { text-decoration: none; }

.canvas_button input .alt_button {
 font-size: 12px; padding: 2px 8px; }
.canvas_button.small input { height: 23px; }

.canvas_button.tiny input .alt_button.tiny {
 font-size: 10px; padding: 2px 8px; }
.canvas_button.tiny input {
 min-height: 16px; height: 16px; min-width: 20px; font-size: 10px; }

.canvas_button.medium input, .alt_button.medium {
 font-size: 16px; padding: 4px 12px; }
.canvas_button.medium input { min-height: 27px; }

.canvas_button.large input, .alt_button.large {
 font-size: 24px; padding: 5px 15px; }
.canvas_button.large input { min-height: 48px; }

.canvas_button.huge input, .alt_button.huge {
 font-size: 40px; padding: 10px 20px; }
.canvas_button.huge input { min-height: 68px; }

.alt_button { border: 1px outset #aaa; }
.alt_button:active { border: 1px inset #aaa; }
.alt_button.disabled { border: 1px outset #aaa !important; }
/*input.alt_button:active { border: 1px*/
.red.alt_button { background-color: #EB0404; }
.red.alt_button:hover { background-color: #FD4239; }
.red.alt_button:active { background-color: #92231E; }

.blue.alt_button { background-color: #345C93; }
.blue.alt_button:hover { background-color: #4195D3; }
.blue.alt_button:active { background-color: #03025F; }

.green.alt_button { background-color: #55BC00; }
.green.alt_button:hover { background-color: #629B08; }
.green.alt_button:active { background-color: #79B52C; }

.white.alt_button { background-color: #D6D6D6; }
.white.alt_button:hover { background-color: #EEEEEE; }
.white.alt_button:active { background-color: #BBBBBB; }


/* new progress bar */

.std_progress_bar_wrapper, .std_progress_bar {
 -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 16px;
 width: 100px; }
.std_progress_bar_wrapper { background-color: #74B834; }
.std_progress_bar { background: url("/images/progress_grad.png"); }


/* info bubble */

.info_bubble { padding: 10px 20px; position: absolute; z-index: 3;
	       background: #535353; color: white; max-width: 200px; 
	       min-width: 100px;
	       -moz-box-shadow: 3px 3px 5px #666666; font-weight: normal;
	       -webkit-box-shadow: 3px 3px 5px #666666; 
	       cursor: hand; cursor: pointer; }
.info_bubble_close { position: absolute; right: 3px; top: 3px; } 
.info_bubble_arrow { position: absolute; top: -26px; left: 10px; }
.info_bubble .clickable { color: #ADADEA; }
.info_bubble img { border: 0; }


/* more info links */

.more_info { font-size: 11px; line-height: 8px; clear: left; }
a.more_info:visited { color: #0000EE; }


/* new tiny remove button */

.remove_wrapper { vertical-align: top; }
.remove_wrapper div.remove_button {
 background-image: url(/images/vocab/x.png); 
 background-position: 0 10px; height: 10px; width: 10px; }
.remove_wrapper:hover div.remove_button { background-position: 0 0px; }
.remove_wrapper:active div.remove_button { background-position: 0 0px; }


/* grabber */

.grabber_wrapper { float: left; margin: 2px 5px 0 1px; cursor: move; }


/* vocabs in tables */

.rune { font-size: 18px; }
.rdng, .defn { font-size: 12px; }
.rdng { font-weight: bold; }
.rare { color: #A44614; font-size: 10px; }
.comp { color: #287059; font-size: 10px; }
.vocab_span img { height: 17px; }


/* edit buttons */

.edit_button {
 background-image: url(/images/vocab/word_popup_pencil.png);
 background-position: 0 -40px; height: 20px; width: 20px; display: inline-block;
}
.edit_button:hover { background-position: 0 -20px; }
.edit_button:active { background-position: 0 0px; }


/* Quick add bar */

.popup.quick_add_popup { 
 position: fixed; left: 100px; top: 90px; max-width: 400px; width: auto; }
.popup.quick_add_popup .progbar { height: 100%; position: absolute; left: 0; top: 0; background: #BDFFB0; }
.quick_add_prog .canvas_button { margin-left: 10px; }
.quick_add_prog span { position: relative; }