/* aula */
/* http://tableless.com.br/criando-suas-proprias-classes-css-de-botoes/ */

a:link{
	text-decoration: none;
	/*color: white;*/
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
	text-align:left;
    content: attr(data-title);
    background-color: #FFFF;
    color: #111;
    font-size: 80%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -35.6em;
    left: 100%;
    white-space: break-spaces;
    box-shadow: 1px 1px 3px #222222;
    /*box-sizing: 150%;*/
	width: 700px;
	height:600px;	
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: block-level;
}

li {
    color:blue;
    font-family: "Serif", Georgia, Serif;
    font-size:100%;
}

h1 {
    color:blue;
    font-family: "Serif", Georgia, Serif;
    font-size:200%;
}

div.rotulo {
	text-align:left;
	vertical:center;
	
	font-family: Serif;
	/*transform: rotate(-90deg);*/
	/*valign:center;*
	/*definimos a largura do box*/
	width:645px;
	/* definimos a altura do box */
	height:24px;
	/* definimos a cor de fundo do box */
	background-color:#238E8E;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	font-size: 20px;
	font-weight: bold;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 3px 3px 3px #999;	
}

div.rotulo2 {
	text-align:left;
	vertical:center;
	
	font-family: Serif;
	/*transform: rotate(-90deg);*/
	/*valign:center;*
	/*definimos a largura do box*/
	width:645px;
	/* definimos a altura do box */
	height:36px;
	/* definimos a cor de fundo do box */
	background-color:#238E8E;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	font-size: 30px;
	font-weight: bold;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 3px 3px 3px #999;	
}

div.rotulomobile {
	text-align:left;
	vertical:center;
	
	font-family: Serif;
	/*transform: rotate(-90deg);*/
	/*valign:center;*
	/*definimos a largura do box*/
	width:645px;
	/* definimos a altura do box */
	height:52px;
	/* definimos a cor de fundo do box */
	background-color:#238E8E;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	font-size: 40px;
	font-weight: bold;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 3px 3px 3px #999;	
}



div.rotulo_2 {
	text-align:left;
	/*valign:center;*/
	/*definimos a largura do box*/
	width:645px;
	/* definimos a altura do box */
	height:24px;
	/* definimos a cor de fundo do box */
	background-color:#238E8E;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	font-size: 16px;
	font-weight: bold;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 2px 2px 2px #999;	
}


div.rotulo_popup {
	align=center;
	valign=center;
	/*definimos a largura do box*/
	width:740px;
	/* definimos a altura do box */
	height:30px;
	/* definimos a cor de fundo do box */
	background-color:#4682B4;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 2px 2px 2px #999;	
}

div.rotulo_popup_variavel {
	align=center;
	valign=center;
	/*definimos a largura do box*/
	width:440px;
	/* definimos a altura do box */
	height:30px;
	/* definimos a cor de fundo do box */
	background-color:#4682B4;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 2px 2px 2px #999;	
}

div.mega-rotulo {
	text-align:left;
	text-valign:center;
	/*definimos a largura do box*/
	width:900px;
	/* definimos a altura do box */
	height:50px;
	/* definimos a cor de fundo do box */
	background-color:#b8860b;
	/* definimos a cor dos caracteres */
	color:#ffffff;
	/* definimos o quão arredondado irá ficar nosso box */
	border-radius: 3px 3px;
		
	font-size: 30px;
	
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));	
	box-shadow: 2px 2px 2px #999;	
}

.search-form submit.btn {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
}
.search-form button.btn {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
}

td {
    height: 32px; /* altura fixa */
}

.but {
	display: inline-block;
	background-color: #4682B4;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	border: 8px;
	height: 26px;
}

.but_textarea {
	display: inline-block;
	background-color: #4682B4;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	border: 8px;
}

.but-ed01 {
	display: inline-block;
	background-color: #4682B4;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	border: 8px;
	height: 32px;
}

.but-12 {
	display: inline-block;
	background-color: #4682B4;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	border: 0px;
}

.but-small-RED {
	display: inline-block;
	background-color: #8E2323;
	color: #fff;
	padding: 3px 15px;
	text-decoration: none;
	box-sizing: border-box;
	font-family: Currier;
	font-size: 10px;
	border: 0px;
	/**/
	box-shadow: 2px 2px 2px #999;
	/**/
	border-radius: 3px;
}

.but-small-12 {
	display: inline-block;
	background-color: #8E2323;
	color: #fff;
	padding: 3px 15px;
	text-decoration: none;
	box-sizing: border-box;
	font-family: Currier;
	font-size: 12px;
	border: 0px;
	/**/
	box-shadow: 2px 2px 2px #999;
	/**/
	border-radius: 3px;
}

.but-small-GREEN {
	display: inline-block;
	background-color: #238E23;
	color: #fff;
	padding: 3px 15px;
	text-decoration: none;
	box-sizing: border-box;
	font-family: Currier;
	font-size: 10px;
	border: 0px;
	/**/
	box-shadow: 2px 2px 2px #999;
	/**/
	border-radius: 3px;
}

.but-text {
	display: inline-block;
	/*background-color: #fff;*/
	background-color: #E6E8FA;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	/*box-sizing: border-box;*/
	box-sizing: content-box;
	width: 50%;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	border: 2px;
}

.but-text-II {
	display: inline-block;
	/*background-color: #fff;*/
	background-color: #E6E8FA;
	color: #444;
	padding: 5px 20px;
	text-decoration: none;
	/*box-sizing: border-box;*/
	box-sizing: content-box;
	width: 50%;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	border: 2px;
}


/* CORES */

.but-basic {
	color: #000;
	background-color: #E6E8FA;
}

.but-background {
	color: #000;
	background-color: #eee;
}

.but-background_II {
	color: #000;
	background-color: #fff;
}


.but-primary {
	color: #fff;
	#background-color: #4682B4;
}

.but-primary-blk {
	color: #000000;
	background-color: ##4682B4;
}

.but-success {
	color: #fff;
	background-color: #009835;
}
 
.but-error {
	color: #fff;
	background-color: #CC0000;
}

 .but-green {
	color: #fff;
	background-color: #00CC00;
}
 
.but-warning {
	color: #fff;
	background-color: #F28E00;
}

.but:hover {
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
	cursor: pointer;
}

/* EFEITOS */

/* sombra */
.but-shadow {
	box-shadow: 2px 2px 2px #999;
}

/* arredondar */ 
.but-rc {
	border-radius: 3px;
}

/* TAMANHOS */

.but-small {
	font-size: 60%;
}
 
.but-regular {
	font-size: 100%;
}
 
.but-large {
	font-size: 140%;
}