/*
Theme Name: Cafe Noir
Theme URI: http://www.cafenoir.tv/
Description: Dit is de template voor <a href="http://www.cafenoir.tv">Cafe Noir</a>.
Version: 1.0
Author: Frank Hogenkamp - <a href="http://www.cafenoir.tv">Cafe Noir</a>
*/


/* Begin Typography & Colors */
html, body {
	margin:0px auto;
	padding:0px;
	font: 90%/160% Arial;
	color: #646464;
	
}

a, img  {
	outline: none;
	text-decoration: none;
	border: 0px;
}

#contact a {
	color: #FFFFFF;
	font-size: 110%;
	font-family: QuicksandBook;
}

img.centreer {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 0px;
}


#contact_button {
	position: absolute; 
	bottom: 180px;
	right: 17px;
}

#contact_button img {
	border: 0px;
}

.linkerlijst, .rechterlijst {
	width: 50%;
	margin: 10px 0px 20px 0px;
}

.linkerlijst {
	float: left;
}

.rechterlijst {
	float: right;
}

.clear {
	clear: both;
}

.linkerlijst ul, .rechterlijst ul, ul.links {
	margin: 0px;
	padding: 0px;
	list-style-position: inside;
}


img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
        z-index: -100;
	
}

@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; }
}


strong {
	font-weight: bold;
}

#uppergrey, #lowergrey {
	width: 100%;
	position: relative; 
}

#uppergrey {
        background: #000;
	height: 45px;
	margin-bottom: 0px;
}

#menu {
	width: 898px;
	height: 45px;
	margin: 0px auto;
	text-transform: lowercase;
	padding-top: 5px;
	color: #ebe4de;
	text-align: right;
	}

.logo_header {
	position: relative;
	margin-left: -43px;
	float: left;
	padding-right: 10px;
}

#menu a {
	color: #ebe4de;
	text-decoration: none;
	font-weight: normal;
	font-size: 22px;
}

#menu a:hover {
	color: #1ad9c9;
}

#menu img {
	border: 0px;
}

#lowergrey {
	height: 12px;
	position: fixed;
	bottom: 0px;
}

#uitgelichte_videoproducties {
    width: 898px;
    height: 178px;
    margin: 0px auto;
    background: #fff;
    position: relative;
    z-index: 10;
}

#portfolio{
	position: relative; 
	margin: 5px auto;
	margin-bottom: 0px;
	padding: 0px;
	width: 898px;
	height: 362px;
}

#portfolio_video {
	margin: 0px auto;
	padding: 0px;
	width: 640px;
	height: 360px;
	float: left;
}

#portfolio_home {
    margin: 5px auto;
    margin-bottom: 0px;
    padding: 0px;
    width: 898px;
    
}

#portfolio_home_titel {
    display: block;
    height: 22px;
    background: #000;
    color: #fff;
    padding: 10px 0px 10px 15px;
    width: 883px;
    font-family: QuicksandBold;
}

#portfolio_home_titel a {
    color: #fff;
}
    
#portfolio_video_home {
	margin: 0px auto;
	padding: 0px;
	width: 898px;
	height: 382px;
	display: block;
}

#portfolio_uitleg {
	background: url(../img/8er_portfolio_uitleg.png) top right;
	float: right;
	width: 228px;
	height: 346px;
	overflow: hidden;
	padding: 15px 12px 0px 8px;	
	color: #fff8f2;
}

#portfolio_uitleg p{
	font: 150%/100% QuicksandBold;
	margin-top: 15px;
}

#portfolio_uitleg a, #bottom_right a{
	color: #201307;
	text-decoration: none;
}

#portfolio_uitleg a:hover, #bottom_right a:hover{
	text-decoration: underline;
}

span.LightOblique {
	font-size: 160%;
	font-family: QuicksandLightOblique;
}

span.book {
	font-family: QuicksandBook;
	font-size: 100%;
}

#portfolio_uitleg span.book {
	font-size: 320%;
	text-transform: uppercase;
}

#portfolio_uitleg span.bold {
	font-family: QuicksandBold;
	font-size: 300%;
	text-transform: uppercase;
}

#portfolio_uitleg span.book_portfolio {
	font-family: QuicksandBook;
	font-size: 180%;
	text-transform: uppercase;
}

#map {
	width: 100%; 
	height: 100%; 
	position: absolute;
	top: 0px;
	left: 0px;
}

