/* 
    Folha de Estilo 
   
http://www.okupweb.com.br
*/



/* CSS RESET */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video 

{
	
margin: 0;
padding: 0;

border: 0;
	
font-size: 100%;
	
font: inherit;
	
vertical-align: baseline;


}


article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section
 
{

	
display: block;

}


body 

{

	
line-height: 1;


}


ol, ul 

{

	
list-style: none;


}


blockquote, 
q 

{
	

quotes: none;


}


blockquote:before, 
blockquote:after,

q:before, 
q:after 

{

	
content: '';
content: none;


}


table 

{

	
border-collapse: collapse;
	
border-spacing: 0;


}


strong , 
b 

{ 

font-weight: bold; 

}


i 

{ 

font-style: italic; 

}



/* PADRONIZAÇÕES */


body 

{

    background-image: url("../images/bgBody.jpg");
    
background-position: top center;
    
background-repeat: repeat;
    color: #fff;
    
cursor: default;
    
font-family: Arial;
    
font-size: 12px;
    
line-height: 14px;
    
overflow: hidden;
    
text-align: center;


}


.icHidden

{ 

    
background-color: #26b1f1;
    
display: none;
    
height: 15px;


}


.hidden 

{ 

display: none; 

}


.conteudo 

{
    

height: 350px;
    
margin-top: 20px;
    
overflow: hidden;
	
color: #ffffff !important;


}


h1 

{
    

color: #fff;
    
font-family: 'Exo';

font-size: 24px;
    
text-align: left;


}


h1 span 

{ 

font-size: 14px

}


h2 

{
 
   color: #fff;
    
font-family: 'Pontano Sans';
    
font-size: 18px;
    
text-shadow: 1px 1px 1px #afe3fb;
   
filter: dropshadow(color=#afe3fb, offx=1, offy=1);


}


h3 

{
    

color: #fff;
    
font-family: 'Exo';
    
font-size: 24px;
    
text-align: left;


}


.center 

{
   

 margin: 0 auto;
    
text-align: left;
    
width: 990px;
	
position: relative;


}


.contentleft , .contentright 

{
    

float: left;
    
height: 350px;
    
overflow: hidden;
    
text-align: justify;
    
width: 490px;


}


.contentleft 

{ 

margin-right: 10px; 

}


.contentleft p , .contentcentral p, .contentright p 

{
    

cursor: default !important;
    
font-size: 14px !important;
    
margin: 4px 0 !important;
    
padding: 4px 0 !important;
	
font-weight: 400 !important;


}



.contentcentral 

{
    

width: 990px;


}


.contentleft p:hover , 
.contentcentral p:hover ,

.contentright p:hover , 
.contentright p:hover 


{ 
	

text-decoration: none !important; 


}


.contentright ul li 

{
    

font-size: 13px;
    margin-bottom: 15px


}


.contentright ul  

{
    

list-style-position: inside;
    
list-style-image: url("../images/point.jpg");


}


.limpezafloat 

{


    
clear: both;

    content:".";
    
height: 1px;
    
width: 1px;


}


input[type=text] , textarea 

{
    

background-color: #fff;
    
border: 0;
    color: #999;
    
font-size: 12px;
    
height: 14px;
    
line-height: 14px;
    
margin-bottom: 5px;
    
padding: 10px;


}


input[type=submit] 

{
    

background-color: #2071ea;
    
border: 0;
    
color: #fff;
    
cursor: pointer;
    
padding: 5px;
    
width: 490px;


}


input[type=submit]:hover 

{ 

background-color: #2296cb; 

}


/* LAYOUT */
input[name=nome] 

{ 

width: 470px; 

}


input[name=email] 

{ 
    

margin-right: 5px;
    
width: 221px; 


}


input[name=telefone] 

{ 

width: 221px; 

}


textarea[name=mensagem] 

{
    

min-width: 470px;
    
max-width: 470px;
    
min-height: 120px;
    
max-height: 120px;


}


#redesSociais 

{
    

bottom: 0;
    
position: absolute;  
width: 100%;
    
z-index: 4;


}

#icFranquia


{
    

background-color: #003399;
    
bottom: 0px;
    
cursor: pointer;
    
float: right;
    
height: 62px;
    
position: relative;
    
width: 1280px;
   
z-index: 2;


}


#divOrcamento 

{
    

background-color: #26b1f1;
    
display: none;
    
position: absolute;
    
height: 560px;
    
top: 50%;
    bottom: 50%;
    
left: 50%; 
    
right: 50%;
    
margin-left: -495px;
    
margin-top: -300px;
    
padding: 20px;
    
width: 950px;
    
z-index: 9999;
	
overflow: hidden;


}



#icFranquia

{ 

margin-right: -145px; 

}


.btNext , 
.btPrev 

{
    

bottom: 50%;
    cursor: pointer;
    
height: 60px;
    
margin-top: -30px;
    
overflow: hidden;
    
position: absolute;
    
top: 50%;
    
width: 60px;
    
z-index: 4;


}


.btNext 

{ 

right: 0; 

}


.btPrev 

{ 

left: 0; 

}


#framenav 

{
    

background-color: #fff;
    
top: 20px;
    
height: 56px;
    
position: absolute;
    
width: 100%;
    
z-index: 4;
	
overflow: hidden;


}


#framenav p 

{ 
	

color:#fff;
    
float: left;
    
font-family: 'Pontano Sans';
    
font-size: 20px;
    
line-height: 20px;
    
margin-top: 14px;
    
width: 400px;
	
font-weight: bold;


}


#framenav p:hover 

{


	color:#fff;
    
cursor: pointer;
    
text-decoration: underline;


}


#framenav p span:first-child 

{
    

color:#fff;
    
font-weight: bold;


}

#framenav p span:last-child 

{
    

color:#fff;
    
font-weight: bold;
	
margin-bottom: 10px;


}


#menu 

{
    

float: right;
    
height: 14px;
    margin-top: 21px;
    
overflow: hidden;
    
text-align: right;
    
width: 580px;


}


#menu li 

{
    

color: #575757;
    
cursor: pointer;
    
display: inline;
    
font-size: 14px;
    
line-height: 14px;
    
margin: 0 20px 0 0;


}


#menu li:last-child 

{ 
    

color: #26b1f1;
    
margin: 0 0 0 0; 


}


#content 

{ 
    

/*display: none;*/
    

color: #fff;
    
height: 350px;


}


#fechar 

{ 
    

display: none;
    
text-align: right; 
    
width: 100%;
	position: absolute;
	
top: 410px;


}


#fechar p 

{
    

color: #fff;
    
font-size: 12px;
    
text-align: right; 
    
width: 990px;


}


#slider , #slider ul {
    min-height: 100%; 
    overflow: hidden;
    position: absolute;
    min-width: 100%;
    z-index: 1;
}
#slider img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
}
#bgContent {
    background-image: url('../images/icBG.png');
    background-repeat: repeat;
    height: 100%;
    display: none;
    position: absolute;
    width: 100%;
    z-index: 2;
}
p.comum { 
    color: #fff;
    cursor: default !important;
    font-size: 12px !important; 
    margin: 5px 0 !important;
    padding: 0 !important;
}
p.comum:hover { 
    text-decoration: none !important; 
}
p.hotsite { margin-top: 13px !important; }


