/* - - - - - - - - - - - - - - - - - - - - -
 Title: Harmony
 Author: Marko Wallin
 URL: http://verteksi.net/
- - - - - - - - - - - - - - - - - - - - - */

/* =Basic and Layout Defitions

puna: #970418
tumman puna: #601429
turkoosi: #148AC4
keltainen: #FFD801
----------------------------------------------- */

@import "library.css";

/* =Base
----------------------------------------------- */
body {
 	background: #eee;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
}

html, body {
	height: 100%;
}

@font-face {
  font-family: 'JunctionCustom';
  /*src: url('Junction_01.eot');*/
  src: local('Junction'), local('Junction'), 
         url('../fonts/Junction_01.otf') format('opentype');

}

/* =Headings 
----------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	color: #000;
}

h1, h2, h3 {
	font-family: "JunctionCustom", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 2em;
	letter-spacing: 1px;
}

h2 {
	font-size: 1.8em;
	padding: 20px 0 0 0;

	text-shadow: 1px 1px 1px #ccc;
	/*text-shadow: 0 0 3px #999;*/
}

h3 {
	font-size: 1.4em;
	padding: 10px 0 0 0;
}

h4 {
}

h1 a:link, h1 a:visited, h1 a:hover,
h2 a:link, h2 a:visited, h2 a:hover,
h3 a:link, h3 a:visited, h3 a:hover {color: #970418;}

h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus {color: #601429;}

#header h1 a:link, #header h1 a:visited, #header h1 a:hover,
#header h2 a:link, #header h2 a:visited, #header h2 a:hover {color: #601429;}

#header h1 {
	font-size: 3em;
	letter-spacing: 2px;
	line-height: 1em;
	margin: 0;
	border-bottom: 0;
	
	text-shadow: 0 0 5px #999;
}

#header h1 a, #header h1 a:link, #header h1 a:visited {text-decoration: none;color: #970418;}
#header h1 a:focus, #header h1 a:hover, #header h1 a:active {text-decoration: none;color: #601429;}

#secondaryContent h2 {color: #333;}

#secondaryContent h2 a:link, #secondaryContent h2 a:visited, #secondaryContent h2 a:hover {color: #555;}

.post h2 a:hover,.post h3 a:hover {text-decoration: none;}

/* =Paragraphs
----------------------------------------------- */
.description {color: #222;}

/* =Code
----------------------------------------------- */
pre {
	overflow: auto;
	line-height: 1.2em;
	background: #ddd;
	color: #999;
	padding: 5px;
}

code {
	background: #fefefe;
}

ol.code {
 	margin: 0 .5em 0 .5em;
	overflow: auto;
	list-style-type: decimal-leading-zero;
}


/* =Lists
----------------------------------------------- */
ol {list-style: decimal;}

/* =Links 
----------------------------------------------- */
a, a:link, a:focus, a:hover, a:active, a:visited {
	text-decoration: none;
	color: #970418; /*#789048;*/
}

a:focus, a:hover, a:active {
	text-decoration: underline;
	color: #148AC4;
}

a:visited {color: #601429;}


/* =Definitions
----------------------------------------------- */
dl {margin: .5em 0 .5em 0;}
dl dl {margin-left: .75em;margin: .25em 0 .5em 0;}
dt {
	font-size: 1.2em;
	border-bottom: 1px dotted #555;
	margin: .5em 0 .5em 0;
}

dd {margin: 0px 0 5px 5px;}
dd dd {}
li dd {}

blockquote {color: #1f1f1f;}

/* =ids
----------------------------------------------- */
#page  {}

#topborder {
	position: fixed;
	top: 0;
	width: 100%;
    border-top: 5px solid #601429;
}

#container {
	margin: 0 auto;
	width: 925px;
}

#header {
	text-align: right;
	padding: 10px 0 0 0;
}

#headerContent {
	padding: 10px 0 0 0;
	margin: 0 auto; 
    width: 925px; 
}

#content {
	margin-bottom: 25px;
	padding: 0 5px 0 15px;
	background: #ececec;
	
	border: 1px dotted #ddd;
	-webkit-border-radius: 10px;-moz-border-radius: 10px;
}

#navigation {
    text-align: center;
    width: 100%;
/*    background: #ddd;*/
    clear: both;
    padding: 0 0 45px 0;
}

