/* -------------------- Page sections -------------------- */

/* Navigation shared */

#top_nav>#title, #sub_nav>#title { width: 33.3333%; }						/* standard widths */
#top_nav>#sections, #sub_nav>#sections { width: 66.6666%; }
.my #sub_nav>#title { width: 60%; }
.my #sub_nav>#sections { width: 40%; }

/* Top navigation */

#top_nav {
	background-color: #A0AA90;
	color: white;
	border-top: 7px solid #808285;
	position: relative;
}

#top_nav>#sections { margin-top: -7px; }

#top_nav>#sections>span { 
	position: relative;
	top: 1.4em;
	font-family: Nevis;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: small;
	opacity: 0.7;
}
::i-block-chrome,#top_nav>#sections>span { -webkit-text-stroke: 0.7px rgba(255,255,255,1); }
#top_nav #sections .selected { opacity: 1; }
#top_nav a { color: white; padding: 2px; }
#top_nav #sections a:hover { text-decoration: none; background-color: #B1BBA3; }
.front2 #top_nav #sections a:hover { background-color: rgba(0,0,0,0.4); }

#top_nav #searchbox {
	padding-left: 2em; padding-top: 1em; margin-bottom: -1em; float:right; 
	position: relative;	/* makes it clickable */
}
#top_nav #searchbox input { 
	width: 80px;
    background: white url(/site_images/magnifying_glass.png) no-repeat right center;
	padding: 2px 4px; 
}

#top_nav .dropdown_arrow {
	font-size: 6px;
}

/* Sub-navigation */

#sub_nav { height: 3.95em; background-color: #EDECE8; }
#sub_nav span a { color: #858584; }
#sub_nav a:hover { text-decoration: none; }
#sub_nav>#title { font-weight: normal; vertical-align: top; height: 1.95em; }
#sub_nav #sections { line-height: 3.9em; }
#sub_nav #sections span { font-family: PT Sans; }
#sub_nav #sections .selected a,
#sub_nav #sections a:hover { color: black; font-weight: bold; }
#sub_nav .selected {
	background-image: url('/site_images/selected_arrow.png');
	background-position: center bottom;
	background-repeat: no-repeat;
}
#sub_nav>#title.selected { background-position: 10% 97%; }

#sub_nav h2 {
	font-size: 1.5em;
	margin-top: 0.7em;
	padding-right: 0;
}
#sub_nav h2 a:hover { color: black; }

/* Guide menus */

#guide_menu { background-color: white; display: none; overflow: hidden; position: relative; z-index: 100000; }
#guide_menu>div { background-position: left bottom; background-repeat: no-repeat; }
#guide_menu #route_menu { background-image: url('/site_images/hillside_faded.png'); background-size: 100%; }
#guide_menu #city_menu  { background-image: url('/site_images/riverside_faded.png'); background-size: 100%; }

.front2 #guide_menu { background-color: transparent; position: absolute; width: inherit; right: 0; left: 0; margin: 0; }
.front2 #guide_menu #route_menu,
.front2 #guide_menu #city_menu { background-image: none; background-color: rgba(255,255,255,0.8); }

.menu_columns {
	line-height: 1.8em; /* fat fingers! */
	padding-left: 34.3%;
	font-family: PT Sans;
	font-weight: bold;
	font-size: small;
	padding-top: 5px;
	padding-bottom: 5px;
}
.menu_columns>div {
	display: inline-block;
	padding-right: 0.2em;
	vertical-align: top; 
	min-width: 23%;
}
.menu_columns>div:last-child { padding-right: 0; }

/* Minor navigation (used for sub-pages in features) */

#minor_nav {
	float: left;
	position: relative; top: 1em; left: 1em;
	width: 7em;
	background-color: #EDECE8;
	letter-spacing: 0;
	padding-bottom: 1em;
}
#minor_nav div, #minor_nav h3 { border: 0; padding: 0.5em 0.5em 0.5em 1em; }
#minor_nav h3 {
	font-family: Nevis;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 3px;
	position: relative;
	z-index: 1;
	color: white;
	background-color: #A0AA90;
}
#minor_nav .sections { font-family: 'PT Sans'; padding: 0; }
#minor_nav .sections div { padding-bottom: 0; }
#minor_nav .sections a { color: #858584; }
#minor_nav .sections .selected a { color: black; font-weight: bold; }
#minor_nav .sections .selected {
	background-image: url('/site_images/selected_arrow_left.png');
	background-position: left center;
	background-repeat: no-repeat;
}

.minor_navigable { padding-left: 8em !important; }

/* Footer */

#footer {
	background-color: #EFEFEB;
	margin-top: 20px;
	padding: 10px 0;
	border-top: 2px solid #CCC;
	font-size: 0.8em;
	clear: both;
	max-width: 100%; 
}
#footer #title   { display: block; width: 0; float: left; vertical-align: top; }	/* *** fix for responsive */
#footer #credits { display: block; padding-left: 15em; }
#footer #photo_credits { font-style: italic; }
#footer #credits a { color: black; }
#footer #logo {
	color: white;
	margin-top: 0;
}
#footer .social { width: 32px; height: 32px; border-width: 0; float: right; padding-left: 5px; }

/* Logo (used in header and footer) */

#logo {
	display: inline-block;
	background-color: black;
	border-top: 7px solid #FBAD39;
	padding: 10px 0.7em;
	margin-top: -7px;
	font-size: x-large; 
}
#logo #dot { color: #FBAD39; font-size: 0.7em; font-weight: bold; vertical-align: bottom; }
#logo #beta { display: none; }

/* Temporary beta notice */
@media screen and (min-width: 40em) {
    #logo #beta {
        color: #FBAD39; font-size: 0.6em; 
        vertical-align: baseline; top: -0.8em; position: relative;
        display: inline; font-style: italic; font-family: 'PT Sans';
    }
    #logo.betaised { padding: 10px 0.2em 10px 0.7em; }
}

/* Notice
   http://css-tricks.com/pop-from-top-notification/ 
   (position changed from absolute to fixed) */

#notice {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    box-shadow: 0 0 5px black; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black;
/*	transform: translateY(-50px); animation: slideDown 2.5s 1.0s 1 ease forwards; */
	letter-spacing: 0;
}

#notice_close { display: none; float: right; margin: 3px 3px 0 0; width: auto; border-width: 0; }

@-webkit-keyframes slideDown { 0%, 100% { -webkit-transform: translateY(-50px); } 10%, 90% { -webkit-transform: translateY(0px); } }
@-moz-keyframes    slideDown { 0%, 100% { -moz-transform:    translateY(-50px); } 10%, 90% { -moz-transform:    translateY(0px); } }
@-o-keyframes      slideDown { 0%, 100% { -o-transform:      translateY(-50px); } 10%, 90% { -o-transform:      translateY(0px); } }
@keyframes         slideDown { 0%, 100% { -o-transform:      translateY(-50px); } 10%, 90% { -o-transform:      translateY(0px); } }