/****************************************************************************************/
/*                                                                                      */
/* Version:         2009-12-10 12:00                                                    */
/* Last changed by: Josef Vondráček                                                     */
/*                                                                                      */
/****************************************************************************************/

/* hover efect for IE6 */
#topPanel #menu li.hasSub
{
	behavior: url(styles/hover.htc);
}

/*======================================================================================*/
/* SUBPAGE		                                                                        */
/*======================================================================================*/

.subpage h1, h1.service
{
	margin: 20px 0 0 15px;
	padding: 0 0 0 60px;
	font-size: 30px;
	background: url(images/icons/subpage-header.png) no-repeat 12px center;
	color: #313439;
}

.greyButton,
.blueButton
{
	width: 93px;
	height: 26px;
	display: block;
	line-height: 25px;
	background: url(images/buttons/button-grey.png) no-repeat left top;
	color: #585858;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.blueButton
{
	width: 99px;
	color: #ffffff;
	background: url(images/buttons/button-blue.png) no-repeat left top;
}

.greyButton:hover,
.blueButton:hover
{
	text-decoration: underline;
}

.separator
{
	width: 996px;
	height: 22px;
	margin: 10px 0;
	background: url(images/separator-background.png) no-repeat center center;
	overflow: hidden;
	clear: both;
}

.separator hr
{
	display: none;
}

.subpage .separator
{
	width: 100%;
	background: url(images/subpage-separator.png) no-repeat center center;
}

#bottomPanel .separator
{
	margin: 30px 0 10px 0;
	background-image: url(images/bottom-panel-separator.png);
}

.subpage ul.unordered
{
	margin: 30px 45px 30px 60px;
	list-style-type: none;
}

.subpage ul.unordered li
{
	margin: 0 0 15px 0;
	padding: 0 0 0 30px;
	position: relative;
	background: url(images/li-item.png) no-repeat left 2px;
}

#contentPanel p
{
	margin: 0 30px 0 40px;
	line-height: 1.5em; 
}

/*======================================================================================*/
/* SERVICE LIST	                                                                        */
/*======================================================================================*/

.servicesList .servicesItem
{
	width: 268px;
	height: 156px;
	margin: 0 0 10px 10px;
	padding: 25px;
	float: left;
	display: inline;
	position: relative;
	background: url(images/homepage-service-item-background.png) no-repeat left top;
	overflow: hidden;
}

.servicesList .servicesItem h1,
.servicesList .servicesItem h2
{
	width: 195px;
	height: 40px;
	margin: 0 0 15px 0;
	color: #414141;
	font-size: 18px;
}

.servicesList .servicesItem h1 a,
.servicesList .servicesItem h2 a
{
	color: #414141;
	text-decoration: none;	
}

.servicesList .development img, .servicesList .tvorba-webovych-stranek img, .servicesList .webove-stranky img
{
	position: absolute;
	right: 28px;
	top: 27px;
}

.servicesList .identity img, .servicesList .tvorba-firemniho-stylu img, .servicesList .logo-tiskoviny img
{
	position: absolute;
	right: 32px;
	top: 26px;
}

.servicesList .marketing img, .servicesList .marketing-seo img
{
	position: absolute;
	right: 34px;
	top: 25px;
}

.servicesList .eshop img, .servicesList .tvorba-internetovych-obchodu img, .servicesList .internetove-obchody img
{
	position: absolute;
	right: 34px;
	top: 25px;
}

.servicesList .multimedia img, .servicesList .multimedia-flash img
{
	position: absolute;
	right: 30px;
	top: 24px;
}

.servicesList .promo-stanky img, .servicesList .prezentacni-technika img
{
	position: absolute;
	right: 34px;
	top: 26px;
}


.servicesList .servicesItem p a
{
	color: #00b7e4;
	font-weight: bold;
}

.servicesList .servicesItem .greyButton,
.servicesList .servicesItem .blueButton
{
	position: absolute;
	left: 25px;
	bottom: 30px;
}

.servicesList .servicesItem .greyButton:hover,
.servicesList .servicesItem .blueButton:hover
{
	text-decoration: none;
}

.servicesList .servicesItem .blueButton
{
	left: 140px;
}

.servicesList .servicesItem .dontClick
{
	left: 25px;
	bottom: 60px;
}

.services
{
	margin: 15px 30px 0 40px;
}

.services .serviceCol
{
	width: 330px;
	margin: 0 0 30px 20px;
	float: left;
	display: inline;
	overflow: hidden;
}

.services .first
{
	margin: 0 0 30px 0;
	clear: both;
}

.services h2
{
	height: 52px;
	padding: 3px 0 0 70px;
	background: url(images/icons/web.png) no-repeat left top;
	font-size: 18px;
}

.services h2.design
{
	height: 40px;
	padding: 15px 0 0 70px;
	background-image: url(images/icons/design.png);
}

.services h2.marketing
{
	background-image: url(images/icons/marketing.png);
}

.services h2 a
{
	color: #555b5e;
	text-decoration: none;
}

.services h2 a:hover
{
	text-decoration: underline;
}

.services ul
{
	margin: 10px 0 0 70px;
	list-style-type: none;
}

.services ul li
{
	margin: 0 0 3px 0;
}

.services ul a
{
	color: #00b7e4;
	font-weight: bold;
}

/*======================================================================================*/
/* LONG PANEL	                                                                        */
/*======================================================================================*/

.longPanel
{
	padding: 0 20px;
}

.longPanel .col
{
	width: 470px;
	float: left;
	overflow: hidden;
}

.longPanel .news
{
	width: 480px;
}

.longPanel .col h2, .services h2.why
{
	height: 55px;
	margin: 0 0 15px 0;
	padding: 0 0 0 75px;
	line-height: 55px;
	background: url(images/icons/why-pixolo.png) no-repeat left center;
	color: #414141;
	font-size: 18px;
}

.longPanel .col h2 a
{
	color: #414141;
	text-decoration: none;
}

.longPanel .col h2 a:hover
{
	text-decoration: underline;
}

.longPanel .col ul
{
	margin: 0 20px 0 45px;
	list-style-type: none;
}

.longPanel .col ul.unordered li
{
	margin: 0 0 15px 0;
	padding: 0 0 0 30px;
	position: relative;
	background: url(images/li-item.png) no-repeat left 2px;
}

.longPanel .news ul li
{
	margin: 0 0 10px 0;
}

.longPanel .news ul li .img
{
	width: 95px;
	height: 60px;
	margin: 0 5px 0 0;
	padding: 8px;
	float: left;
	background: url(images/homepane-news-picture.png) no-repeat left top;
}

.longPanel .news ul li .img table tr td
{
	width: 95px;
	height: 60px;
	text-align: center;
	vertical-align: middle;
}

.longPanel .news ul li p
{
	width: 295px;
	height: 60px;
	padding: 8px 0 0 0;
	position: relative;
	float: left;
}

.longPanel ul li p a
{
	color: #00b5e2;
	font-weight: bold;
}

.longPanel .news ul li p span
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #bcbcbc;
}

