/* GENERAL */

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"; }
*[lang="ja"] { font-family: "Meiryo", "MS Gothic", "Arial Unicode MS", "Arial Unicode"; }
*[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: #C1E0FF url(/images/bluey/background.png) repeat-x center 0;
}

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

        /* Header */

#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; }
#home_link, #home_link:visited { color: black; }


        /* 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: #5a566d;
}

#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 { border-collapse: collapse; border: 1px solid #000; 
	    background:white; }
.stdtable th { background: #4195d3; font-size: 15px; color: white; }
.stdtable th.clickable, th.clickable a, th a { color: #bdf; }
.stdtable th#ordered { background: #345C93; }
.stdtable td, .stdtable th { border-left: 1px solid #bbb;
			     border-right: 1px solid #bbb; padding: 4px; 
			     border-top: 1px solid #ddd; 
			     border-bottom: 1px solid #ddd; }
.stdtable td { text-align: center; }
.stdtable .even { background: #fff; }
.stdtable .odd { background: #eee; }


  /* Progress Bars */

.progressborder {
 width: 100%;
 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: #66f;
 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; }
.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; }

/* buttons */
div.outer_button, div.disabled_button { 
    background: url(/images/blue_button_center.png) repeat; }
div.mid_button { 
    background: url(/images/blue_button_rend.png)  no-repeat right top; }
div.inner_button { 
    background: url(/images/blue_button_lend.png) no-repeat; 
    height: 19px; padding: 2px 20px; color: white; font-size: 14px; 
    cursor: default; }
div.outer_button:active { background-position: 0 -23px; }
div.outer_button:active .inner_button { background-position: 0 -23px; }
div.outer_button:active .mid_button { background-position: right -23px; }

div.disabled_button { background-position: 0 23px; }
div.disabled_button .inner_button { background-position: 0 -46px; }
div.disabled_button .mid_button { background-position: right -46px; }


.hidden { display: none; }
.inback, .inback * { visibility: hidden !important; }
.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;
}
div.selectedinnertab { background: #eeefff; position: relative; top: 1px;}

.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; }


#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 console */

#admin_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 { 
    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; }

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

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


/* tables w/scrollbars */

div.table_scroll_window { 
    overflow: auto; border-bottom: 1px solid black; border-top: 1px solid black;
}
div.table_scroll_window table {
    clear: both; width: 99%; background: white;
}

 



/*    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_loading { text-align: center; margin: 10px 0; }
.popup_bar { height: 0; }
.popup_close {
 background-image:url("http://www.skritter.com/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: 80%; }
.child_popup { position: absolute; top: 35px; }
.leaf_node_popup  { left: 4%; right: 4%; }
.inner_node_popup { width: 576px; left: -2px; }


/* canvas buttons */

.canvas_button { position: relative; display: inline-block; 
	         padding: 0; margin: 10px 0;
		 overflow: hidden;
		 cursor: hand; cursor: pointer; -moz-user-select: none;
		 -khtml-user-select: none; user-select: none;
	       }

.canvas_button input { color: white; font-weight: bold; padding: 3px 8px; }
.canvas_button input::-moz-focus-inner { border: 0; }
.canvas_button.white input { color: black; font-weight: normal; }

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

input:hover        + canvas.button { top: -100%; }
input:focus        + canvas.button { top: -300%; }
input:focus:hover  + canvas.button { top: -400%; }
input:active:focus + canvas.button { top: -200%; }

.canvas_button input { border: 0; background: transparent; }

.canvas_button.medium input { font-size: 16px; padding: 4px 12px; }
.canvas_button.large input { font-size: 28px; padding: 5px 15px; }
.canvas_button.huge input { font-size: 40px; padding: 10px 20px; }

input.alt_button { border: 1px solid #aaa; }
/*input.alt_button:active { border: 1px*/
.canvas_button.red input.alt_button { background-color: #EB0404; }
.canvas_button.red input.alt_button:hover { background-color: #FD4239; }
.canvas_button.red input.alt_button:active { background-color: #92231E; }