/*	COLORCODES:

Bodytext		#555	
Kopjes			#555
Bordeaux Rood	#
Mintgreen		#


*/

html,body { 
	background:#fff; 
	 }
#container {
	margin-top: 40px;
	}
p, em, strong { 
	font-family: "comenia-sans-web-1","comenia-sans-web-2";
	font-size: 17px; 
	line-height: 160%;
	color:#555;
	margin-bottom: 10px;}

h1 { 
	font-size: 33px;
	line-height: 160%;
	color: #555;
	margin-bottom: 5px;
	font-family: "coquette-1","coquette-2";}

/* ----------------- NAVIGATION ----------------- */

#topImage {
	width: 160px;
	height: 125px;
	margin:0 0 15px 0;
	overflow: hidden;}
	#topImage img {
	width: 160px;
	height: 125px;}	

#menu {margin-top: 10px;}

#menu a { 
	font-family: "coquette-1","coquette-2";
	color: #999;
	display:block; 
	text-decoration: none; 
	font-size:16px;
	width: 160px;
	height: 25px;
	text-align: right;
	float: left;
	font-weight: 700; 
	text-transform: capitalize;
	margin-bottom: 10px;}

#menu a:hover {
	color:#333; 
	font-weight: 700;}
#menu a.selectedBig { 
	color:#333;
	font-weight: 700;
	font-size: 19px;}
#menu a.selectedSmall { 
	color:#333;
	font-weight: 700;
	font-size: 19px;}
	
#logo {
	background: url(../img/nav/logo.png) top right no-repeat;
	padding-bottom: 25px;}
	a#logo:hover {background: url(../img/nav/logo.png) top right no-repeat;}
	
/* ----------------- HOME ----------------- */

#fotoFader { 
	margin: 30px 0 0 0;
	display: block;
	width: 645px;
	height: 300px;
	overflow:hidden;
	position:relative;
	z-index: 1;}

	#fotoFader img {
		z-index: 1;
		margin-top:-100px;}

#roundedOverlay { 
	background: url(../img/misc/home-pic-rounded-overlay.png) no-repeat;
	width: 645px;
	height: 300px;
	position: absolute;
	z-index: 5;
	}

h2#quote { 
	clear:both; 	
	margin-top: 40px;
	font-size: 26px;
	line-height: 160%;
	color: #555;
	text-align: right;
	font-family: "comenia-sans-web-1","comenia-sans-web-2";}

/* ----------------- =VIDEO ----------------- */

.portfolioVideoContainer{
float:left;
width:620px;
height:410px;
margin-bottom: 20px;
}

#roundedVideoOverlay { 
	background: url(../img/misc/roundedVideoOverlay.png) no-repeat;
	width: 620px;
	height: 410px;
	position: absolute;
	z-index: 5;
	}

.videoPortfolio { 
	width: 620px;
	height: 410px;
	overflow:hidden;
	/* position:relative; */
	z-index: 1;	
	float:left;
	}
.roundedVideoOverlayPortfolioTL,
.roundedVideoOverlayPortfolioTR,
.roundedVideoOverlayPortfolioBL,
.roundedVideoOverlayPortfolioBR { 
	background: url(../img/misc/portfolio-pic-rounded-overlay.png) no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	z-index: 5;
	}

.roundedVideoOverlayPortfolioTL { 
	background-position: 0 0;
}
.roundedVideoOverlayPortfolioTR { 
	background-position: -180px 0;
	margin: 0 605px;}
.roundedVideoOverlayPortfolioBL { 
	background-position: 0 -180px;
	margin: 335px 0; }
.roundedVideoOverlayPortfolioBR { 
	background-position: -180px -180px;
	margin: 335px 605px;
 }
 
.videoLine { 
	background: url(../img/footer/footer-line.png) no-repeat; 
	height:10px;
	width: 620px;
	display: block; 
	clear: both;
	padding: 30px 0 0 0;
	margin-bottom: 10px; }

/* ----------------- =PORTFOLIO ----------------- */

.portfolioContainer{
float:left;
width:195px;
height:195px;
margin-bottom: 20px;
margin-right: 20px;
}

.fotoPortfolio { 
	width: 195px;
	height: 195px;
	overflow:hidden;
	/* position:relative; */
	z-index: 1;	
	float:left;
	}

	#fotoPortfolio a {
		z-index: 1;
		}
.roundedOverlayPortfolioTL,
.roundedOverlayPortfolioTR,
.roundedOverlayPortfolioBL,
.roundedOverlayPortfolioBR { 
	background: url(../img/misc/portfolio-pic-rounded-overlay.png) no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	z-index: 5;
	}

.roundedOverlayPortfolioTL { 
	background-position: 0 0;
}
.roundedOverlayPortfolioTR { 
	background-position: -180px 0;
	margin: 0 180px;}
.roundedOverlayPortfolioBL { 
	background-position: 0 -180px;
	margin: 180px 0; }
.roundedOverlayPortfolioBR { 
	background-position: -180px -180px;
	margin: 180px 180px;
 }
.tags-in-thumb {
	position: absolute;
	overflow: hidden;
	margin: 5px;}
.tag-video,
.tag-photo {
	display: block;
	width: 20px;
	height: 20px;
	background: maroon;
	float: right;
	margin: 0 5px;
	background: url(../img/misc/tag-video.png) no-repeat;
	z-index: 4;}
	.tag-photo {background: url(../img/misc/tag-photo.png) no-repeat;}
	
	
