body	{ background-color: var(--white);
	  font-family: 'Roboto Condensed', "Arial Unicode MS", Arial, Helvetica, sans-serif; 
/*	  font-family: Arial, Helvetica, sans-serif; */
	  font-size: 100%;
	  color: var(--text-normal);
	}
.normalText 
	{ color: var(--text-normal);
	  font-size: 100%;
	}
/* for tips - start */

.tip { display: inline-block; border-top: 0px dotted var(--gray-light); color: var(--gray-dark);}
.tip span{ 
        display: none;
        color: var(--gray-dark);
        background-color: var(--white);
        border: 1px solid var(--gray-light);
        padding: 10px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        max-width: 200px;
        text-align: center;
        position: absolute;
        z-index:10;
        font-size: 0.9em;
	font-weight: normal;
}
.tip:hover span{ display: block; }

/* for tips - end */

.dd_menu { display: inline-block;  color: inherit }
.dd_menu:hover span{ display: block; }
.dd_menu span{
        display:none;
        background-color: var(--white);
        border-left: 1px solid var(--gray-light);
        padding: 10px 10px 10px 2px;
        max-width: 200px;
        text-align: left;
        position: absolute;
        z-index: 10;
        font-size: 0.9em;
	font-weight: normal;
}
.dd_menu span a::before { content: "-\a0" }
body.mobile { margin: 10px; }
a	{ text-decoration: none; color: var(--text-link); font-weight: bold }

.nopic::after	{ content: "" }
em	{ font-weight: bold; color: var(--error); }
#divLogin
	{ background-color: var(--white); position: absolute;
	  width: 350px; height: 400px; top: 120px; left: calc((100% - 550px) / 2);
	}
#divLoginWith
	{ background-color: var(--white); position: absolute; text-align: left;
	  width: 200px; height: 300px; top: 200px; left: calc(((100% - 550px) / 2) + 380px);
	  padding: 10px 10px 10px 10px;
	}
#divLoginReset
	{ background-color: var(--white); position: absolute;
          width: 600px; height: 420px; top: 120px; left: calc((100% - 550px) / 2);
	  visibility: hidden;
	}

#divTopBanner
	{ z-index: 5;
	  height: 45px;
	  position: absolute;
	  width: 100%; top: 0px; left: 0;
	}
#divTopBanner.w33	{ width: calc( (100% - 100px) / 3) }
body.mobile 
#divTopBanner
	{ z-index: initial;
	  position: initial;
	  width: 100%; height: 30px; top: initial; left: initial;
	  padding-left: initial;
	}
#divTopBanner table
	{ padding: 0px; 
	}
#divTopBanner td
	{ color: var(--text-normal);
	  font-weight: bold;
	  vertical-align: middle;
	  height: 35px;
	  font-size: 100%;
	}
#divTopBanner a
	{ color: inherit;
	}
.mainMenuBg
	{ background-color: var(--main-menu-bg);
	  font-weight: bold;
	  color: var(--main-menu-off);
	}
.mainMenuOn
	{ color: var(--main-menu-on) !important;
	  font-weight: bold;
	}
.mainMenuOff
	{ color: var(--main-menu-off) !important;
	  font-weight: bold;
	}
.mainMenuSep	{ color: var(--main-menu-sep) !important; font-weight: normal !important; }

.subMenuBg
	{ background-color: var(--sub-menu-bg);
	  font-weight: bold;
	  color: var(--sub-menu-off);
	}
.subMenuOn
	{ color: var(--sub-menu-on) !important;
	  font-weight: bold;
	}

.subMenuOff
	{ color: var(--sub-menu-off) !important;
	  font-weight: bold;
	}
.subMenuSep	{ color: var(--sub-menu-sep) !important; font-weight: bold !important; }
.subMenuBorderBottom	{ border-bottom: 1px solid var(--sub-menu-border); }

#divUserInfo
	{ background-color: var(--white);
          position: absolute;
          width: calc(100% - 10px); height: 25px; top: 30px; left: 0;
          padding-left: 10px;
	}
#divUserInfo table
	{ padding: 0px; 
	}
