/*   
Theme Name: Hybrid Tinkerbell
Author: Cristian Bosch
Author URI: www.maquinastudio.com
Date: 04.09.2009
*/


#rightColB a, #rightColB .phone3{
	color:#cb991b;
}
#es{
	height: 100%;
	width: 900px;
	padding-top: 145px;
}

#es p{
	font-size: 1.9em;
	color: #ffffff; /*#0ca9bb;*/
	line-height: 1.4em;
	font-family: "Lucida Grande", Arial, Helvetica;
	font-style: italic;
	font-weight: 200;
}


.about-page #mainContentBase{
	height: 550px;
}

.home-page #mainContentBase{
	height:178px;
}

.contact-page #mainContentBase{
	height:580px;
}

.services-page #mainContentBase{
	height:855px;
}

.home-page #main{
	height:630px;
}

.home-page #footer{
	position:absolute;
	top:685px;
}

.portfolio-page #mainContentBase{
	height:600px;
}

.blog-page #mainContentBase{
	height:600px;
}

.legal-page #mainContentBase{
	height:800px;
}

/* BASIC --------------------------------------------------- */
* {
  	margin: 0;
  	padding: 0;
}

body{
  	background-color:#03080a;
	background-image: url(../_assets/images/bg.jpg);
	background-position:top center;
	background-repeat:no-repeat;

}

body .portfolio-page{
	background-image: url(../_assets/images/bg-portfolio.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	}


img{
	border:none;
}

a{
	text-decoration:none;
	outline:none;
}

a:visited{color:#b5b5b5;}

a:hover{color:#0ca9bb;}

a:active{color:#b5b5b5;}

li{text-decoration: none; list-style-type: none;}

.sub{margin-left:20px;}

/* GENERAL TYPOGRAPHY --------------------------------------- */
body {
  	font: 78.5%/2.0  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Helvetica", Arial, Verdana, sans-serif;
	color:#b5b5b5;
}

.signature2{
	font-size:0.9em;
	font-style:italic;
	text-align:left;
	line-height:1.2em;
	margin-top:5px;	
}

h2{
	color:#ffffff;

	font-weight:300;
}

.blog-page h2{
	border-bottom:1px dotted #57646c;
	
}

.box2 li a{
	color:#f6f6f6;
	font-weight: 600;
}

#mainContent p{
	
}



#footer{
	color:#5c8c92;
	font-size:0.9em;
	line-height:1.6em;
}

#footer a, .phone{
	color:#0ca9bb;
	
}


#footer h4{
	color:#5c8c92;

}

#rightColA{
	line-height:1.6em;
}

#rightColB, #rightColB a{
	color:#e1e1e1;
	line-height:1.6em;
}

.form{
	line-height:1.4em;
}

.phone2{
	font-family:Arial;
	font-size:1.3em;
	color:#ebd809;
	margin-top:5px;
}

.blog-page #rightColB li{
	list-style:none;
	border-bottom:1px dotted #999999;
	padding:3px 0 3px 0;
	
}

.sidetitle{
	margin-top:30px;
}

.date{
	font-size:0.9em;
	color:#6b7b83;
}

.comments{
	font-size:0.9em;
	color:#258994;
}

.portfolio-page #mainContent p{
	line-height:1.4em;
}

.captions{
	color:#ffffff;
}



/* WRAP ----------------------------------------------------- */
#wrap{
	width: 100%;
	height: 100%;
	
	
}

#home-motif{	
	position:absolute;
	background-image: url(../_assets/images/motif-home.png);
	width:481px;
	height:537px;
	z-index:2;

	
}

#motif-contact{	
	position:absolute;
	background-image: url(../_assets/images/motif-contact.png);
	width:690px;
	height:520px;
	top:350px;
	z-index:0;
}

#motif-services-about{	
	position:absolute;
	background-image: url(../_assets/images/motif-services-about.png);
	width:477px;
	height:491px;

	
}

#motif-blog{	
	position:absolute;
	background-image: url(../_assets/images/motif-blog.png);
	width:457px;
	height:416px;

	
}

#motif-portfolio{	
	position:absolute;
	background-image: url(../_assets/images/motif-portfolio.png);
	width:491px;
	height:467px;

	
}

/* NAVIGATION ----------------------------------------------- */
#nav{
	width:100%;
	height: 55px;
	background-color:#000000;
	border-bottom:1px solid #b0afaf;
	/*position:relative;
	top:0;*/
  	opacity:0.35;
	z-index:-1;

}

#nav-internal{
	position:absolute;
	top:0;
	width:900px;
	height: 55px;
	left:50%;
	margin-left:-450px;
	z-index: 7;

}

