@import 'lib/reset.css';
@import 'lib/typography.css';
@import 'lib/forms.css';

/* layout */
body {
	/*background: #343434 url(/img/vmp2008/bg/body.gif) repeat-x top;*/
	background: #343434 url(/img/vmp2008/bg/body.png) repeat-x top;
}
#container {
	width: 960px;
	/*float: left;*/
	margin: 0 auto;
	background: #FFF;
	padding-bottom: 10px;
	position: relative;
}
#header {
	background: url(/img/vmp2008/bg/header.gif) no-repeat;
	/*padding: 5px 20px 0 70px;*/
	height: 140px;
	position: relative;
}
#main {
	/*background: url(/img/vmp2008/bg/main.gif) repeat-y 0 0;*/
	padding: 0 20px 0 70px;
	clear: both;
}
#content {
	min-height: 400px;
}
.columns {
	background: url(/img/vmp2008/bg/column-border.gif) right repeat-y;
}
#footer {
	color: #6e6f6f;
	/*padding: 60px 20px 0 70px;*/
	height: 45px;
	line-height: 45px;
	background: #dddedf;
	margin: 20px 10px 0 10px;
	padding-left: 10px;
}
#footer a {
	color: #6e6f6f;
}
#footer img {
	vertical-align: middle;
}

#logo {
	padding: 20px 0 25px 30px;
	/*float: left;*/
}
#lang-selection {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 11px;
}
#lang-selection a {
	color: #111;
	margin: 0 5px;
}

/* columns */
#wrapper {
	float: left; 
	width: 100%;
}
#column-content {
	margin: 0 230px 0 190px;
	padding-right: 20px;
}
#column-content-full {
	float: right;
	width: 660px;
	padding-right: 20px;	
}
#column-nav {
	float: left;
	width: 210px;
	margin-left: -917px;
}
#column-sidebar {
	float: left;
	width: 210px;
	margin-left:-210px;
}

/* navigation */
#navigation {
	/*position: absolute;
	top: 8px;
	right: 180px;*/
	/*width: 290px;*/
	background: url(/img/vmp2008/bg/navi-bg.gif) repeat-x;
	height: 44px;
	margin: 0 10px 20px 10px;
}
#navigation li {
	float: left;
	list-style: none;
	height: 44px;
	line-height: 44px;
	width: 16.6%;
}

#navigation li.last a {
	background: none;
}

#navigation a {
	color: #fff;
	display: block;
	cursor: pointer;
	font-size: 16px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: url(/img/vmp2008/bg/navi-separator.gif) center right no-repeat;
	/*padding: 0 42px;*/
	text-align: center;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);

}
#navigation a:hover {
	text-decoration: none;
}
#navigation .current {
	background: url(/img/vmp2008/bg/navi-bg-selected.gif) repeat-x;
}

#navigation .current a {
	background-image: url(/img/vmp2008/bg/navi-separator-selected.gif);
}

/* sidenav */
#column-nav {
	
}
#column-nav .dialoG {
	margin-bottom: 0;
}
#column-nav ul {
	list-style: none;
	margin: 0;
}
#column-nav ul li {
	padding: .1em 0 .1em 0px;
	font-weight: bold;
}
#column-nav ul ul li {
	border: none;
	padding: .2em 0;
	background: none;
}
#column-nav ul ul {
	margin: .2em 0 0 0.5em;
}
#column-nav ul li.last,
#column-nav ul li ul li {
	border: none;
}
#column-nav ul li ul li {
	margin-left: 5px;
}
#column-nav a {
	color: #333333;
	background: url(/img/vmp2008/bg/sidenav-bg.gif) no-repeat 0 3px;
	padding-left: 16px;
}
#column-nav a.current,
#column-nav ul a.current {
	background-image: url(/img/vmp2008/bg/sidenav-bg-selected.gif);
}

#column-nav ul ul a.current {
	color: #909090;
}

#column-nav ul ul a, #column-nav ul ul a.current {
	background: none;
}

#column-nav.no-nav a {
	background: none;
	padding: 0;
	color: #e10000;
}

#column-nav.no-nav h1 b {
	font-weight: normal;
}

#column-nav.no-nav h2 {
	color: #222;
}

/* vmp worldwide */
#vmp-worldwide {
	color: #333333;
	/*width: 140px;
	height: 45px;*/
	position: absolute;
	padding: 15px 35px 20px 15px;
	top: 40px;
	right: 10px;
	background: #eaeaea;
}
#vmp-worldwide p {
	margin-bottom: .5em;
}
#vmp-worldwide select {
	width: 170px;
}

/* breadcrumbs */
#breadcrumbs {
	padding: 0;
	margin-left: 0;
	color: #666;
	list-style: none;
}
#breadcrumbs li {
	display: inline;
	padding-right: .3em;
}
#breadcrumbs a {
	color: #666;
	padding-right: .3em;
}

