* {
	margin:0;
	padding:0;
}
ul, li {
	margin: 0 1em;
}
select {
	clear: both;
	vertical-align: text-bottom;
}
body, div.ui-widget {background-color: #ffffff;
 font-family: 'Montserrat', sans-serif;
 font-size: 12pt;
 color: #666666;
 line-height: 160%;
 background-color: #666;
       background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));
       background-image: -webkit-linear-gradient(top, #000000, #000000);
       background-image: -moz-linear-gradient(top, #000000, #000000);
   background-image: linear-gradient(to bottom, #cccccc, #cccccc);
   background-repeat: repeat-x;
   background-color:#0B172A;

}

body .ui-widget-overlay {
    opacity: 0.8;
    filter: Alpha(opacity=80);
}

/** Scaffold View **/
dl {
	line-height: 2em;
	margin: 0em 0em;
	width: 60%;
}
dl dd:nth-child(4n+2),
dl dt:nth-child(4n+1) {
	background: #f4f4f4;
}
dl dd button {
    display: inline-block;
}

dt {
	font-weight: bold;
	padding-left: 4px;
	vertical-align: top;
	width: 10em;
}
dd {
	margin-left: 10em;
	margin-top: -2em;
	vertical-align: top;
}
/* end scaffold DL view */

#container {
    max-width: 70rem;
    margin: 0em auto;
    background-color: #fff;
    overflow:hidden;
}

a {
  outline: none;
  text-decoration: underline;
  width: 8%;
  text-align: center;
  color: #666666;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

/* mouse over link */
a:hover {
  color: #000000;
}

a:active {
  background: #0B172A;
  color: white;
}

#header a.dropbtn:hover {
    cursor: default;
}

#header .dropdown-content a:hover {
  background: #000000;
}

#buttons {  
  vertical-align:middle; 
  text-align:center;
}

#map {  
  vertical-align:middle;
  text-align:center;
  background-color: #ffffff;
}

#header {
  width: 100%; 
  height: 4.6rem;
  background-color: #000000;
}

#mainlogo{
  height: 4.6rem;
  vertical-align:middle;
  line-height:4.5rem;
  position: relative;
  left: 0em;
}
#header a#logoimage {
    position: absolute;
    left: 0em;
    padding: 0em;
    margin: 0em;
    width:20em;
    height: 4.5em;
}
#header a#logoimage:hover {
    background-color: transparent;
}
#logoimage img, .regionselect img {
    width: inherit; 
    padding: 0em;
    margin: 0em;
    position: relative;
    left: 0;
    height:4.5rem;
}
a.regionselect {
    border: solid 5px transparent;
}
a.regionselect:hover {
    border: solid 5px #ff9900;
}
a.twitter {
    background-image: url('../img/Twitter_Logo_Blue.svg');
    background-size: 1.3em;
    padding-left: 1.3em;
    background-repeat: no-repeat;
}

ul.horiz {
   list-style-type:none;
   list-style-position:inside;
   margin:0;
   padding:0;
   text-align: justify;
   display: inline-block;
   margin: 0em;
   padding: 0em;
}
ul.horiz select {
    padding: 0;
    margin: 0;
    background-color: rgba(70, 138, 185, 0.2);
    border: none;
}
h2 ul.horiz {
   font-size: 55%;
}
ul.menu {
   padding-bottom: 1em;
   height: 1em;
   clear: left;
   text-align: left;
   display: flex;
}
ul#mainmenu {
   padding: 0em 0em 1em 20rem;
}
ul.menu li {
   flex: 1 1 100rem;
}
ul.horiz li {
   display:inline-block;
   margin: 0;
   padding: 0;
}
div#content {
    min-height: 40rem;
}
div#content ul.horiz li:before {
   content: '→';
}
ul.menu li, ul.menu li a:visited, ul.menu li a {
   color:#fff;
}
.banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


.smallimagesleft {
  display: inline;
  float: left;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
}
.smallimagesright {
  display: inline;
  float: right;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#blurb{
width: 100%;

  margin: 0 auto;
  padding: 0.5em 0em;
  background-color:#000000;
  color:white;
  padding-left: 8px;
  padding-right: 8px;
}



