/* -------------------------------------- */
/* -------  GLOBAL ELEMENTS  ------------ */
body,h1,h2,h3,h4,h5,h6,form,img,span,div,ul,li,p {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
body {
	background-image: url(images/black-texture.jpg);
	background-attachment: fixed;
	background-repeat: repeat;
	/*background: #f3f1f1;*/
	font: 0.75em Arial, sans-serif;
	text-align: center;
	color: #131414;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* general elements */
a { text-decoration: underline; color: #59b244; }
a:hover { text-decoration: none; }
.floatleft { float: left; }
.block { display: block; }
.floatright { float: right; }
ul.list { margin-left: 50px; }
li.list { font: 1.1em Arial, sans-serif; line-height: 1.8em;}
a.home-link {text-decoration: none; color: #262d64; }
a.home-link:hover {color: #59b244;}

/* Centers the layout */
#centered {
	width: 940px;
	margin: 0 auto;
	text-align: left;
	background: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
}

/* -------------------------------------- */
/* -------  HEADER  --------------------- */
#header {
	height: 130px;
}

.logo { height: 75px; width: auto; margin: 23px 0 0; }
	/* Navigation */
	ul#navigation {
		float: right;
		display: table;
		margin-top: 18px;
	}
		ul#navigation li {
			display: table-cell;
			padding-left: 20px;
		}
			ul#navigation li a {
				font: 20px FuturaCondensedMedium, Arial, sans-serif;
				display: block;
				background: #fff 0px 0 /*10px*/;
				/*padding: 35px 10px;*/ padding: /*35px 10px*/ 55px 10px 12px;
				color: #131414;
				text-decoration: none;
			}
				ul#navigation li a:hover {
					text-decoration: none;
					background: #262d64 0px 10px;
					padding: /*35px 10px*/ 55px 10px 12px;
					color: #ffffff;

				}
				ul#navigation li.active a {
					background: #262d64  0px 10px;
					padding: /*35px 10px*/ 55px 10px 12px;
					color: #ffffff;
				}

/* Banner */
#banner {
	margin-bottom: 10px;
	height: 320px;
	width: 940px;
}
	#banner img {
		display: block;
	}
	#banner .info {
		width: 280px;
		height: 320px;
		background: url(images/banner_overlay.png);
		/*background-color: #262d64;*/
		position: relative;
		top: -320px;
		color: #ffffff;
		z-index:1;
	}
		#banner .info div {
			padding: 25px;
		}
			#banner .info div h1 {
				font: 32px FuturaCondensedMedium, Arial, sans-serif;
				margin-bottom: 10px;
			}
			#banner .info div p {
				font: 1.15em Arial, sans-serif;
				line-height: 1.8em;
				margin-bottom: 10px;
			}
			#banner .info a.more {
				display: inline-block;
				padding: 5px 10px;
				background: #59b244;
				color: #ffffff;
			}

/* -------------------------------------- */
/* -------  PORTFOLIO  ------------------ */		
#portfolio {
	float: left;
	width: 940px;
}
	#portfolio .column {
		width: 300px;
		margin-right: 20px;
		float: left;
		margin-bottom: 10px;
	}
	
	/* Portfolio titles */
	#portfolio h2 {
		padding: 3px 5px;
		font: 28px FuturaCondensedMedium, Arial, sans-serif;
		color: #262d64;
	}
	/* Portfolio description */
	#portfolio p {
		line-height: 1.4em;
		padding: 2px 6px;
	}
	/* The last portfolio image in a column */
	#portfolio .last {
		margin-right: 0px;
	}
	/* Portfolio images */
	#portfolio img {
		border-bottom: 5px solid #ffffff;
		padding-bottom: 2px;
	}
	#portfolio a:hover img {
		border-bottom: 5px solid #59b244;
	}

/* -------------------------------------- */
/* -------  FOUR COL LAYOUT  ------------ */
#four-col {
	margin-bottom: 35px;
	float: left;
	width: 100%;
}
	/* One column */
	#four-col .column {
		width: 220px;
		margin-right: 20px;
		float: left;
	}
		/* Column title */
		#four-col h2 {
			padding: 8px 5px;
			font: 28px FuturaCondensedMedium, Arial, sans-serif;
			color: #262d64;
		}
		/* Column descriptions */
		#four-col p {
			line-height: 1.8em;
			padding: 7px 6px;
		}
		/* More buttons */
		#four-col a.more {
			float: right;
			display: block;
			background: url(images/bullet1.gif) 0px 12px no-repeat;
			padding: 5px 5px 5px 14px;
			color: #59b224;
		}
		#four-col .last {
			margin-right: 0px;
		}

/* Some page specifications */
.page {
	padding-top: 40px;
}
.border {
	border-top: 4px solid #59b244;
	padding-top: 20px;
}

