/* @override
	http://mwl/stylesheets/style-cold.css */

/* 
    Document   : style
    Created on : 02-Feb-2010, 12:27:25
    Author     : Marco Jardim
    Description:
        Main Stylesheet file for Made With Love site
*/

/* @group CSS Reset */

/* http://meyerweb.com/eric/tools/css/reset/index.html */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html {
	background: url('/images/bg-main.gif') 0 0 repeat;
}

body {
	line-height: 1;
	color: #71706b;
	font-family: Georgia, Times New Roman;
	background: ;
}

.konamicode {
            
    -webkit-transform:rotate(180deg) scale(1,-1);
    -moz-transform:rotate(180deg) scale(1,-1);
    
    }

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	/*outline: 0;*/
}

input:focus,
textarea:focus {
            
    outline-color: rgb(246,248,248);
    
    }

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

input, textarea {
	border: none;
}

form {

		display: inline;

	}

/* @end */

/* @group Grid */

/*  
	12 Columns: 60px Width
	13 Gutters: 20px Width
	
	2 Gutters on both ends of the grid
*/

.grid1, .grid1x,
.grid2, .grid2x,
.grid3, .grid3x,
.grid4, .grid4x,
.grid5, .grid5x,
.grid6, .grid6x,
.grid7, .grid7x,
.grid8, .grid8x,
.grid9, .grid9x,
.grid10,.grid10x,
.grid11,.grid11x,
.grid12,.grid12x,
.gridfull { 
			
		display: inline;
		float: left;
		position: relative;
		margin-left: 10px;
		margin-right: 10px; /* With equal margins across all elements no need for Alpha or Omega classes */
	
	}

								/*  Col + Gutr 	*/
.grid1 { width: 60px;  }		/*  60  + 0		*/
.grid2 { width: 140px; }		/*	120 + 20 	*/
.grid3 { width: 220px; }		/*	180 + 40 	*/
.grid4 { width: 300px; }		/*	240 + 60 	*/
.grid5 { width: 380px; }		/*	300 + 80 	*/
.grid6 { width: 460px; }		/*	360 + 100 	*/
.grid7 { width: 540px; }		/*	420 + 120 	*/
.grid8 { width: 620px; }		/*	480 + 140 	*/
.grid9 { width: 700px; }		/*	540 + 160 	*/
.grid10{ width: 780px; }		/*	600 + 180 	*/
.grid11{ width: 860px; }		/*  660 + 200 	*/
.grid12{ width: 940px; }		/*  720 + 220 	*/
.gridfull{ width: 100%; }		/*  660 + 200 	*/

								/*  Col + Gutr 	*/
.grid1x { width: 80px;  }		/*  60  + 0		*/
.grid2x { width: 160px; }		/*	120 + 20 	*/
.grid3x { width: 240px; }		/*	180 + 40 	*/
.grid4x { width: 320px; }		/*	240 + 60 	*/
.grid5x { width: 400px; }		/*	300 + 80 	*/
.grid6x { width: 480px; }		/*	360 + 100 	*/
.grid7x { width: 560px; }		/*	420 + 120 	*/
.grid8x { width: 640px; }		/*	480 + 140 	*/
.grid9x { width: 720px; }		/*	540 + 160 	*/
.grid10x{ width: 800px; }		/*	600 + 180 	*/
.grid11x{ width: 880px; }		/*  660 + 200 	*/
.grid12x{ width: 960px; }		/*  720 + 220 	*/

.push1 { padding-left: 80px;  }	/*  60  + 20 	*/
.push2 { padding-left: 160px; }	/*  120 + 40 	*/
.push3 { padding-left: 240px; }	/*  180 + 60 	*/
.push4 { padding-left: 320px; }	/*  240 + 80 	*/
.push5 { padding-left: 400px; }	/*  300 + 100 	*/
.push6 { padding-left: 480px; }	/*  360 + 120 	*/
.push7 { padding-left: 560px; }	/*  420 + 140 	*/
.push8 { padding-left: 640px; }	/*  480 + 160 	*/
.push9 { padding-left: 720px; }	/*  540 + 180 	*/
.push10{ padding-left: 800px; }	/*  600 + 200 	*/
.push11{ padding-left: 880px; }	/*  660 + 220 	*/