.logo{
	margin-top:11px;
	float:left;
}

#menu{
	margin-top:5px;
	float:right;
	width:560px;
	height:37px;
}


#menu li{
	list-style:none;
	float:left;
}

#menu a {
	display:block;
	height:37px;
	text-decoration:none;
	text-indent:-5000px;
	background-repeat: no-repeat;
	background-position:0 0;
	margin-right:26px;
}

#menu #home{
	background-image:url(../_assets/images/nav-home.png);
	width:39px;
}

#menu #about{
	background-image:url(../_assets/images/nav-about.png);
	width:49px;
}

#menu #services{
	background-image:url(../_assets/images/nav-services.png);
	width:64px;
}

#menu #portfolio{
	background-image:url(../_assets/images/nav-portfolio.png);
	width:76px;
}

#menu #blog{
	background-image:url(../_assets/images/nav-blog.png);
	width:37px;
}

#menu #contact{
	background-image:url(../_assets/images/nav-contact.png);
	width:63px;
}

#menu #login{
	background-image:url(../_assets/images/nav-login.png);
	width:74px;
	margin-right:0px;
}

#menu #inicio{
	background-image:url(../_assets/images/nav-inicio.png);
	width:42px;
}

#menu #estudio{
	background-image:url(../_assets/images/nav-estudio.png);
	width:58px;
}

#menu #servicios{
	background-image:url(../_assets/images/nav-servicios.png);
	width:71px;
}

#menu #trabajos{
	background-image:url(../_assets/images/nav-trabajos.png);
	width:72px;
}

#menu #contacto{
	background-image:url(../_assets/images/nav-contacto.png);
	width:73px;
}

#menu #home:hover,#menu #contact:hover,#menu #blog:hover,#menu #portfolio:hover,#menu #services:hover,#menu #about:hover, #menu #inicio:hover, #menu #estudio:hover, #menu #servicios:hover, #menu #trabajos:hover, #menu #contacto:hover {background-position:0px -38px;}


#subnav{
	margin-top:25px;
	float:right;
	width:250px;
	height:222px;
}


#subnav li{
	list-style:none;
	float:left;
}

#subnav a {
	display:block;
	height:72px;
	width:250px;
	text-decoration:none;
	background-repeat: no-repeat;
	background-position:0px -72px;
	text-indent:-5000px;
	margin-bottom:5px;
}

#subnav #interactive{
	background-image:url(../_assets/images/subnav-interactive.png);
}

#subnav #identity{
	background-image:url(../_assets/images/subnav-identity.png);
}

#subnav #e-marketing{
	background-image:url(../_assets/images/subnav-marketing.png);
}

#subnav #interactivo{
	background-image:url(../_assets/images/subnav-interactivo.png);
}

#subnav #branding{
	background-image:url(../_assets/images/subnav-branding.png);
}


#subnav #interactive:hover, #subnav #identity:hover, #subnav #e-marketing:hover, #subnav #interactivo:hover, #subnav #branding:hover{
	background-position:0 0;
}



.interactive #interactive, .identity #identity, .e-marketing #e-marketing, .interactivo #interactivo, .branding #branding {
	background-position:0 0;
}


.home-page #home, .about-page #about, .services-page #services, .portfolio-page #portfolio, .blog-page #blog, .contact-page #contact, .inicio-pag #inicio, .estudio-pag #estudio, .servicios-pag #servicios, .trabajos-pag #trabajos, .contacto-pag #contacto  {
	background-position:0px -38px;	
}

/* MAIN ----------------------------------------------------- */
#main{
	
	width:900px;
	margin: 0 auto;
}

#flashcontentA{
	position:relative;
	width:900px;
	height: 375px;
	z-index:5;
	
}

#flashcontentB{
	width:900px;
	height: 160px;
	
}

#headerB{
	width:900px;
	height: 160px;
}

#headerA{
	width:900px;
	height: 375px;
}

#headerC{
	width:900px;
	height: 60px;
}

#contentA{
	position:absolute;
	top:430px;
	width:900px;
	height: 210px;
	margin-bottom:30px;
	z-index: 6;
	
}

#contentB{
	position:relative;
	width:900px;
	margin-bottom:40px;
}

#leftColA{
	width:280px;
	height: 210px;
	float:left;
	
}


#rightColA{
	width:606px;
	height: 210px;
	float:right;
	position:relative;
	
}


#leftColB{
	width:650px;
	float:left;
	position:relative;
	
}


#rightColB{
	width:220px;
	float:right;
	
}

.portfolio-page #rightColB{
	width:250px;
	position:absolute;
	top:0px;
	right:0px;
	
}

.callout{
	margin-bottom:10px;
}

