/* ================ $typography ================ */
/**
* Font size is set in EMs and with the base font being 16px, html{ font-size: 100%; }, therefore: 1em = 16px.
* Default font size in browsers prererences is 16px. Hence font-sze being set to 100%.
* 2em = 32px (2 x 16)
* 1.5em = 24px (1.5 x 16)
* 1em = 16px (1 x 16)
* .875em = 12px (.875 x 16)
*
* A good reference to view pixel and em conversion: http://pxtoem.com/
*
* The default vertical spacing is set in the 'vertical rhythm' portion of the $structure section in ep-base.css.
*
*/


/* ================ $fonts ================ */
/* helvetica condensed black */
@font-face{
    font-family: 'helveticaneue condensed black';
    src: url('../fonts/helveticaneueltstd-blkcn-webfont.eot');
    src: url('../fonts/helveticaneueltstd-blkcn-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-blkcn-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltstd-blkcn-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-blkcn-webfont.svg#helveticaneuelt_std_blk_cnRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* helvetica condensed bold */
@font-face{
    font-family: 'helveticaneue condensed bold';
    src: url('../fonts/helveticaneueltstd-bdcn-webfont.eot');
    src: url('../fonts/helveticaneueltstd-bdcn-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-bdcn-webfont.woff') format('woff'),
         url('../fonts/helveticaneueltstd-bdcn-webfont.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-bdcn-webfont.svg#helveticaneuelt_std_cnbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* kids font */
@font-face {
    font-family: 'IndieFlower';
    src: url('../fonts/indieflower-webfont.eot');
    src: url('../fonts/indieflower-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/indieflower-webfont.woff') format('woff'),
         url('../fonts/indieflower-webfont.ttf') format('truetype'),
         url('../fonts/indieflower-webfont.svg#indie_flowerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* icons */
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/websymbols-regular-webfont.eot');
    src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/websymbols-regular-webfont.woff') format('woff'),
         url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
         url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}





/* ================ $headings ================ */
/* == font sizes == */
/**
* Font sizes are listed separately to the other heading styles so they can be viewed and updated quickly
*/
h1{ font-size: 2em; letter-spacing: -1px; }
h2{ font-size: 1.8em; letter-spacing: -1px; }
h3{ font-size: 1.6em; }
h4{ font-size: 1.1em; }
h5{ font-size: 1em; }
h6{ font-size: .875em; }

/* == colours / fonts / spacing == */
h1{
	font-family: "helveticaneue condensed bold", "arial black", sans-serif;
	font-weight: normal;
	color: #485a43;
}

/*.kids h1, .kids-1st-level h1{ color: #3d81a7; }*/
.kids h1, .kids-1st-level h1{ color: #373f52; }

h2, h3, h4{
	font-family: "helveticaneue condensed bold", helvetica, sans-serif;
	font-weight: normal;
	color: #485a43;
}

.kids h2, .kids h3, .kids h4,
.kids-1st-level h2, .kids-1st-level h3, .kids-1st-level h4{
	/*color: #5c83dd;*/
	color: #373f52;
	/*font-family: "IndieFlower", "Brush Script MT", cursive;*/
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.kids-body h2{ font-size: 1.9em; letter-spacing: -1px; }
.kids-body h3{ font-size: 1.7em; }
.kids-body h4{ font-size: 1.2em; }
.kids-body h5{ font-size: 1.1em; }
.kids-body h6{ font-size: 1em; }


/* == alpha header == */
/* font */
.alpha-header{
	/*height: 98px;
	position: relative;
	line-height: 99px;*/
	font-size: 3.5em;
	margin: 0;
	padding: 5px 5px 5px 60px;
	background: url(../images/adult-header-background.jpg) no-repeat 50% 50%;
	color: #fff;
	text-shadow: 0 0 6px rgba(0,0,0,.6);
}

.kids .alpha-header,
.kids-1st-level .alpha-header{
	background: url(../images/kids-header-background.jpg) no-repeat 50% 50%;
	color: #fff;
}

/* horizontal green gradient fading to transparency behind content with same gradient as smaller lines beneath */
/*
.alpha-header,
.alpha-header:before,
.alpha-header:after{
	background: -webkit-linear-gradient(left, rgba(226,236,211,1) 0%,rgba(226,236,211,0.5) 50%,rgba(255,255,255,0) 100%);
}

.kids .alpha-header,
.kids .alpha-header:before,
.kids .alpha-header:after,
.kids-1st-level .alpha-header,
.kids-1st-level .alpha-header:before,
.kids-1st-level .alpha-header:after{
	background: -webkit-linear-gradient(left, rgba(171,192,237,1) 0%,rgba(171,192,237,0.5) 50%,rgba(255,255,255,0) 100%);
}
*/
/* width & position of green lines behind the text */
/*
.alpha-header:before,
.alpha-header:after{
	height: 10px;
	content: '';
	position: absolute;
	left: 0;
}

.alpha-header:before{
	width: 33%;
	bottom: -17px;
}

.alpha-header:after{
	width: 20%;
	bottom: -34px;
}
*/





/* ================ paragraph & lists ================ */
p, li{
	font-size: 1em;
	color: #485a43;
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

.ep-text-center{ text-align: center; }





/* ================ cool facts ================ */
.cool-fact{
	/*background: #abc0ed;*/
	background: #373f52;
	border: solid 2px #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	border-radius: 5px;
	position: relative;
	padding: 10px;
}

.cool-fact h4{
	margin-bottom: 10px;
	color: #fff;
}

.cool-fact p{
	margin: 0;
	color: #fff;
	/*font-family: "IndieFlower", "Brush Script MT", cursive;*/
	/*font-family: "Comic Sans MS", cursive, sans-serif;*/
}





/* ================ blockquote ================ */
blockquote{
	margin: 0 20px 20px 20px;
	padding: 10px;
	background: #e9e9e9;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-indent: 1em;
	position: relative;
 }

blockquote:before{
	position: absolute;
	color: #555;
	font-size: 2em;
	content: '\0022';
	top: 0;
	left: 10px;
}





/* ================ definition tags ================ */
dl{ font-size: .75em; }

dt, dd{ font-size: 1em; }





/* ================ pre tag ================ */
pre{
	padding: 10px 20px;
	border-left: 5px solid #ccc;
	background: #e9e9e9;
}





/* ================ $text links ================ */
/* == standard & visited link styles == */
a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
	text-decoration: none;
	color: #485a43;
	font-family: "helveticaneue condensed bold" helvetica sans-serif;
	padding: .2em .2em.2em 2.2em;
	background: url(../images/magnifying-glass.svg) no-repeat 0 0;
	background-size: contain;
}

p a{
	background: none;
	padding: 0;
}

p a, li a{
	text-decoration: underline;
	color: #485a43;
}

.kids a, .kids h1 a, .kids h2 a, .kids h3 a, .kids h4 a, .kids h5 a, .kids h6 a,
.kids-body a, .kids-body h1 a, .kids-body h2 a, .kids-body h3 a, .kids-body h4 a, .kids-body h5 a, .kids-body h6 a{
	background: url(../images/magnifying-glass-kids.svg) no-repeat 0 0;
	background-size: contain;
	/*color: #3d81a7;*/
	color: #373f52;
}

.kids p a, .kids li a,
.kids-body p a, .kids-body li a{
	/*color: #3d81a7;*/
	color: #373f52;
	text-decoration: underline;
	background: none;
}

a:visited, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, p a:visited, li a:visited{ color: #485a43; }

.kids a:visited,
.kids-body a:visited{
	/*color: #3d81a7;*/
	color: #373f52;
}

/* == hover styles == */
/*
a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
	color: #f9d796;
	text-shadow: 0 0 1px rgba(0,0,0,.8);
}

p a:hover, li a:hover{
	color: #f9d796;
}

.kids a:hover, .kids h1 a:hover, .kids h2 a:hover, .kids h3 a:hover, .kids h4 a:hover, .kids h5 a:hover, .kids h6 a:hover, .kids p a:hover, .kids li a:hover,
.kids-body a:hover, .kids-body h1 a:hover, .kids-body h2 a:hover, .kids-body h3 a:hover, .kids-body h4 a:hover, .kids-body h5 a:hover, .kids-body h6 a:hover, .kids-body p a:hover, .kids-body li a:hover{
	color: #5c83dd;
}
*/

/* == focus & active styles == */
/*
a:focus, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus, p a:focus, li a:focus{ color: #485a43; }

.kids a:focus, .kids h1 a:focus, .kids h2 a:focus, .kids h3 a:focus, .kids h4 a:focus, .kids h5 a:focus, .kids h6 a:focus, .kids p a:focus, .kids li a:focus,
.kids-body a:focus, .kids-body h1 a:focus, .kids-body h2 a:focus, .kids-body h3 a:focus, .kids-body h4 a:focus, .kids-body h5 a:focus, .kids-body h6 a:focus, .kids-body p a:focus, .kids-body li a:focus{
	color: #3d81a7;
}

a:active, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active, p a:active, li a:active{
	color: #000;
	text-decoration: underline;
}
*/

/* == accessible links == */
a:focus, a:active{ outline: none; }


/* == no style links == */
.no-style,
.kids .no-style,
.kids-body .no-style{
	padding: 0;
	background: none;
	color: transparent;
	line-height: 1;
}

.no-style:hover{
	text-shadow: none;
	color: transparent;	
}

p a.no-style:visited{
	color: #fff !important;
}

.video-link,
.kids .video-link,
.kids-body .video-link{
	width: 300px;
	height: auto;
	padding: 0;
	background: none;
	color: transparent;
	line-height: 1;
	display: block;
}

.video-link img,
.kids .video-link img,
.kids-body .video-link img{
	/*width: 100%;
	max-width: 100%;*/
	height: auto;
	margin: 0;
}

/*
.no-style:focus,
.no-style:active,
p a.no-style:focus,
p a.no-style:active{
	color: #fff !important;
	text-decoration: none;
	background: transparent none;
	outline: none;
}
*/

/* == get invovled link == */
.get-involved-link,
.kids-body .get-involved-link{
	display: inline-block;
	background: #f6f9f2;
	border: solid 2px #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	border-radius: 5px;
	position: relative;
	padding: 10px 10px 10px 45px;
	margin-right: 20px;
	text-decoration: none;
}

.kids-body .get-involved-link{
	/*font-family: "IndieFlower", "Brush Script MT", cursive;*/
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.get-involved-link:before{
	width: 25px;
	height: 25px;
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	background: url(../images/magnifying-glass.svg) no-repeat 0 0;
	background-size: contain;
}


/* == graphs - typical data link == */
.typical-data-link{
	width: 70px;
	height: 35px;
	display: block;
	border-radius: 50%;
	background: url(../images/graph-link.svg) 50% 50% no-repeat;
	background-size: contain;
	font: 0/0 a;
}