/* forminteriery.cz - layout */

/* BASIC RULES */
html{ margin:0; padding: 0; color: #ADADAD; background: black; }
body { text-align: center; margin: 0 auto; padding: 0; }

h2, h3, h4, h5, h6  { font-weight: normal; }

#content h2 {color: white;}
#content h3 {color: white;}

th { background: #3F3F3F; font-weight: normal; }

.clearfix:after, #title-bar .spc:after, #image-bar:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.break { height: 1px; font-size: 1px; clear: both; overflow: hidden; visibility: hidden; }
.out { position: absolute; left: -2000px; top: -2000px; }

.col-h-l {float: left; width: 48%; }
.col-h-r {float: right; width: 48%; }

/* Preskoceni navigace */
a#nav-skip, a#search-skip { font-weight: bold; text-align: center; text-decoration: none; display: block; width: 10em; position: absolute; bottom: 34%; left: -2000px; }

a#nav-skip:focus, a#nav-skip:active, a#search-skip:focus, a#search-skip:active {left: 650px; top: 10px; height: 1.5em; }

/* LAYOUT RULES */
#mother { width: 775px; margin: 0 auto; margin-top: 5px; text-align: left;  position: relative;}
#main { width: auto; border: 7px solid #2E2A22; padding-top: 74px;  }

/* Header, logos */
#header { position: relative; height: 40px !important; z-index: 50;}
#logo { width: 105px; height: 215px; background: #ABAAA9; text-align: center; position: absolute; top: 48px; left: 61px; }
#logo a{ display: block; width: 100%; height: 100%; background: #ABAAA9; }
#logo a:hover{background: #BEBEBE; }
#logo img{ margin: 80px 0 0 0; padding: 0; border: 0; }

#logo-idesign {position: absolute; top: 10px; left: 60px; width: 470px; height: 30px; line-height: 30px; text-transform: uppercase; font-weight: bold; font-size: 230%; letter-spacing: 5px; color: #3D3A33; overflow: hidden; }
#logo-idesign .sprite {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/img/logo-idesign.gif") no-repeat 0 0; }

#title-bar {width: 100%; border-top: 7px solid #2E2A22; }
#title-bar .spc {margin: 1px; padding: 7px 5px 7px 185px; background: #3D3A33; min-height: 19px; line-height: 1em; }
#title-bar h1 {margin:  2px 0 -2px 0; float: left; text-transform: uppercase; font-size: 115%; font-weight: bold; }

#breadcrumb { float: right;  margin: 0 10px -5px 0; text-transform: lowercase; font-size: 92%; }
#breadcrumb p {margin: 3px 0 -2px 0; }

/* Columns */
#col-right {float: right; width: 601px; }

#motive-box {height: 300px; padding: 1px; border-top: 7px solid #2E2A22; border-bottom: 7px solid #2E2A22; background: url("/img/motive01.jpg") no-repeat 1px 1px; }
#motive-box.motive01 {background-image: url("/img/motive01.jpg") }
#motive-box.motive02 {background-image: url("/img/motive02.jpg") }
#motive-box.motive03 {background-image: url("/img/motive03.jpg") }

#home-bottom {background: url("/img/bg-home-bottom.gif") repeat-y 50% 0; width: 100%; margin: 1px 0; }

#about-box {width: 414px; float: right; }
#about-box #slogan {display: block; width: 362px; height: 100px; margin: 34px 0 0 0; position: relative; overflow: hidden; }
#about-box #slogan .sprite {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("/img/slogan.gif") no-repeat 0 0; }
#about-box .spc {margin: 20px 83px 20px 35px; line-height: 1.7em; }

#featured-box {width: 347px; float: left; }
#featured-box .img-box {float: right; height: 100px;  margin-top: 34px; }
#featured-box .img-box img { border: 0; padding: 0; margin: 0; float: left;}
#featured-box .spc {margin: 22px 20px 20px 47px; }

/* Main menu */
#main-menu { width: 761px;  font-size: 100%;  float: right;  margin-right: 7px; position: absolute;  top: 47px;  right: 0; }
#main-menu ul {margin: 0;   padding: 0;   list-style: none;  width: 601px;  float: right; }
#main-menu ul li {margin: 0;   padding: 0;   list-style: none;  width: 100%;  float: left;  background: none;  display: block;  width: 149px;  height: 72px;  line-height: 72px;  background: #534F48;  border: 1px solid black;  border-left: 0;  text-align: center; }
#main-menu ul li:first-child { width: 150px; }
#main-menu ul li a, #main-menu ul li span { margin: 0;  padding: 0;  display: block;  width: 100%;  height: 100%;  position: relative; text-transform: uppercase; overflow: hidden; }
#main-menu ul li * .sprite { display: block;  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0; background: url("/img/bg-menu-item.gif") repeat 0 0; }
#main-menu ul li * .sprite span { display: block;  width: 100%;  height: 100%;  position: static;  background: url("/img/mi-cz-o-nas.gif") no-repeat 50% 50%;  }
#main-menu ul li a .sprite span { cursor: pointer; }
#main-menu ul li a:hover { background: #3D3A33;  }
#main-menu ul li.active a { background: #3D3A33;  }
#main-menu ul li a:hover .sprite, #main-menu ul li.active * .sprite { /* background: url("/img/bg-menu-item-hover.gif") repeat 0 0;  */

background-position: 0 -72px;

}

#main-menu ul #mi-o-nas * .sprite span { background-image: url("/img/mi-cz-o-nas.gif");  }
#main-menu ul #mi-realizace * .sprite span { background-image: url("/img/mi-cz-realizace.gif");  }
#main-menu ul #mi-reference * .sprite span { background-image: url("/img/mi-cz-reference.gif");  }
#main-menu ul #mi-kontakt * .sprite span { background-image: url("/img/mi-cz-kontakt.gif");  }

#main-menu .fill-in {background: #534F48; height: 72px; width: 53px;  float: left; margin: 1px; }

#content .spc {margin: 40px 33px; padding: 0; }

#image-bar {background: #3D3A33; min-height: 80px; clear: both; margin: 0 1px 0 1px; }
#image-bar img{margin: 0; padding: 0; border: 0; float: left; }
#bottom-bar {background: #534F48; height: 50px; margin: 0 1px 1px 1px; clear: both; position: relative;}

.arr-prev , .arr-next  { color: #B1ADA6; }
.arr-prev { float: left; margin: 17px 0 0 38px; padding: 0 0 0 20px; background: url("/img/arr-prev.gif") no-repeat 0 50%}
.arr-next { float: right; margin: 17px 38px 0 0; padding: 0 20px 0 0; background: url("/img/arr-next.gif") no-repeat 100% 50%}

.listing { width: 60%; display: block; text-align: center; margin: 17px 0 0 0; position: absolute; left: 20%; top: 0;}

#footer { clear: both; padding: 8px 20px 20px 20px; text-align: center; font-size: 92%;}
#footer p {margin: 0; }
#footer img { vertical-align: middle;}

.dotlink {background: url("/img/bg-dotlink.gif") no-repeat 0 0.5em; padding-left: 12px; }

/* Realizace - detail */
#real-detail .img-box {width: 540px; height: 360px; float: right; margin-right: 1px; }
#real-detail .img-box img {float: right; border: 0; margin: 0; padding: 0; }
#real-detail .desc-box {float: left; width: 200px; }
#real-detail .desc-box .spc {margin: 150px 30px 10px 30px; }
#real-detail .desc-box h1 {font-size: 100%; text-transform: uppercase; line-height: 1.4em;}

/* Realizace - list */
#real-list {width: 600px; float: right; min-height: 402px; background: url("/img/bg-realizace.gif") repeat 0 0; margin: 0 1px 0 0; }
#real-list ul {list-style: none; margin: 0; padding: 0; }
#real-list ul li {margin: 0 0 1px 0; padding: 0; float: left; width: 150px; overflow: hidden; height: 200px;}
#real-list ul li h2 {margin: 0; padding: 0; font-size: 100%; font-weight: normal; text-transform: none; font-family: "Franklin Gothic Medium", "Trebuchet MS", "Luxi Sans", Arial, Helvetica, sans-serif; }
#real-list ul li h2 a {display: block; background: #3D3A33; text-decoration: none; color: #ADADAD; }
#real-list ul li h2 a:hover {background: #534F48; }
#real-list ul li h2 a img {margin: 0; padding: 0; border: 0; display: block; }
#real-list ul li h2 a .real-title {margin: 15px 10px 0 15px; padding: 0; border: 0; display: block; height: 85px; }
#real-list ul li h2 a .real-title .real-location {display: block; }

#crossroad {margin: 140px 0 0 20px; width: 140px; float: left; }
#crossroad ul {margin-bottom: 3em; line-height: 1.3em; }
#crossroad ul li {margin-left: 0; margin-bottom: 0.75em; }

/* Reference */
#content .reference { padding-top: 0; padding-bottom: 30px; }
#content .reference h2 {font-size: 100%; text-transform: uppercase; margin-bottom: 1.8em; }

.contact-info {float: left; width: 170px; text-align: right;}
.maps { width: 250px; float: right;}