/*---------------------------------------------------
autor:		Daniel Fencl
email:		fencl@1stwedesign.cz
website:	www.1stwebdesign.cz

---------------------------------------------------*/

* { margin: 0px; padding: 0px; }

body {
	font-size:16px;
	font-family:Helvetica, Arial, sans-serif;
	background-attachment: fixed;
	background-color: #000000;
	background-image: url(../images/background.gif);
}
/*-------------------- LAYOUT ---------------------*/
#page {
	margin: 0 auto 0 auto;
	width: 800px;
}

#layout {
	background-color: #FFFFFF;
	width: 760px;
	float: left;
	margin:0;
	padding-right:0px; 
	padding-left:0px; 
	border: 0;
}

#head {
	width: 100%;
	height:240px;
	background-image: url("../images/head_bg.jpg");
}

#lang {
	margin-left:25px;
	width: 120px;
	height: 29px;
	
	
}

#contents {
	margin: 0px 15px 15px 15px;
	width: 725px;
}

#left {
	float: left;
	padding: 10px 20px 10px 20px;
	width: 220px;
	
	
}

#right {
  	float: right;
	width: 430px;
	padding: 10px 10px 10px 20px;
	
	
	
}

#foot {
	position: relative;
	bottom: 0px;
}

#footleft {
	width: 220px;
	height: 48px;
	float: left;
	padding: 12px 20px 0px 20px;
	margin-right:20px;
	font-size: 0.7em;
	text-align:center;
	color: #898a8b;
	line-height: 1.5em;
}

#footmenu {

}
	
#copyright{
	margin-top: 0px;
	padding: 0px 20px 0px 50px;
}

/*------------------ NAVIGATION -------------------*/
#menu {
	width: 35px;
	margin:0 0 0 760px;
	height:550px;
	padding-top: 200px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

#menu li {
	list-style: none;
}


#navigation li.home a, #portfolio #navigation li.portfolio a, #services #navigation li.services a, #news #navigation li.news a, #contact #navigation li.contact a { 
	cursor: default; 
}

#home #navigation li.home a {
	background-image: url("../images/navigation/btn_uvod_a.png");
}
#services #navigation li.services a {
	background-image: url("../images/navigation/btn_sluzby_a.png" );
}
#portfolio #navigation li.portfolio a {
	background-image: url("../images/navigation/btn_portfolio_a.png" );
}
#aboutus #navigation li.aboutus a { 
	background-image: url("../images/navigation/btn_onas_a.png" );
}
#contact #navigation li.contact a {
	background-image: url("../images/navigation/btn_kontakt_a.png" );
}
#facebook #navigation li.facebook a { 
	background-image: url("../images/navigation/btn_facebook_a.png" );
}
#sitemap #navigation li.sitemap a {
	background-image: url("../images/navigation/btn_sitemap_a.png" );
}


#navigation { float: left; width: 35px; }
#navigation ul { float: left; width: 35px; padding-top: 20px; }
#navigation li { width: 35px; float: left; padding-bottom: 0px; background-repeat: no-repeat; }
#navigation li a { height: 140px; width: 35px; display: block; }
#navigation li a span { display: none; }

#navigation li.home { background-image: url("../images/navigation/btn_uvod.png" ); }
#navigation li.home a { background-image: url("../images/navigation/btn_uvod.png"); }
#navigation li.home a:hover { background-image: url("../images/navigation/btn_uvod_a.png"); }

#navigation li.services { background-image: url("../images/navigation/btn_sluzby.png"); }
#navigation li.services a { background-image: url("../images/navigation/btn_sluzby.png"); }
#navigation li.services a:hover { background-image: url("../images/navigation/btn_sluzby_a.png"); }

#navigation li.portfolio { background-image: url("../images/navigation/btn_portfolio.png"); }
#navigation li.portfolio a { background-image: url("../images/navigation/btn_portfolio.png"); }
#navigation li.portfolio a:hover { background-image: url("../images/navigation/btn_portfolio_a.png"); }

