/*

	Stylesheet for DDElectrics

	Media:      screen, projection
	Author:     Yoni De Beule <info@yoni-web.be>

*/

body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

html {
	overflow-y: scroll;
}

body {
	font: 300 12px Arial, sans-serif;
	line-height: 1.5;
	color: #fff;
	background: #000 url(../images/background.jpg) no-repeat top center;
}

/*
	Typography and text styles
*/

p {
	padding: 0 0 14px 0;
}

strong, th, thead td, h1, h2, h3, h4 {
	font-weight: 700;
}

h1, h2, h3 {
	line-height: 1.1;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a {
	border: 0;
}

h1 {
	font-size: 22px;
	padding: 0 0 12px 0;
}

h2 {
	font-size: 17px;
	padding: 0 0 12px 0;
}

h3 {
	font-size: 14px;
	padding: 0 0 4px 0;
}

h4 {
	font-size: 12px;
	padding: 0 0 4px 0;
}

/* Links */

a { text-decoration: none; border-bottom: 1px solid #005778; color: #00aeef; }
a:link { border-color: #005778; color: #00aeef; }
a:visited { border-color: #004a66; color: #0094cb; }
a:hover, a:active { border-color: #00aeef; color: #00aeef; }

/* Defaults */

.content ul,
.content ol {
	padding: 0 0 12px 24px;
}

.content li {
	padding-bottom: 6px;
}

.content ul {
	list-style: disc;
}

.content ol {
	list-style-type: decimal;
}

.content ul ul,
.content ol ul,
.content ol ol {
	padding-bottom: 0;
}

.content ol ol {
	list-style: upper-roman;
}

.content ol ol ol {
	list-style: lower-roman;
}

ol.reset,
ul.reset {
	margin: 0;
	padding: 0;
	list-style: none;
}

code {
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.15;
}

pre {
	padding: 6px 12px;
	background: #333;
	margin: 0 0 12px;
}

p.small, .small, small {
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 1.636;
}

blockquote, q {
	font-style: italic;
	font-family: Georgia, serif;
}

blockquote {
	padding: 0 0 0 12px;
}

blockquote cite {
	font-size: 11px;
	text-align: right;
	display: block;
	position: relative;
	bottom: 12px;
}

em {
	font-style: italic;
}

sub, sup {
	line-height: 0;
}

hr {
	border: none;
	border-top: 1px solid #fff;
	padding: 0;
}

div.hr {
	border-bottom: 1px solid #fff;
	margin: 12px 0 24px;
}

div.hr hr {
	display: none;
}

table {
	border-top: 1px solid #666;
	width: 100%;
	margin-bottom: 24px;
	vertical-align: top
}

td, th {
	border-bottom: 1px solid #666;
	padding: 4px;
	vertical-align: top
}

th {
	font-weight: 700;
	background: #333;
}

/* Image classes */

img.alignLeft {
	float: left;
	padding: 0 10px 10px 0;
}

img.alignRight {
	float: right;
	padding: 0 0 10px 10px;
}

a.linkedImage {
	border: 0;
	display: block;
	font-size: 11px;
}

a.linkedImage img {
	display: block;
}

/*
	Page structure and layout
*/

#container {
	width: 936px;
	margin: 0 auto;
}

/*
	Header
*/

	/* Header */

	#header {
		padding: 28px 96px;
		border-top: 1px solid #fff;
	}

	/* Logo */

	#header h1,
	#header h2 {
		width: 226px;
		height: 34px;
		background: url(../images/sprite.png) no-repeat 0 0;
		text-indent: -9999px;
		float: left;
		padding: 0;
	}

	#header h1 a,
	#header h2 a {
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
		border: 0;
	}

	/* Navigation */

	#navigation {
		float: right;
	}

		#navigation ul {
			float: left;
			width: 240px;
		}

			#navigation li {
				float: left;
				height: 20px;
				padding: 7px 0 9px 0; 
			}

			#navigation li#navHome {
				width: 42px;
				padding-right: 32px;
			}

			#navigation li#navServices {
				width: 68px;
				padding-right: 29px;
			}

			#navigation li#navContact {
				width: 69px;
			}

				#navigation li a {
					float: left;
					overflow: hidden;
					width: 100%;
					height: 100%;
					border: 0;
					background-image: url(../images/sprite.png);
					text-indent: -9999px;
				}

				#navigation li#navHome a {
					width: 42px;
					height: 20px;
					background-position: 0 -80px;
				}

					#navigation li#navHome a:hover,
					#navigation li#navHome a:active {
						background-position: 0 -60px;
					}

					#navigation li#navHome.selected a,
					#navigation li#navHome.selected a {
						background-position: 0 -40px;
					}

				#navigation li#navServices a {
					width: 68px;
					height: 20px;
					background-position: -74px -80px;
				}

					#navigation li#navServices a:hover,
					#navigation li#navServices a:active {
						background-position: -74px -60px;
					}

					#navigation li#navServices.selected a,
					#navigation li#navServices.selected a {
						background-position: -74px -40px;
					}

				#navigation li#navContact a {
					width: 68px;
					height: 20px;
					background-position: -170px -80px;
				}

					#navigation li#navContact a:hover,
					#navigation li#navContact a:active {
						background-position: -170px -60px;
					}

					#navigation li#navContact.selected a,
					#navigation li#navContact.selected a {
						background-position: -170px -40px;
					}

