* {
margin: 0;
padding: 0;
}

html  {
height: 100%;
}


body {
background:#131313 url('../design/bg.jpg');
height: 100%;
}

#container {
position: relative;
margin: 0 auto;
width:100%;
min-height: 100%;
background:url('../design/shadow.jpg') 0px -6px repeat-x;
}

#main {
position: relative;
margin: 0 auto 0 auto;
width:906px;
min-height:600px;
padding:0 0 182px 0;
}

div.columns {
position:relative;
width:100%;
height:270px;
background: url('../design/light01.jpg') 50% 10px no-repeat;
}


div.columns div {
position:relative;
width:269px;
float:left;
}

div.columns div + div  {
margin-left:49px;
}


div.columns.projects {height:auto;}
div.columns.projects h1 {margin:35px 0 0 0px}

div.columns.projects img {
border:3px solid #252525;
opacity: 0.7;
}

div.columns.projects img:hover {
opacity: 1;
}


div.half {
width:403px;
float:right;
padding-left:55px;
margin-left:45px;
background:url('../design/separator-vertical.png') repeat-y;
}

div.halfleft {
width:403px;
text-align:right;
padding-left:55px;
margin-left:45px;
}


/* Project
--------------------------------------------------------------------------------------- */

div.project-info {
position:relative;
width:897px;
padding:35px 0 35px 39px;
margin:-25px 0 -25px -30px;
background:url('../design/box.jpg') no-repeat;
height:353px;
clear:both;
}

div.project-info a#more {
position:absolute;
display:block;
width:87px;
height:81px;
top:307px;
left:519px;
background:url('../design/more.png') no-repeat;
z-index:10
}

div.project-img {
position:relative;
width:567px;
height:353px;
float:left; 
margin:0 60px 0 0px;
}

div.project-info h1{
width:270px;
float:right; 
margin:50px 0 20px 0px;}

div.project-info span.reflection{
width:100%;
}


div.project-info p{
display:block;
width:269px;
float:right
}


/* Header
--------------------------------------------------------------------------------------- */

#shadow {
position: absolute;
top: 0;
left: 0;
width:100%; 
height:634px;
background:url('../design/top.jpg') top center no-repeat;
}

#shadow.page {
}

#top {
position: relative;
margin: 0 auto 0 auto;
width:906px;
height:620px;
}

#top.page {
height:640px;
background:url('../design/top_page.jpg') -58px 528px no-repeat;
margin: 0 auto -125px auto;
}


#showcase {
position: absolute;
top: 172px;
left: -12px;
width:930px; 
height:310px;
background:url('../design/showcase.jpg') top center no-repeat;
}

#logo {
position: absolute;
display:block;
top: 56px;
left: 0px;
width:384px; 
height:71px;
background:url('../design/logo.jpg') top center no-repeat;
text-indent:-4000px
}


#slogan {
position: absolute;
display:block;
top: 513px;
left: 0px;
width:314px; 
height:63px;
background:url('../design/slogan.jpg') no-repeat;
text-indent:-4000px
}



/* Menu
--------------------------------------------------------------------------------------- */

#menu {
position: absolute;
top: 67px;
right: 0px;
width:370px; 
height:60px;
margin:0;
}

ul#menu li {
position: relative;
float:left;
height:60px;
padding:0px;
background:none;
}

ul#menu li#m1 {width:108px}
ul#menu li#m2 {width:147px}
ul#menu li#m3 {width:115px}


ul#menu li a{
position: relative;
height:100%;
width:100%;
display: block;
text-indent: -4000px;
}

ul#menu li#m1 a {background:url('../design/menu.png') 6px 4px no-repeat}
ul#menu li#m2 a {background:url('../design/menu.png') -102px 4px no-repeat}
ul#menu li#m3 a {background:url('../design/menu.png') -249px 4px no-repeat}





/* Footer
--------------------------------------------------------------------------------------- */

#bottom {
position: absolute;
height: 162px;
width:100%;
bottom:0px;
left:0px;
}


#footer {
position: relative;
margin:0 auto;
height: 162px;
width:906px;
background:url('../design/light03.jpg') bottom no-repeat;
font-size:12px;
color:#676767;
text-align:right;
text-shadow: #000 0px 1px 0px
}
#footer a {color:#c0c0c0;}
#footer a:hover {color:#fff;}

#footer ul li { background:none; padding-left:18px; display:inline; }
#footer ul li a {font-size:16px; color:#F2F2F2;}

span#social {
position:absolute;
left:0; top:42px;
text-align:left
}
span#social a {
font-size:16px; 
color:#F2F2F2;
display:block;
position:relative;
height:30px;
width:150px;
z-index:10
}

#rss:before {
content:''; 
background: url('../design/rss.gif') left center no-repeat; 
padding: 5px 35px 5px 0px;
}

#facebook:before {
content:''; 
background: url('../design/facebook.gif') 0px 50% no-repeat; 
padding: 5px 35px 5px 0px;
}


#twitter:before {
content:''; 
background: url('../design/twitter.gif') 0px 50% no-repeat; 
padding: 5px 35px 5px 0px;
}



/* Typography
--------------------------------------------------------------------------------------- */

body {
font: 16px/125% Arial, Helvetica, sans-serif;
text-align: left;
color:#AFAFAF;
text-shadow: #000 0px -1px 0px
}
 
p {margin: 0px 0 15px 0px; position: relative;}

