/* bcr.css */

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }

body { font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif; background-color:#fff; margin-top:0px; border-top:0px; background-image:url("../images/bg.gif"); padding:0px; color:#003; height:100%;}

p { font-size: 16px; line-height:24px; margin-top: 20px; }

table {
	border-collapse: collapse;
	width: 100%;
}

th {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid #06C;
}

td {
	padding: 5px;
	text-align: left;
}

ul {
	margin:0;
	padding:0;
}

/* color styles : Blue */
.color { color:#00c; }
.colorHeavy { color:#00c; font-weight:bold;}
.colorLarge {font-size:18px; color:#00c; font-weight:bold; margin-top:20px; margin-bottom:10px;}
.colorxLarge {font-size:22px; color:#00c; font-weight:bold; margin-top:20px; margin-bottom:15px;}
.colorxSmall {font-size:14px; color:#00c; font-weight:normal;}

a.colorHeavy { text-decoration:none; color:#00c; }

/* color styles : Grey */
.color2 { color:#999; }

.super { vertical-align:text-top;}

#pageLayout {
	width:900px;
	min-height:100%;
	overflow:auto;
	background-color:#fff;
	margin-right:auto; 
	margin-left:auto; 
	padding:25px;
	border-left:#999 thin solid; 
	border-right: #999 thin solid;
	position:relative;
}

/* IE6 hack for 100% height */
* html #pageLayout {
	height:100%;
}

/* menu classes */

#background_topbar {  /* puts a dark blue bar at top */
	position:absolute;	
	left:0px;
	top:0px;
	border:0px;
	z-index:-1;
	width:100%;
	height:250px;
	background-color: #006;/*#006;*/
}

#bcr_banner {  /* grey bar behind nav_bar buttons under banner image */
	position:relative;
	width:900px;
	height:360px;
	background-color:#BAC0CD;
}

#linksCol {  /* right column - nav bar */
	width:250px;
	float:right;
	background-color:#BAC0CD;
	padding-bottom:500px;
}

#howToCol {  /* right column - blue bar */
	width:250px;
	float:right;
	background-color:#000066;
	padding:20px 0px 500px 0px;
}

#identity {  /* App Icon */
	position:absolute;
	z-index:10;
	left:15px;
	top:260px;
} 

#nav_bar {  /* horizontal nav buttons below banner image */
	position:absolute;
	z-index:20;
	width:750px; 
	border:0px;
	left:155px;
	top:315px;
}

#wx_nav_bar {  /* horizontal weather nav buttons below banner image */
	position:absolute;
	z-index:20;
	width:750px; 
	border:0px;
	left:180px;
	top:400px;
}

#nav_bar li, #wx_nav_bar li { 
	list-style-type: none;
	float:left;
}

#nav_bar a:link, a:visited, #wx_nav_bar a:link, a:visited {
	display:block;
	width:125px;
	color:#006;
	font-size:18px;
	font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-weight:bold;
	background-color:#fff;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
	border:1px solid #06C; 
	margin:5px;
}

#nav_bar a:hover, a:active, #wx_nav_bar a:hover, a:active {
	background-color:#ddd;
	text-decoration:none;
}


/* main body classes */

#contentCol {
	width:612px;
	margin:20px;
	padding-top:10px;
}

.links a:link, a:visited {
	display:block;
	width:180px;
	font-size:18px;
	font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-weight:bold;
	color:#006;
	background-color:#fff;
	text-align:center;
	padding:15px;
	text-decoration:none;
	border:1px solid #06C; 
	margin:20px;
}

.links a:hover, a:active {
	background-color:#ddd;
	text-decoration:none;
}

.center {
	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

.regions_marks_table {
	display:block;
	width:600px;
	color:#006;
	font-size:18px;
	font-family: 'Open Sans Condensed', Verdana, sans-serif;
	font-weight:bold;
	background-color:#fff;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
	border:1px solid #06C; 
	margin:5px;
}

.sidebarText {
	padding-left: 30px;
}

.actionBtn {
    padding: 2px 10px 4px 10px;
    margin: 0 5px 5px 0;
    border: none;
    border-radius: 3px;
    color: #E6E6E6;
    background-color: #336699;
    font-size: 14px;
    cursor: pointer;
}

.bulleted_list {
	margin-left:30px;
	line-height: 30px;
}

.dbl_bulleted_list {
	margin-left:40px;
}

/* feedback form styles */

.feedbackFS {
	padding: 10px;
	margin: 10px;
	font-size:18px; 
	color:#00c; 
	font-weight:bold; 
}

.fieldSets {
	padding: 10px;
	margin: 10px;
	font-size:18px; 
	color:#00c; 
	font-weight:bold; 
}

form {
	padding: 10px;
}

legend {
	padding: 5px;
}

input[type=text], input[type=email] {
	width: 98%;
	margin-bottom: 10px;
	padding: 6px;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px; 
}

.inputPWcontainer {
	width: 94%;
	margin-bottom: 10px;
	padding: 5px;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
    align-items: center;
    display: flex;
}

.visibility {
    margin: 0 4px;
}

.inputPWcontainer input[type=password], .inputPWcontainer input[type=text] {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border:0px; 
    outline: none;
	font-size: 16px; 
	background-color: #f8f8f8;
}

textarea {
	width: 100%;
	height: 150px;
	padding: 10px;
	margin-bottom: 10px;
	box-sizing: border-box;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 16px; 
}

input[type=button], input[type=submit], input[type=reset] {
	width:100%;
	color:#fff;
	background-color:#006;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
	border-radius: 4px;
	font-size:18px;
    font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor: pointer;
}

.drop_downs {
	width:100%;
    font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px; 
}

.textInputHint {  /* class to style text inputs to betteer resemble drop down lists ... still not great */
	width: 98%;
	margin: 10px 0px 10px 0px;
	border:1px solid #06C; 
	border-radius: 4px;
	background-color: #f8f8f8;
	font-size: 11px; 
    font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif;
}

#togglePW {
	font-size:12px;
}

/* for forms */
table td.formLabels { text-align: right; width:150px; vertical-align: baseline; }
table td.formInputs  { text-align: left; width:280px; vertical-align: baseline; }
table td.baselineInput  { text-align: left; vertical-align: baseline; }
table td.formInfo { font-size:11px; color:#c00; font-weight: bolder; }

#weatherCol {
	width:900px;
	padding-top:130px;
}


/* embedded map styles */
#map {
  height: 800px;
  width: 800px;
}

#event-info {
  height: 50px;
  width: 800px;
  border:1px solid #FF0004;
}

.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.custom-map-control-button:hover {
  background: rgb(235, 235, 235);
}