estilo a la nueva seccion de cursos

css/especificos.css

@@ -570,7 +570,7 @@ li:hover { opacity: 0.5; transition: opacity 0.5s ease-in-out; }
 .hidden { display: none;}
 b { font-weight: bold; }
 .center { display:block; margin: 0px auto; text-align:center;}
-.titulin { font-size: 23px; font-weight: bold;}
+.titulin { font-size: 23px; font-weight: bold; margin-bottom: 0px}
 #curso .titulos {max-width:90%; margin:0px auto; color:white;}
 #exit{ width: 90%; height: 30px; margin: 0 auto; cursor: pointer; float: right !important; text-align:right; }
 
@@ -728,3 +728,55 @@ b { font-weight: bold; }
 .max-top-space{
     margin-top: 100px;
 }
+
+.curso-tabla{
+    border: 0px;
+}
+
+.curso-titulo{
+    text-align: left;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+.clear{
+    clear: both;
+}
+.row{
+    padding: 20px;
+}
+.left{
+    float: left;
+    width: 20%;
+    text-align: left;
+}
+.right{
+    float: right;
+    width: 60%;
+    text-align: left;
+}
+
+.right > p{
+    margin: 10px 0 0 0;
+        text-align: justify;
+}
+
+.curso-subtitulo{
+    text-transform: uppercase;
+    color: rgb(70, 90, 104);
+    font-weight: bold;
+    border-bottom: 1px solid #465A68;
+}
+
+.curso-lista{
+    text-align:left; 
+    list-style-type: none;
+    padding: 5px;
+}
+
+.curso-avales{
+    list-style-type: circle;
+}
+
+.curso-lista > li:hover{
+    opacity: 1;
+};

index.php

@@ -174,34 +174,39 @@ header('Content-language: es');
 		</div>
     </div>
 
-
-    <div id="cursos">
+<div id="cursos">
 	<div id="curso">	
     <h1><span>CURSOS</span></h1>
 
 	<p style="margin-top: 60px; margin-bottom: 10px;">
 	<p class='titulin'>Garantía de calidad en formación profesional.</p>
-	<p class='titulin'>Cursos 2016</p>
-	
-	<div id="tabla-cursos" class="tabla">
-		<div rv-each-curso="cursos">
-			<p class="titulin"> {curso.nombre} </p>
-			<ul style="text-align:left; list-style-type: none;padding:0;">
-				<li rv-each-info="curso.informacion" rv-html="info"></li>
-			</ul>
-			<p rv-show="curso.avales.length>0">Avales:</p>
-			<ul style="text-align:left; list-style-type: none;padding:0;">
-				<li rv-each-aval="curso.avales">{ aval }</li>
-			</ul>
-
-			<p rv-html="curso.descripcion"></p>
+	<div id="tabla-cursos" class="tabla curso-tabla">
+		<div rv-each-curso="cursos" class="curso-box">
+			<h6 class="curso-titulo"> {curso.nombre} </h6>
+			<div class="row">
+				<div class="left">
+					<span class="curso-subtitulo">Información de Cursada</span>
+					<ul class="curso-lista">
+						<li rv-each-info="curso.informacion" rv-html="info"></li>
+					</ul>
+					<span rv-show="curso.avales" class="curso-subtitulo">Avales</span>
+					<ul class="curso-lista curso-avales">
+						<li rv-each-aval="curso.avales">{ aval }</li>
+					</ul>
+				</div>
+				<div class="right">
+					<span class="curso-subtitulo">Información del Curso</span>
+					<p rv-html="curso.descripcion"></p>
+				</div>
+				<div class="clear"></div>
+			</div>
 		</div>
 	</div>
 
 <div class="titulos"> <a href="http://curso.especificosba.com.ar">Ir a la plataforma de estudios </a></div>
 
 <br/><br/>
-</div>
+	</div>
 </div>
 </div>