@font-face 
{
    font-family: 'LetterOMatic!';
    src: url('/design/fonts/letteromatic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.mobile-only 
{
	display: none;
}
body
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #c8e8f9;
	font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, Helvetica, sans-serif;
}
#search-box 
{
	position: absolute;
	top: 16px;
	right: 100px;
	text-align: right;
	width: 200px;
	margin: 0px 0px 0px 0px;
}
#search-box .inputbox 
{
	padding: 0px !important;
	margin: 0px !important;
	border: 1px solid #A9B8C2;
	background-color: #FAFAFA;
	font-family: Verdana, "Bitstream Vera Sans", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 70%;
}
#search-box .advanced
{
	margin: 0px 0px 0px 0px !important;
	padding: 6px 0px 0px 0px !important;
}
#search-box a
{
	color: #000000;
	text-decoration: none;
	font-size: 0.7em;
	text-align: left !important;
}
#search-box .button
{
	border-style: none !important;
}
#menu
{
	font-weight: bold;
	white-space: nowrap;
	margin: 0px 0px 0px 0px;
	padding: 0px 15px 0px 0px;
}
#menu a
{
	display: block;
	text-decoration: none;
}
#page
{
	background-color: #f0f0f0; /* f8f8f8 */
}
.wrapper
{
	margin: 0px auto;
	width: 100%;
}
#status, #calendar
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-style: none;
	border-collapse: collapse;
}
#status td, #calendar td
{
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 5px 0px;
}
li#nav-last
{
	background: url(/bilder/tree/tree_fi.gif) no-repeat;
}
.ulspace
{
	background: url(/bilder/tree/tree_l.gif) no-repeat;
	height: 8px;
	font-size: 5px;
}
#intro
{
	padding-right: 180px;
	margin-top: 0px;
	padding-bottom: 1em;
}
.poketch .content, .fullwidth .content
{
	width: auto !important;
	max-width: 100% !important;
}
.poketch .content li, ul.stretch li
{
	margin-bottom: 0.5em;
}
.indent
{
	padding-left: 1.5em !important;
}
.content div.txt li
{
	margin-bottom: 1em;
}
a:link,a:hover,a:active,a:visited
{
	color: #000000;
}
th
{
	font-weight: bold;
}
.ccoll,.tcol
{
	width: 255px;
	float: left;
}
.ccoll,.tcoll
{
	margin-right: 5px;
}
.ccolr
{
	width: 255px; float: left;
}
.clear
{
	clear: both;
}
.error
{
	color: red;
}
span.error
{
	font-weight: bold;
}
img
{
	border-style: none;
}
.hline
{
	border-bottom: 1px dotted #339933;
	padding: 1em;
}
.datagrid, .data, .userpost-table
{
	padding: 0px;
	border-collapse: collapse;
}
.box
{
	border: 1px solid #339933;
	background-color: #C4E4C4;
}
.datagrid th, .datagrid td, .userpost-table td, .codetitle, .quotetitle
{
	border: 1px solid #C4E4C4;
	padding: 6px;
}
.data td
{
	padding-right: 3em;
}
.datagrid tbody
{
	background-color: #F4FDF4;
}
.datagrid tbody th
{
	text-align: left;
}
.datagrid thead, .head, .userpost-rowh, .codetitle, .quotetitle
{
	background-color: #DEF1DE;
	text-align: left;
	font-weight: bold;
}
.datagrid tr.row2, .userpost-row2
{
	background-color: #ececec;
}
.datagrid tr.rowCurrent
{
	background-color: #ffd350;
}
.datagrid tr.rowTransparent td
{
	border-left: none;
	border-right: none;
	background-color: transparent;
}

.rowlines tr:nth-child(even),
.striped tr:nth-child(even)
{
	background-color: #ececec;
}

