/*
========== FONTS ==========
*/
@font-face {
	font-family: 'NokiaPure';
	src: url('fonts/pure/nokiapuretext_rg-webfont.eot');
	src: url('fonts/NokiaPureText_Rg.ttf');
}
@font-face {
	font-family: 'NokiaHeadline';
	src: url('fonts/headline/nokiapureheadline_rg-webfont.eot');
	src: url('fonts/NokiaPureHeadline_Rg.ttf');
}
/*
========== MAIN LAYOUT STYLING ==========
*/

body {
	background: #262626;
}
.wrapper,
.wrapper-library,
.wrapper-about,
.wrapper-bridge {
	margin: 125px auto;
}
.wrapper {
	width: 70%;
}
.wrapper-library {
	width: 85%;
}
.wrapper-bridge {
	width: 100%;
}
.wrapper-tiles {
	margin: 125px auto 110px auto;
	width: 960px;
}
.wrapper-about {
	width: 55%;
}
.wrapper-stories {
	width: 700px;
	background: #fff;
	padding: 10px;
	margin: 75px auto;
}
.wrapper-inventory {
	margin: 80px auto;
	width: 90%;
}
.wrapper-sql {
	margin: 80px auto;
	bottom: 72px;
	width: 90%;
}
.gateway-canvas {
	background: url('img/cartographer.png');
}
.lite-canvas {
	background: #e9e9e9;
}
.overlay {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	display: block;
	z-index: 0;
}
video#bgvideo {
	position: fixed;
	z-index: -1;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	/*background: rgb(16,128,221);*/
	background: linear-gradient(to right, #000, #003366, #124191, #1080dd);
	line-height: 50px;
	text-align: center;
	z-index: 100;
}
.header .icon {
	float: left;
	margin-right: -50px;
}
.header .icon_gateway {
	float: left;
	margin-left: 60px;
	margin-right: -100px;
}
.header .icon:hover,
.header .icon_gateway {
	opacity: .8;
}
.navbar-hub {
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	line-height: 25px;
	background: #262626;
	border-top: 1px solid #999;
	border-bottom: 1px solid #000;
	text-align: center;
	z-index: 100;
}
.navbar-intranet {
	display: none;
	position: fixed;
	top: 75px;
	left: 0;
	right: 0;
	line-height: 25px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: linear-gradient(to right, #262626, #222, #262626);
	z-index: 100;
}
.stripe {
	position: fixed;
	right: 0;
	left: 0;
	padding: 1px 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, rgb(162,193,57), rgb(0,171,169), rgb(27,161,226), rgb(127,64,152), rgb(240,150,9), rgb(16,128,221), rgb(18, 65, 145), #003366);
}
.footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 70px;
	text-align: center;
	background: #222;
}
.footerDim {
	opacity: .8;
}
.footer:hover {
	opacity: 1;
}
.col {
	float: left;
}
.col-inputs {
	float: right;
}
.col-one,
.col-two {
	color: #ddd;
}
.col-one {
	text-align: left;
	width: 75%;
	margin-left: 2.5%;
}
.col-two {
	text-align: right;
	width: 20%;
	margin-right: 2.5%;
}
.legend {
	position: relative;
	display: flex;
	box-shadow: 0 0 8px 0 #000;
	border-radius: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.legendListHeadings {
	padding: 0;
	margin: 0;
	color: #d3d3d3;
	font-weight: bold;
}
.bridge:hover {
	opacity: .5;
}
.request h4 {
	border-top: 1px solid #888;
	margin-top: 25px;
	padding-top: 5px;
	color: #888;
	font-weight: bold;
	font-size: .9em;
}

/*
========== TEXT & LINK STYLING ==========
*/

.header h1 {
	margin: 0;
	font-size: 2.5em;
	color: #fff;
}
h2 {
	color: #1080dd;
	font-size: 1.75em;
	font-family: "Arial";
	margin-top: 15px;
	margin-bottom: 8px;
}
h4 {
	color: #ffff90;
	font-family: "NokiaPure";
	margin-bottom: 0;
	margin-top: 5px;
}
.about {
	color: #ababab;
	line-height: 1.25em;
	font-family: "NokiaPure";
	margin: 0;
}
.about a {
	text-decoration: none;
	color: #fff;
}
.about a:hover {
	color: #1080dd
}
.bpHeading {
	display: inline;
}
.bpHeading ~ h4 {
	margin-top: 3px;
}
.innovSection {
	margin-top: 25px;
}
.col-two h3 {
	font-weight: normal;
	margin-top: 25px;
	font-family: "Arial";
}
.gateText {
	font-family: Calibri, sans-serif;
	color: white;
	padding: 15px;
	padding-top: 30px;
	line-height: 25px;
	font-size: 1.4em;
}
.gateways a {
	text-decoration: none;
}
.gateways a:hover {
	font-weight: bold;
}
.raise_circle_text { /* Increases padding within the Gateway circles to help center the text */
	padding-top: 20px;
}
.spotlight {
	color: #000;
}
/* Used to color the Hub Links, when the Intranet links are shown. */
.dimListText {
	color: #515151;
}
.dimOpacity {
	opacity: .3;
}
.fpm_message {
	width: 350px;
	background: #f02309;
	padding: 0 10px;
	border-radius: 5px;
	color: #fff;
	font-size: 1.125em;
}

/*
========== LIST STYLING ==========
*/

.navbar-hub-list,
.navbar-intranet-list,
.legend-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.navbar-hub-list li,
.navbar-intranet-list li,
.footer-feedback-list li {
	display: inline;
	margin: 0;
	padding: 0;
	padding-right: 15px;
}
.navbar-intranet-list li {
	font-size: .8em;
}
.navbar-hub-list a:last-child {
	color: #1080dd;
}
.navbar-hub-list a:last-child:hover {
	color: #ffff90;
}
.libraryItem {
	list-style-type: none;
	display: table-row;
}
.libraryItem li {
	padding: 5px 25px;
	display: table-cell;
}
.legend-list {
	list-style-type: none;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 0;
}
.legend-list li {
	color: #888;
	font-weight: bold;
	margin-bottom: 3px;
	padding: 4px 4px 2px 4px;
	border: 1px solid #888;
	border-radius: 3px;
}
.legend-list li:hover {
	cursor: pointer;
	border: 1px solid #fff;
	background: #262626;
	color: #fff;
}
.legend-list li:active {
	background: #161616;
}
.legend-list li img {
	padding-right: 5px;
}
.navbar-hub-list a,
.navbar-intranet-list a,
.footer-feedback-list a {
	text-decoration: none;
	color: #999;
}
.navbar-hub-list a:hover,
.navbar-intranet-list a:hover {
	text-decoration: none;
	color: #ffff90;
}
.navbar-hub-list a:active,
.navbar-intranet-list a:active {
	text-decoration: none;
	color: #fff;
}
.footer-feedback-list a:hover {
	color: #1080dd;
}
.arrow-down:after {
	content: url('img/down-arrow-hover.png');
	padding-left: 5px;
}
.arrow-up:after {
	content: url('img/up-arrow-hover.png');
	padding-left: 5px;
}
.footer-feedback-list {
	list-style-type: none;
	padding: 0;
	margin-top: 25px;
}
.footer-feedback-list img {
	margin-right: 10px;
	margin-bottom: -5px;
}
.siteIndexList,
.siteIndexList ul {
	list-style-type: none;
}
.siteIndexList > li {
	color: #1080dd;
	font-weight: bold;
}
.subListSiteIndex > li {
	padding: 5px;
}
.subListSiteIndex li:before {
	padding-right: 5px;
	content: url('../images/arrow-d-r.png');
}
/*
========== MATRIX STYLING ==========
*/
.hideTheMatrix {
	color: #888;
	font-weight: bold;
	display: inline-block;
	position: absolute;
	right: 0;
	background: #363636;
	border-radius: 5px;
	padding: 3px;
	box-shadow: 0 3px 3px #000000;
}
.hideTheMatrix:hover {
	color: #ffffff;
	cursor: pointer;
}
.searchTiles {
	position: absolute;
	right: 125px;
	margin-top: 17px;
}
.searchTileMessage {
	color: #008040;
	font-weight: bold;
	margin-top: 5px;
}
.pending {
	opacity: .6;
}
/*
========== GATEWAY STYLING ==========
*/
.circle {
	position: absolute;
	height: 475px;
	width: 475px;
	margin-left: 65px;
	margin-top: 60px;
	border: 25px solid #ccc;
	border-radius: 260px;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	z-index: 0;
}
.gateways {
	width: 650px;
	height: 650px;
	position: relative;
	margin: 0 auto;
}
.gate1,
.gate2,
.gate3,
.gate4,
.gate5 {
	height: 160px;
	width: 160px;
	border-radius: 80px;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	background: #1080dd;
	position: absolute;
	z-index: 1;
	text-align: center;
}
.gate2,
.gate3,
.gate4 {
	float: right;
	margin-top: 245px;
}
.gate1 {
	margin-left: 245px;
}
.gate3 {
	margin-left: 245px;
	background: #F09609;
}
.gate4 {
	margin-left: 490px;
}
.gate5 {
	margin-top: 490px;
	margin-left: 245px;
}
.gate1:hover,
.gate2:hover,
.gate4:hover,
.gate5:hover {
	background: #0e73c6;
}
.gate3:hover {
	background: #d88708;
}

/*
========== TILE STYLING ==========
*/
/* purple: background: rgb(127,64,152);  #7F4098
 * blue: background: rgb(16,128,221); #1080dd
 * green: background: rgb(0,171,169); #00ABA9
 * lime: background: rgb(162,193,57); #A2C139
 * cyan: background: rgb(27,161,226); #1BA1E2
 * orange: background: rgb(240,150,9); #F09609
 * nokiablue: background: rgb(18, 65, 145); #124191
 * red: background: rgb(240,35,9); #F02309
 * forestgreen: background: rgb(0,128,64); #008040
 * olive: background: rgb(60,150,124); #3C967C
 * darkpurple: background: rgb(63,32,76); #3F204C
 */
 /* Coloring the individual tiles dynamically
.tile:nth-child(6n+1) {
	background: #124191;
}
.tile:nth-child(6n+2) {
	background: #1080dd;
}
.tile:nth-child(6n+3) {
	background: #00aba9;
}
.tile:nth-child(6n+4) {
	background: #f09609;
}
.tile:nth-child(6n+5) {
	background: #3c967c;
}
.tile:nth-child(6n+6) {
	background: #7f4098;
}
*/

 /* TODO: All Project tiles the same, all Tool tiles the same; */

#projectsSection .tile {
	background: #124191;
}
#toolsSection .tile {
	background: #00aba9;
}
#codeSection .tile {
	background: #f09609;
}
#supportSection .tile {
	background: #f02309;
}
#bpSection .tile {
	background: #1080dd;
}
#innovSection .tile {
	background: #3c967c;
}
.tile {
	width: 150px;
	height: 100px;
	margin-top: 10px;
	margin-right: 10px;
	text-align: center;
	line-height: 100px;
	color: #fff;
	font-family: "NokiaHeadline", Calibri;
	font-size: 1.2em;
	float: left;
	text-decoration: none;
	position: relative;
}
.tile:hover {
	opacity: .9;
	font-size: 1.3em;
}
.wraptext {
	line-height: 25px;
	margin-top: 25px;
	padding-right: 10px;
	padding-left: 10px;
}
.shrinkText {
	font-size: .9em;
}
.shrinkText:hover {
	font-size: 1em;
}