/*
	Content
*/

	#content {
		padding: 36px 96px;
	}

		#info {
			width: 456px;
			padding-right: 48px;
			float: left;
		}

		#extraInfo {
			width: 240px;
			float: left;
			font-size: 11px;
			line-height: 1.636;
			padding-top: 68px;
		}

	/* Home */

	body#home #container {
		padding-top: 252px;
		position: relative;
	}

	body#home #container h2 {
		width: 646px;
		height: 148px;
		background: url(../images/sprite.png) no-repeat 0 -105px;
		padding: 0;
		text-indent: -9999px;
		overflow: hidden;
		position: absolute;
		top: 66px;
		left: 96px;
	}

	/* Services */

	body#services {
		background: #000 url(../images/services_background.jpg) no-repeat top center;
	}

	body#services #header {
		border-top: 0;
		border-bottom: 1px solid #fff;
	}

	body#services #content h1 {
		width: 456px;
		height: 36px;
		background: url(../images/sprite.png) no-repeat 0 -261px;
		padding: 0;
		margin-bottom: 32px;
		text-indent: -9999px;
		overflow: hidden;
	}

	/* Contact */

	body#contact {
		background: #000 url(../images/contact_background.jpg) no-repeat top center;
	}

	body#contact #header {
		border-top: 0;
		border-bottom: 1px solid #fff;
	}

	body#contact #content h1 {
		width: 456px;
		height: 36px;
		background: url(../images/sprite.png) no-repeat 0 -307px;
		padding: 0;
		margin-bottom: 32px;
		text-indent: -9999px;
		overflow: hidden;
	}

	/* Contact */

	body#general {
		background: #000 url(../images/background.jpg) no-repeat top center;
	}

	body#general #header {
		border-top: 0;
		border-bottom: 1px solid #fff;
	}

/*
	Footer
*/

	#footer {
		padding: 24px 96px;
		font-size: 11px;
		line-height: 1.636;
		color: #666;
	}

		#footer a {
			color: #999;
			border-color: #4d4d4d;
		}

			#footer a:link,
			#footer a:visited {
				color: #999;
				border-color: #4d4d4d;
			}

			#footer a:hover,
			#footer a:active {
				color: #ccc;
				border-color: #ccc;
			}

		#footer li {
			float: left;
			padding-right: 10px;
		}

/*
	Dialog boxes
*/

.dialogBox {
 	padding: 10px;
 	margin-bottom: 10px;
 	background: #333;
 	color: #fff;
 }

.dialogSucces {
	background: rgb(169, 239, 0);
	background: rgba(169, 239, 0, 0.75);
	color: #fff;
}

.dialogError {
	background: rgb(128, 0, 0);
	background: rgba(128, 0, 0, 0.75);
	color: #fff;
}

/* Forms */

label {
	font-size: 12px;
	font-family: Arial, sans-serif;
	display: block;
	padding: 4px 0;
}

input.input-text, input.inputText, input.text, input.input-password, input.inputPassword, input.password, textarea {
	font-size: 12px;
	font-family: Arial, sans-serif;
	background: #f4f4f4;
	color: #999;
	border: 1px solid #000;
	padding: 4px;
	margin: 0;
	width: 166px;
}

textarea {
	line-height: 1.5;
	width: 332px;
	height: 72px;
}

input:focus, textarea:focus {
	border-color: #000; 
	background: #fff;
	color: #000;
}

@-moz-document url-prefix() {
	input[type="text"]:focus,
	textarea:focus { 
		outline: 2px solid #00AEEF;
		-moz-outline-radius: 5px;
		fborder-color: #00AEEF;
	}
} 

input.input-submit, input.inputSubmit, input.submit, button {
	font-size: 12px;
	font-family: Arial, sans-serif;
	color: #fff;
	background: #005778;
	border: 0;
	padding: 4px;
	cursor: pointer;
	overflow: visible;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

input.input-submit:hover, input.inputSubmit:hover, input.submit:hover, button:hover, input.input-submit:active, input.inputSubmit:active, input.submit:active, button:active {
	background: #00AEEF;
}

select, option {
	font-family: Arial, sans-serif;
	font-size: 12px;
}

input.inputCheckbox {
	float: left;
	margin: 3px 6px 3px 0;
}

.form-error, .formError {
	padding: 4px;
	margin: 3px 0;
	background: rgb(128, 0, 0);
	background: rgba(128, 0, 0, 0.75);
	color: #fff;
	display: block;
}

.form-success, .formSuccess {
	padding: 4px;
	margin: 3px 0;
	background: rgb(169, 239, 0);
	background: rgba(169, 239, 0, 0.75);
	color: #fff;
	display: block;
}

/* General purpose classes */

.hidden { display: none; }
.block { display: block; }

.floatLeft { float: left; }
.floatRight { float: right; }

.noPadding { padding: 0; }
.paddingBottom { padding-bottom: 12px; }

.noBorder { border: none !important; }
.border { border: 1px solid #C7C7C7; }

.mute { color: #666; }
.clear { clear: both; }

/* Guillotine bug */

.guillotineBugFix {
	display: none;
}

/* Clearfix */

.clearfix:after, #header:after, #content:after, #footer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
}