a, a:link,a :visited { color:#9BDB00; text-decoration:none }
a:hover { color:#B2FC00; }
a:active { color:#B2FC00; }
a:focus { outline: none;} 


@font-face {font-family: DiavloLight-Regular; src:url('Diavlo.otf');}

h1 {
font-family: DiavloLight-Regular, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 34px;
text-align: left;
margin:50px 0 20px 0;
color:#fff;
position: relative;
}

#project-info h1 {
font-size: 32px;
}


span.reflection{
display:block;
position:absolute;
width:50%;
top:0px;
height:100%;
background:url('../design/header-reflection.png') 0px 3px repeat-x;
}

h2 {
font-family: DiavloLight-Regular, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
text-align: left;
margin:45px 0 35px 1px;
color:#AFFF00;
position: relative;

}


h1 + h2 {
margin-top:-17px
}


hr {
height:12px;
border:none;
background:url('../design/separator-horizontal.png') repeat-x;
margin:44px 0 46px 0;
}
hr.hr-contact{margin:39px 0 39px 0}
#footer hr {margin:24px 0 46px 0;}

em {color:#676767}
strong {color:#CBCBCB}
ul {margin: 15px 0 15px 0px; list-style: none}
ul li { background:url('../design/tick.gif') 0px 3px no-repeat; padding-left:28px}
ol {margin: 15px 0 15px 40px;}
ol ol {margin: 5px 0 5px 40px;}





/* Quotes
--------------------------------------------------------------------------------------- */


blockquote p:before {
content:''; 
background: url('../design/quote.gif') no-repeat; 
padding: 8px 25px 14px 0;
margin-right:5px
}

blockquote p:after {
content:''; 
background: url('../design/quote.gif') -30px 8px no-repeat; 
padding: 5px 22px 3px 0;
margin-left:6px
}
blockquote cite {
font-style: normal;
color:#676767
}
blockquote cite span.autor {
font-weight:bold;
color:#c0c0c0;
display:block
}
blockquote {margin-bottom:50px}
div.columns blockquote {margin-bottom:0px}

/* Buttons
--------------------------------------------------------------------------------------- */

a.visit-website {
position:relative;
display:block;
float:left;
width:161px;
height:41px;
background: url('../design/button.gif') 0px -86px no-repeat ;
text-indent:-4000px;
margin:60px 0 0 0
}
a.visit-website:hover {
background: url('../design/button.gif') 0px -127px no-repeat ;
}

a.coming-soon {
position:relative;
display:block;
float:left;
width:164px;
height:43px;
background: url('../design/button.gif') 0px 0px no-repeat ;
text-indent:-4000px;
margin:60px 0 0 0
}

a.offline {
position:relative;
display:block;
float:left;
width:160px;
height:43px;
background: url('../design/button.gif') 0px -43px no-repeat ;
text-indent:-4000px;
margin:60px 0 0 0
}

a.cms-functions {
position:relative;
display:block;
width:226px;
height:60px;
background: url('../design/button.gif') 0px -269px no-repeat ;
text-indent:-4000px;
margin:25px 0 35px 0
}
a.cms-functions:hover {
background: url('../design/button.gif') 0px -329px no-repeat ;
}

a.special-offer {
position:relative;
display:block;
width:288px;
height:50px;
background: url('../design/button.gif') 0px -168px no-repeat ;
text-indent:-4000px;
margin:25px 0 35px 0
}
a.special-offer:hover {
background: url('../design/button.gif') 0px -218px no-repeat ;
}

a.pobierz {
position:relative;
display:block;
width:241px;
height:51px;
background: url('../design/button.gif') 0px -388px no-repeat ;
text-indent:-4000px;
margin:23px 0 0px 0
}
a.pobierz:hover {
background: url('../design/button.gif') 0px -439px no-repeat ;
}



/* Images
--------------------------------------------------------------------------------------- */

img {border:none}

.gallery { 
position:absolute;
width:100%;
text-align:center;
height:100px;
margin-top:-50px;
top:50%;
left:0px;
visibility:hidden;
z-index:3
}

div.project-img:hover .gallery { 
visibility: visible
}


div.project-img img.thumbnail {
margin:15px 8px;
width:96px;
height:60px;
border:1px solid transparent;
opacity: 0.65;

}

a:hover img.thumbnail {
border:1px solid #484848;
opacity: 1;
margin:14px 8px 16px 8px;

}

img.icon{
width:48px; height:48px; vertical-align: text-bottom; margin:20px 15px -5px 0
}


/* Contact form
--------------------------------------------------------------------------------------- */

#form input, textarea  {
position:relative;
border:none;
color:#AFAFAF;
font-family:inherit;
font-size:inherit;
margin:0px 0 0px -10px;
z-index:100
}

#form input{
width:283px;
height:22px;
padding:16px 20px 13px 52px;
font-style:italic;
color:#676767;
}

#form input#name{
background:url('../design/form-input.png') 0px no-repeat;
}
#form input#email{
background:url('../design/form-input-email.png') 0px no-repeat;
}
#form input.hide {
display:none; 
}

#form textarea{
overflow:auto;
width:389px;
height:179px;
padding:16px 20px 13px 20px;
background:url('../design/form-textarea.png') 0px no-repeat;
}

#form input.submit {
position:relative;
cursor:pointer;
display:block;
float:left;
width:185px;
height:52px;
background: url('../design/button.gif') 0px -490px no-repeat ;
text-indent:-4000px;
margin:10px 0 0 223px
}
#form input.submit:hover {
background: url('../design/button.gif') 0px -542px no-repeat ;
}

p.message-error {color:red}