/*
Theme Name: Margriet Modevakschool
Theme URI: http://margrietmode.nl/
Description: Theme voor margrietmode.nl
Version: 0.5
Author: Bram Willemse
Author URI: http://bramwillemse.com/
Tags: blue, illustrations, 

### MMA kleuren ###
Babyblauw		#8bc6f8
Donkerblauw 	#237bbc
Groen			#62e1bc

*/

html { 	font-size: 62.5%; /* Resets 1em to 10px */ } 
body { 
	margin: 0 0 25px; 
	padding: 0; 
	background: #FFF;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	line-height: 1.3em;
	}
h1, h2, h3 { line-height: 0; color: #237bbc; }
a { font-weight: bold; color: #237bbc; text-decoration: none; }
a:hover { }
img { border: none; padding: 0; margin: 0; }

.row {
	float: left;
	clear: none;
	width: 100%;
	}

.blue { clear: both; width: 100%; height: 300px; margin: 0; padding: -25px 0; background: #8bc6f8; color: #fff; }

.section { 
	display: block;
	margin: 25px auto; 
	width: 900px; 
	}
	#portal { padding: 0; }
	#portal p { letter-spacing: 0.05em; }
	#page { padding: 0; }
		#page p { width: 450px; letter-spacing: 0em; }
	#foto1 img { float: left; height: 300px; width: 475px; padding: 0 0 0 0; margin: 0;}
	#foto2 img { float: right; padding: 0 0 0 25px; margin-bottom: 25px; }


#header { 
	height: 100px; 
	width: 100%; 
	margin: 25px 0; 
	background: #FFF/*8bc6f8*/; 
	border-bottom: solid 2px #62e1bc; 
	color: #fff; 
	}
	#logo { float: left; width: 157px; height: 100px; }
	/*ie6/7: #logo { margin-top: -25px; } */
	#nav  { float: left; width: 693px; height: 50px; padding: 0; color: #237bbc; text-align: center; vertical-align: top; }
	/*ie6/7: nav { margin-top: -25px; } */
		#nav ul { margin: 0 auto; font-family: helvetica neue; font-size: 1.5em;  }
		#nav ul li { list-style: none; display: inline; margin: 0 0 0 25px; }
		#nav img { border: none; margin: 13px 25px 0; }
		#nav a { color: #fff; }

#content { 
	display: block; 
	width: 100%; 
	margin: 25px 0 0; 
	background: #FFF; 
	color: #237bbc; 
	}
	#content h2 { text-align: center; font-size: 2em; margin: 0 0 25px; padding: 0; }
	#content a {  }

	.headerText { float: right; width: 400px; font-size: 1.15em; min-height: ;letter-spacing: 0.05em; line-height: 1.4em;  }
		#content .headerText h1 { color: #FFF; font-size: 2em; line-height: 0.3em; }


	.column { float: left; width: 250px; padding: 0 25px 15px; text-align: left; }
		.column h2 { line-height: 1em; }
		/*.column h2 img { padding-top: 25px; }*/	
		.column a { font-weight: normal; letter-spacing: 0.05em; }
		.column a:hover p { color: #237bbc; }
		.column a .more { text-align: right; }
		.column p { padding: 0 5px;  }
		
	.icon { padding: 0 50px 0; margin: 0 auto; }


#metaspace { 
	display: block;
	width: 700px; 
	margin: 0 auto;
	padding: 0 0 25px 0 ;
	color: #fff; 
	background: #237bbc;
	letter-spacing: 0.025em;
	}
	#metaspace a { color: #fff; font-weight: normal;  }
	#metaspace a:hover { color: #fff; border-bottom: 1px solid #62e1bc;  }
	#metadata { padding: 25px; clear: both; width: 700px; font-size: 0.9em; text-align: left; } 
		.metaColumn { float: left; width: 300px; padding: 0 25px 0 0; }
		.metaColumn form { line-height: 1em; text-align: left; }
		.metaColumn textarea { width: 99%; }
		.metaColumn input { color: #237bbc;  border: none; padding: 1px; margin: 1px 0 2px;}
		.metaColumn input[type="submit"] {background-color: #FFF;}
		.metaColumn .wpcf7-list-item { display: block; clear: both; padding: 0px; }

		#metadata h3 { color: #fff; } 
		#metadata ul { list-style: none; padding: 0; }
			#metadata ul li { padding: 5px 0 0; }
	#metafiller { margin: 0 auto; clear: both; width: 600px; height: 0; border-top: 0px solid #237bbc; color: #237bbc; text-align: center; }
	
	#footer { margin: 25px auto; clear: both; width: 100%; padding: 25px 0 0 0; border-top: 2px solid #62e1bc; font-size: 0.75em; color: #237bbc; text-align: center; }
		#footer a { font-size: 1.25em; font-weight: bold; color: #237bbc; border-bottom: 1px solid #62e1bc; }




/* ### SOCIABLE ### */

div.sociable { margin: 25px 0 0; text-align: center; clear: both;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 5px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 5px;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}


/* ### jQuery Tooltip ### */

#tooltip {
	position: absolute;
	z-index: 3000;
	border: none;
	background-color: none;
	padding: 0;
}
#tooltip h3, #tooltip div { margin: 0; }

#tooltip.home {
	border: none;
	height: 50px;
	width: 150px;
	background: url('images/tooltip-home.png') no-repeat;
}

#tooltip.naailessen {
	border: none;
	height: 50px;
	width: 150px;
	background: url('images/tooltip-naailessen.png') no-repeat;
}
#tooltip.patroontekenen {
	border: none;
	height: 50px;
	width: 150px;
	background: url('images/tooltip-patroontekenen.png') no-repeat;
}
#tooltip.opleidingen {
	border: none;
	height: 50px;
	width: 150px;
	background: url('images/tooltip-opleidingen.png') no-repeat;
}