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

* 				  { box-sizing: border-box; }

/* 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: 19pt; 
					font-weight: normal; 
					color: #555555; } 

h2                { margin: 1.4rem 0 .7rem 0;
					padding-bottom: .4rem;
					font-size: 16pt; 
					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; }

div#windw		  { width: 100%; 
					height: 100%; }



/* defined classes */
					
div.main          { width: 54rem; 
					margin-top: 2rem;
					margin-right: auto;
					margin-bottom: 2rem;
					margin-left: 4rem;
					padding: 2rem; 
					background-color: #ffffff;
					box-shadow: 0px 2px 6px #999999; }
					
img.brain         { width: 100px;
					height: 100px; }
					
div.leftChunk     { Xfloat: left; 
					margin: 0; 
					height: 21rem;
					 }
					
div.navChunk, div.rightChunk     
				  { float: right; 
					margin: 0; 
					height: 21rem; 
					width: 16rem; 
					}


div.navChunk a.on, div.navChunkFoot a.on, p.footLinks a.on, p.footDesignLinks a.on   
				  { background-color: #f4f4f4; 
				    color: #553333;
				  	text-decoration: underline;
					}
					
.address, .resume, .headLinks    
	      	      { font-family: helvetica, arial, sans-serif; 
	      			font-size: 10pt; 
	      			line-height: 1.5em;
	      			color: #000000; }
	      		
div.section       { margin-top: 1em; border-bottom: 1px solid #000033; }

p.introColumn     { margin-left: 0; 
					margin-top: .8rem;
					display: block; 
					width: 490px;
					font-family: helvetica, arial, sans-serif; 
					font-size: 11.2pt;
					vertical-align: top; 
					text-align: left; 
					line-height: 1.5em; }	
					
p.introColumn quote 
			      { display: inline-block; 
			        font-size:12.2pt; 
			      	line-height: 1.4rem;
			      	margin-bottom: 5px;
			        font-weight:bold; 
			        color: #663333; }	

p.rightColumn     { Xmargin-left: 21em; 
					display: block; 
					width: 21rem;
					float: right; 
					margin-top: -21rem;
					font-family: helvetica, arial, sans-serif; 
					font-size: 10pt;
					vertical-align: top; 
					text-align: left; 
					line-height: 1.5em; }	
					
p.rightColumn quote 
			      { font-size:12.8pt; 
			      	line-height: 1.4rem;
			      	margin-bottom: 15px;
			        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: 500px; }







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

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: 16rem;
					float: right; 
					font-size: 10.5pt;
					line-height: 1.3em;
					color: #444444; }
					
div.sectionDescripNoId  
				  { width: 21rem; 
				  	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.2pt; }

div.fullImage, div.fullHyperlink  
				  { display: none; }
				  
div.thumbDescrip  
				  { margin: 0; 
				    font-size: 10pt; 
					display: none; 
				  	position: absolute;
				  	z-index: 2;
				  	width: 18rem; 
				  	min-height: 8em; 
				  	margin: 0 0 1rem 0;
				  	padding: 1rem 1rem;
					border-radius: 0.6rem;
				  	right: 0;
				  	top: 0; 
				  	line-height: 1.4em; 
				  	color: #222222; 
				  	background-color: #f9f9f9;
				  	border: 1px solid #cccccc;
	              	box-shadow: 3px 3px 6px #777777; }

div.thumbDescrip p 
				  { margin: 1rem 0 0 0; 
				  	font-size: 10pt; 
				  	line-height: 1.4em;  
				  }
	              	
img.portThumb, img.portThumb4wide     
				  { width: 120px;
					height: 120px; 
					border-radius: 5px;
					box-shadow: 0px 3px 6px #777777;
					cursor: pointer; }
					
img.portThumb4wide { width: 490px;
					height: 120px;  }
					
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
				  { display: none; 
				  	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 slide viewer formatting - updates late may2022 **/
		  	
div.viewer        { display: none; 
					position: fixed;
				  	z-index: 4;
				  	top: 0;
				  	right: 0;
				  	bottom: 0;
				  	left: 0;
				  	width: 98%; 
				  	min-width: 64rem;
				  	height: 96%;
				  	margin: .6rem;
				  	padding: .7em;
				  	line-height: 1.4em; 
				  	color: #222222; 
				  	background-color: #f9f9f9;
				  	border: 1px solid #bbbbbb;
				  	border-radius: 1em;
	              	box-shadow: 3px 3px 6px #222222;
	              	transition: 2s; 
	              	}
	              	
div.viewerHeader  { width: 100%; 
					margin: 0;
					padding: 0 1rem;
					border-bottom: none;
				    }
	              	
div.viewerTitle   { height: 2rem; 
					margin: 1rem 0 .3rem 4rem;
					padding-bottom: 1rem;
					font-size: 19pt; 
					font-family: georgia, times new roman, serif; 
					font-weight: normal; 
					}
					
div.viewerNavWrapper    
			      { width: 100%; 
					height: 46px;
					margin: -46px 7px 10px 7px; 
					border-bottom: 1px solid #777777;
					}
					
div.bttnClose     { width: 5rem;
					float: right;
					margin: -5px 0 0 0;
					background-color: none;
					border: 0;
					font-weight: bold;
					white-space: nowrap; 
					cursor: pointer;
					}
					
div.bttnClose:hover 
				  { background-color: none;
				    color: #2222aa; }
					
div.bttnNext, div.bttnBack 
				  { display: inline-block;
				  	width: 44px; 
					height: 34px;
					background-color: #eeeeee;
					border: 2px solid #bbbbbb;
					border-radius: 9px;
					opacity: 1;
					white-space: nowrap; 
					cursor: pointer; 
					}
					
div.bttnBack      { margin: 0; }
					
div.bttnNext	  { float: right; 
					margin: 0 7px 0 0;
				    }
					
div.bttnNext p, div.bttnBack p
				  { margin-top: 8px;
					font-size: 24pt; 
					color: #666666;
					text-align: center; }

div.bttnNext:hover, div.bttnBack:hover 
				  { background-color: #cccccc; 
					border: 2px solid #aaaaaa; }
					
div.bttnNext p:hover, div.bttnBack p:hover
				  { color: #222222; }
					
div.viewerContent { width: 100%; 
					height: 100%;
				  	margin: 1rem 1rem 0 0;
				    }

div.viewerImg     { float: left; 
					width: 68%;
					height: 92%;
					margin-left: 7px;
					padding: 0;
					overflow: auto; 
				    }
					
div.viewerImg img { width: 100%;
					border-radius: 5px;
					border: 1px solid #999999; 
					object-fit: cover;
				    }
					
div.viewerInfoCol { float: right;
					width: 30%;
					z-index: 2;
					padding: 1rem;
					Xoverflow: auto;
				    }

div.viewerTextWrapper 
				  { margin-top: 1rem;
				  	height: 92%;
				  	overflow: auto; 
				  	}

div.viewerDescrip, div.viewerImgHyperlink, div.viewerImgDescrip, div.viewerProjects     
				  { min-height: 2rem;
					float: top; 
					padding-top; .6rem; 
					font-size: 10.2pt;
					line-height: 1.4em;
					}
					
div.viewerDescrip { border-top: 1px solid #777777; 
					margin: 4rem 0 .6rem 0; 
					padding-top: .6rem;
					font-size: 10pt;
					}

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

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

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

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


/** footer formatting **/
				
div.footer        { height: 19rem;
					margin-top: 4em; }
					
div.ballOfWireFoot	{ 
					height: 17rem;
					padding-top: 9rem; }
					
div.navChunkFoot 
				  { float: right; 
					margin: 0; 
					height: 21rem; 
					width: 16rem; 
				  	margin-top: -17.5rem; }

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: 18pt; 
					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; }