/*
    AUTHOR: JERE SALONEN
            me@jeresalonen.com
*/

/* ------------------------------------------ */
/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
/* ------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica Neue, Helvetica, Arial, sans-serif; padding: 0px;}
ul, li { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; text-decoration: none; color: #999999;}
a img { border: none;}
h1, .h1 {text-transform: uppercase; color: #FFFFFF; font-size: 3.5em; font-weight: bold;}
h2 {font-size: 2.2em;}
.h1:hover {background-color: #FFFFFF;}
/* END RESET */

/* ------------------------------------------ */
/* COLOR SCHEMES */
/* ------------------------------------------ */
div.color1 {background-color: #FF00B3;}
a.h1-color1:hover {color: #FF00B3}
p.color1 {color: #FF00B3;}
.color1 a, a.color1, input.color1, textarea.color1 {color: #FFFFFF; background-color: #FF00B3; text-decoration: none;}
.color1 a:hover, a.color1:hover, #submit.color1:hover, span.color1 {color: #FF00B3; background-color: #FFFFFF;}



div.color2 {background-color: #00A2FF;}
a.h1-color2:hover {color: #00A2FF}
p.color2 {color: #00A2FF;}
.color2 a, a.color2, input.color2, textarea.color2 {color: #FFFFFF; background-color: #00A2FF; text-decoration: none;}
.color2 a:hover, a.color2:hover, #submit.color2:hover, span.color2 {color: #00A2FF; background-color: #FFFFFF;}

div.color3 {background-color: #00E500;}
a.h1-color3:hover {color: #00E500}
p.color3 {color: #00E500;}
.color3 a, a.color3, input.color3, textarea.color3 {color: #FFFFFF; background-color: #00E500; text-decoration: none;}
.color3 a:hover, a.color3:hover, #submit.color3:hover, span.color3 {color: #00E500; background-color: #FFFFFF; }

#submit.color1:active, #submit.color2:active, #submit.color3:active {color: #FFFFFF;}

/* ------------------------------------------ */
/* TOOLBOX CSS */
/* ------------------------------------------ */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.transpBlack { background: url(transpBlack.png); }
.error {color: red;}
.none {display: none;}
.hidden {visibility: hidden;}

/* END TOOLBOX */

/* ------------------------------------------ */
/* PAGE STRUCTURE */
/* ------------------------------------------ */
#page-wrap {width: 900px; height: 100%; margin: 0 auto; background-color: #FFFFFF; padding: 20px; border-left: 1px solid #999999; border-right: 1px solid #999999;}

#header {padding-bottom: 20px;}

#content {width: 575px; float: left;}
	.post-wrap-all {padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px dashed #D1D1D1;}
	.post-wrap {padding-bottom: 5px; margin-bottom: 25px; border-bottom: 1px dashed #D1D1D1;}
	.post-time {text-transform: uppercase; color: #D1D1D1; letter-spacing: 0.2em; float: left;}
	.post-by {text-transform: uppercase; color: #D1D1D1; letter-spacing: 0.2em; float: right;}
	.post-by a:hover {color: #000000; background-color: #FFFF32;}
	.post-heading {padding: 5px 5px 5px 5px; margin: 5px 0px 20px 0px;}
	.images {padding-bottom: 25px;}
	.images a {font-size: 1.7em; width: 30px; height: 25px; margin: 5px 5px 0px 0px; padding-top: 4px; text-align: center;}

	.post object {padding-bottom: 20px; text-align: center; margin: 0 auto; width: 100%;}
	.post p {line-height: 1.8em; font-size: 1.3em; text-align: justify;}
	.post-comment a {text-transform: uppercase; letter-spacing: 0.2em; padding: 1px;}
	.post-comment a:hover {background-color: #FFFF32; color:#000000;}
	
	.facebook {opacity: 0.65; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";}
	.post-wrap .facebook {height: 25px;}
	.post-wrap-all .facebook {height: 21px; overflow: hidden; position: relative; top: 5px; left: 5px; display: inline;}
	
	.pages {letter-spacing: 0.2em; text-transform: uppercase;}
	.pages:hover {color: #000000; background-color: #FFFF32;}
	
	.comments {color: #D1D1D1; font-size: 1.3em; line-height: 1.3em; letter-spacing: 0.2em;}
	.comments .name {text-transform: uppercase;}
	.comments a {color: #999999;}
	.comments a:hover {color: #000000; background-color: #FFFF32;}	
	span.time {font-size: 10px; padding-left: 1em;}
	.comments p {}
	.comment {margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px dashed #D1D1D1; }
	
	#comment-error {font-size: 12px;}
	#comment-box {padding: 0px 5px 20px 0px; }
	#comment-box li {padding: 5px 5px 5px 0px;}
	#comment-box input, #comment-box textarea, #comment-box span {width: 100%; font-size: 18px; border: none; padding: 5px;}
	#comment-box textarea {height: 103px; margin-bottom: 5px; padding: 5px;}
	#submit, .submit {font-size: 30px !important; padding: 5px !important; font-weight: bold; width: auto !important; text-align: left;}

#extras {width: 275px; float: right;}

	#info-wrap {background-color: #FFFF32; margin-bottom: 25px; text-transform: uppercase; padding: 12px;  position: relative;}	
	#info-wrap p {color: #000000; font-size: 1.3em; font-weight: bold;}
	#info-wrap a {color: #000000; background-color: #ffffff;}
	#info-wrap a:hover {background-color: #000000; color: #FFFFFF;}
	.rss-icon {background-color: #FFFF32 !important;}
	#admin-logged .rss {position: relative; top: 2px;}
	
	#admin-login, #logout {}
	#logout {font-size: 1.3em; font-weight: bold;}
	span.login {font-size: 1.3em; font-weight: bold; text-transform: uppercase;}
	#admin-login .error {font-size: 10px; text-transform: none;}
	#login-form input {margin-bottom: 10px; background-color: #FFFFFF; border: none; font-weight: bold; font-size: 1.3em;}
	#login-submit {padding: 5px; margin-top: 10px; text-transform: uppercase; font-weight: bold;}
	#login-submit:hover {background-color: #000000; color: #FFFFFF;}
	#cancel-login {padding: 5px; font-size: 1.3em; font-weight: bold;}

	.extra {padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px dashed #D1D1D1;}
	.extra-heading {text-transform: uppercase; color: #D1D1D1; letter-spacing: 0.2em;}	
	ul {padding-top: 1em;}
	li {font-size: 1.2em; line-height: 1.8em;}
	
	.mint {color: #FF00B3; text-decoration: none;}
	a.mint  {}
	.upper {text-transform: uppercase;}
	.desc {font-style: italic;}
	a.mint:hover {color: #FFFFFF; background-color: #FF00B3;}

	.filter {color: #00A2FF; text-decoration: none;}
	a.filter:hover, a.filter-s {color: #FFFFFF; background-color: #00A2FF;}
	
	
	.tags {color: #00E500; text-decoration: none;}
	a.tags:hover, a.tags-s {color: #FFFFFF; background-color: #00E500;}


	.archives {color: #FF00B3; text-decoration: none;}
	a.archives:hover, a.archives-s {color: #FFFFFF; background-color: #FF00B3;}
	

/* ------------------------------------------ */
/* SLIDESHOW */
/* ------------------------------------------ */		
	
#slideshow {position:relative; height:256px;}
#slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
#slideshow IMG.active {z-index:10; opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}
	
/* ------------------------------------------ */
/* ADMIN */
/* ------------------------------------------ */	

.edit-buttons {text-align: right; padding-bottom: 20px;}
.edit-buttons a {text-transform: uppercase;}
.edit-buttons a:hover {background-color: #FFFF32; color: #000000;}

#admin-content {background-color: #FFFF32; padding: 0px 30px 20px 20px; width: 525px; float: left;}
#admin-content li {color: #000000; font-size: 1.3em; font-weight: bold; text-transform: uppercase; padding-bottom: 10px;}
.blog-form input {width: 100%; font-size: 18px; border: none; padding: 5px; background-color: #FFFFFF; text-decoration: none;}
#admin-content a {color: #000000; padding: 0px 2px 0px 2px; background-color: #FFFF32;}
#admin-content a.selected, #admin-content a:hover {color: #FFFFFF; background-color: #000000;}
#admin-content textarea {width: 100%; font-size: 12px; border: none; background-color: #FFFFFF; text-decoration: none;}
#admin-content .submit:hover {color: #FFFFFF; background-color: #000000; }

#directions {padding: 10px; color: #FFFFFF; font-size: 12px;}

a.upload {margin-bottom: 10px; color: #000000; font-size: 1.3em; font-weight: bold; text-transform: uppercase; padding: 0px 2px 0px 2px; background-color: #FFFF32;}
#uploadify-queue {margin-top: 10px; min-height: 100px;}

#uploaded-images {color: #000000; text-transform: uppercase; padding-top: 10px;}
.image-form input {font-size: 18px; border: none; padding: 5px; background-color: #FFFFFF; text-decoration: none;}
.image-preview {padding: 10px; position: relative; height: 110px; background-color: #FFFF32;}
.image-preview span.image {position: absolute; left: 0px; top: 10px; width: 100px; text-align: center;}
.image-preview span.image-info {position: absolute; left: 120px; top: 10px;}

.image-preview input {width: 400px; border: none; padding: 5px; margin-top: 5px;}

/* END STRUCTURE */