/* --------------------------- Imports ---------------------------------------- */

	@import url(reset.css);

	/* ---- Fonts ---- */
		@import url(http://fonts.googleapis.com/css?family=Oswald);




/* ----------------------- Main Structure -------------------------------------- */

	body {

		margin: 0px;
		padding: 0px;
		background: url(../resources/back.png);

		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 14px;
		color: #2f4248;
	}

	#header {
		margin: 0px;
		padding: 0px;

		min-height: 150px;
		min-width: 100%;

		float: left;
		position: relative;
		z-index:1;
	}


	#header div.back {
		width: 100%;
		min-height: 150px;
		position:absolute;
		background-color: black;
		opacity: 0.4;
		z-index:-1;
		box-shadow: 1px 5px 10px #1F1F1F;
	}

	#middle {

		position: relative;
		min-width: 100%;
		min-height: 400px;
		float: left;
	}

	#content {

		width: 900px;
		min-height: 400px;
		overflow: auto;

		position: relative;
		margin-left: auto;
		margin-right: auto;

		background: #E0E0E0;
		box-shadow: 1px 3px 15px #1F1F1F;

		padding-bottom: 40px;

	}

	#footer {

		width: 100%;
		height: 40px;
		position: absolute;

		bottom: 0px;
		padding: 0px;
		margin: 0px;
		background: #B3B3B3;

	}

	/* ------ Footer Styling ------ */

	#footer ol {

		width: 890px;
		height: 20px;
		padding-left: 10px;
	}

	#footer ul {

		float: left;
		margin-left: 15px;
		margin-top: 10px;

		font-family: Oswald, verdana;
		font-size: 11pt;
	}

	#footer a {
		color: inherit;
	}

	#footer a:hover {

		color: green;
	}





/*  ----------------------------------- Navigation -------------------------------------------  */

	.navigation {

		position: relative;
		display: inline-block;
		margin: 0px;
		padding: 0px;
		float: right;
		height: 150px;
	}


	.navigation a {

		color: white;
	}

	.navigation li {

		position: relative;
		float: left;

		width: 100px;
		min-height: 120px;
		padding: 0px;
		margin: 0px;

		border-left: solid #555555 1px;
		border-right: solid #555555 1px;
		margin-left: -1px;
	}

	.navigation li span {
		position: absolute;
		width: 100%;
		left: 0px;
		margin-top: 80px;

		text-align: center;
		font-family: Oswald, verdana;
		font-weight: normal;
		font-size: 12pt;
		letter-spacing: 1px;
		color: white;
	}

	/*  ----Animating Navigation----  */
	.navigation li div{
		width: 100%;
		height: 8px;
		position: absolute;
		margin: 0px;

		-webkit-transition: all .2s ease;
	}

	.navigation li:hover div{
		height: 20px;
	}

	.nav1 {
		/*background-color: #FF0000;*/
        background-color: #3cb51c;
	}
	.nav2 {
		/*background-color: #DD0000;*/
        background-color: #30a212;
	}
	.nav3 {
		/*background-color: #C10000;*/
        background-color: #2a910e;
	}
	.nav4 {
		/*background-color: #A80000;*/
        background-color: #1d6909;
	}



/*  ----------------------------------- Home -------------------------------------------  */

#home-image {

    width: 900px;
    height: 250px;
    overflow: hidden;
    float: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;

}

div.home.summary {
    position: relative;
    float: left;
}

div.home.summary p {

  width: calc( 100% - 30px );
	font-family: Oswald, verdana;
	font-size: 14pt;
	text-align: center;
  position: relative;
  float: left;
	padding: 15px;
  padding-bottom: 0px;
  margin-top: 20px;
}

h2.home {

  float: left;
	font-family: Oswald, verdana;
	font-size: 18pt;
	padding-left: 30px;
  margin-top: 30px;
	text-decoration: underline;
  display: none;
}

div.home.summary a:hover{
	color: green !important;
}






/* -------------------------------------------------------- Services Page ------------------------------------------------- */

h2.servicespage {

	font-family: Oswald, verdana;
	font-size: 20pt;
	padding: 0px;
	margin: 0px;
	padding-top: 10px;
	text-decoration: underline;
	text-align: center;
}


div.servicespage.summary p {

	font-family: Oswald, verdana;
	font-size: 14pt;
	text-align: center;
	padding: 10px;
	padding-top: 0px;
	margin: 0px;
}




div.servicespage.services{

	position:relative;
	width: 100%;
	min-height: 200px;
	overflow: hidden;
	padding-top: 0px;
	float: left;
}

div.servicespage.services a{
	color: inherit;
}

div.servicespage.services .service{

	position: relative;
	width: 260px;
	min-height: 340px;

	background: #444444;
  /*background: black;*/

	padding: 0px;
	margin: 20px;
	float: left;

	-webkit-transition: all .2s ease;
}

