/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 14px;
    line-height: 1.4;
}

a {
	color: #e9894e;
	font-weight: 500;
	text-decoration: none;
}
a:hover {
	color: #a34810;
	/*text-decoration: underline;*/
}

ul {
	list-style: none;
	margin: 0 0 20px 15px;
	padding: 0;
}
li {
	background: url('../img/bullet.gif') no-repeat left 4px;
	margin: 0 0 5px;
	padding: 0 0 0 20px;
}

address {
	font-style: normal;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	background: #c2c3c6 url('../img/bg.jpg') repeat center center;
	font-family: 'Lato', Helvetica, Arial, "Lucida Grande", sans-serif; 
	color: #444;
	font-weight: 200;
	letter-spacing: 2px;
}

h2 {
	background: url('../img/bg-black-px.png') repeat left top;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 -20px 20px;
	padding: 0 20px;
	word-spacing: 1px;
}
h2 b {
	background: #f7f7f7;
	display: inline-block;
	margin: 0 -8px;
	padding: 5px 8px;
}
h3 {
	color: #1e5a98;
	font-size: 16px;	
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;	
	word-spacing: 1px;
}
h4 {
	font-size: 15px;	
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;	
	word-spacing: 1px;
}

#main {
	margin: 0 auto;
	width: 1000px;
}

#header {
	padding: 130px 0 0 0;
	position: relative;
}

#navMain,
#bannerMain {
	-webkit-box-shadow:  0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow:  0px 3px 5px 0px rgba(0, 0, 0, 0.1);	
}
#contentMain, 
#footer {
	-webkit-box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.1);
    box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.1);
}


/* =logo
******************/
#logo {
	left: 20px;
	position: absolute;
	padding: 20px 0 0 144px;
	top: 65px;
}
	#logo a {
		color: #444;
		font-size: 28px;
		font-weight: 200;
		text-decoration: none;
		text-transform: uppercase;
	}
	#logo b {
		background: url('../img/loke-engineering.png') no-repeat left top;
		display: block;
		height: 49px;
		left: 0;
		overflow: none;
		position: absolute;
		text-indent: -9999px;
		top: 0;
		width: 137px;
	}

/* =contact
******************/
#contactHeader {
	/*background: url('../img/contact-header.png') repeat left top;*/
	font-size: 12px;
	font-weight: 400;
	padding: 20px 20px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 200px;
}
	#contactHeader ul {
		list-style: none;
		margin: 0;
		padding: 0;	
	}
	#contactHeader li {
		background: none;
		margin: 0 0 5px;
		padding: 0;
	}
	#contactHeader a {
		color: #a34810;
	}
	
	
.contactDetails {
}
	.contactDetails dt {
		clear:left;
		float: left;
		font-weight: 400;
		list-style: none;
		margin: 0 10px 10px 0;
		padding: 0;
		text-align: right;
		width: 100px;
	}
	.contactDetails dd {
		float: left;
		margin: 0 0 10px;
		padding: 0;
	}
#mapCanvas {
	border: 5px solid #ececec;
	height: 400px;
	width: 400px;
}


