@charset "UTF-8";
/* CSS Document */



html {
	margin: 0;
	padding: 0;
	background-image: url(../images/bgd_tile_index.jpg);
	background-repeat: repeat;
}

body {
	margin: 0;
	padding: 0;
	background-image: url(../images/bgd_lines_index.jpg);
	background-repeat: repeat-x;
}


#wrapper {
	height: 768px;
	width: 1024px;
	margin: 0;
}

#header {
	margin: 0px;
	width: 805px;
	height: 74px;
	text-decoration: none;
	position: relative;
	background-image: url(../images/header_bgd_index_repeat.jpg);
	background-repeat: repeat-y;
	padding: 36px 179px 0 40px;
}

#left_sidebar {
	margin: 0px;
	height: 473px;
	width: 253px;
	float: left;
	background-attachment: scroll;
	background-repeat: repeat;
	padding-top: 185px;
	background-image: url(../images/bgd_tile_index.jpg);
}


#center_panel {
	margin: 0px;
	height: 900px;
	width: 500px;
	float: left;
	padding: 120px 0 0 92px;
	background-attachment: scroll;
	background-image: url(../images/center_tile_index.jpg);
	background-repeat: repeat;
}

#right_sidebar {
	margin: 0px;
	height: 473px;
	width: 179px;
	float: right;
	padding-top: 185px;
	background-attachment: scroll;
	background-image: url(../images/bgd_tile_index.jpg);
	background-repeat: repeat;
}

/* Nav stuff */

/* this removes the outline in Firefox */
a:active, a:focus {outline: 0;}

#nav_main{
	height: 25px;
	width: 100%;
	margin: 0;
	padding: 0;
}
#nav_main li  {
	margin: 0;
	padding: 0;
	list-style-type: none; /* list-style-type property is a li (list item) property, so it should be here and not on the ul */
	float: right; /* we float the list items to the right and not the a tag where you had it before */
}
  
 /* you only have to call one time for your image on the a tag and I made a shorthand version for the background-image and background-repeat  properties. And your issue was because you did not set the a tag to display: block. */  
#nav_main li a{
	display: block;
	margin:0;
	padding:0;
	height: 25px;
	text-indent: -9999px;
	background-image: url(../images/index_mainnav.jpg);
	background-repeat: no-repeat;
}

    
#nav_main li#portfolio a{
	width: 88px;
	background-position: 0px 0;
}

#nav_main li#portfolio a:hover{
    background-position: 0 -50px;
}
    
#nav_main li#profile a{
    width: 73px;
    background-position: -88px 0;
}

#nav_main li#profile a:hover{
    background-position: -88px -50px;
}

body#profile #nav_main li#profile a{
    background-position: -88px -25px;
}
    
#nav_main li#contact a{
    width: 77px;
    background-position: -161px 0;
}

#nav_main li#contact a:hover{
    background-position: -161px -50px;
}

body#contact #nav_main li#contact a{
    background-position: -161px -25px;
}

    


/* Sub Nav stuff */
    
#sub_nav_index {
	height: 56px;
	width: 417px;
	padding: 0;
	float: right;
	margin-top: 12px;
}

#sub_nav_index li {
	margin: 0;
	padding: 0;
	list-style-type: none; 
	float: right; 
}
  
 /* you only have to call one time for your image on the a tag and I made a shorthand version for the background-image and background-repeat  properties. And your issue was because you did not set the a tag to display: block. */  
#sub_nav_index li a{
	display: block;
	margin:0;
	padding:0;
	height: 56px;
	text-indent: -9999px;
	background-image: url(../images/index_subnav.jpg);
	background-repeat: no-repeat;
}

#sub_nav_index li#publications a{
	width: 257px;
	background-position: -160px 0;
}

#sub_nav_index li#publications a:hover{
    background-position: -160px -116px;
}
 
#sub_nav_index li#brochures a{
	width: 160px;
	background-position: 0px 0px;
}

#sub_nav_index li#brochures a:hover{
    background-position: 0 -116px;
}

#sub_nav_index li#identity a{
	width: 147px;
	background-position: -270px -56px;
}

#sub_nav_index li#identity a:hover{
    background-position: -270px -172px;
}    

#sub_nav_index li#collateral a{
	width: 150px;
	background-position: -120px -56px;
}

#sub_nav_index li#collateral a:hover{
    background-position: -120px -172px;
}


#sub_nav_index li#reports a{
	width: 120px;
	background-position: 0px -56px;
}

#sub_nav_index li#reports a:hover{
    background-position: 0 -172px;
}