@import url(reset.css);

/* -----------------------------------------------------------------
   Description: www.piira.se common stylesheet
   Author: Robert Piira (www.piira.se)
   Date last updated: 2010-08-17 by Robert Piira
----------------------------------------------------------------- */

body
	{
	height: 100%;
	margin: 0;
	text-align: center;
	background: #00163d url(../images/sky_bg.gif) repeat;
	/*font: 12px/160% "Lucida Grande", Helvetica, Arial, sans-serif;*/
	font-size: 12px;
	line-height: 160%;
	color: #FFF;
	min-width: 960px;
	}

html 
	{
	height: 100%;
	}	

img {display: block;}
em {color: #FFF;}

.clear {clear: both;}
.hide {display: none;}


p 
	{
	color: #DDD;
	margin-bottom: 20px;
	}
	
h1 
	{
	font: bold 200%/100% Georgia, "Palatino Linotype", Times, serif;
	padding: 0 0 8px;
	letter-spacing: -1px;
	margin-left: -2px;
	color: #FFF;
	}
	
h2 
	{
	font: 240%/110% Georgia, "Palatino Linotype", Times, serif;
	padding: 15px 0 0;
	letter-spacing: 1px;
	}

h3 
	{
	font: 11px/160% Georgia, "Palatino Linotype", Times, serif;
	padding: 0 0 18px;
	color: #9dada7;
	letter-spacing: 2px;
	text-transform: uppercase;
	}

h4 
	{
	font: bold 100%/100% Arial, Helvetica, sans-serif;
	padding: .85em 0 5px;
	color: #666666;
	}
	
a:link {color: #00669b; text-decoration: none; border-bottom: 1px dotted;}
a:visited {color: #00669b; text-decoration: none; border-bottom: 1px dotted;}
a:hover {color: #DDD; text-decoration: none; border-bottom: 1px solid;}
a:active {color: #DDD; text-decoration: none; border-bottom: 1px solid;}
	
div#wrapper 
	{
	height: auto !important;
	min-height: 100%;
	height: 100%;
	position: relative;
	width: 100%;
	background: url(../images/sky_footer.gif) no-repeat center bottom;
	}
	
div#page 
	{
	width: 920px;
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	text-align: left;
	}
	
div#header 
	{
	background: url(../images/night_sky.jpg) no-repeat center top;
	height: 318px;
	text-align: left;
	}
	
div#header div#headerContent 
	{
	width: 880px;
	height: 170px;
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
	}
	
div#header h1 
	{
	height: 60px;
	width: 252px;
	float: left;
	display: block;
	position: absolute;
	bottom: 0;
	padding: 0;
	}
	
div#header h1 a 
	{
	height: 60px;
	width: 252px;
	background: url(../images/piiradesign.gif) no-repeat left 0;
	display: block;
	border: none;
	cursor: pointer;
	text-indent: -9999px;
	}
	
.home #header h1 a { cursor: default; }
/*
div#header h1 a:hover
	{
	background-position: left -56px;
	}
*/	
div#content 
	{
	width: 920px;
	float: left;
	padding: 0 0 300px;
	position: relative;
	z-index: 30;
	margin-top: -100px;
	}

div#about 
	{
	position: relative;
	bottom: -40px;
	left: 0;
	height: 225px;
	background: url(../images/footer_border.gif) no-repeat top left;
	float: left;
	z-index: 100;
	padding: 25px 20px 0 20px;
	}
	
div#about em {
	color: #DDD;
}
		
div#about .mainColumn 
	{
	width: 485px;
	float: left;
	margin-right: 20px;
	}

div#about .mainColumn h2 
	{
	padding: 0 0 3px 0;
	}
	
div#about .secondaryColumn 
	{
	width: 375px;
	float: left;
	position: relative;
	right: -20px;
	}	
	
div#about div.secondaryColumn div#robTweet
	{
	margin-top: -30px;
	float: left;
	width: 247px;
	height: 229px;
	background: url(../images/rob_tweet.png) no-repeat top left;
	}	
	
div#footer
	{
	width: 100%;
	background: #02070f url(../images/footer_top_bg.gif) repeat-x top left;
	height: 120px;
	float: left;
	position: absolute;
	bottom: 0; left: 0;
	text-align: center;
	}
	
div#footer a
	{
	padding: 0 5px;
	border: none;
	}
	
div#footer p
	{
	width: 315px;
	margin: 0 auto;
	padding-top: 80px;
	position: relative;
	z-index: 100;
	color: #555;
	line-height: 15px;
	}
	
div#footer span
	{
	float: right;
	margin-left: 10px;
	}
	
div#footer div#boyOnTheHill
	{
	width: 512px;
	height: 234px;
	background: url(../images/boy_on_the_hill2.png) no-repeat bottom left;
	position: absolute;
	left: 0; bottom: 60px;
	z-index: 15;
	text-indent: -9999px;
	}
	
div#footer span.validCss a 
	{
	width: 44px;
	background: url(../images/valid_css.gif) no-repeat;
	}

div#footer span.validXhtml a 
	{
	width: 55px;
	background: url(../images/valid_xhtml.gif) no-repeat;
	}
	
div#footer span.validCss a, div#footer span.validXhtml a 	
	{
	height: 16px;
	display: block;
	padding: 0 !important;
	background-position: right -16px;
	text-indent: -9999px;
	}
	
div#footer span.validCss a:hover, div#footer span.validXhtml a:hover 	
	{
	background-position: right 0;
	}
	
div#footer img.lummeLeft 
	{
	position: absolute;
	left: 0; bottom: 0;
	z-index: 20;
	}

div#footer img.lummeRight
	{
	position: absolute;
	right: 0; bottom: 15px;
	}
	
div#footer img.tree
	{
	position: absolute;
	left: 0; top: -295px;
	z-index: 20;
	}
	

	
/* NAVIGATION */

ul#nav 
	{
		position: absolute;
		bottom: 0; right: 0;
		font: 140% Georgia, "Palatino Linotype", Times, serif;
		letter-spacing: 2px;
		font-variant: small-caps;
	}
	
ul#nav li
	{
		padding-left: 10px;
		float: left;
	}
	
ul#nav li a
	{
		border: none;
		color: #b7c3be;
	}
	
ul#nav li a:hover
	{
		color: #FFF;
		text-decoration: underline;
	}
	
ul#nav li a.portfolio
	{
		color: #FFF;
	}

/*
ul#nav li a.portfolio
	{
		background: url(../images/nav_portfolio.gif) no-repeat left -19px;
		width: 133px;
	}

ul#nav li a.om
	{
		background: url(../images/nav_om.gif) no-repeat left -19px;
		width: 39px;
	}
	
ul#nav li a.kontakt
	{
		background: url(../images/nav_kontakt.gif) no-repeat left -19px;
		width: 106px;
	}

body#portfolio ul#nav li a.portfolio, body#om ul#nav li a.om, body#kontakt ul#nav li a.kontakt
	{
		background-position: left 0;
		cursor: default;
	}

ul#nav li a:hover
	{
		background-position: left 0;
	}
*/

.category 
	{
	float: left;
	background: #000;
	width: 100%;
	}

.category h2, .project h3 
	{
	padding: 0 20px;
	margin: 0;
	}

.category h2 
	{
	background: url(../images/kategory_arrow.gif) no-repeat left center;
	border-right: 1px solid #1d3654;
	width: 354px;
	font-size: 12px;
	line-height: 30px;
	}

.project h3 
	{
	background: url(../images/double_line.gif) repeat-x top left;
	width: 880px;
	line-height: 40px;
	color: #FFF;
	font-size: 120%;
	padding-top: 3px;
	float: left;
	}

.project h3 span 
	{
	border-left: 1px solid #1d3654;
	float: right;
	display: block;
	width: 505px;
	text-align: right;
	color: #626f7f;
	}

.projectContent 
	{
	float: left;
	width: 920px;
	height: 350px;
	border-top: 1px solid #1d3654;
	}

.projectContent img 
	{
	float: right;
	width: 525px; 
	border-left: 1px solid #1d3654;
	padding: 0; margin: 0;
	}

.projectContent p 
	{
	font-size: 130%;
	line-height: 140%;
	padding: 40px 20px 10px 20px;
	width: 280px;
	float: left;
	}

.projectContent a.button 
	{
	display: block;
	clear: left;
	width: 145px;
	background: #364854;
	line-height: 25px;
	font-size: 13px;
	color: #FFF;
	text-align: center;
	border: none;
	margin-left: 20px;
	-moz-border-radius: 12px; -webkit-border-radius: 12px;
	}

.projectContent a.button:hover 
	{
	background: #37383b;
	}

p.copyright 
	{
	border-right: 1px solid #1d3654;
	border-top: 1px solid #1d3654;
	width: 394px;
	font-size: 11px;
	line-height: 20px;
	clear: left;
	}

h3.moreWork 
	{
	text-align: right;
	text-transform: none;
	font-size: 18px;
	padding-right: 20px;
	}


/*Twitterbox style*/
div#tweet
	{
	width: 126px;
	float: left;
	padding-top:4px;
	font-size: 90%;
	}

div#tweet .tweet_list li 
	{
	margin-bottom: 10px;
	}

div#tweet .tweet_time 
	{
	font-style: italic;
	}

p#preloader 
	{
	margin: 0;
	padding: 1em 1em 1em 3em;
	background: transparent url(../images/ajax-loader.gif) 1em center no-repeat;
	}

ul#twitter_update_list 
	{
	margin: 0;
	padding: 0 1em 0.5em 1em;
	list-style-type: none;
	}


ul#twitter_update_list li a 
	{
	/* timestamp link */
	font-family: Georgia, Palatino Linotype, Times, serif;
	font-style: italic;
	clear: left;
	display: block; 
	width: 90px;
	word-wrap: break-word;
	overflow: hidden;
	border-bottom: none;
	}


ul#twitter_update_list li span a 
	{
	/* links in tweet */
	color: #DDD;
	}


/* -----------------------------------------------------------------
   Description: www.piira.se slideFX stylesheet
   Author: Niall Doherty (http://www.ndoherty.com)
   Date last updated/modified: 2009-03-15 by Robert Piira
----------------------------------------------------------------- */
		
noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 0 0 30px 0;
	position: relative;
	width: 920px;
	height: 410px;
	float: left;
	background: url(../images/panelbg.gif) no-repeat top left;
}

div.wrapper p {
	width: 280px; 
	text-align: justify; 
	text-justify: inter-word;
}

div.wrapper span a {
	border: none;
	width: 100px;
	background: #364854 url(../images/visit_site.png) no-repeat right -5px;
	padding: 0 25px 0 0;
	line-height: 25px;
	display: block;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	color: #99b6c3;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
}

div.wrapper span a:hover {
	background: #37383b url(../images/visit_site.png) no-repeat right -40px;
	color: #DDD;
}

div.wrapper img {
	width: 354px; float: left; padding-right: 95px;
}

div.wrapper div {
	float: left; width: 280px; margin-bottom: 300px;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 920px; height: 410px; overflow: hidden; overflow-x: hidden;}
.csw .loading {margin: 200px 0 250px 0; text-align: center}
.csw img {padding-bottom: 50px; margin: -30px auto 0 auto;}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 920px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 410px;
	clear: both;
	
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	height: 410px;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 360px;
	position: relative;
	width: 920px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 40px 95px 0;
	height: 320px;
	overflow: hidden;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
	/*
	position: absolute;
	left: 50%;
	bottom: 15px;
	*/
	position: relative;
	top: -35px;
	z-index: 100;
	min-width: 1px; /* ie7 fix? */
}

.stripNav ul li {
	float: left;
	margin-right: 8px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 20px;
	width: 20px;
	background: #37383b;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0;
	border: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.stripNav li a:hover {
	background: #364854;
}

.stripNav li a.current {
	background: #9dada7;
	color: #37383b;
	cursor: default;
}

.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;
	bottom: 9px;
	text-indent: -9000em;
	z-index: 50;
}

.stripNavL a, .stripNavR a {
	display: block;
	height: 32px;
	width: 32px;
	border: none;
}

.stripNavL {
	left: 15px;
}

.stripNavR {
	right: 15px;
}

.stripNavL a {
	background: url("../images/arrow-left.gif") no-repeat;
}

.stripNavR a {
	background: url("../images/arrow-right.gif") no-repeat;
}

.stripNavR a, .stripNavL a {
	background-position: left -32px;
	}
	
	.stripNavR a:hover, .stripNavL a:hover {
	background-position: left 0;
	}
	
	
	
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 110;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 120;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none; border: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	/*zoom: 1;*/
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
	border: none;
}