html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body	{
	background: #aaa;
	color: #222;
}


/* #wrapper */

#wrapper {
	min-height: 100%;
	position: relative;
	width: 1000px;
	left: 50%;
	margin-left: -501px;
	border-left: 1px solid white;
	border-right: 1px solid white;
	background: white url(../images/interface/page_back.png) repeat-y left top;
}


/* header / logo */

#header	{
	height: 218px;
	width: 100%;
	background: white  url(../images/interface/header_back.png) repeat-y left top;
}
#header #logo {
	position: absolute;
	left: 0;
	top: 0;
	width: 700px;
	height: 48px;
}
#header h1 {
	position: absolute;
	width: 460px;
	height: 48px;
}
#header h1 a	{
	display: block;
	width: 700px;
	height: 48px;
	text-indent: -999em;
	text-decoration: none;
	background: url(../images/interface/logo_hylo.gif) no-repeat left top;
}

#headerBanner {
	position: absolute;
	right: 0;
	top: 48px;
	width: 780px;
	height: 120px;
	background: #000b82;
}

#headerBlock {
	position: absolute;
	left: 9px;
	top: 48px;
	height: 120px;
	width: 211px;
	xbackground: url(../images/interface/hylo_trooper.png) no-repeat 165px 65px;
}
#headerBlock .wrapper {
	padding: 22px 10px 10px 25px;
	font-size: 11px;
	line-height: 160%;
	color: #000b82;
}
#headerBlock h3 {
	font-size: 1em;
	color: #000b82;
}
#headerBlock address {
	margin: 0;
}
#headerBlock .more {
	font-weight: normal;
}


/* search */

#search {
	position: absolute;
	top: 12px;
	right: 15px;
}
#search label {
	display: none;
}
#search input {
	vertical-align: middle;
}
#search #fc_query {
	width: 120px;
	border: 1px solid #000b82;
}

/* anchors */
a	{
	color: #c20000;
}
a:hover	{
	color: #79b500;
}

.more {
	font-weight: bold;
	font-style: normal;
	color: #c20000;
}


/* #content */

#content {
	position: relative;
	width: 1000px;
	min-height: 300px;
	padding-bottom: 20px;
	background: url(../images/interface/bullet_title.png) no-repeat left 23px;
}
* html #content {
	height: 300px;
}

/* list */
#content ul {
	list-style: none;
	margin: 0; padding: 0;
	margin-bottom: 1em;
}
#content ul li {
	padding-left: 0.9em;
	background: url(../images/interface/bullet.png) no-repeat 0.1em 0.55em;
}

/* primaryContent */

#primaryContent {
	width: 780px;
	float: left; display: inline;
}
#primaryContent .wrapper {
	padding: 15px 20px 50px 35px;
}
#primaryContent .wrapper .wrapper { /* in case including submenu in primarycontent */
	padding: 0;
}
#primaryContent h2 {
	line-height: 1.4em;
	margin-bottom: 1em;
}

/* secondaryContent */

#secondaryContent {
	float: left; display: inline;
	width: 202px;
	font-size: 0.9em;
	padding: 15px 0 60px 0;
}


#secondaryContent .spacer {
	height: 1px;
	font-size: 0px;
	line-height: 0%;
	background: url(../images/interface/dots_horizontal.png) repeat-x left top;
}

#secondaryContent ul.newsList li {
	font-weight: normal;
}
#secondaryContent ul li li {
	background-image: url(../images/interface/bullet_sub.png);
	background-position: 0.2em 0.45em;
	font-weight: normal;
	font-size: 11px;
}


#MSI {
	position: absolute;
	right: 15px;
	bottom: 40px;
	width: 180px;
	font-size: 10px;
	color: #444;
}
#MSI span {
	float: left; display: inline;
}
#MSI a {
	float: left; display: inline;
	width: 63px;
	height: 24px;
	background: url(../images/interface/logo_msi_column.png) no-repeat right top;
	text-indent: -999em;
}


/* #menu */

