/* Written by Miroslav Kirchschläger 2009 - CSS rules for media: SCREEN, PROJECTION */



/* -------------------------------- GLOBAL RULES --------------------------------------*/


	body{		
    text-align: center;
		font-family: "Trebuchet MS",  "Arial CE", Arial, Tahoma, Verdana, Helvetica, sans-serif;
		font-size: 1em;
		background: #f2ecdb url(../img/body-bg.png) top repeat-x;
	}
	
	
	strong{ font-weight: bold; font-style: normal; }
	em{ font-weight: normal; font-style: italic; }
	
	
	a{ color: #00857c; }
	a:hover,
	a:focus,
	a:active{ color: #FF8000; }


/* -------------------------------------- MAIN ------------------------------------------*/



    #main{
		position: relative;
		width: 708px;
		/*height: 100%;*/
		/* min-height: 100%; */
		margin: 0 auto 10px;
		text-align: left;
	/*	background: #fff; */
		font-family: "Trebuchet MS",  "Arial CE", Arial, Tahoma, Verdana, Helvetica, sans-serif;
	}
	
	body>#main{ height: auto; }	

	
/* -------------------------------------- HEAD ------------------------------------------*/

#head{
    position: relative;
	width: 708px;
	height: 100px;
	min-height: 100px;
	margin: 0 auto;
	text-align: left;
	background: #fff url(../img/head-bg.jpg) bottom left no-repeat;
	/*border: 1px solid black;*/
}

#main>#head{ height: auto; }


#head h1, h1 a span{
	position: absolute;
	left: 35px;
	top: 28px;
	font-size: 1.4em;
	margin: 0;
	width: 188px;
	height: 49px;
        overflow: hidden;
	z-index: 0;
}

#head h1 a span{
   top: 0;
   left: 0;
   display: block;  
   background: url(../img/spiritt-webdesign.png) no-repeat;
   cursor: pointer;
   /*border: 1px solid black;*/
   z-index: 2;
}

#head h1 a{	padding-left: 5px; color: #FF7B00;}
#head h1 a:hover, #head h1 a:focus, #head h1 a:active{ color: FF7B00;}


/* --------------------------------- NAVIGATION -----------------------------------------*/


#navigation
{
    position: relative;
	height: 42px;
	min-height: 42px;
	background:  #008e99;
/*	border: 1px solid black;*/
}

/*#navigation *{
    border: 1px solid silver;
}*/


#navigation ul
{
    position: relative;
	padding: 1px 0 0 20px;
	list-style: none;
	height: 40px;
	min-height: 40px;	
}

#navigation li
{
  float: left;
  display: inline;
  margin: 0 1px 0 0;
  height: 40px;
  line-height: 40px;  
}

#navigation ul li a
{
	display: block;
	font-size: .8em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 0;
	background: #33a5ad;
	height: 100%;
	min-height: 100%;
	line-height: 40px;
}

#navigation ul li a.active{ background: #40aab3 url(../img/navigation-active.png) bottom repeat-x; }

#navigation ul li a#link-uvod{ width: 110px;}
#navigation ul li a#link-webdesign{ width: 150px;}
#navigation ul li a#link-portfolio{ width: 150px;}
#navigation ul li a#link-cenik{ width: 123px;}
#navigation ul li a#link-kontakt{ width: 130px;}


#navigation a:hover,
#navigation a:focus,
#navigation a:active
{  text-decoration: none;
   background-color: #40aab3;
   color: #fff; }



/* -------------------------------------- BANNER -----------------------------------------*/


#banner
{
    position: relative;
	height: 181px;
	min-height: 181px;
	background: #fff url(../img/banner1-bg.jpg) no-repeat top left;
	/*border: 1px solid black;*/
}



#banner h2{
    position: absolute;
	top: 56px;
	left: 33px;
	width: 476px;
	height: 41px;
	color: #00857c;
	font-size: 2em;
	font-weight: bold;	
	text-align: left;
	overflow: hidden;
	/*border: 1px solid black;*/
}

#banner h2 span{
    position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background:  url(../img/banner1-h2.png) no-repeat;
	z-index: 2;
}

#banner a{
    position: absolute;
	top: 97px;
	left: 33px;
	width: 520px;
	height: 25px;
	color: #ff7b00;
	font-size: 1.1em;
	font-weight: regular;	
	text-align: left;
	overflow: hidden;
	cursor: pointer;
	/*border: 1px solid black;*/
}

#banner a span{
    position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background:  url(../img/banner1-link.png) no-repeat;
	z-index: 2;
}



/* --------------------------------- SUBNAVIGATION -----------------------------------------*/


#subnavigation
{
    position: relative;
	height: 37px;
	min-height: 37px;
	background:  #ff9900;
	/*border: 1px solid black;*/
}

/*#navigation *{
    border: 1px solid silver;
}*/


#subnavigation ul
{
    position: relative;
	padding: 1px 0 0 20px;
	list-style: none;
	height: 35px;
	min-height: 35px;	
}

#subnavigation li
{
  float: left;
  display: inline;
  margin: 0 1px 0 0;
  height: 35px;
  line-height: 35px;  
}