/*======================================================================================*/
/* REFENCES PANEL                                                                       */
/*======================================================================================*/

#contentPanel .header
{
	position: relative;
}

#contentPanel .header h1
{
	width: 440px;
	height: 50px;
	padding: 0 0 0 75px;
	background: url(images/icons/reference.png) no-repeat 5px center;
	color: #a7a7a7;
	font-size: 16px;
}

#contentPanel .header h1.service
{
	margin: 20px 0 0 15px;
	padding: 0 0 0 60px;
	font-size: 26px;
	background: url(images/icons/subpage-header.png) no-repeat 12px center;
	color: #313439;
}

#contentPanel .header h1 strong
{
	display: block;
	position: relative;
	top: -10px;
	color: #3d4246;
	font-size: 30px;
}

#contentPanel .header h2
{
	width: 225px;
	position: absolute;
	right: 25px;
	top: 0;
	color: #3d4246;
	font-size: 20px;
	text-align: right;
}

#contentPanel .header .button
{
	width: 96px;
	height: 26px;
	display: block;
	position: absolute;
	right: 20px;
	top: 30px;
	line-height: 26px;
	background: url(images/buttons/button-header.png) no-repeat left top;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

#contentPanel .box
{
	width: 725px;
	height: 75px;
	margin: 15px 0 10px 10px;
	padding: 18px 0 0 35px;
	background: url(images/solution-background.png) no-repeat left top;
}

#contentPanel .box .left
{
	width: 237px;
	float: left;
	overflow: hidden;
}

#contentPanel .box .right
{
	width: 200px;
	padding: 24px 0 0 30px;
	float: left;
	overflow: hidden;
}

#contentPanel .box h2
{
	color: #3d4246;
	font-size: 20px;
}

#contentPanel .box .left .button,
#contentPanel .box .right .button
{
	width: 96px;
	height: 26px;
	margin: 4px 0 0 5px;
	display: block;
	line-height: 26px;
	background: url(images/buttons/button-header.png) no-repeat left top;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

#contentPanel .box .right .button
{
	width: 119px;
	background: url(images/buttons/button-recommendation.png) no-repeat left top;
}

#contentPanel .paging
{
	width: 720px;
	height: 25px;
	margin: 10px auto;
	text-align: center;
}

#contentPanel .paging a
{
	width: 35px;
	height: 24px;
	margin: 0 10px 0 0;
	float: left;
	display: block;
	line-height: 24px;
	background: url(images/buttons/button-reference-paging.png) no-repeat left top;
	color: #94979e;
	font-family: "Trebuchet MS", Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

#contentPanel .paging a:hover,
#contentPanel .paging a.active
{
	background-position: 0 -24px;
	color: #ffffff;
}

#contentPanel .referencesList, #contentPanel .referencesList2
{
	margin: 0 0 0 10px;
}

#contentPanel .referencesList2 img
{
  margin: 0 0 0 15px;
  margin: 5px auto;
}

#contentPanel .referencesList .referenceItem,
#contentPanel .referencesList2 .referenceItem,
#contentPanel .referencesList .seo
{
	width: 355px;
	height: 258px;
	margin: 0 0 10px 10px;
	float: left;
	display: inline;
  background: url(images/reference-item-background.png) no-repeat left top;
	overflow: hidden;
}

#contentPanel .referencesList2 a{
  background: url(images/reference-item-background_2.png) no-repeat left top;
  background: url(images/ramecek.png) no-repeat left top;
  width: 238px;
  height: 133px;
  display: block;
  float: left;
  margin: 0 10px 0 0;
  text-align:center;
}


#contentPanel .referencesList .seo
{
	width: 354px;
	height: 259px;
	background-image: url(images/reference-seo-background.png);
}

#contentPanel .referencesList .referenceItem .picture,
#contentPanel .referencesList .seo .picture
{
	width: 355px;
	height: 195px;
	position: relative;
	overflow: hidden;
}

#contentPanel .referencesList .seo .picture
{
	height: 137px;
}

#contentPanel .referencesList .referenceItem .picture .zoom
{
	width: 25px;
	height: 25px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	overflow: hidden;
	background: url(images/zoom.png) no-repeat left top;
	text-decoration: none;
}

#contentPanel .referencesList .referenceItem .picture .zoom span
{
	visibility: hidden;
}

#contentPanel .referencesList .referenceItem .picture table tr td,
#contentPanel .referencesList .seo .picture table tr td
{
	width: 355px;
	height: 195px;
	text-align: center;
	vertical-align: middle;
}

#contentPanel .referencesList .seo .picture table tr td
{
	width: 355px;
	height: 137px;
	vertical-align: bottom;
}

#contentPanel .referencesList .referenceItem .info,
#contentPanel .referencesList .seo .info
{
	width: 288px;
	padding: 10px 0 0 65px;
	overflow: hidden;
  position:relative; 
}

#contentPanel .referencesList2 .referenceItem .info{
overflow:hidden;
padding:5px 0 0 32px;
position:relative;
width:144px;
}

#contentPanel .referencesList .referenceItem .info .odkaz a,
#contentPanel .referencesList .seo .info .odkaz a
{
height:40px;
left:16px;
position:absolute;
top:12px;
width:40px;}

#contentPanel .referencesList2 .referenceItem .info .odkaz a
{
height:20px;
left:8px;
position:absolute;
top:6px;
width:20px;}


#contentPanel .referencesList .seo .info
{
	height: 118px;
}

#contentPanel .referencesList .referenceItem .info p
{
	margin: 0 10px 0 0;
}


#contentPanel .referencesList .seo .info p.links
{
	margin: 15px 10px 0 0;
}

#contentPanel .referencesList .seo .info a
{
	color: #00b7e4;
	font-weight: bold;
}

#contentPanel .referencesList .referenceItem .info p span
{
	color: #00b9e4;
}

#contentPanel .referencesList .referenceItem .info h3
{
	margin: 2px 0 0 0;
}

#contentPanel .referencesList .referenceItem .info h3 a
{
	color: #313439;
	font-size: 18px;
	text-decoration: none;
}

#contentPanel .referencesList .referenceItem .info h3 a:hover
{
	text-decoration: underline;
}

#contentPanel .photoDetail
{
	margin: 0 0 20px 0;
	padding: 0 0 0 25px;
}

#contentPanel .photoDetail .picture
{
	width:575px;
	height: 320px;
/* 	padding: 0 0 0 15px; */
	float: left;
/* 	overflow: hidden; */
}

#contentPanel .photoDetail .picture table tr td
{
	width: 560px;
	height: 255px;
	text-align: center;
	vertical-align: middle;	
}

#contentPanel .photoDetail .controls
{
  width: 150px;
  padding: 120px 0 0 0;
  float: left;
  overflow: hidden;
}

#contentPanel .photoDetail .controls span
{
  left:80px;
  position:absolute;
}

#contentPanel .photoDetail .controls a
{
	margin: 5px 0;
	padding: 7px 0 7px 30px;
	display: block;
	float: left;
	background: url(images/icons/study.png) no-repeat left center;
	color: #00b7e4;
	font-weight: bold;
}

#contentPanel .photoDetail .controls a.visit
{
  background-image: url(images/icons/visit.png);
}

#contentPanel .photoDetail .controls a.vznika
{
  background-image: url(images/icons/vznika.gif);
}

#contentPanel .photoDetail .controls a.next,
#contentPanel .photoDetail .controls a.prew
{
  background-image: url();
  margin: 0;
  padding:0;
  left:16px;
  position:absolute;
  top:0;
}
#contentPanel .photoDetail .controls a.next {
  left:94px;
}

