/*---------------------------------------------------------------------------------*/ /*----------------------------- NORMALIZATION ------------------------------------*/ /*---------------------------------------------------------------------------------*/ * { margin:0; padding:0;} body { } body, p, div, ol, ul, li, form, select, input, table, tr, td, th { font: 97%/1.45em Arial,Helvetica,sans-serif; } ul { list-style:none;} a img, :link img, :visited img { border:none; } a:link { color:#0072ff; text-decoration:none;} a:visited { color:#8f46fd; text-decoration:none;} a:hover, a:active { color:#cc4040; text-decoration:none; } *:focus { outline:none; } .clear { clear:both;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearfix { display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height:1%; } .clearfix { display:block;} /* End hide from IE-mac */ .fullwidth {width:100%;} /*--------------------------- Global styles --------------------------------------*/ body { background-color:#eee; background-image:url(../images/bg_tiny.png); } .soon{ background: url(../images/soon.png) no-repeat; } .beta{ background: url(../images/beta3.png) no-repeat; } .btn{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:53px;border-radius:5px;} .btn{padding:8px 15px;display:inline-block;text-decoration:none;color:#fff!important;background-color:#007cfe;} .btn:hover{background-color:orange;} /*-----------------Top Bar --------------------------------------------------------------*/ #topbar {height: 30px; background: url(../images/top_bg_30.png) repeat-x; color:#000; padding-top:2px;} #topbar_content {width:980px; height:30px; display:block; margin: 0px auto auto auto; } #topbar_lang {height:26px; float:left;} #topbar_lang img {height:26px; float:left;} #topbar_lang #lang_selector{width:90px; height:30px; padding:0px 10px; float:right;} #topbar_exit {float:right; width: 300px; font-size:0.8em; font-weight: bold; text-align:center; border: solid 1px #aaa;} #topbar_content #header_logo { position: relative; float: left; width:185px; height:45px; margin: 0px 0 0 15px; padding:0 0 0 15px; font-size:1.7em; } #topbar_menu {float:left; width:560px; margin:0px auto auto auto;} #topbar_menu ul {list-style:none; width:100%;} #topbar_menu ul li {float:left; padding:5px 10px} #topbar_menu a:link { color:#000; text-decoration:none; } #topbar_menu a:active { color:#000; text-decoration:none; } #topbar_menu a:visited { color:#000; text-decoration:none; } #topbar_menu a:hover { color:#f02; text-decoration:none; } li.current_selected{color:#000; font-size:1.6em; font-weight:bold; background: url(../images/highlight_option.png) no-repeat center bottom; } /*-----------------Main content --------------------------------------------------------------*/ .wst_unselected { color:#fff; background:#333; } .wst_unselected:hover { color:#000; background:#fff; } .wst_selected { color:#000; background:#ddd; } #contentwrapper {width:980px; display:block; margin: 12px auto auto auto; } #leftcolumn { float:left; width:210px; height:575px; margin:0px 0px 0px 0px; } #rightcolumn { float:right; width:210px; height:575px; margin:0px 0px 0px 0px; } #contentcolumn { float:left; width:560px; margin:0px auto 20px auto; } #bigcontentcolumn { float:left; width:750px; margin:0px auto 20px auto; background-color:#e6e6e6; border:1px solid #ccc;} /*-----------------Left Content-------------------------------------------------------------*/ #header_logo { position: relative; width:185px; height:45px; margin: 5px 0 0 15px; padding:0 0 0 15px; font-size:1.7em; } #box {margin-top:140px; margin-bottom:100px; position:relative; clear:both;} #tabMenu {margin:0;padding:0 0 0 15px;list-style:none;} #tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand; padding:0px 20px 0px 0px} #tabMenu_words {height:328px;} #underMenu_box {margin:10px auto; text-align:center;} #box ul li.comments {background:url(../images/tabmenu/tabComment.png) no-repeat 0 -32px;} #box ul li.posts {background:url(../images/tabmenu/tabStar.png) no-repeat 0 -32px;} #box ul li.category {background:url(../images/tabmenu/tabFolder.png) no-repeat 0 -32px;} #box ul li.mouseover {background-position:0 0;} #box ul li.mouseout {background-position:0 -32px;} #box ul li.selected {background-position:0 0;} .sub_selected { color:#000; background-color:#e6e6e6; font-size:1.6em; font-weight:bold; } .boxTop {background:url(../images/tabmenu/boxTop.png) no-repeat;height:11px;clear:both} .boxBody { width:199px; background-color:#e6e6e6; border-left:solid 1px #ccc;border-right:solid 1px #ccc;} .boxBottom {background:url(../images/tabmenu/boxBottom.png) no-repeat;height:11px;} .boxBody div.parent {display:none;} .boxBody div.show {display:block;} .boxBody div ul {margin:0 0px 0 25px;padding:0;width:160px;list-style-image:url(../images/tabmenu/arrow.gif)} .boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer} .boxBody div ul li.last {border-bottom:none} .boxBody div li span {font-size:8px;font-style:italic; color:#888;} .boxBody a:link { color:#000; background-color:#e6e6e6; text-decoration:none; } .boxBody a:active { color:#000; background-color:#e6e6e6; text-decoration:none; } .boxBody a:visited { color:#000; background-color:#e6e6e6; text-decoration:none; } .boxBody a:hover { color:#f02; background-color:#e6e6e6; text-decoration:none; } /*-----------------Right content -----------------------------------------------------------*/ #rightContainer {height:440px; text-align:center;} #rightContainer .cto_arrow{width:60px; height:70px; margin:0px auto;} #rightContainer .separador{width:200px; margin:4px auto;} #rightContainer .smalltext{font-size:0.7em; text-align:left;} #rightContainer .smallimg img {width:24px; height:24px;} #rigthContainer .hints_button_back{width:24px; float:left;} #rigthContainer .hints_button_forward{width:24px; float:right;} #rightContainerExtra {width:160px; margin:20px auto; font-size:1.4em; text-align:center;} #rightContainerExtra img {float:left; margin:0px; padding:0px;} #rightContainerExtra .playBadge{width:140px;} /* ---------- Footer ----------- */ #footer { clear:both; width:580px; margin:60px auto auto auto; } #angelfooter{ clear:both; margin: 70px auto auto auto; width:380px; height:40px; background:url(../images/angelfooter.png) no-repeat; } #copyright { clear:both; margin: 50px auto auto auto; width:400px; height:30px; text-align: center;} /*----------------------------- Quizz style ------------------------------------*/ #quiz_oks{ position:relative; float:left; width:60px; height:500px; background:url(../images/cuadro_verde.png) no-repeat; padding:54px 0px 0px 12px; text-align: center; font-size:29px; margin:0px 0px 0px 0px; color:#006c00; } #quiz_kos{ position:relative; float:right;width:60px; height:500px; background:url(../images/cuadro_rojo.png) no-repeat; padding:54px 0px 0px 12px; text-align: center; font-size:29px; margin:0px 0px 0px 0px; color:#860000; } #quiz_main{position:relative; float:left; width:400px; height:500px; margin:0px 0px 0px 0px;} #quiz_wordset { position:relative; top:0px; left:0px; width:400px; height:20px; margin:0px 0px 0px 0px; } #quiz_block { position:relative; top:24px; left:0px; width:400px; height:420px; } #quiz_ok { position:relative; top: 0px; left:0px; width:400px; height:170px; background:#eee; border:1px solid #0ce; font-size: 44px; text-align: center; margin: 0px 0px 20px 0px; } #quiz_hanzi { width:100%; font-size: 44px; text-align: center; margin-top:5px; } #quiz_pinyin { width:100%; font-size: 24px; text-align: center; } #quiz_translation { width:100%; font-size: 20px; text-align: center; } #quiz_phrase { width:100%; font-size: 16px; text-align: center; } #quiz_answers { position:relative; top: 0px; width:400px; font-size:34px; text-align: center; margin: 0px 0px 0px 0px; } .answer_hanzi { font-size:34px; width:400px; height:48px; background-color:#e6e6e6; border:1px solid #ccc;} .answer_pinyin { font-size:34px; width:400px; height:48px; background-color:#e6e6e6; border:1px solid #ccc;} .answer { font-size:16px; width:100%; height:48px; background-color:#e6e6e6; border:1px solid #ccc;} .questionmarks{ color:#33bbcc; } .quiz_total_green { margin:10px; text-align:left; font-weight:bold; color:#006c00; } .quiz_total_red { margin:10px; text-align:left; font-weight:bold; color:#860000; } #quiz_last {width:400px; text-align:center; margin: 10px 0px; background-color:#e6e6e6; border:1px dashed;} .verde {color:#006c00;} .rojo{color:#860000;} #quiz_wordset {display: block; margin:0 5px 0 5px; padding:5px 0 0px 0; } #quiz_wordset .form_select {padding:3px 3px; margin:0px 5px 0px 5px; width:100px; border: 1px double #171717; float:left;} #quiz_wordset .form_color_select{padding:3px 3px; width:150px; border: 1px double #171717; float:left;} #quiz_wordset #color_selector_div{float:right;} /* --------------------- REVIEW -----------------*/ #review_speedselect {clear:both; width:450px; margin:20px auto 10px auto;} #review_wordset { width:450px; height:20px; margin:0px auto 30px auto; } #review_carousel { width:550px; height:280px; padding: 0; margin: 0px auto 0px auto; z-index:0; } .review_word { top:0; left:0; width:520px; height:240px; padding:15px; border:1px solid #ccc; background-color:#eee; } .review_hanzi { width:100%; font-size: 44px; text-align: center; margin-top:5px; font-family: Kaiti, Arial,Helvetica,sans-serif;} .review_pinyin { width:100%; font-size: 24px; text-align: center; } .review_translation { width:100%; font-size: 20px; text-align: center; } .review_buttons { width:150px; margin:20px auto 20px auto; } #review_controlpanel { clear:both; width:500px; margin:auto; border:1px solid #ccc; background-color:#eee; text-align:center; font-family: Kaiti, Arial,Helvetica,sans-serif;} #review_controlpanel img{ margin: auto 30px 0 30px; } .roundedCorners { -moz-border-radius: 10px; -webkit-border-radius: 10px; } #carousel_link { text-align:center; margin-bottom:30px;} #carousel_link img{width:40px; height:40px; text-align:center; } #review_list { width:750px; margin:0px 10px 0px 0px;} #review_list .hanzi_listed {font-size:24px;} /* --------------------- WORD FLASH CARD------------*/ #wfc {width:400px; height:150px; background:#eee; border:1px solid #0ce; text-align: center; margin: 0px 0px 20px 0px;} #wfc_hanzi { width:100%; font-size: 44px; text-align: center; margin-top:5px; } #wfc_pinyin { width:100%; font-size: 24px; text-align: center; } #wfc_translation { width:100%; font-size: 20px; text-align: center; } /* --------------------- WORD GRID -----------------*/ #word_siblings_container h3{font-size:1.2em; font-weight:bold;} .wordsibling{width:35px; margin: 5px; padding: 5px; background: #e6e6e6; font-size: 1.4em; line-height: 1.4em; float: left; border: 1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* --------------------- WORD GRID -----------------*/ #words_grid{ width:100%; height:500px;} .wordbox{width:100px; margin: 5px; padding: 5px; background: #e6e6e6; font-size: 11px; line-height: 1.4em; float: left; border: 1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .wordbox_red {border-color:red; } .wordbox_yellow {border-color:yellow;} .wordbox_green {border-color:green;} .wordbox .chinese {width:100px; float:left;} .wordbox .chinese .hanzi {width:100%; font-size: 2.2em; text-align: center; margin-top:5px; } .wordbox .chinese .pinyin {width:100%; font-size: 1.2em; text-align: center; } .wordbox .translation {width:300px; font-size: 1.4em; text-align: center; float:left;} .wordbox .scores {width:50px; font-size: 1.4em; text-align: center; float:left;} /* -------------------- LOGIN ------------------------ */ fieldset#login { margin: 0px; padding: 5px 5px 5px 5px; width: 200px; height: 179px; font-size:1.4em; position: relative; float:right;background: url(../images/login_bg.png) no-repeat top left; border: none;} #login h4 { font-size: 18px; font-weight: normal; font-family: Cambria, Georgia, "Times New Roman", Times, serif; width: 170px; height: 31px; padding: 4px 0px 0px 30px; margin: 0px; text-align: left;} #login form { width: 190px; height: 95px; padding: 10px 0px 0px 0px; margin: 0px;} #login p { width: 200px; padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif;} #login form p label { text-align: left; margin-left: 0.5em; float:left; font-size: 12px; } #login form p.check { width: 199px; height:23px; padding-left: 77px;} #login #remlabel { float: left; font-size: 12px; position:relative; left: -3px; } #login #remember { width: 14px; height:14px; float: left; padding: 0px; margin: 0px; position: relative; top: 3px; } #login #submit { width: 77px; height:27px; float:right; curso: pointer; border: none; background: url(../images/login.png) no-repeat top left; } #login #username, #login #password { width:122px; height:19px; padding: 2px; color: #222222; font-size:14px; float:right; margin-bottom: 10px; background: url(../images/input_bg.png) no-repeat top left; border: 1px solid #d0d0d0; } #login p.member { width: 170px; text-align: left; font-size:11px; font-family: Arial, Helvetica, sans-serif; margin: 2px 2px 0px 2px; padding: 2px; line-height:18px; } /* -------------------- PUBLOGIN -------------------*/ #contenido_plano {width: 800px; height:400px; margin:0px auto auto auto; } #pubcontentlogin {clear:both;width: 440px; height: 330px; margin: 60px auto auto auto; font-size:1.4em; font-family: Cambria, Georgia, "Times New Roman", Times, serif; background:#eee; border: 1px dashed; } #pubcontentlogin h1 {margin: 10px auto; color: black; font-size:2.8em; text-align:center; line-height: 1.5em; clear:both;} #pubcontentlogin a:link { color:#38d; text-decoration:underline; } #pubcontentlogin a:active { color:#38d; text-decoration:underline; } #pubcontentlogin a:visited { color:#38d; text-decoration:underline; } #pubcontentlogin .cto_login {height: 31px; padding: 4px 0px 15px 20px; margin: 0px; text-align: left; font-size: 22px; color:#444; font-weight: normal; } #pubcontentlogin .cto_or {height: 31px; padding: 7px 0px 15px 20px; margin: 0px; text-align: left; font-size: 16px; color:#888; font-weight: normal; } #pubcontentlogin .cto_register{height: 31px; padding: 4px 0px 15px 15px; margin: 0px; text-align: left; font-size: 22px; color:#38d; font-weight: normal; } #pubcontentlogin #alertMsg {width:100%; height:31px; color:#C00; text-align:center;} #pubcontentlogin .logo {width:130px; height:130px; margin:10px 0px 0px 15px; float:left;} #pubcontentlogin form { width: 240px; height: 145px; padding: 10px 0px 0px 0px; margin: 20px 0px; float:right;} #pubcontentlogin p { width: 200px; padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif;} #pubcontentlogin form p label { text-align: left; margin-left: 0.5em; float:left; font-size: 14px; } /* #pubcontentlogin form p.check { width: 199px; height:23px; padding-left: 77px;} */ #pubcontentlogin form #submit { width: 77px; height:27px; float:right; cursor: pointer; border: none; margin: 2px 20px 2px 0px; background: url(../images/login_blue.png) no-repeat top left; } #pubcontentlogin form a.btn { width: 77px; height:27px; float:right; cursor: pointer; border: none; margin: 2px 20px 2px 0px; background: url(../images/login_blue.png) no-repeat top left; } #pubcontentlogin #username, #pubcontentlogin #password { width:122px; height:19px; padding: 2px; color: #222222; font-size:14px; float:right; margin-bottom: 10px; background: url(../images/input_bg.png) no-repeat top left; border: 1px solid #d0d0d0; } #pubcontentlogin .separador {clear:both; width:300px; height:16px; margin:10px auto;} /* -------------------- PUBREGISTER -------------------*/ #pubcontentregister {clear:both;width: 700px; height: 450px; margin: 60px auto auto auto; font-size:1.4em; font-family: Cambria, Georgia, "Times New Roman", Times, serif; background:#eee; border: 1px dashed; } #pubcontentregister h1 {margin: 10px auto; color: black; font-size:2.8em; text-align:center; line-height: 1.5em; clear:both;} #pubcontentregister a:link {color:#38d; text-decoration:underline; } #pubcontentregister a:active {color:#38d; text-decoration:underline; } #pubcontentregister a:visited {color:#38d; text-decoration:underline; } #pubcontentregister .cto_login {height: 31px; padding: 4px 0px 15px 120px; margin: 0px; text-align: left; font-size: 22px; color:#444; font-weight: normal; } #pubcontentregister .cto_or {height: 31px; padding: 7px 0px 15px 20px; margin: 0px; text-align: left; font-size: 16px; color:#888; font-weight: normal; } #pubcontentregister .cto_register{height: 31px; padding: 4px 0px 15px 15px; margin: 0px; text-align: left; font-size: 22px; color:#38d; font-weight: normal; } #pubcontentregister #reg_leftcontent {width:320px; float:left; margin:10px; text-align:center;} #pubcontentregister #reg_leftcontent .logo {width:130px; height:130px; margin:10px 0px 20px 15px;} #pubcontentregister #reg_rightcontent { width: 340px; height: 145px; padding: 0px 0px 0px 0px; margin: 50px 10px; float:right;} #pubcontentregister #reg_rightcontent p { width: 340px; padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif;} #pubcontentregister #reg_rightcontent p label { width: 200px; height:19px; padding: 2px; text-align: left; margin-bottom: 10px; margin-left: 0.5em; float:left; font-size: 14px; } #pubcontentregister #reg_rightcontent #submit { width: 137px; height:27px; float:right; cursor: pointer; border: none; margin: 42px 20px 2px 0px; } #pubcontentregister #reg_rightcontent a.btn { width: 137px; height:27px; float:right; cursor: pointer; border: none; margin: 42px 20px 2px 40px; text-align:center; text-decoration:none; } #pubcontentregister #reg_rightcontent #alertMsg {width:100%; color:#C00; text-align:center; font-size:0.6em;} #pubcontentregister #username, #pubcontentregister #password, #pubcontentregister #email, #pubcontentregister #password2 { width:122px; height:19px; padding: 2px; color: #222222; font-size:14px; float:right; margin-bottom: 10px; background: url(../images/input_bg.png) no-repeat top left; border: 1px solid #d0d0d0; } /* -------------------- PROFILE -------------------*/ #profile {margin:0 auto; width:500px; height:300px; background:#e6e6e6; position:relative; top:30px; border:1px solid #ccc; } #profile h1 {font-size:18px; text-transform:uppercase; margin:5px 5px 0 5px; padding:5px 0 5px 5px; border:1px solid #161712; } .profile_label {display: block; margin:0 5px 0 5px; padding:10px 0 10px 0; border-top:1px solid #262626; border-bottom:1px solid #161712;} .profile_span {display: block; font-size:12px; float:left; width:100px; text-align:right; padding:5px 20px 0 0;} #profile .form_select {margin:5px; padding:5px; width:200px; border: 1px double #171717; } #profile .button {margin:0 0 10px 0; padding:4px 7px; background:#CCC; border:0px; position: relative; top:10px; left:362px; width:120px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033;} /* -------------------- MISC -------------------*/ .separador {clear:both; width:300px; height:16px; margin:10px auto;} .table_full {cellpadding: 0px; cellspacing: 0px; border:0px; width:100%;} .table_full_border {cellpadding: 0px; cellspacing: 0px; border:1px solid black; width:100%;} #navigation { clear:both; width:450px; margin:0 auto; line-height:1.5em; color:#444; background-color:#eee; } #navigation th { width:50px; text-decoration:none; text-align:center; } #navigation th { border-bottom: 1px solid #333; } #navigation .selected { color:#000; font-weight:bold; } #navigation td { width:50px; text-decoration:none; text-align:center; } #navigation a:link { color:#444; background-color:#eee; text-decoration:none; } #navigation a:active { color:#444; background-color:#eee; text-decoration:none; } #navigation a:visited { color:#444; background-color:#eee; text-decoration:none; } #navigation .selected a:link { color:#000; background-color:#eee; text-decoration:none; } #navigation .selected a:active { color:#000; background-color:#eee; text-decoration:none; } #navigation .selected a:visited { color:#000; background-color:#eee; text-decoration:none; } #navigation a:hover {color:#000; background-color:#ddd; text-decoration:none; } /* -------------------- CONTENT MENU ---------------------------*/ #content_menu {display: block; width:400px; height:60px; margin:0 auto 20px auto; padding:5px 0 0px 0; text-align:center;} #content_menu .form_select {padding:3px 3px; margin:2px 5px 0px 5px; width:100px; border: 1px double #171717; float:left;} #content_menu .form_color_select{padding:3px 3px; margin:2px 0 0 0; width:150px; border: 1px double #171717; float:left;} #content_menu #wst_selector_div {display:block; float:left; margin:20px 0 0 0;} #content_menu #carousel_link_div {display:block; float:left; margin:2px 0 0 0;} #content_menu #color_selector_div {display:block; float:left; margin:20px 0 0 0;} #content_menu #color_selector_div .ui-selectmenu {display: block; margin:2px 0 0 0; position:relative; height:14px; padding:5px 0px 5px 10px; text-decoration: none; overflow:hidden; font-size:1em;} .content_menu_button {display: block; width:100px; height:30px; margin:0 5px 0 5px; background-color:#e6e6e6; float:left;} /*----------------------------- User wordsets ------------------------------------*/ #userWordsetsTable { width:100%; border:solid 1px; border-collapse:collapse;} #userWordsetsTable td, #userWordsetsTable th { border:solid 1px; } #userWordsets h1 { text-align:center; padding:10px;} #uploadUserWordset h1 { text-align:center; padding:10px;} #uploadUserWordset .rightLink { float:right; text-align:right; padding:10px;} #uploadUserWordset pre { background-color:#ffffff; border:1px solid black;} .uploadFormatExample { width:300px; margin:10px auto; border-collapse:collapse;} .uploadFormatExample th, .uploadFormatExample td { border:2px double black; padding:10px; white-space:nowrap; } #uploadUserWordset .uploadSteps { margin-top: 40px; } #uploadUserWordset .uploadStepLabel { color:#ccc; font:bold italic 45px/1.5 Helvetica, Verdana, sans-serif; } #uploadUserWordset .uploadStepContent { padding:20px 0 10px 30px; } #form_upload fieldset legend {font-weight:bold;} #uploadWordsetFormTable th, #uploadWordsetFormTable td{ padding:4px;} #chartStats { height:300px; margin:40px 20px 20px 20px;} /* --------------------- PINYIN COLOR SELECTOR -----------------*/ #quiz_wordset #color_selector_div .ui-selectmenu { display: block; position:relative; height:14px; padding:5px 0px 5px 10px; text-decoration: none; overflow:hidden; font-size:1em;} #color_selector_div .ui-selectmenu { display: block; position:relative; height:30px; width:200px; padding:10px 10px 0 10px; text-decoration: none; overflow:hidden; font-size:1.5em;} #color_selector_div .ui-corner-all { border-radius: 0px 0px 0px 0px;} #color_selector_div select { width:200px;} .ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; visibility: hidden; overflow: auto; } .ui-selectmenu-open { visibility: visible; } #color_selector_div #color_selector-button { border: 1px solid #000000; } .ui-selectmenu-texto {color:#888888;} .ui-selectmenu-numero {color:#dddddd;} .warn_cookies{position:fixed;width:100%;left:0;bottom:0;background:url(../images/cookie_bg.png) repeat left top;} .warn_cookies p{max-width:900px;display:block;margin:0 auto;padding:5px;color:#fff;font-size:0.7em;} .warn_cookies .cookie_btn{padding:2px 4px;border:solid 1px #a1cffe; color:#fff;} /* --------------------- PINYIN COLORS -----------------*/ #pinyin_explain {width:400px; background-color:#ffffff; border:1px solid #000000; font-size:24px;} #pinyin_explain th {background-color:#dddddd; font-weight:bold; text-align:left;} .pinyin_colors_0_0 {color:#000000;} .pinyin_colors_0_1 {color:#000000;} .pinyin_colors_0_2 {color:#000000;} .pinyin_colors_0_3 {color:#000000;} .pinyin_colors_0_4 {color:#000000;} .pinyin_colors_0_5 {color:#000000;} .pinyin_colors_1_0 {color:#000000;} .pinyin_colors_1_1 {color:#ff0000;} .pinyin_colors_1_2 {color:#ffaa00;} .pinyin_colors_1_3 {color:#33cc00;} .pinyin_colors_1_4 {color:#0000ff;} .pinyin_colors_1_5 {color:#333333;} .pinyin_colors_2_0 {color:#000000;} .pinyin_colors_2_1 {color:#33cc00;} .pinyin_colors_2_2 {color:#0000ff;} .pinyin_colors_2_3 {color:#ff0000;} .pinyin_colors_2_4 {color:#000000;} .pinyin_colors_2_5 {color:#333333;} .pinyin_colors_3_0 {color:#000000;} .pinyin_colors_3_1 {color:#ff0000;} .pinyin_colors_3_2 {color:#33cc00;} .pinyin_colors_3_3 {color:#0000ff;} .pinyin_colors_3_4 {color:#9922bb;} .pinyin_colors_3_5 {color:#333333;} .pinyin_colors_4_0 {color:#000000;} .pinyin_colors_4_1 {color:#0000ff;} .pinyin_colors_4_2 {color:#33cc00;} .pinyin_colors_4_3 {color:#9922bb;} .pinyin_colors_4_4 {color:#ff0000;} .pinyin_colors_4_5 {color:#333333;} .character { display:block; float:left; font-size: 24px; line-height:1; text-align:center; } .tone_0_0 {color:#000000;} .tone_0_1 {color:#000000;} .tone_0_2 {color:#000000;} .tone_0_3 {color:#000000;} .tone_0_4 {color:#000000;} .tone_0_5 {color:#000000;} .tone_1_0 {color:#000000;} .tone_1_1 {color:#ff0000;} .tone_1_2 {color:#ffaa00;} .tone_1_3 {color:#33cc00;} .tone_1_4 {color:#0000ff;} .tone_1_5 {color:#333333;} .tone_2_0 {color:#000000;} .tone_2_1 {color:#33cc00;} .tone_2_2 {color:#0000ff;} .tone_2_3 {color:#ff0000;} .tone_2_4 {color:#000000;} .tone_2_5 {color:#333333;} .tone_3_0 {color:#000000;} .tone_3_1 {color:#ff0000;} .tone_3_2 {color:#33cc00;} .tone_3_3 {color:#0000ff;} .tone_3_4 {color:#9922bb;} .tone_3_5 {color:#333333;} .tone_4_0 {color:#000000;} .tone_4_1 {color:#0000ff;} .tone_4_2 {color:#33cc00;} .tone_4_3 {color:#9922bb;} .tone_4_4 {color:#ff0000;} .tone_4_5 {color:#333333;} .pinyin {font-size:10px;} #word_detail { position:relative; top:0px; left:0px; width:400px; height:160px; background:#eee; border:1px solid #0ce; margin: 0px 0px 0px 0px; } #word_detail_hanzi { text-align: left; margin:5px; } #word_detail_yisi { height:40px; text-align: left; margin:5px 5px 5px 15px; font-size: 16px; float:left;} .right_button {float:right; padding:3px; margin-right:5px; background-color:#e6e6e6; border:1px solid #ccc;} #word_detail_phrases{ list-style: none; padding:0; margin:0;} .word_detail_phrase { width:100%; padding: 0.2em 0.2em 0.2em 1em; font-size: 16px; line-height:1; padding-left: 1em; text-indent: -.7em; } .word_detail_phrase:before { content: "• "; color: blue; } #word_detail_siblings {background:transparent; width:400px;} #word_detail_siblings .ui-tabs-nav { background:transparent; border:0px;} #word_detail_siblings .character {font-size:20px;} #word_detail_siblings .sibling {font-size:20px; display:block; float:left; width:33%;} #word_detail_siblings_content { border:1px solid #0ce; background: #f1f1f1; border-radius: 0 .25em .25em .25em; height:16em; position:relative; } .hanzi{ font-family:'KaiTi', '楷体', STKaiti, '华文楷体', "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif; } .componente{ font-family:'KaiTi', '楷体', STKaiti, '华文楷体', "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", Arial, sans-serif; text-align: center; } .box_componente{ text-align:center; } .box_vertical{ position:relative; clear:both; } .box_horizontal{ position:relative; float:left; } .box_content{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; text-align:center; } .box_content_top{ margin:0px auto auto auto; text-align:center; } .box_content_down{ position:absolute; left:0; bottom:0; margin:auto; text-align:center; }