/****************************************************

 **  GENERAL  *********************

 ****************************************************/



body{
	background-color: #fff;
	font-size: 0.7em;
	font-family: Arial, sans-serif;
	color: #666;
	text-align: center; /* to center the container - for IE */
	padding: 0;
	margin: 0;
}

/* horizontally center the container in the browser */

/* En container hay que elegir entre poner min-max width (firefox y otros) o un width estatico para explorer (malditos sean sus programadores!) lo suyo seria que el programa eligiese por si mismo, ya que al poner un width estatico, no se centran bien las columnas en firefox, ademas de que no es de tamaņo flexible. */
#container {
	width: 903px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #fff;
	text-align: left; /* to reset text alignment for all content */
	position: relative; /* to contain the menu which is absolutely positioned. */
	overflow: hidden;
}

a {
	color: #78A137;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: #0c3c60;
}

a img {
	border: 0px;	/* to eliminate the ugly 2px blue border around img inside a tags */
}




/****************************************************

 **  COMMON *********************

 ****************************************************/

#content {
	float: left;
	margin-left: 25px;
	width: 81%;
	position: relative;
}
#content h1 {
	border-bottom:2px dotted #F1F3F5;
	color:#333333;
	font-size:1.7em;
	font-weight: bolder;
	height:1.9em;
	margin: 0;
	padding: 0px 0px -3px 0px;
	margin-bottom:30px;
}
#content h2 {
	color:#666666;
	font-size:1.4em;
	line-height:1.5em;
	font-weight: bold;
	height:1.4em;
	margin: 0pt 0pt 5px;
	float:left;
}
#content h2.dotted {
	border-bottom:2px dotted #F1F3F5;
	margin: 0pt 0pt 5px; /* this needs to be here to overwrite the selector '.dotted' */
}
#content h3 {
	color:#666666;
	font-size:1.2em;
	font-weight: bold;
	height:1em;
	margin-bottom:10px;
}
/* content2 exists only to group description and promotion such that they both are relative to the same top 
   allowing the title to be flexibly sized by the user */
#content .content2 {
	float: left;
	overflow: hidden;
}
#contenidos{
	float: left;
	width: 500px;
	text-align: justify;
}
#content .description {
	width: 500px;
	overflow: hidden;
	float: left;
	padding-left: 2px;
	padding-right: 2px;
	font-size: 1em;
	line-height: 20px;
}
#content .description p {
	margin-top: 0px;
	margin-bottom: 15px;
	width:460px;
}
/* added 9/21/07 */
#content p a {
	text-decoration: underline;
}
.dotted {
	border-bottom:2px dotted #F1F3F5;
	margin-bottom:30px;
}


/****************************************************

 **  HOME PAGE *********************

 ****************************************************/



#centerpiece {
	position: relative;
	margin: 0 auto 30px auto;
	width: 900px;
	height: 300px;
	overflow: hidden;
	background-image: url(img/masterpiece.png);
	background-repeat: no-repeat;
}

#enterprise-tab,
#consulting-tab {
	display: none;
}

#centerpiece h1,
#centerpiece strong,
#centerpiece p,
#centerpiece h2 {
	font-size: 0;
	text-indent: -1000%;
	display: none;
}

.demolink,
.readlink,
.downloadlink {
	position: absolute;
	top: 240px;
	width: 50px;
	height: 24px;
	overflow: hidden;
	font-size: 0;
	text-indent: -1000%;
}

#ria-tab .demolink {
	left: 665px;
}

#ria-tab .readlink {
	left: 839px;
}

#enterprise-tab .demolink {
	left: 617px;
}

#enterprise-tab .readlink {
	left: 839px;	
}

#enterprise-tab .downloadlink {
	left: 790px;	
}

#consulting-tab .readlink {
	left: 839px;
}

#centerpiece #ria,
#centerpiece #enterprise,
#centerpiece #consulting {
	position: absolute;
	bottom: 0;
	height: 35px;
	overflow: hidden;
	font-size: 0;
	text-indent: -9999px;
}

#centerpiece #ria {
	left: 0px;
	width: 300px;
}

#centerpiece #ria:hover {
	background-image: url(img/masterpiece.png);
	background-repeat: no-repeat;
	background-position: 0 -900px;
}

#centerpiece #enterprise {
	left: 300px;
	width: 300px;
}

