@import url(https://fonts.googleapis.com/css?family=Montez|Handlee|Neucha|Patrick+Hand|Delius+Swash+Caps|Calligraffitti);

html {  /* Set border-box as the global default */
		box-sizing: border-box; }
*, *:before, *:after {  /* Allow each element to override */
		box-sizing: inherit; }
header, section, footer, aside, nav, main, article, figure {
		display: block; } /* HTML5 compat#EFEFD8 */


#header div, #header {xborder:.1em solid #eee;}
#header {display: table;width:100%;min-height:5em;margin:0px;overflow:hidden;
	border:.1em solid #121212;border-radius: 0 0 .8em .8em; 
	xbox-shadow: .1em .1em 1.2em #272724; 
	box-shadow: .1em .1em .8em RGBA(239, 239, 216, 0.46), 0em .1em 1.6em rgba(125, 203, 255, 0.59); background-color: #fff; }
#lftheader {display: table-cell;width:21%;min-height:5em;margin:0px;
 background-image: -webkit-linear-gradient( left, #1894B9 0%, #BDAA25 50%, #c9c900 100% );background-image: -moz-linear-gradient( left, #1894B9 0%, #BDAA25 50%, #c9c900 100% ); background-image: linear-gradient( left, #1894B9 0%, #BDAA25 50%, #c9c900 100% );
}
#rtheader {display: table-cell;width:20%;min-height:5em;margin:0px;
	background-image: -webkit-linear-gradient( right, #1894B9 0%, #BDAA25 50%, #c9c900 100% );background-image: -moz-linear-gradient( right, #1894B9 0%, #BDAA25 50%, #c9c900 100% );background-image: linear-gradient( right, #1894B9 0%, #BDAA25 50%, #c9c900 100% ); text-align: right; }
#midheader {display: table-cell;xxwidth:50%;min-height:5em;margin:0px;
	text-align:center;    background-image: -webkit-linear-gradient( left, #c9c900 0%, rgba(253, 229, 67, 0.39) 50%, #c9c900 100% );background-image: -moz-linear-gradient( left, #c9c900 0%, rgba(253, 229, 67, 0.39) 50%, #c9c900 100% );  background-image: linear-gradient( left, #c9c900 0%, rgba(253, 229, 67, 0.39) 50%, #c9c900 100% ); }	
#header h1, #header h3 {margin:0em;}
#header h1 {}
#header h3 {margin-top: -.5em; margin-left: 3em;}


#mainWrap { width:100%; vertical-align:top; margin-top:1em; }
#main { margin-right:.3em; 
	border-radius: .8em;border:.1em solid #121317; padding-bottom: 1em;
	box-shadow: -.1em .1em .9em rgba(0, 0, 0, 0.8); }


/*Main*/
body { margin:0px;  font-family:sans-serif; text-align:center;
	background-color: rgba(70, 165, 174, 0.71);
	background-color: rgba(0, 43, 123, 0.6);
	Xbackground-color: #D7DFD1; }

#header {margin: .5em auto;width: 95%;}
#mainWrap { width:99vw; }
#main { overflow:hidden;  min-height:15em;	 width:70%;
 display: inline-block; vertical-align: top; text-align: left; 
 background-color:#292926; background-color:#2577A6; background-color: #4A4E54; }
 

/* main text links ------- */
.mainText a:link, .mainText a:visited { color:#0cf; } /* #6BB4FF  */
.mainText a:hover, .mainText a:active { color:#FFD384; }
.mainText h3 a:link, .mainText h3 a:visited { color:#f5e9ad; } /* #6BB4FF  */
.mainText h3 a:hover, .mainText h3 a:active { color:#0cf; color: #d38d8d; }
a.back:link, a.back:visited { color:#A4A283; }
a.back:hover, a.back:active { color:#C8AECE; font-style:italic; font-size: 110%;
	text-shadow: .1em .3em .1em #181717; }

.back { position: absolute; display: block;
  margin: 0px; padding: .1em; border: none; 
  top: -2em; left: -.3em;
}

.mainUl { width: max-content; margin-top:2em; margin-left:2em; line-height: 1.6em;   }
.mainUl li { padding:.1em;padding-left:.3em;padding-right:.3em; 
	border-radius: .2em;border: .1em solid transparent;}
.mainUl li:hover { background-color:#397ee6; border: .1em solid #444343;
    box-shadow: 0em 0.1em 0.3em #383737;  }
.mainUl a:link, .mainUl a:visited { display:inline-block;width:100%; color: #e0ddb5; }
.mainUl a:hover, .mainUl a:active { color: #ecefc3;   }

.navBox { border-bottom: .1em solid #111; padding: .2em; padding-left: .6em;
    text-align: justify;    background-color: #fffffc; }
    	

/* ------------- Nav -----------------------------------------*/
#navWrap { display: inline-block;min-height: 21em;margin-left: .15em;margin-right: .6em; }
.navBox { position: relative; display: inline-block; 
 border:.4em solid #C3C51C;border-bottom:none;border-top:none;  
 margin-left:.15em; margin-right:.6em; text-align: left;  }

.navBox:nth-child(2n) {background-color: rgba(122, 238, 17, 0.52);}
.navBox:first-child {border: .4em solid #C3C51C;
    border-bottom: .1em solid #111; border-radius: .8em .8em 0 0; }
.navBox a:link, .navBox a:visited { text-decoration:none; display:inline-block; width:100%;height:100%;}

#mainNav { min-width:10em; border: .1em solid #eee; box-shadow: 0em .1em .8em #999;
	background-color: #354872;color:#cee;  }
#mainNav2 { display:block; margin-top:2em;border-radius:.6em; }
#mainNav h4, #mainNav2 h4 { margin:0px;padding:0px;margin-top: -1em;margin-left: -1.62em; }
/*  Nav Links  */
#mainNav ul, .navBox ul { line-height: 2.8em; }
#mainNav ul li, .navBox ul li { display: list-item; padding-left: 0.2em; }
#navUl { margin-top:0em; margin-bottom: 8em; Xlist-style-position: inside;
    padding: .1em; }
#lastNul { position: absolute; bottom: 0em; padding: 0px; width:90%; font-size:.9em; }
#lastNul li {list-style:none; word-break:break-word;word-wrap:break-word;}
/* colors */
.navBox li, .navBox a:link, .navBox a:visited { color: #0cf; }
.navBox li:hover, .navBox li a:hover, .navBox a:active { 
   color: #08b; }
.navBox .active a:link, .navBox .active a:visited {color: #B3F0FF;}
#lastNul li:hover {background-color: #a0caca; color: #123; }
#lastNul li:hover a:link, #lastNul li:hover a:visited { color: #123; }

#navUl3 li, #navUl3 a:link, #navUl3 a:visited { color: #cef5ff; }
#navUl3 li:hover, #navUl3 li a:hover, #navUl3 a:active {
    background-color: #FFF1BD; border-left: .1em solid #7FC39A; border-radius: 0.4em;
    text-shadow: -.1em .0em .3em #666; color: #3F3A31;
}
#navUl3 { list-style-position: inside; padding: .1em; }
/* Top nav hover  */
#navUl li:hover, #navUl li:hover a, #navUl li:hover a:link {
	 background-color: #2F5C93; color: #B3F0FF;     text-decoration: underline; }
 /* current nav active  */
#mainNav .active a:link, #mainNav .active a:visited { Xcolor: #fff; }
 /* current nav active hover   */
#mainNav li.active:hover a, #mainNav li.active:hover a:link, 
#mainNav .active a:hover, #mainNav .active a:active {  }

	
	
#tabs { }
#tabs ul {list-style:none;display:inline-block;margin:0px;}
#tabs li {display:inline-block; padding-left:.6em;padding-right:.6em;
border: .1em solid #333; border-radius: .8em .4em .8em 0em; border-bottom: none;
	margin-left: .8em;background-color:#fff; letter-spacing:.2em; 
	text-shadow: -.1em .2em .2em #A4A0A0; }
#tabs li:hover, #tabs .active {   }
#tabs a:link, #tabs a:visited {color: inherit; text-decoration: inherit;}

.active {background-color: #2F5C93;} 

	
#home, #design, #techc {  }
.displayBox { margin:1em;text-align:center;padding:.3em;
	border:.1em solid #aaa;border-radius:.8em; }
.displayBox ul { list-style-color:#1F4DB4; }
.b {font-weight:bold}
.highlight {font-style:italic;}

  /*used?*/
  /* webdeisgn */
#webs { }
.picrow { display: inline-block; margin:.6em; }
#webs a {margin:.2em;}
#webs a img { border:.2em solid #222;border-radius:.3em;box-shadow: 0 0 .3em #333; }
#webs a:hover img { box-shadow: 0 0 1em #aaa; }
#webs a:active img { box-shadow: 0 0 .3em #aaa; }
#cwrap {background-color: transparent; padding-bottom: .1em;}
#home, #design, #techc { width:auto; margin: .2em;
    margin-bottom: .9em;  overflow: hidden;
    border-radius: .8em; border: .1em solid #333; }    
#cwrap > div {  margin: .0em; margin-bottom: .9em; 
 border-radius:.0em; border-top:.0em; border-bottom:.1em solid #232425; }

.softLink a:link, .softLink a:visited { color: #09B5EE;
  background-color: rgba(255, 255, 238, 0.79); 
  padding-right:.4em;padding-left:.2em;
  border-radius: .2em; border: .1em solid rgba(0, 0, 0, 0); }
.softLink a:hover, .softLink a:active { color: #FF7146; 
 background-color: #ffe; padding-right: .4em; padding-left: .2em;
 border-radius: .2em; }
.sl2 a:link, .sl2 a:visited { padding:0;background-color:transparent;border: .0em solid rgba(0, 0, 0, 0); }


/* ------------------- content -------------------------------- */
#content {padding:1em;}
#content h2 { margin-top:0em; padding-left: .5em; 
  font-family:sans-serif;font-weight: normal; color: #99DBCD;
 background-color: #008CC1; 
 border: .1em solid RGBA(41, 76, 99, 0.82);
 border-radius: .32em .32em .21em .21em;
 box-shadow: 0 0 .1em rgba(17, 17, 17, 0.43), .0em .0em .3em rgba(108, 142, 171, 0.62); text-shadow: .1em .1em .3em #5d5d54; /* #A5A59E */
 background-image: -webkit-linear-gradient( top, #1B2023 0%, #23567D 55%, #222833 100% ); background-image: -moz-linear-gradient( top, #1B2023 0%, #23567D 55%, #222833 100% ); background-image: linear-linear-gradient( top, #1B2023 0%, #23567D 55%, #222833 100% );
}

.mainText {color:#def1ff; position:relative; }
.mainText h3 { border-bottom:.1em solid #c0c322; 
	font-family:monospace; font-size:1.5em; color:#fffdc8; }
 #prog .mainText h3 { border: 0.1em solid #c3ae59; border-radius: 0.3em;
	border-bottom:.3em solid #c0c322; padding-left:.5em; }
h3.h3mor { font-size:1.8em; margin-bottom: .1em; color: #d4e6d4;
	text-shadow: .1em .1em .2em #111110ed; text-decoration: underline;  }
p:first-letter {font-size:120%;color:#def1ff;}
.mainText p {  letter-spacing: .01em;  }


#footer {width:100%;min-height:2em;margin-top:3em; padding:.2em;
 background-color: #EBF5F8; color: #2577A6; text-align: center; 
 border:.1em solid #1792CD; border-radius:.4em; font-size:.8em; }
.cenDiv {display:inline-block; margin:.1em auto;}


/* popup overlays */
#overlay0 { position:fixed; top:0px; left:0px; width:100%; height:98vh;
 background-color: rgba(11,11,11,.7); color:#fff; 
 border: .4em solid #111; z-index:9999; }
img#picweb { max-height: 86vh; }
#overlay0 h4 { margin-top: .1em; }


/*FDonts*/
#header h1 {font-family: 'Montez',sans-serif; font-size: 3em; color: #333; 
    text-shadow: .1em .1em .3em #444442;
	text-shadow: 0em 0em .1em #ffe, 0.0em 0.10em 0.15em #0A1319; }
#header h3 {font-family: 'Handlee',sans-serif; color: #222; }
#cwrap div:first-child h2 { font-family: 'Montez','Handlee'; font-size:1.8em; }
.cbox h4 { font-family: 'xMontez','Handlee'; font-size: 1.3em; }
#lftheader {color:#aaa;}


/*    */
.github-btn{height:20px;overflow:hidden}.gh-btn,.gh-count,.gh-ico{float:left}.gh-btn,.gh-count{padding:2px 5px 2px 4px;color:#333;text-decoration:none;white-space:nowrap;cursor:pointer;border-radius:3px}.gh-btn{background-color:#eee;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fcfcfc),to(#eee));background-image:linear-gradient(to bottom,#fcfcfc 0,#eee 100%);background-repeat:no-repeat;border:1px solid #d5d5d5}.gh-btn:focus,.gh-btn:hover{text-decoration:none;background-color:#ddd;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#eee),to(#ddd));background-image:linear-gradient(to bottom,#eee 0,#ddd 100%);border-color:#ccc}.gh-btn:active{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.gh-ico{width:100%;height:100%;margin-right:4px;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='' height='' viewBox='12 12 40 40'%3e%3cpath fill='%23333' d='M32 13.4c-10.5 0-19 8.5-19 19 0 8.4 5.5 15.5 13 18 1 .2 1.3-.4 1.3-.9v-3.2c-5.3 1.1-6.4-2.6-6.4-2.6-.9-2.1-2.1-2.7-2.1-2.7-1.7-1.2.1-1.1.1-1.1 1.9.1 2.9 2 2.9 2 1.7 2.9 4.5 2.1 5.5 1.6.2-1.2.7-2.1 1.2-2.6-4.2-.5-8.7-2.1-8.7-9.4 0-2.1.7-3.7 2-5.1-.2-.5-.8-2.4.2-5 0 0 1.6-.5 5.2 2 1.5-.4 3.1-.7 4.8-.7 1.6 0 3.3.2 4.7.7 3.6-2.4 5.2-2 5.2-2 1 2.6.4 4.6.2 5 1.2 1.3 2 3 2 5.1 0 7.3-4.5 8.9-8.7 9.4.7.6 1.3 1.7 1.3 3.5v5.2c0 .5.4 1.1 1.3.9 7.5-2.6 13-9.7 13-18.1 0-10.5-8.5-19-19-19z'/%3e%3c/svg%3e") 0 0/100% 100% no-repeat}
.gh-count{position:relative;display:none;margin-left:4px;background-color:#fafafa;border:1px solid #d4d4d4}.gh-count:focus,.gh-count:hover{color:#0366d6}.gh-count::after,.gh-count::before{position:absolute;display:inline-block;width:0;height:0;content:"";border-color:transparent;border-style:solid}.gh-count::before{top:50%;left:-3px;margin-top:-4px;border-width:4px 4px 4px 0;border-right-color:#fafafa}.gh-count::after{top:50%;left:-4px;z-index:-1;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#d4d4d4}.github-btn-large{height:30px}.github-btn-large .gh-btn,.github-btn-large .gh-count{padding:3px 10px 3px 8px;font-size:16px;line-height:22px;border-radius:4px}.github-btn-large .gh-ico{width:20px;height:20px}.github-btn-large .gh-count{margin-left:6px}.github-btn-large .gh-count::before{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0}.github-btn-large .gh-count::after{left:-6px;margin-top:-7px;border-width:7px 7px 7px 0}.no-text .gh-ico{margin-right:0}