html, body {
 height:100%;
 background-color:#b47400;
 background-image:url(http://larussellweb.com/img/bg.gif);
 font-family:verdana, arial, sans-serif; 
 margin:0; 
 padding:0; 
}


body {
 margin: 0;
 padding:0; 
}
    
 
img {
 border:0; 
}



#container {
 width:765px;
 height:100%;
 margin:0 auto; 
 padding:0; 
}
 

#nav {
 float:left;
 width:245px;
 height:550px;
 background-color:#ff7f00;
 background-repeat: no-repeat;
 background-image:url(http://larussellweb.com/img/godzilla.gif);
 margin:0; 
 padding:0; 
}
  
  
#nav #buttons {
 position: relative;
 top: 415px;
 left:155px;
 width:80px;
 height:auto;
 background-color: transparent;
 margin:0; 
 padding:0; 
}  

     
#nav #buttons ul {
 float:left;
 width:80px;
 height:115px;
 margin:0; 
 padding:0; 
 list-style-type: none; 
}          
 
     
#nav #buttons li {
 float:left;
 background-position: left top;
 background-color: transparent;
 width:80px;
 height:20px;
 margin:0; 
 padding:0; 
}       


#nav #buttons li a.home, a.home:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/home_n.gif); 
} 


#nav #buttons li a.home:hover, a.home:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/home_d.gif); 
} 


#nav #buttons li a.port1, a.port1:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio_n.gif); 
} 


#nav #buttons li a.port1:hover, a.port1:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio_d.gif); 
} 
 
 
#nav #buttons li a.port2, a.port2:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio2_n.gif); 
} 


#nav #buttons li a.port2:hover, a.port2:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio2_d.gif); 
}   
 
 
#nav #buttons li a.port3, a.port3:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio3_n.gif); 
} 


#nav #buttons li a.port3:hover, a.port3:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio3_d.gif); 
}  
     
#nav #buttons li a.port4, a.port4:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio4_n.gif); 
} 


#nav #buttons li a.port4:hover, a.port4:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/portfolio4_d.gif); 
}       


#nav #buttons li a.resume, a.resume:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/resume_n.gif); 
} 


#nav #buttons li a.resume:hover, a.resume:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/resume_d.gif); }   
     

#nav #buttons li a.contact, a.contact:visited {
 float:left;
 width:80px;
 height:20px;
 margin:0; 
 padding:0;
 background-position: left top;
 background:url(http://larussellweb.com/img/contact_n.gif); } 


#nav #buttons li a.contact:hover, a.contact:active {
 background-position: left top;
 background:url(http://larussellweb.com/img/contact_d.gif); }       
     

#wrap {
 float:right;
 width:500px;
 height:100%;
 background:#fff;
 margin:0; 
 padding:0; }

#wrap #footer {
 position: relative;
 bottom:0px;
 width:500px;
 height:30px; 
 background:#fff; }

#wrap #footer div {
 position: absolute;
 bottom:0;
 text-align:right; 
 width:478px;
 height:30px; 
 margin:0;
 padding:0;
 font-size:10px; } 
 
#wrap #footer a, a:visited {
 font-size:10px !important;
 color:#036; 
 text-decoration:underline; }


#wrap #footer a:hover, a:active {
 text-decoration:none; } 
 


#header {
 width:500px;
 height:68px;
 background:#3cf url(http://larussellweb.com/img/logo.gif) no-repeat center center;
 margin:0; 
 padding:0; } 
 
 
#wrap #content {
 width:auto;
 height:auto;
 font-size:12px; 
 color:#666; 
 margin:0;
 padding:0 20px 0 20px; }

#wrap #content h1 {
 clear:both;
 width:auto;
 font-size:14px;
 color:#06f;
 font-variant:small-caps; 
 margin:0 0 2px 0;
 padding:20px 0 0 0; } 
 
 
#wrap #content h3 {
 clear:both;
 width:auto;
 font-size:12px;
 color:#3ec7f4;
 font-variant:small-caps; 
 margin:0 0 10px 0; 
 padding:0; } 
 


 
#wrap #content a, a:visited  {
 font-size:12px !important;
 color:#333;
 text-decoration: underline; } 