/*
========== BUTTON STYLING ==========
*/
button,
.searchTiles label {
	padding: 5px;
	outline: none;
	border: none;
	border-radius: 5px;
	background: #124191;
	color: #fff;
	margin-left: 10px;
}

.searchTiles label {
	padding: 4px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

button:hover {
	background: #1080dd;
   cursor: pointer;
}
.wrapper-bridge input[type=text] {
   padding: 3px;
   margin-left: 15px;
   margin-right: -10px;
}

/*
========== TOOL TIP STYLING ==========
*/

.tooltip {
	display: none;
	position: absolute;
	border: 1px solid #999;
	background-color: #124191;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-family: calibri;
	font-size: 12px Arial;
}

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 1px 8px;
  font-family: calibri;
  color: #fff;
  font-size: .4em;
  position: absolute;
  left: -250px;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  border: 2px solid #333;
  background: #1080DD;
}

/*
========== BLINK STYLING FOR NEW ITEMS ==========
HTML needs the following tag and class <span class="blink">+</span>
*/


.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
    color: lightgreen;
    font-weight: bold;
    font-size: 1.25em;
    padding-top: 0;
    margin-top: 0;
}

@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

/*
========== FEEDBACK TABLE & FORM STYLING ==========
*/
.formHolder {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.formHolder p {
	color: #fff;
	font-size: 1.25em;
	margin-bottom: 15px;
}
#feedbackTable {
	background: #eee;
	border-radius: 5px;
	margin: 0 auto;
	padding: 25px;
}
#feedbackTable td {
	padding: 15px;
	text-align: left;
}
#feedbackTable input[type=text],
#feedbackTable select {
	padding: 5px;
	width: 300px;
}
#feedbackTable label {
	padding-right: 25px;
	color: #363636;
	font-size: 1.125em;
	vertical-align: top;
}
#feedbackTable input[type=submit] {
	width: 100%;
	padding: 10px;
	background: #124191;
	color: #fff;
	font-weight: bold;
	letter-spacing: .1em;
	border: none;
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#feedbackTable input[type=submit]:hover {
	color: #ffff90;
	background: #1080dd;
}
.thankyou {
	color: #fff;
	font-size: 1.5em;
	margin-left: 100px;
}
.thankyou a {
	text-decoration: none;
	color: #888;
}
.thankyou a:hover {
	color: #1080dd;
}
.bpSection label {
	color: #888;
	margin-right: 5px;
	margin-left: 10px;
}
.bpSection input[type=text] {
	margin-right: -10px;
}
/*
========== FLOAT CLEARFIX ==========
*/

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

