/* Google web fonts support */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700,600,900);
@import url('https://fonts.googleapis.com/css?family=PT Sans');

/* HTML and body stylesheet */

html
{
    -ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: "Segoe UI", "Source Sans Pro", sans-serif;
	font-weight: 300;
	font-size: 1em;
}

body 
{ 
	margin: 0px;
	padding: 0px; 
}

.body-container
{
	position: relative;
	padding-top: 66px;
	box-sizing: border-box;
	background-color: #e1e4e6;
}

/* Header stylesheet */

.header-view
{
	background-color: white;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 2;
}

.header-left
{
	white-space: nowrap;
}

.header-logo
{
	padding-top: 0.4em;
	position: relative;
	top: 4px;
}

.header-title
{
	font-weight: 300;
	font-size: 1.7em;
	margin-left: 0.3em;
	letter-spacing: 0.04em;
}

@media (max-width: 399px)
{
	.header-title { font-size: 1.5em; }
}

/* Footer stylesheet */

.footer-view
{
	position: relative;
	background-color: white;
	border-top: 2px solid #DDE0E2;
	padding: 0.5em 0px;
}

.footer-left 
{
    float: left;
    margin-right: 0.4em;
}

@media (max-width: 399px)
{
	.footer-logo { max-width: 145px; }
}

.footer-right 
{
    float: right;
    margin-left: 0.4em;
    margin-bottom: 6px;
    margin-top: 12px;
    text-align: right;
}

@media (min-width: 400px)
{
	.footer-nav
	{
	    font-size: 0.69em;
	}
}

@media (max-width: 399px)
{
	.footer-nav
	{
	    font-size: 0.63em;
	    position: relative;
	    top: -5px;
	}
}

.footer-nav a, .footer-nav a:visited, .footer-nav a:active, .footer-nav a:link 
{
}

.footer-center 
{
    clear: both;
    text-align: center;
    width: 100%;
}

@media (min-width: 400px)
{
	.footer-copyright
	{
	    font-size: 0.69em;
	}
}

@media (max-width: 399px)
{
	.footer-copyright
	{
	    font-size: 0.63em;
	}
}

/* Strip of the viewport -- general purpose  */

.view-strip
{
	margin: 0px;
	padding: 0px;
}

.view-strip-content
{
	margin: 0px auto; 
	position: relative; 
}

/* 
	Large Screen Width
	Calculation to determine when to limit the view-strip-content to max-width 1280px.
	Simple, rough calculation: 1280 + (1280 * 1.03 * .03)
	Otherwise: 1280 + x = .03 * (1280 + x)
*/
@media (min-width: 1320px)
{
	.view-strip-content { max-width: 1280px; padding: 0.7em 0px;}	
}

/* 
	Medium Screen Width
	min-width = (ssw-h-padding * 2) / (msw-h-padding * 2)
*/
@media (min-width: 400px) and (max-width: 1319px)
{
	.view-strip-content { padding: 0.7em 1.5%; }	
}

/* Small Screen Width */
@media (max-width: 399px)
{
	.view-strip-content { padding: 0.7em 6px; }	
}

/* Navigation bar */

.nav-bar
{
	margin: 0.3em 0px;
	text-align: center;
}

.nav-item
{
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.5em 1.8em;
}

.nav-button
{
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 0.5em 1em;
	margin: 0.3em 0.3em;
	color: #D1D5E6;
	font-size: 0.79em;
	font-weight: 600;
	letter-spacing: 0.15em;
	white-space: nowrap;
}

/* UI panel and related items */

/* 
	Collapsing/overlapping margins: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
	Margins of siblings collapse.
	Top and bottom margins of parent and children BLOCKS collapse if there is
	no border or padding in the parent.
	Implication: parent blocks without a visible border should not use padding
	so child block's margins can collapse/overlap the parent margin instead of
	adding to it.
*/

.panel
{
	margin: 1em;
	padding: 1px;
	text-align: left;
	border: none;
	background-color: white;
	box-shadow: 2px 3px 10px 3px rgba(0, 0, 0, .4);
}

.panel-block
{
	display: table;
	margin: 1em;
}

.ui-item
{
	display: inline-block;
	margin: 0.15em 0.15em;
}

.ui-submit
{
	padding: 0.3em 1em;
	margin: 0.8em 0.8em;
	letter-spacing: 0.13em;
}

.ui-row
{
	margin: 0.3em 0px;
	width: 100%;
}

.ui-cell
{
	display: inline-block;
}

.ui-text-input
{
	display: inline;
	background-color: #f1f4f6;
	vertical-align: bottom;
}

/* Miscellaneous */

.z-2 { z-index: -2; }
.z-1 { z-index: -1; }
.z-0 { z-index: 0; }
.z_1 { z-index: 1; }
.z_2 { z-index: 2; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-gray { color: #979797; }
.text-dark-gray { color: #787878; }
.text-link-blue { color: #979797; }
.text-error-red { color: #c87878; }
.text-bold { font-weight: bold; }

a, a:link, a:hover, a:active, a:visited 
{
    text-decoration: none;
    color: #304595;
}

.white-dot8
{
	background-color: rgba(255,255,255,.8);
}

.bottom-outer-shadow
{
	box-shadow:   0 5px 10px -3px rgba(0, 0, 0, 0.5);
}

.absolute-fit
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.round-corner
{
	border-radius: 4px;
}