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

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

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

html
{
	height: 100%;
	padding-bottom: 1px;

}

body
{

	margin: 0;
	padding: 0;
	

}

body, p, label, #inner
{

	font-family: Arial, Helvetica, Verdana;
	font-size: 12px;

	line-height: 18px;

	color: #000000;
}

h1
{

	font-family: Trebuchet MS, Tahoma, Helvetica, Arial;

	font-size: 18px;
	
	padding: 0 0 15px 0;
	margin: 0;

	color: #21bce4;

}


h2
{

	font-family: Trebuchet MS, Tahoma, Helvetica, Arial;

	font-size: 16px;
	
	padding: 10px 0 4px 0;
	margin: 0;

	color: #000;

}

h3
{

	font-family: Trebuchet MS, Tahoma, Helvetica, Arial;

	font-size: 12px;
	
	padding: 10px 0 0	 0;
	margin: 0;

	color: #000;

}


p
{
	padding: 10px 0;
	margin: 0;
}

img
{

	border: 0;
	margin: 0;
}

a
{

	text-decoration: underline;
	color: #222222;
}

a:hover
{
	text-decoration: underline;
	color: #555555;
}


/* Relative font sizes 29.05.07
------------------------------------*/

#container
{
  font-size: 10px;
}

#container p
{ 
  font-size: 1em;
  line-height: 1.5em;
}

#container table, #container .inner
{
  font-size: 1.2em;
  line-height: 1.5em;
}

#container .entry .date, #container .entrytext
{
  font-size: 1.2em;
}

#container input.text
{
  font-size: 0.8em;
}

#container .inner li
{ 
  line-height: 1.5em;
}

#container h1
{
  font-size: 1.8em;
}

#container #content h1
{
  line-height: 1.4em;
}


#container h2
{
  font-size: 1.2em;
}

#container h3
{
  font-size: 1.2em;
}

#container div.shopping-cart h2
{
  font-size: 1.6em;
}

#container div.shopping-cart p
{ 
  font-size: 1.1em;
}

#container div.news ul
{
  font-size: 1.1em;
}

#container div.submenu a
{
  font-size: 1.1em
  line-height: 1em;
}

#container div.news h2
{
  font-size: 1.6em;
}

#container div.news li
{
  line-height: 1.3em;
}

#container div.news li span.date
{
  line-height: 0.9em;
}

div.news .entrytext img
{
	margin: 12px;
	padding: 0;

	border: 4px solid #f2f2f2;
}


/* Structure
------------------------------------*/

#main
{

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

	width: 100%;
	float: left;
}

#page
{

	margin: 0 auto;
	
	position: relative;
	
	width: 984px;
}

#actions
{

	position: absolute;
	display: block;
	
	height: 27px;
	width: 884px;
	
	font-size: 11px;
	color: #ccc;
	
	top: 8px;
	left: 68px;

}

/* added 5.4.07 */
#search
{

	position: absolute;
	display: block;
	
	height: 27px;
	
	top: 6px;
	right: 68px;

}

#header
{

	height: 756px; /* 5.4.07 */
	width: 984px;
	
	background: url(../gfx/main.jpg) 310px 113px no-repeat; /* 5.4.07 */
	

}

#container
{

	float: left;
	
	width: 884px;
	
	margin-top: -662px; /* 5.4.07 */
	
	padding: 20px 50px 40px 50px;
	
}


/* logo
------------------------------------*/


div.logo
{

	position: absolute;
	top: 68px;
	left: 70px;
	
	background: url(../gfx/suomalainen-vesiliikuntainstituutti.gif) 0 0 no-repeat;
	
	display: block;
	height: 15px;
	width: 355px;

}

div.logo h1
{
	display: none;
}

/* mainmenu
------------------------------------*/

div.mainmenu
{

	position: absolute;
	top: 35px;
	right: 69px; /* 5.4.07 */

	display: block;

	height: 62px;

	margin: 0;
	padding: 0;
	
	line-height: 18px;

}

div.mainmenu ul
{

	float: left;
	
	margin: 0;
	padding: 0;
	
	height: 62px;
	
	list-style: none;

}


div.mainmenu li
{

	float: left;
	display: inline;
	
	height: 60px;  /* 5.4.07 */

	margin: 0;
}

div.mainmenu a
{

	display: block;
	float: left;
        position: relative; /* 5.4.07 */

	height: 60px; /* 5.4.07 */
/*	width: 73px; */

	margin: 0;
	padding: 0;

	color: #000; /* 5.4.07 */

        font-family: myriad pro, trebuchet ms; /* 5.4.07 */
	font-size: 14px; /* 5.4.07 */
	text-decoration: none;
	
}

/* added 5.4.07 */
div.mainmenu li.active
{
  background: url(../gfx/menu_act.gif) 0 0 repeat-x;
}

/* added 5.4.07 */
div.mainmenu li.active a
{
  color: #fff;
	
  background: url(../gfx/menu_corner_left.gif) 0 0 no-repeat;
}

/* added 5.4.07 */
div.mainmenu li.active  a span
{
  background: url(../gfx/menu_corner_right.gif) 100% 0 no-repeat;
}

div.mainmenu a span
{
  display: block; /* 5.4.07 */

  padding: 30px 16px 12px; /* 5.4.07 */
}




/* sidepanel
------------------------------------*/


#sidepanel
{

	float: left;
	width: 260px;
	
}