#mainContentBase{
	width:100%;
	background-color:#323e45;
	opacity:0.45;
}



#mainContent{
	position:absolute;
	width:600px;
	top:25px;
	left:25px;	
}

.box{
	position:absolute;
	width:270px;
	height:175px;
	top:20px;
}

.box1{	
	left:20px;	
}

.box2{
	right:20px;
}

.box img{
	margin-bottom:5px;
}
#liner{
	position:absolute;
	top:20px;
	left:298px;
	height:170px;
	border-left:1px dotted #57646c;
	
}


.internal-height{
	height:400px;
}

.topA{
	width:100%;
	height:16px;
	background:transparent url(../_assets/images/roundA.png);
	
}

.bottomA{
	width:100%;
	height:16px;
	background:transparent url(../_assets/images/roundA.png);
	background-position:bottom;
	
}

.topB{
	width:100%;
	height:16px;
	background:transparent url(../_assets/images/roundB.png);
	
}

.bottomB{
	width:100%;
	height:16px;
	background:transparent url(../_assets/images/roundB.png);
	background-position:bottom;
	
}

.more{
	position:absolute;
	bottom:0px;
	right:0px;
}

.titles{
	margin-bottom:5px;
}

.portfolio-page .titles{
	margin-bottom:25px;
}

.about-page .titles{
	margin-bottom:20px;
}
.subtitle{
	margin:20px 0 5px 0;
}

.button{
	margin:5px 0 15px 0;
}

.button2{
	margin-top:15px;
	
}

.backbutton1{
	margin: 15px 0 0 410px;
}


.backbutton2{
	margin: 15px 0 0 510px;
}

.icon{
	margin-top:15px;
}

.icon2{
	margin:10px 10px 0 0;
}

#clientquote{
	width:220px;
	margin-left:25px;
}

.teasers{
	margin-bottom:20px;

}

.gutter{
	margin-right:20px;
	
}


.bigad{
	width:336px;
	height:280px;
	margin-bottom:20px;
}

.smallad{
	width:300px;
	height:250px;
	margin-bottom:20px;
}

.slimad{
	width:468px;
	height:60px;
	margin-bottom:20px;
}

.horizontal{
	width:600px;
	height:180px;
}


#flickr{
width: 200px;
margin-top: 10px;

}

#flickr a img{
float:left;
margin:0 10px 10px 0;
background:#3f4e4e;
padding:4px;
width:65px;
height:65px;

}



/* FOOTER --------------------------------------------------- */
#footer{
	width:100%;
	height: 180px;
	background-color:#054c5b;
	padding-top:30px;
	background-image:url(../_assets/images/liner.gif);
	background-repeat: repeat-x;
	/*z-index: -2;*/
}


#footer-internal{
	width:900px;
	height: 180px;
	margin: 0 auto;
	position:relative;
}

.location{
	width:150px;
	height:140px;
	margin-right:10px;
	float: left;
		
}

.location img{
	margin-top:7px;
}

.border{
	border-left:1px dotted #3e7580;
	padding-left:15px;
	
}

.signature{
	position:absolute;
	top:0px;
	right:0px;
	height:50px;
	text-align:right;	
}

.signature img{
	margin-left:5px;
}

.legal{
	position:absolute;
	bottom:20px;
	right:0px;
}


/* FORMS ---------------------------------------------------- */

.form{
	position:absolute;
	width:275px;
	height:500px;
	top:40px;
	
}

.form p{
	margin-bottom:15px;
}

.form1{	
	left:0px;	
}

.form2{
	right:0px;
}

.form input{
	width:275px;
	height:20px;
	border:none;
	margin:5px 0 10px 0;
	background-color:#e9e9e9;
	border: 1px solid #ffffff;
}

.form textarea{
	width:275px;
	height:100px;
	margin:5px 0 10px 0;
	background-color:#e9e9e9;
	border: 1px solid #ffffff;
	overflow:auto;
	max-width:275px;
}

.form select{
	width:275px;
	margin:5px 0 10px 0;	
}

.form .send{
	width:75px;
	height:24px;
	margin-left:175px;
	background-image:url(../_assets/images/button-send.png);
}


button{
	width:75px;
	height:24px;
	margin:10px 0px 0px 202px;
	background-image:url(../_assets/images/button-send.png);
	border:none;
	background-color:#1e2b33;
}

button:hover{
	cursor:pointer;
}

.form label{

}
#formliner{
	position:absolute;
	top:40px;
	left:300px;
	height:500px;
	border-left:1px dotted #57646c;
	
}



/* MISCELANEOUS --------------------------------------------- */
.stroke{border:1px solid red;}

.right{float:right;}

.left{float:left;}

.clear{clear:both;}