html {
  width:100%; height:100%;
  margin:0; padding:0; border:0;
}

body {
  position:relative;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  overflow:hidden;
  background:#cccccc;  /* url(../img/linen.jpg) repeat; */
  font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  font-size:11px;
  color:#333;
  overflow:auto;
}

.tabs-table {
  display: table;
  table-layout: fixed;
  position: absolute; 
  left: 25%;
  bottom: 0;
  width: 75%;
  height: 32px;
  overflow: hidden;
}

.tabs-cell {
  display: table-cell;
}

.tab {
  display: block;
  cursor:pointer;
  margin:12px 12px 0 0;
  height:16px;
  padding:8px 0;
  color:#ccc;
  background:#3c3c3c;  /* url(../img/linen_header.jpg) repeat; */
  border-radius: 8px 8px 0 0;
  box-shadow:4px -2px 8px black;
  text-decoration: none; 
  text-align:center;
}

.tab:hover {
  color: #eee;
  text-decoration: underline; 
}

.tab.active {
  cursor:default;
  font-weight: bold;
  color:black;
  background:#cccccc;  /* url(../img/linen.jpg) repeat; */
  text-decoration: none; 
}


input, textarea, select {
  margin:0; padding:4px;
  border:1px solid #b2b2b2; border-radius:4px;
  box-shadow:inset 0 0 2px 1px rgba(0,0,0,0.1);
  font: normal 13px Arial;
}

input.flat, input.flat:focus {
  padding:2px 0;
  border:none;
  box-shadow:none;
  background:none;
  width: 100%;
}

select {
  padding:3px;
}

textarea { 
  resize: none; 
}

input:focus, textarea:focus, select:focus {
  border-color:#4787b1;
  box-shadow:0 0 3px 2px rgba(71,135,177,0.5);
  outline:0;
}

input.checkbox {
  margin:0;padding:1px;vertical-align:top;
  border:none; border-radius:none;
  box-shadow:none;
} 

input.checkbox:focus {
  box-shadow:none;
  outline:0;
} 

label {line-height:1.3em;vertical-align:middle;}

button {
  display:inline-block; margin:0 2px; padding:4px; overflow:hidden;
  font-size:110%; color:#ddd; text-shadow:0 1px 1px #333; text-decoration:none;
  border:1px solid #465864; border-radius:5px;
  background:#7a7b7d; background:linear-gradient(to bottom,#7a7b7d 0,#606060 100%);
  box-shadow:0 1px 1px 0 #ccc,inset 0 1px 0 0 #888;
  white-space:nowrap; outline:0; cursor: pointer;
}

button:hover {
  border-color:#566874; 
  background:#8a8b8d; background:linear-gradient(to bottom,#8a8b8d 0,#707070 100%);
}  

button:active {
  border-color:#566874; 
  background:#8a8b8d; background:linear-gradient(to bottom,#707070 0,#8a8b8d 100%);
}  

button.mainaction {
  font-weight:bold
}  

button img {width:16px;height:16px;vertical-align:top;}
  
  
  
#header {
  position:relative; width:100%; height:32px; margin:0; padding:8px;
  background: #404040;  /* url(../img/linen_header.jpg); */
  opacity:0.7; filter:alpha(opacity=70);  
  box-shadow: 2px 2px 8px 4px rgba(0,0,0,0.66);
}

#login {
  position:relative; width:400px; margin:20ex auto 0 auto; padding:10px 24px 24px 24px;  
  background: #404040;  /* url(../img/linen_login.jpg); */
  border:1px solid #333; border-radius:5px;
  box-shadow:inset 0 0 1px #ccc;
}

.box-bottom{
  position:relative; top:-3px; height:16px; 
  background:url(../img/login_shadow.png) top center no-repeat;
}
  
#content {
  background:white; width:90%; margin:64px auto;
  border-radius: 8px; 
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.33);
}

#topline  {
  height:18px; padding:2px 0 2px 10px;
  background: #404040;  /* url(../img/linen_header.jpg) repeat #666; */
  border-bottom:1px solid #4f4f4f;
  color:#aaa; 
  text-align:center;
  line-height: 18px;
  vertical-align:middle;
} 

#topnav {
  position:relative; height:46px; margin-bottom:10px; padding:0 0 0 10px;
  background:#111; 
  background:linear-gradient(to bottom,#080808 0,#343434 100%)
}  

#toplogo {
  float:left; height:56px; border:0; margin-right:4px; cursor:pointer;
}  

#topline a.button-about{
  display:inline-block; 
  padding:0 1em 0 20px;
  background:url(../img/buttons.png) -6px -193px no-repeat;
  color:#fff;
}  

