@import url(style-technical.css);
@import url(style-layout.css);
@import url(style-colors.css);

/* Automata */

.automata {width:100%;background:url(wood.png);}
.automatap {padding:1em 0.5em 2em;}
.automata_top, .automata_bottom {background:url(parchend.png); background-size:100% 100%;height:36px;}
.automata_inner {background:url(parch.png); background-size:100% 100px; padding:15px 30px 30px;}
.automata h1 {margin-top:0;}

/* Mini RWD */

div.nav {top: 219px;}

/* Tabbed navigation only at full width*/
#nav-toggle {display:none;}

@keyframes nav-reveal {
    from {left:-260px;}
    to {left:0px;}
}

@keyframes nav-hide {
    from {left:0;}
    to {left:-260px;}
}

@media screen and (max-width: 959px)
	{	
	#topp {padding:0;}
	div#logo {padding:0 0 0 15%;height:120px;}
	#logo-img {display:none;}
	#logo-slot {display:inline-block; height: 100%; width:90%; 
		background-image: url(wargaminghobby_logo.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	#nav-toggle {display:block;position:absolute;top:0;left:3%;
		height:100%;width:12%;
		box-shadow:none;
		cursor:pointer;background-image: url(hamburger.png);
		background-position: 50% 50%;
		background-size:82%;
		background-repeat: no-repeat;}
	div.nav {width:240px;position:absolute;left:-260px;z-index:40;top:initial;
		box-shadow:2px 2px 10px 2px #666;
		/*animation-name: nav-reveal;*/
    	animation-duration: 0.3s;
		}
    div.nav ul {background:#bbb;}
	div.nav ul li {width:100%;margin:4px 0 0;font-size:1em;}
	div.nav ul li:first-child {margin:0;}
	div.nav ul li a {border-radius:0;padding:0.8em;}
	.title {line-height:100%;}
	} 

/* The screen is too narrow for two columns (Phablet) */
@media screen and (max-width: 767px) 
	{
	body {font-size:18px}

	#col12 {float:none; width:100%}
	#col3 {float:none; width:100%}
	#col2p {padding:0 15px;}
	#col12p > div.subject {margin:0 15px}

	#topp {text-align:left;}
	#toplinks {position:static; display:block;}
	#logininfo {position:static; display:block;}
	}

/* Need magnifying (Smartphone) */
@media screen and (max-width: 480px)
	{
	body {font-size:18px}
	div#logo {height:60px;}
	.item-panel a img {width:100%!important}
	#article_footer, .article .art-block-tekst p, .article .art-block-tekst h2, .article .art-block-tekst .art-elem-cytat
		{margin:1em 15px}
	plio\:adspace {margin:1em 0; width:100%}
	.article .geotag {margin:1em 0; width:100%}
	.signature .toolline {margin:1em 0 0;}
	.toolline a {display:block;line-height:1em;}
	.article .art-elem-plugin iframe, .article .art-elem-plugin embed, .article .art-elem-plugin object 
		{margin:1em 0; width:100%; height:min(1vh, 1vw)}
	img.filmframe {width: calc(100% - 30px);}
	.signature .toolline {display:inline;}
	}