/*	Index of styles for Concesionario Honda by Marciobarrios ~ marciobarrios.com
--------------------------------------------------------------------------
	- General (titles, generic links, preformatting, some classes)
	- Layout
		- Header
		- Content
		- Footer
	- Forms
*/


/*	%General
--------------------------------------------------------------------------*/

:link,:visited{text-decoration:none}
ul,ol{list-style:none}
table {border-collapse:collapse}
h1,h2,h3,h4,h5,h6,pre,code,input,select,textarea{font-size:1em}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0}
fieldset,img,a img,:link img,:visited img{border:0}

body{
	font: .8em/1.3em arial,'Trebuchet MS', sans-serif;
	color:#303030;
	text-align:center;
	background-color: #F0F0F2;
}
.hidden,
hr{
	display:none;
}
a{
	color:#FD490A;
	outline:none;
}

a:link,
a:visited,
a:hover,
a:active{
	text-decoration:underline;
}
li a:link img,
li a:visited img{
	border:1px solid #999EA3;
	padding:2px;
}
li a:hover img,
li a:active img{
	border:1px solid #730416;
	padding:2px;
}

h3{
	font-size:1.1em;
	color:#F65C0A;
}

table{
	width:100%;
}
	td,
	th{
		padding:5px;
	}
	
p{
	margin-bottom:10px;
}
.clear{
	clear:both;
}