#topline a.button-user{
  display:inline-block; 
  padding:0 1em 0 20px;
  background:url(../img/buttons.png) -6px -193px no-repeat;
  color:#fff;
}  

#topline a.button-logout{
  display:inline-block; 
  padding:0 1em 0 20px;
  background:url(../img/buttons.png) -6px -193px no-repeat;
  color:#fff;
}  


.toolbar {height:40px; margin:1em; overflow:hidden;}

.toolbar .spacer {display:inline-block; width:24px; height:40px; padding:0;}

.toolbar a.button {
  display: inline-block; overflow:hidden;
  min-width:50px; max-width:75px; height:13px;
  width: auto;
  padding:28px 2px 0 2px; margin:2px;
  text-align:center; font-size:10px; color:#555;
  text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 1px #eee;
  background:url(../img/buttons.png) -100px 0 no-repeat transparent;
}

a.button-logout{
  display:block;padding:4px 4px 4px 20px;
  background:url(../img/buttons.png) -6px -193px no-repeat;color:black;
}

#login td.input{width:80%;padding:8px}
#login input[type="text"], #login input[type="password"]{width:100%;border-color:#666}
#login input.button{padding:6px 18px;color:#444;text-shadow:0 1px 1px #fff;border-color:#f9f9f9;background:#f9f9f9;background:-moz-linear-gradient(top,#f9f9f9 0,#e2e2e2 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9f9f9),color-stop(100%,#e2e2e2));background:-o-linear-gradient(top,#f9f9f9 0,#e2e2e2 100%);background:-ms-linear-gradient(top,#f9f9f9 0,#e2e2e2 100%);background:linear-gradient(top,#f9f9f9 0,#e2e2e2 100%);box-shadow:inset 0 1px 0 0 #fff;-moz-box-shadow:inset 0 1px 0 0 #fff;-webkit-box-shadow:inset 0 1px 0 0 #fff;-o-box-shadow:inset 0 1px 0 0 #fff}
#login input.button:hover, #login input.button:focus{box-shadow:0 0 5px 2px rgba(71,135,177,0.9),inset 0 1px 0 0 #fff;-moz-box-shadow:0 0 5px 2px rgba(71,135,177,0.9),inset 0 1px 0 0 #fff;-webkit-box-shadow:0 0 5px 2px rgba(71,135,177,0.9),inset 0 1px 0 0 #fff;-o-box-shadow:0 0 5px 2px rgba(71,135,177,0.9),inset 0 1px 0 0 #fff}
#login input.button:active{color:#333;background:-moz-linear-gradient(top,#dcdcdc 0,#f9f9f9 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dcdcdc),color-stop(100%,#f9f9f9));background:-o-linear-gradient(top,#dcdcdc 0,#f9f9f9 100%);background:-ms-linear-gradient(top,#dcdcdc 0,#f9f9f9 100%);background:linear-gradient(top,#dcdcdc 0,#f9f9f9 100%)}
#login form table{width:98%}
#login td.title{width:20%;white-space:nowrap;color:#cecece;text-shadow:0 1px 1px black;text-align:right;padding-right:1em}
#login #logo{margin-bottom:16px;border:0}
#login #message{min-height:40px;padding:5px 25px;text-align:center;font-size:1.1em}
#login #message div{display:inline-block;padding-right:0;font-size:12px}

.formbuttons {margin-top:2em;font-size:14px;text-align:center;}

a {text-decoration:none;}
a:hover {text-decoration:underline;}

#mailview-left {position:absolute;top:0;left:0;width:220px;bottom:0;z-index:2}
#mailview-right{position:absolute;top:0;left:232px;right:0;bottom:0;z-index:3}

.whitebox {
  box-sizing: border-box;
  border:1px solid #a3a3a3; border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 2px #999;
  -o-box-shadow:0 0 2px #999;
  -webkit-box-shadow:0 0 2px #999;
  -moz-box-shadow:0 0 2px #999;
  background:#fff;
}

.bluebox {
  box-sizing: border-box;
  border:1px solid #a3a3a3;border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 2px #999;
  -o-box-shadow:0 0 2px #999;
  -webkit-box-shadow:0 0 2px #999;
  -moz-box-shadow:0 0 2px #999;
  background:#e0f4f0;
}

.grid {
  display: block;
  position: absolute;
}
  
.l00 {left:0.5%;}
.l10 {left:10.5%;}
.l20 {left:20.5%;}
.l30 {left:30.5%;}
.l33 {left:33.83%;}
.l40 {left:40.5%;}
.l50 {left:50.5%;}
.l60 {left:60.5%;}
.l66 {left:67.16%;}
.l70 {left:70.5%;}
.l80 {left:80.5%;}
.l90 {left:90.5%;}

