/*
	###############################################################################
	
	Tilipiste Oy Helsinki
	www.tilipiste.com
	
	Styles affecting defined groups of elements i.e. widgets that display content common to each other
	
	Widgets:
	--------
	HEADER
	FOOTER
	NAVICONTAINER
	LIST_PALVELUT_CONTAINER
	LIST_NEWS_CONTAINER
	LIST_PAGE_LINKS
	
	
	Created: Tomi Sarpola / 30.4.2008
	
	###############################################################################
*/




/*  HEADER FORMATTING
    Style definitions for the layout structure element FOOTER.
   
    Gives the text styles and link styles to the elements in FOOTER.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 31.5.2008	 */

	
	#header h3 {
		padding: 0 0 0 0px;
		margin-top: 18px; /* aligned to logo with pixel sizes*/
		margin-left: auto; 
		margin-right: auto;
	}	
	
	#header img.logo_liitto{
		float: right;
		width: 190px;
		border: none;
		margin: 70px 0px 0px 0px; /* aligned to logo with pixel sizes, 12px from right_container's left side*/
	}
	

/*  END OF HEADER FORMATTING */


/*  FOOTER FORMATTING
    Style definitions for the layout structure element FOOTER.
   
    Gives the text styles and link styles to the elements in FOOTER.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 31.5.2008	 */

	
	#footer { 
		text-align: center;
		font-size: 9px;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #333;
		margin-top: 25px;
	}
	
		
	#footer a {
	   color: #333;
	   text-decoration: underline;
	}
	

/*  END OF FOOTER FORMATTING */


/*  NAVICONTAINER
    Style definitions for box with a list of news items.
   
    Gives a green right divider to the container with green header.
    List items use center aligned text, white background, no border and green underlined text effect on hover.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 25.5.2008	 */

	#navicontainer {
	   margin: 0 0 0 0;
	   width: auto; 
	   border-top: 26px solid #AD6;
	   border-right: 3px solid #AD6;
	   border-bottom: 1px solid #AD6;
	   border-left: 1px solid #AD6;
	   padding: 0 0 0 0;
	}
				
	#navicontainer ul {
	   width: auto;
	   margin: 0 0 0 0;
	   padding: 0px 0px 8px 0px;
	   list-style-type: none;
	}

	#navicontainer  li {
		width: auto;
		border-bottom: 1px dotted #AD6;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background-color: #FFF;
	}
	
	#navicontainer a {
		display: block;
		padding: 3px 5px 3px 5px;
		text-align: center;
		font-size: 12px;
		border: solid 2px #AD6;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
	}
			
	#navicontainer a:link, #navicontainer a:visited {
		color: #999;
		border-color: #fff;
	}
	
	#navicontainer a:hover {
		color: #AD6;
	}

/*  END OF NAVICONTAINER */


/*  LIST_PALVELUT_CONTAINER
    Style definitions for box with a list of news items.
   
    Gives a grey box to the container with grey header.
    List items use left aligned text, ligh grey background, dark grey border and white background effect on hover.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 25.5.2008	 */
   
	#list_palvelut_container {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;	   
		width: 100%;
		float: left;		
background-color: #3A3;
		color: #FFF;
		border: 1px solid #3A3;
	}
		
	#list_palvelut_container h5 {
		width: auto;
		background-color: #3A3;
		margin: 0px 0px 0px 0px;
		padding: 5px 12px 5px 12px;
		font-size: 12px;
		font-weight: bold;
		text-transform: none;
		letter-spacing: 1.5px;
	}
	
	#list_palvelut_container h5 a {
		width: 100%;
		color: #FFF;
		text-decoration: none;

	} 
	
	#list_palvelut_container ul {
		width: auto;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 8px 0px;
		list-style: none;
background-color: #FFF;
	}
	
	#list_palvelut_container li {
		width: auto;
		border-bottom: 1px dotted #3A3;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	#list_palvelut_container li a {
		display: block;
		font-size: 10px;
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 3px 12px 3px 12px; 
		border-style: solid;
		border-width: 0px;
	}
	
	#list_palvelut_container li a:link, #list_palvelut_container li a:visited {
		color: #666;
		text-decoration: none;
	}
	
	#list_palvelut_container li a:hover {
		background-color: #AD6;
		color: #666;
	}
   