#centerpiece #enterprise:hover {
	background-image: url(img/masterpiece1.png);
	background-repeat: no-repeat;
	background-position: -300px -900px;
}

#centerpiece #consulting {
	left: 600px;
	width: 300px;
}

#centerpiece #consulting:hover {
	background-image: url(img/masterpiece.png);
	background-repeat: no-repeat;
	background-position: -600px -900px;
}


#information {
	position: relative; /* to contain the news, events, documents columns */
	width: 100%;
	font-size: 0.9em;
	line-height: 15px;
}

#information h2.title {
	color: #333;
	font-size: 1.2em;
	font-weight: bold;
	background: url(img/title-bg.gif) repeat-x;
	border: 1px solid #c9c9c9;
	height: 19px;
	line-height: 19px;
	margin: 0;
	padding: 0;
	padding-left: 10px;
}

	/* En news, events y documents hay que elegir entre poner min-max width (firefox y otros) o un width estatico para explorer (malditos sean sus programadores!) lo suyo seria que el programa eligiese por si mismo, ya que al poner un width estatico, no se centran bien las columnas en firefox, ademas de que no es de tamaņo flexible. */
#information .news {	
	float: left;
	display: block;
	width: 280px;
}

#information .events {
	float: left;
	margin-left: 30px;
	display: block;
	width: 282px;
}

#information .documents {
	float: left;
	margin-left: 27px;
	display: block;
	width: 283px;
}

#information .documents ul {
	list-style-position: inside;
	padding: 0;
	color: #333;
	margin: 15px 0px 10px 15px;
}

#information .documents h3 {
	font-size: 12px;
	font-weight: bold;
	color: #333;
	margin: 0;
	padding: 6px 0px 6px 15px;
}

#information .documents h4 {
	font-size: 12px;
	font-weight: bold;
	color: #333;
	margin: 0;
	padding: 10px 0px 5px 15px;
}

#information .documents p {
	font-size: 1.1em;
	margin: 0;
	position: relative;
	text-align: left;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 0px;
}


#information a {
	display: block;
}

#information .title {
	background-color: #f1f3f5;
	font-weight: bold;
	color: #333;
	padding: 4px;
	position: relative;
	min-height: 16px;
}

#information .item {
	padding-top: 16px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 0;
}

#information .item .more {
	background-image: url(img/more.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding-left:15px;
}

#information .headline {
	color: #78A137;
	font-weight: bold;
}

#information .source {
	font-size: 10px;
}

#information .publication:after,
#information .author:after {
	content: " - " ;
}

#information .teaser {
	padding: 6px 0;
}





/****************************************************

 **  HEADER *********************

 ****************************************************/



#header {
	height: 39px;
	text-align: right;
	padding-top: 0.3em;
	position: relative;
	margin: 38px 0px 29px 0px;
	width: 100%;
}

#header a.logo{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 372px;
	height: 63px;
	text-indent: -9999px;
	overflow: hidden;
	text-align: left;
	background-image: url(img/logo.gif);
	background-repeat: no-repeat;
}


#header #devmenu {
	font-size: 12px;
	font-weight: bold;
	color: #002744;
	position: absolute;
	right: 0;
	top: 0;
	padding-left: 30px;
	height: 22px;
	line-height: 22px;
	background-image: url(img/icono.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

#header #devmenu a {
	color: #002744;
}

#header #devmenu a:hover {
	text-decoration: underline;
}

#menu {
	height: 33px;
	margin: 0;
	padding: 0;
	border: 0;
	z-index: 90;
	list-style: none;
	position: relative;
	background-image: url(img/menu-bg.gif);
	background-repeat: repeat-x;
}



/* begin first level unselected */

#menu li {
	z-index:1000;
	position: relative;  /* to contain the dropdown menu */
	height: 33px;
	float: left;
	padding: 0 2px 0 0;
	background-image: url(img/menu-divider.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#menu li .separadorizq{
	z-index:1000;
	position: relative;  /* to contain the dropdown menu */
	height: 33px;
	float: right;
	padding: 0 0 0 2px;
	background-image: url(img/menu-divider.gif);
	background-repeat: no-repeat;
	background-position: right top;
}


#menu li.left {
	height: 33px;
	width: 10px;
	margin: 0 15px 0 0;
	padding: 0;
	background-image: url(img/menu-left.gif);
	background-repeat: no-repeat;
}

