:root { --conspicuous: #FFEBCD; --conspicuous: #F4CF09; --light-cream: #FFF8DC; --very-light-cream: #F6E6E0; --very-light-cream: #FAEDCD; --very-very-light-cream: #FAF3EF; /* --- Very dark background, light foreground; reversed on focus/hover --- */ --action-btn: var(--very-dark); --action-btn-text: var(--light); /* --- Very dark --- */ --border: var(--very-dark); /* --- Bright (light) future, treat navigation as action buttons (reversed on focus/hover), medium past, conspicuous today --- */ --cal-event: var(--very-very-light-cream); --cal-event-border: var(--very-very-light-cream); --cal-event-text: var(--medium); --cal-future: var(--light); --cal-lesson: var(--medium-gold); --cal-lesson-text: var(--very-very-light-cream); --cal-navigation: var(--light); --cal-navigation-text: var(--dark); --cal-past: var(--medium); --cal-today: var(--conspicuous); /* --- Dark background, light foreground; reversed on focus/hover (action button colors) --- */ --dev-btn: var(--light); --dev-btn-text: var(--very-dark); /* --- Light cream background, dark foreground; reversed on focus/hover --- */ --display-btn: var(--very-light-cream); --display-btn-focus: var(--conspicuous); --display-btn-text: var(--very-dark); /* --- Medium --- */ --footer-text: var(--medium); /* --- Very light --- */ --form: var(--very-light); /* --- Very light background; dark foreground --- */ --form-data: var(--very-very-light); --form-data-text: var(--dark); /* --- White background (light on focus/hover); dark foreground --- */ --form-input: white; --form-input-focus: var(--light); --form-input-text: var(--dark); /* --- Light background; dark foreground --- */ --form-label: var(--light); --form-label-text: var(--dark); /* --- Medium background; dark foreground --- */ --form-required: var(--very-dark); --form-required-text: var(--light); /* --- Very dark --- */ --hdg-text: var(--very-dark); /* --- Very light cream even rows; light odd rows --- */ --list-rows-even: var(--very-light); --list-rows-odd: var(--light); /* --- Light cream background, dark foreground; reversed on focus/hover --- */ --logout-btn: var(--light-cream); --logout-btn-text: var(--dark); /* --- Very, very light background; dark foreground --- */ --page: var(--very-very-light); --page-text: var(--dark); /* --- Dark heading text with page background, reversed on focus/hover; medium menu item text with page background, reversed on focus/hover --- */ --menu-hdg: var(--page); --menu-hdg-text: var(--dark); --menu-item: var(--page); --menu-item-text: var(--semi-dark); --eos-example-text: brown; --urgent-btn: #E60000; --urgent-btn-text: white; } /* * Page Structure Styles * ----------------------------------------------------------------------------| */ * { box-sizing: border-box; } *:focus { outline: none !important; } html { font-size: 110%; min-height: 100%; /* make sure it is at least as tall as the viewport */ position: relative; } body { background-color: var(--page); font-family: 'Comic Sans MS', 'ヒラギノ角ゴ pro W3', '筑紫ゴシック', '游ゴシック', 'ms gothic', 'sans-serif'; height:100%; /* force the BODY element to match the height of the HTML element */ } #full_window { display: grid; grid-template-areas: "sidebar content" "footer footer"; grid-template-columns: min-content auto; grid-template-rows: auto min-content; height: 100vh; min-width: 100%; min-height: 100vh; } #sidebar { grid-area: sidebar; margin-top: 5em; padding-left: 2px; transition: all 0.3s; } #smallnavbtn { background-color: var(--dev-btn); background-size: 60px 60px; border-radius: 18px; bottom: 1em; color: var(--dev-btn-text); display: none; font-size: 1.6em; height: 64px; object-fit: contain; padding: 5px 10px; position: fixed; right: 1em; width: 64px; } #smallnavbtn:focus, #smallnavbtn:hover { background-color: var(--dev-btn-text); color: var(--dev-btn); } .page_header { display: inline-block; width: 100%; } .webmaster { margin-top: 5rem; } .page_mgmt { width: 0; } .navbar-toggler { position: fixed; top: 1em; right: 1em; z-index: 1; } .img_logo { border: none; height: auto; left: 1em; margin: 0.5rem 0.5rem 1rem 0.5rem; max-height: 6em; object-fit: contain; position: fixed; top: 1em; width: auto; z-index: 1; } .classroom_button { border-radius: 12px; color: var(--menu-hdg-text); display: block; margin-bottom: 0.1rem; padding: 0.1rem; text-align: right; white-space: nowrap; } .classroom_button:focus, .classroom_button:hover, .classroom_button:active { border: 1px solid var(--action-btn); text-decoration: none !important; } .classroom_list { display: grid; margin: 0.1rem; padding: 0.1rem; align-items: end; } .language_button { color: var(--menu-hdg-text); display: inline; padding: 0.3em; white-space: nowrap; width: min-content; } .language_button:focus, .language_button:hover, .language_button:active { border-radius: 12px; } .page_title { display: inline; margin: 0 auto 2rem auto; text-align: center; width: auto; } .page_body { display: block; grid-area: content; width: 98%; } #page_body_top { align-items: center; border-bottom: 1px solid; display: grid; grid-area: top; text-align: center; } #page_body_left { align-items: center; border-right: 1px solid; display: grid; grid-area: left; text-align: center; } #page_body_middle { align-items: center; display: grid; grid-area: middle; text-align: center; } #page_body_right { align-items: center; border-left: 1px solid; display: grid; grid-area: right; text-align: center; } #page_body_bottom { align-items: center; border-top: 1px solid; display: grid; grid-area: bottom; text-align: center; } /* The definitions up to this point are all new for the layout suggested by Kyle. */ #page_footer { display: block; grid-area: footer; text-align: center; } /* The following background-color and color properties must be set to be inherited to enable the hover, etc. changes */ .language_delineator { background-color: inherit; border-top: 1px dashed var(--border); color: inherit; display: block; } .point_delineator { border: 1px solid var(--hdg-text); display: block; margin: 0; width: fit-content; } .data_divider { background-color: var(--border); background-image: linear-gradient(to right, var(--cal-future), var(--border), var(--cal-future)); border: 0; height: 3px; } .exercise_divider { background-color: var(--border); background-image: linear-gradient(to right, var(--page), var(--page-text), var(--page)); border: 0; height: 3px; } .page_divider { border: 12px inset var(--menu-item-text); margin: 36px auto 24px auto; width: 65%; } .toc_module { border: 9px solid var(--hdg-text); margin-top: 2em; overflow: hidden; padding: 1em; } .toc_module_name { display: flex; } div.toc { max-width: 24em; min-width: 14rem; border: 2px solid var(--border); padding: 0 12px; margin-bottom: 12px; } /* * Sidebar * ----------------------------------------------------------------------------| */ .sidebar_header { margin-bottom: 3em; } a[data-toggle="collapse"] { position: relative; } .home_link { background: none; border: 1px solid transparent !important; border-radius: 12px; color: var(--menu-hdg-text); display: block; height: 2.7em; margin-left: auto; padding: 0.4em 0.6em 0.6em 0.6em; text-align: right; text-decoration: none !important; white-space: nowrap; width: min-content; } .home_link:focus, .home_link:hover, .home_link:active { border: 1px solid var(--action-btn) !important; text-decoration: none !important; } .leftside_menu::before, .leftside_menu::after { background-color: var(--page); background-image: linear-gradient(to right, var(--page), var(--page-text), var(--page)); border: 0; content: ""; display: block; height: 1px; margin: .5em 0 .5em 0; } .menu_hdg { background-color: var(--menu-hdg); border: 1px solid transparent; border-radius: 3px; color: var(--menu-hdg-text); display: block; font-size: 1rem; margin: .5rem .5em .5rem 1rem; text-align: left; white-space: nowrap; width: min-content; } .menu_hdg::after { align-content: right; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--menu-hdg-text); height: 0; width: 0; z-index: 1; } .menu_hdg:focus, .menu_hdg:hover { border: 1px solid var(--border) !important; } .menu_item { background-color: var(--menu-item); border: none; color: var(--menu-item-text); display: block; font-size: .8rem; margin: 0 6% 0 6%; padding: .3em .8em .3em 1em; text-align: right; text-decoration: none; white-space: nowrap; width: 88%; } .menu_item:focus, .menu_item:hover { background-color: var(--menu-item-text); color: var(--menu-item); text-decoration: none; } .lng_select { background-color: var(--menu-item); color: var(--menu-item-text); font-size: .8rem; margin: .5rem 0 0 auto; text-align: right; white-space: nowrap; width: min-content; } .lng a { color: var(--menu-item-text); display: block; font-size: .8rem; padding: 0 .5em 0 .5em; text-decoration: none; } .lng a:focus, .lng a:hover { background-color: var(--menu-item-text); color: var(--menu-item); text-decoration: none; } .login_form { font-size: 0.8rem; } .login_form::after { background-color: var(--border); background-image: linear-gradient(to right, var(--cal-future), var(--border), var(--cal-future)); border: 0; content: ""; display: block; height: 1px; margin: .5em 0 .5em 0; } .login_form::before { background-color: var(--border); background-image: linear-gradient(to right, var(--cal-future), var(--border), var(--cal-future)); border: 0; content: ""; display: block; height: 1px; margin: .5em 0 .5em 0; } .custom-navbar { position: fixed; top: 0; transition: all 0.3s; width: 100%; z-index: 1; } .navbar-brand { font-size: 2rem; } /* * Page Heading Styles * ----------------------------------------------------------------------------| */ h1 { color: var(--hdg-text); font-size: 2em; font-style: normal; font-weight: bold; line-height: 1.5em; margin: 0 0 2em 0; max-width: 100%; text-align: center; vertical-align: middle; width: 100%; } h1.public_pages_name { display: inline; display: block; width: auto; } .public_pages_name_sub { color: var(--hdg-text); } h1.intranet_pages_name { display: inline; display: block; width: auto; } .intranet_pages_name_sub { color: var(--hdg-text); font-style: italic; } .form_pages_name { color: var(--hdg-text); display: inline; display: block; font-weight: bold; } h2 { border-left: 3px solid var(--hdg-text); border-top: 3px solid var(--hdg-text); color: var(--hdg-text); font-size: 1.8rem; font-weight: bold; margin: 1em 0 1.2em 0; padding-left: 6px; text-align: left; } h2.calendar_title { border: 0; text-align: center; } h2.eos { color: var(--hdg-text); } h2.eos_toc { border: 0; display: inline-block; margin: 0 0 1.2em 0; } h3 { color: var(--hdg-text); font-size: 1.6rem; font-weight: bold; margin: 1em 0 1em 0; text-align: left; } h3.eos { color: var(--hdg-text); } h3.eos_toc { display: inline-block; margin: 0.8em 0 0 0; } h4 { color: var(--hdg-text); font-size: 1.4rem; font-weight: bold; text-align: left; margin: 0.8em 0 0 0; } h4.eos { color: var(--hdg-text); } h5 { color: var(--hdg-text); font-size: 1.2rem; font-weight: bold; margin: 0.8em 0 0 0; text-align: left; } h5.calc { text-align: center; } h5.eos { color: var(--hdg-text); } h6 { color: var(--hdg-text); font-size: 1rem; font-style: italic; font-weight: normal; margin: 0.8em 0 0 0; text-align: left; } .eos_checkenglish::before { content: "Check the English"; display: block; } .eos_checkenglish::after { content: "英語を添削しよう"; display: block; } .eos_express_self::before { content: "Express Yourself"; display: block; } .eos_express_self::after { content: "自己表現しよう"; display: block; } .eos_fill_in_blanks::before { content: "Fill in the Blanks"; display: block; } .eos_fill_in_blanks::after { content: "穴を埋めよう"; display: block; } .eos_ivp::before { content: "Important Vocabulary & Phrases"; display: block; } .eos_ivp::after { content: "重要な単語と表現"; display: block; } .eos_practice::before { content: "Practice Time!"; display: block; } .eos_practice::after { content: "さて、練習しよう!"; display: block; } .eos_qanda::before { content: "Questions & Answers"; display: block; } .eos_qanda::after { content: "質疑応答"; display: block; } .eos_requirements::before { content: "Requirements"; display: block; } .eos_requirements::after { content: "必須条件"; display: block; } .eos_translate::before { content: "Translating"; display: block; } .eos_translate::after { content: "翻訳しよう"; display: block; } .eos_usedaily { color: var(--hdg-text); } .eos_usedaily::before { content: "Using English Daily"; display: block; } .eos_usedaily::after { content: "毎日使おう"; display: block; } .eos_useit::before { display: block; content: "Using What You've Learned"; } .eos_useit::after { display: block; content: "学んだ事を使おう"; } .eos_whatthink::before { content: "What Do You Think?"; display: block; } .eos_whatthink::after { content: "どう思う?"; display: block; } .eos_whatyou::before { content: "What about You?"; display: block; } .eos_whatyou::after { content: "あなたはどう?"; display: block; } .eos_writesentence::before { content: "Write Sentences"; display: block; } .eos_writesentence::after { content: "センテンスを書こう"; display: block; } h6.eos { color: var(--hdg-text); } /* * Flow Heading Styles * ----------------------------------------------------------------------------| */ .eos_contents_hdg::before { color: var(--hdg-text); content: "Contents"; display: block; font-size: 1.4rem; text-indent: 0; } .eos_contents_hdg::after { color: var(--hdg-text); content: "目次"; display: block; font-size: 1.4rem; text-indent: 0; } .eos_example_hdg { color: var(--hdg-text); font-size: 1.2em; font-weight: bold; text-indent: 0; } .eos_example_hdg::before { content: "Example "; } .eos_exercise_hdg { color: var(--hdg-text); font-size: 1.2em; font-weight: bold; text-indent: 0; } .eos_flow_hdg { color: var(--hdg-text); font-size: 1.2em; font-weight: bold; text-indent: 0; } .form_hdg { border-left: 3px solid var(--hdg-text); border-radius: 5px; border-top: 3px solid var(--hdg-text); color: var(--hdg-text); font-size: 1.4rem; padding-left: 6px; text-indent: 0; } /* * Top Page Styles * ----------------------------------------------------------------------------| */ /* .top_page { color: var(--hdg-text); font-weight: bold; text-align: center; border: 1px solid var(--action-btn); } */ .top_page_frame { background-color: bisque; border: 6px; border-radius: 3%; border-style: double; color: var(--action-btn); float: left; font-size: 120%; margin: 3px; padding: .3em .6em; text-align: center; width: 48%; } /* .top_page_frame:focus, .top_page_frame:hover { background-color: var(--action-btn); color: var(--action-btn); } */ .top_page_btn { background-color: bisque; border: 6px; border-radius: 12%; border-style: double; color: var(--action-btn); display: inline-block; float: left; font-family: inherit; font-size: 120%; margin: 3px 3px 3px 3px; padding-top: 2px; padding-bottom: 2px; padding-left: 6px; padding-right: 6px; text-align: center; width: 48%; white-space: normal; } .top_page_btn:focus, .top_page_btn:hover { background-color: #333300; color: #FFCC00; } /* * Control Panel Styles * ----------------------------------------------------------------------------| */ .control_panel { color: var(--hdg-text); font-weight: bold; text-align: center; border: 1px solid var(--action-btn); } .control_panel_btn { background-color: var(--action-btn); border: 6px; border-style: double; color: var(--action-btn-text); font-size: 120%; padding: .3em .6em; text-align: center; } .control_panel_btn:focus, .control_panel_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } /* * Page Body Content Styles * ----------------------------------------------------------------------------| */ blockquote { margin: 0 6em 0 6em; } p { color: var(--page-text); } .bold { font-weight: bold; } p.hanging { font-size: 1rem; margin: 1em 0 1em 6em; text-indent: -6em; vertical-align: middle; } p.indent { font-size: 1rem; margin: 1em 0 1em 0; text-indent: 2em; vertical-align: middle; } .eos_en_note::before { color: red; content: "Note: "; text-indent: -6em; } .eos_ja_note::before { color: red; content: "注:"; text-indent: -6em; } .eos_onlinelesson_skill { font-size: 0.7rem; margin-bottom: 1px; margin-top: 1px; } .left { text-align: left; } .line_through { text-decoration: line-through; } .loss { color: red; } a.toc { color: inherit; display: inline-block; text-decoration: underline; } a { border: 1px solid var(--page); color: var(--hdg-text); text-decoration: underline; transition: all 0.3s; } a:focus, a:hover { border: 1px solid var(--border); color: var(--action-btn); text-decoration: none; } figure { max-width: 100%; text-align: center; } figcaption { color: grey; font-size: 0.8rem; } img { border: none; max-width: 100%; } img.bottom { vertical-align: bottom; } img.middle { vertical-align: middle; } img.reverse { vertical-align: middle; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: \"FlipH\"; } img.top { vertical-align: top; } img.eos_toc { height: 6em; object-fit: contain; padding: 12px; width: auto; } .transparent, .transparent:focus, .transparent:hover { background: none !important; background-color: transparent !important; border: none !important; color: transparent !important; } video { min-width: 40%; margin: 3px; max-width: 100%; margin-top: 0; object-position: center top; } .dual_video { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } .video_title { color: var(--menu-item-text); font-size: 0.8rem; font-weight: bold; margin-top: 3px; margin-bottom: 0; text-align: center; text-indent: 0; } .eos_toc_icon { align-items: center; background-clip: border-box; background-color: var(--display-btn); border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; color: var(--display-btn-text); display: -ms-flexbox; display: flex; flex: 0 0 30%; flex-direction: column; justify-content: center; height: inherit; margin: 0 12px 12px 12px; max-width: 30%; min-width: 0; -ms-flex-direction: column; padding-left: 15px; padding-right: 15px; position: relative; text-align: center; text-decoration: none; vertical-align: middle; } a.eos_toc_icon:focus, a.eos_toc_icon:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); text-decoration: none; } .nowrap { display: inline-block; white-space: nowrap; } .eos_exercise { display: none; grid-template-columns: 100%; margin-left: 2.4em; overflow: hidden; } .eos_example_label::before { content: "Example: "; } .eos_examplecenter { color: var(--menu-item-text); font-size: 1rem; font-weight: bold; margin: 12px 0 12px 0; text-align: center; text-indent: 0; } p.eos_en { display: block; margin: 0.5em 0 0.5em 0; width: auto; } p.eos_ja { display: block; margin: 0.5em 0 1em 0; width: auto; } .eos_go_deeper { display: inline-block; } .eos_deeper_btn { background-color: var(--display-btn); color: var(--display-btn-text); display: inline-block; font-size: 0.8rem; } .eos_deeper_btn:focus, .eos_deeper_btn:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } .eos_deeper { background-color: var(--form); border: 3px inset var(--border); display: none; margin-left: 2.4em; margin-top: 0.6em; padding: .8em; } p.eos_example { color: var(--eos-example-text); margin: 0.5em 3em 0.5em 3em; text-indent: 0; } p.eos_or { color: inherit; margin: 0.5em 0 0.5em 0; text-indent: 0; } p.eos_or::before { color: inherit; content: 'OR'; display: inline-block; } p.eos_examplebad { color: var(--eos-example-text); margin: 0.5em 0 0.5em 1em; text-decoration: line-through; text-indent: 0; } p.eos_examplebad::before { color: red; content: 'WRONG! ➾ '; display: inline-block; } .border { border: 1px solid var(--border) !important; margin: 3px; } .block { display: block !important; overflow: hidden; } .inline { display: inline !important; } .inline_block { display: inline-block !important; } .page_intro { color: var(--page-text); margin: 1em 6em 1em 3em; white-space: pre-wrap; } /* * Page List Styles * ----------------------------------------------------------------------------| */ .list_hdg { border-left: 3px solid var(--hdg-text); border-radius: 5px; border-top: 3px solid var(--hdg-text); color: var(--hdg-text); font-size: 1.4rem; margin-left: -30px; overflow: hidden; padding-left: 6px; text-indent: 0; } ul { color: var(--page-text); display: block; list-style-type: "- "; list-style-position: outside; } ul.eos { color: var(--page-text); display: block; list-style-type: "➾ "; list-style-position: outside; } li.eos_example { color: var(--eos-example-text); margin: 0 0 0 2.4em; } /* The display: inline-block setting is used to achieve the language delineator at the appropriate width */ li.eos_toc { background-color: var(--display-btn); color: var(--display-btn-text); display: inline-block; font-size: 0.8rem; margin-top: 10px; } li.eos_toc::before { color: inherit; content: '➾'; font-family: inherit; margin-left: -3em; position: absolute; } li.eos_toc > a:focus, li.eos_toc > a:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } p.eos_toc { background-color: var(--display-btn); border: 1px solid var(--border); color: var(--display-btn-text); display: inline-block; font-size: 0.8rem; height: min-content; margin: 10px; text-align: center; } p.eos_toc:focus, p.eos_toc:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } p.eos_toc > a { background-color: inherit; color: inherit; text-decoration: none; } p.eos_toc > a:focus, p.eos_toc > a:hover { background-color: inherit; color: inherit; text-decoration: none; } .list_item_title { color: var(--menu-item-text); font-weight: bold; font-style: italic; } .list_text { margin-left: 3em; } /* * Calendar Styles * ----------------------------------------------------------------------------| */ .cal_date { background-color: inherit; color: var(--display-btn-text); margin-bottom: 12px; text-align: left; } .cal_date_btn { background-color: var(--action-btn); border-radius: 50%; color: var(--action-btn-text); padding: 0.2em; text-align: center; vertical-align: top; width: 2.4em; } .cal_date_btn:focus, .cal_date_btn:hover { background-color: var(--action-btn-text); color: var(--action-btn); } .cal_date_navigation { background-color: var(--display-btn); color: var(--display-btn-text); margin-bottom: 12px; text-align: center; } .cal_day_of_week { background-color: var(--display-btn); border: 1px solid var(--border); color: var(--display-btn-text); font-size: 1rem; text-align: center; vertical-align: middle; white-space: nowrap; } .cal_full { font-size: 0.8rem; vertical-align: top; width: 100%; } .cal_future { background-color: var(--cal-future); color: var(--hdg-text); vertical-align: top; width: 15%; } .cal_navigation { margin-bottom: 12px; text-align: center; } .cal_navigation_btn { background-color: var(--cal-navigation); color: var(--cal-navigation-text); text-align: center; } .cal_navigation_btn:focus, .cal_navigation_btn:hover { background-color: var(--cal-navigation-text); color: var(--cal-navigation); } .cal_navigation_currentdisplay_btn { background-color: var(--cal-navigation-text); color: var(--cal-navigation); text-align: center; } .cal_past { background-color: var(--cal-past); color: var(--hdg-text); vertical-align: top; width: 15%; } .cal_sunday { background-color: var(--form); vertical-align: top; max-width: 10%; } .cal_today { background-color: var(--cal-today); border: 6px solid var(--medium-gold); color: var(--hdg-text); vertical-align: top; width: 15%; } .cal_weekend { border: 1px solid var(--border); padding-bottom: 2em; width: 15%; } .cal_weekday { border: 1px solid var(--border); padding-bottom: 2em; min-width: 16%; } /* NEED TO DECIDE AND FIX COLORS FROM HERE */ .attendance { background: #FF9933; border: 2px solid #990000; color: #990000; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; } .attendance_credit { background: #FF9933; border: 2px solid #990000; color: #990000; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; } .attendance_debit { background: #FF9933; border: 2px solid #990000; color: #990000; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; } .admin { background: #FFFF99; border: 1px solid #FFFF66; font-weight: normal; font-size: 12px; padding: 2; margin-bottom: 12; } .cal_event { background-color: var(--cal-event); border: 2px solid var(--cal-event-border); color: var(--cal-event-text); margin: 2px; text-align: center; } .cal_event_time { border: 1.2px solid var(--cal-event-border); color: inherit; margin: 0; text-align: center; } .expenses { background-color: #663300; border: 0; color: #FF9900; font-family: inherit; font-size: 1em; text-align: right; } .event_detail { background-color: var(--cal-event); border: 3px solid var(--border); color: var(--cal-event-text); font-size: 1em; font-weight: normal; margin-bottom: 12; padding: 2; } .event_detail1 { background-color: #FFCC66; border: none; color: #663300; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; } .event_detail2 { background-color: #FF6600; border-width: 2px solid #990000; color: #663300; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; } .event_detail3 { background-color: #FF9933; border: none; color: #663300; font-size: 12px; font-weight: normal; padding: 2; margin-bottom: 12; } .lesson { background-color: var(--medium-gold); border: none; color: #663300; font-size: 12px; font-weight: normal; margin: 0; padding: 0; width: 95%; } .no_students { border: 2px solid #FFFF66; color: #663300; font-family: inherit; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; text-align: center; } .non_event { border: 1px solid #FFFF66; background: #FFFF66; font-size: 12px; font-weight: normal; margin-bottom: 12; padding: 2; text-align: center; } .possible_event { border: 1px solid Orange; background: Yellow; color: Brown; font-size: 12px; font-weight: bold; margin-bottom: 12; padding: 2; text-align: center; } .pay_only_event { background-color: #880000; color: #FFFFFF; font-size: 12px; font-weight: normal; } .time_off { background-color: #FBE0B3; border-collapse: collapse; border: 3px solid #880000; color: #600033; font-size: 12px; vertical-align: top; } /* NEED TO DECIDE AND FIX COLORS TO HERE */ .cal_btn { background-color: var(--action-btn); border-radius: 6px; color: var(--action-btn-text); text-align: center; } .cal_btn:focus, .cal_btn:hover { background-color: var(--action-btn-text); color: var(--action-btn); } .heading { color: var(--hdg-text); font-size: inherit; padding-right: 12; white-space: nowrap; vertical-align: middle; } .expenses_btn { background-color: var(--action-btn); color: var(--action-btn-text); text-align: center; } .expenses_btn:focus, .expenses_btn:hover { background-color: var(--action-btn-text); color: var(--action-btn); } .list_btn { background-color: var(--action-btn); border-radius: 24%; color: var(--action-btn-text); text-align: center; } .list_btn:focus, .list_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .new_btn { background-color: var(--action-btn); color: var(--action-btn-text); float: right; margin-right: 1em; text-align: center; } .new_btn:focus, .new_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .new_btn_small { background-color: var(--action-btn); color: var(--action-btn-text); font-size: .6rem; text-align: center; } .new_btn_small:focus, .new_btn_small:hover { background-color: var(--action-btn-text); color: var(--action-btn); } .position_btn { background-color: var(--action-btn); border-radius: 50%; color: var(--action-btn-text); text-align: center; } .position_btn:focus, .position_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .urgent_btn { background-color: var(--urgent-btn); color: var(--urgent-btn-text); text-align: center; } .urgent_btn:focus, .urgent_btn:hover { background-color: var(--urgent-btn-text); color: var(--urgent-btn); } /* * Table Styles * ----------------------------------------------------------------------------| */ table.eos { border: 2px solid var(--border); margin-bottom: 12px; padding: 0 12px; } table.eos_center { border: 2px solid var(--border); margin: 0 auto 12px auto; padding: 0 12px; } th.eos { border: 2px solid var(--border); color: var(--hdg-text); font-size: 1rem; padding: 0 12px; text-align: center; } td.eos { border: 2px solid var(--border); color: var(--page-text); font-size: 1rem; padding: 0 12px; white-space: normal; } td.eos_center { border: 2px solid var(--border); padding: 0 12px; text-align: center; } .eos_dialog { display: none; grid-template-columns: 100%; } /* * Music Display Styles * ----------------------------------------------------------------------------| */ .eos_bridge { color: var(--hdg-text); font-size: 1rem; margin: 12px 0 0 0; text-align: left; } .eos_bridge::before { content: "Bridge"; } .eos_chorus { color: var(--hdg-text); font-size: 1rem; font-weight: normal; margin: 12px 0 0 0; text-align: left; } .eos_chorus::before { content: "Chorus"; font-size: 1rem; } .eos_composer { color: var(--hdg-text); font-size: 1rem; font-weight: normal; margin: 12px 0 0 0; text-align: left; } .eos_composer::before { content: "by "; font-size: 1rem; } .eos_lyrics { color: var(--page-text); display: block; grid-template-columns: 100%; margin-left: 1em; } .eos_verse { color: var(--hdg-text); font-size: 1rem; font-weight: normal; margin: 12px 0 0 0; text-align: left; } .eos_verse::after { content: " Verse"; font-size: 1rem; } /* * Form & Data Display Styles * ----------------------------------------------------------------------------| */ .align_center { margin-left: auto; margin-right: auto; text-align: center; text-indent: 0; vertical-align: middle; } .align_right { background-color: inherit; margin-left: auto; text-align: right; } .col_25 { float: left; margin: 0 2px 0 2px; vertical-align: middle; width: 24%; } .col_30 { float: left; margin: 0 2px 0 2px; vertical-align: middle; width: 32%; } .col_50 { background-color: inherit; float: left; vertical-align: middle; width: 48%; } .col_75 { float: left; margin: 0 2px 0 2px; vertical-align: middle; width: 72%; } .col_100 { float: left; margin: 0 2px 0 2px; vertical-align: middle; width: 96%; } .form_data { background-color: inherit; border: 1px solid var(--border); color: inherit; margin-right: 3px; text-align: left; vertical-align: top; white-space: pre-wrap; width: 100%; } .form_display { background-color: var(--form); border-radius: 5px; margin-right: 12px; overflow: hidden; padding: 4px 9px 4px 32px; } .form_label { background-color: var(--form-label); border-radius: 4px; color: var(--form-label-text); font-size: 0.8rem; padding-right: 1em; text-align: right; vertical-align: middle; width: -moz-available; } .form_label_optional { background-color: var(--form-label); border-radius: 4px; color: var(--form-label-text); font-size: 0.8rem; padding-right: 1em; text-align: right; vertical-align: middle; width: -moz-available; } .form_label_required { background-color: var(--form-required) !important; border-radius: 4px !important; color: var(--form-required-text) !important; font-size: 0.8rem !important; padding-right: 1em !important; text-align: right !important; vertical-align: middle !important; width: -moz-available; } .form_note { background-color: var(--form-data) !important; border: 1px solid var(--border); color: var(--form-data-text); font-size: 0.8rem; margin-right: 3px; padding: 0.4em 0 0.3em 0.2em; text-align: left; vertical-align: middle; white-space: pre-wrap; width: 100%; } .form_note::before { background-color: var(--page); background-image: linear-gradient(to right, var(--page), var(--page-text), var(--page)); border: 0; content: ""; display: block; height: 1.8px; margin: .5em 0 .5em 0; } .form_row { display: flex; flex-wrap: wrap; } .hdg_row { font-weight: bold; margin: 0 0 0.8em -24px; overflow: hidden; } .list_display { border-bottom: 3px solid; border-image: linear-gradient(to right, var(--page), var(--border), var(--border), var(--page)) 1; border-radius: 5px; margin: 6px 12px 6px 0; padding: 0 4px 0 32px; } .list_display:nth-child(odd) { background-color: var(--list-rows-odd); } .list_display:nth-child(even) { background-color: var(--list-rows-even); } .list_row { display: block; overflow: hidden; } label { display: inline-block; height: auto; padding: .42em; vertical-align: middle; } .required { background-color: var(--form-required) !important; border-radius: 4px !important; color: var(--form-required-text) !important; font-size: 0.8rem !important; padding-right: 1em !important; text-align: right !important; vertical-align: middle !important; width: -moz-available; } :optional { border: 1.5px !important; border-style: solid !important; border-color: var(--form-label) !important; border-radius: 4px !important; } :required { border: 1.5px !important; border-style: solid !important; border-color: var(--form-required) !important; border-radius: 4px !important; } select { background-color: var(--form-input); } select:focus, select:hover { background-color: var(--light-cream); } input[type=password], input[type=select], input[type=text] { background-color: var(--form-input); height: auto; padding: 2px 2px 2px 4px; vertical-align: middle; } input[type=radio] { background-color: var(--form-input); height: auto; padding: 2px 2px 2px 4px; vertical-align: middle; } input[type=radio]:focus, input[type=radio]:hover { background-color: var(--light-cream); } .readonly { opacity: 0.5; } input[type=password]:focus, input[type=password]:hover, input[type=select]:focus, input[type=select]:hover, input[type=text]:focus, input[type=text]:hover, textarea:focus, textarea:hover { background-color: var(--light-cream); } input[type=text].date { width: 8em; } input[type=text].fifteen_char { width: 15em; } input[type=text].numeral { width: auto; } input[type=text].one_char { width: 1.8em; } input[type=text].search { width: 24em; } input.six_char { width: 6rem; } input.three_char { width: 3em; } .label_container { align-items: center; border: 1.5px solid var(--form-required); border-radius: 4px; display: inline-flex; flex-wrap: wrap; margin-bottom: 6px; } .label_container input, .label_container label { margin: 2px 2px; padding: 2px 2px 2px 2px; } .label_container input { width: 20px; } .label_container label { width: calc(100% - 30px); } .label_left { flex-direction: row-reverse; } .no_label { margin-left: 25%; } .radio_container { align-items: center; background-color: var(--form-text); border: 1.5px solid var(--form-required); border-radius: 36%; display: inline-flex; flex-direction: row-reverse; flex-wrap: wrap; height: 24px; margin-bottom: 6px; width: 24px; } .radio_container input, .radio_container label { margin: 0; padding: 2px 2px 2px 2px; } .radio_container input { width: 20px; } .radio_container label { width: calc(100% - 20px); } select[readonly]{ background-color: inherit; cursor: no-drop; } select[readonly] option{ display: none; } textarea { border-radius: 4px; font-size: 1rem; height: 12em; margin: 3px 0 3px 0; resize: both; width: 100%; } textarea.fill_in_blank { border: 1px solid var(--form-required); border-radius: 4px; font-size: 1rem; height: 1.6em; resize: both; width: 6em; } textarea.long_answer { height: 1.6em; } textarea.page_content { height: 30em; } textarea.short_answer { height: 1.6em; max-width: 36em; } textarea.work_report { height: 9em; } .menu_heading_list:before { content: '➾ '; vertical-align: text-bottom; } .mission { font-size: 20px; font-weight: bold; letter-spacing: 1px; text-align: left; } .policy_detail { color: var(--page-text); font-family: inherit; font-size: 14px; letter-spacing: 1px; text-align: left; } .policy_type { color: var(--hdg-text); font-family: inherit; font-size: 16px; height: 36px; letter-spacing: 1px; text-align: left; } .principle { display: inline; font-family: inherit; font-size: 18px; letter-spacing: 1px; text-align: left; } .principle_bullet { display: inline; font-family: inherit; font-size: 14px; letter-spacing: 1px; text-align: left; } .vision { display: inline; font-family: inherit; font-size: 16px; letter-spacing: 1px; text-align: left; } .vision_bullet { display: inline; font-family: inherit; font-size: 12px; letter-spacing: 1px; text-align: left; } .associatecomments_detail_item { color: var(--page-text); font-family: inherit; font-size: 16px; height: 36px; letter-spacing: 1px; text-align: left; } .points_list_hdg { display: block; font-style: italic; font-weight: bold; } .pre_wrap { white-space: pre-wrap; } .ptc { background-color: var(--page); color: var(--page-text); font-family: inherit; font-size: 16px; height: 2em; letter-spacing: 1px; text-align: left; } .pt { color: var(--page-text); font-family: inherit; font-size: 16px; height: 36px; letter-spacing: 1px; text-align: left; } .pt_date { color: var(--page-text); font-family: inherit; font-size: 16px; height: 36px; letter-spacing: 1px; overflow: hidden; text-align: left; } .qandadata_btn { background-color: var(--display-btn); border: 1.5px solid var(--border); border-radius: 12px; color: var(--display-btn-text); display: inline; font-size: 18px; height: auto; margin: 0 6px 0 6px; overflow: hidden; padding: 6px; text-align: center; vertical-align: middle; white-space: pre-wrap; width: auto; } .qandadata_btn:focus, .qandadata_btn:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } .eos_rmdform_detail_item { color: var(--form-data-text); font-size: 0.8rem; list-style: '➾ '; list-style-position: outside; letter-spacing: 1px; margin-right: 3px; text-align: left; vertical-align: middle; white-space: pre-wrap; } .qandadata_detail_div { display: none; } .qandadata_detail_item, .qandadataform_detail_item { color: var(--form-data-text); font-size: 0.8rem; list-style: '➾ '; list-style-position: outside; letter-spacing: 1px; margin-right: 3px; text-align: left; vertical-align: middle; white-space: pre-wrap; } .eos_rmd_detail_div { display: none; } .eos_rmd_detail_item { color: var(--page-text); font-size: 14px; letter-spacing: 1px; list-style: none; margin-left: 72px; text-align: left; white-space: pre-wrap; } table.blogs_detail { color: var(--page-text); font-family: inherit; font-size: 12px; margin: 0 72px 0px 36px; text-align: left; } td.blogs_detail { color: var(--page-text); font-family: inherit; font-size: 16px; letter-spacing: 1.5px; line-height: 36px; text-align: left; } input[readonly] { background-color: inherit; border: none; height: auto; white-space: pre-wrap; } textarea[readonly] { background-color: inherit; border: none; display: inline; padding: 8px 2px 2px 0; resize: none; vertical-align: middle; white-space: pre-wrap; width: 90%; } /* * Button Styles * ----------------------------------------------------------------------------| */ button { background-color: transparent; white-space: nowrap; } .border_btn { border: 1px solid var(--border); border-radius: 3px; } .close_btn { background-color: var(--action-btn); border: 1px solid var(--border); border-radius: 18px; color: var(--action-btn-text); font-size: 0.9em; padding: 3px 9px 3px 9px; position: fixed; right: 8px; text-align: center; text-decoration: none; top: 5px; z-index: 1; } .close_btn:focus, .close_btn:hover { background-color: var(--light-cream); color: var(--action-btn); text-decoration: none; } .dev_btn { background-color: var(--dev-btn); border-color: var(--action-btn); border-radius: 24%; color: var(--dev-btn-text); font-size: 0.8em; padding: 0.5em 0.5em 0.5em 0.5em; position: fixed; top: .5rem; white-space: nowrap; z-index: 1; } .dev_btn:focus, .dev_btn:hover { background-color: var(--light-cream); color: var(--dev-btn-text); outline: none !important; } .dev_btn:active { outline: none !important; } .dev_send_btn { background-color: var(--action-btn); border-radius: 12px; color: var(--action-btn-text); font-size: 0.8rem; padding: 0 2em 0 2em; } .dev_send_btn:focus, .dev_send_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .edit_language_btn { background-color: var(--action-btn); border: 1px solid var(--border); border-radius: 12px; color: var(--action-btn-text); display: inline-block; font-size: 0.7rem; height: auto; margin: 0 6px 0 6px; overflow: hidden; text-align: center; vertical-align: middle; white-space: pre-wrap; width: auto; } .edit_language_btn:focus, .edit_language_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .edit_page_btn { left: 19.5rem; } .edit_props_btn { left: 10rem; } .eos_practice_btn { background-color: var(--display-btn); color: var(--display-btn-text); display: inline-block; font-size: 0.8rem; } .eos_practice_btn:focus, .eos_practice_btn:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } .eos_practice_intro::before { content: "➾ "; display: inline-block; font-size: 2.4em; left: 0; } .eos_rmd_btn { background-color: var(--action-btn); border: 1px solid var(--border); border-radius: 12px; color: var(--action-btn-text); display: inline-block; font-size: 18px; height: auto; padding: 6px; text-align: center; white-space: normal; width: auto; } .eos_rmd_btn:focus, .eos_rmd_btn:hover { background-color: var(--light-cream); color: var(--action-btn-text); } .eos_send_btn { background-color: var(--action-btn); border-radius: 12px; color: var(--action-btn-text); font-size: 0.8rem; padding: 0 2em 0 2em; } .eos_send_btn:focus, .eos_send_btn:hover { background-color: var(--light-cream); color: var(--action-btn-text); } .eos_toc_btn { background-color: var(--display-btn); color: var(--display-btn-text); display: block; font-size: 0.8rem; margin-top: 0; } .eos_toc_btn:focus, .eos_toc_btn:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } .eos_toc_edit { background-color: var(--list-rows-odd); border: 1px solid var(--border); color: var(--page-text); font-size: 0.6rem; margin-top: 6px; text-align: center; white-space: nowrap; width: min-content; } .eos_toc_edit:focus, .eos_toc_edit:hover { background-color: var(--list-rows-even); } .form_btn { align-self: end; background-color: var(--action-btn); border-radius: 12px; color: var(--action-btn-text); font-size: 0.8rem; padding: 0 2em 0 2em; } .form_btn:focus, .form_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .history_btn { background-color: var(--display-btn); color: var(--display-btn-text); font-size: 0.8rem; margin-top: 0; } .history_btn:focus, .history_btn:hover { background-color: var(--light-cream); color: var(--display-btn-text); } .home_btn { white-space: nowrap; } input[type=submit] { background-color: var(--action-btn); border: none; border-radius: 4px; color: var(--action-btn-text); cursor: pointer; padding: 2px 20px; } .keyword_btn { background-color: var(--action-btn); border: 1px solid var(--border); border-radius: 12px; color: var(--action-btn-text); display: inline-block; font-size: 10px; height: auto; margin: 0 6px 0 6px; overflow: hidden; text-align: center; vertical-align: middle; white-space: pre-wrap; width: auto; } .keyword_btn:focus, .keyword_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .login_btn { background-color: var(--action-btn); color: var(--action-btn-text); } .login_btn:focus, .login_btn:hover { background-color: var(--light-cream); color: var(--action-btn); } .logout_btn { background-color: var(--logout-btn); border-radius: 50%; color: var(--logout-btn-text); font-size: 1em; height: 7em; padding: 0 0.5em 0 0.5em; position: fixed; right: 2rem; top: 0.5rem; width: 7em; z-index: 1; } .logout_btn:focus, .logout_btn:hover { background-color: var(--logout-btn-text); color: var(--logout-btn); } .mode_switch_btn { left: 30rem; } .not_published_warning { color: var(--urgent-btn); font-size: 3em; position: fixed; right: 3em; top: 0.5rem; z-index: 1; } .osd_btn { background-color: var(--display-btn); border: 1px solid var(--border); border-radius: 12px; color: var(--display-btn-text); display: inline-block; font-size: 1.4em; height: 100px; overflow: hidden; text-align: center; white-space: normal; width: 120px; } .osd_btn:focus, .osd_btn:hover { background-color: var(--display-btn-focus); color: var(--display-btn-text); } .search_btn { background-color: var(--action-btn); border-radius: 12px; border-width: 1.5px 1.5px 1.5px 1.5px; color: var(--action-btn-text); cursor: pointer; display: inline-block; -moz-transition: all 0.3s; outline: none; overflow: hidden; padding: 0 1.8em 0 1.8em; position: relative; transition: all 0.3s; -webkit-transition: all 0.3s; } /* This is for the font awesome icon * without this there's only a square * * the button has a class .fa-arrow-right * feel free to change the class to any Font Awesome icon you like * * You can find all the available icons here: * https://fontawesome.com/icons?d=gallery&m=free */ .search_btn:before { position: absolute; font-family: 'Font Awesome 5 Free'; font-weight: 900; height: 100%; left: 60%; line-height: 1.6; opacity: 0; transition: all 0.3s; top: 0; -webkit-font-smoothing: antialiased; -webkit-transition: all 0.3s; } .search_btn:focus, .search_btn:hover, .search_btn:active { background-color: var(--action-btn-text); color: var(--action-btn); } .search_btn:focus:before, .search_btn:hover:before { left: 3.6em; opacity: 1; } /* this makes the icon match the button-text when clicked */ .search_btn:active:before { color: var(--action-btn); } /* * English Online Study * ----------------------------------------------------------------------------| */ .who_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/WhoBlock.png'); height: 2.4rem; } .what_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/WhatBlock.png'); height: 2.4rem; } .where_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/WhereBlock.png'); height: 2.4rem; } .when_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/WhenBlock.png'); height: 2.4rem; } .why_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/WhyBlock.png'); height: 2.4rem; } .how_block_graphic { content: url('https://www.fona-site.com/img/OnlineStudyGraphics/HowBlock.png'); height: 2.4rem; } /* The following block colors must always match the block graphics above. */ .who { color: #000080; } .what { color: #4169E1; } .where { color: #008000; } .when { color: #20B2AA; } .why { color: #FF0000; } .how { color: #E88001; } .block_en::before { content: '['; } .block_en::after { content: ']'; } .block_ja::before { content: '【'; } .block_ja::after { content: '】'; } /* * Page Footer Styles * ----------------------------------------------------------------------------| */ .eos_footer { display: block; font-size: 1.2rem; margin: 2em auto 2em auto; } .main_footer { color: var(--footer-text); font-size: 0.8rem; margin: 2em auto 2em auto; } .group_link > a { color: var(--hdg-text); font-family: inherit; font-size: inherit; font-weight: inherit; } .group_link > a:focus, .group_link > a:hover { background-color: var(--page-text); color: var(--page); } /* * Media Queries * ----------------------------------------------------------------------------| */ @media (min-width: 991px) { body { font-size: 1rem; } } @media (max-width: 991px) { /* collapse sidebar when screen is smaller than 991px */ #sidebar { display: none; } /* show "Menu Button" when sidebar collapsed */ #smallnavbtn { display: inline-block; } #content { display: grid; grid-area: content; margin-left: 12px; margin-top: 6em; }
Warning: Undefined array key "DisplayMode" in /home/fonasite/public_html/inc/PageCheck.inc.php(198) : eval()'d code(2) : eval()'d code(89) : eval()'d code(2) : eval()'d code on line 2878
.edit_props_btn { left: 1rem; } .edit_page_btn { left: 8rem; } .mode_switch_btn { left: 16rem; } } /* * Page Form & Data Display Responsive Layout Styles * When the screen is less than 600px wide, * make the two columns stack on top * of each other instead of next to each other. * ----------------------------------------------------------------------------| */ @media screen and (max-width: 600px) { html { font-size: 80%; } body { margin-left: 0; } blockquote { margin: 0 3em 0 3em; } .logout_btn { font-size: 0.9em; height: 6em; right: 1rem; width: 6em; } .form_row { margin-bottom: 0.8em; } .col_25, .col_50, .col_75, .required, .form_label, input[type=submit] { margin-bottom: 0; margin-top: 0; text-align: center; width: 100%; } } /* -------- NEW STYLES FOR TESTING NEW FORM FORMATTING --------- */ label { padding: 0.42rem; } .new_form_row { display: flex; align-items: start; width: 100%; margin-bottom: 0.5rem; } .new_form_label { background-color: var(--form-label); border-radius: 4px; color: var(--form-label-text); font-size: 0.8rem; padding-right: 1em; margin: 0 2px; text-align: right; width: 25%; flex-shrink: 0; } .new_form_input { background-color: var(--form-input); padding: 0.42em; margin: 0 2px; width: 75%; } /* Date Input */ .calendar_icon { display: inline-block; color: #fff; line-height: 20px; text-align: center; border-radius: 3px; background: var(--cal-event-text); padding: 5px 10px; } /* Radio and Checkboxes */ .form_check_container { display: inline-flex; flex-direction: column; align-items: left; border: 1.5px solid var(--form-label); border-radius: 4px; margin-bottom: 6px; } .form_check { display: flex; align-items: center; padding-left: 0.8rem; padding-right: 0.8rem; } .form_check_label { margin-bottom: 0; } /* Range Input Style */ .range_wrap { width: 100%; display: flex; align-items: center; } .range_wrap input[type="range"] { width: 100%; } /* .range_slider { -webkit-appearance: none; width: calc(100% - (73px)); height: 10px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; } .range_slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2c3e50; cursor: pointer; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .range_slider::-webkit-slider-thumb:hover { background: #1abc9c; } .range_slider:active::-webkit-slider-thumb { background: #1abc9c; } .range_slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #2c3e50; cursor: pointer; -moz-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .range_slider::-moz-range-thumb:hover { background: #1abc9c; } .range_slider:active::-moz-range-thumb { background: #1abc9c; } .range_slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c; } */ .range_value { display: inline-block; position: relative; width: 60px; color: #fff; line-height: 20px; text-align: center; border-radius: 3px; background: #e26e2a; padding: 5px 10px; margin-left: 8px; } .range_value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #e26e2a; border-bottom: 7px solid transparent; content: ''; } /* ::-moz-range-track { background: #d7dcdf; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } */ @media screen and (max-width: 600px) { .new_form_row { flex-flow: column; } .new_form_label { width: 100%; text-align: center; margin-bottom: 0.3rem; } .new_form_input { width: 100%; } .no_label { margin-left: 0; } } #full_window { display: grid; grid-template-areas: "sidebar content" "footer footer"; grid-template-columns: min-content auto; grid-template-rows: auto min-content; height: 100vh; min-width: 100%; min-height: 100vh; }

只今、ウェブサイトの大幅な更新中につきまして、
表示が乱れる事も、表示内容が欠ける事もございます。
どうか、ご了承下さい。

 Private Classes

Private classes include one-on-one classes, and classes with only your child's friends or brothers/sisters. In other words, you decide who gets to join your child's class.

 Lesson Content

In private classes, you also decide the lesson content. Of course, you can choose the standard Fona School method of teaching English conversation, or you can choose a completely different study objective. The following list indicates some possibilities.
  • Conversation
  • Composition
  • Maintenance/Brushing up
  • Test English
  • Other
The above represents some ideas for lesson content. Any kind of lesson is available, depending on your needs and objectives.
If you would like personalized counseling regarding the lesson content, just contact a Fona School counselor. We will be happy to help.

 Class Size

You decide how many people will be in the class, who they are, and so on.

 Lesson Length & Frequency

Lesson days, times, frequencies, and so on are all completely up to you, as the client. You can change the day and time, or whatever you want with every lesson if you choose.

Lesson Language

You decide what language you prefer. You can even switch languages every time if you want. Please let us know in advance though, in case we need to arrange an assistant teacher.

 Advantages

Private Class Groups
  • Being together with family and friends, the kids can relax immediately and focus on enjoying the lessons.
  • Kids feel less pressure in group classes, so they can have a good time and enjoy the learning the process.
Note: At Fona School, we do not recommend private lessons for kids.

 Membership Fee

Regardless of class type, your first lesson is free. (The free lesson for the Positive Progress Program is the same as the standard program.) There is an entrance fee (a single, one-time membership fee) as shown below. There is no annual membership fee, nor any kind of maintenance fee.
1 person(s): ¥10,000/1 Lifetime
The only ongoing fees are for the lessons you take, and services to which you subscribe. Fona materials used in the lessons will be provided as needed at no additional charge. If you want to buy your own copies of commercial materials, that is up to you. For monthly payments, lesson fees are to be paid in advance at the end of each month for the following month.

 Private Class Rates: Kids (Up to 12)

Elementary school

Classroom lessons, dispatch lessons and even online lessons are all currently charged at the same rate.
In the case of dispatch lessons, you are also responsible for the travel fees for the teacher(s). Travel fees are calculated from the nearest classroom.
In the case of online lessons, you are also responsible for the shipping fees for the materials.
Class Size Rate/Person/60 minutes 15-minute Extensions
10 ¥1,200 ¥300
5 ¥1,700 ¥425
4 ¥2,000 ¥500
3 ¥2,400 ¥600
2 ¥3,000 ¥750
1 ¥5,000 ¥1,250
The lesson time shown above is the minimum. You can increase that time in 15-minute increments.
 
Calculation Example
Example 1:
Three students taking 2 lessons/month, at 60 minutes each.
Lesson Fee × No. of Lessons = Monthly Fee/Person
¥2,400 × 2 = ¥4,800
Example 2:
Four students taking 1 lesson/week, at 60 minutes each.
Lesson Fee × No. of Lessons = Monthly Fee/Person
¥2,000 × 4 = ¥8,000
Note: In months with 5 lessons, the total for the month will be 5 x [lesson fee].

 Discount Packages

We also offer ticket packages, which give you free lesson hours.

時間数 説明 無料時間数 有効期間
13時間チケット 12時間分のレッスン料で13時間のレッスンを受けられます。 1時間 6ヶ月
26時間チケット 23時間分のレッスン料で26時間のレッスンを受けられます。 3時間 12ヶ月
52時間チケット 47時間分のレッスン料で52時間のレッスンを受けられます。 7時間 24ヶ月
104時間チケット 87時間分のレッスン料で104時間のレッスンを受けられます。 17時間 60ヶ月
208時間チケット 169時間分のレッスン料で208時間のレッスンを受けられます。 39時間 84ヶ月
 
Calculation Example
Example 1:
A 26-hour ticket for 2 students.
Lesson Fee for 1 Hour/Person × Paid Hours = Ticket Price/Person
¥3,000 × 23 = ¥69,000
Example 2:
A 52-hour ticket for 5 students.
Lesson Fee for 1 Hour/Person × Paid Hours = Ticket Price/Person
¥1,700 × 45 = ¥76,500