#subnavigation ul li a
{
	display: block;
	font-size: .8em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 0;
	background: #ffa826;
	height: 100%;
	min-height: 100%;
	line-height: 35px;
}

#subnavigation ul li a.active{ background: #ffb84d url(../img/subnavigation-active.png) bottom repeat-x; }

#subnavigation ul li a#link-novinky{ width: 110px; }
#subnavigation ul li a#link-o-autorovi{ width: 110px; }


#subnavigation ul li a#link-co-je-webdesign{ width: 160px; }
#subnavigation ul li a#link-jak-tvorim-web{ width: 150px; }


#subnavigation ul li a#link-internetove-stranky{ width: 160px; }
#subnavigation ul li a#link-logotyp{ width: 120px; }
#subnavigation ul li a#link-web-banner{ width: 150px; }

#subnavigation a:hover,
#subnavigation a:focus,
#subnavigation a:active
{  text-decoration: none;
   background-color: #ffb84d;
   color: #fff;
}


/* -------------------------------------- CONTENT ------------------------------------------*/

#content{
  background: #fff;
  padding: 35px 0 100px 0;
}


#content.contact-bg{
   background: #fff url(../img/contact-bg.gif) bottom repeat-x;
}

#content h2{
  font-size: 1.6em;
  color: #008894;
  padding: 0 37px .4em;
}


#content h2.orange{
  color: #ff9900;
}


#content p{
  font-size: .8em;
  line-height: 1.8em;
  color: #000;
  padding: 0 37px 2em;
}

#content ul{
  font-size: .8em;
  line-height: 1.8em;
  color: #000;
  padding: 0 37px 1.5em;
}


#content ul.cenik-sluzby{
  list-style: url(../img/cenik-list-style-img.png);
  list-style-position: outside;
  line-height: 1.8em;
  padding: 0 37px .3em 53px;
}



#content p.cenik-ilustrace{
 float: right;
 padding: 0 60px 0 0;
}




#content p.cenik-cena{
  padding: 0 37px .3em;
}


#content div.light-blue{
  background: #EDFFFF;
  padding: 20px 0 0 0;
  position: relative;
}

#content div.jak-tvorim-web-box{
  position: relative;
  padding: 24px 0 0 0;
  margin: 0 0 1em 0;
}


#content div.jak-tvorim-web-box#first{
   background: #EDFFFF;
}

#content div.jak-tvorim-web-left-img,
#content div.jak-tvorim-web-right-img
{
  background: #ff9900 url(../img/jak-tvorim-web-bg-left-img.jpg);
  height: 231px;
  min-height: 231px;
}

#content div.jak-tvorim-web-right-img{
  background: #0097A3 url(../img/jak-tvorim-web-bg-right-img.jpg);
}


#content div.jak-tvorim-web-box h3{
    position: absolute;
	top: 0px;
	left: 221px;
	width: 73px;
	height: 73px;
	line-height: 73px;
	color: #ff9900; /* 008894 */
	background: #fff;
	font-size: 2em;
	font-weight: bold;	
	text-align: center;
	overflow: hidden;
}


#content div.jak-tvorim-web-box h3.right{
    left: 414px;
}


#content div.jak-tvorim-web-box h3 span#badge1{ background: url(../img/jak-tvorim-web-badge1.png);}
#content div.jak-tvorim-web-box h3 span#badge2{ background: url(../img/jak-tvorim-web-badge2.png);}
#content div.jak-tvorim-web-box h3 span#badge3{ background: url(../img/jak-tvorim-web-badge3.png);}
#content div.jak-tvorim-web-box h3 span#badge4{ background: url(../img/jak-tvorim-web-badge4.png);}
#content div.jak-tvorim-web-box h3 span#badge5{ background: url(../img/jak-tvorim-web-badge5.png);}
#content div.jak-tvorim-web-box h3 span#badge6{ background: url(../img/jak-tvorim-web-badge6.png);}
#content div.jak-tvorim-web-box h3 span#badge7{ background: url(../img/jak-tvorim-web-badge7.png);}
#content div.jak-tvorim-web-box h3 span#badge8{ background: url(../img/jak-tvorim-web-badge8.png);}
#content div.jak-tvorim-web-box h3 span#badge9{ background: url(../img/jak-tvorim-web-badge9.png);}
#content div.jak-tvorim-web-box h3 span#badge10{ background: url(../img/jak-tvorim-web-badge10.png);}
#content div.jak-tvorim-web-box h3 span#badge11{ background: url(../img/jak-tvorim-web-badge11.png);}
#content div.jak-tvorim-web-box h3 span#badge12{ background: url(../img/jak-tvorim-web-badge12.png);}


#content div.jak-tvorim-web-box h3 span{
    position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}


#content div.jak-tvorim-web-left-img h2,
#content div.jak-tvorim-web-right-img h2{
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.1em;
  padding: 15px 0px .3em 0px;
  margin: 0 0px .3em 300px;
  _margin-top: 23px;
  background: transparent url(../img/jak-tvorim-web-h3-underline.gif) left bottom no-repeat;
}


