/*************************************************

     Engelbart Institute content css	 
	
	Corresponding javascript and css files are 
	in /templates and /modules and /includes    

**************************************************/

/*    BEGIN REPEATED SITE SETTINGS      */
    /* duplicated in content.css */
body  {
  margin      :  0px;  
  background  :  #e3e3e3; 
  line-height : 1.4em; 
  font-size	 : 16px;
  font-size	: 0.875em;
  font-family: verdana, arial, sans-serif;
}
/*
div  { 
  margin: 0px; 
  padding: 0px; 
  position: relative; 
  left: 0px; 
  top: 0px; 
  text-align: left; 
  font-size: 1em; 
  color: #000000;
}
 ->rem24-Oct-2022 */
 
#LeftBorder  { 
  margin-left  :  10px; 
  background   :  url('https://dougengelbart.org/templates/bootstrap_template/images/page-border-left.jpg') repeat-y;
}

#RightBorder  { 
  margin-right         :  10px; 
  background           :  url('https://dougengelbart.org/templates/bootstrap_template/images/page-border-right.jpg') repeat-y; 
  background-position  :  right top;
}

#ContentArea  { 
  margin      :  0px 10px 0px 10px; 
  background  :  #ffffff; 
  overflow    :  hidden;
}
/*    END REPEATED SITE SETTINGS      */

/* TEST PULL
*/

/* Note see INDENTATION below for separate level indentation settings */
h1 {
  padding-top: 10px;
  font-size: 1.5em;		  	/* was 18px */
  font-weight: 500;
  color: #000000;
  font-style: normal;
  margin: 24px 0px 15px 0px;
}


h1.mainheading + h1 { 		  	/* if h1 immediately follows mainheading,   */
  margin-top: 12px;			/* 	reduce the extra whitespace */
}

.mainheading { 
  font-size: 1.6rem; 		  	/* was 20px */
  line-height: 1.6rem;
  font-weight: 500; 
  color: #446898; 
  margin-top: -20px;
  margin-bottom: 24px; 
}

h1.mainheading .mainheading-subhead {
  font-size: smaller; 
  line-height: 1.5em; 	  		/* TODO figure in ems was 24px */
  display: block;
  margin-left: 2px;
  font-style: normal;
}

h2 {
  font-size: 1.3em;		  	/* was 14px */
  font-weight: 500;
  font-style: normal;
  margin-top: 24px;
  padding-left: 25px;
}

h3 {
  font-size: 1.2em;		  	/* was 13px */
  font-weight: 500;
  margin-top: 18px;
  padding-left: 25px;
}

h4 {
  font-size: 1.1em;	  		/* was 13px */
  font-weight: 500;
  font-style: italic;
  margin-top: 14px;
  margin-bottom: -3px;
  padding-left: 25px;
}

h5 {
  font-size: 1.0em;	  		/* was 12px */
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: -3px;
  padding-left: 25px;
}	
	
h6 {
  font-size: 1.0em;	  		/* was 12px */
  font-weight: bold;
  font-style: italic;
  margin-top: 1px;
  padding-left: 25px;
}
	
		

.small{font-size:-.75em; }

.contentItemTable{border:0px; }

.contentItemTableLeft{
  vertical-align: top;
  padding: 0px 10px 0px 0px;
}

.contentItemTableRight{
  width: 180px; 
  vertical-align: top;
}
	
.contentItemTableRight div{
  border:3px outset #007297;
  padding:10px;
  text-align: center;
}
.contentItemTableRight div p{font-size: 0.9em; /* was 10px */
}



/*************************************************

    Classes added by Christina since 2/1/2019       

**************************************************/




/***** INDENTATION *****/

.level1  { margin-left: 0px; padding-left: 0px; }
.level2  { margin-left: 0px; padding-left: 0px; }
.level3  { margin-left: 20px; padding-left: 0px; } 
.level4  { margin-left: 40px; padding-left: 0px; } 
.level5  { margin-left: 60px; padding-left: 0px; }
.level6  { margin-left: 80px; padding-left: 0px; }


