@charset "UTF-8"; 
 
 /* put basic styles here for all sites; tweak the style in styles.css for each site if needed */
 
 /* Resets all of the default html styles. 
 sites have been created to follow this; leave in*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,  acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 background: transparent;
 text-decoration: none;
 }
 
 body {
 font-family: Helvetica, Arial, sans-serif;
 color: #333333;
 font-size: 0.625em; 
 background: white;
 } 
 
 h1 {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 2.4em;
 margin-top: 1em;
 margin-bottom: .2em;
 font-weight: lighter !important;
 }  
h1 strong {
 font-weight: lighter !important;} 
h1:first-of-type {margin-top: 0;}

 h2 {
 font-family: Georgia, "Times New Roman", Times, serif;
 line-height: 1.4em;
 font-size: 2em;
 color: #222222;
 font-weight: lighter !important;
 margin: 1em 0 0 0;
 }
h2 strong {
 font-weight: lighter !important;}
 h2 a { color: #222222; text-decoration:none; }
 h2 a:hover { color: #821c08; text-decoration:underline; }

 h3 {
 font-size: 1.6em;
 line-height: 1.25em;
 margin: 2em 0 0 0;
 color: #222222;
 font-weight: lighter !important;
 }
 
h3 strong {
 font-weight: lighter !important;}
 h3:first-of-type {margin-top: 1em;}

 h4 {
 font-size: 1.4em;
 line-height: 1.2em;
 margin: 0.425em 0 0 0;
 color: #222222;
 font-weight: lighter !important;
 } 
h4 strong {
 font-weight: lighter !important;}
 h5 {
 font-size: 1em;
 line-height: 1em;
 margin: 0.425em 0 0 0;
 color: #222222;
 } 
 p {
 font-size: 1.2em;
 line-height: 1.6667em;
 margin: 0 0 1.6em 0;
 }
 p+ul { margin-top: -1.6em;}


/* breaking text into two columns on very wide screens
didn't work well
 @media all and (min-width: 1824px) {
#content-left{column-count: 2; }
li {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  
}
h1, h2, h3 {column-span: all;}
} */

 
 a { color: #4d617a; text-decoration: underline; }
 a:hover { color: #821c08; text-decoration: none; }
 
 ul, ol {margin-bottom: 1em; }/* matches p */

 ul {
 list-style-type: disc;
 list-style-image: inherit;
 list-style-position: inside; 
 } 
 li {
 font-size: 1.2em;
 line-height: 1.6667em;
 margin: 0.4em 0.4em 0.4em 1.4em;
 list-style-type: square;
 }
 ul li { 
 list-style: disc outside;
 margin-left: 1.4em;
 margin-top: 0.3em;
 } 
 ul li li { list-style-type: disc;  font-size:inherit; }
 
 ul li ul {  margin: 0 0 0 0; }
 ul li ul li { 
 list-style-type: square;
 margin: 0 0 0 1.4em;
 font-size:inherit;
 }
 ol li {
 font-size: 1.2em;
 line-height: 1.6667em;
 margin: 0.4em 0.4em 0.4em 1.4em;
 list-style-type: decimal;
 } 
 ol li li {
 list-style-type: lower-alpha;
 margin: 0 0 0 1.4em;
 font-size:inherit;
 } 
 ol li li li { 
 list-style-type: lower-roman;
 margin: 0 0 0 1.4em;
 font-size:inherit;
 } 

 dt {
 margin-top: 1.5em;
 padding-top: 1em;
 font-weight: bold;
 }
 dl {margin-left: 2em; }
 
 blockquote, q { quotes: none; }
 blockquote { margin: 0 2em 0 2em; }
 
 img {max-width: 98%; height: auto;}
 
 sup, sub { 
 vertical-align: 0;
 position: relative; 
 font-size: 70%;}
 sup { bottom: 1ex; }
 sub { top: 0.8ex; }  

abbr {text-decoration: }/* replaces acronym tag */

br.cb { clear: both; }

#header-outer { background-color: #eeeeee; color: black;  }	

#header-inner { width: 98%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; text-align: left;}	

#header-right { margin-left: auto; text-align: right; max-width: 30%; color: white; }
#header-right a { color: white; }

#headerprint {display: none;}

/* menu outer, inner, nav, navlist not in tes; menu outer, inner used on db pages */
 #menu-outer { 
 background: url(https://genomicscience.energy.gov/images_design/menu-back.gif) #ffffff center top repeat-x; 
 }
 #menu-inner { 
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0;
 }
 
 #nav { height: 37px; border-left: 1px solid #d3d4d3; }
 #navlist { display: flex;
 justify-content: center; 
 align-items: center; 
 }
 
 #navlist li { display: inline; list-style: none; }
 
 #navlist li a {
 display: block; 
 color: #4d617a;
 width: auto; 
 font-size: 1em /*14px*/; font-size: 1.1vw;
 border-left: 1px solid #ffffff;
 border-right: 1px solid #d3d4d3;
 text-decoration: none;
 font-size: 1.1em; font-size: 1.1vw;
 padding: 1em 1em 1em 1em;
 } 
 
 #navlist li a:hover { background: #607289; color:#ffffff; }
 #navlist li a.active {
 background: #607289; 
 color:#ffffff;
 border-bottom: 1px solid #607289;
 } 
 
 #content-outer { background: #ffffff; padding: 3em 3em 5em 3em; }
 
 #content-inner { 
 width: auto;
 margin: 0 auto;
 text-align: left;
 display: flex;
 flex-wrap: wrap; 
 justify-content: space-between; 
 align-items: flex-start;
