/*  HDS Project:		SeanChara ["Old Friend"] Online Digital Studios
	Project Type:		Private
	Production Site:	SeanChara.com
	Testing Site:		localhost/SC_v0a1x/
	Design Site:		e4psSC/SC_v0a1x/
	Design Logs:        e4psSC/scSiteDevLogs/
	File:  				rootPages.css 
	Last Modified:		2025/02/01 19:14 by [As Yet Anonymous] -- A minor adaptation of 
						wcbcPages.css.
    Purpose:			Create general root Site Page CSS formatting.
	Approach:           Quick and easy -- this is an ALPHA-level solution.  The important thing
	                    here is to quickly facilitate contentExploration not generate highest
						quality rendering/formatting.  If it can be cut, go ahead and cut it to
						keep things simple.
	Self Doc. Level:    Full/[??] --> this file is meant to be used as Self-Re-Educational Tool
						or equivalentaly, a Full Technical Case Study in a comprehensive,
						introductory review of digitalTypeSetting class.  An automated comment
						stripping routine can always be used to obtain a leaner version of the 
						file.
						
/* 	General CSS Language Notes:                            
	1.)  The CSS Language beginComments codeEscape sequence is: [forwardSlash][Asterisk] (see the
		 beginning of line 1 above).  The Comments-escape sequence is: [Asterisk][forwardSlash] 
		 (see the end of line 18 below).  Note that extra codeEscape sequences (see the beginning
		 of line 20 above) don't hurt and actually aid in cognitiveAssonance/cognitiveCoherence
		 between extended sections of CSS file comments.
	2.)  The Standard CSS "geographic" parameter order:     Top, Right, Bottom, Left. 
	3.)  Beware of contracted (short versions) of statements like: "font [t] [y] [z]" where t, y,
	     and z are some of the many parameters of the font property.  There can be implicit and/or 
		 more locally defined values of the other properties u, w, and x that are set by such
		 shortened statements without your knowledge.                                                  */

/*   -----------------------------------------------------------------------------------------------
    | Define the applicationWindow container and the pageDisplaySpace within it.  (These can be     |
	| effectively the same or different depending on the applicationWindow manual sizing.)          |
	 -----------------------------------------------------------------------------------------------   */
    body { /* = browserBody or browserActiveWindowSpace
			 Think of this as the leather-backed desktop mat printed objects are put upon when read,
			 notated, or created by hand.                                                              */
		text-align: center; /* REALLY "text-and-everything-else-including-the-page-div-align"!         */
		background-color: #EEEEEE; /* This will only show if not bocked out by div#page background.    */
		width: 640px; } /* This allows two side-by-side half-screen MSWin appWindows on the old hpDv
						   laptop.  Alternatively can leave unspecified = 100% of browser window 
						   interior space.    */

    div#pageBody { /* = pageDisplaySpace
					 Think of this as the sheet of paper.  Graphics and writing can in principle 
					 extend all the way to the edge of the pageBody, but that is quite rare.
					 Typically, there is a wide (f.e., 0.5 - 1.0 in.) blank margin around the written
					 or printed content in most Letter-sized docunments.  In part, this is a technical 
					 printing consideration.  Printing up to the edge of the paper typically results 
					 ink slop-over resulting in smearing and blotting between lines and pages.
					 (= the "pageBody".  If smaller than the  This contains everything on the page 
				 but not the screen */
/*	  	display:block; /* This is currently not used. Repetitive?  What are alternaitves and effects?  */
		text-align:left;
		background-color: #FFFFFF; /* White */
		border-width: 0px; border-style: none; /* versus...
			border-width: 1px; border-color: red; border-style: solid; */
		width: 640px;
		padding: 0px;
		margin: 0px auto 0px auto; /* Is this legal?? */
		margin-right: auto; /* Needed if we want it to "float" in middle of a larger html-bodyElement. */
		margin-left: auto; }

/*   -------------------------------------------------------------------------------------------------
    | Define structural/layout scaffolding classes and corrections.                                   |
     -------------------------------------------------------------------------------------------------  */
	.layoutRowScaffolding { /* Define class of infinitely thin scaffolding containers.                   */
		width: 100%;
		clear: both;
		padding: 0px;
		margin: 0px;
		border-width: 0px;
		border-style: none;
		background: none;}
		
	.clearfix::after { /* A standard fix for miss-concieved floating behavior. */
		content: "";
		clear: both;
		display: table;}
