/* CSS for the media type 'projection' */

@import url(dynamicMenus.css); /* Dynaamisten valikoiden ja niihin liittyvien navigointilinkkien CSS. - The CSS for dynamic menus and related special navigation links. */

/* Navigointielementtien muutettu CSS. - Changed CSS for navigation elements.*/

div#topImageContainer {top:50%; left:780px; z-index:18} /*top: 3px;*/
center.section {position:absolute; left:215px; top:-1px}
iframe.siteInfoIframe {margin-left:15px; width:95%; height:350px; border:none}
#PractisingItem div {border-bottom: 1px solid #304300 !important}
#otherSitesItem,.findForm{visibility:hidden}
p a img {vertical-align:text-top}


/* Muut yleiset ominaisuudet. Other generic CSS. */

/* special elements */
#Liitteet {display:block; text-align:center; margin-top:10px}
#copyrights, #slideShow #Open {display:block; float:right}
/* basic elements */

div#projectionInst {background-color:#21978f !important; background-image:url(.) !important; border: 1px solid #304300}

/* generic background-colors to the canvas */
body, div.doc {background-color:white;}
body#slideShow {bakcground-color:transparent}
div.docSlide, #slideShow div.doc {background-color: transparent !important; border:none !important}
html {margin:0;padding:0; }
select {width:115px !important; margin-left:2px}
 
body
{padding:0;
margin:0 0 0 199px;
border-width: 0px;
width:598px;
text-align:justify; 
font-family: Verdana, Arial, Helvetica, sans-serif;}

body.startPage .doc {background-repeat: no-repeat; background-position: -1px 170px} 

