/* CSS */

/* generales */

html {
	background-color: #000;
	margin: 0;
	padding: 0;
	font-family:'Lucida Grande',Tahoma,sans-serif;
}

body {
	margin: 0;
	padding: 0;
}

#content {
	position: absolute;
	width: 714px;
	height: 590px;
	left: 50%;
	top: 50%;
	margin-top: -295px;
	margin-left: -357px;
	background: url(../img/arcoiris.jpg) no-repeat top right #000;
}

/* encabezado */

h1 {
	display: block;
	width: 554px;
	height: 78px;
	background: url(../img/hombre-cosa.png) no-repeat;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 32px;
}

h1 a {
	display: block;
	width: 554px;
	height: 78px;
}

h1 a:hover {
	background: transparent url("/img/hombre-cosa.png") -0px -78px no-repeat;
}

h1 a span {
	display: none;
}

img {
	border: none
}

/* Menu */

.menu {
	position: absolute;
	top: 137px;
	left: 440px;
	display: block;
	height: 111px;
	width: 114px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
	width: 114px;
	height: 37px;
}

.menu li a {
	display: block;
	width: 114px;
	height: 37px;
	margin: 0;
	padding: 0;
}

.menu span {
	display: none;
}

.menu .menuback {
	display: none;
}

.descripcion .menu .menuback, .mtv .menu .menuback, .julian .menu .menuback{
	display: block;
}


.menu .menuworks{
	background: transparent url("/img/menu.png") 0px -0px no-repeat;
}

.menu .menuabout {
	background: transparent url("/img/menu.png") 0px -37px no-repeat;

}

.menu .menuinfo {
	background: transparent url("/img/menu.png") 0px -74px no-repeat;

}

.menu .menuback {
	background: transparent url("/img/menu.png") 0px -111px no-repeat;
}

.menu .menujulian {
	background: transparent url("/img/menu.png") 0px -161px no-repeat;
	margin-top: 170px;
	*margin-top: 140px;
}

.menu .menuworks a:hover {
	background: transparent url("/img/menu.png") -228px -0px no-repeat;
}

.menu .menuabout a:hover {
	background: transparent url("/img/menu.png") -228px -37px no-repeat;

}

.menu .menuinfo a:hover {
	background: transparent url("/img/menu.png") -228px -74px no-repeat;

}

.menu .menuback a:hover {
	background: transparent url("/img/menu.png") -228px -111px no-repeat;
}

.menu .menujulian a:hover{
	background: transparent url("/img/menu.png") -228px -161px no-repeat;
}


/* Menu secciones */

.works .menu .menuworks {
	background: transparent url("/img/menu.png") -114px -0px no-repeat;
}

.about .menu .menuabout a:hover, .about .menu .menuabout {
	background: transparent url("/img/menu.png") -114px -37px no-repeat;
	cursor: default;

}

.info .menu .menuinfo a:hover, .info .menu .menuinfo {
	background: transparent url("/img/menu.png") -114px -74px no-repeat;
	cursor: default;
}

.menujulian {
	display: none !important;
}

.indice .menujulian, .indice2 .menujulian {
	display: block !important;
}


/*varios */

.videohome {
	position: absolute;
	top: 154px;
}

.footer {
	background: url(../img/logo-chico.png) no-repeat;
	margin: 0;
	padding: 10px 0 0px 30px;
	color: #fff;
	position: absolute;
	top: 552px;
	left: 0 !important;
	font-size: 10px; 
}

/* works */



/* Slider */

#slider {
    width: 420px;
    margin: 0 auto;
    position: absolute;
    top: 128px;
    /* background: url(../img/fondo.jpg) no-repeat 10px -20px; */
    height: 380px;
}

.scroll {
    height: 350px;
    width: 420px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    color: #fff
}

.scrollContainer div.panel {
    padding: 20px 0;
    height: 210px;
    width: 440px;
}


.scrollButtons {
    position: absolute;
    top: 200px;
    cursor: pointer;
    width: 32px;
    height: 36px;
    display: block;
    display: none;
}

.scrollButtons.left {
    right: -52px;
    background-image: url(../img/scroll_left.png);
}

.scrollButtons.left:hover {
background: transparent url("../img/scroll_left.png") -32px -0px no-repeat;
}


.scrollButtons.right {
    right: -90px;
    background-image: url(../img/scroll_right.png);
}

.scrollButtons.right:hover {
background: transparent url("../img/scroll_right.png") -32px -0px no-repeat;
}

.hide {
    display: none;
}

.panel ul, .panel li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.panel ul {
	margin-top: 50px;
}

.volksvagen .panel ul {
	margin-top: 30px;
}

.panel ul li {
	float: left;
	margin: 0 40px 25px 0;
		text-align: center;

}

.panel ul li a {
	color:#fff;
	text-decoration: none;
	text-align: center;
	font-size: 11px;
}


.julian .panel ul {
	width: 380px;
}

.julian .panel ul li {
	padding: 0;
	margin: 0 12px 0 0;
}

.julian .panel ul li a {
	font-size: 30px;
	font-weight: normal;
	line-height: 33px;
	font-family: "Helvetica neue ultralight", Helvetica, Arial;
}

.r {
	color: #b41200 !important;
}

.y {
	color: #e0ac0e !important;
}

.o {
	color: #e06603 !important;
}

.b {
	color: #03b5e0 !important;
}
.julian .panel ul li a:hover {
	color:#66ae36 !important;
	text-decoration: underline;
}
.panel h3 {
	font-weight: normal;
	font-size: 30px;
	margin: 20px 0 -20px 0;
	padding: 0;
	clear: both;
	float: none;
	font-family: "Helvetica neue ultralight", Helvetica, Arial;
}


