/* GENERAL */

html {
    margin: 0;
    /* border: ie6 */
    padding: 0;
    }

body {
    margin: 0; /**/
    /* border: ie5 */
    padding: 0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 130%;
    color: #555;
    background-image: url("../img/bg_body.jpg");
    background-repeat: repeat-x;
    background-color: #ddd;
    text-align: center;
    } /* centrar en ie */

a     {
    color: #39b54a;
    text-decoration: none;
    }

a:hover {
    text-decoration: underline;
    }
    
a img {
    border: 0;
    }


h1, h2, h3, h4 {
	font-weight: normal;
	}

p:first-child, h1:first-child, h2:first-child, h3:first-child {
	/* margin-top: 0;*/
	}

/* .PKG HACE UN CLEAR TRAS DESPUES DE LA CAJA */

.pkg:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
    }

* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */



/* .INNERWRAP ENVUELVE EN TORNO A ELEMENTOS 'FLOATED' DENTRO DEL BLOQUE */ 

.innerwrap {
	position: static;
	width: auto;
	border: 0;
	}	


	
/* CAJAS */


.clearboth {
	clear: both;
	}

#page {
	position: relative;
	width: 910px;
	min-height: 1px;
	margin: 0 auto;
	margin-bottom: 50px;
	text-align: left;
    background-color: transparent;
    border: 0;
	}

.topbox {
	background-color: #fff;
	}

.picbox {
	height: 287px;
	color: #fff;
	background-color: transparent;
	background-image: url('../img/pic_intro.jpg');
	}


.picbox .subtitle {
	display: block;
	font-size: 1.5em;
	}

.picbox .title {
	display: block;
	font-size: 3em;
	line-height: 1em;
	/* letter-spacing: 0.02em; */
	width: 535px;
	}
	
.topbox, .picbox, .whitebox, .whiteupbox, .greybox, .greenbox, .footerbox {
	padding: 0;
	margin: 0;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	}
	
.whitebox {
	background-color: #fff;
	background-image: url('../img/border_white_top.gif');
	}

.whiteupbox {
	background-color: #fff;
	background-image: url('../img/border_whiteup_top.gif');
	text-align:justify;
	}
	
.greybox {
	background-color: #858585;
	color: #fff;
	background-image: url('../img/border_grey_top.gif');
	text-align:justify;
	}

.greybox h1 {
	color: #fff;
	}

.greenbox {
	background-color: #39b54a;
	color: #fff;
	background-image: url('../img/border_green_top.gif');
	}

.footerbox {
	color: #fff;
	background-image: url('../img/border_footer_top.gif');
	}

.conts {
	overflow: auto;
	}

.picbox .conts {
	padding: 50px;
	padding-top: 78px;
	}

.topbox .conts {
	padding: 18px 30px 10px 30px;
	}

.greenbox .conts {
	font-size: 200%;
	letter-spacing: 0.05em;
	font-weight: 100;
	padding: 30px 50px 20px 50px;
	}

.whitebox .conts, .whiteupbox .conts, .greybox .conts {
	padding: 30px 50px 20px 50px;
	/* padding: 50px; */
	/* padding-bottom: 40px; */
	}
	

.footerbox .conts {
	padding: 30px 50px 20px 50px;
	}

.border-bttm {
	border: 0;
	padding: 0;
	margin: 0;
	height: 7px;
	background-repeat: no-repeat;
	}
	


.whitebox .border-bttm, .whiteupbox .border-bttm {
	background-image: url('../img/border_white_bttm.gif');
	}
	

.greybox .border-bttm {
	background-image: url('../img/border_grey_bttm.gif');
	}

.greenbox .border-bttm {
	background-image: url('../img/border_green_bttm.gif');
	}
	
.topbox .border-bttm {
	background-image: url('../img/border_top_bttm.gif');
	}
	
.footerbox .border-bttm {
	background-image: url('../img/border_footer_bttm.gif');
	}
	
.arrow {
	display: block;
	margin: 0;
	margin-top: 1em;
	margin-right: .5em;
	padding: 0;
	border: 0;
	text-align: center;
	}

.arrow img {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: middle;
	}
	
.intro {
	font-weight: bold;
	font-size: 1.1em;
	text-align:justify;
	}

.gris {
	background-color:#666666;
	width:860px;
	height:300px;
	top:575px;
	left:25px;
	position:absolute;
	background-image: url('../img/border_sample_top.gif');
	background-repeat: no-repeat;
	overflow: hidden;
	}

.gris_abajo {
background-image:url('../img/border_sample_bttm.gif');
	background-position:bottom;
	background-repeat:no-repeat;
	position:absolute;
	width:860px;
	height:6px;
	left:25px;
	top:875px;
}
	
/* CONTENIDOS BARRA SUPERIOR: LOGO Y MENòS */
	
#logo {
	width: 290px;
	padding: 0;
	float: left;
	}

#menu {
	
	margin: 0;
	/*margin-top: 52px;*/
	padding: 0;
	padding-top: 50px;
	}
	
