@import url("../vendor/reset.css");
/*@import url("questionable.css");*/
body {
	font-family:"Avenir","Gill Sans", Helvetica, sans-serif;
	font-weight:lighter;
	font-size:15px;
	line-height:1.6em;
	background-color:#fff;
	color:#111;
/*	width:90%;
	margin:50px auto 50px auto;
   	max-width:100%;
	*/
}
body#naked {
	max-width:100%;
}
#header {
	padding:10px 0;
	background-color:#004ba8;
/*	border-bottom:1px solid #ccc;*/
	color: #ddd;
}

#homeBanner {
	width:220px;
	display:block;
	cursor:pointer;
}

#homeTitle,
#homeSubtitle {
	font-size:130%;
	text-align:left;
	margin-left:10px;
}
#homeSubtitle {
	font-size:110%;
}
div.jitter {
	display:block;
	height:18px;
	width:100%;
	background:url("/resources/symbols/trace-dingbat-white.png") center repeat-x;
	background-color:#004ba8;
}

#navMenu {
	margin-left:10px;
    text-align: justify;
	display:block;
	width:350px; /* more with stations */
	height:25px;
/*	border-top:1px solid #999;
	border-top:1px solid #66a;*/
}
#navMenu:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#navMenu ul {
	display:inline;
	margin-left: 0;
	width:100%;
}
#navMenu li
 {
	display:inline-block;
}

#navMenu a {
	border:none;
	text-decoration:none;
	color: inherit;
	background-color:inherit;
}
#homeBanner :hover,
#navMenu a:hover {
	color:#fff;
}

/*
There can be multiple spectrograms on a page, each with its own unique id,
so use attribute selectors (see http://stackoverflow.com/a/5110337/5011245)
	div[class^="tocolor-"], div[class*=" tocolor-"] {
		color:red 
	}
*/

div[id^="streamPlayer-"] {
	margin-bottom:20px;
}

div[id^="eventListError-"],
div[id^="streamPlayerError-"],
div[id^="loadingError-"] {
	width:80%;
	color:red;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	padding:20px 10px;
	text-align:center;
	background-color:#ccc;
}

div[id^="spectrogram-"] {
	border:1px solid #ddd;
	background-color:#eee;
	width:600px;
	height:426px; /* see .loadingText */
	margin-left:auto; 
	margin-right:auto;
}

div[id^="spectrogram-"] img {
	width:100%;
    cursor: pointer;
}

div[id^="spectrogram-"] .loadingText { 
	font-size:20px;
	text-align: center;
	vertical-align: middle;
	line-height: 426px; /* same as height of enclosing div */
}

[class^="fullScreen-"] {
    cursor: pointer;
}

.readMore {
	margin-top:0px;
	text-align:right;
	font-style:italic;
}



#muteButton{
	display:block;
	float:left;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
   	border-radius: 8px;
	height:30px; 
	width: 30px;
	background-position: center;
/*	background-color:#151517;*/
	/*
	margin-left:10px;
	margin-top:20px;
*/
}


#article,
#invisibleArticle {
	min-height:300px;
/*
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
   	border-radius: 15px;
*/
   	padding:2em 2em 2em 2em;   	
   	
    text-align: justify;
}
#article {
/*	background-color:#fafafa;*/
/*	background-color:#f0f0f0; */
}

#articleTitle {	
	font-size: 200%;
	text-align:left;
	margin:0 0 10px 0;
	line-height:1em;
}
.chapter {
	margin-bottom:2em;
}

ul,
ol,
dl {
	margin:1em 1em 1em 1em;
}
		
ul ul,
ol ol,
ul ol,
ol ul,
dl dl,
dl ul,
dl ol {
/*	margin:0; this was weird*/
	margin-top:0;
}

ul {
	list-style-type:none;
}

ul.stationList li {
	margin-bottom:20px;
}
	
li {
	padding:0 0 5px;
}
ul li {
/*	padding-left:10px;*/
/*	list-style:disc;*/
}
ol li li {
	margin-left:10px;
}

li li {
	margin:0;
}
	
dt {
	font-weight:bold;
/*	margin-left:10px; */
	margin-top:1em;
}

dd {
	padding-left:10px;
	padding-bottom:5px;
/*	margin-left:1em;*/
}

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 200px;
  text-align:right;
}


h1 {
	font-size: 140%;
	font-weight:bold;
	margin-bottom:1em;
}
h2 {
	font-size: 125%;
	font-weight:bold;
	margin-bottom:1em;
}

