@charset "utf-8";
@font-face {
	font-family: 'ProximaNovaRegular';
	src: url('../fonts/proximanova-regular-webfont.eot');
	src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/proximanova-regular-webfont.woff') format('woff'),
		 url('../fonts/proximanova-regular-webfont.ttf') format('truetype'),
		 url('../fonts/proximanova-regular-webfont.svg#ProximaNovaRegular') format('svg');
}
@font-face {
	font-family: 'ProximaNovaBold';
	src: url('../fonts/proximanova-bold-webfont.eot');
	src: url('../fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/proximanova-bold-webfont.woff') format('woff'),
		 url('../fonts/proximanova-bold-webfont.ttf') format('truetype'),
		 url('../fonts/proximanova-bold-webfont.svg#ProximaNovaBold') format('svg');
}
@font-face {
	font-family: 'TradeGothicBold';
	src: url('../fonts/tradegothic-bold-webfont.eot');
	src: url('../fonts/tradegothic-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/tradegothic-bold-webfont.woff') format('woff'),
		 url('../fonts/tradegothic-bold-webfont.ttf') format('truetype'),
		 url('../fonts/tradegothic-bold-webfont.svg#TradeGothicBold') format('svg');
}
@font-face {
	font-family: 'TradeGothicRegular';
	src: url('../fonts/tradegothic-boldcondtwenty-webfont.eot');
	src: url('../fonts/tradegothic-boldcondtwenty-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/tradegothic-boldcondtwenty-webfont.woff') format('woff'),
		 url('../fonts/tradegothic-boldcondtwenty-webfont.ttf') format('truetype'),
		 url('../fonts/tradegothic-boldcondtwenty-webfont.svg#TradeGothicRegular') format('svg');
}
html, body {
	margin: 0;
	padding: 0px;
	font-family: 'ProximaNovaRegular';	
	font-size: 14px;
	color: #232701;
}
p {
	font-size:14px;
	text-align:justify;
	line-height:16px;
	margin:0 0 10px 0;
}

#header-container {
	color:#fff;
}

#header {
	width:980px;
	height:130px;
	background: #000000;
	margin:0px auto;
	margin-bottom:0px;
}
#header .logo{
	float:left;
	width:140px;
	height:109px;
	padding:10px 10px 0 15px;
}
#header .details{
	float:left;
	width:auto;
	height:30px;
	margin:12px 5px 8px 26px;
	font-size:14px;
}
#header .dgap{
	margin:0 15px;
}
#header a:link, #header a:visited {
	color: #ffffff;
	text-decoration: none;
}
#header a:active, #header a:hover {
	color: #ffc017;
	text-decoration: underline;
}
/* navigation */
nav {
	float:right;
	width:auto;
	height:80px;
	margin-top:35px;
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}


nav ul {
	font-size:14px;
	padding: 0;
	list-style: none;
	position: relative;
	display: inline-table;
	z-index: 999;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
		text-align: left;
	}
		nav ul li:hover {
			background: #4b545f;
			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		}
			nav ul li:hover a {
				color: #fff;
			}
		
		nav ul li a {
			display: block; padding: 0;
			color: #757575; text-decoration: none;
		}
			
