@charset "utf-8";
/* CSS Document */
body, quote,small,form,input,ul,li,ol,label,fieldset{margin:0px;	padding:0px; }

body{ background:url(../imagens/fundo_topo.jpg) repeat-x #000; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

a:active{outline: none;}
h2 {margin: 0;	padding: 7px 0 0 0; line-height:20px;	font-size: 16px;text-transform: uppercase;}
h4 {margin: 0;	padding: 7px 0 0 0;	font-size: 14px; color:#3CF;text-transform: uppercase;}

#wrapper{  margin:0 auto;}
#wrapper_meio{ clear:both; display:block;   margin:0 auto;background:url(../imagens/banner_2.jpg) no-repeat center ;position:relative; }
#meio{ width:960px; height:570px;  margin:0 auto; position:relative;}

#wrapper_depoimento{ height:600px; position:relative; overflow:hidden; width:100%; color:#FFF;}
#depoimento{background:url(../imagens/fundo_preto.png); height:120px; width:100%; position:absolute; bottom:0; color:#FFF; text-align:right}


#about{ background:url(../imagens/fundo_preto.png); width:450px; float:right;height:560px; color:#FFF;}
#about p{ padding:3px 15px; font-size:14px; line-height:24px;}
#about h1{ padding:3px 10px;}

.clear{clear:both;}

#portifolioTexto{  width:450px; float:right; color:#FFF;}
#portifolioTexto a{ color:#FFF;}
#portifolioTexto a:hover{ font-weight:bold;}
#portifolioTexto p{ padding:3px 15px; font-size:14px; line-height:24px;}
#portifolioTexto h1{ padding:3px 10px;}

#portifolioBarra{background:url(../imagens/fundo_branco.png); width:100%; position:absolute; bottom:0; height:130px; color:#000; text-align:center}
#portifolioBarra h1{ padding:3px 10px; background-color:#000; color:#FFF; display:block; font-size:12px; margin:0 0 5px 0; padding:0; line-height:25px;}

#marca{ float:left; margin:0; padding:0}
#marca img{border:0; outline:none}


#wrapper_topo{ height:126px;  background:url(../imagens/topo.jpg) no-repeat center bottom;}
#topo{ height:126px; width:960px; margin:0 auto; background:url(../imagens/topo.jpg) no-repeat center top; clear:both; display:block;}

#wrapper_rodape{ background:url(../imagens/fundo_rodape.jpg) repeat-x #000;}
#rodape{ clear:both; width:960px; margin:0 auto; height:250px}

#wrapper_menu{width:980px; margin:0 auto; position:relative}
#menu {	right:0; margin-top:30px; position:absolute; height: 70px;}
#menu ul,li{ display:inline;}
#menu li a{ padding:40px 15px 40px 15px;color:#FFF; height: 70px; text-decoration:none; font-size:16px; font-weight:bold; vertical-align:middle; line-height:70px}
#menu li a:hover{ color:#FFF;  background:url(../imagens/fundo_menu.png) repeat-x;}


#rodapePortifolio{ width:300px; float:left; color:#FFF; padding:0; margin:0;}
#rodapePortifolio ul{ list-style:none; display:block; padding:0; margin:0;}
#rodapePortifolio li a{display:block; color:#FFF; text-decoration:none; font-size:14px; line-height:24px; font-weight:bold;}
#rodapePortifolio li a:hover{display:block; color:#999; text-decoration:none; }
#rodapePortifolio h1{ font-size:26px}

#rodapeContato{ width:230px; float:left; color:#FFF; padding:0; margin:0;}
#rodapeContato ul{ list-style:none; display:block; padding:0; margin:0;}
#rodapeContato li a{display:block; color:#FFF; text-decoration:none; font-size:16px; line-height:30px; font-weight:bold;}
#rodapeContato li a:hover{display:block; color:#999; text-decoration:none; }
#rodapeContato h1{ font-size:26px}


#rodapeTwitter{ width:300px; float:left; color:#FFF; padding:0; margin:5px 0 0 0;}
#rodapeTwitter ul{ list-style:none; display:block; padding:0; margin:0;}
#rodapeTwitter li a{display:block; height:50px; line-height:50px; color:#FFF; text-decoration:none; font-size:14px;font-weight:bold;}
#rodapeTwitter li a:hover{display:block; color:#999; text-decoration:none; font-size:14px; font-weight:bold;}

#copyright{ padding:5px 0 0 0;}

#fundo_claro{background:url(../imagens/fundo_branco.png); width:100%; height:100%; color:#000;}
#fundo_escuro{background:url(../imagens/fundo_preto.png); width:100%; height:100%; color:#fff;}


/*SERVIÇOS*/

#servicos{width:960px; margin:0 auto; }

div#feature_list {	width: 960px;	height: 600px;	overflow: hidden; position: relative;}
div#feature_list ul {	position: absolute;	top: 0;	list-style: none;	padding: 0;	margin: 0;	}
ul#tabs {	left: 0;	z-index: 2;	width: 440px;	}
ul#tabs li {font-size: 12px;	font-family: Arial;		}
ul#tabs li img {padding: 5px;	border: none;	float: left;margin: 5px 10px 0 0;	}
ul#tabs li a {	color: #222;text-decoration: none;	display: block;	padding: 10px;	height: 80px;outline: none;	}
ul#tabs li a:hover {text-decoration: underline;	}
ul#tabs li a.current {	background:url(../imagens/fundo_preto.png);		color: #FFF;	}
ul#tabs li a.current:hover {	text-decoration: none;	cursor: default;		}
ul#output {	right: 0;	width: 520px;	height: 600px;	position: relative;	background:url(../imagens/fundo_preto.png);	border-left:2px solid #666;		}
ul#output li img{ margin:5px; }	 
ul#output li {	position: absolute;	width: 470px;	height: 300px;left: 8px;color:#FFF; padding:10px; font-size:14px; line-height:20px;		}
.ver_projetos{ display:block; position:relative; margin-top:100px;}
.ver_projetos a{ 
	padding: 15px 20px;
	text-decoration: none;
	font-size: 16px;
	color: #FFF;
	background: #000;
	 border:1px solid #fff;
	-moz-border-radius: 5px;
	clear:both;
}
.ver_projetos a:hover { background: #0888b2;}

/*FIM SERVIÇOS*/
			
#portifolioImagem{width:500px; height:450px; float:left; position:relative}

#gallery{
	/* The pics container */
	width:500px;
	height:450px;
	position:relative;
}

.pic, .pic a{
	/* Each picture and the hyperlink inside it */
	width:100px;
	height:100px;
	overflow:hidden;
}

.pic{
	/* Styles specific to the pic class */
	position:absolute;
	border:5px solid #EEEEEE;
	border-bottom:18px solid #eeeeee;
	
	/* CSS3 Box Shadow */
	-moz-box-shadow:2px 2px 3px #333333;
	-webkit-box-shadow:2px 2px 3px #333333;
	box-shadow:2px 2px 3px #333333;
}

.pic a{
	/* Specific styles for the hyperlinks */
	text-indent:-999px;
	display:block;
	/* Setting display to block enables advanced styling for links */
}

.drop-box{
	/* The share box */
	width:240px;
	height:130px;
	position:absolute;
	bottom:0;
	right:0;
	z-index:-1;
	
	background:url(img/drop_box.png) no-repeat;
}

.drop-box.active{
	/* The active style is in effect when there is a pic hovering above the box */
	background-position:bottom left;
}

label, input{
	/* The modal dialog URL field */
	display:block;
	padding:3px;
}

label{
	font-size:10px;
}

fieldset{
	border:0;
	margin-top:10px;
}

#url{
	/* The URL field */
	width:240px;
}



#orig{
	/* The link that is positioned above the title */
	font-family:"MyRiad Pro",Arial;
	font-size:10px;
	letter-spacing:1px;
	padding-bottom:15px;
	text-transform:uppercase;
	float:right;
}