/* =footer
******************/
#footer {
	background: #636363;
	background: -moz-linear-gradient(top,  #636363 0%, #4c4c4c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(100%,#4c4c4c));
	background: -webkit-linear-gradient(top,  #636363 0%,#4c4c4c 100%);
	background: -o-linear-gradient(top,  #636363 0%,#4c4c4c 100%);
	background: -ms-linear-gradient(top,  #636363 0%,#4c4c4c 100%);
	background: linear-gradient(to bottom,  #636363 0%,#4c4c4c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#4c4c4c',GradientType=0 );
	
	color: #f7f7f7;
	font-size: 12px;
	margin: 0 0 50px;
	padding: 20px 20px 15px;
}
	#footer a {
		color: #e9894e;	
	}
	#footer .topRow {
		display: table;
		margin: 0 0 40px;
	}
	#footer .widget {
		border-left: 1px solid #999;
		display: table-cell;
		padding: 0 20px 5px;
		width: 25%;
	}
	#footer .widget:nth-child(1) {
		border: none;
		padding: 0 20px 5px 0;
	}
	#footer .widget:nth-child(2) {
		width: 49%;	
	}
	#footer h3 {
		color: #f7f7f7;
		font-size: 16px;
		font-weight: 200;
		margin: 0 0 10px;
		text-transform: uppercase;
	}
	
	#footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#pageHome #resources {
		display: block;
		width: 100%;
	}
	#pageHome #resources h3 {
		float: left;
		margin: 0 20px 0 0;
		padding: 0;
	}
	#pageHome .topRow {
		display: block;	
		margin: 0 0 20px;
	}
	#pageHome #resources li {
		background: url('../img/nav-split.gif') no-repeat left center;
		float: left;
		margin: 4px 20px 0 0;
		padding: 0 0 0 20px;
	
	}
	#pageHome #resources li:nth-child(1) {
		background: none;
		padding: 0;
	}
	#copyright {
		float: left;
		font-size: 10px;
	}
	#navFooter {
		float: right;
	}
	#navFooter {
		margin: 0;
		padding: 0;
	}
	#navFooter li {
		background: url('../img/nav-split.gif') no-repeat left center;
		float: left;
		list-style: none;
		margin: 0 15px 0 0;
		padding: 0 0 0 17px;
	}
	#navFooter li:nth-child(1) {
		background: none;
	}

/* =nav
******************/
#navMain {
	background: #7089b4;
	background: -moz-linear-gradient(top,  #7089b4 0%, #3e5d90 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7089b4), color-stop(100%,#3e5d90));
	background: -webkit-linear-gradient(top,  #7089b4 0%,#3e5d90 100%);
	background: -o-linear-gradient(top,  #7089b4 0%,#3e5d90 100%);
	background: -ms-linear-gradient(top,  #7089b4 0%,#3e5d90 100%);
	background: linear-gradient(to bottom,  #7089b4 0%,#3e5d90 100%);

	border-top: 4px solid #ececec;
	border-bottom: 4px solid #1f232c;
	height: 98px;
}
	#navMain ul {
		margin: 0;
		padding: 0;	
	}
	#navMain li {
		background: none;
		border-left: 1px solid #8fa2c4;
		border-right: 1px solid #444444;
		
		float: left;
		margin: 0;
		padding: 0;
		
	}
	#navMain li a {
		color: #f6f6f6;
		display: block;
		font-size: 14px;
		font-weight: 200;
		padding: 60px 20px 18px 20px;
		text-transform: uppercase;
		text-decoration: none;
		text-align: center;
		width: 110px;
	}
	
	#navMain li:nth-last-child(1) {
		border-right: 1px solid #8fa2c4;
		
	}
	#navMain li:nth-last-child(1) a {
		border-right: 1px solid #444444;
		padding: 60px 22px 18px 20px;
	}
	
	#navMain li#navMainHome a {
		background: url('../img/nav-home.png') no-repeat center 20px;	
	}
	#navMain li#navMainMachines a {
		background: url('../img/nav-machines.png') no-repeat center 20px;	
	}
	#navMain li#navMainProducts a {
		background: url('../img/nav-products.png') no-repeat center 20px;	
	}
	#navMain li#navMainContact a {
		background: url('../img/nav-contact.png') no-repeat center 20px;	
	}
	
	#pageHome #navMain li#navMainHome a,
	#navMain li#navMainHome a:hover {
		background: #ce8c3e url('../img/nav-home.png') no-repeat center 20px;	
	}
	#pageMachines #navMain li#navMainMachines a,
	#navMain li#navMainMachines a:hover {
		background: #ce8c3e url('../img/nav-machines.png') no-repeat center 20px;	
	}
	#pageProducts #navMain li#navMainProducts a,
	#navMain li#navMainProducts a:hover {
		background: #ce8c3e url('../img/nav-products.png') no-repeat center 20px;	
	}
	#pageContact #navMain li#navMainContact a,
	#navMain li#navMainContact a:hover {
		background: #ce8c3e url('../img/nav-contact.png') no-repeat center 20px;	
	}

