@charset "utf-8";
/* CSS Document */

body {
	background-color: #f4f4f4;
	width: 100%;
	border-top: 2px solid #00b3be;
}


/* Newsboard specific menu containing list of pins or modules: contained in aside; */

aside { 
	position: fixed;
	width: 25%; 	
	height: 100%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	z-index:900;
	margin: 0;
	-webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
    left: -20%;
}

aside.active {
	-webkit-transform: translate(100%, 0px);
	-moz-transform: translate(100%, 0px);
	-o-transform: translate(100%, 0px);
	-ms-transform: translate(100%, 0px);
	transform: translate(100%, 0px);
	width:20%;
}

#newsboard-wrapper {
	padding-right: 5vw;
}

aside.active #newsboard-wrapper {
	padding-right: 0;
}


#menu-button {
	font-size: 2rem;
	text-align: right;	
	color: #00b3be;
	padding-right: 5%; /*font-size roughly = padding-right */
	margin-right: 0;
}

aside.active #menu-button{
	font-size: 0;
	padding-right: 0;
}


#menu-logo {
	margin: 13px auto 10px auto;
	z-index: 1000;
	opacity: 1;	
	background: url("../images/logo.png") no-repeat center;
	width: 100%;	/* centers div in div */
	height: 36px;
	display: block;
}

/* Menu List */

#newsboard-wrapper {	
	width: 100%;
	height: -webkit-calc(100% - 61px); /* remove if you want logo to not be fixed */
	height: -moz-calc(100% - 61px);
	height: -o-calc(100% - 61px);	
	height: calc(100% - 61px);	/* height must be (100% - margin-bottom) to ensure val(margin-bottom) isn't hidden out of the bottom of the screen */
	margin-bottom: 61px; /* margin-bottom = (margin-top of logo) + (height of logo) +(margin-bottom of logo) + (border-top of body) */
}

#newsboard-scroll {
	padding: 0;
	margin: 0;
}

.top-menu-title {
	padding: 1rem 2rem; /*0.5rem 0.75rem 0 1rem*/
	font-family:'open_sansbold', sans-serif;
	font-style:normal;
	font-weight:600;
	font-size: 12px;
	text-transform:uppercase;
	text-align: left;	
	color: #333;
}

.menu-title {
	padding: 1rem 2rem 0 2rem; /*2rem 0.75rem 0 1rem*/
	font-family: 'open_sansbold', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 0.5px; /*or maybe this should be 1px*/
	color: #333;
}

.pins-list {
	margin-top: 0.65rem;
	z-index: 1000;
}

#nav-list {
	list-style: none;
}

#nav-list li {
	text-align: left;
	padding: 1rem 2rem; /*0.75rem 0.75rem 0.75rem 1rem */
}


#nav-list li a {
	font-family: 'open_sansregular', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 15px; 
	color: #777;
	text-align: left;		
	line-height: 1.2;	
	text-decoration:none;
	padding-right: 0;
}

#nav-list li:hover, #nav-list li.active-link {
	background-color: #f4f4f4;	
}

#nav-list li:hover a, #nav-list li.active-link a{
	color:#00b3be;
}

.current {
	background-color: #f4f4f4;
}

li.current a {
	color: #00b3be !important;	
}



/*the main container "section" has the articles/ pins and the share options are the bottom of the page*/

section {
	width: 95%; /* or some other value in px, ex, 950px */
	margin: 0 0 0 5%; /*same as width of newsboard-menu */
	height: auto;
	background-color: #f4f4f4;
	-webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
	overflow-y: hidden; /* else 100px of whitespace is seen off bottom of the page */
}

section.active {
	width: 80%; /*padding-left + margin-right of inactive section = width of aside.active*/
	padding-left: 15%; /* margin-left makes the transition jerk and bounce off of the right side of the screen */
}



/* article-wrapper: everything else on the page is contained in this, the wrapper centers content within the section */

.article-wrapper {
	width: 750px;
	margin: 0 auto; 
	padding-top: 2.5rem;
}

#page-logo {
	background: url("../images/logo.png") no-repeat center;
	width: 154px;
	height: 36px;
	display: block;
}

/*header {
}*/

header h1 {
	font-size: 36px;
	color: #515151;
	padding-bottom: 20px;
	padding-top: 20px;
}

header h2 {
	color: #777;
	padding-bottom: 20px;
	font-size: 18px;
}

#summary {
	width: 100%;
	background-color: #00b3be;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	padding: 1rem 2.5rem;
	margin: 2rem 0;
}

#summary h2, ul {
	color: #fff;	
}

#summary h2 {
	font-size: 20px;
}

#summary ul {
	list-style: disc;
	padding-left: 20px;
}

#summary li {    
	font-size: 16px;
    line-height: 1.25;
}

/* Module and its contents */

article {
	width: 100%;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	padding: 5rem 2.5rem;
	margin: 5rem 0;
}

article h3 {
	width: 100%;
	color: #515151;
}

time { 
	font-size: 16px;
	color: #bbb;	
	padding: 0.5rem 0;
	display: block;
}

.article-content { 
	padding-top: 2.5rem;
	width: 100%;
	color: #333;	
}

.article-content ul {
	list-style: circle;
	padding-left: 20px;	
}

.article-content a {
	color: #00b3be;
	text-decoration: none;
}

article a:hover {
	color: #999;
	text-decoration: underline;	
}

#an1, #an2, #an3, #an4 {
	border: 2px solid #00b3be;
}

.quote {
	color: #777; /* or #999 */
	padding-left: 5rem; /* can try 2rem left and right too */
	padding-right: 1rem;
	border-left: 1px solid #ccc;	
}

.timeline {
	color: #333;	
	padding-left: 1rem; /* can try 2rem left and right too */
	padding-right: 1rem;	
	/*border-left: 1px solid #ccc;*/	
}

.video {
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px; /* renders youtube vids correctly */
    height: 0;
    overflow: hidden;
}

.video iframe {
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

article img{
	padding-top: 2.5rem;
	width: 100%;
	height: auto;
	display: block;
}


.image-caption{ 
	font-size: 0.9rem;
	color: #999;
	padding-top: 0.4rem;
	padding-bottom: 2px;
	line-height: 1.5;
	border-bottom: 1px solid #ccc;
}

.image-caption a {
	color: #00b3be;
	text-decoration: none;
}

.image-caption a:hover{
	color: #999;
	text-decoration: underline;	
}

/* Reference container and contents */

.bottom-section{
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.bottom-subheader-title {
	font-size: 0.9rem;
	text-transform: uppercase !important;
	line-height: 2;
	color: #333;
	word-spacing: 0.3rem;
	padding: 0.8rem 0;
	border-top: 1px solid #ccc;
	display: inline; /* causes the line on top to be equal to the length of the text: neat trick; */
}


.contact-us {	
	margin-top: 1rem;
	color: #333;	
}

.email {
	color: #00b3be;	
}

/* Scroll to Top button */

#scroll-top-button {	
	width: 36px;
	height: 36px;
	border-radius: 50%;
	position:fixed;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background-color: #00b3be;
	bottom: -100px;
	right: 10px;
	color: #fff;
}

#scroll-top-button .icon-arrowup {
	font-size: 18px;	
	line-height: 36px; /* same as height of #scroll-top-button */
}

#scroll-top-button:hover {
	background-color: #00d8db;
}