* { margin: 0; padding: 0;}

body {
  background: rgb(20,20,20);
  color: rgb(170,170,170);
  
  /* :-) specially for the ones in the know */
  font-family: "Discreet", "Lucida Grande", "Tahoma", sans-serif;
  line-height: 170%;
}

/* This one is golden. Prevent the content from moving when the vertical scrollbar appears */
html { height: 100%; margin-bottom: 1px;}

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: underline;
  color: rgb(170,170,170);
}

a:hover {
  color: white;
}

#stylereload {
  position: fixed;
  left: 2px;
  top: 2px;
  font-size: .7em;
  text-decoration: none;
  background: olive;
  color: white;
}

#wrap {
  margin: auto;
  margin-top: 27px;
  width: 970px;
  background: rgb(10,10,10);
}

/* Masthead, the title of the article is duplicated inside it as an H1 */
#head {
  height: 70px;
  background: url('/images/hectic-masthead.png') no-repeat;
}
#head h1 {
  visibility: hidden;
}


/* The horizontal slice with the two columns */
#two {
  padding-bottom: 10px;
  background: none;
}

/* Basic text */
#text, #aux {
  height: inherit;
  font-size: .7em;
  line-height: 1.65em;
}

#text li, #aux li {
  margin-left: 1.2em;
}

#text>* {
  padding-left: 20px;
  padding-right: 20px;
}

#cnt #text {
  overflow: auto;
}

#blockhead {
  padding-left: 10px;
  padding-right: 10px;
}

#blockfoot {
  margin-top: 10px;
}

/* The nav area. Where the column is smaller it is approximately the golden mean of the total witdh */
#aux {
  float: left;
  width: 300px;
  color: rgb(110, 110, 110);
  /* Otherwise the box will collapse */
  padding: 1px;
}

/* The actual wrapper specifies the padding for the aux column content */
#aux .aux2 {
  margin: 15px;
  padding: 10px 20px;
  padding-top: 4px;
  background: url('/images/semi-transp-black.png') repeat-y;
}

.articlePage #aux .aux2 {
  padding: 0;
}

/* Article info - who wrote, which categories */
.artMeta {
  margin: 1.3em 0;
}

/* Article info in the little newsblock is more compact */
.newsblock .artMeta {
  margin: .7em 0;
  color: rgb(110,110,110);
}

#aux ul {
  padding-left: 1em;
  font-size: small;
}

#friends {
  font-size: .8em;
}

#nav, #contacts {
  background: #222;
  text-align: justify;
  color: rgb(140,140,140);
  font-size: .8em;
  line-height: 1.65em;
}

#contacts, #friends {
  padding: 0 10px 0 10px;
}

#contacts {
  word-spacing: .2em;
  text-align: center;
}

#nav {
  background: url('/images/hectic-public-web20-bar.png') repeat-x black;
}

#nav a {
  text-decoration: none;
  display: block;
  float: left;
  color: inherit;
  /* make it 11 to compensate for the border */
  padding-left: 11px;
  padding-right: 10px;
  padding-bottom: 2px;
  border-right: 1px solid rgb(30,30,30);
}

#nav a:hover {
  color: white;
  background-color: rgb(64,64,64);
}
    
/* All headers */
#cnt h1,
#cnt h2,
#cnt h3,
#cnt h4,
#cnt h5 {
  font-weight: normal;
  margin-top: 1.1em;
  font-size: 1.4em;
  margin-bottom: .4em;
  color: rgb(145, 145, 145);
}

/* News group headers */
#cnt h1.archiveHead {
  margin-left: .7em;
  color: rgb(100,100,100);
}

#aux h3,
#aux h4 {
  color: rgb(190, 190, 190);
}

/* Blocks that show news on the main page */
.newsblock {
  border-bottom: 1px solid rgb(40, 40, 40);
  padding: .7em 1em .7em 1em;
  margin-left: 10px;
  text-align: left;
}

/* Inline illustration within the news block */
.newsblock .illustr {
  float: left;
  margin-right: 1em;
  margin-bottom: .3em;
}

#aux .illustr {
  margin-bottom: 1.4em;
}

.newsblock a.readon {
  display: block;
  margin: .5em;
  font-size: 1.3em;
  color: rgb(170,170,170);
}

#cnt .newsblock h1, #cnt .newsblock h2, #cnt .newsblock h3, #cnt .newsblock h4 {
  margin-left: 0;
  /* Browsers suck when it comes to optical alignment, so we do this stanza
  with respect to letters like V and W */
  text-indent: -1px;
}

#cnt .newsblock h3 {
  margin-top: .3em;
  font-size: 1.5em;
  color: rgb(145,145,145);
}

/* Links inside content areas */
#two a:link,
#two a:hover,
#two a:active {
  color: white;
}

#two a:visited {
  color: rgb(170, 170, 170);
}

#cnt a:hover { color: white; }

/* Horizontal rules act like spacing dividers */
hr {
  visibility: hidden;
  margin-top: .6em;
  margin-bottom: .6em;
}

/* Filmstrip in the clip archive */
#filmstrip {
  font-size: small;
  position: relative;
  font-weight: bold;
  background: rgb(40, 40, 40);
  height: 9.5em;
  overflow: hidden;
  margin-bottom: 2em;
}

.newerArtsLink, .olderArtsLink {
  display: block;
  padding: 5px 20px;
  width: 80%;
  font-size: large;
}

a.newerArtsLink, a.olderArtsLink {
  padding: 5px 20px 5px 40px;
}


