@media screen {

  /* HTML-element */

  body { margin: 0; padding: 10px 10px 10px 40px; color: #444; background-color: #eed; font-family: Arial,Helvetica,sans-serif; font-size: 95%; }
  h2 { color: #900; background-color: transparent; margin-bottom: 0.4em; }
  p, li { line-height: 1.4em; }
  p {  max-width: 35em; margin: 0.7em 0; }
  li { max-width: 30em; margin-bottom: 0.4em; }
  a { color: #00a; background-color: transparent; }
  code, kbd { color: #900; background-color: transparent; }
  
  /* Sidhuvud */
  
  .huvud { margin: -10px -10px 1em -40px; padding: 0.5em; color: #fff; background-color: #900; font-family: Georgia,serif; font-style: italic; font-weight: bold; text-align: right;}
  .huvud h1 { margin: 0; }
  
  /* Sidfot */
  
  .fot { margin: 1em -10px -10px -40px; padding: 0.3em; color: #fff; background-color: #900; font-style: italic; font-size: 90%; clear: both; }
  .fot a img { border-width: 0; margin: 0 0.3em; vertical-align: middle; }
  
  /* Länkar i sidhuvud och sidfot */
  
  .huvud a, .fot a { color: #fff; background-color: transparent; }
  
  /* Länkar till föregående respektive nästa tips */
  
  .forra-tips { font-weight: bold; float: left; margin: 2em 1em 0.5em -30px; }
  .nasta-tips { font-weight: bold; float: right; margin: 2em 0 0.5em; text-align: right; }
  .forra-tips img, .nasta-tips img { width: 15px; height: 15px; vertical-align: middle; margin: 0 0.4em; }
  
  /* Kodrutor */
  
  pre.code { color: #900; background-color: #ffe; padding: 0.4em; border-width: 1px; border-style: solid; border-color: #cc9; font-size: 90%; }

}



@media print {

  body { font-family: Georgia,serif; font-size: 90%; }
  p { max-width: 35em; margin: 0.7em 0; }
  li { max-width: 30em; margin-bottom: 0.3em; }
  a { color: #00a; background-color: transparent; }
    
  .forra-tips, .nasta-tips { display: none; }  
  .fot img { display: none; }
  
  pre.code { padding: 0.4em; border-width: 2px; border-style: solid; border-color: #cc9; font-size: 90%; }  

}