/*	%Layout
--------------------------------------------------------------------------*/
#wrapper{
	width:784px;
	padding:0 9px 20px;
	margin:0 auto;
	text-align:left;
	border:1px solid #A2A4A5;
	border-top:0;
	background-color: #fff;
}

	/*	%Header
	----------------------------------------------------------------------*/
	#header{
		height:86px;
		background:url(../img/header.jpg) no-repeat top right;
		position:relative;
		margin-right:-9px;
	}	
		h1 a{
			float:left;
			width:216px;
			height:48px;
			text-indent:-9999px;
			background:url(../img/title.png);
		}
		
		
			#menu{
				position:absolute;
				left:0;
				bottom:0;
				clear:left;
				width:552px;
				height:25px;
				
				overflow:hidden;
			}
				#menu li{
					float:left;
				}
					#menu a,
					#menu li.current{
						display:block;
						float:left;
						height:25px;
						text-indent:-9999px;
						background:url(../img/menu.png);
						border-left:1px solid #838383;
					}
					#menu #menu-concession a:link,
					#menu #menu-concession a:visited,
					#menu #menu-concession a:hover,
					#menu #menu-concession a:active,
					#menu #menu-concession.current{
						width:108px;
						background-position:0 top;
						border:0;
					}
					#menu #menu-concession a:hover,
					#menu #menu-concession a:active,
					#menu #menu-concession.current{
						background-position:0 bottom;
					}
					
					#menu #menu-modeles a:link,
					#menu #menu-modeles a:visited,
					#menu #menu-modeles a:hover,
					#menu #menu-modeles a:active,
					#menu #menu-modeles.current{
						width:138px;
						background-position:-109px top;
					}
					#menu #menu-modeles a:hover,
					#menu #menu-modeles a:active,
					#menu #menu-modeles.current{
						background-position:-109px bottom;
					}
					
					#menu #menu-accesoires a:link,
					#menu #menu-accesoires a:visited,
					#menu #menu-accesoires a:hover,
					#menu #menu-accesoires a:active,
					#menu #menu-accesoires.current{
						width:89px;
						background-position:-248px top;
					}
					#menu #menu-accesoires a:hover,
					#menu #menu-accesoires a:active,
					#menu #menu-accesoires.current{
						background-position:-248px bottom;
					}
					
					#menu #menu-services a:link,
					#menu #menu-services a:visited,
					#menu #menu-services a:hover,
					#menu #menu-services a:active,
					#menu #menu-services.current{
						width:75px;
						background-position:-338px top;
					}
					#menu #menu-services a:hover,
					#menu #menu-services a:active,
					#menu #menu-services.current{
						background-position:-338px bottom;
					}
					
					#menu #menu-occasion a:link,
					#menu #menu-occasion a:visited,
					#menu #menu-occasion a:hover,
					#menu #menu-occasion a:active,
					#menu #menu-occasion.current{
						width:138px;
						background-position:-414px top;
					}
					#menu #menu-occasion a:hover,
					#menu #menu-occasion a:active,
					#menu #menu-occasion.current{
						background-position:-414px bottom;
					}
					

	
	/*	%Content
	----------------------------------------------------------------------*/
	#content{
		margin-top:20px;
		overflow:hidden;
	}
	#content-second{
		margin-top:10px;
		border-left:1px solid #aaa;
		background:url(../img/h3.png) no-repeat right top;
		overflow:hidden;
	}
		#content-second #content-second-box{
			clear:both;
			border:1px solid #aaa;
			border-top:none;
			border-left:none;
			padding:10px;
			overflow:hidden;
		}
		#content-second h3{
			color:#141819;
			height:30px;
			margin:0 10px;
			padding-top:6px;
			float:left;
			display:inline;/*fix ie bug*/
		}
		#content-second .actualizado{
			float:right;
			margin:6px 50px 6px 10px;
			display:inline;/*fix ie bug*/
		}
			#content-second .actualizado a{
				margin-left:10px;
				color:#730416;
			}
		
		#section{
			position:relative;
			width:753px;
			height:29px;
			padding:10px 15px 0;
			background:url(../img/section.png);
		}
			#section h2{
				color:white;
				font-size:1.3em;
				font-weight:normal;
			}
				#section h2 strong{
					/*text-transform:uppercase;*/
				}
			#section ul{
				position:absolute;
				top:10px;
				left:150px;
			}
				#section li{
					float:left;
				}
					#section li a{
						float:left;
						padding:0 10px;
						color:white;
						border-left:1px solid white;
					}
						#section li a:link,
						#section li a:visited{
							text-decoration: none;
						}
						#section li a:hover,
						#section li a:active,
						#section li.current a{
							text-decoration: underline;
						}
						#section li.current a{
							cursor:default;
						}
					#section li.first-child a{
						border:none;
					}
					
		#destacado{
			height:260px;
			position:relative;
			/*background:url(../img/img-principal.jpg) no-repeat;
			text-indent:-9999px;*/
			margin-bottom:20px;
		}
			/*#destacado ul{
				float:left;
				width:400px;
				margin:10px 0 0 175px;
				display:inline;
			}
				#destacado li{
					float:left;
				}
					#destacado li a{
						float:left;
						padding:0 10px;
						color:white;
						border-left:1px solid white;
					}
					#destacado li.first-child a{
						border:none;
					}*/
				
		/* index */	
		.box{
			float:left;
			width:239px;
			height:283px;
			padding:10px;
			background:url(../img/box.png) repeat-x;
			margin-left:10px;
			display:inline; /*ie bug*/
		}
		.box.first-child{
			margin-left:0;
		}
			.box #concession,
			.box #promotions{
				display:block;
				width:239px;
				height:27px;
				text-indent:-9999px;
				background:url(../img/concession.png);
				margin-top:7px;
			}
			.box #promotions{
				background:url(../img/promotions.png);
			}
			.box p{
				clear:both;
				margin:10px;
				font-weight:bold;
			}
			.box p.left{
				width:160px;
				float:left;
			}
			.box em{
				float:left;
				margin:10px;
				font-style:normal;
				font-weight:bold;
				font-size:1.2em;
				color:#FD490A;
				display:inline;/*ie bug*/
			}
			.box img{
				clear:both;
				display:block;
				margin:0 auto 15px;
			}
			.box p.right{
				text-align:right;
			}
				.box p a{
					text-decoration:underline;
				}
			
			#segundamano{
				float:right;
				width:225px;
				height:198px;
				padding:10px;
				background:url(../img/segundamano.png);
			}
				#segundamano h2{
					display:none;
				}
				#segundamano p{
					padding-top:20px;
					margin-bottom:15px;
				}
					#segundamano li{
						margin-bottom:15px;
						float:left;
						width:100%;
					}
						#segundamano li img{
							float:left;
							margin-right:13px;
							width:89px;
							height:60px;
						}
						#segundamano li p{
							float:left;
							margin:0;
							padding:0;
							width:115px;
						}
							#segundamano li p a:link,
							#segundamano li p a:visited{
								color:#303030;
								text-decoration:none;
							}
							#segundamano li p a:hover,
							#segundamano li p a:active{
								color:#303030;
								text-decoration:underline;
							}
							#segundamano li p a strong{
								color:#AB0720;
							}
					#segundamano #vermas{
						float:right;
						margin-top:-18px;
					}
			
			#newsletter{
				position:relative;
				float:right;
				width:246px;
				height:82px;
				margin-top:5px;
				background:url(../img/newsletter.png);
			}
				#newsletter p{
					margin-left:40px;
					margin-top:4px;
				}
					#newsletter p em{
						color:#aaa;
						display:block;
						letter-spacing:1px;
						text-transform:uppercase;
						font-style:normal;
						font-weight:bold;
					}
				#newsletter form{
					margin:5px 10px 0;
				}
					#newsletter form input.text{
						margin-right:5px;
						margin-left:30px;
						display:inline;
						width:130px;
					}
		
		/*	%Container
		-------------------------------------------------------------------*/
		#container{
			width:781px;
			border:1px solid #c4c4c4;
			border-top:0;
			border-bottom:0;
			overflow:hidden;
		}
			#corners{
				width:783px;
				height:12px;
				background:url(../img/footer-container.png) no-repeat;
			}
			/* %Accesoires --------------------------------------------*/
			#accesoires #content-second{
				background:none;
				border:0;
			}
			.box-accessoires{
				float:left;
				position:relative;
				width:239px;
				height:123px;
				padding:5px 10px 10px;
				border:1px solid #c4c4c4;
				border-top:0;
				border-right:0;
				margin-top:17px;
				background:url(../img/box-accessoires.png) no-repeat right top;
			}
			.box-accessoires.first-line{
				width:241px;
			}
			.box-accessoires .inner-box{
				clear:left;
				border-right:1px solid #c4c4c4;
				height:117px;
				margin-right:-10px;
			}
				#content-second .box-accessoires h3{
					float:left;
					width:210px;
					height:auto;
					margin:0;
					padding:0;
					color:#F65C0A;
				}
				.box-accessoires p{
					position:absolute;
					width:150px;
					padding:5px;
					height:60px;
					top:35px;
					left:9px;
					color:#49494A;
					background:url(../img/p-box-accesoires.png) no-repeat;
				}
				.box-accessoires .img-accessoires{
					position:absolute;
					right:20px;
					top:30px;
				}
				.box-accessoires em{
					position:absolute;
					bottom:6px;
					right:10px;
					color:#F65C0A;
					font-size:1.2em;
					font-style:normal;
					font-weight:bold;
				}
				.box-accessoires div.promo	{
					position:absolute;
					bottom:5px;
					left:10px;
					background-color:#808080;
					color:white;
					padding:1px 5px;
				}
				.box-accessoires .zoom-accessoires{
					position:absolute;
					top:27px;
					right:7px;
				}
			#paginator{

				clear:both;
			}
			#paginator ul{
				float:right;
				margin-top:35px;
				margin-right:10px;
				display:inline;/*ie bug*/
			}
				#paginator li{
					float:left;
					border-left:1px solid #8D081C;
					padding:0 5px;
				}
				#paginator li.noborder{
					border:0;
				}
					#paginator li a{
						color:#8D081C;
					}
			
			/* %Popup Accessoires --------------------------------------------*/
			#popup-accessoires #wrapper{
				border:0;
				width:500px;
				padding:0;
			}
			#popup-accessoires #container{
				width:500px;
				border:0;
				position:relative;
				padding-bottom:10px;
			}
			#popup-accessoires #section{
				width:500px;
				background:url(../img/popup-section.jpg) no-repeat;
				margin-bottom:20px;
			}
			#popup-accessoires .precio-accessoires{
				float:left;
				width:30%;
				display:inline;
				margin-left:20px;
				color:#F65C0A;
				font-size:1.2em;
				font-style:normal;
				font-weight:bold;
			}
			#popup-accessoires .promo{
				float:right;
				display:inline;
				margin-right:20px;
				background-color:#808080;
				color:white;
				padding:1px 5px;
			}
			#popup-accessoires .image{
				text-align:center;
				margin-bottom:10px;
				clear:both;
			}
			#popup-accessoires p{
				margin:10px 20px 10px;
			}
					
			/* %Ocasion --------------------------------------------*/
			#ocasion #newsletter{
				float:left;
				display:inline;
				margin-left:10px;
				margin-top:10px;
			}
			#box-mini{
				float:left;
				clear:left;
				width:228px;
				height:42px;
				padding:20px 10px;
				margin-left:10px;
				margin-top:20px;
				text-align:center;
				background:url(../img/box-contact.png) no-repeat;
				display:inline;/*fix ie bug*/
			}
				#box-mini .tel{
					color:#838282;
					text-transform:uppercase;
					font-weight:bold;
					font-size:1.5em;
					margin-top:5px;
				}
		
			#ocasion #ocasion-form{
				width:495px;
				float:right;
				margin-top:10px;
			}
				#ocasion #ocasion-form div{
					clear:left;
				}
					#ocasion #ocasion-form div div{
						clear:none;
						float:left;
						margin-right:20px;
						overflow:hidden;
						margin-top:25px;
					}
						#ocasion #ocasion-form input.submit{
							margin-top:15px;
							display:block;
						}
			#ocasion table{
				border-top:1px solid #ccc;
				margin-top:10px;
			}
				#ocasion table th{
					text-transform:uppercase;
					font-weight:normal;
				}
				#ocasion table tr.par td{
					background:url(../img/ocasion-td.png) repeat-x top;
				}
				#ocasion table td.prix,
				.prix{
					color:#9B091F;
					font-size:1.1em;
				}
				#ocasion table td.hover{
					background:#FFB3B3 !important;
				}
			/* %Ocasion-ficha --------------------------------------------*/
			.ocasion-datos{
				width:343px;
				height:248px;
				float:left;
				display:inline;
				padding:0 10px 10px;
				margin-left:-10px;
				background:url(../img/ficha-ocasion.jpg) no-repeat;
			}
				.ocasion-datos h4,
				.ocasion-box-big h4,
				.ocasion-box h4{
					height:26px;
					line-height:26px;
					margin-bottom:20px;
				}
				
				.ocasion-datos ul li{
					margin-bottom:8px;
					clear:left;
					overflow:hidden;
					float:left;
				}
					.ocasion-datos li span{
						width:70px;
						display:block;
						float:left;
					}
					.ocasion-datos li strong{
						float:left;
					}
					
			/*.fila-thumb ul{
				margin:0 6px;
				float:left;
				display:inline;
				width:52px;
			}
				.fila-thumb li{
					margin-bottom:12px;
					float:left;
				}
			
			#ocasion-img{
				float:right;
			}*/
			
			.ocasion-thumbs{
				width:360px;
				float:left;
				margin:10px 0 0 40px;
				display:inline;
			}
				.ocasion-thumbs li{
					display:inline;
					float:left;
					margin-right:10px;
					margin-top:10px;
				}
					/*.ocasion-thumbs li img{
						border:1px solid #999EA3;
						padding:2px;
					}*/
			
			.ocasion-boxes{
				clear:both;
			}		
			
			.ocasion-box-big{
				width:424px;
				/*height:275px;*/
				float:left;
				display:inline;
				background:#F6F5FA url(../img/ficha-ocasion-box-big.jpg) no-repeat;
				margin-left:-10px;
				margin-top:15px;
				overflow:hidden;
			}
				.ocasion-box-big h4,
				.ocasion-box h4{
					margin-left:10px;
					margin-bottom:10px;
				}
				.ocasion-box-big li,
				.ocasion-box li{
					overflow:hidden;
					width:172px;
					float:left;
					display:inline;
					margin:0 10px 7px;
				}
					.ocasion-box-big li span,
					.ocasion-box li span{
						display:block;
						color:#545353;
					}
					
			.ocasion-box{
				width:350px;
				/*height:275px;*/
				float:right;
				display:inline;
				margin-right:-10px;
				background:#F6F5FA url(../img/ficha-ocasion-box.jpg) no-repeat;
				margin-top:15px;
				overflow:hidden;
			}
				.ocasion-box li{
					width:94% !important;
					margin-bottom:15px;
				}
			
					
				/* %Modelos --------------------------------------------*/
				.usual{
					margin:0 -10px;
				}
				.usual ul.idTabs{
					margin:0;
					padding:0;
					float:left;
				    width:100%;
					background:url(../img/tabs-bg.png) repeat-x bottom;
				}
					.usual ul.idTabs li{
						float:left;
						background:url(../img/tab-right.png) no-repeat right top;
						margin-left:10px;
					}
					.usual ul.idTabs li a{
						display:block;
						float:left;
						background:url(../img/tab-left.png) no-repeat left top;
						text-decoration:none;
						color:#999;
						padding:4px 15px 2px;
						white-space:nowrap;
					}
					.usual ul.idTabs li a.selected{
						font-weight:bold;
						color:black;
						padding-bottom:3px;
					}
				.usual div{
					clear:left;
					padding:10px;
				}
				#modelos table{
					width:100%;
				}
					#modelos th{
						background:url(../img/modelos-th.png) repeat-x;
					}
					#modelos tr.par td{
						background:url(../img/modelos-td.png) repeat-x;
						border-top:1px solid #EACED2;
						border-bottom:1px solid #EACED2;
					}
				#modelos .pdf{
					margin-top:20px;
				}
					#modelos .pdf a{
						background:url(../img/pdf.png) no-repeat left;
						padding-left:23px;
						color:black;
						padding-top:7px;
						padding-bottom:7px;
					}
				
				.usual .right{
					clear:none;
					float:right;
					width:300px;
					padding:0;
				}
					.usual .thumbs li,
					.usual .colores li{
						float:left;
						display:inline;
						margin-right:10px;
						margin-top:10px;
					}
						.usual .colores li{
							width:40px;
							height:40px;
							border:2px solid #333;
							text-indent:-9999px;
						}
						.usual .colores li.blanco{
							background-color:#fff;
						}
						.usual .colores li.negro{
							background-color:#000;
						}
						.usual .colores li.rojo{
							background-color:#991B29;
						}
						.usual .colores li.verde{
							background-color:#97C82C;
						}
						.usual .colores li.amarillo{
							background-color:#D3C84E;
						}
						/*.usual .thumbs img{
							padding:2px;
							border:1px solid #999EA3;
						}*/
				
				.usual .left{
					float:left;
					width:420px;
					padding:0;
				}
				
				
				/* %Concession --------------------------------------------*/
				.link-mapa a{
					width:223px;
					height:53px;
					text-indent:-9999px;
					display:block;
					background:url(../img/plano.jpg) no-repeat;
					float:right;
					margin-right:10px;
				}
				ul.personal li{
					float:left;
					width:49%;
					margin-bottom:25px;
				}
					ul.personal li img{
						float:left;
						margin-right:15px;	
					}
					ul.personal li div{
						float:left;
						width:270px;
					}
						ul.personal li h4{
							color:#AB0720;
							margin-bottom:10px;
						}
				.cont{
					float:left;
					width:270px;
					margin-right:10px;
					margin-bottom:25px;
					padding-left:10px;
				}
					.cont div{
						float:left;
						clear:left;
						width:218px;
						height:62px;
						padding:10px 15px;
						line-height:1;
						margin-top:-7px;
						background:url(../img/box-contact.png);
					}
						.cont div p{
							margin-bottom:5px;
						}
						.cont div .tel{
							color:#CF0825;
							text-transform:uppercase;
							font-weight:bold;
							/*font-size:1.5em;*/
						}
					.cont #contacter{
						display:block;
						float:left;
						text-indent:-9999px;
						width:223px;
						height:53px;
						background:url(../img/nous-contacter.jpg);
					}
				#mapa{
					text-align:center;
				}
				.contacto-mail{
					padding-left:20px;
					background:url(../img/icon_email.gif) no-repeat;					
				}
				.contacto-mail:link,
				.contacto-mail:visited,
				.contacto-mail:hover,
				.contacto-mail:active{
					color:#AB0720;
				}
				
				/* %Contact ------------------------------------*/
				#contact-form div{
					width:300px;
					float:left;
					margin-bottom:20px;
				}
					#contact-form input.text{
						width:225px;
					}
					#contact-form input.submit{
						margin-top:81px;
						margin-bottom:10px;
					}
					
				/* %Services ------------------------------------*/
				ul.list{
					list-style:disc;
				}
					ul.list li{
						margin-left:20px;
						margin-bottom:5px;
					}
				#services #services-top div{
					float:left;
					width:500px;
				}
				#services #services-top div img{
					margin:20px 30px 20px 0;
				}
				
				/* %Modelos / %Accesoires / %Concession / %Contact / %Services ------------------------------------*/
				#modelos #modelos-form,
				#accesoires #accesoires-form,
				#concession #concession-form,
				#contact #contact-top,
				#services #services-top{
					margin-top:10px;
				}
				#concession #concession-form{
					overflow:hidden;
				}
					#modelos img.right,
					#accesoires img.right{
						float:right;
						margin:0 10px;
					}
					#modelos #modelos-form img.left,
					#accesoires #accesoires-form img.left,
					#concession #concession-form img.left,
					#contact #contact-top img.left,
					#services #services-top img.left{
						float:left;
						margin:0 10px;
					}
					#modelos #modelos-form select,
					#accesoires #accesoires-form select{
						margin:10px 0;
					}
					#modelos #modelos-form .submit,
					#accesoires #accesoires-form .submit{
						margin-top:10px;
					}

					
	/*	%Footer
	----------------------------------------------------------------------*/
	#footer{
		clear:both;
		margin:0 auto 20px;
		width:804px;
		color:#5b5b5b;
		height:29px;
		font-size:.9em;
		text-align:left;
	}
		#footer div{
			background:url(../img/footer.png) no-repeat;
			height:29px;
			padding:4px 10px;
		}
			#footer .right{
				float:right;
			}

