/*
	99Lime.com HTML KickStart by Joshua Gatcke
	style.css
	
*/

/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Arimo:400,700);

/*---------------------------------
	OVERRIDES
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
font-family: Calibri, sans-serif;
}

thead th,
tbody th{
font-family: Calibri, sans-serif;
}

button,
a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"]{
font-family: Calibri, sans-serif;
}

.menu{
font-family: Calibri, sans-serif;
}

blockquote{
font-family: Calibri, sans-serif;
}

/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:0;
color:#444444;
/*background:#efefef url(css/img/grid.png) repeat center top;*/
/*background: #ffffff url(img/top_bg.jpg) repeat-x;*/
font:normal 1em/150% Calibri, sans-serif;
text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */
}

#wrap{
width:100%;
background:#fff;
margin:/*3*/0px auto 30px auto;
padding:0 2%;
border:1px solid #ccc;
}

hr {
border: #cccccc thin dotted;
margin-top: 0;
margin-bottom: 0;}

h4 {color: #444444;}

p {
line-height: 1.2em;
margin-bottom: 20px;
color: #444444;}

strong {color: #444444;}

a {color: #00b3be;}

#nav {
margin: -1px -23px 0 -23px;
text-align: center;
position: relative;
top: 0;
left: 0;
background: #CC9;}

.menu{
margin:-1px -2.2% 0 -2.2%;
}

.right-line {
border-right: #cccccc thin dotted;}

.left-line {
border-left: #cccccc thin dotted;}

.bottom-line {
border-bottom: #6c6f70 thick solid;}

.spaces {
margin: 20px 0 20px 0;}

/*ACCORDION*/
#timeline {margin: 0 auto 25px auto !important; background: #eaeaea;}
#timeline div {/*width: 300px;*/}
.timeline-title {color: #6c6f70;}

figure {/*padding: 0 0 10px 10px !important;*/}

figure p {font-size: 15px; font-weight: bold; color: #6c6f70; line-height: 1.2em; padding-top: 15px !important; padding-left: 15px !important;}

figure p img {margin: 10px !important;}

h2.page_title {color: #00b3be; margin: 0;}

.sub_title {color: #00b3be; margin: 0;}

blockquote {
    margin:1em 0;
}

blockquote p {
    margin:0; 
    font-size:0.5em;
	color: #ffffff;
}

#photo-box {
	padding-top: 3px;
	border: #cccccc 1px solid;
}

img.grayscale{
/*#photo-box img {-webkit-filter: grayscale(100%);}*/

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


.area-main {padding-right: 10px;}

.thumbnail {margin-top: 25px; border: #cccccc thin solid; padding: 3px;}
.thumbnail a {color: #00b3be; font-size: 12px;}
#lightboxCaption {line-height: 1.2em;}
a .caption1 {font-size: 14px; color: #00b3be;}
.caption2 {font-size: 12px; font-style: italic; display: block; line-height: 1.5em; margin: 10px;}

.event h5 {background: #6c6f70; color: #ffffff; font-size: 0.9em; text-align: center; padding: 10px 0;}
.event p {padding: 0 10px 0 10px; text-align: justify;}
.event .caption {line-height: 1em;}

.community_hr {border: #cccccc thin dashed;}

.research-projects {font-size: 14px; line-height: 1.5em; list-style: none outside; list-style-position: outside;}
.research-projects li:before{content: "\00BB"; padding-right: 10px;}

p.content-graphic {text-align: center; margin: 0 auto 0 auto;}

.logo-holder {margin: 30px 0 0 0; text-align: center;}

.stats {margin-top: 30px; text-align: center;}

.img-wrap {text-align: center;}

div.donors strong {margin: 0;}
div.donors h6 {margin-bottom: 0;}
div.donors p {margin-top: 0;}
.donors img {float: left; margin: 10px 20px 20px 0;}

p.donor-names {font-size: 14px; line-height: 1.5em; color: #6c6f70; text-align: justify;}
p.donor-names .bluedot {font-size: 14px; color: #00b3be; font-weight: bold;}

.thanks-donor h3 {color: #00b3be;}
.thanks-donor h6 {margin-bottom: 0;}
.thanks-donor p {margin-top: 0; font-size: 13px; color: #6c6f70;}

.page-menu ul {list-style: none; margin-left:10px;}
.page-menu ul li a, .page-menu ul li a:visited {color: #6c6f70; font-weight: bold; font-size: 15px;}
.page-menu ul li a:hover {color: #00b3be;}

/*---------------------------------
	LIGHTBOX
-----------------------------------*/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	z-index: 1000;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both; z-index: 100;} 
#overlay img{ border: none; z-index: 100;}

#overlay{ background-image: url(img/overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	z-index: 100;
	}
	







.area-bottom {background: #ffffff;}
.area-bottom span {margin: 0; font-size: 12px;}

.stats_title {background: #6c6f70; color: #ffffff; padding: 3px 10px 3px 10px; text-align: center; margin-bottom: 0px;  -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
.stats_title h5 {margin: 3px 0 3px 0;}
span.additional-info {display: block; text-align: center;}



img.logo-holder {margin: 0 25px 0 5px;}

.haskayne {font-weight: bold; color: #444444; }

.wilson {font-weight: bold;}

.pullquote {margin-top: 50px; border-top: #6c6f70 thin solid; border-bottom: #6c6f70 thin solid; padding-left: 20px;}
.pullquote p {margin-top: 7px; margin-bottom: 10px; color: #999999; font-style: italic;}

ul.board {list-style: none; margin-left: 0;}
ul.board li {font-weight: bold; line-height: 1.2em;}
ul.board span {font-weight: normal; font-style: italic; font-size: 0.8em;}

.area-main iframe {margin-top: 5px; margin-right: 15px; }
.area-main .video {z-index: -100;}

.donors p {padding-right: 25px;}



/*---------------------------------
	TABLES
-----------------------------------*/
table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
	thead, tbody{margin:0;padding:0;}
	th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
	thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
	tbody tr.last th,
	tbody tr.last td{border-bottom:0;}
	
/* striped */
table.striped{background: #ffffff;}
	table.striped tr.alt{background:#e0eff1;}
	table.striped thead th{background:#6c6f70; color: #ffffff; text-align: center;}
	table.striped tbody th{background:#ffffff;text-align:center;padding-right:15px;border-right: none;/*border-right:1px dotted #e5e5e5;*/}
	table.striped tbody tr.alt th{background:#efefef;}
	table.striped tr td.number {text-align: right;}
	table.striped tr.total {border-top: #6c6f70 thin solid; border-bottom: #6c6f70 thin solid;}
	table.striped tr.last {border-bottom: #6c6f70 medium solid;}
	
.second-level {padding-left: 30px;}

.testimonial {
    margin: 30px 0 0 0;
    background: #00b3be;
    padding: 10px 20px;
    position: relative;
    font-family: Calibri, sans-serif;
    color: #ffffff;
    border-radius: 20px;
    font-style: italic;
    /*text-shadow: 0 1px 0 #ECFBFF;
    background-image: linear-gradient(#CEF3FF, #B7EDFF);*/
}

.testimonial p {font-size: 0.6em;}

/*.testimonial:before, .testimonial:after {
    content: "\201C";
    position: absolute;
    font-size: 80px;
    line-height: 1;
    color: #ffffff;
    font-style: normal;
}*/

.testimonial:before {
    top: 0;
    left: 10px;
}
/*.testimonial:after {
    content: "\201D";
    right: 10px;
    bottom: -0.5em;
}*/
.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #00b3be;
    margin: 0 0 0 25px;
}
.testimonial-author {
    margin: 0 0 0 25px;
    font-family: Calibri, sans-serif;
    color: #444444;
    text-align:left;
	
}
.testimonial-author span {
    font-size: 12px;
    color: #444444;
	font-family: Calibri, sans-serif;
}

.rounded-corners {
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
	background: #00b3be;}
	
.vision-mission p {
	padding: 15px 0 15px 15px;
	color: #ffffff;}
	
.vision-mission span {
	font-weight: bold;}

/* ============================================================================================================================
== BUBBLE WITH A RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-right {
	position:relative;
	padding:15px 10px 15px 15px;
	margin:1em 0 3em;
	color:#fff;
	background: #00b3be; /* default background for browsers without gradient support */
	/* css3 */
	/*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
	background:-moz-linear-gradient(#2e88c4, #075698);
	background:-o-linear-gradient(#2e88c4, #075698);
	background:linear-gradient(#2e88c4, #075698);*/
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}

.triangle-right span {
	font-size: 22px;
	font-weight: bold;}

.triangle-right:after {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#00b3be transparent; 
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

.triangle-right.top {
	/*background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(#075698, #2e88c4);
	background:-o-linear-gradient(#075698, #2e88c4);
	background:linear-gradient(#075698, #2e88c4);*/
	background: #00b3be;
	padding:15px 0px 15px 15px !important;
}

.triangle-right.top:after {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	right:50px; /* controls horizontal position */
	bottom:auto;
	left:auto;
	border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #00b3be; 
}

.triangle-right.right {
	margin-right:40px;
	background:#00b3be;
	text-align: left;
}


.triangle-right.right:after {
	top:16px; 
	right:-40px; /* value = - border-left-width - border-right-width */
	bottom:auto;
    left:auto;
	border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
	border-color:transparent #00b3be ; 
}

.triangle-right.left {
	margin-left:40px;
	background:#075698;
}

.triangle-right.left:after {
	top:16px; 
	left:-40px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
	border-color:transparent #075698; 
}






#footer{
text-align:center;
padding:20px;
margin:0;
border-top: #cccccc thin dotted;
color:#444444;
font-size:0.8em;
/*text-shadow:0px 1px 1px #fff;*/
position: relative;
top:0;
left:0;
}

	#link-top{
	display:none;
	}

	#footer a {color: #00b3be;}


@font-face{ 
	font-family: 'MuseoSans_300-webfont';
	src: url('/fonts/base/MuseoSans_300-webfont.eot');
	src: url('/fonts/base/MuseoSans_300-webfont.eot?iefix') format('eot'),
	     url('/fonts/base/MuseoSans_300-webfont.woff') format('woff'),
	     url('/fonts/base/MuseoSans_300-webfont.ttf') format('truetype'),
	     url('/fonts/base/MuseoSans_300-webfont.svg#webfont') format('svg');
}

@font-face{ 
	font-family: 'MuseoSans_700-webfont';
	src: url('/fonts/base/MuseoSans_700-webfont.eot');
	src: url('/fonts/base/MuseoSans_700-webfont.eot?iefix') format('eot'),
	     url('/fonts/base/MuseoSans_700-webfont.woff') format('woff'),
	     url('/fonts/base/MuseoSans_700-webfont.ttf') format('truetype'),
	     url('/fonts/base/MuseoSans_700-webfont.svg#webfont') format('svg');
}


@media print {
body {font-size: 12pt; color: #000000;}
.grid {margin: 0; padding: 0; max-width: 100%;}	
#wrap {width: 100%; margin: 0; padding: 0; border: none;}
h2 {font-size: 24px;}

#photo-box {border: none;}
#photo-box img {width: 150px; height: auto;}
.thumbnail {width: 150px; height: auto; border: none;}

.timeline-title {display: none;}
.social-media {display: none;}
.menu {display: none;}	
#timeline {display: none;}	

.testimonial {background:#ffffff; padding: 0; margin: 0;}
.arrow-down {display: none;}
.testimonial-author {}

.stats_title {text-align: left; margin-top: 20px;}	
span.additional-info {text-align: left;}

.area-main img {max-width: 100%;}
}