/*
 * developed by ricardo r. recchia
 * officina digital
 */

@import url("reset.css");
@import url("horinaja.css");

html { 
  background: black url(../images/bg.jpg) no-repeat fixed center; 
}

body {
  width: 940px; 
  background-color: #303030;
  margin: 0 auto 0 auto;
  font-family: Arial, sans-serif;
}

/* header
***************************************************************/
#header {
  width: 880px; height: 84px;
  background-color: black;
  position: relative;
  padding: 30px 30px 30px 30px;
}

#header h1 {
  width: 177px; height: 86px;
  background: url(../images/officina.png);
  text-indent: -5000px;
}

#header h1 a {
  width: 177px; height: 86px;
  display: block;
  cursor: pointer;
}

#header h2 { 
  font-size: 11px; color: #7A7A7A;
  position: absolute; top: 30px; right: 30px;
}

#nav {
  position: absolute; right: 30px; bottom: 30px;
  font-size: 17px;
}

#nav li {
  display: inline;
  margin-left: 52px;
}

#nav a { color: #FEFEFE; }
#nav a:hover { color: #EC8D1C; }

#agencia #nav .agencia a { color: #EC8D1C; }
#portfolio #nav .portfolio a { color: #EC8D1C; }
#servicos #nav .servicos a { color: #EC8D1C; }
#contato #nav .contato a { color: #EC8D1C; }

/* geral
***************************************************************/
#container {
  padding: 30px 30px 15px 30px;
  font-size: 14px; color: #8C8C8C;
}

h2 { 
  font-size: 25px; font-weight: normal; color: #FEFEFE;
  margin-bottom: 25px;
}

#content {
  width: 635px;
  text-align: justify;
  float: right;
  margin-bottom: 60px;
}

#nav-content {
  width: 245px;
  font-size: 17px;
  float: left;
}

#nav-content h3 { 
  font-weight: bold; color: #FEFEFE;
  margin-bottom: 25px;
}

#nav-content li { margin-bottom: 20px; }

#nav-content li ul { 
  font-size: 12px;
  margin: 4px 0 0 10px;
}

#nav-content li ul li { margin: 8px 0 8px 0; }

#nav-content .selected a { color: #EC8D1C; }
#nav-content .selected li a { color: #8C8C8C; }
#nav-content .selected li a:hover { color: #EC8D1C; }
#nav-content .selected ul .selected a { color: #EC8D1C; }

a { color: #8C8C8C; text-decoration: none; }
a:hover { color: #EC8D1C; }
#content a { color: #EC8D1C; }

p { margin-bottom: 20px; line-height: 16px; }

.clear { clear: both; }

.displaymsg { color: white; }

/* home
***************************************************************/
#home #container { padding-top: 0; }

#featured { 
  height: 266px; 
  background: url(../images/loading.gif) center center no-repeat;
  margin-bottom: 30px;
}

#featured li { position: relative; }

#featured img { display: none; }

#home .work { 
  width: 607px; 
  float: left; 
}

#home .work img {
  float: left;
  margin: 0 30px 30px 0;
}

#home .services {
  width: 273px;
  float: right;
}

/* agencia - equipe
***************************************************************/
div.equipe { 
  width: 154px;
  float: left;
  margin-right: 30px;
  line-height: 14px;
}

#content .clear { 
  width: 100%; 
  margin-bottom: 30px; 
}

div.equipe span { display: block; }

.name { color: #FEFEFE; }
.title, .email { font-size: 11px; }

/* agencia - trabalhe conosco
***************************************************************/
form#trabalhe label {
  width: 125px;
  display: inline-block;
  text-align: right;
  margin: 2px 5px 0 0;
  vertical-align: top;
}

form#trabalhe input, form#trabalhe textarea {
  width: 380px; height: 15px;
  border: 1px solid #8C8C8C;
  background-color: black;
  margin: 0 0 10px 0; padding: 2px;
  font: 14px Arial, sans-serif; color: white;
}

form#trabalhe #ddd { width: 22px; }
form#trabalhe #tel { width: 150px; }

form#trabalhe textarea { height: 111px; }

form#trabalhe input.submit { 
  width: auto; height: auto;
  margin: 10px 10px 0 132px;
  background: #303030;
  border: 0;
  display: inline; 
  vertical-align: bottom;
}

label.error {
  width: auto !important;
  display: block !important;
  text-align: left !important;
  margin: -5px 0 0 134px !important;
  font-style: italic;
  font-size: 11px;
}