#infobox {
  width: 100%;
  margin: 0 auto;
  padding: 0.5em 0em;
  background-color:#000000;
  color:white;
  columns: 2;
}

#infobox a:hover { 
  background: #ff9900;
}

#infobox a:active {
  background: #4CAF50;
  color: white;
}

#infobox a {
  color: white;
  }

.infosub {
    border: solid 1px transparent;
    padding: 0em 0.5em;
}

.infosub .infohead {
height:4em;
line-height: 4em;
vertical-align:middle;
}

.infosub p {
    padding-bottom: 0.5em;
}

.infosub h3 {
    display: inline-block;
}
.infosub h3 a{
    text-decoration: none;
}

#inforight div{
    background: url("/swift/img/datacatalogue.svg") right center no-repeat;
    background-size: contain;
}
#infoleft div{
    background: url("/swift/img/satellite.svg") left center no-repeat;
    background-size: contain;
}
#infoleft .infohead h3 {
padding-left: 110px;
}
#inforight .infohead h3 {
padding-right: 110px;
}

#partnerlogos {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  background-color:#ffffff;
  color:#666666;
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
}

#africaicons {
  width: 100%;
  
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:20px;
  background-color:#ffffff;
  color:#666666;
  display: flex;
  flex-direction:row;
  justify-content:space-evenly;
}
#africaicons  a {
  display:block;
  width:10rem;
}

#infotext {
border-radius: 25px;
border: 2px solid #ff9900;
padding: 1em 1em;
margin-left: 5px;
margin-right: 5px;
background-color: #ffffff;
color: #666666;

}

#infoguide {
border-radius: 25px;
border: 2px solid #b9dc0c;
padding: 1em 1em;
margin-top: 45px;
margin-left: 5px;
margin-right: 5px;
background-color: #ffffff;
color: #666666;
}

#infoguide div {
    padding: 1em 0 0;
}


#moreinfo {
 padding:0.5em 0em;
 margin-left: auto;
 margin-right: auto;
 padding-left: 2em;
}

#moreinfo img {
    max-width: 100%;
}

#moreinfo h3, #moreinfo h2 {
    padding-left: 0.5em;
}

#moreinfo p, div.categories, div.related {
    margin: 0.5em;
}

#infobanner {
    padding:0.5em 0em;
    margin: 0 0 1em 0;
    text-align: center;
    font-weight: bold;
    background-color:#808080;
    color: white;
}

#footer {
  width: 100%;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000;
}

#footercontent{
  width:100%;
  height: 80px;
  vertical-align:middle;
  line-height:80px;
  color:white;
  text-align:center;
}


/* navigation page styles and formatting. */

.map {
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

#map #basemap {
    width: 100%;
    max-width: 774px;
}

#header a {
  outline: none;
  text-decoration: none;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: white;
  white-space: nowrap;
  font-weight: bolder;
}

.mapbutton {
  background-color: #000000;
  border: none;
  color: white;
  padding:0px;
  height:4em;
  width: 8em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 8px 7px;
  vertical-align: middle;
  line-height: 4em;
}

.toolbuttons {
  background-color: #000000;
  border: none;
  color: green;
  padding:0px;
  height:4em;
  width: 8em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 8px 7px;
  vertical-align: middle;
  line-height: 4em;
}


div.guide {
    max-width: 60em;
    margin: 0 auto;
    font-size: larger;
}

dl.guide {
    line-height: inherit;
    padding:0em 0.5em;
    border-radius: 25px;
    border: 2px solid #ffffff;
    padding: 1em 1em;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #ffffff;
    color: #666666;


}

dl.guide dt {
    margin-top: 0.5em;
    padding-left: 0.5em;
    display: block;
    width: inherit;
    background-color: transparent;

}

dl.guide dd {
    margin-top: 0;
    background-color: white;

}
dl.guide figure {
    text-align: center;
    width: 100%;
}
dl.guide figure, dl.guide ul {
    margin-bottom: 0.75em;
}
dl.guide img, dl.guide figure img, dl.guide figure figcaption {
    margin: 0 auto;
    max-width: 70%;
    font-size: inherit;
    font-style: italic;
    display: block;
}



