.center { text-align: center }

/* general all-media styles */
html,body { font-family: "Trebuchet MS",Arial,sans-serif; }

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

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

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

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

li.nested { list-style: none; }

/* styles for the navigation and control menu provided the addons */
#navmenu, #controlmenu { display:block; border: 1px #CC0000 solid;
  color: black; font-size: 0.8em; position: fixed; top: 50%; left: 50%; width: 30%; height: 250px; margin-left: -15%; margin-top: -125px; overflow: auto; }
#navmenu ol { margin-top: 5px; margin-bottom: 5px; margin-left: 30px; width: 80%; }
#navmenu a { display: list-item; color: black; list-style-type: decimal; }
#navmenu div, #controlmenu div { background-color:#c00; color: white; line-height: 1.5em; padding-left: 1em; display:block; }

#controlmenu dl { text-align: center; }
#controlmenu dt { font-weight: bold; text-align: left; padding-left: 1em;}
#controlmenu dd { display:inline; cursor: pointer; margin: auto; padding: 2px 5px; }

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

/* screen styles */
@media screen { 
body { color: black; padding: 0em 2em 2em 2em; margin: 0px; background-color: white; }
.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; }
.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 */
/* basic fontsize is roughly screenwidth/50 */
@media print and (max-device-width:640px) { body { font-size: 12px; }}
@media print and (min-device-width:640px) { body { font-size: 13px; }}
@media print and (min-device-width:800px) { body { font-size: 16px; }}
@media print and (min-device-width:1024px) { body { font-size: 22px; }}
@media print and (min-device-width:1280px) { body { font-size: 26px; }}
@media print and (min-device-width:1600px) { body { font-size: 32px; }}

b { color: yellow }
.alert { color: red }

html, body, .presentation { height: 100%; margin: 0px; padding: 0px; }
body {
}
body { margin: 0px; padding: 0px; color:#fff; background-color:#376B99; background-attachment:fixed;}

div.layout a, div.layout a:hover  { color: inherit; }

/* slide is given a max-height so that pagedown will still work when there's too much content to fit on screen */
.slide + .slide {page-break-before:always;}
div.slide {padding: 3em; font-size: 1.3em; max-height:80%; overflow: visible;widows:3;}
div.notes, div.handout { display:none; }

/* h1:first-letter { text-transform: uppercase; }
*/
h1 { border-bottom: 0.1em #FFD100 solid; }

/* liststyles*/
/* ul, ol, li { list-style-position:inside; margin-left: 0px;  padding-left:0;}
*/
li li { margin: 0.2em auto 0em 1.5em; }
li, .slidecontent {
  border-top:1px solid #B6C9F4; border-right:1px solid #25366C; border-bottom:1px solid #25366C; border-left:1px solid #B6C9F4; padding: 0.3em; padding-left: 0.5em; margin-bottom: 0.2em; }
li.nested { list-style: none; }
/* li:first-letter { text-transform: uppercase; }
*/
li:hover { color: #FFD100; }
li:hover li { color: white; }
li:hover li:hover { color: #FFD100; }

/* when slidecontent is used */
.slidecontent img.right, .slidecontent img.left { margin-top: auto; }

/* only topleft and topright have background-color to prevent obscuring */
.layout > div { line-height: 2em; font-size: 0.8em; }
.layout .topleft { position: fixed; top: 0px; left: 0px; padding-left:0.5em; width: 100%; background-color: #CC0000; border-bottom: 0.2em white solid; display:block; }
.layout .topright { z-index:2; position: fixed; top: 0px; right: 0px; padding-right:0.5em; background-color: transparent; width: 50%; text-align: right; display:block; }
.layout .bottomleft { position: fixed; bottom: 0px; left: 0px; padding-left:0.5em; width: 100%; background-color:#CC0000; border-top: 0.2em white solid; display:block; }
.layout .bottomright { z-index:2; position: fixed; bottom: 0px; right: 0px; padding-right:0.5em; background-color: transparent; width: 50%; text-align: right; display:block; }

/* with position fixed/absolute the images are taken out of the flow, so that the horizontal bars do not expand to the height of the image */
/* bug in Opera makes position:absolute inside position:fixes disappear, so images now also have position:fixed */
.topleft img { position:fixed; top: 0px; left: 0px; max-height:25%;}
.topright img { position:fixed; top: 0px; right: 0px; 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%;}

   @page {
     size: A4 landscape;
     margin-left: 0;
     margin-right: 0;
     @top {
      content: "";
     }
     @bottom {
      content: "";
     }
     @top-left {
      content: "";
      padding-left: 20pt;
     }
     @top-right {
      content: "";
     }
     @bottom-left {
      content: "";
      padding-left: 20pt;
     }
     @bottom-right {
      content: "";
      padding-right: 20pt;
     }
   }