/*
** Stylesheet for  
** Arkkitehtitoimisto Brunow & Maunula
**
** T:mi Artisokka 2009
**
** Some CSS3 text effects.
*/

html, body, div, form, p, img
{
	margin: 0;
	padding: 0;
	border: 0;
}

body
{
	font-family: Helvetica, Arial, sans-serif;
	background: white;
}
h1,h2,h3
{
	font-family: Helvetica, Arial, sans-serif;
}


/* 
** PAGE COMMON
*/
div#html_container { text-align: center }

div#page
{
	text-align: left;
	margin: 0 auto;
	width: 900px;
}

/* 
** COMMON COLORS, used to differentiate the project categories
				'1'	=> 'cat_off', // office, administration & commercial
				'2'	=> 'cat_res', // residential
				'4'	=> 'cat_ren', // renovation
				'5'	=> 'cat_cul', // culture and education
				'6'	=> 'cat_hea', // health and social
				'7'	=> 'cat_int', // interior design
				'8' => 'cat_urb', // urban planning
				'9' => 'cat_tra' // traffic and industrial
				'10' => 'cat_lei' // leisure
*/
.cat_off { color: #6b9599 !important; }
.cat_res { color: #6a210d !important; }
.cat_ren { color: #ce0000 !important; }
.cat_cul { color: #993622 !important; }
.cat_hea { color: #995a16 !important; }
.cat_int { color: #71ddc0 !important; }
.cat_urb { color: #00cb0b !important; }
.cat_tra { color: #7a8d85 !important; }
.cat_lei { color: #9ce611 !important; }

/* 
** HEADER
*/
div#header
{
	width: 100%;
	position: relative;
	margin: 25px 20px;
}

	div#header h1
	{
		display: block;
		width: 199px;
		height: 39px;
		background: url(cssimg/css_images.png);
		text-decoration: none;
		margin:0;
		padding:0;
	}

	div#header h1 a span { display: none; }


/* 
** MENU
*/
div#menu_container
{
	margin: 25px 20px 20px 20px;
	position: relative;
}

	ul#menu
	{
		display: block;
		width: 100%;
		height: 30px;
		padding: 0;
		list-style-type: none;
		list-style-position: inside;
	}

	ul#menu li
	{
		color: #a0a0a0;
		font-size: 18pt;
		width: 150px;
		height: 30px;
		display: inline;
		float: left;
		text-align: left;
		padding: 0;
		margin: 0;
		list-style-type: none;
		list-style-position: inside;
	}
		ul#menu li.projects { width: 420px; }

	ul#menu li a
	{
		color: #a0a0a0;
		text-decoration: none;
	}
		ul#menu li a.selected
		{
			/* color: #8e8e8e; 
			text-decoration: underline;*/
		}

		ul#menu li a:visited { text-decoration: none; }

		ul#menu li a:hover
		{
			color: #666666;
			text-decoration: underline;
		}

	div#language
	{
		position: absolute;
		display: block;
		right: 0;
		top: 5px;
		width: 72px;
		height: 20px;
	}
		div#language a
		{
			display: inline;
			float: left;
			width: 32px;
			height: 16px;
			text-decoration: none;
			border:0;
			margin-left: 4px;
			background: url(cssimg/css_images.png);
			background-repeat: no-repeat;
		}
			div#language a span { display: none; }

		div#language a.eng { background-position: 0px -40px; }
		div#language a.eng:hover { background-position: 0px -56px; }

		div#language a.fin { background-position: 0px -72px; }
		div#language a.fin:hover { background-position: 0px -88px; }

/* 
** CONTENT
*/
div#content { width:900px; }

	div#content p { }

	/* 
	** FRONTPAGE carousel
	*/
	div#frontpage_carousel { margin: 0px 20px 0 0px; }

		div#frontpage_carousel span
		{
			font-size: 12pt;
			font-weight: bold;
			margin: 0 6px 0 2px;
		}
		div#frontpage_carousel span a
		{
			text-decoration: none;
			color: #a0a0a0;
		}
		div#frontpage_carousel span a:hover
		{
			color: #666;
		}
		div#frontpage_carousel span a.selected
		{
			font-size: 20pt;
			text-decoration: none;
			color: #8e8e8e;
		}

	div#frontpage { }

	#frontpage_slide_0,
	#frontpage_slide_1,
	#frontpage_slide_2,
	#frontpage_slide_3,
	#frontpage .frontpage_slide_container
	{ position:relative; }

	#frontpage .frontpage_project_name
	{
		display: block;
		text-align: right;
		width: 100%;
		height: 40px;
		position: absolute;
		right: 0;
		bottom: 5px;
		/* top: 15px; */
	}
		#frontpage .frontpage_project_name a
		{
			letter-spacing: -0.03em;
			display: block;
			font-size: 26px;
			height: 26px;
			line-height: 26px;
			margin-right: 20px;
			color: white;
			text-decoration: none;
			font-weight: bold;
			text-shadow: 1px 1px 2px #888; /* css3, baby! */
			text-shadow: 1px 2px 10px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.5); /* let's try some alpha too. */
		}

	#frontpage .frontpage_project_description
	{
		display: block;
		position: absolute;
		height: 40px;
		bottom: 5px;
		right: 0;
		font-size: 20pt;
		color: black;
		vertical-align: bottom;
		background: url(cssimg/css_images.png) right -272px no-repeat;
		/* top: 24px; */
	}
		#frontpage .frontpage_project_description p
		{
			font-size: 9pt;
			line-height: 11pt;
			font-family: Verdana, helvetica, sans-serif;
			color: #888;
			display: block;
			height: 40px;
			margin: 0px 45px 0 15px;
			vertical-align: top;
			overflow: hidden;
		}
		#frontpage .frontpage_project_description p a
		{
			color: #888;
			text-decoration: none;		
		}

	/*
	** LEFT SIDE CATEGORIES/CONTENT MENU
	*/
	div#projects_column_left
	{
		float:left;
		display: inline;
		margin-left: 20px;
		margin-right: 30px;
		margin-top: 75px;
		width: 200px;
	}
		div#projects_column_left h4
		{
			font-size: 10pt;
			line-height: 16pt;
			margin: 0 0 8px 0;
		}	
		div#projects_column_left h4 a
		{
			display: block;
			width: 100%;
			text-decoration: none;
			color: #a0a0a0;
		}	
		div#projects_column_left h4 a.selected
		{
			color: #a0a0a0;
			text-decoration: underline;
		}	

	div#projects_menu_container
	{
		margin: 0 0 20px 0;
		width: 200px;
	}
		ul#projects_menu
		{
			margin: 0;
			padding: 0;
			width: 100%;
			list-style: none outside;
		}	
		ul#projects_menu li
		{
			padding: 0 0 0 15px;
			margin: 0 0 8px 0;
		}	
		ul#projects_menu li a,
		ul#projects_menu li strong
		{
			font-size: 10pt;
			line-height: 14pt;
			color: #c0c0c0;
			text-decoration: none;
			display: block;
			width: 185px;
		}	
			ul#projects_menu li a.selected
			{
				text-decoration: underline;
			}

		ul#projects_menu li strong
		{ 
			font-weight: bold;
			padding: 5px 0 0 0 ;
		}


	div#projects_column_left a.selected { color: #666; }

	div#projects_column_left a:hover
	{
		color: #8e8e8e;
		text-decoration: underline;
	}

	/* 
	** PROJECT VIEW PAGE
	*/
	div#project
	{
		float:left;
		display: inline;
		width: 650px;
	}
		div#project .header
		{
			display: block;
			width: 650px;
			padding-bottom: 15px;
			/*height: 75px;*/
		}	

		div#project .header h2
		{
			color: #8e8e8e;
			font-weight: normal;
			font-size: 22pt;
			line-height: 22pt;
			width: 340px;
			float:left;
			display: inline;
			margin:0;
			margin-top: 9px;
		}	
		div#project .header h2.small { font-size: 16pt; }
		div#project .header h2.small_twolines { font-size: 16pt; margin-top: 0; line-height: 20pt;}
		div#project .header h2.view_page {width: 100%;}

			div#project .header h2 span
			{
				display: block;
				font-size: 10px;
				line-height: 12pt;
				font-family: Verdana, Helvetica, sans-serif;
			}

		/* PROJECT THUMBNAILS */
		div#project_thumbnails
		{
			float:right;
			display: inline;
			margin-right: 16px;
			width: 290px;
			text-align: right;
		}
			div#project_thumbnails .thumbnail
			{
				float:left;
				display: inline;
			}

			div#project_thumbnails .thumbnail a { text-decoration: none; }

			div#project_thumbnails .thumbnail img
			{
				margin: 0 1px;
				border: 3px solid #fff;
				background: url(cssimg/css_images.png) right 0px no-repeat;
			}
			div#project_thumbnails .thumbnail img.selected { border: 3px solid #c0c0c0; }
			div#project_thumbnails .thumbnail img:hover { border: 3px solid #8e8e8e; }

		/* PROJECT CONTENT */
		div#project .project_content
		{
			margin: 25px 20px 0 0;
			width: 630px;
		}
		div#project .category_content
		{
			margin: 22px 20px 0 0px;
			width: 630px;
		}

		div#project .project_details,
		div#project .project_description,
		div#project .category,
		div#project .category_project
		{
			font-size: 10pt;
			line-height: 16pt;
			color: #666;
			display: inline;
			float: left;
			width: 300px;
		}
		
		div#project .category
		{
			width: 85%;
			margin-top: 20px;
		}
			div#project .category div.pictures
			{
				float:right;
				width: 210px;
				margin: 0 0 20px 20px;
				line-height: 0;
			}
			div.pictures img
			{
				vertical-align: text-bottom;
				border:0;
				margin: 0 5px 5px 0;
			}


		div#project .project_description
		{
			width: 315px;
			margin-left: 15px;
		}
			.project_description img.tb
			{
				margin: 0 5px 0 0;
			}

		div#project .project_description p,
		div#project .category p,
		div#project .category_project p
		{ margin-bottom: 15px; }
		
		div#project label
		{
			display: inline;
			width: 85px;
			float: left;
			margin-right: 5px;
		}

		p.short_description
		{
			display: inline;
			float: left;
			width: 300px;
			font-style: italic;
			line-height: 16px;
			padding-top: 4px; 
			margin-bottom: 15px;
		}

		
	
	div#project_picture
	{
	}
	div#project_picture_container
	{
	}
	div#project_picture_container img
	{
		vertical-align: bottom;
		border: 0;
	}
	div#project_picture_container .project_picture_caption
	{
		position: relative;
		display: inline;
	}
		div#project_picture_container .project_picture_caption_text
		{
		position: absolute;
		height: 30px;
		width: 100%;
		line-height: 30px;
		font-size: 10pt;
				
		color: #fff;
		background: #000;
		bottom: 0px;
		opacity: 0.5;
		}
		div#project_picture_container .project_picture_caption_text span
		{
			padding: 0 5px;
		}

	/* EMPLOYEES TABLE */

	div.employeescontainer
	{
		font-size: 10pt;
		line-height: 16pt;
		color: #666;
		display: inline;
		float: left;
		width: 100%;
		margin-top: 20px;
	}

	table.employees
	{
		margin-bottom: 15px;
		width: 450px;
	}
		table.employees td
		{
			padding: 3px 10px 8px 0;
			vertical-align: top;
		}
			div#project .employeescontainer div.employees
			{
				float:right;
				width: 160px;
				margin: 0 0 20px 0;
				line-height: 0;
			}
			div.employees img
			{
				border:0;
				padding:0;
				margin: 0;
			}

	/* ARTICLES */
	div.article
	{
		font-size: 10pt;
		line-height: 16pt;
		margin-top: 20px;
		color: #666;
		width: 85%;
	}

	div.article p.info
	{
		font-size: 10px;
		line-height: 13px;
		font-family: Verdana, Helvetica, sans-serif;
		color: #888;
	}

	
	div.article table
	{
		margin-bottom: 50px;
	}

	div.article table th
	{
		width: 150px;
		vertical-align: top;
		padding-bottom: 15px;
	}

	div.article table td
	{
		vertical-align: top;
		padding-bottom: 15px;
	}


	/* PROJECTLIST TABLE */
	div.projectList
	{
		font-size: 10pt;
		color: #666;
		margin-top: 22px;
	}
		div.projectList h3
		{
			font-size: 14pt;
			margin-top: 15px;
			margin-bottom: 20px;
		}
		div.projectList h3 a
		{
			text-decoration: none;
		}
			div.projectList h3 a:hover
			{
				text-decoration: underline;
			}
			
		div.projectList h4
		{
			font-size: 11pt;
			margin-top: 10px;
			padding-left: 20px ;
		}

	table.projectList
	{
		width: 100%;
		margin: 0 0 30px 10px;
		border: 0;
		padding: 0;
		border-spacing: 0;
	}
		table.projectList tr
		{
			margin: 0; padding: 0;
		}
		table.projectList th
		{
			color: #bbb;
			padding: 4px 0 4px 10px;
		}
		table.projectList td
		{
			border-top: solid 1px #f0f0f0;
			color: #888;
			padding: 8px 10px 0px 10px;
			width: 30%;
			vertical-align: top;
		}
		table.projectList td.long
		{
			width: 33%;
		}
		table.projectList td.extralong
		{
			width: 45%;
		}
		table.projectList td.name
		{
			/* font-weight: bold;
			text-transform: uppercase; */
			color: #000;
		}
		table.projectList td.short
		{
			width: 15%;
		}
		table.projectList td.title
		{
			border-top: none;
			padding: 10px 0 10px 10px;
		}

		table.projectList a
		{
			color: #333;
			text-decoration: none;
		}
		table.projectList a:hover
		{
			text-decoration: underline;
		}
		table.projectList td p
		{
			margin-top: 0;
			margin-bottom: 0;
		}


/* 
** FOOTER
*/
div#footer
{
	display: block;
	width: 100%;
	margin: 50px 0 10px 0;
}

	div#footer p
	{
		color: #888;
		font-size: 10px;
		font-family: Verdana, Helvetica, sans-serif;
		width: 180px;
		height: 40px;
		margin: 0 10px 0 35px;
		display: inline;
		float:left;
	}
	div#footer p a
	{
		color: #888;
		text-decoration: none;
	}
	div#footer p em
	{
		display: inline;
		float: left;
		width: 30px;
		font-style: normal;
	}


/* The self-clearing wonder of the world! guess which browser is on my hate list. */
div#project .header:after,
ul#menu:after,
div#content:after,
div#project .project_content:after,
div#project .category_content:after,
div#project .category:after,
div#footer:after,
div#project_thumbnails .thumbnail:after
{
	/* browsers that support :after */
	clear:both;
	content: ".";
	display:block;
	height:0;
	visibility:hidden;
}

* html div#project .header,
* html ul#menu,
* html div#content,
* html div#project .project_content,
* html div#project .category_content,
* html div#project .category,
* html div#footer,
* html div#project_thumbnails .thumbnail
{ height: 1%; } /* for IE5+6 */

*:first-child+html div#project .header,
*:first-child+html ul#menu,
*:first-child+html div#content,
*:first-child+html div#project .project_content,
*:first-child+html div#project .category_content,
*:first-child+html div#project .category,
*:first-child+html div#footer,
*:first-child+html div#project_thumbnails .thumbnail
{ min-height: 1px; } /* for IE7 */