/* 
info: http://7pl.pl/52
autor: Adriano

*/

/* preloader  */

#preloader {
  background: #FBF7EF url(load.gif) no-repeat center;
  width: 100%;
  height: 100%;
  z-index: 666; 
  position: absolute; 
}

#js {
  background: #FBF7EF;
  width: 100%;
  height: 100%;
  z-index: 667; 
  position: absolute; 
  padding: 20px;
}

/* kod menu */
#menu {
  padding: 0;
  margin: 0;
}

#menu li {
  list-style-type: none;
  display: block;
  float: left;
  display: block;
  width: 100px;
  height: 60px;
  overflow: hidden;
  position: absolute;
}

#menu a {
  text-indent: -666em;
  display: block;
  width: 100px;
  height: 60px;
  cursor: pointer !important;
  position: absolute;
  top: 0px;
  left: 0px;
}

#menu .img1 a {background: url(img1.png) no-repeat;}
#menu .img2 a {background: url(img2.png) no-repeat;}
#menu .img3 a {background: url(img3.png) no-repeat;}
#menu .img4 a {background: url(img4.png) no-repeat;}

#menu .img1{top: 195px; left:13px;}
#menu .img2{top: 184px; left:130px;}
#menu .img3{top: 215px; left:227px;}
#menu .img4{top: 238px; left:342px;}

#menu span {
 background-color: #553627; /*js czcionka*/
 width: 10px;
 height: 10px;
 position: absolute;
 top: 0px;
 left: 0px;
}

#menu .img1 .s1{left:0px; top:0px; height:55px; width:35px;}
#menu .img1 .s2{left:0px; top:0px; height:44px; width:57px;}
#menu .img1 .s3{left:0px; top:0px; height:33px; width:98px;}

#menu .img2 .s1{left:0px; top:0px; height:44px; width:84px;}
#menu .img2 .s2{left:58px; top:-5px; height:57px; width:26px;}
#menu .img2 .s3{left:0px; top:0px; height:10px; width:10px;}

#menu .img3 .s1{left:8px; top:0px; height:36px; width:81px;}
#menu .img3 .s2{left:43px; top:0px; height:49px; width:53px;}
#menu .img3 .s3{left:67px; top:0px; height:56px; width:42px;}

#menu .img4 .s1{left:0px; top:0px; height:44px; width:102px;}
#menu .img4 .s2{left:0px; top:0px; height:49px; width:84px;}
#menu .img4 .s3{left:0px; top:0px; height:10px; width:10px;}

#png_container {
  width: 455px;
  height: 73px;
  position: absolute;
  top: 228px;
  left: 30px;
  overflow: hidden;
}

#png_background {
  width: 90px;
  height: 73px;
  background-color: #553627; /* js podkreslenie */
  position: absolute;
  top: 0;
  left: 0px;
}

#png_img {
  width: 455px;
  height: 73px;
  background: url(png_img.png);
  position: absolute;
  top: 0;
  left: 0;
}


/* #color - wybor koloru */

#color {
  width: 450px;
  height: 150px;
  position: absolute;
  top: 350px;
  left: 0;
}

#color div {
  width: 450px;
  height: 30px;
}

#color p {
  width: 80px;
  float: left;
}

#color span {
  height: 16px;
  width: 16px;
  float: left;
  margin-left: 10px;
  border: 2px dotted #fff;
  cursor: pointer;
  -moz-border-radius:5px;
}

#color span:hover {
  -moz-border-radius:9px;  
}

/* kod strony */

body {
  background: url(background.jpg) repeat-x top center;
  color: #505050;
  font: 13px/20px Verdana, Helvetica, sans-serif;
}

#container {
  background: url(container.jpg) no-repeat;
  width: 868px;
  height: 526px;
  margin: 0 auto 0px auto;
  position: relative;
}

a, a:visited {
  color: #8B9E0E;
  text-decoration: none;
  border-bottom: 1px dotted;
}

a:hover {
  color: red;
}

#info {
  position: absolute;
  width: 444px;
  top: 444px;
}

p {
 margin-bottom: 7px;
}