/* CSS RESET 
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block; }
body {margin-top:30px;line-height:1;font: 13px/19px "Open Sans"; background:#f0f0f0;}
ol, ul {list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none; }
table {border-collapse:collapse;border-spacing:0; }
img {width:100%;height:auto; }
a {text-decoration: none;}
a:hover {text-decoration: underline;}

/* Import the font
----------------------------------------------------------------------------- */
@font-face {
  font-family: UnitRounded;
  src: url("https://www.csiro.au/themes/default/font/UnitRoundedWeb-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal; 
 }
@font-face {
  font-family: UnitRounded;
  src: url("https://www.csiro.au/themes/default/font/UnitRoundedWeb-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal; 
 }
@font-face {
  font-family: UnitRounded;
  src: url("https://www.csiro.au/themes/default/font/UnitRoundedWeb-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; 
 
 }
 
/* base layout
----------------------------------------------------------------------------- */
body .remove-padding--top {padding-top: 0px; }
.site-width {max-width: 650px;width: 100%;}
.wrapper {margin:0px auto;background:#ffffff; }

/* header
----------------------------------------------------------------------------- */
header {display:table;padding:8px 8px 0px;background:#ffffff;}
.header__column {display:table-cell;vertical-align:top;}
.header__column:first-child {width:80px;margin-right:16px;}
.header__logo {margin-top: -5px;}
.header__title {margin-bottom:-0.845rem;color:#404040;font:110px/88px UnitRounded;font-weight:900;text-align:right;text-transform:uppercase;}
.header__title__date {color:#00bad6;}
.header__title__issue {font-size:100px;color:#a7a9ab;}
@media (max-width: 650px) {
	.header__title {font-size:100px;}
	.header__title__issue {font-size: 90px;}
}   
 @media (max-width: 600px) {
	.header__title {font-size:80px;line-height:68px;text-align:left;margin-left: 20px;}
	.header__title__issue {font-size: 70px;}
}
@media (max-width: 500px) {
	.header__title {font-size:60px;line-height:48px;margin-left: 10px;}
	.header__title__issue {font-size: 50px;}
	.header__logo {max-width: 70px;}
}
@media (max-width: 400px) {
	header {padding-left: 8px;padding-right: 8px;}
	.header__title {font-size:50px;line-height:38px;margin-left: 8px;}
	.header__title__issue {font-size: 40px;}
	.header__logo {max-width: 50px;min-width: 50px;}
	.header__column:first-child {width: 50px;}
}

/* nav
----------------------------------------------------------------------------- */
nav {border-top:1px solid #404040;border-bottom:3px solid #404040;padding:5px 8px;margin:0px 8px; }
nav ul li {display:inline; }
nav ul li:last-child {float:right;}
nav ul li a {color:#404040;font-size:0.8125rem; }

/* jumplinks
----------------------------------------------------------------------------- */
.jumplinks {width:calc(100% - 16px);border-bottom:1px solid #404040;margin:10px 8px -10px 8px;padding-bottom:10px;}
.jumplinks__item {display:table-cell;width:calc(20% - 16px);border-right:1px solid #404040;padding:10px 8px;text-align:center;}
.jumplinks__list {display:table;width:100%;}
.jumplinks__item__title {display:block;font-family:"Open Sans";font-size:0.9rem;font-weight:bold;line-height:0.95rem;}
.jumplinks__item__title:last-child {margin-bottom:6px; }
.jumplinks__link {text-decoration:none;}
.jumplinks__link:first-child {color:#006199; }
.jumplinks__item:last-child {border:0px; }
.jumplinks__item:nth-child(2) > .jumplinks__link {color:#6d2077;}
.jumplinks__item:nth-child(3) > .jumplinks__link {color:#dc1894;}
.jumplinks__item:nth-child(4) > .jumplinks__link {color:#007377;}
.jumplinks__item:last-child > .jumplinks__link {color:#E67623;}	
 @media (max-width: 540px) {
	.jumplinks {border-width: 3px;}
	.jumplinks__item {display: block;width:calc(100% - 16px);border-right: 0px;border-bottom:1px solid #404040;}
	.jumplinks__item__title:last-child {margin-bottom: 0px;}
 }

/* story
----------------------------------------------------------------------------- */
.col-2 {display:-ms-flexbox;display:flex;border-bottom:2px dotted;position:relative;margin-left:8px;margin-right:8px;}
.col-2 .story {max-width:304px;border:0px;}
.col-2 .story:first-child {margin-left:0px;}
.col-2 .story:last-child {margin-right:0px;}
.col-2 .story::after, .col-2.staff-promotion, .col-2.staff-promotion::after {border:0px;}
@media (max-width: 440px) {
	.col-2 {display:block;}
	.col-2 .story {width:100%;}
	.col-2 .story:first-child, .col-2 .story:first-child::after {border:0px;padding-bottom:5px;}
}
.story {position:relative;padding:20px 0px 20px 0px;margin-left:8px;margin-right:8px;border-bottom:2px dotted;}
.story::after, .col-2::after {left:0px;display:block;height:1px;width:100%;content:"";position:absolute;bottom:2px;padding-top:2px;border-bottom:2px dotted;}
.story__link {font-weight:bold;}
.story__number {position:absolute;height:65px;font-family:UnitRounded;font-size:1.6rem;padding-top:20px;padding-right:10px;font-weight:bold;background:#ffffff; }
.story__number span {display:block;}
.story__number span:first-child {margin-bottom:18px;font-size:4rem;font-weight:900;}
.story__title {padding:12px 0px 6px 0px;font: bold 1.8rem/32px UnitRounded;font-family:UnitRounded;font-size:1.8rem;font-weight:bold;/* ie doesn't like the short hand font */line-height:32px;text-transform:uppercase;}
.story__title--mini-story {padding:0px 0px 4px 0px;font-size:1.2rem;line-height:1.3rem; }
.story--mini-story {border-bottom:1px solid #404040;padding:0rem 0px 0.8rem;margin-bottom:0.8rem;}
.story--mini-story:last-child {padding-bottom:0px;margin-bottom:0rem;border:0px;}
h2 + .story--mini-story {padding-top:0.375rem;}


/* relatedl inks
----------------------------------------------------------------------------- */
.related-links, .related-links li {text-align: center}
.related-links .story__title {padding-top: 0;}

/* story colours
----------------------------------------------------------------------------- */
.story--blue,.story--blue .story,.story--blue::after {border-color: #006199;}
.story--blue .story__link, .story--blue .story__link:hover, .story--blue .story__title,.story--blue .story__number {color:#006199;}
.story--green, .story--green .story, .story--green::after, .story--green .story::after {border-color:#007377;}
.story--green .story__link, .story--green .story__title, .story--green .story__number {color:#007377;}
.story--orange, .story--orange .story, .story--orange::after, .story--orange .story::after {border-color:#E67623;}
.story--orange .story__link, .story--orange .story__title, .story--orange .story__number {color:#E67623;}
.story--pink {border-color:#dc1894;}
.story--pink .story__link, .story--pink .story__title, .story--pink .story__number {color:#dc1894;}
.story.story--pink, .story.story--pink::after {border:0px;padding-bottom:0px;}
.story--purple, .story--purple .story, .story--purple::after, .story--purple .story::after {border-color:#6d2077;}
.story--purple .story__link, .story--purple .story__title, .story--purple .story__number  {color: #6d2077;}
.story--midnight,.story--midnight .story,.story--midnight::after {border-color: #00313C;}



/* video section / last section
----------------------------------------------------------------------------- */
.people__img {width:auto;height:auto;padding:0.8rem 0px 0.4rem 0px;line-height:19px;}
.people__title {padding:0px;color:#404040;font-family:UnitRounded;font-size:1.1rem;font-weight:bold;text-transform:uppercase;}
section.staff-promotion > .story,section.staff-promotion > .story::after {border: 0px; }
.sm-promo {display:-ms-flexbox;display:flex;align-item:center;padding-bottom:0.5rem;margin:0px 8px;}
.sm-promo p {display:flex;align-items:center;width:60%;color:#787878; }
.sm-promo__image {height:auto;width:auto;}
.sm-promo__item {display:inline-block;margin:0px 4px;vertical-align:middle;}
.sm-promo__list {width:40%;padding:0px 0px 0px 10px;text-align:right;}
.story.people {width:25%;padding:1.2rem 0px 1.2rem 10px;border:0px;text-align:center; }
.story.video {max-width:70%;}
.video__title--title {display:table-cell;padding:10px;color:#ffffff;font-size:1rem;line-height:18px;text-transform:uppercase;font-weight:bold;background:#404040;}
.video__title--watch {display:table-cell;padding:10px;color:#FFFFFF;font-size:1rem;font-weight:bold;vertical-align:middle;background:#FF0000;}
@media (max-width: 440px) {
	.story.video  {width:100%;max-width:95%;}
}
@media (max-width: 550px) {
	.story.video {width:65%;max-width:70%;}
}
@media (max-width: 600px) {
	.sm-promo  {display:block;}
	.sm-promo p {width:100%;}
	.sm-promo__item {display:table-cell;vertical-align:middle;padding-right:10px;}
	.sm-promo__list {display:table;width:30%;padding:8px 10px 0px 10px;}
}

/* footer
----------------------------------------------------------------------------- */
footer {margin:1rem auto;}
footer ul {width:70%;margin:0px auto;text-align:center; }
footer li {display:inline-block;border-right:1px solid #787878;padding:0px 6px;margin-bottom:6px;line-height:11px;}
footer li:nth-child(6), footer li:last-child {border-right:none;}
footer a {color:#787878;font-size:11px;text-decoration:none;white-space:nowrap;}
footer p {width:60%;margin:0.5rem auto 0.5rem auto;color:#787878;font-size:11px;text-align:center;}
@media (max-width: 650px) {
	footer li:nth-child(6)  {border-right:1px solid #787878;}
	footer li:nth-child(5)  {border-right:0px;}
}
@media (max-width: 500px) {
	 footer ul {width:80%;}
	 footer li:nth-child(5)  {border-right: 1px solid #787878;}
}