/* =banner
******************/

#bannerMain {
	height: 233px;
	position: relative;
}
	#pageHome #bannerMain {
		height: 236px;	
		
	}
	#bannerMain h1 {
		background: url('../img/banner-title.png') repeat left top;
		bottom: 0;
		color: #d0d0d0;
		font-size: 30px;
		font-weight: 300;
		letter-spacing: 3px;
		margin: 0;
		padding: 10px 20px;
		position: absolute;
		text-transform: uppercase;
		width: 960px;
	}
	#pageHome #bannerMain h1 {
		background: none;
		padding: 50px 0 0;
		position: relative;
		width: 100%;
	}
	#pageHome #bannerMain {
		background: url('../img/banner-main.jpg') no-repeat left top;
	}
	#pageMachines #bannerMain {
		background: url('../img/banner-machines.jpg') no-repeat left top;
	}
	#pageProducts #bannerMain {
		background: url('../img/banner-products.jpg') no-repeat left top;
	}
	#pageContact #bannerMain {
		background: url('../img/banner-contact.jpg') no-repeat left top;
	}
	#page404 #bannerMain {
		background: url('../img/banner-contact.jpg') no-repeat left top;
	}
	
	#pageHome #bannerMain span {
		background: url('../img/bg-white-px.png') repeat left top;
		color: #acacac;
		display: block;
		font-size: 35px;
		font-weight: 300;
		letter-spacing: 3px;
		line-height: 1.4em;
		margin: 0 0 8px;
		text-transform: uppercase;
		text-indent: 100px;
	}
	#pageHome #bannerMain span:nth-child(2) {
		color: #80a7ea;
		text-indent: 175px;
	}

#contentMain {
	background: #f7f7f7 url('../img/bg2.jpg') repeat center center;
	/*display: table;*/
}

#primary {
	display: table-cell;
	padding: 15px 20px;
	width: 620px;
	vertical-align: top;
}

#sidebar {
	background: #e6e6e6;
	display: table-cell;
	padding: 0px;
	width: 340px;
	vertical-align: top;
}

#pageHome section {
}

#pageHome hgroup {
	background: #eee url('../img/bg-black-px.png') repeat-x left center;
	display: table;
	margin: 0 0 40px;
	padding: 15px 325px;
	width: 350px;
}
#pageHome hgroup .inner {
	background: #eee;
	display: table-cell;
	height: 60px;
	text-align: center;
	vertical-align: middle;
}
#pageHome h2 {
	background: none;
	line-height: 1.2em;
	margin: 0;
	padding: 0 30px;
}
#pageHome h3 {
	margin: 0;
	padding: 0 30px;
}

#company {
	background: url('../img/company-bg2.gif') repeat left top;
	color: #f7f7f7;
}
	#company p {
		background: url('../img/company-bg.gif') repeat-x left top;;
		font-size: 19px;
		letter-spacing: 3px;
		line-height: 3em;
		margin: 0;
		padding: 70px 100px 70px;
		text-align: center;
	}
#products {
	
}
	#products ul {
		list-style: none;
		margin: 0 20px;
		padding: 0;
	}
	#products li {
		background: #f2c265;
		float: left;
		height: 280px;
		padding: none;
		margin: 0px 16px 40px;
		padding: 0 0 5px;
		width: 208px;	
	}
	#products h4 {
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		height: 22px;
		margin: 15px 10px 0px;
		overflow: hidden;
		text-align: center;
		text-transform: uppercase;
	}
	#products h4 a {
		color: #fff;
	}
	#products h4 a:hover {
		color: #444;
		text-decoration: none;
	}
	#products p {
		color: #444;
		font-size: 16px;
		margin: 0px 10px 15px;
		text-align: center;
	}