#menu li.right {
	height: 33px;
	width: 10px;
	position: absolute;
	right: -1px;
	padding: 0;
	background-image: url(img/menu-right.gif);
	background-repeat: no-repeat;
}

#menu ul li:hover,
#menu ul li.sfhover {



}

#menu li a {
	display: block;
	font-family: Arial;
	font-size: 13px;	/* to override the browser default */
	font-weight: bold;
	color: #fff;
	line-height: 33px;
	padding: 0 10px;
}

#menu li a:hover,
#menu li:hover a,
#menu li.sfhover a {
	background-image: url(img/menu-hover.gif);
	background-repeat: repeat-x;
}

/* end first level unselected */

/* begin first level selected */

#menu li.selected {



}

#menu li.selected a {
	background-image: url(img/menu-hover.gif);
	background-repeat: repeat-x;
}

#menu li.selected a:hover {



}

/* end first level selected */

/* begin drop down menu with son of suckerfish */

#menu li ul.dropmenu {
	position: absolute;
	display: block;
	left: -999em;
	height: auto;
	width: 174px;
	margin: 0;
	padding: 0 0 15px 0;
	background: none;
	overflow: hidden;
}

/* hack for IE6 transparencies */

.menu-background {
	padding: 0;
	margin: 0;
	width: 174px;
	height: 235px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(img/menu-dropdown-block.png) !important;
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/menu-dropdown-block.png', sizingMethod='scale');
}

#menu li:hover ul.dropmenu,
#menu li.sfhover ul.dropmenu {
	left: -5px;
	top: 30px;
	z-index: 900; /* place it above the page content */
}

#menu li ul.dropmenu li {
	display: block;	
	height: 25px;
	background: none;

	/* background: url(http://images.backbase.com/gfx/menu-dropdown-bg.png) repeat-y; */

	float: none;
	padding: 0;
}

#menu li ul.dropmenu li a {
	display: block;
	color: #333366;
	font-size: 0.95em;
	font-weight: normal;
	line-height: 25px;
	height: 25px;
	background: none;
	margin: 0 5px;
	padding: 0 8px;
}

#menu li ul.dropmenu li a.first {
	background: url(img/menu-dropdown-gradient.gif) repeat-x;
}

#menu li ul.dropmenu li a:hover {
	background: #336699;
	color: #fff;
}

/* end drop down menu with son of suckerfish */



/* has no navigation line. use for front page */

#body-home {
	position: relative; /* to contain the navigation pane */
	margin-top: 10px;    /* to allow space for the menu bar */
}







/****************************************************

 **  NAVIGATION  *********************

 ****************************************************/

#navigation {
	float: left;
	margin-top: 35px; /* same as padding-top of main */
	left: 0;
	width: 15%;
	height: 500px;
	font-size: 0.9em;
	/* border-right: 2px solid #f1f3f5; */
}
#navigation .menu {
	width: 100%;
	margin-bottom: 40px;
}
#navigation ul {
	margin: 0;
	padding: 0;
}
div.separator {
	height: 0px;
	border-top: 2px dotted #f1f3f5;
	margin: 1px 0px;
	padding: 0;
	font-size: 0;
	line-height:0px; /* for IE: was messing up the 'next steps' sidebar */
}
#navigation a {
	color: inherit;
}
#navigation li a,
#navigation .features a {
	display: block;    /* make the entire block clickable */
}
#navigation ul.menu li a {
	line-height: 30px;
	color: #60839f;
	background-color: #fff;
}
#navigation ul.menu li {
	border-top: 2px dotted #f1f3f5; /* put dotted line here instead */
	text-indent: 10px;
	list-style-type: none;
	line-height: 30px;
	margin: 0;
	padding: 0;
}
#navigation ul.menu li a.selected {
	background-color: #567a95;
	font-weight: bold;
	color: #fff;
}
#navigation ul.menu li a:hover {
	background-color: #e2e4e6;
}
#navigation li.separator:hover {  
	background-color: inherit;     /* do not change background on separators */
}
#navigation .features {
	width: 100%;
	text-align: center;
	padding-top: 25px;
	margin-top: -50px;
	color: #78A137;
}
#navigation .feature {
	padding-left: 60px;
	background-position: 10px center;
	background-repeat: no-repeat;
	height: 57px;
	cursor: pointer;
}
#navigation .demo {
	text-align: center;
	padding-top: 25px;
	color: #78A137;
	background-image: url(img/feature-demo.gif);
}
#navigation .download {
	text-align: center;
	padding-top: 25px;
	color: #78A137;
	background-image: url(img/feature-download.gif);
}
#navigation .webinar {
	text-align: center;
	padding-top: 25px;
	color: #78A137;
	background-image: url(img/feature-webinar.gif);
}
#navigation .title {
	color: #333;
	font-weight: bold;
}
#navigation .subtitle {
	color: #666;
	padding-top: 17px;
	text-align: left;
	
}
#content {
	margin-top: 30px;
}
#content .content2 {
	width: 500px;
	float: left;
}
.img_centro{
	text-align: center;
	margin: 0;
	padding: 0;
}
.img_izq{
	float:left;
	border:none;
	margin: 0px 10px 0px 0px;
}
.img_dch{
	float:right;
	border:none;
	margin: 0px 0px 0px 10px;
}
.txt_izq{
	float:left;
	width:55%;
}
.txt_dch{
	float:right;
	width:55%;
}
/****************************************************
 **  PROMOTION  *********************
 ****************************************************/

