/*////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                  //
// 	El Niño ICT CSS                                                                            		//
// 	El Niño BV                                                                                     //
// 	http://www.elnino-ict.com                                                                       //
// 	info@elnino-ict.nl                                                                              //
//                                                                                                  //
// 	Copyright (c) El Niño, Enschede                                                                 //
// 	Alle rechten voorbehouden.                                                                      //
//                                                                                                  //
//  Deze applicatie is auteursrechtelijk beschermd. Verveelvuldiging en/of                          //
//  distributie van deze applicatie, en/of delen daarvan, is verboden en strafbaar.                 //
//                                                                                                  //
//////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                  //
// 	Author: Michael Angelo Groeneveld																	//
// 	info@elnino-ict.com                                                                             //
//                                                                                                  //
//  Packaged: 09-02-2010                                                                           //
////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* import css for grid system. more info on 960grid.gs */

@import "grid_960_fluid.css";
@import "form_items.css";


/* Reset basics */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background:transparent none repeat scroll 0 0;
	border:0 none;
	font-size:100%;
	margin:0;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:0;
	padding:0;
	vertical-align:baseline;
}

body {
	line-height:1.375em;
}
ol, ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none;
}
:focus {
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:0;
}
ins {
	text-decoration:none;
}
del {
	text-decoration:line-through;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
a {
	cursor: pointer;
}


/* begin text style */

h1 {
	font-size: 1.5em;
	color: #224e12;
}

h1.intro {
	margin-top: 1.2em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6, p {	
	margin-bottom: 0.4em;
}

p {
	margin-bottom: 0.8em;
}

p.intro {
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 1em 0 2em;
}

a {
	color: #366b19;
}

/* begin elnino style */

body {
	background-color: #f3eac7;
	font-family: helvetica, arial, sans-serif;
	color: #333;
	line-height: 1.6em;
	text-shadow: #fff 0 1px 0;
}

ul {
	list-style-position: inside;
	list-style-image:  url(../gfx/bullet.jpg);
}
	ul li {
		margin-bottom: 0.6em;
	}

#header {
	height: 100px;
	background: url(../gfx/header-bg.jpg) top left repeat-x;
}
    #header .content {
		position: relative;
		margin: 0 auto;
		width: 984px;
	}
	#header  .logo {
		position: absolute;
		top: 0;
		left: 10px;
	}
	
#contact-form {
	background: #a0c252;
	padding: 30px 0;
	color: #fff;
	text-shadow: #092909 0 1px 0;
}
	#contact-form .content {
		position: relative;
		margin: 0 auto;
		width: 984px;
	}
	
	#contact-form .input-text {
		display: block;
		width: 97%;
		background: #f8f2d9;
		padding: 0.6em 0.4em 0.3em;
		line-height: 1.1em;
		margin-bottom: 1em;
	}
		#contact-form textarea.input-text {
			height: 100px;			
		}
		#contact-form .submit {
			font-size: 1.2em;
		}
		
#menu {
	padding-top: 30px;
	color: #fff;
	text-shadow: #092909 0 1px 0;
}
	#menu a {
		font-weight: bold;
		color: #fff;
		text-decoration: none;
		text-shadow: #092909 0 1px 0;
		margin-right: 1em;
		font-size: 1.2em;
	}
		#menu a:hover, a.button:hover, a#work_with_us:hover {
			color: #d5e5b0;
		}
		#menu a:focus, a.button:focus, a#work_with_us:focus  {
			text-shadow: #092909 0 -1px 0;
		}
	
	#menu .contact {
		font-size: 0.85em;
		text-align: right;
	}
		#menu .contact a {
			margin-right: 0;
		}

#intro {
	margin: 60px auto 0;
	width: 629px;
	height: 49px;
	background: url(../gfx/intro-text.jpg) top left no-repeat;
}

#footer {
	margin-top: 20px;
}

#main {
	position: relative;
	margin: 40px auto 40px;
	width: 984px;
}
	#main .corner-top {
		height: 10px;
		padding-left: 10px;
		background: url(../gfx/content-matrix.jpg) top left no-repeat;
	}	
		#main .corner-top-right {
			height: 10px;
			background: url(../gfx/content-matrix.jpg) right -10px no-repeat;
		}
		
	#main .content {		
		background-color: #f8f3de;
	}	
		#main .content-inner1 {
			border: 1px solid #eee5c2;
			border-width: 0 1px;
		}
		#main .content-inner2 {
			min-height: 400px;
			border: 1px solid #eae0bb;
			border-width: 0 1px;
		}		
		
	#main .corner-bottom {
		height: 12px;
		padding-left: 10px;
		background: url(../gfx/content-matrix.jpg) left -40px no-repeat;
	}	
		#main .corner-bottom-right {
			height: 12px;
			background: url(../gfx/content-matrix.jpg) right -53px no-repeat;
		}

