/* CSS for composer Nils Lindberg's website at http://nilslindberg.com
   Webdesign by Cristin Lindqvist aka Kartis, http://cristinlindqvist.com */
/* This CSS is fully compatible for all browsers that support CSS2.1. 
   Internet Explorer 6 and earlier for Windows don't support this level of CSS well.
   There might be some serious layout problems in earlier browsers. */
/* All XHTML and CSS are validated without errors in W3C markup validation service. */

/* Design description:
   The design is built with a total width of 960px divided into 5 columns of 192px each.
   Header and Footer also have a height of 192px.
   Body's left column is a menu holder, a block called sekund.
   Body's three middle columns create the main content space, a block called prim.
   Body's right column is empty with only a vertical, repeating image as decoration. */
   
/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. */

/* ---------------------------------------------------------------------------------------------------- */
* {
 margin: 0;
 padding: 0;
}
body {
 background: #f7f2f9 url(bilder/bgtop.jpg) repeat-x 50% 0; /* horizontal image in the top */
 font: 62.5% Verdana, Helvetica, sans-serif;
 color: #262129;
 text-align: justify;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ----- Blocks for layout ----- */
#wrap { /* Wraps all content and puts a horizontal image in the bottom. */
 background: transparent url(bilder/bgwrap.jpg) repeat-x 50% 100%;
}
#page { /* Wraps all content inside wrap block, gives it width and makes it centered. */
 background: transparent url(bilder/bgpage.jpg) repeat-y 0 0;
 margin: 0 auto;
 width: 960px;
 text-align: left;
}
#header { /* Header block inside page block with a height of a fifth of page block's width. */
 height: 192px;
 background: #262129 url(bilder/bgheader.jpg) no-repeat 0 0;
}
 #header h1, #header h2 { /* Header font style only in header block */
  font-style: italic;
  font-family: Georgia, serif;
  color: #deccc8;
  font-weight: 400;
 }
 #header h1 {
  font-size: 26px; /* Fixed size to not damage layout if font size is changed */
  padding: 20px 160px 6px 20px;
  text-align: right;
 }
 #header h2 {
  font-size: 20px; /* Fixed size to not damage layout if font size is changed */
  line-height: 1.2em; /* smaller than regular h2, to fit in header */
  padding: 4px 30px 6px 20px;
  text-align: right;
 }
 #sidrubrik { /* Page headline is put in header, fixed in this block */
  position: absolute;
  margin: 40px 0 0 170px;
  z-index: 100;
 }
  #sidrubrik h2 {
   font-size: 16px; /* Fixed size to not damage layout if font size is changed */
   font-weight: normal;
   font-variant: small-caps;
   font-family: "Trebuchet MS", sans-serif;
   letter-spacing: 0.6em;
   line-height: 1.2em;
   color: #b0a399;
   padding: 4px;
  }
/* ---------------------------------------------------------------------------------------------------- */
/* ---- Link styles ---- */
a:link {
  background-color: #eeecec;
  color: #992c10;
  font-weight: bold;
  border-top: 1px dotted #c0b7c4;
  border-bottom: 1px dotted #c0b7c4;
  text-decoration: none;
}
a:hover {
  background-color: #eeecec;
  color: #e63f17;
  letter-spacing: 0em;
  border-top: 1px dotted #c0b7c4;
  border-bottom: 1px dotted #c0b7c4;
  text-decoration: none;
}
a:visited {
  color: #cc7a66;
  text-decoration: none;
}
a:active {
  color: #ffd6cc;
  text-decoration: none;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ---- Right main block ---- */
#prim { /* page block divided into two floating blocks from right to left: prim and sekund. */
 float: right;
 margin: 60px 192px 0 0; /* Frame block. Leaves one 'column' to the right with 192px marg and 0px marg left. Paddings are put on elements inside prim block */
 padding: 0 20px;
 width: 536px; /* 768 minus 192px margin minus 40px padding */
 display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
 line-height: 1.5em;
}
/* --- Blocks inside Center main (prim) block --- */
/* Image holders on pages cv01bioen, cv03biosv, work02disco, work03book, media01pict */
 .primimgright { /* Images need image text. Images positioned outside of right edge of text area, 20px from very right edge, merging into text */
  float: right;
  margin: -6px -172px 0 12px;
  padding: 3px;
  background: #eeecec;
  border: 1px solid #c0b7c4;
 }
 .primimgleft { /* Images need image text. Images positioned outside of left edge of text area, 20px from very left edge, merging into text */
  float: left;
  margin: -6px 12px 0 -172px;
  padding: 3px;
  background: #eeecec;
  border: 1px solid #c0b7c4;
 }
 .primimgthumb { /* Images need image text. Images for thumbnails on page media01pict */
  float: left;
  margin: 9px;
  padding: 3px;
  background: #eeecec;
  border: 1px solid #c0b7c4;
  text-align: center;
 }
 .primimgright p, .primimgleft p, .primimgthumb p {
  font-size: 0.9em;
  font-style: italic;
  text-indent: 0;
  text-align: left;
  line-height: 11px;
  padding: 1px;
 }
