/* NULOVANI OKRAJU */
* { margin: 0px; padding: 0px; }
img { border: none; }

/* HLAVNI DEFINICE */
body {
	font-family: sans-serif;
	color: #707173;
	font-size: 17px;
	line-height: 20px;
	background: #98bf0e;
}

/* TEXT */
.bold { font-weight: bold; }
.normal, .footer h3 { font-weight: normal; }
.italic { font-style: italic; }
.nounderline, .help a { text-decoration: none; }
.underline { text-decoration: underline; }
.uppercase { text-transform: uppercase; }

/* LINKY, OKRAJE */
.nolineheight { line-height: 0px; }
.noborder { border: none !important; }

/* ZAROVNANI */
.center, .order, .help a { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

/* POZICOVANI */
.absolute, .cut { position: absolute; }
.relative { position: relative; }		
.floatleft, .help a, .sshots { float: left; }
.floatright, .help, .order, .contact { float: right; }
.cls, h1, .order, .contact { clear: both; }
.break { line-height: 0px; font-size: 0px; height: 0px; margin: 0px; }

/* BLOKY */
.block, .help a { display: block; }
.ablock { width: 100%; height: 100%; display: block; }

/* ZOBRAZENI */
.no, hr { display: none; }
.hidden { overflow: hidden; }
.nopoint, .portax ul { list-style: none; }
.noformat { display: inline !important; float: none !important; text-align: left !important; width: auto !important; }

/* BARVY */
.white, .help a, .portax, .help a:hover { color: #ffffff; }
.whiteg, .head, .footer, .order { background-color: #ffffff; }
.black { color: #000000; }
.blackg { background-color: #000000; }
.gray, a:hover { color: #b5b6b7; }
.grayg, .help a { background-color: #b5b6b7; }
.grayd, a, .order { color: #707173; }
.graydg, .help a:hover { background-color: #707173; }

/* BOXY */
.box { width: 100%; min-width: 890px; }
.box div { width: 890px; margin: 0px auto; }

/* HLAVICKA */
.head { border-top: 7px solid #b5b6b7; padding: 0px 0px 10px 0px; }
.head h1 { padding: 12px 0px 30px 0px; }
.head p { padding: 0px 0px 25px 0px; }
div.help { width: auto; }
.help a {
	font-size: 15px;
	width: 45px;
	margin: 0px 10px 0px 0px;
	padding: 5px 0px 2px 0px;
}

/* PORTAX */
.portax { background: #98bf0e url('../images/back-portax.jpg') center top no-repeat; }
.portax h2 { font-size: 33px; padding: 60px 0px 20px 320px; }
.portax h3 { font-size: 30px; padding: 0px 0px 20px 0px; }
.portax p.info { font-size: 20px; line-height: 25px; padding: 0px 0px 100px 320px; }
.portax ul { font-size: 25px; padding: 30px 0px 40px 0px; }
.portax li { background: url('../images/back-li.gif') left 6px no-repeat; padding: 8px 0px 9px 35px; }
div.sshots { width: 520px; }
.sshots p { padding: 0px 0px 20px 0px; }
.sshots img { padding: 0px 5px 5px 0px; }
div.order {
	width: 310px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.order h4 { font-size: 25px; padding: 23px 10px 18px 10px; }
.order p { font-size: 18px; padding: 0px 30px 20px 30px; }
div.order1 { margin: -420px 0px 0px 0px; }
div.order2 { margin: -190px 0px 30px 0px; }

/* PATICKA */
.cut { background: url('../images/back-cut.gif') left top repeat-x; height: 10px; }
.footer { margin: 0px 0px 0px 0px; }
.footer h3 { font-size: 16px; padding: 40px 0px 0px 0px; }
.footer p { font-size: 13px; padding: 20px 0px 15px 0px; }
div.contact {
	width: 310px;
	background-color: #f3f8e6;
	margin: 0px 0px 25px 0px;
	padding: 0px 0px 15px 0px;
}
.contact h3 { font-size: 20px; color: #98bf0e; padding: 40px 0px 5px 35px; }
.contact p { font-size: 16px; padding: 5px 0px 5px 35px; }
.email { background: url('../images/ico-email.gif') left top no-repeat; padding: 0px 0px 0px 25px; }
.phone { background: url('../images/ico-phone.gif') left top no-repeat; padding: 0px 0px 0px 25px; }

@media screen and (max-device-width: 800px) {
	.box { min-width: 800px; }
	.box div { width: 770px; }
	div.help { width: 350px; }
	div.order, div.contact, div.sshots { width: 310px; }	
}

@media screen and (max-device-width: 600px) {
	.box { min-width: 600px; }
	.box div { width: 570px; }
	div.help, div.sshots { width: auto; }
	div.order, div.contact, div.sshots { float: none; }
	div.order1, div.order2 { margin: 0px 0px 20px 0px; }
	.portax h2, .portax p.info { padding: 20px 0px 0px 0px; }
	.portax { background: #98bf0e url('../images/back-portax-mobile.jpg') left top repeat-x; }
	.portax ul { font-size: 20px; padding: 10px 0px 20px 0px; }
	.footer h3 { padding: 0px 0px 0px 0px; }
	.contact h3 { padding: 30px 0px 5px 35px; }
}

@media screen and (max-device-width: 480px) {
	.box { min-width: 480px; }
	.box div { width: 460px; }
	div.help, div.sshots { width: auto; }
	div.help, div.order, div.contact, div.sshots { float: none; }
	div.order1, div.order2 { margin: 0px 0px 20px 0px; }
	.head h1 { padding: 32px 0px 30px 0px; }
	.portax h2, .portax p.info { padding: 20px 0px 0px 0px; }
	.portax { background: #98bf0e url('../images/back-portax-mobile.jpg') left top repeat-x; }
	.portax ul { font-size: 18px; padding: 10px 0px 20px 0px; }
	.footer h3 { padding: 0px 0px 0px 0px; }
	.contact h3 { padding: 30px 0px 5px 35px; }
}

@media screen and (max-device-width: 320px) {
	.box { min-width: 320px; }
	.box div { width: 300px; }
	div.help, div.sshots { width: auto; }
	div.help, div.order, div.contact, div.sshots { float: none; }
	div.order1, div.order2 { margin: 0px 0px 20px 0px; }
	.head h1 { padding: 32px 0px 30px 0px; }
	.head h1 img { width: 300px; }
	.help a { width: auto; margin: 0px 5px 0px 0px; padding: 5px 7px; }
	.portax h2, .portax p.info { padding: 20px 0px 0px 0px; }
	.portax { background: #98bf0e url('../images/back-portax-mobile.jpg') left top repeat-x; }
	.portax ul { font-size: 18px; padding: 10px 0px 20px 0px; }
	.footer h3 { padding: 0px 0px 0px 0px; }
	.contact h3 { padding: 30px 0px 5px 35px; }
}