.drag1 { margin-left: -80px;  }	/*  60  + 20 	*/
.drag2 { margin-left: -160px; }	/*  120 + 40 	*/
.drag3 { margin-left: -240px; }	/*  180 + 60 	*/
.drag4 { margin-left: -320px; }	/*  240 + 80 	*/
.drag5 { margin-left: -400px; }	/*  300 + 100 	*/
.drag6 { margin-left: -480px; }	/*  360 + 120 	*/
.drag7 { margin-left: -560px; }	/*  420 + 140 	*/
.drag8 { margin-left: -640px; }	/*  480 + 160 	*/
.drag9 { margin-left: -720px; }	/*  540 + 180 	*/
.drag10{ margin-left: -800px; }	/*  600 + 200 	*/
.drag11{ margin-left: -880px; }	/*  660 + 220 	*/

/* These two rules probably won't be necessary but... */
.pushgutter  { padding-left: 20px; }
.pushgutter-r{ padding-right:20px; }
.draggutter  { margin-left: -20px; }
.draggutter-h{ margin-left: -10px; }
.draggutter-r{ margin-right:-20px; }

.clear {
	clear: both;
}

/* @end */

/* @group General Rules */

* {
	text-shadow: rgba(255,255,255,0.75) 0 1px 0;
}

h1, h2, h3, h4, h5, h6 {

	margin-bottom: 20px; 

	font-weight: normal;
	line-height: 1.2em; 
	
	color: #575451;
	
	}
	
.aside h1,
.aside h2,
.aside h3,
.aside h4,
.aside h5,
.aside h6 {
			
	margin-bottom: 10px;
	
	}

h1 { font-size: 45px; }
h2 { font-size: 35px; }
h3 { font-size: 24px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }

a {
	
	position: relative;
			
	color: #4D6399;
	text-decoration: none;
	
	font-size: 0.9em;
	font-family: Monaco, 'Lucida Console';
	word-spacing: 0,05em;
	
	}
	
	a:hover  { color: #566FAB; }
	a:active { color: #3E507B; }
	
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
				
		font-size: 1em;
		font-family: Georgia, 'Times New Roman';
		
		word-spacing: normal;
		
		color: #575451;
		
		}
		
		h1 a:hover,
		h2 a:hover,
		h3 a:hover,
		h4 a:hover,
		h5 a:hover,
		h6 a:hover {
					
			color: rgb(115, 124, 127);
			
			}
	
p {
			
	line-height: 1.5em;
	margin: 0.5em 0;
	
	}
	
blockquote {
			
	padding: 10px 0 0 80px;
	margin: 0 10px 0 0;
	
	background: transparent url('/images/quote.png') 0 0 no-repeat;
	
	font-style: italic;
	font-size: 20px;
	
	}
	
	blockquote p,
	blockquote h3 { margin: 0.5em 0 0; }
	
	blockquote a {
	            
	    color: #575451;
	    
	    font-family: Georgia, 'Times New Roman';
	    
	    }
	    
	    blockquote a:hover,
	    blockquote a:active {
	                
	        color: #575451;
	        
	        text-decoration: underline;
	        
	        }
	
	blockquote p.author {
		
		margin: 0.5em 0 1em; 
		padding-left: 80px;
		
		font-style: normal;
		font-size: 12px;
		
		}
		
		blockquote .author strong {
					
			color: #575451;
			
			}
			
.error {
            
    color: #F24D4E;
    
    }
	
/* General Margin Rules */

.no-margin { margin: 0; }
.no-margin-r { margin-right: 0; }
.no-margin-l { margin-left: 0; }
.no-margin-b { margin-bottom: 0; }

.mt-half{ margin-top: 	 10px; }
.mt-x 	{ margin-top: 	 20px; }
.mt-x2 	{ margin-top: 	 40px; }
.mt-x3 	{ margin-top: 	 60px; }
.mt-x4 	{ margin-top: 	 80px; }
.mt-x5 	{ margin-top: 	100px; }
.mt-x6 	{ margin-top: 	120px; }

.mb-half{ margin-bottom: 10px; }
.mb-x	{ margin-bottom: 20px; }
.mb-x2 	{ margin-bottom: 40px; }
.mb-x3 	{ margin-bottom: 60px; }
.mb-x4 	{ margin-bottom: 80px; }
.mb-x5 	{ margin-bottom:100px; }
.mb-x6 	{ margin-bottom:120px; }

.mr-x	{ margin-right:  20px; }

/* Alignement Rules */

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

/* Float Rules */

.fl { float: left; }
.fr { float: right; }

.hr {
			
	height: 0;
	line-height: 0;
	font-size: 0px;
	
	border-top:		solid 1px #D1D1CB;
	border-bottom: 	solid 1px #F7F7F4;
	
	}
	
/* Form Fields */

.text,
textarea {
            
    border: solid 1px #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    border-top-color: #989C9F;
    border-left-color:#9ca1a4;
    border-right-color: #9ca1a4;
    border-bottom-color: #ACB1B4;
    
    padding: 5px;
    
    }
    
textarea {
            
    width: 548px;
    
    }
    
label {
            
    vertical-align: middle;
    
    }
    
input.grid1 { width: 48px; }
input.grid2 { width: 128px; }
input.grid3 { width: 208px; }
input.grid3x{ width: 228px; }
input.grid7 { width: 528px; }

.small { font-size: 14px; }

.down {

    min-height: 20px;

    padding: 0 25px 0 0;
            
    background: transparent url('/images/icon-down.png') 0 right no-repeat;
    
    }

/* @end */

/* @group LayoutRules */

.maincontainer {
		
		position: relative;
		margin: 0 auto;
		padding: 0 10px;
		
		width: 960px;
		
	}
	
	.maincontainer.showgrid {
				
		background: transparent url('/images/grid.gif') top left repeat-y;
		
		}
	
#header {

		padding: 26px 0 0 0;
				
		background: transparent url('/images/bg-header.jpg') to center no-repeat;
	
	}
	