/* home-teaser */
.home-teaser {
	width: 445px;
	margin-bottom: 20px;
	margin-right: 20px;
}
.home-teaser img {
	vertical-align: bottom;
}
.home-teaser-text {
	padding: 1em;
	height: 160px;
	overflow: hidden;
	position: relative;
	background: url(/img/vmp2008/bg/home-teaser-text.gif) no-repeat bottom;
}
.home-teaser-text img {
	float: left;
	margin-right: 1em;
	margin-bottom: 100px;
}
.home-teaser-text .button {
	position: absolute;
	left: 148px;
	bottom: 18px;
}
.home-column {
	width: 290px;
	margin-right: 8px;
}

.home-column h2 {
	background: url(/img/vmp2008/bg/home-column-bg.gif) repeat-x;
	height: 38px;
	line-height: 38px;
	color: #FFF;
	padding-left: 13px;
	font-weight: normal;
	position: relative;
}

.home-column a.rss {
	color: #FFF !important;
	font-size: 11px;
}

.home-column h2 span {
	position: absolute;
	right: 10px;
	top: 8px;
	line-height: normal;
}

.home-column img {
	vertical-align: middle;
}

.home-column .news h3 {
	float: left;
	width: 395px;
	font-weight: normal;
	line-height: normal;
}

.home-column .news p {
	float: left;
	clear: both;
	width: 65px;
	font-weight: bold;
	font-size: 1em;
	line-height: normal;
}

.home-column .news a {
	color: #333333;
}

.home-column .news a.more {
	color: #e10000;
	font-weight: normal;
	float: right;
}

.home-column .articles p {
	float: none;
	width: auto;
	font-weight: normal;
}

.home-column .articles .wrapper img[align=right], #content #wrapper img[align=right] {
	margin: 0 0 15px 15px;
}

.home-column .articles .wrapper img[align=left], #content #wrapper img[align=left] {
	margin: 0 15px 15px 0;
}

.home-column .articles .date {
	margin-top: 0;
	font-size: 11px;
}

.home-column .articles h3 {
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 0;
}

.home .column.last p {
	width: 191px;
}

/*Home box*/

.home-box {
	margin-bottom: 20px;
}

.home-box .wrapper {
	padding: 0 10px 10px 10px;
}

#select-servicearea {
	background: #eaeaea;
	padding: 15px;
	width: 191px;
}
#select-servicearea h2 {
	color: #333333;
	font-size: 13px;
}
#select-servicearea select {
	margin-right: 1em;
	width: 13em;
	/*float: left;*/
}

.footer-logo {
	margin-right: 20px;
}

.link-list {
	list-style: outside url(/img/vmp2008/bg/sidenav-bg.gif);
	margin-right: 0;	
}
.link-list a {
	color: #111;
}

.content-column {
	width: 210px;
	margin-right: 15px;
}

/*News*/

/*.all-news.news h3 {
	float: left;
	width: 365px;
	font-weight: normal;
	line-height: normal;
}

.all-news.news p {
	float: left;
	clear: both;
	width: 65px;
	font-weight: bold;
	font-size: 1em;
	line-height: normal;
}

.all-news.news a {
	color: #333333;
}*/

/*Main image*/

#main-image {
	margin: -20px 0 5px 10px;
}

/*Banners*/

#banners {
	margin-top: 10px;
}

#banners img {
	margin-bottom: 10px;
	display: block;
}

/*Logos*/

#logos {
	 text-align: center;
}

#logos a {
	margin: 0 3px;
}

#logos img {
	vertical-align: middle;
}

/* dialog */
.d-whitE .content,
.d-whitE .t,
.d-whitE .b,
.d-whitE .b div {
	background-image: url(/img/vmp2008/dialog-white.gif);
}
.d-greY .content,
.d-greY .t,
.d-greY .b,
.d-greY .b div {
	background-image: url(/img/vmp2008/dialog-grey.gif);
}
.d-naV .content,
.d-naV .t,
.d-naV .b,
.d-naV .b div {
	background-image: url(/img/vmp2008/dialog-nav.gif);
}

