/* CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial */

/* the appropriate background class will be applied based on class attached to the body */

body {
	margin: 0;
	padding: 0;
	font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif;
	color: #999;
}
#threeColLayout, #twoColLayout, #oneColLayout {
	background-color: #1F1F1F;
}

/* default links */

a:link {
	text-decoration: none;
	color: #CB9240;
}
#noticias .cbb .news{
	border-color: #FFF;
}

a:visited{
	text-decoration: none;
	color:#CB9240;
}
a:hover {
	text-decoration: underline;
	color: #CB9240;
	cursor: hand;
}
a:active {
	color:#FFF;
}
.imagenSimple {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}


/* headers here */

h1 {
margin: 0;
padding: 30px;
font-size: 150%;
color: #FF0000;
text-indent: -9000px;
}

h2 {
	margin: 0 10px;
	padding: 2px 2px 2px 10px;
	font-size: 110%;
	color: #ccc;
	border: 1px solid #333;
	background-color: #1F1F1F;
	line-height: 180%;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
	display: block;
	font-size: 90%;
	margin: 5px 10px 0 10px;
	padding: 0 2px 2px 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #211511;
	border-right-color: #333;
	border-bottom-color: #666;
	border-left-color: #333;
	text-transform: uppercase;
	font-weight: normal;
	color: #CCC;
}
.importante {
	text-align:center;
	border:1px solid #990;
}
.competicion h3, .caja_side h3 {
	background-color: #211511;

}
.calendario h3 {
	background: #454545;
}

.profesores h3 {
	background: #454545;
}

/* main wrapper that holds it all centrally */

#wrapper {
	width:750px;
	margin:0 auto;
	padding: 10px;
	background-attachment: fixed;
	background-color: #000;
	/*	background-image: url(background.gif);*/
	background-repeat: repeat-x;
	position: relative;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #666;
	border-left-color: #666;
	z-index:1;
}

/* default masthead holding the banner and mainNav */

#header {
	width: 750px;
	height: 170px;
	background:url(images/logos/logotop.gif);
	position: relative;
}

/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:750px;
display:inline;
margin: 0 0 20px 0;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
	float:left;
	width:270px;
	margin: 0 0 10px 0;
}

#twoColLayout #sideContent {
	margin: 0 0 10px 0;
	float: left;
	width: 180px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
	width:555px;
	float:left;
	margin: 0 0 20px 15px;
}
#noticias {
	width:555px;
	float:left;
	margin: 0 15px 20px 0px;
}

/* just in case twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent {
display: none;
}

#secondaryContent{
	float:left;
	width:270px;
	margin: 0 0 20px 15px;
}

#sideContent{
	float:left;
	width:180px;
	margin: 0 0 20px 15px;
}

/* just in case oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}
.arriba {
	float: right;
	margin-right: 10px;
	padding-left: 20px;
	background: url(/images/Iconos/top.gif) no-repeat left center;
}

.imgMasJudo {
	clear: both;
	float: none;
}


/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

/*.cbSide {
	width:160px;
	margin: 5px 0 0 10px;
	padding: 10px 0 5px 0;
	background-color: #4D4D4D;
	border: 1px solid #444;
z-index=0;}
*/
.caja_side p{
	padding:0 10px;
	font-size: 90%;
	margin: 5px 0 5px 0;
}

.caja_side ul{
	list-style:none;
	margin:0 6px;
	padding:5px;
}


.caja_side li{
	display:block;
	line-height:160%;
	margin:0;
	padding-right:10px;
	background:url(images/Iconos/external.gif) no-repeat top right;
	border-bottom:1px solid #666;
}
.caja_side img{
	float:none;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
	margin: 15px 0 0 0;
	padding: 5px 0 5px 0;
	background:transparent url(images/CSS/diags2.gif);
}
.boxultimasnoticias {
	margin: 15px 0 0 0;
	padding: 5px 0 5px 0;
	background:transparent url(images/CSS/diags.gif);
	border: 1px solid #666;
	font-size: 12px;
}
.colspanContent {
	float: left;
}
.colspanContent .box.profesores {
	width: 555px;
	margin: 15px 0;
}
.colspanContent .box.competicion {
	margin: 15px 0 10px 0;
}
.colspanContent #secondaryContent, .colspanContent #primaryContent{
	margin-bottom: 0;
}
.info p{
	display:block;
	margin:5px 10px 5px 35px;
}
.info img{
	margin:3px 0 0 10px;
}

/* Styling of the boxes if there is no JavaScript support */

.cbb {
	margin: 0 10px 0 10px;
	padding: 5px 0 5px 0;
	line-height: 170%;
	background-image: url(images/logos/fondocbb.gif);
	border: 1px solid #444;
	position: relative;
	z-index:1000;
}

/* paragraph styles for any main boxes */
.cbb p, .cb p {
	margin: 0;
	padding: 0 5px 5px 20px;
	color: #B6B6B6;
}

.inicio .cbb ul{
	padding-left:10px;
	color: #CCC;
	list-style-type: none;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding-right: 5px;
}
.inicio .cbb li {
	background-image: url(images/Iconos/pdf2external.gif);
	background-repeat: no-repeat;
	background-position: right center;
	display: block;
	border-bottom: 1px solid #454545;
	line-height: 140%;
	padding: 10px 29px 0 0;
}


