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

STYLE SHEET FOR "SUOMEN LOTTAPERINNELIITTO" WEBSITE / SCREEN

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: url(../img/site_bg.gif) repeat left top;
	width: 736px;
	}

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

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

#pageSidebar,
#pageContent {
	/* predefine these two containers as floating elements*/
	float: left;
	}

#siteContact {
	/* predefine the last container as non-floating; clear:both ends floating area */
	clear: both;
	}


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

#siteTitleAndNavigation {
	width: 736px;
	background:#082B84 url(../img/header_bg.jpg) repeat-y;
	}
	
#siteTitleAndNavigation h1,
#siteTitleAndNavigation h1 a {
	/* setting this color for the H1, incl. override of link anchors' default color */
	background: url(../img/header_bg.gif) 20px 50px no-repeat;
	/*width:462px;
	height:42px;*/
	text-indent:-1000em;
	color: #FFF;
	}

#siteTitleAndNavigation h1 {
	/* positioning the headline text in the blue block */
	width: 714px;
	height: 34px;
	padding: 63px 0 0 22px;
	}

#siteTitleAndNavigation ul {
	/* positioning the menu bar and adding the grey bars below it */
	background: url(../img/greylines.gif) no-repeat left top;
	/*height: 42px;*/
	padding: 6px 0 42px 15px;
	}

#siteTitleAndNavigation li {
	/* the list elements are supposed to be in one row, with some spacing in between */
	display: block;
	color: #000;
	float: left;
	padding: 0 5px 0 15px;
	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,
body#page-lottasvard #siteTitleAndNavigation li#lottasvard {
	/* the currently selected menu item appears in white */
	color: #000;
	padding: 0 5px 0 15px;
}

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,
body#page-lottasvard #siteTitleAndNavigation li#lottasvard a { 
  /* the current selected menu item link appears in white */
	background-color:#1543CE;
	color: #FFF;
}

#siteTitleAndNavigation li a {
	/* ensure that the highlighted background is wider than the anchor text */
	padding: 0 5px;
	}


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

#pageSidebar {
	width: 213px;
	margin: 0 11px 0 25px;
	}

body#page-etusivu #pageSidebar {
	/* on front page: lower rounded edges for the text block defined here to avoid additional markup */
    background: url(../img/frontpageteaser_bgbottom.png) no-repeat left bottom;
	padding: 0 0 7px;
	}

#pageSidebar p {
	/* the sidebar text appears in a shadowed box with round edges, here only upper edge */
    background: url(../img/frontpageteaser_bgtop.png) no-repeat left top;
	width: 179px;
	margin: 5px 0 0;
	padding: 24px 17px;
    }

#pageSidebar .quote {
	/* this style replaces the text quote with an image in graphical browsers (see also next CSS item) */
	background: url(../img/quote.png) no-repeat left top;
	display: block;
	width: 205px;
	height: 139px;
	margin: 0 4px;
	border-bottom: 1px solid #D9D9D9;
	}

#pageSidebar .quote p {
	/* this style hides the quote text that is replaced with a PNG by the CSS item above */
	display: none;
	/*text-indent:-3000em;*/
	}

#pageSidebar img.logo {
	/* place the logo in (visually) centred position and adding the grey bar below */
	border-bottom: 1px solid #D9D9D9;
	padding: 0 72px 12px 65px;
	margin: 0 4px;
	}

#pageSidebar ul {
	/* positioning the submenu block */
	margin: 9px 0 0 4px;
	}

#pageSidebar li {
	display: block;
	color: #000;
	}
	
#pageSidebar li a {
	/* the list elements are below each other, with a background image */
	display: block;
	background: url(../img/subMenu_bg.png) no-repeat left top;
	width: 185px;
	height: 18px;
	padding: 5px 0 0 20px;
	margin-bottom: 2px;
	}

#pageSidebar li.thirdLevel a {
	/* special style for 3rd level items */
	background: url(../img/subMenu_thirdLevel_bg.png) no-repeat left top;
	width: 173px;
	padding-left: 32px;
	}

#pageSidebar li a:hover,
#pageSidebar li a:active,
#pageSidebar li a.active {
	/* the changing background on mouseover is realized purely with CSS */
	background: url(../img/subMenu_bghover.png) no-repeat left top;
	}

#pageSidebar li a.active {
  color:#FFF;
}


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

#pageContent {
	/* this container has rounded edges at the bottom and a grey border on two sides */
	background: url(../img/pageContent_bg.png) no-repeat left bottom;
	width: 479px;
	padding: 0 0 30px 7px;
	margin: 0 0 6px;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
	}

#pageContent h2 {
	/* the H2 headline is stressed by a dark grey bar over the full width of the container */
	background: #D8D8DA;
	/*height property removed to ensure scalability*/
	padding: 19px 0 0.1em 10px;
	margin: 0 0 0.83em;
    }

#pageContent h3, #pageContent h4 , #pageContent h5 {
	clear: both;
	padding: 15px 15px 0 10px;
	margin: 0;
	}

#pageContent p {
	padding: 10px 15px 0 10px;
    }

#pageContent ul, #pageContent ol {
	margin: 10px 15px 0 15px;
	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 10px;
	padding: 0;
	}

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

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

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

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

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

#pageContent #yhteystiedot {
	float: left;
	margin: 20px 0 10px;
}

#pageContent #yhteystiedot label {
 	float: left;
	width: 150px;
	margin: 0 0 10px 10px;
}

#pageContent #yhteystiedot input.text {
 	float:left;
	width: 260px;
	margin: 0 0 10px 10px;
}

#pageContent #yhteystiedot input.submit {
	clear: both;
	margin: 0 10px 10px 170px;
}

#pageContent .tuotteet {
	float: left;
	margin: 0 0 15px;
}

#pageContent .tuotteet label {
 	float: left;
	width: 395px;
	margin: 20px 0 2px 10px;
}

#pageContent .tuotteet input.text {
 	float:left;
	width: 25px;
	margin: 20px 0 0 10px;
}

#pageContent #tilaus .submit {
	margin: 0 0 0 10px;
}


/* A5) Footer elements - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#siteContact {
	/* the footer bar has a blue background image and 16px distance from the window bottom */
	background: url(../img/siteContact_bg.png) no-repeat left top;
	width: 717px;
	height: 41px;
	padding-bottom: 16px;
	margin-left: 19px;
	}

#siteContact address {
	/* the line with the contact data is centered in the middle of the footer */
	text-align: center;
	padding: 1.2em 0 0;
	}

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

#siteContact 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, 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;
	}

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

h2, h3, h4, h5, #pageSidebar li, #siteTitleAndNavigation li, address .modeofcontact {
	/* the H2-H5 headlines, navigational list elements and the description of contact mode are always bolded */
	font-weight: bold;
	}


/* 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;
}

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

#siteContact 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;
	}