#menu {
	position: absolute;
	top: 168px;
	left: 0;
	width: 100%;
	height: 27px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	background: #c20000 url(../images/interface/menu_back.png) repeat-x left top;
}	
* html #menu {
	height: 27px;
}
#menu h2 {
	display: none;
}
#menu ul,
#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul li {
	float: left; display: inline;
	background: url(../images/interface/menuspacer_light.png) no-repeat left top;
}
#menu li a {
	display: block;
	font-size: 11px;
	line-height: 21px;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 14px 3px 14px;
	background: url(../images/interface/menuspacer_dark.png) no-repeat right top;
	color: white;
}
* html #menu li a {
	width: 20px;
	line-height: 21px;
	white-space: nowrap;
}
#menu li a.last {
	background: url(../images/interface/menuspacer.png) no-repeat right top;
}

#menu li.active {
	background: url(../images/interface/menu_back_active.png) repeat-x right top;
}

#menu li:hover a,
#menu li.hover a {
	padding: 4px 14px 2px 14px;
	background: url(../images/interface/menu_back_on.png) repeat-x right top;
	color: white;
}

/* submenu */

#menu ul ul {
	position: absolute;
	display: none;
	font-size: 10px;
	width: 17.5em;
}
#menu ul ul,
#menu ul ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul li:hover ul,
#menu ul li.hover ul {
	/* #menu ul li.hover ul is used by script for IE/WIN found in scripts/menu.js */
	display: block;
}
#menu li li {
	background: none;
	position: relative;
	width: 17em;
}
#wrapper #menu ul li li a {
	display: block;
	padding: 0.3em 1em 0.3em 0.5em;
	font-size: 11px;
	line-height: 15px;
	white-space: normal;
	border: 1px solid #c20000;
	border-top: none;
	background: #f4dbdb;
	color: #880000;
	width: 100%;
}
#wrapper #menu ul li li a.subs {
	background-image: url(../images/interface/bullet_submenu.png);
	background-repeat: no-repeat;
	background-position: right 7px; 
}
* html #wrapper #menu li li a { 
	height: 0.1em; /* clickarea is not 100% width in IE */
	line-height: 130%;
	padding: 4px 1em 4px 0.5em;
}
#wrapper #menu li li.hover a,
#wrapper #menu li li:hover a {
	background-color: white;
	color: #c20000;
}

/* sub-submenu */

#wrapper #menu ul ul ul {
	width: 18.8em;
	position: absolute;
	top: -0.1em;
	left: 18.8em;
	display: none;
	background: none;
	border-top: 1px solid #c20000;
}
* html #wrapper #menu ul ul ul {
	left: 18.8em;
}

#wrapper #menu ul ul li:hover ul,
#wrapper #menu ul ul li.hover ul {
	/* #topmenuList ul li.hover ul is used by script for IE/WIN found in scripts/menu.js */
	display: block;
}
#wrapper #menu li ul li ul li a {
	background: #f4dbdb !important;
	color: #880000 !important;
}
#wrapper #menu li ul li ul li a:hover {
	background: white !important;
	color: #c20000 !important;
}



/* breadcrumbs */

#breadcrumbs {
	position: absolute;
	top: 196px;
	left: 0;
	height: 20px;
	width: 100%;
	background: #ecba1f;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#breadcrumbs ul,
#breadcrumbs li {
	margin: 0; padding: 0;
}
#breadcrumbs li {
	float: left;
	display: inline;
	padding: 0 0 0 1.2em;
	font-size: 11px;
	background: url(../images/interface/breadcrumbs_arrow.png) no-repeat 0.5em 0.80em;
	color: white;
}
* html #breadcrumbs li {
	padding: 0 0 0 12px;
	background-position: 5px 8px; /* no scaling font-size and background for IE */
}
#breadcrumbs li.first {
	padding-left: 15px;
	background: none;
}
#breadcrumbs li a {
	color: #826200;
	text-decoration: none;
}
#breadcrumbs li a:hover {
	color: #483600;
	text-decoration: underline;
}


/* address */

