@charset "utf-8";
/* CSS Document */

body {
	color: #000;
	background-color: #FFF; /*#444;*/
	font-family: 'Raleway', "Helvetica Light", Helvetica, Arial, Arial Unicode, sans-serif;
	font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color:#65605E;
	font-weight:200;
	margin-top:0.5em;
	margin-bottom:0.5em;
	line-height:1.15	
}

#wrapper h1 {
	font-size: 0;
}

h1#login-title {
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100px;
	margin: 0px !important;
}

h2 {
	margin-bottom: 12px;
	font-size: 155%;
}

h3 {
	margin-bottom: 2px;
	font-size: 125%;
	color: #00415E;
	font-weight: bolder;
}

h4 {
	margin-bottom: 2px;
	font-size: 110%;
	text-transform: uppercase;
	letter-spacing: 1px;
}

p {
	margin-top: 1em;
	margin-bottom: 1em;
}

ul, ol {
	/* All ordered and undordered lists are indent by 40px from the left, but the way 
	which those lists are indented differ between some browsers. By creating thses overrides, 
	we can avoid inconsistencies. */
	margin-top: 0;
	margin-left: 0;
	padding-left: 30px;
}

#wrapper a {
	text-decoration: none;
}

#wrapper a:link, #wrapper a:visited {
	color: #3fa2bf;
}

#wrapper a:hover {
	border-bottom: 1px solid #3fa2bf;	/* Able to have some spacing, unlike using text-decoration: underline. */
}

#wrapper a:active {
	border-bottom: 1px solid #3fa2bf;
}

#wrapper li a:active, #wrapper li a:hover, #wrapper li a:link, #wrapper li a:visited  {
	border-bottom: 0;
	color: inherit;
}

#wrapper a:focus > img, a:active > img , a:hover > img {
	text-decoration: none;
	border-bottom: none;
	display: block;
}

#wrapper, #updateContent {
	float: left;
	margin-left: 10px;
	padding-right: 10px;
	margin-top: 60px;
	width: 95%;
}

#wrapper h2 a:focus, #wrapper h2 a:hover, #wrapper h2 a:active,
#updateContent h2 a:updateContent, #updateContent h2 a:hover, #updateContent h2 a:active {
	text-decoration: none;
	border: 0;	
}

footer {
	clear: both;	/* Remove the float from both the left and the right*/
	padding: 10px;
	background-color: #444; /*#00415E;*/
	color: #FFF;
	font-weight: bold;
	margin: 5px 0;
}

footer small a, footer small a:hover {
	color: white !important;
}

footer small a:hover {
	border-color: white !important;
}

/********************************** IDs (layout) ***************************************/
#wrapper {	
	/* max-width: 1200px; Useful if using percentage for width. */
	/* Padding: Top Right Bottom Left (Clockwise) OR Top/Bottoms Left/Right OR Top Left/Right Bottom */
	/*background: url(../images/temp-header.png) no-repeat right top;*/
	/*background-color: #FFF;*/
	background-repeat: no-repeat;
	float: left;
		
	/*-moz-box-shadow: 5px 5px 5px #AAA;
	-webkit-box-shadow: 5px 5px 5px #AAA;
	box-shadow: 5px 5px 5px #AAA;*/
	width: 1080px;		
}

.marginTopZero {
	margin-top: 0 !important;
}

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  /* Tablet Portrait size to standard 960 (devices and browsers) */  
  /* All Mobile Sizes (devices and browser) */
  @media only screen and (min-width: 752px) and (max-width: 1080px) { #wrapper, .wide {width: 768px;} }

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 750px) { #wrapper, .wide {width: 480px;} }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) { #wrapper, .wide {width: 320px;} }


#tabs h2 {
	/* display: none won't take any room, unlike visibility: none. Not read by screen readers. */
	
	/* Remove it from the document flow */
	position: absolute;
	top: -1000px;	/* Put it out of the view */
}

/****************** Generic Styles *******************/

@media only screen and (min-width: 960px) and (max-width: 1080px)  {
	div.wide {
		width:960px !important;
	}
}

.clear {
   clear: both;
}

.row * {
	display: inline-block;
	vertical-align: middle;
}

.row select * {
	display: block;
}

.alignLeft {
	text-align: left !important;
}