/* agencia - fotos
***************************************************************/
#fotos { 
  width: 607px; 
  height: 361px; 
  margin-bottom: 30px; 
  background: url(../images/loading.gif) center center no-repeat; 
}

#fotos img { display: none; } 

/* portfolio
***************************************************************/
#slider { 
  width: 607px; 
  height: 361px; 
  margin-bottom: 30px; 
  background: url(../images/loading.gif) center center no-repeat; 
}

#slider img { display: none; }

#portfolio span {
  font-size: 12px;
  display: block;
  line-height: 20px;
}

#portfolio span strong { font-weight: normal; color: #FEFEFE; }

#portfolio blockquote {
  margin-top: 30px;
  font-style: italic;
  font-size: 12px;
  line-height: 16px;
}

#portfolio blockquote span { 
  color: white;
  line-height: 15px;
  margin-top: 5px;
  font-style: normal;
}

/* servicos
***************************************************************/
#servicos #content ul { list-style: square inside; }
#servicos #content li { color: #EC8D1C; margin-bottom: 4px; }
#servicos #content li span { color: #8C8C8C; }

/* contato
***************************************************************/
form#fale { float: left; }

form#fale label {
  width: 82px;
  display: inline-block;
  text-align: right;
  margin: 2px 5px 0 0;
  vertical-align: top;
}

form#fale input, form#fale textarea {
  width: 250px; height: 15px;
  border: 1px solid #8C8C8C;
  background-color: black;
  margin: 0 0 10px 0; padding: 2px;
  font: 14px Arial, sans-serif; color: white;
}

form#fale input#ddd { width: 22px; }
form#fale input#tel { width: 150px; }
form#fale textarea { height: 111px; }

form#fale label.error { margin: -5px 0 0 90px !important; }

#contato #content div { float: right; }
#contato #content strong { color: #FEFEFE; }

form#fale input.submit { 
  width: auto; height: auto;
  margin: 10px 10px 0 89px;
  background: #303030;
  border: 0;
  display: inline; 
  vertical-align: bottom;
}

#contato iframe { width: 100%; height: 432px; }

/* solicite uma proposta
***************************************************************/
form#proposta label {
  width: 226px;
  display: inline-block;
  text-align: right;
  margin: 2px 5px 0 0;
  vertical-align: top;
}

form#proposta input, form#proposta textarea {
  width: 250px; height: 15px;
  border: 1px solid #8C8C8C;
  background-color: black;
  margin: 0 0 10px 0; padding: 2px;
  font: 14px Arial, sans-serif; color: white;
}

form#proposta select {
  border: 1px solid #8C8C8C;
  background-color: black;
  margin: 0 0 10px 0; padding: 2px;
  font: 14px Arial, sans-serif; color: white;
}

form#proposta input#ddd { width: 22px; }
form#proposta input#tel { width: 150px; }
form#proposta textarea { height: 90px; }

form#proposta input.radio { width: auto; }

form#proposta label.error { margin: -5px 0 0 225px !important; }

form#proposta input.submit { 
  width: auto; height: auto;
  margin: 10px 10px 0 233px;
  background: #303030;
  border: 0;
  display: inline; 
  vertical-align: bottom;
}

/* footer
***************************************************************/
#footer {
  border-top: 1px solid #464646; border-bottom: 1px solid #464646;
  padding: 30px 0 30px 0;
}

#footer .nav, #footer .nav li { float: left; margin-right: 15px; }

#footer .nav a { font-size: 14px; font-weight: bold; color: #FEFEFE; }

#footer .nav ul { 
  font-size: 11px;
  margin-top: 30px;
}

#footer .nav ul li { 
  float: none;
  margin-bottom: 10px;
}

#footer .nav ul li a { font-size: 11px; font-weight: normal; color: #8C8C8C; }

#footer .nav ul li a:hover { color: #EC8D1C; }

#twitter {
  width: 274px;
  float: right; 
}

#twitter h3 { 
  font-size: 14px; color: #FEFEFE;
  margin-bottom: 30px;
}

#twitter_update_list { list-style: none; }
#twitter_update_list li { margin-bottom: 20px; }
#twitter_update_list span { display: block; }

#twitter_update_list span a { font-size: 14px !important; color: #EC8D1C; }

#twitter_update_list a { color: #FEFEFE; font-size: 11px !important; }

#twitter .follow {
  font-size: 11px; color: #FEFEFE; 
  margin-bottom: 20px;
}

#twitter .follow a { color: #EC8D1C; }

#disclaimer { font-size: 10px; margin: 15px 0 0 0; }