/*
-----------------------------------------------
Caribdis Hoja de Estilo CSS
© 2009 | http://www.caribdis.com.ar/
----------------------------------------------- */

/* BASE
----------------------------------------------- */

body {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 10px 0 0 0;
	background: #444444 url(../images/bg.jpg) no-repeat top left fixed;
	color: #CCCCCC;
}

a {
	outline: none;
}

acronym {
	border: none;
	cursor: help;
}

blockquote {
	font-style: italic;
	margin: 20px 0 20px 70px;
	border-left: 2px dotted #1990A4;
	padding-left: 10px;
}

h1 {
	color: #666666;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-size: 215%;
	margin: 0;
	letter-spacing: 1px;
	text-align: left;
}

h2 {
	background: transparent url(../images/h2.gif) no-repeat left center;
	color: #5F5F5F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 135%;
	margin-top: 45px;
	padding: 0 0 0 30px;
	line-height: 33px;
	font-weight: normal;
	letter-spacing: 3px;
	text-align: left;
}

h3 {
	font-size: 92%;
	margin: 35px 0 0 0;
}

h4 {
	padding-left: 6px;
	margin-bottom: 10px;
	font-variant: small-caps;
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 105%;
}

img {
	border: none;
}

input, textarea {
	background: #4F4F4F;
	border: 1px solid #5F5F5F;
	padding: 3px;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	font-size: 100%;
}

/* ENCABEZADOS
----------------------------------------------- */

h1.main {
	background: transparent url(../images/logo-main.gif) no-repeat;
	width: 419px;
	height: 76px;
}

h1.main-servicios {
	background: transparent url(../images/logo-servicios.gif) no-repeat;
	width: 419px;
	height: 76px;
}

h1.main-clientes {
	background: transparent url(../images/logo-clientes.gif) no-repeat;
	width: 419px;
	height: 76px;
}

h1.main-contacto {
	background: transparent url(../images/logo-contacto.gif) no-repeat;
	width: 419px;
	height: 76px;
}

h1.main-plantillas {
	background: transparent url(../images/logo-plantillas.gif) no-repeat;
	width: 419px;
	height: 76px;
}

h1.main-recursos {
	background: transparent url(../images/logo-recursos.gif) no-repeat;
	width: 419px;
	height: 76px;
}

#content-main h4 {
	border-left: 2px solid #1990A4;
}

#content-servicios h4 {
	border-left: 2px solid #57A419;
}

#content-plantillas h4 {
	border-left: 2px solid #FF4549;
	text-align: left;
}

#content-recursos h4 {
	border-left: 2px solid #FF7800;
	text-align: left;
}

/* ENCABEZADOS (EN)
----------------------------------------------- */

h1.main-en {
	background: transparent url(../images/logo-main-en.gif) no-repeat;
	width: 415px;
	height: 76px;
}

h1.main-services {
	background: transparent url(../images/logo-services.gif) no-repeat;
	width: 415px;
	height: 76px;
}

h1.main-portfolio {
	background: transparent url(../images/logo-portfolio.gif) no-repeat;
	width: 415px;
	height: 76px;
}

h1.main-contact {
	background: transparent url(../images/logo-contact.gif) no-repeat;
	width: 415px;
	height: 76px;
}

h1.main-templates {
	background: transparent url(../images/logo-templates.gif) no-repeat;
	width: 415px;
	height: 76px;
}

/* ELEMENTOS
----------------------------------------------- */

* html #nav {
	position: absolute;
}

* html #container {
	margin-top: 20px;
}

#container {
	margin: 30px 0 0 280px;
}

#content-main, #content-clientes, #content-contacto, #content-plantillas, #content-servicios {
	font-size: 96%;
}

#content-clientes, #content-plantillas {
	text-align: center;
}

#content-plantillas ul, .pleft {
	text-align: left;
}

#content-plantillas ul li, #content-recursos ul li {
	list-style-image: url(../images/ul.jpg);
}

#content-main a {
	color: #1990A4;
	text-decoration: none;
}

