@import url("layout.css");
/* ^ Import extra CSS items, untested necessity */

/* The body of the page */
body {
	font-family: Arial, sans-serif;
	font-size: small;
	background: #CCCCCC url('/johtomap1.jpg') fixed center top;
	
}

/* This goes inside the entire body,
	Change the entire page's width here.
	Technically, the above items could be placed within here.
	*/
#container {
	width: 100%;
	height: 100%;
}

/* The top section, where the banner is */
#header {
	overflow: hidden;
	height: 177px;
	text-align: right;
	margin: 5px 5px 0px 5px;
	left: 0px;
	right: 0px;
}

/* The menu below the banner */
#menubar{
	background-image: url('/f/menubar.png');
	width: 567px;
	height: 45px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	padding-top: 5px;
}

/* The menu container */
#menu_x{
	margin-top: 10px;
	display: inline-block;
	text-align: center;
}

/* A button on the menu bar */
.bar_button{
	/*float: left;*/
	border: 4px #FFF5A1 outset;
	padding: 5px 3px 8px 3px;
	margin: 0px 0px 0px 0px;
	font-size: 10pt;
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	background-image: url('/f/br.png');
	display: inline;
}
.bar_button a{
	text-decoration: none;
	color: #000000;
	font-weight: bold;
}

/* Holder for the entire bottom part (everything below the header) */
#page_content {
	position: relative;
	top: 5px;
	margin-bottom: 10px;
}

/* The vertical column on the left */
#sidebar {
	position: relative;
	float: left;
	width: 137px;
	/*border: 3px black double;*/
	left: 5px;
	/*background-color: #cb8;*/
	margin-bottom: 5px;
	
}

/* The vertical column on the right */
#sidebar2 {
	position: relative;
	float: right;
	width: 137px;
	text-align: center;
	right: 5px;
	margin-bottom: 5px;
}

/* The navigation boxes within the side columns */
.sidebar3 {
	position: relative;
	float: left;
	width: 137px;
	margin-bottom: 5px;
	margin-top: 0px;
}
.sidebar3 p{
	margin: 0px;
}
.sidebar3 h4{
	margin: 0px;
	padding-bottom: 1em;
}
.sidebar3 h5{
	margin: 0px;
	padding: 1em 0px 1em 0px;
}
.sidebar3 img{
	padding-right: 3px;
}

/* The "r" is the actual holder of the boxes on the sidebar3.
	r_top is the horizontal bar above the box.
	r_bottom is the horizontal bar below the box. */
.r{
	width: 132px;
	background-image: url('/f/or.png'); 
	padding-left: 5px;
}
.r_top{
	width: 137px;
	height: 15px;
	background-image: url('/f/or-t.png'); 
}
.r_bottom{
	width: 137px;
	height: 15px;
	background-image: url('/f/or-b.png'); 
}

/* For the Twitter update feed on the left side */
#twitter_update_list {
	padding-left: 0px;
	margin-left: 8px;
	margin-right: 8px;
	text-align: left;
	list-style-position: inside;
	list-style-type: square;
	font-size: x-small;
	
}
#twitter-link {
	margin-left: 8px;
	margin-right: 8px;
	display: block;
	text-align: center;
}

/* The middle section, where the actual content goes.
	content_case: The holder of the entire content section.
	content_holder: The holder of the top and bottom bars.
	content_tl, _tr: The top left and rop right corners.
	conntent_bl, _br: The bottom left and bottom right corners.
	content_tb: The middle area between the _tl/_tr and _bl/_br parts.
	content: The actual area where articles and other goodies go.
*/
#content_case{
	margin-left: 147px;
	margin-right: 147px;
}
.content_holder{
	height: 15px;
	display: block;
}
#content_tl{
	background-image: url('/f/wh-tl.png');
	width: 15px;
	height: 15px;
	float: left;
}
#content_tr{
	background-image: url('/f/wh-tr.png'); 
	width: 15px;
	height: 15px; 
	float: right;
}
#content_bl{
	background-image: url('/f/wh-bl.png');
	width: 15px;
	height: 15px; 
	float: left;
}
#content_br{
	background-image: url('/f/wh-br.png'); 
	width: 15px;
	height: 15px;
	float: right;
}
.content_tb{
	height: 15px;
	background-image: url('/f/wh.png');
	margin-left: 15px;
	margin-right: 15px;
}
#content {
	padding: 3px 10px 3px 10px;
	color: black;
	background-image: url('/f/wh.png');
}