#content .promotion {
	float: right;
	overflow: hidden;
	top: 0px;
	margin-top: 10px;
	margin-left: 20px;
	min-width: 180px;
	max-width: 205px;
	font-size: 0.9em;
	line-height: 18px;
}

/* begin new promotion sidebar 11/13 */
#content .promotion .container {
	display: block;
	width: 100%;
	height: 145px;
	margin: 0 0 20px 0;
}
#content .promotion .container h4 {
	display: block;
	height: 26px;
	line-height: 26px;
	font-family: Arial;
	font-weight: bold;
	font-size: 12px;
	color: #fff;
	padding: 0 0 0 10px;
	margin: 0;
}
#content .promotion .container p {
	font-family: Arial;
	font-size: 12px;
	color: #333333;
	margin: 10px 0 0 10px;
}
/* end new promotion sidebar */

#content .promotion .section .title {
	background-color: #f1f3f5;
	font-weight: bold;
	color: #333;
	line-height: 30px;
	padding-left: 1em;
	font-size: 1.1em;
}
#content .promotion .section {
	margin-bottom: 19px;
}
#content .promotion .item {
	color: #567a95;
	line-height: 36px;
	padding-left: 30px;
	background-position: 9px center;
	background-repeat: no-repeat;
	cursor: pointer;
}
#content .promotion .webinar {
	background-image: url(img/next-webinar.gif);
}
#content .promotion .download {
	background-image: url(img/next-download.gif);
}
#content .promotion .contact {
	background-image: url(img/next-contact.gif);
}
#content .promotion .section .body {
	margin: 1em 0 1em 1em;
}
#content .promotion .link {
	margin-bottom: 1em;
	margin-left: 1em;
}
#content .promotion .quote {
	background-image: url(img/quotes.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-left: 1em;
	width: 70%;
}
#content .promotion .quote .text {
	padding-top: 13px;
	color: #567a95;
	font-size: 1.1em;
	line-height:18px;
	font-style: italic;
	text-indent: 20px;
	text-align: left;
	width: 100%;
}
#content .promotion .source {
	color: #567a95;
	padding-left: 1em;
	padding-top: 1em;
}
#content .promotion .source .author {
	font-weight: bold;
}
.description {
	float: left;
}


/****************************************************
 **  SITE *********************
 ****************************************************/


