/*
body container
    - header (mahd. otsikkoteksti/logo)
        - navi (navigaatiolista)

    - content (sisältö)
        - sidebar (alavalikko)
        - main (pääikkuna)
            left content
            right content
    - footer (mahd. footer-tekstit)
*/


/* PNG fix, IE sucks ass as always.. 
img, div { behavior: url(css/iepngfix.htc) }
*/

/****************************
 Body 
****************************/
body {
    background-color: #0d0d0d;
    background-image: url('../images/bg-body.jpg');
    background-repeat: no-repeat;
    background-attachment:fixed;
    font-family:"Lucida Grande",  "Lucida Sans Unicode", Verdana,  Arial,  Helvetica,  sans-serif;
    margin:0;
    padding:0;
    padding-left: 60px;
    padding-top: 110px;
	border:0;
	color: #b4b4b4;
    font-size: 0.88em;
    text-align: left;
    height: 100%;
}

/***************************
 Links
***************************/
A { color: #7e9900; text-decoration: none; }
A:link { }
A:visited { color: #737e3f; }
A:hover {  text-decoration: none; }


/*************************
BODY_CONTAINER
*************************/
#body_container {
    width: 850px;
}


/*************************
HEADER element
**************************/
#header {
    font-weight: normal;
    padding-bottom: -5px;
}


/*************************
LOGO element
**************************/
#logo {
    float:left;
    width: 236px;
    height: 40px;
    margin-bottom: -5px;
}
#logo-link {
    background-image: url('../images/bg-logo.png');
    background-repeat: no-repeat;
    text-indent: -2000px;
    width: 236px;
    height: 40px;
}

/****************************
 Navigation element 
****************************/
#navi {
    text-transform: lowercase;
    font-size: 0.8em;
    letter-spacing:1px;
    float: right;
    margin-top: 10px;
    margin-bottom: -5px;
}
#navi a {
    text-decoration: none;
    color: #b4b4b4;
}
#navi a:hover {
    text-decoration: none;
    color: #cccccc;
}
#navi a#active {
    text-decoration: none;
    color: #ffffff;
}
#navi ul {
}
#navi ul li {
    display: inline;
    list-style-type: none;
    padding: 0 20px 0 20px;
    border-right: 1px solid #363636;
}



/*************************
IMAGE element
**************************/
div#image {
    background-image: url('../images/bg-header.jpg');
    background-repeat: no-repeat;
    width: 547px;
    height: 180px;
    margin: 10px;
    margin-right: 0;
    float: left;
}


/*************************
HEADER-SIDEBAR element
**************************/
div#header-sidebar {
    width: 273px;
    height: 180px;
    margin: 10px;
    float:right;
    font-size: 0.8em;
}
#header-sidebar h1 {
    text-align: right;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: -15px;
}
#header-sidebar ul li {
    margin-bottom: 8px;
    list-style-type: none;
    margin-left: -20px;
    list-style-image: url('../images/music_icon.png');
    list-style-type: square;
}
#header-sidebar ul li a {
    color: #747474;
    text-decoration: none;
}
#header-sidebar ul li a:hover {
    color: #ffffff;
    text-decoration: none;
}




/*************************
CONTENT_CONTAINER
*************************/
#content_container {
    margin-top: 8px;
    background-color: #191919;
    background-image: url('../images/bg-content.jpg');
    background-repeat: no-repeat;
    width: 830px;
    padding: 10px;
    padding-top: 13px;
	overflow: hidden;
}

/************************** 
MAIN element 
**************************/
#main {
    padding: 30px;
    padding-top: 7px;
    width: 487px;
    color: #474747;
    font-size: 0.86em;
    background-image: url('../images/bg-main.jpg');
    background-repeat: repeat-y;
    text-align: justify;
    line-height: 1.8em;
    float: left;
}

/************************** 
SIDEBAR element 
**************************/
#sidebar {
    width: 270px;
    float:right;
}



/*************************
FOOTER element
**************************/
#footer {}







/* FORMATTING ########################################### */

#main h1 {
    font-family: Georgia, "Times New Roman",  Times,  serif;
    font-weight: normal;
	padding: 0;
    font-size: 2.1em;
    text-align: left;
    text-shadow: 1px 1px 0 #ffffff;
}
#main h1 A { text-decoration: none; text-transform: none; color: #474747; }
#main h1 A:hover { color: #474747; }
#main h1 strong { color: #474747; font-weight: normal; }

#main h2 {
    font-family: Georgia, "Times New Roman",  Times,  serif;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 1.6em;
    font-weight: normal;
    text-align: left;
    text-shadow: 1px 1px 0 #ffffff;
}
#main h2.indent, #main h2.indent a  {
    font-family: Georgia, "Times New Roman",  Times,  serif;
    font-style: italic;
    border: none;
    text-indent: 30px;
    margin-bottom: 40px;
    margin-top: -10px;
    text-align: left;    
}
#main .quote {
    margin-left: 60px;
    margin-right: 60px;
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-style: italic;
}
#main h3 {
    text-align: left;    
    font-size: 0.98em;
    margin-top: 40px;
    margin-bottom: -2px;
    border-bottom: 1px solid #bbbbbb;
}
#main .entrycomment {
    margin-left: 30px;
    margin-bottom: 60px;
    font-size: 0.88em;
    font-style: italic;
}
#main .comment_number {
    font-size: 4em;
    font-weight: normal;
    font-family: Georgia, "Times New Roman",  Times,  serif;
    text-shadow: 1px 1px 0 #ffffff;
}
#main .comment_author {
    font-size: 1.2em;
}
#main h3 .date { 
    text-shadow: 1px 1px 0 #ffffff;
    color: #bbbbbb;
    padding: 4px;
    font-weight: normal;
    float: right;
    color: #bbbbbb;
    margin-left: 16px;
    margin-bottom: 2px;
    margin-top: 34px;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
}
#main h3 .date:hover {
    color: #7b7b7b;
}
#main div.entryfooter {
    margin-top: 30px;
    margin-bottom: 100px;
 	border-top: 1px solid #bbbbbb;
 	padding: 3px;
    text-shadow: 1px 1px 0 #ffffff;
    color: #bbbbbb;
}
#main div.date {
    font-family: Georgia, sans-serif;
    margin-top: -6px;
    text-shadow: 1px 1px 0 #ffffff;
    color: #bbbbbb;
}
#main div.entryfooter A {}
#main div.entry ul li {
 	font-size: 0.96em;
 	text-align:left;
}
#main div.entry p {

}
#main img.page_picture, #main img.flickr { 
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
	background-color: #ffffff;
	border: 1px solid #bbbbbb;
	text-align: center;
}
#main img.page_picture:hover, #main img.flickr:hover {

}


