/*
 * CSS zahranuje zakaladni layout stranek
 * fonty a dalsi spolecne styl pro vsechny 
 * casti webu.
 *
 *
 */
 
/**************** fonts ****************/
body {
	color: #333;
	margin: 0; padding:0;
	background: #e9e9e9 url('../images/design/body-bg.png') repeat-x;
	font: 10pt Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
	font-family: Calibri, Arial, sans-serif;	
	color: #0b3a76;
	font-weight: bold;	
}

h2, h3 {
	font-size: 19pt;
	letter-spacing: -1px;
}

h4 {
	font-size: 12pt;
}

a {
	color: #0e4285;
	font-family: Calibri, sans-serif;
}
p a, .tooltipster-content a {
	font-family: Arial, Helvetica, sans-serif;
}
.more-info-button {
	display:block;
	color: #0070b3;
	font-size: 11pt;
	font-weight: bold;
	width: 116px; height: 20px;
	margin: 25px 3px 8px 3px; padding: 7px 10px;
	background: transparent url('../images/design/more-info-button.png') no-repeat;
}
ul {
	list-style-type: none;
	padding-left: 16px;
}
ul li {
	padding: 3px 0 3px 15px;
	background: transparent url('../images/design/li-bg.png') 0 8px no-repeat;
}
p{
	margin-top:0;
}
/* cleaner */
.cleaner {
	padding: 0; margin:0;
	border:none;
	visibility:hidden;
	clear:both;
}

#button-login, #button-registrace, .more-info-button {
	text-decoration: none;
}

.left {
	float:left;
}
.right {
	float:right;
}

/**************** layout ****************/
#container-bg {
	min-width: 960px;
	background: transparent url('../images/design/container-bg.png?v=2') top center no-repeat;
}

#container {
	width: 960px;
	margin: 0 auto;
}

/**************** header ****************/
#header {
	color:white;
	width: 960px;
}

#top-panel {
	font: 11pt Calibri, sans-serif;
	letter-spacing: -1px;
	/*margin-bottom: 1px;*/
}

#top-panel h1 {
	position: relative;
	color: white;
	width: 135px; height: 85px;
	margin:0; padding:0;
	overflow:hidden;
}

#top-panel h1 span {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url('../images/design/thepay-logo.png?v=2') no-repeat;
}

#top-panel > .right {
	width: 715px; height: 33px;
	margin: 28px 0 25px 0; padding: 0;
}

#top-panel > .right, #login {
	line-height: 1.4;
}

#servis-telefon {
	/*font-size:10pt;*/
	width: 225px;
	padding-right: 20px;
	background: transparent url('../images/design/phone-ico.png') right center no-repeat;
}

#servis-telefon span {
	color: #fcbb20;
	font-size: 18pt;
	font-weight: bold;
}

#search-form {
	width: 189px; height: 32px;
	background: transparent url('../images/design/searchbox-bg.png') no-repeat;
}

.search-input {
	color: white;
	width: 137px; height: 22px;
	margin: 5px 10px; padding:0;
	background: #496f9e;
	border: none;
}

.search-button {
	width: 32px; height: 32px;
	margin:0; padding:0;
	background: transparent url('../images/design/lupa.png') center center no-repeat;
	border: none; 
}

#login {
	width: 231px; height: 32px;
	margin: 0 212px 0 271px;
}

#button-login, #button-registrace {
	display: block;
	height: 26px;
	padding-top: 6px;
	background-color: white;
	background-repeat: no-repeat;
}

#button-login {
	width: 69px;
	padding-left:44px;
	background-image: url('../images/design/login-button.png');
}

#button-registrace {
	width: 88px;
	padding-left: 30px;
	background-image: url('../images/design/registration-button.png');
}

/**************** menu ****************/

#nav {
	font-size: 10pt;
	width: 960px; height: 46px;
	margin: 0;	padding:0 0px;
	list-style-type: none;
	background: transparent url('../images/design/menu-bg.png') no-repeat;
	z-index:10;
}

#nav > li {
	position:relative;
	float:left;
	margin: 0; padding:0 2px 0 0;
	text-align: center;
	height: 46px;
	z-index:10;
}

#nav > li > a {
	display: block;
	color: white;
	width:100%; height: 46px;
	text-decoration: none;
}