#menu a {
	display: block;
	float: left;
	/* height: 16px; */
	padding: 0;
	padding-left: 15px;
	margin: 0;
	margin-left: 15px;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	}

#menu a:hover {
	color: #272361;
	text-decoration: none;
	background-image: url('../img/pic_menu.gif');
	background-repeat: no-repeat;	
	}



/* çREA DE PORTFOLIO */

.portfolio {
	padding: 0;
	margin: 0;
	margin-bottom: 4px;
	color: #fff;
	background-color: #858585;
	background-image: url('../img/border_grey_top.gif');
	background-repeat: no-repeat;
	overflow: hidden;
	}

.portfolio h1 {
	color: #fff;
	}

.portfolio .border-bttm {
	background-image: url('../img/border_grey_bttm.gif');
	background-position:bottom;
	position:relative;
	}

.portfolio .conts {
	padding: 50px;
	padding-bottom: 0;
	}

.portfolio .conts2 {
	padding:20px 10px 20px 50px;
	height:300px;
	}

.portfolio .pages {
	padding: 10px 50px 30px 0;
	overflow: auto;
	}

.portfolio .pages .pagin {
	float: right;
	}
	
.logos {
	font-size:11px;
}

.portfolio .pages a {
	display: block;
	float: left;

	padding: 0 .2em;
	margin: 0 .1em;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	text-align: center;
	}

.portfolio .pages a:hover {
	background-color: #353535;
	}

.portfolio .sample {
	margin: 0 25px;
	background-color: #656565;
	background-image: url('../img/border_sample_top.gif');
	background-repeat: no-repeat;
	position:absolute;
	}

.portfolio .sample .conts {
	padding-top: 25px;
	padding-bottom: 0;
	padding-left:0px;
	}

.portfolio .sample .border-bttm {
	background-image: url('../img/border_sample_bttm.gif');	
	}

.portfolio .sample h2, .portfolio .sample h3, .portfolio .sample h4 {
	margin: 0;
	}
	
.portfolio .sample h3 {
	margin-bottom: .1em;
	font-size: 1.3em;
	}
	

	
.portfolio .sample h2 {
	margin-bottom: .1em;
	color: #333;
	}
	
	

/* ESTILOS COLUMNAS */


.col31, .col32, .col21, .colport {
	float: left;
	margin: 0;
	margin-left: 15px;
	}
	
.col31:first-child, .col32:first-child, .col21:first-child, .colport:first-child,  {
	margin: 0;
	}

.nomargin {	
	margin-left: 0;
	}
	
.col31 {
	width: 260px;
	}
	
.colport{
	width:190px;
	
	}
	
#ejemplos {
width:540px;

	
	}
	

.col32 {
	width: 440px;
	text-align:justify;
	}

.col21 {
	width: 396px;
	}
	
.col21b {
	width: 700px;
	}
	
.col31 h1, .col32 h1, .col21 h1  {
	color: #39b54a;
	}
	
.nomargin {	
	margin-left: 0;
	}



/* IMAGENES OPCIONES ROLLOVERS*/
/*
el rollover funciona ocultando el backgroud-image
del tag 'a', desvelando as’ el background-image
del 'div' en el que est‡ contenido.
para adjudicar im‡genes a cada 'div' y cada 'a'
utilizar la hoja de estilos buttons.css
*/

.button-quie, .button-serv, .button-port,
.button-01, .button-02, .button-03, .button-04, .button-05, .button-06, .button-07, .button-08 {
	margin: 20;
	margin-bottom: .5em;
	padding: 5;
	background-repeat: no-repeat;
	}
	
.button-quie a, .button-serv a, .button-port a,
.button-01 a, .button-02 a, .button-03 a, .button-04 a, .button-05 a, .button-06 a, .button-07 a, .button-08 a  {
	display: block;
	background-repeat: no-repeat;
	}

.button-quie a:hover, .button-serv a:hover, .button-port a:hover,
.button-01 a:hover, .button-02 a:hover, .button-03 a:hover, .button-04 a:hover, .button-05 a:hover, .button-06 a:hover, .button-07 a:hover, .button-08 a:hover {
	display: block;
	background-image: url('../img/pic_transparent.gif');
	background-repeat: no-repeat;
	}

/* IFRAME */

iframe {
	margin: 0;
	margin-right: 10px;
	border: 1px solid #555;
	}

	
/* FORMS */	

form {
    margin: 0;
    padding: 0;
    }

form ul {
    margin: 0;
    padding: 0;
	list-style: none;	
	}

form li {
	margin: 0;
    margin-bottom: .5em;	
	}
	
label {
	display: block;
	float: left;
	width: 5em;
	margin: 0;
	margin-right: 10px;
	font-weight: bold;
	}

fieldset {
	border: #aaa solid 1px;
	padding: 15px;
	}

.goright {
	float: right;
	}

.logo_tit {
background-image:url(../img/imagenes/titulo.gif);
background-repeat:no-repeat;
}

h3 {font-size: 1.4em;}

h2 {font-size: 1.8em;}