@charset "utf-8";

/* ------------------------------------
 * --           ZAWARTOŚĆ            --
 * ------------------------------------
 * 1. Reset
 * 2. Główny layout
 * 3. Strona główna
 * 4. Formularze
 * 5. Szablon oferta
 * 6. Portfolio / referencje
 * 7. Klasy używane w różnych miejscach
 */

/* ********** 1 ********** */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, cite, code, del, dfn, em, font, img, ins, kbd, 
q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, hr, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; 
	padding: 0; 
}

html, body  {
	background: #233f5b url(../images/common/b-bg-l.gif) repeat-x 0 0;
	color: #f0f0f0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 100%;
	line-height: 18px;
	text-align: left;
}

:root { overflow-y: scroll !important; }

img, fieldset { border: 0 none; }

form :focus { outline: 0 none; }

a, em, strong, span, acronym, abbr, q, cite {
  font-size: inherit;
  font-variant: inherit;	
  font-style: inherit;
  font-weight: inherit;
	font-family: inherit;
  color: inherit;	
}

em { font-style: italic; }

strong { font-weight: bold; }

em strong, strong em {
	font-weight: bold;
  font-style: italic;
}

acronym, abbr {
	border-bottom: 1px dotted;	
	cursor: help;
}

q, cite, blockquote { quotes: none; }

a:link, a:active, a:visited { 
	text-decoration: underline;
	color: #dce682;
}

a:hover { 
	text-decoration: none;
	color: #cddb4a;
}

a:focus {
	border: 0 none;
	outline: 0 none;
}

table { /* nadać 'cellspacing="0"' w kodzie */
	border: 0 none;
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align: top;
	empty-cells: show;
	margin-bottom: 18px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

h1, h2, h3, h4 { color: #cddb4a; }

h1 { 
  font-size: 24px; 
  line-height: 36px;
  margin-bottom: 18px; 
}

h2, #sidebar h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	 
  font-size: 24px;
	line-height: 18px;
  margin: 0 0 18px;
}

#content h3 { 
  font-size: 18px;
  margin: 0 0 18px;	
}

h4, h5, h6 { 
  font-size: 12px; 
	font-weight: bolder;
}

h4 { 
	font-size: 14px;
	margin: 6px 0 12px;
}

p, address {
	font-weight: normal;
	font-style: normal;
	margin: 0 0 18px;
}

ol, ul { 
	list-style: none; 
  margin-bottom: 18px; 
}

/* ********** 2 ********** */

/* ********************************************************** *
 * gdyby stopka miała 'przylegać' do dołu okna przeglądarki 
 * dodać jeszcze jeden pojemnik obejmujący wszystko - 
 * 'mainWrapper' z tłem przeniesionym z 'contentWrappera' 
 * (min-height: 100%; position: relative; width: 100%; 
 * min-width: 960px; margin: 0 auto; - nie zapomnieć o IE6 
 * expression), stopka wypozycjonowana absolutnie względem 
 * niego, nadać 'contentWrapperowi' margin dolny o wysokości 
 * stopki i górny równy sumie wysokości banera i menu, 
 * baner i menu wrzucić w warstwę i pozycjonować ją 
 * absolutnie względem 'mainWrapper'
 * ********************************************************** */
 
/* ********************************************************** *
 * gdyby stopka miała 'rozwijać się do dołu przy fullscreenie
 * zawinąć wszytko we 'wrapper', nadać mu tło, 
 * które teraz ma body (min-width: 960px; width: 100%; 
 * margin: 0 auto; - nie zapomnieć o IE6 expression), body i 
 * html nadać kolor, który ma ostatni piksel stopki
 * ********************************************************** */

/* górne menu */

#mainNav {
	height: 50px;
	margin: 0 auto;
	overflow: hidden;
	width: 958px;
	padding-left: 2px;
}

#mainNav li {
	float: left;
	height: 27px;
	overflow: hidden;	
	padding: 13px 11px 0 10px;
}

#mainNav a {
	background: no-repeat 0 0;
	display: block;
	height: 27px;
	overflow: hidden;
	text-indent: -99999px;	
}

/* klasę 'active' należy nadać tej pozycji, 
 * która odpowiada stronie, na której jest użytkownik */
#mainNav a:hover, #mainNav a.active { background-position: 0 -27px; }

/* graficzne odpowiedniki tekstu - niestandardowa czcionka */
#mainNav #home {
	background-image: url(../images/common/home.gif);
	width: 75px;
}