b {
	font-weight:bold;
}
em, i {
	font-style:italic;
}
a.offsite {
	background:url("/resources/symbols/offsite-blue.gif") top right no-repeat ;
	padding:0 8px 0 0;
	min-height: 15px;
	height:auto !important; height: 15px; /*ie6 min-height 'fast-hack' */
}
.noarrow {
	background-image:none !important;
	padding-right:0 !important;
}

a:visited {
	color:#111;
}	
a[href] {
	color:#111;
	text-decoration:none;
	border-bottom: 1px dotted #555;
}
.imageLink {
	border-bottom:none !important;
}

a[href]:hover {
	background-color:#e3e3e3;
}


.tooltip:hover {
	cursor:help;
}

.buttonLike[href] {
	font: bold 10px Arial;
	text-decoration: none;
	background-color: #EEEEEE;
	color: #333333;
	padding: 2px 6px 2px 6px;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333 !important; /* !important to override .audioPlayer's styling */
	border-left: 1px solid #CCCCCC;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.buttonLike:hover {
  background-color: #ccc;
}

a.follow_me, 
a.follow_me[href]:hover {
	background-color:inherit;
}

a.imglink {
	outline: none;	
	border: none;
}

/* images */
.framed,
.unframed,
.unframedleft,
.unframedright,
.framedleft,
.framedright,
.framedcenter,
.unframedcenter {
	text-align:center;
	margin-left:2em;
	margin-right:2em;
}

.unframedleft,
.framedleft {
	float:left;
}
.unframedright,
.framedright {
	float:right;
}
.framed img,
.framedleft img,
.framedright img,
.framedcenter img
{
	padding:2px;
	border:1px solid #9FC2FF;
}
.caption {
	font-size:80%;
	line-height:150%;
	font-style:italic;
	text-align:center;
	margin-top:5px;
}
/* end images */

.statusDot {
	display:inline-block;
	width: 12px;
	height: 12px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#ccc;
}


p {
	margin-bottom:1em;
}
.cite {
	font-style:italic;
	font-size:.9em;
	display:block;
	margin:1em 10% 0 30%;
	text-align:left;
}
		
.cite:before {
	content: "\2014 \0020";
}
div.quote,	
blockquote {
	border-left:2px solid #eee;
	padding-left:1em;
	margin-left:21px;
	color:#343434;
	margin-bottom:1em;
}
.clear { 
	clear:both;
    content:"";
	height:0;
	line-height:0;
	font-size:1px;
	}

.hint {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
a.hint:hover {
	font-weight:normal;
}


/* nav divs for Stream.html */
.streamNavContainer {
	background-color:#fccc5d;
	height:25px;
}
#streamNav {
	height:2em;
	width:100%;
	margin:0 auto; /* center the div */
}
#streamNav a[href] {
	border:none;
}
#streamNav table {
    margin:0 auto; /* center the table*/
}
#streamNav table a{
	display:block;
}
.prevStream,
.thisStream,
.nextStream {
	text-align:center;
	width:70px;
	padding: 0 5px 0 5px;
}
.thisStream {
	width:25px;
	font-weight:bold;
}
.nextStream a[href]:hover,
.nextStream td:hover,
.prevStream a[href]:hover,
.prevStream td:hover,
.dotDotStream td:hover,
.dotDotStream a[href]:hover
 {
	background-color:#eabb56;
	font-weight:bold;
}
.dotDotStream {
	text-align:center;
	width:20px;
	padding: 0 5px 0 5px;
}

div.chapter + div.tracer {
	margin-bottom:2em;
}

div.tracer {
	display:block;
	height:18px;
	width:100%;
	background:url("/resources/symbols/trace-dingbat-red.png") center repeat-x;
}
#copyright {
	margin:10px 10px;
	text-align:right;
	color: #888;
	font-size:70%;
}
#copyright > a,
#copyright > a:visited
{
	color: #888;
	background-color:inherit;
}
/* footnotes, etc. */
div.notes {
	margin: 3em 20px 2em 20px;
	padding:1em;
	background-color:#f0f0f0;
	border:1px solid #ccc;
}
div.notes h1 {
	font-size: 120%;
}

div.notes dl {
	padding: 1em 0 1em 2em;
	font-size: 90%;
	margin: 0 0 1em 0;
}
div.notes dl dt {
	font-weight:normal;
	float:left;
	margin-top: 0;
	margin-left:-1em;	/* for hanging indent */
	margin-right:0.3em; /* space between the following <dd>*/
}
div.notes dl dd
{
	margin:0 0 .3em 0;
	padding-left:0;
	text-indent:0;
}

