/*-----------------------------------------------------------------
Author:		Buro Taggetig
Homepage:	http://www.taggetig.com

Project:	http://www.taggetig.com
			http://www.taggetig.be
Date:		20/08/2008
-------------------------------------------------------------------
Reset
-------------------------------------------------------------------*/
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, 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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: white;
}
ol, ul {
	list-style: none;
}
/*-----------------------------------------------------------------
General
-------------------------------------------------------------------*/
body{
	background: #dfe8ea url(../images/bg-body-single.gif) repeat-x;
	font: 1em Arial, Helvetica, Verdana, sans-serif;
}

a{
	color: #666;
	text-decoration: none;
	/*border-bottom: 1px solid #999;*/
}

a:hover{
	color: #000;
	/*border-bottom: 1px dashed #2ac4ed;
	border-bottom: 1px solid #fff;*/
}

/*-----------------------------------------------------------------
Grid
-------------------------------------------------------------------*/
#hug{
	width: 960px;
	margin: 0 auto;
}

#header, #what-we-do, #what-we-love, #work, #contact, #footer{
	clear: both;
}

#navigation{
	height: 28px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: white;
}

	#navigation #tweet{/*was latest-blog-post*/
		width: 620px;
		float: left;
		font: 0.75em Arial, Helvetica, sans-serif;
		color: #333;
	}
	
		#navigation #tweet img{
			margin-right: 8px;
		}

		#navigation #tweet a#twicon{
			margin-top: 5px;
			float: left;
			border: 0;
		}

		#navigation #tweet a#twink{
			margin-top: 11px;
			float: left;
			font-size: 0.85em;
			color: #db6c4d;
		}

		#navigation #tweet a#twink:hover{
			font-size: 0.85em;
			color: #262626;
		}
		
		#navigation ul{
			float: right;
			margin: 11px 28px 0 0;
			width: 309px;
			height: 13px;
			overflow: hidden;
		}
			
			#navigation ul li{
				text-indent: -9999px;
				display: inline;
				list-style: none;
				float: left;
				height: 13px;
			}

				#navigation ul li a{
					height: 13px;
					display: block;
					overflow: hidden;
					margin-right: 16px;
					border: 0;
				}
				
				#navigation ul li#webdesign a{
					width: 59px;
					background: url(../images/navigation-xs.gif) 0 0 no-repeat;
				}
				
				#navigation ul li#webdesign a:hover{
					background: url(../images/navigation-xs.gif) 0 -13px no-repeat;
				}
			
				#navigation ul li#eventphotography a{
					width: 86px;
					margin-right: 15px;
					background: url(../images/navigation-xs.gif) -60px 0 no-repeat;
				}		
				
				#navigation ul li#eventphotography a:hover{
					background: url(../images/navigation-xs.gif) -60px -13px no-repeat;
				}
			
				#navigation ul li#extras a{
					width: 35px;
					background: url(../images/navigation-xs.gif) -146px 0 no-repeat;
				}
			
				#navigation ul li#extras a:hover{
					background: url(../images/navigation-xs.gif) -146px -13px no-repeat;
				}
	
				#navigation ul li#about-us a{
					width: 46px;
					background: url(../images/navigation-xs.gif) -182px 0 no-repeat;
				}
	
				#navigation ul li#about-us a:hover{
					background: url(../images/navigation-xs.gif) -182px -13px no-repeat;
				}

	
				#navigation ul li#contact-us a{
					width: 82px;
					margin: 0;
					background: url(../images/navigation-xs.gif) -229px 0 no-repeat;
				}
	
				#navigation ul li#contact-us a:hover{
					background: url(../images/navigation-xs.gif) -229px -13px no-repeat;
				}