div.doc {margin:0px; padding:23px 20px 10px 20px; border: 1px solid #304300}
#slideShow div.doc {padding-top:0px !important}
body.startPage {width:563px}
body.startPage div.doc {padding-left:39px;}

/* common for media types 'print', 'projection' and 'screen' */
/* common font styles */
var, dfn, acronym {font-style:italic}

/* common link presentation for media types 'screen' and 'projection' */

/* font-size */
code, kbd, samp, dfn , acronym, cite, li {font-size:1.0em;}

/* font-family */
code, strong, dfn, dl, dt, dd, cite, kbd, var, address, samp, div.sites 
{font-family : sans-serif;}

/* font-weight */
em, acronym {font-weight:bold}
address, blockquote, kbd, var, dfn, code, li, samp 
{font-weight: normal}

/*font-style*/

.sites {font-style:italic}

/* color */
code, strong, kbd, var, div.sites, address, blockquote cite
{color: #336;}
dfn, acronym, dfn strong, dl,dt,dd, em {color: #639}

/* background-color */

code, kbd, var, .entities td, blockquote.code, .code blockquote, div.code, pre.code, td.code, td.codeAT, td.codeBT, table.block, table.block code {background-color:#cff}  
div.smaller, *.white, .prosentit, blockquote.white {background-color:white;}
blockquote.linkit {background-color:transparent;}
blockquote.white, blockquote.cite {background-color:#ffc}

/* other */

blockquote, .code, .prosentit {margin-left:30px !important}

div.smaller,*.white {padding-left:2px; padding-right:2px;}
blockquote.white {text-align:justify;}
.codea {font-size:10px; text-align:right; display:block;}
.codeb {font-size:10px; text-align:left; display:block;}
blockquote.code, pre.code, div.code {padding:3px 2px 3px 2px}

/* links */
a:link, a:visited {font-weight:bold; text-decoration:underline;}
.img img {border-width:0; width:8px; margin:0}

a:link img, a:visited img {border-width:0px;}
a[target="new"], a[target="_top"]{background-color:yellow !important}


/* other common to all media types */
q:before {quotes:"'" "'"; content:open-quote}
q:after {quotes:"'" "'"; content:open-quote}
.code q {font-family:monospace; font-style:normal; color:inherit}

ul.topics li, ol.topics li, em, .fn, span.b, .date, dt, acronym {font-weight:bold;}
.n{font-weight:normal}
.c, .date, div.on, .cNoPrint {text-align:center}
.i, dl, dd, dt {font-style:italic}
.sn {font-style:normal}
.r {text-align:right}
.l {text-align:left}

/* hided elements in the media type projection */
#Printing, #copyrights, #PrintCopyrights, div[class="cNoPrint"], #BottomAdvAll, a[target="_top"], .noProjection, a[target="new"] img, div.BottomAdvAll,.contact, .Old, .OldInfo, #Edited, #menuHeader, .hide, div.menuHeader, .findForm, .FreeFind, .noScreen, h4.noFull,.noPrint.noBig a, .onlyPrint, div.next, #subSites, #topDoc, center.section, #bottomDoc  {display:none !important} /* some of them disables links and information, which is not used in this presentation mode */
#startSearch {height:15px !important}
.section .section a,.section .section a:link, .section .section a:visited, .section .section a:hover, .section .section a:active {color:white !important}
#start, #startEn {display:block !important}
/* showed elements */
#shortcutMenu, #ProjectionLinks {display:block !important}



/* special pages*/
/* Fontit.php3 */

.systemFonts {font:status-bar !important}
table.text td, table.text th,.text {font-size:12px;}
p.systemColors {color: WindowText; background-color: Background; }
p.Cursor {cursor:wait}
table.text td, table.text th,.text {font-size:12px;}
div.slideMedium p.systemColors, div.slideMedium p.Cursor {font-size:14px !important}
div.slideLong #mediaProblems {font-size:15px;}
.longTable table.text td, .longTable table.text th {font-size:12px !important}



div.docSlide,#slideShow div.doc {width:98%; margin-left:auto; margin-right:auto}

div#projectionInst, div#projectionInst a:link, div#projectionInst a:visited, div#projectionInst a:hover {font-size:12px; padding:20px 4px 0 4px; font-weight:normal !important}

/* the content area */

/* browsing information in English and in Finnish - first block definitions */

div.doc:before, div.first:before, span.projectionContinue:before, div.projectionContinue:before, li.projectionContinue:after, div.Footnotes:before, div.projectionContinueNotes:before {display:block; margin-top:5px; margin-left:32%; font-weight:normal; padding: 1px 2px 1px 2px; font-family:sans-serif; font-size:12px}

div.first:before {margin-bottom:-10px}

div.doc:after, div.first:before, span.projectionContinue:before, div.projectionContinue:before, li.projectionContinue:after, div.Footnotes:before, div.projectionContinueNotes:before {display:block; font-weight:normal; padding: 1px 2px 1px 2px; font-family:sans-serif; font-size:12px}

span.projectionContinue:before, div.projectionContinue:before, li.projectionContinue:after, div.Footnotes:before, div.projectionContinueNotes:before {margin-left:32%; margin-top:5px; margin-bottom:-10px}

div.first:before {margin-top:0px; margin-bottom:10px;}
div.doc:after, div.first:before {margin-left:auto; margin-right:auto;}

div#projectionInst {position:fixed; top:340px; left:1px; text-align:center; padding: 2px 3px 2px 3px; width:118px}
div#projectionInst a {display:inline !important}

div.doc:before, div.doc:after, div.first:before {font-weight:bold; text-align:center}

span.projectionContinue:before, div.projectionContinue:before, li.projectionContinue:after, div.Footnotes:before, div.projectionContinueNotes:before {margin-left:32%; font-weight:normal; padding: 1px 2px 1px 2px; margin-bottom:-10px}

div.doc:after, div.first:before, span.projectionContinue:before, div.projectionContinue:before, li.projectionContinue:after, div.Footnotes:before, div.projectionContinueNotes:before, h4 a {display:block;}

.sitesNoPrint:before, .sites:before {float:right; display:block; width:75%; text-align:right}

/* actual content definitions */
html[lang="en"] div#projectionInst:before {content:"Use PageDown, PageUp and if necessary arrow keys in order to browse slides. SHIFT + Z: back in visited links. SHIFT + X: forward in visited links."; color:white; display:block; text-align:justify}

html[lang="fi"] div#projectionInst:before {content:"Käytä diojen selaamiseen PageDown, PageUp ja tarvittaessa nuolinäppäimiä. SHIFT (nosto) + Z: vierailluilla linkeillä taaksepäin. SHIFT + X: vierailluilla linkeillä eteenpäin."; color:white; display:block; text-align:justify}

html[lang="en"] div.first:before {content:"The first slide of this section or page.";}
html[lang="fi"] div.first:before {content:"Tämän jakson tai sivun ensimmäinen dia.";}

html[lang="en"] div.last:after {content:"The last slide of this section or page. Change the section or page.";}
html[lang="fi"] div.last:after {content:"Tämä jakson tai sivun viimeinen dia. Vaihda jaksoa tai sivua.";}

html[lang="en"] div.doc:after {content:"The end of this section or page. Change the section or page.";}
html[lang="fi"] div.doc:after {content:"Tämän jakson tai sivun loppu. Vaihda jaksoa tai sivua.";} 
#slideShow div.doc:after {content:""}

html[lang="en"] div.Footnotes:before {content:"Next slides handle footnotes - you can skip them and go direct to the next section or page.";}
html[lang="fi"] div.Footnotes:before {content:"Seuraavilla dioilla on alaviitteet - voit jättää ne välistä ja siirtyä suoraan seuraavalle jaksolle tai sivulle."}

html[lang="en"] span.projectionContinue:before {content:"The matter continues in the next slide."} /* Opera doesn't allow to use grouping with the 'content' property */
html[lang="en"] div.projectionContinue:before {content:"The matter continues in the next slide."}
html[lang="en"] div.projectionContinueNotes:before {content:"Notes continue in the next slide."}
html[lang="en"] li.projectionContinue:after {content:"The list continues in the next slide."}

html[lang="fi"] span.projectionContinue:before {content:"Asia jatkuu seuraavassa diassa."}
html[lang="fi"] div.projectionContinue:before {content:"Asia jatkuu seuraavassa diassa."}
html[lang="fi"] div.projectionContinueNotes:before {content:"Huomautukset jatkuvat seuraavassa diassa."}
html[lang="fi"] div.projectionContinue:before {content:"Asia jatkuu seuraavassa diassa."}
html[lang="fi"] li.projectionContinue:after {content:"Lista jatkuu seuraavassa diassa."}

html[lang="en"] .sitesNoPrint:before {content:"(Don't use links with yellow backgrounds!)"}
html[lang="en"] .sites:before {content:"(Don't use links with yellow backgrounds!)"}

html[lang="fi"] .sites:before {content:"(Älä käytä keltapohjaisia linkkejä!)"}
html[lang="fi"] .sitesNoPrint:before {content:"(Älä käytä keltapohjaisia linkkejä!)"}


/* font-size and line-height properties*/
.onlyProjection {font-size: 11px; font-family:Arial, sans-serif; font-weight:bold; line-height:1.0em}
div.doc *, div.docSlide *, div.slide *, div.slideMedium *, div.slideLong * {font-size:13px !important;}
.docSlide blockquote, #slideShow div.doc blockquote, .docSlide dl, #slideShow div.doc dl, blockquote.cite,
div.docSlide td, #slideShow div.doc td, div.docSlide .code *, #slideShow div.doc .code *, div.docSlide div.slideLong li, #slideShow div.doc div.slideLong li {font-size:14px !important;}
div.docSlide p, #slideShow div.doc p, div.docSlide li, #slideShow div.doc li {font-size:16px !important}
div.docSlide p *, #slideShow div.doc p *, div.docSlide li *, #slideShow div.doc li * {font-size:1.0em !important}
div.slideMedium li, ol.slideMedium li, ul.slideMedium li {font-size:15px !important}
div.docSlide .note, #slideShow div.doc .note {font-size:14px; margin-left:30px}
li {line-height:120%}
div.doc h1, div.slide h1 {min-height:2.1em; font-size: 28px !important}
div.doc h2, div.slide h2, div.slideMedium h2, div.slideLong h2 {min-height:1.8em; font-size: 22px !important}
div.doc h3, div.slide h3, div.slideMedium h3, div.slideLong h3  {font-size:17px !important; margin-top:10px}
div.doc h4, div.slide h4,div.slideMedium h4, div.slideLong h4 {font-size:16px !important}
div.doc h5, div.slide h5,div.slideMedium h5, div.slideLong h5{font-size:15px !important}
div.doc h6, div.slide h6, div.slideMedium h6, div.slideLong h6 {font-size:14px !important}

/* page breaking for the special slide show pages */

div.slide, div.slideMedium, div.slideLong, .connect {page-break-after:always;}
div.last, .slide.noBreakProjection, .slideMedium.noBreakProjection, .slideLong.noBreakProjection {page-break-after:auto !important;} 

div.last:after {display:block; margin-top:5px; padding: 1px 2px 1px 2px; margin-bottom:-10px; font-family:sans-serif; font-size:12px; margin-left:auto; margin-right:auto; font-weight:bold; text-align:center}

/* other special slide show page properties*/
div.docSlide, #slideShow div.doc {width:560px; margin:20px 20px 20px 18px;}
div.slide, div.slideMedium, div.slideLong {background-color:white; border: 3px ridge #eee}
div.slide {padding:20px 20px 10px 20px; min-height:500px; position:relative; top:30px}
div.first {position:relative; top:10px; left:0px;}
div.slideMedium {padding:10px 20px 0px 20px; min-height:530px; position:relative; top:15px}
div.slideLong {padding:10px 20px 0px 20px; min-height:570px; position:relative; top:0px}
.hide {margin:-10px}
.projectionContinue, .projectionContinueNotes {margin-bottom:-10px}


/* basic elements */
html {margin:0; padding:0px;}



/* common font definitions */

table, td, th, caption, pre, ol {font-family: Verdana, Arial, Helvetica, sans-serif;}

p:first-letter, #firstLetter
{font-weight:700;
font-size:120%;
vertical-align: baseline;
font-style:normal !important}

/* special elements */
p a img, address a img, div.sites a img {margin-left:1px;}

/* headings */

h1, h2, h3, h4, h5, h6 {font-family: Verdana, Arial, Helvetica, sans-serif }
h1, h2 {margin:auto;}
h1, h2 {text-align: center; margin-top:2px}
h3, h4, h5, h6 {text-align:left; padding-left:2px;}
h4, h5, h6 {width:66%;}

div.slide h4, div.slideMedium h4, slideLong h4{margin-top:0.5em}

/* narrowing */

div[class="doc"] blockquote, div[class="doc"] pre[class="code"], div[class="code"], blockquote[class="code"], blockquote[class="cite"],
div[class="docSlide"] blockquote, #slideShow div.doc blockquote, div[class="docSlide"] pre[class="code"], #slideShow div.doc pre.code {margin:0.6em 25px 0.6em 25px; width:auto} 

/* image links */
.CssSite td a img, td img {border-width:0}
pre{font-family:Verdana, Arial, sans-serif; color:#333; text-align:left; padding-left:2px; margin-left:30px;}

/* special emphasized texts */
.green {color:green;font-size:110%;font-weight:bold}
.red {color:red;font-size:110%;font-weight:bold}

/* phrasal elements and lists */
blockquote, blockquote.cite {padding:3px 2px 3px 2px}
blockquote a {font-weight:bold}
blockquote.linkit {margin-left:30px;}
blockquote blockquote {margin-top:0px; margin-bottom:0px;}
code, kbd, samp, dfn, acronym, cite, .script li {font-size:1.0em;}

/* background-color and borders */
div.smaller, *.white, .prosentit, blockquote.white {background-color:white;}
blockquote {background-color:#eee}
div.bNotes, div.sbNotes, div.cbNotes, div.ebNotes {background-color:#ffaaaa; border:1px solid #303400;}
div.bRec, div.sbRec, div.cbRec, div.ebRec {background-color:#00c100 !important; border:1px solid #303400; margin-top:0.5em; margin-bottom:0.5em} 
div.bRec p:first-letter, div.connectRec p:first-letter, div.bNotes p:first-letter, div.connect p:first-letter {color:#303400}
.code blockquote {border-width:0}
blockquote.linkit {background-color:transparent;}



/* text-align, padding and margin */
.sites, .sitesNoPrint {text-align:left; font-size:13px !important}
.sites, .sitesNoPrint, div.smaller, *.white, blockquote.cite, blockquote.code, div.code, div.bNotes, div.sbNotes, div.cbNotes, div.ebNotes, div.bRec, div.sbRec, div.cbRec, div.ebRec {padding:3px 3px 3px 2px;}
div.code blockquote div {margin-left:-15px}
.sites, .sitesNoPrint {margin-left:32%}
div.bNotes, div.sbNotes, div.cbNotes, div.ebNotes, div.bRec, div.sbRec, div.cbRec, div.ebRec {margin:0.5em 0px 0.5em 0px !important}
div.bRec ol, div.bRec ul, div.connectRec ol, div.connectRec ul, div.bNotes ol, div.connect ol, div.bNotes ul, div.connect ul {margin-left:0; padding-left:0}
div.bNotes ul, div.connect ul, div.bRec ul, div.connectRec ul {margin-top:0; margin-bottom:0}
div.bNotes li, div.connect li, div.bRec li, div.connectRec li {margin-top:0.4em; margin-bottom:0.4em; margin-left:29px; padding-left:0}
div.bNotes p, div.connect p, div.bRec p, div.connectRec p {margin-top:0}
blockquote.white, blockquote.cite {text-align:justify;}
blockquote.code, div.code {text-align:left}
.prosentit {margin-left:30px;}


li p, li p {margin-top:0 !important; margin-bottom:0 !important}
div[id="first"][class="slideLong"] ul.topics li,div[id="first"][class="slideMedium"] ul.topics li {margin-top:0.2em !important; margin-bottom:0.2em !important; font-size:13px !important}
.longList li p {font-size:14px !important}
table ul li, table ul li ul li, table ul li ul li ul li { list-style-image: none; list-style-type: none; }

ol, ul { text-align : left; }

ol li	{list-style-image: none; list-style-position: outside;}

ol li ul li {list-style-position: inside; }

ul li
{list-style-type: circle;
list-style-position: outside;
margin-left: -10px;}

ul li ul li
{list-style-type: disc;
list-style-position: inside;
margin-left: -10px;
}

ul li ul li ul li
{list-style-type: square;
list-style-position: inside;
margin-left: -10px;}

ul li ul li ul li ul li
{list-style-type: disc;
list-style-position: inside;
margin-left: -10px;}

li.ok
{list-style-type: disc;
list-style-image: url(./Kuvat/ok.gif);
list-style-position: outside;
margin-left: -10px;}

li.sad
{list-style-type: disc;
list-style-image: url(./Kuvat/sad.gif);
list-style-position: outside;
margin-left: -10px;}

li.black
{list-style-type: disc;
list-style-image: url(./Kuvat/black.gif);
list-style-position: outside;
margin-left: -10px;}

li.smile
{list-style-type: disc;
list-style-image: url(./Kuvat/smile.gif);
list-style-position: outside;
margin-left: -10px;}

li.red
{list-style-type: disc;
list-style-image: url(./Kuvat/pallo-punainen.gif);
list-style-position: outside;
margin-left: -10px;}

li.orange
{list-style-type: disc;
list-style-image: url(./Kuvat/pallo.gif);
list-style-position: outside;
margin-left: -10px;}

li.brown
{list-style-type: disc;
list-style-image: url(./Kuvat/pallo-ruskea.gif);
list-style-position: outside;
margin-left: -10px;}

li.green
{list-style-type: disc;
list-style-image: url(./Kuvat/pallo-vihrea.gif);
list-style-position: outside;
margin-left: -10px;}


/* footnotes */
.doc .note, .smaller {font-size: 0.9em;}
p.note {margin-left:30px}
div.note {margin-left:50px;}
.smaller {margin-left: 50px}
.note code, .smaller code {font-size: 1.0em;}

hr {margin: 10px 0px 10px 0px; text-align:left;}

.header-v {border-right-width:0}
.header-o {border-left-width:0}

/* tables */
table a img {border-width:0}
table.white td {border:none;} 
table.vertailu {border:none;} 
table.vertailu td {font-size:90%} 
table.text {margin:auto; background-color:white; border-color: #bbb #7e7e7e #7e7e7e #bbb; border:solid 1px; border-spacing:1px !important}
table.text td, table.text th {border:1px solid; border-color: #7e7e7e #bbb #bbb #7e7e7e} 
table div ul li {list-style-type: disc;
list-style-image: url(./Kuvat/pallo-ruskea.gif);} 

/* z-index */
div#projectionInst {z-index:4}

/*Selainkohtaiset kommentit */
div.bRec, div.connectRec,div.bNotes, div.connect {margin-top:0; margin-bottom:0;}