﻿
<style type="text/css">
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
  color:black;
  font-family:'Opens Sans',helvetica;  
  height:100%;
  width:100%;
  margin: 1px;
}
.Table{

            display: table;
            width:900px;
            //heigth:750px;
            border: 2px solid black;
        }

        .Title

        {

            display: table-caption;

            text-align: center;

            font-weight: bold;

            font-size: larger;

        }

        .Heading

        {

            display: table-row;

            font-weight: bold;

            text-align: center;

        }

        .Row

        {

            display: table-row;

        }

        .Cell{

            
            display: table-row;

            border: no-border;

            border-width: thin;

            padding-left: 5px;

            padding-right: 5px;
            
            height:400px;
            
        }
        .CellH{
            display: table-row;
            
            border: no-border;

            border-width: thin;

            padding-left: 0px;

            padding-right: 0px;
                        
        }
        .CellF{
            display: block;
            
            border: no-border;

            border-width: thin;

            padding-left: 0px;

            padding-right: 0px;
            height:50px;
            
            background:black;
            
        }
  

body {
  font  : 14px sans-serif;
  //padding : 2em;
  margin  : 0;
  background : #FF6600;
}

form {
  //position: relative;

  width  : 999px;
  //height : 450px;
  margin : 0 ;

  //background: #FFF url(background.jpg);
}
h1 {
  position : absolute;
  left : 415px;
  top  : 185px;

  font : 1em "typewriter", sans-serif;
}

#from {
  //position: absolute;
  //left : 398px;
  //top  : 235px;
}

#reply {
  //position: absolute;
  //left : 390px;
  //top  : 285px;
}

#message {
  //position: absolute;
  //left : 20px;
  //top  : 70px;
}
label {
  font : .8em "typewriter", sans-serif;
}
input, textarea, select {
  font    : .9em/1.5em "handwriting", sans-serif;

  //border  : none;
  padding : 0 10px;
  margin  : 0;
  //width   : 240px;
  border-radius: 5px;
  background: none;
}
select{width   : 240px;}
input:focus, textarea:focus, select:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  //outline      : none;
}
input,select {
    height: 2.0em; /* for IE */
    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
}
input[type=checkbox] {
  width: 20px;
}
input[type=text] {
  width   : 240px;
}
textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 100px;

  resize  : none;
  overflow: auto;
}
button {
  //position     : absolute;
  //left         : 440px;
  //top          : 360px;

  padding      : 5px;

  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : white;
  width: 200px;
  cursor       : pointer;


}

button:after {
  content: "";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}
label.label input[type=file] {
 
        position: absolute;
 
        top: -1000px;
 
      }
 
      .label {
 
        cursor: pointer;
 
        border: 1px solid #cccccc;
 
        border-radius: 5px;
 
        padding: 5px 15px;
 
        margin: 5px;
 
        background: #FFE4B5;
 
        display: inline-block;
 
      }
 
      .label:hover {
 
        background: #5cbd95;
 
      }
 
      .label:active {
 
        background: #9fa1a0;
 
      }
 
      .label:invalid + span {
 
        color: #000000;
 
      }
 
      .label:valid + span {
 
        color: #ffffff;
 
      }
      .tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
table {
   width: 100%;
   display:block;   
   border: 1px solid #000;
   border-collapse: collapse;
   background-color: #dddddd;
}
th, td {
   //width: 25%;
   text-align: left;
   vertical-align: top;
   border: 0px solid #000;
   border-collapse: collapse;
   padding: 0.3em;
   caption-side: bottom;
}
caption {
   padding: 0.3em;
   color: #fff;
    background: #000;
}
th {
   background: #eee;
}
a:link {
  color: red;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: black;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: gray;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: white;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
.icono{
	width: 27px;
	height:27px;
}
/* Tabla que resalta los renglones  */
  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; 
		//border:#4e95f4 1px solid;
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #bb0000;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #aaaaaa;
    }

</style>

