/* ********************************************************************************************************************/
/*-------------------------------------------------------------------------------------------*/
/*  COMPENDIO DE CSS BÁSICO PARA USAR EN TEMAS DE WORDPRESS. */ 
/*  CREADO POR www.expertoswp.com */ 
/*   Basado en woothemes y Elegant themes shortcodes*/ 
/*  última version descargable aquí: www.expertoswp.com */ 
/**/
/**/
/**/
/**/
/* ------------------
 styling for the tables 
   ------------------   */

/*

MODIFICADO BASANDOME EN LAS TABLAS DE LOS SIGUIENTES AUTORES Y USANDO IDS PARA LAS TABLAS PHVO 


This was made by João Sardinha
Visit me at http://johnsardine.com/

The table style doesnt contain images, it contains gradients for browsers who support them as well as round corners and drop shadows.

It has been tested in all major browsers.

This table style is based on Simple Little Table By Orman Clark,
you can download a PSD version of this at his website, PremiumPixels.
http://www.premiumpixels.com/simple-little-table-psd/

PLEASE CONTINUE READING AS THIS CONTAINS IMPORTANT NOTES

*/

/*
Table Style -basic  This is what you want
se inserta usando este código:

<table id="phvo_simple_table" cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
  <thead>
	<tr><th>Task Details</th><th>Progress</th><th>Vital Task</th></tr><!-- Table Header -->
     </thead>
 <tbody>
<tr><td>Create pretty table design</td><td>100%</td><td>Yes</td></tr><!-- Table Row -->
	<tr class='even'><td>Take the dog for a walk</td><td>100%</td><td>Yes</td></tr><!-- Darker Table Row -->

	<tr><td>Waste half the day on Twitter</td><td>20%</td><td>No</td></tr>
	<tr class='even'><td>Feel inferior after viewing Dribble</td><td>80%</td><td>No</td></tr>
	
    <tr><td>Wince at "to do" list</td><td>100%</td><td>Yes</td></tr>
	<tr class='even'><td>Vow to complete personal project</td><td>23%</td><td>yes</td></tr>

	<tr><td>Procrastinate</td><td>80%</td><td>No</td></tr>
    <tr class='even'><td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td><td>80%</td><td><a href="#inexistent-id">Another</a></td></tr>
 </tbody>
  <tfoot>
	<tr><th>Task Details</th><th>Progress</th><th>Vital Task</th></tr><!-- Table Header -->
     </tfoot>
</table>
------------------------------------------------------------------ */

#phvo_simple_table a:link {
	/* color: #666;  descomentar si se quiere cambiar el color de los enlaces*/
	font-weight: bold;
	text-decoration:none;
}
#phvo_simple_table a:visited {
	/* color: #999999;descomentar si se quiere cambiar el color de los enlaces*/
	font-weight:bold;
	text-decoration:none;
}
#phvo_simple_table a:active,
#phvo_simple_table a:hover {
	/*color: #bd5a35;descomentar si se quiere cambiar el color de los enlaces*/
	text-decoration:underline;
}
#phvo_simple_table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	margin:30px auto;  /* esto centra las tablas en la página donde se muestran*/
	width: auto;  /*  esto es opcional pero ayuda a que las tablas no se expandan más de lo necesario. Si queremos usar todo el espacio pondremos 100% */
	border:#ccc 1px solid;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}
#phvo_simple_table th {
	padding:21px 25px 22px 25px;
	/* border-top:1px solid #fafafa;  desactivado por ocultar el borde negro de la tabla en el header*/
	border-bottom:1px solid #e0e0e0;

	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
#phvo_simple_table th:first-child{
	text-align: left;
	padding-left:20px;
}
#phvo_simple_table tr:first-child th:first-child{
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
#phvo_simple_table tr:first-child th:last-child{
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
#phvo_simple_table tr{
	text-align: center;
	padding-left:20px;
}
#phvo_simple_table tr td:first-child{
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
#phvo_simple_table tr td {
	padding:18px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
#phvo_simple_table tr.even td{
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
#phvo_simple_table tr:last-child td{
	border-bottom:0;
}
#phvo_simple_table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
#phvo_simple_table tr:last-child td:last-child{
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
#phvo_simple_table tr:hover td{
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}