/****************************************/
/*				GENERAL					*/
/****************************************/

#bg
{
	position: fixed;
	width: 100%;
	height: 100%;

}

#logo {
	border:0;
	max-width: 44%;
}

.header
{
	font: bold;
	width: auto;
}

#degradado
{
	position: absolute;
	background: url(../img/header.jpg) repeat-x top;
	width: 100%;
	height: 400px;
	top: 0%;
}

.header img
{
	top: 0;
	position: absolute;
	border: 0;
}

.footer
{
	z-index: 6;
	background: #000000 url(../img/footer.jpg) repeat-x top;
	padding-top: 2%;
	margin-top: 3%;
	width: 100%;
	height: 50px;
}

.footer p
{
	text-align: center;
	color: gray;
	font-size: 12px;
}

.xlayer
{
	top: 0;
	left: 0;

	z-index: 5;
	background-color: #6694E3;
}

.roundbox
{
	background-color: transparent;
	width: 90%;
	height: 86%;
	margin: 1em 9%;
}

#content
{
	position: relative;
	margin-top: 8%;
	z-index: 5;
	width:90%;
	overflow: hidden;
}

body
{
	background: #004993;
	margin: 0;
}

.main_cont
{
	margin: 0px 4px;
	padding: 10px 4px;
	overflow: hidden;
	background: #FFFFFF;
}

.member_cont
{
	margin: 0px 4px;
	padding: 10px 4px;
	overflow: hidden;
	background: #EEEEFF;
}


.fl
{
	float:left;
}

.fr
{
	float: right;
}

.cb
{
	clear: both;
}

.hid
{
	display: none;
}


/****************************************/
/*				HEADERS					*/
/****************************************/
h2
{
	margin-bottom: 5px;
	text-align: center;
	border-bottom: 1px solid;
}

h2:first-letter
{
	margin-left: 1em;
	font-weight: bold;
	font-size: 2em;
}

h3
{
	padding-bottom: 1px;
	border-bottom: 1px dotted;
}

/****************************************/
/*			CONTENIDO-PORTADA			*/
/****************************************/

#nuestros_servicios {
    margin:4% 0;
    overflow:hidden;
}

.servicio {
    width:45%;
    text-align:justify;
    float:left;
    margin:2%;
}

.servicio a {
    color:#888;
    font-weight:bold;
}

.servicio a:hover {
    text-decoration:none;
    color:#191970;
}

.servicio img {
    max-width:70%;
    margin:0 auto;
    display:block;
}


/****************************************/
/*			GRUPOS-FORMULARIOS			*/
/****************************************/

.form_group
{
	padding: 1% 1%;
	margin: 1% 10%;
}

/****************************************/
/*				BORDES 					*/
/****************************************/

.main_border
{
	padding: 0px;
	height: 4px;
	width: 4px;

	overflow: hidden;
	background-color: transparent !important;
	background-image: url('../img/borderwhite.png');
	background-repeat: no-repeat;

}

.member_border
{
	padding: 0px;
	height: 4px;
	width: 4px;

	overflow: hidden;
	background-color: transparent !important;
	background-image: url('../img/border.png');
	background-repeat: no-repeat;
}

.bord00
{
	background-position: 0 -4px;
	float: left;
}

.bord01
{
	background-position: 0 0;
	float: left;
}

.bord11
{	
	background-position: -4px 0;
	float: right;
}

.bord10
{
	background-position: -4px -4px;
	float: right;
}

.bar11
{
	margin-right: 4px;
	margin-left: 4px;
}

.bar01
{
	margin-right: 4px;
}

.bar10
{
	margin-left: 4px;
}

.main_bar
{
	height: 4px;
	background-color: white;
}

.member_bar
{
	height: 4px;
	background-color: #6694e3;
}

.member_bord_cont
{
	overflow: hidden;
	background-color: #6694e3 ;
	background-repeat: repeat;
}

.main_bord_cont
{
	overflow: hidden;
	background-color: #FFFFFF;
	background-repeat: repeat;
}

/********************************************************/
/*					COLUMNAS							*/
/********************************************************/
.column_A
{
	width: 46%;
	margin: 5px;

	float: left;
}

.column_B
{
	width: 46%;
	margin: 5px;

	float: right;
}

.simple_column
{
	padding: 1% 5%;

	text-align: center !important;
}

/********************************************************/
/*						PORTAFOLIO						*/
/********************************************************/

#ultimos_trabajos {
}

#ultimos_trabajos #content_trabajos {
    border: 2px solid #888;
    margin: 2% auto 0 auto;
    background-color: #ccc;
}

#content_trabajos #info_trabajo_actual {
    width: 35%;
    text-align: justify;
    margin: 0 auto 2% auto;
    font-weight: bold;
    overflow: hidden;
    position:relative;
    height:auto;
}

#ultimos_trabajos #comentarios_portafolio {
    position:relative;
}

#ultimos_trabajos #ambitos_portafolio {
	margin: 3%;
	width: 35%;
	font-size: 16px;
	font-family:sans;
	float: left;
}

#ultimos_trabajos #contacto_portafolio {
	margin: 3%;
	width: 40%;
	text-align:justify;
	font-size: 14px;
	float: right;
}

