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

  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;
}

button
{
  cursor: pointer;
  
  border: 0px;
  margin: 0px;
  height: 34px;
  
  font-size: 11px;
  line-height: 32px;
  color: #fff;
}

button.wide, input.wide
{
  width: 136px;
  font-size: 11px;

  background: url("../gfx/button_wide.gif") no-repeat;
}

input.wide
{
    border: 0px;
    margin: 0px;
    
    width: 136px;
    height: 34px;

    font-size: 11px;
    line-height: 32px;

    color: #fff;
    background: url("../gfx/button_wide.gif") no-repeat;
}

button.short
{
  width: 109px;
  font-size: 11px;

  background: url("../gfx/button_short.gif") no-repeat;
}

input.short
{
    border: 0px;
    margin: 0px;
    
    width: 109px;
    height: 34px;

    font-size: 11px;
    line-height: 32px;

    color: #fff;
    background: url("../gfx/button_short.gif") no-repeat;
}


button.short-right
{
  width: 109px;
  font-size: 11px;
  
  float: right;
  
  background: url("../gfx/button_short.gif") no-repeat;
}

input.short-right
{
    border: 0px;
    margin: 0px;
    
    width: 109px;
    height: 34px;

    font-size: 11px;
    line-height: 32px;

    color: #fff;
    background: url("../gfx/button_short.gif") no-repeat;

    float: right;
}



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

#container
{
  font-size: 10px;
}

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

#container ol
{
  font-size: 1em;
  line-height: 1.6em;
}

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

#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;
}

.info-txt
{
	font-weight: bold;
	font-size: 14px;
	
	color: #666;
	
}

.info-txt span
{
	text-decoration: underline;
	color: #333;
	
}


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

#container div.submenu a
{
  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.8em;
}

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/content.gif) 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-size: 14px;
        font-family: myriad pro, trebuchet ms; /* 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;
	
}



div.news, div.submenu
{

	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.submenu h2
{
  width: 220px;
  padding: 4px 0;
  margin: 6px 20px;

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

  font-size: 1.6em;
}

/* added 6.4.07 */
div.submenu
{
  width: 260px;
  padding: 0px;
}

div#reference
{


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

}


div.news h2
{
	color: #33d0f9;
	
	border-bottom: 3px solid #535353;
	padding: 4px 0;
	margin: 6px 0;
	
	font-size: 1.6em;

}

div.news ul
{

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

}

div.news li
{

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

}

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


}


div.news li span.date
{

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

div.news a
{

	color: #FFF;
	text-decoration: none;

}


div.news a:hover
{

	text-decoration: underline;

}

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

}

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');
}


/* shopping-cart 10.5.2007 */
div.shopping-cart
{
  width: 220px;
  padding: 0px 20px;
  background: #404040;
}

div.shopping-cart h2
{
  color: #33d0f9;
  
  border-bottom: 5px solid #535353;
  padding: 4px 0;
  margin: 6px 0;

}

div.shopping-cart p
{
  padding: 1em 0em 0em 0em;
  color: #fff;
}

div.shopping-cart p span
{
  font-weight: bold;
}

div.shopping-cart a
{
  text-decoration: none;
  color: #fff;
}

div.shopping-cart a.button
{
  display: block;

  width: 150px;
  height: 28px;

  margin: auto;
  margin-top: 10px;

  font-size: 11px;
  text-align: center;
  text-decoration: none;
  line-height: 28px;

  color: #fff;
  background: url("../gfx/cart_button.gif") no-repeat;
}

/*---*/

div.submenu ul
{

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

}

div.submenu li
{

	margin: 0;
	
	font-weight: bold;
	
}


div.submenu ul li.separator
{
	border-bottom: 1px solid #404040; /* 6.4.07 */
	
	line-height: 1px;
	font-size: 1px;
	
	display: block;
	
	height: 1px;
	width: 260px; /* 6.4.07 */
	
	padding: 0;


}

div.submenu ul li.separator span
{
	
	display: none;

}



/* modified 6.4.07 */
div.submenu a
{
  display: block;

  padding: 8px 0px 10px;

  font-family: arial;
  font-weight: bold;
	
  color: #fff;
  text-decoration: none;
}


div.submenu a:hover
{

	text-decoration: underline;

}

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

}

/* added 6.4.07 */
div.submenu a.submenu_level1
{
  margin: 0;
  padding-left: 18px;
	
  background: #353535;
}

div.submenu a.submenu_level2
{

	padding-left: 28px; /* 6.4.07 */

}

div.submenu a.submenu_level3
{

	padding-left: 33px; /* 6.4.07 */

}

div.submenu a.submenu_level4
{

	padding-left: 38px; /* 6.4.07 */

}

/* added 6.4.07 */
div.submenu a.submenu_level1_active
{
  padding-left: 18px;
	
  background: #3da6cc;
}

div.submenu a.submenu_level2_active
{

	padding-left: 28px; /* 6.4.07 */
	
	text-decoration:underline;

}

div.submenu a.submenu_level3_active
{

	padding-left: 33px; /* 6.4.07 */
	text-decoration:underline;
}