.poketch .datagrid
{
}
.poketch .datagrid th
{
	padding: 5px;
}
.poketch .datagrid td
{
	padding: 8px 5px 8px 5px;
}
.codecontent, .quotecontent
{
	border: 1px solid #C4E4C4;
	border-top-style: none;	
	padding: 3px;
}
.codecontent
{
	font-family: monospace;
}
.poketch .content input, .poketch textarea, .poketch select
{
	border: 1px solid black;
	margin: 2px;
	padding: 2px;
	font-family: Tahoma, Verdana, "Bitstream Vera Sans", Arial;
	font-size: 1em;
}
select, option
{
	z-index: 3;
}
dd
{
	margin-bottom: 1em;
}
img.details
{
	margin-right: 10px;
	border: none;
}
#statuswerte thead th, #statuswerte td
{
	width: 6em;
	text-align: center;
}
#statuswerte tbody th
{
	width: 10em;
	text-align: left;
}

.poketch thead th
{
	text-align: center;
}
#typen
{
	text-align: center;
}
#typen td
{
	width: 2.5em;
}
table.attacken td
{
	padding: 6px !important;
}
#zuchtpartner a
{
	margin-right: 0.5em;
}
.pokedex div.indent
{
}
.pokedex .content h2
{
	font-size: 1.25em;
}
.pokedex h1
{
	border-top: 1px solid #cccccc;
	padding-top: 1em;
}
.pokedex h1#first
{
	border-top: 0px none transparent;
	padding-top: 0px;
}
dt
{
	margin-bottom: 0.5em;
}
div.artikel-hide
{
	display: none;
}
h1.bbcode
{
	margin-bottom: 0.5em;
}

/* Reworked header */

#top
{
	margin: 0px 0px 0px 0px;
	padding: 0px 15px 0px 15px;
	border-bottom: 1px solid #8ac08a;
	background-color: #c8e8f9;
}

/* Reworked submenu */

#submenu
{
	background: #8AC08A url('/bilder/top-2011.png') top left repeat-x;
	padding: 0px 15px 0px 15px;
	margin: 0px 0px 0px 0px;
	border-bottom: 1px solid #339933;
	font-size: 0.7rem;
}

header nav a
{
	text-decoration: none;
}

header nav#nav-areas
{
	font-weight: bold;
}

header nav>ul
{
	margin: 0;
	padding: 0;
	line-height: 2.5rem;
}

header nav>ul>li
{
    position: relative;
    display: inline-block;
	margin-right: 2rem;
}

header nav>ul>li>div 
{
    display: none;
    position: absolute;
    background-color: #91c597;
	border-left: 1px solid #339933;
	border-right: 1px solid #339933;
	border-collapse: collapse;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	margin: 0px 0px 0px -15px;
    z-index: 1;
	line-height: 2rem;
	width: auto;
}

header nav>ul>li>div>ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-bottom: 1px solid #339933;
	border-collapse: collapse;
}

header nav>ul>li>div>ul>li
{
	display: block;
	margin: 0;
    padding: 0px 15px 0px 15px;
	white-space: nowrap;
}

header nav>ul>li>div>ul>li:hover
{
	background-color: #f0f0f0;
}

/* Common elements */

hr.section-divider
{
	display: none;
}

.hidden
{
	display: none;
}

dt 
{
	font-weight: bold;
	color: darkgray;
	text-transform: uppercase;
	margin-top: 0.8rem;
	margin-bottom: 0.2rem;
	font-size: 0.7rem;
}

dd 
{
	margin-left: 0px;
}

/* LARGE SCREEN ONLY */