#header{
	margin: 69px 0 0 0;
	clear: both;
	height: 260px;
}

	#logo, #logo-blog{
		width: 188px;
		height: 171px;		
		float: left;
		display: block;
		margin: 0 0 0 10px;
		background: url(../images/logo-buro-taggetig.gif) no-repeat;
        text-indent: -9999px;
	}
	
		#logo a, #logo-blog a{
        	width: 188px;
            height: 171px;
            display: block;
			text-indent: -9999px;
		}
	
	#welcome-text{
		width: 667px;
		height: 142px;
		float: left;
		display: block;
		margin: 25px 0 0 70px;
		text-indent: -9999px;
		background: url(../images/txt-welcome.gif) no-repeat;
	}

	#webdesign-text{
		width: 690px;
		height: 163px;
		float: left;
		display: block;
		margin: 1px 0 0 66px;
		text-indent: -9999px;
		background: url(../images/txt-webdesign.gif) no-repeat;
	}
   
        #startform{
            position: relative;
            width: 114px;
            height: 22px;
            left: 543px;
            top: 163px;
            text-indent: -9999px;
        }
        
            #startform a{
                width: 114px;
                height: 22px;
                display: block;
            }
    
            #startform a:hover{
                background: url(../images/startform-hover.gif) 0 5px no-repeat;
            }

	#photography-text{
		width: 690px;
		height: 163px;
		float: left;
		display: block;
		margin: 1px 0 0 66px;
		text-indent: -9999px;
		background: url(../images/txt-photography.gif) no-repeat;
	}
	
		#portfolio{
			position: relative;
			left: 566px;
			top: 132px;
            width: 74px;
			height: 22px;
			text-indent: -9999px;
		}
		
			#portfolio a{
				width: 74px;
				height: 22px;
				display: block;
			}
	
			#portfolio a:hover{
				background: url(../images/portfolio-hover.gif) 2px 5px no-repeat;
			}
	
	#extras-text{
		width: 690px;
		height: 163px;
		float: left;
		display: block;
		margin: 23px 0 0 66px;
		text-indent: -9999px;
		background: url(../images/txt-extras.gif) no-repeat;
	}

	#contact-text{
		width: 690px;
		height: 163px;
		float: left;
		display: block;
		margin: 23px 0 0 66px;
		text-indent: -9999px;
		background: url(../images/txt-contact.gif) no-repeat;
	}
	

#what-we-do, #what-we-love{
	/*padding: 110px 0 0 0;
	height: 272px;*/
	margin-bottom: 90px;
}

	#web-design, #event-photography, #tweettweet, #lastfm{
		height: 162px;
		width: 469px;
		background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
		border-right: 1px solid #d6dfe1;
		float: left;
	}
	
	#web-design, #tweettweet{
		margin-right: 20px;
	}

		.web-design-icon, .web-design-icon-anim, .twitter-icon{
			width: 223px;
			height: 109px;
			display: block;
			float: right;
			margin: -22px -1px 0 0;
		}
		
		/*.web-design-icon{
			background: url(../images/icon-webdesign.gif) no-repeat;
		}
		
		.web-design-icon-anim{
			background: url(../images/icon-webdesign-animated.gif) no-repeat;
		}*/
				
		.web-design-icon{
			background: url(../images/icon-webdesign.gif) no-repeat;
		}
		
			.web-design-icon div{
				width: 116px;
				height: 65px;
				display: block;
				margin: 5px 0 0 48px;
				background: url(../images/icon-webdesign-animated.gif) no-repeat;
				display: none;
			}
		
		.web-design-icon-anim{
			background: url(../images/icon-webdesign-animated-fast.gif) no-repeat;
		}
				
		.web-design-icon-saf{
			background: url(../images/icon-webdesign.gif) no-repeat;
		}
		
		.web-design-icon-saf-anim{
			background: url(../images/icon-webdesign-animated.gif) no-repeat;
		}
		
		.twitter-icon{
			height: 129px;
			background: url(../images/icon-twitter.gif) no-repeat;
			margin: -40px -1px 0 0;
		}
		
			#twitter-status{
				font: italic normal 0.75em Arial, Helvetica, sans-serif;
				color: #666;
				padding-left: 29px;
			}


	#event-photography{
		
	}
		.event-photography-icon div{
			width: 43px;
			height: 42px;
			display: block;
			margin: 37px 0 0 93px;
			background: url(../images/icon-event-photography-animated.gif) no-repeat;
			display: none;
		}
			
		.event-photography-icon, .event-photography-icon-anim, .lastfm-icon{
			width: 205px;
			height: 123px;
			display: block;
			float: right;
			margin: -40px -1px 0 0;
		}

		.event-photography-icon{
			background: url(../images/icon-event-photography.gif) no-repeat;
		}

		.event-photography-icon-anim{
			background: url(../images/icon-event-photography-animated.gif) no-repeat;
		}
		
		.lastfm-icon{
			height: 129px;
			background: url(../images/icon-lastfm.gif) no-repeat;
			margin: -40px -1px 0 0;
		}
		
		#lastfm span img{
			margin-right: 4px;
		}

		h4, #what-we-do div span, #what-we-love div span{
			padding-left: 29px;
		}
		
		h3{
			width: 218px;
			height: 22px;
			overflow: hidden;
			font: italic bold 1.4em Arial, Helvetica, sans-serif;
			text-transform: uppercase;
			color: #262626;
			padding: 30px 0 38px 29px;
		}

		h4{
			font: normal bold 1em Arial, Helvetica, sans-serif;
			color: #ab3613;
			margin-bottom: 4px;
		}

		#what-we-do div span, #what-we-love div span{
			font: italic normal 0.75em Arial, Helvetica, sans-serif;
			color: #666;
		}

