/*
	Styling for Master page layout

	Media queries are aligned at the bottom

	Please use tips from http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
	Use shorthand when possible
	Please use http://csslint.net/ and other similar tools to get feedback for your css writing

	Some of the naming standards can be confusing. It's because they are inherited from Sharepoint and Bootstrap.
	There are lots of overrides for Sharepoint css and Bootstrap css (we fight against Sharepoint and Bootstrap styling so to speak).
*/

/* COMMON */
body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}

.clr {
	clear: both;
}

.row {
	margin-left: 0;
	margin-right: 0;
}

h1 {
	font-size: 32px;
	font-weight: bold;
	line-height: 40px;
	margin-top: 0;
}

h2 {
	font-size: 15px;
}

h3 {
	font-size: 13px;
	font-weight: bold;
}

#suiteBarButtons *, #RibbonContainer-TabRowRight *, .ms-cui-groupContainer * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* Sharepoint */
#s4-workspace {
	-webkit-overflow-scrolling: touch;
	/* Override SP scrolling and remove scrollbars */
	/*overflow: initial;*/
}

/* Masterpage */
.bodywrapper {
	background: url('/_layouts/15/images/NNIT.SharePoint.Branding/main_gradient.png') left top repeat-x;
}

.ms-srch-sb {
	float: right;
	margin-right: 10px;
}

.ms-core-navigation, .ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
	font-family: Verdana, Geneva, sans-serif;
}

#pageStatusBar {
	margin-left: 15px;
}

#main h1 {
	margin-bottom: 25px;
}													
/* HEADER */

#Header ul {
	margin: 0;
	padding: 0;
}

	#Header ul li {
		list-style-type: none;
		display: block;
		float: left;
	}

		#Header ul li a {
			display: block;
			padding: 0 15px;
		}

#Header .searchbox {
	margin-top: 30px;
}

#Header .languagenav {
	margin-top: 30px;
}

	#Header .languagenav ul li a {
		padding: 0 10px;
		color: #a6a5a5;
	}

		#Header .languagenav ul li a:hover {
			color: #585858;
		}

	#Header .languagenav a.level1.selected.static {
		font-weight: bold;
		color: #585858;
	}

#mainNavigationContent {
	padding: 0;
}

#globalnav {
	margin-top: 22px;
	font-weight: bold;
}

	#globalnav ul li {
		border-left: 1px solid #585858;
	}

		#globalnav ul li a {
			color: #7d7d7d;
		}

			#globalnav ul li a:hover {
				color: #8c0000;
			}

	#globalnav a.level1.selected.static {
		color: #8c0000;
	}


/* SP Left nav */
#leftNavMetadata {
	/* Hide generated SP left navigation */
	display: none;
}

/* SP Main nav */
#mainNavMetadata {
	/* Hide generated SP main navigation */
	display: none;
}

/* Main nav */
#dynamicMainNavigation {
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.navbar-default {
	background-color: transparent;
	border: 0 solid transparent;
}

.mainnav .navbar {
	margin-bottom: 5px;
}

.mainnav .navbar-nav {
	width: 100%;
}

	.mainnav .navbar-nav .dropdown-menu {
		text-align: left;
	}


.mmright .lv2-title {
	color: #00736e;
}

.mmleft .lv2-title-nochild {
	color: #373f1e;
}

.mmright .lv2-title-nochild {
	color: #373f1e;
}

.mmleft .lv3-title {
	color: #373f1e;
}

.mmright .lv3-title {
	color: #00736e;
}

.dropdown-toggle, .lv2-title, .lv2-title-nochild, .lv3-title {
	text-transform: uppercase;
	font-weight: bold;
}

/* CONTENT */
#main {
	margin-top: 5px;
}

/* LEFT NAV */
.leftnav.col-md-3 {
	padding-left: 0;
	padding-right: 0;
}

.leftnav ul, .leftnav ul li {
	margin: 0;
	padding: 0;	
}

	.leftnav ul li {
		list-style-type: none;
	}