#contentPanel .photoDetail .controls a.zoom
{
	background-image: url(images/icons/zoom.png);
}

#contentPanel .photoDetail .gallery
{
	margin: 10px 0 0 15px;
}

#contentPanel .photoDetail .gallery ul
{
	list-style-type: none;
}

#contentPanel .photoDetail .gallery ul li
{
	margin: 0 10px 0 0;
	float: left;
}

#contentPanel .photoDetail .gallery ul li img
{
	border: 1px solid #dadada;
}

.subpage #contentPanel .detail h2
{
	margin: 0 0 15px 40px;
	color: #313439;
	font-size: 24px;
}

.subpage #contentPanel .detail h2 span
{
	color: #00b9e4;
}

.subpage #contentPanel .detail p
{
	margin: 0 30px 10px 40px;
  line-height:1.5; 
}

.subpage #contentPanel .detail .otherServices
{
	margin: 0 0 0 60px;
}

.subpage #contentPanel .detail .otherServices a
{
  height: 50px;
  padding: 0 0 0 60px;
  display: block;
  line-height: 50px;
  background: url(images/icons/logo.png) no-repeat left center;
  color: #00b7e4;
  font-weight: bold;
}

.subpage #contentPanel .detail .otherServices a.internetove-obchody
{
  background: url(images/icons/s_eshop.png) no-repeat left center;
}
.subpage #contentPanel .detail .otherServices a.marketing-seo
{
  background: url(images/icons/s_seo.png) no-repeat left center;
}
.subpage #contentPanel .detail .otherServices a.webove-stranky
{
  background: url(images/icons/s_web.png) no-repeat left center;
}
.subpage #contentPanel .detail .otherServices a.multimedia-flash
{
  background: url(images/icons/s_multi.png) no-repeat left center;
}
.subpage #contentPanel .detail .otherServices p a
{
  padding: 0;
  display:inline;
  line-height: 1.2em;
  background: url() no-repeat left center;
  font-weight: normal;
}