h2#hide-work{
	display: none;
}

h4#contact-us{
	padding: 0;
	margin: -10px 0 24px 0;
	font-size: 29px;
}
		
#work{
	padding: 30px 0 59px 0;
	margin: -30px 0 0 -21px;/*fixes space between work items*/
    background: url(../images/recent-work.gif) 22px 0 no-repeat;
}
	
	#work li{
		width: 305px;
		height: 322px;
		margin: 0 0 35px 22px;
		float: left;
	}

	#work li div{
		padding: 24px 18px 20px 18px;
		background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
		border-right: 1px solid #d6dfe1;
	}

		#work li div p.category{
			font: normal bold 0.71em Arial, Helvetica, sans-serif;
			font-variant: small-caps;
			margin-top: 18px;
            color: #ab3613;
		}
        
            #work li div p.category a{
                color: #ab3613;
            }
                    
            #work li div p.category a:hover{
                color: #cf3b12;
            }	
			
		#work li div p{
			width: 269px;
			font: normal bold 1em Arial, Helvetica, sans-serif;
			text-transform: uppercase;
			color: #333;
		}

		#work div span{
			font: italic normal 0.75em Arial, Helvetica, sans-serif;
			color: #666;
		}

#work-item{
	float: left;
	width: 268px;
	margin: 94px 22px 35px 0;/*fixes space between work items*/
	padding: 24px 18px 20px 18px;
	background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
	border-right: 1px solid #d6dfe1;
}

	#work-item h5{
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		text-transform: uppercase;
		color: #ab3613;
		padding: 0 0 12px 0;
		margin: 0;
	}

	#numbers{
		font: normal bold 0.7em Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		color: #666;
		margin-bottom: 10px;

	}

		#numbers a{
			text-decoration: none;
			margin: 5px 10px 0 0;
			padding: 1px 4px;
			border: 1px solid #dfe8ea;
			float: left;
		}
		
		#numbers a.activeSlide{
			background: #dfe8ea;
		}

	#work-item p{
		font: 0.75em Arial, Helvetica, sans-serif;
		color: #666;
		padding-bottom: 12px;
		clear: both;
		line-height: 17px;
	}
	
		#work-item p a{
			font-style: italic;
			color: #000;
		}
		#work-item p a:hover{
			color: #666;
		}
			
#work-item-thumbs{
	width: 595px;
	height: 499px;
	/*width: 631px;
	height: 543px;*/
	margin: 94px 0 59px 0;
	padding: 24px 18px 20px 18px;
	float: left;
	background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
	border-right: 1px solid #d6dfe1;
	position: relative;
	z-index: 0;
}

	#work-item-thumbs-jpgs{
		height: 459px;
		position: relative;
		z-index: 1;
	}

	#work-item-thumbs-jpgs img{
		position: relative;
		z-index: -1;
		border: 0;
	}

		#work-item-thumbs #caption{
			width: 100%;
			display: block;
			position: absolute;
			bottom: 24px;
			z-index: 2;
			font: normal bold 0.72em Arial, Helvetica, sans-serif;
			text-transform: uppercase;
			color: #333;
			text-align: center;
			margin: 0 0 0 -18px;
			padding: 0;
		}

