/*Common styles*/
body, div, p, td, ul, li, a, form { color: #000000; font-family: "Open Sans",sans-serif; font-size: calc(0.7em + 0.33vw); }
body { background-color: #eeeeee; }

/*Large header for pages like Opportunities and FAQ*/
#header { display: flex; flex-direction: column; flex-wrap: nowrap; flex-shrink: 1; flex-grow: 0; max-width: 95vw; border: 1px solid maroon; border-bottom: 1px solid #ccc; margin: 0 auto; background-color: white; }
#header img { width: 100%; max-height: 200px;}
#header img.tall { max-height: 283px; }
#content { display: flex; flex-wrap: wrap; flex-direction:row; justify-content: center; align-items: flex-start; flex-shrink: 1; border: 1px solid maroon; border-top: none; max-width: 95vw; background-color: #ffffff; margin: 0 auto; }
#leftbar {order:1; flex-basis:220px; flex-grow: 0; height:100vh; text-align:left; margin: 0; font-size:0.9rem; vertical-align:top; padding: 6px 6px 12px 6px;}
#main {order:2; padding: 12px; flex-basis: 400px; flex-grow: 1; min-width: 0; max-width: 800px; }

/*Small header with red DNA background*/
#bannersm { height: 76px; background: url(/common/images/dnasm.gif) repeat-x 0px 31px; border-bottom: 1px solid #cccccc; }
#bannersm span { display: none; }
#bannerbtn { position: absolute; right: 2%; background-color: white; margin-top: 4px; }
#bannerbtn .button { display: inline-block; cursor: pointer; margin-right: 4px; }
#bannerbtn .button  img { height: 16px; }
img.ncclogo { border: none; left: 10px; position: relative; }

/*Used for a page that has editable items*/
.editor a { color: #666; cursor: pointer; }
.editor a:hover { color: maroon; background: transparent; }
.mailicon { display: inline-block; 	margin-left: 4px;	height: 16px;	}
#editform { margin-bottom: 12px; }

/*Reusable styles*/
.maroon { color: maroon; }
.yellow { color: yellow; }
.hidden { display: none; }

.svgicon { height: 12px; }
.leftphoto { float: left; margin-right: 16px; }
.rightphoto { float: right; margin-left: 16px; 

/*For small screens*/
@media only screen and (max-width: 650px) {
  #leftbar, #rightbar { display: none; }
  .rbutton { display: inline-block; }
}
@media only screen and (min-width:651px) {
  #leftbar, #rightbar { display: block; }
  .rbutton { display: none; }
}