#content {

        clear: both;
		
		padding: 20px 0 40px 0;
		
		background: transparent url('/images/bg-content.jpg') top center no-repeat;
	
	}

/* @end */

/* @group Header Rules */

#switcher {
            
    position: absolute;
    top: 0;
    left: 0;
    
    z-index: 10;
    
    }

#welcome {
			
		text-align: center;
		font-size: 22px;
	
	}
	
	#welcome a { 
	    
	    
	    font-family: Georgia, 'Times New Roman';
	    font-size: 1em;
	    
	    }
	
#header .menu li {

		position: relative;
		float: left;
			
		height: 110px;
		line-height: 110px;
		width: 20%;
	
	}
	
	#header .menu a {
		
		font-family: 'Futura-CondensedExtraBold', Monaco, 'Lucida Monospace';
		font-weight: bold;
		font-size: 17px;
		
		text-transform: uppercase;
		
		color: #9d9c98;
		
		}
		
		#header .menu a:hover,
		#header .menu a.active { color: #575451; }

	#header .home-link {
		
		line-height: 1em;
				
		overflow: hidden;
		text-indent: -9999em;
		
		background: transparent url('/images/mwl-logo.png') top center no-repeat;
		
		
		
		}
		
		#header .menu .home-link a {
			
			position: relative;		
			display: block;
			
			margin: 0 auto;
			
			width: 92px;
			height: 68px;
			line-height: 68px;
						
			}
	
	#header .work-link 		{ text-align: center; }
	#header .talk-link		{ text-align: center; }
	#header .contact-link	{ text-align: right; }
	
	#team {
	
		padding-top: 200px;
		background: url('/images/team.png') top center no-repeat;
				
		font-size: 11px;
		font-family: Monaco, 'Lucida Console';
		
		}
		
		#team ul {
					
			position: relative;
			margin: 0 60px;
			
			}
		
		#team li {
		
			position: relative;
			float: left;
					
			width: 190px;
			text-align: center;
			
			}
			
			#team .leader {
						
				left: 60px;
				
				}
			
		#team strong { font-size: 10px; }

/* @end */

/* @group Content */