#contact{
	height: 470px;
	margin: 0 0 96px 0;
	/*padding: 24px 18px 20px 18px;*/
	background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
	border-right: 1px solid #d6dfe1;
    font: 0.72em Arial, Helvetica, sans-serif;
    color: #777;
}

	#contact span{
    	color: #8b2f12;
        font-size: 1.4em;
    }
    
    #taggetig-data{
        margin: 0 0 0 40px;
        width: 220px;
        float: left;
    }
    	#taggetig-data #contact-icon{
            background: url(../images/icon-contact.gif) top left no-repeat;
            width: 213px;
            height: 110px;
            display: block;
            margin: -20px 0 0 -40px;
        }

        #taggetig-data ul, #contact-form-succes ul{
            margin-top: 20px;
            color: #8b2f12;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 0.9em;
            line-height: 22px;
        }
        
            #taggetig-data ul li, #contact-form-succes ul li{
                color: #777;
                text-transform: none;
                font-size: 1.15em;
                font-weight: normal;
                line-height: 15px;
            }

			#taggetig-data ul li div{
	            width: 46px;
                float: left;
            }
          
        #taggetig-data h6{
            display: none;
        }
        
        #taggetig-data ul li a#doc, #taggetig-data ul li a#pdf{
            color: #777;
            padding: 2px 0 1px 20px;
            line-height: 20px;
        }

        #taggetig-data ul li a#doc{
            background: url(../images/icon-word-file.gif) left top no-repeat;
        }
        
        #taggetig-data ul li a#pdf{
            background: url(../images/icon-pdf-file.gif) left top no-repeat;
        }

        #taggetig-data ul li a#doc:hover, #taggetig-data ul li a#pdf:hover{
            color: #333;
        }

	#contact-form, #contact-form-succes{
    	float: left;
        margin: 40px 0 0 0;
    }

    	#contact-form #who, #contact-form #project-details, #contact-form #message{
            float: left;
        }

    	#contact-form #who{
            width: 200px;
            margin-right: 55px;
        }
        
			#contact-form #who p{
                padding-top: 16px;
	            font: 0.95em Arial, Helvetica, sans-serif;
                color: #8b2f12;
                clear: both;
            }

    	#contact-form #project-details{
            width: 400px;
        }

            #contact-form #project-details input.text{
                width: 146px;
            }


            #contact-form #project-details input.submit{
                clear: both;
                margin-top: 10px;
            }
            
            #contact-form #project-details textarea{
                clear: both;
                width: 400px;
                height: 180px;
                border: 0;
                padding: 4px 2px 2px 2px;
            	background: #dfe8ea;
                font: 1em Arial, Helvetica, sans-serif;
				color: #666;
            }
        
        #contact-form input{
            font: 1em Arial, Helvetica, sans-serif;
			color: #666;
            margin-bottom: 14px;
        }

        #contact-form input.text{
            width: 196px;
            height: 18px;
            padding: 4px 2px 2px 2px;
            background: #dfe8ea;
            border: 0;
            clear: both;
        }

        #contact-form input.checkbox{
        	float: left;
            margin: 1px 6px 0 0;
        }
        
         #contact-form label.check{
        	display: block;
			float: left;
            padding: 4px 8px 0 0;
        }

    
    	#contact-form-succes p{
            color: green;
            padding: 0;
            margin: 0;
        }