.leftnav .leftnav-menu {
	background-color: #eae9e6;
	border: 1px solid #a6a5a5;
	border-top: 0 solid transparent;
}

	.leftnav .leftnav-menu .leftnav-link {
		display: block;
		padding-left: 25px;
	}

.leftnav-menu .lv1-link {
	border-top: 1px solid #a6a5a5;
}

	.leftnav-menu .lv1-link .a-lv1-link {
		background-color: #f6f4ef;
		padding-top: 15px;
		padding-bottom: 15px;		
	}

.leftnav-menu .activelink .item-activelink {
	background-color: #EAE9E6;
}
.leftnav-menu .activelink .a-activelink {
	background-color: #EAE9E6;
}

.leftnav-menu .withsubmenu {
	overflow: hidden;	
}

.leftnav-menu .withsubmenu .a-withsubmenu {
	background: #f6f4ef url('/_layouts/15/images/NNIT.SharePoint.Branding/leftnav_arrow.png') right bottom no-repeat;
}

.leftnav-menu .lv1-link .a-lv1-link, 
.leftnav-menu .lv1-link .a-lv1-link:link, 
.leftnav-menu .lv1-link .a-lv1-link:active, 
.leftnav-menu .lv1-link .a-lv1-link:visited {	
	color: #000;
	font-weight: bold;
	line-height: 18px;
}

	.leftnav-menu .lv1-link .a-lv1-link:hover {
		text-decoration: none;
		background-color: #ffffff;
	}

.leftnav-menu .hascurrentpage .a-hascurrentpage, 
.leftnav-menu .withsubmenu .a-withsubmenu:hover {
	background: #ffffff url('/_layouts/15/images/NNIT.SharePoint.Branding/leftnav_arrow_hover.png') right bottom no-repeat;
}

.leftnav-menu .active > a, 
.leftnav-menu .active > a:link, 
.leftnav-menu .active > a:active, 
.leftnav-menu .active > a:visited {
	background: #8c0000;
	color: #FFF;
	text-transform: uppercase;
	background-image: none;
}

.leftnav .subNav {
	padding: 10px 0;
	border-top: 1px solid #a6a5a5;
}

.subNav .lv2-link .a-lv2-link {
	line-height: 18px;
	font-weight: bold;
}

.subNav .lv2-link a, 
.subNav .lv2-link a:link, 
.subNav .lv2-link a:active, 
.subNav .lv2-link a:visited {
	color: #000;
}

	.subNav .lv2-link a:hover {
		color: #8c0000;
		text-decoration: none;
	}

.subNav .lv2-link ul li a {
	font-size: 11px;
	line-height: 18px;
}

.navbar-default .navbar-collapse {
	max-height: 100%;
}

/* FOOTER */
.footerwrapper {
	background-color: #f6f4ef;
	border-top: 1px solid #d7d7d7;
	padding-top: 8px;
	margin-top: 15px;
}

	.footerwrapper ul {
		margin: 0;
		padding: 0;
	}

		.footerwrapper ul li {
			list-style-type: none;
			display: block;
			float: left;
			line-height: 43px;
		}

			.footerwrapper ul li a {
				display: block;
				padding: 0 15px;
				color: #7d7d7d;
			}

.loc-label {
	line-height: 43px;
	font-weight: bold;
}

.footerwrapper > .container {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.otherlinks ul li {
	border-left: 1px solid #d7d7d7;
}

.navpartnerlinks {
	margin-left: auto;
	margin-right: auto;
	display: table;
	margin-top: 5px;
}

.footer-bottom {
	background-color: #000;
	color: #FFF;
}

	.footer-bottom .wrapper {
		text-align: center;
		line-height: 34px;
	}



#main .notification {
	margin-left: 0;
}

#searchInputBox {
	float: right;
}

/* Remove Search This Site */
.ms-helperText, input.ms-helperText {
	color: transparent;
}