div.servicespage.services .service:hover{
	/* Do Nothing */
}

div.servicespage.services .service:hover span{

	/*color:red;
	padding-left: 30px;
	width: 430px;*/

}

div.servicespage.services .service span{

	position: absolute;
	width: 260px;
	height: 40px;
	left: 0px;
	top: 300px;

	/*background: black;*/
	opacity: 0.8;


	color: white;
	font-family: Oswald, verdana;
	font-size: 14pt;
	text-align: left;
	padding-left: 20px;

	-webkit-transition: all .2s ease;
}

div.servicespage.services .service .image {

		width: 260px;
		height: 300px;
		position: relative;

	}

div.servicespage.services .service img{

	position: absolute;
	top: -9999px;
	bottom: -9999px;
	left: -9999px;
	right: -9999px;
	margin: auto;

	width: 260px;
	/*height: 300px;*/
}





/* -------------------------------------------------------- Specials Page ------------------------------------------------- */

div.specialspage.summary {

	min-height: 100px;

}

div.specialspage.summary p {

	font-family: Oswald, verdana;
	font-size: 13pt;
	text-align: center;
	padding: 10px;
	padding-top: 0px;
	margin: 0px;
}

h2.specialspage {

	font-family: Oswald, verdana;
	font-size: 20pt;
	padding: 0px;
	margin: 0px;
	padding-top: 10px;
	text-decoration: underline;

	text-align: center;
}


div.specialspage.specials{

	position:relative;
	width: 100%;
	min-height: 400px;
	overflow: hidden;
	padding-top: 0px;
	float: left;
}


 /* ----- Special 1 ------*/

div.specialspage.specials .special1 {

width: 100%;
height: 200px;
position: relative;

background: #B3B3B3;
overflow: none;

}

div.specialspage.specials .special1 img {
	background: black; float:left;

}


div.specialspage.specials .special1 h3 {

	padding-left: 20px;
	float: left;
	position: relative;

	font-family: Oswald, verdana;
	font-weight: bold;
	font-size: 16pt;
	text-align: center;

}


div.specialspage.specials .special1 p {

	width: 560px;

	padding: 10px;
	padding-left: 20px;
	float: left;
	position: relative;

	font-family: Oswald, verdana;
	font-size: 12pt;
	text-align: center;

}

div.specialspage.specials .special1 span{

	width: 100px;
	height: 30px;
	position: absolute;
	float: right;

	bottom: 20px;
	right: 20px;

	background: #B80000;

	font-family: Oswald, verdana;
	font-size: 14pt;
	text-align: center;
	color: white;


}


 /* ----- Special 2 ------*/

div.specialspage.specials .special2 {

width: 100%;
height: 200px;
position: relative;
overflow: none;

}

div.specialspage.specials .special2 img {
	background: black;
	float:right;
	right: 0px;
	position: absolute;

}


div.specialspage.specials .special2 h3 {

	margin-right: 320px;
	float: right;
	position: relative;

	font-family: Oswald, verdana;
	font-weight: bold;
	font-size: 16pt;
	text-align: center;

}


div.specialspage.specials .special2 p {

	width: 560px;

	padding: 10px;
	margin-right: 320px;
	float: right;
	position: relative;

	font-family: Oswald, verdana;
	font-size: 12pt;
	text-align: center;

}

div.specialspage.specials .special2 span{

	width: 100px;
	height: 30px;
	position: absolute;
	float: right;

	bottom: 20px;
	left: 20px;

	background: #B80000;

	font-family: Oswald, verdana;
	font-size: 14pt;
	text-align: center;
	color: white;


}






/* -------------- Contact Page ------------------*/

div.contact {
    position: relative;
    float: left;
		margin-top: 15px;
		margin-left: 10px;
		margin-right: 10px;
}

div.contact span {
	float: left;
	width: 100%;
}

div.contact p {

	font-family: Oswald, verdana;
	font-size: 14pt;
  float: left;
	padding: 5px;
}
























/**
 * Alignment styles that are used by the InputfieldTinyMCE for
 * positioning images in bodycopy. If you are using this field type,
 * you may want to include these or similar styles in your site.
 *
 */
.align_left {
        float: left;
        margin: 0 1em 0.25em 0;
}

.align_right {
        float: right;
        margin: 0 0 0.25em 1em;
}

.align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}


/**
 * WireFatalError is a class that ProcessWire will use to output
 * fatal errors in the design, but only if debug mode is on, or if
 * you are logged in as a superuser.
 *
 */
.WireFatalError {
	background: #a30000;
	color: #fff;
	padding: 1em;
	position: relative;
	z-index: 9999;
}