#blog{
	width: 665px;
	/*width: 631px;
	height: 543px;*/
	margin: 194px 0 59px 60px;
	padding: 0 18px 20px 0;
	float: left;
}

	#blog li{
		font: 0.75em Arial, Helvetica, sans-serif;
		color: #000;
		border-bottom: 1px dotted #fff;
		padding: 10px 0;
	}

	#blog li a{
		font: inherit;
		color: #db6c4d;
	}

	#blog li a:hover{
		font: inherit;
		color: #cf3b12;
	}
	
	#blog li#blog-note{
		padding: 10px 0;
	}

	#blog h6{
		font-size: 1.7em;
		font-family: Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		padding-top: 10px;
		margin-bottom: 12px;
	}

		#blog h6 a{
			color: #262626;
		}

		#blog h6 a:hover{
			color: #db6c4d;
		}

	#blog p{
		color: #333;
		padding-bottom: 12px;
		clear: both;
		line-height: 19px;
	}

	#blog p.post-info{
		color: #000;
		padding-bottom: 12px;
		clear: both;
		line-height: 17px;
	}

	a.standout{
		font: inherit;
		background: #fff;
		padding: 0 2px;
		border-right: 2px solid #d6dfe1;
		color: #db6c4d;
	}
			
		a.standout span{
			font: 1.2em Arial, Helvetica, sans-serif;
		}

	a.standout:hover{
		font: inherit;
		color: #cf3b12;
	}

	#blog li#blog-note{
		color: #999;
		font-size: 0.6em;
	}
	
	#blog #comment-form{
		padding-top: 20px;
	}	

	#blog #comment-details{
		width: 240px;
		float: left;
	}

		#blog #comment-details input{
			font: inherit;
			width: 226px;
			padding: 4px;
			margin-bottom: 10px;
			border: 0;
			border-top: 1px solid #abadb3;
		}

		#blog #comment-details label{
			font: 0.9em Arial, Helvetica, sans-serif;
			color: #000;
		}

		#blog #comment-details label span{
			color: #cf3b12;
		}
		
		#comment-texta p label{
			font: 0.9em Arial, Helvetica, sans-serif;
		}

	#blog #comment-texta{
		width: 394px;
		padding: 12px 0 0 30px;
		float: left;
	}
	
	#blog #comment-texta textarea{
		font: inherit;
		width: 388px;
		height: 220px;
		padding: 4px;
		margin-bottom: 10px;
		border: 0;
		border-top: 1px solid #abadb3;
	}

	#blog li#blog-comments div, #comment-details p{
		margin-bottom: 20px;
		font: 0.95em Arial, Helvetica, sans-serif;
	}

	#blog li#blog-comments div.admin{
		background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
		border-right: 1px solid #d6dfe1;
		padding: 10px;
	}
	
	#blog .codeblock{
		font: 0.8em 'Lucida Sans Unicode', 'Lucida Sans', Arial, Helvetica, sans-serif;
		line-height: 16px;
		background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
		color: #000;
		border-right: 1px solid #d6dfe1;
		padding: 10px 20px;
		overflow: scroll;
		width: 100%;
	}
	
	#blog pre{
		overflow: scroll;
	}
	
	#blog pre li{
		font: 1em 'Lucida Sans Unicode', 'Lucida Sans', Arial, Helvetica, sans-serif;
		line-height: 16px;
		padding: 0;
		border-bottom: 1px solid #e7eeef;
	}
	
	#blog .codeblock .keyword, #blog .codeblock .default{
		color: #cf3b12;
	}
	#blog .codeblock .string, #blog .codeblock .comment{
		color: #262626;
	}

#footer{
	height: 106px;
	margin-bottom: 30px;
	background: #fff url(../images/shadow-xs.gif) bottom left repeat-x;
	border-right: 1px solid #d6dfe1;
}

	#footer div{
		float: left;
		padding: 30px 20px;
		font: 0.72em Arial, Helvetica, sans-serif;
		color: #666;
		line-height: 17px;
	}

	#footer div div{
		width: 44px;
		padding: 0;
		font: inherit;
	}

	#taggetig-details{
		width: 136px;
		margin: 20px 8px 0 0;
		padding: 0;
		background: url(../images/foot-buro-taggetig-details.gif) 38px 15px no-repeat;
		border-right: 1px solid #e8e8e8;
	}

		#taggetig-details h3{
			display: none;
		}

/*-----------------------------------------------------------------
Bzzzzz Kill
-------------------------------------------------------------------*/
ul:after, #navigation:after, #header:after, #what-we-do:after, #what-we-love:after, #work:after, #footer:after, #numbers:after, #comment-form:after{content: '.'; display: block; height: 0; clear: both; visibility: hidden;}
ul, #navigation, #header, #what-we-do, #what-we-love, #work, #footer, #numbers, #comment-form{display: inline-block;}
ul, #navigation, #header, #what-we-do, #what-we-love, #work, #footer, #numbers, #comment-form{display: block;}