/* --------------------------------------------------------------------------------------------
	IMPORTANT! This file must reside on DEV and be published out to the other servers.
----------------------------------------------------------------------------------------------- */

/*		Styles for the EXTERNAL home page, located at /world/index.php					*/

	
		#sundays a:link, #sundays a:visited {
				background-color:white;
				display:block;
			}
		#sundays a:hover {
				background-color:#fbfdd2;
				display:block;
			}
		#sundays {
				margin-bottom:20px;
			}

/*	---------------------------------------------------------------------------------
		Default template overrides
	---------------------------------------------------------------------------------	*/

		.responsiveLinkList2 { list-style-type:none; }
		.responsiveLinkList2 li { list-style-image:none;margin-left: 0; }
		
		.boundingBox { border-color: #bfdff3; margin-bottom:15px;}
		
		#siteTitleContainer { color: #ccf2ff; font-size:22px;}
		
		
		/* Red Bar Notice */
		
		#redBarOuter { }
		
		#RedBarNotice {
			margin: 1em 0 2em 0;
			padding: .8em;
			color: #fff;
			background-color: red;
			font-size: 16px;
			line-height: 18px;
			font-family: Arial, Helvetica, sans-serif;
			}
			
		#RedBarNotice .Headline {
			font-weight: bold;
			}



/*	---------------------------------------------------------------------------------
		BNL Logo
	---------------------------------------------------------------------------------	*/


		@media (min-width:1600px) {
			#BNLlogo {
				width: 200px;
				margin-top: 17px;
			}
		}
		
		@media (min-width:1300px) and (max-width:1600px) {
			#BNLlogo {
				width: 200px;
				margin-top: 17px;
			}
		}
		
		@media (min-width:1100px) and (max-width:1300px) {
			#BNLlogo {
				width: 180px;
				margin-top: 20px;
			}
		}

		@media (min-width:850px) and (max-width:1100px) {
			#BNLlogo {
				width: 160px;
				margin-top: 21px;
			}
		}
		
		@media (min-width:720px) and (max-width:850px) {
			#BNLlogo {
				width: 140px;
				margin-top: 22px;
			}
		}



/*	---------------------------------------------------------------------------------
		Home page rows
	---------------------------------------------------------------------------------	*/
	
		.homePageRow {
			width: 100%;
			padding: 3em 0 1em 0;
			}
			
		#firstRow  { padding: 0 0 1em 0; }	
		#secondRow { padding: .8em 0 1.6em 0; background-color: #d4ebfa; }
		#thirdRow  { padding: 0 0 4em 0; background-color: #d4ebfa; }
		#fourthRow { padding: 20px 0 1em 0; background-color: #68a1c8;border-top:2px solid #fff;z-index:1; }
	

/*	---------------------------------------------------------------------------------
		First Row - Splash and Other News
	---------------------------------------------------------------------------------	*/

		/* splash graphic */
		
		.bx-wrapper { margin-bottom: .8em; }			
		
		
		/* navigation buttons under splash graphic */
										
		#navcontainerSplash .white.button { 

			}
				
		#navcontainerSplash .white.button:hover {
			color:#000;
			background-color:#dcfcfc;
			}
			
		a#visitButton { float:right; }
		
		
		@media (max-width:1100px) {
			#navcontainerSplash .white.button {
				padding-left: .6em;
				padding-right: .6em;
				}
		}
		
		@media (max-width:850px) {
			#navcontainerSplash .white.button {
				padding-left: .4em;
				padding-right: .4em;
				margin-left: .3em;
				margin-right: .3em;
				}
			a#visitButton { float: none; }
		}
		
		@media (max-width:720px) {
			#navcontainerSplash .white.button {
				padding-left: 0;
				padding-right: 0;
				margin-left: 0;
				margin-right: 0;
				font-size: 120%;
				}
		}

			
		/* Summer Sundays */
		
					
		#sundays:hover {
			background-color: #f2e2ff;
			border-color: #894794
		}
		
		#sundays a,
		#sundays a:hover {
			background-color: transparent;
			text-decoration: none;
		}
		
		#sundays a img {
			display: block;
		}
		
		
		
		
		/* Other news (on the right side of splash graphic) */	
				
		#otherNews ol.smallSlats li a h3 {
			margin-bottom: 0;
			font-size: 100%;
			}

			
		/* Our Mission */
		
		#ourMission p { font-size: 80%; }
		
		#ourMission h3 {
			color: #000;
			margin-bottom: .4em;
			}


