body {
  font-family: Liberation Sans, Arial, helvetica, sans-serif;
  font-size: 14px;
  background: #6e6e6e;
  margin: 0px;
  padding: 0px;
}

#wraper1 {
  background: #FFF;
  text-align: center;
}

#wraper2 {
  text-align: left;
  padding-top: 10px;
  width: 900px;
  margin: auto;
  position: relative;
}

#logo {
  margin: 0px 0px 0px 10px;
  padding: 0px;
}
#logo a {
  display: block;
  width: 155px;
  height: 202px;
  background: url(logo-colivre.png);
}
#logo span {
  display: none;
}

.image-loading-box {
  position: absolute;
  top: 200px;
  right: 350px;
}

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

#menu {
  position: absolute;
  top: 20px;
  right: 50px;
  margin: 0px;
  padding: 0px;
}

#menu li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

#menu a {
  display: block;
  float: left;
  background: #FFF;
  font-size: 14px;
  line-height: 16px;
  padding-bottom: 8px;
  margin-left: 20px;
  text-decoration: none;
  font-weight: bold;
  color: #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
#menu a span {
  display: block;
  padding: 5px 10px;
}

#menu a:hover {
  background: #FFF url(menu-seta-off.png) 50% 0% no-repeat;
}
#menu a:hover strong {
  display: block;
  background: url(menu-bg-off.png);
}
#menu a:hover span {
  display: block;
  background: url(menu-bg-dir-off.png) 100% 0% no-repeat;
  padding: 5px 10px;
}

#menu a.ativo {
  background: #FFF url(menu-seta-on.png) 50% 0% no-repeat;
  color: #FFF;
}
#menu a.ativo strong {
  display: block;
  background: url(menu-bg-on.png);
}
#menu a.ativo span {
  display: block;
  background: url(menu-bg-dir-on.png) 100% 0% no-repeat;
  padding: 5px 10px;
}

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

#buraco {
  position: absolute;
  top: 55px;
  right: 10px;
  width: 680px;
  height: 321px;
  background: #525252;
  overflow: hidden;
}

#buraco-bg {
  position: absolute;
  top: 0px;
  left: 40px;
  width: 600px;
  height: 321px;
  background: url(entrada-buraco-meio.png);
}
.msie6 #buraco-bg {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true, sizingMethod=scale, src='entrada-buraco-meio.png');
}

#buraco-borda-esq,
#buraco-borda-dir {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 321px;
  background: url(entrada-buraco-esq.png);
}
#buraco-borda-dir {
  left: auto;
  right: 0px;
  background: url(entrada-buraco-dir.png);
}
.msie6 #buraco-borda-esq {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true, sizingMethod=scale, src='entrada-buraco-esq.png');
}
.msie6 #buraco-borda-dir {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true, sizingMethod=scale, src='entrada-buraco-dir.png');
}

#caixas {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 2px;
  left: 0px;
}

.caixa {
  position: absolute;
  top: 0px;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.msie6 .caixa {
  background: none;
}

#buraco.falha .caixa {
  width: 700px;
  background: #C00;
  height: 277px;
  top: 13px;
}

.caixa-bg {
  width: 694px;
  height: 314px;
  background: url(entrada-caixa-movel-vazia.png);
}
.msie6 .caixa-bg {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true, sizingMethod=crop, src='entrada-caixa-movel-vazia.png');
}

.caixa-bg img {
  position: absolute;
  top: 26px;
  left: 26px;
}

.caixa ul {
  margin: 0px;
  padding: 29px 35px 0px 35px;
  position: absolute;
  top: 0px;
}
#buraco.falha .caixa ul {
  padding: 10px 30px 0px 30px;
}

.caixa li {
  margin: 0px;
  padding: 3px 0px;
  list-style: none;
}
.msie .caixa li {
  padding: 3px 0px 0px 0px;
}

.caixa.tot-itens-2 ul {
  padding-top: 60px;
}
.caixa.tot-itens-2 li {
  padding: 15px 0px;
}

.caixa a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 10px 5px 10px 0px;
  width: 622px; max-width: 617px;
  height: 58px; max-height: 38px;
  cursor: pointer; /* MSIE Bug WorkArround */
}
.branco .caixa a {
  color: #B00;
}

.caixa a:hover {
  background: url(hover-branco.png) 50% 0%;
  color: #000;
  /* -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; */
}

