@charset "utf-8";
/* CSS Document */

/*
Theme Name: Champions for Africa
Theme URI: http://www.championsforafrica.es
Description: Theme for Champions for Africa website.
Version: 1.0
Author: Ángel Ambrosio for JWT Delvico
Author URI: http://www.jwtdelvico.com
	
	This theme was designed and built by Ángel Ambrosio for JWT Delvico
	
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	
*/

/* --------------------------------------------------
COLORS DEFINITIONS

White (text) #ffffff

Light Grey (background) #f0f0ee

Light Blue (text) #0096c9
Middle Blue (background & text) #0099ff
-------------------------------------------------- */

/* --------------------------------------------------
Normalización
-------------------------------------------------- */
body {
	font-size: 62.5%;
	/*
	NORMALIAZACIÓN DEL TAMAO DEL TEXTO CON MEDIDAS RELATIVAS:

	- El tamaño por defecto de la tipografía en navegadores modernos corresponde a 16px.
	- Esta normalización del tamaño tiene como misión  hacer corresponder el tamaño por defecto con 1em.
		
	Por tanto,
		 1em = 16px * 0.625 = 10px	(aprox.) <- 0.625 es el factor de conversión.
	Así (aproximadamente)
		 1em = 10px
		 1.1em = 11px
		 1.2em = 12px
		...
	De esta manera obtenemos tamaños de fuentes escalables en IE (mejorando la accesibilidad)
	de una forma sencilla de implementar para el desarrollador.
	*/
}

/* --------------------------------------------------
Styles for native HTML elements
-------------------------------------------------- */
body {
	font-family: Tahoma, Geneva, sans-serif;
	
	margin: 0;
	
	background: #f0f0ee url(../images/background.jpg) repeat top center;
	color: #0096c9;	
	overflow-y: scroll;
}

h1 { font-size: 3em; font-weight: normal; }
h2 { font-size: 1.4em; font-weight: normal; }
h3 { font-size: 1.2em; font-weight: normal; }
h4 { font-size: 1.1em; font-weight: normal; }

img {
	border: 0;
}

p {
	margin-bottom: 15px;
	
	word-wrap: break-word;
}

a {
	color: #0096c9;
}

abbr {
	cursor: help;
}

strong {
	font-weight: bold;
}

input, select, textarea {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1.1em;
	
	color: #000;
}

input[type=submit], input[type=button] {
	cursor: pointer;
}

div {
	/* Enable the next line only for debug purposes */
	/*/border: 1px solid red;/**/
}

/* --------------------------------------------------
Generic classes
-------------------------------------------------- */
.clear { clear: both; }
.null { display: none; }
.visible { display: inherit; }

/* box alignment */
.centered {
	overflow: hidden;
	
	width: 960px;
	
	margin: 0 auto;
	
	text-align: left;
}
.left {
	float: left;
	
	width: auto;
}
.right {
	float: right;
	
	width: auto;
}
.center {
	display: block;
	
	margin-left: auto;
	margin-right: auto;
}

/* text alignments */
.aligncenter { text-align: center; }
.alignleft { text-align: left; }
.alignright { text-align: right; }
.justify { text-align: justify; }

.white {
	color: #FFF;
}

.logo {
	display: block;
	
	width: 214px;
	height: 144px;
	
	margin-bottom: 5px;
	
	background-image: url(../images/logo.png);
} 

.subtitle {
	display: block;
	
	width: 250px;
	height: 16px;
	
	background-image: url(../images/subtitle.png);
}

.line {
	display: block;
	
	height: 1px;
	
	margin: 15px 0;
	
	background: transparent url(../images/line.png) no-repeat top center;
}

a.boton-comprar {
	display: block;
	
	width: 191px;
	height: 33px;
	
	background: transparent url(../images/boton_comprar-entradas.png) no-repeat top left;
}

a.boton-entradas {
	display: block;
	
	width: 89px;
	height: 29px;
	
	background: transparent url(../images/boton_entradas.png) no-repeat top left;
}