#ni1,#ni2,#ni3,#ni4,#ni5,#ni6,#ni7,#ni8,#ni9, #ni-admin {
	/*padding-right: 1px;*/
	background: transparent url('../images/design/menu-r-border.png') right top no-repeat
}

#ni1 {
	width: 113px;
}
#ni2 {
	width: 99px
}
#ni3 {
	width: 91px;
}
#ni4 {
	width: 74px;
}
#ni5 {
	width: 65px;
}
#ni6 {
	width: 142px;
}
#ni7 {
	width: 123px;
}
#ni8 {
	width: 87px;
}
#ni9 {
	width: 66px;
}
#ni10 {
	width: 80px;
	background-image: none;
}
#ni-admin{
	width: 100px;
}

#nav > li > a > span {
	display:block;
}

#nav .text {
	padding-top: 15px;
}

#ni1 .text {
	padding-left: 10px;
}

#ni10 .text {
	padding-right: 10px;
}
/* styly pro hover efect menu */
#nav .cor1, #nav .cor2 {
	position: absolute;
	top: 1px;
	width: 4px; height: 4px;
}

#nav .cor1 {
	left: 0;
	background: transparent url('../images/design/ni-corner-tl.png') 4px 0 no-repeat;	
}

#nav .cor2 {
	right: 0;
	background: transparent url('../images/design/ni-corner-tr.png') 4px 0 no-repeat;	
}

#nav > li:hover > a > .cor1, #nav > li:hover > a > .cor2 {
	background-position: 0 0;
}

#nav > li:hover > a {
	color: #072f63;
	height: 45px;
	border: 1px solid #0c3f7e;
	border-bottom: none;
	background: #d9e7f2;
}
/* Odtud n� jsou styly pro rozbalovac� menu */
#nav .subm-cont {
	position: absolute;
	top: 46px; left: 0;
	display: none;
	width: 199px;
	padding-bottom: 4px;
	background: transparent url('../images/design/submenu-bottom.png') left bottom no-repeat;
	z-index: 10; 
}

#nav .submenu {
	margin: 0; padding: 0;
	border-left: 1px solid #0c3f7e; border-right: 1px solid #0c3f7e;
	background: #d9e7f2;
	z-index:11;
}

#nav .submenu a {
	color: black;
	text-decoration: none;
}

#nav .submenu > li {
	text-align: left;
	margin: 0 15px 0 13px; padding: 10px 23px 10px 11px;
	background: transparent url('../images/design/gray-arr.png') 96% 50% no-repeat;
	border-bottom: 1px solid #c3d4e2;
}

#nav > li:hover > .subm-cont {
	display: block;
}
/* u posledn� polo�ky v menu nevykresl� border */
#nav li.last {
	border: none;
}

#nav .submenu li.active, #nav .submenu li:hover {
	background-image: url(../images/design/active-arr.png);
}

#nav .submenu li.active a, #nav .submenu li.active a:hover {
	color: #0e5696;
}

/**************** slogan ****************/

#slogan {
	position: relative;
	width: 960px; height: 159px;
	margin: 0; padding:0;
}

#slogan span {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url('../images/design/top-banner.jpg') no-repeat;
	z-index: 0;
}

/**************** top-bars ****************/

#top-bars, #top-bars a {
	font: 10.5pt Calibri, sans-serif;
}

#top-bars > div {
	padding: 0 15px 0 20px;
	background-repeat: no-repeat;
	overflow: hidden; 
}

#top-bars h3 {
	height: 36px;
	margin: 0; padding: 16px 0 16px 30px;
}

#first-step, #second-step, #third-step {
	width: 271px; height: 241px;	
}

#first-step {
	background-image:url(../images/design/box1.png);
}
#second-step {
	margin: 0 auto;
	background-image:url(../images/design/box2.png);
}
#third-step {
	background-image:url(../images/design/box3.png);
}

/* odstavec s odkazem */
.more-info {
	margin-top: 30px;
}

/**************** content ****************/
#content-top {
	margin: 20px auto 40px auto;
	padding-top: 4px;
	background: transparent url('../images/design/content-top-bg.png') top center no-repeat;
}

#content-bottom {
	padding-bottom: 6px;
	background: transparent url('../images/design/content-down-bg.png') bottom center no-repeat;
}

