html
{
	background: #ddd; color: black;
	font: 0.9em "Trebuchet MS", sans-serif;
}
body
{
	padding: 2em 0 0; margin: 0;
}
#content,#header,#footer {padding:0 1em}
html > body {
max-width:90em;
margin:0 auto;
min-width:50em;
}

a img {border: 0;}

a:link, a[onclick] {color: #00b;}
a:visited {color: purple;}

a.ext:link {color: #05d;}
a.ext:visited {color: #708;}

/* ikonka do zewnêtrznych linków */
a.ext:after {content: url('globe.png'); text-decoration: none; width: 5px; height: 5px; position: relative; top: -0.35em; right: 2px;}
a.ext:visited:after {content: url('globev.png'); width: 5px; height: 5px; position: relative; top: -0.35em; right: 2px;}
a[href$=".pdf"]:after,a.ext[href$=".pdf"]:after {content:"PDF";font-size:50%;color:#400;position:static;vertical-align:super}

h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}

/* chce zeby h2 kolumn zlozyly sie ladnie z h1 strony */
h1, #kolumny h2 {font-size: 2em;}
h1, #kolumny h2, #listboxes h2
{
	border: 1px solid;
	border-width: 1px 0;
	margin: 0;
	background: black url(grad.png) 50% repeat-x;
	color: white;
	padding: 0;
	width: 100%;
}
#kolumny h2 {background:none;border:0;padding:1px 0}
* html #kolumny h2 {padding:0;}

/* z pierwsza litera w rewersie */
h1:first-letter, #kolumny h2:first-letter, #listboxes h2:first-letter {background: white; color: black; border: solid white; border-width: 1px 2px;margin-right: 1px;}

/* naglówki sa klikalne, ale nikt nie musi o tym wiedziec :) */
h1 a:link, h1 a:visited, #kolumny h2 a, #listboxes h2 a {text-decoration: none; color: white;}

h1 a:hover, #kolumny h2 a:hover, #listboxes h2 a:hover {text-decoration: underline; color: white;}


p {
	padding : 0 1em;
	margin: 1em 0;
	text-align: justify;
}


blockquote, pre
{
	border-left: 2px red solid;
	font-weight: bold;
	margin: 1em 1em 1em 3em; padding:0;
}
pre {margin-left:2em; padding-left:1em;}

q {quotes: '\201E' '\201D' '\00AB' '\00BB';}

/* standardowy brzydki hr zastapiony eleganckimi gwiazdkami */
hr {content: "* * *"; width: 4em; border: 0; padding: 1em; clear: both;}


#operabutton {float: right; margin: 0 0 1.5em 1.5em;}

/* listy w kolumnach upozorowane na komórki */
#kolumny li {list-style-type: none; border-bottom: 1px solid white;}
#kolumny ul {list-style-type: none; padding: 0; margin: 0;}

#wstep h2 {display:none}

/* glówna tresc strony float'em na lewo.
	 min max jest dla extremistów, którzy narzekaja, ze strona w 200-punktowej czcionce "sie rozjezdza" */
#wstep,#listboxes {overflow:auto;float: left; width: 60%; min-width: 15em; max-width: 80em;}
#kolumny {position:relative;float: right; width: 40%; margin-top:-2.5em;}

#kolumny p {position:absolute;top:5px;margin:0;right:5px;}
#kolumny p a {color:#777;text-decoration:none;line-height:1}
#kolumny > p a { content:url(/feed.png);opacity:0.8;}
#kolumny div h2 {display:none;}
#kolumny div p {position:static;}

/* wewnatrz prawej kolumny sa tak naprawde jeszcze dwie, dzielace sie nia po polowie
	 linki maja margin-right, zeby tekst "plywajacy" pod kolumnami mial margines.
	 newsy maja ujemny margin, zeby nie byly odpychane przez margines i ramke linków.
*/
#kolumny #news {float:left; width: 50%; min-width: 10em; max-width: 30em; margin-bottom: 1.5em; margin-right: 15px; margin-left: 0;}
#kolumny #linki {float:left; width: 50%; min-width: 10em; max-width: 30em; margin-bottom: 1.5em; margin-left: -17px; margin-right: 0;}
* html #kolumny #linki {margin-right:-35px}

/* paragrafy przerobione aby ladnie tworzyly podtytuly w kolumnach */
#news p, #linki p, #listboxes p {padding: 0; margin: 0; text-align: center; font-size: smaller;}
#news p {border: solid black; border-width: 0 0 1px 1px; border-right: 1px dotted black;}
#linki p {border: solid black; border-width: 0 1px 1px 0; border-left: 1px dotted black;}

/* w podtytule w linkach i newsach jest link do dodawania - bedzie mial ikonke [+] */
#news>p a, #linki>p a {text-decoration: none; color:inherit;}
#news>p a:after, #linki>p a:after {content: url('plus.png'); width: 9px; height: 9px; margin-left: 5px;}


#news li {border-right: 2px solid white;}
#linki li {border-left: 2px solid white;}

#kolumny li {padding: 0 1em 0.1em 1em;}
#kolumny p {padding: 0;}

/* róznej masci listy w lewej czesci strony. kombinacje width i max-width daja 1, 2 lub 3 kolumny w zaleznosci od skali. tylko przypadki extremalne, tak lubiane przez krytyków :) */
#listboxes div {float: left; width: 50%; max-width: 26em;}
#listboxes ul {border: 0; list-style: circle outside; margin: 0 0 0 1em; padding-left: 0.5em;}

* html #listboxes div {margin-right:-1px;}

/* z panelem navigacyjnym jeszcze nie wymyslilem co zrobie, wiec jest jakis takis gdzies... */

/* na gorze. body ma padding zwiekszony, zeby bylo miejsce na ten pasek. */
#menu {position: absolute; top: 0; left: 0; right: 0;}
* html #menu { width: 100%; right:auto;}

/* a pasek to jest bo lista jest przerobiona na inline. dla efektu rozspacjowane wszystko... */
#menu {background: #ccc; font-size: 0.7em; list-style-type: none; border-bottom: 1px solid gray; margin: 0; padding: 0;}
#menu li {margin: 0; padding: 2px 4%; white-space:nowrap; display: inline; text-align: center; letter-spacing: 1em; word-spacing: 3em;}

#menu img {display:none;}

/* wybajerzony efekt na hover. ladnie wyglada tylko w wybajerzonych przegladarkach (czyt. nie IE) */
#menu li a {text-transform: lowercase; text-decoration: none; color: white;}
#menu li:first-child a {font-weight: bold;}
#menu li a:hover {text-decoration: underline; color: black;}
#menu li a:before {content: "\a0";}

#listboxes #articles ul a:link, #listboxes #articles ul a:visited	 {display:block; text-align: center; font-weight: bold; background: #d4d4d4; }
#listboxes #articles li:hover {background: #d5d5d5;}
#listboxes #articles li {list-style-type: none; padding: 0; border-top: 1px dotted black;}
#listboxes #articles ul {padding: 0;}

#toc {float: right; width: 16%; min-width: 10em; background: #ddd; margin: 0 0 1em 1em; padding-left: 1em;}
#toc a {text-decoration: none; position: relative; top: 0.55em; padding-right: 0.5em; background: #ddd;}
#toc ol {list-style-type: none; font-size: 95%; margin: 0; padding: 0;}
#toc ol {border-bottom: 1px solid gray;}
#toc ol ol {border: 0;}
#toc li {border-right: 1px solid gray; border-top: 1px solid gray; padding: 0 1em 0 0;}
#toc li li li a {padding-left: 1em;}
#toc p {margin: 0; padding: 0; text-align: center; background: #bbb;}
#tocbody {width: 80%;}

a.edytor {float:right;color: #888; font-size: 10px;}


.skiplink {position:absolute; top:0;left:-9999px;}
.skiplink:focus, .skiplink:active, .skiplink:hover {position:absolute; top:0;left:0px;}

#footer {clear:both; margin:1em 0 0; border-top:1px dashed black; padding:0.5em 1em;background:#d5d5d5}
#footer p {margin:0; font-size:0.9em}

#znaczki {float:left;text-align:left !important;}
#znaczki img {max-height:2.5em;}
#search {clear:both;}