/*	---------------------------------------------------------------------------------
		Second Row - Research Themes
	---------------------------------------------------------------------------------	*/

		.homePageRow#secondRow h2 { float:left;color : #126497; }
		
		/* Links on top right side of Research Themes section */
		
		#coreCapabilities {
			float:right;
			margin-top: .2em;
			}
		
		#coreCapabilities p {
			font-size: 85%;
			font-family:Arial;
			}
	
		#coreCapabilities a:link {
			background-color:transparent;
			text-decoration: none;
			padding: .25em .6em .3em .6em;
			margin-right:5px;
			}
			
		#coreCapabilities a:visited,
		#coreCapabilities a:link { color: #3d89b9; }
			
		#coreCapabilities a:hover {
			text-decoration:none;
			background-color:#fff;
			color:black;
			}
		
		/* Research Themes Thumbnail Images */
	
		.thumb {
			display: inline-block;
			width: 18%;
			margin-right: 2%;
			vertical-align: top;
			}
			
		.thumb.last { margin-right: 0; }
				
		.thumb:hover .thumbTitleLink { color: #126497; }


/*	---------------------------------------------------------------------------------
		Third Row - Conferences, Facilitites, Resources for... 
	---------------------------------------------------------------------------------	*/
	
		#thirdRow .sidebar.blue.empty { margin-bottom: 0; }
		
		/* Conferences */
			
		#conferencesOuter {
			width: 100%;
			padding: 0;
			background-color: #fff;
			border: 1px solid #c0c0c0;
			border-top: 0px;
			height: 241px;
			overflow-y: scroll;
			}
			
		.conferenceType,
		.conferenceTitle { margin-bottom:0; }
		
		.conferenceType,
		.conferenceTitle,
		.conferenceDate { margin-left:10px;margin-right:10px; }
		
		.CalEventOuter { background-image: url('/../../../../../../../common/images/icons/calendar/Cal-Icon-Back-50px.png'); }
		.calIconDate,
		.calIconDay { color: #727272; }
		
		#eventsCalendar {
				margin: .8em 0 0 0;
				background-color:#eff6fa;
				padding: .6em .6em .3em .6em;
				border: 1px solid #9ccae8;
			}
		#eventsCalendar img {
				float:left;
				margin-right: .6em;
				}
												
		#eventsCalendar a.white.button { margin-top: 0; vertical-align: top; }
				
		#eventsCalendar a.white.button:hover {
			color:#000;
			background-color:#dcfcfc;
			}
				
		/* Facilities */	
		
		#facilitiesLinkList li {
			margin: 0;
			padding: 0;
			}
						
		#facilitiesLinkList li a {
			display: block;
			width: 100%;
			margin: 0;
			padding: .8em 0 .8em 0;
			background-color: #fff;
			font-size: 110%;
			text-decoration: none;
			border-left: 1px solid #c0c0c0;
			border-right: 1px solid #c0c0c0;
			border-bottom: 1px solid #c0c0c0;
			}
			
		#facilitiesLinkList li a:hover {
			background-color: #eaf4fe;
			color: #000;
			}
	
		#facilitiesLinkList li a span {
			display: inline-block;
			margin: 0 10px 0 10px;
			}
			
		/* Resources for... */	
	
		#resourcesForContainer { padding-top: 6px; }
				
		#resourcesForContainer .button {
			width: 95%;
			text-align: center;
			padding-right: 0;
			padding-left: 0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 85%;
			color: #43500b;
			}
			
		.green.button { 
			background-color: #dce9a5; 
			text-shadow:none;
			-webkit-box-shadow:none;}
		.green.button:hover { background-color:#c8de68;	}
		
		/* BNL is open for business! */
			
		#openForBusiness { margin-bottom: 0; padding: .8em 0;}
		#openForBusiness h4 { font-size: 120%; } 
		#openForBusiness p {
			margin-bottom: .4em;
			font-size: 90%;
			line-height:135%;
			}