/* needed for IE bullet styling */
#content .description ul{
	list-style-type:none;
}
#content .description li { 
	font-size: 1em; 
	line-height: 20px;
}
#content .description p.indented {
	margin-left: 3em;
}
#content .description .tabbox {
	border: 1px solid #a2abb1;
}
#content .description .tabselector {
	width: 100%;
	height: 1.7em;
}
#content .description .tab {
	float: left;
	width: 23%;
	text-align: center;
	font-weight: bold;
	color: #333;
	border-right: 1px solid #a2abb1;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #a2abb1;
	padding: 0.2em;
}
#content .description .selected {
	border-top: 1px solid #a2abb1;
	border-right: 2px solid #a2abb1;
	border-bottom: 1px solid #fff;
	background-color: #f5f7f8;
}
#content .margin-bottom {
	margin-bottom: 20px;  /* used for the 'Top 10 Reasons' page */
}
#content p.emphasis {
	xfont-size: 13px;  /* used for the 'Why a Framework' page */
	xfont-style: italic;
	border-top:2px dotted #F1F3F5;
	border-bottom:2px dotted #F1F3F5;
	font-weight:bold;
	padding:5px 0 7px 0;
}
#content .tabselector a:hover .selected {
	cursor: default;
}
#content .description .contents {
	padding: 20px;
	background-color: #f5f7f8;	
}
#content .contents .title {
	font-size: 150%;
	color: #333;
	padding-bottom: 10px;
}
#content .contents p, td a {
	font-size: 1em;
	line-height: 20px;
}
#content .contents thead {
	display: none; /* hidden from screen but necessary for 508 */
}
#content .contents table {
	width: 420px;
	border-collapse: collapse; 
	border-spacing: 0;
	font-size: 8pt;
}
#content .contents table caption {
	margin-top: 20px;
	width: 100%;
	border: 1px solid #a2abb1;
	background-color: #f5f7f8;
	text-align: left;
	padding: 0.6em;
	color: #333;
	font-weight: bold;
}
#content .contents td {
	width: 50%;
	border: 1px solid #a2abb1;
	background-color: #fff;
	padding: 0.6em;
}


/****************************************************
 **  FOOTER *********************
 ****************************************************/

#footer {
	margin-top: 20px;
	margin-bottom: 10px;
	position: relative;
	background-color: #f1f3f5;
	height: 15px;
	padding-top: 0.6em;
	padding-right: 10px;
	padding-bottom: 0.6em;
	padding-left: 10px;
}
#footer .legal {
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	float: right;
	right: 0.6em;
}
.copyright {
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	position: relative;
}
.tel {
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	text-align: center;
}

#footer a {
	padding-left: 0.6em;
	padding-right: 0.4em;
	color: #4e6f87;
	text-decoration: none;
}
#footer a:hover {
	color: #0c3c60;
	background-color: #fafaff;
}
#footer .and {
	border-left: 1px solid #666;
}
.clear { 
	display: block;
	clear: both; 
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {
	display: block;
}
/* End hide from IE-mac */


/****************************************************
 **  FORMULARIO *********************
 ****************************************************/

#formulario{
	width:300px;
	margin:0px auto 0px auto;
	padding:30px 30px 30px 10px;
	background-image: url(img/fondo_blanco.png);
	background-repeat: repeat;
}

label{
	width:80px;
	float:left;
	margin:0px 0px 20px 0px;
}

#formulario div{
	clear:both;
}

input, select, textarea{
	border:#999999 solid 1px;
	width:150px;
	font-size:1em;
}



input:focus, select:focus, textarea:focus{
	background-color:#7C9C4B;
	color:#FFFFFF;
}

input[type="submit"]{
	width:100px;
	height:20px;
	background:url(img/boton.gif) no-repeat left top;
	border:none;
	text-transform:capitalize;
	background-color:#CCCCCC;
	font-size:1em;
	margin-top:10px;
	color:#7C9C4B;
	font-weight:bold;
}

input[type="submit"]:hover{
	background:url(img/boton_hover.gif) no-repeat #CCCCCC;
}

input[type="submit"]:active{
	background:url(img/boton_active.gif) no-repeat;
}

/* MAIL NAVIDEŅO */

body#mailNav div#container {
	background-image: url(http://www.contenerte.com/felicesfiestas/boletin/img/contenerte-desea-felices-fiestas.jpg);
	background-repeat: no-repeat;
	height: 675px;
	margin-top: 20px;
	padding: 0 20px;
	width: 660px;
}
body#mailNav #cabecera {
	height: 175px;
}
body#mailNav #cabecera a {
	display: block;
	height: 100%;
}
body#mailNav #cabecera a#linkContenerte {
	float: left;
	width: 425px;
}
body#mailNav #cabecera a#linkKapow {
	float: right;
	width: 200px;
}
body#mailNav #main {
	clear:both;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	height: 350px;
}
body#mailNav #main div.main div#content, body#mailNav #main div.main div#content div#contenidos {
	margin: 0;
	width: 660px;
}
body#mailNav #main div.main div#content div#contenidos h3, body#mailNav #main div.main div#content div#contenidos p {
	margin-top: 45px;
	text-align: center;
}