html,body { font-family: "Trebuchet MS",Arial,sans-serif; }

a, a:visited, a:hover { color: #CC0000; text-decoration: none; }
a:hover { color: #25366C; }

div.slide { counter-increment: slide; }
div.handout:before { content: "Slide notes:"; font-style: italic; border-bottom: 1px black solid; }


.right { float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; max-width: 50%; clear:right}
img.left { float: left; margin-top: 1em; margin-bottom: 1em; margin-right: 1em; max-width: 50%; }

div.spacer { clear:both; height:0px; }

li.nested { list-style: none; }

/* mobile only versions shouldn't show up */
img.r { display:none }

/* will be overriden in projection section for specific divs */
.layout > * { display: none; }

@media tv {

.print { display: none }

}

/* screen styles */
@media screen { 

.print { display: none }
iframe { height:400px }
body { color: black; padding: 0em 2em 2em 2em; margin: 0px; background-color: #eff; }
.presentation:before { content: "Press F11 to start the Opera Show Presentation \A Use PageUp and PageDown to navigate"; display:block; text-align: center; font-size: 1.2em; padding:0.5em;}
.slide { border: 1px black solid; padding: 10px; margin: 0px 0px 20px 0px; /* for IE6 */ position:relative; clear:both }
.slide:before { content: "Slide " counter(slide); float:right; }
.slide h1 { margin: -10px -10px 10px -10px; background-color:#EFEFEF; padding: 5px; }
.handout { margin-top: 0px; border-color: black; border-style: solid; border-width: 1px 0px 0px 0px; padding: 5px; }
.layout > #promo { display:block; text-align:center; padding: 5px; margin-top: 10px;}
}


/* projection styles  */

@media projection and (max-device-width:640px) { body { font-size: 12px; }}
@media projection and (min-device-width:640px) { body { font-size: 16px; }}
@media projection and (min-device-width:800px) { body { font-size: 20px; }}
@media projection and (min-device-width:1024px) { body { font-size: 26px; }}
@media projection and (min-device-width:1280px) { body { font-size: 32px; }}
@media projection and (min-device-width:1600px) { body { font-size: 40px; }}

@media projection { 

.print { display: none }

html, body, .presentation { height: 100%; margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; color: Black; background-color:#efe; }
iframe { height: 60% }
div.layout a, div.layout a:hover  { color: inherit; }

div.slide { page-break-after: always; margin: 3em 3em 0em ; padding: 0.2em 2em; min-height: 50%; max-height:80%; overflow: visible; }
#s1 { padding-top: 0em }
div.notes, .handout { display:none; }
div.slide:after { content: "http://mini.opera.com/ - Slide " counter(slide); position: absolute; z-index:3; bottom: 0px; text-align:center; left-margin:-2em; font-size:0.7em; display:block; width:100%; color:white; font-weight: bold; }

.slide > h1, .slide > h2 { text-align: center; }

h1 { color: #888888; font-size: 1.3em; padding-top: 2em}
h2 { color: #888888; font-size: 1.1em; }

/* liststyles */
ul, ol, li { list-style-position:inside; margin-left: 0px; }
li li { margin: 0.2em auto 0em 1.5em;  list-style: none;  }
li { padding: 0.3em; padding-left: 0.5em; margin-bottom: 0.2em; }
li:first-letter { text-transform: uppercase; }
li:hover { color: #CC0000; }
li:hover li { color: Black; }
li:hover li:hover { color: #CC0000; }


.layout > div { line-height: 6em; font-size: 0.5em; font-weight: bold; color: white; }
.layout .topleft { position: fixed; top: 0px; left: 0px; padding-left: 1em; width: 100%; display:block; }
.layout .topright { z-index:2; position: fixed; top: 0px; right: 0px; padding-right:1em; background-color: transparent; width: 50%; text-align: right; display:block; }
.layout .bottomleft { position: fixed; bottom: 0px; left: 0px; padding-left:1em; width: 100%; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEQAACxEBf2RfkQAAAAd0SU1FB9MCGg0DNB9bFJ8AAAAmSURBVHicY0xPT//PQARg4eHhIUYdA8vz58+JU8jLy0ucwhFpNQDDDwtahROyEgAAAABJRU5ErkJggg==); background-color: #dd0000; display:block; }
.layout .bottomright { z-index:2; position: fixed; bottom: 0px; right: 0px; padding-right:1em; background-color: transparent; width: 50%; text-align: right; display:block; }

.topleft img { position:fixed; top: 20px; left: 20px; max-height:25%;}
.topright img { position:fixed; top: 20px; right: 20px; max-height:25%; }
.bottomleft img { position:fixed; bottom: 0px; left: 0px; max-height:25%;}
.bottomright img { position:fixed; bottom: 0px; right: 0px; max-height:25%;}
}


/* print styles */
@media print { 
html, body { font-size: 12px; margin: 0px; padding: 0px; }
h1 { background-color:#EFEFEF; padding: 5px; margin: -5px -5px 10px -5px; }
.slide { margin-left: 1em ; width: 70%; border: 1px black solid; margin-top: 2%; padding: 5px; page-break-inside: avoid; position:relative; min-height:200px; clear: both}
.slide:before { content: "Slide " counter(slide); float:right; }
.handout { border-top: 1px black solid; padding: 5px; }
.layout > #promo { display:block; text-align:center; padding: 5px; margin-top: 10px; border: 1px black solid; }
.layout > #promo > a:after { content:""; }

.layout:after { margin: 3em ; content: "Notes:"; width="20%";  font-size: 3 em ; float:right }

/* following code extracts all the relevant metadata and shows it with Generated Content */
/* code could have been saved by using CSS3 content, but this is compatible with Mozilla */
head { display: block; border: 1px black solid; padding: 5px; }
head:before {content: "Presentation information"; background-color:#EFEFEF; padding: 5px; margin: -5px -5px 0px -5px; display:block; font-size: 1.2em; font-weight:bold; }
title { display: block; padding: 0px; margin: 0px; }
title:before { content: "Title: "; font-weight: bold;}
meta { display:block; }
meta:before { text-transform: capitalize; font-weight:bold;}
meta[name="presdate"]:after, meta[name="slogan"]:after, meta[name="author"]:after, meta[name="contact"]:after, meta[name="company"]:after, meta[name="venue"]:after, meta[name="date"]:after, meta[name="website"]:after { content: ": " attr(content); }
meta[name="presdate"]:before, meta[name="slogan"]:before, meta[name="author"]:before, meta[name="contact"]:before, meta[name="company"]:before, meta[name="venue"]:before, meta[name="date"]:before, meta[name="website"]:before { content: attr(name);  }

iframe { display:none }
.print {display:block ; border: 1px;  float: right; margin-top: 1em; margin-bottom: 1em; margin-left: 1em; max-width: 50%; clear:right; }

/* a[href]:after { content: " [url: " attr(href) "]"; font-style:italic;} */

}

@page { margin-top: 1cm; margin-bottom: 1cm; margin-left: auto; margin-right: auto; }