/* - - - - - - - - - - - - - - - - - - - - -


Author : Damian Logghe
URL : http://www.timersys.com

Description : Default stylesheet

Created : 24/03/09


- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

body {
	margin: 0;
	padding: 0;
	line-height: 1.3em;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	font-size: small;
	color: #50697b;
	background:#d9e6ed url(../images/bodyBG.jpg) repeat-x top left;
}
img{
border:none;}


/* ----- header ----- */
#language{
padding-top:2%;
margin-left:90%;
color:#FFF;
}
#language a, a:visited {
color:#FFF;
}

#header {
	position: relative;
	margin: 0 auto;
	width: 770px;
	height: 133px;
	background: transparent url(../images/header.jpg) no-repeat top left;
}
	#header h1{
		margin: 0;
		padding: 0;
	}
		#header h1 a {
			position: absolute;
			top: 20px;
			left: 30px;
			display: block;
			width: 220px;
			height: 70px;
			text-indent: -9000px;
		}
	#header ul {
		width: 416px;
		height: 34px;
		padding-left: 320px;
		margin-top: 60px;
		float: left;
		list-style: none;
	}
		#header ul li {
			text-indent: -9999px;
			display: inline;
			margin: 0;
			padding: 0; 
		}
			#header ul li a {
				color: #afad92;
				text-decoration: none;
				float: left;
				background: transparent url(../images/mainNav.gif) no-repeat;
			}
			#header li#home a {
				width: 104px;
				height: 34px;
			}
			#header li#programas a {
				width: 104px;
				height: 34px;
			}
			#header li#portfolio a {
				width: 104px;
				height: 34px;
			}
			#header li#contacto a {
				width: 104px;
				height: 34px;
			}
		
			#header li#programas a:link, #header li#programas a:visited {
				background-position:-104px 0px;
			}
			#header li#portfolio a:link, #header li#portfolio a:visited {
				background-position:-208px 0px;
			}
			#header li#contacto a:link, #header li#contacto a:visited {
				background-position:-312px 0px;
			}

			#header li#home a:hover, #header li#home a:focus {
				background-position:-0px -34px;
			}
			#header li#programas a:hover, #header li#programas a:focus {
				background-position:-104px -34px;
			}
			#header li#portfolio a:hover, #header li#portfolio a:focus {
				background-position:-208px -34px;
			}
			#header li#contacto a:hover, #header li#contacto a:focus {
				background-position:-312px -34px;
			}
			
			/*----- MAIN NAVIGATION ACTIVE STATE -----*/

			.index #header li#home a {
				background-position: 0px -34px;
			}
			.programas #header li#programas a {
				background-position: -104px -34px;
			}
			.portfolio  #header li#portfolio a {
				background-position:-208px -34px;
			}
			.contacto  #header li#contacto a {
				background-position:-312px -34px;
			}

#leftShadow, #rightShadow {
	position: absolute;
	top: 0px;
	width: 9px;
	height: 454px;
}
	#leftShadow {
		left: 0px;
		background: transparent url(../images/containerDropShadow.gif) repeat-x top left;
	}
	#rightShadow {
		right: 0px;
		background: transparent url(../images/containerDropShadow.gif) repeat-x top right;
	}
	
/*-------sidebar---------*/
.sidebar-section {
font-size:11px;
line-height:16px;
margin-bottom:20px;
padding:6px 0;
width:260px;
float:left;
margin-left:30px;
}	
.profileImage {
background:#FFFFFF none repeat scroll 0 0;
float:left;
margin:3px 6px 2px 0;
padding:4px;
}
.sidebar-section a:link, .sidebar-section a:visited {
text-decoration:none;
}
div.spacer {
clear:both;
display:block;

}
a:link, a:visited {
color:#1E608E;
text-decoration:none;
}
/* ----- container ----- */

#container {
	position: relative;
	margin:  0 auto;
	width: 770px;
	font-size: 98%;
	background: #aac0cd url(../images/containerBG.gif) repeat-y top left;
}
	.gutter {
		position: relative;
		margin: 0 11px;
		padding: 27px 18px 18px 18px;
		height:350px;

		background: transparent url(../images/containerGradient.gif) repeat-x top left;
	}
#container #logointro {
background:transparent url(../images/introBG.jpg) no-repeat scroll left top;
color:#3B505E;
height:259px;
position:relative;
width:403px;
float:left;
}
#container #shipTimer {

color:#3B505E;
height:259px;
position:relative;
width:403px;
float:left;
}
#container #intro {
color:#3B505E;

position:relative;
width:240px;
float:left;
}
#intro2 {
background:#D7E9F3 url(../images/intro2.gif) repeat-x scroll left top;
color:#50697B;
float:left;
font-size:110%;
margin-top:-100px;
position:relative;
width:360px;
padding:20px;
}
#intro2_en{
background:#D7E9F3 url(../images/intro2.gif) repeat-x scroll left top;
color:#50697B;
float:left;
font-size:110%;
margin-top:-40px;
position:relative;
width:360px;
padding:20px;
}


#intro2 strong {
color:#394F5F;
}
#list1 {
float:left;
padding-left:15px;
border-right:1px solid #A8C3CE;
padding-right:20px;

}
#list2 {
float:left;
padding-left:35px;
}
.middle{
padding-right:20px;
}
#list3 {
float:left;
padding-left:35px;
border-left:1px solid #A8C3CE;
}


