﻿/*	=reset and global
---------------------------------------------------------------------------- */
html,body,h1,h2,h3,h4,h5,h6,div,span,blockquote,p,address,form,fieldset,img,input,ul,ol,dl,dt,dd,li,hr,table,td,th,strong,em,sup,sub,dfn,ins,del,q,cite,var,samp,code,kbd,tt,textarea
	{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Arial;
}

a {
	cursor: pointer;
	color: #cccccc;
}

a:link,a:visited {
	text-decoration: underline;
	color: #FFF;
}

a:hover,a:active {
	color: #FFF;
	text-decoration: none;
}

ol,ul {
	list-style: none;
}

html,body {
	font-family: Arial;
	font-size: 12px;
	color: #969696;
}

html {
	background: url(images/footer_tlo.png);
}

body {
	display: block;
	background: #000000 url(images/addictive.jpg) center center no-repeat;
}

p {
	line-height: 19px;
}

h2 {
	font-size: 12px;
	display: block;
	height: 12px;
	overflow-y: hidden;
	text-transform: uppercase;
	color: #FFF;
}

h2:before {
	display: block;
	clear: both;
}

h3 {
	font-size: 12px;
	color: #00deff
}

hr {
	height: 1px;
	width: 238px;
	margin: 15px 0;
	background: url(images/hr.png) right 0 no-repeat;
}

em {
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	font-style: normal;	
}

address {
	margin-bottom: 10px;
	font-style: normal;
}

.active {
	display: block !important;
}

.none {
	display: none !important;
}

#test {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#wrapper {
	background: url(images/linia_blue.png) center 0 no-repeat;
}

/*	=top
---------------------------------------------------------------------------- */
#top {
	width: 100%;
	background: url(images/linia.png) center 134px no-repeat;
	margin-bottom: 6px;
}

#top .inner {
	width: 100%;
	background: url(images/linia_inverse.png) center 77px no-repeat;
}

#top .inner2 {
	width: 902px;
	margin: 0 auto;
	background: #000000 url(images/top_rog.png) 0 77px no-repeat;
	overflow: hidden;
	height: 135px;
}

#top h1 {
	width: 260px;
	height: 42px;
	overflow: hidden;
	float: left;
	margin: 45px 0 0 22px;
}

#top h1 a {
	display: block;
	color: #FFF;
	font-size: 14px;
}

#top h1 a:before {
	content: url(images/logo.png);
	display: block;
	clear: both;
}

#top .toolbar {
	float: right;
	padding-top: 33px;
	padding-left: 10px;
	height: 44px;
	background: url(images/linia_blue_krotka.png) 0 0 no-repeat;
}

#top .toolbar li {
	float: left;
	margin-right: 35px;
}

#top .toolbar a:hover,#top .toolbar a:active {
	color: #00deff;
}

#top .menu {
	float: right;
	width: 607px;
	background: url(images/linia1x1.png) 0 0 repeat-x;
}

#top .menu li {
	float: left;
	height: 47px;
	overflow: hidden;
	margin: 0 6px;
}

#top .menu a:hover img,#top .menu a.active img {
	margin-top: -47px;
}

#top .menu img {
	font-size: 18px;
	font-weight: bold;
}

/*	=footer
---------------------------------------------------------------------------- */
#footer {
	width: 100%;
	height: 111px;
	background: #000000 url(images/footer_tlo.png) 0 59px repeat-x;
	color: #787878;
}

#footer ul,#footer p {
	display: block;
	margin: 0 auto;
	clear: both;
	width: 856px;
}

#footer ul {
	padding: 24px 23px 0 23px;
	height: 35px;
	background: url(images/footer_ramka.png) 0 0 no-repeat;
}

#footer li {
	float: left;
	overflow: hidden;
	margin-right: 32px;
	height: 100%;
	background: url(images/footer_punktor.png) center bottom no-repeat;
}

#footer p {
	padding: 20px 23px 14px 23px;
	background: url(images/footer_tlo.png);
	white-space: nowrap;
}

#footer a:link,#footer a:visited {
	color: #787878;
}

#footer a:hover,#footer a:active {
	color: #00deff;
}

/*	=content
---------------------------------------------------------------------------- */
.content {
	width: 100%;
	background: #000000 url(images/linia_inverse.png) center 129px no-repeat;
}

.content .inner {
	width: 896px;
	margin: 0 auto;
	padding-left: 6px;
	padding-top: 76px;
	background: url(images/linia_zaokr.png) 0 0 no-repeat;
}

.content .inner2 {
	width: 896px;
	background: url(images/linia1x1.png) 0 53px repeat-x;
	overflow: hidden;
}

#glowna .inner {
	padding-top: 0;
}