border: thin transparent solid; /* without this, the content is in a very narrow column. don't know why */
 } 
 
 #defaulttitle { flex: 1 1 100%; }
 #content-left { flex: 1 1 66%;  max-width: 66%; margin: 1em 1em 1em 0;}
 #content-right {
 flex: 1 1 26%;
 max-width: 26%;
 margin: 0 1em 1em 1em;
 display: flex; 
 flex-direction: column; 
 align-items: flex-start;
 }
 
 #content-right h2 {
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-size: 1.2em;
 }
#content-right p { margin: 0.4em 0.4em 1em 0.4em; padding:  0.4em 0.4em 0.4em 0.4em; }
 #content-right ul { margin-left: 0.2em; padding-left: 0; }
 #content-right li { margin-left: 1.5em; padding-left: 0; }
 #content-right ul li ul li { 
 list-style-type: disc;
 margin: 0px 0px 0px 0.8em;
 font-size: 1em; 
 }
 #content-right ol { margin-left: 0.2em; padding-left: 0; }
 #content-right ol li ol li {  margin: 0 0 0 0.8em; font-size: 1em;  }
 #content-right>div a { text-decoration: none;  }
#content-right .tabheaders li {
margin-left: 0;
font-size: 1em;
    font-size: 1vw;}

/* for hl accordian */
 .jumpyear {margin-bottom: 0.2em; margin-right: 0; margin-left: 1em; background-color:transparent; min-width: 4em;}
 .jumpyear:hover {color: red; cursor:pointer;}  
.funding {
  margin-left: 3em;  
  width: 100px;
  padding: 4px;
  overflow: hidden;  
  text-align: center;
  font-style:italic;
}
 
 #now-featuring, #newsparabox,  #now-featuringALT {
 background: #d0d8e3;
 border: 1px solid #b3bbc5;
 color: #505b6b;
 padding: 0.6em 0.6em 0.6em 0.6em; 
 width: 90%; 
 margin-top:1em;
 margin-right: 0.2em;
 margin-bottom: 3em;
 margin-left: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 border-radius: 1em;
 -o-box-shadow: 1em 1em 0.4em #888;
 -webkit-box-shadow: 1em 1em 0.4em #888;
 -moz-box-shadow: 1em 1em 0.4em #888;
 box-shadow: 1em 1em 0.4em #888; 
 }

 #now-featuringALT {background-color: transparent; color: #333333; border: medium #492606 solid;}	
 
 #now-featuring h2, #newsparabox h2, #now-featuringALT h2 { margin-bottom: 10px; }
 #now-featuring h3, #newsparabox h3, #now-featuring h4, #newsparabox h4, #now-featuringALT h3, #now-featuringALT h4 {
 font-size: 1.2em;
 line-height: 1.2em;
 color: #555555;
 font-weight: 600;
 margin-top: 0; margin-bottom: 0.4em;
 }

