@font-face {
 font-family: FranKleinBold;
 src: url("FranKleinBold.eot") /* EOT file for IE */
 src: local("FranKleinBold"), url("FranKleinBold.ttf" ) format("truetype"); /* non-IE */  
}
@font-face {
 font-family: FranKleinMedium;
 src: url("FranKleinMedium.eot") /* EOT file for IE */
 src: url("FranKleinMedium"), url("FranKleinMedium.ttf" ) format("truetype"); /* non-IE */
}

.UXName { 
	font-family:FranKleinBold, arial, verdana, helvetica, sans-serif;
	font-size:150%; 
}  

.UXDescription { 
	font-family:FranKleinMedium, arial, verdana, helvetica, sans-serif;  
	font-size:150%;
}  


.header2 {

    position: relative;

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
}
@-moz-keyframes dropHeader {
    0% {
        top: -30px;
		zoom: 1;
		filter: alpha(opacity=0);
		opacity: 0.0;
    }
    100% {
        top: 0;
		zoom: 1;
		filter: alpha(opacity=100);
		opacity: 1.0;
    }
}
@-webkit-keyframes dropHeader {
    0% {
        top: -30px;
		zoom: 1;
		filter: alpha(opacity=0);
		opacity: 0.0;
    }
    100% {
        top: 0;
		zoom: 1;
		filter: alpha(opacity=100);
		opacity: 1.0;
    }
}



body {
	background-color: #171717;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size: 80%;
	font-smooth: always; 
	-webkit-font-smoothing: subpixel-antialiased;
	
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #9c9c9c;
}



h1 {
	padding:0px;
	padding-bottom:10px;
	margin:0px;
	font-size:100%;
	line-height:100%;
}

h2 {
	margin:0px;
	padding:0px;
	color:#c8c9c8; 
	font-size:100%;
	font-weight:normal;
	line-height:200%
}

h3 {
	margin:0px;
	padding:0px;
	color:#c8c9c8;
	font-size:100%;
	font-weight:normal;
	line-height:150%;
	letter-spacing:0px
}

a {
	text-decoration:none;
	color: #cbcbcb;
		
}

.lineTop {
	border-top:1px solid #2f2f2f;
}
	