/*  END OF LIST_PALVELUT_CONTAINER */


/*  LIST_NEWS_CONTAINER
    Style definitions for box with a list of news items.
   
    Gives a grey box to the container with grey header.
    List items use left aligned text, ligh grey background, dark grey border and white background effect on hover.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 25.5.2008	 */
	
	#list_news_container {
		margin: 18px 0 0 0;
		padding: 0 0 0 0;
		width: 100%;
		float: left;
		border: solid 1px #666;
		background-color: #999;
	}
	
	#list_news_container h5 { 
		width: auto;
		background-color: #999;
		color: #FFF;
		margin: 0 0 0 0;
		padding: 5px 5px 5px 12px;
		font-size: 12px;
		font-weight: bold;
		text-transform: none;
		letter-spacing: 1.5px;
	}	
	
	#list_news_container ul {
		width: auto;
		margin: 0 0 0 0;
		padding: 0 0 8px 0;
		list-style-type: none;
		background-color: #FFF;
	}

	#list_news_container li {
		width: auto;
		border-bottom: 1px dotted #999;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	
	#list_news_container a {
		width: auto;
		display: block;
		font-size: 10px;
		font-weight: normal;
		text-transform: none;
		letter-spacing: 1px;
		padding: 5px 12px 5px 35px; 
		border-style: solid;
		border-width: 0px;
		background-image: url(../img/bullet_lgr.gif);
		background-repeat: no-repeat;
		background-position: 12px;
	}

	#list_news_container a.more {
		background-image: none;
		padding: 3px 12px 3px 12px;
	}
	
	#list_news_container a:link, #list_news_container a:visited {
		color: #666;
		text-decoration: none;
		border-color: #EEE;
	}
	
	#list_news_container a:hover {
		color: #666;
		background-color: #EEE;
		border-color: #FFF;
	}

/*  END OF LIST_NEWS_CONTAINER */


/*  LIST_PAGE_LINKS
    Style definitions for box with a list of links to partner web pages and to list of news.
   
    Gives a left margined area for the content.
    List items use left aligned text, ligh green bullet image,light green background effect on hover.
 
    Created: Tomi Sarpola / 24.5.2008
    Last Modified: Tomi Sarpola / 26.5.2008	 */

	#list_page_links {
		width: 100%;
		float:left;
		margin-top: 0px;
		margin-left: auto; 
		margin-right: auto;
		padding: 0 0 0 0;
	}
	
	#list_page_links ul {
		margin: 0 12px 0 12px;
		padding: 0 0 0 0;
		list-style-type: none;
		border-bottom: 1px dotted #999;
	}
				
	#list_page_links a {
		display: block;
		width: auto;
		padding: 5px 0px 5px 30px;
		font-size: 11px;
		font-weight: normal;
		text-transform: none;
		letter-spacing: 1.5px;
		border-top: 1px dotted #999;
		background-image: url(../img/bullet_lgr.gif);
		background-repeat: no-repeat;
		background-position: 5px;
	}
			
	#list_page_links a:link, #list_page_links a:visited {
	   color: #999;
	   text-decoration: none;
	}
			
	#list_page_links a:hover {
	   background-color: #AD6;
	   color: #666;
	}
	
/*  END OF LIST_PAGE_LINKS */


/*  GOOGLE_CONTENT
    Style definitions for a page with Google search results.
   
    Created: Tomi Sarpola / 29.5.2008
    Last Modified: Tomi Sarpola / 30.5.2008	 */
	
	body.google_content {
		background-color: white;
	}
	
	#google_content { 
		padding: 0 0 0 0;
		padding: 0 0 0 0;
		width: 600px;
		border: solid 1px #999;
		background-color: white;
	}
	
	#google_content html, #google_content body, #google_content table {
		width: 600px;
	}

/*  END OF GOOGLE_CONTENT */