'CantarellOblique'@charset "UTF-8";
@font-face {
    font-family: 'UnderwoodChampionRegular';
    src: url('fonts/underwood_champion-webfont.eot');
    src: url('fonts/underwood_champion-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/underwood_champion-webfont.woff') format('woff'),
         url('fonts/underwood_champion-webfont.ttf') format('truetype'),
         url('fonts/underwood_champion-webfont.svg#UnderwoodChampionRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'navFont';
    src: url('fonts/TYPEW.eot'),
    src: url('fonts/TYPEW.ttf');
}
@font-face {
    font-family: 'CantarellOblique';
    src: url('Cantarell-Oblique-webfont.eot');
    src: url('Cantarell-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cantarell-Oblique-webfont.woff') format('woff'),
         url('Cantarell-Oblique-webfont.ttf') format('truetype'),
         url('Cantarell-Oblique-webfont.svg#CantarellOblique') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CantarellRegular';
    src: url('Cantarell-Regular-webfont.eot');
    src: url('Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Cantarell-Regular-webfont.woff') format('woff'),
         url('Cantarell-Regular-webfont.ttf') format('truetype'),
         url('Cantarell-Regular-webfont.svg#CantarellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* CSS Document */

* {
 padding: 0;
 margin: 0;
}
body {
	font-family: 'CantarellRegularCantarellRegular', Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
  background-color:#999889;
  background: url(images/concrete.jpg) center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wrapper {
	width: 1024px;
	margin: 0 auto;
	background-color: #293A40;
	background-color: rgba(11, 53, 67, 0.5);
	padding: 3px 0px 8px 0px;
	border-radius: 15px;
	
}
#frame{
  margin-left: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 1);
  min-height: 765px;
  width: 1010px;
  z-index: 10;
  border-radius: 15px;
  border: solid 3px #333333;
  position: relative;
}
.home {
	left:25px;
	float:left;
	position:relative;
	z-index:30;
	margin-bottom: 10px;
	top: 5px;
	/*background: url(images/logo.png) no-repeat center;*/
	width: 134px;
	height: 67px;
	}	
#nav {
  position: absolute;
  font-size: 12pt;
  font-family: navFont,  Courier;
  right: 115px;
  top: 37px;
  color: #E2611F;
}
a.nav {
 color: #333;
 text-decoration: none;
}
a:hover {
  color: rgba(217, 94, 22, 0.8);
}
a.nav:active {
  color: rgba(217, 94, 22, 0.8);
}
a.links:hover {
  color: rgba(34, 8, 38, 0.8);
  font-style: oblique;
}

#centercolumn {
 background-color: #ffffff;
  
  height: 600px;
  left: 100px;
  border-radius: 15px;
  border: solid 1px #fff;
  box-shadow: 0px 0px 15px rgba(53, 53, 67, 0.5);;
  position: relative;
  width: 800px;
  clear: left;
  top: 0px;
}
#pcentercolumn {
  background-color: #333;
  height: 600px;
  left: 100px;
  border-radius: 15px;
  border: solid 2px #C2F8FD;
  box-shadow: 0px 0px 15px rgba(53, 53, 67, 0.5);;
  position: absolute;
  width: 800px;
  clear: left;
  top: 75px;
}
#copyright {
  position: absolute;
  bottom: 5px;
  text-align: right;
  font-size: 9pt;
  font-family: 'CantarellRegular';
  right: 15px;
  z-index: 30;
}
#underbear {
	background: url(images/underbear.png) no-repeat left bottom;
	width: 1022px;
	height: 140px;
  margin: 0 auto;
  padding-top: 12px;
  position: fixed;
  float: left;
  bottom: 0%;
  z-index: -1;
	}
#underbear span{
  background: url(images/splat.png) no-repeat right bottom;
	width: 1022px;
	height: 140px;
  margin: 0 auto;
  padding-top: 12px;
  position: fixed;
  float: right;
  bottom: 0%;
  right: 0%;
  z-index: -1;
}

/* About content styles */
.me {
  background: url(images/me.png) no-repeat left bottom;
  height: 519px;
  width: 515px;
  position: relative;
  top: 81px;
  left: -2px;
} 
.blurb {
  width: auto;
  position: relative;
  left: 270px;
  top: 40px;
  float: right;
}
.h1 {
  font-family: 'CantarellOblique', 'Helvetica';
  font-size: 14pt;
  color: rgb(102, 204, 51);
  text-align: right;
  margin-bottom: 10px;
  display: inline;
}
p.bio {
  color: #215868;
  font: 11pt 'CantarellRegular', Helvetica, Arial;
  width: 414px;
  margin-right: 0px;
  margin-top: 20px;
  line-height: 15pt;
	 }