#content {
	min-height: 300px;
	padding-bottom: 25px;
	background: transparent url('../images/design/content-repeat-bg.png') top center repeat-y;
}

/**************** center ****************/
#center {
	width: 614px;
	padding: 18px 20px 57px 20px;
}

.highlight-top {
	width: 610px;
	margin: 0 auto; padding-top: 4px;
	background: transparent url('../images/design/highlight-top-bg.png') no-repeat;
}

.highlight-bottom {
	padding-bottom: 4px;
	background: transparent url('../images/design/highlight-bottom-bg.png') bottom center no-repeat;
}

.highlight-content {
	padding: 15px 30px 20px 8px;
	border-left: 1px solid #eddbb0;
	border-right: 1px solid #eddbb0;
	background-color: #fff0cc;
}

.highlight-image-background {
	min-height: 232px;
	background: transparent url('../images/design/highlight-logo-bg.png') bottom right no-repeat;
}

.the-pay-logo {
	margin: 0; padding:0;
	padding-left: 38px;
	background: transparent url('../images/design/logo-blue.png') center left no-repeat;
}

.highlight-content ul {
	list-style-position: inside;
	padding-left: 4px;
}

.highlight-content li {
	padding: 3px 0 6px 15px;
}

.article-list h2 {
	color: #424242;
	font-size: 16pt;
	margin: 35px 0 15px 0;
}

.reference-item {
	margin-top: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
}

.reference-item img {
	max-width: 120px;
}

.reference-item-text {
	font-style: italic;
	width: 479px;
}

img.help{
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	cursor: pointer;
}


/**************** aside ****************/
#aside {
	width:274px;
	padding: 0 15px 0 17px;
}

#aside h3 {
	font: bold 10pt Arial, Helvetica, snas-serif;
	letter-spacing: 0;
	margin-top: 0;	
}

#rss {
	display:block;
	width: 28px; height: 28px;
	overflow: hidden;
}

#rss a {
	position: relative;
	display:block;
	text-decoration:none;
}

#rss span {
	position: absolute;
	top: 0; left:0;
	display: block;
	width: 28px; height: 28px;
	background: transparent url('../images/design/rss.png') no-repeat;
	z-index: 5;
}

.news-item {
	margin-top: 24px;
	border-bottom: 1px solid #b7b7b7;
}

.date {
	color: white;
	text-align: center;
	width: 40px; height: 52px;
	margin: 0 4px;
}
.date span {
	display: block;
}

.day {
	font-weight:bold;
	height: 20px; padding-top: 4px;
	background: transparent url('../images/design/date-day-bg.png') no-repeat;
}

.month {
	color: #b1dbf2;
	font-size: 9pt;
	text-transform: uppercase;
	height: 26px; padding-top: 3px;
	background: transparent url('../images/design/date-month-bg.png') no-repeat;
}

.news-item-text {
	width: 211px;
	font-size: 9pt;
}

/**************** aside ****************/

#footer-container, #footer-container a {
	color: white;
}

#footer-container a {
	font-family: Arial, Helvetica, sans-serif;
}

#footer-container-top {
	padding-top: 3px;
	background: transparent url('../images/design/footer-top-bg.png') top left repeat-x;
	clear: both;
}

#footer-container {
	min-width: 960px;
	background: transparent url('../images/design/footer-bg.png');
}

#footer-content{
	padding: 12px 15px;
}


#footer-content, #footer {
	width: 930px;
	margin: 0 auto;
}

#footer-content h2 {
	color: #fcbb20;
	font-size: 15pt
}

#footer-box1 {
	width: 290px;
	margin: 0 auto;
}

#footer-box2 {
	width: 260px;
}

#footer-box3 {
	width: 290px;
}

#footer-box3 img {
	margin: 0 0 8px 8px;
}

ol.faq-list {
	list-style-type: none;
	padding: 0;
}

ol.faq-list li {
	padding: .2em 0;
}

.pay-sys-img img {
	margin: 0 5px 5px 0;
}

#footer {
	padding: 15px;
	background: #2b2b2b;
}

.copyright {
	color: #b7b7b7;
	height: 26px;
	padding-left: 140px;
	background: transparent url('../images/design/logo-gray.png') no-repeat;
}

#footer  > div {
	padding-top: 15px
}