/* --- Five blocks - 'kurb1'-'kurb5' - inside prim block on Start page for small quotes --- */
/* All five "kurb" blocks have different sizes placings and colours on top and left borders */
 .kurb1 {
  float: left;
  width: 498px;
  padding: 10px 10px 10px 20px;
  font-size: 1em;
  line-height: 1.5em;
  margin: 20px 8px 20px 8px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
  background: #f9f7fa;
  border-top: 1px solid #c2c4cb; /* light blue */
  border-left: 1px solid #c2c4cb;
 }
 .kurb2 {
  float: left;
  width: 260px;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5em;
  margin: 0 8px 0 -20px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
  background: #f9f7fa;
  border-top: 1px solid #d3c8b9; /* light green */
  border-left: 1px solid #d3c8b9;
 }
 .kurb3 {
  float: left;
  width: 230px;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5em;
  margin: 20px 8px 2px 25px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
  background: #f9f7fa;
  border-top: 1px solid #dbb9aa; /* light red */
  border-left: 1px solid #dbb9aa;
 }
 .kurb4 {
  float: right;
  width: 150px;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5em;
  margin: 20px -106px 10px 8px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
  background: #f9f7fa;
  border-top: 1px solid #e9dbb0; /* light yellow */
  border-left: 1px solid #e9dbb0;
 }
 .kurb5 {
  float: right;
  width: 140px;
  padding: 10px;
  font-size: 1em;
  line-height: 1.5em;
  margin: 50px 8px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
  background: #f9f7fa;
  border-top: 1px solid #d4ccb2; /* light yellow-green */
  border-left: 1px solid #d4ccb2;
 }
  .kurb1 p, .kurb2 p, .kurb3 p, .kurb4 p, .kurb5 p {
   font-size: 1em;
   line-height: 1.5em;
   padding: 2px 0 6px 0;
   text-align: left;
  }
/* First quote block (kurb1) has an ornament of a curbits attached to paragraph */
  p.kurb {
   margin: -32px 0 0 -32px;
   padding: 32px 0 6px 28px;
   background: transparent url(bilder/kurbits.gif) no-repeat 0 0;
  }
/* -- 2-column blocks side by side without borders, inside prim block. Two column blocks share the width of 536px (=268). -- */
/* Used in works01ens */
 .col2 {
  float: left;
  width: 250px; /* 536 minus 18*2 (margin) divided with 2 = 250px */
  margin: 16px 9px 12px 9px;
  display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
 }
  .col2 p {
   font-size: 1em;
   text-align: left;
   text-indent: 0;
   padding: 3px 12px 1px 12px;
  }
/* --- Block inside prim block to divide data with a grey-brown dotted border. Similar to Table "borderline" below. --- */
/* Used in work01ens, work02disco, work03book */
 .bordown {
  width: 496px; /* 536 minus 40 (padding) */
  padding: 4px 20px;
  line-height: 1.5em;
  border-bottom: 1px dotted #c0b7c4;
 }
  .bordown p {
   font-size: 1.1em;
   line-height: 1.5em;
   text-indent: 0;
   padding: 6px 0 2px 0;
  }
  .bordown img { /* Images in bordown positioned to the right of record list in work02disco */
   float: right;
   margin: -10px 0 6px 18px;
   padding: 3px;
   background: #eeecec;
   border: 1px solid #c0b7c4;
  }
  .bordown p.megaindrag { /* Used for sub-subtitles in work list - work01ens */
   padding: 6px 50px;
   font-size: 1em;
   text-indent: 0;
  }
