/* Define the layout variables.  Not used at the moment because IE does not support it. */
:root {
	--sl-banner-height: 70px;
	--sl-nav-width: 230px;
	--sl-tab-top: calc(var(--sl-banner-height) + 15px);  	/* 85 */
	--sl-date-top: calc(var(--sl-tab-top) + 25px); 			/* 110 */
	--sl-trail-top: calc(var(--sl-tab-top) + 35px);			/* 120 */
	--sl-nav-top: calc(var(--sl-trail-top) + 40px);			/* 160 */
}

#banner {
	position: absolute;
	top: 10;
	right: 0;
	left: 0;
	height: 70px; 
}

#tabs {
	position: absolute;
	top: 85px; /* Banner height + banner top + 5 */
	right: 0;
	left: 0;	
	height: 24px;	
}

#trail {
	position: absolute;
	top: 120px;	/* tabs + tabs height + 6 */
	right: 40px;
	left: 10px;
}

#date {
 	position: absolute;	
	top: 120px; 		/* Same as Trail */
	right: 45px; 		/* Leave some space in case a scrollbar is needed. */
	color: #808080;
	font-size: 14px;
	text-align: right; 	/* Align opposite of trail. */
}

#navigation {		/* see: -sl-book-box in the slStyle class for styling the navigation panel border and background in book mode. */
    position: absolute;
    top: 150px;	/* trail + 30 */
    left: 0;
    width: 230px; 
    font-weight: normal;  
	bottom: 0pt;
	border-top: 1px solid gray;
 	border-right: 1px solid gray;
 	padding-bottom: 60px;
 	overflow: auto;
}

#navigation.-sl-no-topic {
	border: 0;
	width: 0;
}

#main {
	position: absolute;
	top: 140px;	/* trail + 20 */
	right: 20px;
	bottom: 0;
	left: 250px;	/* navigation width + 20 */
	overflow: auto;
}

#main.-sl-no-topic {
	left: 40px;
	right: 0;
}


#next {	/* For book mode. */
	position: fixed;
	bottom: 0;
	width: 210px; /* Navigation width - 20 */
	background: inherit;
	border: 3px solid lightgray;
	margin-bottom: 10px; 
	left: 10px;
	z-index: 5;    /* Keep it on top */
}