.note {
	margin-top:1.5em;
}
.noteTag { 
}
/* end footnotes */

.alert {
	color:red;
	font-weight:bold;
}

div.archiveItem {
	clear:both;
	width:100%;
	min-height: 100px;
	margin-top:30px;
}

.archiveItem #nav {
	width:500px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}
.archiveItem #nav #prev,
.archiveItem #nav #current,
.archiveItem #nav #next {
	display:inline-block;
}
.archiveItem #nav #prev,
.archiveItem #nav #next {
	width:80px;
	font-weight:bold;
	font-size:120%;
}
.archiveItem #nav #current {
	width:300px;
}

#current .durationString {
	font-weight:normal;
}
#current .nowString {
	font-weight:bold;
}
.archiveItem #nav #prev {
	text-align:right;
}
.archiveItem #nav #next {
	text-align:left;
}
.noLink {
	color:#ddd;
}

div.archiveItem div.audio {
	min-height: 10px;
	min-width:200px;
	margin:auto;
	float:right;
}
div.archiveItem div.info {
	min-height: 10px;
}
div.archiveItem .theSpectrogram {
	min-height: 100px;
	width: 600px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

div.prevNextArchivalItem {
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
div.spectrogramMissing,
div.eventListMissing {
	width:600px;
	margin-left:auto;
	margin-right:auto;
    padding: 60px 0;
	border:1px solid #000;
	text-align:center;
	font-style:italic;
	background-color:#ccc;
}

.error {
	color:red;
	font-weight:bold;
}
.errorMessage {
	width:100%;
	color:red;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	padding:20px 10px;
	text-align:left;
	background-color:#ccc;
	border:1px solid #cc0000;
}

/***********************
 audio player stuff 
 ***********************/
.playStream {
 	border: 1px solid #999;
	margin:5px 10px 5px 0px;
	background-color:#ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
   	border-radius: 5px;
}
.playArchiveContainer {
	display: flex;
  	justify-content: center;  /* Horizontal centering */
  	width:100%;
}

.playArchive {
	border: 1px solid #ccc;
	margin:5px 5px 5px 5px;
	margin-top:20px;
	background-color:#ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
   	border-radius: 5px;
   	width: 60px;
   	height:30px;
}
.audioPlayer {
	width:28px;
	margin-left:auto;
	margin-right:auto;
}
.audioPlayer:hover {
	cursor:pointer;
}
.playArchive .audioPlayer {
	float:left;
}
.playStream a[href] ,
.playArchive a[href]  { /* undo the formatting applied earlier in this .css */
	border-bottom: none;
	background-color:inherit;
}
.download {
	padding-left:10px;
	width:16px;
	overflow: hidden;
	position:relative; /* prevent wrapping to below previous div*/
	top:4px;
}

/* There's bug in MediaElement.js that causes "NaN:NaN" to display in the duration field when streaming
(not, however, when playing audio files). Quick'-n-dirty kludge: hide the duration field.*/
.mejs-duration {
	display:none;
}

#controlsContainer {
	display: flex;
  	justify-content: center;  /* Horizontal centering */
  	width:100%;
}

div[id^="controls-"] {
	width:75px;
	padding-left:5px;
	padding-right:5px;
	text-align:center;
	margin-bottom:20px;
}
div[id^="controls-"]:hover {
	cursor:pointer;
}



div.eventList,
div.exceptionList {
	margin-left:20px;
	clear:both;
	font-family:monospace;
	white-space:pre;
	font-size:70%;
	line-height:100%;
}

/*****************  calendar-traditional *****************/
.calendar-traditional {
	font-size:8pt;
	font-family:Verdana;
}
.calendar-traditional .titleLine {
	text-align:center;
	margin-bottom:10px;
	font-family:Verdana; 
	font-size:18pt; 
	color:#ff9900;
}

fieldset.stationSummary {
	border: 2px solid #ccc;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
}

.stationSummary legend {
	font-size:130%;
}

table.station {
}

table.centered {
	margin:0 auto;
}

table.sensor,
table.sensor-gist
{
	border:1px solid #5ba1f7;
	margin-bottom:5px;
	background-color:#eee;
}
table.sensor a[href],
table.sensor-gist a[href] {
}
table.sensor a[href]:hover,
table.sensor-gist a[href]:hover {
	background-color:#ddd;
}
table.sensor td.value,
table.sensor-gist td.value
{
	padding-right:10px;
}
table.sensor td.item,
table.sensor-gist td.item
{
	padding-left:10px;
}

table.stream {
	border:1px solid #5ba1f7;
	margin-bottom:5px;
	background-color:#eee;
}
table.stream a[href]:hover {
	background-color:#ccc;
}
.streamChunk table td.value,
table.stream td.value {
	text-align:left;
}
table.stream tr:first-child td {
	padding-top:10px;
}
.streamChunk .item,
.station .item,
.sensor .item,
.sensor-gist .item,
.stream .item {
	text-align:right; 
	padding-right:5px;
}
.streamChunk .value,
.station .value,
.sensor .value,
.sensor-gist .value,
.stream .value {
	
}

table.streamStatus {
	border:1px solid #5ba1f7;
	margin-bottom:5px;
	background-color: #eee;
}
table.streamStatus a[href]:hover {
	background-color:#ddd;
}
table.streamStatus td.value {
	text-align:center;
}

/* invisibilize incoming CC stream info polling responses */
[id^=cc_strinfo_server_],
[id^=cc_strinfo_source_],
.invisible {
	display: none;
}
.streamChunk {
	margin-bottom:20px;
}

.streamDown {
	color: #999;
}
.streamUp {
}

table.streamThumbnailLink2 {
	text-align: center;
	border-collapse:collapse
}
table.streamThumbnailLink2 td.image {
}
table.streamThumbnailLink2 td.text {
	vertical-align: top;
}
table.streamThumbnailLink2 tr {
}
table.streamThumbnailLink2 tr:not(.spacer) {
	cursor:pointer;
	background-color:#ddd;
/*	border:1px solid #5ba1f7;*/
	border:1px solid #abccf4;
}
table.streamThumbnailLink2 td.spacer {
	height:10px;
	cursor:default;
}
.streamThumbnailLink2 .image {
	width:210px;
	display:inline-block;
	padding:10px;
}

.streamThumbnailLink2 .text {
	padding-left:5px;
	padding:10px;
	font-size:120%;
}
.streamThumbnailLink2 p {
	margin:5px;
}
.streamThumbnailLink2 p.signalType {
}
.streamThumbnailLink2 p.stationLoc {
	font-weight:bold;
}
.streamThumbnailLink2 p.speedup {
}
.streamThumbnailLink2 p.streamName {
	font-size:70%;
}





.streamThumbnail1 {
	background-color:#ddd;
	border:1px solid #5ba1f7;
	float:left; /* to allow it to adjust its dimensions to those of its children */
	cursor:pointer;
	min-width:500px;
	margin-bottom:20px;
	padding:0;
	display:table-cell;
	vertical-align:middle;
	text-align: center;
}
.streamThumbnail1 .image {
	display:inline-block;
	padding:10px;
	float:left;
}

.streamThumbnail1 .text {
	float:left;
	display:inline-block;
	padding-left:5px;
	padding:10px;
	font-size:120%;
}
.streamThumbnail1 p {
	margin:5px;
}
.streamThumbnail1 p.signalType {
}
.streamThumbnail1 p.stationLoc {
	font-weight:bold;
}
.streamThumbnail1 p.speedup {
}
.streamThumbnail1 p.streamName {
	font-size:70%;
}

.stream td,
.streamStatus td,
.sensor td,
.sensor-gist td {
	padding:4px;
}
.stream th,
.streamStatus th {
	text-align:center;
	font-weight:bold;
	padding:4px;
}


.calendar-traditional table {
	margin-left:auto;
	margin-right:auto;
}
.calendar-traditional td {
	text-align: center;
	padding:5px;
}
.calendar-traditional .year
{
	font-family:Verdana; 
	font-size:18pt; 
	color:#ff9900;
}
.calendar-traditional .month
{
	width: 25%;
	vertical-align: top;
}
.calendar-traditional .month table {
	font-size:8pt;
	font-family:Verdana;
}
.calendar-traditional .month th {
	text-align: center;
	font-size:12pt;
	font-family:Arial;
	color:#666699;
}
.calendar-traditional .month td {
	font-size:8pt;
	font-family:Verdana;
}
.calendar-traditional .month .days td {
	color:#666666;
	font-weight: bold;
}
.calendar-traditional .month .sat {
/*	color:#0000cc;*/
}
.calendar-traditional .month .sun {
/*	color:#cc0000;*/
}
.calendar-traditional .month .today {
	border:1px solid green;
/*	color: #ffffff;*/
}
.calendar-traditional .hasData {
	font-weight:bold;
}
.calendar-traditional .hasData a[href] {
	border-bottom:none;
}
/**********************************/



/*****************  calendar-horizontal *****************/
.calendar-horizontal {
	margin-top: 30px;
	margin-left:0;
	margin-bottom:30px;	
	font-size:8pt;
	font-family:Verdana;
}
.calendar-horizontal .titleLine {
	text-align:center;
	margin-bottom:10px;
	font-family:Verdana; 
	font-size:18pt; 
	color:#000000 /*ff9900;*/
}
.calendar-horizontal table {
	table-layout: fixed;
	white-space: nowrap;
	width:100%;
    border-spacing: 0px;
    border-collapse: separate;
}
.calendar-horizontal td.dayNumber {
	width:10px;
	font-weight:bold;
	font-size:6pt;
}

.calendar-horizontal td.monthName {
	width:3em;
	font-weight:bold;
	text-align:right;
}

.calendar-horizontal table, 
.calendar-horizontal td 
{
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	padding:5px;
}
.calendar-horizontal td.day,
.calendar-horizontal td.today {
	padding:1px;
	border:0px solid #ffffff;
}
.calendar-horizontal td.hasProgram {
	cursor:pointer;
}
.noData {
	background-color: #000000;
	color: #ffffff;
}
.noProgram {
	background-color: #ffffff;
	color: #000000;
}
.future {
	background-color: #ffffff; 
}


/**********************************/

.rmsColorScale {
	display:inline-block;
}


.infoWindow {
	height:100%;
	overflow:hidden;
	line-height:1.5em;
	background-color:#ddd;
	border:1px solid #abccf4;
	cursor:pointer;
}

.infoWindow table {
}
.infoWindow table td.text {
	vertical-align: top;
}
.infoWindow p {
	line-height:80%;
}
.infoWindow td {
	display:inline-block;
	padding:10px;
}

/**********************************/
#mapKey {
	width:100px;
	background-color:#eee;
	padding:5px;
	border:1px solid #ccc;
}
#mapKey caption {
	font-weight:bold;
}
#mapKey table {
}
#mapKey table th {
	font-weight: bold;
}

