/* Font for the page links. */
@font-face
{
	font-family: 'mainLinkFont'; 				/* This is the name of the new font. */
	src: 	url('../fonts/mississippi.woff');		  	/* This is the main source. */
	/* The rest of the sources are fallback alternatives. */
	src: 	url('../fonts/VT323.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Font for the blog post title. */
@font-face
{
	font-family: 'blogPostTitleFont'; 			/* This is the name of the new font. */
	src: 	url('../fonts/mississippi.woff');		  	/* This is the main source. */
	/* The rest of the sources are fallback alternatives. */
	src: 	url('../fonts/VT323.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body
{
	color: #F90;
	background-color: #001;
	background-image: url("../images/background.png");
	/*height: 100%;*/
	min-height: 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	font-family: sans-serif, monospace;
	font-size: 12pt;
	font-weight: bold;
}

.arrow
{
	font-weight: normal;
	font-size: 12pt;
}
.arrow:hover
{
	background-color: #FB0;
	color: #000033;
}

table
{
	font-size: inherit;
}

.black, input, textarea {color: #000000;}

a 
{
	color:#0A0;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}
a:visited 
{
	color:#0A0;
	text-decoration: none;
}
a:hover	
{
	color: #000;
	background-color: #3A3;
	text-decoration: none;
}

#wrapper
{
	position: relative;
	margin: 0 auto;
}

#pagetitle
{
	position: absolute;
	top: 0px;
	margin: 0 auto;
	/* border: 1px solid #0f0; */
}
#pagetitle a:hover {background-color: transparent;}

#pagecontent
{
	position: absolute;
	top: 130px;
	text-align:center;
	/* border: 1px solid #00f; */
}

#pageimage 
{
	position: relative;
	border-radius: 3px;
	/*border: 2px solid #AAAA33;
	border-right: 2px solid #777722;
	border-bottom: 2px solid #777722;
	padding: 3px;*/
}

#pagecontent .title {font-family: 'mainLinkFont', sans-serif; font-size: 20pt;}

#pageimagediv 
{
	position: relative;
	left: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 100%;
	overflow: hidden;
}

/* Position changes when swiping on a tablet. */
#pageimageMoveContainer 
{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
}

#adminlinkdiv 
{
	position: absolute; 
	right: 10px;
	bottom: 10px;
}
#adminlink {}

/* the bottom navigating links will be shown after the image has loaded. */
#bottomnavigatinglinks {display: none;}

.bglinkcolor {color: #33A;}
.bglinkcolor:visited {color: #33A;}
.bglinkcolor:hover {color: #FFA; background-color: transparent;}

.invisiblefooter
{
	height: 50px;
}

/* link div for the page navigation. */
.pagelinks
{
	text-align: center;
	font-family:'mainLinkFont', sans-serif;
	font-size: 18pt;
	font-weight: normal;
	color: #3A3;
}

/* the bottom navigating links will be shown after the image has loaded. */
.bottomnavigatinglinks {display: none;}

.popup 
{
	background-color: #111;
	padding-left: 5px;
	padding-right: 5px;
	display: none;
	position: absolute;
	z-index: 10;
	text-align: left;
}

/* Design of a blog entry. */
.blogpost
{
	display: none;
	position: relative;
	border: 2px solid #3A3;
	text-align: left;
	margin-top: 1cm;

	border-radius: 3px;
    	background: transparent; /* For browsers that do not support gradients */
	color: #3A3;
}

/* Blog entry title. */
.blogpost .title
{
	font-family:'blogPostTitleFont', sans-serif;
	font-size: 20pt;
	padding: 15px;
	background: #010;
	border-bottom: 2px solid #3A3;
}

/* Blog entry date */
.blogpost .date
{
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 10pt;
}

/* Blog entry text */
.blogpost .text
{
	padding: 10px;
}

.noborder {border: 0;}
.horizontalborder
{
	border-left: 0;
	border-right:0;
	border-top: 1px solid #33A;
	border-bottom: 1px solid #33A;
}

.error {color: #F33;}

.image_preview
{
	max-height: 200px;
	/*border: 2px solid #F00;*/
}

/* The last changed item on the admin panel. */
.highlightitem {background-color: #363;}

input, button
{
	color: #000;
}

/* Different media = different sizes. */
@media (min-width:800px) 
{
	#wrapper {width: 800px;}
	.blogpost {width: 800px;}
	#sourcelink {display: inline-block;}
	#adminlinkdivider {display: inline-block;}
}

/* mobile phones 1 */
@media (max-width:799px)
{
	#wrapper {width: 100%;}
	.blogpost {width: 100%;}
	.pagelinks {font-size: 12pt;}
	/* hide the source link on the main page. */
	#sourcelink {display: none;}
	#pageimageMoveContainer  {border: 0; padding: 0;}
	#pageimage  {border: 0; padding: 0;}
	#adminlinkdivider {display: none;}
}

/* Bigger screens. */
@media (min-width:800px)
{
	.pagelinks {font-size: 22pt;}
}

/* mobile phones 2 */
@media (min-width:800px) and (orientation:portrait)
{
	#wrapper {width: 100%;}
	.blogpost {width: 100%;}
	.pagelinks {font-size: 22pt;}
	/* hide the source link on the main page. */
	#sourcelink {display: none;}
	#pageimageMoveContainer  {border: 0; padding: 0;}
	#pageimage {border: 0; padding: 0;}
	body {font-size: 20pt;}
}