@charset "utf-8";
/*------------------------------------------------------------------------------
Website:	Varta VMAN
Author:		Vincent Verbruggen <vincent@strass.be>
Media:		screen
Date:		2009-04-01
------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------
FIXES FOR CSS-BUGS AND BROWSER SHORTCOMINGS
------------------------------------------------------------------------------*/
/* Set the dotted outline when focussing on elements to none */
* {outline: none;}

/* Hoverstuck-bug: http://www.satzansatz.de/cssd/pseudocss.html#hoverstuck */

a, a:hover {}
a:hover,a:focus {background: 0 0;}



/*------------------------------------------------------------------------------
SIMPLE AND MINIMAL RESET
------------------------------------------------------------------------------*/
body, html {
	margin: 0;
	padding: 0;
}
body {
	font-family: Helvetica, sans-serif;
	font-size: 0.8em;
	position: relative;
}
p, ul, ol,
h1, h2, h3 {
	 margin: 0;
	 padding: 0 0 0.8em;
}
form, fieldset, dl {
	border: none;
	margin: 0;
	padding: 0;
}
dd, dt {
	margin: 0 0 8px;
}
p {color:white;}


/*------------------------------------------------------------------------------
GENERAL PAGE LAYOUT AND DIMENSIONS

	Layout: fixed width - sticky footer - dynamic height with min-height

	body -> background-repeat
		wrapper -> again background-repeat to hide the background scrolling out
				   of sight when the viewport is smaller than the actual width
				   of the page
			container -> background without repeat
				navigation
				content
		footer
------------------------------------------------------------------------------*/
body, html {
	height: 100%;
}
div#wrapper {
	margin: 0 auto;
	height: auto;
	min-height: 100%;
	width: 980px;
}
	div#container {
		min-height: 592px;
		padding-bottom: 94px;
		position: relative;
		width: 980px;
	}
		div#content {
			padding: 165px 30px 0;
			position: relative;
			
		}
		div#navigation {
			/*
				Each button is 163px wide, which means that leaves us with a
				gap of 3 pixels if the width of the container is 980px.
				To remove this gap, we set the width of a button to 164px,
				and hide exceeding parts with overflow:hidden.
			*/
			position: absolute;
			top: 100px;
			width: 980px;
		}
			div#navigation ul {
				list-style: none;
				padding: 0;
				width: 990px;
			}
				div#navigation ul li {
					background: transparent url('../images/navigation-background.png') repeat-x center center;
					float: left;
					width: 163px;
				}
					div#navigation ul li a {
						background: transparent url('../images/navigation.jpg') no-repeat center bottom;
						color: white;
						display: block;
						height: 35px;
						/* Note that the line-height here is smaller than the
						actual height of the button, since the button also has
						a shadow. */
						line-height: 35px;
						margin-top: 6px;
						text-align: center;
						text-decoration: none;
						text-indent: 1em;
						text-transform:  uppercase;
						width: 164px;
					}
					div#navigation ul li a:hover,
					div#navigation ul li a:focus,
					div#navigation ul li a.active {
						background-position: center top;
						color: #001743;
					}
					div#navigation ul li .sub
					{
						width:163px;
                                                display:none;
					}
					div#navigation ul li .sub li
					{
						clear:both;
					}
					div#navigation ul li .sub li a
					{
						width:163px;
						margin:0px;
						background-image:url('../images/dropdownnav.jpg');
					}
div#header {
	height: 100px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 100%;
}
	div#header_content {
		height: 100px;
		margin: 0 auto;
		position: relative;
		width: 980px;
	}
		div#header_content a {
			color: white;
			display: block;
			height: 85px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			width: 235px;
		}
			div#header_content a span {
				cursor: pointer;
				display: block;
				height: 85px;
				left: 0;
				position: absolute;
				width: 235px;
			}
div#footer {
	height: 94px;
	margin: -94px auto 0;
	position: relative;
	text-align: center;
	width: 100%;
}
	div#footer_content {
		color: #727f97;
		font-size: 0.85em;
		height: 94px;
		margin: 0 auto;
		position: relative;
		width: 980px;
	}
		div#footer_content a {
			color: #727f97;
			text-decoration: none;
		}
		.strass {
			margin-right: 1em;
			position: relative;
			text-decoration: none;
			top: 0.5em;
		}
			.strass img {border:none;}
		div#footer_content .float-left,
		div#footer_content .float-right {
			margin-top: 55px;
		}
		div#footer_content .float-right {
			margin-top: 55px;
			padding-top: 1em;
		}



