<style>

:root {
    --bg: #1a1e24;
    --color: #009abf;
    --colorclaro: #ffffff;
    --colorclarogris: #d4d4d4;
    --colorgris: #373838;
    --colorsec: #7f7f7f; /*ed713c   ea7f15*/
    --colorter: #b3b3b3;
    --font: 'Hurme Geometric Sans 4', Roboto, Helvetica, Arial, sans-serif;
}


.datagrid table { border-collapse: collapse; 
    text-align: left; width: 100%; } 
    .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; 
        background: #fff; overflow: hidden; border: 1px solid #006699; 
        -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
        
    .datagrid table td, .datagrid table th { padding: 3px 10px; }
    .datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7f7f7f), color-stop(1,#373838) );
        background:-moz-linear-gradient( center top, #7f7f7f 5%,#373838 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7830a', endColorstr='#EB5C15');
        background-color:#7f7f7f; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #7f7f7f; } 
    .datagrid table thead th:first-child { border: none; }
    .datagrid table tbody td { color: #00496B; border-left: 1px solid --colorclarogris;font-size: 12px;font-weight: normal; }
    .datagrid table tbody .alt td { background: #F4DB97; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }
    .datagrid table tbody tr:last-child td { border-bottom: none; }.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} 
    .datagrid table tfoot td { padding: 0; font-size: 12px } 
    .datagrid table tfoot td div{ padding: 2px; }
    .datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
    .datagrid table tfoot  li { display: inline; }
    .datagrid table tfoot li a { text-decoration: none; 
        display: inline-block;  padding: 2px 8px; margin: 1px;
        color: #FFFFFF;border: 1px solid #006699;
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px; border-radius: 3px; 
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );
        background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
        background-color:#006699; }
    .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { 
        text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}

	.datagrid table a{
		color:#373838;	
	}
		#botonmenu
		{
			position: relative;
			display: inline-block;
			margin-top: 0em;
			margin-top: 0%;
			padding: 0.80em 1.5em;
			text-decoration: none;
			text-transform: uppercase;
			font-size: .8em;
			background-color:  #antiquewhite;
			cursor: pointer;
			float:none;
		}

			#botonmenu:hover
			{
				background: #antiquewhite;
				color: #FFF !important;
			}


.listas ul {
	color:#373838; /*#f18a0a;*/
list-style-type: none;
list-style-position: inside;
/*list-style-image:url("waterlist.png");*/
	}

	#lista3 {
    counter-reset: li;
    list-style: none;
 /*   *list-style: decimal; */
    font: 17px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
	color: white;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#lista3 ol {
    margin: 0 0 0 2em;
}

#lista3 li a{
    color: #FFFFFF;
	margin-right: 10px;
 }


#lista3 li{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background:
	/* #f18a0a;*/
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;
}

#lista3 li:hover{
    background: #373838;
}

#lista3 li a:before{
/*    content: counter(li);
    counter-increment: li;*/
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #1a3780;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

#lista3 li:after{
    position: absolute;
/*	 background: #009be0;*/
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;
}

#lista3 li:hover:after{
    left: -.5em;
    border-left-color: #FFFFFF;
}


</style>