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

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

 従業員向けの授業

Fona Schoolでは、企業内研修の英語講師の派遣を承ります。会社や事務所、病院、小売店、工場、市役所など、場所は問いません。Fona Schoolの教室で英語研修を実施することも可能です。

 レッスンの内容

「TOEIC対策の講習を受けたい」「新入社員の語学研修を検討している」「社員の語学力を底上げしたい」「接客スタッフの語学力を伸ばしたい」「海外出張前に語学力を高めたい」などお客様のニーズに応じたレッスンを行います。ご相談ください。
  • 会話
  • 英作文
  • 英会話力維持・ブラッシュアップ
  • 受験英語(TOEIC、TOEFL、英検対策など)
  • その他

 定員

人数もメンバーも、全て、お客様で決めていただけます。

 レッスンで使用するメディア

レッスンで使用するメディアもお選びいただけます。Fona Schoolの教室で、お客様のご希望の場所で、また、オンラインでも受講いただけます。オンラインの場合はZoomやFaceTimeなどを使用致します。

 レッスンの回数

レッスンの曜日、時間、頻度、など全てお客様に決めていただきます。毎回、曜日や時間が同じでなくても構いません。

レッスン時の言語

レッスン時に使う言語を英語にするか日本語にするか、お客様に決めていただきます。言語は毎回変更していただくことも可能です。ただ、アシスタント教師の手配が必要な場合もありますので、次回のレッスンの希望言語について、予めお知らせください。

 

いずれのクラスも初回レッスンは無料で体験できます。 入会金は、一人当たり10,000円です。年会費・維持費等はいただいておりません。継続的な費用は受講されるレッスンと購読するサービスの料金のみです。 授業に使用されるFona特製の教材も授業中に無料で提供致します。市販の教材をご希望の方はご購入ください。 授業料は、月末に翌月分をお支払いください。

 企業への教師派遣料金

教室レッスンも、派遣レッスンも、オンラインレッスンも、受講料は同じです。
但し、派遣レッスンの場合、別途教師の交通費をご負担いただきます。交通費は最寄教室からの計算となります。
オンラインレッスンの場合は、教材の送料をご負担いただきます。
定員 一人当りの60分料金
10 ¥1,500
5 ¥2,000
4 ¥2,400
3 ¥3,000
2 ¥3,600
1
(プライベート)
¥6,000
上記のレッスン時間が最短で、その後15分単位でお選びいただけます。
 
計算例 1
生徒数:2
レッスン時間:90分
授業の頻度:2/月
お一人様授業料 x 回数 お一人様月額
¥5,400 x 2 ¥10,800
計算例 2
生徒数:1
レッスン時間:60分
授業の頻度:1/週
お一人様授業料 x 回数 お一人様月額
¥6,000 x 4 ¥24,000
但し、曜日によって5回の場合は、1レッスン×5回=月額 となります。

 割引パッケージ

お得なチケットも用意しております。

チケットサイズ 詳細
13時間 Value:13時間
Price:12時間
1時間 Free!
Valid:6ヶ月
26時間 Value:26時間
Price:23時間
3時間 Free!
Valid:1年
52時間 Value:52時間
Price:45時間
7時間 Free!
Valid:2年
104時間 Value:104時間
Price:87時間
17時間 Free!
Valid:4年
208時間 Value:208時間
Price:169時間
39時間 Free!
Valid:7年
 
計算例 1
生徒数:2
チケットサイズ:26時間
1時間の1人当たりの授業料 x 無料時間を除く時間数 お一人様のチケット額
¥3,600 x 23 ¥82,800
計算例 2
生徒数:1
チケットサイズ:52時間
1時間の1人当たりの授業料 x 無料時間を除く時間数 お一人様のチケット額
¥6,000 x 45 ¥270,000