/*------------------------------------------------------------------------------
BACKGROUNDS
------------------------------------------------------------------------------*/
/*
	NOTE: There are two types of backgrounds: light and dark
	Default is the dark theme
*/
body, div#wrapper {background: #001743 url('../images/dark/background-repeat.gif') repeat-y center top;}
div#container {background: #084c82 url('../images/dark/background.jpg') no-repeat center 100px;}
div#header, div#header_content, div#header_content a span {background: transparent url('../images/dark/header.jpg') no-repeat top center;}
div#footer, div#footer_content {background: transparent url('../images/dark/footer.gif') no-repeat bottom center;}

body.light, body.light div#wrapper {background: #001743 url('../images/light/background-repeat.gif') repeat-y center top;}
body.light div#container {background: #084c82 url('../images/light/background.jpg') no-repeat center 100px;}
body.light div#header, body.light div#header_content, body.light div#header_content a span {background: transparent url('../images/light/header.jpg') no-repeat top center;}
body.light div#footer, body.light div#footer_content {background: transparent url('../images/light/footer.gif') no-repeat bottom center;}

body.page-home, body.page-home div#wrapper {background: #001743 url('../images/home/background-repeat.gif') repeat-y center top;}
body.page-home div#container {background: #084c82 url('../images/home/background.jpg') no-repeat center 100px;}
body.page-home div#header, body.page-home div#header_content, body.page-home div#header_content a span {background: transparent url('../images/home/header.jpg') no-repeat top center;}
body.page-home div#footer, body.page-home div#footer_content {background: transparent url('../images/home/footer.gif') no-repeat bottom center;}




/*------------------------------------------------------------------------------
TEXT STYLES
------------------------------------------------------------------------------*/
div#content h1 {
	color: #ffcc00;
	font-size: 1.6em;
	text-transform: uppercase;
}
.uppercase {text-transform:uppercase;}



/*------------------------------------------------------------------------------
PAGE: splash.tpl - language selection
------------------------------------------------------------------------------*/
body.page-splash div#wrapper {background: #001743 url('../images/home/background-repeat.gif') repeat-y center top;}
body.page-splash, body.page-splash div#container {background: #001743 url('../images/light/background.jpg') no-repeat center 100px;}
body.page-splash div#header, body.page-splash div#header_content, body.page-splash div#header_content a span {background: transparent url('../images/light/header.jpg') no-repeat top center;}
body.page-splash div#footer, body.page-splash div#footer_content {background: transparent url('../images/light/footer.gif') no-repeat bottom center;}
body.page-splash div#wrapper,
body.page-splash {
	height: 684px;
}

body.page-splash div#content {
	padding-top: 235px;
	text-align: center;
}
body.page-splash div#content h1 {
	color: white;
	font-size: 1.1em;
	text-transform: uppercase;
}
ul#languages {
	list-style: none;
}
	ul#languages li {
		background: transparent url('../images/language-btn-background.png') no-repeat center center;
		display: block;
		height: 38px;
		margin: 0 auto;
		text-align: center;
		text-transform: uppercase;
		width: 191px;
	}
		ul#languages li a {
			background: transparent url('../images/language-btn.gif') no-repeat center top;
			color: #001743;
			display: block;
			height: 38px;
			line-height: 38px;
			text-decoration: none;
			width: 191px;
		}
		ul#languages li a:hover,
		ul#languages li a:focus {
			background-position: center bottom;
		}




