/* general rule: select all elements with property X that have value Y for being applied with this styles
	 * one special rule is the class-rule:
	 *		select all elements with the class (that's only a property) X that have the name Y (that's only a value!) for being applied with this styles
	 *		select all elements with the id (that's only a property) X that have the name Y (that's only a value!) for being applied with this styles
	 */

	/* global behaviour for elements */
	html, body, table.everything {
		padding: 0px;
		margin:  0px;
		width:  100%;
		height: 100%;

 		/* commands that inherit:
		 * - font-family
 		 * - color
		 * - cursor
 		 */
		font-family: Arial, "Nimbus Sans L", Sans-Serif;
		text-align: left;

		color: #000000;
		background-color: #898F9F;
	}

	/* style the image in the nice caligo way :) */
	/* level-1 */
	ul {
		font-weight: bold;
		font-size: 13px;
		list-style-image: url(../../img/leer.gif);
		padding-top: 5px;
	}

	ul li {
		position: relative;
		padding-top: 7px;
		padding-bottom: 5px;
	}

	ul li div.dot {
		display: inline;
		position: absolute;
		top: 4px;
		left: -26px;
		width: 22px;
		height: 22px;
		background-image: url(../../images/icono-level1.png);
	}

	/* level-2 */
	ul li ul {
		font-weight: normal;
		font-size: 10px;

	}

	ul li ul div.dot {
		top: 3px;
        display: inline;
		position: absolute;
		top: 4px;
		left: -26px;
		width: 17px;
		height: 17px;
		background-image: url(../../images/icono-level4.png);
	}

	ul li ul li {
	}

	/* level-3 */
	ul li ul li ul {
	}

	ul li ul li ul div.dot {
		top: 3px;
		display: inline;
		position: absolute;
		top: 4px;
		left: -26px;
		width: 17px;
		height: 17px;
		background-image: url(../../images/icono-level7.png);
	}


	/* level-4 */
	ul li ul li ul li ul {
	}

	ul li ul li ul li ul li {
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	a img {
		border-width: 0px;
	}

	/* usefull and often used stuff */
	.cover {
		width:  100%;
		height: 100%;
	}
	table.cover {
		/*
		min-width: 800px;
		min-height: 550px;
*/
		min-width: 770px;

		max-width: 1280px;
		max-height: 1024px;
	}

	/* on all pages */
	.mariposa {
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 25;
	}

	.logo {
		position: absolute;
		top: 1px;
		right: 1px;
		z-index: 20;
	}

	.navigation {
		position: relative;
		z-index: 5;

		height: 61px;
		text-align: center;
		vertical-align: bottom;
		background-color: #CACAD5;

		font-size: 11px;
		font-weight: bold;
	}

	.centrum {
	/*	background-color: #898F9F;*/
		position: relative;
		width:  100%;
		height: 100%;
	}

	.footer {
		height: 60px;
		vertical-align: top;
		background-color: #464951;
	}

	.footer .container {
		position: relative;
		top: 60px;
	}

	.bandera {
		float: left;
		text-align: center;
		padding-left: 7px;
		padding-top: 12px;

		color: #898F9F;
		font-size: 11px;
		font-weight: normal;
	}

	.bandera:hover {
		color: white;
	}

	.bandera.active {
		color: #CACAD5;
	}

	.bandera img {
		padding-top: 5px;
	}

	.curvamenu {
		background: right bottom url(../../images/linea-amarilla.png) no-repeat;

		padding-right: 16px;
		padding-bottom: 9px;

		color: white;
		font-size: 12px;
		font-weight: bold;

		position: absolute;
		z-index: 10;
	}

	.curvamenu:hover {
		background: right bottom url(../../images/linea-roja.png) no-repeat;
		color: #F7C131;
	}

	.var4i { right: 643px; bottom: 173px; padding-right: 29px; } .var4i:hover { right: 600px; padding-right: 72px; }
	.var3i { right: 640px; bottom: 208px; padding-right: 33px; } .var3i:hover { right: 596px; padding-right: 77px; }
	.var2i { right: 633px; bottom: 243px; padding-right: 34px; } .var2i:hover { right: 587px; padding-right: 80px; }
	.var1i { right: 620px; bottom: 278px; padding-right: 27px; } .var1i:hover { right: 573px; padding-right: 74px; }
	.var0i { right: 603px; bottom: 313px; padding-right: 20px; } .var0i:hover { right: 552px; padding-right: 71px; }

	.var9c { right:  64px; bottom: 103px; padding-right: 20px; width: 81px; } .var9c:hover { right:  22px; padding-right: 62px; width: 81px; }
	.var8c { right:  69px; bottom: 138px; padding-right: 20px; width: 81px; } .var8c:hover { right:  28px; padding-right: 61px; width: 81px; }
	.var7c { right:  72px; bottom: 173px; padding-right: 20px; width: 80px; } .var7c:hover { right:  32px; padding-right: 60px; width: 80px; }
	.var6c { right:  73px; bottom: 208px; padding-right: 20px; width: 81px; } .var6c:hover { right:  33px; padding-right: 60px; width: 81px; }
	.var5c { right:  72px; bottom: 243px; padding-right: 20px; width: 82px; } .var5c:hover { right:  32px; padding-right: 60px; width: 82px; }
	.var4c { right:  69px; bottom: 278px; padding-right: 20px; width: 84px; } .var4c:hover { right:  29px; padding-right: 60px; width: 84px; }
	.var3c { right:  64px; bottom: 313px; padding-right: 20px; width: 86px; } .var3c:hover { right:  23px; padding-right: 61px; width: 86px; }
	.var2c { right:  56px; bottom: 348px; padding-right: 20px; width: 88px; } .var2c:hover { right:  14px; padding-right: 62px; width: 88px; }
	.var1c { right:  46px; bottom: 383px; padding-right: 20px; width: 91px; } .var1c:hover { right:   2px; padding-right: 64px; width: 91px; }
	.var0c { right:  33px; bottom: 418px; padding-right: 20px; width: 95px; } .var0c:hover { right: -12px; padding-right: 65px; width: 95px; }

	.var9g { right:  10px; bottom: 103px; padding-right: 20px; width: 100px; } .var9g:hover { right: -30px; padding-right: 60px; width: 100px; }
	.var8g { right:  16px; bottom: 138px; padding-right: 20px; width: 100px; } .var8g:hover { right: -24px; padding-right: 60px; width: 100px; }
	.var7g { right:  20px; bottom: 173px; padding-right: 20px; width: 100px; } .var7g:hover { right: -20px; padding-right: 60px; width: 100px; }
	.var6g { right:  23px; bottom: 208px; padding-right: 20px; width: 100px; } .var6g:hover { right: -17px; padding-right: 60px; width: 100px; }
	.var5g { right:  27px; bottom: 243px; padding-right: 20px; width: 100px; } .var5g:hover { right: -13px; padding-right: 60px; width: 100px; }
	.var4g { right:  29px; bottom: 278px; padding-right: 20px; width: 100px; } .var4g:hover { right: -11px; padding-right: 60px; width: 100px; }
	.var3g { right:  30px; bottom: 313px; padding-right: 20px; width: 100px; } .var3g:hover { right: -10px; padding-right: 60px; width: 100px; }
	.var2g { right:  32px; bottom: 348px; padding-right: 20px; width: 100px; } .var2g:hover { right: -10px; padding-right: 62px; width: 100px; }
	.var1g { right:  31px; bottom: 383px; padding-right: 20px; width: 100px; } .var1g:hover { right: -10px; padding-right: 61px; width: 100px; }
	.var0g { right:  28px; bottom: 418px; padding-right: 20px; width: 100px; } .var0g:hover { right: -12px; padding-right: 60px; width: 100px; }

	.producto1 {
		color: white;
		font-size: 12px;
		font-weight: bold;
		text-align: center;

		position: absolute;
	}

	.producto1:hover {
		color: #F7C131;
	}

	/* the direction and some main navigation points */
	.bottommenu,
	.bottommenugrande {
		position: absolute;
		bottom: 10px;
		right: 83px;
		width: 490px;
		color: white;
	}

	.bottommenu       a,
	.bottommenugrande a {
		text-align: left;
	}

	.bottommenu       a:hover,
	.bottommenugrande a:hover {
		text-decoration: underline;
	}

	.bottommenugrande {
		right: auto;
		left: 35%;
	}

	/* only in the index */
	.circulo {
		position: absolute;
		right: 10px;
		bottom: 0px;
	}

	.circulogrande {
		position: absolute;
		left: 60px;
		right: 0px;
		bottom: 0px;
		overflow: hidden;
	}

	.circulogrande img {
		display: block;
	}

	.circle_left {
		float: left;
		clear: left;

		height: 12px;

		margin-right: 10px;
	}

	.circle_right {
		float: right;
		clear: right;

		height: 10px;

		margin-left: 10px;
	}

	.frente {
		position: absolute;
		right: 94px;
		bottom: 60px;
	}

	/* this is the class for setting up the menu-title
	 * to be able to be used as orientation for the
	 * submenus
	 */
	.menutitle {
		position: relative;
		display: inline;

		/* all anchors get cursors automatically, but we want
		 * to have the menu-titles to have the cursor too, so
		 * we have to say that manually
		 */
		cursor: pointer;
	}

	/* this is the whole menu-block with all sub-menu texts within */
	.submenu {
		position: absolute;

		/* this 14 pixels positions the submenu-box directly
		 * under the title, without space between them
		 */
		top: 14px;
		/* this border is part of the submenu-box, reacts to hovers
		 * behaves exatly like being part of the box, but makes the 1px
		 * invisible space between the title and the submenu
		 */
		border-top: 1px solid transparent;

		left: -22px;
		right: -18px;
		z-index: 5;

		/* when the mouse is elsewhere, the submenu-boxes doesn't appear */
		visibility: hidden;
	}

	/* we want to modify the submenu-box's visibility
	 * when the father (that is the menutitle-box)
	 * becomes hovered
	 */
	.menutitle:hover .submenu {
		visibility: visible;
	}

	/* general for mouse-over and mouse-out */
	.submenu div {
		background: #FFC529;

		opacity: 0.7;
		color: #464951;
	}

	/* overwrites in case of mouse-over */
	.submenu div:hover {
		opacity: 1.0;
		color: black;
	}

	.titulo-principal {
		position: absolute;
		left: 240px;
		top: -50px;
		z-index: 2;
	}

	.titulo-principal h1 {
		padding-left: 100px;
		padding-right: 10px;

		color: white;
		font-weight: bold;
		font-size: 18px;

		border-bottom: 1px solid #595D67;
		display: inline;
	}

	.titulo-principal img {
		position: absolute;
		top: -25px;
		z-index: 2;
	}

	.tema-galeria table {
		float: left;
		margin: 10px;
		margin-bottom: 15px;
		text-align: justify;
	}

	.tema-galeria a {
		font-weight: bold;
		float: right;
	}

	.tema-galeria a:hover {
		text-decoration: underline;
	}

	/* completly remove all table-cells that exists
	 * in the tema-galeria class
	 */
	.tema-galeria td {
		display: none; }

	/* ... and the text */
	.tema-galeria td.imglistcaption {
		display: table-cell;

		/* the text get some distance to the image
		 * and has a fixed height for next elements
		 * not to float next to the text
		 * this won't of course solve the case of
		 * a text that makes the cell bigger than 45
		 * 45 is for 3 lines of text
		 */
		height: 45px;
		padding: 0px;
		padding-top: 7px;
		vertical-align: top;
		text-align: center;
	}

	/* turn those cells on again, that contain the
	 * image ...
	 */
	.tema-galeria td.imagelisttd {
		display: table-cell;
		border: 1px solid green;
  }

	.tema-galeria td.imagelisttd div.iborder {
		position: relative;
		display: block;
	}

	.tema-galeria td.imagelisttd div.iborder img {
		position: relative;
		z-index: 0;
		left: 0px; top: 0px;
		display: block;
	}

	/* the image also gets nice round borders */
	.tema-galeria td.imagelisttd div div.inner,
	.tema-galeria td.imagelisttd div div.outer {
		position: absolute;
		z-index: 1;
		display: block;
		width: 100%; height: 100%;
	}

	.tema-galeria td.imagelisttd div div.inner {
		left: -2px; top: -2px;
		-moz-border-radius: 15px;
		border: 2px inset #CACAD5;
	}

	.tema-galeria td.imagelisttd div div.outer {
		left: -7px; top: -7px;
		-moz-border-radius: 20px;
		border: 5px solid #CACAD5;
		padding: 2px;
	}