html, body {
	color: #555;
	background: #efefef;
	margin: 0; padding: 0;
	text-align: center;
}
@media screen {
html, body {background-image: url(/i/bg0.png);}
}

body, * html td, * html th {
	font: normal 86%/1.5em "Lucida Grande", "Trebuchet MS", Verdana, Geneva, Helvetica, sans-serif;
}
input, textarea {
	font: normal 100%/1.5em "Lucida Grande", "Trebuchet MS", Verdana, Geneva, Helvetica, sans-serif;
}
img {-ms-interpolation-mode:bicubic}
#browsehappypl {
	background: url(/i/bt1.png) repeat-y;
	margin: auto;	padding-left: 18px;
	text-align: left;
}
/* explorer/win hack + mac IE hack \*/
* html #browsehappypl {zoom:1}
/* I dont like hacks */
* html #browsehappypl {background-image: url(/i/bg1.png); width: 79%;}

#browsehappypl div {
	background: url(/i/bt2.png) repeat-y 100% 0%;
	padding-right: 17px;
}
/* explorer/win hack + mac IE hack \*/
* html #browsehappypl div {zoom:1}
/* I dont like hacks */
* html #browsehappypl div {background-image: url(/i/bg2.png);}

#browsehappypl div div {
	padding: 16px 0 2em;
	background: white;
	position: relative;
}
/* explorer/win hack + mac IE hack \*/
* html #browsehappypl div div { zoom:1}
/* I dont like hacks */

h1 {
	background: #c7cded url(/i/h.jpg) 0% 50% no-repeat;
	font-size: 24px; line-height: 100%;
	color: #060;
	text-align: left; text-shadow: white 0px 1px 8px;
	border: solid #747474; border-width: 1px 0;
}
/* explorer/win hack + mac IE hack \*/
* html #browsehappypl h1 {height: 220px;}
/* I dont like hacks */

h1 span {
	font-weight: normal; font-size: 0.9em;
	color: #d60;
	display: block;
	margin-left: 3em;
}

h2 img {float: right; margin-right: 1em;}
p.intro {font-weight: bold; margin-top: 1.3em; font-size: 110%;}
p.intro img {float: right; margin: 0 0 1ex 1ex; max-width: 35%;}
img.inilus {float: left; margin: 0.2em 1.2ex 0.3em 0; max-width: 35%;}
p.intro strong {font-size: 108%;}

