body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

header, footer, article, section, nav, menu, hgroup {  
    display:block;
}

/************************  STYLES.CSS   **************************/

body {
	font-family: arial, helvetica, sans-serif;
}

#barra-servicios {
	background: url(../images/barra-top.gif) repeat-x;
	height: 20px;
	position:absolute;
	top:0px;
	width:100%;
	z-index:100;
}

#slides {
	height:100%;
	overflow: hidden;
	position: absolute;
	top:0;
	width:100%;
	z-index:10;
}

#slides img {
	height:100%;
	width:100%;
}

#cuadricula {
	background: url(../images/bg-cuadricula.png);
	height:100%;
	position: absolute;
	top:0;
	width:100%;
	z-index:21;
}

#container {
	background: url(../images/bg_gray_trans.png);
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0px;
	width:570px;
	z-index:50;
}

#container div {
	height:100%;
	margin-top:20px;
	position: absolute;
	right:0px;
	width:260px;
}

#logo-principal {
    height: 49px;
    left: 426px;
    padding: 0;
    position: absolute;
    top: 45px;
    width: 214px;
    z-index: 100;
}

#logo-principal a span{
	display:none;
}

#container div h1 {
	height:49px;
	left:140px;
	padding:0px;
	position: absolute;
	top:20px;
	width:214px;
}

#container div h1 a span{
	display:none;
}

#container div ul {
	position: absolute;
	top:180px;
	right:0px;
	width:182px;
}

#container div ul li{
	margin-top:3px;
}

#container div ul li:first-child {
	margin-top:0px;
}

#container div ul li a{
	display:block;
	height:27px;
	position: relative;
	width:182px;
}

#container div ul li a img.im-rotate {
	display:block;
	height:17px;
	left:10px;
	position: absolute;
	top:6px;
	width:15px;
}

#container div ul li a span.txt-none {
	display:none;
}

#link-nosotros {
	background: url(../images/sprites.png) -25px -38px no-repeat;
}

#link-servicios {
	background: url(../images/sprites.png) -25px -68px no-repeat;
}

#link-clientes {
	background: url(../images/sprites.png) -25px -98px no-repeat;
}

#link-obras {
	background: url(../images/sprites.png) -25px -128px no-repeat;
}

#link-contacto {
	background: url(../images/sprites.png) -25px -158px no-repeat;
}

#logo-medium {
	bottom:0px;
	left:0px;
	position: absolute;
}

#container div > img {
	position: absolute;
	right:0px;
	top:345px;
}


#logo-small {
	position: absolute;
}


#ajax_container,
#obras-container {
	background: url(../images/bg_gray_trans.png);
	display:none;
	left: 260px;
	overflow:hidden;
	position: absolute;
	z-index:48;
}

#ajax_container {
	height: 100%;
	min-height:300px;
	left: 0px;
	top : 0px;
	width:360px;
}

#obras-container {
	bottom : 0px;
	height: 40px;
	left:0px;
}

#close-section {
	background: url(../images/sprites.png) no-repeat 0px -61px;
	display: block;
	height: 60px;
	position: absolute;
	right:7px;
	top:42px;
	width:13px;
}

.nosotros {
	width:356px;
}

.nosotros > div,
.clientes > div,
.servicios > div {
	background: url(../images/bg_white_trans.png);
	border: solid 1px #151515;
	height:100%;
	margin: 140px 28px 28px 28px;
	padding:9px;
	position: relative;
	width:300px;
}


#ml-info-container {
	height: 100%;
	overflow: hidden;
}

h2 {
	text-shadow: 1px 1px 2px #000;
	-moz-text-shadow: 1px 1px 2px #000;
	-webkit-text-shadow: 1px 1px 2px #000;
}

.nosotros > div  h2,
.clientes > div h2,
.servicios > div h2 {
	background: url(../images/sprites.png) no-repeat -86px 0px;
	color: #b1b1b1;
	font-size:16px;
	font-weight: lighter;
	height:35px;
	line-height:35px;
	margin:0px 0px 9px 0px;
	padding:0px;
	width:252px;
}

.clientes > div h2 {
	font-size:16px;
}

.servicios > div h2 {
	font-size:16px;
}

.nosotros > div h2 img,
.clientes > div h2 img,
.servicios > div h2 img {
	vertical-align: middle;
	height:35px;
	margin: -5px 5px 0px 5px;
	width:35px;
}

.nosotros > div p,
.clientes > div p,
.servicios > div p {
	color: #fff;
	font-size: 12px;
	line-height:15px;
	margin-bottom:28px;
	text-align: justify;
	width:280px;
}

.nosotros > div p:last-child,
.clientes > div p:last-child,
.servicios > div p:last-child {
	margin-bottom: 0px;
}

.servicios {
	width: 356px;
}

.clientes {
	width :356px;
}

.obras {
	width: 400px;
}

.contacto {
	width: 500px;
}

.contacto > div {
	margin: 127px 28px 28px 28px;
	width:330px;
}

.contacto > div h3 {
	color: #fff;
	font-size: 20px;
	font-weight: lighter;
	margin:0px;
	padding:0px;
}

.contacto > div p.phone {
	color: #fff;
	font-size:14px;
}

.contacto > div p.phone span {
	color: #9d9d9d;
	line-height:18px;
	margin-left:64px;
}

.contacto > div form {
	margin-top:34px;
}

.contacto > div form p {
	margin-top:17px;
}

.contacto >  div form p:first-child {
	margin-top:0px;
}