/*
========== GoJS Site Index styling ==========
*/
#myOverview {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: aliceblue;
	z-index: 300; /* make sure its in front */
	border: solid 1px blue;
	width:200px;
	height:100px
}

#myDiagram {
	border-radius: 10px;
	background-color: #d3d3d3;
	border: solid 1px black;
	width: 100%;
	height: 700px
}

/*
========== Home Page Wallpaper Styling ==========
*/
.square {
	position: absolute;
	top: 80%;
	left: 115%;
	z-index: 10000;
}
.dos {
	top: 30%;
	left: -40%;
}
.square .detail {
	background: linear-gradient(#888, #000);
	border-radius: 5px;
	color: white;
	height: auto;
	opacity: 0;
	padding: 10px;
	position: absolute;
	transition: opacity 1s;
	visibility: hidden;
	width: 175px;
}
.square .detail a {
	color: #ffff90;
	text-decoration: none;
}
.square .detail a:hover {
	color: #1080dd;
	font-size: initial;
}
.square:hover {
	cursor: default;
}
.square:hover .detail {
	visibility: visible;
	opacity: 1;
}
.square:hover img {
	display: none;
}
.wallpaper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 100%;
	/*max-height: 100%;*/
	z-index: -1;
}
.caption {
	position: absolute;
	left: 5px;
	top: 85px;
	color: #fff;
	font-weight: 700;
	font-size: .7em;
	font-style: italic;
}
.caption a {
	color: #fff;
	text-decoration: none;
}
.caption a:hover {
	color: #e9e9e9;
}
.zoom {
	position: absolute;
	top: 110px;
	left: 5px;
	z-index: 6;
}
.volume {
	position: absolute;
	top: 110px;
	left: 30px;
	z-index: 6;
}
.zoom:hover,
.volume:hover {
	opacity: .6;
	cursor: pointer;
}
.view {
	z-index: 5;
	cursor: crosshair;
	/*position: relative;*/
}

