/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * XHTML & CSS (c) Paweł "Greenek" Golonko (pgolonko@gmail.com)
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* =reseting & global
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body, div, span, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, p, pre, blockquote,
legend, form, fieldset, table, tr, th, td,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var {
	margin: 0; padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-variant: inherit;
	font-weight: inherit;
	outline: 0;
	vertical-align: baseline;
}

abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
body { line-height: 1; background-color: #FFF; }
caption, th { text-align: left; }

body {
	font: normal 100% Tahoma, Verdana, sans-serif;
	background: #E8E8E8 url('../images/background.gif') 0 0 repeat-x;
	text-align: center;
}

a, a:visited { text-decoration: none; }
ul, ol { list-style: none; }
img { border: none; }
strong { font-weight: bold; }

.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }

a {
	color: #4D5967;
}
a:hover { text-decoration: underline }

#tooltip {
	background-color: #FFF;
	border: 2px solid #EEE;
	font-size: .69em;
	opacity: 0.85;
	padding: 5px;
	position: absolute;
	text-align: justify;
	width: 200px;
	z-index: 3000;
	-moz-border-radius: 10px;
	color: #000;
}
#tooltip h3 {
	padding: 0;
	margin: 0;
}

/* =layout
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#page {
	width: 739px;
	padding: 0 6px 47px;
	background: #FFF;
	text-align: left;
	margin: 0 auto;
	font-size: .69em;
}

#top {
	height: 250px;
	border-top: 6px solid #D3D3D3;
}
#top h1 {
	width: 369px;
}
#top h1 a {
	display: block;
	width: 369px; height: 189px;
	background: #E6E6E6 url('../images/top.gif') 0 0 no-repeat;
	overflow: hidden;
	text-indent: -999em;
}

#top #nav {
	width: 347px; height: 17px;
	background: url('../images/background_nav.gif') 0 0 repeat-x;
	padding: 10px 0 0 22px;
}
#top #nav ul {
	height: 9px;
}
#top #nav li {
	display: inline;
	height: 9px;
}
#top #nav a {
	float: left;
	overflow: hidden;
	padding-top: 10px;
	height: 0 !important;
	height /**/:9px; /* for IE5/Win only */
}
#top #nav #nabout a {
	background: url('../images/nabout.gif') 0 0 no-repeat;
	width: 53px;
}
#top #nav #nshops a {
	background: url('../images/nshops.gif') 0 0 no-repeat;
	width: 55px;
}
#top #nav #ndistribution a {
	background: url('../images/ndistribution.gif') 0 0 no-repeat;
	width: 91px;
}
#top #nav #ndownloads a {
	background: url('../images/ndownloads.gif') 0 0 no-repeat;
	width: 82px;
}
#top #nav #nforum a {
	background: url('../images/nforum.gif') 0 0 no-repeat;
	width: 43px;
}

#top #flash {
	width: 368px; height: 250px;
	float: right;
}

#content {
	margin: 6px 0;
}
#content .box {
	width: 215px; height: 234px;
	padding: 12px 15px 10px;
	position: relative;

}
#content .box p.desc {
	font-size: .91em;
	overflow: hidden;
	height: 84px;
	color: #223140;
	text-align: justify;
}
#content .line4th p.desc {
	width: 170px; height: 114px;
	margin-top: 12px;
}
#content .box img {
	margin: 5px 0 5px;
	width: 215px; height: 88px;
}
#content .line4th img {
	width: 167px; height: 196px;
	position: absolute;
	top: 5px; right: 5px;
	margin: 0;
}
#content .licenced {
	width: 133px !important;
}
#content .line4th {
	width: 338px; height: 184px;
	background: #E8E8E8;
}
#content .last .line4th {
	margin-left: 1px;
}
#content .line5th {
	width: 709px;
	background: #DDE0E5;
}
#content .line5th img {
	width: auto; height: auto;
	margin: 0 0 0 30px;
}
#content .line5th.box {
	height: 130px;
}
#content .line5th p.desc {
	margin-top: 12px;
}
#content .line5th .more {
	left: 270px;
	bottom: 10px;
}
#content .container {
	margin: 0 2px 4px 0;
	float: left;
}
#content #text .container {
	margin: 10px 10px 10px 0;
	width: 215px;
}
#content .last {
	margin-right: 0 !important;
}

ul.errors li {
	list-style: inside circle;
	margin-left: 2em;
}

#text a {
	color: #4D5967;
	text-decoration: underline;
}

.more {
	display: block;
	width: 58px; height: 20px;
	background: url('../images/morebtn.gif') 0 0 no-repeat;
	color: #FFF;
	font: bold .73em Verdana;
	text-align: center;
	padding-top: 4px;
	position: absolute;
	right: 15px;
	bottom: 4px;
	margin-top: 5px;
}
#content .line4th .more {
	left: 127px; bottom: 12px;
}

#text {
	text-align: justify;
	background-color: #EBEBEB;
	padding: 10px;
	line-height: 150%;
}
#text p {
	margin-bottom: 5px;
}

h2 {
	clear: both;
	font: bold 2em "Trebuchet MS", "Lucida Grande", Georgia, sans-serif;
}
h3 {
	font: bold 1.09em "Trebuchet MS", "Lucida Grande", Georgia, sans-serif;
	margin-left: 2px;
}

