@charset "UTF-8";

/*************************************************************************
*	Main style sheet for the new Statistics Tutorial layout
* ------------------------------------------------------------------------
*	D.C.Stone June 2020
* ------------------------------------------------------------------------
*  This provides the basic structure for a page layout with an upper
*	navigation/breadcrumb bar and a continuous right side bar
**************************************************************************/

html, body {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

body {
	color: #000000;					/* Default black text on white background */
	background-color: #FFFFFF;
	font-size: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.4;
	width: 100%;						/* use maximum available room */
	min-width: 600px;				/* limit how narrow the layout will shrink before it stops. */
/*	margin: 0 auto;					/* use this if a fixed width is set to centre page in window */
}

/** Site identification **/
header {
	background-color:	#EEEEEE;	/* light-grey background */
	color:  #00204E;				/* default U of T blue */
	border: 0;	
	text-align: center;
}

/** Site Naviation and bread crumb trail **/
nav {
	background-color: #FAFAFA;
	color: #00204E;					/* default U of T blue text */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
}
nav ol, nav ul, .sideMenu ul {
	 display: block;
    list-style-type: none;
    margin: 0;
    padding-left: 0.5em;
}
nav li {
    display: inline-block;
}
nav a, .sideMenu a {
	text-decoration: none;
}
.drop-down {
	background-color: #F0F0F0;
	border: 1px solid #CCCCCC;
	width: 10em;
}
#topic-nav, #extra-nav {
	background-color: #FCFCFC;
	list-style-type: none;
	text-decoration: none;
	padding: 0;
	width: 10em;
	float: left;
	position: absolute;	/* does not change layout */
	z-index: 999;			/* appears on top when shown */
}
#topic-nav {
	display: none; 			/*	display: block; to show, none to hide */
	margin-left: -1px;
}
#topic-nav li {
	border: 1px solid #CCCCCC;
	width: 100%;
}
#topic-nav li a, #extra-nav li a {
	display: block;	
	padding-left: 0.3em;
}
#topic-nav li a:hover, #Main-Navbar li a:hover, #extra-nav li a:hover {
	background-color: #ffc;
}


/** main-wrapper - this keeps everything between the header and the footer **/
.main-wrapper {
	border-right: 10em solid #FFFFFF;	/* Reserve 10em of space on right for side panel */
}

/** Site content sections - divides each page content into logical blocks **/

section {
	padding-left: 1em;
	padding-right: 1em;
}
section h2 {
	border-top: 1px solid #cccccc;
}

/** Contains supplemental links related to the main page **/
.page-sidebar {
	width: 10em;         			/* 1em less than .main border width */
	padding: 1px 0.4em;				/* 1px top and bottom, 0.5em left and right */
	float: right;					/* position on the right of anything else in inner-content */
	border-top: 1px solid #CCCCCC;
	margin-top: -1px;
}

footer {
	background-color: #FAFAFA;
	border-top: 1px solid #cccccc;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.3em;
}


/** inner-content
*   -------------
*	- keeps the actual main content and the right-hand panel
*	together within the main wrapper, but allows the left-hand
*	panel to be positioned beside this content
**/
.inner-content {
	width: 100%;
	float: right;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 0 1px;			/* puts borders between middle and the side columns. */
	margin: 0 -1px;					/* compensate for the borders because of
				   													100% width declaration */
}

/** page-content
*   ------------
*   - this is the container for the actual content of the page,
*   which goes between the left and right side bars. If you want to,
*	you can set a width of e.g. 92%, which ensures that there is always
*	some room on the side (before the right side panel.)  Make sure this
*	has the same background as main-wrapper unless you want to see where
*	the page-content stops within the centre column.
**/
.page-content {
	background: #FFF;				/* default black text on white background */
	color: #000;
	padding: 0.5em 1em;				/* 0.5em top and bottom, 1em left and right */
	float: left;					/* should position on left edge of inner-content */
}

/** page-sidebar-left
*   -----------------
*   - contains the left-hand side bar within the page-container,
*   which could be a navigation menu (just as an example)
*
*	See the notes on sizing in page-sidebar-right!
**/
.page-sidebar-left {
	background: #F8F8F8;			/* default pale gray background */
	color: #000000;					/* default black text */
	width: 9em;         			/* 1em less than .main border width */
	margin-left: -10em;				/* overlay left border exactly */
	padding: 1px 0.4em;				/* 1px top and bottom, 0.5em left and right */
	float: left;					/* keep it to the left of inner-content within main-wrapper */
	position: relative; 			/* avoid WinIE peekaboo bug */
}

/** page-sidebar-right
*   ------------------
*   - contains the right-hand side bar within the page-container,
*   which could be additional commentary, related links, ads. etc.
**/
.page-sidebar-right {
	color: #000;					/* defaut black text */
	background: #FFF;				/* default white background */
	width: 9em;         			/* 1em less than .main border width */
	margin-right: -10em; 			/* overlay right border exactly */
	padding: 1px 0.4em;				/* 1px top and bottom, 0.5em left and right */
	float: right;					/* position on the right of anything else in inner-content */
	position: relative; 			/* avoid WinIE peekaboo bug */
	border-top: 1px solid #CCCCCC;
	margin-top: -1px;
}

/** page-footer
*   -----------
*   - sits at the very bottom of the page to finish it up;
*   contains copyright, contact, modification date, etc.
**/
.page-footer {
	clear: both;
	background:#999999;				/* default mid gray background */
	color: #eee;					/* default light grey text */
	padding: 1px 0.5em 0.5em 0.5em; /* avoid margin collapse */
	border-top: 1px solid #666666;

}

/* clear floats to stretch column lengths */
.main-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* zoom stretches float containers in WinIE. If you're a 
stickler for validation, put this in a conditional comment
in the head of the html file or as an extra style definition
.main-wrapper {
	zoom: 1;
}
 */

/* inline-block stretches float container in MacIE
   and prevents bizarre container widths */
* html>body .inner-content,
* html>body .page-content,
* html>body .main-wrapper {
	display: inline-block;
}

/* end float clearing */
* html>body .page-content {
	margin-right: -100%;
}