/* Moved into template to construct URL 
body {
	background-image:url('../images/background.png');
}
*/
h1 { font-size:1.5em; padding:0 10px 3px 0; color:#444; margin-bottom:.5em; }

h2 { font-size:1.3em; margin-bottom:.5em; }

h3 { font-size:1.2em;  margin-bottom:.5em; color:#369; }

h4 { font-size:1.1em;  margin-bottom:.5em; }

h1,h2,h3,h4,h5 { margin-top: 0.1em; }

p { line-height:1.2em; margin-bottom:.5em; }

#more-news { float: right;  text-decoration:none; color:#3972a0; }

.block {display: block; width: 100%;}

.linkish { color: #3972a0; text-decoration: underline; }
.linkish { cursor: hand; cursor: pointer; }
.linkish:hover { color: #369; }

li { list-style-type:none; margin:0; padding:0;}


ul { margin:1em 0; }
#content ul li { margin: 0.4em 0.6em 0.4em 0; }
#content .bullets li { list-style-type: disc; margin-left: 25px; }
ol li { margin: 0.4em 0.2em; }

.todo { background: gray; color: #fc0; border: 1px dashed #fc3 !important; text-align: center !important; box-shadow: inset 0 0 5px #555; -webkit-box-shadow: inset 0 0 5px 5px #555; -moz-box-shadow: inset 0 0 5px 5px #555; }
.todo:before { content: "TODO: " }
.td-note:before { content: "DEVELOPMENT NOTE: " }
table td { padding: 0.3em; }
table { margin: 0.5em 0; }

.tableclass1 {
  margin-left:20px;
}

html.ie div.gallery-album .album { width: 720px; }
html.ie #content div.gallery-album .album li { margin: 0.2em 0.3em; }
/*
#content img { max-width: 632px; }
*/
span#webcast-img .fright {
  -webkit-shape-outside:circle();
  -moz-shape-outside:circle();
  shape-outside:circle();
}

#uw-branding {
	width:960px;
	margin:0px auto;
	text-align:right;
	padding:15px 0 5px;
}

#uw-branding a {
	color:#000;
	text-decoration:none;
	padding:10px 0;
}

#uw-branding a:focus {
	color:#95d0ef;
	outline:none;
}


#container {
	width:960px;
	margin:0px auto;
	background:#fff;
	border:5px solid #3972a0;
	-moz-box-shadow: 0 0 10px 5px #999;
	-webkit-box-shadow: 0 0 10px 5px #999;
	box-shadow: 0 0 10px 5px #999;
}

#container > header {
    /* Moved into template to construct URL 
	background-image:url('../images/search-bg.png');
    */
	background-repeat:no-repeat;
	background-position:top right;
	width:960px;
}

#header-logo {
	margin:35px 0 24px 24px;
	height:auto;
	width:359px;
}

#header-link:focus {
	height:71px;
	width:359px;
}



#search-form {
	float:right;
  	display: inline; 

}

#search-input {
	height:13px;
	font-size:.85em;
	padding:2px;
	margin: 0 5px 0 0;
	vertical-align:middle;
	border:0;
	float:left;
}

#search-submit {
	height:17px;
	font-size:.75em;
	vertical-align:middle;
	border:0;
	padding:2px;
	margin:0;
	float:left;
	color:#000;
	background:#fff;
	text-transform:uppercase;
	font-weight:bold;
}

#search-submit:hover {
	background:#95d0ef;
}

#search-label {
	line-height:17px;
	font-size:.85em;
	color:#fff;
	float:left;
	margin-right:5px;
}



#main-left {
    /* Moved into template to construct URL 
	background-image:url('../images/main-left-bg.png');
    */
	background-repeat:no-repeat;
	padding:0 0 0 3px;
	margin:0 0 0 24px;
	width:674px;
	float:left;
}

#global-nav li {
	display:inline;
  background-repeat: no-repeat;
}

#global-nav li a {
	background:#777c80;
	color:#fff;
	line-height:27px;
	padding:0 16px 0 16px;
	text-decoration:none;
	display:block;
	float:left;
}

nav li a { font-size: 1em; }

#global-nav li a:focus {
	color:#95d0ef;
	outline:none;
}


#global-nav li a#current-global {
	background-repeat:no-repeat;
	background:#3972a0;
}

#global-nav li.global-nav-div {
    /* Moved into template to construct URL 
	background-image:url('../images/grey-divide.png');
    */
	width:25px;
	height:27px;
	display:block;
	float:left;
}

#global-nav li#current-global-left {
	background-repeat:no-repeat;
    /* Moved into template to construct URL 
	background-image:url('../images/blue-divide-left.png');
    */
}