a.boton-tu-entrada {
	display: block;
	
	width: 173px;
	height: 29px;
	
	background: transparent url(../images/boton_compra-tu-entrada.png) no-repeat top left;
}

.telefono {
	display: block;
	
	width: 132px;
	height: 34px;
	
	background: transparent url(../images/telefono.png) no-repeat top left;
	
	cursor: help;
}

.image-home {
	display: block;
	
	width: 561px;
	height: 547px;
	
	background: transparent url(../images/background-home.png) no-repeat top center;
}

.acceso-entradas {
	display: block;
	
	width: 240px;
	
	margin-top: 20px;
	padding: 10px 15px;
	
	background: transparent url(../images/background-acceso-entradas.png) no-repeat center center;
}
	.acceso-entradas p {
		margin-bottom: 5px;
	}

/* --------------------------------------------------
Main Structure
-------------------------------------------------- */
#page {
	width: 100%;
	margin: 0;
	
	font-size: 1.1em;
	line-height: 1.4em;
}

#header {
	width: 100%;
	height: 100px;
	
	padding: 20px 0 0;
	
	background: transparent url(../images/background-header.png) no-repeat top center;
}
	#header ul#menu {
		width: 960px;
		
		background-color: #CCC;
	}
		#menu li {
			margin: 0 5px;
		}
			#menu li a {
				display: block;
				
				width: 126px;
				height: 44px;
				
				background: transparent url(../images/menu.png) no-repeat top left;
			}
		
		#menu li#item-home a {
			background-position: -5px 0;
		}
			#menu li#item-home a:hover,
			#menu li#item-home a.here {
				background-position: -5px -44px;
			}
		#menu li#item-champions a {
			background-position: -141px 0;
		}
			#menu li#item-champions a:hover,
			#menu li#item-champions a.here {
				background-position: -141px -44px;
			}
		#menu li#item-educacion a {
			background-position: -277px 0;
		}
			#menu li#item-educacion a:hover,
			#menu li#item-educacion a.here {
				background-position: -277px -44px;
			}
		#menu li#item-partido a {
			background-position: -413px 0;
		}
			#menu li#item-partido a:hover,
			#menu li#item-partido a.here {
				background-position: -413px -44px;
			}
		#menu li#item-entradas a {
			background-position: -549px 0;
		}
			#menu li#item-entradas a:hover,
			#menu li#item-entradas a.here {
				background-position: -549px -44px;
			}
		#menu li#item-prensa a {
			background-position: -685px 0;
		}
			#menu li#item-prensa a:hover,
			#menu li#item-prensa a.here {
				background-position: -685px -44px;
			}
		#menu li#item-colaboradores a {
			background-position: -821px 0;
		}
			#menu li#item-colaboradores a:hover,
			#menu li#item-colaboradores a.here {
				background-position: -821px -44px;
			}

#footer {
	width: 100%;
	height: 180px;
	
	background: transparent url(../images/background-footer.png) no-repeat top center;
}
	#footercontent {
		width: 960px;
		
		margin: 0 auto;
		padding: 60px 0 0;
	}
	#footerlogos {
		width: 280px;
		
		padding: 0 20px;
	}
	#copyright {
		margin: 25px 15px 0 0;
	}

#container {
	width: 960px;
	height: auto;
	
	margin: 25px auto 10px;
}

#sidebar {
	width: 320px;
	min-height: 300px;
}
	#sidebar p {
		margin-top: 20px;
		margin-bottom: 10px;
	}

#content {
	width: 630px;
	min-height: 300px;
}

	#content .col {
		display: block;
		padding: 0 15px 0 20px;
	}
	
	#content .col-1 {
		display: block;
		
		width: 270px;
		min-height: 300px;
		
		padding: 0 15px 0 20px;
	}
	#content .col-2 {
		display: block;
		
		width: 320px;
		min-height: 300px;
	}
	
	#content img {
		margin-bottom: 20px;
	}

