/* modifies basic.css, for use with resp template - used even when page isn't enabled for responsive */

input#nav_toggle, label#nav_label {
	display:none;
}
input#search_toggle, label#search_label {
	display:none;
}
#searchterm {
	background-image:none; /* done with palceholder now! */
}
#searchoptions {
	display:none;
	width:280px;
	text-align:left;
	color:#000066;
	font-weight:normal;
	padding:8px;
}

#searchterm:focus ~ #searchoptions, #searchoptions:hover {
	display:block;
	position:absolute;
	top:34px;
	right:30px;
        background-color:#eeeeff;
	z-index:10000;
}
#login {
	position:absolute;
	left:inherit;
	right:8em;
}
#login span.sep {
	padding: 0 7px;
}

.longLinks a {
	white-space:nowrap;
}

.tabHolder a, .tabHolder span {
	white-space:nowrap;
}

div.snippet640 {
	font-size:inherit;
	max-width:100%;
}
div.snippetexpander {
	left:inherit;
	right:20px;
}

.full-width {
	box-sizing:border-box;
	max-width:100%;
}

/* styling for a 66% resized photo*/
div.photo66
{
  max-width:90%;
}

/* some general new styling, mainly used for the photo page, overrides stuff in basic.css */

.numeric {
	font-family: "Times New Roman", Georgia, Verdana, Arial; /* Georgia not great for numbers */
        font-size: 1.05em;
}
.numeric .text {
	font-family: Georgia, Verdana, Arial, serif;
	font-size:1rem;
}

div.ccmessage {
	font-size:1.05rem;
}
div.ccmessage a {
	font-weight:600;
	text-underline-offset:3px;
}

abbr {
	text-underline-offset:0.2em;
}
.content_photowhite.photopage abbr[title] {
	text-decoration-color: silver;
}
.content_photoblack.photopage abbr[title] {
	text-decoration-color: #555;
}

.content_photowhite h3 {
	color:#666;
}
.content_photowhite div.statuscaption {
	color:#606060;
}

#footer p {
	font-size: 1em;
}

/* -------------------- */

.buttonbar { /* there is an existing buttonbar, which may need to check compatibltiy */
	background-color:inherit;
	padding:5px;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items:baseline;
	gap:6px;
	font-family: Georgia, Arial, sans serif; /* Georgia not great for numbers */
	max-width:1024px;
	margin:16px auto;
	-webkit-text-stroke: 0.2px blue;
}
.buttonbar li {
	background-color:#eee;
	border-radius:10px;
	flex: auto;
	list-style:none;
	text-align:center;
	padding:4px;
	overflow:hidden;
	text-overflow: ellipsis;
}
.buttonbar a {
	text-decoration:none;
}
.buttonbar select {
	background:none;
	border:0;
	color:blue;
	font-family: Georgia, Arial, sans serif;
	font-size:1.02em;
	max-width:300px;
	cursor: pointer;
	text-align:center;
}
.buttonbar select optgroup {
	color:gray;
	text-align:left;
}
.buttonbar select option {
	color:blue;
}
.buttonbar select option[value=""] {
	color:silver;
}
.buttonbar-dropdown button {
	background-color:#eee;
	border-radius:10px;
	padding:4px;
	border:0;
	color:blue;
	font-family: Georgia, Arial, sans serif;
	font-size:1.02em;
	cursor: pointer;
	text-align:center;
  min-width: 200px;
  width:100%;
}
.buttonbar-dropdown {
  display: inline-block;
  position: relative;
	flex: auto;
}
.buttonbar-dropdown-content {
  display: none;
  background: white;
  position: absolute;
  width: 100%;
  padding: 5px;
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
  z-index:1000;
}
.buttonbar-dropdown:hover .buttonbar-dropdown-content {
  display: block;
}
.buttonbar-dropdown-content a {
  display: block;
  padding: 5px;
  text-decoration: none;
}
.buttonbar-dropdown-content a:hover {
  color: black;
  background-color: silver;
}
.buttonbar-dropdown-content b {
  line-height: 1.8;
}

/* -------------------- */

.content_photoblack .buttonbar li {
	background-color:#333333;
        color:#bbbbbb;
}
.content_photoblack .buttonbar a {
	color:cyan;
}
.content_photoblack .buttonbar select {
	background-color:#333333;
	color:cyan;
}
.content_photoblack .buttonbar select option {
	color:cyan;
}

/* -------------------- */

.content_photogray .buttonbar li {
	background-color:#cccccc;
        color:#444444;
}
.content_photogray .buttonbar a {
	color:#2E9AFE;
}
.content_photogray .buttonbar select {
	background-color:#cccccc;
	color:#2E9AFE;
}
.content_photogray .buttonbar select option {
	color:#2E9AFE;
}

/* -------------------- */

.tagbar {
	margin-top:10px;
	text-align:center;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tagbar a {
	border-radius:4px;
	text-decoration:none;
}
.tagbar small {
	color:gray;
	font-style:italic;
}
.tagbar > * {
	white-space:nowrap;
}

/* -------------------- */
/* move to simpler style for the rastermap */

div.rastermap {
	border:none;
	padding:0;
	margin:0 auto;
}
div.rastermap img[name=tile] {
	border:1px solid silver;
}
div.rastermap .footnote {
	background:none;
	color:gray;
        font-style:italic;
	padding:3px;
	text-align:center;
}

/* Change fonts for title and comment boxes */

input[type="text"][name="title"] {
        font-family: Georgia, Verdana, Arial, serif;
}
textarea[name="comment"] {
        font-family: Georgia, Verdana, Arial, serif;
}


/*div.photoguide modifications*/
div.photoguide
{
	max-width:90%;
  width:auto;
  display: grid;
  grid-template-areas:
    'photoguide-inner photoguide-desc';
  grid-template-rows: max-content;  
  grid-template-columns: 213px 1fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: 0;
  margin-bottom: 5px;
}
@media all and (max-width: 800px) {
  div.photoguide {
  grid-template-areas: 
    'photoguide-inner'
    'photoguide-desc';
  grid-template-rows: max-content max-content;
  grid-template-columns: 1fr;
  }
}
div.photoguide .inner {
	float:none;
  width:auto;
  grid-area: photoguide-inner;
}
div.photoguide .desc {
	float:none;
	max-width:90%;
  width:auto;
  grid-area: photoguide-desc;
}
div.photoguide .sdblock {	
  font-size: 0.8em;
}
div.photoguide .caption {	
  font-size: 0.8em;
  margin-bottom: 2px;
}