a img{
	border:none;
}








		
.ad-gallery {
  width: 900px; height:120px;
 position:relative;
}
.ad-gallery, .ad-gallery * {
margin:0 auto;
  padding: 0;
  
}

      
  
  .ad-gallery .ad-nav {
    width: 100%;
    position: relative;
  }
    .ad-gallery .ad-forward, .ad-gallery .ad-back {
      position: absolute;
      top: 0;
      height: 100%;
      z-index: 10;
    }
    /* IE 6 doesn't like height: 100% */
    * html .ad-gallery .ad-forward, .ad-gallery .ad-back {
      height: 120px;
    }
    .ad-gallery .ad-back {
      cursor: pointer;
      left: -33px;
      width: 33px;
      display: block;
		top: 40px;
	  
	  height:120px;
      background: url(../imagens/ad_scroll_back.png) no-repeat;
    }
    .ad-gallery .ad-forward {
      cursor: pointer;
      display: block;
      right: -50px;
      width: 33px;
	  height:120px;
	  top: 40px;
	  background: url(../imagens/ad_scroll_forward.png)  no-repeat;
    }
    .ad-gallery .ad-nav .ad-thumbs {
      overflow: hidden;
      width: 100%;
    }
      .ad-gallery .ad-thumbs .ad-thumb-list {
        float: left;
        width: 9000px;
        list-style: none;
      }
        .ad-gallery .ad-thumbs li {
          float: left;
          padding-right: 2px; padding-top:7px;
        }
          .ad-gallery .ad-thumbs li a {
            display: block;
          }
            .ad-gallery .ad-thumbs li a img {
              border: 3px solid #fff;
              display: block;
            }
            .ad-gallery .ad-thumbs li a.ad-active img {
              border: 3px solid #fff;
            }
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
  position: absolute;
  left: -9000px;
  top: -9000px;
}


 
 
 .zitem {
	width:125px;
	height:125px;	
	border:3px solid #222;	
	margin:10px 5px 0 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:125px;
	height:40px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}
.zitem img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}


a.jScrollArrowUp {
	background: url(../imagens/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../imagens/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}

.osX .jScrollPaneTrack {
				background: url(../imagens/osx_track.gif) repeat-y;
			}
			.osX .jScrollPaneDrag {
				background: url(../imagens/osx_drag_middle.gif) repeat-y;
			}
			.osX .jScrollPaneDragTop {
				background: url(../imagens/osx_drag_top.gif) no-repeat;
				height: 6px;
			}
			.osX .jScrollPaneDragBottom {
				background: url(../imagens/osx_drag_bottom.gif) no-repeat;
				height: 7px;
			}
			.osX a.jScrollArrowUp {
				height: 24px;
				background: url(../imagens/osx_arrow_up.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowUp:hover {
				background-position: 0 0;
			}
			.osX a.jScrollArrowDown {
				height: 24px;
				background: url(../imagens/osx_arrow_down.png) no-repeat 0 -30px;
			}
			.osX a.jScrollArrowDown:hover {
				background-position: 0 0;
			}

.orange-bar .jScrollPaneTrack {
	background: #f60;
}
.orange-bar .jScrollPaneDrag {
	background: #00f url(../imagens/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane {
	background: #69f;
}
			
.holder {
	float: left;
	margin: 0px;
}

.scroll-pane {
	width: 400px;
	height: 420px;
	overflow: auto;
	float: left;
}

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 300px;
}

#pane1 {
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}