body {
	background: url(../imagenes/fondo.png) repeat-x;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0;
	display:none;
	padding: 0;
}
#wrapper {
	width: 800px;
	margin: 0 auto;
	background: url(wrapper-background.png) top left repeat-y;
}
#contents {
	min-height: 400px;
	padding-left: 22px;
	padding-right: 22px;
}

p {display:none;}

#menu{
	padding-top:100px;
	float:left;}
	
.jordi {padding-top:350px;
		margin-left:80%;

		}
.jordi img {border:0px;}
.photo {height:66px;}

#photo, #design, #blog {width:120px ; height:66px;}
a#photo {

                display:block;
                width:120px;
                min-height:66px /* aqui esta el truco */
				margin:10px;
                text-indent:-9999px;
				background:url(../imagenes/photo.png) top left no-repeat;

    }

    a#photo:hover {

                background-position:0 -66px;/* con esto cambiamos la porcion de imagen que se muestra */

    }
    
a#design {

                display:block;
                width:120px;
                min-height:66px /* aqui esta el truco */
				margin:10px;
             	text-indent:-9999px;
				background:url(../imagenes/design.png) top left no-repeat;

    }

    a#design:hover {

                background-position:0 -66px;/* con esto cambiamos la porcion de imagen que se muestra */

    }

a#blog {

                display:block;
                width:120px;
                min-height:66px /* aqui esta el truco */
				margin:10px;
             	text-indent:-9999px;
				background:url(../imagenes/blog.png) top left no-repeat;

    }

    a#blog:hover {

                background-position:0 -66px;/* con esto cambiamos la porcion de imagen que se muestra */

    }
    
 #footer {
	width: 800px;
	border: 0;
	margin: 0 auto;
	text-align: center;
	text-indent:-9999px;
	margin-top:100px;
	color: #333;
	background: url(../imagenes/footer.png) top left no-repeat;
}
#footer_contents {
	padding-top: 20px;
	padding-left: 22px;
	padding-right: 22px;
}