/*   -------------------------------------------------------------------------------------------------
    | Define the many components of the documentHeader structure.  (This may be overdone, but keep    |
	| getting gotchya'd by it all, so err on the overly-secifically-structured side.)                 |
     -------------------------------------------------------------------------------------------------  */
	div#docHeader{ /* Something to contain it all -- for clarity, safety, and paranoid if not 
	                   good [??] form.  This style of docHeader will contain two major subParts:
							1)	the docBanner -- with studio-specific background coloring and 
								studio and page identifying Heading text.
							2)	the docNavBar -- very light or non-colored background list of links to
								other studios, tools, major pages, indexes, glossaries, notes, whatever. */
		padding: 0px;
		margin: 0px;}
		div#headerBanner{ /* Top part of standard sitePage Document Header -- consists of 3 rows.         */
			border-top: 2px solid gray;
			border-bottom: 5px double gray;
			background-color: rgb(204, 221, 255); /* Light blue */
			padding: 0px;
			margin: 0px;}

			div#headerRow1{ } /* Consists of one part... */
				div#headerRow1 p{ /* The top half of the light-blue headerBanner.  Use with p#.            */
					font-size: 8pt;
					font-variant: small-caps;
					color: white;
					letter-spacing: 4px;
					text-align: center;
					padding: 10px 10px 10px 10px;
					margin: 0px;}

			div#headerRow2 { } /* Consists of 2 sets of text separated by a vertical line	*/
				div#headerStudioIcon { /* This floats to the left in banner... */
					float: left;
					width: 107px;	
					text-align: left;
					border-right: 3px solid white;}
					div#headerStudioIcon p {
						font-size: 40pt;
						font-weight: bold;
						line-height: 1.0;
						padding: 0px 20px 0px 10px;
						margin: 10px 0px 10px 0px;}

				div#headerFullPageName { /* ...And this buts up next to it on the right */
					float: left;
					width: 530px;	
					text-align: left;}
					div#headerFullPageName p {
						font-size: 24pt;
						line-height: 1.1;
						padding: 5px 10px 5px 10px;
						margin: 0px;}
					/* Here div#headerStudioName h1 { } ~ h1 { } :  see header element definitions below.  */

			div#headerRow3 { } /* This can be used to redundantly/over specify proper vertical spacing
								 relative to the vertical field separating line.                            */
			
			/*	-------------------------------------------------------------------------------------------- */	

		div#headerNavBar{ /* The underBanner content -- here more navLinks.  Use with p#.             */
			border: none;
			padding: 5px 0px 30px 0px;
			margin: 0px;}
			div#headerNavBar p { /* The multiple lines of links...                                     */
				line-height: 1.1;  /* Is 1.5 the default? Really OBJECT-height?!?!?! */
				font-size: 10pt;
				padding: 0px 10px 0px 10px;
				margin: 0px;}
	
	div#docBody { /* A seperate container for generating an overall document body margin between
	                the edge of the paper and the main body printing.                                 */
		padding: 0px;
		margin: 0px 10px 20px 10px;}
		
/*   ------------------------------------------------------------------------------------------------
    | Customize the top three htmlHeader elements to achieve the technical document look.            |
	 ------------------------------------------------------------------------------------------------  */
	h1 { /* Use for pageTitle -- Bold InLine Text appearance.                                           */
		text-align: left;
		font-size: 18pt;
		padding: 5px 10px 10px 14px;
		margin: 0px;}
		h1 em.dysEm3_GreyItalic {
			font-size:14pt;}
	h2 { /* Use for majorSection Header -- Text in Colored Block appearance.                            */
		line-height: 1.0;
		font-size: 16pt;
		border-top: 1px solid black;
		border-bottom: 3px double black;
		padding: 5px 10px 5px 10px;
		margin: 40px -10px 0px -10px; /* Negative R/L margins to edge of page. */
		background-color: rgb(204, 221, 255); /* Light Blue Grey */}

	h3 { /* Use for standard/lowest Section Header -- Bold InLine Text appearance.                      */
		font-size: 14pt;}

/*   ------------------------------------------------------------------------------------------------
    | Define InLine Text formatting styles -- both paragraph level and phrase level.                 |
	 ------------------------------------------------------------------------------------------------  */
	em { /* Explicityly define more or less default formatting:  italics engaged....                  
			 My typical alternative is underlining for emphasis and italicizing for mild dysEmphasis.  */
		color: black; /* This allows easy black emphasis of otherwise greyed out lines using the
						 Kompozer WSIWYG HTML Editor toolBar button.                                   */
		font-style: italic; } /* Typical default setting.                                              */