#mainNav #about {
	background-image: url(../images/common/about.gif);
	width: 76px;
}

#mainNav #www {
	background-image: url(../images/common/www.gif);
	width: 132px;
}

#mainNav #seo {
	background-image: url(../images/common/seo.gif);
	width: 132px;
}

#mainNav #dedicatedApps {
	background-image: url(../images/common/apps-ded.gif);
	width: 177px;
}

#mainNav #apps {
	background-image: url(../images/common/apps.gif);
	width: 141px;
}

#mainNav #contact {
	background-image: url(../images/common/contact.gif);
	width: 76px;
}

/* baner */

#masthead {
	height: 187px;
	position: relative;
	z-index: 0;
	width: 100%;
}

.rightBodyBgPart {
	background: url(../images/common/b-bg-r.gif) repeat-x 0 0;
	display: block;
	height: 186px;
	position: absolute; top: 0; right: 0; z-index: 1;
	width: 50%;
}

#masthead .inner {
	background: url(../images/common/masthead-bg.jpg) repeat-x 0 0;
	height: 187px;
	margin: 0 auto;
	position: relative;
	width: 960px;
	z-index: 2;
	overflow: hidden;	
}

/* logo */

h1#logo {
	background: url(../images/common/logo.png) repeat-x 0 0;
	height: 79px;
	margin: 35px 32px 0 17px;
	width: 288px;
	float: left;
}

h1#logo a {
	display: block;
	height: 100%;
	text-indent: -99999px;
	width: 100%;
}

#topSlogan {
	background: url(../images/common/top-slogan.png) repeat-x 0 0;
	height: 30px;
	margin: 69px 0 0 0;
	overflow: hidden;
	width: 314px;
	text-indent: -99999px;
}

/* pojemnik z zawartością */

#contentWrapper {
	background: url(../images/common/content-divider.gif) repeat-y 639px 0;	
	margin: 0 auto;
	padding: 0 10px;
	width: 940px;
}

#contentWrapper, #content, #sidebar, #footer { overflow: hidden;	}

#content, #sidebar { padding: 29px 0 0; }

/* ------------------------------------------------------------------------------------------ 
 * ten pojemnik nie byłby mi niezbędny w kolumnach, ale cięzej się pracuje z czyimś kodem, 
 * więc dodałem go, dla ułatwienia życia - nadaje wewnętrzne boczne odległości kolumnom; 
 * na stronie głownej w lewej kolumnie ta klasa zostaje użyta dwa razy, ze względu na to, 
 * że grafika (ten banerek z napisem 'Spójrz na sieć z innej perspektywy') wymyka się trochę 
 * ramom (wystającą krawędzią laptopa), na pozostałych podstronach pojemnik o klasie 'inner' 
 * obejmuje całą zmienną zawartość i jest tylko jeden 
 * ------------------------------------------------------------------------------------------ */
#contentWrapper .inner { padding: 0 20px; }

/* lewa kolumna */
#content {
	float: left;
	margin: 0 20px 0 0;
	width: 620px;
}

/* prawa kolumna */
#sidebar {
	background: url(../images/common/outstanding-corner.jpg) no-repeat 80px 0;	
	float: left;	
	width: 300px;	
}

/* menu boczne */
#submenu {
	border-top: 1px solid #2b4662;		
}

#submenu li {
	background: url(../images/common/submenu-hov.gif) repeat-x 0 0;			
}
	
#submenu li a {
	background: url(../images/common/submenu.gif) repeat-x 0 0;			
	border-bottom: 1px solid #2b4662;	
	color: #5e8bb6;
	display: block;
	font-weight: bolder;
	letter-spacing: 1px;
	line-height: 34px;
	margin-bottom: 1px;
	padding: 0 20px;
	text-decoration: none;	
}

#submenu li a.active, #submenu li a.active:hover {
	background: 0 none;
	border-left: 3px solid #5e8bb6;
	color: #5e8bb6;
}

#submenu li a:hover {
	background: 0 none;
	border-left: 3px solid #96b9da;
	color: #96b9da;
}

/* miniaturka scrrena */
.projectThumb {
	border: 1px solid #96b9da;
	display: block;
	height: 88px;
	width: 140px;
	margin: 0 0 18px;
}

.projectThumb img {
	display: block;
	opacity: 0.9;
}