.t00 {top:2%;}
.t10 {top:12%;}
.t20 {top:22%;}
.t30 {top:32%;}
.t33 {top:35.33%;}
.t40 {top:42%;}
.t50 {top:52%;}
.t60 {top:62%;}
.t66 {top:67.66%;}
.t70 {top:72%;}
.t80 {top:82%;}
.t90 {top:92%;}

.w10 {width:09%;}
.w20 {width:19%;}
.w30 {width:29%;}
.w33 {width:32.33%;}
.w40 {width:39%;}
.w50 {width:49%;}
.w60 {width:59%;}
.w66 {width:65.66%;}
.w70 {width:69%;}
.w80 {width:79%;}
.w90 {width:89%;}
.w00 {width:99%;}

.h10 {height:06%;}
.h20 {height:16%;}
.h30 {height:26%;}
.h33 {height:29.33%;}
.h40 {height:36%;}
.h50 {height:46%;}
.h60 {height:56%;}
.h66 {height:62.66%;}
.h70 {height:66%;}
.h80 {height:76%;}
.h90 {height:86%;}
.h00 {height:96%;}
  
.l00 {left:calc(0.5em);}
.l10 {left:calc(10% + 0.5em);}
.l20 {left:calc(20% + 0.5em);}
.l30 {left:calc(30% + 0.5em);}
.l33 {left:calc(33.33% + 0.5em);}
.l40 {left:calc(40% + 0.5em);}
.l50 {left:calc(50% + 0.5em);}
.l60 {left:calc(60% + 0.5em);}
.l66 {left:calc(66.66% + 0.5em);}
.l70 {left:calc(70% + 0.5em);}
.l80 {left:calc(80% + 0.5em);}
.l90 {left:calc(90% + 0.5em);}

.t00 {top:calc(0.5em);}
.t10 {top:calc(10% + 0.5em);}
.t20 {top:calc(20% + 0.5em);}
.t30 {top:calc(30% + 0.5em);}
.t33 {top:calc(33.33% + 0.5em);}
.t40 {top:calc(40% + 0.5em);}
.t50 {top:calc(50% + 0.5em);}
.t60 {top:calc(60% + 0.5em);}
.t66 {top:calc(66.66% + 0.5em);}
.t70 {top:calc(70% + 0.5em);}
.t80 {top:calc(80% + 0.5em);}
.t90 {top:calc(90% + 0.5em);}

.w10 {width:calc(10% - 1em);}
.w20 {width:calc(20% - 1em);}
.w30 {width:calc(30% - 1em);}
.w33 {width:calc(33.33% - 1em);}
.w40 {width:calc(40% - 1em);}
.w50 {width:calc(50% - 1em);}
.w60 {width:calc(60% - 1em);}
.w66 {width:calc(66.66% - 1em);}
.w70 {width:calc(70% - 1em);}
.w80 {width:calc(80% - 1em);}
.w90 {width:calc(90% - 1em);}
.w00 {width:calc(100% - 1em);}

.h10 {height:calc(10% - 1em);}
.h20 {height:calc(20% - 1em);}
.h30 {height:calc(30% - 1em);}
.h33 {height:calc(33.33% - 1em);}
.h40 {height:calc(40% - 1em);}
.h50 {height:calc(50% - 1em);}
.h60 {height:calc(60% - 1em);}
.h66 {height:calc(66.66% - 1em);}
.h70 {height:calc(70% - 1em);}
.h80 {height:calc(80% - 1em);}
.h90 {height:calc(90% - 1em);}
.h00 {height:calc(100% - 1em);}

.records-table {display:table;width:100%;table-layout:fixed;border-spacing:0;border:none;margin:none;user-select: none;}

