/* CSS stylesheet created by George GJ Buckingham
 * The content within this file is not copyright, and is freely distributable
 * or editable.
 * For support, contact me on george.buckingham@gmail.com
*/

/* Styles for the body */
body {
	margin:0px; /*We want no margin - page extends to edges */
	font-family:Arial, sans-serif; /*Use Arial as the font type */
	font-size:13px; /* Set the default font size to 13px */
	background:#fff url(images/header_repeat.png) 0 0 repeat-x; /* The header has a slight gradient */
	text-align:center;
}

/* Container properties */

#container {
	margin:0px; /* No margin for bottom, left or right required */
	margin-top:20px;
	width:100%; /* Default width: 100% of the browser */
	min-height:120px; /* The minimum height is 120px */
	height:auto; /* Default height: 100% of the content */
}

/* Header styles - includes the header section, logo, and login box. The menu comes under #menu */

#header {
	width:960px; /* The width of the header is 960px, based on the PSD file */
	margin:0 auto; /* We want the header and all its content to be centered in the middle of the page */
	height:80px; /* The minimum height of the header (this is the logo height) */
	text-align:center; /* To make sure Internet Explorer understands the centering, we need to say the text is to be centered as well. This can be changed in later elements */
	position:relative;
}

#header #logo {
	float:left;
}

#header #logo a img {
	border:none;
}

#header #login {
	float:right;
	text-align:right;
	margin-top:9px;
	height:28px;
}

#header #login p {
	margin-top:25px;
	padding:0;
	display:inline;
	height:28px;
}

#header #login p input.login {
	width:175px;
	float:left;
	height:17px;
	border:1px solid white;
	margin-left:-2px;
	background:transparent url(images/login_bg.jpg) top left no-repeat;
	outline:none;
	padding-left:9px;
	padding-top:7px;
	padding-bottom:5px;
}

#header #login input[type=image] {
	padding:0;
	position:relative;
	margin:0;
	margin-left:-2px;
	bottom:0px;
}

/* Menu Styles */

#menu {
	width:100%; /* We need to add a background image 100% of the width of the page */
	background:transparent url(images/menu_repeat.png) 0 0 repeat-x; /* Repeat the background image along the width of the page */
	min-height:50px; /* Set the minimum height to 50px */
	z-index:-1;
}

#menu #tabs {
	width:960px; /* We want the tabs section to be the same width as the header */
	margin:0 auto; /* We want the tabs to be centered like the header */
	text-align:center; /* Making sure IE also centers the tabs */
	height:50px; /* Make the tabs section the same height as its parent, the menu */
	background:transparent url(images/menu_sep.png) top right no-repeat; /* Include the final menu seperator on the right hand side of the menu */
}

#menu #tabs #tabmenu {
	margin:0px;
	padding:0px;
}

#menu #tabs #tabmenu li {
	display:block;
	float:left; /* Make sure the items are all aligned next to each other */
	min-height:50px; /* Make each <li> the same height as the menu */
	line-height:50px; /* Another attempt to make each <li> the same height as the menu - the text appears in the middle */
	overflow:hidden; /* Hide any overflowing text so it does not break the menu */
	list-style-type:none; /* No bullet points are needed */
	min-width:137px; /* Make the minimum width */
	width:137px;
	background:transparent url(images/inactive_menu.png) 0 0 no-repeat;
	font-family:"PT Sans Caption";
	font-weight:bold;
	color:#5d5d5d;
}

#menu #tabs #tabmenu li.active {
	background:transparent url(images/active_menu.png) 0 0 no-repeat;
}

#menu #tabs #tabmenu a {
	color:#5d5d5d;
	font-size:17px;
	text-decoration:none;
}

#menu #tabs #tabmenu a:hover {
	color:#007fce;
}

#menu #tabs #tabmenu li.active a {
	color:#0065a4;
}

/* Display Section */

#display {
	width:100%; /* Width is 100% of browser width */
	min-height:361px;
	background:transparent url(images/display_repeat.png) 0 0 repeat-x;
}

#displaySmall {
	width:100%;
	min-height:80px;
	height:80px;
	background:transparent url(images/display_sm.png) 0 0 repeat-x;
}

#displaySmall #content {
	width:960px;
	margin:0 auto;
	text-align:center;
}

#displaySmall #content #displayHeader {
	text-align:left;
}

#displaySmall h1 {
	font-size:30px;
	margin:0px;
	color:white;
	padding-top:20px;
}

#display #content {
	width:960px;
	height:361px;
	margin:0 auto;
	text-align:center;
	position:relative; /* Setting position to relative means child elements can be positioned 'absolutely' within it */
}

#display #content #left {
	width:438px;
	height:inherit;
	float:left;
}

#display #content #left #image {
	position:absolute;
	bottom:0px;
	left:0px;
}

#display #content #right {
	width:518px;
	float:left;
	height:inherit;
	text-align:left;
}

#display #content #right #text {
	width:auto;
	height:auto;
	margin-left:41px;
	margin-top:40px;
	font-style:italic;
	color:#f5f5f5;
	font-size:17px;
	line-height:25px;
}

#text-header {
	width:auto;
	height:auto;
	margin-left:41px;
	margin-top:40px;
	font-style:italic;
	color:#f5f5f5;
	font-size:17px;
	line-height:20px;
}

#display #content #right h1 {
	font-size:26px; /* Font size to reflect importance of <h1> */
	color:#f5f5f5; /* Color just off-white, from PSD */
	margin-top:0px;
	font-family:"PT Sans Bold";
	font-style:normal;
}

#display #buttonHold {
	position:absolute;
	bottom:30px;
	left:530px;
	max-width:100%;
	width:400px;
}

#display a.button {
    background: transparent url('images/button_right.png') no-repeat scroll top right;
	color:#231404;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 39px;
    margin-right: 6px;
    padding-right: 7px; /* sliding doors padding */
    text-decoration: none;
}

#display a.button span {
    background: transparent url('images/button_left.png') no-repeat;
    display: block;
    line-height: 39px;
    font-family:"PT Sans Caption";
    font-weight:bold;
    font-size:20px;
    padding: 0px 0 5px 8px;
}

/* Main content area */

#container #maincontenthold {
	width:100%;
	min-height:107px;
	padding-bottom:20px;
	height:auto;
	background:transparent url(images/content_repeat.png) 0 0 repeat-x;
}

#container #maincontent {
	width:960px; /* Make the content area the same width as the header */
	margin:0 auto; /* Center the content area */
	text-align:center; /* Center align the text, so IE centers the content area */
}

#container #maincontent #left {
	text-align:left;
	display:block;
	width:670px;
	float:left;
	padding-top:14px;
}

#container #maincontent #left p {
	font-family:Arial, sans-serif;
	font-size:13px;
	color:#666666;
	line-height:21px;
	margin-bottom:10px;
}

#container #maincontent #left .img {
	float:right;
	width:209px;
}

#container #maincontent #left h1 {
	font-size:26px;
	line-height:0px;
	padding-top:10px;
	padding-bottom:0px;
}

#container #maincontent #left h2 {
	color:#ec891d;
	font-size:21px;
	font-family:Arial, sans-serif;
	padding:0;
	margin:0;
	line-height:0px;
	padding-top:19px;
	padding-bottom:11px;
	font-weight:bold;
}

#container #maincontent #left h4 {
	font-size:14px;
	color:#848484;
	text-transform:uppercase;
	font-weight:bold;
}

#container #maincontent #left h3 {
	color:#555555;
	font-weight:bold;
	font-family:Arial, sans-serif;
	font-size:18px;
}

#container #maincontent ul {
	padding-left:0px;
	padding:0px;
	margin:0px;
}

#container #maincontent ul li {
	list-style-type:none;
	background:transparent url(images/bullet.jpg) 0 0 no-repeat;
	margin-bottom:4px;
	font-size:12px;
	color:#666666;
	padding-left:19px;
	font-family:Arial, sans-serif;
}

#container #maincontent ol {
	padding-left:22px;
	margin:0px;
}

#container #maincontent ol li {
	color:#666666;
	font-size:12px;
	margin-bottom:4px;
	font-family:Arial, sans-serif;
}

#container #maincontent dl dt {
	color:#535353;
	font-family:Arial, sans-serif;
	font-size:12px;
	font-weight:bold;
}

#container #maincontent dl dd {
	font-weight:normal;
	color:#535353;
	margin-left:9px;
	margin-top:4px;
	margin-bottom:4px;
	font-size:12px;
}

#container #maincontent h2 {
	font-size:22px;
	line-height:40px;
	padding-top:0px;
	margin-top:0px;
}

#container #maincontent #left table {
	/*border-top:1px solid #d7e2ea;*/
	border-bottom:1px solid #d8e3eb;
}

#container #maincontent #left table thead {
}

#container #maincontent #left table thead th {
	/*color:#0065a4;*/
	color:#666666;
	font-weight:bold;
	font-size:14px;
	padding-bottom:0px;
	padding-top:15px;
	border-spacing:1px;
	padding-left:16px;
	padding-right:10px;
	padding-bottom:15px;
}

#container #maincontent #left table thead th.left {
	background-color:#d7d9dd;
	padding-right:43px;
	padding-left:20px;
	border-top:1px solid white;
}

#container #maincontent #left table tbody th {
	background-color:#d7d9dd;
	border-top:1px solid white;
	padding-right:43px;
	padding-left:20px;
	padding-top:15px;
	padding-bottom:15px;
	color:#666666;
	/*color:#0065a4;*/
	font-size:15px;
	font-weight:normal;
}

#container #maincontent #left table tbody td {
	padding-left:18px;
	font-size:15px;
	color:#666666;
	/*color:#0065a4;*/;
	border-top:1px solid #d7e2ea;
}

#container #maincontent #right {
	float:left;
	width:250px;
	min-height:445px;
	background:transparent url(images/content_long_sep.jpg) 15px 15px no-repeat;
	display:block;
	padding-top:20px;
	padding-left:30px;
}

#container #maincontent #right #rightBanner {
	background:transparent url(images/right_banner.png) 0 0 no-repeat;
	width:246px;
	height:117px;
	padding-bottom:20px;
	text-align:left;
}

#container #maincontent #right #rightBanner #bannerContent {
	padding-left:20px;
	padding-top:5px;
}

#container #maincontent #right #rightBanner h2 {
	font-size:30px;
	margin:0px;
}

#container #maincontent #right #rightBanner #bannerContent p {
	font-size:18px;
	text-transform:uppercase;
	line-height:0px;
	padding:0px;
	color:white;
	margin-top:3px;
}

#container #maincontent #right #rightBanner #bannerContent p img {
	margin-top:0px;
	position:relative;
	top:4px;
}

/* Blue download knop */

#container #maincontent #right {
	float:left;
	width:250px;
	min-height:445px;
	background:transparent url(images/content_long_sep.jpg) 15px 15px no-repeat;
	display:block;
	padding-top:20px;
	padding-left:30px;
}

#container #maincontent #right #rightBanner_blue {
	background:transparent url(images/right_banner_blue.png) 0 0 no-repeat;
	width:246px;
	height:117px;
	padding-bottom:20px;
	text-align:left;
}

#container #maincontent #right #rightBanner_blue #bannerContent_blue {
	padding-left:20px;
	padding-top:5px;
}

#container #maincontent #right #rightBanner_blue h2 {
	font-size:30px;
	margin:0px;
}

#container #maincontent #right #rightBanner_blue #bannerContent_blue p {
	font-size:18px;
	text-transform:uppercase;
	line-height:0px;
	padding:0px;
	color:white;
	margin-top:3px;
}

#container #maincontent #right #rightBanner_blue #bannerContent_blue p img {
	margin-top:0px;
	position:relative;
	top:4px;
}

/* End download knop */

#container #maincontent #left fieldset {
	border:1px solid #a8bdca;
	background:transparent url(images/fieldset_repeat.jpg) bottom left repeat-x;
	min-height:100px;
	padding-top:15px;
	padding-left:12px;
	padding-right:10px;
	padding-bottom:10px;
	margin-bottom:20px;
}

#container #maincontent #left fieldset legend {
	font-size:21px;
	color:#555555;
	padding-right:3px;
}

#container #maincontent #left fieldset label {
	font-size:13px;
	color:#666666;
	padding-left:5px;
	width:100%;
	position:relative;
	display:block;
	padding-top:18px;
	border-bottom:1px solid #d5dfe5;
	height:auto;
	padding-bottom:10px;
}

#container #maincontent #left fieldset .label {
	position:relative;
	height:100%;
	width:100%;
	padding-top:10px;
	border-bottom:1px solid #d5dfe5;
}

#container #maincontent #left fieldset .label .question {
	color:#666666;
	width:230px;
	float:left;
	display:block;
}

#container #maincontent #left fieldset label b, .label b {
	color:red;
	font-weight:normal;
}

#container #maincontent #left fieldset div.border {
	border-bottom:1px solid #d5dfe5;
	margin:0px;
	padding:0px;
	height:28px;
	margin-top:7px;
	padding-bottom:5px;
	margin-bottom:10px;
	position:relative;
}

#container #maincontent #left fieldset dl.form {
	margin:0;
	padding:0;
	clear:both;
}

#container #maincontent #left fieldset dl.form dt {
	padding:0;
	margin:0;
	float:left;
	padding-left:5px;
	font-weight:normal;
	line-height:28px;
}

#container #maincontent #left fieldset dl.form dt b {
	color:red;
	font-weight:normal;
}

#container #maincontent #left fieldset dl.form dd {
	margin:0;
	padding:0;
	float:left;
	line-height:28px;
	position:absolute;
	left:232px;
	width:290px;
}

#container #maincontent #left fieldset dl.form dd input.file {
	width:290px;
	border:1px solid gray;
}

#container #maincontent #left fieldset .filearea {
	min-height:120px;
	height:120px;
}

#container #maincontent #left fieldset label input[type=text], #container #maincontent #left fieldset label select, #container #maincontent #left fieldset label textarea {
	position:absolute;
	left:237px;
	bottom:5px;
	margin:0;
	width:290px;
	padding:0;
	outline:none;
}

#container #maincontent #left fieldset label select {
	left:232px;
	top:15px;
	bottom:0px;
}

#container #maincontent #left fieldset label textarea {
	left:232px;
	top:17px;
	margin-bottom:10px;
	min-height:40px;
}

#container #maincontent #left fieldset span.radio {
	position:absolute;
	left:235px;
	display:inline;
	border:none;
	margin:0;
	bottom:0px;
	padding-bottom:10px;
	padding-top:18px;
}

#container #maincontent #left fieldset div.radioblock {
	border:none;
	margin:0;
	float:left;
	display:block;
	min-height:100%;
	padding-bottom:15px;
}

#container #maincontent #left fieldset div.radioblock textarea {
	width:290px;
	min-height:120px;
}

#container #maincontent #left fieldset div.radioblock select {
	width:290px;
}

#container #maincontent #left fieldset div.radioblock label {
	border:none;
	display:inline;
	margin:0;
}

#container #maincontent #left fieldset span.radio label {
	display:inline;
	border:none;
	margin:0;
	padding:0;
	margin-right:30px;
}

