/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS FRAMEWORK BY RODRIGO RANGEL

http://www.rodrigorangel.com.br

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

* { border:0; margin:0; padding:0; }

.cb { clear:both; }

.linha { clear:both; border-bottom:5px solid #e8e8e8; padding:0 1%; margin:5px 0 10px; width:98%; }

html { background:#FFF; font-size:62.5%; height:100%; width:100%; }

body { background:url(../img/layout/bg-teste.jpg) repeat-x 0 140px; height:100%; width:100%; }

/*FONT FAMILY */

body, textarea { font:1.25em/100% arial, "myriad pro", "trebuchet ms", sans-serif; }

/*BACKGROUNDS*/

body { }

.one-col,
.two-cols .colleft, .two-cols .colright,
.three-cols .colleft, .three-cols .colcenter, .three-cols .colright,
.four-cols .colleft, .four-cols .colleftcenter, .four-cols .colrightcenter, .four-cols .colright { background:none; }

.round, table th { background:#7B8E4C; }

/*COLOR*/

body, h1, h2, h3, h4, h5, h6, ol, ul, ul.light li a:hover { color:#003200; }

h1 a:link, h1 a:visited,
h2 a:link, h2 a:visited,
h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited,
h5 a:link, h5 a:visited,
h6 a:link, h6 a:visited { color:#003800; padding:0; background:none; }

p, ol, ul  { color:#222 }

a, a:link, a:visited { color:#555; }

a:hover, a:active, a:focus { color:#003200; }

table th { color:#FFF; }

/*BORDER*/

p abbr, p acronym, fieldset, legend { border-color:#222 !important; }

/* XXXXXXXXXXXXXXXXXXXX

CLASSES

XXXXXXXXXXXXXXXXXXXX */

.img-to-left { background:#FFF url(img/loading.gif) no-repeat center; margin:10px 10px 10px 0; float:left; }

.img-to-right { background:#FFF url(img/loading.gif) no-repeat center; margin:10px 0 10px 10px; float:right; }

.img { background:#FFF url(img/loading.gif) no-repeat center; height:100px; margin:0 auto; text-align:center; width:100%; }

.round { float:left; margin:1%; padding:1%; width:96%; position:relative; }

.round * { position:relative; z-index:2; }

.a, .b, .c, .d { height:25px; position:absolute; width:25px; }

.a { background:url(../img/layout/bg-a.jpg); top:0; left:0; }
.b { background:url(../img/layout/bg-b.jpg); top:0; right:0; }
.c { background:url(../img/layout/bg-c.jpg); bottom:0; left:0; }
.d { background:url(../img/layout/bg-d.jpg); bottom:0; right:0; }

/* XXXXXXXXXXXXXXXXXXXX

LINKS

XXXXXXXXXXXXXXXXXXXX */

a { font-weight:bold; text-decoration:none; }

a:link, a:visited { }

a:hover, a:active, a:focus { }

/* XXXXXXXXXXXXXXXXXXXX

DIAGRAMAÇÃO

XXXXXXXXXXXXXXXXXXXX */

/* CABEÇALHOS */

h1, h2, h3, h4, h5, h6 { font-family:; line-height:120%; padding:20px 0 10px 0; }

h3, h4, h5, h6 { font-family:arial; }

h1 { font-size:2.50em; }

h2 { font-size:2.00em; }

h3 { font-size:1.50em; }

h4 { font-size:1.20em; }

h5 { font-size:1.00em; }

h6 { font-size:1.00em; }

/* PARAGRÁFOS */

p { font-size:1.0em; line-height:120%; padding:0 0 10px 0; text-align:justify; }

p abbr, p acronym { border-bottom:1px dashed #BBB; cursor:help; }

small { font-size:80%; line-height:100%; }

big { font-size:120%; line-height:120%; }

/* LISTAS */

ol, ul { padding:0 0 20px 0; }

ol { list-style:decimal inside; }

ul { list-style:square inside; }

ol li, ul li { line-height:120%; padding:0.5%; }

/* TABELA */

table { text-align:center; width:100%; }

table th { font-size:1.2em; padding:5px; } 

table td { border-bottom:1px solid #888; padding:5px; }

/* XXXXXXXXXXXXXXXXXXXX

ESTRUTURA

XXXXXXXXXXXXXXXXXXXX */

/* UMA COLUNA */

.one-col { float:left; margin:1.25%; overflow:hidden; padding:1.25%; width:95%; }

/* DUAS COLUNAS */

.two-cols { float:left; overflow:hidden; width:100%; }

.two-cols .colleft,
.two-cols .colright { float:left; margin:0.25%; padding:0.25%; width:48%; }

/* TRÊS COLUNAS */

.three-cols { float:left; overflow:hidden; width:100%; }

.three-cols .colleft,
.three-cols .colcenter,
.three-cols .colright { float:left; display:inline; margin:1%; padding:1%; width:29%; }

.three-cols .colcenter { width:30%; }

/* QUATRO COLUNAS */

.four-cols { float:left; overflow:hidden; width:100%; }

.four-cols .colleft,
.four-cols .colleftcenter,
.four-cols .colrightcenter,
.four-cols .colright { float:left; display:inline; margin:1%; padding:1%; width:21%; }

/* LISTA ESTILO LIGHT */

ul.light { width:100%;  }

ul.light li { background:#7C8E4B; list-style:none inside; margin:2px 0; padding:0; }

ul.light li a,
ul.light a:visited { color:#FFF; display:block; padding:10px; }

ul.light li a:hover { background:#003200; color:#FFF; }

/* AVISOS */

.fail { background:#fbb; color:#800; border:1px solid #800; font-weight:bold; margin:1% 0; padding:1%; width:98%;}

.warning { background:#ffb; color:#880; border:1px solid #880; font-weight:bold; margin:1% 0; padding:1%; width:98%; }

.sucess { background:#bfb; color:#080; border:1px solid #080; font-weight:bold; margin:1% 0; padding:1%; width:98%; }

/* XXXXXXXXXXXXXXXXXXXX

FORMULÁRIOS

XXXXXXXXXXXXXXXXXXXX */

fieldset { border:1px solid #bbb; margin:20px 1.25%; padding:20px 1.25%; width:95%; }

legend { border:1px solid #555; font-size:1.0em; margin-left:5px; padding:5px; }

label { color:#555; cursor:pointer; font-size:0.8em; }

input { background:#fff url(../img/layout/bg-input.jpg) repeat-x top; border:1px solid #bbb; color:#003200; height:18px; margin:5px 0; padding:5px; width:98%; }
input:hover, input:active, input:focus { border:1px solid #bbb; }

.checkboxbox label { position:relative; top:-5px;}

input[type="checkbox"] { margin:0 0.5%; width:15px; }

input[type="file"] {}

.radiobox label { position:relative; top:-5px;}

input[type="radio"] { margin:0 0.5%; width:15px; }

textarea { background:url(../img/layout/bg-textarea.jpg) repeat-x top; font-size:1.0em; border:1px solid #bbb; color:#003200; height:125px; line-height:125%; margin:5px 0; padding:5px; width:88%; }

textarea:hover, textarea:active, textarea:focus { border:1px solid #bbb; }

.submit { background:#7B8E4C url(../img/layout/bg-submit.jpg) repeat-x bottom; cursor:pointer;
color:#fff; font-size:1.2em; font-weight:bold; height:50px; margin:5px 0; width:400px; }

.submit:hover, .submit:active, .submit:focus { background-position:top; }

select { background:#fff url(../img/layout/bg-input.jpg) repeat-x top; border:1px solid #ddd; color:#003200; font-size:1.0em; height:30px; margin:2px 0; padding:5px 0; width:95%;}

select:hover, select:focus { border:1px solid #bbb; }

optgroup { padding:5px; width:98%; }

option {  padding:5px; width:98%; }