/*
  Soop it! , Ecommerce solutions.
  Copyright (c) 2008 Soop it! 
*/


/* GENERAL */

body {
	background: #f6f6f6;
	color: #454545;
	margin: auto;
	padding-bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
		}

#top {

	background: url(../images/header_bg.png) bottom repeat-x ;
	height: 170px;
		}
		
#header {
	width: 813px;
	height: 183px;
	margin: 0 auto;	
	}
	
#logo {
	margin: 0 auto;
	text-align:center;

	}

#banner {
	position:absolute;
	margin-left:700px;
	}
	
	
#shadow {
	background: url(../images/header_shadow.png) no-repeat;
	width: 813px;
	height: 31px;
	margin: 0 auto;
	}
	
#panel {
	width: 813px;
	margin: 0 auto;
	}
	
#panel2 {
	background: url(../images/panel_bg.png) repeat-y;
	width: 813px;
	margin: auto;
	}

#footer {
	background: url(../images/panel_footer.png) no-repeat;
	width: 813px;
	height: 37px;
	margin: auto;
	}

#imagen {
	margin: 10px;
	}
	
.titulo {
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #336600; 
	font-weight: bold;
	}

.piefoto {
	font-size:10px;
	color: #666666;
	}
	
#presentacion {
	background: url(../images/presentacion.jpg) no-repeat;
	width:700px;
	height:200px;
	margin: 0 auto;
	}

.textopres {
	width:500px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	padding-top: 90px;
	padding-left: 200px;
	text-align:left;
	}

	
/* LISTAS */

ul#contenido li {
	display:block;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

li#registro {
	background:transparent url(../images/candadito.png) no-repeat scroll left top;
	padding-left:70px;
}

li#stock {
	background:transparent url(../images/dispo.jpg) no-repeat scroll left top;
	padding-left:70px;
}

li#web20 {
	background:transparent url(../images/youtube.png) no-repeat scroll left top;
	padding-left:70px;
}
li#efectos {
	background:transparent url(../images/espectacular.png) no-repeat scroll left top;
	padding-left:70px;
}
li#idioma {
	background:transparent url(../images/idiomas.png) no-repeat scroll left top;
	padding-left:70px;
}
li#buscador {
	background:transparent url(../images/buscador.png) no-repeat scroll left top;
	padding-left:70px;
}
li#pedidos {
	background:transparent url(../images/control.jpg) no-repeat scroll left top;
	padding-left:70px;
}
li#descuentos {
	background:transparent url(../images/descuentos.png) no-repeat scroll left top;
	padding-left:70px;
}
li#boletin {
	background:transparent url(../images/boletin.png) no-repeat scroll left top;
	padding-left:70px;
}
li#grupos {
	background:transparent url(../images/grupos.png) no-repeat scroll left top;
	padding-left:70px;
}
li#informes {
	background:transparent url(../images/informes.png) no-repeat scroll left top;
	padding-left:70px;
}
li#imagenes {
	background:transparent url(../images/imagen.png) no-repeat scroll left top;
	padding-left:70px;
}
li#personalizacion {
	background:transparent url(../images/personalizacion.png) no-repeat scroll left top;
	padding-left:70px;
}
li#ampliable {
	background:transparent url(../images/ampliable.png) no-repeat scroll left top;
	padding-left:70px;
}
li#metodos {
	background:transparent url(../images/envios.png) no-repeat scroll left top;
	padding-left:70px;
}
li#afiliados {
	background:transparent url(../images/afiliados.jpg) no-repeat scroll left top;
	padding-left:70px;
}
li#atributos {
	background:transparent url(../images/avanzadas.png) no-repeat scroll left top;
	padding-left:70px;
}
li#demo {
	background:transparent url(../images/demo.png) no-repeat scroll left top;
	padding-left:70px;
}
li#docu {
	background:transparent url(../images/docu.png) no-repeat scroll left top;
	padding-left:70px;
}
li#completa {
	background:transparent url(../images/completa.png) no-repeat scroll left top;
	padding-left:70px;
}


/*SECCIONES */

#section {
	background: url(../images/panel_top.jpg) no-repeat;
	height:85px;
	width: 813px;
	margin: 0 auto;
		}

#section ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0pt;
	padding:0pt;
		}

#section ul li {
	float:left;
	padding-left:8px;
		}

#section a {
	display: block;
	height:85px;
	width:125px;
	text-indent:-9000px;
		}
		
#section a:focus {
outline-color:invert;
outline-style:none;
outline-width:medium;
}

#section a#inicio {background:transparent url(../images/btn_inicio.png) no-repeat top left;}
	
#section a#sencillo {background:transparent url(../images/btn_sencillo.png) no-repeat top left;}
	
#section a#dinamico {background:transparent url(../images/btn_adaptable.png) no-repeat top left;}
	
#section a#gestion {background:transparent url(../images/btn_gestion.png) no-repeat top left;}
	
#section a#demo {background:transparent url(../images/btn_demo.png) no-repeat top left;}
	
#section a#contacto {background:transparent url(../images/btn_contacto.png) no-repeat top left;}
	
	
#section a#inicio:hover { background-position: 0 -85px;}
#section a#sencillo:hover { background-position: 0 -85px;}
#section a#dinamico:hover { background-position: 0 -85px;}
#section a#gestion:hover { background-position: 0 -85px;}
#section a#demo:hover { background-position: 0 -85px;}
#section a#contacto:hover { background-position: 0 -85px;}




/* CODA SLIDER*/

* { margin: 0; padding: 0 }
		/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
		
p { text-align: left; margin: 0 }
		
p, ul { font-size: 13px; line-height: 1.4em } 
		
p a, li a { color: #39c; text-decoration: none }
		
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }
		
p#cross-links { text-align: center }
		
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
		
noscript p, noscript ol { color: #a00; font-size: 11px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }
		
a:focus { outline:none }
		
img { border: 0 }
		
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
		

		
.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
		}
		
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 0 auto;
	position: relative;
	width: 100%;
		}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 740px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 600px;
	clear: both;
	background: #fff;
		}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 740px; /* Also specified in  .stripViewer  above */
		}
		
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 10px;
		}
		
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
		}
		
.stripNav ul { /* The auto-generated set of links */
	list-style: none;
		}
		
.stripNav ul li {
	float: left;
	margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 32px;
	background: #c6e3ff;
	color: #000;
	text-decoration: none;
	display: block;
	padding: 0 20px;
		}
		
.stripNav a:hover {
	background: #9cf;
		}
		
.stripNav a.current {
	background: #39c;
	color: #fff;
		}
		
.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;
	top: 250px;
	text-indent: -9000em;
		}
		
.stripNavL a, .stripNavR a {
	display: block;
	height: 30px;
	width: 30px;
		}
		
.stripNavL {
	left: 0;
		}
		
.stripNavR {
	right: 0;
		}
		
.stripNavL {
	background: url("../images/arrow-left.png") no-repeat center;
		}
		
.stripNavR {
	background: url("../images/arrow-right.png") no-repeat center;
		}