#search {float: right;}

#primaryContent {
	float: left;
	width: 612px;
	padding: 20px 28px 10px 0;
	border-right: 1px dotted #ddd;

	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#secondaryContent {
	float: left;
	width: 222px;
	padding: 8px 15px 10px 15px;
	margin: 0 0 10px 5px;
	font-size: 0.9em;
}

#footer {
	width: 100%;
	text-align: center;
	clear: both;
	color: #555;
	padding-top: 7px;
/*	border: 1px dotted #ccc;
	border-bottom: 0;*/
	font-size: 0.8em;
	
/*	background: #414141;*/
}

#footerContent { margin: 0 auto; text-align: left; width: 925px;}

/* =Navigation
----------------------------------------------- */
#navigationContent {
    text-align: left;
    float: left;
}

#navigation li {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0 10px 0 0;
/*	width: 120px;*/
	text-align: center;
}

#navigation a, 
#navigation a:link, 
#navigation a:visited {
	display: block; 
	color: #222;
	text-decoration: none;
	padding: 5px 15px 9px 15px;
	border: 1px dotted #eee;
}

#navigation a:hover {
/*	background: #ccc; border: 1px solid #148AC4; border-bottom: 0;*/
	background: #ececec;
	border: 1px dotted #ddd;
	-webkit-border-radius: 5px;-moz-border-radius: 5px;
}

#home #nav-home, #blog #nav-blog,
#archive #nav-arch, #portfolio #nav-port,
#lab #nav-lab, 
#info #nav-info {
background: #eee; border-bottom: 2px solid #148AC4;
-webkit-border-radius: 5px;-moz-border-radius: 5px;
}

#home #nav-home a, #blog #nav-blog a,
#archive #nav-arch a, #portfolio #nav-port a,
#site #nav-site a {

}