/*******************************
 *     KOMMENTOINTIFORMIT  
 ******************************/
#main #comment_form {
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}
#main form input {
    -moz-border-radius: 4px;
    margin: 5px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
}
#main form legend {
    -moz-border-radius: 4px;
    border: 1px solid #bbbbbb;
    padding: 5px 10px 5px 10px;
}
#main form fieldset {
    -moz-border-radius: 4px;
    border: 1px solid #bbbbbb;
}
#main form input.cb {
    margin-top: 10px;
    margin-bottom: 7px;
}
#main form textarea {
    -moz-border-radius: 4px;
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    padding: 5px;    
}
#main form input:focus, #main textarea:focus, #main input:focus:hover, #main textarea:focus:hover { 
    border: 1px solid #000000;
} 
#main form input:hover, #main textarea:hover {
    border: 1px solid #4A4A4A;
}
#main form input.button {
    margin-top: 20px;
    margin-left: 0;
    padding: 5px 10px 5px 10px;
}
#main form input.button:hover {
    background-color: #ffffff;
}
#main form #ajax_info img {
    margin-left: 7px;
}





/**************************
 *       SIDEBAR
 **************************/   

#sidebar h1 {
    font-family: Georgia, "Times New Roman",  Times,  serif;
    font-weight: normal;
	font-size: 1.2em;
	margin-top: 0;
	border-bottom: 1px solid #363636;
	margin-bottom: 0;
    padding-bottom: 2px;
}
#sidebar h2 {
    font-family: Georgia, "Times New Roman",  Times,  serif;
    font-weight: normal;
	font-size: 1.1em;
	margin-top: 10px;
}
#sidebar A {
}
#sidebar A:hover {
    text-decoration: none;
    color: #ffffff;
}
#sidebar ul {
    font-size: 0.86em;
    margin-bottom: 40px;
    margin-top: 0;
    padding:0;
}
#sidebar ul li {
    border-bottom:1px solid #363636;
    list-style-type:none;
    padding-top:10px;
    padding-bottom:10px;
    padding-left: 10px;
    *margin-left: -40px;
}
#sidebar ul li ul {
    margin-bottom: 0;
}
#sidebar div#category_cloud {
    text-align: justify;
    font-size: 0.8em;
    margin-top: 10px;
}
#sidebar div#category_cloud A { text-decoration: none;}
#sidebar span.hilight {
    font-weight: bold;
}
#sidebar span.hilight_less {
    font-weight: bold;
}
#sidebar div#lastfm_feed div ul li {

}
#sidebar img {
    margin-top: -12px;
}
#sidebar div.sidebar_box {
    margin-bottom: 40px;
}
#sidebar span.expand-icon {
    color: #7e9900;
    font-size: 1.1em;
    font-weight: bold;
}
#sidebar span.expand-icon:hover {
    cursor: pointer;
}
/* FLICKR */
#sidebar div#flickr_badge {
    margin-top: 10px;
    margin-left: 5px;
}
#sidebar div#flickr_badge a img {
    border: 0;
    margin: 5px;
}

/* Twitter */
#sidebar div#twitter_badge ul li a {
    display:block;
}
#sidebar div#twitter_badge ul li span {
    font-style: italic;
}
#sidebar div#twitter_badge ul li span a {
    display:inline;
    font-style: normal;
}

/*******************************
  GALLERY 
 ******************************/
div#gallery_footer {
 	font-size: 0.90em;
}
table#gallery {
    margin-top: 10px;
    margin-bottom: 10px;
}
img.thumb {
    padding: 5px 5px 5px 5px;
	background-color: #e6e6e6;
	border: 1px solid #000000;
	text-align: center; 
	margin: 20px;
}
a:hover img.thumb {
	border: 1px solid #e5db39;
}





/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }

  /* 
  Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it.
  Conveniently, the object tab is always in a div, so we hide all divs directly inside the replaced element.
  */
  .sIFR-flash + div[adblocktab=true], .sIFR-replaced div[style*="z-index: 65535"] { display: none !important; }
  .sIFR-replaced > div {
    display: none !important;
  }

  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
.sIFR-active #sidebar h1 {
  padding-bottom: 0;
  font-size: 1.2em;
}    
.sIFR-active #sidebar h2 {
  display: block;
  font-size: 1.2em;
}
.sIFR-active #main h1 {
  display: block;
  font-size: 2.6em;
  margin-left: -3px;
}
.sIFR-active #main h2 {
  display: block;
  font-size: 1.3em;
  font-weight: normal;
}
.sIFR-active #navi ul li {
    
}