.alignCenter {
	text-align: center !important;
}

.alignRight {
	text-align: right !important;
}

.alignMiddle {
	vertical-align: middle;
}

.noMargin {
	margin: 0;
}

.inlineBlock {
	display: inline-block;
}

.important {
    background: none repeat scroll 0 0 #FBE6F2;
    border: 1px solid #D893A1;
    color: #333333;
    margin: 10px 0 5px;
    padding: 10px;
}

.validationError {
	color: #FF2222;
	font-weight: bold;
	margin-left: 1em;
}

.hide {
	display: none;
}

.paddingBottom5 {
	padding-bottom: 5px;
}

.ribbon {
	border-bottom: 0.75em solid #DCDCDC;
	background-color: #FF8C00;
	color: #FFF;
	width: 100%;
	padding: 0.3em;
}

.width4 {
	width: 4em;
}

div.titlebar, nav.titlebar {
	/*border: 1px solid #AAAAAA;*/
	font-family: 'Lato', sans-serif;
	font-size: 18px;
    color: white;
    border-radius: 4px;
    padding: 0.4em 1em;
    margin-bottom: 1em;
    /**
	background-image: linear-gradient(bottom, rgb(230,138,39) 16%, rgb(240,204,96) 58%, rgb(240,215,141) 79%);
	background-image: -o-linear-gradient(bottom, rgb(230,138,39) 16%, rgb(240,204,96) 58%, rgb(240,215,141) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(230,138,39) 16%, rgb(240,204,96) 58%, rgb(240,215,141) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,138,39) 16%, rgb(240,204,96) 58%, rgb(240,215,141) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(230,138,39) 16%, rgb(240,204,96) 58%, rgb(240,215,141) 79%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.16, rgb(230,138,39)),
		color-stop(0.58, rgb(240,204,96)),
		color-stop(0.79, rgb(240,215,141))
	); 
	*/
	background-color: rgb(243,146,127);  
}

#wrapper div.titlebar a, #wrapper nav.titlebar a {
	color: white;
	border-color: white;
	font-weight: normal;
}

#link-bar, #export-options {
	background-color: white;	
}

#link-bar ul, #export-options ul {
	padding-left: 3px;
	margin: 0;
	list-style: none;
  
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  
  	-webkit-flex-flow: row wrap;
  	justify-content: space-around;
}

#link-bar ul li, #export-options ul li {
	flex-grow: 1;
	height: 4em;
	margin: 0.5px;
}


#wrapper #link-bar ul li a, #wrapper #export-options ul li a {
	width: inherit;
	height: 100%;
	display: block;
	padding: 0 5px 0 5px;
	background-color: #333;
	color: white;
	font-family: "Georgia";

}

#wrapper #link-bar ul li a, #wrapper #export-options ul li a {
	line-height: 3.5em;
	font-size: 115%;	
	text-align: center;	
}

#wrapper #link-bar ul li a:hover, #wrapper #export-options ul li a:hover {
	background-color: #3fa2bf;
}

.search-overlay {
	position: absolute;
	top: -6px;
	left: 0;
	height: 1.5em;
	z-index: 500;
	background-color: rgba(0,0,0,0.5); /*dim the background*/
	color: #ffcc33;
	display: none;
	border-radius: 6px;
	padding: 2px;
	white-space: nowrap;
}

div.validatioin-error-anchor {
	color: #ff0000;
}

span.validation-error-msg {
	position: absolute;
    background-color: #efefef;
    padding: 6px;
    display: none;
    color: #ff0000;
    border-style: double;
    border-color: coral;
    pointer-events: none;
}

.error-outline {
	border: 1px solid red;
    outline: red dotted thick;
}

div.validatioin-error-anchor:hover + span.validation-error-msg {
    display: block;
}

#wrapper strong #goexisting {
	color: red;
	border-color: red;
}

span.dnv {
	color: #E9A2A2;
}

span.wl {
	color: #FFFF66;
}

#wrapper span.nis {
	color: #FFBB66;
	background-color: rgba(0,0,0,0.3);
}

span.duplicate {
	color: #FFCC99;
}

span.wl, span.dnv, span.nis, span.duplicate {
	background-color: rgba(0,0,0,0.2);
	font-weight: bold;
	padding: 2px;
}

