/*
Theme Name: Fantasma Media
Theme URI: http://www.fantasma-media.nl
Description: Theme for Fantasma Media Blog
Version: 1.0
Author: Quinten van Geest
Author URI: http://www.fantasma-media.nl
Tags: Fantasma Media, usability, gebruiksvriendelijkheid, user centered design, grafische vormgeving, maatwerk
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

body{
	height: 100%;
	background-image:url(/wordpress/wp-content/themes/fantasma2/afbeeldingen/bg_repeat.jpg);
	background-position:top;
	background-color: #ededed;
	background-repeat:repeat-x;
	font-family: arial, sans serif;
	}
	
img{
	border: 0;
	}

html{
	height: 100%;
	}
	
a{
	text-decoration: none;
	}
	
.float-right{
	float: right;
	}
	
/*Header*/
	
#main_wrapper{
	position: relative;
   	width: 960px; /* Breedte van je (flash)object */
	margin-left: -480px; /* helft van de breedte (negatief) */
	height: 100%;
   	left: 50%;
	top: 0px;
	}

body > #main_wrapper {height: auto; min-height: 100%;}

#content{
	padding-bottom: 60px;
	}  /* must be same height as the footer */

#header{
	position: relative;
	width: 960px;
	height: 125px;
	top: 0px;
	left: 0px;
	}
	
#logo{
	position: relative;
	width: auto;
	height: auto;
	top: 20px;
	left:0px;
	float: left;
	}
	
/*Navigatie*/	
	
#positie-nav{
	position: relative;
	width: auto;
	height: auto;
	right: -20px;
	top: 0px;
	padding:0px;
	float: right;
	}

ul#nav{
	font-size: 1em;
	line-height: normal;
	letter-spacing: normal;
	text-indent: 40px;
	}
	

	
ul#nav h1{
	font-size: 1em;
	line-height: normal;
	letter-spacing: normal;
	margin-top: 25px;
	}
	
ul#nav span{
	font-size: .8em;
	line-height: normal;
	letter-spacing: normal;
	margin-left: 40px;
	}

ul#nav li{
	float: left;
	height: 80px;
	width: 130px;
	display:inline;	
	margin: 0px 0px 0px 0px;
	background-image: url(afbeeldingen/schaduw-menu.png);
	background-repeat: no-repeat;
	background-position:left;
	}
		
ul#nav li a {
	color: #ffffff;
	}
	
ul#nav li a:hover{
	color: #d6de23;
	}
		
#header-image{
	position: relative;
	left: 0px;
	top: 0px;
	width: 960px;
	height: 220px;
	background-image: url(afbeeldingen/header-afbeelding.png);
	margin: 0px;
	background-repeat: no-repeat;
	background-position: right;
	}
	
#header-image h1{
	width: 920px;
	color: #ffffff;
	font-size: 2em;
	font-weight: normal;
	line-height: 40px;
	padding: 50px 20px 0px 20px;
	margin: 0px;
	letter-spacing: 1px;
	}	
	
#header-image h2{
	width: 920px;
	color: #ffffff;
	font-size: 1.75em;
	font-weight: normal;
	line-height: 40px;
	padding: 0px 20px 0px 20px;
	margin: 0px;
	letter-spacing: 1px;
	}	

#header-image h2 span{
	color: #d6de23;
	}
	
	
#opvul-header{
	height: 185px;
	padding: 0px 0px 50px 0px;
	}	
	
#twitter-icon{
	position: absolute;
	left: 550px;
	top: 150px;
	}

	

	
/*Index*/	

.post{
	position: relative;
	top: auto;
	padding: 0px 0px 30px 0px;
	width: 625px;
	float:left;
	height: auto;
	}
	
.post-schaduw-boven{
	width: 625px;
	height: 10px;
	background-image: url(afbeeldingen/tekst-boven.png);
	background-repeat: no-repeat;
	}
	
.post-schaduw-midden{
	width: 625px;
	height: auto;
	background-image: url(afbeeldingen/tekst-midden.png);
	background-repeat: repeat-y;
	}
	
.post-tekstvlak{
	padding: 50px;
	}
	
.post-schaduw-onder{
	width: 625px;
	height: 10px;
	background-image: url(afbeeldingen/tekst-onder.png);
	background-repeat: no-repeat;
	}

.post h1{
	color: #00afeb;
	font-size: 1.75em;
	font-weight: normal;
	line-height: normal;
	padding: 0px;
	margin: 0px;
	letter-spacing: 0px;
	}	
	
.post h1 a{
	color: #00afeb;
	}
	
.post h1 a:hover{
	color: #d6de23;
	}
	
.post h2{
	color: #666666;
	font-size: 1.25em;
	font-weight: normal;
	line-height: normal;
	padding: 0px;
	margin: 0px;
	}	
	