.projectThumb:hover { border-color: #cddb4a }

.projectThumb:hover img {
	display: block;
	opacity: 1;
}

/* dane kontaktowe w prawej kolumnie */
.contactList li {
	padding: 0 0 0 26px;
}

.contactList .gg { background: url(../images/common/gg.gif) no-repeat 1px 1px; }
.contactList .phone { background: url(../images/common/phone.gif) no-repeat 2px 1px; }
.contactList .mail { background: url(../images/common/mail.gif) no-repeat 1px 5px; }

/* troszkę inny wygląd linka do maila w prawej kolumnie */
.contactList .mail a { text-decoration: none; }
.contactList .mail a:hover { text-decoration: underline; }

/* *************************************************************** *
 * --------------------- linki typu 'więcej' ---------------------
 * jeśli link ma być w następnej linii, wyrównany do prawej
 * należy go umieścić w span o klasie 'readMore' i NIE NADAWAĆ 
 * już samemu linkowi żadnej klasy, jeśli link ma być wyświetlony
 * w jednej linii z tekstem należy nadać mu klasę 'readMore', ale
 * NIE UMIESZCZAĆ już go w span
 * *************************************************************** */

span.readMore, a.readMore {
	font-weight: bold;
	height: 18px;	
	overflow: hidden;
}

span.readMore {
	display: block;
	text-align: right;
}

span.readMore a, a.readMore {
	padding-right: 14px;
	text-decoration: none !important;
}

span.readMore a {
	background: url(../images/common/arr.gif) no-repeat 100% 0;		
	display: inline-block;
}

span.readMore a:hover { background: url(../images/common/arr.gif) no-repeat 100% -18px;	}

a.readMore { 
	background: url(../images/common/arr-inline-hov.gif); /* to służy tylko wczytaniu */
	background: url(../images/common/arr-inline.gif) no-repeat 100% 0;
}

a.readMore:hover { background: url(../images/common/arr-inline-hov.gif) no-repeat 100% 0; }

/* stopka */

#footer {
	background: #4880b6 url(../images/common/footer-bg.gif) repeat-x 0 0;	
	height: 58px;
	min-width: 960px;
	width: 100%;
}

#footer .inner {
	margin: 0 auto;
	padding: 23px 10px;
	width: 940px;
}

/* linki w stopce */

.xhtml, .css {
	float: left;
	padding: 0 20px 0 0;
}

.xhtml a, .css a {
	display: block;
	height: 15px;
	overflow: hidden;
	width: 80px;
	text-indent: -99999px;
}

.xhtml a { background: url(../images/common/xhtml.gif) no-repeat 0 0;	}
.css a { background: url(../images/common/css.gif) no-repeat 0 0;	}

.copyrights {
	color: #f9f9f9;		
	float: right;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
}

/* ********** 3 ********** */

#homeBigEyeCatcher {
	display: block;
	margin: -6px 0 10px 2px;
	border: 0 none !important;
}

/* zajawki */
.callouts {
	overflow: hidden;
}

/* 
 * lista zajawek jeśli wystąpi na stronie głównej powinna mieć dodatkową klasę
 * 'inner' - robi wtedy za pojemnik nadający wewn. odległości, a unikamy 
 * niepotrzebnych tagów, gdy jest na innej podstronie, jest zawarta w 'inner', 
 * więc powinna mieć tylko klasę 'callouts'
 * nie powinno byś więcej niż dwie zajawki, ponieważ to nie tabela, można dawać
 * pod sobą kolejne listy o klasie callouts - coś jak wiersze tabeli - gdybym
 * nie brał pod uwagę IE6 możnaby to zrobić inaczej, ale nie można go jeszcze 
 * zignorować niestety :(
 * pojedyncza zajawka nie może w sobie zawierać list - nie chciałem namnażać 
 * klas, żeby nie wpaść w classitis,
 * pod kątem 'równości długości' zajawek zastosowałem przycinanie tekstu w css:
 * nagłowek do 1 linii (18-20px), a akapit do trzech - jeśli zajawka będzie 
 * generowana dynamicznie to najlepiej pobrać ciąg o określonej długości znaków -
 * w taki sposób, aby razem pobrana ilość tekstu wraz z linkiem 'więcej' 
 * nie przekroczyła trzech linii
 * jeśli zajawka będzie statycznie wrzucona, to wogole nie ma problemu
 * PRZYCINANIA MOŻNA SIĘ POZBYĆ - USUWAJĄC DLA AKAPITU I NAGŁÓWKA ZAWARTEGO
 * W ZAJAWCE WŁAŚCIWOŚCI MAX-HEIGHT ORAZ OVERFLOW
 * */

