/* CSS for the new (2005) page format at Stacken */
/* Visually just like the old style (for now) but with slighly less ugly code
   and slightly wider navigation bar.
*/

HTML { margin: 0; padding: 0; }
BODY { margin: 0; padding: 0;
  background: #eeeeee; color: black;
}
@media all {
  div.main { margin: 1em 1em 1em 25%; }

  div.topmatter, hr, div.topmatter a {
    background: #aa0000; color: white; text-decoration: none;
  }
  div.topmatter A:hover { text-decoration: underline; }
  div.topmatter, HR {
    border-top: solid 0.2em #770000;
    border-bottom: solid 0.3em #660000;
    border-left: solid 1ex #eeeeee;
    border-right: solid 1ex #eeeeee;
  }
  div.topmatter { margin: 1ex; padding: 0.2em 0.8em; }
  div.topmatter .langlink, div.topmatter .helplink
    { float: right; margin: 0 1ex; }

  body.stackenhome div.topmatter, body.stackenhome div.topmatter a
  { border-width: 0; background: #eeeeee; color: black; }

  div.navigation { border: solid black; border-width: thin thin thin 0;
    background-color: #ffffcc; color: black;
    margin: 0; padding: 0.5ex;
    float: left; position: absolute; left: 0; top: 4em; width: 23%;
  }
  DIV.navigation STRONG, DIV.navigation I { display: block; }
  DIV.navigation I { margin-left: 0.8em; text-indent: -0.5em; }
  DIV.navigation HR, div.main hr.mainend { display: none; }

  HR { background: #bb0000; font-size: 0.5em; height: 0.7em; 
    margin: 2em -1ex 1em -1ex;
  }
  div.trailer { margin: 1em 1em 0 24%; }
}

H1, H2, H3, P.ingress { 
  font-family: "nimbus sans l", helvetica, sans-serif; font-weight: bold; 
}
H1 { font-size: 220%; text-align: center; }
H2, P.ingress { color: #aa0000; }
H2 { font-size: 180%; }
H3 { font-size: 120%; margin-top: 1ex; margin-bottom: 0; }
H1, H2 { page-break-after: avoid;  page-break-inside: avoid; }

P.ingress { font-style: italic; }

P { margin: 1ex 0; text-align: justify; }
DIV.navigation P { text-align: left; }

ADDRESS { text-align: right; }
ADDRESS.signed { margin-top: 4em;  border-top: solid 1px black;
  width: 60%; margin-left: auto; margin-right: 1em;
}

DL > DT { margin-top: 1ex; font-weight: bold; }

.sidebar, TABLE.major TD, TABLE.major TH, DL.major DT { 
  background-color: #ffffcc; color: black;
}
@media all { DL.major DT { padding: 0.15em 0.75em; } }
DL.major DD { margin-top: 0.2em; margin-bottom: 1ex; padding-top: 0; }
.sidebar {
  border: solid thin gray;
  float: right; clear: right; width: 20%;
  padding: 1ex; margin-bottom: 1ex; min-width: 190px;
}
@media all { .sidebar { margin-left: 1ex; } }

.sidebar H2 { margin: 0; font-size: 140%; }
.sidebar H3 { margin: 0; }
.sidebar HR { display: none; }
.sidebar OL, .sidebar UL { padding-left: 2ex; }

BR.clearall, .trailer { clear: both; }

P.snailmail { border-left: solid medium #880000; padding-left: 1ex; }

TH { text-align: left; vertical-align: top; }

SMALL { font-size: 60%; font-weight: normal; }
P.mini { font-size: 60%; font-weight: normal;  margin: 0.5ex 0; }

TABLE.major TD.vline { width: 0.2em; background-color: #880000; 
  font-size: 1px; color: black;
}

.prompt { color: blue; }

P > A > IMG { border: solid thin; margin: 0.5ex; }
IMG.right { float: right; border: 0; }

.trailer .separator { display: none; }
.trailer .vbutton { display: block; float: left; margin: 0.2em; width: auto;
  font: 90% sans-serif; padding: 2px;  border: outset 1px #aa0000;
  background: #aa0000; color: #ffffff; text-decoration: none;
}
.trailer .vbutton acronym { text-decoration: none; }
.trailer .vbutton sup { vertical-align: top; }
.trailer .vbutton .what { background: #ffffff; color: #aa0000; padding: 0 0.1em; 
}
.trailer .vbutton .who {  background: #aa0000; color: #ffffff; padding: 0 0.2em; }
.trailer A.vbutton:hover, A.vbutton:hover { background: #bb0000; }


.section.box { border: solid thin #888888; margin: 0 1ex 1ex 0;
  width: 21em; float: left; max-width: 100%;
  background-color: #f8f8f8;
}
.section.box h3 { margin: 0; padding: 0.1em; background-color: #ffffcc;
  border-bottom: solid thin #666666;
}
.section.box p { margin: 0.2em }
.section.box img.right { margin: -0.4em -0.4em 0 0.2em;
  max-width: 9em; max-height: 8em;
}

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


div.gallery p { font-style: italic; margin: 0 0 0.3em 0; }
div.gallery a img { border-width: 1px; }
div.gallery .byline { margin: 0; padding: 0; font-size: 80%; font-style: normal; }

table { border-collapse: collapse; }
td, th { margin: 0; padding: 0.1em 0.2em; text-align: left; }
.listing .odd { background-color: #eeeeee; color: black; }
.listing .even { background-color: #f6f6f6; 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 th { font-size: 90%; font-weight: bold}
.listing td { font-size: 90%; }

.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; }
.used { background: #f8eeaa; color: black; }
.warning .used { background: #ffbbaa; color: black; }
.free { background: #bbeeaa; color: black; }

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

/* - - rubriken på förstasidan - - */
@media screen {
  .stackenhome h1 {
    width: 270px; padding-top: 120px; 
    background: url(/images/stacken-balk2.png) no-repeat;
    height: 0; overflow: hidden;
  }
}

/* - - projektikoner - - */
@media screen {
 .box > a { display: block; float: right; margin: -4px -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)}
}