/*p.bio:first-letter {
	font-size:15pt;
}*/
/* lable styles */
.pbtns {
  position: absolute;
  height: auto;

  top: 150px;
  left: -24px;
  z-index: 1000;
}

.ptitles {
  left: 6px;
  margin-top: 35px;
  color: rgb(255, 255, 255);
  font-family: 'UnderwoodChampionRegular',Courier;
  font-size: 10pt;
  text-decoration: none;
  position: relative;
  
}
.ptitlesBack {
  left: 10px;
  margin-top: 35px;
  color: rgb(226, 97, 31);
  font-family: 'UnderwoodChampionRegular',Courier;
  font-size: 12pt;
  text-decoration: none;
  position: relative;
  color: #000;
  
}
.label {
  height: 42px;
  width: 104px;
  list-style-type: none;
  padding: 2px 0px 5px 10px;
  margin: 0px 0px 0px 14px;
  position: relative;
  z-index: 10;
  border-radius: 2px 2px 2px 0px;
  background-color: rgba(53, 53, 67, 0.5);
  box-shadow: 3px 1px 4px rgb(200, 200, 200);
}
.fold {
  height: 80px;
  width: 24px;
  background: url(images/paperfold3.png) left top;
  margin-top: -54px;
  z-index: 20;
}

/* Gallery styles */
#main {
  height: 600px;
  width: 900px;
  position: relative;
}

.bx-wrapper .bx-viewport {
  background-color: transparent;
  
}
.slideframe {
  padding-left: 4px;
}

.slideframe img {
  width: 64px;
  height: 64px;
  border-radius: 9px;
}

#slide_sidebar {
  width: 88px;
  height: 546px;
  position: absolute;
  top: 33px;
  right: -6px;
}

.thumbnail {
  margin: 0px;
  height: 64px;
  border-radius: 11px;
}
.pager-active {
  padding: 0px;
  margin-left: -2px;
  border: 2px solid black;
  height: 64px;
  width: 64px;
  display: block;
  border-radius: 11px;
  margin-bottom: 3px;
}
.screen {
  width: 650px;
  height: 600px; 
  position: relative;
  float: left;
  top: 10px;
  left:80px;
}
#gallery li img{
  border-radius: 15px;
}



.bx-prev {
  text-decoration: none;
  font-family: navFont, UnderwoodChampionRegular, Courier;
  font-size: 12px;
  color: #B2B2AE;
  left: 280px;
  position: absolute;
  bottom: 0px;
}
.bx-next {
  text-decoration: none;
  font-family: navFont, UnderwoodChampionRegular, Courier;
  font-size: 12px;
  color: #B2B2AE;
  position: absolute;
  bottom: 0px;
  right: 280px;
}


#desc {
  font-family: navFont,UnderwoodChampionRegular,Courier;
  font-size: 11pt;
  color: rgb(8, 25, 48);
  position: absolute;
  width: 855px;
  text-align: center;
  left: 77px;
  bottom: 55px;
	}
/* Documentation Styles */
.writing {
  height: 602px;
  width: 801px;
  top: -6px;
  position: relative;
  overflow: auto;
  margin: 5px 10px 0px 0px;
  border-radius: 15px;
}
h1.documentation {
	font-size: 11pt;
	color: #000000;
	position: relative;
	left: 15px;
	top: 20px;
	bottom: 20px;
	z-index: 20;
	float: left;
	clear: left;
	}
h2.jdescript {
	font-size: 11pt;
	color: #666666;
	position: relative;
	left: 15px;
	top: 30px;
	z-index: 20;
	float: left;
	clear: left;
	}
h3.jtitle {
	font-size: 11pt;
	color: #000000;
	position: relative;
	left: 25px;
	top: 40px;
	width: auto;
	z-index: 20;
	float: left;
	clear: left;
	}
ul.resume {
	font-size: 11pt;
	color: #000000;
	position: relative;
	list-style-position: outside;
	list-style:disc;
	width: 650px;
	left: 60px;
	top: 50px;
	margin-bottom: 30px;
	padding-bottom: 20px;
	z-index: 20;
	float: left;
	clear: left;
	}
.skills {
	color: #000000;
	position: relative;
	left: 15px;
	top: 30px;
	margin-bottom: 25px;
	width: 735px;
	z-index: 20;
	overflow: auto;
	font-size: 10px;
	font-size: 10pt;
	float: left;
	clear: left;
	}	
.pdf {
	background-image: url(images/pdf_btn.gif);
	background-repeat: no-repeat;
	float:right;
	position:relative;
	height:30px;
	width: auto;
	top: 25px;
	z-index: 20;
	background-position: right;
	right: 95px;
	}