/* nadpiska dla 'inner', gdy jest listą zajawek */
#contentWrapper ul.inner.callouts { padding: 0 18px; }

.callouts li {
	background: url(../images/common/callout-mid.gif) repeat-y 0 0 !important;
	float: left;
	width: 282px;
	padding-left: 0 !important;
}
.firstInRow {
	margin-right: 20px;
}
.callouts li .calloutBottom {
	background: url(../images/common/callout-bot.gif) no-repeat 0 100%;
	overflow: hidden;
	min-height: 50px;
	padding: 18px 19px;
	width: 244px;
}

.callouts li .calloutTop {
	background: url(../images/common/callout-top.jpg) no-repeat 0 0;
	width: 282px;
}

.callouts li p {
	font-size: 11px;
	margin: 0;
	max-height: 54px;
	overflow: hidden;
}

#content .callouts h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	 
  margin: 0 0 10px;
	height: 20px;
	overflow: hidden;
}

/* 'więcej' w zajawkach */

.callouts a.readMore {
	background: url(../images/common/arr-inline-blue-hov.gif); /* to służy tylko wczytaniu */
	background: url(../images/common/arr-inline-blue.gif) no-repeat 100% 0;
	color: #8ab8e5;
}

.callouts a.readMore:hover {
	background: url(../images/common/arr-inline-blue-hov.gif) no-repeat 100% 0;
	color: #9acdff;
}

/* ********** 4 ********** */

/* w bloku głównym mam 580px do rozdysponowania */

form {
	margin: 0 20px 18px;
	width: 400px;
}

#content .inner form li {
	background: none !important;
	padding-left: 0 !important
}

/* zewnętrzne punkty w formularzu oraz ich elementy */
.formSection {
	border-bottom: 1px dotted #3a5774;
	overflow: hidden;	
	padding: 2px 0 10px 10px;
	margin: 0 0 6px;
}

/* lista w zewnętrznym punkcie nie ma marginesów */
.formSection ul {
	margin: 0;
}

/* wygląd wybranych labeli + kilku akapitów w formularzu */
label {
	padding: 0 0 0 2px;
}

label.fixed { /* labele dla pól tekstowych i select */
	float: left;	
	padding: 0 10px 0 0;
	width: 160px; /* szerokość labela dla pól tekstowych, select, jeśli zajdzie potrzeba zmian */
}

.labelStyled {
/*	color: #CDDB4A; */
	font-weight: bolder;
	margin-bottom: 0;
}

p.labelStyled {
	margin-bottom: 6px;
}

/* pola tekstowe i textarea */
.textInput, select, optgroup {
 	background: #ededed;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}

input.textInput {
	height: 16px;
}

textarea.textInput {
	width: 388px
}

textarea { 
	margin: 6px auto 0;
	overflow: auto; 
	resize: none;
}

.textInput, select {
	border: 1px solid #96b9da;
	width: 210px;
}

select {
	height: 19px;
	width: 212px;
}

select * {
	color: #000;	
	font-style: normal !important;
}

.choicesList input, input[type="checkbox"] {
	vertical-align: middle;
}

input[type="radio"] {
	vertical-align: text-top;
}

.choicesList label {
	font-family: Arial, Helvetica, sans-serif;
}

.textInput:focus, select:focus {
	border: 1px solid #cddb4a;
}

/* przyciski formularza */

#action {
	margin: 0 auto;
	overflow: hidden;
	width: 210px; /* zsumowany wymiar przycisków + 6px odległości między nimi */
}

#action input {
	background: #6f88a1 url(../images/common/but-100.gif) no-repeat 0 0;
	border:medium none;
	color:#fff;
	cursor:pointer;
	display:block;
	font-size: 11px;
	font-weight: bold;
	height:22px;
	line-height: 22px;
	padding: 0;
	text-align: center;	
	width: 102px;
}

#action input:hover {
	background: #6f88a1 url(../images/common/but-100.gif) no-repeat 0 -22px;
}

#action input.fl_left {
	margin-right: 6px;
}

#action input.fl_right {
	margin-left: 6px;
}

