/*------------------------------------

  AaltoCMS
  
  type			stylesheet
  name			styles
  copyright		Aalto & Hautanen
  
------------------------------------*/

/* Basics
------------------------------------*/

html
{

	height: 100%;
	padding: 0 0 1px 0;
	margin: 0;
}

body
{

	background: #000 url(../gfx/bg.jpg) 50% 0 repeat-x;
	margin: 0;
	padding: 0;
	
	height: 100%;
	
	font-family: Arial, Helvetica, sans-serif;
}


h1
{

	font-size: 22px;
	font-weight: normal;

	margin: 0;
	padding: 18px 0 8px 0;
	
	line-height: 30px;
}

h3
{

	font-size: 12px;

	margin: 0;
	padding: 12px 0 2px 0;
	
	line-height: 18px;
	
}


h2
{

	font-size: 16px;
	font-weight: normal;

	margin: 0;
	padding: 18px 0 2px 0;
	
	line-height: 20px;
	
}


p
{

	font-size: 12px;
	
	margin: 0;
	padding: 6px 0;
	
	line-height: 18px;

}

a
{

	color: #333333;

}

a:hover
{

	color: #555555;

}


#main
{
	width: 900px;
	
	height: 100%;
	
	position: relative;
	
	margin: 0 auto;
	
}

#page
{

	width: 898px;
	position: relative;
	height: 100%;
	
	margin: 0;
	padding: 0;


	border-left: 1px solid #111;
	border-right: 1px solid #111;

	background: #fff url(../gfx/mainmenu/bg.gif) 0 0 repeat-x;
}


#wrapper
{

	width: 873px;
	
	float: left;
	padding: 40px 13px 15px 13px;

	margin-left: -1px;
	
	background: #fff url(../gfx/page-bg.gif) 0 0 repeat-y;
	
}



/* Mainmenu
------------------------------------*/

#logo
{

	position: absolute;

	top: 12px;	
	left: 24px;
	
	display: block;
	
	z-index: 10;
	
	height: 20px;
	width: 148px;
	
	background: url(../gfx/autopesula-oikari.gif) 0 0 no-repeat;
}

#logo span
{

	display: none;

}

.mainmenu
{

	padding: 0;
	margin: 0;
	
	position: absolute;
	
	display:block;
	
	z-index: 5;
	
	width: 900px;
	height: 40px;

	float: left;
	
	background: #fff url(../gfx/mainmenu/bg.gif) 0 0 repeat-x;

}

.mainmenu ul
{

	padding: 3px 0 0 500px;
	margin: 0;
	
	width: 400px;
	height: 37px;

	float: left;
	
	line-height: 18px;

}

.mainmenu li
{
	display: inline;
	float: left;
	
	height: 28px;
	
	padding: 0;
	margin: 0 5px;
}

.mainmenu li a
{

	float: left;
	
	display: block;
	
	height: 28px;
	
	padding: 0 1px;
	
	background: #000 url(../gfx/mainmenu/passive.gif) 0 0 repeat-x;

}

.mainmenu li a.active
{
	
	background: #1e3242 url(../gfx/mainmenu/active.gif) 0 0 repeat-x;

}

.mainmenu li a span.container span.image
{
	
	display: block;
	float: left;
	
	height: 9px;
	
	margin-top: 11px;

}

.mainmenu li a span.container
{
	
	display: block;
	float: left;
	
	height: 27px;

	background: #000;
	
	padding: 0 10px;

}

.mainmenu li a:hover span.container, .mainmenu li a.active:hover span.container
{
	
	display: block;
	float: left;
	
	height: 27px;

	background: #0c141a;
	
	padding: 0 10px;

}

.mainmenu li a.active span.container
{
	
	display: block;
	float: left;
	
	height: 27px;

	background: #1e3242;
	
	padding: 0 10px;

}

.mainmenu li a:hover, .mainmenu li a.active:hover
{
	
	background: #0c141a url(../gfx/mainmenu/hover.gif) 0 0 repeat-x;

}

.mainmenu li a span.container span#etusivu { width: 48px; background: url(../gfx/mainmenu/etusivu.gif) 0 0 no-repeat; }
.mainmenu li a span.container span#palvelut { width: 55px; background: url(../gfx/mainmenu/palvelut.gif) 0 0 no-repeat; }
.mainmenu li a span.container span#hinnasto { width: 60px; background: url(../gfx/mainmenu/hinnasto.gif) 0 0 no-repeat; }
.mainmenu li a span.container span#yhteystiedot { width: 86px; background: url(../gfx/mainmenu/yhteystiedot.gif) 0 0 no-repeat; }

.mainmenu li a.active span.container span#etusivu { width: 48px; background: url(../gfx/mainmenu/etusivu.gif) 0 -18px no-repeat; }
.mainmenu li a.active span.container span#palvelut { width: 55px; background: url(../gfx/mainmenu/palvelut.gif) 0 -18px no-repeat; }
.mainmenu li a.active span.container span#hinnasto { width: 60px; background: url(../gfx/mainmenu/hinnasto.gif) 0 -18px no-repeat; }
.mainmenu li a.active span.container span#yhteystiedot { width: 86px; background: url(../gfx/mainmenu/yhteystiedot.gif) 0 -18px no-repeat; }

.mainmenu li a:hover span.container span#etusivu, 
.mainmenu li a.active:hover span.container span#etusivu { width: 48px; background: url(../gfx/mainmenu/etusivu.gif) 0 -9px no-repeat; }