div p {text-align: justify; text-justify: newspaper;}
blockquote p {text-align: left;}
p, table, h4 {margin: 1em 1.5em;}
ol {margin: 1em 1.2em 1em 4.5em; padding: 0;}
dl {margin: 1em 1.5em 2.5em;}
h2,h3 {margin: 1em 0 0.8em 0.5em;}
h3, h4 {color: #027;}
h2, legend {color: #070; text-shadow: #9b9 2px 3px 3px;}

dt {font-weight: bold; margin: 1em 0 0.5em 0; font-size: 120%;}
dd {margin: 0.3em 0 1em 0; padding-left: 3em;}
dd blockquote {margin: 0 0 1em 0; font-style: italic;}
dd ul {margin-top: 0;}

ul.dt dfn {font-weight: bold; font-style: italic;}

dd img {float: left; margin: 4px 8px 1px -1.5em; max-width: 35%;}
dt {clear: left;}

dl.quotes {width: 70%; min-width: 400px; margin: 1em auto; padding-right: 3.5em;}
* html dl.quotes {padding-left: 6.5em; width: 90%;}
.quotes dd {background: url(/i/q.png) no-repeat 95% 100%; padding-bottom: 1px; font-style: italic;}
.quotes dd blockquote {background: url(/i/q.png) no-repeat; padding-left: 16px;}
.prasaonas {font-size: 96%;}
.prasaonas dd {margin-top: 0;}
.prasaonas dt {margin-bottom: 0;}

samp {font-size: 1em; font: message-box; color: black; background: #eee; padding: 0.2em 0.5ex;}

span.note {color: gray; font-weight: normal; font-style: italic;}
p.note {border: 1px solid #afa8a8; padding: 0.6em; color: #766; background: #f8f3f3; clear: right; overflow:auto;}
* html p.note {height:1%;overflow:visible;}
p.note img {float:right;margin: 0 0 0 8px;}
.smallprint {font-size: 0.9em;}

abbr[title],acronym[title],span[title] {cursor: help;}
abbr[title]:hover,acronym[title]:hover,span[title]:hover,q[title]:hover {border-bottom: 1px dotted gray;}

* html acronym {border-bottom: 1px dashed #aaa;}

q {quotes: '\201E' '\201D' '\00AB' '\00BB';}
* html q {color: #333; font-style: italic;}

img.ie {float:none; margin: 0; color: #05f; font-weight: bold; font-size: 160%; font-style: normal;}

a img {border: 0;}
a:link, * html a:link q {color: #D60;}
a:visited, * html a:visited q {color: #976;}
a:hover, a:focus {color: #B00; text-decoration: none;}

ul.lista li {color:#888;font-size:0.95em;margin-bottom:0.6em;list-style:none;}
ul.lista li a {font-size:1.15em}

@media screen {
a.ext:link {color: #447;}
a.ext:visited {color: #836;}
a.ext:hover, a.ext:focus {color: blue;}
.noext a.ext {cursor: default;} /* sorry, too much offsite links */
a[href^="http"] {background: no-repeat url(/i/ex.png) 100% 30%; padding-right: 4px;} /* CSS3 selector, see http://www.w3.org/TR/css3-selectors */
a[href^="http"]:link {color: #447;}
a[href^="http"]:visited {color: #836;}
a[href^="http"]:hover, a[href^="http"]:focus {background-position: 100% 10%; }

p.screens a.ext {padding-right:0;background:transparent;}
}

dt a:link {color: #C30; text-decoration: none;}
dt a:visited {color: #B52; text-decoration: none;}
dt a:hover, dt a:focus {text-decoration: underline;}

.hyphen {white-space: nowrap;}

@media screen {
	#browsehappypl {width: 85%; max-width: 1280px; min-width: 530px;}
	#browsehappypl div div {min-height: 35em; background: white no-repeat url(i/wm.jpg) 100% 100%;}

	div > #back {right: -15px;}
	div #next {right: -15px;}
	#back, #next {white-space: nowrap; position: absolute; right: 0; padding: 0; margin: 0; }
	#back {top: 201px; font-size: 1.3em;}
	#next {bottom: 5em; font-size: 1.1em;}
	#back img, #next img {vertical-align: middle; margin-left: 1ex;}
	#back a, #next a {font-weight: bold; text-shadow: #335 1px 2px 3px;}
	#back a {color: white; text-decoration: none;}
	#next a {color: #383; text-decoration: none;}
	#next a:visited {color: #575;}
	#back a:hover, #back a:focus, #next a:hover, #next a:focus {text-shadow: #335 1px 3px 4px;}
	#back a:hover b, #back a:focus b, #next a b {text-decoration: underline;}
}

@media screen,tv {
	h1 {height: 136px; margin: 0; padding: 82px 50px 0 240px;}
}

@media screen and (min-width: 0px) {
	#back a::after {content: "BrowseHappy.pl"; position: absolute; left: -1px; top: 2px; color: white; font-weight: bold;} /* CSS3 pseudo-element, see http://www.w3.org/TR/2003/WD-css3-content-20030514/#syntax */
	#back a {color: #99b;}
}

@media screen,print {
	.fourbox {
		float: right;
		width: 320px;
		margin: 1em 0 1em 1.5em; padding: 0;
		text-align: center;
	}
	.fourbox li {
		list-style: none;
		float: left;
		display: inline;
		padding: 0; margin: 12px;
		border: 5px solid #ddd;
	}
	#browsehappypl .fourbox li:hover a, #browsehappypl .fourbox li a:hover,
	#browsehappypl .fourbox li:focus a, #browsehappypl .fourbox li a:focus {color: #120; border-color: #ccc; opacity: 1;}
	#browsehappypl .fourbox li a {
		width: 103px;
		padding: 84px 0 2px 2px;
		display: block;
		vertical-align: bottom;
		background: repeat-x 0% 82px url(/i/abg.png);
		font-size: 1.5em;
		font-weight: bold;
		text-align: left;
		text-decoration: none;
		text-shadow: white 0px 0px 3px;
		opacity: 0.9;
		color: #040;
		border: 2px solid #999;
	}
	.fourbox li:hover, .fourbox li:focus {opacity: 0.8;}
	#moz  {background: white no-repeat 103% 5% url(/i/moz.png);}
	#opr  {background: white no-repeat 100% 10% url(/i/opera.png);}
	#fox  {background: white no-repeat 59% 50% url(/i/fox.png);}
	#saf  {background: white no-repeat 50% 30% url(/i/safari.jpg);}
	#browsehappypl .fourbox li.more {border: 0;}
	#browsehappypl .fourbox li.more a {width: 260px; height: 1.4em; padding: 0; background: transparent; text-align: center; border: 0;}
}

hr {background: transparent; height: 1px; border: 1px solid #ddd; border-bottom: 0; width: 40%; margin: 1em auto;}

#stopka {text-align: center; margin: 3em 0 0; padding: 2em 0 0;}
#stopka li:before {content: " | ";}
#stopka li:first-child:before {content: "";}
#stopka li {display: inline; list-style: none; margin: 0; padding: 0;}
* html #stopka li {display: inline; list-style: none; margin: 0 1ex; padding: 0;}

.screens,.vote {float: right; text-align: center; display: inline; clear: right; padding: 0.3em; margin-top: 0; margin-bottom: 0; border: 1px solid #ccf; background: #eef;}
.screens a,.vote a {color: blue;}
.screens img,.vote img {display: block; margin: 0.5em;}

ol.kampania {font-weight: bold;}

.gestury img {vertical-align: middle; margin: 0.4em 0.5ex;}
.gestury th {width: 50px; text-align: right;}
.gestury td {padding: 0.7em 0;}
.gestury kbd {font: bold 100%/100% "Lucida Grande", "Trebuchet MS", Verdana, Geneva, Helvetica, sans-serif;}

.trzecia {font-family: serif; font-size: 1.2em;}
.cent {font-variant: small-caps;}
.foreign {font-style: italic;}
.email {font-family: monospace; font-style: normal; color: black; padding: 0 1ex;}

.mapa {font-size: 120%;}
.mapa li {font-size: 96%;}

.mapa a {text-decoration: none;}
.mapa a:link {font-weight: bold;}
.mapa a:visited {font-weight: normal;}

dt.active {color: #b00;}
dt.active + dd {color: #600;}
* html *> dt.active + dd {color: #555;} /* IE5 _-_ */

.slownik dt {display: run-in; margin-right: 1ex; margin-bottom: 0; font-size: 1.1em;}
.slownik dt + dd {margin-top: 0;}
.slownik dd {padding-left: 0;}
.slownik dt:after {content: ":";}
.slownik dfn a {color: inherit;}
* html .slownik dfn a {color: #444;}

.ms {font-family: arial, helvetica, sans-serif;}

#browsehappypl a.dic {color: inherit; text-decoration: none; font-style: italic; border-bottom: 1px dashed #ddd;}
* html #browsehappypl a.dic {color: #444;}
#browsehappypl a.dic:hover, #browsehappypl a.dic:focus {color: #04d; border-bottom: 0; text-decoration: underline;}

#browsehappypl a.myemail {color: blue; font-size: 110%;}
form {text-align: center;}
fieldset {width: 88%; margin: 2em auto; border: 3px double #ccc; padding: 1em; text-align: left;}
legend {font-size: 1.3em; margin-bottom: 0.5em; padding: 0 0.5ex;}
label {min-width: 12ex; width: 34%; text-align: right; display: block; float: left; margin: 0.5em 0.3em;}
input, textarea {min-width: 20ex; width: 60%; display: block; float: left; margin: 0.5em 0.3em;}
form br {clear: left;}
form input.submit {width: auto; margin: auto; float: none; text-align: center;}
form .error {border: 1px solid #faa; background: #ffe5e5; color: #500; text-align: center; padding: 0.3em 1em;}
p.msg {font-size: 1.3em; text-align: center; margin: 2em 0 5em; color: #353;}

img.ilus {display: block; margin: 1.5em auto 2em; max-width: 100%; text-align: center;}
p.ilus {text-align: center;}
p.ilus img {text-align: center; max-width: 100%;}

p.btn img {float: left; margin-right: 1em;}
p.btn img::after {clear: left; content: ""; display: block;}
p.btn {font-size: 0.88em; display: block; text-align: left; padding: 1em; border: 1px solid gray; color: black; background: #eee; padding: 0.5em;}
p.btn code.comment {color: #080;}
code {color: #229;}
p.btn code span {color: #229; white-space: nowrap;}
p.btn code.comment span {white-space: normal;}
p.btn code var {color: #805; font-style: normal; white-space: nowrap;}
p.btn br {clear: left;}

#idea {font-style: italic; font-family: verdana, helvetica, sans-serif;}
#idea span {font-weight: bold;}

.mmoz, .mfox, .mopr, .msaf, .mflo, .mnn, .mchr {
	background: no-repeat 0% 50%;
	padding-left: 22px; 
}
.mmoz {background-image: url(/i/mmoz.png);}
.mfox {background-image: url(/i/mfox.png);}
.mopr {background-image: url(/i/mopr.png);}
.msaf {background-image: url(/i/msaf.png);}
.mflo {background-image: url(/i/mflo.png);}
.mchr {background-image: url(/i/mchr.png);}
.mnn {background-image: url(/i/mnn.png);}

/* IE5... */
font + .mmoz,
font + .mfox,
font + .mopr,
font + .msaf,
font + .mflo,
font + .mnn {background: transparent;	padding: 0;}

#supp li {display: inline;}
#supp .patr {display: block;}