/* --- Block inside prim block to divide data with a light blue border (top-left) and whiter background. A mix of the blocks 'kurb1' and 'bordown' above. --- */
/* Used in media02list, media03video */
 .borlist {
  width: 496px; /* 536 minus 40 (padding) */
  padding: 4px 20px 20px 20px;
  line-height: 1.5em;
  background-color: #f9f7fa;
  border-top: 1px solid #c2c4cb; /* light blue */
  border-left: 1px solid #c2c4cb;
 }
  .borlist p {
   font-size: 1.1em;
   line-height: 1.5em;
   text-indent: 0;
   text-align: left;
   padding: 6px 0 2px 0;
  }
  h5.kurb { /* Title in 'borlist' block has an ornament of a kurbits attached to paragraph */
   font-size: 1.3em;
   margin: -26px 0 0 -32px;
   padding: 44px 0 15px 32px;
   background: transparent url(bilder/kurbits.gif) no-repeat 0 0;
  }
  .borlist img { /* Images in 'borlist' positioned to the right of record list in media02list */
   float: right;
   margin: -20px 6px 6px 20px;
   padding: 3px;
   background: #eeecec;
   border: 1px solid #c0b7c4;
  }
/* --- Style on "back to top" --- */
 p.totop {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
 }
/* ---------------------------------------------------------------------------------------------------- */
/* ---- Left sidebar block ---- */
#sekund { /* page block divided into two floating blocks from right to left: prim and sekund. */
 float: right;
 margin: 60px 0 0 0; /* Starts 192 + 576 from right edge */
 padding: 0 10px 10px 20px;
 width: 162px; /* 192 minus 30 for margin */
 display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
 line-height: 1.4em;
}
 #sekund p {
  text-align: left;
  margin: 3px 0 3px 0;
  font-size: 1em;
  text-indent: 0;
  line-height: 1.8;
 }
/* --- Blocks inside left sidebar (sekund) --- */
/* -- Submenu made of lists -- */
 .submenu {
  width: 100%;
  padding: 8px 0;
 }
  .submenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
  }
   .submenu li {
    font-size: 1.2em;
    font-weight: 600;
    font-variant: small-caps;
    display: block;
    padding: 10px 2px 3px 3px;
    border-bottom: 1px dotted #c0b7c4; /* Dividing border between menu groups */
   }
    .submenu li a:link, .submenu li a:visited {
     background-color: transparent;
     text-decoration: none;
     display: block;
     padding-top: 5px;
     border-top: none;
     border-bottom: none;
    }
    .submenu li a:hover {
     background-color: #eeecec;
     color: #e63f17;
     font-size: 1em;
    }
    .submenu ul ul {
     margin-top: 0px;
     margin-left: 14px;
    }
     .submenu ul ul li {
      font-size: 0.8em;
      font-variant: normal;
      padding: 1px 2px 1px 2px;
      border-bottom: none;
     }
      .submenu ul ul li a:link, .submenu ul ul li a:visited {
       padding: 2px 2px 1px 2px;
       border-top: none;
       border-bottom: none;
      }
      .submenu ul ul li a:hover {
       padding: 2px 2px 1px 2px;
      }
/* ----- Clearing ----- */
.clear {
 clear: both;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ---- Footer block ---- */
#footer {
 clear: right;
 height: 196px;
 background: transparent url(bilder/bgfoot.jpg) repeat-x 50% 100%;
 line-height: 1em;
}
 #footer p {
  padding: 6px 0 10px 440px;
  color: #deccc8;
  text-align: left;
 }
 #footer a:link, #footer a:visited {
  background: transparent;
  color: #e6ca89;
  border-top: none;
  border-bottom: none;
  font-weight: bold;
 }
 #footer a:hover {
  background: transparent;
  color: #cb3814;
  font-weight: bold;
 }