#now-featuringALT h3, #now-featuringALT h4 {  color: #333333;  }	

 #now-featuring p, #newsparabox p, #now-featuringALT p  {
 font-size: 1.2em;
 line-height: 1.5em;
 color: #555555;
 margin-top: 1.2em;
 }
#now-featuringALT p {  color: #333333; }

 #now-featuring table, #newsparabox table { margin: 1em 1em 1em 1em; max-width: 90%; }
 
 #now-featuring li, #newsparabox li, #now-featuringALT li {
 font-size: 1.2em;
 /*line-height: 1.5em;*/
 margin-left: 20px;
 list-style-type: square;
 color: #555555;
 } 
#now-featuringALT li { line-height: 1.5em; color: #333333; }	

 #now-featuring li ul, #newsparabox li ul, #now-featuringALT li ul {
 font-size: 0.8em;
 line-height: 1.2em;
 margin-left: 10px;
 list-style-type: circle;
 color: #555555;
 }
#now-featuringALT li ul { color: #333333; }	

 #now-featuring img, #newsparabox img, #now-featuringALT img  {border: 1px solid #ffffff;}
 #now-featuring a:hover, #newsparabox a:hover {text-decoration: underline;}
 
 #now-featuring-wrap, #now-featuringALT-wrap {
 margin: 10px 0;
 padding-bottom: 10px;
 margin-right: 1em;
 border-bottom: 1px dashed #b3bbc5;
 /*display: block;*/
 display: flex;
 align-items: flex-start;
 } 
#now-featuringALT-wrap {  justify-content: space-between; }	
 #now-featuring-wrap:last-child, #now-featuringALT-wrap:last-child  {border-bottom: 1px none; }
 #now-featuring-wrap > div {padding: 1em 1em 1em 1em; }
 #now-featuring-left { max-width: 80px; width: 38%; }
 #now-featuring-right { width: 60%; }
#now-featuringALT-left { width: 30%; }
#now-featuringALT-right { width: 54%; }
 
#now-featuringALT a { color: #333333; }	
#now-featuringALT a:hover { text-decoration: underline; }	

/* change from id to class */
.now-featuring-wrap{   
padding: 0.4em 1em 0.4em 1em;    
height:auto;
overflow:auto;
}
.now-featuring-wrap li {line-height: 1.2em;}
.featureimg {border: thin gray solid; width: 30%; max-width: 80px;float: right;
margin: 0.4em 1em 0.4em 1em;  }

 /* used in tabs */