#global-nav li#current-global-right {
	background-repeat:no-repeat;
    /* Moved into template to construct URL 
	background-image:url('../images/blue-divide-right.png');
    */
}

#global-nav li.global-nav-end {
    /* Moved into template to construct URL 
	background-image:url('../images/grey-end.png');
    */
	width:21px;
	height:27px;
	display:block;
	float:left;
}

#global-nav li.global-nav-end-active {
	width:21px;
	height:27px;
	display:block;
	float:left;
}

#content {
	margin:24px;
}

#default-index {

}

#highlights {
  grid-row-start: 1;
  grid-column-start: 1;
}
#mosaic-1 {
  padding: 10px;
  grid-row-start: 2;
  grid-column-start: 1;
}
#mosaic-2 {
  padding: 10px;
  grid-row-start: 2;
  grid-column-start: 2;
}
#mosaic-3{
  padding: 10px;
  grid-row-start: 3;
  grid-column-start: 1;
}

#mosaic-4 {
  padding: 10px;
  grid-row-start: 3;
  grid-column-start: 2;
}

#global-nav {
	border-left: 3px solid grey;
	margin: 0 24px 0 24px;
}

#mosaic-wrapper {
	grid-row-start: 2;
	grid-column-start: 1;
	grid-row-end: 2;
	grid-column-end: 2;
	background: #F8F7F6;
}

#vid-container {
  margin-top:24px;
}
#vid-container > .caption {
  margin-bottom:10px;
}

#main-right {
	width:250px;
	background-repeat:no-repeat;
	background-position-y:24px;
	float:left;
	min-height:500px;
}

#live li a {
	background-repeat:no-repeat;
	color: #FFFFF0;
	padding-left:14px;
	line-height:27px;
	text-decoration:none;
	display:block;
	margin:0 0 24px 0;
}

#live li a:focus {
	/* background:url('../images/live-a-active-bg.png'); */
	background-repeat:no-repeat;
	color:#fff;
	outline:none;
}

#sidebar-nav li {
	padding-left:3px;
}

#sidebar-nav li a {
	/* background:url('../images/sidebar-a-bg.png'); */
	background-repeat:no-repeat;
	color:#333;
	padding-left:14px;
	line-height:27px;
	text-decoration:none;
	display:block;
	margin:0 0 16px 0;
	
}


/* background:url('../images/sidebar-a-active-bg.png'); */
#sidebar-nav li.current-side a {
	background-repeat:no-repeat;
	color:#fff;
	outline:none;
}
/*
#sidebar-nav li a.current-side {
	background-repeat:no-repeat;
	color:#fff;
	outline:none;
}
*/


#sidebar-nav li a:focus {
    /* background:url('../images/sidebar-a-active-bg.png'); */
}

#social ul {
	margin-left:10px;
}

#social li {
	display:inline;
	list-style-type:none;
	padding-right:2px;
}




footer {
	font-size:.7em;
	color:#808082;
	line-height:26px;
	margin:24px;
	clear:both;
}


footer a{
	color:#808082;
	text-decoration:none;
}

footer a:hover {
	color:#808082;
	text-decoration:underline;
}

footer a:focus {
	color:#808082;
	text-decoration:underline;
	outline:none;
}

footer img {
	display:inline;
	vertical-align: middle;
	margin:0 5px;
}

.footer-sep {
	color:#3972a0;
	margin:0 10px;
}


.cleared {
	clear:both;
}

.bold { font-weight: bold; }

h2#data-release-title {
  margin-top:1.3em;
}
p#included-in {
  margin-top:.8em;
}

.jobitem {
 	margin-bottom:1.2em;
}

.row.mosaic {
  margin-left:-2rem;
}

video#active-vid-html5 {
  width: 640px;
  height: 480px;
}

.sidr ul li ul li ul li a {
  padding-left:60px;
}

#nsf-app > p > a > img {
  width: 100%;
}

#flash-player {
  max-width:100% !important;
}

/*css for icecube tools pages*/
.landing.small-9 {
  flex: 0 0 71.66667%;
  max-width:72%;
}
.caption-image {
  padding-left:0 !important;
}
/**override this setting on data landing pages*/
.landing .caption > img {
  width:100% !important;
}

.columns.landing.info.small-12 {
  margin-top:-.5rem;
}
.gallery-container-featured .gallery-album {width: 400px}
.gallery-container {padding-bottom:2rem;height:auto !important}

.card-section {
  max-height:150px;
}

