/* ****************************************************************************************************************
 *      Web:            reinicio                                                                                  *
 *      Autor:          Ruben Manzano                                                                             *
 *      Hoja:           nueva_maqueta.css                                                                         *
 *      Descripcion:    remaquetacion de bow-tie.eu                                                               * 
 *      Fecha:          24/03/2010                                                                                *
 *****************************************************************************************************************/

/* incluir el css para el catalogo */
 @import url("catalogo.css");
 
/*** HACKS PARA IE ***/
 
/* Si necesitas aplicarlo a IE7 utiliza este:*/
*:first-child+html {
}
/*** NEUTRALIZANDO ESTILOS:
elementos que queremos limpiar completamente: ***/
* {margin: 0; padding: 0; /*border: none;* eliminado para darle el estilo por defecto a los botones de formulario*/ }
html #cabecera, html #contenidos, html #pie { font: 62.5% Arial, Helvetica, sans-serif; /*text-shadow: #000 0px 0px 0px;Elimina el efecto bold en Safari*/ }

/*** NEUTRALIZANDO ESTILOS:
elementos con margen vertical: ***/
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address { font-weight: normal; margin: 0; }

/*** Algunos ajustes basicos: ***/
sup { position: relative; bottom: 0.3em; vertical-align: baseline; }
sub { position: relative; bottom: -0.2em; vertical-align: baseline; }
li, dd, blockquote {  list-style: none; }

/*** LINKS: */

a, a:link, a:visited, a:hover, a:active, a:focus {
outline: 0; text-decoration: none; border-bottom: 0; border-top: 0; border-left: 0; border-right: 0;}
a img { border: none; text-decoration: none; outline: 0;}
img {border: none; text-decoration: none; }