/*table layout for icons on Woest page. */
.woest {
  margin: 15px;
  display: flex;
}

.row {
 width:auto;
}


.column {
  display: flex;
  width:auto;
}





.divTable
    {
        display:  table;
        width:auto;
        background-color:#ffffff;
        border:1px solid  #666666;
        border-spacing:5px;
	vertical-align: middle;
    }

    .divRow
    {
       display:table-row;
       width:auto;
       vertical-align: middle;
    }

    .divCell
    {
        float:left;
        display:table-column;
        width:auto;
	vertical-align: middle;
        background-color:#ffffff;
    }

/* Map button actions and styles  */

.mapbutton {
   border-radius: 50%;
   -moz-border-radius: 50%;
}

.mapbutton:hover {
    background-color: #ff9900;
}

/* Logos */

div.partnerlogos {
    display: flex;
}
div#partnerlogos a{
    flex: 1 1 auto;
    width: auto;
    display: inline-block;
   border: solid 2px transparent;
}

div#partnerlogos a img{
   height: 3em;
   padding-right: 0.25em;
   }
div#partnerlogos a:hover{
    border: solid 2px #BC4123;
}

/* Calendar */
div.calendar {
   width: 100%;
}
div.calnav {
   width: 100%;
}
div.cell-prev, div.cell-next, .calname {
   display: inline-block;
   width: 15%;
}
div.cell-next {
   text-align: right;
}
.calname {
   margin: 0 auto;
   text-align: center;
   width: 70%;
}

div.manage {
   clear: both;
}
.calendar ul.caldays {
   list-style: none;
   padding: 0;
   margin: 0 auto;
   clear: both;
   width: 100%;
   display: flex;
   align-items: stretch;
   flex-wrap: wrap;
   justify-content: center;
   } 
.calendar ul.caldays > li{ 
   display: block;

   width: 14.2857142857%;
   min-width: 10em;
   padding: 5px;
   box-sizing: border-box;
   margin-left: 0;
   margin-right: -1px;
   margin-bottom: -1px;
   border: solid 1px grey;
}

.calendar div.more {
    text-align: right;
    background-color: transparent;
    float: right;
    padding-left: 16px;
    cursor: pointer;
}
.calendar div.more:hover {
    background-color: #ff6600;
}

/* Dialogue boxes */

div.ui-dialog.focus{ 
    background-color: white;
    vertical-align: middle;
    border: solid 1px #666;
}
div.ui-dialog.focus li.not-empty {
    column-width: 25em;
    list-style-type: none;
}
div.ui-dialog.focus div.cell-number, div.ui-dialog.focus div.more { 
    display: none;
}
div.cell-data ul{
    display: none;
}
div.ui-dialog.focus ul { 
    display: block;
}

.calendar .caldays ul, div.ui-dialog.focus ul {
   list-style: none;
}
.cell-othermonth {
   background-color: #daefff;
} 
.calendar ul.caldays li.not-empty div.cell-data li:nth-child(n+7) {
    display: none;
}
.calendar ul.caldays li.not-empty.focus div.cell-data li:nth-child(n+7) {
    display: block;
}
    
.calendar ul.caldays li.cell-today {
   border: dotted 3px red;
} 
.dayofweek, .daynum, .ui-dialog-title {
   font-variant: small-caps;
}
.dayofweek {
   text-align: left;
}
.daynum {
   text-align: right;
}
div.cell-number {
    width: 100%;
    border-bottom: solid 1px #0B172A; 
}
div.cell-number a {
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.empty div.cell-number a{
   color: #ccc;
}
h4.subheader {
   text-align: center;
}
a.edit {
   color: #aaa;
   vertical-align: super;
   font-size: 50%;
   padding-bottom: 1.5ex;
}
span.childcount {
   color: #800;
}
#cattree {
   width: 30%;
   display: none;
}
select#catPathDate {
    font-size: 120%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: dashed 2px grey;
    background-color: transparent;
}

/* Resources List */
div.archives {
  float: right; 
   text-align: right;
   width: 15em;
}
div.archives p {
   font-size: 70%;
   color: #555;
}

