/* default.css */
/* Taso */
/* Zinclair */

@font-face {
    font-family: "SF_Movie_Poster_Bold";
    src: local("SF_Movie_Poster_Bold"), local(SF_Movie_Poster_Bold), url(fonts/SF_Movie_Poster_Bold.ttf);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "bahnschrift";
    src: local("bahnschrift"), local(bahnschrift), url(fonts/bahnschrift.ttf);
    font-weight: 400;
    font-style: normal;
}







/*---- Basics ----*/

* {	
	text-decoration: none;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
	outline: 0;
	font-style: normal;
	border: none;
	color: hsl(20,0%,80%);
}

html {
	overflow-y: scroll;
	min-height: 100%; }

body {
	margin: 10px auto 10px auto;
	font-family: Helvetica, Arial, SunSans-Regular, sans-serif;
	/*font-family: Georgia, "Times New Roman", Times, serif;*/
	font-size: 100%;
	font-weight: normal;
	line-height: 1.4;
	/*letter-spacing: 0.02em;
	word-spacing: 0.02em;*/
	max-width: 600px;
	background-color: black;
	background: black url(bgr1.gif) center top no-repeat;
	background-size: cover;
	background-attachment: fixed;
}



/*---- Texts and links ----*/

pre {
	font-family: monospace;
	margin: 10px;
}
p, li, h1, h2, h3, h4 {
	margin: 10px 20px;
	font-size: 17px;
	font-weight: normal;
}
h2 {
	/*color: orange;*/
	font-size: 25px;
}
h3 {
	/*color: orange;*/
	font-size: 20px;
}

#title h1, #title h1 a {
	font-family: SF_Movie_Poster_Bold, Calibri, Arial, SunSans-Regular, sans-serif;
	margin-top: 20px;
	font-size: 100px;
	text-transform: uppercase;
	font-weight: normal;
	text-align: center;
	margin-bottom: 0px;
	/*background: hsl(0,80%,60%);
	color: black;*/
	letter-spacing: 25px;
	color: white;
}
#title h2 {
	font-size: 20px;
	text-align: center;
	margin-top: 0px;
	color: white;
	font-weight: normal;
	letter-spacing: 2px;
	word-spacing: 2px;
}

#main_nav a, #second_nav a {
	display: inline-block;
	padding: 5px 15px;
	background: linear-gradient(hsla(40,0%,30%,100%) 5px, hsla(40,0%,5%,100%) 15px);
	background: linear-gradient(hsla(40,0%,15%,100%), hsla(40,0%,30%,100%) 3px, hsla(40,0%,5%,100%) 8px);
	/*background: black;*/
	/*box-shadow: inset 0px 0px 3px 2px black;*/
	border: solid 1px hsla(40,0%,60%,100%);
	border-radius: 10px;
	color: orange;
	box-shadow: 0px 1px 2px black;
}
#main_nav a:visited, #second_nav a:visited {
	color: orange
}
#selected a, #selected a:visited {
	color: hsl(20,90%,50%);
}
#main_nav a:hover, #second_nav a:hover {
	background: linear-gradient(hsla(40,0%,40%,100%) 5px, hsla(40,0%,5%,100%) 15px);
	background: linear-gradient(hsla(40,0%,15%,100%), hsla(40,0%,40%,100%) 3px, hsla(40,0%,5%,100%) 8px);
}
#main_nav li, #second_nav li { 
	display: inline-block;
	margin: 0.2em;
}
#main_nav ul, #second_nav ul {
	padding: 0.3em;
	margin: 0.3em;
}

#main_content a, header a {
	color: orange
}
#main_content a[href^=http], #main_content a[href^=http] {
	color: hsl(40,90%,70%);
}

#intro p {
	font-weight: bold;
}

#credits p {
	font-size: 14px;
	color: hsl(205,0%,80%);
}

#textlink h2 {
	/*font-size: 19px;*/
}
#textlink p {
	/*font-size: 16px;*/
}

.spoiler {
	background: black;
	border: solid 2px hsla(40,0%,10%,100%);
	border-radius: 10px;
	padding: 5px 10px;
	font-size: 16px;
}

#bold, strong {
	font-weight: bold;
}
#italic, em {
	font-style: italic;
}



/*---- Content Boxes ----*/

header, footer {
	/*background: linear-gradient(hsla(40,0%,30%,100%) 0px, hsla(40,0%,0%,100%) 5px, black 10px);*/
	background: black;
	border: solid 1px hsla(40,0%,30%,100%);
	border-left: double 3px hsla(40,0%,30%,100%);
	border-right: double 3px hsla(40,0%,30%,100%);
	border-radius: 10px;
	margin-top: 10px;
	box-shadow: 0px 1px 5px black;
}