#o-nas .inner {
	background-image: url(images/linia_onas.png);
}

#kontakt .inner {
	background-image: url(images/linia_kontakt.png);
}

#oferta .inner {
	background-image: url(images/linia_oferta.png);
}

#error404 .inner {
	background-image: url(images/linia_error.png);
}

#load {
	overflow: hidden;
	width: 100%;
}

.content h2 {
	margin: 21px 0 39px 0;
	clear: both;
}

.content .box {
	margin-bottom: -3990px;
	padding-bottom: 4000px;
	padding-right: 19px;
	float: left;
	background: url(images/linia_box.png) right 53px no-repeat;
	margin-left: 15px;
}

.content .box.last {
	background: none;
}

a.online {
	display: block;
	width: 117px;
	height: 30px;
	background-image: url(images/zobacz_online_tlo.png);
	text-align: center;
	overflow: hidden;
	color: #FFF;
	font-weight: bold;
	clear: both;
	line-height: 28px;
}

a.online:hover, a.online:active {
	color: #00deff;
	text-decoration: none;
}

/*	=ostatnia_realizacja
---------------------------------------------------------------------------- */
#glowna {
	position: relative;
	padding-top: 235px;
	background-position: center 288px !important;
}
#ostatnia_realizacja {
	width: 330px;
	height: 201px;
	padding: 17px 550px 17px 22px;
	overflow: hidden;
	position: relative;
	margin: -235px auto 0;
}

#ostatnia_realizacja h2 {
	width: 142px;
	margin-bottom: 15px;
}

#ostatnia_realizacja h2:before {
	content: url(images/naglowki/ostatnia_realizacja.png);
}

#ostatnia_realizacja h3 {
	color: #00deff;
	margin-bottom: 10px;
}

#ostatnia_realizacja p {
	color: #FFF;
	height: 80px;
}

#ostatnia_realizacja a.online {
	float: right;
	margin-top: 10px;
}

/*	=boxes
---------------------------------------------------------------------------- */
#powitanie {
	width: 294px;
	text-align: justify;
}

#powitanie h2:before {
	content: url(images/naglowki/witamy_na_stronie.png);
}

#oferta_glowna {
	width: 283px;
	margin-left: 0 !important;
}

#oferta_glowna p {
	margin-left: 18px;
	margin-bottom: 15px;
	font-weight: bold;
}

#oferta_glowna h2,.oferta h2 {
	padding-left: 15px;
}

#oferta_glowna h2:before,.oferta h2:before {
	content: url(images/naglowki/oferta.png);
}

#oferta_glowna li,.oferta li {
	display: block;
}

#oferta_glowna li a {
	display: block;
	width: 245px;
	height: 24px;
	padding: 12px 18px 0 18px;
	background: url(images/oferta_li_glowna.png) 0 -36px no-repeat;
}

#oferta_glowna li:first-child a {
	background-position: 0 100px;
	padding-top: 11px;
}

#oferta_glowna li a:hover {
	background-position: 0 0;
}

#oferta_glowna li:first-child a:hover {
	background-position: 0 -1px;
}

#oferta_glowna a:link,#oferta_glowna a:visited,.oferta a:link,.oferta a:visited
	{
	color: #969696;
	outline: none;
}

#oferta_glowna li a:hover,.oferta li a:hover,.oferta li a.active {
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
}

.oferta {
	width: 312px !important;
	min-height: 350px;
	padding-right: 0 !important;
}

.oferta a {
	display: block;
	height: 24px;
	padding: 12px 18px 0 18px;
	width: 312px;
	background: url(images/oferta_li.png) 0 35px no-repeat;
}

.oferta li a:hover,.oferta li a.active {
	background-position: 0 -1px;
}

.oferta_cat {
	width: 530px;
	text-align: justify;
	overflow: hidden;
}

.oferta_cat div {
	width: 530px;
	overflow: hidden;
}

.oferta_cat img {
	float: right;
	margin-left: 15px;
}

.oferta_cat#Strony_internetowe h2:before {
	content: url(images/naglowki/strony_internetowe.png);
}

.oferta_cat#Sklepy_internetowe h2:before {
	content: url(images/naglowki/sklepy_internetowe.png);
}

.oferta_cat#Identyfikacja_wizualna h2:before {
	content: url(images/naglowki/identyfikacja_wizualna.png);
}

.oferta_cat#Grafika h2:before {
	content: url(images/naglowki/grafika.png);
}

.oferta_cat#Projektowanie h2:before {
	content: url(images/naglowki/projektowanie.png);
}

.oferta_cat#Inne h2:before {
	content: url(images/naglowki/inne.png);
}