/* Resource view */
div.image {
   text-align: center;
}
div.image img {
   max-width: 100%;
}

/* Category resource list */
.resources.index h2 {
    text-align: center;
}

.flexbox {
    display: flex;
    flex-direction: row;
    overflow:auto;
    height: 90vh;
    width: 100%;
}
div.thumbmode ul#hoverlist {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    align-content: flex-start;
    overflow:auto;
    height: 90vh;
    width: 100%;
}
div#hovertarget {
    width: 75%;
    position: -webkit-sticky;
    position: sticky;
    top: 1em;
    align-self: flex-start;
}
ul#hoverlist {
    width: 20%;
    list-style-type: none;
}
ul#hoverlist span.hovertime, ul#hoverlist a {
    width: 100%;
    display: inline-block;
}
div.flexbox ul#hoverlist figure {
    display: none;
}
div#hovertarget figure {
    float:none;
    text-align: center;
}
div#hovertarget figure img {
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    width: auto;
}
div.thumbmode ul#hoverlist figure {
    display: block;
}
div.thumbmode div#hovertarget, div.thumbmode ul#hoverlist li span.hovertime {
    display: none;
}
div.thumbmode ul#hoverlist li {
    display: inline-block;
    max-width: 15rem;
    padding:0;
    margin:0;
}
span.hovertime {
    font-family: monospace;
    text-align: left;
}

