@charset "utf-8";
/* 
oit_css.css 
Version: 1.02
Author: Rick Herrmann
Last Edited:  07/01/2015
*/

/**********  GARAMOND Font Faces **********/
@font-face {
    font-family: 'eb_garamond';
	src: url('fonts/EBGaramond-webfont.eot');
    src: url('fonts/EBGaramond-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'eb_garamondSC';
    src: url('fonts/EBGaramondSC-webfont.eot');
    src: url('fonts/EBGaramondSC-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gillsansMT';
    src: url('fonts/GillSansMT-webfont.eot');
    src: url('fonts/GillSansMT-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

* {
	padding: 0;
	margin: 0;	
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
	height:100%;
}


body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #002C77;
	overflow-x:hidden;
	margin: 0;
	padding: 0;
	color: #000;
	height:100%;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
}

.section_header { font-size:16px; font-weight:bold; margin:4px 0px; }

a img { border: none; }

/********* OIT TIME TRACKER *********/
.oit-time-tracker {	
	float:left;
	margin-top:-9px;
	margin-bottom:-10px;
	margin-left:10px;
}

.oit-time-tracker:hover {
	opacity:.6;	
}

/********* LINKS *********/
a:link {
	color:#414958;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	position: relative;
	width: 90%;
	height: 100%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 940px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #fff;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */	
	overflow:hidden;
}

/********* CONTENT *********/
.content {
	padding: 0 0 174px 0; /* 174px padding to pull content bottom above footer*/
	width: 84%;
	float: left;
	height:100%;
	background:#FFF;
	border-left:2px solid #FFF;
}

.content .page { /* hide all pages */
	display:none;	
	height:100%;
	padding: 0 60px 40px 60px;
	margin-bottom:40px;
	background:#FFF;
	position:relative;
	overflow:auto;
	font-size:14px;
}

/********* HEADER *********/
header {
	height:135px;	
	background: #6F7D94;	
	background-image:url(../images/header_bg.png);
	border-bottom:2px solid #000;
}

header h1 { margin:0px; padding:0px;}

header span {
	font: 42px 'gillsansMT', Arial, sans-serif;
	color:#FFF;
	float:left;
	margin:40px 20px 20px 20px;
}

header img {
	background:#FFF;	
	float:right;
}

/********* FOOTER *********/
footer {
	position:fixed; bottom:0px; left:0px;
	min-width: 940px;	
	width:100%;
	padding: 10px 0;
	background: #FFF;
	border-top: 2px solid #000;
	text-align:center;
	z-index:10;
	/*clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

footer .copyright {
	font-size:12px;
}

footer .copyright a {
	text-decoration:underline;
	color:#0000FF;	
}

/********* NAV *********/
nav {
	position:relative;
	bottom:0px;
	float: left;
	width: 16%;
	height:100%;
	margin-top:-1px;	
	background: url(../images/nav_bg2.png) repeat-x #fff;
}

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */

ul.links {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #668; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.links li {
	border-bottom: 1px solid #ccd; /* this creates the button separation */	
}

.navIcon {
	float:left;
	width:20px;
	height:20px;
	margin-right:8px;
	margin-top:-2px;
}

ul.links a, ul.links a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 9px 5px 5px 10px;
	height:33px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background:url(../images/nav_selected.png) right repeat-y;/*#7185a6*/
	color: #012C9E;
	font: .9em 'gillsansMT', Arial, sans-serif;
}

.navOver {
	background:url(../images/nav_over.png) right repeat-y #002C77 !important;
	color: #FFF !important; 
}

.navSelected {
	background:url(../images/nav_selected.png) right repeat-y #002C77 !important;
	color: #FFF !important;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


/*************************************************************/
/********************  CONTENT STYLING  **********************/
/*************************************************************/

/************  GRID  ************/
.grid {
	
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
}

.col-1-2 {
	width:50%;
}

.col-1-3 {
	width:28%;
}

.col-2-3 {
	width:72%;
}

.page_heading {
	font-size:1.2em;
	color: #333;
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:2px solid #ECECEC;
}

.page_heading h2 {
	margin-bottom:10px;
	color:#09147B;
}

/************  HOME  ************/

#home {
	font-style:normal;
	color: #777;
}

#home p {
	font-size:14px;
	display:block;
	margin-left:65px;	
}	
	
#home h3 {
	text-transform: uppercase;
	color: #105694;
	margin-left:65px;
	margin-top:-80px;
}	

#home a .link {
	color:#00F;
	border-bottom:1px solid #00f;
}
		
/************  ABOUT  ************/

#about {
	height:100%;
}