.dialoG {
	position:relative;
	margin:0 auto;
	min-width:8em;
	max-width:900px; /* based on image dimensions - not quite consistent with drip styles yet */
	z-index:1;
	margin-left:10px; /* default, width of left corner */
	margin-bottom: 1em; /* spacing under dialog */
}
.dialoG .content,
.dialoG .t,
.dialoG .b,
.dialoG .b div {
	background-position: top right;
	background-repeat: no-repeat;
}
.dialoG .content {
	position: relative;
	padding: 10px 10px 0 0;
}
.dialoG .t {
	/* top+left vertical slice */
	position:absolute;
	left:0;
	top:0;
	width:10px; /* top slice width */
	margin-left:-10px;
	height:100%;
	background-position:top left;
}
.dialoG .b {
	/* bottom */
	position:relative;
	width:100%;
}
.dialoG .b,
.dialoG .b div {
	height:10px; /* height of bottom cap/shade */
	font-size:1px;
}
.dialoG .b {
	background-position:bottom right;
}
.dialoG .b div {
	position:relative;
	width:10px; /* bottom corner width */
	margin-left:-10px;
	background-position:bottom left;
}
.dialoG .hd,
.dialoG .bd,
.dialoG .ft {
	position:relative;
}
.dialoG .wrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position:static;
	max-height:1000px;
	/*overflow:auto; note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}

.gallery-image {
	float: left;
	width: 84px;
	height: 84px;
	border: 3px solid #eee;	
	overflow: hidden;
	margin-right: 20px;
	margin-bottom: 20px;
	text-align: center;
}
.gallery-image img {
	height: 100%;
}

.column {
	float: left;
}
.last {
	margin-right: 0;
}

/* pagination */
#pagination { margin: 0; padding: 0;}
#pagination li { border: 0; margin: 0; padding: 0; list-style: none; float: left; }
#pagination a, #pagination span { display: block; float: left; padding: 3px 6px; border-right: solid 1px #DEDEDE; margin-right: 2px; }
#pagination .previous-off,
#pagination .next-off { color: #888; display: block; float: left; font-weight: bold; padding: 3px 4px; }	
#pagination .next a,
#pagination .previous a { border: none; font-weight: bold; }	
#pagination .current { font-weight: bold; display: block; float: left; padding: 4px 6px; border-right: solid 1px #DEDEDE; }

/* buttons */
a.button,
a.button:hover {
	background: transparent url(/img/vmp2008/buttons-b.gif) no-repeat scroll top right;
	color: #fff;
	display: block;
	float: left;
	font-size: 11px;
	font-family: arial, sans-serif;
	height: 24px;
	margin-right: 6px;
	padding-right: 12px; /* sliding doors padding */
	text-decoration: none;
}
a.button span {
	background: transparent url(/img/vmp2008/buttons-a.gif) no-repeat;
	display: block;
	line-height: 14px;
	padding: 5px 0 5px 12px;
}
a.button:active {
	background-position: bottom right;
	color: #eee;
	outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
	background-position: bottom left;
	padding: 6px 0 4px 12px; /* push text down 1px */
}

button { 
	border: none;
  cursor: pointer; 
  padding: 0 10px 0 0; 
  text-align: center;
  background: url(/img/vmp2008/buttons-b.gif) top right no-repeat; 
  font-size: 11px;
	color: #fff;
}
button span {
  position: relative;
	margin: -1px 0;
  display: block;
  white-space: nowrap; 
  padding: 0 0 0 12px;
  height: 24px; 
  line-height: 24px;
  background: url(/img/vmp2008/buttons-a.gif) top left no-repeat;
}
button:active {
	background-position: bottom right; 
}
button:active span {
	background-position: bottom left; 
}

/* misc classes */
.left {float:left;}
.right {float:right;}
.hide {display:none;}
.reset-margin {margin:0;}
.reset-padding {padding:0;}
.reset {margin:0;padding:0;}
.align-justify {text-align:justify;}
.align-left {text-align:left;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
hr.space {background:#fff;color:#fff;}
.clearfix:after, .content:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .content {display:inline-block;}
* html .clearfix, * html .content {height:1%;}
.clearfix, .content {display:block;}
.clear {clear:both;}

a.red {color: #ddd; text-decoration: bold; }
a.red:link {color: #ddd; text-decoration: none; }
a.red:active {color: #ddd;  text-decoration: none; }
a.red:visited {color: #ddd;  text-decoration: none; }
a.red:hover {color: #ddd; text-decoration: underline; }

div.column.content-column.last label {
	padding:0;
	float:left;
	text-align:left;
	width:128px;
	margin:10px 0 0 0;
} 

div.column.content-column.last input.checkbox {
	width:20px;
	float:left;
	padding:0;
	margin:12px 0 0 0;
}

/*Form*/

	.form label {
		padding-bottom: 10px;
	}
	
	.form label.error2 {
		color: #e10000;
	}
	
	.form .row {
		padding-bottom: 10px;
		clear: both;
	}
	
	.form input {
		float: left;
	}
	
	#main-video {
		position: absolute;
		left: 0px;
		top: 183px;
		z-index: 100;
	}
	
/* Layer */

	.layer {
		position: absolute;
		width: 600px;
		/*height: 500px;*/
		display: none;
		z-index: 20;
		background: #FFF;
	}
	
	.layer .wrapper {
		padding: 20px;
	}
	
	.layer h2 {
		text-align: left;
	}
	
	.layer p {
		text-align: left;
	}
	
	.layer .close {
		position: absolute;
		top: 20px;
		right: 20px;
	}
	
	.layer input[type="text"], .layer textarea {
		font-family: arial, sans-serif;
		font-size: 1em;
		width: 300px;
		float: left;
	}
	
	.layer label {
		width: 180px;
	}
	
	/*Shader*/
	
	#shader {
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		display: none;
		z-index: 10;
	}
	
/* Share */

	#share-container {
		/*background: #eee;*/
		/*padding: 10px;*/
	}

	.share {
		margin: 0px 15px 0 0px;
		float: left;
	}