Tablón TBP

----------------------- JAVASCRIPT 1 ----------------

var indice = 0;
frases = new Array();
frases[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
frases[1] = "Texto2";
frases[2] = "Texto3";
frases[3] = "Texto4";

indice = Math.random()*(frases.length);
indice = Math.floor(indice);

function rotar() {
if (indice == frases.length) {indice = 0;}
document.getElementById("rotando").innerHTML = frases[indice];
indice++;
setTimeout("rotar();",5000);
}

----------------------- JAVASCRIPT 2 ----------------

$(document).ready(function () {
    $(".Sb").click(function () {
        var mid = $(this).attr("id").replace(/\D/g, '');
        $(".Sb").removeClass("selected");
        $(".Sc:not(#c" + mid + ")").hide();
        $("#Sc" + mid).fadeIn();
        $("#Sb" + mid).addClass("selected");
    });
});

----------------------- CSS ----------------

#comments_scroll_div {
height: 140px;
background: #040913;
padding: 5px;
margin-top: 3px;
width: 180px;
overflow: hidden;
}

#Sc2 h2 {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 13px;
  color: #ababab;
}

.fotoganador {
  width: 70px;
  height: 40px;
  float: left;
  margin: 5px;
}

.sabiasq {
  font-size: 20px;
  font-family: Great Vibes;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
}

.separador {
  height: 4px;
  border-bottom: 1px dotted #797170;
  margin-bottom: 4px;
}

.fecha {
  float: left;
  font-size: 15px;
  font-family: Great Vibes;
  line-height: 100%;
  padding: 10px;
}

#botones {
   text-align:center; /*CSS base*/
}
#botones div {
    display: inline-block;/*CSS base*/
}
.Sb.selected {
    background-color: #230c17; /*CSS base*/
}

.Sb {
  width: 40px;
  font-size: 8px;
  background: #040913;
  text-transform: uppercase;
  margin-top: 3px;
  padding: 3px;/*CSS base*/
}

#SCont {
  width: 185px;
  padding: 5px;
  background: #040913;
  height: 122px;
  overflow-y:auto;
  text-align: justify;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  overflow-x:hidden;
}

#main-content .panel .inner ul {
  padding-left: 0px;
}