#about .people {
	background-color:#FFF;
	margin-bottom:40px;
	height:110px;
}

#about .people img {
	float:left;
}

#about .people p {
	font-size:14px;
	line-height:24px;
	margin:0 0 0 100px;
}

#about .people h4 {
	padding:0px;
	color: #105694;
}

#about .people .title {
	font-weight:bold;
}

#about .people .address {
	font-size:11px;
}

#about .people .mail_icon {
	position:relative;
	top:5px;
	margin-right:4px;
	width:18px;
	height:18px;
}

#about .people .phone_icon {
	position:relative;
	top:4px;
	margin-right:4px;
	width:18px;
	height:18px;
}

#about .people .pic {
	border: 1px solid #105694;
	padding: 2px;
	margin-top: 7px;
	margin-right: 5px;
	height: 90px;
	width: 80px;
}

/************  SERVICES PAGE ************/

#services img {
	float:right;
}

/************  PORTFOLIO PAGE ************/
#portfolio {
}

#portfolio .project {	
	min-height:150px;
 	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:1px solid #EEE;	
}

#portfolio .project:last-of-type {	
	border-bottom:0px;	
}

#portfolio .project:after {	
 	clear:both;
}

#portfolio .project p {
	margin-bottom:10px;
}

#portfolio .project a {
	/*float:right;*/
	font-size:14px;
	text-decoration:underline;
	color:#0000FF;
}

#portfolio .project img {
	float:left;
	width:173px;
	height:92px;
	margin-right:10px;
	padding:2px;
	border:1px solid #999;
}

#portfolio .project img:hover {
	opacity:.6;
}

/************  COMMUNICATION PAGE ************/

#communication .section p {
	margin-bottom:20px;
}

/************  CONTACT PAGE ************/

#contactus .section {
	font-size:14px;
	margin-bottom:20px;	
}

/************  CONTACT FORM ************/
#contactform_reply {
	padding-top:10px;
	display:none;
}

.form {
	width:500px;
	height:430px; 
	padding:10px 10px 10px 20px;
	margin:6px 0 20px 0; /*6px auto 20px auto;*/
	border:1px solid #EDEDED;	
}

.form_row {
	width:100%;
	float:left;
	clear:both;
	padding:7px 0 7px 0;
}

.req {
	width:425px;
	float:left;
	clear:both;
	margin:-28px 0px 0px 10px;
	color:#F00;
	font-size:11px;
}

label {
	width:30%; /*was 100px*/
	float:left;
	padding:3px 15px 0 0;
	color:#105694;
	text-align:right;
	font-weight:bold;
}

.error {
	display:none;
	clear:both;
	width:400px;
	margin-top:4px;
	padding-top:0px;
	margin-left:30%;
	color:red;
	text-align:left;
	font-weight:normal;
	font-size:12px;
}

.g-recaptcha {
	margin-left:30%;
	width:300px;
}

.main_input {	
	width:300px;
	height:22px;
	padding:4px;
	float:left;
}

.input_regular {
	background-color:#E3E6F9;
	border:1px solid #C3D4E2;
}

.input_error {
	background-color:#F9E3E3;
	border:1px solid #dcc9c9;
}

input.main_input:hover, textarea.main_textarea:hover {
	background-color:#F9F8E3;
}

input.main_input:focus, textarea.main_textarea:focus {
	background-color:#FCFCF3;
}

textarea.main_textarea {
	width:300px;
	height:120px;
	padding:4px;
	margin-bottom:3px;
	float:left;
}

.buttons {
	margin:76px 26px 0 5px;
}

input.reset {
	margin-right:10px;
}

input.submit, input.reset{
	background-color:#105694;
	color:#FFFFFF;
	text-align:center;
	float:right;
	padding:3px 10px 2px 10px;	
	border:1px #105694 solid;
	cursor:pointer;
}

input.submit:hover, input.reset:hover, sidemenu a:hover{
	text-decoration:none;
	color: #fff;
	background-color:#82B3DD;
}

/************  QUOTE and AUTHOR formatting ************/

.quote {
	min-height:40px;
	margin:0 -60px 20px -60px;
	padding:10px 20px;
	color: #105694;
	font-family:Georgia;
	font-size:1.1em;
	font-style:italic;
	font-variant:normal;
	font-weight:normal;
	line-height:27px;
	text-align:left;
	background-color:#F2F2F3;	
	border-bottom:#E0E0E0 1px solid;
	border-top:#FFF 1px solid;
}

.quote .author {
	color:#105694;
	font-size:12px;
}

.quote .author:before {
	display:inline;
	content: " - ";
}