@import url("master.css");

/***** General Formatting *****/
body {
	background-image:url(../images/background-gradient.jpg); 
	background-repeat:repeat-x;
	}

#wrapper {
	width:842px;
	margin:0 auto;
	padding:0;
	}

.wrapper {width:842px;}

/***** TopNav Formatting *****/

#topnav {
    width: 820px; 
	height: 21px;
	background: url(../images/topnav.gif) no-repeat;
	padding: 0;
	margin:17px 0 0 0;
    position: relative;
	}
	
#topnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0px;
	}
	
#topnav li span {display: none;}	
#topnav li a {height: 21px; display:block;}


#home {left:275px; width:130px; }
#about {left:405px; width:143px;}
#services {left:548px; width:142px;}
#contact {left:690px; width:132px;}

  
#home a:hover, #home .on {background: transparent url(../images/topnav.gif) -275px -21px no-repeat;}
#about a:hover, #about .on {background: transparent url(../images/topnav.gif) -405px -21px no-repeat;}
#services a:hover, #services .on {background: transparent url(../images/topnav.gif) -548px -21px no-repeat;}
#contact a:hover, #contact .on {background: transparent url(../images/topnav.gif) -690px -21px no-repeat;}


/***** SideNav Formatting *****/

#sidenav {
  width:21px; 
  height:280px;
  background:url(../images/sidenav-free-full.gif) no-repeat;
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  position:relative;
  }
	
#sidenav li {
	margin:0px;
	padding:0px;
	list-style:none;
	position:absolute;
	left:0px;
	}
	
#sidenav li span {display:none;}	
#sidenav li a {width:21px; height:123px; display:block;} /* needs height or wont link on page */


#freelance {top:13px; width:21px; }
#corporate {top:153px; width:21px;}

  
#freelance a:hover, #freelance .on {background:transparent url(../images/sidenav-free-full.gif) -21px -13px no-repeat;}
#corporate a:hover, #corporate .on {background:transparent url(../images/sidenav-free-full.gif) -21px -153px no-repeat;}

/***** Content Formatting *****/

#content {
	background-color:#fefdf6;
	width:551px;
	min-height:800px;
	height:auto !important;
	height:800px;
	font-size:1em;
}

#content-bg {
	width:799px;
	background-color:#fefdf6;
	margin:0px;
	margin-right:22px;
	padding:0px;
}


#content p{
	margin:10px;
	}
	
#content a{
	color:#660099;
	text-decoration:underline;
	}
	
#content a:hover{
	color:#000000;
	}
	
#content h1{
	margin-left:10px;
	}
	
#content h2{
	margin-left:10px;
	font-family:"Times New Roman", Times, serif;
	}

#samples {
	margin-left: 10px;
	border-top: 2px double #c1976e;
}

.sampleitem{
	text-align:center;
	width:100px;
	float:left;
	padding-top:10px;
}

.imgcontent {border:1px #000000 solid;}
/***** Menu Formatting *****/	

#menu {
	background-color:#fefdf6;
	width:248px;
		}

#menu ul{
	margin:10px 0 0 0;
	}

#menu li a{
	font-size:1.2em;
	margin-left:5px;
	color:#000000;
	}
	
.menubg {
	background-image:url(../images/menu-li.gif);
	height:23px;
	width:240px;
	}
	
#menu a:hover {
	color:#7c2488;
	}
	
#menu ul li img {
	vertical-align:top;
	}


/***** Footer Formatting *****/	
#footer {
    width:842px;
	background-image:url(../images/footer.png);
	background-repeat:no-repeat;
	height:125px;
	color:#f3f1f0;
	font-size:0.8em;
	margin:0px auto;
    }

#footer p {
	margin-left:190px;
	}

#footer ul{
	margin:0 auto 0 260px;
	}
	
#footer li{
	float:left;
	margin-top:10px;
	display:block;
	}

#footer a{
	color:#f3f1f0;
	position:relative; /* IE 6 needs this in order for the links to work */
	}

#footer a:hover{
	color:#e6bb6a;
	text-decoration:none;
	}