#wrap #content a:hover, a:active  {
  text-decoration: none; }  
 

#wrap #content p {
 margin:0;
 padding:0; } 
 
 
#content #skills1,
#content #clients1 {
 float:left;
 width:50%; }

 
#content #skills2,
#content #clients2 {
 float:right;
 width:50%; } 
 
#content #skills1 ul, 
#content #skills2 ul {
 list-style-image: url(http://larussellweb.com/img/dot_sm.gif); 
 margin:0;
 padding:0; }

#content #skills1 li, 
#content #skills2 li {
 margin:0 0 0 15px;
 padding:0; } 
 

#content #links {
 clear:both;
 width:auto; 
 height:auto;
 margin:0;
 padding:0;
 font-size:12px !important; }
 

#content #links ul {
 width:100%;
 list-style-type: none;
 margin:0 0 35px 0; 
 padding:0; }

 
#content #links li {
 margin:0; 
 padding:0;
 line-height: 1.4em; }
 
table#urls {
 clear:both;
 width:100%; 
 height:auto;
 margin:0;
 padding:0 0 20px 0; 
 border-collapse: collapse; 
 border-spacing:0; }
 
table#urls td {
 width: 200px; 
 font-size:12px !important; } 
 
 
#content #formerWeb,
#content #formerWeb2 {
 position:relative;
 width:100%; 
 height:auto;
 padding:0; 
 margin:0; }
 
 
#content #formerWeb ul,
#content #formerWeb2 ul {
 float:left;
 width:100%;
 list-style-type: none;
 margin:10px 0 10px 0; 
 padding:0;  } 


#content #formerWeb ul.l {
 clear:both;
 float:left;
 width:50%;
 list-style-type: none;
 margin:0 0 10px 0;
 padding:0; } 
 
#content #formerWeb ul.r {
 float:right;
 width:50%;
 list-style-type: none;
 margin:0 0 10px 0; 
 padding:0; }


#content #formerWeb li,
#content #formerWeb2 li {
 float:left;
 width:auto;
 display:inline;
 margin:0; 
 padding:0 5px 0 0; }  
 

#content #formerComps {
 width:500px;
 _width:460px;
 height:100%;
 background-color: #fff !important;
 margin-left:-20px;
 _margin-left:0;
 padding:0 0 20px 0; 
 text-align: center; }
 

#content #formerComps img {
 width:auto;
 margin:0;
 padding:0;
 border:1px solid #09f; } 


 
#content #formerWeb #movie_frame {
 clear:both;
 display:block;
 width:100%;
 _width:93%;
 height:210px;
 overflow: hidden; 
 background-color:#fff;
 border:1px solid #09f; } 
 
#content #formerAds {
 width:468px;
 height:auto;
 margin:0;
 _margin:0 -10px 0 0; 
 padding-top:30px; 
 _padding-top:0px; }

 
#content #resume {
 width:100%;
 height:100%;
 background:#fff;
 margin:0; 
 padding:0 0 15px 0;
 font-size:10px; 
 color:#333; }
 
 
#content #resume ul {
 padding:0;
 margin:0; }

#content #resume li {
 list-style-type: none; 
 padding:0 0 10px 0;
 margin:0; }
 

#content #resume a, a:visited {
 font-size: 10px !important;  
 padding:0;
 margin:0; } 
 
#content #resume a:active, a:hover {
 text-decoration: none;  } 
  
 
 
#content #resume h4 {
 clear:both;
 width:auto;
 font-size:11px;
 color:#ff8400;
 font-variant:small-caps; 
 margin:15px 0 5px 0; 
 padding:0; }
 
 
#content #resume h4.less {
 clear:both;
 width:auto;
 font-size:11px;
 color:#ff8400;
 font-variant:small-caps; 
 margin:15px 0 -2px 0 !important; 
 padding:0; } 
 
#content #resume h5 {
 clear:both;
 width:auto;
 display:inline;
 font-size:10px;
 color:#666666;
 font-variant:small-caps; 
 margin:0;  
 padding:0; } 
 
 
#content #resume p {
 padding:0 0 10px 0 !important;
 margin:0;
 font-weight:normal; }


.clear {
 clear:both; 
 padding:20px 0 0 0; }