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

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

Sentence blocks are a fun and epoch-making approach to language study.

Fona School teaches English in a way that is completely different from anything you have ever learned in any other school. We teach English based on sentence blocks, which is exactly the real structure of the English language. Sentence blocks are the [who], [what], [where], [when], [why], [how] information blocks contained in any sentence. By splitting sentences into those blocks of information, we have literally reorganized traditional grammar into something that actually makes sense and is easy to understand. Studying English by the Fona School method will enable you actually to learn English, to read and write English, to hear and understand English, and to speak English.

With the sentence blocks, we have completely restructured the grammar of the English language. With this new structure, English actually makes sense. Trying to understand English from the perspective of the grammar currently taught in schools is merely an exercise in futility. If you genuinely want to understand English, and to speak the way a native speaker does, then learning the sentence blocks is the only solution for you. It will take time to get used to thinking in blocks, but the effort you make to use the blocks will reward you far greater than the same effort made toward any other approach.

The one point of caution would be to avoid the trap of thinking that it's too simple and you already understand it. Set aside everything you've ever heard or learned before and take your time to read and understand these materials.

Why Sentence Blocks?

Native English speakers think and speak in blocks of information, such as "who?", "did what?", "when?", "where?", "how?", and so on. Those information blocks are what we call sentence blocks. People communicate by lining up those sentence blocks. The sentence block approach to learning any language is truly the most natural approach. However, with regard to English, it is even more beneficial. Sentence blocks make the most sense for learning English for the following reasons.

  • Native speakers think in blocks, not traditional grammar. Right from childhood, native speaking children think and learn their native language in blocks.
  • In English, the exact same blocks are used for both casual conversation and full sentences. If you can make the blocks, you can make the sentences.
  • Thinking in blocks and understanding that the [who] and [what] blocks are the core information enables thinking the way native speakers think. Thinking the way native speakers think means that you'll talk the way native speakers talk.
  • While traditional grammar does almost nothing to help you use or understand English, the sentence block approach does almost everything for you.
  • Adhering fully to the sentence block approach will guarantee the fastest and most accurate and stable progress and improvement of your English skills.