/*****************************************************************************
* Name.......: base.css
* Package....: NepAS Members Registration Application
* Author.....: Alexandre José Tiberti <atiberti@sc.usp.br>
* Created....: 14-nov-2013
* Modified...:
* Modified by:
* Version....: 0.1
* Copyright..: NepAS/SEM/EESC/USP
* Licence....: Authorized users only
* Description: Basic styles for all HTML pages.
*****************************************************************************/
/*
@font-face {
  font-family: "Titillium Maps";
  src: local("Titillium Maps");
  src: local("TitilliumMaps");
  src: url("/templates/beez_20/fonts/TitilliumMaps29L002.eot");
  src: url("/templates/beez_20/fonts/TitilliumMaps29L002.otf");
  src: url("/templates/beez_20/fonts/TitilliumMaps29L002.woff");
}
*/

/**
  Basic and general styles
*/
body {
    font-family: Arial, Tahoma, Geneva, Helvetica, sans-serif;
    font-size: 10pt;
    background: #fff;
    color: #000;
    margin: 0;
}

td {
	text-align: left;
	padding: .2em;
	margin: 0;
}

p {
  margin: 0 0 0.5em 0;
  text-align: inherit;
}

p.normal, *.normal {
  margin: 0 0 0.5em 0;
  text-align: justify;
}

p.normal_indent {
  margin: 0 0 0.5em 0;
  text-align: justify;
  text-indent: 3ex;
}

/**
  General Link style - see template files
*/
a,
a:visited {
    color: navy;
    display: inline;
    text-decoration : none;
    text-align: center;
}

a:active,
a:focus,
a:hover {
    color: blue;
    text-decoration : underline;
	outline-style: none;
}


/**
  Main page styles - see mail.html template file
*/
div.main-page {
	margin: 0;
	padding: 0.5em;
    background: #EEE;
}

div.page-header {
    display: block;
	margin: 0;
	padding: 0.5em;
    background: rgb(59, 89, 152);
	color: white;
}

div.page-content {
    display: block;
	min-height: 25em;
	margin: 0;
/*	padding: 1em; */
	padding: 0;
    background: white;
}

div.page-footer {
    display: block;
    font-size: 9pt;
	margin: 0;
	padding: 0.5em;
    background: #AAA;
}

/**
  Content page panel styles - see mail.html template file
*/
div.top-panel {
    display: block;
	min-height: 1em;
	margin: 0;
	padding: 0.25em;
    background: #EEE;
	border-bottom: 0px solid gray;
}

div.bottom-panel {
	display: none;
/*    display: block; */
	min-height: 1em;
	margin: 0;
	padding: 0.25em;
	border: 1px solid black;
}

div.content-panel {
    display: block;
	min-height: 21.75em; 
	margin: 0;
	padding: 0;
	border: 0px solid black;
}

div.left-panel {
	display: block;
	position: relative;
	float: left;
	width: 15em;
	min-height: 1em;
	margin: 0em;
	padding: 0.25em;
	border: 0px solid gray;
}

div.middle-panel {
/*	position: fixed;*/
	height: auto;
	top: inherit;
    left: 0;
    right: 0;
    bottom: auto;
/* use this margins when right panel is visible
	margin: 0 15.5em 0 15.5em;
*/
	margin: 0 0em 0 15em;
	padding: 0.25em;
	border: 0px solid black;
}

div.right-panel {
	display: none;
	position: relative;
	float: right;
	width: 15em;
	min-height: 1em;
	margin: 0em;
	padding: 0em;
	border: 1px solid black;
}


/**
  Page header styles - see mail.html template file
*/
div.page-header #headerLogo {
    font-family: Tahoma, Arial, sans-serif;
	line-height: 1em;
	margin: 0em;
	margin-left: 10px;
    font-size: 3.5em;
	font-weight: normal;
}

div.page-header #headerTitle {
    font-family: Arial, Tahoma, sans-serif;
    font-size: .3em;
	padding-left: 4em;
	line-height: 2.5em;
}

/**
  Page content styles - see template files
*/
.page-title {
    color: black;
	display: block;
/*    font-size: 2.0em; */
    margin: 0.5em;
	border-top: 2px solid #888;
	border-bottom: 2px solid #888;
	font-weight: bolder;
	text-align: center;
}