.caixa strong {
  display: block;
  font-size: 31px;
  float: left;
  width: 190px;
  text-align: right;
}
.caixa strong.palavra-grande {
  letter-spacing: -1px;
  font-size: 29px;
}
.caixa a:hover strong {
  color: #B00;
}

.caixa span {
  display: none;
  font-size: 15px;
  line-height: 19px;
  margin-left: 210px;
}
.caixa a:hover span {
  display: block;
}

#caixa1 { left: 0px }
#caixa2 { left: 700px }
#caixa3 { left: 1400px }
#caixa4 { left: 2100px }

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

#interacao {
  padding-left: 20px;
}

#blog, #contato {
  display: block;
  width: 133px;
  height: 53px;
  background: url(colivre-blog.png);
}
#contato {
  margin-top: 8px;
  background: url(colivre-fale-conosco.png);
}
.lang-en #contato {
  background: url(colivre-talk-with-us.png);
}
#blog span, #contato span {
  display: none;
}

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

#busca {
  margin: 0px;
  padding: 24px 0px 8px 0px;
}

#busca input {
  text-align: center;
  border: 1px solid #DDD;
  color: #999;
  background: #FFF;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 131px;
}
.msie #busca input {
  position: relative;
  top: 10px;
}
#busca.clean input {
  color: #BBB;
}
#busca.focused input {
  border: 1px solid #999;
  color: #444;
}

#busca div {
  visibility: hidden;
  font-size: 11px;
}
#busca.focused div {
  visibility: visible;
  color: #777;
}

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

#news {
  padding: 40px 10px 10px 10px;
}

#news a {
  display: block;
  width: 270px;
  max-width: 260px;
  padding: 5px 0px 0px 10px;
  float: left;
  font-size: 12px;
  margin-left: 35px;
  text-decoration: none;
  color: #000;
}
.msie #news a {
  padding: 5px 0px 5px 10px;
}

#news a.first {
  margin-left: 0px;
}

#news a:hover {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background: #DDD;
}

#news strong {
  font-size: 14px;
  padding-bottom: 5px;
  display: block;
  color: #B00;
}

#news img {
  border: none;
  float: left;
  margin: 0px 10px 10px 0px;
}

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

#rodape {
  background: #6E6E6E url(rodape-bg.png) repeat-x;
  color: #AAA;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 1px;
  text-align: center;
}
#rodape-inner {
  padding-top: 15px;
  width: 880px;
  margin: auto;
  text-align: right;
}

.loaded #rodape-inner {
  /* A classe "loaded" é adicionada ao body no evento onload,
   * assim podemos deixar para adicionar certos elementos (açúcar)
   * apenas após todo o layout e conteúdo estarem carregados.
   */
  background: url(colivre-gear-ani2.gif) 50% -20px no-repeat;
}

#rodape a {
  color: #AAA;
  text-decoration: none;
}
#rodape a:hover {
  color: #EEE;
}

#rodape p {
  margin: 0px;
  padding: 10px 0px;
}

#sobre {
  float: left;
  text-align: left;
  padding-left: 10px;
}

/*** Wiki Ctrl **************************************************************/

#wiki-bts {
  position: fixed;
  left: 2%;
  top: 150px;
  text-align: left;
}

#wiki-bts a {
  display: block;
  text-decoration: none;
  color: #DDD;
  padding: 1px 5px 1px 8px;
  /* border: 1px solid transparent; */
  -moz-border-radius: 5px;
}

#wiki-bts a:hover {
  color: #FFF;
  background: #C00;
  /* border: 1px solid #A00; */
}

/*** Posts ******************************************************************/

hr {
  border: none;
  border-top: 3px dotted #CCC;
}

.posts {
  width: 47%;
  color: #666;
  padding: 10px 0px 10px 20px;
}

.headlinesRss {
  margin: 0px;
}

.posts ul {
  margin: 0px;
  padding : 0px;
}
.posts li {
  line-height: 16px;
  height: 28px;
  padding: 6px 0px;
  margin: 0px;
  list-style: none;
  overflow: hidden;
}

.posts h3 {
  margin: 4px 0px;
}
.posts h3 a {
  color: #B00;
}

.posts a {
  color: #666;
  text-decoration: none;
}
.posts li:hover {
  color: #333;
}
.posts li:hover a {
  color: #333;
  text-decoration: underline;
}

#posts-twitter {
  float: left;
}

#posts-blog {
  float: right;
}
#posts-blog li:before {
  content: "» ";
  font-weight: bold;
  color: #B00;
}