nav a.home, nav a.home_a{
	width:70px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/home.png");
	background-repeat:no-repeat;
}
nav a.home:hover, nav a.home_a {
	background: url("../images/buttons/home.png") 0 80px;
}		
nav a.about, nav a.about_a{
	width:100px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/about.png");
	background-repeat:no-repeat;
}
nav a.about:hover, nav a.about_a {
	background: url("../images/buttons/about.png") 0 80px;
}		
nav a.safety, nav a.safety_a{
	width:90px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/safety.png");
	background-repeat:no-repeat;
}
nav a.safety:hover, nav a.safety_a {
	background: url("../images/buttons/safety.png") 0 80px;
}		
nav a.design, nav a.design_a{
	width:190px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/design.png");
	background-repeat:no-repeat;
}
nav a.design:hover, nav a.design_a {
	background: url("../images/buttons/design.png") 0 80px;
}		
nav a.projects, nav a.projects_a{
	width:100px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/projects.png");
	background-repeat:no-repeat;
}
nav a.projects:hover, nav a.projects_a {
	background: url("../images/buttons/projects.png") 0 80px;
}		
nav a.services, nav a.services_a{
	width:100px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/services.png");
	background-repeat:no-repeat;
}
nav a.services:hover, nav a.services_a {
	background: url("../images/buttons/services.png") 0 80px;
}		
nav a.contact, nav a.contact_a{
	width:100px;
	height:80px;
	text-indent:-9999px;
	background: url("../images/buttons/contact.png");
	background-repeat:no-repeat;
}
nav a.contact:hover, nav a.contact_a {
	background: url("../images/buttons/contact.png") 0 80px;
}		
	nav ul ul {
		background: #24282a; border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
			nav ul ul li a {
				display: block;
				width:190px;
				text-align:left;
				height:auto;
    			padding:10px 0 10px 8px;
				background:#000;
				color:#ffc017;
			}	
				nav ul ul li a:hover {
					color:#fff;
				}
		
	nav ul ul ul {
		position: absolute; left: 100%; top:0;	}

#banner-container {
	height:390px;
	margin:10px 0;
}
#banner {
	width:980px;
	height:390px;
	margin:0px auto;
	background:#fff;
	color:#000;
}
#container {
	width:980px;
	margin:0px auto;
}
#sidebar {
	float:left;
	width:250px;
	height:auto;
	margin:15px 20px 15px 0;
}
#sidebar p, #sidebar p.pbot {
	font-size:15px;
	text-align:justify;
	line-height:20px;
	margin:0 0 6px 0;
}
#sidebar p.pbot {
	margin-bottom:0px;
}
#sidebar label {
	float: left;
	text-align: left;
	width: 60px;
	padding-right:10px;
	font-weight:bold;
}
#sidebar a:link, #sidebar a:visited, #content a:link, #content a:visited {
	color: #000000;
	text-decoration: underline;
}
#sidebar a:active, #sidebar a:hover, #content a:active, #content a:hover {
	color: #ffc017;
	text-decoration: underline;
}
/* contact form */
#contact-area {
	width:370px;
}
#contact-area input {
	padding: 3px;
	width: 252px;
	background-color:#24282a;
	font-size: 12px;
	margin: 0px 0px 8px 0px;
	border: 1px solid #ffc017;
	color:#ffffff;
}
#contact-area textarea {
	padding: 3px;
	width: 252px;
	height:80px;
	background-color:#24282a;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px 0px 8px 0px;
	border: 1px solid #ffc017;
	color:#ffffff;
}
#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #ff0000;
}
#contact-area label {
	float: left;
	text-align: left;
	width: 110px;
	padding-top: 4px;
}
#contact-area input.submit-button {
	text-indent:-9999px;
	border:0;
	width: 100px;
	height:35px;
	background-image:url(../images/submit.png);
	float: right;
}
#contact-area input.submit-button:hover{
	background: url("../images/submit.png") 0 35px;
}
/* contact form */
#content {
	float:left;
	width:705px;
	height:auto;
	margin:15px 0;
}
#content img.imleft {
	float:left;
	margin:0 15px 15px 0;
}
#content img.imright {
	float:right;
	margin:0 0 15px 15px;
}
#content img.imdesign {
	margin:0 0 20px 0px;
}
#content .graphbox,#content .graphboxend {
	float:left;
	width:225px;
	height:auto;
	margin:0 15px 0 0;
}
#content .graphboxend {
	margin-right:0;
}
#content .projbox,#content .projboxend {
	float:left;
	width:340px;
	height:auto;
	margin:0 25px 0 0;
}
#content .projboxend {
	margin-right:0;
}
#content .projbox img,#content .projboxend img{
	margin-bottom:10px;
}
#content ul{
	list-style-type: square;
	padding-left: 15px;
	margin: 0;
}
#content ul li{
	background-position: 0.1em;
	margin:0px 0 10px 0;
	text-align:justify;
}
#content img.info {
	display:block;
	margin:15px auto;
}
h1 {
	margin:0;
	display: block;
	width: 705px;
	height: 35px;
	text-indent: -9999px;
	margin-bottom:12px;
}
h1#home{
	background: url(../images/heads/welcome.png) no-repeat 0 0;
}
h1#projects{
	background: url(../images/heads/projects.png) no-repeat 0 0;
}
h1#services{
	background: url(../images/heads/services.png) no-repeat 0 0;
}
h1#safety{
	background: url(../images/heads/safety.png) no-repeat 0 0;
}
h1#about{
	background: url(../images/heads/about.png) no-repeat 0 0;
}
h1#core-values{
	background: url(../images/heads/core-values.png) no-repeat 0 0;
}
h1#design{
	background: url(../images/heads/design.png) no-repeat 0 0;
}
h1#contact{
	background: url(../images/heads/contact.png) no-repeat 0 0;
}
h1#details{
	background: url(../images/heads/details.png) no-repeat 0 0;
}
h2 {
	margin:0;
	display: block;
	width: 250px;
	height: 35px;
	text-indent: -9999px;
	margin-bottom:10px;
}
h2#contact{
	background: url(../images/contact.png) no-repeat 0 0;
}
h2#details{
	background: url(../images/details.png) no-repeat 0 0;
}
h3 {
	text-transform:uppercase;
	font-size:16px;
	color:#000000;
	margin:0 0 10px 0;
}
h4 {
	font-size:16px;
	color:#fff;
	margin:5px auto;
}