#ultimos_trabajos h4 {
	font-size: 14px;
	color: black;
	text-align:center;
}

#ultimos_trabajos .trabajo_inf, #ultimos_trabajos .trabajo_sup {
	width: 18%;
	height: 18%;
	margin: 1%;
	position:relative;
	float:left;
	background-color: #666;
    border: 1px solid #666;
	padding: 2% 2% 0% 2%;
}

#ultimos_trabajos .rbtop div
{
	background: url(img/titulo_trabajo_tl.gif) no-repeat top left;
	position:absolute;
	left:0%;
	top:0%;
}
#ultimos_trabajos .rbtop
{
	background: url(img/titulo_trabajo_tr.gif) no-repeat top right;
	position:absolute;
	right:0%;
	top:0%;
}
#ultimos_trabajos .rbbot div
{
	background: url(img/titulo_trabajo_bl.gif) no-repeat bottom left;
}
#ultimos_trabajos .rbbot
{
	background: url(img/titulo_trabajo_br.gif) no-repeat bottom right;
}

#ultimos_trabajos .trabajo_inf {
	margin-top:6%;
}

#ultimos_trabajos .trabajo_inf img, #ultimos_trabajos .trabajo_sup img {
	width:100%;
	height:100%;
	border: 1px solid #111;
}

/*ALGUNOS DE NUESTROS CLIENTES Y SUS TRABAJOS*/

#clientes {
	clear:both;
}

#clientes h2 {
	font-size: 16px;
	text-decoration:none;
	text-align:left;
}

#algunos_clientes {
	list-style:none;
	float:left;
	font-size: 14px;
}

.trabajo {
	width: 25%;
	height: 25%;
	float: left;
	margin: 2%;
	position:relative;
}

#web_clientes .trabajo img {
	width:100%;
	height:100%;
	padding: 4%;
	background-color: #666;
	border: 1px solid #111;
}

#algunos_clientes a {
	color:black;
}

#algunos_clientes a:hover {
	text-decoration: none;
}

#algunos_clientes li {
	margin-left:-3%;
}

#web_clientes {
	width: 65%;
	overflow:hidden;
	margin-left: 30%;
}

/*TRABAJOS DE TODOS LOS CLIENTES*/

#web_todos_clientes {
	width: 90%;
	overflow:hidden;
	margin: 0 auto;
}

#nuestros_trabajos h2 {
	font-size: 16px;
	text-decoration:none;
	text-align:left;
}

#web_todos_clientes .trabajo {
	width: 15%;
	height: 15%;
	float: left;
	margin: 2%;
	position:relative;
}

#web_todos_clientes .trabajo img {
	width:100%;
	height:100%;
	padding: 4%;
	background-color: #666;
	border: 1px solid #111;
}

/****************************************************/
/*					TABLAS							*/
/****************************************************/

/* CELDAS */
.field
{
	overflow: hidden;
	margin: 0px 0px;


	clear: both;
}

.field .label
{

	font-weight: 600;
	text-align: right !important;
	float: left;
}

.field .input
{

	width: 70%;
	white-space: nowrap;
	vertical-align: middle;
	font-style: italic;

	float: right;
	overflow: auto;
}


.field img
{
	height: 15px;
	margin: 0px;
}


/* SELECTED & NON-SELECTED FIELDS */
.selected_field
{
	background-color: #DDDDFF;
}

.nonselected_field
{
	background-color: #CCCCFF;
}

/* MENU VERTICAL */
.vertical_header
{
	margin: 2em 0px;
	margin-left: 4px;
	width: 10%;
	padding: 0px 0px;

	text-align: center !important;
	font-size: 0.7em;

	float: left;
}

.vertical_content
{
	width: 86%;
	padding: 0px;
	margin: 10px 0px !important;

	background-color: transparent;
	float: left;
}

.vh_nonselected
{
	padding: 5px;
	background-color: white !important;
}

.vh_nonselected .member_border
{
	display: none;
}

.vh_nonselected .member_bar
{
	display: none;
}

.vh_nonselected .member_bord_cont
{
	background-color: white !important;
}

.vh_selected .member_cont
{
	padding-right: 5px;

	color: white !important;
	background-color: #6694E3 !important;
}

.vh_selected a
{
	font-weight: bold;
	color: white !important;
}

/************************************************/
/*					MENU						*/
/************************************************/

.menu { 
	height: 45px;
	display: block;
}

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

.menu ul li {
	/* width and height of the menu items */  
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	line-height: 45px;
	margin: 0 7%;
}

.menu ul li a {
	/* must be postioned relative  */ 
	position: relative;
	display: block;
	width: 110px;
	height: 45px;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.menu ul li a span {
	/* all layers will be absolute positioned */
	position: absolute;
	left: 0;
	width: 110px;
}

.menu ul li a span.out {
	top: 0px;
}

.menu ul li a span.over,
.menu ul li a span.bg {
	/* hide */  
	top: -45px;
}

#menu {
	background: #FFF;
}

#menu ul li a {
	color: #000;
}

#menu ul li a span.over {
	color: #FFF;
}

#menu ul li span.bg {
	/* height of the menu items */  
	height: 45px;
	background: url(../img/bg_over.gif) center center no-repeat;
}