@charset "UTF-8";
/**

  CSS SikoraIT.pl

  @project       sikorait
  @lastmodified  09:30 2010-03-24
  @since         2010-01

  @colordefs
  - text:        989898
  - gray:        989898
  - link: (blue) 39f
  - 

*/



/* ************************************************

   @section Global
   
************************************************ */

/* @group reset
------------------------------------------------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { line-height: 1.5; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; outline: none; }
ul { list-style: none}

/* @group defaults
------------------------------------------------ */
body { background: #232323 url(/images/bg.png) 50% 128px no-repeat; color: #afafaf; font: normal 12px/1.5em Arial, Helvetica, "Helvetica Neue", sans-serif; }
a { text-decoration: none; color: #3399ff; outline: none; }
a:hover { text-decoration: underline; color: #fff; }
p, ul, table { margin: 0 0 1em }
h1, h2, h3, h4, h5 { font-weight: normal; } 
input.text,
select,
textarea { font: normal 12px/1.4em Verdana, Tahoma, Helvetica Neue, Helvetica, sans-serif; }
input.btn { padding: 0px 6px; overflow: visible; font-family: Arial, Helvetica, sans-serif; }

/* @group commons */
.align-center { text-align: center} .align-right { text-align: right} .align-left { text-align: left} .align-justify { text-align: justify}
.float-right { float: right} .float-left { float: left}
.clear { clear: both} .clearLeft { clear: left}
.hidden, .hide { display: none }
.structural { position: absolute; left: -9999px }

/* @group fontface */
/* Tahoma */
el
{ font-family: Tahoma, Verdana, sans-serif; }
/* Arial */
el
{ font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; }
/* Verdana */
el
{ font-family: Verdana, Tahoma, Helvetica Neue, Helvetica, sans-serif; }

/* @group clearing */
.clearfix:after,
#home .section:after
{ content: ""; display: block; height: 0; overflow: hidden; clear: both } 

/* @group sprites */
#headline .prevnext a,
#project .location,
#project .tech .h,
div.excerpt .more,
#footer p,
#teaser .navitem
{ background-image: url(/images/misc-sprites.png); background-position: -9999px -9999px; background-repeat: no-repeat; }

/* @group text regular */
h1 { font-size: 19px; line-height: 1.2; color: #666666; margin-bottom: 1em; }
h2 { font-size: 18px; font-weight: bold; margin-bottom: .6em; line-height: 1.2; }
.prose a { font-weight: bold; }
.prose ul { margin-left: 2.4em; margin-left: 40px; list-style: square }	
.prose li { margin-bottom: .75em; }	
.prose b,
.prose strong { color: #eee;  }
.prose h3 { color: #fff; font-size: 18px; line-height: 1.4; margin-bottom: .5em; }
.prose .photo-right { float: right; margin: 0 0 20px 20px }
.prose .photo-left { float: left; margin: 0 20px 20px 0 }

/* @group buttons */
input.btn {  }

/* @group form */
input.text:focus,
textarea:focus,
select:focus { /* background: #ebffd7 */ }
label input { vertical-align: top } 
	

/* ************************************************

   @section Layout
   
************************************************ */

/* @group Header
------------------------------------------------ */
#header { background: #131416 url(/images/header-bg.png) 50% 0 no-repeat; }
#header-wrap { width: 960px; margin: 0 auto; height: 128px; position: relative; overflow: hidden; }
#header h1 { margin: 0 }
#header h1 a { width: 252px; height: 60px; margin-top: 32px; float: left; background: url(/images/header-logo.png) no-repeat; text-indent: -1000em; }

#nav { float: right; margin: 40px 0 20px; padding-right: 10px; }
	#nav li { display: inline; }
	#nav a { float: left; font-size: 18px; color: #fff; line-height: 1.35; margin-left: 30px; padding: 5px 0 3px }
	#nav a:hover { border-top: 5px solid #818285; color: #818285; text-decoration: none; padding-top: 0px; }
	#nav li.current a { border-bottom: 5px solid #3399ff; }

#lang { color: #a9aaa8; font-size: 11px; position: absolute; bottom: 10px; text-align: right; right: 10px }	
	#lang dt,
	#lang dd { display: inline; margin-left: 1ex; }	
	#lang dt { margin-right: 1ex; }	
	#lang dd.current,
	#lang dd.current a {  color: #fff; }	
	#lang a, 
	#land strong { /* margin: 0 .5ex */ }	 
	

/* @group Footer
------------------------------------------------ */
#footer { background: #0b0d0f; text-align: right; clear: both; border-bottom: 60px solid #232323; color: #818285; }
	#footer-wrap { width: 960px; margin: 0 auto;  }
	#footer p { background-position: 100% -52px; padding: 25px 52px; margin: 0; line-height: 1.5; font-size: 11px; }
	#footer a { font-weight: bold; color: #fff; margin-left: 1ex; }

	
/* ************************************************

   @section Home
   
************************************************ */
#home { margin: 0 auto; width: 960px; padding-top: 10px; }
#home-intro { position: relative; }
#home-intro #preface { width: 240px; bottom: 0; position: absolute; text-align: right; font-size: 11px; line-height: 1.4; }
#home-intro #preface p { margin: 1em 0 0 0 }
#home-intro #preface em { color: #4899e9; font-weight: bold; }

#teaser { height: 286px; width: 700px; margin-bottom: 20px; position: relative; margin-left: 250px; }
	#teaser img { display: block; }
	#teaser-nav { position: absolute; margin-left: -20px; bottom: 0; margin-bottom: -1px }
	#teaser .navitem { display: block; line-height: 20px; text-align: center; width: 20px; font-size: 11px; margin-top: 0px; font-weight: bold; }
	#teaser .navitem:hover { background-color: #3399ff; color: #0b0d0f; text-decoration: none; }
	#teaser .navitem-selected { background: #0b0d0f; color: #fff; font-weight: normal; }

#home .section { margin-left: -9000px; padding-left: 9000px; background: url(/images/bevel-h.png) repeat-x; position: relative; margin-bottom: 20px; }
#side h2,
#home .section h2 { width: 230px; color: #fff; font-size: 18px; line-height: 1.4; margin: 0; float: left; color: #989898; font-weight: normal; text-align: right }
/* #home .section i.deco { background: #fff url(/images/misc-sprites.png) 100% 0 no-repeat; width: 24px; right: 0; top: -5px; height: 8px; position: absolute; } */
#home .section i.deco { display: none; }
#home .section div.cnt { margin: 0 0 0 240px }

.section#home-featured { background: none; }
.section#home-featured li { width: 220px; float: left; text-align: center; font-size: 11px; margin: 0 10px; display: inline; }
.section#home-featured li img { display: block; margin-bottom: 4px; }
.section#home-featured li a { color: #989898; }
.section#home-featured li a span { color: #3399ff; }
.section#home-featured li a:hover { text-decoration: none; color: #fff; }
.section#home-featured li a:hover img { -moz-opacity:.50; filter: alpha(opacity=50); opacity: .50; }

.section#home-brands { padding-top: 20px; _zoom: 1; }
.section#home-brands h2 { }
.section#home-brands h2 span { background-position: 100% -107px; }
.section#home-brands i.deco { background-position: 100% -40px; }
.section#home-brands div.cnt { margin-left: 250px; }


/* ************************************************

   @section Subpages
   
************************************************ */
#main { margin: 0 auto; width: 960px; min-height: 520px }

#side { float: left; width: 230px; margin-bottom: 20px; }
	#side h2 { margin-bottom: 8px; float: none; color: #eee; padding: 16px 0 4px; width: auto; text-align: left }
	#side ul { }
	#side .menu li {  }
	#side .menu li a { color: #9c9da0; padding: 6px 0; display: block; _zoom: 1; }
	#side .menu li a:hover { border-bottom: 1px solid #818285; text-decoration: none; color: #fff; padding-bottom: 5px; }
	#side .menu li.current { font-weight: bold; border-bottom: 2px solid #3399ff; }
	#side .menu li.current a { color: #fff; }
	#side .menu li.current a:hover { color: #fff; border: none !important; padding-bottom: 6px; }

#content { float: right; width: 700px; margin: 0 0 20px 0; padding-right: 10px; }
	#headline {  } 
	#content h2,
	#page-stop h2 { font-size: 28px; /* color: #818285; */ font-weight: normal; line-height: 1.2; padding-top: 10px; margin-bottom: .35em; }



/* @group Page: About
------------------------------------------------ */
#main.about {  }
#main.about #side {  }
#main.about #side ul li { -moz-opacity:.50; filter: alpha(opacity=50); opacity: .50; }
#main.about #side ul li:hover { -moz-opacity:1; filter: alpha(opacity=100); opacity: 1; }
#main.about #content { /* width: auto; float: none */ }
div.excerpt .in { margin-top: 10px; margin-bottom: 10px; }
	div.excerpt h3 { text-transform: uppercase; color: #989898; margin-bottom: 10px; }
	div.excerpt li { margin-bottom: 10px; }
	div.excerpt li a { display: block; border: solid #818285; border-width: 1px 0; border-width: 0 }
	div.excerpt li a:hover { border-color: #fff; }
	div.excerpt .more { color: #a9aaa8; padding-left: 15px; background-position: -74px -119px; }
	div.excerpt .more a { font-weight: bold; }



/* @group Page: Offer
------------------------------------------------ */
ul.featured { font-size: 1.15em; line-height: 1.5; margin-bottom: 2em;  }
ul.featured li { margin-bottom: .75em; }


/* @group Page: Portfolio
------------------------------------------------ */
#main.works {  }

#headline .prevnext { float: right; padding-top: 10px; margin: 0 }
#headline .prevnext a { width: 16px; height: 22px; text-indent: -999em; float: left; border: solid #232323; border-width: 8px 0 8px 15px; overflow: hidden; }
#headline .prevnext a.prev { background-position: 0 -120px; }
#headline .prevnext a.prev:hover { background-position: 0 -150px; }
#headline .prevnext a.next { background-position: -20px -120px; }
#headline .prevnext a.next:hover { background-position: -20px -150px; }

.msg-notice { border: 3px solid #e7ebe3; padding: 1em; margin-bottom: 1.4em; font-size: 1.2em; text-align: center; } 

#project .screen { margin-bottom: 10px; }
#project .thumbs { width: 240px; float: right; padding: 5px; background: #0B0D0F; }
	#project .thumbs li { display: inline; }
	#project .thumbs a { float: left; padding: 5px }
	#project .thumbs a:hover { /* border: 1px solid #FF7E17; padding: 2px; */ margin: 2px; padding: 3px; background: #fff; }
#project .desc { float: left; width: 440px; padding-top: 10px; }
	#project .location { color: #818285; padding-left: 15px; background-position: -74px -119px; }
		#project .location a { font-weight: bold; margin-left: 1em; }
	#project .tech { margin-left: 15px; margin-bottom: 1em; }
		#project .tech .h { margin-left: -15px; background-position: -60px -159px; margin-bottom: .7em; padding-left: 15px; }
		#project .tech .h h3 { text-transform: uppercase; font-weight: bold; display: inline; }
		#project .tech .h a { font-size: 11px; margin-left: 1em; display: none }
		.js #project .tech .h a { font-size: 11px; margin-left: 1em; display: inline }
		#project .tech .h a.show { text-decoration: underline; }
		#project .tech .h a.hide { display: none;  }
		.js #project .tech .c { display: none }
		.js #project .tech .c ul { margin-bottom: 0; }
	#project .desc ul { margin-left: 1.2em; list-style: square }


/* @group Page: Clients
------------------------------------------------ */
#main.clients {  }
ul.client-logos { margin-right: -20px; margin-left: 0; list-style: none; overflow: hidden; }
	ul.client-logos li { text-align: center; float: left; width: 220px; margin: 0 20px 20px 0 }
	ul.client-logos a { display: block; }
	ul.client-logos span { display: block; font-size: 11px; line-height: 1.2; padding-bottom: 6px; color: #a9aaa8; font-weight: normal; }
	ul.client-logos a:hover { color: #fff; text-decoration: none;  }
	ul.client-logos a:hover span { color: #fff; }
	ul.client-logos a:hover img { -moz-opacity:.50; filter: alpha(opacity=50); opacity: .50; }


/* @group Page: Contact
------------------------------------------------ */
#main.contact {  }

.msg-success { padding: 1em; margin-bottom: 1.4em; color: #fff; background: #669966; font-size: 14px; font-weight: bold; } 
.msg-error { padding: 1em; margin-bottom: 1.4em; color: #fff; background: #993333; font-size: 14px; font-weight: bold; } 

form.fm { color: #eee; }
	.fm input.text,
	.fm textarea { font-size: 14px; padding: 2px; border: solid #818285; border-width: 2px 1px 1px 2px; width: 300px;	}
	.fm input.text:focus,
	.fm textarea:focus { border-color: #ddd  }
	.fm .row { margin-bottom: 1em; clear: both; }
	.fm .row_error label { color: #cc3333; font-weight: bold; padding-top: 3px; }
	.fm .row label { width: 120px; text-align: right; float: left; margin-right: 20px; }
	.fm .row .input { margin-left: 140px; }
	.fm .row .error_list { list-style: none; font-size: 11px; margin: 0 0 .2em 0; padding-top: .2em; }
	.fm .submit { margin-left: 140px; }
	abbr.req {  color: #cc3333; font-weight: bold; font-size: 1.4em; vertical-align: middle }
	
	
/* ************************************************

   @section Page-Stop
   
************************************************ */
#page-stop { width: 515px; padding-left: 420px; margin: 116px auto; font-size: 14px; line-height: 1.4;background-position: 50% 0; border-top: 10px solid #131416; padding-top: 20px; padding-right: 150px }
#page-stop h1 { margin: 0 }
#page-stop h1 a { width: 270px; height: 80px; float: left; background: url(/images/header-logo.png) no-repeat; text-indent: -1000em; margin-left: -270px; }
#page-stop h2 { margin-bottom: .7em; padding-top: 10px; color: #eee; }
#page-stop p a { font-weight: bold; }

.prose #contact_form {float: left; width: 470px;}
.prose #contact_details {float: left; width: 230px;}
.prose #contact_details img {vertical-align: middle;}
.prose #contact_details a:hover, .prose #contact_details a {text-decoration: none;}
.prose #contact_details .chat_icon  {line-height: 35px; padding: 10px 0 0 0;}
.prose #contact_details .chat_icon img {margin: 0 10px 0 0;}

