﻿/*
  Basic styles for page layout.
*/

/* 
  Make space for the banner (82px) and navbar (25px) (=107px).
  Also adjust container padding to help with the nav bar bottom border.
*/

@media (min-width: 768px) {
	body > .container {
		padding: 107px 15px 0;
	}

	div.container {
		padding-left: 0px;
		padding-right: 0px;
	}
}

/* Sticky footer, bottom margin set to height of footer. This now happens in code as the height of the footer is variable (min 133px) */

html {
	position: relative;
	min-height: 100%;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #55585A;
}

/* Footer styles to match the existing Xerox footer. */

footer.footer {
	padding-top: 24px;
	padding-bottom: 32px;
	color: #FFF;
	font-size: 12px;
}

footer.footer .tech-support a {
	color: #FFF;
	font-size: 18px;
}

footer.footer .tech-support a:hover {
	color: #dcddde;
}

footer.footer p {
	padding-left: 15px;
	padding-right: 15px;
}

/* Banner */

div.banner {
	height: 82px;
}

div.banner img {
	margin-top: 20px;
}

/* Nav bar */

nav.navbar-gv {
	background-color: #FFF;
}

nav.navbar-fixed-top-gv {
	border-bottom: 0px none transparent;
}

/*
  Adjustments for larger devices to make the bottom border work in the nav bar.
*/

@media (min-width: 768px) {

	nav.navbar-gv {
		margin-bottom: 0px;
	}

	/* 
  Unclear how to remove all box shadows using LESS, so doing it like this. 
  For example, Vault is inconsitent in that we have box shadows in lower level menus.
*/

	nav.navbar-gv ul.dropdown-menu {
		box-shadow: none !important;
	}
}

/*
  There are problems with navbar-fixed-top on phone sized devices, given the adjustments we've already made.
  So we have to create a similar class navbar-fixed-top-gv with some adjustments to make it work. What we're
  really after is to not have the padding on small devices. Clearly we could handle this more cleanly by using
  media detection and separate views server side, but QA tend to just make the screen small and log issues.
  Note that max-height when collapsed is removed compared to the original, as our menu is too long!
*/

@media (min-width: 768px) {
	.navbar-fixed-top-gv .navbar-collapse {
		padding-left: 0;
		padding-right: 0;
	}
}

/* This is the main change, making the position and z-index conditional on screen width. */

@media (min-width: 768px) {
	.navbar-fixed-top-gv {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 1030;
	}

	.navbar-fixed-top-gv {
		border-radius: 0;
	}
}

.navbar-fixed-top-gv {
	top: 0;
	border-width: 0 0 1px;
}

/*
  Button toolbar. Styled to approximate the nav bar.
*/

div.btn-toolbar-gv button.btn-gv {
	border: none;
	background-color: #FFF;
	color: #000;
	margin-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
}

div.btn-toolbar-gv button.btn-gv:hover,
div.btn-toolbar-gv div.open button.btn-gv {
	outline: none !important;
	background-color: #FFF;
	color: #55585a;
	box-shadow: none;
	-webkit-box-shadow: none;
}

div.btn-toolbar-gv ul.dropdown-menu {
	margin-top: 0px;
}

div.btn-toolbar-gv button.btn-gv-ellipsis {
	background-image: url('/Content/Images/icon-vertical-ellipsis.png');
	background-position: 13px center;
	background-repeat: no-repeat;
	padding-left: 18px;
	padding-right: 18px;
}

div.btn-toolbar-gv button.btn-gv-ellipsis:hover {
	background-position: -17px center;
}

div.btn-toolbar-gv div.open button.btn-gv-ellipsis {
	background-position: -17px center;
}

label.label-gv-help, label.label-gv-required, label.label-gv-help-required {
	background-position: right 3px;
	background-repeat: no-repeat;
	padding-right: 15px;
	width: 100%;
}

label.label-gv-help, label.label-gv-help-required {
	cursor: help;
}

label.label-gv-help {
	background-image: url('/Content/Images/icon-info.png');
}

label.label-gv-required, label.label-gv-help-required {
	background-image: url('/Content/Images/icon-required.png');
}

/*
  Need a little space at the end of forms to keep the buttons from touching the footer.
*/

form.form-horizontal {
	margin-bottom: 15px;
}

/*
  Styles for the validation summary "flippy triangle" button are, apart from the "right" attribute,
  a straight copy of .close in Bootstrap. Impractical to do anything else given that they need to co-exist.
  Also removed the :focus option from :hover.
*/

div.alert-dismissable button.validation-summary-toggle {
	position: relative;
	top: -2px;
	right: 20px;
	float: right;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	color: inherit;
	text-shadow: 0 1px 0 #fff;
	opacity: 0.2;
	filter: alpha(opacity=20);
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
}

div.alert-dismissable button.validation-summary-toggle:hover {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

span.gv-application-name {
	font-size: 20px;
	color: #55585A !important;
	float: right;
	margin-top: 29px;
}

img.gv-logo {
	position: relative;
}

/*
  Button overrides for Conduent brand.
*/

.btn-primary {
	color: #000;
	background-color: #FFF;
	border-color: #000;
}

.btn-primary:hover {
	color: #55585a;
	background-color: #FFF;
	border-color: #55585a;
}

.btn-default {
	border-color: #55585A;
}

nav.navbar-gv {
	color: #000;
	min-height: 25px;
}

nav.navbar-gv ul.nav > li > a,
nav.navbar-gv ul.nav > li > a span {
	color: #000;
	font-size: 14px;
	text-transform: uppercase;
	font-size: 14px;
}

nav.navbar-gv ul li a {
	color: #000;
	background-color: #FFF;
	border-bottom: 4px solid #FFFFFF;
	padding-top: 0px;
	padding-bottom: 4px;
}

nav.navbar-gv ul li.has-dropdown-toggle > a:hover,
nav.navbar-gv ul li.has-dropdown-toggle.open > a {
	border-bottom: 4px solid #55585a;
}

nav.navbar-gv ul.nav > li > a:hover,
nav.navbar-gv ul.nav > li.has-dropdown-toggle.open > a {
	color: #000;
	background-color: #FFF;
}

div.conduent-line {
	border-bottom: 1px solid #E7E7E7;
}

div.entity-name {
	text-align: right;
	font-size: 14px;
	padding-top: 8px;
}
