@font-face {
  font-family: "TradeGothicLight";
  src: url("../fonts/TradeGothicLTStd-Light.otf");
}  
  
@font-face {
  font-family: "TradeGothic";
  src: url("../fonts/TradeGothicLTStd.otf");
} 

@font-face {
  font-family: "CaeciliaLight";
  src: url("../fonts/CaeciliaLTStd-Light.otf");
} 

@font-face {
  font-family: "TradeGothicLightItalic";
  src: url("../fonts/TradeGothicLTStd-LightObl.otf");
} 

@font-face {
  font-family: "TradeGothicBold2";
  src: url("../fonts/TradeGothicLTStd-Bd2.otf");
} 


#wrap {

    max-width: 960px;
    margin: 0 auto 0 auto;
    padding: 20px;
    background-color: white;
    position: relative;
    min-height: 100%;
}

body {
	height:100%;
	padding:0px;
	margin: 0px auto 0px auto;
	color: rgb(0,0,0);
	font-family: "TradeGothic", sans-serif;
	text-decoration: none;
	list-style-type: none;
	
}

a:link {
text-decoration:none;
color:rgb(0,0,0);
}

a:visited {
text-decoration:none;
color:rgb(0,0,0);
}

a:hover {
text-decoration:none;
color:rgb(200,200,200);
}

a:active {
text-decoration:none;
color:rgb(0,0,0);
}

#header{
height: 180 px;
width: 100%;
margin: 0px auto 0px atuo;
	hr {
	width: 940px;
	}
}

.updating{
background-color:#f5f5f5;
margin-left:10px;
margin-top:10px;
margin-bottom:0px;
max-height: 210px;
}

.updating img {
display:inline;
float: left;
padding-right: 20px;
}

.updating span {
display:block;
font-family: "TradeGothic", sans-serif;
font-size: 10.5pt;
line-height: 155%;
max-width: 696px;
max-height: 210px;
min-height: 210px;
padding-right:20px;
padding-top:35px;
}

.container{
padding-top: 0px;
line-height:200%;
margin-top:0px;
}

img {
	max-width: 100%;
	height: auto;
}

#content{
float:left;
padding: 0px;
margin: 0 0 0 0;
height 100%;
}

#contentupdating{
padding: 0px;
margin: 0 0 0 0;
position:absolute;
top:390px;
height 100%;
display: block;
left:220px;
}

#name {
font-family: "TradeGothicLight", sans-serif;
font-size: 24pt;
letter-spacing: 2pt;
text-align:left;
left:200px;
margin-left:10px;
padding-top: 100px;
padding-bottom: 5px;

}

ul#medialinks{
float:right;
margin: 0px 0px 0px 0px;
list-style-type: none;
list-style:none; 
padding-left:0px;

}

#medialinks li{
float:left;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 10px;
margin: 0 0px 0px 0px;
top:50px;
height 100%;
display: block;
list-style-type: none;
}

ul#hornav{
font-size: 11pt;
letter-spacing: .0605em;
float:left;
margin: 0px 0px 0px 0px;
padding-left: 10px;
padding-top: 10px;

}

#hornav li{
float:left;
font-size: 11pt;
padding-left: 0px;
padding-right: 30px;
padding-top: 4px;
padding-bottom: 10px;
margin: 0px 0px 0px 0px;
top:50px;
height 100%;
display: inline;
list-style-type: none;
list-style:none; 
}


#navmenu {
margin-left: 10px;
padding-top: 10px;
}

ul#grid{
margin: 0 auto 0 auto;
width: screen.width;
height: 1800;
list-style:none; 
padding-top: 15px;
padding-left: 0px;
}

#grid li {
float:left;
margin: 0px 10px 20px 10px;
font-size: 10pt;
letter-spacing:0px;
line-height:150%;
}


#description{
float:left;
margin: 0 0 0 0;
width: 40%;
0px;
list-style:none; 
padding-top: 0px;

}


#description2columns{
float:left;
margin: 0 0 0 0;
width: 95%;
0px;
list-style:none; 
padding-top: 0px;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;

}

.projectdescription{
font-family: "TradeGothicLight", sans-serif;


}

.projecttitle{
font-family: "TradeGothicBold2", sans-serif;
font-size: 11pt;
}

#year{
font-family: "TradeGothicLightItalic", sans-serif;
}