.subpage #contentPanel .detail .otherServices a.seo
{
	background-image: url(images/icons/seo.png);
}

.subpage #contentPanel .detail .otherServices .plaintext
{
  padding: 0;
  margin: -30px 0 0 60px;
}

.subpage #contentPanel .detail .otherServices .plaintext a
{
  height: auto;;
  padding: 0;
  margin: 0;
  display: inline;
  line-height: auto;
  background: none;
  color: #6A6A6A;
  font-weight: normal;
}

/*======================================================================================*/
/* FORM			                                                                        */
/*======================================================================================*/

.form
{
	margin: 35px 30px 35px 30px;
}

.form .left
{
	width: 350px;
	float: left;
	overflow: hidden;
}

.form .right
{
	width: 340px;
	float: left;
	overflow: hidden;
}

#contentPanel .form .right p
{
	margin: 10px 10px 0 125px;
	color: #424242;
	font-size: 10px;
}

.form label
{
	width: 120px;
	margin: 7px 10px 0 0;
	float: left;
	clear: both;
	text-align: right;
	color: #424242;
	font-weight: bold;
}

.form .right label
{
	width: 94px;
}

.form label span
{
	display: block;
	font-weight: normal;
	text-align: right;
}

.form .input
{
	width: 196px;
	height: 41px;
	margin: 0 0 10px 0;
	float: left;
	overflow: hidden;
	position: relative;
	background: url(images/form-input.png) no-repeat left top;
}

