/* Elements */

body {
/*background: #000000 url(../images/img1.gif) repeat-x left top; */
  background: #FFFFFF;
  text-align: justify;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  color: #FFFFFF;
  line-height: 20px;
}

.wait_window {
  position: absolute;
  z-index: 5;
  left: 20%;
  right: 20%;
  width: 60%;
  top: 40%;
  /*background-color: #FF9999;*/
  background-color: #FF8000;
  color: #000000;
  border: 3px solid #000000;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  visibility: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}

.form_box {
  width: 360px;
  background: #FF8000;
  padding-left: 20px;
  /* Tentei colocar "20px" aqui, mas deu problema no IE. */
  padding-right: 5px;
  padding-bottom: 20px;
  border: 0px;
  color: #000000;
}

h2, h3 {
  margin-top: 0px;
}

a {
  color: #000099;
}

a:hover {
  text-decoration: none;
}

img {
  border: 0px;
}

.img1 {
  margin-top: 5px;
  margin-bottom: 35px;
}

.img_col_three {
  margin-left: 5px;
}

.img_sample_text {
  position: absolute;
  top: 770px;
  z-index: 500;
  visibility: hidden;
  border: 5px solid #FF8000;
}

.text_item {
  padding-left: 15px;
  background: #000000 url(images/img2_negative.gif) no-repeat top left;
}


/** Forms */

form {
  background-color: #000000;
  color: #FFFFFF;
  margin: 0px;
  padding: 15px;
  padding-left: 0px;
}

.input1 {
  width: 180px;
  background-color: #FFFFFF;
  border: 1px solid #000000;
  color: #000000;
}

.input2 {
  margin-left: 1px;
  height: 50px;
}

.select1 {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  width: 90px;
}

.select2 {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  width: 50px;
}

.select3 {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  width: 150px;
}

.submit_box {
  margin-top: 10px;
  background-color: #000000;
  border-left: 220px solid #000000;
  height: 30px;
}

.submit_preview {
  margin-top: 35px;
}

.submit_calc {
  margin-top: 35px;
}

.line1 {
  padding-left: 15px;
  padding-top: 5px;
}

.line2 {
  padding-left: 15px;
  padding-top: 15px;
  height: 25px;
}

.line3 {
  padding-left: 15px;
  margin-top: 10px;
  padding-top: 5px;
  margin-bottom: 20px;
}

.line4 {
  padding-left: 15px;
  margin-top: 15px;
}

.line_image {
  padding-left: 5px;
}

.effect_list_container {
  width: 350px;
}

.effect_list {
  width: 342px;
  margin: 0px;
  padding-top: 0px;
  padding-left: 10px;
  padding-bottom: 0px;
  padding-right: 0px;
  border: 1px solid #000000;
  background-color: #000000;
}

.line_effect_list {
  background-color: #000000;
  padding-bottom: 3px;
  padding-top: 3px;
  padding-left: 3px;
  padding-right:3px;
  margin-bottom: 5px;
}

.line_effect_selected {
  padding-bottom: 0px;
  padding-top: 3px;
  padding-left: 3px;
  padding-right: 1px;
  border: 3px solid #FF8000;
  margin-bottom: 5px;
}

.orange_button {
  float: left;
  width: 110px;
  margin: 5px;
  padding: 1px;
  /*font-weight: bold;*/
  text-align: center;
  font-size: 11px;
  background-color: #FF8000;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  cursor: pointer;
}

.span1 {
  width: 100px;
  float: left;
  text-align: right;
  margin-right: 10px;
  display: block;
}

.span2 {
  width: 300px;
  text-align: left;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
  display: block;
}

/* Header */

#header {
  background: url(images/p2p_banner.jpg) no-repeat;
  width: 800px;
  height: 150px;
  margin: 0px auto;
  font-family: Tahoma, Arial, sans-serif;
}

#header h1 {
  float: left;
  margin: 0px;
  height: 60px;
  padding-top: 10px;
  font-size: 40px;
  letter-spacing: -2px;
}

#header h2 {
  margin: 0px;
  padding-top: 28px;
  font-size: 12px;
  letter-spacing: -1px;
}

#header a {
  text-decoration: none;
  color: #0000FF;
}
/* Post */

.welcome {
  padding: 0px 2em 1em 3em;
  font-size: 1.2em;
  color: #000000;
  background: #FF8000 url(images/splash.gif) no-repeat top left;
}

.welcome h2 {
  font-size: 1.5em;
  color: #AA0000;
}

.post {
  padding: 20px;
/*border-top: 1px dashed #823D47;*/
}

.post h3 {
  margin-bottom: .1em;
  font-size: 1.4em;
  color: #000000;
}

.post a {
  text-decoration: none;
  color: #000000;
}

.file * {
  color: #000000;
}
/* Content */

#content {
  width: 780px;
  margin: 0px auto;
  padding: 20px 0px 0px 0px;
}

#colOne {
  float: right;
  width: 400px;
  background: #FF8000 url(../images/top_col_one.gif) no-repeat top;
  padding-top: 20px;
  border: 0px;
  color: #000000;
}

#colOne .search {
  background-color: #000000;
  margin: 0px;
  padding-bottom: 10px;
  height: 50px;
}

#colTwo {
  float: left;
  width: 180px;
}