.ch-grid {
	margin-top: 5px;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 210px;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 80px;
	height: 80px;
	display: inline-block;
	margin: 1px;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow:
		inset 0 0 0 5px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

.ch-img-1 {
	background-image: url(http://i.imgur.com/UoZZXeo.png);
}

.ch-img-2 {
	background-image: url(http://i.imgur.com/UoZZXeo.png);
}

.ch-img-3 {
	background-image: url(http://i.imgur.com/UoZZXeo.png);
}

.ch-img-4 {
	background-image: url(http://i.imgur.com/UoZZXeo.png);
}

.ch-info {
	position: absolute;
	background: #040913;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

.ch-info h3 {
	color: #ABABAB;
	font-weight: bold;
	letter-spacing: 2px;
	font-size: 10px;
	margin: 0 5px;
	padding: 20px 0 0 0;
	height: 20px;
	font-family: Calibri;
        line-height: 100%;
}

.ch-info p {
  color: #ABABAB;
  padding-top: 5px;
  margin: 0 10px;
  line-height: 100%;
  font-size: 9px;
  opacity: 0;
  transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
        border-top: 1px solid rgba(255,255,255,0.5);
	font-weight: 700;
        font-style: italic;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #9E8A59;
}

.ch-item:hover {
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

.ch-item:hover .ch-info p {
	opacity: 1;
}
#cuerpotab {
  border: 20px solid #230c17;
  position: relative;
  padding: 10px;
  background: #797170;
  width: 660px;
  height: 260px;
  line-height: 100%;
  color: #ABABAB;
}

.textoamb {
  margin-top: 5px;
  text-align: justify;
  border: 5px solid #040913;
  line-height: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: calibri;
  max-height: 100px;
  overflow-y:auto;
  background: #040913;
}

.textoamb:first-letter {
  font-family: Great Vibes;
  font-size: 30px;
  line-height: 100%;
  margin-top: 40px;
  padding: 3px;
}

.temperatura {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

.linksamb a {
  display:inline-block;
  width: 101px;
  margin-right: 1px;
  margin-bottom: 1px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 8px;
  line-height: 100%;
  background: #040913;
  color: #9E8A59;
  padding-top: 3px;
  padding-bottom: 3px;
  letter-spacing: 1px;
}

.titulotab {
  background: #040913;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
}

.caja1tab {
  border: 20px solid #230c17;
  padding: 8px;
  background: #797170;
  width: 207px;
  height: 300px;
  margin-top: -50px;
  line-height: 100%;
}

/*Fin tablón*/

----------------------- HTML ---------------

<link href="http://goo.gl/Snwx3c" rel="stylesheet" type="text/css" />
<center>
	                                                                                  <br />
	<div id="cuerpotab">

		<div style="position: absolute; top: 0px; left: 0px;">

			<ul class="ch-grid">

				<li style="margin-right: 15px;">

					<div class="ch-item ch-img-1">

						<div class="ch-info">

							<h3>
								                                     Nombre<br />Apellido
							</h3>

							<p>
								                               <a href="url">Enviar MP</a>
							</p>

						</div>

					</div>

				</li>

				<li>

					<div class="ch-item ch-img-2">

						<div class="ch-info">

							<h3>
								                                     Nombre<br />Apellido
							</h3>

							<p>
								                               <a href="url">Enviar MP</a>
							</p>

						</div>

					</div>

				</li>

			</ul>

			<div style="margin-bottom: 7px;" class="titulotab">
				                                                    Últimos temas
			</div>

			<div id="contenedor-UltimosTemas">

                                                                </div>

		</div>

		<div class="caja1tab">

			<div style="width: 207px; height: 100px; background:url('http://i.imgur.com/tSO7iH0.png'); position: relative">

				<div class="temperatura">
					                                              <span style="font-size: 15px; font-family: arial;">30º</span><br />Verano
				</div>

			</div>

			<div style="padding-top: 10px;" class="textoamb">
				                                                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
			</div>

			<div class="titulotab">
				                                                    Navegación
			</div>

			<div class="linksamb">
				                                                     <a href="url">Link 1</a><a href="url">Link 2</a><a href="url">Link 3</a><a href="url">Link 4</a><a href="url">Link 5</a><a href="url">Link 6</a>
			</div>

		</div>

		<div style="position: absolute; top: 0px; right: 0px;">

			<ul class="ch-grid">

				<li style="margin-right: 15px;">

					<div class="ch-item ch-img-3">

						<div class="ch-info">

							<h3>
								                                     Nombre<br />Apellido
							</h3>

							<p>
								                               <a href="url">Enviar MP</a>
							</p>

						</div>

					</div>

				</li>

				<li>

					<div class="ch-item ch-img-4">

						<div class="ch-info">

							<h3>
								                                     Nombre<br />Apellido
							</h3>

							<p>
								                               <a href="url">Enviar MP</a>
							</p>

						</div>

					</div>

				</li>

			</ul>

			<div class="titulotab">
				                                                    Información Extra
			</div>

			<div id="SSlider">

				<div id="SCont">

					<div id="Sc1" class="Sc" style="display:block;">

						<div class="fecha">
							                00/00
						</div>
						                Ut labore et dolore magnam aliquam quaerat.
						<div class="separador">

						</div>

						<div class="fecha">
							                00/00
						</div>
						                Ut labore et dolore magnam aliquam quaerat.
						<div class="separador">

						</div>

						<div class="fecha">
							                00/00
						</div>
						                Ut labore et dolore magnam aliquam quaerat.
					</div>

					<div id="Sc2" class="Sc" style="display:none;">
						                                         <img class="fotoganador" src="http://i.imgur.com/wHu0vci.png" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2><br /><img src="http://i.imgur.com/wHu0vci.png" class="fotoganador" />
						<h2>
							     Nombre apellido<br />Premio ganado
						</h2>

					</div>

					<div id="Sc3" class="Sc" style="display:none;">
						                                         ♫ Ut labore et dolore magnam aliquam quaerat.<br /><br />♫ Ut labore et dolore magnam aliquam quaerat.<br /><br />♫ Ut labore et dolore magnam aliquam quaerat.<br /><br />
					</div>

					<div id="Sc4" class="Sc" style="display:none;">

						<div class="sabiasq">
							            ¿Sabías que...
						</div>

						<div id="rotando" style="margin:0px auto;">

						</div><script type="text/javascript">rotar();</script>
					</div>

				</div>

				<div id="botones">

					<div id="Sb1" class="Sb selected">
						                     Noticias
					</div>

					<div id="Sb2" class="Sb">
						                     Premios
					</div>

					<div id="Sb3" class="Sb">
						                     Normas
					</div>

					<div id="Sb4" class="Sb">
						                     Sabías que
					</div>

				</div>

			</div>

		</div>

	</div><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; letter-spacing: 5px; position: relative; top: 20px;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #9E8A59;">© HARDROCK</a></span><script>
    jQuery(function() {
       var a = jQuery("#comments_scroll_div").clone();
    var c = [];
    jQuery('.module .h3:contains("Últimos temas")').closest('.inner').find('script').each(function() {
        if (!jQuery(this).attr('src')) c.push('<script>'+ jQuery(this).html() + '</' + 'script>');
    });
    jQuery("#contenedor-UltimosTemas").replaceWith('<div id="comments_scroll_div">' + a.html() + '</div>' + c.join(" "));
    jQuery(".module .inner #comments_scroll_div ").remove()
    });
</script>
</center>