/*** FORMULARIOS: ***/
/*label,*/ button { cursor:pointer; }
/*input, select, textarea { font-size: 100%;}*/
input:focus, select:focus, textarea:focus { background-color: #FFF;}
fieldset { border: none;}
/*** Algunas clases �tiles: ***/
.clear {clear: both;}
.float-left {float: left;}
.float-right {float: right;}
.helvetica {font-family: Arial, Helvetica, Geneva, sans-serif;}

.estirar{ height: 1%;}
.estirar:after {clear:both; content:".";display:block; height:0pt; visibility:hidden; }

.alt{ display: none;}

abbr{ border-bottom: 0;}
/* ========================== MAQUETACION ===================== */

body{ text-align: center; background: #000; color: #fff; padding: 50px 0 0 0; font-family: Verdana, Arial, sans-serif;}

div#contenedor{ width: 950px; margin: auto; owerflow: hidden;}

/* ========= cabecera ======= */

div#cabecera{ width: 950px;}

div#cabecera h1{ text-indent: -9999px; background: url(../images/tit_form.jpg) no-repeat center 20px; width: 950px; height: 155px;}

div#cabecera a.enlaceLogo:link{ width: 950px; height: 155px; display: block;}
div#cabecera a.enlaceLogo:visited{ width: 950px; height: 155px; display:}
div#cabecera a.enlaceLogo:hover{ width: 950px; height: 155px; display: block;}
div#cabecera a.enlaceLogo:active{ width: 950px; height: 155px; display: block;}

/* menu de navegacion */

ul#menuNav{ height: 26px; width: 950px; background: #222; text-align: center;}



/*ul#menuNav li{ display: inline-block; position: relative; top: -2px; left: 6px; margin: 0;}*/

ul#menuNav li{ float: left; position: relative; top: -2px; left: 17px; margin: 0;}


div#cabecera li a:link{ color: #000; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.9em; font-weight: bolder; margin-right: 7px;}
div#cabecera li a:visited{ color: #000; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.9em; font-weight: bolder; margin-right: 7px;}
div#cabecera li a:hover{ color: #fff; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.9em; font-weight: bolder; margin-right: 7px;}
div#cabecera li a:active{ color: #fff; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 1.9em; font-weight: bolder; margin-right: 7px;}


/* item de menu activo */

div#cabecera ul.home li#ihome a{ color: #fff;}
div#cabecera ul.filosofia li#ifilosofia a{ color: #fff;}

div#cabecera ul.coleccion li#icoleccion a{ color: #fff;}
	body.clasicos li#icoleccion a,
	body.slippers li#icoleccion a,
	body.slippers_encargo li#icoleccion a,
	body.gala li#icoleccion a,
	body.boots li#icoleccion a,
	body.amricain li#icoleccion a,
	body.mocasines li#icoleccion a,
	body.nauticos li#icoleccion a,
	body.alpargatas li#icoleccion a,
	body.accesorios li#icoleccion a,
	body.alpargatas li#icoleccion a,
	body.corbatas li#icoleccion a,
	body.tirantes li#icoleccion a,
	body.slipperss li#icoleccion a,
	body.sliperss_encargo li#icoleccion a,
	body.botas_senhora li#icoleccion a, 
	body.alpargatass li#icoleccion a { color: #fff;}  

	div#cabecera ul.tiendas li#itiendas a{ color: #fff;}
div#cabecera ul.good li#igood a{ color: #fff;}
div#cabecera ul.prensa li#iprensa a{ color: #fff;}
div#cabecera ul.contacto li#icontacto a{ color: #fff;}
div#cabecera ul.news li#inews a{ color: #fff;}
div#cabecera ul.comprar li#icomprar a{ color: #fff;}



/* ========== contenido ============== */


/* contenido home */

div#contenidoHome{ height: 389px; padding: 20px 0 0 0; background: url(../images/fondohome.jpg) no-repeat top center;}


/* contenido filosofia */

div#contenidoFilosofia{  height: 359px; padding: 50px 33px 0 472px; background: url(../images/fondo-filosofia.jpg) no-repeat center top; overflow: hidden; text-align: left;}

	div#contenidoFilosofia p{ width: 427px; padding: 0 32px 0 0; float: right; text-align: left; display: block; clear: both; font-size: 0.7em; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; margin: 0 0 20px 5px;}
	

/* contenido comunes */

div#contenidoComunes{ height: 359px; width: 950px; padding: 50px 0 0 0; background: url(../images/fondocolage.jpg) no-repeat top center; font-family: Verdana, Arial, sans-serif;}

div#contenidoComunes h2{ font-family: Verdana, Arial, Sans-serif; font-size: 0.9em; font-weight: bolder;}

div#contenidoComunes h3{ font-family: Verdana, Arial, Sans-serif; font-size: 0.8em; font-weight: bolder; text-transform: uppercase;}


	
	/* tienda - contenidos comunes */
	
	div#contenidoComunes.tienda{ padding:50px 0 0 148px;}
	
		/* contenido tiendax */
		
		div#tiendax{ height: 359px; padding: 50px 0 0 0; background: url(../images/fondocolage.jpg) no-repeat center top; overflow: hidden; text-align: left; width: 950px;}
		
		ul#tiendaImagenes{ float: left; width: 158px; padding: 0 0 0 138px}
		
		UL#tiendaImagenes img{ width: 164px; height: 115px;}
		
		div#tiendaEstablecimientos{float: left; width: 164px; padding: 0 165px 0 102px; overflow: hidden; text-align: center; position: relative; top: -5px;}
		div#tiendaEstablecimientos h2{ display: block; font-size: 0.8em; font-weight: bolder; text-align: center;}
		div#tiendaEstablecimientos ul{ width: 164px;}
		div#tiendaEstablecimientos ul li{ margin: 0; padding: 0;}
		div#tiendaEstablecimientos ul li ul li{ margin: 0; padding: 0; font-size: 0.8em;}
		div#tiendaEstablecimientos ul li ul li h3{ font-size: 1em;}
		
		
		#tiendaPuntosVenta{ }
		h2#encabezadoPuntosVenta{ font-size: 0.8em; font-weight: bolder; position: relative; top: -4px;}
		
		
		
		#tiendaPuntosVenta ul{ overflow: hidden;}
		#tiendaPuntosVenta ul li{ margin: 0 0 10px 0;}
		
		#tiendaPuntosVenta ul.datosTiendas{ margin: 10px 0 0 0;}
		#tiendaPuntosVenta ul.datosTiendas li{ margin: 0; font-size: 0.7em; text-transform: uppercase;}
		#tiendaPuntosVenta h3{ font-size: 0.9em; font-weight: bolder;}
		

	
	
	/* contenido goodyear welt */
	
	div#contenidoGoodyear{ height: 359px; padding: 50px 33px 0 476px; background: url(../images/fondo-goodyear.jpg) no-repeat center top; overflow: hidden; text-align: left;}
	
	div#contenidoGoodyear h2{ font-size: 0.8em; font-weight: bold; padding: 0 0 15px 0;}
	div#contenidoGoodyear h3{ font-size: 0.8em; font-weight: bold; padding: 0 0 8px 0; width: 360px;}

	div#contenidoGoodyear p{ font-size: 0.7em; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; margin: 0 0 20px 0; width: 434px;}
	
		/* listados goodyear */
		div#contenidoGoodyear li{ font-size: 0.7em; width: 390px;}
			
			/* sin orden */
			div#contenidoGoodyear ul{ padding: 0 0 17px 0;}	
			div#contenidoGoodyear ul li{}
	 no-repeat 18px 6px; padding: 0 0 3px 0;}
	 
			/* ordenado */
			div#contenidoGoodyear ol{ padding:0 0 17px 0}
			div#contenidoGoodyear ol li{ margin: 0 0 10px 5px; width: 390px;}
			
			div#contenidoGoodyear ol li.fnd1{ background: url(../images/botones-numeros.gif) no-repeat 0 0; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd2{ background: url(../images/botones-numeros.gif) no-repeat 0 -37px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd3{ background: url(../images/botones-numeros.gif) no-repeat 0 -75px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd4{ background: url(../images/botones-numeros.gif) no-repeat 0 -111px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd5{ background: url(../images/botones-numeros.gif) no-repeat 0 -144px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd6{ background: url(../images/botones-numeros.gif) no-repeat 0 -184px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd7{ background: url(../images/botones-numeros.gif) no-repeat 0 -228px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd8{ background: url(../images/botones-numeros.gif) no-repeat 0 -261px; padding: 6px 0 4px 30px}
			div#contenidoGoodyear ol li.fnd9{ background: url(../images/botones-numeros.gif) no-repeat 0 -298px; padding: 6px 0 4px 30px}
		
	
	/* prensa - contenidos comunes */
	
	
	ul#galeriaPrensa{ width: 950px; position: relative; left: 56px;}
	ul#galeriaPrensa li{ float: left; margin: 0 12px 0 0;}
	
	ul#galeriaPrensaInterior{ margin: 0 0 0 213px; width: 920px; position: relative; top: 50px;}
	ul#galeriaPrensaInterior li{ float: left; margin: 0 12px 0 0;}
	p.imagenPrensaInterior{ position: relative; top: 29px;}
	
	p.galeriaVolver{  font-family: Verdana, Arial, sans-serif; font-size: 0.9em;}
	p.galeriaVolver a:link{ color: #fff; font-weight: bolder;}
	p.galeriaVolver a:visited{ color: #fff; font-weight: bolder;}
	p.galeriaVolver a:hover{ color: #999; text-decoration: underline; font-weight: bolder;}
	p.galeriaVolver a:active{ color: #999; text-decoration: underline; font-weight: bolder;}
	
	
	/* contacto contenidos comunes */
	
		/* contacto 1 */
		
		div.contacto ul{ margin: 0 0 15px 0;}
		
		div.contacto ul li{ font-size: 0.8em; font-family: Verdana, Arial, sans-serif;}
		
		div.contacto a:link{ color: #fff;}
		div.contacto a:visited{ color: #fff;}
		div.contacto a:hover{ color: #666;}
		div.contacto a:active{ color: #fff;}

		div.contacto p{ font-size: 0.8em; width: 176px;  margin: auto; position: relative; top: -5px;}
		div.contacto p img{ margin: 30px 0 0 0; margin: auto; padding: 0 0 30px 0;}
		div.contacto p a span{ display: block; padding: 15px 0 0 0;}
		.filete{ display: block; font-size: 1.8em; position: relative; top: -30px;}
		.filete2{ display: block; font-size: 1.8em; position: relative; top: -4px;}
		
		div.contacto h2 a{ padding: 15px 0 0 0; font-size: 0.9em; font-weight: normal;}
		
	
		/* contacto 2 */
		
		div.contacto form{ width: 260px; margin: auto; position: relative; top: 30px;}
		div.contacto form#form1{ position: relative; left: -35px;}
		
		div.contacto label{ font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px; float: left; text-align: right; display: block; width: 111px; margin: 0 0 3px 0;position: relative; left: 15px;}
		
		div.contacto input{ float: right; background-color:#333; border:1px solid #000; color:#999; font-size:11px; position: relative; left: -7px; margin: 0 0 3px 0;}
			div.contacto input:focus, div.contacto textarea:focus{ background: #e5e5e5; color: #000;}
			
		div.contacto textarea{ float: right; background-color:#333; border:1px solid #000; color:#999; font-size:11px; position: relative; left: -7px; margin: 0 0 3px 0; width: 118px; height: 100px; overflow: auto;}
		
		fieldset.envio{ clear: both; position: absolute; top: 178px; left: 140px;}
			fieldset.envio input{ cursor: pointer; width: 52px;}
			
		/* newsletters */
		
		div.contacto p.imagenNews{ display: block; top:6px;}
		form.formularioNews fieldset.envio{ position: relative; left: 38px}
		
		
		fieldset.botonNews{ clear: both; width: 100%; position: absolute; left: -68px; top: 17px;}
		
		fieldset.botonNews input{ width: 52px;}
		
	
	/* contenido comprar */

	div#contenidoCompras{ height: 359px; padding: 50px 0 0 0; background: url(../images/fondocompras.jpg) no-repeat 2px -3px;}
	div#contenidoCompras p{ font-size: 0.8em; width: 422px;  margin: auto; position: relative; top: -5px;}

	

/* ========== pie ================= */

div#pie{ margin: 10px 0 0 0;}

div#pie ul{ clear: both; margin: auto; text-align: center; width: 250px; position: relative; left: 70px;}

div#pie ul li{ float:left; margin: 0; margin: 0 3px 0 0; padding: 0 -7px 0 0;}

div#pie ul li a:link{ font-size: 1.2em; color: #fff;}
div#pie ul li a:visited{ font-size: 1.2em; color: #fff;}
div#pie ul li a:hover{ font-size: 1.2em; color: #222;}
div#pie ul li a:active{ font-size: 1.2em; color: #222;}

div#pie p{ font-size: 1.1em; clear: both;}
div#pie p a:link{ color: #fff;}
div#pie p a:visited{ color: #fff;}
div#pie p a:hover{ color: #222;}
div#pie p a:active{ color: #222;}


/* pie home */

div#pie p.pieHome{ font-size: 1.2em; clear: both;}
div#pie p.pieHome a:link{ color: #fff;}
div#pie p.pieHome a:viisted{ color: #fff;}
div#pie p.pieHome a:hover{ color: #222;}
div#pie p.pieHome a:active{ color: #222;}




/* ============================ SCROLLING ==================== */


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	width: 11px;
	background: #000;
}
.jScrollPaneDrag {
	position: absolute;
	background: #222;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 11px;
	width: 11px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 11px;
	width: 11px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

/* Stylesheet for my demo pages for jScrollPane - these styles aren't necessary for using jScrollPane and aren't specific to any particular example */


a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}


.orange-bar .jScrollPaneTrack {
	background: #f60;
}
.orange-bar .jScrollPaneDrag {
	background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane {
	background: #69f;
}
			
.holder {
	float: left;
	margin: 11px;
}

.scroll-pane {
	width: 300px;
	height: 259px;
	overflow: auto;
	background: transparent;
	float: left;
}

/* para tiendas */

div#tiendax .scroll-pane { width: 223px; height: 259px;	overflow: auto;	background: transparent; float: left;}

/* para catálogo */

div#catalogo .scroll-pane{width: 191px; height: 339px;}

/* para pagina texto - filosofia/goodyear */

div#contenidoFilosofia .scroll-pane{ width: 478px; height: 229px;}
 div#contenidoGoodyear .scroll-pane{ width: 473px; height: 229px;}



.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}

#pane1 {
}
#pane2 {
	height: 150px;
}
#pane3 {
	height: 190px;
}
#pane4 {
	height: 190px;
}