/*   

Proyect: PuroBasquet
fcinco estudio || Cecilia Martire y Raul Reimer
design: Rauto & Chinchu
construction: Rauto
csskiller: Rauto
fecha: 30/03/08
mod1: -
mod2: -

*/

/* @group CSS inicial */

/* Elementos que queremos limpiar completamente: */

* {
	margin: 0;
	padding: 0;
	outline: 0;
	border: none;
}

html {
	font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
	/*text-shadow: #000 0px 0px 0px;*//*Elimina el efecto bold en Safari*/
}

ul {
	list-style: none;
	list-style-type: none;
}

/* Ajustes tipográficos */

h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
	font-weight: normal;
	margin: 0 0 1em 0;
}

cite, em, dfn {
	font-style: italic;
}

sup {
	position: relative;
	bottom: 0.3em;
	vertical-align: baseline;
}

sub {
	position: relative;
	bottom: -0.2em;
	vertical-align: baseline;
}

li, dd, blockquote {
	margin-left: 1em;
}

code, kbd, samp, pre, tt, var, input[type='text'], textarea {
	font-size: 100%;
	font-family: monaco, "Lucida Console", courier, mono-space;
	margin: 0 0 1em 0;
}

del {
	text-decoration: line-through;
}

ins, dfn {
	border-bottom: 1px solid #ccc;
}

small, sup, sub {
	font-size: 85%;
}

abbr, acronym {
	text-transform: uppercase;
	font-size: 85%;
	letter-spacing: .1em;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

a abbr, a acronym {
	border: none;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.6em;
}

h4 {
	font-size: 1.4em;
}

h5 {
	font-size: 1.2em;
}

h6 {
	font-size: 1em;
}
div#header h1 {
	background: url(i/logo_puro.png) no-repeat left top;
	text-indent: -1000em;
	width: 186px;
	height: 150px;
	margin: 0;
	float: left;
}
/*-- ARTICULO ------------ */
#articulo h1 {
	font-size: 2em;
	line-height: 2em;
	margin: 0;
	margin-left: 16px;
	color: #5e0814;
	font-weight: bold;
}
#articulo h2 {
	font-size: 1.5em;
	line-height: 2.3em;
	margin: 0;
	margin-left: 16px;
	color: #333;
	font-weight: bold;
	/*float: left;
	clear: both;*/
}
#articulo h2.principal {
	float: left;
	}
#articulo h3 {
	font-size: 1.2em;
	line-height: 1.8em;
	margin: 0;
	margin-left: 16px;
	color: #333;
	font-weight: bold;
}
#articulo h4 {
	font-size: 1.1em;
	line-height: 1.8em;
	margin-left: 16px;
	color: #333;
	font-weight: bold;
}
#articulo p {
	font-size: 1.1em;
	line-height: 1.6em;
	margin: 0 1em 1em 16px;
	color: #333;
}
#articulo ul.club {
	width: 52%;
	float: left;
}
* html #articulo ul.club {
	width: 400px;
	height: 400px;
}
.text {
	width: 36%;
	float: left;
	margin-top: 1em;
}
#articulo ul.club li {
	font-size: 1.1em;
	line-height: 1.6em;
	margin: .3em 1em .3em 16px;
	color: #333;
	height: 32px;
	width: 43%;
	float: left;
}
* html #articulo ul.club li {
	width: 150px;
}
#articulo a.volver {
	line-height: 3.3em;
	color: #333	;
}
#articulo img {
	float: left;
}
#articulo h3.consejos {
	background: url(i/h3_consejos.png) no-repeat scroll left top;
	width: 100%;
	height: 100px;
	line-height: 90px;
	font-size: 1.4em;
}
* html #articulo h3.consejos {
	width: 770px;
	line-height: 40px;
}
#articulo div.consejos {
	width: 47%;
	float: left;
	margin-top: -5em;
	margin-right: 1em;
}
#articulo div.consejos h4 {
	margin: 0 0 0 16px;
	line-height: 1.8em;
	font-size: 1.3em;
	color: #7f0f13;
}
#articulo div.consejos p {
	font-size: 1em;
}
#articulo div.texto {
	margin-right: 4em;
	margin-left: 1em;
}
#articulo .box {
	background: /*url(i/destacado_top.jpg)*/ no-repeat scroll center top;
	width: 45%;
	display: block;
	float: left;
	margin-left: .6em;
}
#articulo div.feature {
	background: #FFF;
	border-color:#515151;
	border-style:solid;
	border-width:0pt 1px;
	width: 356px;
	display: block;
	float: left;
	clear: right;
	position: absolute;
	margin-left: 420px;
	* margin-left: 10px;
}
* html #articulo div.feature {
	margin-left: 20px;
	}
