/* =======================================================================

STYLE SHEET FOR "SUOMEN LOTTAPERINNELIITTO" WEBSITE / PRINT

Table of contents:

	A) General layout of elements (positioning, size, colours, backgrounds etc.)
	B) Text layout (fonts, font size, text style etc.)
	C) accessibility features

======================================================================= */


/* -------------------------------------------------------------------------------------
    A) General layout of elements (positioning, size, colours, background etc.)
------------------------------------------------------------------------------------- */


body, div, h1, h2, h3, p, img, ul {
	/* common values for almost all items; override when needed */
	display: block;
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF;
	}

body {
	/* sets the body width */
	width: 499px;
	}

#siteTitleAndNavigation ul,
#pageSidebar {
	/* hide these containers and elements from the print display */
	display: none;
	}

#siteTitleAndNavigation,
#pageContent,
#siteContact {
	/* set the basic data for the remaining containers */
	width: 479px;
	margin: 0 10px;
	}

#siteTitleAndNavigation {
	/* the top container has an extra margin at the top */
	margin-top: 20px;
	}

a {
	/* link anchors by default not underlined and black for print */
	background: #FFF;
	color: #000;
	text-decoration: none;
	}

h1, h1 a {
	background: #FFF;
	color: #000;
	width: 479px;
	margin: 0 0 30px 0;
	}

h2, h3 {
	/* the H2 headline is stressed by a dark grey bar over the full width of the container */
	padding: 5px 0 15px;
    }

p {
	padding: 0 0 15px;
    }

img {
	/* 3px white frame with black border around the image */
	background: #FFF;
	padding: 3px;
	border: 1px solid #000;
	}

.illustration {
	float: right;
	margin: 10px 11px;
	}

.wideimage {
	/* creates a 10px white stripe under the image frame (otherwise grey due to <div> background) */
	padding: 0 0 10px 0;
	}

#pageContent ul, #pageContent ol {
	margin: 0 0 15px 10px;
	padding: 0;
}

#pageContent ul ol, #pageContent ul ul, #pageContent ol ol, #pageContent ol ul {
	/* handles nested lists, no margins needed for these */
	margin: 0;
	padding: 0;
}

#pageContent ul {
	list-style-type: square;
  }

#pageContent ol {
	text-indent: 0;
	list-style: decimal;
	}

#pageContent ol.alphabetic {
	list-style-type:lower-latin;
	}

#pageContent ul li {
	margin: 0 0 0 15px;
	padding: 0;
	}

#pageContent ol li {
	margin: 0 0 0 15px;
	padding: 0;
	}

#pageContent div.sub-domain {
  margin-left:20px;
}

#pageContent .paasihteeri {
  margin-top:10px;
}

#pageContent #yhteystiedot,
#pageContent .tuotteet input {
	display: none;
	}

#pageContent .tuotteet label {
	display: block;
	margin: 0 0 15px;
	}

address {
	/* the line with the contact data is centered in the middle of the footer and 10px from the page end*/
	text-align: center;
	margin: 10px;
	}

address .email {
	/* adds additional space left of the "|"-separator */
	margin-right: 0.8em;
	}

address .modeofcontact {
	/* adds additional space right of the "|"-separator */
	margin-left: 0.8em;
	}


/* -------------------------------------------------------------------------------------
    B) Text layout (fonts, font size, text style etc.)
------------------------------------------------------------------------------------- */


/* B1) General settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body {
	/* this style sets 1 em = 16 px (the standard font size of almost all modern browsers); defining the
	    text size in em ensures full scalability in all browsers, though scaling might break the visual layout */
	font-size: 100%;
	}

h1 {
	/* the H1 headline font has serifs and is _not_ bolded */
	font-family: 'times new roman',times,serif;
	font-weight: normal;
	}

h2, h3, p, li, address, label {
	/* all other text elements are sans-serif and displayed normally by default; override when needed */
	font-family: arial,helvetica,sans-serif;
	font-weight: normal;
	font-style: normal;
	}

h2, h3, address .modeofcontact {
	/* the H2&H3 headlines, list elements and the description of contact mode are always bolded */
	font-weight: bold !important;
	}


/* B2) Specific settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

h1 {
	font-size: 1.3em;  /* displayed at approx. 21px */
	}

h1 .swedish {
	/* this class makes the swedish title smaller than the finnish title */
	font-size: 0.65em; /* NB. this means 0.65 times the size of the "parent" H1 element */
	}

h2 {
	font-size: 1.06em; /* displayed at approx. 17px */
	}

h3 {
	font-size:0.73em; /* displayed at 12px */
	line-height: 1em;
	}

p, li, label {
	font-size:0.73em; /* displayed at 12px */
	line-height: 1.6em;
	}

ol ol li, ol ul li, ul ol li, ul ul li {
	/* prevent fonts in nested list from scaling down */
	font-size: 1em;
	line-height: 1.6em;
	}

#pageContent .kuvateksti {
	font-style: italic;
}

address {
	/* the contact data in the footer is in small text */
	font-size:0.70em; /* displayed at 12px */
	}


/* -------------------------------------------------------------------------------------
    C) accessibility features
------------------------------------------------------------------------------------- */


.accessibility {
	/* this class hides additional navigational information that has been added to the
		HTML for better orientation when using screenreaders and text browsers */
	display: none;
	}