/* -------------------------------------- */
/* -------  THREE COL LAYOUT  ----------- */
#three-col {
	float: left;
	width: 940px;
	margin-bottom: 35px;
}
	/* Columns */
	#three-col #left {
		float: left;
		width: 440px;
	}
	#three-col #right1 {
		float: right;
		width: 220px;
	}
	#three-col #right2 {
		float: right;
		width: 220px;
		margin-right: 20px;
	}
	
	/* Headers */
	#three-col h1 {
		margin-bottom: 13px;
		font: 38px FuturaCondensedMedium, Arial, sans-serif;
		color: #262d64;
	}
	#three-col h2 {
		padding: 8px 5px;
		font: 32px FuturaCondensedMedium, Arial, sans-serif;
		color: #262d64;
	}
		#three-col #left h2 {
			margin-bottom: 13px;
			font: 32px FuturaCondensedMedium, Arial, sans-serif;
			padding: 0px;
		}
		#three-col #left h3 {
			margin-bottom: 13px;
			font: bold 1.6em Arial, sans-serif;
			padding: 0px;
		}
		#three-col .box1 h2 {
			padding: 0px;
			margin-bottom: 6px;
			padding: 0px;
		}
		#three-col .box2 h2 {
			padding: 10px;
			padding: 0px;
			margin-bottom: 6px;
		}
		
	/* Paragraph styles */
	#three-col #left p {
		font: 1.1em Arial, sans-serif;
		line-height: 1.8em;
		margin-bottom: 25px;
	}
	
	/* Right side styles */
	#three-col #right1 p, #three-col #right2 p {
		line-height: 1.8em;
		padding: 7px 6px;
	}
		#three-col #right1 .box1 p, #three-col #right2 .box1 p {
			line-height: 1.8em;
			padding: 4px 0px;
		}
		#three-col #right1 .box2 p, #three-col #right2 .box2 p {
			line-height: 1.8em;
			padding: 4px 0px;
		}
	#three-col .cite {
		display: block;
		text-align: right;
	}
	#three-col a.more {
		display: inline-block;
		background: url(images/bullet1.gif) 0px 12px no-repeat;
		padding: 5px 5px 5px 14px;
		color: #59b224;
	}
	
/* -------------------------------------- */
/* -------  TWO COL LAYOUT  ------------- */
#two-col {
	
}

/* Left column */
#two-col #left {
	float: left;
	width: 580px;
	margin-bottom: 35px;
}
	#two-col #left h1 {
		margin-bottom: 13px;
		font: 38px FuturaCondensedMedium, Arial, sans-serif;
		color: #262d64;
	}
	#two-col #left h2 {
		margin-bottom: 13px;
		font: bold 1.8em Arial, sans-serif;
	}
	#two-col #left p.intro {
		font: 1.2em Arial, sans-serif;
		line-height: 1.8em;
		margin-bottom: 35px;
	}
	#two-col #left p {
		font: 1.1em Arial, sans-serif;
		line-height: 1.8em;
		margin-bottom: 15px;
	}
	#two-col #left .img1 {
		float: left;
		margin: 5px 20px 10px 0px;
	}
	
			
			/* Two column layout inside left column */
			.left-col {
				float: left;
				width: 280px;
				line-height: 1.8em;
			}
				.left-col h3 {
					font: 1.6em Arial, sans-serif;
					margin-bottom: 7px;
				}
				.left-col img {
					float: left;
					margin: 7px 16px 3px 0px;
				}
			.right-col {
				float: right;
				width: 280px;
				line-height: 1.8em;
			}
				.right-col h3 {
					font: 1.6em Arial, sans-serif;
					margin-bottom: 7px;
				}
				.right-col img {
					float: left;
					margin: 7px 16px 3px 0px;
				}
			
/* Right column */
#two-col #right {
	float: right;
	width: 280px;
	margin-bottom: 35px;
}
	/* Lists */
	ul.catlist {
		list-style: none;
	}
		 ul.catlist li {
			border-bottom: 1px solid #d1cfbd;
			padding: 4px 10px;
		}
			ul.catlist li a {
				color: #000000;
			}
			
	/* Box 1 (tan) */
	.box1 {
		background: #e4e2d2;
		padding: 18px;
		line-height: 1.8em;
		margin-bottom: 20px;
	}
		.box1 .img1 {
			margin: 4px 15px 9px 0px;
			float: left;
		}
		.box1 h2 {
			font: 1.7em Arial, sans-serif;
			margin-bottom: 6px;
		}
		.box1 h3 {
			background: url(images/bullet2.gif) no-repeat 0px 9px;
			font-size: 1.0em;
			padding: 0px 0px 5px 18px;
		}
	
	/* Box 2 (green twitter) */	
	.box2 {
		background: url(images/green_box.gif) no-repeat #59b244;
		padding: 22px;
		color: #ffffff;
		margin-bottom: 25px;
	}
		.box2 h2 {
			font: normal 1.9em Arial, sans-serif;
			margin-bottom: 8px;
		}
		.box2 span.cite {
			text-align: right;
			display: block;
		}
		.box2 span.cite a {
			background: url(images/bullet4.gif) no-repeat 0px 10px;
			display: inline-block;
			padding: 5px 0px 5px 14px;
			color: #ffffff;
		}
		
	/* News updates */	
	.news {
		
	}
		.news h2  {
			background: url(images/bullet2.gif) no-repeat 0px 8px;
			padding: 0px 19px;
			margin-bottom: 10px;
		}
		.news div {
			background: url(images/news_div.gif) no-repeat bottom left;
			padding: 13px 15px 27px 18px;
		}
		.news div a.big {
			color: #000000;
			font-size: 1.2em;
			display: block;
			margin-bottom: 3px;
		}
		.news div span {
			font-size: 0.9em;
		}
		