div#articulo div.foxy {
	background: #FFF url(i/h2_foxy.gif) no-repeat scroll left top;
}

div#articulo div.empresa {
	width: 32%;
}
#articulo div.feature div {
	border-color:#515151;
	border-style:solid;
	border-width:1px 0pt 0pt;
	left:0pt;
	position:relative;
	top:-1px;
}
#articulo div.feature div div {
	border-width:0pt 0pt 1px;
	padding:0.3em 0.3em 0.1em;
	top:2px;
}
div#articulo div.feature div div h2 {
	line-height: 1.4em;
	color: #8a0012;
	width: 90%;
}
div#articulo div.feature div div h2 span {
	font-size: .7em;
	color: #666;
}
div#ropa {
	float: right;
	width: 220px;
	margin-right: 1em;
}
div#ropa h2 {
	margin: 0;
	color: #900;
}
ul.ropa {
	color: #333;
	display: block;
	margin-left: 2.6em;
}
ul.ropa li {
	line-height: 1.5em;
	width: 90%;
	list-style-type: square;
}
#articulo div.feature div div img {
	float: none;
	margin: 0em;
}
#articulo div.feature div div  div.hrtit {
	height: .1em;
	clear: both;
	background: transparent none;
	border-style: none;
	border-width: 0;
}
#articulo div.feature div div  div.hrtit hr {
	display: none;
}
div#articulo div.merch {
	float: left;
}
div#articulo div.merch h2 {
	float: left;
	width: 100%;
}
div#articulo div.merch ul.merch {
	background-color: #FFF;
	margin-left: 2em;
	display: table;
}
* html div#articulo div.merch {
	width: 740px;
	height: 408px;
	/*border: 1px solid #900;*/
}