/*------------------------------------------------------------------------------
PAGE: Where to buy
------------------------------------------------------------------------------*/
body.page-where-to-buy .point-of-sale {
	float: left;
	margin: 0.5em 0 1.3em;
	width: 306px;
}
	body.page-where-to-buy div#content .search_dealer {
		background: transparent url('../images/yellow-vertical-line.gif') repeat-y 600px top;
		margin-bottom: 20px;
	}
		body.page-where-to-buy div#content .search_form {
			float: left;
			width: 580px;
		}
			body.page-where-to-buy div#content .search_form .search_content {
				color: white;
				font-size: 0.9em;
				margin: 1em 0 1.7em;
			}
			body.page-where-to-buy div#content fieldset {
				border: none;
				margin: 0;
				padding: 0;
			}
			body.page-where-to-buy div#content .search_form a.button {
				float: left;
			}
			body.page-where-to-buy div#content .search_form input {
				float: left;
				font-size: 1.4em;
				height: 24px;
				margin-top: 4px;
				width: 400px;
			}
			body.page-where-to-buy div#content .dealer_replacement {
				color: white;
				font-size: 0.9em;
				margin: 1em 0 2.5em;
			}
		body.page-where-to-buy div#content .my_dealer {
			float: right;
			width: 300px;
		}
	
	body.page-where-to-buy div#content hr.yellow {
		background: #f9cb44;
		border: none;
		color: #f9cb44;
		height: 1px;
		margin: 1.5em 0 2.8em;
	}
        body.page-where-to-buy div#content .legend {
              border-top:1px solid #f9cb44;
              padding:5px 0px;
              margin-bottom:20px;
              color:#FFF;
        }
        body.page-where-to-buy div#content .legend img{
            position:relative;
            bottom:-4px;
            margin-left:10px;
        }

	body.page-where-to-buy .point-of-sale .logo,
	body.page-where-to-buy .point-of-sale .logo-nobg {
		/* This background functions as the outer glow of the logo
		and as a fallback if there's on logo present. */
		background: transparent url('../images/logo-varta.png') no-repeat left top;
		float: left;
		height: 80px;
		padding: 4px;
		width: 80px;
	}
	body.page-where-to-buy .point-of-sale .logo-nobg {
		background-image: none;
	}
		body.page-where-to-buy .point-of-sale .logo img {
			height: 80px;
			width: 80px;
		}
                body.page-where-to-buy .point-of-sale .icon
                {
                        width:18px;
                        height:18px;
                }
	body.page-where-to-buy .point-of-sale .details {
		color: white;
		float: right;
		font-size: 0.9em;
		padding-top: 3px;
		width: 210px;
	}
		body.page-where-to-buy .point-of-sale .details a {
			background: transparent url('../images/link-bullet.gif') no-repeat left 0.4em;
			color: #fed31e;
			padding-left: 0.8em;
			text-decoration: none;
		}
		body.page-where-to-buy .point-of-sale .details a:hover,
		body.page-where-to-buy .point-of-sale .details a:focus{
			color:white;
		}




/*------------------------------------------------------------------------------
PAGE: News
------------------------------------------------------------------------------*/
body.page-news div.article {color: white}
body.page-news div.article h2 {
	font-size: 1.1em;
	position: relative;
	text-transform: uppercase;
}
	body.page-news div.article h2 span {
		color: #fed31e;
		float: right;
		font-size: 0.8em;
	}
	body.page-news div.article img.article-image {
		background: transparent url('../images/article-image-background.png') no-repeat center center;
		margin-left: -9px;
		padding: 9px;
	}
	body.page-news div.article div.article-text {
		font-size: 0.9em;
	}
		body.page-news div.article div.article-text .column {
			margin-right: 18px;
		}
		body.page-news div.article div.article-text .last.column {
			margin-right: 0;
		}
body.page-news hr {
	background: #879bb3;
	border: none;
	color: #879bb3;
	height: 2px;
	margin: 1.5em 0 2.8em;
}




/*------------------------------------------------------------------------------
PAGE: FAQ
------------------------------------------------------------------------------*/
body.page-faq #content {color: white}
body.page-faq .questions {
	list-style: none;
	padding-bottom: 2.5em;
}
	body.page-faq .questions a {
		background: transparent url('../images/link-bullet.gif') no-repeat left 0.4em;
		color: #FED31E;
		font-size: 1.1em;
		font-weight: bold;
		line-height: 1.8em;
		padding-left: 0.8em;
		text-decoration: none;
	}
	body.page-faq .questions a:hover,
	body.page-faq .questions a:focus {
		color: white;
	}
body.page-faq div.answer h2 {
	font-size: 1.1em;
	position: relative;
	text-transform: uppercase;
}
	body.page-faq div.answer div.answer-text {
		font-size: 0.9em;
	}
	body.page-faq div.answer ul,
	body.page-faq div.answer ol {
		padding: 0 0 1em 3em;
	}
body.page-faq hr {
	background: #879bb3;
	border: none;
	color: #879bb3;
	height: 2px;
	margin: 1.5em 0 2.8em;
}




/*------------------------------------------------------------------------------
PAGE: Product
------------------------------------------------------------------------------*/
body.page-product div#content {
	padding-left: 0;
	padding-right: 0;
}
body.page-product div#content h1 {
	padding-left: 30px;
	padding-right: 30px;
}
body.page-product #content .big-indent {
	color: white;
	float: right;
	font-size: 0.9em;
	font-weight: bold;
	width: 48%;
}
body.page-product #content strong {
	color: #FFCC00;
	font-size: 1.25em;
	font-style: italic;
}




