/**
 *__ Typography
 */

/* first for IE 6/7/8 */
@font-face {
  font-family: KievitWebProBold;
  font-weight: bold;
  src: url(KievitWebPro-Bold.eot);
  
}

@font-face {
  font-family: KievitWebProBook;
  src: url(KievitWebPro-Book.eot);
}


/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: KievitWebProBold;
  font-weight: bold;
  src: url(KievitWebPro-Bold.woff) format('woff');
}

@font-face {
  font-family: KievitWebProBook;
  src: url(KievitWebPro-Book.woff) format('woff');
}

 
body,
a{
	font-family: KievitWebProBook, Arial, Helvetica, sans-serif;
	color: #53554b;
}

h5,
h5 a,
b,
strong,
strong a,
.impact h3,
.impact h4{
	font-family: KievitWebProBold, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#wrapper{
	line-height: 1.0625em; /* 16px x 1.0625 = 17px */
}

#primary-nav .top-level-links li,
#primary-nav .top-level-links{
	color: #454737;
	font-size: 0.9375em;/* 16px x 0.9375 = 15px */
	line-height: 1;
}

#research-title,
#section-title{
	font-size: 2.25em; /* 16px x 2.25 = 30px */
	line-height: 1;
}

#section{
	font-style: italic;
}

#share li a{
	font-size: 0.875em;
}

#sidebar li{
	line-height: 1;
}

.metadata-nav,
.metadata-nav a{
	color: #688492;
}

#footer{
	font-size: 0.719em; /* 16px x 0.75 = 12px */
	line-height: 1;
}

.story-intro h3{
	font-size: 1.5em; /* 16px x 1.5 = 24px */
	line-height: 1; /* 24px x 1.1 = 26px */
	font-weight: normal;
}

.story-intro h3 a{
	color: #446776;
}

.impact .section h3,
.story-preview h4{
	font-size: 1.125em; /* 16px x 1.125 = 18px */
	line-height: 1.125em; /* 18px x 1.1 = 20px */
	width: 70%;
}

.story-preview h4 a{
color: #577584;
}

.story-preview .tags a{
	font-size: 0.719em; /* 16px x 0.75 = 12px */
	line-height: 1;
	color: #fff;
}

.col-block h6{
	font-size: 0.6875em;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
}

.impact #content ul,
.impact #content ol,
.story-body ul,
.story-body ol,
#campuses-and-labs ul,
h5,
p{
	font-size: 0.8125em; /* 16px x 0.8125 = 13px */
}

.intro p,
.story-intro p{
	font-size: 1.125em; /* 16px x 1.125 = 18px */
	line-height: 1.28em; /* 18px x 1.28 = 23px */
}

a{
	text-decoration: none;
}

p a,
.story-body li a{
    text-decoration: underline;    
}

a:hover{
    text-decoration: underline;    
}

p.more a{
	font-size: 12px;
	line-height: 1;
	text-decoration: underline;
}

.impact .sub-section h4{
    font-size: 0.875em; /* 16px x 0.875 = 14px */    
}

.impact .sub-section h5{
    font-family: KievitWebProBook, Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.45em;
    font-weight: normal;
}

.story-intro .byline{
    font-size: 0.8125em; /* 16px x 0.8125 = 13px */
    line-height: normal;
}

.story-intro .byline .date{
    font-weight: normal;  
    color: #9a9b97;    
}

/**
 *__ Grid
 */

.col{
	float: left;
	margin-right: 20px;
}

.col.last{
	margin-right: 0;
}

.span-1{
	width: 190px !important;
}

.span-2{
	width:400px !important;
}

.span-3{
/* span across the first 3 columns*/
	width: 610px;
}
.span-3b{
/* span across the second two (narrow) columns and the sidebar (wide) column*/
    width: 710px;
}

.span-4{
/* span accross the three narrow columns and the sidebar */
width: 920px;
}

.span-1-point-5{
    /* span across 1 and a half narrow columns - used for two-column-plus-the-sidebar layouts */
    width: 295px;    
}

.span-sidebar{
	width: 290px;
}

