/* CSS Document */
html, body { margin:0px; margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; padding:0px; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; background-color:#3b3b3b; color:#000; height:100%;}
ul,li { list-style:none;}
#container {display: table; height: 100%; width: 100%; margin:0; background:url(imagenes/comeycalla_fondo_gris.jpg) center center repeat-x #3b3b3b;}
#container_home {display: table; height: 100%; width: 100%; margin:0; background:url(imagenes/comeycalla_fondo_gris_home.jpg) center center repeat-x #3b3b3b;}
#centrado { display: table-cell; vertical-align: middle; position: relative;}
#inner { width:1000px; height:585px; margin: 0 auto; padding:0; background:url(imagenes/comeycalla_fondo.jpg) center center no-repeat #454545;}
#inner_home { width: 1000px; height:760px; margin: 0 auto; padding:0; background:url(imagenes/comeycalla_fondo_home.jpg) center center no-repeat #454545; text-align:center;}
/* \*/
* html #centrado { top: 50%; left: 0; height: 1px;}
* html #centrado #inner { position: relative; top: -50%;}
* html #centrado #inner_home { position: relative; top: -50%;}




/*Div Entrar*/
#inner ul { width:600px; height:440px; margin:0; padding:100px 200px 45px 200px; display:block;}
#inner li { margin:0; padding:0; float:left;}
#inner li.izquierda { height:250px; padding:190px 0px 0px 0px; text-align:center; float:left; width:290px; line-height:1.5em;}
#inner li a#btnentrar {	width:160px; height:55px; background:url(imagenes/comeycalla_entrar.gif) top left no-repeat; text-indent:-9999px; margin:0px 65px 10px 65px; padding:0; position:relative; display:block;}
#inner li a#btnentrar:hover, a#btnentrar:link, a#btnentrar:visited {background-position: bottom left;/* con esto cambiamos la porcion de imagen que se muestra*/ position:relative; }

#inner_home ul { width:665px; height:601px; margin:0; padding:79px 167px 79px 167px;}
#inner_home li { margin:0; padding:0;}


a{ color:#4a050f; font-weight:bold; text-decoration:none;}
a:hover{ color:#890517; font-weight:bold; text-decoration:none;}
h1 { margin:0; padding:0; font: 10px/12px Verdana, Arial, Helvetica, sans-serif;}

#inner li.derecha { margin:0; padding:0; float: right; display:block; width:310px; height:440px; line-height:1.5em;}
.bloque { height:130px; margin:0; padding:0;}
.bloque_big { height:320px; margin:0; padding:0;}
.bloque_izquierda { height:80px; margin:0; padding:0;}

.esplorer{ height:1%;}

/*Configuracion de cuadro texto de index*/
#pane2 { height: 250px;}
.holder { margin: 125px 10px 10px 10px;}
.scroll-pane { width: 265px; height: 250px; overflow: auto; float: left;}
.scroll-pane img { margin:0px; padding:0px 6px 5px 0px; float:left;}
.scroll-pane span {font:11px Verdana, Arial, Helvetica, sans-serif; color:#600612;}

/*Esto modifica el diseņo de las partes del scroll. Barra y arrows*/
/*Esto es lo que configura el diseņo de las flechas*/
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;}

/*Esto configura los bloques que forman la barra y las flechas del scroll, sin esto no aparece en pantalla.*/
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1;}
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #f54370;}
.jScrollPaneDrag { position: absolute; background: #830e1e; 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: 20px;}
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 20px; }

/*Este css es para configurar si quieremos que el ancho de la barra del scroll sea mayor de ancho no de alto*/
.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;}