#content {
			
		font-size: 20px;
		line-height: 1.3em;
	
	}

	#content .calltoaction {
				
		font-size: 16px;
		color: #575451;
		
		}
		
	.aside {
				
		font-size: 16px;
		
		}
		
		.aside ul li {
		            
		    list-style: circle;
		    
		    font-size: 14px;
		    
		    }
		    
		    .aside .inlinenav li {
		                
		        list-style: none;
		        
		        }
		        
		
	#midframe.grid7 {
	
		height: 380px;
		width: 560px;
				
		background: transparent url('/images/frame-mid.png') 7px top no-repeat;
		
		}
		
		#midframe .picture { 
					
			padding: 14px 0 0 21px;
			
			}
			
			
	.slideshow {
	            
	    height: 544px;
	    
	    overflow: hidden;
	    
	    }
	    
	.slideshow.grid7x {
	            
	    height: 380px;
	    
	    }
			
	#bigframe {
		
		width: 800px;
		height: 544px;
		
		left: 80px;
		padding: 0;
		
		background: transparent url('/images/frame-big.png') top 7px no-repeat;
		
		}
		
		#bigframe .picture {
					
			padding: 8px 15px;
			
			}
			
	.smallframe {
				
		width: 320px;
		min-height: 212px;
		
		background: transparent url('/images/frame-small.png') top center no-repeat;
		
		}
		
		.smallframe .picture {
					
			padding: 8px 15px;
			
			}
			
		.aside .smallframe {
		            
		    padding: 30px 0 0;
		    
		    }
			
		.smallframe li,
		.aside .smallframe li {
		            
		    list-style: none;
		    
		    text-align: center;
		    
		    }
			
	.tinyframe {
	            
	    position: relative;
	    
	    margin-left: -2px;
	    
	    }
			
	#greenframe {
				
		height: 320px;
		
		left: 25px;
		
		background: transparent url('/images/bg-green.png') right top no-repeat;
		
		}
		
	.option a {
				
		border-bottom: solid 1px #007CB1;
		
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
		
		}
		
		.option a:hover {
					
				border-bottom: solid 1px #0090CE;
			
			}
			
	.inlinenav li {
				
		position: relative;
		float: left;
		
		list-style: none;
		
		margin-right: 10px;
		
		}
		
		.inlinenav .activeSlide,
		.inlinenav .active {
					
			border-bottom: none;
			
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			
			color: #71706b;
			
			}
			
	.playslideshow div,
	.pauseslideshow div {
	
			padding-left: 25px;
			
			background: transparent url('/images/icon-play.png') 3px left no-repeat;
		
		}
		
	.pauseslideshow div {
	            
	        background: transparent url('/images/icon-pause.png') 3px left no-repeat;
	    
	    }
		
	#contact .map {
				
		position: absolute;
		
		top: 0;
		left: 0;
		
		z-index: 10;
		
		}
			    
	    #contact h1,
	    #contact h2,
	    #contact h3,
	    #contact h4,
	    #contact h5,
	    #contact h6 {
	                
	        margin-bottom: 10px;
	        
	        }
	        
	/* @group Homepage */
	
	.next {
	            
	    padding: 0 20px 0 0;
	    
	    background: url('/images/icon-next.png') right center no-repeat;
	    
	    }
	    
	.welcome-graph {
	      
	    background: transparent url('/images/bg-homegraphic.png') bottom center no-repeat;
	    
	    padding-bottom: 300px;
	    
	    }
	
	
	/* @end */
	
	/* @group Work */
	
	.toolkit li {
	            
	    padding: 70px 0 0;
	    margin-bottom: 20px;
	    
	    background: transparent url('/images/toolkit.png') no-repeat;
	    
	    }
	    
	    .toolkit .photoshop { background-position:  20px 0; }
	    .toolkit .php       { background-position:-180px 0; }
	    .toolkit .xhtmlcss  { background-position:-385px 0; }
	    .toolkit .amazonws  { background-position:-582px 0; }
	    
	    .toolkit .wordpress { background-position: 20px  -100px; }
	    .toolkit .bbpress   { background-position:-180px -100px; }
	    .toolkit .jquery    { background-position:-385px -100px; }
	    .toolkit .rails     { background-position:-585px -100px; }
	    
	    .toolkit .javascript{ background-position: 20px  -200px; }
	    .toolkit .pongo     { background-position:-177px -200px; }
	    .toolkit .bakso     { background-position:-380px -200px; }
	    .toolkit .memcached { background-position:-585px -200px; }
	    
	    .toolkit .gearman   { background-position: 20px  -302px; }
	    .toolkit .mysql     { background-position:-180px -300px; }
	    .toolkit .postmark  { background-position:-380px -290px; }
	    
	.whitebox {
	
	    overflow: hidden;
	    
	    padding: 10px 0;
	    	            
	    background: #FFF;
	    
	    border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    
	    text-align: center;
	    
	    }
	        
	    .whitebox .wide {
	                
	        width: 100%;
	        
	        }
	
	/* @end */
		
	/* @group Blog */
	
	#talk #content {
	            
	    font-size: 16px;
	    
	    }
	
		.blog li {
					
			clear: both;
			
			padding: 2px 0;
			
			border-top:		solid 1px #F7F7F4;
			border-bottom: 	solid 1px #D1D1CB;
			
			}
			
			.blog li:first-child { border-top: none; }
			.blog li:last-child { border-bottom: none; }
			
		.blog a {
					
			font-family: Georgia, 'Times New Roman';
			font-size: 16px;
			
			color: #333233;
			
			}
			
			.blog a:hover { color: #676567; }
		
		.blog .month,
		.blog .title {
					
			float: left;
			
		}
		
		.blog .month,
		.blog .date {
					
			font-family: Monaco, 'Lucida Console';
			
			}
			
		.blog .month:before {
		            
		    content: counter(number,decimal);
		    
		    }
			
		.blog .month {
					
			font-size: 0.7em;
			font-weight: bold;
			
			color: #4B4B4B;
			
		}
		
		.blog li {
		            
		    counter-increment: number;
		    
		    }
		
		.blog .date {
					
			float: right;
			
			font-size: 11px;
			color: #B6B6B6;
			
			white-space: nowrap;
									
			}
			
		.blog .title {
					
			padding: 0 20px;
			
			width: 470px;
			
			}
			
		.blog .label {
					
			color: rgb(69, 74, 76);
			
			}
						
		.back a {
					
			font-family: Georgia, 'Times New Roman';
			font-size: 16px;
			
			color: #71706b;
			
			}
			
			.back a:hover { color: #81878B; }
	
	/* @end */
	
	/* @group Team Page */
	
	.team-member {
	            
	        color: #575451;
	    
	    }
	    
	.team-member span { font-size: 0.81em; }
	    
	.team-member a,
	.team-member span {
	            
	        font-family: Monaco, 'Lucida Console';
	    
	    }
	
    .team-member a {
                
            color: #575451;
            
            text-decoration: underline;
        
        }
        
        .team-member a:hover {
                    
            color: #71706b;
            
            }
	
	/* @end */
	
	/* @group Form Page */
	
	.form-page span,
	.error {
	            
	    font-size: 11px;
	    font-family: Monaco, 'Lucida Console';
	    
	    }
	
	.form-page h5 {
	            
	    margin-bottom: 10px;
	    
	    }
	
	/* @end */
	
/* @end */

/* @group Footer */

	/* @group Sticky Footer */
	
	html, body {
		height: 100%;
	}
	#wrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -260px; /* the bottom margin is the negative value of the footer's height */
	}
	.push {
		
		clear: both;
		height: 340px;
		
		}
	
	#footer {
		height: 200px; /* .push must be the same height as .footer */
	}
	
	/* @end */