@media only screen and (min-device-width: 1025px) 
{
	#top
	{
		background: url('/design/icon-professor-pikachu.png') right top no-repeat #c8e8f9;
		min-height: 100px;
	}
	
	header nav>ul>li:hover>div 
	{
		display: block;
	}
	
	#tagline
	{
		font-size: 0.7rem;
	}
	
	#tagline #brand a
	{
		font-family: "LetterOMatic!", Verdana, "Bitstream Vera Sans", Tahoma, Arial, Helvetica, sans-serif;	
		color: #339933;
		text-decoration: none;
		font-size: 2.0rem;
		letter-spacing: 3px;
		/* text-shadow: black 1px 1px 1px; */
	}
	
	#tagline .hyphen
	{
		display: none;
	}
	
	#tagline #logo
	{
		display: block;
	}
	
	#tagline #slogan
	{
		display: block;
		margin-top: 1rem;
	}
	
	#page
	{
		margin: 0px 0px 0px 0px;
		padding: 20px 15px 10px 0px;
	}
	
	#page .wrapper
	{
		display: flex;
		flex-direction: row;
	}
	
	#page .wrapper .content
	{ 
		order: 2;
		max-width: 800px;
	}
	
	#page .wrapper nav
	{
		order: 1;
	}
	
	nav h4
	{
		display: none;
	}
	
	#navigation
	{
		border-right: 1px dotted #339933;
		border-bottom: 1px dotted #339933;
		width: 200px;
		margin: 0px 30px 0px 0px;
		padding: 0px 0px 0px 0px;
		font-size: 0.7rem;
	}
	
	#navigation h1
	{
		background: #8AC08A url('/bilder/top-2011.png') bottom left repeat-x;
		border-top: 1px dotted #339933;
		border-bottom: 1px dotted #339933;
		padding: 10px 15px 10px 15px;
		margin-top: 1em;
		font-weight: bold;
		color: #000000;
		font-size: 0.7rem;
	}
	
	.navigation-box
	{
		padding: 0px 0px 0px 15px;
	}
	
	#navigation ul
	{
		margin: 0;
		padding: 0;
	}
	
	#navigation li
	{
		list-style-type: none;
	}
	
	#navigation ul ul
	{
		padding: 0 15px 0 15px;
	}
	
	#navigation ul ul li
	{
		padding: 0;
		margin: 0.7rem 0 0.7rem 0;
	}
	
	#navigation div.group
	{
		background: #8AC08A url('/bilder/top-2011.png') bottom left repeat-x;
		border-top: 1px dotted #339933;
		border-bottom: 1px dotted #339933;
		padding: 10px 15px 10px 15px;
		margin: 0;
		font-weight: bold;
		color: #000000;
		font-size: 0.7rem;
	}
	
	main
	{
		font-size: 1rem;
		line-height: 1.5rem;
	}
	
	main h1
	{
		font-size: 1.5rem;
		font-weight: bold;
		color: #339933;
	}
	
	#navigation h1:first-child, main h1:first-child
	{
		margin-top: 0px !important;
	}
	
	main h2
	{
		font-size: 1.25rem;
		font-weight: bold;
		color: #339933;
	}
	
	main h3
	{
		font-size: 1.25rem;
		font-weight: bold;
	}
	
	.responsive-table caption
	{
		caption-side: bottom;
		text-align: right;
		font-size: 0.8rem;
		font-style: italic;
		color: darkgray;
		margin: 0.25rem 0 1rem 0;
	}
	
	ul.news p { margin: 0; padding: 0; }
	
	.copyright
	{
		background: #c8e8f9 url('/bilder/bottom-2011.png') repeat-x top left;
		padding: 40px 15px 10px 15px;
		font-size: 0.7em;
		text-align: left;
	}
}

/* MOBILE AND TABLET */