address {
	font-style: normal;
}

address span.label {
	display: block;
	float: left;
	width: 1.2em;
	white-space: nowrap;
}

/* #footer */

#footer	{
	position: absolute;
	bottom: 0;
	width: 100%;
	border-top: 1px solid white;
	background: #79b500;
	font-size: 11px;
	line-height: 125%;
	color: white;
}
* html #footer  {
	position: relative;
	border-bottom: 1px solid white;
}
#footer .wrapper {
	padding: 6px 12px;
	text-align: center;
}
* html #footer .wrapper {
	padding-bottom: 2px;
}
#footer a	{
	font-weight: bold;
	text-decoration: none;
	color: white;
}
#wrapper #footer a:hover {
	text-decoration: underline;
	color: white;
}

#footer #copyright {
	float: right;
	display: inline;
}

#footer #footerMenu {
	float: left;
	display: inline;
}
#footer #footerMenu ul,
#footer #footerMenu li {
	margin: 0;	padding: 0;
	list-style: none;
}
#footer #footerMenu li {
	float: left; display: inline;
	line-height: 110%;
	font-size: 11px;
	border-right: 1px solid #4b7000;
}
#footer #footerMenu li.last {
	border: none;
}
#footer #footerMenu li a {
	line-height: 120%;
	margin: 0 8px 2px 8px;
}

/* various classes */

hr,
h2 {
	display: none;
}
#content hr,
#content h2 {
	display: block;
}

.skip,
.noScreen {
	display: none;
}

a.tel {
	text-decoration: none;
	color: black;
	cursor: default;
}

.image {
	clear: both;
	margin: 0 0 1em 0;
}

.image img {
	border: 1px solid white;
}

.border img,
img.border {
	border: 1px solid #222;
}

.caption {
	font-style: italic;
	font-size: 0.9em;
	line-height: 130%;
	color: #666aad;
}
.caption img {
	margin-bottom: 0.3em;
}

.left {
	float: left;
	margin: 0 1em 1em 0;
}

.right {
	float: right;
	margin: 0 0 1em 1em;
}

.center {
	text-align: center;
}

abbr {
	border: none;
}

.clearBoth {
	clear: both;
	height: 0;
	line-height: 0%;
	font-size: 0;
	visibility: hidden;
}


/* specific */

ul#homeButtons {
	list-style: none;
}
ul#homeButtons li {
	float: left; display: inline;
	width: 202px;
	margin: 0 0 0 25px; padding: 0;
	background-position: left top;
	background-repeat: no-repeat;
	text-align: center;
	
}
ul#homeButtons li p {
	margin: 0.3em 0;
	font-size: 0.9em;
	line-height: 140%;
}
ul#homeButtons li.first {
	background-image: url(../images/interface/button_websiteservice.png);
	color: #5c8c16;
}
ul#homeButtons li.second {
	background-image: url(../images/interface/button_klantenservices.png);
	color: #000b81;
}
ul#homeButtons li.third {
	background-image: url(../images/interface/button_officesupport.png);
	color: #c10000;
}
ul#homeButtons li a {
	display: block;
	width: 202px;
	height: 124px;
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	color: white;
}


/* boxes */

table.boxes {
	border-collapse: collapse;
	border: none;
}
table.boxes th,
table.boxes td {
	padding: 0;
	width: 202px;
}

#secondaryContent h2,
table.boxes th {
	background: #8b8b8b url(../images/interface/box_title_gray.png) no-repeat left top;
	overflow: hidden;
	text-align: center;
	font-size: 13px;
	color: white;
}

#secondaryContent .wrapper,
table.boxes td {
	width: 178px;
	padding: 10px 12px 1px 12px;
	background: url(../images/interface/box_border_gray.png) no-repeat left bottom;
}
#secondaryContent .wrapper {
	margin-bottom: 15px;
}