#divUserInfo td
	{ color: var(--text-normal);
	  font-weight: normal;
	  vertical-align: bottom;
	  height: 20px;
	  font-size: 95%;
	}
#divUserInfo a
	{ color: inherit;
	}

#divNotify
	{ top: 45px; left: calc((100% - 800px)/2);
	  background-color: var(--white);
	  position: absolute;
	  visibility: hidden;
	  display: none;
	  z-index: 100;
	  width: 800px;
	  height: 800px;
	  padding: 10px;
	  box-shadow: 2px 2px 5px var(--gray-mid);
	}

#divMsg	{ top: 45px; left: 15px;
	  position: absolute;
	  visibility: hidden;
	  display: none;
	  z-index: 100;
	  width: 300px;
	  text-align: center;
	  vertical-align: middle;
	  font-size: 0.8em;
	  padding: 10px;
	  box-shadow: 2px 2px 5px var(--gray-mid);
	}
label	{ font-size: 0.9em;
	  color: var(--text-label);
	}

input	{ background-color: var(--input-bg);
	  font-weight: normal;
	  color: var(--input-fg);
	  border-bottom: 1px solid var(--input-border);
	  border-left: 1px solid var(--input-border);
	  border-right: 1px solid var(--input-border);
	  border-top: none;
	  padding: 2px 5px 2px 5px;
	}
input[readonly="true"]	{ color: var(--input-fg) }

textarea{ background-color: var(--input-bg);
	  font-weight: normal;
	  color: var(--input-fg);
	  border-radius: 2px;
	  border: 1px solid var(--input-border);
	  padding: 5px 5px 5px 5px;
	}
select	{ background-color: var(--input-bg);
	  color: var(--input-fg);
	  border-bottom: 1px solid var(--input-border);
	  border-left: 1px solid var(--input-border);
	  border-right: none;
	  border-top: none;
	  font-size: 0.9em;
	  padding: 0px 4px 0px 4px;
	}

option	{ color: var(--gray-dark);
	  font-size: 0.9em;
	  padding: 0px 0px 0px 0px;
	}
.inputFile
	{ width: 0.1px;
	  height: 0.1px;
	  opacity: 0;
	  overflow: hidden;
	  position: absolute;
	  z-index: -1;
	}
.inputFileLabel
	{ color: var(--text-label); font-size: 0.8em; font-weight: bold }

.bold	{ font-weight: bold }
.small	{ font-size: 0.8em; }
.legend	{ font-size: 0.8em; color: var(--text-label); font-weight: normal; }

.h100	{ height: 100% }
.h100px	{ height: 100px }
.h200px	{ height: 200px }

.w100	{ width: 100% }
.w95	{ width:  95% }
.w90	{ width:  90% }
.w80	{ width:  80% }
.w70	{ width:  70% }
.w60	{ width:  60% }
.w50	{ width:  50% }
.w40	{ width:  40% }
.w30	{ width:  30% }
.w33	{ width:  33% }
.w20	{ width:  20% }
.w10	{ width:  10% }

.tinyHelp
	{ font-size: 0.9em; text-decoration: none; color: var(--text-link);
	}
button.tinyHelp
	{ background-color: initial;
	  border: none;
	}
button.tinyHelp:hover
	{ cursor: pointer;
	}