div.submenu a.submenu_level4_active
{

	padding-left: 38px; /* 6.4.07 */
	text-decoration:underline;
}


/* 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;
}


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


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

#content
{

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

}

#content h1
{

	border-bottom: 5px solid #f2f2f2;

	padding-bottom: 4px;
	margin-bottom: 6px;
	
}


#content .inner tbody
{
	margin: 0;
	padding: 2px 0;
	
	font-size: 12px;
	
	
}


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

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

.inner li
{
	margin: 0;
	padding: 2px 0;
}

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

	border: 4px solid #f2f2f2;
}

.inner table tr
{
	vertical-align: top;
}
/* shopping cart 21.5.07
------------------------------------*/

fieldset.shopping-cart
{
  border: 0px;
  margin: 0px;
  padding: 0px;
}

fieldset.shopping-cart table
{
  width: 100%;

  margin: 2em 0em 1em 0em;

  border-collapse: collapse;
  border: 5px solid #f2f2f2;
  
}


#container .inner fieldset.shopping-cart table
{ 
  font-size: 1em;
}

fieldset.shopping-cart table
{
  width: 100%;

  margin: 2em 0em 1em 0em;

  border-collapse: collapse;
  border: 5px solid #f2f2f2;
}

fieldset.shopping-cart table a
{
  color: #3da6cc;
  text-decoration: underline;
}

fieldset.shopping-cart table a:hover
{
  text-decoration: none;
}

fieldset.shopping-cart th
{
  height: 35px;
  
  border: solid #f2f2f2;
  border-width: 0px 0px 5px 1px;

  color: #fff;
  text-align: left;
  padding: 0px 2ex;

  background: url("../gfx/cart_header.gif") repeat-x;
}

fieldset.shopping-cart td
{
  padding: 1ex 2ex;

  border: 1px solid #f2f2f2;
}

fieldset.shopping-cart tr.cart-total td
{
  background: #f8f8f8;
}

fieldset.shopping-cart .description
{
  text-align: left;
}

fieldset.shopping-cart .amount
{
  text-align: center;
}

fieldset.shopping-cart td.amount
{
  width: 3em;
}

fieldset.shopping-cart .price
{
  text-align: right;
}

fieldset.shopping-cart td.price
{
  width: 4em !important;
  width: 6em;
}

fieldset.shopping-cart td input.text
{
  width: 2.5em;

  padding: 1ex 1ex;
  
  border: 1px solid #bbb;

  background: #f4f4f4;
}

fieldset.shopping-cart td input.order-text
{
  width: 370px;

  padding: 1ex 1ex;
  
  border: 1px solid #bbb;

  background: #f4f4f4;
}

fieldset.shopping-cart td textarea.order-textarea
{
  width: 370px;
  height: 80px;

  padding: 1ex 1ex;
  
  border: 1px solid #bbb;
  
  font-size: 12px;
  
  font-family: Arial, Helvetica, sans-serif;

  background: #f4f4f4;
}

fieldset.shopping-cart td.input-title
{
  width: 100px;
}


fieldset.shopping-cart td.input-field
{
   width: 370px;
}

fieldset.shopping-cart .missing
{
  color: #FF0000;
}


/* Product & product listing 29.05.07
------------------------------------*/

div.product div.inner
{
  position: relative;

  padding: 0.8em 0em 0em 0em;
  
}


div.product div.link, div.product button.plus, div.product input.plus
{
	float: left;
	
	clear: both;
}

div.product div.description, div.product div.bpm
{
	float: left;
	
	clear: both;
}

div.product div.category-image img
{
  float: right;

  margin: 0px 0px 15px 15px;

  border: 4px solid #f2f2f2;
}

div.product button.plus, div.product input.plus
{
    border: 0px;
    margin: 0px;

    width: 176px;
    height: 38px;

    margin-top: 16px;
    padding-left: 20px;

    font-size: 11px;
    text-align: center;
    
    line-height: 40px;

    color: #fff;
    background: url("../gfx/product_button.gif") 0px 4px no-repeat;
}

div.product div.price
{
  margin-top: 1.5em;

  font-weight: bold;
  
  clear: both;
  
  width: 100%;
  
  float: left;
}



div.product div.color, div.product div.size
{
  margin-top: 1.5em;

  font-weight: bold;
  
  width: 250px;
  
  float: left;
  
  clear: both;
}


div.product div.color b, div.product div.size b
{

	float: left;
	
	width: 100px;

}


div.product div.color select, div.product div.size select
{

	float: left;

}

div.product div.color option, div.product div.size option
{

	padding: 0 4px;

}




div.product-list
{
  position: relative;

  padding: 0.4em 0em 0.4em 0em;
  
  border-bottom: 2px solid #f2f2f2;
  
  clear: both;
   
float: left;
width: 550px;
}

div.product-list a
{
  color: #3da6cc;
  text-decoration: underline;
}

div.product-list a:hover
{
  text-decoration: none;
}

div.product-list div.entrytext
{
  margin: 1em 0em 1.5em 0em;

}

div.product-list span.price
{
  font-weight: bold;

}

div.product-list img.thumb
{
/*  position: absolute;
  top: 1.4em;
  left: 0em;
*/

	float: left;
  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;

}