#sidepanel div.news
{

	width: 224px;
	float: left;

	margin: 0;
	padding: 0 18px;
	
	color: #FFF;

	background: #404040 url(../gfx/sidepanel-left-header.gif) 0 0 no-repeat;

}

#sidepanel div#reference
{


	background-image: none;
	padding-top: 0;

}


#sidepanel div.news h2
{
  padding: 4px 0;
  margin: 6px 2px;


  width: 220px;

  color: #33d0f9;
  border-bottom: 5px solid #535353;


}

#sidepanel div.news ul
{

	list-style-type: none;
	
	margin: 0;
	padding: 0 0 10px 0;

}

#sidepanel div.news li
{

	margin: 0;
	padding: 10px 0;
	
	font-weight: bold;
	
}

#sidepanel div.news li.dotted
{
	border-bottom: 1px dotted #666;
	
	line-height: 1px;
	font-size: 1px;
	
	display: block;
	
	height: 1px;
	width: 224px;	
	
	padding: 0;


}


#sidepanel div.news li span.date
{

	margin: 0;
	padding: 0;
	
	display: block;
	
	color: #bababa;
	
}

#sidepanel div.news a
{

	color: #FFF;
	text-decoration: none;

}


#sidepanel div.news a:hover
{

	text-decoration: underline;

}

#sidepanel div.news a.arrow
{
	padding: 0 0 0 14px;
	
	background: url(../gfx/arrow.gif) 2px 3px no-repeat;

}

#sidepanel div.news li img
{

	float: right;
	margin: 4px 4px 2px 0;

}

div#reference li
{

	font-weight: normal;
	
}


.sidepanel-footer
{
	height: 7px;
	width: 260px;
	margin: 0;
	padding: 0;
	float: left;
	clear: both;
}

.sidepanel-footer span
{
	position: absolute;
}

.sidepanel-footer span img
{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.sidepanel-footer span
{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/sidepanel-left-foo.png');
}




div.submenu
{

	width: 180px;
	float: left;

	margin: 0;
	padding: 0;

}

div.submenu ul
{

	float: left;
	
	margin: 0;
	padding: 0;
	
	width: 180px;
	
	list-style: none;

}


div.submenu li
{

	float: left;
	
	width: 180px;

	margin: 0;
	padding: 2px 0;
	
}

div.submenu a
{

	float: left;

	width: 180px;
	
	background: #e6f2fc url(../gfx/submenu-header-pass.gif) 0 0 no-repeat;

	margin: 0;
	padding: 0;
	
	text-decoration: none;

}

div.submenu a span
{

	float: left;

	width: 140px;
	
	background: #e6f2fc url(../gfx/submenu-footer-pass.gif) 0 100% no-repeat;

	margin: 5px 0 0 0;
	padding: 0 20px 5px 20px;
	
}


div.submenu a.submenu_level1_active
{

	background: #a5caea url(../gfx/submenu-header-act.gif) 0 0 no-repeat;

}



div.submenu a.submenu_level1_active span
{

	background: #a5caea url(../gfx/submenu-footer-act.gif) 0 100% no-repeat;

}


/* actions
------------------------------------*/


#actions span.divider
{
	margin: 0 15px;
	color: #535353;

}

#actions #font-plus
{
	
	display: block;
	
	position: absolute;
	
	top: 0;
	left: 100px;
	height: 16px; 

	width: 16px;
	background: url(../gfx/font-plus.gif) 0 0 no-repeat;

}

#actions #font-minus
{
	
	display: block;
	
	position: absolute;
	
	top: 0;
	left: 120px;
	height: 16px; 
	width: 16px;
	background: url(../gfx/font-minus.gif) 0 0 no-repeat;

}

#actions a span
{
	display: none;
}

#actions a
{
	color: #ccc;
	text-decoration: none;
}

#actions a:hover
{
	text-decoration: underline;
}

/* search - added 5.4.07
------------------------------------*/

#search label
{
	font-size: 11px;
	color: #ccc;

        margin-right: 10px;
}

#search-field
{
  border: 1px solid #686868;
  background: #404040;
  padding: 3px 5px;
  width: 160px;
  color: #ccc;
}

input#search-field
{
  color: #ccc;
  font-size: 11px;
}

/* content-area
------------------------------------*/

#content
{

	float: right;
	
	width: 548px;  /* 5.4.07 */
	
	margin-top: 256px;
	
	padding-right: 40px;

}

#content h1
{

	border-bottom: 3px solid #f2f2f2;

	padding-bottom: 4px;
	margin-bottom: 6px;
	
	line-height: 24px;

}

.inner ul
{
	padding: 0 20px;
	margin: 0;
	
}

.inner ol
{
	padding: 0 25px;
	margin: 0;
	
}

.inner li
{
	line-height: 18px;
	margin: 0;
	padding: 2px 0;
}

.inner img
{
	margin: 15px;
	padding: 0;

	border: 4px solid #f2f2f2;
}


/* footer
------------------------------------*/

#footer
{

	clear: both;

}

#footer div
{

	width: 844px;

	margin: 0 auto;	
	padding: 10px 20px;

	font-size: 11px;
	color: #666;

	border-top: 1px dotted #f3f3f3;

}

#footer div span
{

	margin: 0 12px;
	color: #e0e0e0;
}

#footer div a#aalto-hautanen
{

	display: block;

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

}

#footer div a#aalto-hautanen span
{

	display: none;

}