h2  { margin-left: 12px; padding-left: 0px; }
h3  { margin-left: 24px; padding-left: 0px; } 
h4  { margin-left: 40px; padding-left: 0px; } 
h5  { margin-left: 60px; padding-left: 0px; }
h6  { margin-left: 80px; padding-left: 0px; }
/*
h2  { margin-left: 12px; padding-left: 0px; }
h3  { margin-left: 18px; padding-left: 0px; } 
h4  { margin-left: 24px; padding-left: 0px; } 
h5  { margin-left: 30px; padding-left: 0px; }
h6  { margin-left: 36px; padding-left: 0px; }*/

/* 
LIST INDENTATION
   NOTES: 
   1. tag both the ol/ul AND each of it's li statements with above .level class
      so tools can determine LEVEL independent of view/print formatting
   2. make ol margin-left same as .level above, 
   3. make ul margin +3 because bullet column narrower than num column 
   4. When nested, ul or ol will inherit a parent ul/ol indentation and ADD its own margin-left  
   5. To accommodate untagged lists, do not set ol, ul { margin: 0px; padding: 0px; }   */
ol.level2 { margin: 0; padding: 0; margin-left: 20px; }
ol.level3 { margin: 0; padding: 0; margin-left: 30px; }
ol.level4 { margin: 0; padding: 0; margin-left: 40px; }
ol.level5 { margin: 0; padding: 0; margin-left: 60px; }
ol li { margin-left: 0px; padding-left: 5px; padding-bottom: 9px; }
 
ul.level2 { margin: 0; padding: 0; margin-left: 23px; }
ul.level3 { margin: 0; padding: 0; margin-left: 33px; }
ul.level4 { margin: 0; padding: 0; margin-left: 43px; }
ul.level5 { margin: 0; padding: 0; margin-left: 63px; }
ul li { margin-left: 0px; padding-left: 0px; padding-bottom: 9px; }


/* Lists */
li { 
  font-size: 1.0em;
  font-family: inherit; 
}


/* Note: started in 2008 with fatlist which stopped working, ~2021 created spacious-list */
ol.fatlist { padding-bottom: 12px; text-indent: -48px }
ul.fatlist { padding-bottom: 12px; text-indent: -48px }
li.fatlist { padding-bottom: 12px; text-indent: -48px }

/* Note: please use this instead of fatlist */
ul.spacious-list li {
  margin-bottom:9px; 		/* or 12px */
}

ol.spacious-list li {
  margin-bottom:9px;		/* or 12px */
}

/* to cover places where this is over tagged, not recommended */
li.spaciouslist { padding-bottom: 12px; }



.figure {
  display: block;
  width: 80%;
  min-width: 250px; 
  max-width: 650px;
/*max-height: 600px;*/
  padding-left: 15%; /* to preserve level indenting */
  padding-right: 5%;
  align: center;
  margin-left: auto;
  margin-right: auto;
  }
.figureCaptionCell  { /* Note this was erroneously tagged in the tr instead of td */
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 6px;
  text-align: center;
  font-style: italic;
  font-size: 0.9em;
  }
  
.purplenumberFigure, .purplenumberFigure a, .purplenumberFigure a:link, .purplenumberFigure a:visited, .purplenumberFigure a:hover, .purplenumberFigure a:active { 
  font-family:  verdana, arial, sans-serif;
  color: #C8A8FF;
  font-size: 0.9em;    /* was 9pt */
  font-weight: bold;
  font-style: normal;
  text-transform: lowercase;
  text-decoration: none;
  display: block;			/* TODO revisit this after getting the other purples working */
  float:right;
  position:relative; 
  margin-top: -16px; 
  padding-bottom: +18px; 
  }

/* SEE template.css for full Purple Number settings, this then alters some of that */  
.purplenumber, .purplenumberFigure, .purplenumberH0, .purplenumberH1, .purplenumberH2, .purplenumberH3, .purplenumberH4, .purplenumberH5, .purplenumberH6 { 
  font-size: 0.8rem;	/* TODO this mostly works, now change template_css accordingly */
  font-weight: normal;
  padding-bottom: 0em;
  margin-right: -12px;
  display: inline; 
  float: right; 
  bottom: -0em; 
  }


