/*
	pinjaschonberg.net main css stylesheet
	Pontus Schönberg, 2009, 2015
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

body {
	color: #fff;
	background-color: #000;
	font-size: small;
	font-family: verdana, arial, sans-serif;
	/*background: url(../pics/top-bkg2.jpg);*/
}

@media (max-width: 839px) {

	#top, #top-bkg, #top-glow, #top-lights, #header, #pinja, .social {
		display: none;
	}

	#leftside {
		position: absolute;
		top: 0;
		width: 96%;
		background: url(../pics/top-bkg2.jpg);
		padding: 10px 2% 10px 2%;
		border-bottom: 4px solid #A9007E;
		z-index: 10;
	}

	#lang {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	#menu ul li {
		float: none;
	}
	#menu ul .menubutton {
		display: block;
		color: #f77c01;
		font-size: 3em;
	}
	#menu ul li li {
		padding: 0.2em 1em 0.2em -1em;
	}

	#menu li li.current, #menu li li.loading {
		color: #f77c01;
		transition: color 0.5s;
		-webkit-transition: color 0.5s;
	}

	#menu ul li li {
		display: none;
	}
	#menu ul li:hover li {
		display: block;
	}

	#page {
		position: absolute;
		top: 6em;
		padding: 10px;
		z-index: 1;
	}

	#footer {
		display: none;
		visibility: hidden;
		height: 0;
	}

	blockquote {
		font-style: italic;
	}

	blockquote + p {
		font-weight: bold;
	}

	#content > ul > li:nth-child(odd) {
		background-color: #111;
	}

}
/* --------------- End mobile config -------------------------- */

@media (min-width: 840px) {
	#menu .menubutton {
		display: none;
		visibility: hidden;
		border: 0;
		cursor: pointer;
	}

	#top {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 200px;
		background: url(../pics/top.png) repeat-x;
		z-index: 61;
	}

	#top-bkg {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 170px;
		background: url(../pics/top-bkg.jpg);
		z-index: 60;
	}

	#top-glow {
		position: fixed;
		top: 0px;
		left: 50%;
		width: 700px;
		height: 200px;
		margin-left: -350px;
		background: url(../pics/top-glow.png) no-repeat;
		z-index: 61;
	}

	#top-lights {
		position: fixed;
		top: 0px;
		left: 12%;
		right: 0;
		margin-left: 540px;
		height: 164px;
		background: url(../pics/lights.png) repeat-x;
		z-index: 62;
	}

	#header {
		position: fixed;
		top: 20px;
		left: 12%;
		margin-left: 180px;
		width: 371px;
		height: 200px;
		background: url(../pics/header.png) no-repeat;
		z-index: 63;
	}

	#pinja {
		position: fixed;
		top: -90px;
		left: 12%;
		width: 360px;
		height: 612px;
		margin-left: -102px;
		background: url(../pics/pinja.png) no-repeat;
		z-index: 64;
	}

	#leftside {
		position: fixed;
		top: 250px;
		bottom: 20px;
		left: 12%;
		width: 160px;
		padding: 0px 19px 0px 30px;
		border-right: 1px solid #444;
		z-index: 80;
	}


	#page {
		position: absolute;
		top: 170px;
		bottom: 0px;
		left: 12%;
		right: 12%;
		max-width: 1200px;
		background: #111 url(../pics/content.png) no-repeat fixed  50% 170px;
		z-index: 50;
		border-left: 1px solid #222;
		border-right: 1px solid #222;
		overflow: auto;
	}

	#content {
		position: absolute;
		top: 80px;
		right: 0px;
		left: 200px;
		padding: 0px 30px 20px 30px;
		z-index: 81;
	}


	#leftside-content {
		padding-top: 20px;
		z-index: 83;
	}

	#menu { z-index: 81; }

	#lang {
		padding-top: 20px;
		z-index: 82;
	}

	.social {
		display: block;
		width: 40px;
		height: 40px;
		/*margin: 10px 8px;*/
		border-radius: 6px;
		border: 1px solid #aaa;
		background: #000;
		fill: #aaa;
		/*stroke: rgba(255,255,255,0.6);*/
		transition: background 0.5s, fill 0.5s;
		-webkit-transition: background 0.5s, fill 0.5s;
	}
	.social:hover {
		background: #45619D;
		border: 1px solid #fff;
		fill: #fff;
	}
	.social img {
		width: 40px;
		height: 40px;
	}

	#footer {
		position: absolute;
		bottom: 0px;
		margin-bottom: -20px;
		font-size: 7px;
		color: #444;
	}

	#footer a, #footer a:visited {color: #444;}
	#footer a:hover {color: #666;}

	blockquote {
		display: block;
		padding: 40px 60px 0px 60px;
		width: 400px;
		margin-left: 40px;
		margin-bottom: 0px;
		font-size: 1.1em;
		font-style: italic;
	}

	blockquote:before, blockquote:after {
		color: #ff00ff;
		display: block;
		font-size: 7em;
		width: 50px;
		font-style: normal;
		font-family: Bitstream Vera, Times New Roman, serif;
	}

	blockquote:before {
	/*	content: open-quote;*/
		content: "\201c";
		height: 0;
		margin-left: -0.55em;
		margin-top: -0.6em;
		margin-bottom: 0.2em;
	}

	blockquote:after {
	/*	content: close-quote;*/
		content: "\201e";
		height: 50px;
		margin-top: -1.5em;
		margin-left: 400px;
		margin-bottom: 0.6em;
	}

	blockquote + p {
		padding: 0px 60px 0px 60px;
		width: 400px;
		margin-top: 7em;
		margin-left: 40px;
		margin-bottom: 30px;
		font-weight: bold;
		font-style: italic;
		font-size: 1.1em;
	/*	font-family: Bitstream Vera Sans, verdana, arial, sans-serif;*/
	}

	#content > ul > li:nth-child(odd) {
		background-color: rgba(255,255,255, 0.03);
	}

}
/* ------------------- End full-size config ------------------------- */