.push-1{
	margin-left: 210px;
}

.group:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

html .group{
	/* .group fix for IE6 */
	height: 1%;
}

* *:first-child+html .group{
	/* .group fix for IE7 */
	min-height: 1px;
}

/**
 *__ Layout - Common
 */

body{
	background-color: #d9d9d8;
}

p,
.story-body ul,
.story-body ol{
	margin-bottom: 17px;	
}

.story-body p{
	clear: both;
}

#bg{
    position: relative;
    width: 100%;
    background: url(assets/images/bg_window.jpg) top center no-repeat;    
}

#bg-left,
#bg-right{
   position: absolute;
   top: 0;
   width: 50%;
   height: 454px;
}

#bg-left{
    left: 0;
    background: url(assets/images/bg_window_left.jpg) top left repeat-x;  
}

#bg-right{
    right: 0;
    background: url(assets/images/bg_window_right.jpg) top left repeat-x;
}


#wrapper{
	width: 940px;
	min-height: 100%;
	margin: 0 auto;
	padding: 0 0 0 20px;
	background: #ffffff url(assets/images/bg_page.jpg) top left no-repeat;
}

#header{
	width: 920px;
}

#primary-nav{
	border-top: solid 6px #53554b;
	border-bottom: solid 1px #7ea2b1;
	margin-bottom: 30px;
}

#primary-nav li{
	float: left;
}

#primary-nav .top-level-links li{
	padding: 15px 0;
	margin-right: 15px;
}

#primary-nav .top-level-links .selected{
	border-bottom: solid 3px #7ea2b1;
	padding-bottom: 12px;
}

#primary-nav .top-level-links{
	float: left;
}
#primary-nav .social-media-links{
	float: right;
}

#primary-nav .social-media-links li{
	padding-top: 8px;
	margin-left: 4px;
	vertical-align: top;
}

#masthead{
	height: 60px;
	margin-bottom: 20px;
}

#main{
	position: relative;
	z-index: 2; /* In context of #wrapper #content */
	padding-bottom: 55px;
}

#main p,
.story-body ol,
.story-body ul{
	width: 87%;
}

.story-body img{
	float: left;
	margin: 3px 15px 10px 0;
}

.featured.col-block{
	padding-top: 0 !important;
	margin-bottom: 12px;
}

.featured img,
.story-preview img{
    display: block;    
}

.story-intro{
    margin-top: 20px;    
}

.story-intro h3{
	margin-bottom: 10px;
}

.mm-player{
    
}

#sidebar{
	position: relative;
	z-index: 1; /* In context of #wrapper #content */
	float: left;
	width: 290px;
	margin: 0 0 0 -125px;
	padding: 0 20px 280px 125px;
	background: url(assets/images/bg_col_right.jpg) bottom right no-repeat;
}

#campuses-and-labs li,
#sidebar li{
	padding: 0 0 5px 0;
	border-bottom: solid 1px #e2e2e2;
	margin-bottom: 5px;
}

#sidebar li ul{
    margin-top: 5px;
    border-top: solid 1px #e2e2e2;
    padding-top: 5px;
}

#campuses-and-labs li,
#related-stories li,
.story-preview,
.profile .featured{
border-bottom: dotted 1px #9b8599;
}

.story-preview.last,
#campuses-and-labs li.last,
#related-stories li.last,
#sidebar li.last{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

#sidebar li li a{
    margin-left: 15px;    
}

#sidebar li a{
    padding-left: 15px;    
}

#sidebar li a.selected{
	background: url(assets/images/arrow_01.gif) center left no-repeat;
}

#footer{
	width: 920px;
	border-top: solid 3px #53554b;
	padding-top: 7px;
	padding-bottom: 60px;
}

#footer ul li{
    float: left; 
    padding-right: 9px;
    border-right: 1px solid;    
    margin-right: 10px;    
}

#footer ul li.last{
    border-right: none;    
}

.col-block{
	border-top: solid 3px;
	padding: 10px 0 0;
	margin-bottom: 30px;
}

.col-block.last{
	margin-bottom: 0;
}

