@charset "utf-8";

		<!--
			/* EOT and TTF files are in folder /fonts/ */
			
			@font-face {
			 font-family: "Timesse Russ";
			 src: url("/fonts/FSTIMRU.eot") /* EOT file for IE */
			}
			@font-face {
			 font-family: "Timesse Russ Bold";
			 src: url("/fonts/FSTIMRUB.eot") /* EOT file for IE */
			}
			@font-face {
			 font-family: "Timesse Russ Italics";
			 src: url("/fonts/FSTIMRUI.eot") /* EOT file for IE */
			}
			@font-face {
			 font-family: "Timesse Russ";
			 src: url("/fonts/FSTIMRU.TTF") /* TTF file for CSS3 browsers */
			}
			@font-face {
			 font-family: "Timesse Russ Bold";
			 src: url("/fonts/FSTIMRUB.TTF") /* TTF file for CSS3 browsers */
			}
			@font-face {
			 font-family: "Timesse Russ Italics";
			 src: url("/fonts/FSTIMRUI.TTF") /* TTF file for CSS3 browsers */
			}
		
			@font-face {
			 font-family: "Accented Russ Serif";
			 /* the syntax error below was corrected by Slava on 7/12/2026 */
			 src: url("fonts/ars55ft.eot"), url("fonts/ARS55FT.ttf");
			 font-style:normal;
			 font-weight:normal;
			}
		
			@font-face {
			 font-family: "Accented Russ Serif";
			 src: url("/fonts/ars56ft.eot"), url("/fonts/ARS56FT.ttf");
			 font-style:italic;
			 font-weight:normal;
			}
		
			@font-face {
			 font-family: "Accented Russ Serif";	 
			 src: url("/fonts/ARS75FT.eot"), url("/fonts/ARS75FT.TTF");
			 font-style:normal;
			 font-weight:bold;
			}
		
			@font-face {
			 font-family: "Accented Russ Serif";
			 src: url("/fonts/ARS76FT.eot"), url("/fonts/ARS76FT.TTF");
			 font-style:italic;
			 font-weight:bold;
			}

			.RussianText {
				font-family: "Accented Russ Serif", "Timesse Russ", "Timesse Russ M", "Accented Cyrillic", "Accented Cyrillic M", "Times New Roman", sans-serif; 
				/*font-size: 16px;*/
				font-size: 1rem;
				line-height: 1.4;
			}

			.Emphasis	{
				color: rgb(255, 0, 0);
				font-weight: bold;
			}

			.Info	{
				color: rgb(0, 128, 0);
				font-weight: bold;
			}
	
			.Footnote	{
				font-family: "Accented Russ Serif", "Timesse Russ", "Timesse Russ M", "Accented Cyrillic", "Accented Cyrillic M", "Times New Roman", sans-serif;
				font-size: 0.7rem;
				color: rgb(90, 90, 90);
			}
			
			td {
				font-family: inherit;	
				font-size: inherit;	
				font-weight: inherit;
			}
			
			.SyllabusWeekDates {
				margin-top: 10px;
				margin-left: 4px;
				margin-right: 4px;
				margin-bottom: 4px;				
				font-family: "Accented Russ Serif", "Timesse Russ", "Timesse Russ M", "Accented Cyrillic", "Accented Cyrillic M", "Times New Roman", sans-serif; 
				/*font-size: 16px;*/
				/*font-size: inherit; SOMEWHERE THIS IS OVERRIDDEN,*/
				font-size: 1.0rem !important;
				line-height: 100%;
				font-weight: bold;
				white-space: nowrap;
			}
			
			.SyllabusDayNames {
				margin-top: 0px;
				margin-left: 14px;
				margin-right: 4px;
				margin-bottom: 0px;				
				font-family: "Accented Russ Serif", "Timesse Russ", "Timesse Russ M", "Accented Cyrillic", "Accented Cyrillic M", "Times New Roman", sans-serif; 
				/*font-size: 16px;*/
				font-size: 1.0rem; 
				line-height: 1.4;
				font-weight: bold;
			}
		
			.Highlight {
				font-family: inherit; 
				font-size: inherit;
				color: #804040;
			}
		
			.SyllabusText {
				/*margin-top: 2px;*/
				margin-left: 4px;
				margin-right: 4px;
				margin-bottom: 2px;				
				font-family: "Accented Russ Serif", "Timesse Russ", "Timesse Russ M", "Accented Cyrillic", "Accented Cyrillic M", "Times New Roman", sans-serif; 
				/*font-size: 16px; BEFORE 7/23/2026*/
				font-size: inherit; /* AFTER  7/23/2026*/
				font-weight: normal;
				/*line-height: 1.4;*/
			}

			.SyllabusText p {
				font-size: inherit !important;
				/*margin: 0; /* Prevents paragraph margins from distorting cell height */
				padding: 0;
			}
			.MainFrameHeader {
				font-family: Verdana, Arial, Helvetica, Arial, sans-serif;
				font-size:  12px; /* this may have to remain an absolute size so long as it is in a div with the green gradient graphic as background: the graphic is 32 px tall */
				font-weight: bold;
				line-height: 32px; /*the line-height setting below needs to stay in absolute measure units so long as the 32px-high graphic Green-Banner.png serves as its background */
				margin: 16px auto;
				text-align: right;
				padding-right: 110px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;
				color: rgb(255, 255, 255); width: 100%;
				background-image:url(/russian.web/images/Green-Banner.png);
				background-position: top center;
				background-repeat:no-repeat;
			}
			
			p {
				margin-top: 0px;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
				margin-bottom: 10px; 
				font-family: inherit;
				font-size: inherit;
				padding: 0px;
			}
			
			/* ~~ Element/tag selectors ~~ */
			ul, ol, dl {
				padding: 0;
				margin: 0;
			}
			h1, h2, h3, h4, h5, h6 {
				margin-top: 0px;	
				margin-bottom: 10px;
				padding: 0px; 
			}
			a img { 
				border: none;
			}
			
			/* Styling for links must remain in this order - including the group of selectors that create the hover effect. */
			a:link {
				/*color: #0000ff;*/
				color: inherit;
				/*text-decoration: none;*/
			}
			a:visited {
				/*color: #8000ff;*/
				color: inherit;
				/*text-decoration: none;*/
			}
			a:hover, a:active, a:focus { /* This group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
				color: inherit;
				text-decoration: underline;
			}
			
			/* This fixed width container surrounds the other divs.
			.container {
				width: 90%;
				text-align: center;
				margin: 0 auto; 
			} */
			
			/* The header is not given a width and will extend the full width of the layout. */
			.header {
				background-color: #68645b; /* the background color of the container must also be set to this value because it trumps this setting */
			}
			
			/* These are the columns for the layout.
			
			1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides.
				This prevents any "box model math". If you add any side padding or border to the div itself, it will be added to the width
				you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second
				div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the
				element in the div and place a second div within it with no width and the padding necessary for your design.
			
			2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're
				floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead.
				For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where
				some versions of Internet Explorer double the margin.
			
			3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have
				been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily
				be changed to IDs if that's your preference, as long as you'll only be using them once per document.
			
			4) To place the nav bar on the right instead of the left, float these columns the opposite direction (all right instead of all left)
				and they'll render in reverse order. There's no need to move the divs around in the HTML source.
			*/
			.NavigBarSection {
				color: rgb(0, 102, 51);
				cursor: pointer;
				font-weight: bold;
				font-size: inherit;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 2px;
				padding-bottom: 15px;
			}
			
			.NavigLink {
				color: rgb(69, 67, 61);
			}
			
			.CurrLink {
				color: rgb(69, 67, 61);
				font-weight: bold;
				font-size: 0.7rem;
			}
			
			.content {
				padding: 0px;
				width: 100%;
				line-height: 1.4;
				color: rgb(69, 67, 61);
			}
			
			/* ~~ This grouped selector gives the lists in the .content area space */
			.content ul, .content ol { 
				padding: 0 15px 15px 40px; /* This padding mirrors the right padding in the headings and paragraph rule above.
											Padding was placed on the bottom for space between other elements on the lists and
											on the left to create the indention. */
			}
			
			ul.nav {
				list-style: none; /* This removes the list marker */
				border-top: 1px solid #666; /* This creates the top border for the links - all others are placed using a bottom border on the LI. */
				margin-bottom: 15px; /* This creates the space between the navigation on the content below. */
			}
			ul.nav li {
				border-bottom: 1px solid #666; /* This creates the button separation. */
			}
			ul.nav a, ul.nav a:visited { /* Grouping these selectors makes sure that your links retain their button look even after being visited. */
				padding: 5px 5px 5px 15px;
				display: block; /* This gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
				width: 100%;  /* This width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
				text-decoration: none;
				background: #C6D580;
			}
			ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* This changes the background and text color for both mouse and keyboard navigators. */
				background: #ADB96E;
				color: #FFF;
			}
			
			.smaller_main_frame_home_text {
				font-size: 0.7rem; 	
			}
			
			/* ~~ miscellaneous float/clear classes ~~ */
			.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
				float: right;
				margin-left: 8px;
			}
			.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
				float: left;
				margin-right: 8px;
			}
			.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
				clear:both;
				height:0;
				font-size: 1px;
				line-height: 0px;
			}

