* {
  margin:0;
  padding:0; 
}
html {
  background-color: black;
}
body {
  text-align: center;
  background-color: black;
  font-family: arial;
  font-size: 13px;
}
a {text-decoration: none;}
.red {color:#930c0d;}
.red:hover {color:#cc0001;}
.tleft {text-align: left;}
.tright {text-align: right;}
.tcenter {text-align: center;}
.fleft {float: left;}
.fright {float: right;}
.border {border:1px solid #696969;}

/*-----container holder-----*/
#container {
  position: absolute;
  top:50%;
  left:50%;
  width:604px;
  height:504px;
  margin-left:-302px;
  margin-top:-252px;
  text-align: center;
  background-color: black;
}
/*-----content general-----*/
#content {
  position: relative;
  display: block;
  float: left;
  width:604px;
  height:412px;
  margin:0;
  padding:0;
  background-color: black;
  opacity: .0;
  filter: alpha(opacity=0);
}
.content {
  opacity: .0;
  filter: alpha(opacity=0);
}
#contentNoFadeIn {
  position: relative;
  display: block;
  float: left;
  width:604px;
  height:412px;
  margin:0;
  padding:0;
  background-color: black;
}
.box {
  position: relative;
  width:200px;
  height:136px;
  background-color: black;
  color:#696969;
  border:1px solid #696969;
  z-index: 0;
}
.box1 {position:absolute; top:0;     left:0;}
.box2 {position:absolute; top:0;     left:201px;}
.box3 {position:absolute; top:0;     left:402px;}
.box4 {position:absolute; top:137px;  left:0;}
.box5 {position:absolute; top:137px;  left:201px;}
.box6 {position:absolute; top:137px;  left:402px;}
.box7 {position:absolute; top:274px; left:0;}
.box8 {position:absolute; top:274px; left:201px;}
.box9 {position:absolute; top:274px; left:402px;}

.box3.logo {position:absolute; top:0; left:403px; background-image: url(../gfx/logo.jpg); background-position: right bottom; background-repeat: no-repeat; border:0;}

a.box span {position: absolute; bottom:6px; right:10px; margin:0; font-size: 22px; text-align: right;}
a.box:hover span {cursor:hand;}
a.box:hover {
  width:200px;
  height:136px;
  border:2px solid #696969;
  z-index: 1;
}
a.box1:hover {position: absolute; top:-1px; left:-1px;}
a.box2:hover {position: absolute; top:-1px; left:200px;}
a.box3:hover {position: absolute; top:-1px; left:401px;}
a.box4:hover {position: absolute; top:136px; left:-1px;}
a.box5:hover {position: absolute; top:136px; left:200px;}
a.box6:hover {position: absolute; top:136px; left:401px;}
a.box7:hover {position: absolute; top:273px; left:-1px;}
a.box8:hover {position: absolute; top:273px; left:200px;}
a.box9:hover {position: absolute; top:273px; left:401px;}