.col-block h6 {
	margin-bottom: 20px;
}

.col-block.orange{
	border-top-color: #feaf32;
}

.col-block.dpurple{
	border-top-color: #9b8599;
}

.col-block.purple{
	border-top-color: #d7b2d3;
}
.col-block.blue{
	border-top-color: #6ba1b7;
}

.col-block.dblue{
	border-top-color: #acbbbf;
}

.col-block.lblue{
	border-top-color: #94bfd4;
}

.col-block.lgrey{
	border-top-color: #e6dde5;
}

.col-block.lgreen{
	border-top-color: #bec1b1;
}

.col-block.yellow{
	border-top-color: #ffdd77;
}

.col-block.red{
	border-top-color: #be5304;
}

.col-block.green{
    border-top-color:#cfd359;    
}

.campus{
	color: #acb381;
}

.access-nav{
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;    
    padding: 0;
    margin: 0;
}

.top-rule-a{
    border-top: solid 3px #acbbbf;
}

.top-rule-b{
    background: url(assets/images/border_railroad.gif) top left repeat-x;
}

.top-rule-c{
    border-top: dotted 1px #acbbbf;  
}



/**
 *__ Layout - Home
 */

.home .col-block h3{
	margin-bottom: 24px;
}

.home #sidebar .mm-player{
	margin-bottom: 10px;
}

.home .video-archive,
.home .science-today{
	border-bottom: none;
}

#top{
	position: relative;
	z-index: 2; /* In the context of #wrapper #content #main */
}

#bottom{
position: relative;
z-index: 1; /* In the context of #wrapper #content #main */
background: url(assets/images/bg_col_right.jpg) top right no-repeat;
margin-top: -195px;
padding-top: 195px;
padding-bottom: 100px; /* Extra padding to allow room for bg image */
}

.home .video-archive{
	padding-top: 0;
}


.home .video-archive .video-cont{
    width: 290px;
    height: 163px;
}

.home #science-today-audioplayer-cont{
    width: 290px;
	height: 177px;
}

#home-video{
    margin-bottom: 15px;    
}

/**
 *__ Layout - Stories
 */

.story-preview{
	width: 100%; /* ie has-layout-bug fix */
	margin-bottom: 8px;
}

.story-preview h4{
	margin-bottom: 15px;
}

.story-preview .tags{
	padding-bottom: 18px;
}

.story-preview .tags li{
	float: left;
	margin: 0 1px 1px 0;
}

.story-preview .tags a{
	float: left;
	display: block;
	padding: 5px 8px;
}

.story-preview .tag-discipline{
	background-color: #9b8599;
}

.story-preview .tag-topic{
	background-color: #6ba1b7;
}

.story-preview .video{
    width: 295px;
    height: 166px;   
}

.story-preview .video,
.story-preview img{
    margin-bottom: 10px;  
}

/**
 *__ Layout - Story and Profile
 */

.story-body ul{
    list-style: disc;
}

.story-body ol{
    list-style: decimal;    
}

.story-body ul{
    margin-left: 16px;    
}

.story-body ol{
    margin-left: 20px;    
}

#story-callout{
	margin-left: -20px;
	padding-left: 20px;
	min-height: 415px; /* To accomodate bg image */
	background: url(assets/images/bg_col_left.png) bottom left no-repeat;
}

#share li a{
	display: block;
	height: 21px;
	line-height: 21px;
	margin-bottom: 5px;
	padding-left: 30px;
}

#share .facebook a{
	background: url(assets/images/icon_facebook.gif) top left no-repeat;
}

#share .twitter a{
	background: url(assets/images/icon_twitter.gif) top left no-repeat;
}

#share .email a{
	background: url(assets/images/icon_email.gif) top left no-repeat;
}

#share .more a{
	background: url(assets/images/icon_more.gif) top left no-repeat;
}

#related-stories{
	padding-bottom: 33px;
}

#related-stories li{
	margin-bottom: 10px;
}

.story-intro h3{
	width: 60%;
}

#main .story-intro .profile-basics h3,
#main .story-intro p{
	width: 75%;
}

