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

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

Study Lessons & Practice Lessons

In the Fona School curriculum, we make study lessons and practice lessons very clear. Whenever you learn something new, you need to practice it right away to make it your own. For that purpose, we always follow study lessons with practice lessons. Study lessons are focused on teaching things that you didn't previously know. Practice lessons are focused on conversation, games, and so on. These practice lessons are critical for you to gain a real-life feel for what you have learned. The balance between study and practice lessons is of course critical, and the teacher therefore constantly watches the students' progress and understanding to ensure always the perfect balance between these lesson types.

Clear Explanations

At Fona, you will be able at last to understand how the English language really works, the real meanings of words, and how to use the various words and phrases. That is thanks to our clear and accurate explanations. The exclusive Fona School materials are designed and produced based on personal experiences of language study, as well as long years of experience teaching Japanese people. These comprehensive materials explain clearly the details that are most difficult for Japanese people to understand, and the things that are confusing due to Japanese-English. Indeed, these incredible materials will teach you everything about the English language.

Whether talking about English or any other subject, if the listener is unable to understand an explanation, that is not the fault of the listener. The speaker is at fault for not explaining the content in a way that the listener can understand. At Fona School, we take the responsibility of explaining things seriously. We continue to seek new and better ways to explain everything until every last individual student has been able to understand. For that reason, even though the teachers are foreign, we provide clear Japanese explanations as needed.

Learn about Other Cultures

Learning about other cultures opens your mind to new possibilities, and helps you understand that there are more possibilities to any given situation than you had thought. As you go through life, you will experience running into walls in various endeavors. Developing the strength to face and overcome those situations is an important part of making progress. The important thing is not teaching solutions, but teaching how to find solutions.

Learning about other cultures broadens your thinking, and helps you find more possible solutions to various situations. Look at things from all angles to see all the perspectives.

Beyond Language

Even with all of the details described above, there will be no point to your English skills if you try to use English to express Japanese thinking. You also need to learn the thinking and other abilities behind the English language. To communicate with people not only in Japan, but all over the world, you need to think logically, express your own thoughts, and be able to discuss things with others to make mutual decisions. These are all important aspects of communicating in a global setting, and you will develop them all as a natural result of the Fona School program.

Put all of this together and you will have great fun at every lesson. In fact, many people tell us that lesson day is their favorite day of the week.

True Learning

With the Fona School total program, even a beginner can achieve fluency in 3 years. In the Fona School program, we do not take a lecture approach to lessons. Our program is designed to ensure that each individual student understands and takes possession of every detail we teach. The first step of that is Taking Lessons. Taking Lessons is one of the first materials we teach. It explains how to get the most benefit from lessons, by actively participating and speaking out, not simply attending passively. Come to Fona School, and take full advantage of your opportunities here.

In addition to learning how English really works, you will have abundant opportunities to use what you have learned. The Fona School curriculum is designed with a good balance of study lessons and practice lessons to ensure that you truly understand everything you learn, and that you take possession of it. In the end, English will no longer be a foreign language; it will be your language.