/*
========== MEDIA QUERIES ==========
*/

/* SMALL SCREEN STYLING TO RESTRICT LAYOUT TO 800px */
@media screen and (max-width: 800px) {
	.header,
	.navbar-hub,
	.intranet-hub,
	.footer {
		width: 800px;
	}
}

/* GATEWAY STYLING FOR LAPTOP WITH SMALLER HEIGHT */
@media screen and (max-height: 825px) {
	.gateways {
		width: 450px;
		height: 450px;
	}
	.circle {
		height: 300px;
		width: 300px;
		margin-left: 65px;
		margin-top: 60px;
		border: 15px solid #ccc;
		border-radius: 200px;
	}
	.gate1,
	.gate2,
	.gate3,
	.gate4,
	.gate5 {
		height: 115px;
		width: 115px;
		border-radius: 57.5px;
	}
	.gate2,
	.gate3,
	.gate4 {
		margin-top: 165px;
	}
	.gate1 {
		margin-left: 175px;
	}
	.gate2 {
		margin-left: 20px;
	}
	.gate3 {
		margin-left: 175px;
	}
	.gate4 {
		margin-left: 330px;
	}
	.gate5 {
		margin-top: 330px;
		margin-left: 175px;
	}
	.gateText {
		padding-top: 25px;
		line-height: 15px;
		font-size: 1em;
	}
	.raise_circle_text {
		padding-top: 15px;
	}
}
/* TILE STYLING */
@media screen and (max-width: 1350px), screen and (max-height: 925px) {
	.wrapper-tiles {
		width: 850px;
	}
	.tile {
		height: 75px;
		width: 125px;
		line-height: 75px;
		font-size: .9em;
	}
	.tile:hover {
		font-size: .9em;
		color: #000;
	}
	.tileTag {
		bottom: -25px;
	}
	.wraptext {
		line-height: 20px;
		margin-top: 20px;
	}
}
/* FULL SCREEN WIDTH FOR INVENTORY */
@media screen and (max-width: 1300px) {
	.wrapper-inventory {
		width: 100%;
	}
}
/* Decrease font size of Navigation links in smaller screens & size of legend items */
@media screen and (max-width: 960px) {
	.navbar-hub-list li,
	.navbar-intranet-list li {
		font-size: .8em;
	}
}

/* Matrix Queries */
@media screen and (max-width: 1350px) {
	.legend ul li {
		font-size: .7em;
		padding: 2px;
	}
	.legend img {
		height: 10px;
	}
	.legend {
		width: 800px;
	}
	.hideTheMatrix {
		margin-right: 50px;
	}
	.searchTiles {
		top: 120px;
		margin-right: 25px;
	}
}