.form .input input
{
	width: 175px;
	height: 16px;
	position: absolute;
	left: 15px;
	top: 13px;
	/*margin: 13px 0 0 15px;*/
	background: #ffffff;
	border: none;
}

.form .textarea
{
	width: 566px;
	height: 191px;
	float: left;
	overflow: hidden;
	position: relative;
	background: url(images/form-textarea.png) no-repeat left top;
}

.form .textarea textarea
{
	width: 540px;
	height: 165px;
	position: absolute;
	left: 15px;
	top: 13px;
	/*margin: 13px 0 0 15px;*/
	background: #ffffff;
	border: none;
}

.form .multiple
{
	width: 236px;
	height: 191px;
	float: left;
	overflow: hidden;
	position: relative;
	background: url(images/form-multiple-select.png) no-repeat left top;
}

.form .checks
{
  width: 236px;
  height: 250px;
  float: left;
  overflow: hidden;
  position: relative;
/*   background: url(images/form-multiple-select.png) no-repeat left top; */
}

.form .multiple select
{
	 width: 220px;
	 height: 177px;
	 padding: 10px 0 10px 0;
	 position: absolute;
	 left: 15px;
	 top: 5px;
	 /*margin: 5px 0 0 15px;*/
	 background: #ffffff;
	 border: none;
}

.form .captcha
{
	width: 260px;
	margin: 20px 0 10px 140px;
}

.form .button
{
	width: 182px;
	height: 49px;
	margin: 30px 0 0 130px;
	display: block;
	line-height: 49px;
	background: url(images/form-button.png) no-repeat left top;
	color: #ffffff;
	border: none;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
}

#contentPanel .pixololinky p {
  margin-bottom: 12px;
}

#contentPanel .newsBox {
  margin: 0pt 30px 12px 40px;
}

.imgreferencemenu { margin:0px 0px 15px 15px;}