.post h2 a{
	color: #333333;
	}
	
.post h2 a:hover{
	color: #00afeb;
	}
	
.post h3{
	color: #333333;
	font-size: 1em;
	font-weight: normal;
	line-height: normal;
	padding: 0px;
	margin: 0px;
	}	
	
.post h3 a{
	color: #333333;
	}
	
.post h3 a:hover{
	color: #00afeb;
	}
	
.post strong{
	color: #666666;
	font-weight: bold;
	}

.post p{
	color: #666666;
	font-weight: normal;
	font-size: 0.75em;
	margin: 0 0 20px 0 ;
	line-height: 20px;
	}
	
.post p span{
	color: #999999;
	font-weight: normal;
	font-size: 1.4em;
	margin: 0 0 25px 0 ;
	line-height: 25px;
	}
	
.negatief-margin{
	position: relative;
	top: -20px;
	}			
	
.post p a{
	font-weight:normal;
	color: #00afeb;
	text-decoration: underline;
	}
	
	
	
.post p a:hover{
	color: #d6de23;
	}
	
 .post ul{
 	color: #666666;
	font-weight: normal;
	font-size: 0.75em;
	margin: 0 0 0 0 ;
	line-height: 20px;
	}
	
.post ul a{
	font-weight:normal;
	color: #00afeb;
	text-decoration: underline;
	}	
	
.post ul a:hover{
	font-weight:normal;
	color: #d6de23;
	}	
	
.post ul li{
	list-style: square;
	list-style-position: outside;
	margin: 0 0 0 20px;
	}
	
.post ol{
 	color: #666666;
	font-weight: normal;
	font-size: 0.75em;
	margin: 0 0 20px 0 ;
	line-height: 20px;
	}
	
.post ol li{
	list-style: decimal;
	list-style-position: outside;
	margin: 0 0 0 20px;
	}
	

	
.tags p{
	color: #666666;
	font-weight: normal;
	font-size: 0.75em;
	margin: 0 0 20px 0 ;
	}
	
.tags strong{
	color: #666666;
	}	
	
.tags p a{
	font-weight:normal;
	color: #666666;
	text-decoration: underline;
	}	
	
.tags p a:hover{
	font-weight:normal;
	color: #00afeb;
	}	
	
/*Sidebar*/	

#sidebar-wrapper{
	position: relative;
	top: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	width: 285px;
	float:right;
	height: auto;
	}
	
.sidebar-lijn{
	position: relative;
	left: -30px;
	width: 265px;
	height: 2px;
	background-image: url(afbeeldingen/sidebar-lijn.png);
	background-repeat: no-repeat;
	}
	
.sidebar-boven{
	position: relative;
	width: 285px;
	height: 10px;
	background-image: url(afbeeldingen/sidebar-boven.png);
	background-repeat: no-repeat;
	}

.sidebar{
	width: 285px;
	height: auto;
	padding: 0px;
	line-height: 20px;
	margin: 0px;
	background-image:url(afbeeldingen/sidebar-midden.png);
	background-repeat:repeat-y;
	}
	
.sidebar-tekstvlak{
	width: 205px;
	position: relative;
	left: 10px;
	top: 0px;
	height: auto;
	padding: 20px 30px 20px 30px;
	background-image: url(afbeeldingen/sidebar-gradient.png);
	background-repeat: no-repeat;
	}
	
.sidebar-onder{
	position: relative;
	width: 285px;
	height: 10px;
	background-image: url(afbeeldingen/sidebar-onder.png);
	background-repeat: no-repeat;
	}
	
.sidebar h1{
	color: #d6de23;
	font-size: 1.25em;
	font-weight: 100;
	line-height: normal;
	padding: 0px;
	margin: 0px;
	letter-spacing: 0px;
	}	
	
.sidebar ul{
	font-size: .85em;
	letter-spacing: normal;
	line-height: 20px;
	margin: 0 0 0 20px;
	}
	
	
.sidebar ul li{
	color: #ffffff;
	list-style: square;
	list-style-position: outside;
	}
		
.sidebar ul li a {
	color: #ffffff;
	text-decoration: none;
	}
	
.sidebar ul li a:hover{
	color: #d6de23;
	}	

/* Begin Comments*/

	
.commentlist {
	padding: 0;
	text-align: left;
	}


.commentlist li{
	margin: 15px 0 20px 0;
	padding: 5px 5px 10px 10px;
	list-style: none;
	border-top: 1px;
	border-top-style:solid;
	border-top-color: #CCCCCC;
	background-color:#FAFAFA;
	}
		
.commentlist p {
	font-size: 12px;
	margin: 10px 5px 10px 0;
}

.commentlist p a{
	color: #00afeb;
	font-size: 12px;
	text-decoration: underline;
}