@media only screen and (max-device-width: 1024px)
{
	.mobile-only 
	{
		display: unset;
	}
	body 
	{ 
		margin-top: 0px; 
	}

	#top
	{
		padding-right: 10px;
	}
	
	#tagline
	{
		line-height: 1.2rem;
		font-size: 0.8rem;
		background-image: url('/design/icon-ash-pikachu.png');
		background-position: right top;
		background-size: contain;
		background-repeat: no-repeat;
		padding-right: 30px;
	}
	
	#tagline a
	{
		text-decoration: none;
	}
	
	#tagline #logo
	{
		display: none;
	}
	
	#search-box, 
	#breadcrumbs 
	{ 
		display: none; 
	}
	
	#submenu 
	{ 
		font-size: 0.9rem;
	}
	
	#page
	{
		margin: 0px;
	}
	
	#page .wrapper
	{
		display: flex;
		flex-direction: column;
	}
	
	#page .wrapper.content
	{ 
		order: 1;
	}
	
	#page .wrapper nav
	{
		order: 2;
	}
	
	#nav-topic
	{
		
	}
	
	#nav-topic h4
	{
		margin: 0;
		padding: 15px 10px 15px 10px;
		
		background: linear-gradient(#BDE1E6, #8AC08A);
		border-top: 1px solid #339933;
		border-bottom: 1px solid #339933;
		
		font-weight: bold;
		color: #000000;
		font-size: 1rem;
	}
	
	#navigation
	{
		margin: 0px 0px 0px 0px;
		padding: 15px 10px 0 10px;
		font-size: 0.9rem;
	}
	
	#navigation h1,
	#navigation div.group
	{
		font-weight: bold;
	}

	#navigation ul
	{
		margin: 0;
		padding: 0;
	}
	
	#navigation li
	{
		list-style-type: none;
	}
	
	#navigation ul ul
	{
		padding: 0 15px 0 15px;
	}
	
	#navigation ul ul li
	{
		padding: 0;
		margin: 1rem 0 1rem 0;
	}
	
	.content
	{
		margin: 0;
		padding: 0px 10px 10px 10px;
		font-size: 1.1rem;
		line-height: 1.6rem;
	}
	
	.content li
	{
		line-height: 1.6rem;
		margin-bottom: 0.2rem;
	}

	main h1
	{
		font-size: 2.0rem;
		line-height: 2.5rem;
		color: #339933;
	}

	main h2
	{
		font-size: 1.5rem;
		line-height: 2rem;
		color: #339933;
	}
	
	main h3
	{
		font-size: 1.3rem;
		line-height: 1.8rem;
	}
	
	img, iframe 
	{ 
		max-width: 100%;
	}
	
	section
	{
		margin-bottom: 2rem;
	}
	
	.responsive-table
	{
		max-width: 100%;
		overflow-x: auto;
		background-color: inherit;
	}
	
	.responsive-table table
	{
		width: 100%;
	}
	
	.responsive-table caption
	{
		display: none;
	}
	
	.responsive-table thead
	{
		display: none;
	}
	
	.responsive-table tr
	{
		/*grid*/
		display: grid;
		justify-items: start;
		grid-column-gap: 0;
		grid-row-gap: 0;

		/*card*/
		margin: 0 0 1rem 0;
		padding: 10px;
		border: 1px solid #C4E4C4;
		background-color: white;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	}
	
	.responsive-table thead,
	.responsive-table tbody,
	.responsive-table th,
	.responsive-table td
	{
		border-style: none;
		background-color: inherit;
		margin: 0;
		padding: 0;
	}
	
	.responsive-table ul
	{
		padding-left: 2rem;
	}
	
	.responsive-table ul::before
	{
		font-weight: bold;
		color: darkgray;
		text-transform: uppercase;
		margin-top: 0.8rem;
		margin-bottom: 0.2rem;
		font-size: 0.7rem;
		margin-left: -2rem;
		padding: 0;
	}
	
	ul.news { margin: 0; padding: 0; list-style-type: none; }
	ul.news p { margin: 0; padding: 0.25rem 0 0.5rem 0; }
	ul.news li { margin-bottom: 0.8rem; border-bottom: 1px solid darkgray; }
	ul.news .comments-count { display: block; }
	
	.search-archive
	{
		display: flex;
		flex-direction: row;
		
		margin-bottom: 2rem;
		padding: 1px;
		
		background-color: white;
		border: 1px solid darkgrey;
		line-height: 2rem;
	}
	
	.search-archive input
	{
		border: none;
		padding: 3px;
		line-height: 1.5rem;
		width: 100%;
	}
	
	.search-archive button
	{
		height: auto;
		padding: 5px;
		margin: 2px;
	}
	
	.search-archive .search-input
	{
		flex: auto;
	}
	
	.search-archive .search-button
	{
		flex: none;
	}
	
	.mobile-hide
	{
		display: none;
	}
	
	.copyright
	{
		background: #c8e8f9;
		border-top: 1px solid darkgray;
		padding: 0 10px 0 10px;
		font-size: 0.7rem;
	}
}