/*******    DEFINE rightpanel parameters      *******/

.contentItemTable { }


td.contentItemTableRight { 
  font-size: 0.9em;
  text-align: center;
}

td.contentItemTableRight h1 { 
  font-size: 1.275em;
  font-weight: 500;
  margin-top: -3px;
}

td.contentItemTableRight h2 { 
  font-size: 1.2em;
  font-weight: 500;
}

td.contentItemTableRight .sidebarheading { 
  font-weight: 500; 
  font-size: 1.3em;
}   
td.contentItemTableRight .sidebarimg { 
  width: 90%;
}

td.contentItemTableRight hr { 
  width: 90%;
  color:#3284ad; 
  margin-top: 32px; 
  margin-bottom: 24px;
}

table.figure{
  text-align: center;
  font-style: oblique;
  margin:15px auto;
  width:100px; 
  padding: 2px;
}


/* 
    ***    ADDING styling for Quotable Callouts    ***
*/

div.quotable-callout {
  display: table;
  margin-left: 0px; 
  margin-right: 0px;  
  padding-top: 8px; 
  padding-bottom: 8px;
}
div.quotable-callout blockquote { 
  text-align: center; 
  margin-left: 12%;
  margin-right: 12%;
  background-color: transparent;
  font-family: Georgia, 'Times New Roman', Times, serif; 	
}
div.quotable-callout blockquote a { 
   font-family: Georgia, 'Times New Roman', Times, serif;       
}
div.quotable-callout span.quotable-text {
  font-style: italic;
  font-size: 1.3em;			/* was 12pt */
  line-height: 1.55em; 
}
div.quotable-callout span.quotable-text:before { 
  font-size: 44px;
  font-style: italic; 
  line-height: 0.6em;  
  margin-left: -14px;
  padding-right: 6px;
  vertical-align: -14px;
  content: "\275D";
  opacity:0.2;
}
div.quotable-callout span.quotable-text:after {
  font-size:44px;
  font-style: italic; 
  line-height:0.6em;
  vertical-align:-14px;
  padding-right: 0.3em;
  content: "\275E"; 
  opacity:0.2;
}
div.quotable-callout footer {
  display:block;
  padding: 18px 8px 6px 8px;
  text-align:center;
  padding-left: 10%; 
  padding-right: 10%; 
}
div.quotable-callout cite {
  font-size:11pt;
  line-height: 20px;
  font-style: normal; 
}
div.quotable-callout blockquote cite:before {
   content: "\2013";
}


/* 

    ***    ADDING styling for Quotable Writings    ***  
*/
div.quotable-writings {
  display:table;
  font-size:inherit;
  margin-left:0%; 
  margin-right:10%;  
}
div.quotable-writings blockquote {  /* padding determines gap btwn text and " marks */
   position: relative;
   margin: 0.5em 0.5em 0.5em 0.5em; /* top right bottom left */
   padding: 0.3em 3em  0.3em 3.5em; /* top right bottom left */
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
div.quotable-writings blockquote:before {
  position: absolute;
   font-size:4em;
   line-height: 1;
   top: 0;
   left: 0;
   content: "\275D";
  opacity:0.2;
}
div.quotable-writings blockquote:after {
  position: absolute;
   float:right;
   font-size:48px;
   line-height: 1;
   right:0;
   bottom:0.0em;
   content: "\275E";
  opacity:0.2;
}
div.quotable-writings blockquote footer {
   padding: 6px 0 0 12px;
   text-align:left;
}
div.quotable-writings blockquote cite:before {
   content: "\2013";
}

/* 
    ***    ADDING video containers      ***
*/
/* BEGIN: Code for fluid video frames */
.video-container {
 position:relative;
 padding-bottom:60.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
 }
.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 }


/*  is this redundant? comment out and see
  ******    ADDING video containers      *******/

/* BEGIN: Code for fluid video frames 
.video-container {
 position:relative;
 padding-bottom:60.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
 }
.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 }*/


