body { margin: 0; padding: 0;
  background: #eeeedd url(img/dust-bg.jpg) fixed; color: #000000;
}

.topmatter { margin: 0; padding: 0.1em 1em; /* border-bottom: solid 0.2em red; */ min-height: 1em; }
.topmatter .langlink, .topmatter .helplink { float: right; margin: 0 1ex; }

.main { margin: 0.5em 0 0.5em 25%; padding: 0.5em 1em 0.5em 0.5em;
  clear: right;
  background: #ffffff; color: #000000;
  border-style: solid; border-color: #777777; border-width: 1px 0 1px 1px;
/*  border-radius: 1em; box-shadow: 0.2em 0.2em #CCC */
}
hr.mainend { border: none; width: 0; height: 0; clear: right; }

.ingress { border-style: solid; border-color: #cccccc; border-width: 1px 0;
  margin: 0 0 1.5em 0; padding: 1ex 20% 1ex 5%;
  font-style: italic; text-align: left;
}

.sidebar { border-left: solid 1px #cccccc; width: 200px; 
  float: right; clear: right;
  padding: 0.2em 0 0.2em 0.5em;  color: #444444; }
.sidebar hr, .navigation hr { display: none; }
@media all { .sidebar { margin-left: 1ex; margin-right: -0.8em; } }
.sidebar h3, .sidebar h4 { margin-top: 0; font-size: 100%; color: #888888; }
.sidebar ol, .sidebar ul { margin: 0 0 1ex 0; padding: 0; }
.sidebar li { margin: 0 0 0 1.5em; padding: 0; }

.gallery p { text-align: left; }
.gallery a img { border-width: 1px; }
.gallery p.caption { font-style: italic; }
.gallery p.byline { font-size: 80%; }
.gallery .byline { color: #888888; }

.navigation { width: 25%; height: 100%; position: absolute;  top: 0; left: 0;
  padding: 0; overflow: auto;
}
body > .navigation { position: fixed; line-height: 1.1em; }

.navigation ul.nl { margin: 1em 0 0 1ex; }

.navigation :link, .topmatter :link, .trailer :link,
.navigation :visited, .topmatter :visited, .trailer :visited
   { text-decoration: none; }
.navigation a:hover, .topmatter a:hover, .trailer a:hover
   { text-decoration: underline; }

ul.nl { margin: 0 0 1ex 0; padding: 0; }
ul.nl li.label { display: block; margin: 0; padding: 0; font-weight: bold; }
ul.nl li { display: list-item; margin: 0 0 0 1.5em; padding: 0; }


dl { margin: 0 0 1ex 0; padding: 0; }
dt { font-weight: bold; }
dd { margin-bottom: 1ex; }

.trailer { margin: auto 0 0 25%; padding: 1ex 1em 1ex 0; }

.vbutton { border: solid 1px #662222; font-size: 80%; float: left;
  margin: 0 0.4em 0 0; padding: 0.1em 0; background: #662222; color: #ffffff;
  height: auto; font-family: sans-serif;
}

.vbutton .who, .vbutton .what { margin: 0; padding: 0.1em 0.2em; }
.vbutton:link, .vbutton:visited { background: #662222; color: #ffffff; }
.vbutton .what { background: #ffffff; color: #662222; /* border: solid 1px #662222; */}
.vbutton .who { padding-right: 0; }
.vbutton sup { vertical-align: top; font-size: 60%; margin: 0; padding: 0; }
.trailer hr, .trailer .separator { display: none; }

.right { float: right; }

.prompt { color: #0000aa; }

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; color: #444444;
  margin: 0; padding: 0; text-align: left;
}
h1 { font-size: 2.4em; font-weight: bold; font-style:normal; margin-top:0.5ex;}
h2 { font-size: 1.6em; font-weight: bold; font-style:normal; margin-top: 1em;}
h3 { font-size: 1.2em; font-weight: bold; font-style:normal; margin-top: 1ex;}
h4, h5, h6 { font-size: 1em; margin-top: 1ex; }

p { margin: 0 0 1ex 0; padding: 0; text-align: justify; }
address { text-align: right; }

/* Without this, a pre can cause the width of the entire page to be to large */
pre {
  border: #cccccc 1px solid; padding: 0.2em; width: 100%; height: auto; 
  overflow: auto; 
}

th { text-align: left; }

:link { color: #0000aa; }
:visited { color: #550088; }

.section.box { /* border: solid thin #888888; */ margin: 0 1em 1ex 0;
  width: 21em; float: left; max-width: 100%; font-size: 90%;
/*  background-color: #f8f8f8; */
}
.section.box h3 { margin: 0 16px 0 0; padding: 0.1em;
  border-bottom: solid thin #666666; font-size: 108%;
}
.section.box p { margin-top: 0.2em }
.section.box img.right {  margin: 0; max-width: 9em; max-height: 8em; }
@media all { .section.box img.right { margin-left: 0.2em; } }

.clearall { clear: both; }

.topmatter > strong a {
  width: 67px; padding-top: 75px;
  background: url(img/dust-puppy.png) no-repeat;
  height: 0; overflow: hidden;
  margin: 0;
  position: fixed; left: 0; bottom: 0;
}

table { border-collapse: collapse; margin: 1em auto 1em 0; }
table tr { margin: 0; padding: 0; }
td, th { margin: 0; padding: 0.2em; }
.listing .odd { background-color: white; color: black; }
.listing .even { background-color: #eeeeee; color: black; }
.listing .header th, .listing .header td { border-bottom: solid 1px black; }
.listing .footer th, .listing .footer td { border-top: solid 1px black; }
.listing td {  font-family: sans-serif; font-size: 90%; }
.listing th { font-family: sans-serif; font-size: 90%; font-weight: bold}
td.num, th.num { text-align: right; }

.warning * { color: #FF0000; }
.barcontainer { border-left: solid 1px #888888; margin: 0; padding: 0; }

.bar { display: block; text-align: right; float: left; border: solid #888888; border-width: 1px 1px 1px 0; font: 70% sans-serif; }
.bar { background-image: url(img/bar.png); background-repeat: repeat-x; }
.used          { background-color: #dddd00; color: black; }
.warning .used { background-color: #ff7777; color: black; }
.free          { background-color: #88ee66; color: black; }
/* Ugly workaround for msie: Skip the (semi-transparant) image */
* html .used          { background: #f8ee88; color: black; }
* html .warning .used { background: #ffbbaa; color: black; }
* html .free          { background: #bbee88; color: black; }

/* - - - -  bara speciella saker för speciella sidor härifrån - - - - */

/* - - rubriken på förstasidan - - */
@media screen {
  .stackenhome h1 {
    width: 100%; min-width: 270px; padding-top: 120px;
    background: url(http://www.stacken.kth.se/images/stacken-balk2.png) no-repeat 20% top;
    height: 0; overflow: hidden;
    margin: 0 0 5px 0;
  }
}

/* - - projektikoner - - */
@media screen {
 .box > a { display: block; float: right; margin: 0 -5px 0 0.2em; }
 .box#alexmud > a { width:77px; height:66px; background:url(img/alexmud.png)}
 .box#arla > a    { width:69px; height:38px; background:url(img/arla.png)}
 .box#hackerbladet > a {width:65px;height:74px;background:url(img/hackerbladet.png)}
 .box#ktelnet > a { width:69px; height:70px; background:url(img/ktelnet.png)}
 .box#lekstugan > a {width:92px;height:80px; background:url(img/lekstugan.png)}
 .box#monotone > a {width:59px; height:72px; background:url(img/monotone.png)}
 .box#openbsd > a {width: 78px; height:64px; background:url(img/openbsd.png)}
 .box#openssl > a {width:109px; height:53px; background:url(img/openssl.png)}
 .box#parrot > a { width:107px; height:62px; background:url(img/parrot.png)}
 .box#pptout > a { width: 81px; height:60px; background:url(img/pptout.png)}
 .box#yxa > a    { width: 61px; height:88px; background:url(img/yxa.png)}
}