#products #sidebar {
	float: left;
	width: 170px;
}

#products #sidebar #menu {
	background: url('../images/shadow_s_tl.gif') top left no-repeat;
	font: bold 1.4em "Trebuchet MS", "Interstate", Verdana, sans-serif;
	padding-top: 6px;
}
#products #sidebar #menu li {
	background: #DDE0E5 url('../images/menu_arrow.gif') 8px center no-repeat;
	margin-bottom: 2px;
	padding: 12px 0 12px 50px;
	text-transform: uppercase;
}
#products #sidebar #menu a {
	color: #7A8894;
}
#products #sidebar #menu a:hover {
	color: #285173;
}

#products #body {
	float: right;
	text-align: justify;
	width: 562px;
}
#products #body #ctext {
	color: #122D3E;
	padding: 26px;
}
#products #body #ctext h2 {
	color: #009C00;
	font-size: 1.36em;
	font-weight: bold;
	margin-bottom: 1em;
}
#products #body #ctext p {
	font: normal 1em Tahoma, Verdana, sans-serif;
	margin-bottom: 1em;
}

img.foto {
	background: #EEE;
	border: 1px solid #DDD;
	padding: 3px;
	-moz-border-radius: 2px;
}
img.foto.left {
	float: left;
	margin: 5px 15px 5px 0;
}
img.foto.right {
	float: right;
	margin: 5px 0 5px 15px;
}

#rolki {
	padding-bottom: 20px;
}
#rolki li {
	background: none !important;
	float: left;
	margin: 0 17px 17px 0;
	_margin-right: 16px;
	padding: 0 !important;
}
#rolki li img {
	width: 110px;
}

#rolki li a {
	filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;
	height: 110px;
	display: block;
}
#rolki li a:hover, #rolki li a.active {
	filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;
}

#opis {
	float: left;
	margin-bottom: 20px;
	width: 285px;
}
#opis ul li ul {
	margin-left: 2em;
}
#opis li, #ctext li {
	background: url('../images/opis_arrow.gif') 0px 2px no-repeat;
	padding-left: 16px;
}
#ctext ul {
	margin-bottom: 1em;
}

#gallery {
	clear: both;
	width: 225px;
	float: left;
}
#gallery img.medium {
	border-bottom: 5px solid #EEE;
	padding-bottom: 10px;
}

#techtalk {
	border-top: 5px solid #F0F0F0;
	clear: both;
	padding-top: 10px;
}
#techtalk a {
	filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;
	margin-right: 12px;
}
#techtalk a:hover {
	filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;
}

/* box */
.box1 { background-color: #DDDFE4; }
.box2 { background-color: #EBEBEB; }
.box3 { background-color: #E7E8EB; }

.transformers { background: #EBEBEB url('../images/transformers.gif') bottom left no-repeat; }
.hotwheels { background: #DDDFE4 url('../images/hotwheels.gif') bottom left no-repeat;  }
.barbie { background: #EBEBEB url('../images/barbie.gif') bottom left no-repeat; }

/* shadows */
.shadowtl {	padding-top: 10px; background: url('../images/shadow_tl.gif') 0 0 no-repeat; }
.shadowtc {	padding-top: 10px; background: url('../images/shadow_tc.gif') 0 0 no-repeat; }
.shadowtr {	padding-top: 10px; background: url('../images/shadow_tr.gif') 0 0 no-repeat; }
.shadowbl { padding-bottom: 10px; background: url('../images/shadow_bl.gif') bottom left no-repeat; }
.shadowbc { padding-bottom: 10px; background: url('../images/shadow_bc.gif') bottom left no-repeat; }
.shadowbr {	padding-bottom: 10px; background: url('../images/shadow_br.gif') bottom right no-repeat; }

#footer {
	text-align: center;
	clear: both;
	font: bold 1em Tahoma, Verdana, sans-serif;
	color: #4D5967;
	padding: 20px 0 7px;
	border-bottom: 6px solid #D5D5D5;
}
#footer a {
	color: #4D5967;
	margin: 0 1ex;
}
#footer a:hover {
	text-decoration: underline;
}

/* Form */

form {
	margin: 10px 0;
}

form .formdiv {
	border: 1px solid #EEE;
	clear: both;
	margin-bottom: 4px;
	padding: 4px 10px;
}

form label {
	float: left;
	margin-top: 4px;
	width: 120px;
}

form input {
	width: 300px;
}

form textarea {
	width: 300px;
	height: 75px;
}

/* Others */

ul.action {
	margin: 10px 0;
	overflow: auto;
}

ul.action li {
	display: inline;
	float: left;
}

ul.action li a {
	background: #EEE;
	border: 1px solid #CCC;
	color: #333;
	display: block;
	float: left;
	margin-right: 6px;
	padding: 4px 6px;
}

ul.techtalk {
	overflow: auto;
}

ul.techtalk li {
	border: 1px solid #EEE;
	float: left;
	margin: 0 3px 3px 0;
	text-align: center;
	width: 100px;
}

ul.techtalk li label {
	float: none !important;
}

ul.techtalk li input {
	width: auto !important;
}

table.list {
	clear: both;
	width: 100%;
}

table.list th {
	border-bottom: 1px solid #DDD;
	font-weight: bold;
}