/* WEATHER.UNCC.EDU MAIN.CSS STYLE SHEET
 * AUTHOR: WARREN PETTEE (@wpettee)
 * DATE : DEC-2016
 */
/* LOADING SCREEN ------------------------------------------------------------------------------------- */
div#load_screen{
	background: linear-gradient(#00008F,#00000F);
	opacity: 1;
	position: fixed;
	z-index:10;
	top: 0px;
	width: 100%;
	height: 1600px;
}

div#load_screen > div#loading{
	color:#FFF;
	width:120px;
	height:24px;
	margin: 300px auto;
}
/* HEADER STYLE ------------------------------------------------------------------------------------- */
#masthead { position:relative; background:rgba(0,112,60,100.0); z-index: 1;
	box-shadow: 0px 0px 30px 1px rgba(64, 101, 144, 0.83);
	padding-bottom:10px; padding-top:5px; margin-bottom:15px;
}

#masthead h1 {
	font-size: 24px; color: #FFFFFF;text-align: center; margin-top:0px; margin-bottom:0px;
}

#masthead h2 {
	font: italic 18px "times new roman"; text-align: center; color: #FFFFFF; margin-top:0px; margin-bottom:0px; padding-top:0px;
}

#masthead h3 {
	color: #d4c3a8;text-align: center;
}

#schoolLogo {
	position: absolute; left:0px; top:-12px; z-index:2
}

/* CAMPUS OBS TABLE BOX --------------------------------------------------------------------------------*/
#campus_obs {
	width: 90%;
	min-height: 500px;
	margin: 1%;
	padding: 5px;
	float: left;
	 /*border-top: 1px solid #002400;
	border-right: 1px solid #002400;
	border-bottom: 1px solid #002400;
	border-left: 1px solid #002400;*/
	background:rgba(255,255,255,0);
	z-index: 10;
}
.currentIcon {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.stats_header{
	background-color: rgba(255,255,255,0.00);
	text-align:center;
	font: normal 16px helvetica;
	color:#000000;
}
.stats table {
	border: thin solid #003F00;
	width: 100%;
}
.stats td {
	border: thin dotted #001F00;
	padding: 5px;
}
.stats_label {
	font: bold 15px sans-serif;
	color: #000000;
	text-align: right;
}

.stats_data {
	font: bold 14px sans;
	color: #CF0000;
}
/* Properties for the hover charts*/
.stats_data img { 
	border:1px solid #000;
	vertical-align:bottom;
}
.stats_data:hover {
	border:0; /* IE6 needs this to show large image */
	z-index:1;
}
.stats_data span { 
	position:absolute;
	visibility:hidden;
	width:100%;
}
.stats_data:hover span { 
	visibility:visible;
	top:1%; left:100%; 
	-webkit-animation: fadeinout 0.5s linear forwards;
	animation: fadeinout 0.5s linear forwards;
}
@-webkit-keyframes fadeinout {
	0%,100% { opacity: 0; }
	50% { opacity: 1; }
}
@keyframes fadeinout {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* WATCH/WARNING BOX ------------------------------------------------------------------------------------- */
#localAlert {
	position:absolute;
	top:0px;
	right:0px;
	width:10%;
	z-index:1000;
}
.advisoryBox {
	color: black;
	font-size: 12px;
	text-align: center;
	background-color: #FFE991;
	margin: 0 0 0 0;
	padding: .5em 0em .5em 0em;
	border: 1px dashed rgb(34,70,79);
}
.advisoryBoxnoactive {
	color: black;
	font-size: 12px;
	text-align: center;
	background-color: white;
	margin: 0 0 0 0;
	padding: .5em 0em .5em 0em;
	border: 1px dashed rgb(34,70,79);
}

/* DROPDOWN/SLIDEOUT MENU STYLE ----------------------------------------------------------------------- */
/* Containers for dropdown menus:*/
#leftButtons {
	position:absolute;
	float:left;
	width:140px;
}
#rightButtons {
	position:relative;
	float:right;
	right:0px;
	width:140px;
}
#conditionsDropdown { /*Specific info for current conditions dropdown*/
	position: relative;
	display: inline;
}
.dropbtn {
	background-color: #00629c;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:140px;
}
.dropbtn:hover {
	background-color: #73a2de;
}
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background:rgba(102, 152, 195, 0.88);
	min-width: 500px;
	box-shadow: 0px 8px 16px 0px rgba(0, 118, 255, 0.83);
	z-index:2000;
	left:140px;
	top:-13px;
}
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content a:hover {
	background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
	display: block;
	-webkit-animation: fadeinout 0.5s linear forwards;
animation: fadeinout 0.5s linear forwards;
}
.dropdown:hover .dropbtn {
	background-color: #73a2de;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.slideLeftContent {
	display: none;
	position: relative;
	text-align:right;
	background-color: #656565;;
	width: 140px;
	z-index:2000;
}
.slideLeftContent a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.slideLeftContent a:hover {
	background-color: #f1f1f1
}
.slideLeft:active .slideLeftContent {
	display: block;
	-webkit-animation: fadeinout 0.5s linear forwards;
animation: fadeinout 0.5s linear forwards;
}
.slideLeft:hover .dropbtn {
	background-color: #73a2de;
}
.verticalSideMenuInactive {
    background-color: #656565;;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:108px;
	position:relative;
	display:block;
	text-align:center;
}