div.error {         /* Panel for error messages */
    display: block;
	width: 60ex;
	background: #FF5;
	padding: 1em;
	margin: 1em;
}

div.notes {     	/* Panel for commentaries and notes */
    display: block;
	width: 60ex;
	background: #EEE;
	padding: 1em;
	margin: 1em;
}


/**
  Print page styles - see print.html template file
*/
div.print-page {
	margin: 0;
	padding: 0.5em;
}

div.print-page div.page-header {
	color: black;
	border: 1px solid gray;
	background: white;
}

div.print-page div.page-content {
    background: white;
}

div.print-page div.page-footer {
	display: none;
	border: 1px solid gray;
	background: white;
}


/**
  Content page panel styles - see mail.html template file
*/
div.print-page div.top-panel {
    background: white;
	border: none;
}

div.print-page div.bottom-panel {
}

div.print-page div.content-panel {
}

div.print-page div.left-panel {
}

div.print-page div.middle-panel {
}

div.print-page div.right-panel {
}



/**
  General form styles - see template files
*/
form.formstyle {  		/* standard form style */
/*    font-size: 10pt; */
	margin: 0;
}

form.formstyle label {
    font-weight: bold;
    vertical-align: top;
}

form.formstyle input, select, textarea {
    background: #f3f3f3;
    border: 1px solid #66a;
    color: #000;
/*    font-size: 10pt; */
}

form.formstyle input:focus, select:focus, textarea:focus {
    background: #fff;
    border: 1px solid #99f;
}

form.formstyle fieldset,
fieldset {
    border: 2px groove;
    font: inherit;
    margin: 0 0 4pt 0;
	padding: 2pt;
}

form.formstyle legend,
legend {
    color: navy;
    font-size: 10pt;
    font-weight: bold;
}

form.formstyle button,
form.formstyle input.button {
    color: #fff;
    background: #66a;
    border-bottom: 1px solid #333;
    border-right: 1px solid #000;
    border-left: 1px solid #C4C4B8;
    border-top: 1px solid #C4C4B8;
}

form.formstyle button:hover,
form.formstyle input.button:hover {
    background: #99f;
}

form.formstyle button:focus,
form.formstyle input.button:focus {
    background: #99f;
}

span.required {
    color: red;
    display: inline;
    font-size: 12pt;
    font-weight: bold;
    vertical-align: top;
}

/**
  General data view styles - see template files
*/
table.dataview {
/*    font-size: 10pt; */
	width: 100%;
	margin: 0;
	padding: 0;
}
/*
table.dataview td {
	margin: 0;
	padding: 0;
}
*/
table.dataview div.fieldvalue {
/*    background: #f3f3f3;*/
    border: 1px solid gray;
    color: #000;
    padding: 2px;
}

table.dataview label {
    font-weight: bold;
    vertical-align: top;
}

/*
.radio {
    background: #fff;
    border: none;
    font-size: inherit;
}
*#hidden_field {
    visibility: hidden;
}
*/


/**
  Link Button styles - see template files
*/
a.button,
a.button:visited {    /* formato base para os botões de navegação */
    background: #eee;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    color: #000;
    display: inline;
/*    float: left; */
/*    height: 12pt; */
    margin: 0px;
    padding: 2px 4px 2px 4px;
    text-decoration : none;
    text-align: center;
    font-weight: bold;
/*    width: 22pt; */
}

a.button:active,
a.button:focus {/* Efeito gerado quanto um botão de navegação recebe o foco */
    border-left: 1px solid #888 !important;
    border-top: 1px solid  #888 !important;
    border-right: 1px solid #FFF !important;
    border-bottom: 1px solid #FFF !important;
    color: #000;
    font-weight: bold;
    outline-style: none;
}

a.button:hover {/* Efeito gerado quanto o mouse passa sobre um botão de navegação */
    background: #CCE;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    font-weight: bold;
}


/**
  Menu styles - see template files
*/
div.menupanel {     	/*  Menu panel style */
    display: block;
	color: #555;
	padding: 0.25em;
}

span.menupanelsep,
div.menupanelsep {		/* Menu panel separator style */
    display: block;
    font-size: 4pt;
    height: 4pt;
    width: 185px;
}