#content-main a.enlace:hover {
	background: #1990A4;
	color: #CCCCCC;
}

#content-servicios a {
	color: #57A419;
	text-decoration: none;
}

#content-servicios a:hover {
	background: #57A419;
	color: #CCCCCC;
}

#content-clientes a {
	color: #CC66FF;
	text-decoration: none;
}

#content-clientes a.enlace:hover {
	background: #CC66FF;
	color: #EEEEEE;
}

#content-clientes img.sld, #content-plantillas img.sld {
	padding: 30px 33px 30px 27px;
	background: url(../images/thmb-bg.gif) no-repeat center top;
	margin: 0 auto;
}

#content-plantillas a {
	color: #FF4549;
	text-decoration: none;
}

#content-plantillas a.enlace:hover {
	background: #FF4549;
	color: #EEEEEE;
}

#content-recursos a {
	color: #FF7800;
	text-decoration: none;
}

#content-recursos a:hover {
	background: #FF7800;
	color: #EEEEEE;
}

#nav {
	position: fixed;
	left: 30px;
	top: 0px;
	width: 180px;
	z-index: 2;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav ul li {
	margin: 30px 0;
}

#nav a.nosotros {
	background: transparent url(../images/nosotros.gif) no-repeat top;
	width: 109px;
	height: 22px;
	display: block;
}

.nosotros-activo  {
	width: 109px;
	height: 22px;
	display: block;
}

#nav a.nosotros:hover, .nosotros-activo {
	background: transparent url(../images/nosotros.gif) no-repeat bottom;
}

#nav a.servicios {
	background: transparent url(../images/servicios.gif) no-repeat top;
	width: 105px;
	height: 22px;
	display: block;
}

.servicios-activo {
	width: 105px;
	height: 22px;
	display: block;
}

#nav a.servicios:hover, .servicios-activo {
	background: transparent url(../images/servicios.gif) no-repeat bottom;
}

#nav a.recursos {
	background: transparent url(../images/recursos.gif) no-repeat top;
	width: 101px;
	height: 22px;
	display: block;
}

.recursos-activo {
	width: 101px;
	height: 22px;
	display: block;
}

#nav a.recursos:hover, .recursos-activo {
	background: transparent url(../images/recursos.gif) no-repeat bottom;
}

#nav a.clientes {
	background: transparent url(../images/clientes.gif) no-repeat top;
	width: 97px;
	height: 22px;
	display: block;
}

#nav a.clientes:hover, .clientes-activo {
	background: transparent url(../images/clientes.gif) no-repeat bottom;
}

.clientes-activo {
	width: 97px;
	height: 22px;
	display: block;
}

#nav a.plantillas {
	background: transparent url(../images/plantillas.gif) no-repeat top;
	width: 167px;
	height: 22px;
	display: block;
}

.plantillas-activo {
	width: 167px;
	height: 22px;
	display: block;
}

#nav a.plantillas:hover, .plantillas-activo {
	background: transparent url(../images/plantillas.gif) no-repeat bottom;
}

#nav a.contacto {
	background: transparent url(../images/contacto.gif) no-repeat top;
	width: 115px;
	height: 22px;
	display: block;
}

.contacto-activo {
	width: 115px;
	height: 22px;
	display: block;
}

#nav a.contacto:hover, .contacto-activo {
	background: transparent url(../images/contacto.gif) no-repeat bottom;
}

#pie {
	background: transparent url(../images/separador.gif) no-repeat center top;
	margin: 20px auto 0 auto;
	text-align: center;
	color: #999999;
	padding: 15px;
	font-weight: bold;
	font-size: 100%;
	clear: both;
}

#w3c {
	text-align: center;
	margin: 10px 0 0 0;
	font-size: 80%;
}

#w3c img {
	vertical-align: text-bottom;
}

#w3c a {
	color: #666666;
	text-decoration: none;
}

#w3c a:hover {
	background: transparent;
	color: #999;
}

#w3c p {
	margin: 0;
}


/* NAV EN
----------------------------------------------- */