#mapKey table td.item {
	padding-right:10px;
}
#mapKey table td.value {
}
/**********************************/

/**********************************/
.tile1 {
	width:220px;
	height:220px;
	background-color:#ccc;
	margin:2px;
	float:left;
	text-align:center;
	cursor:pointer;
	display:block;
}
.tile1:hover {
	border:1px solid #aaa;
	background-color:#e3e3e3;
    box-shadow: 0px 0px 5px #777;
	margin:1px;
}

.tile1 img {
	width:210px;
	height:150px;
	margin-top:5px;
}
.tile1 .label {
	font-size:80%;
	padding:5px;
}
.tile1 .streamID,
.tile1 .station {
/*	font-weight:bold;*/
	text-transform: uppercase;
}
.tile1 .location,
.tile1 .signalType {
}
.more {
	line-height: 200px;
	text-align: center;
	background-color:#eee;
}
/**********************************/


/**********************************/
#viewMenu {
	width:160px;
	margin:0 auto;
	float:right;
	padding-left: 100px;
}
#viewMenu:after {	/* new clearfix hack */
  content: "";
  display: table;
  clear: both;
}
#viewMenu [id^=view] {
	float:left;
	background-size: 30px 30px;
    height: 30px;
    width: 30px;
    cursor:pointer;
    margin-left:5px;
    margin-right:5px;
    padding:5px;
}
#viewMenu [id^=view].selected {
	background-color:#ddd;
}
#viewMenu [id^=view]:hover {
    box-shadow: 0px 0px 5px #777;
}

#viewTile {
    background:url("/resources/symbols/view-grid.gif") no-repeat center center;
}
#viewMap{
    background:url("/resources/symbols/view-map.gif") no-repeat center center;
}
#viewGlobe {
    background:url("/resources/symbols/view-globe.gif") no-repeat center center;
}
/**********************************/

.vStream img {
	float:left;
	margin-right:10px;
	padding:2px;
	border:1px solid #abccf4;
}

/* apply stripes to the sortable table */
table.sortable tbody tr:nth-child(2n) td {background: #ddd;}
table.sortable tbody tr:nth-child(2n+1) td {background: #eee;}