span.menutitle {		/* Menu panel title style */
    border-top: 1px solid  #CCC;
    border-bottom: 1px solid #CCC;
    display: block;
    height: auto;
    padding: 0.25em 0 0.25em 0;
	font-size: 120%;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

img.menuimg {     /* Menu item image style */
    float: left;
    border-style: none;
    width: 16px;
    height: 16px;
    margin-left: -20px;
}

a#menuimg {       /* Menu item style for itens with image only */
    height: 15pt;
    padding: 2px 0 0 0;
    width: 18pt;
}

a.menuitem {      /* Menu item style - normal state */
    border-bottom: 1px solid #CCC;
    display: block;
    float: none;
    padding: 0.25em 0 0.25em 24px;
	margin: 0;
	color: #444;
    font-weight: bold;
    text-decoration : none;
    text-align: left;
}

a.menuitem:active,
a.menuitem:focus,
a.menuitem:hover {	/* Menu item style - active, focus and hover states */
	background-color: #EEE;
    text-decoration : none;
    outline-style: none;
}


/**
  Member List styles
*/
table.memberlist {    
/*    font-size: 9pt; */
}

table.memberlist th {
    background: #eee;
	padding: 0.25em 0 0.25em 0;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
	margin: 0;
}

table.memberlist td { 
    border-bottom: 1px solid gray;
	margin: 0;
}

table.memberlist img.thumb {
	padding: 0;
	margin: 0;
	height: 64px;
	width: 64px;
}

div.memberlist {
	padding: 0 0.25em 0 0.25em;
    border-bottom: 2px solid gray;
    border-top: 2px solid gray;
	margin: 0;
}

fieldset.memberlistview {
	margin: 0.5em 0 0.5em 0;
	border: 1px solid gray ;
	page-break-inside: avoid;
}

/**
  Filter List styles
*/
table.filterlist {
	margin: 1em 0em 1em 0em;
}

/*table.filterlist td {
	padding: 0.25em 0 0.25em 0;
	margin: 0;
}
*/


/**
  List Navegator panel styles
*/
div.navlist {
	text-align: right;
	margin: 0.25em;
}



/****************************/





/******************************************************************************
  Estilos de efeito geral
*/
*#inner_edge {    /* formato específico para bordas internas */
    border-left: 1px solid #888;
    border-top: 1px solid  #888;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

*#outer_edge {    /* formato específico para bordas externas */
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
}

*#msg_success {   /* formato específico para mensagens OK/bem sucedido */
}

*#msg_error {     /* formato específico para mensagens de erro */
    color: red;
}

*#msg_warning {   /* formato específico para mensagens de aviso */
    color: green;
}

*#msg_info {      /* formato específico para mensagens informativas */
}

/**
  Estilos associados ao cabeçalho padrão das páginas
*/
table.header {    /* formato base das tabelas que compõem o cabeçalho */
    background: #EEE;
    color: #000;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 8pt;
    height: 62pt;
}

td.hlogo {        /* formato base para células que exibem o logo no cabeçalho */
    border: none;
    height: 54pt;
    width: 54pt;
}

td img.hlogo {     /* formato base para imagens de logo do cabeçalho */
    height: 52pt;
    width: 52pt;
}

td.htitle {       /* formato base para o título */
    color: navy;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 18pt;
    text-align: center;
}

/**
  Estilos associados à barra de menus
*/
div.menu {        /* formato base da área que contêm as barras de menus */
    background: #EEE;
    color: #000;
    display: block;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    height: 20pt;
}

div.menubar {     /* formato base das barras de menus */
    display: block;
    float: left;
    text-align: left;
    vertical-align: middle;
}

span.menusep,
div.menusep {      /* formato base dos separadores de menus */
    border-left: 1px solid #888;
    border-right: 1px solid #FFF;
    display: block;
    float: left;
    height: 12pt;
    margin: 1px;
    padding: 4px 0 3px 0;
    width: 0;
}

img._menuimg {     /* formato base das imagens dos itens dos menus */
    border-style: none;
    width: 16px;
    height: 16px;
    
}
a#_menuimg {       /* formato específico para itens de menu apenas com imagem */
    height: 15pt;
    padding: 2px 0 0 0;
    width: 18pt;
}

