/*
 * Project:   webpassion.pl
 * Date:      2009/06/01
 * Author:    Maciej Węgrzynek, maciej@webpassion.pl
/* ---------------------------------------- */

* { margin: 0; padding: 0; }
html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; }
body { background: #033649; font-size: 62.5%; }

@media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

body, textarea, input, select, option, button { color: #031634; font-family: Segoe UI, Tahoma, Geneva, sans-serif; line-height: 1.28; }
li, dt, dd, p, th, td, caption, pre { font-size: 1.4em; }
ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; }

a { color: #036564; text-decoration: underline; }
a:hover, a:focus, a:active { color: #000; text-decoration: underline; }

ul, ol, dd, blockquote { padding-left: 40px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
li *, li p, li li, dt *, dd *, p *, th *, td * { font-size: 1em; }

img { border: none; }
pre { font-family: "Courier New",monospace; white-space: pre-wrap; }
table { border-collapse: collapse; border-spacing: 0; }
button { overflow: visible; padding: 0 10px; cursor: pointer; }

hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #ccc; color: #ccc; }
*:first-child+html hr { margin: -7px 0 8px !important; }

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

/* LAYOUT
------------------------------------------- */

#root { overflow: hidden; background: #ede5d7 url(../images/main-bcg.png) top left repeat-x; }
 #root .wrapper { background: url(../images/top-bg.png) top center no-repeat; }
 /*#root .wrapper { background: url(../images/light.jpg) top center no-repeat; }*/
 #top { width: 940px; margin: 0 auto; }
  #logo { margin: 0; padding: 50px 0 37px 0; }
   #logo a { }
  #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
   #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 200px; margin: 15px 0 0 15px; padding: 2px 0; background: #033649; color: #fff; text-align: center; text-decoration: none; }
 
 #nav-container { height: 61px; background: #033649; }
  #nav { list-style: none; width: 940px; height: 61px; margin: 0 auto; padding: 0; background: url(../images/menu-bcg.png) top right no-repeat; }
   #nav li { float: left; margin-right: 20px; }
    #nav li a { display: block; overflow: hidden; width: 121px; height: 61px; background: url(../images/nav.png) top left no-repeat; text-indent: -10001px; outline: none; }
    #nav li em { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

    #nav li.home a:hover,
    #nav li.home a.current { background-position: 0 -61px; }

    #nav li.portfolio a { background-position: -140px 0; }
    #nav li.portfolio a:hover,
    #nav li.portfolio a.current { background-position: -140px -61px; }

    #nav li.about a { background-position: -279px 0; }
    #nav li.about a:hover,
    #nav li.about a.current { background-position: -279px -61px; }

    #nav li.kontakt a { background-position: -419px 0; }
    #nav li.kontakt a:hover,
    #nav li.kontakt a.current { background-position: -419px -61px; }
	 
  #sub-content { z-index: 1; border-top: 1px solid #cdb380; background: #dbc8a5 url(../images/light2.png) top center no-repeat; position: relative; }
  

/* GENERAL
------------------------------------------- */

/* headers */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 3em; }
h2 { font-size: 3em; }
h3 { font-size: 2.4em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

.subtitle { color: #036564; font-size: 1.4em; }

.header-a { float: left; }

/* tables */
table { }
 table th, table td { padding: 5px 10px; border: 1px solid #ccc; }

/* containers */
 .wrapper-a { position: relative; z-index: 100; width: 640px; min-height: 161px; margin: 0 auto; padding: 17px 300px 27px 0; }
  .wrapper-a h2,
  .wrapper-d h2 { margin-bottom: 2px; }
  p.text-a { font-size: 1.6em; line-height: 1.5; margin: 0; }
  p.text-a1 { font-size: 1.6em; line-height: 1.5; margin: 10px 0 0 0; }

 .f-col { min-height: 250px; background: url(../images/f-col.png) top right repeat-y; }
 .wrapper-b { width: 660px; margin: 0 auto; padding: 17px 280px 27px 0; }
 .wrapper-c { width: 940px; margin: 0 auto; }
 .wrapper-d { width: 940px; margin: 0 auto; padding: 17px 0 27px 0; }
 .wrapper-e { width: 100%; overflow: hidden; }

/* other */
 .list-b { list-style: none; margin: 0; padding: 13px 0 0 0; }
  .list-b li { font-size: 1.6em; line-height: 1.75; }
  .list-b li.gg { padding-left: 28px; background: url(../images/gg-ico.png) center left no-repeat; }
  .list-b li a { text-decoration: none; }

 .bubble { position: absolute; width: 220px; height: 130px; display:none; background: url(../images/bubble.png) top left no-repeat; }
  .bubble p { margin: 0; padding: 16px 0 0 14px; }

 .warning { color: #bf0202; }
 
 html > br { display: none; }
 
/* ELEMENTS
------------------------------------------- */  
  
 /* cols-two-a */ 
 .cols-two-a { overflow: hidden; width: 100%; margin-bottom: 20px; padding: 7px 0; background: url(../images/brd1.png) top left repeat-y; }
  .cols-two-a ul { list-style: none; margin: 0; padding: 0;  }
   .cols-two-a ul li { padding: 9px 0; }
  .cols-two-a .primary-ta { float: left; width: 282px; padding-right: 20px; }
  .cols-two-a .secondary-ta { float: right; width: 304px; padding: 0 20px 0 33px; }
  
 .box-a a { text-decoration: none; color: #031634; }
 .box-a a:hover { text-decoration: none; color: #036564; }
  
 /* cols-three-a */ 
 .cols-three-a { overflow: hidden; width: 100%; padding: 5px 0; background: url(../images/brd2.png) top left repeat-y; }
  .cols-three-a ul { list-style: none; margin: 0; padding: 0; }
   .cols-three-a ul li { padding: 9px 0; }
  .cols-three-a .primary-ta { float: left; width: 300px; padding-right: 20px; }
  .cols-three-a .secondary-ta { float: left; width: 300px; padding: 0 8px 0 20px; }
  .cols-three-a .tertiary-ta { float: right; width: 269px; padding: 0 0 0 22px; }

 /* cols-two-b */ 
 .cols-two-b { overflow: hidden; width: 100%; clear: both; }
  .cols-two-b .primary-tb { float: left; width: 280px; }
  .cols-two-b .secondary-tb { float: right; width: 642px; }
  
 .cols-two-c { overflow: hidden; width: 100%; }
  .primary-tc { float: left; width: 500px; }
  .secondary-tc { float: right; width: 400px; } 

 /* project-desc */ 
 #project-desc { list-style: none; margin: 0; padding: 8px 0 0 0; }
  #project-desc li { padding-bottom: 6px; }
  #project-desc li.date { text-transform: uppercase; }
   #project-desc li strong { color: #036564; font-weight: normal; }
    #project-desc li a { text-decoration: none; }
    #project-desc li a:hover { text-decoration: underline; }

   #project-desc-text { padding-top: 16px; }
    #project-desc-text p { font-size: 1.2em; margin: 0 0 8px 0; line-height: 2; }

 /* project-desc */ 
 #project-nav { float: right; list-style: none; margin: 0; padding: 0; }
  #project-nav .next { float: right; }
  #project-nav .prev { float: right; margin-right: 20px; }
   #project-nav li { position: relative; }
    #project-nav li p.trigger { margin: 0; border: 1px solid #c0b8aa; cursor: pointer; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
     #project-nav li a { display: block; color: #031634; text-decoration: none; outline: none; }
     #project-nav li.next a { padding: 8px 50px 8px 20px; background: url(../images/next2.png) center right no-repeat; }
     #project-nav li.prev a { padding: 8px 20px 8px 50px; background: url(../images/prev2.png) center left no-repeat; }
     #project-nav li a:hover { background-color: #c5bdaf; }
     html* #project-nav li a:hover { background-color: transparent !important; }
      #project-nav li a span { display: block; font-size: 0.74em; text-transform: uppercase; }
      #project-nav li.next a span { text-align: right; }

 /* showcase */ 
 #showcase-container { position: relative; margin: 10px 0 36px 0; padding: 2px; background: #fff; border: 1px solid #033649; }
  #showcase { position: relative; overflow: hidden; width: 636px; height: 236px;}
   #showcase ul { list-style: none; margin: 0; padding: 0; }
   #showcase ul.items { width:20000em; position: absolute; }
    #showcase ul li { float: left; position: relative; width: 636px; height: 236px; font-size: 1em; }
    #showcase ul.items li { margin-right: 2px; }
    #showcase ul li img { display: block; }
     #showcase ul li p { position: absolute; left:0; bottom: 0; width: 620px; margin: 0; padding: 4px 8px; color: #fff; background: url(../images/transparent-black-bcg.png) top left; font-size: 1.2em; }

   .js #showcase .items a { cursor: default !important; }

   #showcase-container .navi { position: absolute; left: 0; bottom: -36px; height: 26px; width: 636px; font-size: 1.2em; }
    #showcase-container .navi a { display: block; float: left; width: 25px; height: 26px; margin-right: 1px; background: #033649; color: #cdb380; text-decoration: none; text-align: center; line-height: 26px; outline: none;}
    #showcase-container .navi a:hover { background: #489190; }
    #showcase-container .navi a.active { background: #036564;}

   #showcase-container p.nav { z-index: 100; width: 260px; /*width: 320px;*/  background: url(../images/blank.png) top left no-repeat; height: 236px; margin: 0 !important; padding: 0 !important; cursor: pointer; }
    #showcase-container p.prev { position: absolute; left: 0; top: 2px; }
    #showcase-container p.next { position: absolute; right: 0; top: 2px; }

   #showcase-container p.nav a { display: none; position: absolute; z-index: 101; top: 65px; overflow: hidden; width: 60px; height: 82px; background-repeat: no-repeat; background-position: center center; text-indent: -10001px; }

    #showcase-container .prev a { left: 10px; background-image: url(../images/prev1.png); }
     #showcase-container .next a { right: 10px; background-image: url(../images/next1.png); }

    #showcase-container p.prev:hover a { display: block; }
    #showcase-container p.next:hover a { display: block; }
    #showcase-container p.prev.disabled { display: none !important; }

 /* testimonials */
 #testimonials-container { position: relative; z-index: 1; overflow: hidden; width: 640px; border: 1px solid #d2ba8d; background: #ded4c0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  #testimonials { position: relative; width: 640px; background: url(../images/blank.png) top left; }
  #testimonials.scrollable { height: 100px; overflow: auto; }
  .js #testimonials.scrollable { overflow: hidden !important; }
   #testimonials ul { list-style: none; padding: 0; margin: 0; }
  .js #testimonials ul.items { position: absolute; height: 20000em; }
    #testimonials ul li { height: 80px; padding: 12px 15px; color: #031634; font-size: 1.2em; }
	 
    #testimonials ul p { margin-bottom: 5px; line-height: 1.4; }
    #testimonials ul p.author { margin: 0; padding: 0 75px; text-align: center; }

   #testimonials-container p.nav { width: 70px; height: 100%; z-index:100; margin: 0 !important; padding: 0 !important; cursor: pointer; }
   #testimonials-container p.prev { display: none; position: absolute; left: 0; top: 0; }
   #testimonials-container p.next { display: none; position: absolute; right: 0; top: 0; }

   #testimonials-container:hover p.prev { display: block; }
   #testimonials-container:hover p.next { display: block; }

    #testimonials-container p.nav a { overflow: hidden; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; text-indent: -10001px; }
    #testimonials-container .prev a { background-image: url(../images/prev.png); border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; }
    #testimonials-container .next a { background-image: url(../images/next.png); border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; }
    #testimonials-container p.disabled { display: none!important; }

 /* side-col */
 #side-col { width: 280px; position: absolute; right: 0; top: -118px; z-index: 200; background: #e9e9e9 url(../images/side-bcg.png) top left no-repeat; }
  #side-col h2 { font-size: 2.2em; position: absolute; top: -35px; margin: 0; width: 280px; text-align: center; }
  #side-col ul { list-style: none; margin: 0; padding: 125px 0 0 0; }
   #side-col ul li { position: relative; height: 200px; font-size: 1em; cursor: pointer; }
   #side-col ul li a { display: block; position: absolute; z-index: 100; top: 12px; right: 19px; width: 242px; height: 172px; background: url(../images/side-hover.png) top left repeat-x; }
    #side-col ul li img { display: block; border: 1px solid #033649; }
   #side-col ul li div { position: absolute; top: 0; left: -10001px; z-index: 50; background: url(../images/side-hover.png) top left repeat-x; border: 1px solid #b0aca3; width: 368px; height: 171px; padding: 12px 280px 12px 16px; border-radius: 15px 0 0 15px; -moz-border-radius: 15px 0 0 15px; -webkit-border-radius: 15px 0 0 15px; -moz-box-shadow: -1px 1px 20px #bdb5a8; box-shadow: -1px 1px 20px #bdb5a8; -webkit-box-shadow: -1px 1px 20px #bdb5a8; }
   #side-col ul li:hover div { left: auto; right: 0; }
   .js #side-col ul li div { display: none; left: auto; right: 0; }
   .js #side-col ul li:hover div { display: none; }
    #side-col ul li div h3 { font-size: 2.4em; margin: 0; }
    #side-col ul li div p.date { margin-bottom: 5px; font-size: 1.2em; color: #036564; text-transform: uppercase; }
    #side-col ul li div p.desc-items { font-size: 1.8em; color: #031634; margin-bottom: 0; padding-left: 50px; }
    #side-col ul li div p.status { position: absolute; left: 12px; bottom: 12px; margin: 0; font-size: 1.6em; }
     #side-col ul li div p.status span { color: #036564; }
     #side-col ul li div em { display: block; position: static; color: #033649; font-size: 0.9em; font-style: normal; }

 /* scope-list */ 
 #scope-list { list-style: none; margin: 10px 0 0 0; padding: 0 0 0 190px; background: url(../images/guy.png) 30px 60px no-repeat; }
  #scope-list li { padding: 9px 0 9px 15px; background: url(../images/scope-icons.png) 0 14px no-repeat; }
  #scope-list li.expanded { background-position: 0 -581px; }
   #scope-list li span:hover { color: #036564; cursor: pointer; }
   #scope-list li div { margin: 9px 30px 0 0; padding: 10px 15px 0 15px; border: 1px solid #d2ba8d; border-left-width: 20px; background: #ded4c0; }
   * html #scope-list li div { height: 1px; }
   .js #scope-list li div { display: none; }
    #scope-list li div p { margin-bottom: 10px; font-size: 0.8em; }

 /* contact-form */
 #contact-form ul { list-style: none; margin: 0; padding: 18px 0 0 0; }
  #contact-form ul li { overflow: hidden; width: 100%; padding-bottom: 25px; }
   #contact-form ul li label { display: block; float: left; width: 138px; padding: 5px 22px 0 0; text-align: right; }
   #contact-form ul li label.error { display: block; float: none; width: auto; margin-left: 160px; padding: 8px 0 3px 28px; color: #bf0202; background: url(../images/alert-ico.png) 0 4px no-repeat; font-size: 0.84em; text-align: left; }
   #contact-form ul li input { width: 290px; padding: 4px; border: 1px solid #315b6b; }
   #contact-form ul li input:focus { padding: 3px; border: 2px solid #315b6b; }
   #contact-form ul li textarea { width: 430px; height: 122px; padding: 4px; border: 1px solid #315b6b; }
   #contact-form ul li textarea:focus { padding: 3px; border: 2px solid #315b6b; }

   #contact-form ul li input.error,
   #contact-form ul li textarea.error { border-color: #c83730!important; }

   #contact-form p { margin: 0; padding-left: 160px; }
    #contact-form p button { margin: 0; padding: 0; border: none; background: none; }

 /* projects */
 #projects-wrapper { position: relative; overflow: hidden; width: 1010px; margin-left: -35px; }
  #projects { position: relative; overflow: hidden; width: 936px; margin: 0 auto; padding: 5px 0 10px 0; }
  .js #projects.scrollable { overflow: hidden; height: 220px; }
   #projects .items { list-style: none; margin: 0 0 0 15px; padding: 0; }
   .js #projects.scrollable .items { width: 20000em; position: absolute; }
    #projects .items li { float: left; width: 302px;  }
     #projects .items li a { display: block; width: 262px; margin: 0 20px; padding: 9px 0 11px 0; color: #295465; text-decoration: none; text-align: center; text-shadow: 0 0 4px rgba(0, 0, 0, 0.35); }
     #projects .items li a:hover { width: 260px; padding: 8px 0 10px 0; color: #033649; background: #dcc9a6; border: 1px solid #cdb380; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
      #projects .items li a img { margin-bottom: 3px; border: 1px solid #033649; }
      #projects .items li a img.thumb-2 { display: none; }

 /* alternative view */
 #projects-wrapper.view-type-1 { display: none; }
        
      
 /* normal nav */
 #projects-wrapper p.nav { width: 60px; height: 82px; z-index:100; margin: 0 !important; padding: 0 !important; cursor: pointer; }
  #projects-wrapper p.prevPage { display: none; position: absolute; left: 0; top: 55px; }
  #projects-wrapper p.nextPage { display: none; position: absolute; right: 0; top: 55px; }

  #projects-wrapper:hover p.prevPage { display: block; }
  #projects-wrapper:hover p.nextPage { display: block; }

   #projects-wrapper p.nav a { overflow: hidden; display: block; width: 60px; height: 82px; background-repeat: no-repeat; background-position: center center; text-indent: -10001px; }

  #projects-wrapper .prevPage a { background-image: url(../images/prev1.png); }
   #projects-wrapper .nextPage a { background-image: url(../images/next1.png); }
   #projects-wrapper p.disabled { display: none!important; }
   
 #projects-wrapper .navi { float: left; position: relative; left: 50%; height: 26px; }   
  #projects-wrapper .navi a { float: left; position: relative; left: -50%; display: block; overflow: hidden; width: 21px; height: 21px; margin: 0 4px; background: url(../images/nav-bullets.png) 0 -99px no-repeat; text-indent: -10001px; outline: none; }   
  * html #projects-wrapper .navi a { background-image: url(../images/nav-bullets-ie.png); }   
  #projects-wrapper .navi a:hover,
  #projects-wrapper .navi a.active { background-position: 0 0; } 
  
 /* alternative view */
 #projects-a-container { display: none; } 
 #projects-a-container.view-type-1 { display: block; } 

 #projects-a-container { overflow: hidden; width: 100%; padding-top: 20px; height: 552px; }

.image-grid { float: left; width: 696px; height: 552px; margin: 0; padding: 0; }  
 .image-grid li { float: left; width: 232px; height: 138px; overflow: hidden; list-style: none; }
 .image-grid li a { display: block; width: 212px; margin: 0 20px 10px 0; padding: 9px 0 11px 0; color: #295465; text-decoration: none !important; text-align: center; text-shadow: 0 0 4px rgba(0, 0, 0, 0.35); }
 .image-grid li a:hover { width: 210px; padding: 8px 0 10px 0; color: #033649; background: #dcc9a6; border: 1px solid #cdb380; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
  .image-grid li a img { margin-bottom: 3px; border: 1px solid #033649; }
    
 .list-c { float: right; list-style: none; margin: 0; padding: 8px 0 0 0; }
  .list-c li {  }
   .list-c li a { display: block; padding: 8px 0 8px 30px; background: url(../images/nav-bullets.png) 0 -93px no-repeat; text-decoration: none !important; outline: none; }
   * html .list-c li a { background-image: url(../images/nav-bullets-ie.png); }
   .list-c li a.checked { background-position: 0 6px !important; color: #000; }
   .list-c li a:hover { background-position: 0 -213px; }
   * html .list-c li { float: left; width: 100%; }   
 
 .list-d { display: none; float: right; list-style: none; margin: 0; padding: 10px 5px 0 0; }
 .js .list-d { display: block; } 
  .list-d li { float: left; padding-left: 20px; }
  .list-d li.first { padding-top: 7px; }
   .list-d li a { display: block; padding: 8px 0 8px 30px; background: url(../images/nav-bullets.png) 0 -93px no-repeat; text-decoration: none !important; outline: none; }   
   .list-d li a.checked { background-position: 0 6px !important; color: #000; }
   .list-d li a:hover { background-position: 0 -213px; } 
  * html .list-d li a { background-image: url(../images/nav-bullets-ie.png); }   
 

 /* footer */
 #footer { border-top: 10px solid #031634; }
  #footer .wrapper-c { min-height: 120px; padding: 20px; background: url(../images/light3.png) top center no-repeat; }
   #footer h4 { overflow: hidden; width: 160px; height: 51px; margin-bottom: 0; }
    #footer h4 a { display: block; overflow: hidden; width: 160px; height: 51px; margin-bottom: 0; background: url(../images/logo2.png) top left no-repeat;  text-indent: -10001px; }
   #footer p { line-height: 1.8; font-size: 1.1em; margin: 0; color: #a59a75; }
    #footer p a { color: #a59a75; text-decoration: none; }
    #footer p a:hover { text-decoration: underline; }

/* ERROR 404
------------------------------------------- */
body.e404 { background: #ede5d7; }
.e404 .wrapper-e { width: 940px; margin: 0 auto; }
.e404 #header-wrapper { margin: 30px 0 10px 0; background: url(../images/header-bcg.png) top center repeat-y; }
 .e404 h2 { overflow: hidden; width: 460px; height: 197px; margin: 0 auto; background: url(../images/e404.png) top left no-repeat; text-indent: -10001px;  }
 .e404 h2.header1 { overflow: hidden; width: 531px; height: 47px; margin: 0; background: url(../images/e404-header1.png) top left no-repeat; text-indent: -10001px;  }
 .e404 h2.header2 { overflow: hidden; width: 577px; height: 71px; margin: 30px 0 0 0; background: url(../images/e404-header2.png) top left no-repeat; text-indent: -10001px;  }

.e404 #address-wrapper { width: 700px; margin: 0 auto; }
 .e404 #address-wrapper p { margin-left: 355px; }
  .e404 #address-wrapper p a { display: block; overflow: hidden; width: 328px; height: 22px; background: url(../images/kontakt.png) top left no-repeat; text-indent: -10001px; }

.e404 ol { padding: 20px 0 20px 50px; color: #033649; line-height: 1.8; }
 .e404 ol a { text-decoration: none; color: #033649; }
 .e404 ol a:hover { text-decoration: underline; color: #036564; }
 
 
/* SHOWCASE
------------------------------------------- */ 
 .showcase { height: 100%; margin: 0; min-height: 10px; }
  .showcase body { background: none repeat scroll 0 0 transparent; height: auto; padding: 95px 0 0 0; }
  .showcase #top { position: absolute; top: 0; left: 0; height: 93px; overflow: hidden; width: 100%; border-bottom: 2px solid #083649; overflow: hidden; background: #ede5d7 url(../images/main-bcg.png) top left repeat-x; }
   .showcase #logo { margin: 10px; padding: 0; }

 #view-frame { height: 100%; width: 100%; overflow: auto; }