#content div.jak-tvorim-web-right-img h2{
  padding: 15px 0px .3em 0px;
  margin: 0 290px .3em 37px;
  _margin-top: 23px;
}



#content div.jak-tvorim-web-left-img p,
#content div.jak-tvorim-web-right-img p
{
  position: relative;
  color: #fff;
  font-weight: bold;
  padding: 0 37px 0 300px; 
}


#content div.jak-tvorim-web-right-img p{
  padding: 0 300px 0 37px;
}


#content div.jak-tvorim-web-left-img img{  float: left; }
#content div.jak-tvorim-web-right-img img{  float: right; }



#content div.img1{
  padding: 0 0 0 37px;
}

#content div.img1,
#content div.img2,
#content div.img3{
 float: left;
 margin: 0 3px 25px 0;
}

#content div.img1 a,
#content div.img3 a{
 text-decoration: none;
 color: #008894;
}

#content div.img2 a{
 text-decoration: none;
 color: #ff8000;
}

#content div.img1 p,
#content div.img2 p,
#content div.img3 p{
 padding: .7em 0 0 0;
}



#content div.web-box{
  clear: both;
  position: relative;
  margin: 0 40px 0 120px; 
  padding: 50px 0 0 0;
}

#content div.web-box a.thumbnail
{
  display: block;
  float: left;
}

#content div.web-box h3{
 color: #008E99;
 padding: 0 40px .3em 230px;
 font-size: 1.3em;
 line-height: 1.4em;
}

#content div.web-box p{
  padding: 0 40px .3em 230px;
/*  border: 1px solid orange;*/
}

#content p.show{
  margin: 50px 0px 100px 0px;
  padding: 0;
  border-top: 1px solid #ddd;

}



#content p.web-clean{
  padding:  30px 0 0 0;
  margin: 0 37px 0 350px;
  clear: both;
}



#content #logotyp-oldrich-hromadko{ margin: 40px  45px 0 15px; }
#content #logotyp-ivana-hrazdilova{ margin: 40px  55px 0 30px; }
#content #logotyp-vv-design-interier{ margin-top: 40px; }



/**/

#content h2#kontakt-headline{
  padding-top: 0px;
}

#content #kontakt-box{	border: 1px solid #fff;}

#content p.kontakt1
{
	float: left;
	margin: 5px 50px 0 0px;
}


#content p.kontakt2
{ 
  margin: 5px 0 35px 0;
}




/**/

#content #kontakt-form
{
  position: relative;
  padding: 30px 0 0 0;
  background: #EDFFFF;
}


#content #kontakt-form p.field-error{
	color: #ff9900;
	font-size: .75em;
	float: none;
	margin: 0 0 7px 0;
	padding: 0;
}


#content #kontakt-form p.message{
	color: #3689A9;
	font-size: .8em;
	float: none;
	margin: 0 0 7px 0;
	padding: 0;
}



#content #kontakt-form p
{
  font-weight: normal;
  font-size: .8em;
  padding: 0 37px 0 37px;
  margin-bottom: 2.5em;
}

#content #kontakt-form fieldset{
	border: none;
	padding: 0 37px 20px 37px;
}


#content #kontakt-form fieldset#jmeno_prijmeni,
#content #kontakt-form fieldset#email-box
{  position:relative;
    float: left;
	padding: 0 0 20px 37px;
}

#content #kontakt-form fieldset#firma-box,
#content #kontakt-form fieldset#telefon-mobil{ padding: 0 0px 20px 20px; }

#content #kontakt-form fieldset#zprava-box{ padding-bottom: 10px; }
#content #kontakt-form fieldset#submit-box{
   text-align: right;
   padding-right: 48px;
}



#content #kontakt-form label{
	display: block;
	font-size: .8em;
	margin: 0 0 .4em;
}


#content #kontakt-form label.poviny-udaj{
	font-weight: bold;
}

#content #kontakt-form input{	width: 215px; border: 2px solid #6CDBE6; }
#content #kontakt-form input.email,
#content #kontakt-form input.telefon-mobil {	width: 298px; }
#content #kontakt-form input.jmeno-prijmeni{ width: 380px;}
#content #kontakt-form textarea { width: 620px; border: 2px solid #6CDBE6; }
#content #kontakt-form input.submit
{	
  width: 80px;
  height: 29px;
  background: #fff  url(../grafika/bg_submit.png);
  text-align: center;
  border: none;
  font-size: .8em;
  font-weight: bold;
  color: #3CaBb6;
  border: 2px solid #6CDBE6;
}




/* -------------------------------------- FOOTER ------------------------------------------*/

#footer{
   height: 60px;
   min-height: 60px;
   position: absolute;
   bottom: 0;
   right: 0;
/*   _right: -1px; */
   width: 100%;
   background: #0097a3 url(../img/footer-bg.jpg) top right no-repeat;
   
   }

#footer p{
   padding: 25px 0 0 45px;
   font-size: .7em;
   color: #fff;
}

#footer p a{  
  font-size: 1em;
  text-decoration: underline;
}

#footer p #sitemap{
  color: #fff;
  margin: 0 195px 0 0;
}

#footer p a#webdesign{
  color: #fff;
  margin: 0 0 0 165px;
}