/*   
Theme Name: Hybrid-Tinkerbell
Theme URI: http://www.maquinastudio.com
Description: A nice bold theme inspired by Tinkerbell
Author: Cristian Bosch
Author URI: http://www.maquinastudio.com
Version: 1.0
*/

@import url('./style-remix.css');

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



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

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

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

.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:1200px;
}

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

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

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

img{
	border:none;
}

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

a{}

a:visited{color:#b5b5b5;}

a:hover{color:#b5b5b5;}

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

.sub{margin-left:20px;}

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

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

h2, h3, #mainContent a, #mainContent a:visited{
	color:#ffffff;
	font-weight:300;
}

#mainContent a:hover{color:#0ca9bb;}

#mainContent .metamaq a{
	font-size:0.9em; 
	color:#258994;
	}


h4{
	color:#f6f6f6;
}

#mainContent .entry p{
margin-bottom: 17px;
	
}



#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;
}



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

.captions{
	color:#ffffff;
}



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

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

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

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

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

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

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

}

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

.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(images/nav-home.png);
	width:39px;
}

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

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

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

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

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

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

#menu #home:hover,#menu #contact:hover,#menu #blog:hover,#menu #portfolio:hover,#menu #services:hover,#menu #about: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(images/subnav-interactive.png);
}

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

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


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



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


.home-page #home, .about-page #about, .services-page #services, .portfolio-page #portfolio, .blog-page #blog, .contact-page #contact{
	background-position:0px -38px;	
}

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

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

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

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

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

#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(images/roundA.png);
	
}

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

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

.bottomB{
	width:100%;
	height:16px;
	background:transparent url(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:3px;
width:65px;
height:65px;

}



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


#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;
}

.form textarea{
	width:275px;
	height:100px;
	margin:5px 0 10px 0;
	background-color:#e9e9e9;
}

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

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


button{
	width:75px;
	height:24px;
	margin:10px 0px 0px 210px;
	background-image:url(images/button-post.png);
	border:none;
	background-color:#182025;
}

button:hover{
	cursor:pointer;
}

.form label{

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



/* MISCELANEOUS --------------------------------------------- */
.top15{margin-top: 15px;}
.top10{margin-top: 10px;}

.stroke{border:1px solid red;}

.right{float:right;}

.left{float:left;}

.clear{clear:both;}

.justify{text-align: left;}