/*------------------------------------------------------------------------------
PAGE: Promotions
------------------------------------------------------------------------------*/
body.page-promotions div#content {
	padding-left: 22px;
	padding-right:6px;
}
body.page-promotions #content div.box {
	color: white;
	float: left;
	font-size: 0.9em;
	margin-left: -11px;
	margin-top: -11px;
	position: relative;
}
	body.page-promotions #content div.box div.box-top {
		background: transparent url('../images/box-dark-top.png') no-repeat center top;
		height: 31px;
		padding: 0 31px;
		position: relative;
		width: 422px;
	}
	body.page-promotions #content div.box div.box-content {
		background: transparent url('../images/box-dark-content.png') repeat-y center center;
		padding: 0 31px;
		position: relative;
		width: 422px;
	}
	body.page-promotions #content div.box div.box-bottom {
		background: transparent url('../images/box-dark-bottom.png') no-repeat center bottom;
		height: 31px;
		padding: 0 31px;
		position: relative;
		width: 422px;
	}
	body.page-promotions #content div.box div.box-content h1 {
		text-transform: none;
	}
	body.page-promotions #content div.box img.box-image {
		background: transparent url('../images/box-image.png') no-repeat center center;
		float: right;
		height: 168px;
		margin-left: 35px;
		margin-right: -5px;
		padding: 9px;
		width: 130px;
	}
	body.page-promotions #content div.box img.box-badge {
		height: 97px;
		position: absolute;
		right: 116px;
		top: 79px;
		width: 97px;
	}
	body.page-promotions #content div.box .button {
		float: left;
	}




/*------------------------------------------------------------------------------
PAGE: Home
------------------------------------------------------------------------------*/
body.page-home, body.page-home div#wrapper {background-image:none;}
body.page-home {
	background: #001743 url('../images/home/background.jpg') no-repeat center 100px;
	height:auto;
}
body.page-home div#container {
	height: 684px;
	padding-bottom: 0;
}
body.page-home div#footer {
	height: 48px;
	margin-top: -48px;
}
	body.page-home div#footer_content {height: 48px;}
	body.page-home div#footer_content div {margin-top: 9px;}
body.page-home div#content {
	padding-left: 0;
	padding-right: 0;
}
body.page-home div#vartaflash_container {
	margin-top: -16px;
}
body.page-home div.home-buttons {
	background: transparent url('../images/home-buttons.png') no-repeat center center;
	height: 178px;
	margin: -12px 0 0 4px;
	width: 972px;
}
body.page-home #homestation {
        background: transparent url('../images/home-homestation-buttons.png') no-repeat center center;
}
body.page-home #zero {
        background: transparent url('../images/home-zero-buttons.png') no-repeat center center;
}
	body.page-home div.home-buttons a {
		float: left;
	}
	body.page-home div.home-buttons .column {
		float: left;
		position: relative;
		width: 33%;
	}
		body.page-home div.home-buttons .column .column-content {
			color: white;
			margin-left: 25px;
			margin-top: 35px;
			width: 165px;
                        height:121px;
		}
			body.page-home div#content div.home-buttons .column-content h1 {
				color: white;
				font-size: 1.1em;
				text-transform: uppercase;
			}
			body.page-home div#content div.home-buttons a.button {
				left: 24px;
				position: absolute;
				top: 122px;
			}
                   
}



			
/*------------------------------------------------------------------------------
PAGE: Contact
------------------------------------------------------------------------------*/
body.page-contact #content {color: white;}
body.page-contact dl {width: 70%;}
body.page-contact dt {
	clear: left;
	float: left;
	height: 38px;
	line-height: 38px;
	width: 20%;
}
body.page-contact dd {
	float: right;
	position: relative;
	width: 79%;
}
body.page-contact dd.mandatory {
	background: transparent url('../images/mandatory.gif') no-repeat right center;
}
body.page-contact input,
body.page-contact textarea {
	background: transparent url('../images/input.png') no-repeat left top;
	border: none;
	float: left;
	height: 21px;
	line-height: 21px;
	margin: 0;
	padding: 12px 4px 5px 10px;
	padding-top: 9px;
	position: relative;
	width: 456px;
}
body.page-contact input { margin-right: 2px;}
body.page-contact textarea {
	background-image: url('../images/textarea.png');
	height: 157px;
	margin-left: 2px;
	padding: 8px 4px 5px 10px;
	overflow: hidden;
}
body.page-contact a.button {
	margin-right: 45px;
}
body.page-contact dd.ddm {z-index:50;}
body.page-contact .dropdown {
	margin-left: 2px;
	position: relative;
}
body.page-contact .dropdown .button {
	background: transparent url('../images/dropdown/button.png') no-repeat left center;
	cursor: pointer;
	float: left;
	height: 35px;
	position: relative;
	width: 33px;
}
body.page-contact .dropdown .right {
	background: transparent url('../images/dropdown/right.png') no-repeat right center;
	color: black;
	cursor: default;
	float: left;
	font-size: 1em;
	font-weight: bold;
	height: 35px;
	line-height: 36px;
	margin-right: 8px;
	position: relative;
	overflow: none;
	padding: 0 1.2em 0 1em;
}
body.page-contact .dropdown .list {
	background: white;
	border: 1px solid #444;
	color: black;
	list-style: none;
	margin: 0;
	overflow: auto;
	padding: 0;
	position: absolute;
	top: 33px;
	left:3px;
}
body.page-contact .dropdown .list li {
	cursor: pointer;
}
body.page-contact .dropdown .list li.hover {
	background: #CCC;
}
body.page-contact .dropdown select {
	display: none;
}
body.page-contact .mandatory {
	background: transparent url('../images/mandatory.gif') no-repeat center center;
	display: block;
	float: left;
	height: 11px;
	margin-top: 11px;
	width: 11px;
}
body.page-contact .form-error {
	background: transparent url('../images/red-bg.png') repeat center center;
	cursor: pointer;
	display: block;
	font-weight: bold;
	height: 30px;
	left: 4px;
	line-height: 30px;
	position: absolute;
	text-align: center;
	top: 4px;
	width: 456px;
}
body.page-contact .form-error-textarea {
	height: 164px;
	line-height: 164px;
	top: 2px;
}
body.page-contact div#content h1,
body.page-contact div#content h2,
body.page-contact div#content h3,
body.page-contact div#content h4,
body.page-contact div#content h5,
body.page-contact div#content h6,
body.page-contact div#content p {
	width: 70%;
}