/*******    ADDING visual inserts and sidebars for images and videos      *******/

/***  new featured sidebar and sidebar caption (Sep 2022)  ***/
div.featured-sidebar-right {
  float: right;
  width: 50%;
  padding-left: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.sidebar-caption {
  display: block;
  font-size: 0.7rem;
  line-height: 0.95rem;
  margin-top: 4px;
}
/***  depracating use of table tagging for this  ***/
table.visuals-sidebar {
 width: 40%;
 align: right;
 }

table.visuals-sidebar td { 
 padding-bottom:6px;
 padding-left:10px;
 width: 100%; 
 }

table.visuals-sidebar tr { 
 vertical-align: top; 
 }

table.visuals-sidebar .image-caption {
 display: block;
 text-align: center;
 font-style: italic;
 padding-top: 2px;
 padding-left: 3px;
 padding-right: 3px;
 }

table.visuals-sidebar .video-minutes {
 font-style: normal;
 }



/*******    ADDING whole section settings: HISTORIC FIRSTS    *******/

table.visuals-sidebar .FIRSTS-imgicon {
 width: 50%;
 float: left;
 padding-right: 3px;
 padding-bottom: 8px;
 }

table.visuals-sidebar .FIRSTS-imgicon-caption {
  display: table;
  padding-top: 6px;
  padding-right: 6px;
 }  

table.firsts-teaser {
  width: 25%;
  max-width:225px; 
}

div.FIRSTS-sideheader {
  background-color: #fafbfd ; 
  font-size: 1.2em;
  font-weight: bold; 
  color: darkgray ; 
  padding: 6px; 
  text-align: center;   
}

div.FIRSTS-sideheader a { 
  color: darkgray ;   
}

div.FIRSTS-sideheader a:hover {
  color: #40678d; 
  text-decoration: underline;   
}


/*******  PUBS -  section settings: PAPERS (PUBS)  TODO id the pages and fix the following accordingly  *******/

div.docinfo {
  display:none;
}

div.pub-banner {			  	/* for example SRI report banner used in AHI/3906 */
  display: block;
  margin-bottom: 40px;
}

h0.mainheading {
  display: block;
  text-align: center;
}

span.mainheadingtitle {
  display: block;
  margin-top: 24px;
  text-align: center;
  font-size: 1.5rem; 		  	/* was 18pt */
  line-height: 1.5rem;
  font-weight: normal;
  color: black;
}

span.mainheadingdetails {
  display: block;
  margin-top: 12px;
  text-align: center;
  line-height: 1.2em; 		  	/* was 14pt */
  font-size: 1.2em; 		  	/* was 12pt */
  font-weight: normal;
}

hr.pubnote-rule {
  display: block;
  width: 100%;
  align: center;
}

span.mainheadingpubnote {
  display: block;
  text-align: center;
  margin-left: 25px;
  padding: 18px;
  margin-right: 25px;
  font-size: 0.9em;
}

span.mainheadingmore {
  display: block;
  text-align: center;
  font-size:  1.1em;			 /* was 12px */
  font-weight: normal;
  text-align: left;
}

span.originally-underlined, span.author-underlined  {
  font-style: italic; 
}

/* TABLE may be redundant with above? */
table.figure {
  text-align: center;
  font-style: oblique;
  margin: 12px 3px 3px 3px; /* top right bottom left */
  width: 90%; 
  padding: 2px;
}

table.figure .figureImageCell {
  text-align: center;
}
	
td.figureImageCell img {
  max-width: 900px;
  max-height: 900px; 
}

table.figure .figureCaptionCell {
  font-style: oblique; 
  line-height: 12px;
  width: 80%;
}


/*******   ADDING classes for Press and Blog RSS Include       *******/

 /* standard rssinclude classes   TODO add PRESS INCLUDES and id the pages */

 div.rssincl-clear {
  clear: both;
  margin-bottom: 18px;
}

 a.rssincl-itemtitle {
  color: blue;
}






/*    END Christina's additions    *********************/