#colTwo a {
  color: #000000;
  text-decoration: none;
}

#colTwo a:hover {
  color: #FF8000;
  text-decoration: none;
}

#colTwo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#colTwo li {
  margin-bottom: 1em;
  color: #000000;
}

#colTwo li li {
  margin-bottom: 0;
  padding-left: 2em;
}

#colTwo span {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

#colTwo span:hover {
  color: #FF8000;
  text-decoration: none;
}

#colTwo span.current_effect_group {
  font-weight: bold;
  color: #FF8000;
}

#colTwo .sub_item_list {
  margin-bottom: 0;
  padding-left: 3em;
}

#colTwo h1, #colTwo h2 {
  background: url(images/img2.gif) no-repeat;
  padding: 0px 0 5px 20px;
  text-transform: uppercase;
  font: 12px Tahoma, Arial, sans-serif;
  font-weight: bold;
  border-bottom: 1px dashed #666666;
  color: #880000;
}

#colThree {
  float: right;
  width: 165px;
  margin-left: 15px;
}

#colThree ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

#colThree li {
  margin-bottom: 1em;
  color: #FFFFFF;
}

#colThree li li {
  margin-bottom: 0;
  padding-left: 2em;
}

#colThree a {
  color: #000000;
  text-decoration: none;
}

#colThree a:hover {
  color: #FF8000;
  text-decoration: none;
}

#colThree h1, #colThree h2 {
  padding: 0px 0 5px 20px;
  font: 12px Tahoma, Arial, sans-serif;
  font-weight: bold;
  border-bottom: 1px dashed #666666;
  color: #880000;
}


/* Footer */

#footer {
  width: 800px;
  margin: auto auto;
  color: #787878;
}

#footer p {
  margin: 0px;
  text-align: center;
  font-size: 10px;
}

#footer a {
  color: #FF4000;
}

#footer form {
  background-color: #FFFFFF;
}


.traffic_box {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px dashed #000000;
}

#tablistdiv {
  width: 800px;
  height: 20px;
  margin: 0px auto;
  padding-top: 10px;
  padding-bottom: 1px;
}

#tablist{
  padding: 3px 0;
  margin: 0;
  float: left;
}

#tablist li{
  list-style: none;
  display: inline;
  margin: 0;
}

#tablist li a{
  text-decoration: none;
  padding: 4px 20px;
  margin-right: 2px;
  background: #FF8000 url(images/corner.gif) no-repeat top right;
  color: #000000;
}

#tablist li a:hover{
  background: #FF8000 url(images/corner.gif) no-repeat top right;
  color: #FFFFFF;
}

#tablist li a.current{
  background: #FF8000 url(images/corner.gif) no-repeat top right;
  color: #000000;
  font-weight: bold;
  padding: 6px 20px;
}

#tablist .key {
  text-decoration: underline;
}

#menu ul {
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#menu li {
  background: none;
  padding: 0px;
}

#menu li span {
  display: block;
  position: relative;
  width: 25px;
  height: 22px;
  margin-bottom: 1px;
  text-decoration: none;
  text-align: center;
  padding-left: 7px;
  padding-top: 5px;
  color: #000000;
  background: #FF8000 url(images/corner2.gif) no-repeat top right;
  cursor: pointer;
}

#menu li span:hover {
  color: #FFFFFF;
  background: #FF8000 url(images/corner2.gif) no-repeat top right;
  cursor: pointer;
}

#menu li span.current_letter {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background: #FF8000 url(images/corner2.gif) no-repeat top right;
}


/*
*************** after **************
Definition
The :after pseudo-element inserts some content after the content of an element.

Examples
The style below will play a sound after each occurrence of an <h1> element:
h1:after
{
content: url(beep.wav)
}
*/

/*
*************** content **************
The content property is used with the :before and :after pseudo-elements to generate content to attach before or after a CSS selector.
*/

/*
*************** clear **************
Definition
Image and text elements that appear in another element are called floating elements.
The clear property sets the sides of an element where other floating elements are not allowed.
Possible Values
Value 	Description
left 	No floating elements allowed on the left side
right 	No floating elements allowed on the right side
both 	No floating elements allowed on either the left or the right side
none 	Default. Allows floating elements on both sides
*/


/* 
VAI EVITAR QUE O DIV DE CLASSE "submit_box" SEJA CONSIDERADO VAZIO NO FLUXO DA PÁGINA POR SÓ
TER DENTRO DE SI ELEMENTO COM A PROPRIEDADE "float" SETADA. ESTA REGRA NÃO É OBEDECIDA
PELO IE, MAS É OBEDECIDA PELO FIREFOX. PORTANTO, NO FIREFOX ESTE TRICK É NECESSÁRIO.
ALIÁS, LI NUM SITE QUE O IE NEM SUPORTA "before" e "after".
 */
.submit_box:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


/* Hides from IE-mac \*/
* html .submit_box {height: 1%;}
/* End hide from IE-mac */



.effect_title_left {
  background: url(../images/black_orange.jpg) repeat-y;  
  
  width: 335x;
  height: 28px;
  
  font-family: Arial;
  /*font-weight: bold;*/
  text-align: left;
  font-size: 24px;
  color: #FFFFFF;

  padding-top: 5px;  
  padding-left: 10px;
  
  margin-top: 30px;
  margin-bottom: 5px;
}