#footer {

		position: relative;

		padding: 40px 0 20px 0;
					
		background: #C8C8C8 url('/images/bg-footer.gif') repeat;
		
		font-size: 16px;
		line-height: 1.5em;
	
	}
	
	#footer.webkit {
	            
	    right: 5px;
	    
	    padding: 40px 0 20px 10px;
	    
	    }
		
	#footer-heading {
				
		margin-top: -75px;
		
		}
		
		#footer-heading h4 {
		    
		    position: relative;
		    display: block;
		    float: left;
		    
			padding: 18px 13px;
			
			font-family: Monaco, 'Lucida Console';
			text-shadow: none;
					
			background: #474441;
			color: #D8DEE2;
			
			}
			
	#footer-menu {
				
		position: relative;
		float: right;
		
		width: 100%;
		
		}
			
	#footer-menu li {
				
			float: left;
			
			font-family: Monaco, 'Lucida Console';
			font-size: 14px;
			
			color: #575451;
		
		}
		
		#footer-menu .ar {
					
			background: transparent url('/images/icon-down.png') 8px 2px no-repeat;
			
			}
		
		#footer-menu a {
					
			border-bottom: solid 1px #949FB8;
			
			-webkit-box-shadow: 0 1px 0 rgba(231,233,229,0.75);
			-moz-box-shadow: 0 1px 0 rgba(231,233,229,0.75);
			box-shadow: 0 1px 0 rgba(231,233,229,0.75);
			
			}
			
			#footer-menu a:hover {
						
					border-bottom: solid 1px #737C7F;
					
					color: #737C7F;
				
				}
				
	#copyright {
	
		border-top: solid 1px #C0C5C9;
				
		font-family: Monaco, 'Lucida Console';
		font-size: 11px;
		
		color: #575451;
		
		}
		
		#copyright a {
					
			color: #575451;
			
			font-size: 1em;
			
			}
			
			#copyright a:hover {
						
				border-bottom: solid 1px #71706b;
				
				color: #71706b;
				
				-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.75);
				-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.75);
				box-shadow: 0 1px 0 rgba(255,255,255,0.75);
				
				}
		
		#copyright .grid7 {
					
			padding-top: 5px;
			
			}
		
		#copyright .grid1 {
			
			margin: 0;	
			padding: 10px;
			
			text-align: center;
			
			}
			
		#copyright .border-l{
					
			border-left: solid 1px #C0C5C9;
			
			}
			
	#footer #copyright .icon a:hover {
		
		opacity: 0.5;
		filter:alpha(opacity=50);
		
		border-bottom: none;
		
		}
        
/* @end */