/*
Theme Name: O / Utrecht
Theme URI: http://www.o-utrecht.nl
Description: The theme used for the O / Utrecht website
Author: Hamaka BV
Author URI: http://www.hamaka.nl
Version: 1.0
*/

/********** CORE **************************************************/

	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	body {
		font-family: Arial, sans-serif;
		font-size: 13px;
		color: #737373;
		background-color: #ffffff;
	}

	h1, h2, h3 {
		font-weight: bold;
		color: #f22523;
	}

	h1 { font-size: 200%; }
	h2 { font-size: 120%; }
	h3 { font-size: 110%; }

	a { color: #525252; }
	a:hover { color: #f22523; }

	p { margin: 8px 0; }

	abbr { border-bottom: 1px dotted #737373; }

	#container {
		position: relative;
		margin: 0 auto;
		padding: 0 21px;
		width: 960px;
		background-color: #ffffff;
		background-image: url('images/bg-container.gif');
		background-repeat: repeat-y;
	}

/********** TOP ***************************************************/

	#top { height: 153px; }

		#top div.left {
			float: left;
			width: auto;
		}

			#top a#o-logo {
				display: block;
				float: left;
				margin-top: 10px;
				width: auto;
				height: 134px;
			}

			#top div#menu {
				float: left;
				width: auto;
			}

				#menu ul#mainnav {
					position: relative;
					width: 551px;
					height: 153px;
				}

					#mainnav li {
						float: left;
						width: 149px;
						height: 153px;
					}

					#mainnav li#bureauNav, 
					#mainnav li#werkNav, 
					#mainnav li#ooohNav, 
					#mainnav li#blogNav {
						position: absolute;
					}

					#mainnav li#werkNav {
						left: 134px;
					}

					#mainnav li#ooohNav {
						left: 268px;
					}

					#mainnav li#blogNav {
						left: 402px;
					}

						#mainnav li a {
							display: block;
							position: relative;
							width: 149px;
							height: 153px;
							font-size: 1%;
							color: #ffffff;
							text-align: center;
							text-decoration: none;
							background-repeat: no-repeat;
						}

						li#bureauNav a {
							background-image: url('images/bg-mainnav-bureau.gif');
							z-index: 93;
						}

						li#werkNav a {
							background-image: url('images/bg-mainnav-werk.gif');
							z-index: 92;
						}

						li#ooohNav a {
							background-image: url('images/bg-mainnav-oooh.gif');
							z-index: 91;
						}

						li#blogNav a {
							background-image: url('images/bg-mainnav-blog.gif');
							z-index: 90;
						}

						#mainnav li a.active, 
						li#bureauNav a:hover, 
						li#werkNav a:hover, 
						li#ooohNav a:hover, 
						li#blogNav a:hover {
							color: #000000;
							background-position: 0 -153px;
							z-index: 94;
						}

		#top div.right {
			position: relative;
			float: right;
			width: 250px;
			height: 117px;
		}

			#top div.right img {
				position: absolute;
				top: 13px;
				right: 18px;
			}

			#top div.right ul#headernav {
				position: absolute;
				bottom: 0;
				right: 18px;
				font-size: 85%;
				color: #000000;
			}

				#headernav li {
					float: left;
					margin-left: 7px;
					padding-left: 8px;
					width: auto;
					background-image: url('images/bg-nav-li.gif');
					background-repeat: no-repeat;
				}

					#headernav li a {
						color: #000000;
						text-decoration: none;
					}

					#headernav li a:hover { color: #f22523; }

/********** MAIN **************************************************/

	#main {
		position: relative;
		padding-top: 6px;
		width: 960px;
		min-height: 655px;
		overflow: hidden;
	}

		#main img#header {
			display: block;
			width: 960px;
			height: 225px;
		}

		#main div#content {
			float: left;
			padding: 20px 0 60px 20px;
			width: auto;
		}

			#contentwrapper {
				float: left;
				width: auto;
				background-repeat: repeat-y;
			}

			#contentwrapper.three-col { background-image: url('images/bg-content-3col.gif'); }

			#content div.left, 
			#content div.center, 
			#content ul#sidebar.right {
				height: auto !important;
				min-height: 341px;
			}

			#content div.left {
				float: left;
				padding-right: 15px;
				width: 206px;
			}

				#content div.left h3 { font-weight: normal; }

			#content div.center {
				float: left;
				margin-left: 2px;
				padding: 0 17px;
				width: 443px;
				text-align: left;
				line-height: 20px;
			}

			#content ul#sidebar.right {
				float: right;
				margin-left: 2px;
				padding-left: 17px;
				width: 221px;
				overflow: hidden;
			}

				#sidebar.right h3 { font-weight: normal; }

		#main div#footer {
			position: absolute;
			z-index: 78;
			bottom: 10px;
			left: 20px;
		}

			#footer ul#servicenav {
				font-size: 80%;
				color: #737373;
			}

				#servicenav li {
					float: left;
					margin-right: 7px;
					padding-left: 8px;
					width: auto;
					background-image: url('images/bg-nav-li.gif');
					background-repeat: no-repeat;
				}

					#servicenav li a {
						color: #737373;
						text-decoration: none;
					}

					#servicenav li a:hover { color: #f22523; }