#header {
	margin: 0px auto;
	padding: 0px;
	padding-bottom: 5px;
	background: #000000 url(../img/header2.png) center top no-repeat;
	width: 898px;
	height: 170px;
}

#wrapper {
	position: relative; 
	margin: 2px auto;
	padding: 0px;
	background: url(../img/8er_wrapper.png) center top repeat-y;
	width: 898px;
	z-index: 10;
}


#wrapper_bottom {
	background: url(../img/8er_wrapper.png) center top repeat-y;
	width: 898px;
	clear: both;	
}

#wrap {
	height: 0px;
	width: 898px;
	clear: both;	
}


#main, #bottom_left, #main_portfolio{
	float: left;
	margin: 0px;
	padding-left: 12px;
	padding-top: 15px;
	padding-bottom: 10px;
	padding-right: 12px;
	width: 616px;
}

#main_portfolio {
	padding-left: 0px;
	padding-right: 0px;
	width: 640px;
	overflow: hidden;
}

#main_portfolio p {
	padding-left: 12px;
	padding-top: 0px;
	padding-right: 12px;
}

#main a {
	color: #000000;
	font-weight: bold;
}

#bottom_left {
	background: url(../img/quickmenu_8er.png) 0px top repeat-x;
	width: 615px;
	height: 120px;
	padding-bottom: 0px;
}

#bottom_left p {
	font: 26px Georgia;
	margin: 0px;
}

#contact, #bottom_right {
	float: right;
	margin: 0px;
	margin-right: 0px;
	padding-left: 30px;
	padding-top: 15px;
	padding-right: 30px;
	width: 189px;
	color: #FFFFFF;
}

#bottom_right {
	background: url(../img/quickmenu_8er.png) 0px top repeat-x;
	padding-left: 24px;
	width: 192px;
	height: 120px;
	margin-right: 1px;
	padding-bottom: 0px;
}

#quicktabs {
	margin-left: 18px;
	margin-right: 18px;
	height: 127px;
	font: 90%/160% Arial;
	color: #8d8c8c;
}

#quicktabs a {
	color: #8d8c8c;
	text-decoration: none;
}

#quicktabs div{
	float: left;
	width: 137px;
	margin-right: 10px;
}

#quicktabs div#quicktab4 {
	margin-right: 0px;
}


#footer {
	position: relative;
	margin: 8px auto;
	padding: 0px;
	background: url(../img/footer.png) 0px top repeat-y;
	width: 910px;
	height: 3px;
}

#beeldmerk {
	position: relative;
	margin: 0px auto;
	width: 900px;
	height: 32px;
	background: url(../img/beeldmerk.png) right 0px no-repeat;
}

#main h1, #contact h1, #news h1 {
	font-size: 44px;
	margin-top: 4px;
	margin-bottom: 50px;
}

#main h2, h2.portfolio{
	padding-bottom: 0px;
	margin-bottom: 5px;
	margin-top: 0px;
	font-size: 190%;
	font-weight: normal;
	font-family: QuicksandLight;
	color: #646464;
}

h2.about {
	padding-bottom: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-family: QuicksandBold;
	font-size: 180%;
	font-weight: normal;
	color: #ffffff;
}

h2.portfolio {
	margin-left: 10px;
}

#mainTitel h2 {
	font-size: 36px;
	margin-top: 4px;
	margin-bottom: 50px;
	font-weight: normal;
	font-family: QuicksandBold;
}

#main h3 {
	margin-bottom: 0px;
}

#scrollbalk {
	height: 122px;
	width: 980px;
	margin: 0px auto;
	padding: 0px;
}

#main_home_links, #main_home_midden, #main_home_rechts {
    width: 193px;
    float: left;
    margin-left: 15px;
    display: block;
    padding-top: 15px;
    font-family: QuicksandBook;
    color: #927c76;
}

#main_home_links a, #main_home_midden a, #main_home_rechts a {
    color: #927c76;
    font-weight: bold;
}

.right {
	position: relative;
	float: right;
}

#portfolio_home_titel .right {
    margin-right: 15px;
}

.left {
	position: relative;
}


#routebeschrijving {
	float: right;
	width: 290px;
	margin-right: 8px;
}

.field {
	background:#000000 ! important;
	border:none;
	padding:4px 4px 4px 22px;
	color: #21170e;
	}