a._menuitem {      /* formato base para os itens dos menus */
    border: 1px solid #EEE;
    color: #000;
    display: block;
    float: left;
    height: 12pt;
    margin: 1px;
    padding: 3px 0 3px 0;
    text-decoration : none;
    text-align: center;
    width: 66pt;
}

a._menuitem:active,
a._menuitem:focus {/* Efeito gerado quanto um item de menu recebe o foco */
    border-left: 1px solid #888 !important;
    border-top: 1px solid  #888 !important;
    border-right: 1px solid #FFF !important;
    border-bottom: 1px solid #FFF !important;
    font-weight: bold;
    outline-style: none;
}

a._menuitem:hover {/* Efeito gerado quanto o mouse passa sobre um item de menu */
    background: #CCE;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    font-weight: bold;
}




/**
  Estilos associados à página de rodapé das aplicações
*/
table.footer {    /* formato base das tabelas que compõem o rodapé */
    background: #EEE;
    color: #000;
/*    font-family: Tahoma,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
*/    height: auto;
    width: 100%;
    empty-cells: show;
}

td.fpanel {       /* formato base das células que compõem o rodapé */
    border-left: 1px solid #888;
    border-top: 1px solid  #888;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin: 2px;
    text-align: left;
    vertical-align: top;
    padding: 2px 0 0 2px;
    height: 21px;
}

td#fmessage {     /* formato específico para a célula de mensagens */
}

td#foperator {    /* formato específico para a célula com o nome do operador */
    width: 216pt;
    white-space: nowrap;
}

td#fclock {       /* formato específico para a célula do relógio */
    text-align: center;
    vertical-align: top;
    width: 56pt;
}

td form.fpanel {  /* formato base das células que compõem o rodapé */
    margin: 0;
    padding: 0;
    border: none;
}

td input.fmessage{/* formato base para o campo que exibe as mensagens */
    background: #EEE;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    text-align: left;
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
}

td input.fclock {/* formato base para o campo que exibe o relógido */
    background: #EEE;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    text-align: center;
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
}

td input.fmessage:focus,
td input.fclock:focus {/* Efeito gerado quanto os campos recebem o foco */
    background: #EEE;
    border: none;
}


/**
  Estilos associados ao corpo das páginas
*/
/*body,*/
body.MainPage {    /* Formato padrão do corpo das páginas */
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    background: #fff;
    color: #000;
    margin: 0;
}

body.PageBody,
body.PageDoc  {    /* Formato padrão do corpo das páginas */
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    background: #fff;
    color: #000;
    margin: 0;
}

body.PageFooter {    /* Formato padrão do rodapé das páginas */
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    background: #EEE;
    color: #000;
    margin: 0;
    vertical-align: top;
}

body.PageHeader {    /* Formato padrão do cabelhaço das páginas */
/*    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;*/
/*    font-size: 9pt;*/
    background: #fff;
    color: #000;
    margin: 0;
}

body.PageLink {    /* Formato padrão do corpo das páginas */
    background: #eee;
    color: #000;
    font-family: Tahona,Geneva,Arial,Helvetica,sans-serif;
    font-size: 9pt;
    display: block;
    padding: 4px;
/*    vertical-align: bottom;
    width: 187px;
    height: 100%;*/
}


/**
  Estilos associados aos cabeçalho das páginas dos documentos
*/
hr.pgsep {        /* formato base dos separadores de página */
  height: 2pt;
  margin: 0 0 4px 0;
}


/**
  Estilos associados aos formulários
*/
a.speedbtn,
a.speedbtn:visited {    /* formato base para os botões de consulta rápida */
    border: 1px solid #FFF;
    color: #000;
    display: block;
    float: left;
/*    height: 18px;*/
    margin: 1px;
    padding: 0px;
    text-decoration : none;
    text-align: center;
/*    width: 18px;*/
}

a.speedbtn:active,
a.speedbtn:focus {/* Efeito gerado quanto um botão de consulta rápida  recebe o foco */
/*    border-left: 1px solid #888 !important;
    border-top: 1px solid  #888 !important;
    border-right: 1px solid #FFF !important;
    border-bottom: 1px solid #FFF !important;
    outline-style: none;*/
}