#breadcrumb {
	margin-top: 6px;
	margin-bottom: 16px;
	padding-left: 10px;
}
	#breadcrumb a {
		float: left;
		text-decoration: none;
	}

		#breadcrumb h1 {
			display: inline-block;
			margin: 0;
			padding: 3px 0 0 0;
		}
		#breadcrumb img {
			float: left;
			margin-right: 8px;
		}
		
			#breadcrumb img.separator
			{
				margin-left: 8px;
			}

.content-left {
	padding-left: 10px;
}

#summary {
	position: relative;
	height: 220px;
	color: #F8F3DE;
	text-shadow: #333 0 1px 0;
}
	#summary .left {
		position: absolute;
		left: -13px;
		width: 13px;
		height: 220px;
		background: url(../gfx/summary-matrix.jpg) top left no-repeat;
	}
	#summary .right {
		position: absolute;
		right: -13px;
		width: 13px;
		height: 220px;
		background: url(../gfx/summary-matrix.jpg) right -660px no-repeat;
	}
	#summary .bg-left {
		float: left;
		width: 25%;
		height: 220px;
		background: url(../gfx/summary-matrix.jpg) left -220px no-repeat;
	}
	#summary .bg-right {
		float: left;
		width: 25%;
		height: 220px;
		background: url(../gfx/summary-matrix.jpg) right -440px no-repeat;
	}
	#summary .inner {
		height: 180px;
		padding: 16px;
		border-right: 1px solid #2a7b1b;
		border-left: 1px solid #11420f;
	}
	#summary .first {
		border-left: none;
	}
	#summary .last {
		border-right:none;
	}
	#summary  h2{
		text-shadow: #333 0 1px 0;
	}
		#summary img {
			float: left;
			padding: 0 0.6em 0.6em 0;
		}
	
#work_with_us  {
	position: absolute;
	left: -19px;
	top: 200px;
	display: inline-block;
	background: url(../gfx/button-matrix.jpg) left -192px no-repeat;
	height: 70px;
	padding-left: 21px;
	text-decoration: none;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	text-shadow: #092909 0 1px 0;
}

	#work_with_us span {
		display: inline-block;
		background: url(../gfx/button-matrix.jpg) right -134px no-repeat;
		padding: 15px 22px 0 10px;
		height: 55px;
	}
#intro-image{
	margin-left: 200px;
}

#news {
	margin-top: 16px;
}

.news-post .content {
	padding: 0 10px;
}
	.news-post  h3 {
		font-style: italic;
	}

.messages {
	
}
	.messages img {
		float: left;
		margin-right: 6px;
	}

	.messages .message {
		font-size: 0.9em;
		margin-bottom: 16px;
	}
	.messages .message .top {
		height: 7px;
		padding-left: 7px;
		background: url(../gfx/box-matrix.jpg) left top no-repeat;
	}
		.messages .message .top span {
			display: block;
			height: 7px;
			background: url(../gfx/box-matrix.jpg) right -7px no-repeat;
		}
	.messages .message .bottom {
		height: 7px;
		padding-left: 7px;
		background: url(../gfx/box-matrix.jpg) left -14px no-repeat;
	}
		.messages .message .bottom span {
			display: block;
			height: 7px;
			background: url(../gfx/box-matrix.jpg) right -21px no-repeat;
		}
	.messages .message .middle {
		border: 1px solid #e2d9b8;
		border-width: 0 1px;
		background: #f1ebc7;
		margin: 0;
		padding: 0 8px;
	}