/* ---------------------------------------------------------------------------------------------------- */
/* ----- Font styles ----- */
/* --- Headers --- */
h1, h2, h4, h5, h6 {
 text-align: left;
 font-family: "Trebuchet MS", sans-serif;
}
h1 { /* Used in header for "Nils Lindberg", also works as to top anchor. More style in header h1 above. */
 font-size: 2.0em;
 font-family: Georgia, serif;
 padding: 10px 0 2px 0;
}
h2 { /* Used in header block for "composer & musician" and as page title in ters block. More style above. */
     /* Also used as title on biography pages, layout as here */
 font-size: 1.8em;
 letter-spacing: 0.1em;
 line-height: 1.4em;
 padding: 10px 0 10px 0;
}
h3 { /* Title with piano bar made of background img. */
     /* Used in contact, work01ens, work02disco, work03book, */
 font-size: 1.8em;
 font-family: Georgia, serif;
 letter-spacing: 0.1em;
 font-style: italic;
 font-weight: normal;
 background: transparent url(bilder/bgh3.jpg) no-repeat 0 100%;
 padding: 9px 0 2px 6px;
 margin: 12px 0;
}
h3.b { /* Subtitle under h3. Used in work03book */
 font-size: 1.3em;
 font-family: "Trebuchet MS", sans-serif;
 margin-top: 9px;
 margin-bottom: 3px;
 letter-spacing: 0.2em;
 font-style: normal;
 background: transparent;
}
h4 { /* Used in media03video, work03book */
 font-size: 1.2em;
 font-weight: 600;
 font-style: italic;
 margin: 9px 0 3px 0;
}
h5 { /* Used for CD titles in work02disco */
 font-size: 1.2em;
 font-weight: 600;
 margin: 9px 0 3px 0;
}
h5.b { /* Used for work titles in work01ens */
 margin: 0;
 font-size: 12px;
 padding: 6px 0 0 0;
 font-weight: 600;
}
/* --- Paragraphs and other styles --- */
p {
 font-size: 1.1em;
 text-align: justify;
 text-indent: 10px;
 padding-bottom: 9px;
}
/* ---------------------------------------------------------------------------------------------------- */
/* ----- Tables ----- */
table {
 width: 100%;
 padding: 0;
}
/* --- Table with grey-brown dotted border as underline between rows. --- */
/* Used in pages without any title above table: cv02detail, cv04pris */
.underline {
 margin-top: 20px;
}
.underline td {
 border-bottom: 1px dotted #c0b7c4;
 font-size: 1.1em;
 padding: 6px 4px 2px 4px;
 text-align: left;
 vertical-align: top;
}
/* -- table cell or column group width for years (some space after the four digit year, use 80px width for two years with dash in between!) -- */
/* Used in tables: 'underline' */
 td.year, colgroup.year {
  width: 60px;
 }
/* --- Table with grey-brown dotted border-line between rows. --- */
/* Used in pages with title H3 above table: contact  */
.contact {
 margin-top: 10px;
}
 .contact th { /* left table cell used on contact page */
  width: 120px;
  font-weight: bold;
  font-size: 1.1em;
  padding: 6px 4px;
  border-bottom: 1px dotted #c0b7c4;
  vertical-align: top;
  text-align: left;
 }
 .contact td { /* right table cell used on contact page */
  font-size: 1.1em;
  padding: 6px 4px;
  border-bottom: 1px dotted #c0b7c4;
  vertical-align: top;
 }
/* ---------------------------------------------------------------------------------------------------- */
/* ----- Divider and List styles ---- */
hr {
 color: #c0b7c4;
 background-color: #c0b7c4;
 margin: 6px 0;
 height: 1px;
 width: 100%;
 border: none;
}
ol { /* Ordered list used in work02disco */
 margin: 10px 10px 10px 45px;
}
 ol li {
  margin-bottom: 2px;
  font-size: 1em;
 }
dl { /* Definition list used in work02disco */
 margin: 10px 10px 10px 0;
}
 dt {
  margin-bottom: -8px;
  font-size: 1.1em;
  font-variant: small-caps;
  font-weight: bold;
 }
 dd {
  margin-bottom: 2px;
  font-size: 1em;
  font-weight: normal;
 }
/* ---------------------------------------------------------------------------------------------------- */
/* ---- Iframes on Listen and Video pages ---- */
.iflisten {
 width: 320px;
 height: 23px;
 background-color: #f9f7fa;
 margin: 0;
 padding: 0;
 display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
 border: 0;
}
.ifvideo {
 width: 425px;
 height: 344px;
 background-color: #f9f7fa;
 margin: 8px 35px;
 padding: 0;
 display: inline; /* to prevent Internet Explorer 6.0 to show the site in a weird way */
 border: 0;
}