/* ==========================================================================
			   MOBILE & TABLET RESPONSIVE OVERRIDES
			   ========================================================================== */
			
			@media screen and (max-width: 1024px) {
				
				#debug-badge .show-1024 { display: inline !important; } /* temporary debug badge*/
					html {
						font-size: 90%; /* Everything becomes ~10% smaller automatically */
								}
				/* 1. Stack the main layout into a single column on mobile/tablets */
					.main-layout {
						display: block !important; /* or grid-template-columns: 1fr !important; */
						width: 100% !important;
					}
					
				/* 2. Make the sidebar fill the top/bottom panel width */
					.sidebar-panel {
						width: 100% !important;
						box-sizing: border-box !important;
					}
				
				/* 3. Make the main content fill the full width below it */
					.content-panel {
						width: 100% !important;
						box-sizing: border-box !important;
					}				/* 1. Force the layout tables and table rows to behave like blocks */

				/* 3b. Fix the Green Title Banner from clipping/overflowing */
					.MainFrameHeader {
						text-align: center !important; /* Center the course/page title on mobile */
						padding-right: 15px !important; /* Drop the 110px desktop right gap */
						padding-left: 15px !important;
						line-height: inherit !important; /* Allow background image/banner to scale naturally */
						padding-top: 12px !important;
						padding-bottom: 12px !important;
						margin: 10px auto !important;
						background-size: cover !important; /* Make sure the green background stretches beautifully */
						/*font-size: 1.0rem !important;  */ /* Balance size on a portrait layout */
					}
				
				/* 4. Allow the inner box to use full mobile screen space */
					#InnerMainFrameBox {
						width: 100% !important;
						max-width: 100% !important;
						margin: 0 auto !important;
						padding: 0.75rem !important;
					}

					.container, 
					.content, 
					table[style*="width: 920px"], 
					table[style*="width: 920px"] > tbody > tr {
						display: block !important;
						width: 100% !important;
						box-sizing: border-box !important;
					}
	
					/* Force layout table cells to behave like blocks EXCEPT our sidebar menu cell */
					table[style*="width: 920px"] > tbody > tr > td:not([style*="background-color: rgb(204, 196, 159)"]) {
						display: block !important;
						width: 100% !important;
						box-sizing: border-box !important;
					}
				
					/* 2. Make sure images don't overflow the screen bounds */
					img {
						max-width: 100% !important;
						height: auto !important;
					}
				
					/* 3. Handle the header elements */
					.header table, 
					.header table tr, 
					.header table td {
						display: block !important;
						width: 100% !important;
						text-align: center !important;
					}
					.header table td[align="right"] {
						padding: 10px 0 !important;
						text-align: center !important;
					}
				
					/* 4. Make the Map Banner fit the phone screen */
					img[src*="map_banner920x71.png"] {
						width: 100% !important;
						height: auto !important;
					}
				
					/* 5. Transform the Sidebar Navigation into a Full-Width Panel */
					td[style*="background-color: rgb(204, 196, 159)"] {
						width: 100% !important;
						background-image: none !important; /* Removes the repeating vertical desktop strip */
						background-color: rgb(224, 218, 194) !important;
						padding: 15px !important;
					}
					
					td[style*="background-color: rgb(204, 196, 159)"] > div[style*="width: 210px"] {
						width: 100% !important;
					}
	
					/* 6. Expand navigation text block widths so they are easy to tap */
					.NavigBarSection {
						padding: 14px 10px !important; /* Standardized to tap-friendly height */
						margin-bottom: 5px !important;
						background-color: rgb(204, 196, 159) !important;
						border-radius: 4px !important;
						/*font-size: 1.rem !important;  */ /* Big enough to read easily at arm's length */
					}
				
				/* 1. STRUCTURAL STYLING (Keep This!) */
					.BoxContent, .BoxContentLast {
						width: 100% !important;
						background-image: none !important;
						padding: 15px !important;
						box-sizing: border-box !important;
					}
					
					.NavigLink, .CurrLink {
						display: inline-block !important;
						padding: 8px 0 !important;
						/* font-size: 1.0rem !important; */
					}
	
					/* FORCE ALL NAVIGATION LINKS TO BE BOLD AND READABLE */
					span.NavigLink, 
					.BoxContent a span, 
					#currentclasses span, 
					#materials span {
						/* font-size: 1.0rem !important; */
						line-height: 1.6 !important;
						display: inline-block !important;
						padding-top: 6px !important;
						padding-bottom: 6px !important;
					}
	
					/* Make the text telling students which class they are currently viewing bigger too */
					span.CurrLink {
						/* font-size: 1.0rem !important; */
						line-height: 1.6 !important;
						display: inline-block !important;
					}
	
					/* MOBILE ACTIVE STATE FOR NAVIGATION LINKS: Restore tap functionality so users can return to the content page */
					body.menu-open a:has(span.CurrLink) {
						pointer-events: auto !important; /* Re-enables clicking/tapping on mobile */
						cursor: pointer !important;      /* Restores standard link behavior */
					}				
	
					/* FORCE MAIN CONTENT BODY TYPOGRAPHY TO EMBOLDEN ON PHONES */
					.content, 
					.content td, 
					.SyllabusText, 
					.RussianText {
						/* font-size: 1.0rem !important;  */ /* Standard native mobile reading standard */
						line-height: 1.5 !important; /* Add breathing room between lines */
					}
					
					.content p {
						/* font-size: 1.0rem !important; */
						line-height: 1.5 !important;
						margin-bottom: 14px !important; /* Ensure paragraphs don't blend together */
					}
	
				.smaller_main_frame_home_text {
					/* font-size: 0.85rem; 	 */
				}

				/* ======================================================= */
				/* MOBILE SWAPPING CONTROL CENTRE */
				/* ======================================================= */

				/* 1. Show the "Show Menu" link wrapper on mobile */
					#mobile-nav-toggle-container {
						display: block;
					}
					
					#mobile-nav-toggle {
					/* font-size: 1.0rem !important; */
					font-weight: inherit !important;
					color: rgb(0, 102, 51) !important;
					text-decoration: underline !important;
					
					/* Strip away native button styles to make it look like a text link */
					background: none !important;
					border: none !important;
					padding: 0 !important;
					cursor: pointer !important;
					font-family: inherit !important;
					}
				
					/* ==========================================================================
					   MOBILE MENU TOGGLE STATE CONTROL
					   ========================================================================== */
					
					/* 1. Make sure the toggle button wrapper shows up on mobile */
					#mobile-nav-toggle-container {
						display: block !important;
					}
					
					/* 2. DEFAULT CLOSED STATE:
					   When the menu is CLOSED (body does NOT have .menu-open class):
					   Hide the sidebar panel, keep the main content visible. */
					body:not(.menu-open) .sidebar-panel {
						display: none !important;
					}
					
					body:not(.menu-open) #MainContent {
						display: block !important;
					}
					
					/* 3. ACTIVE OPEN STATE:
					   When student clicks "Show Site Menu" (body HAS .menu-open class):
					   Hide the main content, show the sidebar panel across full width. */
					body.menu-open #MainContent, 
					body.menu-open #mobile-nav-toggle-container {
						display: none !important;
					}
					
					body.menu-open .sidebar-panel {
						display: block !important;
						width: 100% !important;
					}
			}
			/* ==========================================================================
			   MAIN STYLES SHEET - MOBILE & TYPOGRAPHY OVERRIDES
			   ========================================================================== */
			@media screen and (max-width: 768px) {
/* temporary debug badge */
/*
#debug-badge .show-768 { display: inline !important; }			*/	/* Stop mobile WebKit engines from automatically scaling down text sizes */


				html {
					font-size: 90%; /* Everything becomes ~10% smaller automatically */
					-webkit-text-size-adjust: 100%;
					-ms-text-size-adjust: 100%;
				}

				/* 1. Main Content Layout Corrections */
				.content {
					padding: 10px !important;
					box-sizing: border-box;
				}
			
				/* 2. Fix the Green Title Banner from clipping/overflowing */
				.MainFrameHeader {
					text-align: center !important; /* Center the course/page title on mobile */
					padding-right: 15px !important; /* Drop the 110px desktop right gap */
					padding-left: 15px !important;
					line-height: inherit !important; /* Allow background image/banner to scale naturally */
					padding-top: 12px !important;
					padding-bottom: 12px !important;
					margin: 10px auto !important;
					background-size: cover !important; /* Make sure the green background stretches beautifully */
					/*font-size: 1.0rem !important;  */ /* Balance size on a portrait layout */
				}
			
				/* 3. Text & Syllabus Typography Optimization */
				.RussianText, .SyllabusText, .SyllabusDayNames {
					/*font-size: 1.0rem !important;  */ /* Slightly crisper for small phone viewports */
					line-height: 1.5 !important; /* Give more breathability to cyrillic and accents */
					margin-left: 5px !important;
					margin-right: 5px !important;
				}

				.smaller_main_frame_home_text {
					/*font-size: 0.7rem; 	*/
				}
				
				.Footnote {
					/* font-size: 0.9rem !important;	 */
				}
			
				/* Allow dates to wrap naturally instead of pushing past screen edge */
				.SyllabusWeekDates {
					/* font-size: 1.0rem !important; */
					white-space: normal !important; 
					display: block;
					margin-bottom: 6px !important;
					line-height: 1.5 !important;
				}
			
				/* 4. Make lists thumb-friendly and bounded */
				.content ul, .content ol {
					padding: 0 15px 15px 25px !important; /* Reduce massive left indents on tiny screens */
				}
			
				/* 5. Fix old float utilities from breaking column stacks */
				.fltrt, .fltlft {
					float: none !important;
					display: block !important;
					margin: 10px auto !important;
					max-width: 100% !important;
				}
			}			