.photocredit{
font-family: "TradeGothicLight", sans-serif;
font-size: 7pt;
}


.anaglyph {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/anaglyph-0.png') left;
	text-indent: -99999px;
}
.anaglyph:hover {
	background-position: 220px 0;
}


.analysis {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/analysis-0.jpg') left;
	text-indent: -99999px;
}
.analysis:hover {
	background-position: 220px 0;
}

.beehive {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/beehive-0.jpg') left;
	text-indent: -99999px;
}
.beehive:hover {
	background-position: 220px 0;
}

.biolum {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/biolum-0.jpg') left;
	text-indent: -99999px;
}
.biolum:hover {
	background-position: 220px 0;
}

.bookasart {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/bookasart-0.jpg') left;
	text-indent: -99999px;
}
.bookasart:hover {
	background-position: 220px 0;
}

.bradbury {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/bradbury-0.jpg') left;
	text-indent: -99999px;
}
.bradbury:hover {
	background-position: 220px 0;
}

.breaker {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/breaker-0.jpg') left;
	text-indent: -99999px;
}
.breaker:hover {
	background-position: 220px 0;
}

.clown {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/clown-0.jpg') left;
	text-indent: -99999px;
}
.clown:hover {
	background-position: 220px 0;
}

.color {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/color-0.jpg') left;
	text-indent: -99999px;
}
.color:hover {
	background-position: 220px 0;
}

.designingwithlight {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/designingwithlight-0.jpg') left;
	text-indent: -99999px;
}
.designingwithlight:hover {
	background-position: 220px 0;
}

.dice {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/dice-0.jpg') left;
	text-indent: -99999px;
}
.dice:hover {
	background-position: 220px 0;
}

.emergency {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/emergency-0.jpg') left;
	text-indent: -99999px;
}
.emergency:hover {
	background-position: 220px 0;
}

.groupstorm {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/groupstorm-0.jpg') left;
	text-indent: -99999px;
}
.groupstorm:hover {
	background-position: 220px 0;
}

.hasbro {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/hasbro-0.jpg') left;
	text-indent: -99999px;
}
.hasbro:hover {
	background-position: 220px 0;
}

.icare {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/icare-0.jpg') left;
	text-indent: -99999px;
}
.icare:hover {
	background-position: 220px 0;
}

.ice {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/ice-0.jpg') left;
	text-indent: -99999px;
}
.ice:hover {
	background-position: 220px 0;
}

.jlin {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/jlin-0.png') left;
	text-indent: -99999px;
}
.jlin:hover {
	background-position: 220px 0;
}

.kinect {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/kinectsmall.gif') left;
	text-indent: -99999px;
}
.kinect:hover {
	background-position: 220px 0;
}

.logos {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/logos-0.jpg') left;
	text-indent: -99999px;
}
.logos:hover {
	background-position: 220px 0;
}

.mouse {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/mouse-0.png') left;
	text-indent: -99999px;
}
.mouse:hover {
	background-position: 220px 0;
}

.notifications {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/notifications-0.png') left;
	text-indent: -99999px;
}
.notifications:hover {
	background-position: 220px 0;
}

.nyc {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/nycsmall.gif') left;
	text-indent: -99999px;
}
.nyc:hover {
	background-position: 220px 0;
}

.pacman {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/pacman-0.jpg') left;
	text-indent: -99999px;
}
.pacman:hover {
	background-position: 220px 0;
}

.posters {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/posters-0.jpg') left;
	text-indent: -99999px;
}
.posters:hover {
	background-position: 220px 0;
}

.rewards {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/rewards-0.png') left;
	text-indent: -99999px;
}
.rewards:hover {
	background-position: 220px 0;
}

.rocklobster {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/rocklobster-0.jpg') left;
	text-indent: -99999px;
}
.rocklobster:hover {
	background-position: 220px 0;
}

 .sandbox {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/sandbox-0.png') left;
	text-indent: -99999px;
}
.sandbox:hover {
	background-position: 220px 0;
}


.sorti {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/sorti-0.png') left;
	text-indent: -99999px;
}
.sorti:hover {
	background-position: 220px 0;
}

.sonlux {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/sonlux-0.png') left;
	text-indent: -99999px;
}
.sonlux:hover {
	background-position: 220px 0;
}

.sdf {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/sdf-0.png') left;
	text-indent: -99999px;
}
.sdf:hover {
	background-position: 220px 0;
}

.seasons {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/seasons-0.jpg') left;
	text-indent: -99999px;
}
.seasons:hover {
	background-position: 220px 0;
}

.smartsearch {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/smartsearch-0.png') left;
	text-indent: -99999px;
}
.smartsearch:hover {
	background-position: 220px 0;
}

.stamps {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/stamps-0.jpg') left;
	text-indent: -99999px;
}
.stamps:hover {
	background-position: 220px 0;
}

.starfruit {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/starfruit-0.jpg') left;
	text-indent: -99999px;
}
.starfruit:hover {
	background-position: 220px 0;
}

.tweets {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/tweets-0.jpg') left;
	text-indent: -99999px;
}
.tweets:hover {
	background-position: 220px 0;
}

.vissys {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/vissys-0.jpg') left;
	text-indent: -99999px;
}
.vissys:hover {
	background-position: 220px 0;
}


 .youarehere {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/youarehere-0.png') left;
	text-indent: -99999px;
}
.youarehere:hover {
	background-position: 220px 0;
}




.elliott {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/elliott-0.png') left;
	text-indent: -99999px;
}

.elliott:hover {
	background-position: 220px 0;
}

.plant {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/plant-0.png') left;
	text-indent: -99999px;
}

.plant:hover {
	background-position: 220px 0;
}

.optimism {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/optimism-0.gif') left;
	text-indent: -99999px;
}
.optimism:hover {
	background-position: 220px 0;
}

.redtshirt {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/redtshirt-0.png') left;
	text-indent: -99999px;
}

.redtshirt:hover {
	background-position: 220px 0;
}


.fence {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/fence-0.png') left;
	text-indent: -99999px;
}
.fence:hover {
	background-position: 220px 0;
}

.flower {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/flower-0.png') left;
	text-indent: -99999px;
}
.flower:hover {
	background-position: 220px 0;
}

.cave {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/cave-0.png') left;
	text-indent: -99999px;
}
.cave:hover {
	background-position: 220px 0;
}

.venice {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/venice-0.png') left;
	text-indent: -99999px;
}
.venice:hover {
	background-position: 220px 0;
}

.frog {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/frog-0.png') left;
	text-indent: -99999px;
}
.frog:hover {
	background-position: 220px 0;
}

.lily {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/lily-0.png') left;
	text-indent: -99999px;
}
.lily:hover {
	background-position: 220px 0;
}

.trophies {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/trophies-0.png') left;
	text-indent: -99999px;
}
.trophies:hover {
	background-position: 220px 0;
}

.pumpkin {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/pumpkin-0.png') left;
	text-indent: -99999px;
}
.pumpkin:hover {
	background-position: 220px 0;
}

.corn {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/corn-0.png') left;
	text-indent: -99999px;
}
.corn:hover {
	background-position: 220px 0;
}

.skull {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/skull-0.png') left;
	text-indent: -99999px;
}
.skull:hover {
	background-position: 220px 0;
}

.seahorse {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/seahorse-0.png') left;
	text-indent: -99999px;
}
.seahorse:hover {
	background-position: 220px 0;
}


.namu {
	display: block;
	width: 220px;
	height: 190px;
	background: url('../images/namu-0.png') left;
	text-indent: -99999px;
}
.namu:hover {
	background-position: 220px 0;
}







.about {
	display: block;
	width: 480px;
	height: 360px;
	background: url('../images/about.png') left;
	text-indent: -99999px;
}
.about:hover {
	background-position: 480px 0;
}


.twittericon {
	display: block;
	width: 25px;
	height: 20px;
	background: url('../images/twittericon.svg') left;
	text-indent: -99999px;
}
.twittericon:hover {
	background-position: 25px 0;
}

.mailicon {
	display: block;
	width: 25px;
	height: 20px;
	background: url('../images/mailicon.svg') left;
	text-indent: -99999px;
}
.mailicon:hover {
	background-position: 25px 0;
}

.facebookicon {
	display: block;
	width: 25px;
	height: 20px;
	background: url('../images/facebookicon.svg') left;
	text-indent: -99999px;
}
.facebookicon:hover {
	background-position: 25px 0;
}

.linkedinicon {
	display: block;
	width: 25px;
	height: 20px;
	background: url('../images/linkedinicon.svg') left;
	text-indent: -99999px;
}
.linkedinicon:hover {
	background-position: 25px 0;
}