/********** MAIN LEFT *********************************************/

	#contentwrapper div.left ul#blogpostsnav {
		margin-top: -3px;
		margin-bottom: 50px;
		font-size: 120%;
	}

		#blogpostsnav li { line-height: 26px; }

			#blogpostsnav li a {
				padding: 2px;
				color: #737373;
				text-decoration: none;
			}

			#blogpostsnav li a:hover , 
			#blogpostsnav li a.active {
				color: #ffffff;
				background-color: #000000;
			}

	#contentwrapper div.left div#archive, 
	#contentwrapper div.left div#tagcloud {
		float: left;
		margin-bottom: 35px;
	}

		#archive ul { margin-top: 5px; }

			#archive ul li { line-height: 20px; }

				#archive ul li a { text-decoration: none; }
				
	
	.smart-archives { margin-bottom: 14px; float: left;}
	.smart-archives p.year-block { margin-bottom: 4px; float: left;}
	.smart-archives .year-link { text-decoration: none; clear: both; display: block; margin-bottom: 4px;}
	.smart-archives a.month-link, .smart-archives .empty-month { 
		border: 1px solid #D1D1D1; 
		display: block; 
		float: left; 
		padding:2px;
		margin-right: 3px;
		margin-bottom: 3px;
		width: 25px; 
		text-decoration: none;
		text-align: center;
	}
	.smart-archives a.month-link:hover { background-color: #DFDFDF;}
	.smart-archives .empty-month { color: #BFBFBF; cursor:default; }
	
	
	#contentwrapper div.left div#recentphotos {
		float: left;
		padding: 12px;
		width: 180px;
		background-color: #f4eed6;
	}

		#recentphotos ul li {
			float: left;
			margin: 7px 7px 0 0;
			width: 55px;
			height: 55px;
		}

		#recentphotos ul li.right { margin-right: 0; }

			#recentphotos ul li a {
				display: block;
				height: 55px;
			}

/********** MAIN RIGHT ********************************************/

	#contentwrapper ul#sidebar.right { padding-top: 3px; }
	
	#contentwrapper ul#sidebar.right li {
		margin-bottom: 35px;
		padding-right: 20px;
	}

		#contentwrapper ul#sidebar.right li ul { margin-top: 5px; }

			#contentwrapper ul#sidebar.right li ul li {
				margin: 0;
				padding-right: 0;
				line-height: 20px;
			}

			#contentwrapper ul#sidebar.right li#twitter ul li { margin-bottom: 8px; }
			
			#contentwrapper ul#sidebar.right li#twitter a.h3link { color: #F22523; text-decoration: none;}
			#contentwrapper ul#sidebar.right li#twitter a.h3link:hover { text-decoration: underline;}

			#contentwrapper ul#sidebar.right li#twitpics {
				float: left;
				padding: 12px;
				width: 180px;
				background-color: #f4eed6;
			}

				#contentwrapper ul#sidebar.right li#twitpics ul li {
					float: left;
					margin: 7px 7px 0 0;
					width: 55px;
					height: 55px;
				}

				#contentwrapper ul#sidebar.right li#twitpics ul li:nth-child(3n) { margin-right: 0; }

					#contentwrapper ul#sidebar.right li#twitpics ul li a {
						display: block;
						height: 55px;
					}

			#contentwrapper ul#sidebar.right li#rss-images {
				float: left;
				padding: 12px;
				width: 180px;
				background-color: #f4eed6;
			}

				#rss-images div.simplepie, 
				#rss-images div.simplepie ul {
					float: left;
					width: auto;
				}

				#contentwrapper ul#sidebar.right li#rss-images ul li {
					float: left;
					margin: 7px 7px 0 0;
					width: 55px;
					height: 55px;
				}

				#contentwrapper ul#sidebar.right li#rss-images ul li:nth-child(3n) { margin-right: 0; }

					#rss-images ul li a {
						display: block;
						height: 55px;
					}

