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

STYLE SHEET FOR "SUOMEN LOTTAPERINNELIITTO" WEBSITE / MOBILE

Table of contents:

	A) General layout of elements (positioning, size, colours, backgrounds etc.)
		A1) Common elements and base settings
		A2) Header elements
		A3) Sidebar elements
		A4) Content area elements
		A5) Footer elements
	B) Text layout (fonts, font size, text style etc.)
		B1) General settings
		B2) Specific settings
	C) accessibility features

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


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


/* A1) Common elements and base settings - - - - - - - - - - - - - - - - - - - - - - */

* {
	margin: 0;
	padding: 0;
	}

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

body {
	/* sets the body width and defines the background image */
	background: #fff;
	}

a, a:visited, a:active {
	/* link anchors by default not underlined, blue and white background; override when needed */
	color: #082B84;
	text-decoration: underline;
	}

h1 a, h1 a:visited, h1 a:active {
	color: #fff;
	text-decoration: none;
	}

a:hover {
	/* create the inversion effect on mouseover; same effect for all links by default */
	background: #082B84;
	color: #FFF;
	}


/* A2) Header elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#siteTitleAndNavigation h1 {
	background: #082B84;
	}
	
#siteTitleAndNavigation ul {
	clear: both;
	}

#siteTitleAndNavigation li {
	/* the list elements are supposed to be in one row, with some spacing in between */
	display: block;
	float: left;
	margin-right: 5px;
	color: #000;
	background: #FFF;
	}

body#page-etusivu #siteTitleAndNavigation li#etusivu, body#page-tietoa #siteTitleAndNavigation li#tietoa, body#page-tapahtumat #siteTitleAndNavigation li#tapahtumat, body#page-projektit #siteTitleAndNavigation li#projektit, body#page-historia #siteTitleAndNavigation li#historia, body#page-liity #siteTitleAndNavigation li#liity {
	/* the currently selected menu item appears in white */
	color: #000;
}

body#page-etusivu #siteTitleAndNavigation li#etusivu a, body#page-tietoa #siteTitleAndNavigation li#tietoa a, body#page-tapahtumat #siteTitleAndNavigation li#tapahtumat a, body#page-projektit #siteTitleAndNavigation li#projektit a, body#page-historia #siteTitleAndNavigation li#historia a, body#page-liity #siteTitleAndNavigation li#liity a { 
  /* the current selected menu item link appears in white */
	background-color:#082B84;
	color: #FFF;
}


/* A3) Sidebar elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#pageSidebar .quote {
	font-style: italic;
	}

#pageSidebar img.logo {
	display: none;
	}

#pageSidebar ul {
	clear: both;
	}

#pageSidebar li {
	display: block;
	float: left;
	margin-right: 5px;
	color: #000;
	}
	

/* A4) Content area elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#pageContent h2 {
	background: #D8D8DA;
	margin: 5px 0;
    }

#pageContent h3, #pageContent h4 , #pageContent h5 {
	margin: 5px 0;
	}

#pageContent p {
	margin: 0 0 2px;
    }

#pageContent ul, #pageContent ol {
}

#pageContent ul ol, #pageContent ul ul, #pageContent ol ol, #pageContent ol ul {
}

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

#pageContent ol {
	list-style: decimal;
	}

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

#pageContent ul li {
	}

#pageContent ol li {
	}

#pageContent img {
	margin: 5px 0;
	clear: both;
	}


/* -------------------------------------------------------------------------------------
    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;
	color: #fff;
	}

h2, h3, h4, h5, 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-style: normal;
	color: #000;
	}

h2 {
	clear: both;
	}

p, li, address, label {
	/* normal font weight for p, li, address and label */
	font-weight: normal;
	}


/* 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, h4, h5 {
	font-size:0.73em; /* displayed at 12px */
	line-height: 1em;
	}

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

li {
	font-size:0.75em; /* 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;
	}

#pageSidebar p {
	font-size:0.69em; /* displayed at approx. 11px */
	line-height: 1.8em;
	}

#pageSidebar p:first-letter {
	font-size: 1.6em; /* the first letter of the paragraph is 1.6 times in size */
	font-weight: bold;
	}

#pageSidebar li a{
	line-height: 1em;
	}

#pageContent .tuotteet label .hinta {
	font-weight: bold;
}

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


.accessibility {
	clear: both;
	display: block;
	margin-top: 10px;
	font-weight: bold;
}