.mainmenu li a:hover span.container span#palvelut, 
.mainmenu li a.active:hover span.container span#palvelut { width: 55px; background: url(../gfx/mainmenu/palvelut.gif) 0 -9px no-repeat; }

.mainmenu li a:hover span.container span#hinnasto, 
.mainmenu li a.active:hover span.container span#hinnasto { width: 60px; background: url(../gfx/mainmenu/hinnasto.gif) 0 -9px no-repeat; }

.mainmenu li a:hover span.container span#yhteystiedot, 
.mainmenu li a.active:hover span.container span#yhteystiedot { width: 86px; background: url(../gfx/mainmenu/yhteystiedot.gif) 0 -9px no-repeat; }

.mainmenu li a span.container span.text,
.mainmenu li a.active span.container span.text, 
.mainmenu li a.active:hover span.container span.text, 
.mainmenu li a:hover span.container span.text { display: none;}

/* Content
------------------------------------*/

.content
{

	float: left;
	
	padding: 0 0 0 24px;
	margin: 30px 0 24px 0;	
	
	width: 470px;

}

.main-image
{

	height: 221px;
	width: 514px;
	
	float: left;
	
	background: url( ../gfx/main.jpg) 0 0 no-repeat;
}

.main-image span
{
	display: none;
}

#map
{

	border: 1px solid #333;
	border-top: 0;
	
	float: right;
	
	width: 340px;
	height: 220px;

}


.content h1#title_etusivu, .content h1#title_hinnasto, .content h1#title_palvelut, .content h1#title_yhteystiedot
{

	padding: 0 0 12px 0;
	margin: 0;	

	width: 177px;
	height: 22px;
	
	line-height: 12px;

}

.content h1#title_etusivu
{

	background: url(../gfx/h1_autopesula_oikari.gif) 0 0 no-repeat;

}

.content h1#title_hinnasto
{

	background: url(../gfx/h1_hinnasto.gif) 0 0 no-repeat;

}

.content h1#title_palvelut
{

	background: url(../gfx/h1_palvelut.gif) 0 0 no-repeat;

}

.content h1#title_yhteystiedot
{

	background: url(../gfx/h1_yhteystiedot.gif) 0 0 no-repeat;

}


.content h1#title_etusivu span, .content h1#title_hinnasto span, .content h1#title_palvelut span, .content h1#title_yhteystiedot span
{

	display: none;

}

.inner table
{

	margin: 0;
	padding: 6px 0;
	
	width: 100%;
	
	line-height: 16px;
	
	font-size: 12px;

}

.inner table tr, .inner table td, .inner table th
{

	vertical-align: top;

}

.inner table.hinnasto td, .inner table.hinnasto th
{

	padding: 6px 0;
	text-align: left;

	border-bottom: 1px solid #999;
}

.inner table td img
{

	border: 1px solid #333;

}

.inner table.hinnasto th.palvelu
{

	width: 300px;

}

.inner table.hinnasto .hinta
{

	text-align: right;

}

.inner table.contacts td
{

	border-bottom: 0;
}

.inner ul
{

	line-height: 18px;
	font-size: 12px;
	
	margin: 0 12px;
	padding: 0;
}

.inner ul li
{

	margin: 0;
	padding: 2px 0;
}


/* Sidepanel
------------------------------------*/

.sidepanel, .sidepanel-center
{

	float: right;

	border-left: 1px solid #e5e5e5;
	
	padding: 0 24px 0 30px;
	margin: 30px 0 24px 0;	

	width: 305px;

}

.sidepanel-center
{

	text-align: center;
}



.sidepanel img, .sidepanel-center img
{

	border: 1px solid #333;

	margin-top: 10px;

}

.sidepanel h4#title_yhteystiedot
{

	padding: 0 0 12px 0;
	margin: 0;	

	width: 81px;
	height: 22px;
	
	line-height: 12px;
	
	background: url(../gfx/h2_yhteystiedot.gif) 0 0 no-repeat;

}

.sidepanel h4#title_yhteystiedot span
{

	display: none;

}

.sidepanel .yhteystieto-kartta
{

	margin: 35px 0 20px 0;

}


.contacts
{

	margin: 0 !important;
	margin: 6px 0 0 0;	
	
	padding: 6px 0;
	
	font-size: 12px;
	color: #222;
	
	line-height: 15px;

}

.contacts tr, .contacts td
{
	
	vertical-align: top;

}

.contacts td
{

	padding: 0 0 6px 0;
}

.contacts .title
{

	font-weight: bold;
	width: 80px;

}



/* Footer
------------------------------------*/

#divider
{

	height: 1px;
	line-height: 1px;
	
	width: 100%;

}

.footer
{

	width: 841px;
	
	clear: both;
	float: left;
	
	padding: 6px 16px 20px 16px;
	
	font-size: 11px;
	color: #666;
	
	border-top: 1px solid #e5e5e5;

}

.footer a#aalto-hautanen
{

	display: block;

	width: 94px;
	height: 16px;
	
	float: right;
	
	background: url(../gfx/aalto-hautanen.gif) 0 4px no-repeat;

}

.footer a#aalto-hautanen span
{

	display: none;

}

.footer a
{

	text-decoration: none;

}

.footer a:hover
{

	text-decoration: underline;

}