.lineBottom {
	border-bottom:1px solid #2f2f2f
}
.lineTopFirst {
	border-top:0px solid #2f2f2f;
}

	
@media screen and (max-width: 550px) {
	.topHeading {
		height:50px; 
		padding-top:20px;
		padding-bottom:10px;
		float:none;
		border:0px solid #6F0;
	}
	.topNav {
		float:none; 
		border:0px dotted #f0f;
		height:20px;
		visibility:hidden;
		display:none
	}
	
	.menuButton {
		float:right;
		visibility:visible;
		
	}
	
	.header{ 
		float:left;
		width:100%
	}
	.center{
		margin: 0 auto;
		position:relative; 
		width:95%;
		min-width:300px;
	}
	.portfolioYear {
		float:left;
		position:relative;
		width:100%;
	}
	
	.portfolioSamples {
		height:90px; 
		padding-top:10px; 
		width:95%; 
		float:right;
		min-width:320px;
	}
	
	.lineTopODD {
		border-top:1px solid #2f2f2f;
	}
	
	.lineTopFirst {
		border-top:0px solid #2f2f2f;
	}
	
	 .stampImg {
		width:80px;
		height:80px;
	 }
	.sampleImage {
		float:left; 
		width:90px
	}
	.bigImage {
		width:100%;
	}
	.imagePanel {
		width:100%; 
		float:right;
		border:0px solid #f0F; 
	}
	.portfolioSamples2 {
		padding-top:20px; 
		width:100%; 
		float:right;
	}
	
	.blob1 {width:100%; background-color:#282728; height:60px; float:none; margin-bottom:5px; min-width:122px}
	.blob2{width:100%; background-color:#282728; height:60px; float:none; margin-bottom:5px; min-width:122px}
	.blob3 {width:100%; background-color:#282728; height:60px; float:none; min-width:122px}
	
	.lineTopBig {
		border-top:1px solid #2f2f2f;
	}
	
	.menuPopup {
		display:inline;
	}
	
	#banner {
		 height:340px;
		 border:1px solid #000;
		 background:#171717 url(images/home2.png) no-repeat center center;
		 background-size:auto, 100%;
		 position:relative; 
		 margin-bottom:10px; 
		 margin-top:0px
	}
	.wideImage {
		margin-left:-90%; 
		margin-right:-90%; 
		height: 220px;
	}
	.javascriptPanel {width:100%; text-align:center; border:0px solid #0FC; height:170px; overflow:hidden; margin-bottom:10px; }

}

@media screen and (min-width: 550px) {
	.topHeading {
		height:120px; 
		padding-top:50px; 
		padding-right:20px; 
		width:230px; 
		float:left;
		border:0px solid #0CF;
	}
	
	.topNav {
		float:right; 
		padding-top:30px;
		padding-bottom:20px;
		height:120px; 
		border:0px dotted #f0f;
		visibility:visible;
		text-align:right; 
		width:250px
	}
	
	.menuButton {
		float:right;
		visibility:hidden;
		width:1px
	}
	
	.header{ 
		float:left;
		width:99%;
		padding:5px;
	}
	.center{
		margin: 0 auto;
		position:relative; 
		max-width:780px;
		width:100%; 
	}
	
	.portfolioYear {
		float:left;
		position:relative;
		height:10px;
		width:100%;
		padding-bottom: 1px;
	}
	
	.portfolioSamples {
		height:150px; 
		padding-top:20px; 
		width:36%; 
		float:right;
		min-width:250px; 
	}

	.lineTopODD {
		border-top:0px solid #2f2f2f;
	}
	
	.lineTopFirst {
		border-top:0px solid #2f2f2f;
	}
	
	.stampImg {
		 width:130px;
		 height:130px;
	}
	.sampleImage {
		float:left; 
		width:140px
	}
	.bigImage {
		width:100%; /*540*/
		height:430;
	}
	.imagePanel {
		width:64%; /*540*/
		float:right;
		border:0px solid #f0F; 
	}

	.projectDesc {
		padding-right:20px; 
		width:32%; /*210*/
		float:left; 
		position:relative;
	
	}
	.portfolioSamples2 {
		 
		padding-top:20px; 
		padding-left:5px;
		width:72%; 
		float:right; 
	}
	
	.blob1 {width:32%; background-color:#282728; height:150px; float:left; margin-right:1%; min-width:122px}
	.blob2{width:34%; background-color:#282728; height:150px; float:left; margin-right:1%; min-width:122px}
	.blob3 {width:32%; background-color:#282728; height:150px; float:left; min-width:122px}
	
	.lineTopBig {
		border-top:1px solid #2f2f2f;
	}
	.menuPopup {
		display:none;
	}
	
	#banner {
		 height:340px;
		 border:1px solid #000;
		 background:#171717 url(images/home2.png) no-repeat center center;
		 background-size:auto,100%;
		 position:relative; 
		 margin-bottom:10px; 
		 margin-top:160px
	}
	.wideImage {
		height:100%;
		margin-left:-50%; 
		margin-right:-50%; 
	}
	.javascriptPanel {width:100%; text-align:center; border:0px solid #0FC; height:350px; overflow:hidden; margin-bottom:10px; }

}



@media screen and (min-width: 1400px) {
	.topHeading {
		height:120px; 
		padding-top:50px; 
		padding-right:20px; 
		width:230px; 
		float:left;
		border:0px solid #0CF;
	}
	
	.topNav {
		float:right; 
		padding-top:30px;
		padding-bottom:20px;
		height:120px; 
		border:0px dotted #f0f;
		visibility:visible;
		text-align:right; 
		width:250px
	}
	
	.menuButton {
		float:right;
		visibility:hidden;
		width:1px
	}
	
	.header{ 
		float:left;
		width:99%;
		padding:5px;
	}
	.center{
		margin: 0 auto;
		position:relative; 
		max-width:1300px;
		width:100%; 
	}
	
	.portfolioYear {
		float:left;
		position:relative;
		height:10px;
		width:100%;
		padding-bottom: 1px;
	}
	
	.portfolioSamples {
		height:150px; 
		padding-top:20px; 
		width:36%; 
		float:right;
		min-width:250px;
		max-width:300px;
		}

	.lineTopODD {
		border-top:0px solid #2f2f2f;
	}
	
	.lineTopFirst {
		border-top:0px solid #2f2f2f;
	}
	
	.stampImg {
		 width:130px;
		 height:130px;
	}
	.sampleImage {
		float:left; 
		width:140px
	}
	.bigImage {
		width:100%; /*540*/
		max-width:474px;
		height:430;
	}
	.imagePanel {
		width:74%; /*540*/
		float:right;
		border:0px solid #f0F; 
		
	}

	.projectDesc {
		padding-right:20px; 
		width:22%; /*210*/
		float:left; 
		position:relative;
	
	}
	.portfolioSamples2 {
		 
		padding-top:20px; 
		padding-left:5px;
		width:72%; 
		float:right; 
	}
	
	.blob1 {width:32%; background-color:#282728; height:150px; float:left; margin-right:1%; min-width:122px}
	.blob2{width:34%; background-color:#282728; height:150px; float:left; margin-right:1%; min-width:122px}
	.blob3 {width:32%; background-color:#282728; height:150px; float:left; min-width:122px}
	
	.lineTopBig {
		border-top:0px solid #2f2f2f;
	}
	.menuPopup {
		display:none;
	}

	#banner {
		 height:340px;
		 border:1px solid #000;
		 background:#171717 url(images/home2.png) no-repeat center center;
		 background-size:100%, 50%;
		 position:relative; 
		 margin-bottom:10px; 
		 margin-top:160px
	}
	.wideImage {
		width:100%;
		height:550px;
		margin-top:-100px;	
	}
	
	.javascriptPanel {width:100%; text-align:center; border:0px solid #0FC; height:350px; overflow:hidden; margin-bottom:10px; }

}

.nav1 {
	width:125px; 
	padding:3px;
	
}

.nav2 {
	width:100%; 
	padding:13px
}



.coverText {padding-left:10px; padding-top:20px; width:122px; height:22px;}
.arrow {padding-right:5px; float:right; padding-top:15px; width:29px; height:30px;}

p {
	line-height:200%;
}


/* begin styles for RSS Feed */

.rss-box {
	 margin: 1em;
	 width: 180px;
	 background-color: #171717;
	 border: 0px solid silver;
	 
}
.rss-items {
	margin-top:0px;
	padding:0.5em; 0.5em;
	margin-left:0px;
	color:#c8c9c8;
}
p.rss-title {padding:0.5em;}
.rss-title {
	font-size: 110%;
	background-color: silver;
	color: #c8c9c8;
	font-weight:bold;
	text-align: left;
}

.rss-item  {
  font-size: 100%;
  list-style:none;
  padding-bottom:1em;
}

.rss-item a {
	color:#c8c9c8;
	font-size: 100%;
	font-weight:bold;
	}
	
.rss-item a:visited {
	color: #c8c9c8;
}

.rss-date {
	font-size: 100%;
	color: #595959;
	}
 
/* buttons modeled from http://www.wellstyled.com/css-inline-buttons.html */

.pod-play {
   _width:12em;
   margin: 0 0.2em; padding: 0.1em 0; _padding:0;
   
   white-space:nowrap;
   text-decoration: none;
   vertical-align:middle;
   background: #fb6;
   color: black;
   }
.pod-play em {
   _width:1em; _cursor:hand;
   font-style: normal;
   margin:0; padding: 0.1em 0.5em;
   background: white;
   color: #222;
   }
.pod-play span {
   _width:1em; _cursor:hand;
   margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
   }
.pod-play:hover {
   background: #666;
   color: white;
   }
.pod-play:hover em {
   background: black;
   color: white
   }