/* descipcion */

.descripcion #content img {
	margin-top: 148px;
}

.descripcion .texto {
	position: absolute;
	color: #fff;
	left: 445px;
	top: 340px;
}

.descripcion .texto h2 {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}
	
.descripcion #content .texto p {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 10px;
	line-height: 16px;
}


/* about */

.about .scroll {
	position: absolute;
	top: 250px;
	line-height: 18px;
}

.scroll-pane {
	color: #fff;
	width: 440px;
	overflow: auto;
	height: 158px;
	font-size: 10px;
	font-family:'Lucida Grande',Tahoma,sans-serif;
	font-weight: normal;
}

.submenu {
	position: absolute;
	top: 200px;
	left: 0;
}

.submenu li, .submenu {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.submenu li {
	float: left;
	display: block;
	height: 27px;
}

.submenu span {
	display: none;
}

.menuwethink, .menuwethink a {
	width: 141px;
	height: 27px;
	display: block;
	background: transparent url("../img/wethinkweare.png") 0px 0px no-repeat;
}

.menuweare, .menuweare a {
	width: 117px;
	height: 27px;
	display: block;
	background: transparent url("../img/wethinkweare.png") -141px 0px no-repeat;
}

.menuwethink a:hover {
	background: transparent url("../img/wethinkweare.png") 0px -27px no-repeat;
}

.menuweare a:hover {
	background: transparent url("../img/wethinkweare.png") -141px -27px no-repeat;
}

.wethink .menuwethink a {
	background: transparent url("../img/wethinkweare.png") 0px -27px no-repeat;
	cursor: default;
}

.weare .menuweare a {
	background: transparent url("../img/wethinkweare.png") -141px -27px no-repeat;
	cursor: default;
}


.wethink .idioma {
	position: absolute;
	top: 430px;
	text-decoration: none;
	font-size: 11px;
	color: #00b9fc;
}

.wethink .idioma span {
	color: #fff;
}

.wethink .idioma span:hover {
	color: #00b9fc;
}

.people {
	position: absolute;
	top: 360px;
	color: #fff;
	width: 440px;
}

.people, .people li{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 10px;
}

.people li {
	width: 140px;
	height: 60px;
	float: left;
	margin-bottom: 0px;
}

.foto {
	position: absolute;
	background-color: transparent;
	background: none;
	width: 110px;
	height: 100px;
	left: 440px;
	top: 0px;
}

.people span {
	color: #444;
}

.people a {
	text-decoration: none;
	color: #fff;
}

.julian a:hover .foto {
	background-color: transparent;
}

.franco a:hover .foto {
	background-color: transparent;
}

.fernando a:hover .foto {
	background-color: transparent;
}

.nano a:hover .foto {
	background-color: transparent;
}

.yomi a:hover .foto {
	background-color: transparent;
}

.sesti a:hover .foto {
	background-color: transparent;
}


.julieta a:hover .foto {
	background-color: transparent;
}

/* info */

.infotxt {
	position: absolute;
	bottom: 150px;
	color: #fff;
	line-height: 18px;
	font-size: 10px;
}

.infotxt a, .infotxt a:link {
	color: #fff;
	text-decoration: none;
}

.infotxt a:hover{
	color: #00aeef;
	text-decoration: none;
}


.francomail {
	position: absolute;
	top: 47px;
	* top: 57px;
	left: 200px;
	color: #fff;	
}

.infomail {
	position: absolute;
	top: 65px;
	* top: 70px;
	left: 200px;
	color: #fff;
}


.etchevarne {
	display: block;
	width: 72px;
	height: 18px;
	background-image: url(../img/etchevarne.png);
	position: absolute;
	left: 643px;
	top: 0;
}

.etchevarne:hover {
	background: transparent url("../img/etchevarne.png") 0px -18px no-repeat;
}

.etchevarne span {
	display: none
}

.paging {
	color: #fff;
	position: absolute;
	top:145px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	z-index: 5000;
}

.paging li {
	float: left;
}


.paging a {
	display: block;
	height: 16px;
}

.page1 a {
	width: 52px;
	background: transparent url("../img/works/page.png") 0px 0px no-repeat;
}

.page2 a {
	width: 49px;
	background: transparent url("../img/works/page.png") -52px 0px no-repeat;
}


.paging span {
	display: none;
}	

.page1 a:hover {
	background-position: 0 -16px;
}

.page2 a:hover {
	background-position: -52px -16px;
}



.paging2 {
    position: absolute;
    top: 300px;
    left: 400px;
    cursor: pointer;
    display: block;
}

.paging2 li {
	float: left;
}









.paging2 a {
	display: block;
	height: 32px;
	width: 40px;
}

.left a {
	background: transparent url("../img/scroll_left.png") 0 0 no-repeat;
}

.right a {
	background: transparent url("../img/scroll_right.png") 0 0 no-repeat;
}


.paging2 span {
	display: none;
}	

.left a:hover {
	background-position: -32px 0px;
}

.right a:hover {
	background-position: -32px 0px;
}



.indice .page1 a {
	background-position: 0 -16px;
	cursor: default;
}

.indice .left a {
	background-position: -32px 0;
	cursor: default;
}



.indice2 .page2 a {
	background-position: -52px -16px;
	cursor: default;
}

.indice2 .right a {
	background-position: -32px 0;
	cursor: default;
}