/* CSS Document

--------------------------------
PRAGUE WHISPERS
Webdesign (c) Adam Kudrna, 2008
Last edited: 2008-09-23
--------------------------------

Structure:
	width
	height
	display
	position
	float
	clear
	z-index
	overflow
	margin
	padding
	border
	background
	color
	font
	align

Colors Used:
	- Blue: #025C9B
	- Light-blue: #8FC2E6
	- Green: #34972C

	- Grey 1: #464646
	- Grey 2: #787878
	- Grey 3: #B7B7B7
	- Grey 4: #C2C2C2
	- Grey 5: #EFEFEF

*/




.hidden {
	display: none;
}



/*---------------------------------------------------------------
GENERAL ELEMENTS
---------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0 auto;
	background: #fff url("../images/background_main.jpg") repeat-x 0 150px;
	color: #787878;
	font: normal .75em verdana, sans-serif;
	text-align: center;
	line-height: 130%;
}

/* Headings */
h1 {
	margin: 0;
	padding: 0;
}
h2 {
	margin: 0 0 1.7em 0;
	padding-left: 25px;
	color: #464646;
	font: bold 145% arial, sans-serif;
}
h2.green {
	background: transparent url("../images/arrow_1_green.png") no-repeat left center;
}
h2.blue {
	background: transparent url("../images/arrow_1_blue.png") no-repeat left center;
}
h3 {
	clear: both;
	margin: 1.5em 0 .7em 0;
	color: #787878;
	font: normal 185% arial, sans-serif;
}
h4 {
	margin: 1em 0 0 0;
	color: #464646;
	font-size: 100%;
}

/* Text */
p {
	margin-top: 0;
	margin-bottom: .7em;
	text-align: justify;
}

ul {
	margin: .7em 0;
	padding: 0 0 0 1.7em;
	list-style-type: none;
}
li {
	padding-left: 1.7em;
	background: transparent url("../images/arrow_2_green.png") no-repeat 0 .5em;
}
ul.tick {
	padding-left: .1em;
}
ul.tick li {
	background: transparent url("../images/tick.png") no-repeat 0 .3em;
}

span.green {
	color: #34972C;
}
span.blue {
	color: #025C9B;
}

abbr {
	border-bottom: 1px dotted #666;
	cursor: help;
}

/* Links */
a, a:link, a:visited {
	color: #34972C;
	text-decoration: underline;
}
a:hover {
	color: #025C9B;
}
a:active {
	color: #000;
}

a img {
	border-style: none;
}



/*---------------------------------------------------------------
LAYOUT
---------------------------------------------------------------*/

div.clearer {
	height: 0;
	clear: both;
	font-size: 0;
	line-height: 0;
}

/* Document */
#document {
	width: 800px;
	margin: 0 auto;
	background: #fff url("../images/background_document.jpg") repeat-y center top;
	text-align: left;
}

/* Header */
#header {
	height: 150px;
	position: relative;
	background: transparent url("../images/background_header_1.jpg") no-repeat center top;
	line-height: 150%;
}
#motto {
	position: absolute;
	bottom: .5em;
	right: 50px;
	color: #464646;
	font-weight: bold;
}
#phone {
	position: absolute;
	top: 60px;
	right: 50px;
	padding-left: 23px;
	font-size: 145%;
	font-weight: bold;
	background: transparent url("../images/phone.png") no-repeat left center;
	color: #025C9B;
}
#phone a, #phone a:link, #phone a:visited {
	color: #025C9B;
	text-decoration: none;
}
#phone a:hover {
	color: #34972C;
}

/* Logo */
#logo {
	float: left;
	margin: 60px 50px 0 50px;
}
#logo h1 {
	width: 225px;
	height: 70px;
	position: relative;
	overflow: hidden;
	font-size: 220%;
	text-transform: uppercase;
	line-height: 120%;
}
#logo h1 a {
	color: #025C9B;
	text-decoration: none;
	cursor: pointer;
}
#logo h1 span {
	width: 225px;
	height: 70px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: transparent url("../images/logo.png") no-repeat;
}

/* Menu */
#menu {
	height: 35px;
	clear: both;
	padding: 0 50px;
	background: #464646 url("../images/background_menu.jpg") repeat-y center top;
	font-size: 12px;
	line-height: 12px;
}
#menu ul {
	margin: 0 -3px;
	padding: 0;
}
#menu ul li {
	float: left;
	padding: 0 5px 0 3px;
	list-style-type: none;
	background: transparent url("../images/3_dots.png") no-repeat right 12px;
}
#menu ul li.last {
	background-image: none;
}
#menu ul li a, #menu ul li a:link, #menu ul li a:visited {
	width: 76px;
	float: left;
	margin: 8px 0 7px 0;
	padding: 4px 0;
	color: #C2C2C2;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