/*	---------------------------------------------------------------------------------
		Forth row -- Social Media & Footer 
	---------------------------------------------------------------------------------	*/

		/* Social Media Icons */
		
		ul#sm-list {
			position: relative;
			top: -50px;
			list-style: none;
			list-style-type: none;
			list-style-image: none;
			margin: 0 0 -30px 16px;
			padding: 0;
			}
			
		ul#sm-list li {
			list-style: none;
			list-style-type: none;
			list-style-image: none;
			display: inline-block;
			margin: 0 .6em 0 0;
			padding: 0;
			}
			
		ul#sm-list li:last-child { margin-right: 0; }
			
		ul#sm-list li a {
			display: inline-block;
			margin: 0;
			padding: 0;
			width: 58px;
			height: 58px;
			font-size: 8px;
			line-height: 8px;
			text-decoration: none;
			}	
			
		#sm-facebook { background-image:url('/coreimages/icons/icon-round-active-facebook-58px.png') }
		#sm-youtube { background-image:url('/coreimages/icons/icon-round-active-youtube-58px.png') }
		#sm-flickr { background-image:url('/coreimages/icons/icon-round-active-flickr-58px.png') }
		#sm-twitter { background-image:url('/coreimages/icons/icon-round-active-twitter-58px.png') }
		#sm-tumblr { background-image:url('/coreimages/icons/icon-round-active-tumblr-58px.png') }
		#sm-instagram { background-image:url('/coreimages/icons/icon-round-active-instagram-58px.png') }
		
		#sm-facebook:hover { background-image:url('/coreimages/icons/icon-round-inactive-facebook-58px.png') }
		#sm-youtube:hover { background-image:url('/coreimages/icons/icon-round-inactive-youtube-58px.png') }
		#sm-flickr:hover { background-image:url('/coreimages/icons/icon-round-inactive-flickr-58px.png') }
		#sm-twitter:hover { background-image:url('/coreimages/icons/icon-round-inactive-twitter-58px.png') }
		#sm-tumblr:hover { background-image:url('/coreimages/icons/icon-round-inactive-tumblr-58px.png') }
		#sm-instagram:hover { background-image:url('/coreimages/icons/icon-round-inactive-instagram-58px.png') }

		
		/* footer */

		#footer {
			margin-top:0;
			height:auto;
			background-color: #8ab7d6;
			}
		
		#fourthRow a:link, #fourthRow a:visited {
			color:#fff;
		/*	text-decoration:underline; */
			}
				
		#fourthRow a:hover { text-decoration:none; }
		
		#fourthRow .responsiveLinkList2 li a { 
			color:#fff; 	
			text-decoration:none;
			font-size: 90%;
			line-height: 120%;
			} 
		
		#fourthRow .responsiveLinkList2 li a:hover { color:#cff; }
		
		#fourthRow p { color: #fff; }
		
		#BSA h3 { color:white; }
		
		#BSA p {
			color: #d5effb;
			margin-bottom: .6em;
			font-size: 90%;
			line-height: 140%;
			}
		
		#address {
			margin-bottom: 1em;
			margin-top:1.6em;
			font-size: 90%;
			line-height: 140%;
			}
												
		#securityLink a:link,
		#securityLink a:active,
		#securityLink a:visited { text-decoration: none; }
		
		#securityLink a:hover { text-decoration: none; color: #cff; }
		
		/* The footer div (below) is empty on the external home page, but it must be there
		so the mobile page elements know where to place themselves on the page */
		
		#footer {
			display: none !important;
			margin: 0;
			padding: 0;
			border: 0px;
			}

		#fourthRow a.button.webmailButton {
			background-color: #93c2e3;
			color:#1a6395;
			font-size: 85%;
			padding-left: 1em;
			padding-right: 1em;
		} 

		#fourthRow a.button.webmailButton:hover {
			background-color:#abdcff;
		} 
		
		#fourthRow a.button.OWA {
			font-size:0.85em;
			padding:0.7em 0.9em 0.8em 0.9em;	
			margin-left:0;
			margin-top:0;
			}
				
		#fourthRow a.button.OWA:link, #fourthRow a.button.OWA:visited {
			background-color: #93c2e3;
			text-decoration:none;
			color:#1a6395;
			}
			
		#fourthRow a.button.OWA:hover {
			text-decoration:none;
			background-color:#abdcff;
			}
			
		#fourthRow a.button .fa {
			color:white;
			margin-left:0.4em;
			}