/*	%Forms
----------------------------------------------------------------------*/
label{
	display:block;
}
input.text,
textarea{
	padding:2px 2px 1px;
	background:url(../img/input.png) repeat-x;
	border:1px solid #c3c3c3;
	border-top:none;
	font: 1em arial,'Trebuchet MS', sans-serif;
}
input.submit{
	cursor:pointer;
}
textarea{
	width:225px;
	height:80px;
}
ul.ko{
	background:#ffc;
	padding:10px;
	color:#91160F;
	list-style:disc;
	margin-bottom:20px;
}
	ul.ko li{
		margin-bottom:10px;
		margin-left:20px;
	}
p.ok{
	background:#ffc;
	padding:10px;
	color:#666;
	margin-bottom:20px;
}
form small{
	font-size:.9em;
}

label.error{
	display:inline;
	margin-left:15px;
	position:relative;
	top:-10px;
	color:#c30;
	font-size:1.1em;
}

#msg_newsletter{
	display:none;
	position:absolute;
	left:-253px;
	bottom:17px;
	width:283px;
	height:23px;
	padding:6px 20px 6px 6px;
	background:url(../img/error-globo.png) no-repeat;
	color:#c30;
	z-index:1000;
}

#ocasion  #msg_newsletter{
	left:220px;
	padding:6px 6px 6px 20px;
	background:url(../img/error-globo-right.png) no-repeat;
}