#services {
	
}
	#pageHome #services ul {
		height: 281px;
		margin: 0;
		padding: 0 25px;
	}
	#pageHome #services li {
		background: none;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		display: table;
		float: left;
		font-size: 16px;
		letter-spacing: 2px;
		height: 100px;
		margin: 0;
		padding: 10px 20px;
		text-align: center;
		width: 276px;
		vertical-align: middle;
	}
	#pageHome #services li b {
		display: table-cell;
		font-weight: 200;
		text-align: center;
		vertical-align: middle;
	}
	#services li:nth-child(1) {
		
	}
	#services li:nth-child(2) {
		
	}
	#pageHome #services li:nth-child(3) {
		border-right: none;
	}
	#pageHome #services li:nth-child(4) {
		border-bottom: none;
		padding: 10px 70px;
		width: 334px
	}
	#pageHome #services li:nth-child(5) {
		border-right: none;
		border-bottom: none;
		padding: 10px 70px;
		width: 335px
	}
	
#industry {
	
}
	#industry ul {
		list-style: none;
		margin: 40px 0;
		padding: 0;
	}
	#industry li {
		display: table;
		float: left;
		font-size: 16px;
		letter-spacing: 2px;
		margin: 0 0;
		padding: 150px 20px 50px;
		text-align: center;
		width: 210px;
	}
	#industry li b {
		display: table-cell;
		font-weight: 200;
		height: 50px;
		text-align: center;
		vertical-align: middle;
	}
	#industry li:nth-child(1) {
		background: url('../img/industry-semiconductors.png') no-repeat center top;
	}
	#industry li:nth-child(2) {
		background: url('../img/industry-aerospace.png') no-repeat center top;
	}
	#industry li:nth-child(3) {
		background: url('../img/industry-offshore-oil-gas.png') no-repeat center top;
	}
	#industry li:nth-child(4) {
		background: url('../img/industry-military.png') no-repeat center top;
	}
	
/* =sidebar
**********/
#sidebar {
	font-size: 14px;
}

#sidebar h3 {
	background: #cfcfcf url('../img/bg-black-px.png') repeat-x left 15px;
	color: #444;
	padding: 30px 20px 10px;
	margin: 0;
}
#sidebar h4 {
	line-height: 1.4em;
	margin: 0 0 0px;
}
#sidebar h4 a {
	color: #a34810;	
}
#sidebar h4 a:hover {
	color: #444;	
}
#sidebar p {
	line-height: 1.4em;
	margin: 0 0 0px;
}
#sidebar .highlights figure {
	background: #f7f7f7;
	float: left;
	margin: 0 0;
	padding: 5px;
	width: 86px;	
}
#sidebar .highlights .content {
	float: right;
	width: 190px
}
#sidebar .highlights ul{
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
#sidebar .highlights li {
	*zoom: 1;
	
	background: none;
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding: 15px 20px 15px;
}
#sidebar .highlights li:before,
#sidebar .highlights li:after {
    content: " ";
    display: table;
}
#sidebar .highlights li:after {
    clear: both;
}


#sidebar .highlights li:nth-last-child(1) {
	border: none;	
}

/* =isoBox
***********/
.isotope {
	margin: -5px;
}
.isoBox {
	background: #fefefe;
	cursor: pointer;
	margin: 5px;
	padding: 6px 6px 11px;
}
div.isoBox:hover {
	background: #f2c265;
}
.isoBox figure {
	margin: 0 0 10px;	
}
.isoBox h2 {
	background: none;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	text-align: center;
}
.isoBox p {
	margin: 0;
	text-align: center;
}

.isoBox185 {
	width: 185px;
}
.isoBox392 {
	width: 392px;	
}


/* =colorbox
***********/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../img/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}