/* -------------------------------------- */
/* -------  FOOTER  --------------------- */		
#footer {
	border-top: 4px solid #f0f0f0;
	padding: 23px 15px 0px 15px;
	clear: both;
	height: 40px;
}
	#footer .copyright {
		float: right;
	}
	#footer ul {
		list-style: table;
		float: left;
	}
		#footer ul li {
			display: table-cell;
			padding-right: 6px;
		}
	
	
/* -------------------------------------- */
/* -------  SLIDER  --------------------- */	
/* Slider controls */
#controls {
	position: relative;
	left: 700px;
	top: -60px;
	width: 226px;
}
	
#slider { }	
	#slider ul, #slider li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#slider li { 
		width: 940px;
		height: 320px;
		overflow: hidden;
	}	
#prevBtn, #nextBtn { 
	display: block;
	margin: 0;
	overflow: hidden;	
	position: absolute;
	top: 20px;
}	
#nextBtn { 
	left: 116px;
}														
#prevBtn a, #nextBtn a {
	display: block;
	width: 106px;
	padding: 7px 0px;
	background: #111212;
	color: #ffffff;
	text-align: center;
}
	#prevBtn a:hover, #nextBtn a:hover {
		background: #59b244;
	}
	#nextBtn a { 
		background: url(images/next_previous.gif) no-repeat top right;
		width: 106px;
		padding: 7px 0px;
		background: #111212;
		color: #ffffff;
		text-align: center;
	}
			
/* -------------------------------------- */
/* -------  FORM  ----------------------- */
#form {
	padding: 10px;
}
	#form fieldset {
		border: 0px;
		padding: 0px;
		margin: 0px;
	}
		/* Labels */
		#form label {
			font-size: 1.2em;
			width: 90px;
			display: inline-block;
			text-align: right;
			margin-right: 15px;
			margin-bottom: 15px;
		}
		
		/* The regular inputs */
		#form .input1 {
			border: 1px solid #e4e2d2;
			padding: 5px 7px;
			margin-bottom: 15px;
			width: 200px;
		}
		
		/* Selection list */
		#form select {
			width: 210px;
			font: 1.2em Tahoma;
			border: 1px solid #e4e2d2;
			padding: 5px 7px;
			margin-bottom: 15px;
		}
		
		/* Text area */
		#form textarea {
			border: 1px solid #e4e2d2;
			vertical-align: top;
			width: 350px;
			font: 1.1em Tahoma;
			line-height: 1.7em;
			padding: 9px;
			height: 200px;
		}
		
		/* Indentation for the submit button */
		#form .indent {
			padding-left: 107px;
			padding-top: 15px;
		}
		/* The button */
		#form .submitbutton {
			width: 200px;
			padding: 6px 0px;
		}

.mobile-only { display: none; }
.large-only { display: block; }
		
@media (max-width: 767px) {
	
	.mobile-only { display: block; }
	.large-only { display: none; }
	
	body { background-image: none; }
	#header { height: auto; }
	#centered { width: 90%; margin: 0 auto; padding: 0 5%; }
	#three-col #left, #three-col #right, #three-col, #four-col .column, #two-col #left, #two-col #right { width: 100%; padding-left: 0; padding-right: 0; }
	.logo { height: 50px; width: auto; display: block; margin: 0 auto 8px; float: none; }
	ul#navigation { clear: both; width: 100%; }
	
	.border { border-top: 0px solid #59b244; padding-top: 0; }
	
	#slider, #banner { display: none; }
	
	#three-col #right1, #three-col #right2 { width: 100%; margin: 0; }
	#three-col .cite { text-align: left; }
	
	ul#navigation li { position: relative; display: inline-block; text-align: center; float: none; padding: 7px 0; margin: 0 10px; }
	ul#navigation { text-align:center; margin-bottom: 15px; }
	ul#navigation li, ul#navigation li:hover, ul#navigation li a:hover { padding: 0; }
	ul#navigation li a { font-size: 17px; }
	ul#navigation li a, ul#navigation li.active a { padding: 0; }
	ul#navigation li.active a, ul#navigation li:hover a { background: none; border-bottom: 1px solid #131414; color: #131414; }
	
	#footer { text-align: center; height: auto; }
	#footer img { display: block; margin: 0 auto 15px; }
	#footer .copyright { float: none; text-align: center; }
}

@media (max-width: 499px) {
	ul#navigation li { margin: 0 7px; }
	ul#navigation li a { font-size: 16px; }
}