#gracias {
	width: 379px;
	height: 100px;
	
	background: transparent url(../images/imagen-gracias-colaboradores.png) no-repeat center center;
}

.colaboradores a {
	margin: 5px;
}
.colaboradores img {
	vertical-align: top;
}

/* Jugadores */

.africa {
	background: url(../images/bg_africa.png) no-repeat center top;
	padding: 65px 0 0 10px;
}

.bbva {
	background: url(../images/bg_bbva.png) no-repeat center top;
	padding: 65px 0 0 10px;
}

/* altura */
.africa, .bbva {
	height: 500px;	
}

.africa ul, .bbva ul {
	margin: 5px 0 10px 0;
}

.galeria {
	margin-top: 25px;
}

/* Home */

.boton-partido-solidario {
	display: block;
	background: url(../images/background_partido.png) no-repeat center center;
	width: 100%;
	height: 132px;
}
	.boton-partido-solidario span {
		display: none;
	}

.box-home {
	text-align: center;
	overflow: hidden;
}

	.box-home .acceso-entradas {
		margin: 15px auto;
	}

		.box-home .acceso-entradas * {
			text-align: left;
		}

/* Entradas */

.tabla-precios {
	clear: both;
	background: url(../images/bg_precios.png) no-repeat center top;
}

	.tabla-precios .precios {
		padding: 15px 0;
		width: 375px;
		margin: 0 auto;
	}
	
		.tabla-precios .precios p {
			text-align: left;
		}
		
		.tabla-precios .precios table {
			width: 100%;
			margin: 20px 0;
		}

		.tabla-precios .precios table tr td {
			padding-bottom: 15px;
		}

		.tabla-precios .precios table tr td.separator {
			width: 25px;
		}

		.tabla-precios .precios table tr td span {
			color: #fff;
			display: block;
			padding-left: 5px;
			height: 18px;
		}

		.tabla-precios .precios table tr td.fondo span {
			color: #000;
		}

/* Colores Tabla Precios */
		.tabla-precios .precios table tr.grada td.lateral span {
			background: #6501a1;
			border-bottom: 18px solid #5ab3df;
		}

		.tabla-precios .precios table tr.grada td.fondo span {
			background: #64bc18;
			border-bottom: 18px solid #c20003;
		}

		.tabla-precios .precios table tr.tribuna td.lateral span {
			background: #7e26b0;
			border-bottom: 18px solid #71bfe5;
		}

		.tabla-precios .precios table tr.tribuna td.fondo span {
			background: #77c83b;
			border-bottom: 18px solid #ca2826;
		}

		.tabla-precios .precios table tr.anfiteatro-1 td.lateral span {
			background: #944ebe;
			border-bottom: 18px solid #89cce9;
		}

		.tabla-precios .precios table tr.anfiteatro-1 td.fondo span {
			background: #90d362;
			border-bottom: 18px solid #d05051;
		}

		.tabla-precios .precios table tr.anfiteatro-2 td.lateral span {
			background: #ab73d0;
			border-bottom: 18px solid #a3d7ed;
		}

		.tabla-precios .precios table tr.anfiteatro-2 td.fondo span {
			background: #a8da81;
			border-bottom: 18px solid #da7374;
		}

		.tabla-precios .precios table tr.anfiteatro-3 td.lateral span {
			background: #c29ad8;
			border-bottom: 18px solid #bee1f4;
		}

		.tabla-precios .precios table tr.anfiteatro-3 td.fondo span {
			background: #c1e6a1;
			border-bottom: 18px solid #e49a99;
		}

		.tabla-precios .precios table tr.anfiteatro-4 td.lateral span {
			background: #cfbdd9;
			border-bottom: 18px solid #d7eaf8;
		}

		.tabla-precios .precios table tr.anfiteatro-4 td.fondo span {
			background: #d5f0c7;
			border-bottom: 18px solid #efbfbf;
		}