body, html {
   padding: 0; margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 90%;
   color: #000;
   height: 100%;
   background-image: url('../../clients/img/bkg2.png');
   background-repeat: repeat-y; 
}
.handy {
   cursor:pointer;
}

#dMain {
   position: absolute;
   top: 0; left: 220px;
   background-color: #E3EBF1;
   font-size: 1.1em;
}

.calculated-width {
    width: -webkit-calc(100% - 220px);
    width:    -moz-calc(100% - 220px);
    width:         calc(100% - 220px);
     height: 100%;
}​

p {
   margin: 5px 10px;
   line-height: 1.5em;
}

.warning { color: #f00000;}
.msgok { color: #00f800;}



/* Login  */

#dLeft {
   position: absolute;
   top: 0; left: 0;  width: 220px; height: 100%;
   background-color: #152343;
}

#left p 
{
   margin: 5px 10px;
   line-height: 1.5em;
}



#dLogin fieldset 
{
	border-style: none;
}

#dLogin 
{
	color: White;
	font-size: 1.1em;
}

.txtL 
{
	width: 280px;
	margin-bottom: 5px;
	font-size: 1.1em;
}
.txtP 
{
	width: 140px;
	margin-bottom: 5px;
	font-size: 1.1em;
}

.loginBtn
{
	margin-top: 15px;
	font-size: 1.1em;
}

/* generic */

.metraSelect {
   position: absolute;
   top: 15px; left: 15px;
}

.dDates {
   font-size: 1.2em;
   padding: 5px;
   border: solid 1px grey;
}


/* --------------------------------- */


.metraTable {
   border-collapse: collapse; 
}

   .metraTable td {
      background-color: #FFFFFF;
      padding: 10px 30px;
      text-align: center;
   }
   .metraTable th, .metraTable_th {
     background-color: #C6D8E5;
     padding: 10px 30px;
      text-align: center;
  }
   .metraTable td.aL {
      text-align: left;
   }
   .metraTable th.aL {
      text-align: left;
  }
   .metraTable td.aR {
      text-align: right;
   }
   .metraTable th.aR {
      text-align: right;
  }

.metraBrief {
   position: absolute;
   top: 215px; left: 15px; width: 500px;
   padding: 20px;
   background-color: white;
}

h3 {
   font-size: 1.25em;
   padding: 0 10px 0 0;
}

p.briefNote {
   margin-top:20px;
   color: #7599FF;
}

div.metraBtn2 {
   display: inline-block;
   border-radius: 20px;
   box-shadow: 4px 4px lightgrey;
   padding: 15px 10px 0 10px;
   height: 40px;
   background-color: #fff; 
   overflow:hidden;
}

div.metraBtn2:hover {
   padding: 16px 9px 1px 11px;
   box-shadow: 4px 4px grey;
}

   div.metraBtn2 a {
      display:block;
      text-decoration: none;
      color: black;
   }
   
div.metraBtnH {
   display: inline-block;
   border-radius: 20px;
   box-shadow: 4px 4px lightgrey;
   padding: 11px 7px 0 7px;
   height: 30px;
   background-color: #fff; 
  /* border: solid 2px #E3EBF1;*/
   overflow:hidden;
}

div.metraBtnH:hover {
  /* border: solid 2px #E3EBF1;*/
   padding: 12px 6px 1px 6px;
   box-shadow: 4px 4px grey;
}

   div.metraBtnH a {
      display:block;
      text-decoration: none;
      color: black;
   }

#metraToggle {
   /* position set on each page */
}
   #metraToggle a {
      display:block;
      color: #152343;
      padding: 10px;
      margin-top:-10px;
      height: 25px;
      text-decoration: none;
   }
   #metraToggle a:hover {
      color: #000; 
      text-decoration: underline;
   }
   
#optB {
   display:inline-block;
   padding: 20px 10px 0 10px;
   height: 35px;
   background-color: #fff; 
}
#optA {
   display:inline-block;
   padding: 20px 10px 0 10px;
   height: 35px;
   background-color: #7599FF; 
   color: white;
}