#navigation li.aboutus { background-image: url("../images/navigation/btn_onas.png"); }
#navigation li.aboutus a { background-image: url("../images/navigation/btn_onas.png"); }
#navigation li.aboutus a:hover { background-image: url("../images/navigation/btn_onas_a.png"); }

#navigation li.contact { background-image: url("../images/navigation/btn_kontakt.png"); }
#navigation li.contact a { background-image: url("../images/navigation/btn_kontakt.png"); }
#navigation li.contact a:hover { background-image: url("../images/navigation/btn_kontakt_a.png"); }

#navigation li.facebook { background-image: url("../images/navigation/btn_facebook.png"); height: 52px; }
#navigation li.facebook a { background-image: url("../images/navigation/btn_facebook.png"); height: 52px;}
#navigation li.facebook a:hover { background-image: url("../images/navigation/btn_facebook_a.png"); height: 52px;}

#navigation li.sitemap { background-image: url("../images/navigation/btn_sitemap.png"); height: 52px; }
#navigation li.sitemap a { background-image: url("../images/navigation/btn_sitemap.png"); height: 52px; }
#navigation li.sitemap a:hover { background-image: url("../images/navigation/btn_sitemap_a.png"); height: 52px; }

/*------------------ FOOT MENU --------------------*/
	
#footmenu UL {
	margin: 0;
	padding: 5px 20px 0px 20px;
	list-style: none;
	font-size: 0.7em;
	text-align: center;
	white-space: nowrap;
}
		
#footmenu UL LI {
		margin: 0; padding: 0 8px;
		list-style: none;
		display: inline;
		color: #898a8b;
		border-right: 1px solid #b1b2b4;
		white-space: nowrap;
}
			
#footmenu UL LI.first {
		border-left: 0;
}
			
#footmenu UL LI.last {
		border-right: 0;
}
			
#footmenu UL LI A {
		margin: 0; padding: 0 4px;
		color: #898a8b;
		text-decoration: none;
}
		
#footmenu UL LI A:hover {
		color: #cc0066;
		text-decoration:underline;
}

/*----------------------- TEXT ---------------------*/

/*------------------- H1 REPLACE -------------------*/

h1 {
	display:block;
	height:70px;
	width: 260px;
	position: relative;
	top: 135px;
	left: 20px;
	float: left;
	text-align:center;
	font-size:2em;
	text-indent:-9999px;
	background-image:url("../images/logo.png");
	background-repeat:no-repeat;
	}

h1 span {
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	left:0;
	top:0; 
	background-image:url("../images/logo.png");
	background-repeat:no-repeat;
	cursor:pointer;
	}

h2{
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: -0.03em;
	color:#0099CC;
	
}
h3{
	font-size: 0.9em;
	font-weight: bold;
	letter-spacing: -0.025em;
	color:#0099CC;
}
h4{
	font-size: 0.7em;
	font-weight: bold;

}

p{
	line-height: 1.8em;
	font-size: 0.8em;
	margin: 12px 0;
}

a {
	color: #cc0066;
	text-decoration:none;
	font-weight:bold;
}

a:hover {
	text-decoration:underline;
}

#footleft A {
	color: #898a8b;
	text-decoration: none;
}
			
#footleft A:hover {
	color: #cc0066;
	text-decoration:underline;
}

.headtext1{
	font-size: 1.2em;
	font-weight: bold;
	margin-left:10px;
	color:#000000;
}
.headtext2{
	font-size: 1.0em;
	font-weight: bold;
	color:#000000;
}

.highlight{
	font-size: 0.7em;
	font-weight: bold;
	color:#0099CC;
}

.copyrighttext, .copyrighttext a, .copyrighttext a:hover {
	text-align:center;
	line-height: 1.5em;
	font-size: 0.7em;
	color: #898a8b;
}
.services_box{
  padding: 0 0 0 20px;
	line-height: 1.5em;
	font-size: 0.9em;
	color: #898a8b;
}
/*---------------- PORTFOLIO -------------------------*/
.img-wrapper {
  margin-bottom: 15px;
  margin-top: 17px;
  margin-left:5px;
  background: url("../images/shadow.gif") no-repeat right bottom;
  float: left;
}