.commentlist p a:hover{
	color: #d6de23;
	font-size: 12px;
}

.cancel-comment-reply small{
	font-size: 12px;
	}

.reply a{
	text-decoration: underline;
	font-weight: normal;
	color: #00afeb;
	font-size: 12px;
	}
	
.reply a:hover{
	color: #d6de23;
	font-size: 12px;
	}
	
.cancel-comment-reply small a{
	color:#666666;
	text-decoration: underline;
	font-size: 12px;
	}
	
.cancel-comment-reply small a:hover{
	color: #00afeb;
	font-size: 12px;
	}
	

.children { padding: 0; }

#respond h3{
	color: #666666;
	font-size: 16px;

	}

#commentform p {
	margin: 5px 0;
	font-size: 12px;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}

.commentlist li .avatar { 
	float: right;
	padding: 2px;
	background: #fff;
	}

.commentlist cite{
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	color: #666666;
	}

.commentlist cite a {	
	color: #666666;
	font-size: 12px;
	}
	
.commentlist cite a:hover{
	color: #00afeb;
	font-size: 12px;
	}

.commentmetadata {
	color: #666666;
	font-weight: normal;
	font-style: italic;
	font-size: 12px;
	}	
	
.commentmetadata a{
	color: #666666;
	font-size: 12px;
	}	
	
.commentmetadata a:hover{
	color: #00afeb;
	font-size: 12px;
	}	

/* End Comments */

	
/*Single Page*/



/*Zoekpagina*/

#search-title{
	position: relative;
	top: 20px;
	width: 640px;
	margin-left:20px;
	}

#search-title h2{
	color: #333333;
	font-size: 2.4em;
	font-weight: 100;
	line-height: normal;
	padding: 0px;
	letter-spacing: 0px;
	}	
	
#search-niet-gevonden{
	margin: 0 0 0 20px;
	}
	
#search-niet-gevonden h2{
	color: #333333;
	font-size: 2.4em;
	font-weight: 100;
	line-height: normal;
	padding: 0px;
	letter-spacing: 0px;
	}

#search-form{
	color: #666666;
	font-size: 0.75em;
	font-weight: 100;
	line-height: normal;
	padding: 0px;
	letter-spacing: 0px;
	}	
	
/*Afbeeldingen*/

.afbeelding-links{
	position: relative;
	float: left;
	margin: 0px 20px 20px 0px;
	} 
	
.afbeelding-rechts{
	position: relative;
	float: right;
	margin: 0px 0px 20px 20px;
	}
	
.afbeelding-volledig-top{
	position: relative;
	margin: -40px 0px 20px -40px;
	}

.afbeelding-volledig{
	position: relative;
	margin: 0px 0px 20px -40px;
	}

/*404*/

#foutpagina{
	position: relative;
	top: 20px;
	left: 20px;
	width: 640px;
	}
	
#foutpagina h2{
	color: #333333;
	font-size: 2.4em;
	font-weight: normal;
	line-height: normal;
	padding: 0px;
	letter-spacing: 0px;
	}
	
#foutpagina p{
	color: #666666;
	font-size: .75em;
	font-weight: normal;
	line-height: 20px;
	padding: 0px;
	letter-spacing: 0px;
	}

#foutpagina p a {
	color: #00afeb;
	text-decoration: underline;
	}

#foutpagina p a:hover {
	color: #d6de23;
	text-decoration: underline;
	}
		


/*Footer*/

#footer{
	position: relative;
	margin-top: -60px; /* negative value of footer height */
	height: 60px;
	clear:both;
	background-color: #333333;
	width: 100%;
	}
	
#footer p{
	position: relative;
	color: #CCCCCC;
	font-size: 0.75em;
	font-weight: normal;
	line-height: 20px;
	text-align: left;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	}	
	
#footer p a{
	color: #CCCCCC;
	text-decoration: underline;
	}

#footer p a:hover{
	color: #d6de23;
	}
	
#footer_tekst{
	position: relative;
   	width: 960px; /* Breedte van je (flash)object */
	margin: 0 auto; /* helft van de breedte (negatief) */
	top: 10px;
	left: 0px;
	}
	
#footer_tekst_links{
	position: relative;
   	width: auto; /* Breedte van je (flash)object */
	margin: 0 auto; /* helft van de breedte (negatief) */
	top: 0px;
	left: 20px;
	float: left;
	}
	
#footer_tekst_rechts{
	position: relative;
   	width: auto; /* Breedte van je (flash)object */
	margin: 0 auto; /* helft van de breedte (negatief) */
	top: 0px;
	right: 20px;
	float: right;
	}
	
	
.clearboth{
	clear: both;
	}	
	
	
/*CLEAR FIX*/
	
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */