/* General */

* {
	margin: 0;
	padding: 0;
}

body {
	background: url(achtergrond.png) repeat-y top center;
	background-color: #def2fb;
	background-color: white;
	font: 63% Arial, Verdana, sans-serif;
	color: #5A5A5A;
}

::selection {
	background: #dbecf2;
}

.js .hide {
	display: none;
}

p {
	margin-bottom: 1em;
	padding: 0 8px;
	font-size: 1.2em;
	line-height: 1.6;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #5A5A5A;
}

a:hover {
	color: #1fb8f3;
}

.hand {
	cursor: pointer;
}

h1, h2, h4 {
	padding-left: 8px;
}

/* Plotting */

.plot {
	padding: 23px 14px 34px 22px;
	background: url(plot.gif) no-repeat top left;
}

.plot .draw {
	height: 250px;
}

.tickLabel {
	font-size: 1.3em;
}

.legendLabel {
	font-size: 1.4em;
	padding: 2px;
}

.plot ul {
	background: #fff;
	list-style-type: none;
	border: #d8d8d8 1px solid;
	float: right;
	position: relative;
	padding: 0 6px;
	top: -238px;
	right: 12px;
	display: none;
}

.plot:hover ul {
	display: inherit;
}

.plot li {
	margin-right: 1.4em;
	background: no-repeat center left;
	padding: 5px 0 5px 22px;
	float: left;
	font-size: 1.1em;
}

li.zoomOut {
	background-image: url(magifier_zoom_out.png);
}

li.reset {
	background-image: url(chart_line.png);
}

li.addPlot {
	background-image: url(add.png);
	margin-right: 0;
}

/* Forms */

input {
	background: url(inputAchtergrondHover.gif) repeat-y bottom right;
	border: #d8d8d8 1px solid;
	margin: 1px 10px 0 26px;
	padding: 4px 2px 0 3px;
	font-size: 1.1em;
	color: #5A5A5A;
  	width: 186px;
}

input:focus {
	background: url(inputAchtergrondHover.gif) repeat-y bottom left;
	padding-left: 24px;
	margin-left: 5px;
	outline: 0;
}

.XXXbutton {
	padding: 3px 5px;
	margin: 0 10px 0 26px;
	font: 1em;
	font-family: inherit;
}

.form input.button {
	clear: both;
	float: left;
}

.XXXbutton:hover {
	background: #e2e2e2;
}

form {
	margin-bottom: 2em;
}

form p {
	height: 20px;
}

label {
	display: inline-block;
	width: 125px;
	margin-top: 4px;
	margin-bottom: 1px;
	clear: both;
	float: left;
}

form .button {
	margin-left: 151px;
	margin-bottom: 10px;
}

form p.wrong span.box {
	background: transparent url(errorPane.png) no-repeat left bottom;
	display: inline-block;
	position: relative;
	height: 24px;
	left: -22px;
}

form p.wrong span span {
	display: inline-block;
	border-right: 1px solid #f1d3d0;
	color: #D84743;
	margin: 0 0 0 31px;
	padding: 4px 6px 0;
}

form p.wrong input {
	width: 186px;
	padding-right: 10px;
}

/* Structure */

#wrapper {
	width: 908px;
	margin: 0 auto;
	margin-top: 2em;
	overflow: hidden;
}

#header {
	background: transparent url(logo.gif) no-repeat 6px 10px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-left: 4.8em;
	margin-right: 1.2em;
	height: 48px;
	width: 90em;	
	float: left;
}

h1 {
	margin-top: .45em;
	color: #5A5A5A;
    letter-spacing: -1.4px;
	text-transform: lowercase;	
	font: italic normal 2.9em Palatino, Georgia, "Times New Roman", sans-serif;
	line-height: .65em;
}

h1 a {
	font-weight: normal;
}

/* Header image only clickable when JS is enabled */
.jsClickable:hover a {
	color: #1fb8f3;
}

#contentHeader {
	margin-right: 1.2em;
	height: 1.6em;
}

#contentHeader h4 {
	font-size: 1.0em;
	font-weight: normal;
	text-transform: uppercase;
    line-height: 0.7em;
}

#content {
	padding-top: 1em;
	overflow: hidden;
	margin-right: 1.2em;
	float: left;
	width: 59.6em;
	width: 59.6em;
}

/* Content */

#contentBlock {
	padding-top: 1em;
	border-top: 1px solid #ccc;
	width: 59.6em;
	overflow: hidden;
	clear: both;
}

h2 {
	margin-bottom: .5em;
    font: normal 1.8em normal Georgia, "Times New Roman", Times, serif;
    clear: both;


  font:18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;	
  line-height:28px;
	letter-spacing:-1px;
}

/* Top navigation */

#navigation {
	padding: 0 0 .3em;
	margin-right: 1.2em;
	float: left;
	width: 90em;
}

#navigation ul {
	list-style-type: none;
}

#navigation li {
	margin-right: 2em;
	float: left;
}

#navigation li a {
	font: 1.2em normal;
	line-height: 1.4em;
	padding-left: 8px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}

/* Sidebar */

#sidebar {
	margin: 0;
	padding: 0.6em 0 0 0;
	overflow: hidden;
	width: 29.2em;
	float: left;
}

#sidebar ul {
	margin: 0 0 2em 0;
	list-style-type: none;
}

#sidebar li {
	border-bottom: 1px solid #d8d8d8;
	margin: 0;
	padding: .4em 8px .3em 8px;
	font-size: 1.1em;
	line-height: 1.6;
}

#sidebar p {
	font-size: 1.1em;
	color: #5a5a5a;
}

.section p {
	padding-top: 0.4em;
}

#sidebar h4 {
	padding-bottom: .5em;
	height: 1.1em;
	border-bottom: 1px solid #ccc;
	font: 1.1em normal;
	font-family: 'Lucida Grande', Verdana, Corbel, 'Bitstream Vera Sans', 'DejaVu Sans', sans-serif;
	font-size: 13px;
}

/* Top bar */

#barWrapper {
	background: transparent url(login.png) no-repeat top center;
	position: fixed;
	display: none;
	text-align: center;
	padding-top: 4px;
	width: 100%;
	top: 1.2em;
}

#barWrapper.middle {
	top: 50%;
	margin-top: -20px;
}

#barWrapper.error {
	background-image: url("http://localhost:3000/images/barRed.png");
}

#barWrapper.error span.error {
	background: url("http://localhost:3000/images/errorShield.gif") no-repeat center left;
	padding-left: 19px;
	padding-right: 7px;
	padding-top: 2px;
	padding-bottom: 0;
	color: #D84743;
}

#barWrapper form .button {
	margin: 0;
}

#barWrapper.error a.button, #barWrapper.error button {
	margin-top: 1px;
}

#barWrapper.error form div {
	background-image: url(cross.png);
}

#barWrapper form {
	margin: 0 auto;
}

#barWrapper input {
 	width: 10.7em;
}

#barWrapper input.button, input.button {
 	width: auto;
}

#barWrapper form div {
	background: transparent url(crossBW.png) no-repeat right 2px;
	position: relative;
	top: -33px;
	margin: 0 auto;
	left: 457px;
	width: 7.2em;
	height: 17px;
}

#barWrapper form div p {
	display: none;
}

#barWrapper form div:hover {
	background-image: url(cross.png);
}

#barWrapper form div:hover p {
	display: inherit;
}

/* Footer */

#footer {
	border-top: 1px solid #ccc;
	padding: 1em 0 0 0;
	overflow: hidden;
	clear: both;
	width: 59.6em;
}

#footer p {
	margin-bottom: .2em;
	font-size: 1.1em;
}

/* Mozilla */

@-moz-document url-prefix() {
	input {
		padding: 2px 3px 2px 3px;
	}
	
	#forms p.wrong span.box {
		top: 0;
	}


	#sidebar h4 {
		font-size: 1.2em;
		height: 1.05em;
		letter-spacing: normal;
	}
	
	#navigation li a {
		font: 1.3em normal;
		line-height: 1.6em;
	}
}

/* Messageboxen */

.msgbox {
	display: inline-block;
	position: relative;
	height: 24px;
	margin: 0 0 12px 8px;
}

.msgbox.ok {
	background: transparent url(ok.gif) no-repeat left bottom;
	color: #45BF55;
}

.msgbox.error {
	background: transparent url(error.gif) no-repeat left bottom;
	color: #D84743;
}

.msgbox span {
	display: inline-block;
	border-right: 1px solid #cde4a3;
	margin: 0 0 0 31px;
	padding: 6px 6px 2px;
	font-size: 1.2em;
}

.msgbox span::selection {
	background: #f1d3d0;
}

/* Autocomplete */

/* workarounds */
* html .ui-autocomplete {
	width:1px;
} /* without this, the menu expands to 100% in IE6 */

.ui-menu {
	position: absolute;
	cursor: default;
	border: #d8d8d8 1px solid;
	background-color: #f9f9f9;
	list-style:none;
	padding: 1px;
	display:block;
	float: left;
	overflow: hidden;
}

.ui-menu .ui-menu-item {
	margin:0;
	padding: 0;
	float: left;
	clear: left;
	width: 100%;
	font-size: 1.2em;
}

.ui-menu .ui-menu-item a {
	text-decoration:none;
	display:block;
	padding:.2em .4em;
	line-height:1.5;
	font-weight: normal;
}

.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
	background-color: #1fb8f3;
	color: white;
}

/* front header */

#front-header {
	display: none;
	background-image: url("http://localhost:3000/images/front-background.jpg");
	height: 450px;
	width: 100%;
}

#front-header-inner {
	background-image: url("http://localhost:3000/images/front-header.jpg");
	height: 450px;
	width: 1020px;
	margin: 0 auto;
}

/* Parallax frontpage */
#parallax {
	height: 250px;
	width: 555px;
}