/* css_portfolio.css - CSS Cognitive Event Horizon pRC mar2022 */

/* base HTML formatting */
body              { margin: 0; 
					font-size: 10pt;
					font-family: helvetica, arial, sans-serif;
					color: #330000; 
					background-color: #dddddf; }
					
a                 { font-weight: bold; text-decoration: none;  }
a:link            { color: #aa3333 }       /* unvisited link */
a:visited         { color: #663333 }       /* visited links  */
a:active          { color: #ff0000 }       /* active links   */
a:hover           { text-decoration: underline; }

h1                { font-family: georgia, times new roman, serif; 
					font-size: 21pt; 
					font-weight: normal; 
					color: #555555; } 

h2                { margin: 1.4rem 0 .7rem 0;
					padding-bottom: .4rem;
					font-size: 15pt; 
					font-family: georgia, times new roman, serif; 
					font-weight: normal; 
					color: #553333; 
					border-bottom: 1px solid #333333; } 

dl  		      { position: relative; 
					margin: 0 0 4em 0; 
				  	padding: 0; 
				  	font-family: helvetica, arial, sans-serif; }
				  	
dt, dd            { margin: 0; font-size: 10pt;  }
dt  		      { margin: 0; padding: 0; display: inline; }
dd  		      { display: none; 
				  	position: absolute;
				  	z-index: 2;
				  	width: 18.5rem; 
				  	min-height: 8em; 
				  	margin: 0 0 1rem 0;
				  	padding: .7em;
				  	right: 0;
				  	top: 0; 
				  	line-height: 1.4em; 
				  	color: #222222; 
				  	background-color: #eeeeee;
				  	border: 1px solid #bbbbbb;
	              	box-shadow: 3px 3px 6px #222222; }

p                 { font-size: 10.5pt; }

dd p              { font-size: 100%; }

dt img            { box-shadow: 0px 3px 6px #777777; }

dt a:hover img    { box-shadow: 3px 3px 6px #222222; }





/* defined classes */
					
div.main          { width: 46rem; 
					margin: 2em auto 2em 4em;
					margin-right: auto;
					margin-right: auto;
					padding: 2rem; 
					background-color: #ffffff;
					box-shadow: 0px 2px 6px #999999; }
					
img.brain         { width: 100px;
					height: 100px; }
					
p.rightColumn quote 
			      { font-size:13.8pt; 
			        font-weight:bold; 
			        color: #663333; }

div.projects      { width: 24rem;
					padding: 1rem 0 0 0;
					font-size: 10pt; }
	              	
div.projectsOld      { width: 24rem;
					padding: .8rem;
					font-size: 10pt;
					background-color: #f8f8f8;
				  	border: 1px solid #eeeeee;
	              	box-shadow: 0px 1px 3px #999999; }
	              	
ul.projectExamples { margin-top: 0;
					margin-left: -2.5rem;
		  			font-size: 10pt;
					line-height: 1.3em; }
					
ul.projectExamples li { 	
					margin-bottom: .4rem; 
					list-style-type: none; }	

div.thumbStacker  { width: 420px; }

dl div.descrip    { display: block; 
					width: 19rem;
					float: right; 
					font-size: 10.5pt;
					color: #444444; }
dl div.descrip p  { font-size: 10.5pt; }






/** new formatting 15apr2022 - remove dl code **/

div.main          { position: relative; 
					top: 0; 
					z-index: 1; 
					margin-left: auto; 
				  	margin-right: auto; }

div.sectionWrapper { position: relative; 
					margin: 0 0 4em 0; 
				  	padding: 0; 
				  	font-family: helvetica, arial, sans-serif; }
				  	
div.sectionIntro, div.sectionDescrip, div.sectionDescropNoId 
				  { display: block; 
					width: 19rem;
					float: right; 
					font-size: 10.5pt;
					line-height: 1.3em;
					color: #444444; }
					
div.sectionDescripNoId  
				  { width: 19rem; 
				  	z-index: 1; 
				    float: right; 
				    margin: -8rem 0 0 0;
					font-size: 10.5pt;
					line-height: 1.3em;
					color: #444444; }

div.sectionIntro p, div.sectionDescrip p  
				  { font-size: 10.5pt; }

div.fullImage, div.fullHyperlink  
				  { display: none; }
div.thumbDescrip  
				  { margin: 0; font-size: 10pt; 
					display: none; 
				  	position: absolute;
				  	z-index: 2;
				  	width: 18.5rem; 
				  	min-height: 8em; 
				  	margin: 0 0 1rem 0;
				  	padding: .7em;
				  	right: 0;
				  	top: 0; 
				  	line-height: 1.4em; 
				  	color: #222222; 
				  	background-color: #f9f9f9;
				  	border: 1px solid #cccccc;
	              	box-shadow: 3px 3px 6px #777777; }
	              	
img.portThumb, img.portThumb4wide     
				  { width: 100px;
					height: 100px; 
					border-radius: 5px;
					box-shadow: 0px 3px 6px #777777;
					cursor: pointer; }
					
img.portThumb4wide { width: 410px;
					height: 100px;  }
					
img.portThumb:hover, img.portThumb4wide:hover
				  { box-shadow: 3px 3px 6px #222222;
					cursor: pointer; }

div.imageAspect   { display: none; }




/* beta test links between old and new portfolios - 01may2022 */

div.betaTestLink, div.betaTestLinkNu
				  { width: 8rem;
					height: 4rem; 
					float: right; 
					top: 0;
					margin-top: -11rem; 
					padding: 2em .7em .2em 1.3em;
					font-size: 13pt;
				  	line-height: 1.4em; 
				  	text-align: left; 
				  	color: #666666; 
				  	background-color: #f9f4bb;
				  	border: 1px solid #dddddd;
				  	border-radius: 0 0 15px 15px;	
	              	box-shadow: 3px 3px 6px #aaaaaa;
	              	cursor: pointer; }
	              	
div.betaTestLinkNu 
				  {	width: 30rem;
	              	height: 5rem;
	              	padding: 2em .7em .7em 1.3em;
	              	 }
	              	
div.betaTestLink a    
				  { width: 7.5rem;
					height: 3.5rem; 
					color: #666666;
					cursor: pointer; }
					
div.betaTestLinkNu a    
				  { width: 20rem;
					height: 1.5rem; 
					margin-bottom: .7em;
					color: #666666;
					cursor: pointer; }
					
div.betaTestLinkNu p, div.betaTestLinkNu p.Nheading
			      { margin:0;
			      	padding: 0;
					font-size: 10pt; 
					line-height: 1.3em;  
					color: #333333; }

div.betaTestLinkNu p.Nheading 
				  { margin-bottom: .3rem;
				  	font-size: 13pt;
				  	line-height: 1.4em; 
					color: #111111; }






/** new viewer formatting - late apr2022 **/
		  	
div.viewer        { display: none; 
					position: fixed;
				  	z-index: 4;
				  	top: 0;
				  	right: 0;
				  	bottom: 0;
				  	left: 0;
				  	width: 95%; 
				  	min-width: 64rem;
				  	Xmax-width: 74rem;
				  	height: 90%;
				  	margin-top: 1rem;
				  	margin-left: 2%; 
				  	margin-right: 3%; 
				  	padding: .7em;
				  	line-height: 1.4em; 
				  	color: #222222; 
				  	background-color: #f9f9f9;
				  	border: 1px solid #bbbbbb;
	              	box-shadow: 3px 3px 6px #222222;
	              	transition: 2s; }
	              	
div.viewerHeader  { width: 96%; 
					margin: 1rem;
					border-bottom: 1px solid #666666; }
	              	
div.viewerTitle   { height: 2rem; 
					margin: 1.4rem 0 0 0;
					padding-bottom: .4rem;
					font-size: 19pt; 
					font-family: georgia, times new roman, serif; 
					font-weight: normal;  }

div.viewerImg     { position: relative;
					top: 0;
					right: 0;
					width: 63%;
					min-width: 38rem; 
					max-height: 88%; 
					margin: -61rem 2rem 0 25.4rem;
					overflow: auto; 
					background-color: #dddddd;
					border-radius: 5px;
					border: 1px solid #999999; }
					
div.viewerImg img { width: 100%;
					object-fit: cover;
					 }
					
div.leftInfoCol   { position: relative;
					width: 32%;
					min-width: 23rem;
					margin: 1rem;
					height: 60rem;
					font-size: 11.5pt; 
					overflow: auto;
					 }
					 
div.bttnClose     { width: 5rem;
					float: right;
					margin: -2.5rem 0rem 0 85%;
					background-color: none;
					border: 0;
					font-weight: bold;
					white-space: nowrap; 
					cursor: pointer; }
					
div.bttnClose:hover 
				  { background-color: none;
				    color: #2222aa; }

div.viewerNavWrapper    
			      { margin: 0; 
			      	background-color: #f9f9f9; }
					
div.bttnNext, div.bttnBack 
				  { display: inline-block;
				  	width: 9rem; 
					height: 24px;
					background-color: #dddddd;
					border: 2px solid #888888;
					border-radius: 5px;
					opacity: 1;
					white-space: nowrap; 
					cursor: pointer; }
					
div.bttnBack      { margin-right: 4rem; }
					
div.bttnNext	  { margin: -24px 0 0 0;
					margin-left: auto; }
					
div.bttnClose p, div.bttnNext p, div.bttnBack p
				  { width: 7rem; 
					margin-top: .3em;
					margin-left: auto;
					margin-right: auto;
					margin-bottom: -.2rem;
					text-align: center; }

div.bttnNext:hover, div.bttnBack:hover { background-color: #eeeeee; }

div.viewerTextWrapper 
				  { margin-top: .7rem;
				  	height: 75%;
				  	overflow: auto; }

div.viewerDescrip, div.viewerImgHyperlink, div.viewerImgDescrip, div.viewerProjects     
				  { width: 22rem; min-height: 2rem;
					float: top;
					margin: 0; 
					padding-top; .6rem; 
					font-size: 11.5pt;
					line-height: 1.4em;
					 }
					
div.viewerDescrip { padding-bottom: .6rem; }

div.viewerDescrip p.hideThis { display: none; }
					
div.viewerImgHyperlink 
				  { padding: .6rem 0; }
				  
div.viewerProjects 
				  { height: 19rem; 
					font-size: 11.5pt;
					color: #666666; }
					
div.viewerDescrip p, div.viewerImgHyperlink p, div.viewerImgDescrip p, div.viewerProjects p     
				  { padding-bottom: .5rem;
				  	font-size: 11.5pt; }

div.viewerProjects ul.projectExamples li 
				  { margin: 0 0 .5rem 0; 
					font-size: 11pt; }
					
div.viewerProjects ul.projectExamples li p 
				  { margin: 0; 
				  	padding-bottom: .2rem 0;
				  	font-size: 11pt; }

div.viewerDescrip  { margin-top: 1rem; }
div.viewerProjects { margin-top: 1rem; }

/**
transition: margin-top .3s;
transition: margin-left .3s; 
					
**/


/** footer formatting **/
				
div.footer        { margin-top: 4em; }

p.footHd          { padding-bottom: .4em;
					font-size: 10pt;
					border-bottom: 1px solid #222222; }
p.footHd .footBigSerif { 
					font-family: georgia, times new roman, serif; 
					font-size: 14pt; 
					font-weight: normal; }
p.footHd strong   { font-family: georgia, times new roman, serif; }
p.footLinks, p.footDesignLinks       
				  { font-family: helvetica, arial, sans-serif; 
					font-size: 10pt; 
					line-height: 16pt; }
p.footDesignLinks { margin-top: .3em; }