div#articulo div.merch ul.merch li {
	float: left;
	width: 104px;
	height: 110px;
	background-color: #FFF;
	border: 1px solid #515151;
	font-size: .9em;
	text-align: center;
	margin: 1px;
	padding: 1px;
}
div.wall {
	float: right;
	clear: right;
	width: 34%;
	margin-left: 1em;
}
div#articulo div.wall h4 {
	margin: 0;
	color: #890307;
}
div.wall img {
	border: 1px solid #ddd;
	margin: 5px 5px 0 0;
}
div.wall a:link, div.wall a:visited {
	color: #890307;
}
div.wall a:hover {
	text-decoration: underline;
}
div.wall li {
	display: block;
	float: left;
	height: 90px;
	width: 98px;
	text-align: center;
}
.Img {
	padding: 1px;
	background: #ddd;
	margin: 1em 1em 1em 0;
}
.Img2 {
	padding: 5px 5px 15px 5px;
	border: 1px solid #000;
	background: #DDD /*url(art/lupa_ch.gif) no-repeat bottom left*/;
}
.foto {
	/*background: url(../art/bck_foto_gr.jpg) no-repeat scroll center center;*/
	margin: 0;
	float: left;
}
.fotos {
	clear: none;
	margin: 1em 0;
}
.ImgGr {
	padding: 1px;
	background: #ddd;
	/*border: 1px solid #000;*/
	margin: 15px;
	top: 0;
	clear: left;
	float: left;
}
.imgList {
	margin: 2px;
}
#articulo  hr {
  	border: 0;
  	width: 99%;
	color: #FFF;
	background-color: transparent;
	height: 5px;
}
/* LISTADO ---------------*/
ul.lista li {
	float: left;
	width: 47%;
	margin: 1em 0em 0em 16px;
}
#articulo ul.lista li h3 {
	margin: 1em 0 0;
}
ul.lista li p {
	margin: 0;
}
u.lista li a {
	line-height: 1.6em;
}
a.btn  {
	font-size: 1.1em;
	display: block;
	text-align: center;
	color: #FFF;
	background: url(i/btn_listado.png) no-repeat center top;
	width: 120px;
	height: 26px;
	line-height: 2em;
	float: left;
}
a.btn:hover {
	color: #fb7015;
}
div#paginador {
	width: 98%;
	text-align: left;
	margin-left: 1em;
	font: 1.1em/1.6em Trebuchet MS, Arial, Helvetica, sans-serif;
}
div#paginador a:link, div#paginador a:visited {
	color: #333;
	font: 1.1em/1.6em Trebuchet MS, Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
	background: #dfdfdf;
	border: 1px solid #dfdfdf;
	padding: 3px 5px;
}
div#paginador a:hover, div#paginador a:active {
	color: #8b101d;
	font: 1.1em/1.6em Trebuchet MS, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #ececec;
	border: 1px solid #dfdfdf;
	padding: 3px 5px;
}