#tabs {width: 100%;}
 
 /*.listhl {padding-left: 0; margin-left: 0.2em; margin-right: 0.2em;}*/
 #idt p {margin-top: 0; margin-bottom: 0; padding-top: 0; line-height: 1.4em; font-size: 1em;}
 .dateright {margin: 1.4em 0 0 0;text-align: right;font-style: italic;}
 
 .list1 li, .list2 li, .list3 li, .list4 li {
 padding: 8px 0 8px 25px;
 border-bottom:1px dashed #b3bbc5;
 font-size: 1.2em;
 line-height: 1.5em;
 text-align: left;
 } 
 
 .list1 li:last-child, .list2 li:last-child, .list3 li:last-child, .list4 li:last-child {border-bottom: none;} 
 .list1 li a, .list2 li a, .list3 li a, .list4 li a {color: #4d617a; }
 .list1 li a:hover, .list2 li a:hover, .list3 li a:hover, .list4 li a:hover {text-decoration: underline;}
  
 table {
 border-width: thin thin thin thin;
 border-spacing: 0px;
 border-style: outset outset outset outset;
 border-color: gray gray gray gray;
 border-collapse: collapse;
 background-color: white;
 width: 100%;
 }
 th {
 border-width: 1px 1px 1px 1px;
 padding: 3px 3px 3px 3px;
 border-style: inset inset inset inset;
 border-color: gray gray gray gray;
 background-color: white;
 -moz-border-radius: 0px 0px 0px 0px;
 text-align: left;
 }
 td {
 border-width: 1px 1px 1px 1px;
 padding: 3px 3px 3px 3px;
 border-style: inset inset inset inset;
 border-color: gray gray gray gray;
 background-color: white;
 -moz-border-radius: 0px 0px 0px 0px;
 }
 
 table.noborder {
 border-width: 0px;
 border-spacing: 2px;
 border-style: none;
 border-color: gray;
 border-collapse: separate;
 background-color: transparent;
 }
 table.noborder th {
 border-width: 0px;
 padding: 0.3em 0.3em 0.3em 0.3em;
 border-style: inset;
 border-color: gray;
 background-color: transparent;
 -moz-border-radius: 0px 0px 0px 0px;
 }
 table.noborder td {
 border-width: 0px;
 padding: 0.3em 0.3em 0.3em 0.3em;
 border-style: inset;
 border-color: gray;
 background-color: transparent;
 -moz-border-radius: 0px 0px 0px 0px;
 }
 
 .summary {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 16px;
 line-height: 24px;
 }
 
 .searchbox {
 margin: 14px 0 6px 0;
 color:#555555;
 background-color:#d6dbe1;
 width:236px;
 text-decoration:none;
 font-size:14px;
 padding:8px 10px;
 border:1px #ffffff solid;
 }
 
  .photo-right { 
 width: 30%;
 float:right;
 padding: 0 0 1em 1em;
 margin: 0 0 1em 1em;
 max-width: 50%; 
 height: auto;
 text-align: center; 
 }
 
 .photo-left {
 width: 200px;
 float:left;
 text-align: center;
 padding: 0 1em 1em 0;
 margin: 0 1em 1em 0;
 max-width:98%; 
 height: auto;
 }
 
 .photo-full { 
 text-align:center;
 background:#eeeeee;
 padding: 1em 1em 1em 1em;
 margin: 1em 1em 1em 1em;
 max-width:98%; 
 height: auto;
 }

.subhead {font-size: 1.4; font-weight: bold;}

.horizontallist-p {display: flex; }
.horizontallist-p p {border-right: thin gray solid; 
padding 0 0 0 0;  
margin: 0 0 0 0; width: 100%;}

.horizontallist-p p:last-child {border-right: none;} 

 ul.horizontallist >li { 
display: inline-block;
padding-right: 1em; 
padding-left: 1em; 
margin: 0 0 1.2em 0;
border-right: thin gray solid;}

 ul.horizontallist >li:last-child {border-right: none;}

ul.nobullets>li {list-style-type: none !important; list-style: none !important;}

 .separator { 
 /*width: 70%; */
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin-top: 1em; 
margin-bottom: 1.2em;
 }
 
 /* used mainly for highlights lists */
 .divider {margin-top: 2.4em; margin-bottom: 0.4em; border: 1px lightgray dotted;}
 
 #id01 h3, #id01b h3 {margin-bottom:0; padding-bottom:0; padding-top:0em; padding-left: 2em; text-indent: -1.3em;}
 #id01 p, #id01b p {padding-left: 2em;}
 #id01 p+ul, #id01b p+ul { margin-top: -1.6em;}
 #id01 ul, #id01b ul {padding-left: 2em; margin-left: 2em; margin-top: 0; padding-top: 0;}
 
 .datestyle {font-size: 0.7em;padding-bottom:0;margin-bottom:0; font-weight: normal; line-height: 1.4em;}


 .photo-righthl {
 width: 40%;
 max-width: 220px;
 float: right;
 text-align: center;
 padding: 0.5em 0.5em 0.5em 0.5em;
 margin: 0.5em 0.5em 0.5em 0.5em;
 font-size: 0.8em;
 line-height: 0.8em; 
 clear: both;
 }
 .imgsizedtbhl {
 width: 100%;
 max-width: 100px; 
 max-height: 100px;
 /*height: 100px; */
 }



 
 .parentdiv, .gallerydiv { 
 background: white; 
 display: flex;
 flex-flow: row wrap; 
 width: 100%;
 justify-content: flex-start; 
 align-items: baseline; 
 align-content: flex-start;
 /*padding: 10px;*/
 } 
 
 .imgdetail{ border: none; 
margin: 0 0.4em 0.4em 0.4em; 
clear: both;
 height: auto;
 width: auto;
 border: thin dashed #DBDBDB;
 font-size: smaller;
 line-height: 95%;
 text-align: center;
 }
 .imgdetail img {width: 98%;} 
 
 .imgsizetinypublist
/* used in beris pubs table */ {
 width: 30px;
 height: auto;
 max-width: 30px;}
 
 .imgsizetiny {
 width: 50px;
 height: auto;
 max-width: 50px;}
 
 .imgsizedtb {
 width: 100px;
 height: auto;
 max-width: 100px; 
 max-height: 111px; 
 }
 
 .jump {
 text-align: right;
 padding-right: 30px;
 margin-right: 5px;
 margin-top: 0em;
 font-style: italic;
 }
 
 .newspara { 
 padding-top: 0px; 
 font-size: 1em; 
 color: #555555; 
 line-height: 1.5em; 
 margin-top: 1.2em;
 }
 
 .smalltext { line-height: 30%; font-size: 80%;}
 
 .note { color: Red; font-weight: bold; }
 
 .cap-letter {font-size: 2em; font-weight:bold;}

.announcementbox { background: #006137; border: 1px solid #b3bbc5; padding: 1em 1em 1em 20em; color: #FBF5F0; margin: 0 0 0 0; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; }
.announcementbox a { color: white; text-decoration: underline; }
 
 /* used mostly on home pages; not tes */
 .col-wrap {
 margin: 3em 0;
 padding-top: 3em;
 border-top: 1px solid #d0d8e3; 
 display: flex;
 flex-wrap: wrap; 
 }
 
 .col-wrap:last-of-type { 
 padding-bottom: 3em;
 border-bottom: 1px solid #d0d8e3;}
 
 .col-wrap > div { padding: 0.4em 1.2em 0.4em 1.2em;}
 .col-left {flex: 1 0 33%;}
 .col-right {flex: 1 0 60%;} 
 
 .img-border {
 background: #ffffff;
 padding: 1px;
 border: 9px solid #d0d8e3;
 }
 
 /* THREE COLUMN (SITE MAP) */
 #threecol { 
 display: flex;
 flex-wrap: wrap; 
 align-content: flex-start; 
 justify-content: space-between; 
width: 100%;
 }
 
 #threecol > div {
 flex: 1 1 30%;
 max-width: 30%;
 margin: 0.4em 0.4em 0.4em 0.4em;
 padding: 0.4em 0.4em 0.4em 0.4em;
 border-right: thin gray solid;
 } 
 #threecol > div:last-of-type {border-right: none;} 
 #threecol h2 { font-size: 1.6em; }
  
 /* two COLUMN */
 #halfpagemulti { 
 display: flex; 
 flex-direction: row;
 flex-wrap: wrap;
 align-items:baseline; margin-bottom: 2em; border-bottom: thin gray solid;
 } 
 #halfpagemulti>div { flex:0 1 46%; margin: 1em 1em 1em 1em; }
 
