/* clear */
.clear{
	float:none !important;
	clear:both !important;
}

/* Tipos de letra */
.u-blue{background-color:#008CFF;padding:2px;}
.white{color:#FFFFFF;}
.black{color:#000000;}
.times{font-family:Georgia,"Times New Roman",Times,serif;}
.normal {font-weight:normal;}
.strong {font-weight:bold;}
.biggest{font-size:26px;}
.big{font-size:20px;}
.medium{font-size:16px;}
.small{font-size:11px;}
.gray{color:#969696;}
.red{color:#992717;}
.blue{color:#336699;}
.horaNota { color:red; padding-right: 5px; float:left; }
.upper{text-transform:uppercase;}
.tdnone{text-decoration:none;}
.italic {font-style:italic}

/* Margenes y Paddings */
.m0 {margin:0;} .mt0 {margin-top:0;} .mr0 {margin-right:0;} .mb0 {margin-bottom:0;} .ml0 {margin-left:0;}
.m5 {margin:5px;} .mt5 {margin-top:5px;} .mr5 {margin-right:5px;} .mb5 {margin-bottom:5px;} .ml5 {margin-left:5px;}
.m10 {margin:10px;} .mt10 {margin-top:10px;} .mr10 {margin-right:10px;} .mb10 {margin-bottom:10px;} .ml10 {margin-left:10px;}

.p0 {padding:0;} .pt0 {padding-top:0;} .pr0 {padding-right:0;} .pb0 {padding-bottom:0;} .pl0 {padding-left:0;}
.p5 {padding:5px;} .pt5 {padding-top:5px;} .pr5 {padding-right:5px;} .pb5 {padding-bottom:5px;} .pl5 {padding-left:5px;}
.p10 {padding:10px;} .pt10 {padding-top:10px;} .pr10 {padding-right:10px;} .pb10 {padding-bottom:10px;} .pl10 {padding-left:10px;}
.p15 {padding:15px;} .pt15 {padding-top:15px;} .pr15 {padding-right:15px;} .pb15 {padding-bottom:15px;} .pl15 {padding-left:15px;}
.p20 {padding:20px;} .pt20 {padding-top:20px;} .pr20 {padding-right:20px;} .pb20 {padding-bottom:20px;} .pl20 {padding-left:20px;}
.p25 {padding:25px;} .pt25 {padding-top:25px;} .pr25 {padding-right:25px;} .pb25 {padding-bottom:25px;} .pl25 {padding-left:25px;}
.p30 {padding:30px;} .pt30 {padding-top:30px;} .pr30 {padding-right:30px;} .pb30 {padding-bottom:30px;} .pl30 {padding-left:30px;}


/* floats con margenes. Recomendado para imagenes */
.fleft{float:left; margin-right:5px;}
.fright{float:right; margin-left:5px;}
.fcenter{display:block; margin-right:auto; margin-left:auto;}

/* listas */
.lsnone{list-style:none;}

/* bordes */
.b0g{border:none;} .bt0g{border:none;} .br0g{border:none;} .bb0g{border:none;} .bbl0g{border:none;} 
.b1g{border:1px solid #D8D8D8;} .bt1g{border-top:1px solid #D8D8D8;} .br1g{border-top:1px solid #D8D8D8;} .bb1g{border-top:1px solid #D8D8D8;} .bl1g{border-top:1px solid #D8D8D8;} 
.b1gb{border:1px solid #323232;} .bt1gb{border-top:1px solid #323232;} .br1gb{border-top:1px solid #323232;} .bb1gb{border-top:1px solid #323232;} .bl1gb{border-top:1px solid #323232;} 

/* Fondos */
.bgblack{background-color:#000000;}

/* posiciones  y displays */
.abs{position:absolute;}
.rel{position:relative;}
.dnone{display:none;}
.block{display:block;}
.iblock{display:inline-block;}

.m0lm {
margin:0;
}

.upper {
text-transform:uppercase;
}

.red {
color:#67A287;
}

.big {
font-size:20px;
}

.strong {
font-weight:bold;
}
.p0lm {
padding:0;
}
element.style {
cursor:pointer;
}
.fleft {
float:left;
margin-right:5px;
}

.LosMas .tabsbar .transitiontabs .tab {
margin:10px 11px;
}

.TheMoreByRegionAndAge .tabsbar .transitiontabs .tab {
margin:10px 11px;
}

.white {
color:#FFFFFF;
}

.noteMxM {width:309px; border-bottom:1px solid #9F9F9F; margin:0 10px; padding:10px 0;}

#content .noteMxM {width:575px;}

#content .MxMBox {overflow-x: hidden; overflow-y: scroll; height: 600px;} /* Con hidden en y aparecía y desaparecía */

#sidebar .promo .MxMBox .notesMxM {overflow-x: hidden; overflow-y: scroll; height: 240px;} /* Con hidden en y aparecía y desaparecía */

.notasMxM {float:left;}

.noteMxM .hora {color:#67A287;}

.noteMxM a {color:#666666;}

.MxMBox a {text-decoration: none}

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 15px;
	width: 5%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 15px;
	width: 5%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

.makeMeScrollable
{
 width:100%;
 height: 31px;
 position: relative;
}
		
.makeMeScrollable div.scrollableArea *
 {
 position: relative;
 display: block;
 float: left;
 margin: 0;
 padding: 0;
}

.theMostTypeSelected {
 background-color: #67A287;
 color: #FFFFFF !important;
 font-weight: bold;
}

.periodSelected {
 background-color: #585858;
 color: #FFFFFF !important;
}

.TheMoreByRegionAndAge .periodBox .period {
 cursor: pointer;
}

.TheMoreByRegionAndAge .tabsbar .TMtypeBox .theMostType {
 font-family: arial,sans-serif;
 font-size: 10px;
 color: #67A287;
 cursor: pointer;
 padding: 2px;
}

.charging {
 text-align:center;
}

.TMtypeBox{
 float:right;
 margin-right:10px;
 margin-top:-18px; 
}

.periodBox{
 float: none;
 color: #585858;
 font-size: 14px !important;
 text-align: center;
 font-weight:bold;
 margin-top: 5px;
}

.periodBox span{
 margin-top: -1.5px;
 margin: 25px;
}

.art-container .cover { float: left; position:relative; width: 395px; }
.art-container .cover li a { text-decoration:none; }
.art-container .cover div .p5 { margin: -5px; list-style-type: none; list-style-position: inside; text-rendering: optimizelegibility; }
.hourRN {color: red;}
.new-text #timeNote { float:left; }