/* DESTACADO -------------*/
#destacados h2 {
	font-size: 1.5em;
	line-height: 2.3em;
	margin: 0 0 .5em 16px;
	color: #333;
	font-weight: bold;
}
#destacados .box {
	background: url(i/destacado_top.jpg) no-repeat scroll center top;
	width: 24%;
	display: block;
	float: left;
	margin-left: .6em;
}
#destacados .box img {
	margin: 20px auto 0px auto;
}
#destacados .box h5 {
	font-size: 1.1em;
	color: #666;
	text-align: center;
	height: 3em;
	margin: 0 .3em .1em;
}
#destacados .box a {
	font-size: 1.1em;
	display: block;
	text-align: center;
	color: #FFF;
	background: url(i/bkc_btn_destacados.jpg) center top;
	width: 186px;
	height: 28px;
	line-height: 2.6em;
}
#destacados .box a:hover {
	color: #fb7015;
}
/* SIDEBAR -----------------*/
#sidebar h3 {
	background: url(i/h2_show.jpg) no-repeat scroll center top;
	text-indent: -1000em;
	margin: 0;
	width: 100%;
	height: 22px;
}
#sidebar ul{
	margin: 2px;
	padding: 0;
	list-style: none;
}
#sidebar ul li {
	margin: 0;
	padding: 0;
	display: block;
	width: 182px;
	height: 30px;
	background: url(i/btn_sidebar.png) repeat scroll 0 0;
}
#sidebar ul li a:link, #sidebar ul li a:visited {
	font-size: 1.1em;
	line-height: 2.4em;
	height: 30px;
	color: #FFF;
	font-weight: bold;
	display: block;
}
#sidebar ul li a span {
	padding-left: 36px;
}
#sidebar ul li:hover {
	color: #fb6728;
}
* html #sidebar ul li a {
	width: 182px;
	height: 30px;
	display: inline;
	position: relative;
	float: left;
	border: 0px solid #900;
}
/* forms -------------*/
.fieldset {
	margin: 0px 20px 20px 20px;
	padding: 0px;
	border: none;
	text-align: left;
	width: 520px;
	float: none;
	display: block;
}
.fieldset label {
	margin: .4em 0;
	font-size: 1.2em;
}
form {
	margin: 0em;
	padding: 0em;
}
input, select {
	color: #333;
	height: 1.5em;
	padding: 1px;
	margin: 0;
	border: 1px solid #666;
	background: #FFF;
}
textarea {
	font: 1.2em "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #333;
	border: 1px solid #666;
	background: #FFF;
}
input.sclass, img.sclass {
	height: auto;
	background: none;
	border: 0px solid #333;
}
button.btn  {
	font-size: 1.1em;
	display: block;
	text-align: center;
	color: #FFF;
	background: url(i/btn_listado.png) no-repeat center top;
	width: 120px;
	height: 26px;
	line-height: 1.8em;
	float: left;
}
button.btn:hover {
	color: #fb7015;
}
/* banners -----------*/
#bnr {
	margin: 1em .5em .5em;
	float: left;
	display: block;
	overflow: auto;
}
.clubes {
	display: block;
	float: left;
	width: 285px;
	height: 104px;
	text-indent: -1000em;
	background: url(i/btn_clubes.jpg) no-repeat scroll left top;
}
.bnrred {
	width: 280px;
	height: 110px;
	text-indent: -1000em;
	margin-left: 1em;
	background: url(../art/bnr_eventos.gif) no-repeat scroll left top;
	float: left;
	clear: left;
	position: relative;
}
.merchandising {
	display: block;
	float: left;
	width: 285px;
	height: 104px;
	text-indent: -1000em;
	background: url(i/btn_merchandising.jpg) no-repeat scroll left top;
}
.clubes a {
	display: block;
	float: left;
	width: 285px;
	height: 104px;
}
.merchandising a {
	display: block;
	float: left;
	width: 285px;
	height: 104px;
}
/* NAVIGATION -------------------------- */
ul#nav {
	height: 26px; 
	width: 789px;
	text-align:left; 
	list-style-type: none;
	color: #FFF;
	margin:0; 
	padding:0;
	border: 1px solid #666;
	float: left;
	background: transparent url(i/bck_nav.jpg) repeat-x scroll left top;
}
* html ul#nav {
	margin-top: -2px;
	background-color: #000;
}
ul#nav li {
	float:left;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	color: #FFF;
	text-align: center;
	background: transparent url(i/nav_sep.png) no-repeat scroll right center;
}
ul#nav li.inicio {
	float:right;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	color: #FFF;
	text-align: center;
	background: transparent url(i/nav_sep.png) no-repeat scroll left center;
}
* html ul#nav li, * html ul#nav li.inicio {
	background:  url(i/bck_nav.jpg) repeat-x scroll left top;
}
#nav li a {
	display:block;
	height:26px;
	line-height:26px;
	padding: 0 2em;
	margin: 0;
	color: #e6170e;
	outline-color:invert;
	outline-style:none;
	outline-width:medium;
}
#nav li a:hover {
	color: #FFF;
}
* html #nav li a {
	display:inline;
}
/* FOOTER --------------*/
#foot h3 {
	font-size: 1.6em;
	color: #de0012;
	font-weight: bold;
	margin: 0 0 .3em .5em;
}
#foot .locales {
	width: 100%;
	float: left;
	background: url(i/jugador_pb.jpg) no-repeat right bottom;
}
#foot .locales li {
	margin: .7em 1.2em;
}
#foot #mascota {
	background: url(i/jugador_pb.jpg) no-repeat scroll right bottom;
	width: 48%;
	height: 178px;
	float: right;
	margin-top: -3em;
	text-indent: -1000em;
}
* html #foot #mascota {
	width: 390px;
	height: 176px;
	z-index: 10;
}
#foot .footer {
	width: 100%;
	height: 10em;
	background: url(i/bck_footer.jpg) repeat-x scroll left top;
	float: left;
}
#foot .footer p {
	font-weight: bold;
	font-size: 1.1em;
	margin: 1em;
	color: #666;
}
#foot .footer p a {
	font-weight: bold;
	margin: 0em;
	color: #333;
	position: relative;
}
/*** LINKS: Recuerda utilizar siempre la regla del LoVe-HAte ***/

