/*
 * zugzwang.org / schach-bremen.de
 * Copyright (c) 2000-2014, 2018-2019 Gustaf Mossakowski <gustaf@koenige.org>
 * CSS
 */


@font-face	{ font-family: 'Martel'; font-style: normal; font-weight: 200;
			src: local('Martel UltraLight'), local('Martel-UltraLight'),
			url(/layout/fonts/martel/Martel-UltraLight-latin-ext.woff2) format('woff2');
			font-display: swap;
			unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face	{ font-family: 'Martel'; font-style: normal; font-weight: 200;
			src: local('Martel UltraLight'), local('Martel-UltraLight'),
			url(/layout/fonts/martel/Martel-UltraLight-latin.woff2) format('woff2'),
			url(/layout/fonts/martel/Martel-UltraLight.woff) format('woff'),
			url(/layout/fonts/martel/Martel-UltraLight.ttf) format('truetype');
			font-display: swap;
			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face	{ font-family: 'Martel'; font-style: bold; font-weight: 800;
			src: local('Martel ExtraBold'), local('Martel-ExtraBold'),
			url(/layout/fonts/martel/Martel-ExtraBold-latin-ext.woff2) format('woff2');
			font-display: swap;
			unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face	{ font-family: 'Martel'; font-style: bold; font-weight: 800;
			src: local('Martel ExtraBold'), local('Martel-ExtraBold'),
			url(/layout/fonts/martel/Martel-ExtraBold-latin.woff2) format('woff2'),
			url(/layout/fonts/martel/Martel-ExtraBold.woff) format('woff'),
			url(/layout/fonts/martel/Martel-ExtraBold.ttf) format('truetype');
			font-display: swap;
			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html, body	{ margin: 0; padding: 0; height: 100%; }
body		{ background: #bad6e7 url(/layout/koenig.png) no-repeat fixed; 
			color: black; line-height: 1.5;
			font-family: 'Martel', "Droid Serif", Georgia, serif;
			font-weight: 200; }
body.maskottchen
			{ background: #404040; color: #FFF;}
#canvas		{ padding: 0; margin: 0; min-height: 100%; position: relative; }
@media screen and (max-width: 480px) {
	body		{ background: #FFF; }
	#canvas		{ padding-top: 0; }
}

h1, h2, h3, h4, h5, h6
			{ margin: 2em 0 .5em; }
h1, h2, h3, h4, h5, h6
			{ font-family: Martel, Georgia, serif; font-weight: 800; }
h1			{ font-size: 150%; margin: .5em 0 .1em; }
h1 em		{ font-weight: normal; }
h2			{ font-size: 120%; }
h3			{ font-size: 120%; font-weight: normal; }
h1+h2, h2+h3, h3+h4
			{ margin-top: .5em; }
@media screen and (max-width: 480px) {
	h1			{ font-size: 120%; }
	h2, h3		{ font-size: 110%; }
}

hr			{ color: #FFF; background-color: #FFF; height: 1px; border: 0; 
			width: 10%; margin: 1.5em 0; padding: 0; clear: both; }

ul, dl, p, ol
			{ margin: .5em 0; }
ul ul, ol ol, ul ol, ol ul
			{ margin: 0; }

img			{ max-width: 100%; }
strong		{ font-weight: 800; }

a			{ text-decoration: none;}
a:link		{ color: #009; }
body.maskottchen a:link { color: #77F; }
a:link:hover, a:link:focus
			{ background: #bad6e7; color: #009; }
a:visited	{ color: #66C; }
body.maskottchen a:visited { color: #779; }
a:visited:hover, a:visited:focus
			{ background: #bad6e7; color: #66C; }
:target		{ background: yellow; }
.maskottchen a:link:hover, .maskottchen a:link:focus,
.maskottchen a:visited:hover, .maskottchen a:visited:focus
			{ background: #000; }
			
#auswahl p	{ font-size: 120%; }

#head, #foot
			{ font-family: "Lucida Grande", sans-serif; }

#head		{ font-size: 140%; margin: 0 1em .5em; padding-top: 4em; }
#head img	{ border: none; }
#head p		{ margin: 0; }

.canvas		{ max-width: 57em; margin: 0 auto; padding-bottom: 5em;
			position: relative; }
#content	{ background: white; opacity: .95;
			padding: .35em 1.25em 1em; border-radius: 1em; -moz-border-radius: 1em; 
			margin: 0 1em; }
#content img
			{ vertical-align: bottom; }

@media screen and (max-width: 480px) {
	#head		{ margin: 0; padding: .5em .25em; font-size: 120%;
				background: #DDD; }
	.maskottchen #head
				{ background: #404040; }
	#content	{ background: none;
				padding: .25em .5em 3em; border-radius: 0; -moz-border-radius: 0; 
				margin: 0 .5em; }
	.canvas		{ margin: 0 auto; padding-bottom: 3em;}
}

.navspalte	{ width: 20em; padding-right: 1em; float: left; padding-top: 1px; }
.navspalte h2	{ margin-top: 0; }
.navspalte dd	{ margin: 0; padding: 0 0 .5em 1em; }
.hauptspalte	{ margin-left: 24em; }
@media screen and (max-width: 480px) {
	.hauptspalte		{ margin-left: 0; }
	.navspalte		{ width: auto; padding: 0; float: none; }
}

form.kontakt fieldset { background: #EEE; border: 0; }
form.kontakt th {width: 10em; text-align: right; padding-right: .5em; vertical-align: top;}
@media screen and (max-width: 480px) {
	form.kontakt
				{ font-size: 90%; }
	form.kontakt fieldset
				{ background: #FFF; width: auto; max-width: 100%; border: 0;
				margin: 1em 0; padding: 0; }
	form.kontakt table
				{ width: auto; }
	form.kontakt td, form.kontakt th
				{ display: block; text-align: left; width: auto; padding: 0; }
	form.kontakt label
				{ width: auto; }
}

#bottom		{ clear: both; margin: .5em auto; }
@media screen and (max-width: 480px) {
	#bottom		{ font-size: 90%; }
}

.clear		{ clear: both; }

abbr		{ border-bottom: 1px dotted #960; }
dt			{ font-weight: bold; }

/* Navigation */

#breadcrumbs
			{ font-size: .75em; }
#links		{ font-size: .75em; float: right; }
@media screen and (max-width: 480px) {
	#breadcrumbs	{ padding: 0 .5em 0 28px;
					background: url(/layout/favicon.gif) no-repeat .4em; }
	#breadcrumbs span
					{ display: none; }
}

/* Login */

#login fieldset
			{ border: none; border-radius: 1em; -border-radius: 1em; 
			background: #DDD url(/layout/sib-stripes.gif) repeat-y 100% 0; 
			margin: 0; }
#login legend
			{ background: #DDD; padding: .5em; 
			border-radius: 1em; -border-radius: 1em; }
#login label
			{ float: left; width: 10em; }
#login form	{ margin: 1em 0 0; }
#login form p
			{ margin: .5em 0; }
#login form p.submit
			{ margin-left: 10em; }

/* Artikel */

.spalte		{ width: 46%; margin: 2%; float: left; } /* zweispaltiger Text */
.spalte h2:first-child
			{ margin-top: 0; }
.spaltebreit
			{ width: 65%; margin: 0 4% 0 0; float: left; } /* zweispaltiger Text */
.spalteschmal
			{ width: 30%; margin: 0; float: left; } /* zweispaltiger Text */

@media screen and (max-width: 480px) {
	.spalte, .spaltebreit, .spalteschmal
				{ width: auto; margin: 1em 0; float: none; }
	.spaltebreit table
				{ max-width: 100%; }
	.spaltebreit form
				{ font-size: .9em; }
}

.abstract	{ font-weight: bold; }
.autor		{ text-align: right; }

.remarks	{ margin: 3.5em 3.5em 0; font-size: 90%; }
.main_image	{ float: right; padding: 0 0 1em 1em; }

/* Archiv */

.artikel h3 { float: left; width: 4em; margin: 0; font-weight: normal; 
			font-size: 100%; }
.artikel ul { margin-left: 4em; }
@media screen and (max-width: 480px) {
	.artikel h3 { width: 3em; }
	.artikel ul { margin-left: 3em; }
}


/* Media */

.image		{ text-align: center; color: #7D8A9A; font-style: italic; 
			font-size: 90%; margin: 1em auto; display: table; }
.image img	{ display: block; margin: auto; margin-bottom: .5em; }
.right		{ float: right; padding: 0 0 1em 1em; }
.left		{ float: left; padding: 0 1em 1em 0; }
.center		{ display: inline-block; padding: 0 .5em; vertical-align: top; }
.hidden		{ display: none; }
.imageblock	{ text-align: center; overflow: hidden; }
.image figure		{ margin: 0; display: table; }
.image figcaption	{ display: table-caption; caption-side: bottom; }
.event .image
			{ margin: 0 auto; }
.notitle figcaption
			{ display: none; }

@media screen and (max-width: 480px) {
	.right, .left
				{ text-align: center; float: none; padding: 0; margin: 1em 0; 
				width: 100%; }
	.right figure, .left figure
				{ width: 100%; }
	.image.right img, .image.left img
				{ width: 100%; margin: 0 0 .5em; }
}

/* Seitenfuß */

#foot		{ position: absolute; bottom: 1.5em; text-align: center;
			width: 100%; }
#prev		{ float: left; padding-right: 1em; }
#next		{ float: right; padding-left: 1em; }
.webautor	{ font-size:  0.8em; color: gray; }

/* Menue */

body #nav, body #nav strong, body #nav .below
	{ background: url(/layout/koenig.png) #bad6e7 no-repeat fixed; } 
body #nav
			{ background-color: #adcadb; }
body.maskottchen #nav
			{ background: #404040; }

@media screen and (max-width: 480px) {
	#foot		{ bottom: 2em; background: #DDD; padding: 1em 0;
				position: static; }
	.maskottchen #foot
				{ background: #404040; }
	body #nav, body #nav strong, body #nav .below
				{ background: #DDD; border: none; } 
}

.maskottchen .author		{font-style: italic; text-align: right; margin-top: 3em;}
.maskottchen .seitenbild	{float: right; margin-left: 1em;}
.maskottchen #content		{ background: #404040; }
.chessyfront
			{ font-size: 1.2em; line-height: 1.4; }
.chessyfront h2
			{ font-weight: normal; }

/* Lytebox */

body #lbOuterContainer { background-color: #333; }
body #lbDetailsContainer { padding-top: 8px; }

/* Schachbrett */

.brett		{ border-collapse: collapse; line-height: 1; margin: 0 auto; }
.brett caption
			{ padding: .5em 0; line-height: 1.3;}
.brett img	{ vertical-align: bottom; }
.brett td	{ margin: 0; padding: 0; width: 30px; height: 30px; 
			white-space: nowrap; }
.brett th	{ padding: 0 .5em; font-family: "Lucida Grande"; }
.brett-text	{ margin: 0 auto; }
.brett-text td.tbrett
			{ padding-right: 1.5em; }
.brett tbody tr:first-child td { border-top: 1px solid black; }
.brett tfoot th { border-top: 1px solid black; padding: .5em; }
.brett tfoot td { border-style: none; }
.brett tbody th { border-right: 1px solid black; }
.brett tbody tr td.last-child 
			{ border-right: 1px solid black; }
.brett tfoot tr td:last-child 
			{ border-right: none; }
table.brett tbody tr td.noborder 
			{ vertical-align: top; padding-top: .5em; border: none;}
table.brett tbody tr td.borderright
			{ vertical-align: top; padding-top: .5em; 
			border: 1px black; border-style: none none none solid; }

/* Varianten */
			
.summary	{ font-size: 1.2em; margin: 1em 0; }
.summary strong
			{ font-weight: normal; }
.alternative
			{ font-style: italic; color: #999; margin-top: 0; }
.icons		{ float: right; width: 80px; margin: 0 0 .5em .5em; }
.icons a	{ display: block; width: 80px; height: 80px; margin: 0 0 1em; 
			background: #EEE; }
.icons img	{ border: none; width: 64px; height: 64px; padding: 8px; }
.icons-klein img
			{ padding: 3px; }

/* Notation */

.notation	{ float: left; padding: 0 2em 1em 0; }
.notation table
			{ border-collapse: collapse; }
.notation th, .notation td
			{ text-align: left; padding: .25em .75em .25em .25em; 
			border: 1px #999; border-style: none none dotted dotted; }
.notation td:first-child, .notation th:first-child
			{ text-align: right; border-left: none; }
@media screen and (max-width: 480px) {
	.notation	{ font-size: 90%; }
}

/* Fehler */
.e404		{ padding: 1em; }
.error		{ background: red; padding: .5em; color: white; }

/* Intern */

.intern ul	{ padding: .5em 1.5em; background: #F3F3F3; border-radius: 1em; 
			-border-radius: 1em; }
.intern ul ul	{ padding: 0 1.5em; }


/* Feedback */

.feedback textarea
			{ width: 40em; border: 1px solid #CCC; max-width: 100%; }
.feedback form h2
			{ margin-top: 1em; }

/* print */

@media print {
	html, body	{ background: #FFF; color: #000; font-size: 11pt; margin: 0; }
	html body	{ background: #FFF; }

	a:link, a:visited
				{ color: black; text-decoration: none; }
	a[href^=http]:after
				{ content: " [" attr(href) "] "; }

	.canvas		{ margin: 0; }
	#content	{ background: white; opacity: 1; }

	#foot, #nav, #logout, #breadcrumbs, #links
				{ display: none; }

	html, body, .canvas		{ margin: 0 auto; }

	.notation th, .notation td
				{ border-style: none none solid solid; border-width: 1px;
				border-color: black; }

	hr			{ display: none; }

	/* Schachbrett */

	.notation table,
	table.brett { border-collapse: separate; border-spacing: 0; }
	table.brett	{ page-break-inside: avoid; }

	h1, h2, h3, h4
				{ page-break-after: avoid; }
	td			{ page-break-inside: avoid; }
}