.records-table th {
  color:#008060;font-size:11px;font-weight:bold;
  background:#c7efe3;
  background-image:linear-gradient(to right,#e3f6f2 0px,#c7efe3 14px,rgba(0,0,0,0)),linear-gradient(to left,#ace4d4 0px,#c7efe3 14px,rgba(0,0,0,0));
  border-right:1px solid #bbd3da;border-bottom:1px solid #bbd3da;
  padding:0 7px;overflow:hidden;text-overflow:ellipsis 
}

.records-table tr th.sortedASC a, .records-table tr th.sortedDESC a {
  color:#004458;text-decoration:underline;background:url(../img/listicons.png) right -912px no-repeat
}

.records-table tr th.sortedASC a {background-position:right -944px}

.records-table th img {vertical-align:middle;display:inline-block}

.records-table th a {color:inherit;text-decoration:none;white-space:nowrap;cursor:default}  
  
.records-table th a, .records-table th span {
  display:block;padding:7px 0;text-decoration:none;overflow:hidden;text-overflow:ellipsis
}

.records-table td {
  padding:2px 7px;border-bottom:1px solid #bbdad3;border-right:1px dotted #bbdad3;white-space:nowrap;cursor:default;overflow:hidden;text-overflow:ellipsis;background-color:#fff;
  height: 20px;
}

.records-table tr.focused>td:first-child {border-left:2px solid #b0d7cc;padding-left:4px}

.records-table tr.selected.focused>td:first-child {border-left-color:#49d2b3}

.records-table tr:hover td {
  !important;background:#d9f4ec;
  background:linear-gradient(to bottom,#e8fff8 0,#d0f0e6 100%)
}

.records-table tr.selected td {
  color:#fff !important;background:#01c69b;
  background:linear-gradient(to bottom,#01c69b 0,#01b47c 100%)
}

.records-table tr.selected td a, .records-table tr.selected td span {color:#fff !important}

.records-table tr.unfocused td {color:#fff !important;background-color:#4dd2b0 !important}

.records-table tr.unfocused td a, .records-table tr.unfocused td span {color:#fff !important}

.records-table tr.deleted td, .records-table tr.deleted td a {color:#ccc !important}

.records-table tr {height:2.75em;}

h1 {
  display:block;
  margin:0;padding:0.75em 7px;
  height: 1.25em;
  color:#008060;font-size:11px;font-weight:bold;
  background:#c7efe3;
  background-image:linear-gradient(to right,#e3f6f2 0px,#c7efe3 14px,rgba(0,0,0,0)),linear-gradient(to left,#ace4d4 0px,#c7efe3 14px,rgba(0,0,0,0));
  border-bottom:1px solid #bbdad3;
  overflow:hidden;text-overflow:ellipsis;
  text-align:center; 
}

p {margin:0 0 8px 0;font-size:14px;}

hr {margin:4px;border:none;height:1px;background:#bbd3da;overflow:hidden;}

img {border:none;}

img.icon   {float:left;width:16px;height:16px;margin-right:4px;}
img.icon12 {float:left;width:12px;height:12px;margin-right:4px;}
img.icon16 {float:left;width:16px;height:16px;margin-right:4px;}
img.icon24 {float:left;width:24px;height:24px;margin-right:4px;}
img.icon32 {float:left;width:32px;height:32px;margin-right:4px;}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p, input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

a[disabled] {
  pointer-events: none;
  opacity: 0.4; 
  text-decoration:none;
  cursor: default;
}

h1 {
  color:#006080;
  background:#c7e3ef;
  background-image:linear-gradient(to right,#e3f2f6 0px,#c7e3ef 14px,rgba(0,0,0,0)),linear-gradient(to left,#acd4e4 0px,#c7e3ef 14px,rgba(0,0,0,0));
  border-bottom:1px solid #bbd3da;
}

.records-table th {
  color:#006080;
  background:#c7e3ef;
  background-image:linear-gradient(to right,#e3f2f6 0px,#c7e3ef 14px,rgba(0,0,0,0)),linear-gradient(to left,#acd4e4 0px,#c7e3ef 14px,rgba(0,0,0,0));
  border-right:1px solid #bbdad3;
  border-bottom:1px solid #bbdad3;
}

.records-table td {
  border-bottom:1px solid #bbdad3;
  border-right:1px dotted #bbdad3;
  background-color:#fff;
}

.records-table tr.focused>td:first-child {border-left:2px solid #b0ccd7;}
.records-table tr.selected.focused>td:first-child {border-left-color:#49b3d2}
.records-table tr:hover td {!important;background:#d9ecf4;background:linear-gradient(to bottom,#e8f8ff 0,#d0e6f0 100%)}
.records-table tr.selected td {color:#fff !important;background:#019bc6;background:linear-gradient(to bottom,#019bc6 0,#017cb4 100%)}
.records-table tr.unfocused td {color:#fff !important;background-color:#4db0d2 !important}

.table-scroll {height:100%; overflow:auto; overflow-x:hidden; overflow-y:auto;}
.table-scroll th {position:relative}

.bluebox {
  border:1px solid #a3a3a3;
  background:#e0f0f4;
}

input:focus, textarea:focus, select:focus {
  border-color:#4787b1;
  box-shadow:0 0 3px 2px rgba(71,135,177,0.5);
}