.tooltip {
cursor:pointer;
}
#container #intro h2, #container #intro p {
			position: relative;
			width: 240px;
		}
		#container #intro h2 {
			margin-left:30px;
			margin-top:10px;
			font-weight: normal;
			font-size: 170%;
		}
		#container #intro p {
	left: 30px;
	font-size: 110%;
	text-align: justify;
		}
			
			
		#container #intro a {
		 
			position: absolute;
			width: 155px;
			display: block;
			line-height: 29px;
			color: #badfe7;
			padding-left:38px;

		}
		.link{
		background-image: url(../images/box.gif) ;
		width:155px;
		height:30px;
		margin-left:30px;		
		}
		#container #intro a:hover {
			color: #87eaff;
		}
			
#shipTimer_text{
float:left;
left: 30px;

text-align: justify;
position: relative;
width: 240px;
}
#shipTimer_text2{
float:left;
margin-bottom:30px;
margin-left:20px;
text-align:justify;
width:650px;
font-size: 110%;
}
#shipTimer_text3{
float:left;
line-height:25px;
margin-left:20px;
text-align:justify;
width:650px;

}
 #shipTimer_text h2, #shipTimer_text p {
			position: relative;
			width: 240px;
		}
		 #shipTimer_text h2 {
		
			margin-top:10px;
			font-weight: normal;
			font-size: 170%;
			
		}
		 #shipTimer_text p {

	font-size: 110%;
	text-align: justify;
		}	
		#shipTimer2 {
background:#D7E9F3 url(../images/intro2.gif) repeat-x scroll left top;
color:#50697B;
float:left;
font-size:110%;
position:relative;
width:670px;
padding:20px;
}
	#shipTimer2_en {
background:#D7E9F3 url(../images/intro2.gif) repeat-x scroll left top;
color:#50697B;
float:left;
font-size:110%;
position:relative;
width:500px;
padding:20px;
}

strong {
color:#394F5F;
}
#demolink{

}
#demolink .go{
margin-bottom: -8px;
}
/* ----- footer ----- */
	
	#container #footer {
		height: 65px;
		font-size: 98%;
		color: #b9ccd8;
		background: #6f8592 url(../images/footer.jpg) no-repeat bottom left;
		margin-top:40px;
		
	}
		#container #footer p {
			padding-top: 20px;
			padding-left: 29px;
		}
		#container #footer a {
			color: #8bd3ff;
		}
			/**************PORTFOLIO**************/

#fotos_web{
width:710px;
float:left;
}
#fotos_web table{
	margin:0 auto;
}
#fotos_web  td{
text-align:center;
vertical-align:top;
width:345px;
}
#fotos_web .herramientas{
font-size:11px;
margin-bottom:30px;
margin-left:20px;
text-align:left;
width:310px;
}
#fotos_web img {
padding:15px;
background-color:#D7E9F3;
border:1px solid #999;
height:115px;
}
#fotos_web a{
font-size:16px;;
}		
/* ----- contact ----- */
	
	#container #contactWrapper {
		position: relative;
		margin-top: 35px;
		margin-left:75px;
		
		width: 560px;
		float: left;
		background: #d7e9f3 url(../images/contactBG.gif) repeat-y top left;
	}
		#container #contactWrapper #contactInfo {
			float: left;
			width: 228px;
			height: 350px;
			background: transparent url(../images/contactInfoDropShadow.gif) no-repeat top right;
		}

			#container #contactWrapper #contactInfo h2 {
				padding-top: 34px;
				padding-left: 14px;
				font-size: 140%;
				color: #394f5f;
				background: transparent url(../images/contactInfoTop.gif) no-repeat top left;
			}
			#container #contactWrapper #contactInfo h3, #container #contactWrapper #contactInfo p {
				margin-left: 16px;
			}
			#container #contactWrapper #contactInfo h3 {
				padding-top: 27px;
				margin-right: 23px;
				margin-top: 8px;
				margin-bottom: 3px;
				font-size: 110%;
				color: #26353d;
				border-top: 1px solid #c6d7e1;
			}
			#container #contactWrapper #contactInfo p {
				margin-bottom: 10px;
				margin-top: 0;
			}
			#container #contactWrapper #contactInfo a {
				font-weight: bold;
				color: #5bb3dd;
			}
			
		#container #contactWrapper #contactForm {
			position: relative;
			width: 332px;	
			float: right;
			background: transparent url(../images/contactFormTop.gif) repeat-x top left;
		}
			#container #contactWrapper #contactForm a {
				position: relative;
				display: block;
				text-indent: -9000px;
				left: 295px;
				top: 12px;
				width: 26px;
				height: 19px;
				background: url(../images/contactTopBtn.gif) no-repeat top right;
			}
		#container #contactWrapper form {
			float: left;
			padding: 22px 17px 3px 10px;
		}
		/* 
		Hack for IE 6 and below 
		-> add more padding below the form
		*/
		* html #container #contactWrapper form {
			padding: 36px 17px 14px 10px;
		}
			#container #contactWrapper form .btn {
				float: left;
			}
			#container #contactWrapper form #formStatus {
				margin-top: 7px;
				float: right;
				width: 210px;
			}
				#container #contactWrapper form #formStatus p {
					padding-left: 19px;
					margin-top: 0;
				}
				#container #contactWrapper form #formStatus .error {
					color: red;
					background: transparent url(../images/errorIcon.gif) no-repeat center left;
				}
				#container #contactWrapper form #formStatus .success {
					background: transparent url(../images/successIcon.gif) no-repeat center left;
				}


/* ----- form ----- */
input, textarea {
	font-size: 110%;
	padding: 4px;
	border: none;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
label {
	font-weight: bold;
	color: #394f5f;
}
textarea {
	height: 130px;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
.txt {
	width: 296px;
	color: #517990;
	border: none;
	background: #abcadb;
}
.inputHighlighted{  /* Highlighting style */
	width: 296px;
	color: #fff;
  	background-color:#6f8b9b;
}

/* ---- class -----*/
.clear {
	clear: both;
}