@media screen and (max-width: 980px){

  h1 {font-size:2em;}
  #uw-branding {display:none;}
  #search-form {margin-top:.2em; margin-right:.2em}

  #container {width:100%; height:100%; margin:0;border:none;}

  #header a img {width:359px;margin-left:10px;}
  #header {margin-right:0}
  #header-logo {width:90%; height:auto}

  #simple-menu {margin-bottom:1rem}

  #main-left,#container > #header {width:100%;}
  #main-left {background-image:none !important; margin: 0 10px 0 10px}

  #content {margin:20px}

  /*READ: careful when setting this img properites, check galleries
  after changing anything here*/
  #content img {max-width:100%; height:auto !important; max-height:100% !important}
  #content .work-feature-block-image img {width:100%;}

  /*padding here makes container weird...*/
  #main-right {width:100%;padding: 0 0 0 0px;
    margin:0;
    min-height: inherit;
    background-image:none !important;
    border-top: 1px dotted #3b719e}

  #vid-container {
    margin-left:0;
  }

  /*override width of boxes on main page*/
  .small-3 {
    flex: 0 0 33% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:33% !important;
  }

  .row.mosaic {
    margin-left:0;
  }

  /*responsive galleries*/
  #main-left {width:100%}
  .gallery-featured-description{width:auto !important; padding-left:1rem;}


  #gallery-toolbar{width:100%}
  #gallery-image-caption{width:auto}
  #gallery-image-title{width:auto}
  #gallery-album{height:auto}
  #gallery-image img {
    width:100%;
  }

  #gallery-viewport {width:100%} 
  #active-image, #active-video {
    width: 100% !important;
    height: auto !important;
  }

  video#active-vid-html5 {
    width: 100%;
    height: auto;
  }

  #gallery-filmstrip {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
  }

  #gallery-filmstrip-vertical {
    margin: 10px 0 20px 30px !important;
  }

  #gallery-image-fullsize {
    margin-left:0px !important;
  }

  #gallery-image-caption {
    width:100% !important;
  }

  #gallery-position {margin-top:.3rem !important;}
  #gc-prev-cnt { float: right; margin: 0 0.9rem 0 -0.1rem  !important;}
  #gc-next-cnt { float: right; margin: 0 -0.1rem 0 0.9rem !important;}

  .news-story-date {
    float:none !important;
    display:block !important;
  }

  /**override this setting on data landing pages*/
  .landing .caption > img {
    width:100% !important;
  }

  #vid-caption {
    max-width:100% !important;
  }
}

/*this is essentially the width of main-left*/
@media screen and (max-width: 645px){

  /**READ: check these images/captions everywhere*/
  span.caption, .caption > img {
    width:100% !important;
  }
  /**override this setting on data landing pages*/
  .landing .caption > img {
    width:110px !important;
  }

  #header a img {width:359px;margin-left:10px;}

  .gallery-container-featured .gallery-album {width: 300px}
  .gallery-album h3 {width:100%}


}

@media screen and (max-width: 500px){
  #main-left,#container {margin:0} 
  #header a img {width:359px;margin-left:10px;}

  /*bad hack for main image width and search form*/
  .row.large {margin-left:-1.5rem !important}

  /*fix for webcasts page*/
  #webcast-img > .caption-image {
    float:none !important;
    width:100% !important;
  }

  /*fix for activities page*/
  ul#links-cnt li {
    height:auto !important;
  }
  ul#links-cnt li .caption-image {
    float:none !important;
  }

  /**READ: check this everywhere*/
  /*fix for pole/work page*/
  .fright {
    float:none !important;
  }
  .caption-image.fleft,.caption-image.fright {
    width:100% !important;
  }

  /**READ: check these images/captions everywhere*/
  span.caption, .caption > img {
    width:100% !important;
  }

  /*override width setting for landing pgs*/
  td > a > .caption-image.fleft, td > a > .caption-image.fright,
  td > a > .caption-image.fmiddle {
    min-width:100px !important;
  }

  /*override width for social icons on Cincopa galleries*/
  .swipebox-ze-share:not(.isotop-ze-share) [class^="icon-"], .swipebox-ze-share.share-icons [class*=" icon-"] {
    width:20px !important;
  }

  /*set line height for galleries*/
  .ze-swipebox-caption {
    line-height:1.2 !important;
  }
  .gallery-container-featured .gallery-album {width: 200px}
  .container-wrapper-gallery {display:block !important;}
  .gallery-featured-description {padding-left:.01rem !important;}

  .g-recaptcha {
    transform: scale(0.77);
  }
  #science-data .jqmWindow {
    overflow-y:auto !important;
    max-width:90% !important;
    max-height:90% !important;
  }
}

@media screen and (max-width: 385px){
  #main-left,#container {margin:0} 
  #header a img {width:90%;margin-left:10px;}
}

/*strange iPhone5 behavior?*/
@media screen and (max-width: 321px){
   .small-12 {padding:0} 

}