.oferta_cat h3 {
	font-size: 14px;
	color: #FFF;
	margin-top: 15px;
	margin-bottom: 5px;
}

.oferta_cat ul {
	list-style-type: circle;
	list-style-position: inside;
	padding-left: 10px;
}

.oferta_cat li {
	line-height: 20px;
}

#aktualnosci {
	width: 240px;
	padding-right: 0 !important;
}

#aktualnosci h2 {
	width: 90px;
}

#aktualnosci h2:before {
	content: url(images/naglowki/aktualnosci.png);
}

#aktualnosci p.data {
	font-size: 10px;
	color: #373737;
}

#zamowienie {
	width: 340px;
	padding-right: 0 !important;
}

#zamowienie h2 {
	width: 84px;
}

#zamowienie h2:before {
	content: url(images/naglowki/zamowienie.png);
}

#zamowienie li {
	width: 290px;
	padding-left: 40px;
	padding-top: 10px;
	display: block;
	background-repeat: no-repeat;
	background-position: 0 center;
	min-height: 40px;
	margin-bottom: 10px;
}

#zamowienie li.l1 {
	background-image: url(images/li1.png);
	background-position: 5px center !important;
}

#zamowienie li.l2 {
	background-image: url(images/li2.png);
}

#zamowienie li.l3 {
	background-image: url(images/li3.png);
}

#zamowienie li.l4 {
	background-image: url(images/li4.png);
}

#o-addictive, #misja {
	width: 280px;
	text-align: justify;
}

#o-addictive h2:before {
	content: url(images/naglowki/o_addictive.png);
}

#misja h2:before {
	content: url(images/naglowki/misja.png);
}

#zespol h2:before {
	content: url(images/naglowki/zespol.png);
}

#o-nas p {
	margin-top: 10px;
}

#zespol {
	width: 234px;
}

#zespol li {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

#zespol p {
	float: right;
	width: 168px;
	margin: 0;
	white-space: nowrap;
}

#zespol img {
	float: left;
}

#zespol strong {
	color: #00deff;
	display: block;
}

#zespol a {
	display: block;
}

#formularz {
	width: 480px;
	padding-right: 0 !important;
}

#formularz h2 {
	width: 173px;
}

#formularz h2:before {
	content: url(images/naglowki/formularz_kontaktowy.png);
}

#formularz p {
	margin-bottom: 10px;
}

#formularz .inputs {
	float: left;
}

.select {
	width: 214px;
	height: 18px;
	padding: 8px 0;
	background: transparent url(images/input_text.png) 0 0 no-repeat;
	position: relative;
	overflow: visible;
}

.select ul {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 34px;
	background: transparent url(images/select.png) 0 0 no-repeat;
	overflow: hidden;
	cursor: pointer;
}

.select ul li {
	width: 190px;
	display:block;
	height:15px;
	padding:3px 8px;
	clear:both;
	background:#000000;
	border-left: solid 1px #2b2b2b;
	border-right: solid 1px #2b2b2b;
	margin: 0 auto;
	font-weight: bold;
}

.select ul li:last-child {
	width: 192px;
	padding-bottom: 5px;
	border: none;
	background: #000000 url(images/select_bg.png) left bottom no-repeat;
}

.select ul li:hover {
	color: #FFF;
}

.select ul li:first-child {
	padding:10px 8px;
	height:14px;
	background: none;
	border: none;
	font-weight: normal;
}

.select ul li:first-child:hover {
	background: none;
}

select {
	display: block;
	margin: 0 auto;
	outline: none;
	cursor: pointer;
	border: none;
	width: 205px;
	height: 18px;
	color: #969696;
	background: #000000;
}

option {
	background: #000000;
}

input.text {
	display: block;
	clear: both;
	width: 192px;
	height: 15px;
	padding: 11px 11px 8px 11px;
	margin-top: 7px;
	background: transparent url(images/input_text.png) 0 0 no-repeat;
	color: #969696;
	overflow: hidden;
}

textarea {
	overflow: auto;
	float: left;
	width: 233px;
	height: 135px;
	margin-left: 8px;
	padding: 11px;
	background: transparent url(images/textarea.png) 0 0 no-repeat;
	color: #969696;
	font-size: 12px;
}

input.submit,input.reset {
	cursor: pointer;
	float: right;
	height: 30px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	font-size: 12px;
	margin-top: 9px;
	margin-left: 7px;
}

input.submit:hover,input.reset:hover {
	color: #00deff;
}

input.submit {
	width: 56px;
	background: transparent url(images/input_submit.png);
}

input.reset {
	width: 74px;
	background: transparent url(images/input_reset.png);
}

p.alert {
	color: #FFF;
	font-weight: bold;
	font-size: 11px;
	float: left;
	clear: left;
	margin-left: 5px;
	margin-top: 10px;
}