#twoColLayout .cbb{
	margin:5px 10px;
}
.lugar{
	padding:5px 5px 5px 50px;
	margin:-5px 5px 5px 0;
	display:block;
	background-color: #454545;
	line-height:100%;
	font-size:90%;
}

.fechacalendario {
	display: block;
	margin: -5px 10px 5px 43px;
	padding: 0 35px 5px 0;
	color: #666;
	border-bottom: 1px solid #666;
	background:url(images/Iconos/pdf2.gif) no-repeat right;
	text-align: right;
}
.calendario p{
	padding-left:5px;
}

/* date and posted control the small text info in article blurbs */

.date {
	font-size: 100%;
	font-weight: bold;
	color: #999;
}

.competicion .date {
	font-size:100%;
	color:#666;
	margin-right: 15px;
	padding: 0 2px;
	border: 0px solid #999;
}

#twoColLayout .cbb h3, #oneColLayout .cbb h3{
	margin:20px 5px 5px 0;
	padding:0 0 0 5px;
}
.lugar{
}

.postedUnderline {
	display: block;
	margin: -5px 5px 15px 10px;
	padding: 0 10px;
	color: #666;
	border-bottom: 1px dotted #666;
}

address {
margin-left: 50px;
}

/* erm, the footer */

#footer{
	clear:both;
width: 750px;
height: 40px;
background: transparent url(images/CSS/footer.gif);
padding: 0px;
}
#footer p {
margin: 10px 10px 0 0;
padding: 10px 4px 4px 0;
color: #999;
text-align:center;
line-height:20px;
font-size:90%;
}

/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */

img {
	float: left;
	margin: 10px 10px 2px 10px;
	border: 1px solid #C5BDBD;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img {
border: 0;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
	display: block;
	float: none;
	border: 2px solid #C5BDBD;
	margin: 4px 0 0 17px;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
	margin: 10px 20px 10px 55px;
	line-height:0;
	padding: 0;
	background-color: #999;
	float: left;
}
.imgPopUp {
	background-color: #333;
	position: absolute;
	z-index: 100000;
	left: -190px;
	visibility: hidden;
	border: 10px solid #222;
	min-width: 200px;
}
.imgPopUp p {
display:block;
padding:0 15px 5px 15px;
}
#oneColLayout .imgPopUp, .inicio .imgPopUp  {
	background-color: #333;
	position: absolute;
	z-index: 1000;
	left: 50px;
	visibility: hidden;
}
#ultimasnoticias {
	border: 1px solid #900;
	display: none;
}

 
.img-wrapper img {
	float:none;
	padding:4px;
	border:1px solid #515151;
}

.img-wrapper p {
	display:block;
	line-height:100%;
	font-size:90%;
	padding:2px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 0 20px 50px;
}
/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}

/* horizontal main menu navigation - based on a method from Richard Rutter */

 #mainNav
{
	padding: 0;
	width: 750px;
	height: 35px;
	font-weight: normal;
	font-size: 90%;
	position: absolute;
	top: 135px;
}

#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#mainNav li
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}

.inicio #mainNav li #galeria{
	text-transform:uppercase;
}

#mainNav a
{
	color: #CCC;
	display: inline;
	width: auto;
	text-decoration: none;
	margin: 0;
	padding: 10px 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666;
}

#mainNav a:hover, #mainNav a:active {
	color: #FFF;
	background-color: #515151;
	border-top: 1px solid #CCC;
}

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color: #D7D493;
font-weight: bold;
}

/* Highlighting the current page */

body.inicio #mainNav a#inicio, body.judo #mainNav a#judo, body.campeonatos #mainNav a#campeonatos, body.masjudo #mainNav a#masjudo, body.actividades #mainNav a#actividades, body.galeria #mainNav a#galeria, body.horarios #mainNav a#horarios, body.contacto #mainNav a#contacto {
	color: #FFF;
	text-decoration: overline;
}
body.inicio #mainNav a:hover#inicio, body.judo #mainNav a:hover#judo, body.campeonatos #mainNav a:hover#campeonatos, body.masjudo #mainNav a:hover#masjudo, body.actividades #mainNav a:hover#actividades, body.galeria #mainNav a:hover#galeria, body.horarios #mainNav a:hover#horarios, body.contacto #mainNav a:hover#contacto {
	color: #000;
}

.fechaactualizacion {
	color:#FFF;
	text-align:center;
	padding:0;
	font-size:90%;
	position:absolute;
	right:10px;
	width:130px;
	line-height:16px;
	z-index:1;
	background-color: #666;
}
.visitas {
	text-align:right;
	padding:0;
	font-size:90%;
	position:absolute;
	top:20px;
	width:90px;
	line-height:10px;
	z-index:1;
	right: 10px;
}
#tablahorario {
	padding: 5px;
	background-color: #333;
	margin: 5px;
}
#tablahorario table {
	text-align:center;
}
.galeria .entradagaleria {
	height: 75px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 5px;
	margin-left: 20px;
	border: 1px solid #1F1F1F;
	clear: both;
	background-color: #333;
}
.galeria .entradagaleria p{
	padding-top: 25px;
	font-size: 110%;
}
.nota {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: x-small;
}
.imgNoMargin {
	margin: 10px 0;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}