h1.newerArtsLink {
  display: block;
  padding: 5px 20px;
  width: 80%;
  font-size: inherit;
}

/* noop is the scrolling container within the filmstrip */
#filmstrip div.noop {
  padding: 0;
  position: absolute;
  left: 40px;
  top: 0;
  height: 9.5em;
}

#filmstrip .page, #filmstrip .clp {
  margin: 0;
  display: block;
  float: left;
  padding: 2px;
  text-decoration: none;
  height: 98%;
}
 
/* Remove borders on all elements inside the links unless told otherwise */
#filmstrip .clp * {
  border: none;
}

#filmstrip .clp img {
  display: block;
  margin: 1px ;
  opacity: .6;
  filter: alpha(opacity=60);
}

/* Clip information text in the filmstrip */
#filmstrip .clp span {
  color: white;
  display: block;
  padding-left: 1em;
  margin-left: 0;
  width: 70%;
  height: 40px;
  font-size: x-small;
  line-height: 1.2em;
  color: rgb(160,160,160);
}

#filmstrip div.clp span {

}

#filmstrip a.page {
  display: block;
  background: red;
  height: 80px;
  width: 30px;
  padding: 0;
  opacity: .99;
  height: inherit;
  
  /* Hide text links */
  text-indent: -10em;
  overflow: hidden;
}

/* Prev page arrow */
#filmstrip a.page#prevClips {
  width: 40px;
  background: url("/images/clips-arrow-left.png") no-repeat;
  position: absolute;
  left: -1px;
  top: 0;
  z-index: 4000;
  height: 100%;
}

/* Next page arrow */
#filmstrip a.page#nextClips {
  width: 40px;
  background: url("/images/clips-arrow-right.png") no-repeat;
  position: absolute;
  height: 100%;
  right: -1px;
  top: 0;
}

#filmstrip a.page:hover {
  opacity: .5;
}

/* Current clip */
#filmstrip a.clp:hover,
#filmstrip a.current {
  background: rgb(120,120,120);
}

/* Hide the text above the image when hovering */
#filmstrip a.clp:hover span,  #filmstrip div.clp span {
  color: white;
}

/* In the clip archive the movie itself is in the middle of the main column  */
.Colorists #text object,
.WorkArchive #text object {
  margin-left: auto;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
}

.Colorists #aux,
.WorkArchive #aux {
  width: 340px;
}

/* The plug shows tips to people without the plugin */
.plug {
  margin-top: 1em;
  color: rgb(90,90,90);
}

.screen {
  margin-left: auto;
  margin-right: auto;
}
/* Klir Mai Flotz */
hr.clr, hr.clear {
  clear: both;
  margin: 0;
  border: none;
  padding: 0;
  height: 0;
}

/* Noop divs act as containers */
body div.noop {
  padding: 0; margin: 0;
}

/* The introduction is somewhat bleaker than the rest of the text */
.articleIntro {
  color: rgb(130, 130, 130);
}

/* Head for the article group */
.newsGroupHeader {
  background: rgb(30,30,30);
  color: rgb(180, 180, 180);
  padding: .3em 1.2em .3em 1.2em;
}

/* All kinds of inline viewers */
.inlineImage, .inlineClip, .inlineDownloadable {
  /*
  background: rgb(20,20,20);
  border: 1px solid rgb(40,40,40);
  */
  margin-top: 20px;
}

.inlineImage  *, .inlineClip  *, .inlineDownloadable * { display: block; }

/* Show the hint of a clip controller for all inline clips */
.inlineClip span.mov {
  display: block;
  padding: 0;
  padding-bottom: 14px;
  background: url('/images/click-to-play-illustr.png') bottom left repeat-x;
  position: relative;
}

a.inlineClip:hover {
  color: white;
}

/* The right part of the QT controller */
.inlineClip span.mov span {
  display: none;
}

.illustr img {
  width: 100%;
  margin:0; padding: 0;
}

/* Fade down all the chrome on the player page */
body.Player #two,
body.WorkArchive,
body.Colorists  {
  background: rgb(20,20,20);
  color: rgb(190,190,190);
}

body.Player a:link,
body.Player a:hover,
body.Player a:active {
  text-decoration: underline;
  color: rgb(170, 170, 170);
}

body.Player #head {
  height: 70px;
}

.Player #two {
  padding-top: 20px;
}
/* When the movie is playing we hide all the cruft */
body.playing #filmstrip *,
body.playing #blockhead *,
body.playing #nav *,
body.playing #head *,
body.playing #contacts *,
body.playing #aux *,
body.playing #friends * {
 opacity: .3;
}

body.playing #two,
body.playing #wrap {
  background: inherit;
}


/* Clip alternates */
ul.alternates,
#aux ul.alternates {
  list-style: none;
  padding: 0;
  margin-bottom: 1em;
}

ul.alternates li,
#aux ul.alternates li {
  display: block;
  float: left;
  width: 100%;
  margin: .1em 0;
  list-style: none;
}

#aux ul.alternates li a,
#aux ul.alternates li a:link,
#aux ul.alternates li a:hover {
  text-decoration: none;
  text-align: center;
  display: block;
  padding: 2px;
  overflow: auto;
}

#aux ul.alternates li a:hover {
  background: rgb(25,25,25);
}

ul.alternates li .ico {
  display: white;
  margin-right: 1em;
  border: 1px solid rgb(80,80,80);
  background: rgb(40,40,40);
  float: left;
}
ul.alternate li a:hover .ico {
  background: rgb(110,110,110);
}

ul.alternates li a:hover {
  background: rgb(10,10,10);
}