#nav ul li.spmarg {
	margin: 30px 0 -7px 0;
}

#nav a.company {
	background: transparent url(../images/company.gif) no-repeat top;
	width: 166px;
	height: 29px;
	display: block;
}

.company-activo  {
	width: 166px;
	height: 29px;
	display: block;
}

#nav a.company:hover, .company-activo {
	background: transparent url(../images/company.gif) no-repeat bottom;
}

#nav a.services {
	background: transparent url(../images/services.gif) no-repeat top;
	width: 99px;
	height: 22px;
	display: block;
}

.services-activo {
	width: 99px;
	height: 22px;
	display: block;
}

#nav a.services:hover, .services-activo {
	background: transparent url(../images/services.gif) no-repeat bottom;
}

#nav a.portfolio {
	background: transparent url(../images/portfolio.gif) no-repeat top;
	width: 106px;
	height: 22px;
	display: block;
}

#nav a.portfolio:hover, .portfolio-activo {
	background: transparent url(../images/portfolio.gif) no-repeat bottom;
}

.portfolio-activo {
	width: 106px;
	height: 22px;
	display: block;
}

#nav a.templates {
	background: transparent url(../images/templates.gif) no-repeat top;
	width: 191px;
	height: 28px;
	display: block;
}

.templates-activo {
	width: 191px;
	height: 28px;
	display: block;
}

#nav a.templates:hover, .templates-activo {
	background: transparent url(../images/templates.gif) no-repeat bottom;
}

#nav a.contact {
	background: transparent url(../images/contact.gif) no-repeat top;
	width: 99px;
	height: 22px;
	display: block;
}

.contact-activo {
	width: 99px;
	height: 22px;
	display: block;
}

#nav a.contact:hover, .contact-activo {
	background: transparent url(../images/contact.gif) no-repeat bottom;
}

/* CLASES
----------------------------------------------- */

.caribdis {
	color: #1990A4;
}

.serv {
	color: #57A419;
}

.recu {
	color: #FF7800;
}

.clie {
	color: #CC66FF;
}

.plan {
	color: #FF4549;
}

.cont {
	color: #FF40B8;
}

.center {
	text-align: center;
}

.boton {
	background: transparent;
	border: 1px solid #5F5F5F;
	margin: 10px 5px 0 0;
}

.boton:hover {
	color: #FF40B8;
}

.inv {
	position: absolute;
	left: -9999px;
}

.hidden {
		display: none;
}

.formu {
	width: 500px;
	margin: 0 auto;
}

.info p {
	margin: 2px 0;
}

.separador {
	background: transparent url(../images/separador.gif) no-repeat center top;
	width: 481px;
	height: 12px;
	margin: 5px auto;
}

.miniweb {
	border: 1px solid #5F5F5F;
	padding: 10px;
}

.msn {
	text-align: center;
	margin-bottom: 10px;
}

.sitios {
	font-size: 95%;
	margin: 20px auto 10px auto;
}

.sitios h3 {
	font-size: 96%;
	font-weight: bold;
	margin-top: 0;
}

.sitios p {
	margin: 0;
}

.anterior {
	float: left;
	margin: 20px 30px 20px 0;
}

.siguiente {
	float: right;
	margin: 20px 30px 20px 0;
}

/* Jflow slider */

#flow  {
	width: 444px;
	height: 345px;
	padding-top: 30px;
	overflow: hidden;
	background: url(../images/thmb-bg.gif) no-repeat center top;
	margin: 0 auto;
}

.prevNext {
	float: left;
	margin-top: 130px;
}

.has-script .prevNext{ 
	display: block; 
}

.prevNext img {
	cursor: pointer;
}

img.jFlowPrev {
	padding-left: 10px;
	margin-right: 39px;
}

img.jFlowNext {
	margin-left: 40px;
}

#jFlowSlide {
	width: 313px;
	float: left;
}

#slides {
	margin-left:20px;
	width: 313px;
}

#slides img.sld {
	margin-right: 10px;
	padding: 0;
}