#menu ul li a:hover {
	color: #fff;
}
#menu-active {
	background: #34972C url("../images/button_selected.png") no-repeat 0 0;
	color: #fff !important;
}

/* Language selection */
#lang-selection {
	float: right;
	padding: 10px 0;
	background: transparent url("../images/3_dots.png") no-repeat center 12px;
	word-spacing: .8em;
}
#lang-selection a, #lang-selection a:link, #lang-selection a:visited {
	color: #C2C2C2;
}
#lang-selection a:hover {
	color: #fff;
}

/* Header 2 - Animation */
#left-shadow {
	background: #fff url("../images/background_left-shadow.jpg") no-repeat top left;
}
#right-shadow {
	margin-left: 25px;
	background: #fff url("../images/background_right-shadow.jpg") no-repeat top right;
}
#animation {
	height: 202px;
	clear: both;
	margin-right: 25px;
	background: #025C9B url("../images/background_header_2.jpg") no-repeat center top;
	color: #fff;
}

/* Contents */
#contents {
	margin: 0 25px;
	padding: 2.5em 25px 2.5em 25px;
}
#contents-inner {
	line-height: 1.6em;
}
div.left-section {
	margin-right: 170px;
	padding-right: 2em;
}

/* Footer */
#footer {
	clear: both;
	padding: 0 50px 50px 50px; /* MSIE 6 padding-top vtipne nasobi dvema - ale jen na uvodni strance; PROC?! */
	background: transparent url("../images/background_footer.jpg") no-repeat center bottom;
	text-align: center;
}



/*---------------------------------------------------------------
CONTENTS
---------------------------------------------------------------*/

/* Color Boxes */
div.boxes-right {
	width: 170px;
	float: right;
}
div.boxes-right.home {
	padding-top: 2em;
}
div.box {
	width: 170px;
	height: 170px;
	overflow: hidden;
	margin-bottom: 2em;
	color: #fff;
	line-height: 1.5em;
}
div.box-inner {
	padding: 1em;
}
div.blue {
	background: #025C9B url("../images/box_blue.png") no-repeat;
}
div.green {
	background: #34972C url("../images/box_green.png") no-repeat;
}
div.box h2, div.box h3, div.box h4 {
	margin: 0 0 .7em 0;
	padding: 0;
	color: #fff;
	font: bold 100% verdana, sans-serif;
}
div.box p {
	text-align: left;
}
div.box a.mail {
	font-size: 90%;
}
div.box a, div box.a:link, div.box a:visited {
	border-bottom-style: none !important;
	color: #fff !important;
	text-decoration: underline !important;
}
div.box a:hover {
	color: #fff !important;
	text-decoration: none !important;
}

/* Product Previews */
div.product-preview {
	margin-bottom: 2.5em;
}
div.product-preview div.clearer {
	clear: left;
}
img.product-image {
	width: 95px;
	height: 130px;
	float: left;
	margin: 0 2em 0 0;
}
h2 a, h2 a:link, h2 a:visited {
	border-bottom: 1px solid #464646;
	color: #464646;
	text-decoration: none;
}
h2 a:hover {
	border-bottom-color: #025C9B;
	color: #025C9B;
}
a.details {
	float: right;
}

/* Links/Buttons */
a.button-big-blue, a.button-big-green, a.button-small-blue, a.button-small-green { /* MSIE 6 bohuzel neumi poradne multi-class */
	width: 187px;
	float: left;
	margin: 1em 0;
	padding: 10px 0;
	background-position: 0 0;
	color: #fff !important;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 125%;
}
a.button-small-blue.right, a.button-small-green.right {
	width: 170px;
	display: block;
	margin: 0 0 1em 0;
}
a.button-big-blue {
	background: #025C9B url("../images/button-big_blue.png") no-repeat;
}
a.button-big-green {
	background: #34972C url("../images/button-big_green.png") no-repeat;
}
a.button-small-blue {
	background: #025C9B url("../images/button-small_blue.png") no-repeat;
}
a.button-small-green {
	background: #34972C url("../images/button-small_green.png") no-repeat;
}
a.button-big-blue:hover, a.button-big-green:hover, a.button-small-blue:hover, a.button-small-green:hover {
	background-position: 0% 100%;
	color: #fff;
}

/* Services */
p.block {
	margin-bottom: 2em;
	padding: 1em 1.5em;
	background-color: #EFEFEF;
}
img.photo-radio {
	width: 170px;
	height: 209px;
	margin: 0 0 1em 0;
}

/* Contacts */
p.contact-phones {
	margin: 1.5em 0 2.5em 0;
	padding-left: 1em;
	border-left: 5px solid #C2C2C2;
	font-weight: bold;
}