.fotoPortfolio a.portfolioThumb {
	width: 195px;
	height:195px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	display: block;
	cursor: pointer;
	margin-bottom: 20px;
	float: left;
	margin-right: 20px;}
.fotoPortfolio a.portfolioThumb:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}

	
.portfolioTitel {
	display: none;
	height: 80px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background: #fff;
	color: #fff;
	margin-top: 60%;}
	
.portfolioTitel h2 {
	color: #333;
	font-size: 17px;
	line-height: 130%;
	text-decoration: none;
	padding-top: 8px;
	text-align: center;
	font-family: "comenia-sans-web-1","comenia-sans-web-2";}
	
a.portfolioThumb {
 text-decoration: none
	}
.portfolioThumb a:hover {
}


/* = single */

#description {
	clear: both;
	overflow: auto;
	margin: 20px 0;}
	#description p {
	font: 400 14px/22px "comenia-sans-web-1","comenia-sans-web-2";
	color:#666;}

#social {
	clear: both;
	overflow: hidden;
	margin: 20px 0;}

#tags-in-single {
	float: right;}
	
	#tags-title {
		float: left;
		font: 700 12px/19px "Helvetica", "Arial", sans-serif;
		color: #ccc;}
	
	#tags-in-single a {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 1px solid #cfcfcf;
		padding: 2px 6px;
		color:#999;
		text-decoration: none;
		background: #eee;
		font: 400 11px/14px "comenia-sans-web-1","comenia-sans-web-2";
		margin: 0 5px;}
		#tags-in-single a:hover {background: #e0e0e0;color: #666;}
	
#credits {
	font: 400 12px/16px "comenia-sans-web-1","comenia-sans-web-2";
	overflow: hidden;
	cursor: pointer;
	margin: 0 0 40px 0;}
	
	#credits span {
		font-weight: 700;
		display: block;
		padding: 5px;
		margin: 5px 0;
		color: #aaa;
		border-bottom: 1px dashed #ccc;
	}
	
	#credits-text {
		display: none;
		padding: 10px;}
		
		#credits-text p {
			font: 400 12px/20px "Helvetica", "Arial", sans-serif;
			color: #999;}

.twitter-share-button {float: left;margin: 0 5px 0 0;}
	
/* ----------------- CONTACT ----------------- */

#contactForm { margin-top: 25px;}

label {
	clear:both;
	width: 50px;
	height: 30px;
	display:block;
	float:left;
	text-align: right;
	padding: 15px;
	font-family: "comenia-sans-web-1","comenia-sans-web-2";;
	font-size: 12px;
	}

input, textarea {
	float:left;
	padding: 12px 0 0 0;
	background: #eee;
	border: none; 
	font-family: Georgia, Arial, sans-serif;
	color: #888;
	font-size: 14px;
	font-weight: 700;
	width: 280px;
	height: 28px;
}
textarea {
height: 178px;
padding-bottom: 10px;
margin-top: 0;
}

#contactContainer{
float:left;
width:300px;
height:40px;
}

#greyInputfield {
	width: 300px;
	height: 40px;
	float:left;
	}

.inputLeft,.inputRight { 
	background: url(../img/misc/contact-pic-rounded-overlay.png) no-repeat;
	width: 15px;
	height: 40px;
	float:left;
	}
.inputRight {
	background: url(../img/misc/contact-pic-rounded-overlay.png) no-repeat -15px 0;}

.inputLeftBig,.inputRightBig { 
	background: url(../img/misc/contactbig-pic-rounded-overlay.png) no-repeat;
	width: 15px;
	height: 200px;
	float:left;
	}
.inputRightBig { background: url(../img/misc/contactbig-pic-rounded-overlay.png) no-repeat -15px 0;}

#successContact, #errorContact {
	float: left;
	display: none;
	margin-left: 80px;
	margin-top: 15px;}

#submitContact { 
	background: url(../img/misc/submit-button.png) no-repeat;
	height: 37px;
	width: 100px;
	display: block;
	cursor: pointer;
	clear: both;
	margin-left: 80px;
	margin-top: 15px;}
#submitContact:hover { background: url(../img/misc/submit-button.png) no-repeat 0 -37px; } 

/* ----------------- FOOTER ----------------- */
#footer { 
	background: url(../img/footer/footer-line.png) no-repeat; 
	height:150px; 
	padding: 30px 0 0 0; }

#footer p { 
	line-height:30px; 
	font-size:90%; 
	padding:0 0 0 10px; 
	color:#fff; }

#footer a { 
	font-size: 14px; 
	text-transform: uppercase; 
	font-weight: 800; 
	color: #999;
	text-decoration: none;}
	#footer a:hover { 
	color: #333;
	 }

#copyright { font-size: 11px; }
div.signature{
    display:block;
    position:fixed;
    bottom:0;
    right:20px;
    width:150px;
  }	

.signature span {
	font: 400 11px/13px "Helvetica", "Arial", sans-serif;
	text-align: right;
	display: block;
	float: right;
	color: #666;
	margin-bottom: 10px;}
a#yummygumlink { 
	background: url(../img/footer/signature.png); 
	background-position: 0 -38px; 
	width: 87px; 
	height: 38px; 
	float:right;
	display:block; 
	margin:10px 0 20px 0}
a#yummygumlink:hover { 
	background: url(../img/footer/signature.png);}