.creatureDoc {
	float:right;
	position:relative;
	height:66px;
	width: 66px;
	top: 490px;
	z-index: 20;
	background-position: right;
	display: block;
	right: -50px;
	}
.doc {
	font-size: 8pt;
	float: left;
	position: relative;
	top: 8px;
	margin-right: 35px;
	}
.docLink {
	text-decoration: none;
	color: #333333;
	}
/* CV styles */
.cvdocumentation {
	font-size: 16pt;
	color: #000000;
	position: relative;
	left: 15px;
	top: 25px;
	bottom: 20px;
	z-index: 20;
	float: left;
	clear: left;
	margin-bottom: 5px;
	font-weight: bold;
	}
.date {
	font-weight: bold;
	font-size: 11pt;
	color: #666666;
	position: relative;
	left: 15px;
	top: 37px;
	z-index: 20;
	float: left;
	clear: left;
}
em.showTitle {
	letter-spacing: 0.5px;
	font: 11pt 'CantarellOblique', Arial;
	}
.cvItem {
	position: relative;
	left: 200px;
	top: 18px;
	z-index: 20;
	float: left;
	clear: left;
	font: 11pt 'CantarellRegular', Arial;
	line-height: 17pt;
	width: 550px;
	text-indent: -35px;
	margin-bottom: 10px;
	}
p.text { 
  position: relative;
	left: 50px;
	top: 17px;
	margin-top: 20px; 
  float: left;
	font-size: 11pt;
	width: 700px;
  line-height:16pt;
}

a.creaturelink {
  height: 64px;
  width: 64px;
  position: absolute;
  bottom: 169px;
  left: 300px;
}
.wordpress {
    position: relative;
  	left: 50px;
  	top: 17px;
  	margin-top: 20px; 
    float: left;
  	font-size: 11pt;
  	width: 700px;
    line-height:16pt;
  	font-weight: normal;
}
.bpreview {
  position: absolute;
  top: 145px;
  left: 50px;
  width: 800px;
}
.joce {
  background: url(images/thumb/joce.png) no-repeat center center;
  width: 300px;
  height: 200px;
  box-shadow: 0px 0px 3px #333;
  position: absolute;
}
#jbg {
  background: #4e606a fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.jocepreview {
   background: url(images/joce.png) no-repeat center center;
   width: 768px;
   height: 1314px;
   margin: 0 auto;
   padding-bottom: 20px;
}
.sats{
  background: url(images/thumb/satsblog.png) no-repeat center center;
  width: 300px;
  height: 200px;
  box-shadow: 0px 0px 3px #333;
  position: absolute;
  right: 100px;
}
#satsbg {
  background: #1a1a1a fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.satspreview {
   background: url(images/satsblog.png) no-repeat center center;
   width: 864px;
   height: 1584px;
   margin: 0 auto;
   margin-top: 0px;
}
.joceinfo {
  margin-top: 20px;
  font: 11pt 'CantarellRegular', Arial;
  width: 300px;
  color: #4E606A;
  position: absolute;
  top: 200px;

}
.satsinfo {
  margin-top: 20px;
  font: 11pt 'CantarellRegular', Arial;
  width: 300px;
  color: #4E606A;
  position: absolute;
  top: 200px;
  right: 100px;
}
/* Contact content styles */
.artpractice {
	font-size: 11pt;
	color: #215868;
	float:left;
	clear: left;
	position:relative;
	left: 140px;
	top: 180px;
	z-index:30;
	}
a.links {
	text-decoration: none;
	color:#330033;
	}
p.contact {
  background-color: #fff;
	border-radius: 20px;
	border: 3px solid #757575;
	padding: 10px;
	font-size: 11pt;
	color: #215868;
	z-index:20;	
	overflow: auto;
	text-align: center;
	box-shadow: 2px 1px 4px #333;
	}
.bubble {
  width: 360px;
  height: auto;
  float: left;
  clear: left;
  position: relative;
  left: 180px;
  top: 135px;
}
.btail {
  position: absolute;
  top: 79px;
  left: 20px;
}
.robotbears {
	background-image:url(images/wiredBear.png);
	background-repeat: no-repeat;
	width: 466px;
	height: 282px;
	z-index:20;
	left: 15px;
	top: 160px;
	float: right;
	position: relative;
	}
.robotbears span{
  background-image:url(images/wirelessBear.png);
	background-repeat: no-repeat;
	width: 466px;
	height: 282px;
	z-index:20;
	left: -280px;
	top: 0px;
	float: right;
	position: relative;
	}
.portfolio {
  font-family: 'CantarellOblique', 'Helvetica';
  font-size: 18px;
  letter-spacing: 2px;
  color: #6C3;
  float: left;
  left: 283px;
  top: 20px;
  position: relative;
  font-weight: 900;
  margin-bottom: 15px;
  text-shadow: 1px 1px 5px #fff;
	}

*[data-link]:hover {
  cursor: pointer;
}

/** 
Scroller CSS **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano .content::-webkit-scrollbar {
  -webkit-appearance: none;
}
.nano > .pane {
  background: rgba(0,0,0,.25);
  position : absolute;
  width    : 10px;
  right    : 0;
  top: 6px;
  bottom: 6px;
  visibility: hidden;
}
.nano > .pane > .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;  
  border-radius         : 3px;
}
.nano:hover > .pane, .pane.active {
  visibility: visible;
}
.nano > .pane {
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -ms-transition        : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;  
  border-radius         : 5px;
  opacity               : .01;
}
.nano:hover > .pane, .pane.active {
  opacity : 1;
}
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* JP - MPOPMA */
.projects {
  height: 663px;
  width: 886px;
  top: 0px;
  position: relative;
  overflow:auto;
  margin: 5px 10px 0px 0px;
}
.jpfull {
  width: 577px;
  height: 497px;
  background: url(images/jpfullCut.png) no-repeat bottom right;
  position: absolute;
  bottom: -28px;
  right: 0px; 
  z-index: 20;
}
.embeddedMap {
  width:600px;
  height:500px;
  margin-left: 42px;
  margin-top: 10px; 
}
/* Description Styles */
.jpwriting {
  width: 700px;
  float: left;
  margin-left: 20px;
  margin-top: 60px;
  z-index: 20;
  text-decoration: none;
}
.jph1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: rgb(102, 204, 51);
  text-align: right;
  margin-left: 200px;
  display: inline;
  margin-top: 20px;
  }
p.jpwriting {
  color: #215868;
  font-size: 11pt;
  width: 414px;
  margin-right: 0px;
  margin-top: 40px;
}
a{
  text-decoration: none;
}
.mapPostcard {
  width: 404px;
  height: 436px;
  background: url(images/postcard.png) no-repeat;
  position: absolute;
  top: 150px;
  left: 413px;
  z-index: 20;
}
.jpwriting {
  width: 700px;
  float: left;
  margin-left: 20px;
  margin-top: 60px;
  z-index: 20;
  text-decoration: none;
}
.kaoh1 {
  font-family: 'CantarellOblique','Helvetica';
  font-size: 18px;
  letter-spacing: 2px;
  color: rgb(102, 204, 51);
  left: 283px;
  top: 20px;
  position: relative;
  font-weight: 900;
  margin-bottom: 15px;
  }
p.kaowriting {
  font-size: 11pt;
  font-family: 'CantarellRegular',Verdana,Arial,Helvetica,sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
  position: relative;
  left: 40px;
  top: 17px;
  float: left;
  line-height: 16pt;
  overflow: auto;
  width: 400px;
  margin-top: 30px;
  clear: left;
}

p.kaowriting2 {
  font-size: 11pt;
  font-family: 'CantarellRegular',Verdana,Arial,Helvetica,sans-serif;
  font-weight: 400;
  color: rgb(0, 0, 0);
  position: relative;
  left: -24px;
  top: 72px;
  float: right;
  line-height: 16pt;
  overflow: auto;
  width: 315px;
  margin-top: 30px;
}
p.kaowriting3 {
  position: relative;
  left: 40px;
  top: 17px;
  float: left;
  line-height: 16pt;
  overflow: auto;
  width: 315px;
  margin-top: 30px;
  clear: left;
}
#kaoheld {
  background: url("images/kaonashi-held.jpg") no-repeat;
  width: 300px;
  height: 304px;
  position: relative;
  top: 52px;
  left: 460px;
  z-index: 20;
  border-radius: 5px 5px 5px 5px;

}
#kao1 {
  background: url("images/kaonashi-dull.jpg") no-repeat;
  width: 402px;
  height: 300px;
  position: relative;
  top: 30px;
  left: 20px;
  z-index: 20;
  border-radius: 5px 5px 5px 5px;
  float: left;
  margin-bottom: 45px;
}
#kao2 {
  background: url("images/kaonashi-bright.jpg") no-repeat;
  width: 402px;
  height: 300px;
  position: relative;
  top: 30px;
  right: 20px;
  z-index: 20;
  border-radius: 5px 5px 5px 5px;
  float: right;
  margin-bottom: 90px;
}
.caption {
  color: #888;
  font-size: 10pt;
  position: relative;
  top: 60px;
  text-align: right;
}
.caption2 {
  color: #888;
  font-size: 10pt;
  position: relative;
  top: 308px;
  text-align: right;
}