/*-----content kontakt------*/
.kontakt .box6 {background-image: url(../gfx/mapa_small_200_136px.jpg); background-position: right bottom; background-repeat: no-repeat;}
.kontakt .box9 {font-size: 14px; width:180px; height:116px; padding:10px; font-weight: bold; overflow-y: hidden;}
.kontakt .box9 .red {color:#cc0000; font-size: 18px;}
.kontakt .box9 .grey {color:#696969;}

/*-----content projekty------*/
.projekty .box img {
  opacity:0.3;
  filter:alpha(opacity=30);
  border:0;
}
.projekty .box:hover img, .projekty .box img:hover, .projekty .box:hover img:hover {
  opacity:1.0;
  filter:alpha(opacity=100);
}

.projekty .box span {position: absolute; bottom:6px; right:10px; margin:0; font-size: 22px; text-align: right;}
.projekty .box:hover span, .projekty .box span:hover, .projekty .box:hover span:hover {cursor:hand; color:#d3d3d3;}
.projekty .box span b {font-weight: normal;}

/*-----content atelier------*/
.atelier .box {border:1px solid #696969;}
.atelier a.box:hover {border:1px solid #696969;}

.atelier .box img {border:0;}

.atelier a.box1:hover {position: absolute; top:0px;   left:0px;}
.atelier a.box3:hover {position: absolute; top:0px;   left:402px;}
.atelier a.box5:hover {position: absolute; top:137px; left:201px;}
.atelier a.box6:hover {position: absolute; top:137px; left:402px;}
.atelier a.box7:hover {position: absolute; top:274px; left:0px;}
.atelier a.box8:hover {position: absolute; top:274px; left:201px;}

.atelier .box1 {background-image: url(../gfx/atelier/1_200_136_black.jpg);}
.atelier .box2 {background-image: url(../gfx/atelier/2_200_136_black.jpg);}
.atelier .box3 {background-image: url(../gfx/atelier/3_200_136_black.jpg);}
.atelier .box3:hover span, .atelier .box3:hover span:hover, .atelier .box3 span:hover {color:white;}
.atelier .box4 {background-image: url(../gfx/atelier/4_200_136_black.jpg);}
.atelier .box5 {background-image: url(../gfx/atelier/5_200_136_black.jpg);}
.atelier .box6 {background-image: url(../gfx/atelier/6_200_136_black.jpg);}
.atelier .box6 span {color:transparent;}
.atelier .box6:hover span, .atelier .box6:hover span:hover, .atelier .box6 span:hover {color:white;}
.atelier .box6.active {background-image: url(../gfx/atelier/6_200_136.jpg);}
.atelier .box6.active span {color:white; position: absolute; bottom:6px; right:10px;}
.atelier .box6.active span.spolupracovnici {color:white; position: absolute; top:6px; right:10px; font-size: 16px; font-weight: bold;}
.atelier .box7 {background-image: url(../gfx/atelier/7_200_136_black.jpg);}
.atelier .box8 {background-image: url(../gfx/atelier/8_200_136_black.jpg);}
.atelier .box9 {background-image: url(../gfx/atelier/9_200_136_black.jpg);}

/*-----content mapa------*/
#content.mapa {
  background-image: url(../gfx/mapa_big_602_410px.jpg);
  background-repeat: no-repeat;
  width:602px;
  height:410px;
}
/*-----interier------*/
.interier {
  width:592px;
  height:400px;
  padding:5px;
}
.interier p, .interier ul {
  display: block;
  font-size: 12px;
  color:white;
  padding:5px;
}
.interier ul li {
  margin-left:20px;
}
/*-----o nas------*/
.o-nas {
  width:592px;
  height:400px;
  padding:5px;
}
.o-nas p {
  display: block;
  font-size: 12px;
  color:white;
  padding:5px;
}

/*-----footer-----*/
.footer {
  position: relative;
  display: block;
  float: left;
  width:594px;
  margin:20px auto;
  padding:0 5px;
  z-index: 100;
}
.footer .separator {
  position: absolute;
  top:15px;
  left:0;
  width:604px;
  height:1px;
  line-height:1px;
  margin:0 auto;
  background-color: #a8a8a8;
  z-index: 1;
}
.footer span {
  position: relative;
  display: block;
  float: left;
  width:66px;
  height:60px;
  color:#696969;
  margin:0;
  padding:0;
  font-size: 12px;
  font-weight: bold;
}
.footer span a {
  position: absolute;
  top:22px;
  left:0;
  width:66px;
  height:45px;
  border:1px solid #696969;
}
.footer span a:hover, .footer span a.active {
  position: absolute;
  top:21px;
  left:-1px;
  width:66px;
  height:45px;
  border:2px solid #696969;
}
.footer .fright span {margin-left:9px;}

span.white {color:white;}
span.white a, span.white a:hover {position: absolute; top:21px; left:-1px; width:66px; height:45px; border:2px solid white;}
span.red {color:#cc0000;}
span.red a, span.red a:hover {border-color:#cc0000;}