/*	=realizacje
---------------------------------------------------------------------------- */
#realizacje {
	background: #000000 url(images/linia.png) center 415px no-repeat;
}

#realizacje .innerreal {
	margin: 0 auto;
	width: 902px;
	position:relative;
	height:600px;
}

#realizacje ul.menu-real{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	padding: 20px 24px 0 24px;
	height: 25px;
	width: 243px;
	background: url(images/real_menu.png);
}

#realizacje ul.menu-real li {
	float: left;
	height: 8px;
	overflow: hidden;
	margin: 0 8px;
}

#realizacje a {
	outline: none;
}

#realizacje ul.menu-real a {
	display: block;
	overflow: hidden;
}

#realizacje ul.menu-real img {
	height: 16px;
	display: block;
}

#realizacje ul.menu-real a:hover img, #realizacje ul.menu-real a.active img{
	margin-top: -8px;
}

#realizacje div.scroll {
	position: absolute;
	left: 0;
	top: 48px;
	z-index: 10;
	padding-left: 4px;
	width: 287px;
	height: 360px;
	overflow: hidden;
}

#realizacje div.scroll ul {
	display: block;
	margin-top: 20px;
}

#realizacje div.scroll li {
	float: left;
	margin: 5px;
}

#realizacje div.scroll li a {
	display: block;
	opacity: 0.5;
}

#realizacje div.scroll li a:hover,#realizacje div.scroll li a.active {
	opacity: 1;
}

#realizacje div.scroll img {
	display: block;
}

#realizacje a.scroll {
	display: none;
	z-index: 100;
	text-indent: -1000px;
	background-color: #000000;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	height: 20px;
	width: 291px;
	overflow: hidden;
	cursor: pointer;
}

#realizacje a.scroll.prev {
	top: 0;
	background-image: url(images/scroll_gora.png);
}

#realizacje a.scroll.next {
	bottom: 0;
	background-image: url(images/scroll_dol.png);
}

#realizacje a.scroll:hover {
	background-position: 0 -20px;
}

#realizacja {
	position: absolute;
	z-index: 1;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	overflow: hidden;
	background: url(images/real_opis.png) 284px 415px no-repeat;
}

#realizacja .opis {
	position: absolute;
	left: 0;
	top: 415px;
	overflow: hidden;
	width: 265px;
	padding: 0 10px;
	padding-bottom: 10px;
}

#realizacja  h2 {
	color: #00deff;
	height: 14px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 11px;
}

#realizacja  p {
	line-height: 15px;
	font-size: 11px;
	margin-bottom: 10px;
	text-align: justify;
}

#realizacja ul {
	position: absolute;
	top: 516px;
	right: 0;
	display: block;
	padding: 5px 0;
}

#realizacja li {
	float: left;
	margin-right: 6px;
}

#realizacja ul a {
	display: block;
	opacity: 0.5;
	position: relative;
}

#realizacja ul a  span.ramka {
	display: block;
	width: 48px;
	height: 44px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/ramka_min.png);
}

#realizacja ul a:hover,#realizacja ul a.active {
	opacity: 1;
}

#realizacja  div.photo {
	position: absolute;
	top: 0;
	right: 0;
	padding-left: 9px;
	width: 603px;
	height: 516px;
	overflow: hidden;
	background: #000000 url(images/loader.gif) center center no-repeat;
}

/*	=polec
---------------------------------------------------------------------------- */
#polec {
	display: table;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(images/polec_przyslona.png);
}

#polec .inner {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

#polec .okno {
	position: relative;
	margin: 0 auto;
	padding: 0 13px;
	width: 272px;
	height: 216px;
	background: url(images/polec_tlo.png) 0 0 no-repeat;
}

#polec h2 {
	display: block;
	padding-top: 13px;
	margin-bottom: 10px;
	overflow-x: hidden;
	height: 12px;
}

#polec h2:before {
	content: url(images/naglowki/polec_title.png);
	display: block;
	clear: both;
}

#polec p {
	font-size: 14px;
	padding-top: 95px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
}

#polec label {
	display: none;
}

#polec input.text {
	background: url(images/input_polec.png);
	width: 247px;
}

#polec a.close {
	position: absolute;
	top: -21px;
	right: -21px;
	width: 42px;
	height: 42px;
	background: url(images/polec_close.png) 0 0 no-repeat;
	overflow: hidden;
	text-indent: -1000px;
}

#polec a.close:hover {
	background-position: 0 -42px;
}

#error404 h2:before {
	content: url(images/naglowki/error.png);
}

#error404 p {
	height: 150px;
	font-size: 15px;
	text-align: center;
}