.img-outer {
  background: url("../images/bottom-left2.gif") no-repeat left bottom;
  float: left;
}

.img-inner {
  background: url("../images/top-right2.gif") no-repeat top right;
  padding: 0 5px 5px 0;
  float: left;
}

.img-wrapper img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  display: block;
}
/*---------------- TOOLTIPS -------------------------*/
.tool-tip {
	z-index: 5000;
	width: 300px;
	color: #000000;
}
	
.tool-title {
	padding-right: 22px; 
	padding-left: 15px;
	padding-bottom: 5px; 
	padding-top: 10px;
	line-height: 1.8em;
	background-image:url(../images/tooltips_bg.png);
	background-position: left top;
	font-size: 0.9em;
	color:#0099CC;
	font-weight:bold;
}

.tool-text {
	padding-right: 22px;
	padding-left: 15px;
	padding-bottom: 40px;
	padding-top: 2px;
	line-height: 1.2em;
	font-size: 0.6em;
	background-image: url(../images/tooltips_bg.png);
	background-position:right bottom;
}
/*---------------- PRICELIST -----------------------*/
.pricelist {
border-collapse:collapse;
font-size: 0.8em;

text-align:left;
width:100%;
}
.pricelist td {
border-bottom:1px solid #aaaaaa;
padding-left:10px;
padding-top: 5px;
padding-bottom: 5px;
}
.pricelist th {
border-bottom:1px solid #aaaaaa;
padding-bottom: 5px;
}
.price {width:90px;
}

/*---------------- LEFT PORTFOLIO -------------------------*/
#box1{
	position:absolute;
	background: url("../images/bottom-left2.gif") no-repeat left bottom;
  	float: left;
}
#box1 span{
	display:block;
	float:left;
	background: url("../images/top-right2.gif") no-repeat top right;
  	padding: 0 5px 5px 0;
}
#box2{
	position:absolute;
	background: url("../images/bottom-left2.gif") no-repeat left bottom;
  	float: left;
}
#box2 span{
	display:block;
	float:left;
	background: url("../images/top-right2.gif") no-repeat top right;
  	padding: 0 5px 5px 0;
}
.mask1{
	position:relative;
	width:205px;
	height:157px;
	overflow:hidden;
	margin-bottom: 15px;
  	margin-top: 17px;
  	margin-left:5px;
	background: url("../images/shadow.gif") no-repeat right bottom;
  	
}
.mask2{
	position:relative;
	width:205px;
	height:157px;
	overflow:hidden;
	margin-bottom: 15px;
  	margin-top: 17px;
  	margin-left:5px;
	background: url("../images/shadow.gif") no-repeat right bottom;
  	
}
span img{
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;	
  display: block;
}
/*---------------- OTHERS -------------------------*/
.imgframe {
	width: 210px;
	height: 171px;
	padding-left: 12px;
	padding-top: 10px;
	background-image: url(../images/portfilio_bg.png);
	background-repeat: no-repeat;
}	

img { 
	border: none;
}

.listimg{
	list-style-image: url(../images/arrowhead.gif);
}

.clear {
	clear:both;
}				
.tab {
	width: 50%;
	vertical-align:top;
}
.project_information p {
	float:left;
	width:250px;
	padding-left:10px;
	font-size: 0.9em;
	
}	
/*---------------- PAGER -------------------------*/
#pager li{
				
			}
			#menu_pager {
	margin: 10px 0px;
	font-size: 0.8em;
	font-weight:lighter;				
			}
			#menu_pager a{
				padding: 1px 4px;
				border: 1px solid gray;
				color:#888888;
				
			}
			#menu_pager a:hover{
				background-color:#CCC;
			}
			#menu_pager a.wactive{
				color:#000000;
				font-weight:bold;
			}