#footer-container {
	clear:both;
	background: #000000;
	color:#fff;
	height:auto;
}
#footer {
	width:980px;
	height:auto;
	margin:0px auto;
	padding:5px 0;
}
#footer p{
	font-size:13px;
}
.note {
          position:relative;
          width:195px;
          padding:15px;
          margin:1em 0;
          color:#fff;
          background:#97C02F;
          overflow:hidden;
      }

      .note:before {
          content:"";
          position:absolute;
          top:0;
          right:0;
          border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
          border-style:solid;
          border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
          background:#658E15; /* For when also applying a border-radius */
          display:block; width:0; /* Only for Firefox 3.0 damage limitation */
          /* Optional: shadow */
          -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
      }

      .note.red {background:#C93213;}
      .note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

      .note.blue {background:#53A3B4;}
      .note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

      .note.taupe {background:#999868;}
      .note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

      .note.rounded {
          -webkit-border-radius:5px 0 5px 5px;
          -moz-border-radius:5px 0 5px 5px;
          border-radius:5px 0 5px 5px;
      }

      .note.rounded:before {
          border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
          border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
          -webkit-border-bottom-left-radius:5px;
          -moz-border-radius:0 0 0 5px;
          border-radius:0 0 0 5px;
      }

      .note p {margin:0;}
      .note p + p {margin:1.5em 0 0;}
	  
/* ribbon style */

 .ribbon-wrapper {
	position: relative;
}
  .ribbon-green-front {
	background-color: #97c02f;	height: 30px;
	width: 225px;
	position: relative;
	left:0px;
	z-index: 2;
}
  .ribbon-red-front {
	background-color: #c93213;	height: 30px;
	width: 225px;
	position: relative;
	left:0px;
	z-index: 2;
}
  .ribbon-blue-front {
	background-color: #53a3b4;	height: 30px;
	width: 225px;
	position: relative;
	left:0px;
	z-index: 2;
}

   .ribbon-header{
	font-size:16px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	padding:5px 0;
}
  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
	left: 0px;
	border-color: transparent #99c transparent transparent;
}

  .ribbon-edge-topleft {
	top: -10px;
	border-width: 10px 20px 0 0;
}
  .ribbon-edge-bottomleft {
	border-width: 0 20px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
	left: 205px;
	border-color: transparent transparent transparent #99c;
}

  .ribbon-edge-topright {
	top: -10px;
	border-width: 10px 0 0 20px;
}
  .ribbon-edge-bottomright {
	border-width: 0 0 0px 20px;
}

  .ribbon-back-left {
	position: absolute;
	top: -10px;
	left: 0px;
	width: 0px;
	height: 30px;
		z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: -10px;
	right: 0px;
	width: 0px;
	height: 30px;
		z-index: 0;
}