.field#naam {	
	background: #f9eada url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-name.gif) 5px 4px no-repeat ! important;
	width:262px;
	margin-right:5px;
	margin-top: 8px;
	}

.field#naam:focus {	
	background: #faf8f5 url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-name.gif) 5px 4px no-repeat ! important;
	}
		
.field#email {	
	background: #f9eada url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-email.gif) 5px 7px no-repeat ! important;
	width:262px;
	margin-top: 8px;
	}		

.field#email:focus {	
	background: #faf8f5 url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-email.gif) 5px 7px no-repeat ! important;
	}	

.field#bericht {	
	background: #f9eada url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-comment.gif) 5px 6px no-repeat ! important;
	width:262px;
	height:120px;
	margin-top:8px;	
	}	

.field#bericht:focus {
	background: #faf8f5 url(http://blog.cafenoir.tv/wp-content/themes/cafenoir/images/user-comment.gif) 5px 6px no-repeat ! important;
	color: #21170e;
	}

		
.button {	
	background: #21170e url(images/bg_button.gif) no-repeat ! important;
	border:none;
	font-size:0.8em;
	color:#fff;
	padding:4px 18px;
	margin-top:7px;
	margin-right: 10px;
	border-bottom:2px solid #21170e;
	border-right:2px solid #21170e;
	}

a.button, a.button:visited {
	color:#fff;
	width:78px;
	margin:18px 0 0 30px;
	display:block
	}

a.button:hover, a.button:active {
	text-decoration:none
	}
	
.button:focus, .button:hover {	
	background: #110307 url(images/bg_button.gif) no-repeat ! important;
	}


#menu ul {
	padding: 0;
	margin: 0;
	margin-top: 0px;
}
#menu ul li {
	float: right;
	list-style: none;
	margin-left: 0px;
}
#menu ul li {
        text-transform: uppercase;
	z-index: 10;
	display: block;	
	overflow: hidden;
	color:#fff;
	font-size:13px;
	position: relative;
	padding: 8px 2px 5px 2px;
	font-family: QuicksandBook;	
}

#menu ul li a, #menu ul li a:visited{
	font-size:13px;	
        display: block;
}

#menu ul li a:hover{
	color:#fff;
}

#menu ul li.current a {  
        font-family: QuicksandBold;
}

ul.portfolio_menu {  
	margin-left: 0em;  
	margin-bottom: 0em;
	padding: 0px;
}  
     
ul.portfolio_menu li {  
	list-style-type: none;  
  
   
  padding: 2px 5px 2px 5px;  
}  

.portfolio_menu a {
	color: #ffffff;
	text-decoration: none;
}
      
.selected-0, .selected-1, .selected-2, .selected-3, .selected-4 {  
	color: #fff;
	-webkit-border-radius: 15px;  
	-moz-border-radius: 5px;  
  border-radius: 5px;  
  background: #21170e;  
  -webkit-box-shadow: 1px 1px 0px #8c8c5d;  
}
     
#contact .selected-0 a, #contact .selected-1 a , #contact .selected-2 a, #contact .selected-3 a, #contact .selected-4 a, #contact .selected a, .selected a:visited {  
  color: #fff;  
}

ul.portfolio_item {
	margin-left: 0px;
	padding-left: 0px;
}

ul.portfolio_item li {  
	list-style-type: none;  
	display: block;  
	float: left;  
	margin: 0em;  
	padding-left: 10px;
	padding-bottom: 50px;
}  
  
ul.portfolio_item li img {  
	border: 0px solid #fff;  
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px;  
	border-radius: 5px;  
	-webkit-box-shadow: 0px 0px 5px #ac987e;  
	-moz-box-shadow: 0px 0px 5px #ac987e;  
	box-shadow: 0px 0px 5px #ac987e;  
}

.bruin, .blauw {
	padding: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	clear: both;
	float: left;	
	margin-bottom: 2px;
}

.bruin {
	background: #21170e;
}

.blauw {
	background: #4fc2bc;
}

.blauwe_letters {
    color: #4fc2bc;
    font-weight: bold;
}

.overige_klanten {
	width: 200px;
	height: 150px;
	border: 1px solid #e7e6e5;
	float: left;
	margin-left: 8px;
	margin-right: 1px;
	margin-top: 9px;
}

#nieuws_home {
    width: 247px;
    position: absolute;
    margin-left: -28px;
    margin-top: -15px;
}