#container #maincontent #left fieldset .border span.error, label span.error, .label span.error {
	color:red;
	border:none;
	display:inline;
	position:absolute;
	right:40px;
	top:7px;
}

label span.error {
	right:44px;
	top:15px;
}

.label span.error {
	right:40px;
}

label span.help {
	color:white;
}

#container #maincontent #left fieldset .label span.errorBlock {
	color:red;
	float:right;
}

#container #maincontent #column1 .columncontent,#container #maincontent #column2 .columncontent,#container #maincontent #column3 .columncontent {
	text-align:left;
	margin-top:60px;
	margin-left:15px;
	font-size:13px;
	line-height:20px;
}

.clear {
	clear:both;
}

#container #maincontent #column1 {
	width:319px;
	min-height:185px;
	height:inherit;
	float:left;
	display:block;
	margin-top:25px;
	position:relative;
	background:transparent url(images/content_sep.png) right top no-repeat;
}

#container #maincontent #column1 .logo {
	position:absolute;
	left:15px;
}

#container #maincontent #column1 h2 {
	position:absolute;
	left:80px;
}

#container #maincontent #column2 {
	width:319px;
	float:left;
	display:block;
	position:relative;
	min-height:185px;
	margin-top:25px;
	background:transparent url(images/content_sep.png) right top no-repeat;
}

#container #maincontent #column2 .logo {
	position:absolute;
	left:15px;
}

#container #maincontent #column2 h2 {
	position:absolute;
	left:80px;
}

#container #maincontent #column3 {
	width:319px;
	float:left;
	position:relative;
	margin-top:25px;
	min-height:185px;
	display:block;
}

#container #maincontent #column3 h2 {
	position:absolute;
	left:80px;
}

#container #maincontent #column3 .logo {
	position:absolute;
	left:15px;
}

#maincontent a.small_button {
    background: transparent url('images/button_sm_right.png') no-repeat scroll top right;
	color:white;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 39px;
    line-height:39px;
    margin-right: 6px;
    padding-right: 5px; /* sliding doors padding */
    text-decoration: none;
}

#maincontent a.small_button span {
    background: transparent url('images/button_sm_left.png') no-repeat;
    display: block;
    font-family:"PT Sans Caption";
    font-weight:bold;
    font-size:14px;
    padding-left:5px;
    text-transform:uppercase;
}

#maincontent a.small_button b {
	font-weight:normal;
	position:relative;
	bottom:5px;
}

/* Footer styles */

#footer {
	width:100%;
	border-bottom:1px solid #e9e9e9;
	position:relative;
	bottom:0;
	min-height:90px;
	height:auto;
	background:#f2f2f2 url(images/footer_repeat.jpg) 0 0 repeat-x;
}

#footer #footerContent {
	padding-top:10px;
	width:960px;
	min-height:80px;
	margin:0 auto;
	text-align:center;
}

#footer #footerContent p {
	margin:0;
	padding:0;
	text-align:left;
	line-height:65px;
}

#footer #footerContent p a {
	color:#ff6633;
	text-decoration:underline;
}

a.bestel:link
{ 
color: #5f5fff; 
text-decoration: none;
}

a.bestel:hover
{ 
color: #5f5fff; 
text-decoration: underline;
}

a.bestel:visited
{ 
color: #5f5fff; 
text-decoration: none;
}


a.bestel-footer:link
{ 
color: #ff6633; 
text-decoration: none;
}

a.bestel-footer:hover
{ 
color: #ff6633; 
text-decoration: underline;
}

a.bestel-footer:visited
{ 
color: #ff6633; 
text-decoration: none;
}



.thumbnail{
position: relative;
z-index: 0;
width:200px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
width:200px;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #f1f5f6;
padding: 5px;
left: -1000px;
border: 1px solid #a8bdca;
visibility: hidden;
color: #555555;
text-decoration: none;
width:200px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width:200px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 25px; /*position where enlarged image should offset horizontally */
width:200px;
}