.contacto > div form p:last-child,
.contacto > div form p.last-child {
	margin-top:12px;
	text-align: right;
	width:300px;
}

.contacto > div form p:last-child span,
.contacto > div form p.last-child span {
	float: left;
    font-size: 11px;
    text-align: left;
    width: 200px;
}

.contacto > div form p input,
.contacto > div form p textarea {
	background: url(../images/bg_white_trans.png);
	border: solid 1px #151515;
	color: #9d9d9d;
	font-size: 16px;
	padding-left: 3px;
	padding-right: 3px;
	width:294px;
}

.contacto > div form p input:focus,
.contacto > div form p textarea:focus {
	border: solid 1px #151515;
	color: #cdcdcd;
}

.contacto > div form p input{
	height: 33px;
}

.contacto > div form p textarea{
	font-family: arial, helvetica, sans-serif;
	height:106px;
	max-height:106px;
	min-height:106px;
	max-width:294px;
	min-width:294px;
	padding-top:5px;
}

#enviar {
	background: url(../images/sprites.png) no-repeat -1px -1px;
	color: #ccc;
	cursor: pointer;
	font-size: 19px;
	height:35px;
	width:81px;
}

#enviar:focus,
#enviar:hover {
	color: #fff;
}


#titulo-seccion {
	cursor: default;
	display: block;
	left:12px;
	position: absolute;
	top:180px;
	width:20px;
	z-index:110;
}

.titulo-nosotros {
	background: url(../images/sprites.png) no-repeat -214px -36px;
	height: 207px;
}

.titulo-servicios {
	background: url(../images/sprites.png) no-repeat -242px -36px;
	height: 204px;
}

.titulo-clientes {
	background: url(../images/sprites.png) no-repeat -269px -36px;
	height: 190px;
}

.titulo-obras {
	background: url(../images/sprites.png) no-repeat -292px -36px;
	height: 164px;
}

.titulo-contacto {
	background: url(../images/sprites.png) no-repeat -318px -36px;
	height: 194px;
}


#show-text-bottom,
#show-text-top {
	background: url(../images/sprites.png) no-repeat;
	display:block;
	height:8px;
	position: absolute;
	right:2px;
	width: 21px;
}

#show-text-top {
	background-position: -3px -128px;
	top:2px;
}

#show-text-bottom {
	background-position: -3px -142px;
	bottom:2px;
}


#mapa {
	left: 0px;
	position: absolute;
	top : 0px;
	z-index: 22;
}

#ajax-loader {
	background: #000 url(../images/ajax-loader.gif) 50% 50% no-repeat;
	border-radius: 5px;
	filter: alpha(opacity=50);
	height: 35px;
	max-height: 35px;
	min-height: 35px;
	opacity: 0.5;
	position: absolute;
	right: 48%;
	top: 48%;
	width: 35px;
	z-index:110;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#obras-container div {
	margin:0px;
	padding: 0px;
	position: relative;
}

#obras-container div img {
	border:solid 1px #151515;
	cursor: pointer;
	margin-top:3px;
	margin-left:3px;
}

#close-obras {
	background: url(../images/sprites.png) no-repeat -3px -63px;
	height: 10px;
	position: absolute;
	top:3px;
	right:3px;
	width:10px;
}

#show-more-photos,
#show-less-photos {
	background: url(../images/sprites.png) no-repeat;
	display:block;
	height: 24px;
	position: relative;
	top: 10px;
	float:left;
	width:10px;
}

#show-more-photos {
	background-position: -15px -38px;
	margin-left:10px;
	margin-right:40px;
}

#show-less-photos {
	background-position: -2px -38px;
	margin-left:10px;
	margin-right:8px;
}

#obras-container > div > div {
	display: block;
	float:left;
	height:40px;
	overflow:hidden;
}

#image-container {
	left:0px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	width:100%;
	z-index:20;
}

#customers-logos {
	filter: alpha(opacity=80);
    /*left: 15px;*/
    right: 5px;
	opacity: 0.8;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 35px;
    width: 450px;
    z-index: 100;
    display:none;
}

#customers-logos li {
	display: inline-block;
	padding: 4px;
}

#welcome-container {
	color: #fff;
	height: 50px;
	margin-left:12px;
	max-width:248px;
	text-shadow:none;
	top:82px;
	width:248px;
	-moz-text-shadow:none;
	-webkit-text-shadow:none;
	display:none;
}

#welcome-container h2 {
	font-size: 25px;
	font-weight: lighter;
	margin:0px 0px 12px 0px;
	padding:0px;
}

#welcome-container p {
	font-size:11px;
	margin-top:23px;
	margin-left:28px;
	width:205px;
}

#leyenda-oc {
	position: absolute;
	top: 35px;
	left:15px;
}

/************************** JSCROLLPANE ********************************************************************/

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width:21px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	position: relative;
}

.jspDrag
{
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: url(../images/sprites.png) no-repeat;
	text-indent: -20000px;
	display: block;
	height: 8px;
	cursor: pointer;
	width:21px;
}

.jspArrowUp,
.jspArrow.jspDisabled.jspArrowUp {
	background-position: -3px -128px;
}

.jspArrowDown,
.jspArrow.jspDisabled.jspArrowDown {
	background-position: -3px -142px;
}

.jspArrow.jspDisabled
{
	background: url(../images/sprites.png) no-repeat;
	cursor: default;
}


.jspVerticalBar .jspArrow
{
	height: 8px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}