A:visited, A:link
{
	color: #blue;
	text-decoration: underline;
}
A:hover
{
	color: #000000;
	text-decoration: none;
	background: #f0f0f0;
	border: 0px solid #000;
}

a.spl:link { color:#FFF; text-decoration:none; font-weight:bold; background: #3399ff; }
a.spl:visited {color: #F1F1F1; text-decoration:none; font-weight:normal; }
a.spl:hover { color: #000; text-decoration:underline; font-weight:normal; }
a.spl:active { color: #FFF; text-decoration:none; font-weight:normal; }


#header
{
        background: transparent url(/images/moose-upper-peninsula-michigan.png);
	color: #000;
	/*height: 475px;*/
	height: 665px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}

#header-mainsnowfallpage
{
        background: transparent url(/images/DSC_0008-snow-thermometer.jpg);
	color: #000;
	/*height: 475px;*/
	height: 478px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}
#header-fallcolors2017 
{
        background: transparent url(/fallcolors/images/2017/2017-upper-peninsula-fall-colors-week11.png); 
	color: #000; 
	/*height: 475px;*/
	height: 412px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}


#header-fallcolors2018 
{
        background: transparent url(/fallcolors/images/2018/2018-upper-peninsula-fall-colors-week11.png); 
	color: #000; 
	/*height: 475px;*/
	height: 412px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}

#header-fallcolors2019 
{
        background: transparent url(/fallcolors/images/2019/2019-upper-peninsula-fall-colors.png); 
	color: #000; 
	/*height: 475px;*/
	height: 412px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}


#header-northernlights
{
        background: transparent url(/images/DSC_1022-northern-lights.png);
	color: #000;
	/*height: 475px;*/
	height: 591px;
	width: 1000px;
	margin-top: 2px;
	padding: 0px;
	font-family: verdana;
	font-size: 1em;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}


#upheader
{
	background: transparent;  /*-- #8cbe29 -- */
	color: #ff9900;
	text-align: right;
	height: 45px;
	width: 1000px;
	margin-top: 3px;
	padding-top: 3px;
	font-family: verdana;
	font-size: 3.0em;
	position: relative;
	top: 0px;
	left: 0px;
	border-top: 0px solid #000;
	border-bottom: 0px solid #000;
}
#newsheader
{
	background: #ffff66;  /*-- transparent #8cbe29 green-- */
	color: #000;
	text-align: center;
	align: right;
	height: 50px;
	width: 300px;
	margin-top: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: verdana;
	font-size: 1.2em;
	position: relative;
	top: -50px;
	left: 690px;
	border-top: 0px solid #000;
	border-bottom: 0px solid #000;
}

#seasonheader
{
	background: #8cbe29;  /*--  #transparent-- */
	color: #000;
	text-align: center;
	height: 30px;
	width: 1000px;
	margin-top: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: verdana;
	font-size: 1.2em;
	position: relative;
	top: 150px;
	left: 0px;
	border-top: 0px solid #000;
	border-bottom: 0px solid #000;
}




#funintheup
{
	background: url(/images/FunintheUP-logo-small.gif) no-repeat;
	color: #000;
	font-family: arial, Tahoma, helvetica, sans-serif;
	text-align: left;
	width: 160px;
	height: 85px;
	margin-top: 3px;
	margin-left: 5px;
	padding-top: 3px;
	font-family: verdana;
	font-size: 1.6em;
	position: relative;
	top: 50px;
	left: 0px;
	
}

#funintheup-snow
{
	background: url(/images/FunintheUP-logo-small.gif) no-repeat;
	color: #000;
	font-family: arial, Tahoma, helvetica, sans-serif;
	text-align: left;
	width: 160px;
	height: 85px;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 0px;
	font-family: verdana;
	font-size: 1.6em;
	position: relative;
	top: 50px;
	left: 0px;
	
}


#socialmedia-icons
{
	background: transparent;
	color: #fff;
	font-family: arial, Tahoma, helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	width: 160px;
	height: 55px;
	margin-top: 3px;
	margin-left: 5px;
	padding-top: 3px;
	font-family: verdana;
	font-size: 0.8em;
	position: relative;
	top: 0px;
	left: 0px;
	
}

#snowfallbox
{
	float: right;
	width: 200px;
	font-size:.8em;
	font-family: verdana;helvetica;sans serif; times roman;
	padding: 3px 3px 3px 3px;
	margin: 0 10px 0 0;
	display: inline;
	background: #3399ff;
	position: relative;
	top: -60px;
	left: 495px;
}



#container
{
	margin: 0 auto;
	width: 1000px;
	background: #fff;
	postition:absolute;
	top:0px;
	left:0px;
}


#header h1 { margin: 0; }

#main-navigation
{
	float: left;
	width: 1000px;
	background: #3399ff; /* hide green color #8cbe29; */
}

#main-navigation ul
{
	margin: 0;
	padding: 0;
}

#main-navigation ul li
{
	list-style-type: none;
	display: inline;
}

#main-navigation li a /* ----horizontal menu bar -----*/
{
	display: block;
	
	float: left;
	padding: 5px 10px;
	font-size: 1.3em;
	color: #000000;  /* ----font color-----*/
	text-decoration: none;
	border-right: 1px solid #fff;	
}

#main-navigation li a:hover { background: #ffffff; }



                      /*---- Category Main Sub Navigation---*/
UL#main-subcats
{
	font-size: 0.8em;
	clear: both;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	margin: 0 auto;
	padding: 0px;
	background: #8cbe29;
/*changes background of whole menu*/
	border-bottom: 0px solid #000;
	vertical-align: baseline;
}
UL#main-subcats LI
{
	display: inline;
	padding: 0 10px;
	border-right: 0px solid #000;
	padding-right: 8px;
	padding-left: 8px;
	vertical-align: baseline;
}
UL#main-subcats EM, UL#main-subcats A, UL#main-subcats A:visited
{
	font-family: arial, Tahoma, helvetica, sans-serif;
	font-size: 1.0em;
	background: #8cbe29;
/*changes background of main links*/
	color: #000;
	text-decoration: none;
	padding: 0 8px;
	border-top: 0px solid #000;
	border-bottom: 0px solid #8cbe29;
}
UL#main-subcats A:hover
{
	background: #FFF;
	color: #8cbe29;
	border-top: 0px solid #000;
	padding-bottom: 0px;
}
UL#main-subcats EM
{
	font-size: 1.0em;
	background: #ffffff;
	color: #8cbe29;
}

/*---- Snowfall pages Navigation---*/


#snow-main-navigation
{
	float: left;
	width: 650px;
	background: #3399ff; /* hide green color #8cbe29; */
	border: 2px solid #000;
	margin-bottom: 20px;
}

#snow-main-navigation ul
{
	margin: 0;
	padding: 0;
}

#snow-main-navigation ul li
{
	list-style-type: none;
	display: inline;
}

#snow-main-navigation li a /* ----horizontal menu bar -----*/
{
	display: block;
	
	float: left;
	padding: 5px 5px;
	font-size: 1.0em;
	color: #000000;  /* ----font color-----*/
	text-decoration: none;
	border-right: 0px solid #fff;
}

#snow-main-navigation li a:hover { background: #ffffff; }

#snow-main-navigation EM
{
	display: block;
	float: left;
	padding: 5px 5px;
	font-size: 1.0em;
	background: #ffffff;
	color: #3399ff;
}


#content-container
{
	float: left;
	width: 1100px;
	background: #fff url(/layout-three-fixed-background.gif) repeat-y 100% 0;
}

#section-navigation
{
	float: left;
	width: 50px;
	padding: 0px 0;
	margin: 0 20px;
	display: inline;
	background: #000;
}

#section-navigation ul
{
	margin: 0;
	padding: 0;
}

#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

#content
{
	font-size: 1.2em;
	float: left;
	width: 670px;
	padding: 20px 0;
	margin: 0 0 0 30px;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 300px;
	padding: 3px 3px 3px 3px;
	margin: 0 10px 0 0;
	display: inline;
	background: #fff; /*orange current */   /* #3399ff blue alternate*/
  position: -webkit-sticky ;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

#aside h3 { margin: 0; }

#footer
{
	clear: both;
	background: #fff;
	text-align: center;
	padding: 20px;
	height: 50px;
	border-bottom: 0px solid #000;
}

/* ----MISC code -----*/

#headeradvertisers
{
	background: transparent;  /* #3399ff blue color--green color #8cbe29; */
	color: #000;
	/* 
	position: relative;
	top: -60px;
	left: 505px; 
	width: 600px;
	height:100px; 
	*/
	margin-top: 2px;
	padding: 3px 3px 5px;
	font-family: arial, "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
	font-size: 0.9em;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 1.2em;
	border-top: 0px solid #000;
	border-bottom: 0px solid #000;
}


/*---setup of the 3 columns----*/
#container-wrap
{
	position: relative;
	display: block;
	background: #fff;
	border-left: 0px solid #8cbe29;
	border-right: 0px solid #8cbe29;
	margin-top: 25px;
	border-top: 1px solid #005DB3;
	padding-bottom: 25px;
}
#inner-wrap
{
	display: block;
	margin-left: -270px;
	margin-right: -150px;
	padding: 5px;
}
#left-wrap
{
	float: left;
	position: relative;
	width: 220px;
	padding: 0px;
	background: #8cbe88;
}
#right-wrap
{
	float: left;
	position: relative;
	width: 220px;
	padding: 0px;
	background: #f0f0f0;
}
#center-wrap
{
float:left;
    width:200px;
    padding:0px;
    background:#ddf;
}


#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}


/* -- h1 h2 h3 h4 h5 h6 and Paragraphs */

h2 { color:#000; text-align:left; font-weight:normal; font-family: georgia, "times new roman", serif; font-size:1.1em; letter-spacing:0.1em; margin:0 0 3px 0; padding-top:2px; padding-bottom:2px; background:#ffffff;}

h2.mainpage {text-align:left; font-weight:bold; color:#000000; font-family: georgia, "times new roman", serif; font-size:1.0em; letter-spacing:0.1em; margin:0 0 2px 0; padding-top:5px; padding-bottom:5px;}

h2.clear {clear:both; border-top:0px solid #f0c992;}

h2 span {line-height:1.2em;}\

h3 {text-align:center; font-weight:normal; font-family: georgia, "times new roman", serif; font-size:1.1em; letter-spacing:0.2em; margin:0 0 5px 0; padding-top:1px;}

/* -- h4 {text-align:left; font-weight:normal; padding-left:5px; background:#000; color: #ffff99; font-family: georgia, "times new roman", serif; font-size:1.0em; letter-spacing:0.2em; margin:0 0 2px 0; padding-top:2px;} */

h4.mainpage {text-align:left; font-weight:normal; color:#000000; font-family: georgia, "times new roman", serif; font-size:0.8em; letter-spacing:0.2em; margin:0 0 2px 0; padding-top:5px; padding-bottom:5px;}

h5 {color:#000; background:#ffff99; text-align:center; font-weight:normal; font-family: georgia, "times new roman", serif; font-size:1.1em; letter-spacing:0.2em; margin:0 0 13px 0; padding-top:1px;}
/*h6 {color:#000; background:#ffff99; text-align:left; font-weight:normal; font-family: georgia, "times new roman", serif; font-size:0.98em; letter-spacing:0.2em; margin:3px 0 3px 0; padding-top:2px; padding-bottom:2px;} */




/* p {font-size:0.7em; text-align:justify; line-height:1.2em; font-family:verdana, arial, sans-serif; margin-top:0; padding-top: 10px; padding-bottom:10px;} */

p.mp {font-size:0.9em; text-align:justify; line-height:1.3em; font-family:verdana, arial, sans-serif; margin-top:0;}
p.google {color:#000000; font-size:0.87em; text-align:justify; line-height:1.0em; font-family:arial, times new roman, sans-serif; margin-top:0;}
p.home {font-size:1.0em; text-align:justify; line-height:1.1em; font-family: arial, times new roman, georgia, arial, sans-serif; margin-top:0;}



.highlight {background:#ffffcc; font-family:georgia, "times new roman", serif; width:250px; font-style:italic; border-top:1px solid #000; border-bottom:5px solid #000;}

.highlight2 {background:#3366cc; font-family:georgia, "times new roman", serif; width:230px; font-style:italic; border-top:5px solid #000; border-bottom:10px solid #000;}

.maillist {background:#ffffcc; font-family:georgia, "times new roman", serif; width:126px; font-style:regular; border-top:1px solid #000; border-bottom:5px solid #000;}
.search {background:#ffffcc; font-family:georgia, "times new roman", serif; width:126px; font-style:italic; border-top:1px solid #000; border-bottom:5px solid #000;}

* html .highlight {width:225px;}

#sites {clear:both; width:750px; padding-bottom:10px; border-top:1px solid #f0c992; background:#f0f0f0;}

#sites dd {color:#686;}

pre {font-size:1.1em;}

* html pre {font-size:1em;}

#ads {clear:both; text-align:center; width:750px; margin-top:10px;}

#clearout {clear:both; text-align:center; width:auto; margin-top:0px; border-bottom:0px solid #3366cc padding-bottom:20px; padding-top:20px;}
#clearout1 {clear:both; text-align:center; width:auto; margin-top:0px; border-bottom:0px solid #3366cc padding-bottom:2px; padding-top:2px;}
.note {background:#ffff00; font-family:georgia, "times new roman", serif; font-size:0.8em; font-style:italic; color:#000000; margin:5px; padding:5px; border:5px solid #3366cc;}
.sponsorblock {background:#f0f0f0; font-family:georgia, "times new roman", serif; font-size:1em; font-style:regular; color:#000000; margin:5px; padding:5px; border:5px solid #A9A9A9;} 
/* position: -webkit-sticky;position: sticky;top: 0; */
.bold {font-weight:bold;}
.small {font-weight:bold; font-size: 0.7em; font-family:georgia, "times new roman", serif; font-size:0.8em; font-style:italic; color:#000000; margin:5px; padding:5px; border:5px solid #3366cc}










/* snowfall css table */

.tftable {min-width:400px; color:#000000; font-weight:normal !important; width:100%; border-width: 1px;border-color: #A9A9A9;border-collapse: collapse;}
.tftable th {font-size:0.8em;background-color:#ffffff;border-width: 1px;padding: 2px;border-style: solid;border-color: #A9A9A9;text-align:left;}
.tftable tr {background-color:#ffffff;}
.tftable td {font-size:16px;border-width: 1px;padding: 2px;border-style: solid;border-color: #A9A9A9;}
.tftable tr:hover {background-color:#cce5ff;}
tr.tftable-odd {background-color:#e0e0e0;}
th.tftable-lastyear {background-color:#f0f0f0;}
th.tftable-head {background-color:#99ccff;}
tr.total {background-color:#99ccff;}
td.totaltd {background-color:#f0f0f0;}

/* end snowfall css table */










/* --------------MODALS-------------------*/



#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }































































/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-color: #F5F7FA;
  line-height: 1.2;
}
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.wrapper {
  width: 100%;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 200px;
}
.content {
  padding: 0 15px;
  width: 380px;
}
.content h1 {
  margin-top: 0;
}
.content p,
.sidebar p{
  font-family: "BLOKKNeue-Regular";
}
.sidebar {
  padding: 20px;
  width: 170px;
  background-color: #434A54;
  color: #fff;
}
.sidebar h3 {
  margin: 0;
}
.content,
.sidebar {
  float: left;
}


/* The sticky */
.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}