/*  		::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
			: NotePad++ Parsing Error Note:  When I put comment inside blank em-element definitions  :
			: space { }, NotePad++ misColorizes text as if it were an Error!                         :
			:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */   
	.dysEm1_GreyText { /* Use for dysEmphasizing phrases while retaining underlying 
							italics/non-italics.                                                       */
		font-style: inherit;
		color: rgb(153, 153, 153);}
	.dysEm2_GreyNoItalic { /* Use for partial ("semi") dysEmphasis while retaining em-element 
								italics state.                                                         */
		font-style: normal;
		color: rgb(153, 153, 153);}
	.dysEm3_GreyItalic { 
		font-style: italic;
		color: rgb(153, 153, 153);}

	p.infoNote { /* Use for dysEmphasized informational Assides. Currently the same as dysEm1_GreyText? */
		color: rgb(153, 153, 153);}
		
	strong { /* Explicityly define more or less default formatting:  font-weight = bold ....             */
		color: black; /* This allows easy black strong-emphasis of otherwise greyed out lines using 
						 the Kompozer WSIWYG HTML Editor toolBar button.                                */
		font-weight: bold;} /*   */	
	  
/*   ------------------------------------------------------------------------------------------------
    | Define studio version of standard siteWide Legal Footer                                        |
	 ------------------------------------------------------------------------------------------------  */
	#docFooter{ /* A container to put it in -- for good format and later use.  Use with div#.          */
		background-color: #333333;}
	#legalNotes { /* Use with p#.                                                                       */
		font-size: 9px;
		line-height: 11px;
		color: #666666;
		font-weight: bold;
		text-align: center;
		padding: 0px 0px 2px 0px;}	  
	
/*   ------------------------------------------------------------------------------------------------
    | Define studio cognitiveColorSpace Classes.                                                     |
	 ------------------------------------------------------------------------------------------------  */
	.OpenVibe {color: white;}
	.SccVibe {color: rgb(204, 221, 255); /* Light Blue Grey */}
	.StAVibe {color: #990000; /* a brick red (CSS3-red = #FF0000; */}
	.StAVibeBkgd {background-color: #E0DDDD; /* a half-step of red above #DDDDDD;-gray */}
	.StBVibe {color: #009900; /* a dark green (CSS3-green = #008800;) */}
	.StBVibeBkgd {background-color: #DDE0DD; /* a half-step of green above #DDDDDD;-gray */}
	.StCVibe {color: #000000; /* total black (CSS3-black = #000000;) */}
	.StCVibeBkgd {background-color: #E8E8E8; /* our "reference value" of #DDDDDD;-gray */}
	.StDVibe {color: #800080; /* purple (CSS-purple is the same #800080;) */}
	.StDVibeBkgd {background-color: #E0DDE0; /* a half-step of green above #DDDDDD;-gray */}
	.StEVibe {color: #FFD700; /* gold (CSS3-gold is the same #FFD700;) */}
	.StEVibeBkgd {background-color: #777066; /* a half-step of green above #DDDDDD;-gray */}
	.StFVibe {color: #00AAAA; /* (CSS3-aqua = #00FFFF;) */}
	.StFVibeBkgd {background-color: #DDE0E0; /* a half-step of green above #DDDDDD;-gray */}
	
	ul#studioVibeList { } /* Structure to display the characteristic graphic (color) Vibes of
							each of the Studios. */
	ul#studioVibeList li { /* Extra space needed to show off text backgrounds without overlapping. */
		margin: 5px 0px;}
		
	/* Define standard text and anchor styling. */
/*    a:link, a:hover, a:focus, a:active {  */
/*	a {
	  color: #666666; 
	  text-decoration: none;}
    a:hover {
	  color: #999999;} */
	  
/*from Explore George */
/* Define centered black page. */
    div#ExGe-Page { /*This contains everything on the page but not the screen */
/*	  display:block; */
	  text-align:left;
	  background-color: #000000; /* 333333; */
	  border-width: 0px; border-style: none; /* border-width: 1px; border-color: red; border-style: solid; */
	  width: 800px; /* vs. 744px; ???? */
	  margin-right: auto;
	  margin-left: auto; }

/*   ----------------