article header {
	margin: 10px;
}
article {
	background: hsla(40,20%,5%,100%);
	border: solid 1px hsla(40,0%,30%,100%);
	margin-top: 10px;
	box-shadow: 0px 1px 5px black;
	border-radius: 10px;
}
article #main_content {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 20px;
	margin-top: 20px;
}

#textlink  {
	/*text-align: left;*/
	min-height: 100px;
	background: linear-gradient(hsla(40,0%,30%,100%) 4px, hsla(40,0%,5%,100%) 8px, black);
	box-shadow: inset 0px 0px 3px 2px black;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 20px;
	margin-top: 20px;
	/*background: linear-gradient(hsl(198,100%,38%), hsl(198,100%,33%) 10px, hsl(198,100%,38%) 500px);*/
	/*background: linear-gradient(hsl(200,100%,40%), hsl(200,100%,30%) 10px, hsl(200,100%,40%) 500px);
	box-shadow: 3px 3px 3px hsla(0,0%,0%,0.3);*/
	border-radius: 10px;
	border: solid 1px hsla(40,0%,60%,100%);
	overflow: hidden;
}
#textlink:hover  {
	background: linear-gradient(hsla(40,0%,40%,100%) 4px, hsla(40,0%,5%,100%) 8px, black);
	box-shadow: inset 0px 0px 3px 2px black;
}

#linkbutton, #linkbutton_top, #linkbutton_back, #linkbutton_pdf, #linkbutton_load {
	display: inline-block;
	background: linear-gradient(hsla(40,0%,60%,100%) 2px, hsla(40,0%,40%,100%) 30%, hsla(40,0%,20%,100%) 50%, hsla(40,0%,30%,100%) 70%);
	/*box-shadow: 3px 3px 3px hsla(0,0%,0%,0.3);*/
	border-radius: 10px;
	padding: 5px 15px;
	margin: 10px;
	color: orange;
	box-shadow: inset 0px 0px 1px 1px hsla(40,0%,30%,100%);
	/*margin-top: 0.6em;
	border-bottom: none;
	padding: 0.5em 1.3em;
	padding-bottom: 0.6em;
	margin-left: 0.3em;
	margin-right: 0.3em;*/
}
#linkbutton:hover, #linkbutton_top:hover, #linkbutton_back:hover, #linkbutton_pdf:hover, #linkbutton_load:hover {
	background: linear-gradient(hsla(40,0%,65%,100%) 2px, hsla(40,0%,45%,100%) 30%, hsla(40,0%,25%,100%) 50%, hsla(40,0%,35%,100%) 70%);
}

img.left {
	float: left;
	margin-right: 15px;
	/*margin: 0 0.7em;
	margin-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;*/
	/*box-shadow: 3px 3px 3px hsla(0,0%,0%,0.3);
	border-radius: 20px;*/
}
img.right {
	float: right;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 15px;
	/*margin: 0 0.7em;
	margin-left: 1.5em;
	margin-bottom: 1em;
	margin-top: 1em;
	box-shadow: 3px 3px 3px hsla(0,0%,0%,0.3);*/
	border-radius: 10px;
}

figure {
  /*float: center;*/
  /*width: 30%;*/
  /*border: thin silver solid;*/
  /*padding: 0.5em;*/
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 20px;
  margin-right: 20px;
}
figure img {
	width: 100%;
	height: 100%;
	max-width: 600px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	border-radius: 10px;
}
figcaption {
	text-align: center;
	/*font-style: italic;*/
	font-size: smaller;
	/*text-indent: 1em;*/
	margin-top: 7px;
	/*font-family: "Century Gothic", Calibri, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: 0.04em;*/
}

#linkbox {
	width: 200px;
	height: 68px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
	/*border: solid 0.3em hsl(200,80%,50%);*/
	/*overflow: hidden;*/
	/*border-radius: 20px;*/
}
#linkbox img {
	border-radius: 10px;
}
#linkbox img:hover {
	box-shadow: 0px 0px 1px 1px hsla(0,0%,90%,0.6);
}



@media screen and (max-width: 720px) {
	body{
		max-width: 100%;
		margin: auto;
		/*padding-left: 0;*/
	}
	article, header, footer {
		margin: 0;
		border-radius: 0em;
		padding-left: 1em;
		padding-right: 1em;
	}
	#title h1, #title h1 a {
		font-size: 70px;
	}
	#up {
		width: 32px;
		height: 32px;
		background: url(./images/up.png) no-repeat;
		border: solid 2px hsla(0,0%,100%, 0.5);
		border-radius: 33px;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 10;
	}
	img.right, img.left {
		display: block;
		margin: 16px auto;
		float: none;
	}
	div.figure {
	  float: none;
	  margin: 0.5em auto;
	}
	#textlink {
		text-align: center;
	}
	
}