/* The advertisement block at the top of #content */
.adspace{

}

/* The bottom section, where the copyright and disclaimer go.
	footer_case: The holder of the entire footer section.
	footer_holder: The holder of the top and bottom bars.
	footer_tl, _tr: The top left and rop right corners.
	footer_bl, _br: The bottom left and bottom right corners.
	footer_tb: The middle area between the _tl/_tr and _bl/_br parts.
	footer: The actual area where the disclaimer goes.
*/
#footer_case{
	margin: 0px 5px 5px 5px;
	clear: both;
}
.footer_holder{
	height: 15px;
	display: block;
}
#footer_tl{
	background-image: url('/f/bl-tl.png');
	width: 15px;
	height: 15px;
	float: left;
}
#footer_tr{
	background-image: url('/f/bl-tr.png'); 
	width: 15px;
	height: 15px; 
	float: right;
}
#footer_bl{
	background-image: url('/f/bl-bl.png');
	width: 15px;
	height: 15px; 
	float: left;
}
#footer_br{
	background-image: url('/f/bl-br.png'); 
	width: 15px;
	height: 15px;
	float: right;
}
.footer_tb{
	height: 15px;
	background-image: url('/f/bl.png');
	margin-left: 15px;
	margin-right: 15px;
}
#footer {
	left: 0px;
	right: 0px;
	overflow: hidden;
	padding: 0px 10px 0px 10px;
	color: black;
	background-image: url('/f/bl.png');
}

/* Font styles for the footer */
#footer p {
	font-size: x-small;
	color: black;
}
#footer a {
	text-decoration: underline;
}
#footer a:hover {
	color: #a00;
	text-decoration: underline;
}

/* The news section, where the news goes.
	news_case: The holder of the entire footer section.
	news_holder: The holder of the top and bottom bars.
	news_tl, _tr: The top left and rop right corners.
	news_bl, _br: The bottom left and bottom right corners.
	news_tb: The middle area between the _tl/_tr and _bl/_br parts.
	news: The actual area where the news goes.
*/
.news_case{
	margin: 0px 5px 5px 5px;
}
.news_holder{
	height: 15px;
	display: block;
}
.news_tl{
	background-image: url('/f/bl-tl.png');
	width: 15px;
	height: 15px;
	float: left;
}
.news_tr{
	background-image: url('/f/bl-tr.png'); 
	width: 15px;
	height: 15px; 
	float: right;
}
.news_bl{
	background-image: url('/f/bl-bl.png');
	width: 15px;
	height: 15px; 
	float: left;
}
.news_br{
	background-image: url('/f/bl-br.png'); 
	width: 15px;
	height: 15px;
	float: right;
}
.news_tb{
	height: 15px;
	background-image: url('/f/bl.png');
	margin-left: 15px;
	margin-right: 15px;
}
.news{
	left: 0px;
	right: 0px;
	overflow: hidden;
	padding: 0px 10px 0px 10px;
	color: black;
	background-image: url('/f/bl.png');
}

/* Font styles for the news */
.news p {
	font-size: x-small;
	color: black;
}
.news a {
	text-decoration: underline;
}
.news a:hover {
	color: #a00;
	text-decoration: underline;
}

/* General font styles unless overridden above, some are unused */
h6 {
	font-weight: bold;
}
h5 {
	font-weight: bold;
}
h4 {
	font-weight: bold;
}
h3 {
	font-weight: bold;
}
h2 {
	font-weight: bold;
}
h1 {
	font-weight: bold;
}
a {
	color: #0519AA;
	text-decoration: underline;
}
a:hover {
	color: #a00;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

/* To be used later, opacity commands for all browsers (Not valid CSS) */
	/*filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;*/