.profile .story-intro{
	padding-bottom: 40px;
}

.profile .featured{
	margin-bottom: 10px;
}

#qa{
	
	margin-left: -20px;
	padding-left: 20px;
	background: url(assets/images/bg_col_left.png) center left no-repeat;
}

.q,
.a{
	position: relative;
	width: 304px;
	margin: 0;
	padding-bottom: 28px;
}

.q{
	margin-right: 2px;
	background: url(assets/images/bg_q.gif) no-repeat;
	background-position: 18px bottom;
	
}

.a{
	background: url(assets/images/bg_a.gif) no-repeat;
	background-position: 257px bottom;
	margin-top: 28px;
	
}

.qa-label{
	position: absolute;
	z-index: 21; /* In context of #wrapper #content #main */
	padding: 15px 0 0 15px;
}

.qa-text{
	width: 219px;
	position: relative;
	z-index: 20; /* In context of #wrapper #content #main */
	padding: 15px 35px 2px 50px;
}

.q .qa-text{
	background: #d3d7c1;
	background: -webkit-gradient(linear, left top, left bottom, from(#abb381), to(#d3d7c1));
	background: -moz-linear-gradient(top, #abb381, #d3d7c1);
}

.a .qa-text{
	background: #d2d9db;
	background: -webkit-gradient(linear, left top, left bottom, from(#b4c3c8), to(#d2d9db));
	background: -moz-linear-gradient(top, #b4c3c8, #d2d9db);
}

.story-intro .byline{
    padding-top: 0;
    height: auto; 
    text-transform: none;   
}

.story-intro .byline .author{
    margin-right: 8px;    
}

/**
 * Impact
 */
 .impact #main .intro p,
 .impact .story-body p,
 .impact .story-body ol,
 .impact .story-body ul{
    width: 75%;    
 }
 
 .impact #main h3,
 .impact #main h4{
     width: 60%;
     margin-bottom: 17px;
 }

.impact .section{
    padding-bottom: 60px;    
}

.impact .sub-section .col{
    padding-top: 15px;    
}

/**
 *__ Image replacements
 */
 
.home .bucket h3,
.home #profiles h3 a,
.home #image-of-the-day h3 a,
.home #science-today h3 a{
	height: 0;
	overflow: hidden;
	background-position: top left;
	background-repeat: no-repeat;
}

.home #profiles h3,
.home #image-of-the-day h3,
.home #science-today h3{
	/* The title for these buckets are links, so override the styles set above. */
	height: auto;
	overflow: auto;
	background: none;
}

.home #profiles h3 a{
	display: block;
	width: 72px;
	padding-top: 19px;
	background-image: url(assets/images/h_profiles_b.png);
}

.home #campuses-and-labs h3{
    width: 140px;
    padding-top: 67px;
    background-image: url(assets/images/h_campuses_and_labs.png);
}

.home #campus-stories h3{
	width: 78px;
	padding-top: 42px;
	background-image: url(assets/images/h_campus_stories.png);
}

.home #media-coverage h3{
	width: 87px;
	padding-top: 48px;
	background-image: url(assets/images/h_media_coverage.png);
}

.home #science-today h3 a{
	display: block;
	width: 136px;
	padding-top: 24px;
	background-image: url(assets/images/h_science_today.gif);
}

.home #image-of-the-day h3 a{
	display: block;
	width: 87px;
	padding-top: 48px;
	background-image: url(assets/images/h_image_of_the_day.gif);
}

.home #content-submission h3{
    width: 110px;
    padding-top: 42px;
    background-image: url(assets/images/h_content_submission.png);
}

.col-block h6{
	height: 0;
	overflow: hidden;
	padding-top: 8px;
	background-position: top left;
	background-repeat: no-repeat;
}

#share h6{
	width: 34px;
	background-image: url(assets/images/h_share.gif);
}

#related-stories h6{
	width: 90px;
	background-image: url(assets/images/h_related_stories.gif);
}

#disciplines h6{
	width: 83px;
	background-image: url(assets/images/h_area_of_study.gif);
}