/* błędy lub powdzenie 
 * w zależności od tego które - nadajemy
 * */

.error { 
	background: #f0f0f0;
	border: 2px solid #bd1515;
	color: #bd1515; 
	font-weight: bold;
	padding: 7px 10px;
	margin-bottom: 18px;
}

.success {
	border: 2px solid #f0f0f0;
	font-weight: bold;
	padding: 7px 10px;
	margin-bottom: 18px;
}
/* ********** 5 ********** */

/* obrazki */
#content img {
	border: 1px solid #96b9da;	
}

img.fl_left {
	margin: 0 20px 18px 0;
}

img.fl_right {
	margin: 0 0 18px 20px;
}

/* tekst */

/* jeśli jakieś sekcje chcemy dodatkowo oddzielić linią 
 * ostatniemu elementowi sekcji nadajemy tę klasę */
.endOfSection {
	border-bottom: 1px dotted #3a5774 !important;
	overflow: hidden;
	padding-bottom: 18px !important;
}

/* tabele */

table.centered { /* wyśrodkowana */
	margin: 0 auto 18px;
}

table.full { /* zamiast nadawać width nadaję klasę */
	width: 100%;
}

th, td {
	border: solid #3a5774;
	border-width: 0 1px 1px;
	padding: 3px 10px;	
}

th {
	font-weight: bold;
	background: #6f88a1;
	border: 1px solid #96b9da;
	text-align: left;
}

/* listy w głównej kolumnie */

#content .inner ol {
	list-style: outside decimal;
	padding: 0 0 0 30px;
}

#content .inner ul li {
	background: url(../images/common/arr-marker.gif) no-repeat 10px 7px;
	padding-left: 30px;
}

#content .inner ol ul {
	margin: 2px 0;
}

#content .inner ol ul li {
	background: url(../images/common/arr-marker.gif) no-repeat 0px 7px;
	padding-left: 20px;
}

/* ********** 6 ********** */
#rList { /* id to skrót od referencesList a jednocześnie realizationsList */
	padding: 0 !important;
	border-top: 1px dotted #3a5774 !important;
}

.details { /* niestety ze względu na IE używam klaasy zamiast selektora dziecka */
	background: none  !important;
	border-bottom: 1px dotted #3a5774 !important;
	padding: 18px 20px !important;
}

.divided {
/*	background: url(../images/common/divider.gif) repeat-y 231px 0; */
	overflow: hidden;	
}

.graphics {
	float: left;
	width: 220px;
	padding: 0 10px 0 0;
}

.graphics a {
	display: block;
	margin-top: 18px;
}

.graphics a:first-child {
	margin-top: 0;
}

.graphics img {
	display: block
}

.graphics a:hover img {
	border-color: #cddb4a !important;
}

.divided .descr {
	margin-left: 231px;
	padding-left: 10px
}

.descr p {
	font-size: 11px;
}

.descr .logotype {
	border: 0 none !important;
}

.descr img.fl_left {
	margin: 0 10px 9px 0;
}

.descr img.fl_right {
	margin: 0 0 9px 10px;
}

#content .descr h3 a:link, 
#content .descr h3 a:active, 
#content .descr h3 a:visited { 
/*	color: #cddb4a; */
	text-decoration: none;
}

#content .descr h3 a:hover { 
	text-decoration: underline;	
/*	color: #dce682; */
}

#content .descr h3 a:hover { 
	text-decoration: underline;	
/*	color: #dce682; */
}

.descr span.readMore {
	text-align: left;
	font-size: 11px;
}

.descr span.readMore a {
	padding-right: 0;
}

.descr span.readMore a {
	display: inline;
	background: none !important;
}

.descr span.readMore a:hover {
	text-decoration: underline !important;
}

/* ********** 7 ********** */
.intro {
	font-weight: bolder;
	color: #dddddd
}

.block { display: block; }

.fl_left { float: left !important; }

.fl_right { float: right !important; }

.clear { clear: both; }

.bold { font-weight: bold; } /* pogrubia wybrany fragment tekstu - jeśli pogrubienie ma mieć tylko aspekt wizualny, jeśli semantyczny, należy użyć znacznika strong */

.lined { text-decoration: underline; } /* podkreślenie wybranego fragmentu */

.noBorder { border: 0 none !important; } /* odbiera elemntowi obramowanie */

/* hacki na operę */
@media all and (min-width: 0px) {
	select {
		width: 214px;
	}
}