BODY, DIV, 
FORM,
P		{ display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 0px; line-height: 1.4 }
P,
FORM		{ margin: 0 0 }
CENTER          { text-align: center }


/* ----------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------- */
/* koot ja muut */
body {
  margin: 0px;
  padding: 0px;
  text-align:center; 
  font-family: verdana; 
}


table.siteArea {
  position:relative;
  margin: 0 auto;
  top:0px;
  left:0px;

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

table.siteArea, div.credits {
  width:900px;
}



p {
  font-family: verdana; 
  font-size: 11px;
}

h1 {
  font-family: verdana; 
  font-size: 28px;
  letter-spacing: 4px;
}

h2 {
  font-family: verdana;
  font-size: 15px;
}


/* ----------------------------------------------------------------------------------------------------- */
/* colors */
/* div.contents, div.locator, div.credits, div.siteNavigator, div.siteBanner, div.pageNavigator, table.siteArea { */
div.contents, div.locator, div.credits, div.siteNavigator, div.pageNavigator, table.siteArea, div.doormat {
  /* huomaa!, mukana my?s siteArea -> tehd??n ovelat: koska komponenttien v?liin halutaan rakoja */
  /* toteutetaan ne taustan v?risin? reunoina dididi */
  
  background-color: #303034;

  background-image: url('../shade.bmp');
  background-position: top left;
  background-repeat: repeat-x;  
}

div.siteBanner, div.doormat p.enter {
  background-color: #8C1E1D;
}

p {
  color: #808080;
}

h1 {
  color: #FFFFFF;
}


a:link, a:visited, a:hover, a:active {
  color: #C0C0C0;
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
}

a:active {
}


body {
  background-color: #181818;
}

img.download {
  border-width:0px;
}


/* ----------------------------------------------------------------------------------------------------- */
/* borders */
div.contents, div.locator, div.credits, div.siteNavigator, div.siteBanner, div.pageNavigator {
  border-color: #181818;
  border-width: 2px;
/*  border-width: 1px; */
  border-style: solid;
  border-bottom-width: 0px;
  border-right-width: 0px;
}




/* ----------------------------------------------------------------------------------------------------- */
/* components */
div.contents, div.locator, div.credits, div.siteNavigator, div.siteBanner, div.pageNavigator  {
  margin:0px;
  padding-left: 11px;
  padding-right: 11px;
}




/* ----------------------------------------------------------------------------------------------------- */
/* siteBanner */
div.siteBanner {
  vertical-align: bottom;
  padding:0px;
  text-align:right;
  height:150px;

  background-image: url('../bannershade1.bmp');
  background-position: top left;
  background-repeat: repeat-y;  
}

div.siteBanner img.logo {
  border-width: 0px;
  height:150px;
}



/* ----------------------------------------------------------------------------------------------------- */
/* locator */
div.locator {
  padding-top: 5px;
  padding-bottom: 5px;
}

p.locatorText {
  font-size: 11px;
  font-weight: bold;
}


/* ----------------------------------------------------------------------------------------------------- */
/* siteNavigator */
div.siteNavigator {
  text-align:left;
  padding-top: 0px;
  padding-bottom: 0px;
}


div.siteNavigator a {
  font-size: 13px;
  font-weight: bold;

  padding-top: 5px;
  padding-bottom: 5px;

  padding-left: 4px;
  padding-right: 4px;

/*
  margin-left: 10px;
  margin-right: 10px;
*/

  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;

  display: table-cell; 

/*  background-color: #2f2f33; */
}

div.siteNavigator span.separator {
  display: table-cell;
  width:20px;
}


div.siteNavigator a.selected {
  background-color: #5C0908;
  color: #E0E0E0;
}

div.siteNavigator a:hover {
  background-color: #6C0908;
  color: #FFFFFF;
}




/* ----------------------------------------------------------------------------------------------------- */
/* pageNavigator */
div.pageNavigator {
  border-left-width: 0px;

  padding-top: 11px;
  padding-bottom: 11px;

/*  width:150px; */
/*  width:172px; */

  width:230px;
  padding-left: 0px;
  padding-right: 0px;

  text-align:left;
  float:right;
  
}


div.pageNavigator a {
  font-size: 11px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  display:block;
  border-bottom: 1px solid #2a2a2a; 
  border-top: 1px solid #2a2a2a; 
}

div.pageNavigator a.selected {
  background-color: #5C0908;
  color: #E0E0E0;
}

div.pageNavigator a:hover {
  background-color: #6C0908;
  border-top: 1px solid #400000; 
  border-bottom: 1px solid #400000; 
  color: #FFFFFF;
}


div.pageNavigator .indent {
  margin-left:15px; 
}


/* ----------------------------------------------------------------------------------------------------- */
/* contents */
div.contents {
  border-right-width: 2px;

  width: 642px; 
/*  width: 576px; */
  
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0px;
  padding-bottom: 11px;
  float:left;

/*  
  background-image: url('../side1.png');
  background-position: top left;
  background-repeat: repeat-y;  
*/
}


div.contents {
  min-height:400px;
}


div.pageNavigator {
  min-height:200px;
}

/* ----------------------------------------------------------------------------------------------------- */
/* credits */
div.credits {
  padding-top: 11px;
  padding-bottom:11px;

  float:left;
}


p.creditsText {
  font-size: 10px;
}



/* ----------------------------------------------------------------------------------------------------- */
/* pageSelector */

p.pageSelector {
  text-align:right;
}

/* ----------------------------------------------------------------------------------------------------- */
/* contents
/* ----------------------------------------------------------------------------------------------------- */
/* news */
p.newsTitle {
  margin-left: 10px;
  font-weight: bold;
  float: left;
  font-size: 13px;
}

p.newsDate {
  float: right;
}

p.newsText {
  margin-top: 25px;
  margin-left: 0px;
  clear: both;
}

p.newsAuthor {
  float: right;
}

p.newsSeparator {
  margin-bottom: 15px;
  clear: both;
  border-bottom: 1px solid #282828;
}

/* ----------------------------------------------------------------------------------------------------- */
/* discography */
div.discographyAlbum {
  clear:both;
  margin-left: 20px;
}

div.discographyAlbumCaption {
/*  border: 1px solid #000000; */
  border-bottom: 1px solid #282828;
  clear:left;
  padding:4px;
}

div.discographyAlbumContents {
  padding:4px;
}

p.discographyTitle {
  font-weight: bolder;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: right;
}

p.discographyID {
  font-size: 9px;
  margin-left:8px;
  text-align: right;
}

p.discographyOverview {
  text-align: right;
}

img.discographyImage {
  height:128px;
  width:128px;
  border: 1px solid #000000;
  float:left;
  margin-top: 3px;
  margin-left: 5px;
  margin-right: 10px;
  margin-bottom: 40px;
}




/* ----------------------------------------------------------------------------------------------------- */
/* album */
p.albumID {
  font-size: 9px;
  margin-left:0px;
  text-align: left;
}

/* varmistetaan että ainakin jomman kumman bottomi margini vaikuttaa */
div.albumInfo, div.albumInfo img.image {
  margin-bottom:20px;
}

div.albumInfo {
  clear:both;
}

div.albumInfo p {
  text-align:left;
}

div.albumInfo img.image {
  height:200px;
  width:200px;
  border: 1px solid #000000;
  float:left;
  margin-right: 10px;
}


p.lyrics {
  clear:both;
  text-align:left;
}

div.albumInfo p.download {
  text-align:right;
}



table.trackList {
  width:100%;
  clear:both;

  font-family: verdana; 
  font-size: 11px;
  color: #808080;
}


tr.track, tr.trackCaption {
  margin:0px;
  padding:0px;
}

tr.track td {
  border-bottom: 1px #202020 solid;
}

tr.trackCaption td {
  border-bottom: 1px #202020 solid;
  border-top: 1px #202020 solid;
}

tr.everysecond {
  background-color: #343438;
}

tr.trackCaption {
  background-color: #48484b;
}


td.tracknumber, td.tracktitle, td.duration, td.download, td.lyrics, td.writers, td.details {
  padding:4px;
}


td.tracknumber {
	width: 4%;
        text-align:center;
	border-right: 1px #202020 solid;
}

td.tracktitle {
	width: 36%; 
	text-align:left;
	font-size: 12px;
	font-weight:bold;
	border-right: 1px #202020 solid;
}

td.duration {
	width: 8%;
	border-right: 1px #202020 solid;
}

td.download {
	width: 11%; 
	border-right: 1px #202020 solid;
}

td.lyrics {
	width: 6%;
	border-right: 1px #202020 solid;
}

td.writers {
	width: 24%;
	text-align: right;
}

td.details {
	font-size:9px;
	font-style: italic;
	padding-bottom: 15px;
	width:100%;
	border-bottom: 1px #202020 solid;
}

td.duration, td.download, td.lyrics {
	text-align:center;
}

td.duration, td.download, td.lyrics, td.writers {
	font-size: 10px;
}






/* ----------------------------------------------------------------------------------------------------- */
/* extra */
p.extraTitle {
  font-weight: bolder;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: left;

  border-bottom: 1px solid #282828;
}

p.extraDescription {
  text-align: right;
  margin-bottom: 10px;
}


p.title {
  font-weight: bolder;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: left;

  border-bottom: 1px solid #282828;
}

p.description {
  text-align: right;
  margin-bottom: 10px;
}




/* ----------------------------------------------------------------------------------------------------- */
/* feedback*/

form.feedbackMessage input.sender {
  margin-bottom: 5px;
  border: 1px solid #000000;
}

form.feedbackMessage textarea.contents {
  display: block;
  margin-bottom: 5px;
  border: 1px solid #000000;
}

form.feedbackMessage div.controls {
/*  padding-bottom: 10px;
  border-bottom: 1px solid #282828; */
}

form.feedbackMessage input.submit {
  display: block;
  margin-bottom: 15px;
  font-size: 11px;
  border: 1px solid #000000;
}

table.feedback {
  width:100%;
}

table.feedback tr {
  vertical-align:top;
}


table.feedback tr.everysecond {
  background-color: #343438;
}


tr.feedbackPost {
}

tr.feedbackReply {
}


td.feedbackSeparator {
  border-bottom: 1px solid #282828;
}


tr.feedbackPost td {
}

td.feedbackContents {
  width:60%;
}

td.feedbackTimestamp {
  width:25%;
}


td.feedbackSender {
  padding-right:5px;
  width:15%;
}


tr.feedbackPost td.feedbackSender, tr.feedbackReply td.feedbackSender {
  text-align:right;
}

tr.feedbackReply td.feedbackSender {
  font-weight:bold;
}




/* ----------------------------------------------------------------------------------------------------- */
/* gallery */
div.gallery {
  text-align:center;
}

div.galleryThumbnail, div.galleryThumbnailSelected {
  width: 106px;
  min-height: 100px;
  padding: 11px;
  float:left;
  display: table-cell;
}

div.galleryThumbnailSelected {
  background-color: #2A2A2D;
}


div.gallerySelector {
	/* vanha versio ei sisältänyt mitään */
/*
*/
  overflow:auto;
  width:100%;
  border: 1px solid #2A2A2A;
}

div.scroller {
}

p.galleryThumbTitle {
  font-size: 9px;
}

img.galleryThumbImage {
  margin-top:5px;   
  max-height:64px;
  max-width:64px;
  border: 1px solid #000000;

}


p.galleryDescription {
  margin-bottom: 20px; 
}


div.galleryImage {
}

img.galleryImage {
  clear:both;
  margin-top:40px;  
  margin-bottom:5px;
  max-width:640px;
/*  max-height:480px; */

  border: 1px solid #000000;
}

p.galleryTitle {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 3px;
}




/* ----------------------------------------------------------------------------------------------------- */
/* biocard */

table.profile {
	width:62%;
}

table.profile td {
/*	padding-bottom:10px; */
	border: 1px #2A2A2A solid;
}


table.profile td.detailKey {
	width:120px;
	text-align:right;
	font-size: 11px;
	vertical-align:top;
	font-weight:bold;
}

table.profile td.detailValue {
	font-size: 11px;
	vertical-align:top;
}


img.profile {
	width: 200px;
	height:200px;
	float:right;
	margin-right:15px;
	border: 1px black solid;
}



/* ----------------------------------------------------------------------------------------------------- */
/* doormat */

div.doormat {
  position:absolute;
  left:25%;
  top:25%;
  width:50%;
  padding:20px;
  border: 1px solid #000000;
}

div.doormat p.welcome {
  text-align:left;
  margin-bottom:20px;
}

div.doormat p.enter {
  text-align:center;
  float:right;
  width:60px;
  border: 1px solid #000000;
  padding:2px;
  width:60px;
}

/*
div.doormat p.enter {
  text-align:left;

}
*/