/*------------------------------------------------------------------------------
GENERAL CSS
------------------------------------------------------------------------------*/
a.button {
	background: transparent url('../images/button-background.png') no-repeat left top;
	display: block;
	float: right;
	height: 38px;
	padding-left: 6px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
	a.button span.btn-arrow,
	a.button span.btn-background {
		color: #001743;
		cursor: pointer;
		display: block;
		height: 30px;
		line-height: 32px;
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}
	a.button span.btn-glow {
		background: transparent url('../images/button-background.png') no-repeat right -40px;
		display: block;
		height: 34px;
		padding: 4px 4px 0 0;
	}
		a.button span.btn-arrow {
			background: transparent url('../images/button.gif') no-repeat left top;
			margin-left: -2px;
			padding-left: 38px;
		}
		a.button:hover span.btn-arrow,
		a.button:focus span.btn-arrow {background-position:left -120px;}
			a.button span.btn-background {
				background: transparent url('../images/button.gif') no-repeat right -40px;
				padding-right: 15px;
			}
			a.button:hover span.btn-background,
			a.button:focus span.btn-background {background-position:right -160px;}
                a.button-movie
                {
                    position:absolute;
                    right:18px;
                    bottom:0px;
                    display:block;
                    height:30px;
                    width:30px;
                    text-indent:-9999px;
                    background: transparent url('../images/movie-button.gif') no-repeat 0px 0px;
                }
                 a.button-movie:hover
                 {
                     background: transparent url('../images/movie-button.gif') no-repeat -30px 0px;
                 }


.clear {
	clear: both;
	display: block;
	float: none;
}
.float-right {float: right;}
.float-left {float: left;}



body.page-disclaimer div#content a,
body.page-disclaimer div#content a:link,
body.page-disclaimer div#content a:visited {
	background: transparent url('../images/link-bullet.gif') no-repeat left 0.4em;
	color: #fed31e;
	padding-left: 0.8em;
	text-decoration: none;
}
body.page-disclaimer div#content a:hover,
body.page-disclaimer div#content a:active,
body.page-disclaimer div#content a:focus{
	color:white;
}


/*------------------------------------------------------------------------------
SUPPORT BUTTON
------------------------------------------------------------------------------*/
a.support-button {
	background: transparent url('../images/support-button.png') no-repeat right center;
	color: #FED31E;
	display: block;
	float: right;
	font-weight: bold;
	height: 73px;
	line-height: 73px;
	padding-right: 30px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	width: auto;
}
	a.support-button span {
		background: transparent url('../images/support-button.png') no-repeat left center;
		cursor: pointer;
		float: left;
		display: block;
		height: 73px;
		margin-left: -67px;
		position: relative;
		width: 67px;
	}

input, textarea {
	font-family:Helvetica,sans-serif;
	font-size:1.2em;
}