#nieuws_home_titel {
    background: #211512;
    padding: 10px 30px 10px 30px;
    text-transform: uppercase;
    font-family: 'QuicksandBold';
    font-size: 14px;
}

#twitter {
    
	width: 187px;
	margin: 15px auto;
}

#twitter ul {
	list-style: none; padding: 0 0 0 0px;
}
#twitter ul li {
	padding: 0px;	
	color: #fff ;
	font-family: QuicksandBook;
}
#twitter ul li a {
	font: italic 10px/30px Georgia, Times, Serif;
	color: #fff;
}

#twitter ul li a:hover { 
	color: #1ad9c9;
}

#twitter ul li span {
	font: 100%/160% QuicksandBook; color: #fff;
	display: block;
}

#twitter ul li span a {
	font: 100%/100% QuicksandBook;
}

iframe.twitter-follow-button {
	padding-left: 30px;
        color: #fff;
}

.fb-like {
    float: right;
}

@font-face {
    font-family: 'QuicksandBold';
    src: url('../fonts/quicksand_bold-webfont.eot');
    src: url('../fonts/quicksand_bold-webfont.eot?#iefix') format('eot'),
         url('../fonts/quicksand_bold-webfont.woff') format('woff'),
         url('../fonts/quicksand_bold-webfont.ttf') format('truetype'),
         url('../fonts/quicksand_bold-webfont.svg#webfontGOLx3okj') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandLight';
    src: url('../fonts/quicksand_light-webfont.eot');
    src: url('../fonts/quicksand_light-webfont.eot?#iefix') format('eot'),
         url('../fonts/quicksand_light-webfont.woff') format('woff'),
         url('../fonts/quicksand_light-webfont.ttf') format('truetype'),
         url('../fonts/quicksand_light-webfont.svg#webfontHOdUx9w3') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandBook';
    src: url('../fonts/quicksand_book-webfont.eot');
    src: url('../fonts/quicksand_book-webfont.eot?#iefix') format('eot'),
         url('../fonts/quicksand_book-webfont.woff') format('woff'),
         url('../fonts/quicksand_book-webfont.ttf') format('truetype'),
         url('../fonts/quicksand_book-webfont.svg#webfontHOdUx9w3') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'QuicksandLightOblique';
    src: url('../fonts/quicksand_book_oblique-webfont.eot');
    src: url('../fonts/quicksand_book_oblique-webfont.eot?#iefix') format('eot'),
         url('../fonts/quicksand_book_oblique-webfont.woff') format('woff'),
         url('../fonts/quicksand_book_oblique-webfont.ttf') format('truetype'),
         url('../fonts/quicksand_book_oblique-webfont.svg#webfontHOdUx9w3') format('svg');
    font-weight: normal;
    font-style: normal;
}

.image-grid {
  padding: 15px 0px 10px;
  width: 640px;
}

.image-grid:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.image-grid li {
  float: left;
  text-align: center;
  line-height: 17px;
  color: #686f74;
  overflow: hidden;
}

.image-grid li img,
.image-grid li strong {
  display: block;
}

.image-grid li strong {
  color: #fff;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
  padding-bottom: 50px;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}

#container {
    padding-left: 10px;
    padding-top: 23px;
    line-height: 17px;
}

#container img{
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #AC987E;
    margin-bottom: 13px;
}




/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}

/*General Mosaic Styles*/
.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:282px;
	height:160px;
	margin: 8px 0px 0px 12px;
	background:#111;
	
}

.mosaic-backdrop {
	display:none;
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background:#111;
}
	
.mosaic-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
	background:#111;
}

/*** Custom Animation Styles ***/


.bar3 .mosaic-overlay {
	top:-160px;
	height:160px;
        width: 282px;
	background: #000;
}
/*** End Animation Styles ***/
              
              
/*Demo Styles*/
.clearfix { 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

.details_link {
    width: 282px;
    height: 110px;
    padding-top: 50px;
    text-align: center; 
    z-index:10; 
    position: absolute; 
}	

.details h4 { 
    font:300 18px 'QuicksandBold'; 
    text-transform: uppercase;
    line-height:160%; 
    letter-spacing:0.05em; 
    color:#fff; 
}

.details p { 
    font:300 12px 'QuicksandBook'; 
    color:#fff; 
    text-transform: uppercase;
    letter-spacing:0.05em; 
}

.details a { 
    text-decoration:none; 
}