#testimonials {
	
}
	#testimonials .testimonial {
		font-family: georgia;
		font-size: 0.9em;
		font-style: italic;
	}
	#testimonials .testimonial .top {
		height: 7px;
		padding-left: 7px;
		background: url(../gfx/box-matrix.jpg) left -28px no-repeat;
	}
		#testimonials .testimonial .top span {
			display: block;
			height: 7px;
			background: url(../gfx/box-matrix.jpg) right -35px no-repeat;
		}
	#testimonials .testimonial .bottom {
		height: 7px;
		padding-left: 7px;
		background: url(../gfx/box-matrix.jpg) left -42px no-repeat;
	}
		#testimonials .testimonial .bottom span {
			display: block;
			height: 7px;
			background: url(../gfx/box-matrix.jpg) right -49px no-repeat;
		}
	#testimonials .testimonial .middle {
		border: 1px solid #dbe3b0;
		border-width: 0 1px;
		background: #eaf0c2;
		margin: 0;
		padding: 0 8px;
	}
	
#portfolio-preview {
	
}
	#portfolio-preview .project {
		
	}
	#portfolio-preview .image {
		height: 260px;
	}
	#portfolio-preview .switch {
		margin-top: 8px;
		padding: 0 10px;
	}
		#portfolio-preview .switch span {
			display: inline-block;
			height: 12px;
			width: 12px;
			margin-right: 4px;
			background: url(../gfx/slider-dot-matrix.jpg) top left no-repeat;
			cursor: hand;
			cursor: pointer;
		}
			#portfolio-preview .switch span.active {
				background-position: 0 -12px;
				cursor: default;
			}
	
#jobs {
	
}
	#jobs p img {
		float: right;
		padding: 0 0 8px 8px;
	}
	#jobs .contact {
		display: inline-block;
		margin-bottom: 1em;
	}

#portfolio-overview {
	margin-top: 16px;
}
	#portfolio-overview .content {
		padding: 0 10px;
	}
	
		#portfolio-overview .project {
			margin-bottom: 32px;
		}
			#portfolio-overview .project .image {
				height: 158px;
			}
			
	#portfolio-overview h2 a {
		text-decoration: none;
	}
		#portfolio-overview h3 {
			font-size: 1em;
		}

.box {
	margin: 32px 0 16px;
}
	.box .content-left {
		padding-left: 10px;
	}
	.box .content-right {
		padding-right: 10px;
	}
	
.date, .author {
	font-size: 0.9em;
	color: #777;
}

.button {
	display: inline-block;
	background: url(../gfx/button-matrix.jpg) top left;
	height: 38px;
	padding-left: 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-shadow: #092909 0 1px 0;
}
	.button span {
		display: inline-block;
		background: url(../gfx/button-matrix.jpg) right -38px;
		height: 32px;
		padding: 6px 10px 0 4px;
	}
	
.super-image {

}
	.super-image .top {
		height: 8px;
		padding-left: 6px;
		background: url(../gfx/image-matrix.jpg) top left no-repeat;
	}
		.super-image .top span {
			display: block;
			height: 8px;
			background: url(../gfx/image-matrix.jpg) right -8px no-repeat;
		}
	.super-image .bottom {
		height: 11px;
		padding-left: 6px;
		background: url(../gfx/image-matrix.jpg) left -16px no-repeat;
	}
		.super-image .bottom span {
			display: block;
			height: 11px;
			background: url(../gfx/image-matrix.jpg) right -27px no-repeat;
		}
	.super-image .middle {
		padding-left: 8px;
		background: url(../gfx/image-matrix.jpg) left -38px no-repeat;
	}
	.super-image .middle-right {
		padding-right: 8px;
		background: url(../gfx/image-matrix.jpg) right -38px no-repeat;
	}
	
	.super-image .image {
		overflow: hidden;
		border: 1px solid #ddd3ab;
	}
	
.networks {
	list-style: none;
}
	.networks li {
		margin: 0 10px 0 0;
		float: left;
	}
		.networks img {
			border: 2px solid #eed9bd;
		}
	
#employees {
	
}
	#employees .employee {
		margin-bottom: 30px;
	}
	
.intro {
	margin: 20px 0 30px 0;
}


.action_ok, .success, .alert {
	text-align: left;
	border: 1px solid #ccc;
	padding: 5px 5px 5px 30px;
	font-size: 14px;
	padding-top: 12px;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 12px;
}

.action_ok, .success {
	font-size: 12px;
	border-color: #9c9;
	color: #060;
	background: #E2F9E3 left no-repeat;
}

.alert {
	border-color: #c99;
	color: #fff;
	background:  #c00;
}

.alert a {
  color: #fff;
}

.alert a:hover {
  background: #000;
}

div.grid_16 p, div.grid_16 table
{
	margin-left: 15px;
}

div.grid_16 table p
{
	margin-left: 0px;
}