/* ==========================================================================
			   2. PHONE-SPECIFIC TYPOGRAPHY BOOSTS (Screens under 600px)
			   ========================================================================== */
			@media screen and (max-width: 600px) {

#debug-badge .show-600 { display: inline !important; }	/* temporary debug badge */
				/* Stop mobile WebKit engines from automatically scaling down text sizes */

				html {
					font-size: 85%; /* Everything becomes ~10% smaller automatically */
					-webkit-text-size-adjust: 100%;
					-ms-text-size-adjust: 100%;
				}
				
				/* 1. Boost body content using stable, root-relative rem units */
				.content, 
				.content td, 
				.SyllabusText, 
				.RussianText {
					/*  font-size: 1.6rem !important;  */ /* ~18px, completely ignoring table nesting */
					line-height: 1.6 !important;
				}
				
				.content p {
					/* font-size: 1.5rem !important; */
					line-height: 1.6 !important;
					margin-bottom: 16px !important;
				}

				/* 2. Scale up navigation links using rem units */
				span.NavigLink, 
				.BoxContent a span, 
				#currentclasses span, 
				#materials span,
				span.CurrLink {
					/*font-size: 1.6rem !important; */ /* ~19px, bold and highly legible */
					line-height: 1.7 !important;
					padding-top: 8px !important;
					padding-bottom: 8px !important;
				}

				/* 3. Give navigation category headers a clear visual presence */
				.NavigBarSection {
					/* font-size: 1.8rem !important;  */ /* ~21px, great for quick scanning */
					padding: 16px 12px !important;
				}
			}

			.smaller_main_frame_home_text {
				/* font-size: 0.85rem; 	*/
			}
	-->