/* CSS Document */
body {
  background: #232527;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #000;
  text-align: center;

}
/* 01. Obecné */
a{color: #0060ff; text-decoration: none;}
a:hover{color: #0060ff; text-decoration: underline;}
h1 {margin: 0;}
h2 {margin: 0;}
h3 {font-size: 16px; margin: 0 0 10px 0;}
h4 {font-size: 14px; font-style: italic; padding: 0; margin: 0;}
.hr {background: url('../img/hr.gif') center repeat-x; width: 900px; margin: auto; height: 41px;}
.clear {clear: both;}
img {border: none;}


#web {
  background: #dde8ec url('../img/bg.jpg') top left no-repeat;
  width: 1140px;
  margin: auto;
  margin-bottom: 40px;
  padding-bottom: 50px;
  border: 1px solid #dbe8f1;
  text-align: left;
}

#top {
  width: 900px;
  height: 70px;
  margin: auto;
}
#top img{float: left;}
#head {
  background: url('../img/head1.jpg') top left no-repeat;
  width: 900px;
  height: 130px;
  margin: auto;
}
#menu {
  width: 460px;
  float: right;
  font-size: 11px;
}
#menu a{color: #c3d8e1; text-decoration: none;}
#menu a:hover{color: #30c0ff;}
#ul_menu{
  height: 70px;
  line-height: 70px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: right;
  float: right;
}
#ul_menu li{
  height: 70px;
  line-height: 70xp;
  float: left;
  background: url('../img/menu_bg.png') left center no-repeat;
  margin-left: 20px;
  padding-left: 20px;
}
#ul_menu li a{height: 70px; line-height: 70px; float: left;}
#ul_menu li a:hover{background: url('../img/menu_hover.png') bottom center no-repeat;}
#ul_menu li.no_li {margin: 0; border: none; background: none;}

.main {
  width: 900px;
  margin: auto;
}
.title {
  width: 900px;
}
.left-title {
  width: 21px;
  margin: 20px 0 0 -1px;
  float: left;
}
/* 02. Reference */
.ref_list {
  width: 930px;
  margin: auto;
}
.ref_item {
  background: #ffffff;
  width: 278px;
  height: 190px;
  margin: 20px 15px 0 15px;
  border: 1px solid #afc0c8;
  float: left;
}
.ref_item img {border: 9px solid #ffffff;}


#reference {
  width: 930px;
  margin-top: 28px;
}



/* 02.1. Reference - Detail */
#list_menu {
  width: 200px;
  float: left;
}
#list_menu ul{margin: 0; padding: 0; list-style-type: none;}
#list_menu ul li{border-top: 1px solid #b5b5b5; height: 40px; line-height: 40px; padding-left: 5px;}
#list_menu a{color: #000000; text-decoration: none;}
#list_menu a:hover{text-decoration: underline;}
#ref_right {
  width: 680px;
  float: right;
}



/* 02.2. Lightbox */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background: #000000; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;}

.ref-item {
  background: #ffffff;
  width: 278px;
  height: 190px;
  margin: 20px 15px 0 15px;
  border: 1px solid #afc0c8;
  font-size: 12px;
  float: left;
}
.boxgrid{ 
width: 260px;
height: 172px;
margin: 9px;
overflow: hidden;
position: relative;
}
.boxgrid img{ 
position: absolute; 
top: 0; 
left: 0; 
border: 0; 
}
.boxgrid p{ 
padding: 0 10px; 
color:#afafaf; 
font-size: 12px;
}

.boxcaption{ 
float: left; 
position: absolute; 
background: #000; 
height: 264px; 
width: 264px;
opacity: .8; 
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.boxcaption img {border: 9px solid #ffffff;}

.captionfull .boxcaption {
top: 190px;
left: 0;
color: #ffffff;
}
.boxcaption p {margin: 5px 0;}




/* 03. Služby */
.list_box {width: 300px; margin-top: 10px; float: left;}
.list_box_2 {width: 270px; float: left; color: #303438;}
.list_box_3 {width: 322px; float: right; color: #303438;}

.ul_services {margin: 0; padding: 0; list-style-type: none; font-size: 13px;}
.ul_services li {height: 30px; line-height: 30px; background: url('../img/li_faj.gif') left center no-repeat; padding-left: 30px; margin: 0;}

.ul_services_no {margin: 0; padding: 0; list-style-type: none; font-size: 13px;}
.ul_services_no li {height: 30px; line-height: 30px; background: url('../img/li_no.gif') left center no-repeat; padding-left: 30px; margin: 0;}


/* 04. Kdo jsem */
#me {width: 400px; float: right;}
.about_box {width: 500px; margin-top: 15px;}
.ul_about {margin: 0; padding: 0; list-style-type: none; font-size: 13px;}
.ul_about li {height: 30px; line-height: 30px; background: url('../img/li_cir.gif') left center no-repeat; padding-left: 25px; margin: 0;}


/* 05. Kontakt */
#kontakt_box {width: 420px; float: right;}
.dotaz {width: 420px; margin-top: -5px;}
input {width: 340px; height: 16px; background: #dde8ec; border: 1px solid #afc0c8; padding: 5px;}
textarea {width: 346px; height: 100px; background: #dde8ec; border: 1px solid #afc0c8;}
form {margin: 0; padding: 0;}
.button {width: 111px; height: 44px; border: none; background: url('../img/odeslat.jpg') no-repeat; margin: 10px 12px 0 0; float: right; cursor: pointer;}

.p_facebook {height: 16px; background: url('../img/facebook.gif') no-repeat; padding-left: 25px;}
.p_twitter {height: 16px; background: url('../img/twitter.gif') no-repeat; padding-left: 25px;}