a.speedbtn:hover {/* Efeito gerado quanto o mouse passa sobre um botão de consulta rápida */
    border-left: 1px solid #ddd;
    border-top: 1px solid  #ddd;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;

/*    background: #eee;*/
}

img.speedbtn {     /* formato base das imagens dos botões de consulta rápida */
    border: 0px;
    width: 16px;
    height: 16px;
}

*.infobox {       /* formato base para caixas de exibição de informação */
    border: 2px solid navy;
    color: black;
    display: block;
    font-size: 12pt;
    margin: 4pt;
    padding: 8pt;
}

*.warningbox {    /* formato base para caixas de exibição de avisos */
    border: 2px solid olive;
    color: maroon;
    display: block;
    font-size: 12pt;
    margin: 4pt;
    padding: 8pt;
}



/**
  Estilos associados às consultas
*/
table.listform {    /* formato base para as tabelas das consultas */
/*    font-size: 9pt; */
}

table.listform th { /* formato base para o cabeçalho das tabelas das consultas */
    background: #eee;
	padding: 0.25em 0.5em 0.25em 0.5em;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
	margin: 0;
}

table.listform td { /* formato base para o cabeçalho das tabelas das consultas */
    border-bottom: 1px solid gray;
	margin: 0;
}

span.navbtn {         /* formato base para botões de navegação desabilitados */
    background: #eee;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    color: gray;
    display: block;
    float: left;
    height: 12pt;
    margin: 0px;
    padding: 3px 0 3px 0;
    text-decoration : none;
    text-align: center;
    font-weight: bold;
    width: 22pt;
}

a.navbtn,
a.navbtn:visited {    /* formato base para os botões de navegação */
    background: #eee;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    color: #000;
    display: block;
    float: left;
    height: 12pt;
    margin: 0px;
    padding: 3px 0 3px 0;
    text-decoration : none;
    text-align: center;
    font-weight: bold;
    width: 22pt;
}

a.navbtn:active,
a.navbtn:focus {/* Efeito gerado quanto um botão de navegação recebe o foco */
    border-left: 1px solid #888 !important;
    border-top: 1px solid  #888 !important;
    border-right: 1px solid #FFF !important;
    border-bottom: 1px solid #FFF !important;
    color: #000;
    font-weight: bold;
    outline-style: none;
}

a.navbtn:hover {/* Efeito gerado quanto o mouse passa sobre um botão de navegação */
    background: #CCE;
    border-left: 1px solid #FFF;
    border-top: 1px solid  #FFF;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    font-weight: bold;
}

div.navctrls {        /* formato base para o painel dos botões de navegação */
  display: block;
  float: right;
  padding: 4px 0px 0px 0px;
}



/**
  Estilos associados às páginas de formulários com guias 
*/
div.tabview {     /* formato base para a exibição as barra de guias + página */
/*    border-bottom: 1px solid gray;*/
    display: table;
    width: 100%;
}

div.tabpage {     /* formato base para exibição da página associada à uma guia */
    border: 1px solid gray;
    display: table-cell;
    float: none;
    width: 100%;
}

div.tabbar {      /* formato base para exibição da barra de guias */
/*        border-bottom: 1px solid gray;*/
    display: table-row;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

a.tabselected {   /* formato base para exibição a guia da página ativa */
    background: #FFF;
    border-left: 1px solid gray;
    border-top: 1px solid  gray;
    border-right: 1px solid gray;
    color: #000;
  	cursor: pointer;
    display: table-cell;
    float: left;
    font-weight: bold;
    margin: 0 2px 0 0;
    padding: 4px 8px 6px 8px;
    text-align: center;
    text-decoration: none;
    bottom: -1px;
    position: relative;
    overflow: hidden;
}

a.tabunselected { /* formato base para exibição as guias das páginas inativas */
    background: #EEE;
    border-left: 1px solid gray;
    border-top: 1px solid  gray;
    border-right: 1px solid gray;
    color: #000;
  	cursor: pointer;
    display: table-cell;
    float: left;
    margin: 4px 2px 0 0;
    padding: 4px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
}

a.tabselected:hover,
a.tabunselected:hover { /* efeito quanto o mouse passa sobre uma guia */
    background: #CCE;
}