html, body {
    height: 100%;
    background-color:lightgray;
}
#container {
    min-height: 100%;
    margin-bottom: 100px;
    position: relative;
    overflow: auto;
    /*padding-bottom: 100px;*/
}
#footer {
    position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
    /*background-color:#C0C4C5;*/
}
.clearfooter {
height: 100px;
clear: both;
}
/*Opera Fix*/
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

	

.encabezadopagina {
    color:white;
    font-size:20px; 
    font-family:'Segoe UI',Arial ,Verdana;
    /*font-weight:bold;*/
}
.barragris {
    background: #fcfff4; /* Old browsers */
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
}
.icon {
   width: 50px;
   Height: 50px;
   background: url(/images/icon.png)
}

icon .count {
    background:#ff0000;
    position: absolute; 
    top: -8px;
    Right: -8px;
    min-width:14px;
    height: 14px;
    color:#ffffff;
    border-radius: 50%;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}

.numberCircleActivo {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 44px;
    height: 36px;
    padding: 8px;
    background: #E25B00;
    color: #fff;
    text-align: center;
    font: 32px Arial, sans-serif;
}

.numberCircleInactivo {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 44px;
    height: 36px;
    padding: 8px;
    background:#C0C4C5;
    color: #fff;
    text-align: center;
    font: 32px Arial, sans-serif;
}

.textoprogresstask {
    font:14px Segoe UI ,Arial, sans-serif;
}

.textochicometro {
    font:12px Segoe UI ,Arial, sans-serif;
}
.textochicometrotitulo {
    font:12px Segoe UI ,Arial, sans-serif;
    font-weight:bold;
}
.textosubtotales {
    font:14px Segoe UI ,Arial, sans-serif;
    font-weight:bold ;
}
.centratd {
    width:36px;
    text-align:center;
    align-content:center;
    /*margin:auto; display:table;*/
}

.lineas {
  display:inline-block;
  width:100%;
  height:2px;
  /*color:#d6dfe1;*/
  background-color: #d6dfe1;
  border-top-width:1px; 
}

a.botonMetroAgregar1{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#EC5F00; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #EC5F00; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroAgregar1 {
	background-color:#EC5F00;
    padding: 3px 3px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    /*-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);*/
}
a.botonMetroAgregar1:hover,a.botonMetroAgregar1:active
{ 
    background-color:#bc4c00;
	color: #FFFFFF;
}
.imagenMetroAgregar1:hover,.imagenMetroAgregar1:active
{ 
    background-color:#bc4c00;
	color: #FFFFFF;
}
a.botonMetroAgregar2{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#0086A3; /*#79bfce; */
    background-image: none;
    background-repeat: no-repeat;
    border-color: #56a500; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroAgregar2 {
	background-color:#0086A3; /*#56a500;*/
    padding: 3px 3px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroAgregar2:hover,a.botonMetroAgregar2:active
{ 
    background-color:##004E5F: /*#6098a4*/;
	color: #FFFFFF;
}

.tdcentro {
    vertical-align:middle ; 
    text-align: center;
}

a.botonMetro{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#8e4200; /*#ed6e00;*/
    background-image: none;
    background-repeat: no-repeat;
    border-color: #ed6e00; /*59008C;*/
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetro {
	background-color:#8e4200;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetro:hover,a.botonMetro:active
{ 
    background-color: #522600;
	color: #FFFFFF;
}

a.botonMetroCancelar1{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#868686; /*#f7bf99; */
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroCancelar1 {
	background-color:#868686;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroCancelar1:hover,a.botonMetroCancelar1:active
{ 
    background-color:#5d5d5d; /*#bc4c00;*/
	color: #FFFFFF;
}
/*NARANJA*/
a.botonMetroNaraja{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#fd9406; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroNaraja {
	background-color:#fd9406;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroNaraja:hover,a.botonMetroNaraja:active
{ 
    background-color:#ca7604;
	color: #FFFFFF;
}

/*TEAL*/
a.botonMetroTeal{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#00aba9; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroTeal {
	background-color:#00aba9;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroTeal:hover,a.botonMetroTeal:active
{ 
    background-color:#005554;
	color: #FFFFFF;
}

/*MAGENTA*/
a.botonMetroMagenta{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#ff0097; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroMagenta {
	background-color:#ff0097;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroMagenta:hover,a.botonMetroMagenta:active
{ 
    background-color:#5c0e23;
	color: #FFFFFF;
}

/*DARK ORANGE*/
a.botonMetroOrange{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#e3a21a; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroOrange {
	background-color:#e3a21a;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroOrange:hover,a.botonMetroOrange:active
{ 
    background-color:#71510d;
	color: #FFFFFF;
}

/*DARK BLUE*/
a.botonMetroDarkBlue{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#2b5797; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroDarkBlue {
	background-color:#2b5797;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroDarkBlue:hover,a.botonMetroDarkBlue:active
{ 
    background-color:#11223c;
	color: #FFFFFF;
}


/*PURPLE*/
a.botonMetroPurple{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#7e3878; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroPurple {
	background-color:#7e3878;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroPurple:hover,a.botonMetroPurple:active
{ 
    background-color:#3f1c3c;
	color: #FFFFFF;
}

/*GREEN*/
a.botonMetroGreen{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#00a300; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroGreen {
	background-color:#00a300;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroGreen:hover,a.botonMetroGreen:active
{ 
    background-color:#006100;
	color: #FFFFFF;
}

/*Carne*/
a.botonMetroCarne{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#F2AD84; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroCarne {
	background-color:#F2AD84;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroCarne:hover,a.botonMetroCarne:active
{ 
    background-color:#91674f;
	color: #FFFFFF;
}

/*Ladrillo*/
a.botonMetroLadrillo{
    font-family: "Open Sans",Tahoma,Arial,Helvetica,Sans-Serif;
    background-color:#CE3A12; 
    background-image: none;
    background-repeat: no-repeat;
    border-color: #868686; 
    color: #FFFFFF;
    filter: none;
    font-size: 12px;
    line-height: 24px;
    padding:0px; /* 2px 14px;*/
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-decoration:none;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
.imagenMetroLadrillo {
	background-color:#CE3A12;
    padding: 3px 3px;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.75);
}
a.botonMetroLadrillo:hover,a.botonMetroLadrillo:active
{ 
    background-color:#7b220a;
	color: #FFFFFF;
}

.FondoPantalla{
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

.TituloNaranja{
    background: -moz-linear-gradient(45deg, rgba(255,104,1,1) 0%, rgba(178,72,0,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,104,1,1)), color-stop(100%, rgba(178,72,0,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(255,104,1,1) 0%, rgba(178,72,0,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(255,104,1,1) 0%, rgba(178,72,0,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(255,104,1,1) 0%, rgba(178,72,0,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(255,104,1,1) 0%, rgba(178,72,0,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b24800', endColorstr='#FF6801',GradientType=1 ); /* ie6-9 */
}