#lang img {padding: 4px;}

#leftside-content p {
	font-size: 1em;
}

#leftside-content a {
	color: #fff;
}
#leftside-content a:hover {color: #ff00ff;}

#menu ul { list-style: none;}
#menu a {
	text-decoration: none;
	color: #f44800;
}
#menu li li {
	display: block;
	width: 160px;
	text-decoration: none;
	font-size: 1.8em;
	font-weight: bold;
	color: #f44800;
}
#menu a:hover {color: #ff00ff;}
#menu .current, #menu .loading {
	font-size: 1.8em;
	font-weight: bold;
	color: #f77c01;
	transition: color 0.5s;
	-webkit-transition: color 0.5s;
}




h1 {
	font-size: 1.8em;
	color: #f44800;
	margin-bottom: 0.4em;
	text-transform: uppercase;
}

h2 {
	font-size: 1.4em;
	color: #ff00ff;
	margin-bottom: 0.4em;
}

p {
	margin-bottom: 1em;
	line-height: 1.5em;
	font-size: 1.2em;
}

#content ul {
	margin-left: 20px;
	margin-bottom: 1em;
	line-height: 1.5em;
	font-size: 1.2em;
}

.ing, h3 {
	font-size: 1.4em;
	font-style: italic;
	margin-bottom: 1em;
}


.videoplayer {
	width: 560px;
	margin: 20px auto 20px auto;
	clear: both;
	border: 1px solid #666;
}

#content .name {
	font-weight: bold;
}

#content a {
	color: #ffbf7f;
	text-decoration: none;
}
#content a:hover {color: #ff00ff;}


#content img {
	float: right;
	clear: right;
	/* border: 1px solid #666; */
	margin: 6px 6px 6px 12px;
}

#content .box {
	margin: 15px 320px 20px auto;
	height: 150px;
	padding: 20px;
	padding-top: 30px;
	background: #111 url(../pics/top-bkg2.jpg);
	border: 1px solid #666;
	text-align: center;
	font-size: 0.9em;
}

/* CV style: */

#content ul {
	font-size: 1em;
	margin: 20px 0 10px 0;
}
#content ul, #content ul ul {
	list-style: none;
}

#content > ul > li {
	padding: 0.5em;
}

#content ul ul {
	margin-top: -1.5em;
	/*margin-bottom: 20px;*/

}

#content ul ul li {
	margin-left: 12.5em;
}



/* end CV style */



.gallery {
	clear: both;
	text-align: center;
}

#content .gallery img {
	float: none;
	clear: none;
	margin: 2px;
	border: 1px solid #666;
}

#content .gallery img:hover {
	border: 1px solid #ff00ff;
}

.red { color: #ff0000 !important;}