/* =Footer
----------------------------------------------- */
.blank,.blank a,.blank a:link,.blank a:visited,.blank a:hover {color: #111;}

/* =Content
----------------------------------------------- */
.title {
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
	font-size: 2em;
	border-bottom: 0;
	margin: 0 0 0 0;
	padding: 0;
}

#secondaryContent, #secondaryContent a, #secondaryContent a:link {color: #333;}
#secondaryContent a:focus, #secondaryContent a:hover, #secondaryContent a:active {color: #111}

/* =Classes
----------------------------------------------- */
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
.trans_box { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../images/tr_g.png');}

/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box[class] {background-image:url(../images/tr_g.png);}

.description {margin-top: 7px;}

#infoBox {padding-top: 15px;}

#infoBox a, 
#infoBox a:link,
#infoBox a:visited,
#infoBox a:hover {
    color: #601429;
}

.top-link {
	background: url('../images/icons/arrow.up.g.gif') left top repeat-x;
	margin-top: 3px;
	width: 14px;
	height: 20px;
/*	float: left;*/
/*	clear: both;*/
	display: block;
}

.sidebarBox {padding: 0; margin: 0;}
.sidebarBox ul, .bottomBox ul {list-style-type: none;margin: 0;padding: 0;}
.sidebarBox ul ul {margin: 5px 0 15px 0;}
.sidebarBox ul ul li {margin: 2px 0px 2px 0px;font-size: 1.1em;}

.bottomBox {width: 100%; clear: both; margin: 5px; margin-bottom: 1em; font-size: 1.2em;}
.bottomBox li {	float: left; padding: 0 5px; border-right: 1px dotted #ccc;}
.bottomBox h2 { font-size: 1.1em; border: 0; margin: 0; padding: 0; margin-top: 1em;}
.bottomBox a, .bottomBox a:link, .bottomBox a:focus, .bottomBox a:hover, .bottomBox a:active {color: #555;}
.bottomBox a:hover {
	-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);
}

/* =Footer hack
----------------------------------------------- */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 0 -130px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {height: 120px; /* .push must be the same height as .footer */}

/* Google RSS
----------------------------------------------- */
.googleBox h3 {display: none;}
.googleBox li {border-bottom: 1px dotted #ccc; padding-bottom: 5px;}
.paddedlist li {margin-bottom: 0.5em;}

/* =Blog specific defitions
----------------------------------------------- */
.reminder {border: 1px solid #555; background: #333; color: #fff; padding: 5px; margin-bottom: 10px;}
.reminder a, .reminder a:link, .reminder a:visited, .reminder a:focus, .reminder a:hover {color: #148AC4;} 

/* =Form
----------------------------------------------- */
input {background: #eee; border: 1px solid #999;}

.search {text-align: center;}
.search input#s {margin-top: 10px; width: 180px; border: 0; border-bottom: 1px dotted #ddd;}
.search input#t {border: 0; border-bottom: 1px solid #eee; margin-left: 10px;}
.search input#t:hover {border-bottom: 1px dotted #ddd;}

.buttons {
	margin: 2px 10px 0 5px;
	padding: 0;
	list-style: none;
/*	clear: both;*/
}

.buttons li {
	float: left;
	text-align: center;
	padding: 0 3px;
}

.buttons li img {
	margin-bottom: 0.25em;
	padding: 0;
}

.post {
	margin-bottom: 3em;
}

.posttitle {
	font-size: 1.6em;
	/*border-bottom: 2px dotted #789048;*/
}

.postentry {
	clear: both;
	word-wrap: break-word;
}

.relatedposts h3 {
	padding-top: 1em;
	font-size: 1.2em;
	border-bottom: 1px dotted #ccc;
	line-height: 1.3em;
	margin-bottom: 0em;
}

/* =Post meta
----------------------------------------------- */
.postmeta,
.postmeta a,
.postmeta a:link,
.postmeta a:visited {
	color: #777;
}

.postmeta li {
	list-style: none;
	float: left;
	padding-right: 5px;
}

.postdate {
	border-bottom: 1px dotted #ddd;
	text-align: right;
	color: #777;
}

.postmeta .tags {
	background: url('../images/icons/1/tags-hg.gif') left 50% no-repeat;
	padding: 0 5px 0 18px;
}

.postmeta .comments {
	background: url('../images/icons/1/comments-hg.gif') left 50% no-repeat;
	padding: 0 10px 0 23px;
}

.postmeta .edit {
	font-size: 0.9em;
	padding-top: 2px;
	float: right;
	
}

.postmetadata {
	font-size: 0.9em;
	/*border-top: 1px dotted #aaa;*/
}

/* =Misc
----------------------------------------------- */
.next-prev {
	font-size: 1.1em;
	line-height: 1.4em;
	margin: 0 0 15px 0;
	padding-top: 10px;
}

.next-prev .prev {float: left;}
.next-prev .next {float: right;}

.more {float: right;}
.more-link {text-align: right;clear: both;padding: 0;margin: -1em 0 1em 0;}

.toggle {
	border-bottom: 1px dotted #ddd;
	background: url(../images/text_block.png) 0% 50% no-repeat;
	padding: 5px 0 0 20px;
	margin-top: 15px;
}
h3.toggle:hover {
	cursor: pointer;
}

/* =Comments
----------------------------------------------- */
h3#comments {line-height: 1.3em;}

.comment-title {
	float: left;
}

.comment-meta {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.comment-header {
	display: block;
	border-bottom: 1px dotted #aaa;
	padding: 5px 5px 0 5px;
	margin-bottom: 5px;
}

ul.commentlist {
	padding: 0;
	margin: 0;
}

.commentlist li {
	list-style: none;
	margin-bottom: 10px;
	padding: 5px;
}

.commentlist p,
.commentlist pre {
	margin-left: 45px;
	margin-right: 5px;
}

.commentlist li.odd {
	background: #ccc;
}

.commentlist li.author {
	background: #ddd;
}
li.author .comment-header {
	border-left: 0;
	border-right: 0;
}

li.bypostauthor {
	border: 1px dotted #aaa;
}

.commentnumber {
	color: #999;
	font-size: 2.7em;
	margin: 0;
	padding: 0;
	float: right;
}
/* =Identicon
----------------------------------------------- */
.avatar {float: left;margin-right: 10px;}
.identicon {}
.preview-identicon {}

/* =Wordpress Hacks
----------------------------------------------- */
img#wpstats {width:0px;height:0px;padding:0px;border:none;overflow:hidden}
#akismetstats {display: none;}

/* =Link Indication plugin
----------------------------------------------- */
a.liexternal { padding-right: 8px; background: url("../images/link-icon/link-icon_external_16.gif") no-repeat right; }
a.liwikipedia { padding: 0px 14px 3px 0; background: url("../images/link-icon/link-icon_wikipedia_02.gif") no-repeat right; }
a.liimdb { padding-right: 18px; background: url("../images/link-icon/link-icon_imdb_01.png") no-repeat right; }
a.liftp { padding-right: 13px; background: url("../images/link-icon/link-icon_ftp_02.gif") no-repeat right; }
a.limailto { padding-right: 18px; background: url("../images/link-icon/link-icon_mail_02.gif") no-repeat right; }
a.lipdf { padding-right: 18px; background: url("../images/link-icon/link-icon_pdf_01.png") no-repeat right;  }

/* =Widgets
----------------------------------------------- */
.widget_recent_entries ul li a:hover,
.widget_links ul li a:hover,
.widget_recent_comments ul li a:hover,
.bestof_links ul li a:hover {
	background: #ccc;
}

#recentcomments li {
	display: block;
	padding: 5px;
	border-right: 1px dotted #ccc;
	margin-right: 1em;

	width: 170px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 160px;
}

.widget_recent_entries ul li a,
.widget_links ul li a,
.widget_recent_comments ul li a,
.bestof_links ul li a {
	display: block;
	padding: 2px 2px 2px 2px;
	margin-bottom: 5px;
}

.widget_recent_comments ul li a { padding: 0 2px; margin-bottom: 0;}

.widget_recent_entries ul li a,
.widget_links ul li a,
.bestof_links ul li a {
	width: 200px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 190px;
}

	html>body .widget_recent_entries ul li a,
	html>body .widget_links ul li a,
	html>body .bestof_links ul li a {
		width: 200px;
	}

#bestof_links {	margin-bottom: 2em; }

/* =Sideblog
----------------------------------------------- */
.widget_sideblog ul {font-size: 1.0em;}
.widget_sideblog ul ul {font-size: 0.9em;}
.widget_sideblog li a:hover {background: #ccc;}
.widget_sideblog li {color: #7f7f7f;}
.widget_sideblog ul ul li {padding-bottom: 5px;}
.widget_sideblog li {list-style: none;}
.widget_sideblog ul ul li a {display: block;}
.widget_sideblog .link {}
.widget_sideblog .extended {border-top: 1px dotted #ccc;}

/* =tag_cloud
----------------------------------------------- */
.tag_cloud {clear: both; padding-top: 20px;}
.tag_cloud a:after {content: ', ';}
.tag_cloud a,.tag_cloud a:link,.tag_cloud a:visited,.tag_cloud a:hover {color: #999;}
.tag_cloud ul,.tag_cloud ul li,.tag_cloud ul li ul,.tag_cloud ul ul li {margin: 0;padding: 0;list-style: none;float: left;}
.tag_cloud ul ul li a {display: inline;padding: 0 3px 0 0;}

/* =tag-archive
----------------------------------------------- */
#excerpts {}
#excerpts dl, #excerpts dt, #excerpts dd {padding: 0;	margin: 0;}
#excerpts dt a, #excerpts dt a:link, #excerpts dt a:visited, #excerpts dt a:hover {
	font-weight: normal; font-size: 1.0em;
}
#excerpts dd.category a, #excerpts dd.category a:link, #excerpts dd.category a:visited,
#excerpts dd.comments a, #excerpts dd.comments a:link, #excerpts dd.comments a:visited {color: #555; font-size: 0.9em;}
#excerpts dd.excerpt {clear: both;padding-top: 5px;}
#excerpts dd.date,#excerpts dd.category,#excerpts dd.comments {float: left;padding: 2px;color: #555; font-size: 0.9em;}
#excerpts dd.date {background: url('../images/icons/1/date-hg.gif') left 50% no-repeat;padding: 0 10px 0 18px;}
#excerpts dd.category {background: url('../images/icons/1/category-hg.gif') left 50% no-repeat;padding: 0 10px 0 18px;}
#excerpts dd.comments {background: url('../images/icons/1/comments-hg.gif') left 50% no-repeat;padding: 0 10px 0 23px;}

/* =Wordpress media alignment
----------------------------------------------- */
.aligncenter,
div.aligncenter,
img.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 4px;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	/* optional rounded corners for browsers that support it */
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}