#loader{
	position: absolute;
	left: 49%;
	bottom: -200px;
}

form.orcamento{
	text-align: left;
	padding-left: 20px;
}

form.orcamento input[type=text],
form.orcamento select{
	width: 400px;
    border: 0;
    color: #999;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 5px
}
form.orcamento .label{
	width: 400px;
}
form.orcamento label.m10{
	margin-left: 20px;
}

form.orcamento textarea{
	width: 400px;
	height: 100px;
}
/* ---------- basic theme: these are the most necessary styles --------------------------------- */

.scrollbar-pane {
    margin-right: 20px;
}

.scrollbar-handle-container {
    background: #EEE;
    width: 20px;
}

.scrollbar-handle {
    width: 20px;
    background: #999;
}

.scrollbar-handle:hover {
    background: #666;
}

.scrollbar-handle.move {
    background: #111;
}

.scrollbar-handle-up {
    width: 20px;
    height: 20px;
    background: #DDD;
}

.scrollbar-handle-up:hover {
    background: #666;
}

.scrollbar-handle-down {
    width: 20px;
    height: 20px;
    background: #DDD;
}

.scrollbar-handle-down:hover {
    background: #666;
}



/* ---------- simple theme --------------------------------------------------------------------- */

.simple .scrollbar-pane {
    margin-right: 16px;
}

.simple .scrollbar-handle-container {
    background: #EEE;
    width: 15px;
}

.simple .scrollbar-handle-container.hover,
.simple .scrollbar-handle-container.move {
    background: #E6E6E6;
}

.simple .scrollbar-handle,
.simple .scrollbar-handle-up,
.simple .scrollbar-handle-down {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAHCAYAAACcLcTKAAAAMklEQVR42mP4TwRgIBJQwwyGQWkZrR0+GDxPUO9gC2Gi3UNpqFArpIdFUh3UGZqY0gwAQe422HjkstgAAAAASUVORK5CYII=);
background-repeat: no-repeat;
}


/* handle */
.simple .scrollbar-handle {
    width: 13px;
    border: 1px solid #CCC;
background-color: #CCC;
background-position: -16px 50%;
}

.simple .scrollbar-handle:hover {
    border: 1px solid #666;
}

.simple .scrollbar-handle.move {
    border: 1px solid #666;
    background-color: #999;
}


/* arrow up */
.simple .scrollbar-handle-up {
    width: 13px;
    height: 13px;
    border: 1px solid #CCC;
    background-color: #CCC;
background-position: -34px 2px;
margin-bottom: 1px;
}

.simple .scrollbar-handle-up.hover,
.simple .scrollbar-handle-up:hover {
    border: 1px solid #666;
}

.simple .scrollbar-handle-up.move {
    background-color: #999;
}


/* arrow down */
.simple .scrollbar-handle-down {
    width: 13px;
    height: 13px;
    border: 1px solid #CCC;
    background-color: #CCC;
background-position: 2px 4px;
margin-top: 1px;
}