#wrapper table.boxes th.spacer,
#wrapper table.boxes td.spacer {
	padding: 0;
	width: 25px;
	background: white;
}
#secondaryContent ul li,
#wrapper table.boxes ul li {
	background-image: url(../images/interface/bullet_gray.png);
	background-position: 0.1em 0.35em;
	line-height: 140%;
	margin-bottom: 3px;
}
#wrapper table.boxes ul li {
	background-position: 0.1em 0.45em;
}

#secondaryContent ul li a,
#wrapper table.boxes li a {
	text-decoration: none;
	color: #222;
}
#secondaryContent ul li a:hover,
#wrapper table.boxes ul li a:hover {
	text-decoration: underline;
	color: #c20000;
}


/* groen */
#secondaryContent .green h2,
table.boxes th.green {
	background: #79b500 url(../images/interface/box_title_green.png) no-repeat left top;
}
#secondaryContent .green .wrapper,
table.boxes td.green {
	background-image: url(../images/interface/box_border_green.png);
}
#secondaryContent .green ul li,
#wrapper table.boxes .green ul li {
	background-image: url(../images/interface/bullet_green.png);
}
#secondaryContent .green ul li a:hover,
#wrapper table.boxes .green ul li a:hover,
#wrapper .green .more,
#wrapper .green .more a {
	color: #79b500;
}

/* blauw */
#secondaryContent .blue h2,
table.boxes th.blue {
	background: #000b82 url(../images/interface/box_title_blue.png) no-repeat left top;
}
#secondaryContent .blue .wrapper,
table.boxes td.blue {
	background-image: url(../images/interface/box_border_blue.png);
}
#secondaryContent .blue ul li,
#wrapper table.boxes .blue ul li {
	background-image: url(../images/interface/bullet_blue.png);
}
#secondaryContent .blue ul li a:hover,
#wrapper table.boxes .blue ul li a:hover,
#wrapper .blue .more,
#wrapper .blue .more a {
	color: #000b82;
}

/* red */
#secondaryContent .red h2,
table.boxes th.red {
	background: #c20000 url(../images/interface/box_title_red.png) no-repeat left top;
}
#secondaryContent .red .wrapper,
table.boxes td.red {
	background-image: url(../images/interface/box_border_red.png);
}
#secondaryContent .red ul li,
#wrapper table.boxes .red ul li {
	background-image: url(../images/interface/bullet_red.png);
}
#secondaryContent .red ul li a:hover,
#wrapper table.boxes .red ul li a:hover,
#wrapper .red .more,
#wrapper .red .more a {
	color: #c20000;
}


/* box rows (references) */

.boxRow {
	clear: both;
	width: 720px;
	margin-bottom: 10px;
	background: url(../images/interface/boxfull_border_gray.png) no-repeat left bottom;
}
.boxRow h3 {
	background: #8b8b8b url(../images/interface/boxfull_title_gray.png) no-repeat left top;
	overflow: hidden;
	text-align: left;
	text-indent: 15px;
	font-size: 13px;
	color: white;
}
.boxRow .wrapper {
	margin: 0.5em 1em 1em 1em;
}
.boxRow .wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* groen */
.boxRow.green {
	background-image: url(../images/interface/boxfull_border_green.png);
}
.boxRow.green h3 {
	background-color: #79b500;
	background-image: url(../images/interface/boxfull_title_green.png);
}

/* blauw */
.boxRow.blue {
	background-image: url(../images/interface/boxfull_border_blue.png);
}
.boxRow.blue h3 {
	background-color: #000b82;
	background-image: url(../images/interface/boxfull_title_blue.png);
}

/* rood */
.boxRow.red {
	background-image: url(../images/interface/boxfull_border_red.png);
}
.boxRow.red h3 {
	background-color: #c20000;
	background-image: url(../images/interface/boxfull_title_red.png);
}

/* logos */
.boxRow .wrapper img.right {
	margin: 10px;
}


/* IE5.x/WIN hacks */
@media tty {
 i{content:"\";/*" "*/}}; @import 'ie50.css'; {;}/*";}
}/* */


/* IE5.5 */
@media tty {
 i{content:"\";/*" "*/}}@m; @import 'ie55.css'; /*";}
}/* */