/********** BLOG POST (THE LOOP) **********************************/

	#contentwrapper div#post-list.center div.post {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 2px dotted #dadada;
		overflow: hidden;
	}

		#post-list div.post h2 { font-weight: normal; }

		#post-list div.post h2 a {
			color: #f22523;
			text-decoration: none;
		}

		#post-list div.post small { font-size: 85%; }

		#post-list div.post div.entry {
			float: left;
			margin: 10px 0 20px 0;
			width: 443px;
		}

			#post-list div.post div.entry div.wp-caption {
				margin: 0 auto;
				text-align: center;
				background-color: #ffffff;
				/*border: 1px solid #e7e7e7;
				-moz-box-shadow: 0 0 3px #737373;
				-webkit-box-shadow: 0 0 3px #737373;*/
			}

				#post-list div.post div.entry div.wp-caption a {
					display: block;
					padding-top: 5px;
				}

				#post-list div.post div.entry div.wp-caption p.wp-caption-text {
					margin: 0;
					padding: 0 0 5px 0;
					font-size: 85%;
					color: #f22523;
					text-align: center;
					/*background-image: url('images/bg-polaroid-title.gif');
					background-repeat: repeat-x;
					background-position: 0 100%;*/
				}

		#post-list div.post p.postmetadata { font-size: 85%; }

	#post-list div.navigation .alignleft { float: left; }
	#post-list div.navigation .alignright { float: right; }

	#post-list div.navigation .aligncenter {
		float: left;
		margin: 0 60px 0 60px;
	}

		#post-list div.navigation div a {
			color: #f22523;
			text-decoration: none;
		}

		#post-list div.navigation div a:hover { text-decoration: underline; }

/********** COMMENTS **********************************************/

	div#comments {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #e7e7e7;
	}

		#comments h3 {
			margin-bottom: 10px;
			font-weight: normal;
		}

		#comments ol.commentlist, 
		#comments ol.commentlist li, 
		#comments ol.commentlist div.comment-body {
			float: left;
			width: 443px;
		}

		#comments ol.commentlist div.comment-body {
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px dotted #e7e7e7;
		}

		#comments ol.commentlist div.comment-left {
			float: left;
			margin-top: 12px;
			width: 120px;
			text-align: left;
		}

			#comments div.comment-left div.comment-author cite {
				font-weight: bold;
				font-style: normal;
			}

			#comments div.comment-left div.comment-meta a { font-size: 85%; }

		#comments ol.commentlist div.comment-arrow {
			float: left;
			margin-top: 25px;
			width: 10px;
			height: 10px;
			background-image: url('images/bg-comment-body.gif');
			background-repeat: no-repeat;
		}

		#comments ol.commentlist div.comment-right {
			float: right;
			padding: 12px;
			width: 289px;
			background-color: #f4eed6;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}

			#comments div.comment-right em.queue {
				float: left;
				padding: 2px;
				width: 285px;
				color: #f22523;
				text-align: center;
				background-color: #ffbcc1;
			}

			#comments div.comment-right p { text-align: left; }

	div#respond {
		margin-top: 20px;
		padding: 12px;
		background-color: #f4eed6;
	}

		#respond h3 {
			font-weight: normal;
			text-transform: uppercase;
		}

		#respond form#commentform p {
			float: left;
			margin: 4px 0;
		}

		#commentform label {
			float: left;
			padding: 2px 0 1px 0;
			width: 120px;
		}

		#commentform input.textbox {
			float: left;
			padding: 3px;
			width: 287px;
			border: 0 none;
		}

		#commentform textarea {
			float: left;
			padding: 3px;
			width: 287px;
			max-width: 287px;
			border: 0 none;
		}

		#commentform input.button {
			margin-left: 120px;
			text-align: left;
		}

/********** BOTTOM ************************************************/

	#bottom {
		margin: 0 auto;
		width: 1002px;
		height: 22px;
		background-image: url('images/bg-bottom.gif');
		background-repeat: repeat-x;
	}

	#bottom div.left, #bottom div.right {
		width: 21px;
		height: 22px;
		background-repeat: no-repeat;
	}

	#bottom div.left {
		float: left;
		background-image: url('images/bg-bottom_left.gif');
	}

	#bottom div.right {
		float: right;
		background-image: url('images/bg-bottom_right.gif');
	}

/********** MISCELLANEOUS *****************************************/

	.clearer { clear: both; }

	a.readmore {
		color: #f22523;
		text-decoration: none;
	}

	.inputElement {
		font-family: Arial, sans-serif;
		font-size: 100%;
	}

	input.textbox {
		color: #737373;
		border: 1px solid #737373;
	}

	textarea { color: #737373; }

	input.button {
		padding: 0;
		color: #737373;
		background-color: transparent;
		border: 0;
	}

	.redText { color: #f22523; }