.send	{ display: block;
	  color: var(--button-fg);
	  background-color: var(--button-bg);
	  border: 1px solid var(--button-bg);
	  border-bottom: 1px solid var(--gray-dark);
	  border-right: 1px solid var(--gray-dark);
	  font-size: 1em;
	  padding: 2px 6px 3px 6px;
	  font-weight: bold;
	  font-variant: small-caps;
/*	  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
	}

.action	{ color: var(--button-fg);
	  background-color: var(--button-bg);
	  border: 1px solid var(--button-bg);
	  font-size: 0.9em;
	  padding: 0px 5px 0px 5px;
	  font-weight: normal;
	  font-variant: small-caps;
	}
.clear	{ color: var(--text-link); }

h1,.h1	{ font-family: 'Roboto condensed', 'Arial Rounded MT', Arial, Helvetica, sans-serif; font-weight: bold; color: var(--title-h1); font-size: 1.2em; font-variant: small-caps }
h2,.h2	{ font-family: 'Roboto condensed', 'Arial Rounded MT', Arial, Helvetica, sans-serif; font-weight: bold; color: var(--title-h2); font-size: 1.1em; font-variant: small-caps }
h3,.h3	{ font-family: 'Roboto condensed', 'Arial Rounded MT', Arial, Helvetica, sans-serif; font-weight: bold; color: var(--title-h3); font-size: 1.0em; }
h4,.h4	{ font-family: 'Roboto condensed', Arial, Helvetica, sans-serif; font-weight: bold; color: var(--title-h4); font-size: 0.9em; }

hr	{ width: 80%; 
	  border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
	}
#divMain
	{ background-color: var(--white); position: absolute;
	  width: calc(100% - 60px);
	  top: 80px; left: 30px;
	  padding: 10px 0px 10px 10px;
	}
body.mobile
#divMain
	{ position: relative;
	  width: 100%;
	  top: initial; left: initial;
	  margin-top: 20px;
	}
#divHelp, #divGlossary
	{ background-color: var(--white); position: absolute;
	  width: calc(100% - 60px);
	  top: 100px; left: 30px;
	  padding: 10px 0px 10px 10px;
	  visibility: hidden;
	}
dt	{ font-weight: bold }
#divIdent
	{ background-color: var(--white); position: absolute;
	  visibility: hidden;
	  width: 400px;
	  top: 20px; left: calc(100% - 430px);
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          padding: 10px 0px 10px 10px;
	}
#divFoot
	{ width: 100%;
	  border-top: 1px solid var(--gray-lighter);
	  padding-top: 3px;
	  margin-top: 10px;
	  color: var(--text-foot);
	  font-size: 0.8em;
	  text-align: center;
	}
#divFoot a { color: var(--text-foot); }
td	{ vertical-align: top }
.user_pic
	{ width: 60px; height: 60px; 
	  border-radius: 5px 25px;
	}
.partner_img
	{ max-height: 100px; max-width: 200px;
	  padding: 10px;
	  vertical-align: top;
	}

.recordHeadBorder	{ border: 2px solid var(--record-head-border) ! important; }
.recordHeadBorderTop	{ border-top: 1px solid var(--record-head-border); }
.recordHeadBorderBottom	{ border-bottom: 1px solid var(--record-head-border); }
.recordHeadBorderLeft	{ border-left: 1px solid var(--record-head-border); }
.recordHeadBorderRight	{ border-right: 1px solid var(--record-head-border); }

.recordBodyBorder	{ border: 2px solid var(--record-body-border) ! important; }
.recordBodyBorderTop	{ border-top: 1px solid var(--record-body-border); }
.recordBodyBorderBottom	{ border-bottom: 1px solid var(--record-body-border); }
.recordBodyBorderLeft	{ border-left: 1px solid var(--record-body-border); }
.recordBodyBorderRight	{ border-right: 1px solid var(--record-body-border); }

.recordMarker		{ width: 5px; background-color: var(--record-head-border); }
.recordMarkerTransp	{ width: 5px; background-color: var(--white); }

.tableHeadBorder	{ border: 1px solid var(--table-head-border) ! important; }
.tableBodyBorder	{ border: 1px solid var(--table-body-border) ! important; }

.userMarkerRank		{ width: 3px; background-color: var(--user-marker-rank); }

.userBorderAlert	{ border: 1px solid var(--user-border-alert); }
.userBorder		{ border-bottom: 1px solid var(--user-border); }

.identBgCurrent	{ background-color: var(--ident-bg-current); }
.identBgGray	{ background-color: var(--ident-bg-family); }

.photosStats	{ color: var(--photos-stats); }
.specialistStats{ color: var(--specialist-stats); }
.guardianStats	{ color: var(--guardian-stats); }

.homeCall	{ color: var(--home-call); font-weight: bold; }

.alert	{ color: var(--error); }
.bgAlert	{ background-color: var(--error); }

.fgGray		{ color: var(--gray-light); }
.fgDarkGray	{ color: var(--gray-dark) }

.bgWhite	{ background-color: var(--white); }
.bgGray		{ background-color: var(--gray-very-lighter); }
.bgLightGray	{ background-color: var(--gray-much-lighter); }

.pad5		{ padding: 5px }
.pad15		{ padding: 15px }
.padIdentCell	{ padding: 0px 0px 0px 40px }

.userRank	{ font-size: 1.2em;
		  font-weight: bold;
		  text-align: right;
		  color: var(--user-marker-rank);
		}
.userRank::after { content: "\ba" }
.imgUpload
	{ width: 120px; height: 120px;
	  text-align: center;
	  vertical-align: top;
          position: relative;
	}
.bigTable
	{ width: 100%;
	}
.bigTable td
	{ margin-top: 5px; margin-bottom: 5px;
	  padding-top: 5px; padding-bottom: 5px;
	}
.warning { color: var(--warning); }
.success{ color: var(--success); }

.record { font-size: 0.9em; color: var(--text-normal) }
.record .tag { color: var(--text-tag); font-style: normal }

.ident	{ font-size: 0.9em; color: var(--text-normal); background-color: inherit; }
.hi	{ font-size: 1.0em; color: var(--text-normal); background-color: inherit; }

.tag	{ color: var(--text-tag); font-style: normal }
.sp	{ font-style: italic }
.accDarkBg	{ font-weight: bold; color: var(--acc-dark-bg) }
.accLightBg	{ font-weight: bold; color: var(--acc-light-bg) }
.synDarkBg	{ font-weight: normal; color: var(--syn-dark-bg) }
.synLightBg	{ font-weight: normal; color: var(--syn-light-bg) }
.white	{  color: var(--white) }
.black	{  color: var(--black) }
.maior	{ font-size: 1.2em }
.grande	{ font-weight: bold }

.arrow	{ color: var(--white) }

.valid { color: var(--success); font-size: 0.9em; }
.pending { color: var(--warning); font-size: 0.9em; }
.invalid { color: var(--error); font-size: 0.9em; }

.noBorder	{ border: none; }

.direita	{ text-align: right }
.esquerda	{ text-align: left }
.justify	{ text-align: justify }
.centro		{ text-align: center }
.acima		{ vertical-align: top }
.embaixo	{ vertical-align: bottom }
.no_meio	{ vertical-align: middle }
.ids		{ font-weight: bold; color: var(--record-head-border); font-size: 0.9em }
.top		{ vertical-align: top }
.interaction	{ color: var(--interaction) }

#search_map	{ width: 95%; height: 600px }
#search_map_legend	{ width: 95%; height: 30px }
#form_map	{ width: 600px; height: 600px }

.bg_white	{ background-color: var(--white) }

svg    { border: 1px none var(--black) }

/* Drag & Drop stuff */
.imgUpload img:hover 
	{ opacity: 0.5;
          filter: alpha(opacity=50); /* For IE8 and earlier */
	}
.imgUpload.dragover 
	{ background-color: rgba(128, 255, 128, .6);
	  color: rgba(255, 255, 255, .8);
	}
.imgUpload input
        { position: absolute;
          cursor: pointer;
          left: 0px;
          top: 0px;
          opacity: 0;
          width: 120px;
          height: 120px;
          z-index: 1;
          border: 0;
          padding: 0;
          font-weight: normal;
        }

.onTop	{ z-index: 99 }
.required	{ color: var(--error) !important; font-weight: normal !important; font-size: larger }
.obrigatorio	{ color: var(--notice) !important; font-weight: normal !important; font-variant: initial !important; font-size: 0.6em }
.opcional	{ color: var(--notice) !important; font-weight: normal !important; font-variant: initial !important; font-size: 0.6em }
.automatico	{ color: var(--notice) !important; font-weight: normal !important; font-variant: initial !important; font-size: 0.6em }
.tip_symbol	{ color: var(--notice) !important; font-weight: normal !important; font-variant: initial !important; font-size: 0.6em }
.shadow		{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }