body {
	background-color:#f3ecd8;

	margin:0px auto 0px auto;
}

#container { 
background-image:url(images/conversionPortfolio.jpg);
width:1000px;
height:900px;
margin:0px auto 0px auto;

 }

#header{
	
	
}

#nav { 
margin-left:66px;
width: 46px;
height: 500px;
border: 0px;
margin-top:-15px;
	text-decoration:none;
 }
#nav a{
	border:0px;

}

#left {
	width:400px;
	height:400px;

	float:left;
	margin-top:-400px;
	margin-left:140px;
 }


#right {
	width:280px;
	height:370px;
	float:left;
padding-left:20px;
	margin-top:-435px;
	margin-left:620px;
 }
 
 #name{
 	color:#580404;
	font-size:20px;
	font-family:"century gothic";
 }
#email{
 	color:#580404;
	font-size:20px;
	font-family:"century gothic";
	
}
#description{
 	color:#580404;
	font-size:20px;
	font-family:"century gothic";
	
	}

#logos{
	
	padding-top:42px;
	margin-left:-40px;
	
}

#footer {
	width:760px;
	height:50px;
	margin-left:140px;
	margin-top:21px;

	
 }
 
 /* --- Container configuration ---------------------------------------------------------- */
.viewport {
    
    float: left;
    height: 188px;
    margin: 0 0px 0px 0;
    overflow: hidden;
    position: relative;
    width: 188px;
}

/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
   class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
    margin-right: 0;
}

/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
    display: block;
    position: relative;
	    text-decoration: none;
}

.viewport a img {
    height: 188px;
    left: -0px;
    position: relative;
    top: -0px;
    width: 188px;
	    text-decoration: none;
		border:none;
}

/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
    display: none;
    font-size: 1.1em;
    font-weight: bold;
	color:#580404;
    height: 100%;
    padding-top: 120px;
	margin-left:-8px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
	font-family:"century gothic";
}
    .viewport a span em {
        display: block;
        font-size: .8em;
        font-weight: normal;
		color:black;
    }

/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
    
    color: #fff;
    text-shadow: #000 0px 0px 00px;
}
    .dark-background em {
        color: #ccc;
    }

/**
 * You could create multiple hover background classes for different looks depending on the
 * image type. Use your imagination!
 */