a, a:link, a:visited, a:hover, a:active {
	/*
	Si quisieramos eliminar la línea de puntos que aparece al pulsar un enlace, aplicaríamos la siguiente propiedad:
	
	outline: 0;
	
	Sin embargo no se recomienda, por temas de accesibilidad para navegación con teclado (lo cual implica temas legales, un tema peliagudo).
	*/
	text-decoration: none;
}

a img {
	border: none;
	text-decoration: none;
}

img {
	border: none;
	text-decoration: none;
	/*Si añades un background aparecerá como fondo de la imagen, útil para imágenes de carga*/
}

/* Formularios */

label, button {
	cursor:pointer;
}

input:focus, select:focus, textarea:focus {
	background-color: #FFF;
}

fieldset {
	border: none;
}

/* purodeporte */
#purodeporte h2 {
	text-indent: -1000em;
	height: 54px;
}
#purodeporte h3 {
	text-indent: 0;
	font-size: 1.3em;
	color: #333;
	margin: 0 auto;
	text-align: center;
	background-image: none;
	font-weight: bold;
}
#purodeporte p {
	font-size: 1.1em;
	color: #333;
	line-height: 1.6em;
	margin: 1em .5em 0 .5em;
	background-image: none;
}

/* Clases útiles */

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

 div.hr {
  height: 15px;
  background: #fff url(i/sep_articulo_bottom.png) repeat-x scroll left top;
  margin: 2em 0 0 1em;
}
div.hr hr {
  display: none;
}
div.hrtit {
	height: 1em;
	clear: both;
	background: transparent none;
	border-style: none;
}
div.hrtit hr {
	display: none;
}
.alignright, .right { float:right; margin:0 1em 1em 1.5em; border:0; }
.alignleft, .left { float:left; margin:0 1.5em 1em 1em; border:0; }
/* videos */
#videos {
	width: 100%;
	margin: 0 0 20px 10px;
	float: left;
}
#articulo #videos ul {
	width: 180px;
	font-weight: bold;
	list-style-image: none;
	margin: 0 20px 0 20px 20px;
	border-top: 1px solid #DDD;
	float: left;
}
#articulo #videos ul li {
	width: 180px;
	margin: 0;
	border-bottom: 1px solid #DDD;
}
#articulo #videos h3 {
	margin: 0;
}
#articulo #videos ul li a {
	font-size: 1.4em;
	color: #de0012;
	display: block;
	font-weight: bold;
	list-style-image: none;
	padding: 5px 0;
	letter-spacing: -1px;
}
#articulo #videos ul li a:hover {
	color: #FFF;
	background-color: #de0012;
}

/* @end */

/* @group HTML > BODY > WRAPPER */

/*Para empezar un layout centrado:*/

body {
	text-align: center;/*Hack para que IE6 no de problemas*/
}

.wrapper {
	margin: 0;
	text-align: left;
	width: 977px;
}
.flash {
	float: left;
	width: 791px;
	height: 150px;
}
#purodeporte {
	width: 166px;
	height: 200px;
	margin: 1em auto;
	background: url(i/bck_purodeporte.png) no-repeat scroll left top;
}
#destacados {
	width: 790px;
	float: left;
	background: url(i/bck_destacado.jpg) no-repeat scroll left top;
}
#articulo {
	width: 790px;
	float: left;
	background: #FFF url(i/bck_destacado.jpg) no-repeat scroll left top;
}
#sidebar {
	background: url(i/bck_sidebar.jpg) no-repeat scroll left top;
	float: left;
	width: 186px;
	height: 503px;
}
#foot {
	width: 100%;
	float: left;
	clear: both;
	margin-top: 2em;
}

/* @end */