#centerall { margin-left: auto; margin-right: auto; width: 80%; }	

/* img with text beside; group img, text in separate plain <div> */
.lineupimg {display: flex; justify-content: flex-start; align-items: center; width: 100%; }


.agendatable {margin-bottom: 2em;}
 .agendatimecol {width: 16%; max-width: 16%;}
 
 /* original codes below; mostly used on cf pages */
 
 /* ck on these; mods of jquery stuff? */
 /*h1.nyroModalTitle {width: 50%;}*/
 .ui-datepicker-current { visibility:hidden}
 .styletable {margin-top:0; padding-top: 0;}
 
 .moveup {margin-top:0; padding-top: 0;}
 .movedown {margin-top:1em; margin-bottom:0;padding-bottom:0;} 
 
 .group {position:relative;margin-top: 1em;}
 hr.group {border-top: thin gray solid; width: 50%; text-align:left;}
 
 #accordion h4{ width: 50%;} 
 
 .btn {
 -webkit-border-radius: 1em;
 -moz-border-radius: 1em;
 border-radius: 1em;
 color: black;
 padding: 0.3em 1.2em 0.3em 1.2em;
 text-decoration: none;
 font-size:0.8em; 
 background: #f2f6f8;
 background: -moz-linear-gradient(-45deg, #f2f6f8 0%, #d8e1e7 39%, #b5c6d0 80%, #b5c6d0 80%, #e0eff9 100%);
 background: -webkit-linear-gradient(-45deg, #f2f6f8 0%,#d8e1e7 39%,#b5c6d0 80%,#b5c6d0 80%,#e0eff9 100%);
 background: linear-gradient(135deg, #f2f6f8 0%,#d8e1e7 39%,#b5c6d0 80%,#b5c6d0 80%,#e0eff9 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=1 );
 border: solid #5c595c 1px;
 }
 
 .btn:hover { background: #f2f6f8; text-decoration: none;}
 
 /* generic form; used on comments form */
 .form-outer {padding-left: 0; width: 70%; }
 
 .form-outer li,
 .form-inner {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 }
 .form-outer > li > label,
 .form-outer li p { 
 flex: 1 0 auto;
 width: auto;
 max-width: 50%;
 text-align: right;
 margin: 0.4em 0.2em 0.4em 0.2em ;
 }
 
 .form-outer > li > label + *,
 .form-inner { flex: 1 0 auto;}
 .form-inner li { width: auto;}
 .form-inner { justify-content: space-between;}
 
 .form-outer li button, .form-outer li input[type=submit] {
 margin-left: auto;
 padding: 8px 16px;
 border: none;
 background: #333;
 color: #f2f2f2;
 letter-spacing: .09em;
 border-radius: 2px;
 }
 .form-outer li> input[type=checkbox] { 
 cursor: pointer;
 height: 18px;
 width: 18px;
 background-color: #eee;
 vertical-align: bottom;
 padding-bottom: 0; margin-bottom: 0; padding-top: 2px;
 }
 
 .form-outer li> input[type=radio], .form-inner li> input[type=radio] { 
 cursor: pointer;
 height: 18px;
 width: 18px;
 background-color: #eee;
 vertical-align: bottom;
 padding-bottom: 0; margin-bottom: 0; padding-top: 2px;
 }
 .form-outer label { display: block; cursor: pointer;}
 
 /* change background color on alternating items */
 .altcolor1 {background-color: #f0f0f0;}
 .altcolor2 {background-color: #d4d4d4;}
 .altcolor3 {background-color: #e6e6e6;}
  
 /* used on bernews topics*/
 .flex-container {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-around; 
 align-items: stretch;
 }
 
 .flex-item {
 padding: 0.4em 0.4em 0.4em 0.4em;
 flex: 1 1 0px; 
 margin: 0.4em 0.4em 0.4em 0.4em;
 }
 
 .flex-item label {
 display: block;
 border-top: thin #98A4BA solid;
 padding: 0.1em 0 0.1em 0;
 margin: 0.2em 0 0.2em 0;
 cursor: pointer;
 padding-left: 30px;
 text-indent: -31px;}
 
 .flex-item label:last-of-type {
 border-bottom: thin #98A4BA solid;
 padding-bottom: 0.4em;}
 
 .flex-item input[type=checkbox] { 
 cursor: pointer;
 height: 18px;
 width: 18px;
 background-color: #eee;
 vertical-align: bottom;
 padding-bottom: 0; margin-bottom: 0; padding-top: 2px;
 }
 .flex-item input[type=radio] { 
 cursor: pointer;
 height: 18px;
 width: 18px;
 background-color: #eee;
 vertical-align: bottom;
 padding-bottom: 0; margin-bottom: 0; padding-top: 2px;
 }
 
 .flex-item input[type=submit] {margin-top: 0.4em;} 
 .flex-item img {width: 100%; }
 .flex-item a {text-decoration: none !important;}
 .flex-item h2 {font-family: Arial, Helvetica, sans-serif!important; text-transform: uppercase; font-size: 1.3em !important;}
 
 .imgflex { 
 margin: 1em 1em 1em 1em;
 padding: 1em 1em 0.4em 1em;
 flex: 1 1 auto;
 border: thin dashed #DBDBDB;
 text-align: center;
 font-weight: bold;
 }
 
 .imgflex>.desc, .imgflex>.desc p{font-size: 1em; line-height: 1.4em; font-weight: normal;}
 
  /* used in gallery */
 .genflexparent {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start; 
 align-items: flex-start; 
 align-content: flex-start;
width: 100%;
 }
 
 .genflexchild { 
 margin: 1em 1em 1em 1em;
 padding: 1em 1em 0.4em 1em;
 flex: 1 1 44%;
 max-width: 44%;
 }
 
 .genflexIMGparent {
 display: flex;
 justify-content: center; 
 align-content: flex-start;
 clear: both;
 }
 
 .choices2 { 
 min-width: 20px;
 min-height: 3em;
 text-indent: 0;
 height:auto !important;
 float: left;
 width: 150px; 
 margin: 5px 5px 5px 5px;
 padding: 0.2em 0.2em 0.2em 0.2em;
 border: 0.1em dashed #707070;
 text-align: center; 
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 overflow: visible;
 } 
 
 /* gallery */
 .parentpublist { 
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start; 
 align-items: baseline; 
 align-content: flex-start;
 } 
 
 
 .publist { 
 margin: 0.4em 0.4em 0.4em 0.4em;
 padding: 0.4em 1em 0.4em 1em;
 max-width: 30%;
 border: thin dashed #A5AABA; 
 display: flex;
 align-items: center; 
 }
 .publist ul {padding: 0.4em 0.2em 0.4em 0.2em ;}
 .publist > div { padding: 0.4em 0.4em 0.4em 0.4em; }
 .publist img {max-width: 75px;}
 
 .largedark { border: 0.1em dashed #A5AABA; font-size: 1.2em; }
 
 /* to use tooltip: <span class="tooltip">visible text <span class="tooltiptext"> text on hover</span></span> */
 /* Tooltip container */
 .tooltip { 
 position: relative;
 display: inline-block; 
 border-bottom: 1px dotted black; 
 }
 
 /* Tooltip text */
 .tooltip .tooltiptext {
 visibility: hidden;
 width: 50%; 
 bottom: 100%; 
 left: 50%;
 min-width: 300px; 
 background-color: #CCC;
 color: black;
 padding: 0.4em 0.4em 0.4em 0.4em;
 border-radius: 6px; 
 position: absolute;
 z-index: 1;
 } 
 .tooltip:first-of-type:before{ content: "["; }
 .tooltip:last-of-type:after{ content: "]"; margin-left: 0.2em; }
 .tooltip .tooltiptext a{ color: black;}
 .tooltip:hover .tooltiptext { visibility: visible;} 
 
 
 /* tabbed box css 
 #content-right part nec or will be overwritten by more specific css above
 */
 
 #content-right .tabberlive .tabbertabhide { display:none;}
 #content-right .tabberlive { margin-top:1em;}
 
 #content-right ul.tabbernav
 {
 margin:0;
 padding: 3px 0 0 0;
 border-bottom: 1px solid #778;
 }
 
 #content-right ul.tabbernav li
 {
 list-style: none;
 margin: 0;
 display: inline;
 }
 
 #content-right ul.tabbernav li a
 {
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 text-decoration: none;
 -moz-border-radius-topright: 0.5em;
 -moz-border-radius-topleft: 0.5em; 
 -webkit-border-top-left-radius: 0.5em;
 -webkit-border-top-right-radius: 0.5em;
 border-top-left-radius: 0.5em;
 border-top-right-radius: 0.5em; 
 background: #e8ebef;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 font-size: 1em;
 color: #505b6b;
 }
 
 #content-right ul.tabbernav li a:link { color: #505b6b; }
 #content-right ul.tabbernav li a:visited { color: #667; }
 
 #content-right ul.tabbernav li a:hover
 {
 color: #000;
 background: #e8ebef;
 border-color: #227;
 }
 
 #content-right ul.tabbernav li.tabberactive a { border-bottom: 1px solid #d0d8e3; background-color: #d0d8e3;}
 
 #content-right ul.tabbernav li.tabberactive a:hover
 {
 color: #000;
 background: #e8ebef;
 border-bottom: 1px solid #e8ebef;
 }


 
#footer-print { display: none; }

#footer-outer {  height:100%; border-top: medium solid #8e8e8e;  display: flex; justify-content: center; 
/* link to gradient http://www.colorzilla.com/gradient-editor/#f6f6f6+0,d3d3d3+34,f1f1f1+68,ffffff+100 */
background: rgb(246,246,246);
background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(211,211,211,1) 34%, rgba(241,241,241,1) 68%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(211,211,211,1) 34%,rgba(241,241,241,1) 68%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(211,211,211,1) 34%,rgba(241,241,241,1) 68%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0 );
}
 #footer-outer h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.2em; color: #4d617a; font-weight: lighter; }
#footer-outer p { font-size: 1.2em; line-height: 1.6667em; margin: 0.8333em 0; }
#footer-outer a { text-decoration: underline; color: #4d617a; }

#footer-inner { width: auto; padding: 2em 2em 2em 2em; margin: 0 0 0 0; text-align: left; height:100%; flex: 1 1 auto; display: flex; justify-content: space-between; }
#footer-inner > div { width: 30%; float: none; padding: 0.4em 0.4em 0.4em 0.4em; }

 /* jquery ui tweaks for HLs */
 
 #id01 .ui-widget-content, #id01b .ui-widget-content {border: none !important;}
 #id01 h3.detailstoggle, #id01b h3.detailstoggle {font-size: 1.4em !important; height: 100%; font-weight: 530 !important;}
 #id01 .ui-state-default, #id01b .ui-state-default {background: none !important; border: none !important;}
 
 
 
 
 @media all and (max-width: 800px) {

 #menu-outer {background-image: none; margin-right: 1em; float: right; clear: left; width: 20%; }
 #container {display: flex;
 flex-direction: column;
 justify-content: flex-end; 
 align-items: flex-end;}
 
 #menu-outer {width: 100%;}
 #navlist { display: flex;flex-wrap: wrap;}
 
 #navlist li a { font-size: 0.8em; }
 
#content-right, #content-left {width: 100%;flex: 0 1 auto; max-width: none;}
 
 #content-inner {display: flex;
 flex-direction: column;
 justify-content: flex-end; 
 align-items: flex-end;
 width: 100%;
 max-width: none;}
 
 #content-inner >div { width:100%; ;} 
 #footer-inner {flex-direction: column;}
 #footer-inner > div { width: 100%;}
 
 .col-wrap {flex-direction: column; } 
 .col-left {flex: 1 0 100%;}
 .col-right {flex: 1 0 100%;} 
 
 #threecol {display: flex;
 flex-direction: column;
 justify-content: flex-end; 
 align-items: flex-end;
 width: 100%;
 max-width: 100%;}
 
 #threecol >div { width: 100%;flex: 0 1 auto; max-width: 100%; 
 border-right: none;} 


.lineupimg {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; }

.lineupimg>div:first-of-type {min-width: 100% !important; width: 100% !important;}

.genflexchild {max-width: none;}

.ui-tabs-anchor {font-size: 3em;}


  .photo-right, .photo-left, .photo-full, .photo-righthl { 
 width: 98% !important;
 float:none !important;
 max-width: 98% ; 
 padding: 0.2em !important;
 margin: 0.2em !important;
 background:#eeeeee;
 } 
 

input[type=text], select, textarea, input[type=file] {width: 100%;}

 }/* end media query */
  

@media print {
 #content-outer, #content-inner, #content-right, #content-left,
 #footer-outer, #footer-inner, #footer-left, #footer-middle, #footer-right
 {width: 90%; display: block; max-width: 90%;}
.hideforprint {display: none;}


 }/* end print media query */