.verticalSideMenuActive {
    background-color: #00629c;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:108px;
	position:relative;
	display:block;
	text-align:center;
}
.verticalSideMenu:hover {
	background-color: #73a2de;
}
.blankMenuSquare {
	background-color: #00629c;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:140px;
}
.toggleButton {
	background-color: #656565;;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:108px;;
	position:relative;
	display:block;
	text-align:center;
}
.toggleButton:hover {
	background-color: #73a2de;
}
.toggleButtonDown {
	background-color: #00629c;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
	width:108px;;
	position:relative;
	display:block;
	text-align:center;
}
.toggleButtonDown:hover {
	background-color: #73a2de;
}
/* SLIDE OUT --------------------------------------------------*/
.slideBtn {
	background-color: #00629c;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	font-size:12px;
}
.slideOut {
	position: relative;
	display: block;
}
.slideout-content {
	font-size: 13px;
	color: #404040;
	position:relative;
	display: none;
	padding: 0px;
	width:140px;
	text-decoration: none;
	background-color: #efefef;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	text-align: center;
}
.slideout-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	width:108px;
	font-family: 'Open Sans', sans-serif;
	font-weight:lighter;
	font-style:italic;
}
.slideout-content a:hover {
	background-color: #f8f8f8;
	color: #404040;
	box-shadow: 1px 1px 16px 1px rgba(0, 118, 255, 0.83);
}
.slideOut:hover .slideout-content {
	display: block;
	-webkit-animation: fadeinout 0.5s linear forwards;
	animation: fadeinout 0.5s linear forwards;
}
.slideout:hover .slidebtn {
	background-color: #73a2de;
}
/* HORIZONTAL MENU STYLE --------------------------------------------------------------- */
#menu {
	background: rgba(39, 94, 169, 0);
	position: absolute;
	z-index: 1;
	bottom: 10px;
	left: 10px;
	border-radius: 3px;
	width: 100%;
	
	font-family: 'Open Sans', sans-serif;
}
#menu a {
	font-size: 13px;
	color: #404040;
	display: inline-flex;
	padding: 10px;
	text-decoration: none;
	background-color: #efefef;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	text-align: center;
}
#menu a:last-child {
	border: none;
}
#menu a:hover {
	background-color: #f8f8f8;
	color: #404040;
	box-shadow: 1px 1px 16px 1px rgba(0, 118, 255, 0.83);
}
#menu a.active {
	background-color: #3887be;
	color: #ffffff;
}
#menu a.active:hover {
	background: #3074a4;
	box-shadow: 1px 1px 16px 1px #00ff00;
}
/* MODAL BOX STYLE -------------------------------------------------------------------------*/
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 65%;
	top:25%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}
/* Modal Header */
.modal-header {
	padding: 2px 16px;
	background-color: rgba(0,112,60,100.0);
	color: white;
}
/* Modal Body */
.modal-body {
	padding: 2px 16px;
}
/* Modal Footer */
.modal-footer {
	padding: 2px 16px;
	background-color: rgba(0,112,60,100.0);
	color: white;
}
/* Add Animation */
@-webkit-keyframes animatetop {
	from {top: -300px; opacity: 0} 
	to {top: 0; opacity: 1}
}
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}
/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
/* SLIDER SWITCH STYLE ------------------------------------------------------ */
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
	display:none;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 17px;
}

.slider.round:before {
	border-radius: 50%;
}
#stormAttributeTable {
	background-color: #c4d2ff;
	border-collapse: collapse;
}
.slideLeftContent ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


ul li{
  color: #ececec;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 50px;
}

ul li input[type=radio]{
  position: relative;
  visibility: hidden;
}

ul li label{
  display: inline;
  position: relative;
  text-align:left;
  font-weight: 300;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  /*padding: 25px 25px 25px 80px;*/
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
	color: #FFFFFF;
}

ul li .check{
  display: inline;
  position: relative;
  border: 2.1px solid #AAAAAA;
  /*border-radius: 100%;
  height: 12px;
  width: 12px;
  /*top: 30px;
  left: 20px;*/
	z-index: 9;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #FFFFFF;
}

ul li .check::before {
  display: inline;
  position: relative;
  content: '';
  border-radius: 100%;
  height: 6px;
  width: 6px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}

.loadingHide {
    position: absolute;
    display: none;
    top: 8%;
    right: 40%;
}
.loadingShow {
    position: absolute;
    top: 8%;
    right: 40%;
}