/*	---------------------------------------------------------------------------------
		MOBILE STYLES
	---------------------------------------------------------------------------------	*/

		@media (max-width:720px) {
		
			#siteMenuHead { display: none !important; }
		
			/* First Row - Splash and News Summaries */
			
			.bx-wrapper .bx-caption { display: none; }
			
			#mobileSplashText { margin: 0 0 20px 0; }
		
			#navcontainerSplash { margin-bottom: 30px; }
			
						
			#otherNews ol.slats li a h3 {
				font-size:18px;
				line-height: 20px;
				}
				
			#navlistSplash li { margin-left: 0; }
			
			#navlistSplash a { 
				padding: 7px 10px 8px 10px; 
				font-size:14px;
				}
				
			a#visitButton { float:none; }
		
			/* Second Row - Research Themes */

			.homePageRow#secondRow h2 { float: none; }
			
			#researchThemesTopOuterContainer h2 { text-align: center; }
			
			#coreCapabilities { float:none; }
			
			#coreCapabilities p { 
				margin: 0 0 20px 0;
				padding: 0;
				}
				
			
			#coreCapabilities a,
			#coreCapabilities a:link,
			#coreCapabilities a:active,
			#coreCapabilities a:visited {
				margin: 0 0 20px 0;
				padding: 12px 0 12px 0;
				display: block;
				width: 100%;
				max-width: 100%;
				text-align: center;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 150%;
				background-color: #EAF7FD;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
				border: 1px solid #999;
				}
							
			#coreCapabilities a:hover {
				color: #000;
				background-color: #eaeaea;
				border-color: #999;
				}			
			
			#secondRow .thumb {
				display: block;
				width: 168px;
				margin: 0 auto 20px auto;
				}

			
			/* Third Row -- Conferences, Facilities, etc. */
			
			#conferencesOuter {
				margin-bottom: 30px;
				height: 300px;
				}
				
												
			#eventsCalendar {
				margin: 0 0 30px 0;
				padding: 0;
				border: 0px;
				background-color: transparent;
				}
				
		#eventsCalendar a.white.button {
			font-size: 120%;
			font-family:Arial, Helvetica, sans-serif;
			font-weight: normal;
			}
				
								
			#facilitiesLinkList li a { border-top: 0px; }
			
			#facilitiesLinkList li:first-child a {
				border-top-left-radius: 0px;
			    border-top-right-radius: 0px;
				-moz-border-radius-topleft: 0px;
			    -moz-border-radius-topright: 0px;
			    -webkit-border-top-left-radius: 0px;
			    -webkit-border-top-right-radius: 0px;
				}

			#resourcesForContainer .button {
				width: 100%;
				margin-left: 0px;
				margin-right: 0px;
				font-size: 16px;
				padding-top: 10px;
				padding-bottom: 10px;
				}
				
			/* Forth Row -- Social Media & Footer */
			
			ul#sm-list {
				width: 100%;
				margin: 0;
				text-align: center;
				}

			
			#fourthRow h4 { font-size: 18px; }
			
			#fourthRow .responsiveLinkList2 li a {
				font-size: 14px;
				color:#666;
				}
				
			#fourthRow .responsiveLinkList2 li a:hover { color:#000; }

			#webmailButtonsOuter {
				text-align: center;
			}
			
			#fourthRow a.button.webmailButton {
				font-size: 120%;
				width: 40%;
			}


			#mobileFooterTopBar { margin: 0px 0px 0px 0px !important; }

		}
	
/* --------------------------------------------------------------------------------------------
	END OF LOCAL SITE STYLE SHEET
----------------------------------------------------------------------------------------------- */