/* Generic styles. H1 is used for repeating the heading of each page. */
body { background-color: #FFFFFF; margin-left: 0px; }
h1 { font-size: 16px; margin-bottom: 5px; margin-top: 16px; }
b.left { width: 364px; float: left; } /* These two b classes are used for pseudo-headings on the sdlehdet.html page */
b.right { padding-left: 30px; }

/* Styles for the fixed-size top area displayed on each page. */
div#topBannerArea { position: relative; margin-left: auto; margin-right: auto; width: 980px; }
img#leftHat { position: absolute; top: 0px; left: 0px; }

div#SVRLogo { position: absolute; top: 42px; left: 0px; }
div#SVRLogo img { border-style: none; }

div#SVRTextBanner { position: absolute; top: 42px; left: 197px; 
				   background: url(images/gradientbackground.png) }
div#borderBar { position: absolute; top: 238px; left: 0px; 
			   background-color: #506888; width: 980px; height: 5px; }
			   
/* Styles for the top navigation bar, which is repeated on each page and located
   at the very top of the layout. */
div#topNavigationBar { position: absolute; top: 0px; left: 197px; 
				      height: 42px; width: 783px;
					  font-weight: bold; color: #FFFFFF; 
					  background: url(images/righttopbar.png); text-align: center; 
					  margin-left: auto; margin-right: auto; }
div#topNavigationBar a:active { background: transparent; text-decoration: none; 
							  color: #FFFFFF; padding-left: 20px; vertical-align: -10px; }
div#topNavigationBar a:link { background: transparent; text-decoration: none; 
							color: #FFFFFF; padding-left: 20px; vertical-align: -10px; }
div#topNavigationBar a:visited { background: transparent; text-decoration: none;
							   color: #FFFFFF; padding-left: 20px; vertical-align: -10px; }
div#topNavigationBar a:hover { background: transparent; text-decoration: none;
							 color: #FF9900; padding-left: 20px; vertical-align: -10px; }

/* Styles for the flexible content area that is different for each page. */			   
div#adjustableContentArea { position: relative; top: 243px; left: 0px; 
						   margin-left: auto; margin-right: auto; 
						   width: 980px; }
div#mainBackground { width: 100%; float: left; min-height: 450px; background: url(images/mainbackground.png) repeat-y }

/* Styles for the navigation menu located left of the main content area. */
div#leftNavigationBar { float: left; width: 185px; padding-left: 10px; padding-right: 5px; padding-top: 5px; 
					   font-weight: bold; margin-right: 0px }
div#leftNavigationBar a:active { background: transparent; text-decoration: none; color: #000000; }
div#leftNavigationBar a:link { background: transparent; text-decoration: none; color: #000000; }
div#leftNavigationBar a:visited { background: transparent; text-decoration: none; color: #000000; }
div#leftNavigationBar a:hover { background: transparent; text-decoration: none; color: #FFFFFF; }
img#leftNavigationBarBottom { float: left; width: 197px; margin-bottom: 0px; }

/* Styles for the flexible-size main content area, which is divided into two columns on
   most pages. mainContentColumnSingle is the main content area for pages that have a 
   single-column layout instead of the standard two-column layout (e.g. tuloslaskelma.html) */
div#mainContent{ width: 763px; float: left; }
div#mainContent img { border-style: none; }
div#mainContent div#mainContentColumn1 { width: 364px; float: left; }
div#mainContent div#mainContentColumn2 { width: 364px; padding-left: 30px; float: left; }
div#mainContent div#mainContentColumnSingle { width: 728px; float: left; }
div#mainContent div#mainContentColumnSingle table { margin-left: auto; margin-right: auto;}
div#mainContent div#mainContentColumnSingle table#financialReport { width: 80%; } /* Reports on equity, result etc. */

/* CSS styles for the JavaScript data gird and the slider used to select which 
   years to show. These are utilized on the pages Tuloskehitys, Taseen kehitys
   and Osinko, which display the data grid. */
   /* was width 505px height 343px */
div#mainContent div#mainContentColumnSingle div#placeholder { width:505px; height:343px; margin-left: auto; margin-right: auto; margin-top: 20px;}
div#mainContent div#mainContentColumnSingle div#yearSelectionSlider { width: 505px; padding-bottom: 50px; margin-left: auto; margin-right: auto; }
div#mainContent div#mainContentColumnSingle div#yearSelectionSlider p { clear:both; }
div#mainContent div#mainContentColumnSingle div#yearSelectionSlider form { margin: 0px 15px 0px 20px; }
div#mainContent div#mainContentColumnSingle div#yearSelectionSlider fieldset { border:0; margin-top: 1em;}	
.ui-slider-label {font-weight: normal; float: left; margin-right: .5em; font-size: 0.8em;}
div#mainContent div#mainContentColumnSingle div#yearSelectionSlider select {margin-right: 1em; float: left; margin-bottom: 5em; }
.ui-slider { clear: both; font-size: 0.9em; margin-bottom: 25px; }
.tickLabel { font-size: 14px; color: #000000 }

/* The heading, sandwiched between two lines, is repeated on most pages at the top of the main 
   content area. The following defines the styles for the lines sandwiching the heading. */
img#headingLine1 { padding-top: 10px; float: left; }
img#headingLine2 { float: left; }