.simple .scrollbar-handle-down.hover,
.simple .scrollbar-handle-down:hover {
    border: 1px solid #666;
}

.simple .scrollbar-handle-down.move {
    background-color: #999;
}



/* ---------- fff theme ----------------------------------------------------------------- */

ul.fff {
    padding: 0;
}

.fff .scrollbar-pane {
    margin-right: 12px;
}

.fff .scrollbar-handle-container {
    background: #EEE;
    width: 12px;
}

.fff .scrollbar-handle {
    width: 12px;
background-color: #CCC;
}

.fff .scrollbar-handle:hover {
    background-color: #999;
}

.fff .scrollbar-handle.move {
    background-color: #666;
}

.fff .scrollbar-handle-up {
    width: 12px;
    height: 18px;
}

.fff .scrollbar-handle-down {
    width: 12px;
    height: 18px;
}



form.orcamento div#lf{
	height: auto;
	overflow: hidden;
	width: 450px;
	border-right: 1px solid #fff;
	float: left;
	height: 100%;
}

form.orcamento div#lf2{
	height: auto;
	overflow: hidden;
	width: 450px;
	border-right: 1px solid #fff;
	float: left;
	height: 100%;
	padding-left: 30px;
}

form.orcamento div#rt{
	height: auto;
	overflow: hidden;
	width: 400px;
	float: right;
	margin-right: 18px;
	height: 100%;
}

form.orcamento div#rt3{
	height: auto;
	overflow: hidden;
	width: 400px;
	float: right;
	margin-right: 18px;
	height: 100%;
}

form.orcamento input[type=submit] {
    width: 100px;
}

#orcamento_ajax_content{
	margin-top: 20px;
	height: 580px;
	overflow: hidden;
}
.btn{
	padding: 10px;
	background: #208bbc;
	cursor: pointer;
	width: 120px;
	text-align: center;
	position: absolute;
	top: 490px;;
	
}
.btn:hover{
	color: #333;
	background: #fff;
}

.buttonBottom{
	color: #fff;
	position: relative;
}
.buttonBottom span{
	font-size: 9px;
	text-decoration: none;
	font-weight: bold;
	margin-top: -50px;
	position: absolute;
	top: 93px;
	left: 0;
}
#ajax_message{
    border: 1px solid #8bbe00;
	background: #edfcc4;
	color: #333;
	padding: 10px;
	position: absolute;
	z-index: 999;
	top: 20px;
	right: 20%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: none;
}

strong{
	font-weight: bold !important;
}


/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:998;
    color:#fff;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:999; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #fff;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url("../images/tooltip/bubble.gif") no-repeat top;
	
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url("../images/tooltip/bubble_filler.gif") repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url("../images/tooltip/bubble.gif") no-repeat bottom;
}
#port {
    position: relative;
    z-index: 999;
    margin-top: 10px;
    width: 300px;
}
#port a { font-family: "Exo";font-size: 14px; text-decoration: none; }
#port a:link, #port a:visited { color: #fff; }
#port a:hover { text-decoration:underline; }


.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;*/
}
.thumbClientes , .thumbClientesFim {
    float: left; 
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.thumbClientes , .thumbClientesFim , .thumbClientes img , .thumbClientesFim img {
    width: 136px; 
    height: 136px; 
    overflow:hidden;
    position: relative;
}
.zGarage_box{
width: 258px;
height: 55px;
position: relative;
overflow: hidden;
}

.zGarage_box > div{
width: 258px;
height: 55px;
position: absolute;
top: 0px;
transition:top 2s;
-webkit-transition:top 0.3s;
-moz-transition:top 0.3s;
-o-transition:top 0.3s;
background: #26b1f2;
}
.zGarage_box:hover > div{
top: -55px;
}
.zGarage_box > p{

}
#conteudo-clientes { 
    background: #fff
}
a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}
.orange-bar .jScrollPaneTrack {
	background: #38b4ec;
}
.orange-bar .jScrollPaneDrag {
	background: #38b4ec url(../images/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane {
	background: #38b4ec;
}
			
.holder {
	float: left;
	margin: 10px;
}

.scroll-pane {
	width: 200px;
	height: 200px;
	overflow: auto;
	background: #38b4ec;
	float: left;
}

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}

#pane1 {
	height: 150px;
}
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
    top: 60px;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: -5px;
	top: 0;
	height: 100%;
	background: #9cddf7;
}
.jScrollPaneDrag {
	position: absolute;
	background: #38b4ec;
	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;*/
} 

#servicosLeft , #servicosRight { margin-top: 20px }
#servicosLeft {
    float: left;
    width: 258px;
}
#servicosRight {
    float: right;
    width: 210px;
}
#prox_form_franquia {
    background: url("../images/btproximo.png") top center no-repeat;
    height: 35px;
    width: 170px
}
#prev_form_franquia {
    background: url("../images/btanterior.png") top center no-repeat;
    height: 35px;
    width: 170px
}
#enviarFranquia {
    background: url("../images/btenviar.png") top center no-repeat;
    height: 35px;
    margin-top: 50px;
    width: 170px
}