body{
	text-align:center;
}
.mainContainer{
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;
	margin: auto;
	visibility: hidden;
	display: none;
}
.mainContainer_visible{
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;
	margin: auto;
	visibility: visible;
}
.listCards{
}
.imgContainer{
}

.infoContainer{
}

.menuListCardsItem{
  width: 64px ;
  height: 64px ;
	display: inline;
	visibility: visible;
}

.menuListCardsItem_show{
  width: 64px ;
  height: 68px ;
	border-bottom: 3px solid #D72E2E;
	visibility: visible;
}



.oculta{
	visibility: hidden;
	display: none;
}
.visible{
	visibility: visible;
}

table.infoTable { font:0.7em Arial, Helvetica, sans-serif; background-color:#ebe9ed; }
table.infoTable caption { background:#000 url("../imgs/tabla/effect.gif") repeat-x; color:#FFF; text-transform:uppercase; font-weight:bold; font-size:1.2em; border:1px solid #000; }
table.infoTable thead th { background:#F5B348 url("../imgs/tabla/effect3.gif") repeat-x; color:#724809; padding:2px; text-transform:uppercase; border-top:1px solid #F4D39E; border-left:1px solid #F4D39E; border-bottom:1px solid #B76E00; border-right:1px solid #B76E00; }
table.infoTable tfoot th { background:#F29601 url("../imgs/tabla/effect5.gif") repeat-x; color:#724809; padding:2px; text-transform:uppercase; font-size:1.2em; }
table.infoTable tfoot td { background:#FC0 url("../imgs/tabla/effect4.gif") repeat-x; color:#724809; font-weight:bold; text-transform:uppercase; font-size:1.2em; padding:0px 5px; }
.odd {  }
table.infoTable tbody td { background:#D7DBDD url("../imgs/tabla/effect2.gif") repeat-x; color:#000; padding:2px; border-top:1px solid #FFF; border-left:1px solid #FFF; border-bottom:1px solid #AFB5B8; border-right:1px solid #AFB5B8;  }
table.infoTable tbody th { background:#000 url("../imgs/tabla/effect.gif") repeat-x; color:#D7DBDD; padding:2px; border-top:1px solid #93A1AA; border-left:1px solid #93A1AA; border-bottom:1px solid #2F3B42; border-right:1px solid #2F3B42; }
table.infoTable tbody td a {  color:#6C7579; text-decoration:none; font-weight:bold; }
table.infoTable tbody td a:hover {color:#c51717;}
table.infoTable tbody th a { color:#FFF; text-decoration:none; font-weight:bold; }
table.infoTable tbody th a:hover { color:#FC0; text-decoration:none; }

.table.th.infoTitle{
}


/*Sortable table*/

/* Sortable tables */
table.infoTable a.sortheader {
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.infoTable span.sortarrow {
    color: red;
    text-decoration: none;
}

/* assume intended width is 350px with 15px image gap on either side and 25px in-image padding*/
.measure { width: 350px; background: blue; margin: 20px auto 0; } /* max image width inc outside gap = measure2 + outside gap */
.measure2 { width: 320px; background: red; margin: 0 auto 0; }    /* Interior Image = max interior width excluding drop shadows/glows */
.measure3 { width: 270px; background: green; margin: 0 auto 0; }  /* Interior padding = max interior width */
.measure, .measure2, .measure3 {
    font-size: 62.5%;
    text-align: center;
    padding: 1px 0 2px;
    color: #fff;
}

input{
border: thin solid Black;
}

.textInputs{
border: thin solid Black;
}

.explanations{
color: #00016F;
width: 790px;
background-color: #ECECFF;
border: 2px groove #00008B;
padding: 4px;
}
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
	background: transparent url(../imgs/tabla/demobox copy.png) no-repeat bottom right;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.cssbox {
    width: 335px !important;   /* intended total box width - padding-right(next) */
    width: 320px;              /* IE Win = width - padding */
    padding-right: 15px;       /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto;         /* use to position the box */
}

/* set the top-right image */
.cssbox_head {
    background-position: top right;
    margin-right: -15px;       /* pull the right image over on top of border */
    padding-right: 40px;       /* right-image-gap + right-inside padding */
}

/* set the top-left image */
.cssbox_head h2 {
    background-position: top left;
    margin: 0;                 /* reset */
    border: 0;                 /* reset */
    padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */
    height: auto !important; 
    height: 1%;                /* IE Holly Hack */
}

/* set the lower-left corner image */
.cssbox_body {
    background-position: bottom left;
    margin-right: 25px;        /* interior-padding right */
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */
}


/* Misc Text formatting */
.cssbox_head h2 {
    color: white;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 16px;      /* this is tricky if box width is in ems */
    text-align: center; 
    text-shadow: rgb(0,0,0) 0px 2px 5px; /* Safari-only, but I'm doing it just 'cause I can */
}
.cssbox_body p {
    margin: 0 0 20px;
}
.cssbox_body a, .css_body a:hover {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: underline;
}

/*tabla ancha*/

/* assume intended width is 350px with 15px image gap on either side and 25px in-image padding*/
.widemeasure { width: 720px; background: blue; margin: 20px auto 0; } /* max image width inc outside gap = measure2 + outside gap */
.widemeasure2 { width: 690px; background: red; margin: 0 auto 0; }    /* Interior Image = max interior width excluding drop shadows/glows */
.widemeasure3 { width: 740px; background: green; margin: 0 auto 0; }  /* Interior padding = max interior width */
.widemeasure, .widemeasure2, .widemeasure3 {
    font-size: 62.5%;
    text-align: center;
    padding: 1px 0 2px;
    color: #fff;
}

/* set the image to use and establish the lower-right position */
.widecssbox, .widecssbox_body, .widecssbox_head, .widecssbox_head h2 {
    background: transparent url(../imgs/demobox copy.png) no-repeat bottom right;
    margin: 0;
    padding: 0; 
}

.widecssbox {
    width: 705px !important;   /* intended total box width - padding-right(next) */
    width: 690px;              /* IE Win = width - padding */
    padding-right: 15px;       /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto;         /* use to position the box */
}

/* set the top-right image */
.widecssbox_head {
    background-position: top right;
    margin-right: -15px;       /* pull the right image over on top of border */
    padding-right: 40px;       /* right-image-gap + right-inside padding */
}

/* set the top-left image */
.widecssbox_head h2 {
    background-position: top left;
    margin: 0;                 /* reset */
    border: 0;                 /* reset */
    padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */
    height: auto !important; 
    height: 1%;                /* IE Holly Hack */
}

/* set the lower-left corner image */
.widecssbox_body {
    background-position: bottom left;
    margin-right: 25px;        /* interior-padding right */
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */
}


/* Misc Text formatting */
.widecssbox_head h2 {
    color: white;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 16px;      /* this is tricky if box width is in ems */
    text-align: center; 
    text-shadow: rgb(0,0,0) 0px 2px 5px; /* Safari-only, but I'm doing it just 'cause I can */
}
.widecssbox_body p {
    margin: 0 0 20px;
}
.widecssbox_body a, .widecss_body a:hover {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: underline;
}