/* Katpak website
*  Global styles 
*  Author: Geniemouse Ltd.
*  Date: 04-2010
*  
*  INDEX:
*  YUI CSS Reset
*  generic text/tag styles
*  basic layout: frame, content, header, nav, footer
*  Clearfix 
*  Miscellany
*  Locale/region flags
*/

/*YUI CSS Reset*/
/*Copyright (c) 2009, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.7.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;}

/* Generic text/tag styles */
body {color:#999; font:100%/120% arial,helvetica,sans-serif; background:#ad8b66 url(../img/bg/body.gif) repeat 0 0; text-align:center;}
h1, h2, h3, h4 {color:#000; font-weight:bold; margin:22px 0 -10px;}
h1 {font-size:1.4em;}
p, q, cite, dl, address, fieldset {display:block; margin:22px 0;}
a {color:#37b3d5; text-decoration:none;}
a:hover, a:focus, a:active {text-decoration:underline;}

p.cta {overflow:hidden;}
	p.cta a, p.cta input {display:block; width:auto; color:#fff; font-weight:bold; padding:6px 16px; background:#62beda url(../img/bg/cta-button.gif) repeat-x 0 100%; border:solid 1px #95abb2; border-top:solid 1px #899a9f; border-bottom:solid 1px #b1bcbf; outline:0; float:right;}
	p.cta a:hover, p.cta a:focus,
	p.cta input:hover, p.cta input:focus {background:#37b3d5;}
p.back-top {font-size:.9em; margin:-22px 0 22px;}

q {font-style:italic;}
cite {color:#000;}
em {font-weight:bold;}

img, ul {display:block;}
ul, ol, hr {margin:22px 0; clear:both;}
li p {margin:4px 0;}

dl dl {margin:0;}

hr {display:block; height:1px; line-height:1px; border:0; border-top:solid 1px #ccc;}

fieldset fieldset {margin:0;}
legend {position:relative; display:block; width:100%; color:#000; text-indent:0; margin:0 0 22px; padding:0; float:left;}
label {width:40%; margin:2px 0 0; float:left;}
	label sup {position:relative; top:6px; vertical-align:top; font-size:1.0em; font-weight:bold; line-height:0;}
input {width:50%; font-size:1.0em; padding:2px; border:solid 1px #ccc; outline:0; float:left;}
textarea {width:90%; padding:2px; border:solid 1px #ccc;}

/* radio buttons and checkbxes */
label input {position:relative; top:-1px; width:auto; margin:0 5px 0 0; padding:0; border:0; float:none;}
/* show radio bittons/checkboxes in 2 columns */
.display-inline {margin:0 31px 11px 0; overflow:hidden;}
.display-inline legend {margin:0 0 11px;}
.display-inline p {width:49%; margin:11px 0; float:left;}
	.display-inline p label {width:auto; float:none;}

span.warning, .validation-advice {display:block; color:#f00; font-size:.9em; margin:0 0 0 40%; padding:2px 0 0; clear:both;}
p.error {color:#f00;}
	p.error input {border:solid 1px #f00;}
.hide {display:none;}

/* Basic layout */
#frame {width:1002px; font-size:.875em; line-height:1.55em; margin:0 auto; text-align:left; overflow:hidden;}

/* Header */
#header {min-height:126px; margin:0 10px; padding:8px 10px 0; background:#fff url(../img/bg/header.gif) repeat-x 0 100%;}
.logo {width:279px; margin:0 auto 11px;}

/* Navigation */
#navigation {position:relative; left:-10px; margin:0;}
#navigation li {margin:0 0 1px; border-right:solid 1px #e6e3e0; float:left;}
	#navigation li a {display:block; color:#000; padding:9px 30px 7px;}
	#navigation li a:hover, #navigation li a:focus {background:#fff;}
	#navigation li a.on, 
	#navigation li a.on:hover, #navigation li a.on:focus {background:#fff url(../img/bg/nav-on.gif) repeat-x 0 100%;}
	
/* Footer */
#footer {color:#fff; font-size:.82em; margin:20px 10px 0; padding:10px; background:#38b3d5 url(../img/bg/footer.gif) repeat-x 0 100%;}
	#footer a {color:#fff; text-decoration:underline;}
	#footer a:hover, #footer .copy a:focus {text-decoration:none;}
	#footer ul {margin:0;}
	#footer li {padding:0 7px; float:left;}
	#footer .links {width:653px; margin:23px 0 0; float:right;}
	#footer .copy {width:230px; float:left;}
		#footer .copy p {margin:0;}

/* Content */
#content {margin:20px 10px 0; padding:20px 0; background:#fff url(../img/bg/content.gif) repeat-x 0 100%;}
.columns {padding:0 0 0 30px;}
.col-left {width:280px; margin:-21px 0 0; float:left;}
	.col-left p {font-size:1.1em; line-height:1.25em;}
.col-right {width:545px; margin:-21px 0 0 15px; float:left;}


/* Thumbnail image/copy items: used by awards, products and testimonials pages */
.item {position:relative; margin:22px 0; overflow:hidden;}
.item .img {margin:5px 34px 5px 0; float:left; clear:left;}
.item .copy {width:400px; margin:-20px 0 5px; float:left;}
	.item .copy cite {margin:-10px 0 0;}

/* Testimonial specific styling for thumbnail image/copy items */	
.testimonial {}
.testimonial .img {width:108px;}

/* Award specific styling for thumbnail image/copy items */
.award {}
.award .img {width:200px;}
.award .copy {width:311px;}
	.award .copy h2 {margin-bottom:-22px;}
		
/* Product specific styling */
.katpaks {}	
.katpaks img, .katpak {border:solid 1px #ccc;}
.katpaks dl {clear:both;}
.katpaks dd dt, .katpaks dd dd {display:inline}
.katpaks dd dt.hide {display:none;}
.katpaks p.cta a, .katpaks p.cta input {float:left;}
	
.hero-katpak {}
.hero-katpak .img {width:188px;}
.hero-katpak .copy {width:320px;}
	.hero-katpak .copy p {margin:0;}
	.hero-katpak .copy p.cta {margin-top:10px;}
			
.row-katpaks {position:relative; left:-4px; margin:22px 0;}
	.row-katpaks .katpak {width:138px; font-size:.9em; margin:0 4px; padding:0 16px; float:left; background:#dfe1e2 url(../img/bg/key-points.gif) repeat-x 0 0;}
		.row-katpaks .katpak h2 {font-size:1.1em;}
	
/* Promotion styling */
#hero {position:relative; margin:20px 10px 0; padding:20px 0; text-align:center; background:#fff;}
.hero {margin:-21px 0 0; font-size:1.4em; overflow:hidden;}
	.hero h2 {font-size:1.2em; margin-bottom:-7px;}
	.hero .img {width:982px; height:290px;}
	.hero .img a {position:relative; display:block; width:982px; height:290px;}
	.hero .copy {width:982px; height:290px; margin-top:-290px;}
	.hero .copy p {position:relative; top:202px; width:140px; margin:0 23px; color:#000; font-size:.6em; float:left; background:#fff; border:solid 1px #ccc;}
		.hero .copy p span {display:block; background:#e5e6e7;}
		.hero .copy a:hover span, .hero .copy a:focus span {text-decoration:underline;}
	.hero .key-points {position:relative; width:218px; font-size:.85em; color:#000; text-align:left; margin:0 23px; padding:0 16px; background:#dfe1e2 url(../img/bg/key-points.gif) repeat-x 0 0; border:solid 1px #ccc; float:right;}
		.hero .key-points ol, .hero .key-points ul {}
		.hero .key-points li {padding:10px 0 10px 34px; background:url(../img/bg/tick.gif) no-repeat 0 .7em; border-bottom:solid 1px #ccc;}

/* Promotion styling */
#promos {margin:20px 0 0;}
#promos .promo {width:290px; margin:0 10px; padding:8px 12px; background:#fff url(../img/bg/content.gif) repeat-x 0 100%; float:left;}
	#promos .promo h2 {margin:0; padding:8px 10px 0;}
	#promos .promo p {font-size:.9em; line-height:1.1em; min-height:58px;  margin:10px 0; padding:0 100px 0 10px;}
	#promos .promo p.cta {position:relative; min-height:0; margin:-20px 0 14px; padding:0;}
		#promos .promo .img p {font-size:.7em; margin:0; padding:0;}
		#promos .promo .img span {display:block; color:#37b3d5; padding:6px 0;}

.form {width:450px;}
.form p.cta {padding-right:39px;}	
		
/* Locale/region flags */
#countries {margin:0; float:right;}
#countries li {margin:0 5px 0 0; float:left;}
#countries a {display:block; width:16px; height:11px; text-indent:-10000px; background:url(../img/bg/flags.gif) no-repeat 0 0; outline:0;}
#countries a.uk {background-position:0 0;}
#countries a.de {background-position:-17px 0;}
#countries a.it {background-position:-34px 0;}
#countries a.es {background-position:-51px 0;}
#countries a.us {background-position:-68px 0;}

.de #promos .promo p {min-height:75px;}
.it #promos .promo p {}
.es #promos .promo p {}
.us #promos .promo p {}

.de #promos .promo p.cta, .it #promos .promo p.cta, .es #promos .promo p.cta, .us #promos .promo p.cta {min-height:0; margin-top:-42px;}


/* How 2 pop-up animation windows */
body.pop {background:#fff;}
.pop p {margin:0;}
.pop #frame {width:865px;}
.pop .nonflash-alternative {height:400px; overflow:hidden; overflow-y:scroll;}

/* clearFix: adapted from http://www.positioniseverything.net/easyclearing.html */
.cf:after, #navigation:after, .columns:after, .item:after, .row-katpaks:after, #hero:after, #promos:after, #footer:after, #footer ul:after, .form p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.cf, #navigation, .columns, .item, .row-katpaks, #hero, #promos, #footer, #footer ul, .form p {height:1%;}

/* tweak off-stage */
#header h1 span, #header .logo span {position:absolute; z-index:-1;}
.skip-links a {position:absolute; top:0; left:-10000px; display:block; width:200px; color:#fff; background:#333; padding:4px 8px; text-align:left; z-index:10001;}