/* Links */

a:link, a:visited, a:active {
	color: #8c0000;
	text-decoration: none;
}

a:hover {
	color: #8c0000;
	text-decoration: underline;
}

.ms-core-suiteLink-a, .ms-core-suiteLink-a:link, .ms-core-suiteLink-a:visited, .ms-core-suiteLink-a-disabled {
	color: #fff;
}

#suiteBarLeft {
	background-color: #8c0000;
}

.mainnav .redline {
	height: 1px;
	border-bottom: 3px solid #8c0000;
}

.navigation-links-icon {
	text-align: right;
	float: right;
}

.main-navigation-links-icon {
	color: white;
}

.global-navigation-links-icon {
	color: white;
}

.global-navigation-links {
	display: block;
	background-color: #23343E;
	background: -webkit-linear-gradient(#23343E, #33444E);
	background: -moz-linear-gradient(#23343E, #33444E);
	background: -o-linear-gradient(#23343E, #33444E);
	background: linear-gradient(#23343E, #33444E);
	color: white;
	text-transform: uppercase;
	overflow-x: hidden;
	padding: 10px 15px;
	margin: 1px auto 0 auto;
	font-weight: bold;
}

	.global-navigation-links:link, .global-navigation-links:visited, .global-navigation-links:active, .global-navigation-links:hover {
		color: white;
		text-decoration: none;
	}

/* Usage e.g. 
	<a href='#' class='triangle-icon triangle-icon-red'>content</a>
	<a href='#' class='triangle-icon-inset triangle-icon-off-white'>content</a>
*/
.triangle-icon {
	position: relative;
}

.triangle-icon-inset {
	position: relative;
}

.triangle-icon::before {
	/* tool http://apps.eky.hk/css-triangle-generator */
	content: '';
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 16px 16px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.triangle-icon-inset::before {
	content: '';
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 16px 16px;
	position: absolute;
	bottom: 3px;
	right: 3px;
}

.triangle-icon::after,
.triangle-icon-inset::after {
	/* space */
	content: '\00a0 \00a0 \00a0 \00a0';
}

.triangle-icon-red::before {
	border-color: transparent transparent #8c0000 transparent;
}

.triangle-icon-off-white::before {
	border-color: transparent transparent #F6F4EF transparent;
}

.triangle-icon-white::before {
	border-color: transparent transparent #fff transparent;
}

.triangle-icon-gray::before {
	border-color: transparent transparent #a6a5a5 transparent;
}

/*
	Bootstrap uses !important which is hard to override with specificity.
	Please use these over bootstrap methods.
	If these don't work for you then use pull-left and pull-right.
*/
.nnit-pull-left {
	float: left;
}

.nnit-pull-right {
	float: right;
}

/*
	Media queries are using bootstrap width sizes
	http://getbootstrap.com/css/#grid
	https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
	Mobile First Method structure

	TODO media queries should be refactored to be mobile first
	All media queries should be min-width in ascending order like this:
	@media (min-width:480px) {
		...
	}
	@media (min-width:768px){
		...
	}

	-----
	@media (max-width:992px) (Is not desktop) should be refactored to use mobile first structure or at most used it for Bootstrap or SP overrides only
	@media (max-width:480px) should not exists or at most used it for Bootstrap or SP overrides only
*/

/* Is not desktop */
@media (max-width:991px) {

	#dynamicMainNavigation .main-navigation-dropdown-toggle {
		background-color: #8c0000;
		background: -webkit-linear-gradient(#8c0000, #ac0000);
		background: -moz-linear-gradient(#8c0000, #ac0000);
		background: -o-linear-gradient(#8c0000, #ac0000);
		background: linear-gradient(#8c0000, #ac0000);
		color: white;
		text-transform: uppercase;
		overflow-x: hidden;
		margin-bottom: 1px;
		font-weight: bold;
	}

	#dynamicMainNavigation .dropdown > a:active,
	#dynamicMainNavigation .dropdown > a:visited,
	#dynamicMainNavigation .dropdown > a:link,
	#dynamicMainNavigation .dropdown > a:hover {
		/*color: white;*/
	}

	/* bootstrap override */
	.navbar-header {
		float: none;
	}

	/* bootstrap override */
	.navbar-left, .navbar-right {
		float: none !important;
	}

	.navigation-toggle {
		cursor: pointer;
	}

	/* bootstrap override */
	.navbar-toggle {
		display: block;
		border: 0;
	}
	/* bootstrap override, no background color changes on hover and focus */
	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
		background-color: inherit;
	}

	/* bootstrap override */
	.navbar-collapse {
		border-top: 1px solid transparent;
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}

	/* bootstrap override */
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}

	/* bootstrap override */
	.navbar-collapse.collapse {
		display: none !important;
	}

	/* bootstrap override */
	.navbar-nav {
		float: none !important;
		margin: 7.5px 0 0 0;
	}

		.navbar-nav > li {
			float: none;
		}

			.navbar-nav > li > a {
				padding-top: 10px;
				padding-bottom: 10px;
			}

	/* bootstrap override */
	.collapse.in {
		display: block !important;
	}

	/* LEFT NAV */
	
	.leftnav .leftnav-menu {
		/*margin-top: 10px;*/
		border: 0;
	}
		
	.leftnav-menu-item {
		display: block;
		background: #f6f4ef;
		position: relative;
	}

	.leftnav-menu-item-dropdown {
		position: absolute;
		bottom: 0;
		right: 0;
		min-height: 40px;
		-moz-min-width: 40px;
		-ms-min-width: 40px;
		-o-min-width: 40px;
		-webkit-min-width: 40px;
		min-width: 40px;
		width: 19%;
		max-width: 19%;
	}

	.leftnav .leftnav-menu .leftnav-link {
		display: inline-block;
		padding-right: 25px;
		-moz-min-width: 79%;
		-ms-min-width: 79%;
		-o-min-width: 79%;
		-webkit-min-width: 79%;
		min-width: 79%;
		width: 100%;
	}

	/* Override desktop */
	.leftnav-menu .activelink .item-activelink {
		background-color: inherit;
	}

	.leftnav-menu .withsubmenu .a-withsubmenu {
		background: #f6f4ef;
		width: 79%;
		max-width: 79%;
	}
	.leftnav-menu .withsubmenu {
		background: #f6f4ef;
	}							
	/* Expanded submenu items gets darker color */
	.leftnav-menu .withsubmenu ul .leftnav-menu-item {
		background-color: #EAE9E6;
	}		   

	/* Override desktop */
	.leftnav-menu .lv1-link .a-lv1-link:hover {				
		background: inherit;
		color: #8c0000;
	}

	/* Override desktop */
	.leftnav-menu .hascurrentpage .a-hascurrentpage, 
	.leftnav-menu .withsubmenu .a-withsubmenu:hover
	 {
		background: inherit;
		color: #8c0000;
	}


	.leftnav-menu .lv1-link
	{
		border-top: 1px solid #fff;
	}
	
	.leftnav-menu .lv2-link,
	.leftnav-menu .lv3-link {
		padding-top: 10px;
		padding-bottom: 10px;
		border-top: 1px solid #fff;
		background-color: #eae9e6;
	}
	
	.leftnav .subNav {
		border-top: 1px solid #fff;
		padding: 0;
	}


	/* MAIN NAV */

	.mmright .lv2-title {
		color: #333;
	}

	.mmright .lv2-title-nochild {
		color: #333;
	}

	.mmright .lv3-title {
		color: #333;
	}



	.mainnav .navbar-brand {
		display: block !important;
	}

	.mainnav .navbar-nav .dropdown {
		width: 100% !important;
		text-align: left !important;
	}
	
	/* Override bootstrap */
	.dropdown-menu {
		padding: 0;
	}

	.lv2-title {
		padding: 0;
		font-weight: bold;		
	}

	.lv3-items {
		font-size: 12px;		
	}

		.lv3-items a, .lv3-items a:link, .lv3-items a:active, .lv3-items a:visited {
			text-decoration: none;
		}

			.lv3-items a:hover {
				background-color: #d7d7d7;
				text-decoration: underline;
			}

		.lv3-items .lv3-title {
			font-weight: bold;
		}

		.lv2-items .lv2-description, .lv3-items .lv3-description {
			color: #000;
		}

	.lv2-items, .lv3-items {
		background-color: #f6f4ef;
		background: -webkit-linear-gradient(#f6f4ef, #e6e4df);
		background: -moz-linear-gradient(#f6f4ef, #e6e4df);
		background: -o-linear-gradient(#f6f4ef, #e6e4df);
		background: linear-gradient(#f6f4ef, #e6e4df);

		border-bottom: 1px solid white;
	}

	/* Override to match redesign for small devices */
	.mmleft {		
		padding-left: 0;
		padding-right: 0;
	}

	.mmright {
		padding-left: 0;
		padding-right: 0;
	}

	.mmleft .lv2-description, .mmleft .lv3-description {
		padding-top: 0;
	}

	/* Business and Solutions */
	.mmleft .lv2-title, .mmleft .lv3-items {
		padding: 10px 0 10px 15px;
	}

	.mmright .lv2-title, .mmright .lv3-items {
		padding: 10px 0 10px 15px;
	}

	/* Rest which is not Business and Solutions */
	.mmleft.title-and-description {
		padding: 10px 0 10px 15px;
	}

	.mmright.title-and-description {
		padding: 10px 0 10px 15px;
	}

	.mainnav .redline {
		display: none;
	}
}

/* Phone, xs */
@media (max-width: 480px) {

	/* BEGIN - Use horizontal space available for small device */
	/* Using specificity to override default settings by Bootstrap and css generated by SP */
	#main {
		padding-left: 0;
		padding-right: 0;
	}

	#s4-bodyContainer .container {
		padding-left: 0;
		padding-right: 0;
	}

	#DeltaPlaceHolderMain .topbanner, .featurebanners {
		margin: 0;
		padding: 0;
	}

	#DeltaPlaceHolderMain .articlebody {
		margin: 0;
		padding-left: 6px;
		padding-right: 6px;
	}

	.navbar-collapse {
		padding-left: 6px;
		padding-right: 6px;
		max-height: 100%;
	}

	.container .leftnav {
		padding-left: 0;
		padding-right: 0;
	}
	/* END - Use horizontal space available for small device */


	/* Override SP generated css */
	#s4-workspace #s4-bodyContainer {
		padding-bottom: 0;
	}

	.locationnav .loclinks, .locationnav .loc-label {
		display: none;
	}

	.ms-srch-sb > input {
		width: 100px;
	}

	#main .notification {
		-webkit-min-width: 100px;
		-moz-min-width: 100px;
		-ms-min-width: 100px;
		-o-min-width: 100px;
		min-width: 100px;
	}

	#suiteBarLeft #DeltaSuiteLinks {
		display: none;
	}

	#suiteBarRight {
		width: 100%;
	}

	.nnit-video {
		padding: 0 9px 0 9px;
	}
}

/* Phone landscape, xs */
@media (min-width: 480px) {
}

/* Tablet, sm */
@media (min-width: 768px) {
	.global-navigation-small-devices {
		display: none;
	}
}

/* Desktop, md */
@media (min-width: 992px) {

	.navigation-links-icon {
		display: none;
	}

	.navpartnerlinks {
		border-top: 1px solid #FFF;
	}

	.container {
		width: 970px;
	}

	.mainnav {
		margin: 5px 15px 15px 15px;
	}

		.mainnav .navbar-collapse {
			padding-left: 0;
			padding-right: 0;
		}

		.mainnav .navbar-default .navbar-nav > .open > a,
		.mainnav .navbar-default .navbar-nav > .open > a:hover,
		.mainnav .navbar-default .navbar-nav > .open > a:focus {
			color: #000;
			background-color: #F6F4EF;
			border: 1px solid #696969;
			border-bottom: 1px solid #f6f4ef;
		}

		.mainnav .navbar-nav .dropdown-toggle {
			border: 1px solid transparent;
		}

		.mainnav .navbar-nav .dropdown {
			width: 25%;
			text-align: center;
		}

		.mainnav .yamm .yamm-fw.dropdown .dropdown-menu {
			left: -15px;
			right: -15px;
		}

		.mainnav .dropdown-menu {
			background-color: #F6F4EF;
			border: 1px solid #696969;
			padding: 10px 20px;
			margin: 0 15px;
		}

	.mmleft, .mmright {
		padding-right: 0;
		padding-left: 0;
		background-color: #F6F4EF;
	}

	.lv2-title {
		padding: 15px 17px 10px;
		font-weight: bold;
		font-size: 16px;
	}

	.lv2-title-nochild {
		padding: 0;
		font-weight: bold;
	}

	.lv2-items a, .lv3-items a {
		display: block;
		padding: 10px 17px;
	}

		.lv3-items a, .lv3-items a:link, .lv3-items a:active, .lv3-items a:visited {
			text-decoration: none;
		}

		.lv2-items a, .lv2-items a:link, .lv2-items a:active, .lv2-items a:visited {
			text-decoration: none;
		}

	.lv2-items .lv2-title-nochild, .lv3-items .lv3-title {
		font-weight: bold;
	}

	.lv2-items .lv2-description, .lv3-items .lv3-description {
		min-height: 76px; /* Make it look good on Ipad */
		color: #000;
		font-size: 13px;
	}

	.mmleft {
		border-right: 1px solid #d7d7d7;
	}

		.mmleft .lv2-title {
			border-top: 1px solid #d7d7d7;
			border-left: 1px solid #d7d7d7;
			border-bottom: 1px solid #d7d7d7;
			color: #373f1e;
		}

	.mmright .lv2-title {
		border-top: 1px solid #d7d7d7;
		border-bottom: 1px solid #d7d7d7;
		border-right: 1px solid #d7d7d7;
		color: #00736e;
	}

	.lv2-items {
		border: 1px solid #d7d7d7;
	}

	.mmleft .lv3-items {
		border-bottom: 1px solid #d7d7d7;
		border-left: 1px solid #d7d7d7;
	}

	.mmright.lv2-items, .mmright .lv3-items {
		width: 50%;
		float: left;
		border-bottom: 1px solid #d7d7d7;
		border-right: 1px solid #d7d7d7;
	}

	.mmleft.lv2-items a:hover, .mmleft .lv3-items a:hover {
		background: #ebe9e5 url('/_layouts/15/images/NNIT.SharePoint.Branding/mmhover_left.png') 99% 5% no-repeat;
	}

	.mmright.lv2-items a:hover, .mmright .lv3-items a:hover {
		background: #ebe9e5 url('/_layouts/15/images/NNIT.SharePoint.Branding/mmhover_right.png') 99% 5% no-repeat;
	}

	.dropdown-toggle {
		font-size: 16px;
	}

	.lv3-title {
		font-size: 13px;
		line-height: 17px;
	}

	.navbar-default .navbar-nav > li > a {
		color: #000;
		cursor: default;
	}

		.navbar-default .navbar-nav > li > a:hover {
			color: #777;
		}

	.mmright .colleft .lv3-items, .mmright .colright .lv3-items {
		width: 100%;
	}

	.colleft, .colright {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Large desktop, lg */
@media (min-width: 1200px) {
	.container {
		width: 1196px;
		padding-left: 0;
		padding-right: 0;
	}

	footer .container {
		width: auto;
	}

	footer .navpartnerlinks .container {
		width: auto;
	}
}