#topics h6{
	width: 37px;
	background-image: url(assets/images/h_topics.gif);
}

#keywords h6{
	width: 58px;
	background-image: url(assets/images/h_keywords.gif);
}

#date h6{
	width: 25px;
	background-image: url(assets/images/h_date.gif);
}

#source h6{
    width: 42px;
    background-image: url(assets/images/h_source.gif);
}

#locations h6{
    width: 59px;
    background-image: url(assets/images/h_locations.gif);
}

#logotype a,
#research-title a,
#section-title a{
	height: 0;
	overflow: hidden;
	background-position: top left;
	background-repeat: no-repeat;
}

#logotype a{
	/* Width is set by grid styles */
	display: block;
	padding-top: 53px;
	background-image: url(assets/images/logotype_new.png);
}

#research-title a{
    display:block;
	width: 134px;
	margin: 26px 0 0 0;
	padding-top: 27px;
	background-image: url(assets/images/h_research.png);
}

#section-title{
	width: 500px;
	margin-top: 20px;
}

#section-title a{
	display: block;
	padding-top: 42px;
}

.story #section-title a,
.archive #section-title.stories a{
	background-image: url(assets/images/h_explore_stories.png);
}

.profile #section-title a,
.archive #section-title.profiles a{
	background-image: url(assets/images/h_profiles_a.png);
}

.impact #section-title a{
    background-image: url(assets/images/h_impact.png);    
}

.archive #section-title.image-of-the-day a{
    background-image: url(assets/images/h_image_of_the_day.png);    
}

.archive #section-title.video a{
    background-image: url(assets/images/h_video.png);    
}

.archive #section-title.in-the-news a{
    background-image: url(assets/images/h_in_the_news.png);    
}

.qa-label p{
	width: 28px;
	height: 0;
	overflow: hidden;
	padding-top: 28px;
	background-position: top left;
	background-repeat: no-repeat;
}

.q .qa-label p{
	background-image: url(assets/images/icon_q.png);
}

.a .qa-label p{
	background-image: url(assets/images/icon_a.png);
}

/* popup video feature */


/**
 * The lightbox CSS below comes from:
 *  Leandro Vieira Pinho - http://leandrovieira.com
 */
 
 
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90; /* In context of body */
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100; /* In context of body */
	text-align: center;
	line-height: 0;
}

#lightbox-videoplayer-container{
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 250px;
    background-color: #000000;
}



#lightbox-secNav-btnClose{
    position: absolute;
    right: 0;
    display: block;
    width: 34px;
    height: 0;
    padding-top: 34px;
    overflow: hidden;
    line-height: 1em;
    background: url(assets/images/lightbox-btn-close.png) top left no-repeat #000000;    
}

.get-flash{
   line-height: 1em;
   padding-top: 15px;
   display:none;
}

#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #000;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 0; }
#lightbox-loading {
	position: absolute;
	top: 48%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10; /* In context of #jquery-lightbox */
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 88%;
	zoom: 1;
	display: block;

}

#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}

#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Arial, Helvetica, sans-serif;
	color:#343530;
	background-color: #d9dee0;
	font-weight:normal;
	margin: 0 auto;
	padding: 0 0 0 0;
	overflow: auto;
	width: 100%;
	height: 90px;
}
#lightbox-container-image-data {
	padding: 0; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	text-align: left; 
	padding:10px 15px 10px 15px;	
}	
#lightbox-image-details-caption { 

	font-size:1.2em;
		float: left; 
		width:75%;
}
#lightbox-image-details-currentNumber {
	float:right;	
	color:#336666;
	font-size:2.5em;
	letter-spacing:-0.1em;
}	

#lightbox-secNav{
	height:34px;
}




/**
 *__ Temp
 */


#story-video{
	height: 490px;
	background: #000;
}


/**
* 
*/

.image_inline{
	background-color:#f0f0f0;
}

.image_inline img{
	margin: 0 15px 10px 0;
}

.image_inline p{
	line-height:1.2;
	padding:8px 0 15px 15px;
	width:320px !important;		
}