/* Category or Resources Summary view */
.animbuttons {
    display: flex;
    justify-content: center;
}
div.animbox, #movie {
    text-align: center;
}
div.anim#movie {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
div.jsMovieFrame {
    margin: 0 auto;
    border: solid 1px #666;
    background-size: 100% auto;
    max-width: 100%;
}
div.jsMovieFrame {
    background-size: contain;
}
div.summaryresource div.jsMovieFrame {
    border: none;
}
div.resources.index.summary { 
    text-align: center;
}
div.resources.index.summary div.summaryresource, div.resources.index.summary div.summaryresource div.animbox{
    max-width: 100%;
}
div.resources.index.summary div.summaryresource figure img {
    max-width: 100%;
    max-height: 85%;
}
div.summaryresource, #movie {
    margin: 0 auto;
}
div.summary {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 50%;
}
div.summary figure {
    float: none;
}
div.summary figcaption {
    height: 61px;
}
div.summary div.summaryresource {
    display: block;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    padding: 3em;
}
div.summaryresource .animbuttons .button img {
    width: 2rem;
}
/* Flash messages */
.message {
    padding: 1rem;

    background: #eff8ff;
    color: #2779bd;

    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
}
.message.hidden {
    display: none;
}
.message.success {
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}
.message.error {
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

/* Form errors */
form .error {
	background: #FFDACC;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-weight: normal;
}
form .error-message {
	-moz-border-radius: none;
	-webkit-border-radius: none;
	border-radius: none;
	border: none;
	background: none;
	margin: 0;
	padding-left: 4px;
	padding-right: 0;
}
form .error,
form .error-message {
	color: #9E2424;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
}

/* responsive */
#mobhead { display: none; }

@media only screen and (max-width: 480px) {
   /* define mobile specific styles come here */
   #mainmenu, div.resources.view dl, #container #mainmenu li.stretch, .banner {
      display: none;
   }
   #mainlogo {
      line-height: normal;

   }
   #header a#logoimage {
      left: 10vw;
      width: 80vw;
      max-height: 4.5rem;
      top: 0rem;
   }
   #infobox { 
      line-height: normal;
   }
   .smallimagesleft {
       float: none;
       display: block;
       margin: 0 auto;
   }
   .icon {
       float: none;
       margin: 10px;
       border: solid 1px;
       padding-left:100px;
   }

   body { font-size: 100%; }
   #container { height: 100%; width: 100vw; }
   div.wrf { height: auto; position: relative; overflow: visible;}
   div.image { position: static; overflow: visible; }
   div.wrf img { max-width: 100%; position: static; }
   #mobhead { display: block; position: absolute; left: 0em; top: 0em;}
   #mobmenu { font-size: 200%; background-color: rgb(51,51,51); color: white; text-decoration: none; width: 10vw;}
   /*rearrange menu for sidebar-type use*/
   #container #mainmenu li {
      display: block;
      border-bottom: solid 1px rgba(255,255,255,0.5);
      padding: 0.5rem;
   }
   #container #mainmenu li:hover {
       background-color: #ff9900;
   }
   #container #mainmenu li a {
      color: white;
      display: block;
      font-size: 125%;
   }
   #container #mainmenu li a:hover {
      color: white;
   }
   ul#mainmenu { position: absolute; top:0; left:10vw; height: auto; background-color: rgb(51,51,51); width: 90vw; text-decoration: none; padding: 0em;}
   div#tree .jstree-anchor {
      font-size: 85%;
      line-height: 85%;
      height: auto;
   }
   div.categories ul.horiz li, .cake-sql-log { display: none; }
   div.categories ul.horiz li:nth-last-of-type(-n+3) { display: list-item; }
   div.archives, table.calendar {
      font-size: 100%;
   }
   ul.horiz:after {
       display: none;
   }
   #content {
      padding: 0;
      width: 100%;
   }
   .calname {
      font-size: 110%;
   }
   .calendar ul.caldays > li {
      width: 100%;
      max-width: none;
      border: none;
   }
   .calendar ul.caldays > li.cell-othermonth,.calendar ul.caldays > li.empty  { display: none; }
   
   .calendar .not-empty .cell-number a { height: 100%; text-decoration: none; text-align: justify; width: 100%;}
    div.ui-dialog.focus{ 
        column-count: 1;
    }
    #container #jstree-dnd.jstree-dnd-responsive > .jstree-ok,  #container #jstree-dnd.jstree-dnd-responsive > .jstree-er,  #container .jstree-default-responsive .jstree-icon,  #container .jstree-default-responsive .jstree-checkbox,  #container .jstree-default-responsive .jstree-file,  #container .jstree-default-responsive .jstree-folder,  #container .jstree-default-responsive .jstree-node  {
      background-image: url("/swift/img/40px.svg");
      background-size: 6em 12em;
   }
   #container i.jstree-icon {
      width: 2em;
      height: 2em;
      line-height: 2em;
      font-size: 75%;
   }
  #container .jstree-default-responsive .jstree-open > .jstree-ocl {
    background-position: 0 0em !important;
  }
  #container .jstree-default-responsive .jstree-closed > .jstree-ocl {
    background-position: 0 -2em !important;
  }
  #container .jstree-default-responsive .jstree-themeicon {
    background-position: -2em -2em;
  }
  #container .jstree-default-responsive .jstree-node {
    background-position: -4em 0;
    background-repeat: repeat-y;
    margin-left: 2em;
    line-height: 2em;
  }
  #container .jstree-default-responsive .jstree-leaf > .jstree-ocl {
    background-position: -2em -6em;
  }
  #container .jstree-default-responsive .jstree-last > .jstree-ocl {
    background-position: -2em -8em;
  }
  /* don't display full-size target image on mobile */
  div#hovertarget { display: none; }
  ul#hoverlist { width: 100%; text-align: center; list-style: none; }
  ul#hoverlist li { margin-bottom: 1rem; }

  #infobox {
    columns: 1;
  }
  #infobox .infosub h3 {
      line-height: normal;
  }
  #partnerlogos {
      flex-direction: column;
  }
  #partnerlogos a {
      display: inline-block;
      width: 100%;
  }

  /* summary page to single column */
  div.summary {
    grid-template-columns: 100%;
  }
}

 /* Dropdown Button */
.dropbtn {
  background-color: #000000;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {

  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #666666;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%;
  margin: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-size: 90%;
  color: black;
  border-top: 1px solid rgba(0,0,0,.2);
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {background-color: #8A2BE2;}*/

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #2a2a2a;}

/* Override display style inherited from ul.horiz */
ul.horiz .dropdown-content li {
    display: block;
}

.flex-container {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: flex-start;
}

.flex-child:first-child {
    margin-right: 20px;
} 

.flex-child.Description {
    width: 100%;
}

.aim {
padding-top: 10px;
color:#2a2a2a;
font-weight: bold;
}


.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}