/*
Theme Name: BridgeForYouth
Theme URI: http://bridgeforyouth.org
Description: Built by Stonearchz on the HTML5 Reset Theme
Author: Stonearch
Author URI: http://stonearchcreative.com
Version: 1
*/

/*
	HTML5 Reset Wordpress Theme :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

	Special thanks: The Wordpress theme owes its start to an empty theme authored
		by Chris Coyier & Jeff Starr: http://digwp.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 75%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* box-sizing: border-box; on everything! */
* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/* image replacement */
.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

.left,
.alignleft {float: left;}
.right,
.alighright {float: right;}

.alignleft {margin: 0 1em 1em 0;}
.alighright {margin: 0 0 1em 1em;}

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


/* Typography
-------------------------------------------------------------------------------*/

@font-face {
    font-family: 'LigatureSymbols';
    src: url('_/css/LigatureSymbols-2.09.eot');
    src: url('_/css/LigatureSymbols-2.09.eot?#iefix') format('embedded-opentype'),
         url('_/css/LigatureSymbols-2.09.woff') format('woff'),
         url('_/css/LigatureSymbols-2.09.ttf') format('truetype'),
         url('_/css/LigatureSymbols-2.09.svg#LigatureSymbols') format('svg');
    src: url('_/css/LigatureSymbols-2.09.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  font-size:130%;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
}

.lsf-icon.amazon:before {
  content: '\E007';
}

body {font: 13px "Helvetica-Neue", Helvetica, Arial, sans-serif;}

body, select, input, textarea {color: #555; line-height: 1.33em;}

a {color: #66f; text-decoration: none;}
a:hover {color: #aaa;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #ef4123; color: #fff; text-shadow: none;}
::selection {background: #ef4123; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #ef4123; color: #000; text-decoration: none;}
mark {background-color: #ef4123; color: #000; font-style: italic; font-weight: bold;}

h1, h2, h3, h4, h5 {font-family: "museo-slab", Georgia, serif; }

h1,
h2 {margin-bottom: .33em;}
p, li {margin-bottom: 1em;}
h1 {font-size: 2.5em; font-weight: 200; line-height: 1em;}
h2 {font-size: 1.5em; font-weight: 200; line-height: 1em;}
h3 {margin-bottom: .5em; font-size: 1.25em; line-height: 1em;}

.button {display: inline-block; margin: .6em 0; padding: .6em 1em; background: #ccc; border-radius: 5px;}
.button:hover {background: #333; color: white;}

.green {color: #94c93e;}
.blue {color: #5ac1a4;}
.red {color: #ea264f;}
.orange {color: #eb9023;}
.lt-grey {color: #a3a3a3;}
.grey {color: #606060;}

/* Layout
-------------------------------------------------------------------------------*/
body {background: url(_/img/bg.jpg) #606060;}

#page-wrap {margin: 0 auto 1em; padding-bottom: 1px; width: 960px; background: white;}

.full {margin: 0 auto; width: 954px;}
.one-third {width: 316px;}
.two-thirds {width: 635px;}

#header h1#logo {margin: 1em 1em 0; width: 130px; height: 100px;}
#header h1#logo a {display: block; width: 130px; height: 100px; background: url(_/img/logo.png) no-repeat center center;}

#social-nav {float: right; height: 32px;}
#social-nav .social-link {display: block; float: left; padding: 0 1em; width: 32px; height: 32px;
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* IE 5-7 */
	filter: alpha(opacity=50);

	/* Netscape */
	-moz-opacity: 0.5;

	/* Safari 1.x */
	-khtml-opacity: 0.5;

	/* Good browsers */
	opacity: 0.5;
}
#social-nav .social-link:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
#top-youtube-link {background: url(_/img/youtube_sm.png) no-repeat center center;}
#top-twitter-link {background: url(_/img/twitter_sm.png) no-repeat center center;}
#top-linkedin-link {background: url(_/img/linkedin_sm.png) no-repeat center center;}
#top-facebook-link {background: url(_/img/facebook_sm.png) no-repeat center center;}

#header-nav {float: right;}
#menu-main .menu-item {float: left; margin: 0;}
#menu-main .menu-item a {display: block; margin-top: 60px; padding: 2em 1em 1em; color: #a3a3a3;}
#menu-main .menu-item a:hover,
#menu-main .menu-item.current-menu-item a {color: #ea264f; background: #efefef;}

.box {display: block; float: left; margin: 3px 0 0 3px; padding: 1em; height: 237px; background: #dedede; color: white; overflow: hidden; position: relative;}
.box:hover {color: white;}
.box-entry {position: absolute; left: 0; bottom: 1em; padding: 0 1em; width: 100%;}
.box-entry2 {position: absolute; left: 0; bottom: 0; padding: 0 1em; width: 100%; font-size: 2em;}

.sub-nav-title {font-size: 2.5em; font-weight: 200; line-height: 1em;}

/* 
Feb 16, 2016
Replace background image with a solid color 
and add starburst */
#find-help-box-burst {
  background: url(_/img/orange_burst_small.png);
  background-size: 150px 121px;
  background-repeat: no-repeat;
  background-position: right;
  width: 100%;
  height: 103px;
}
#find-help-box {text-align: left;} 

#find-help-box {font-size: 1.25em;}
#find-help-box:hover {background: #606060 !important;}
#find-help-box .sub-nav-title {font-size: 4.5em; font-weight: 700; letter-spacing: -3px;}

#hotline-box {background: #ea264f; text-align: center;}
#hotline-box a {color: #fff;}
#hotline-box:hover {background: #606060;}
#hotline-box .box-entry {top: 5em; bottom: auto;}
.hotline-intro {font-size: 1.75em;}
.hotline-number {font-size: 2.5em; line-height: 1.75em;}
.hotline-address,
.hotline-address_2 {font-size: 1.25em; font-weight: 100;}
#hotline-box-burst {
  background: url(_/img/BFY_400SAFE_logoT.png);
  background-size: 316px 136px;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#page-box {background: #ea264f; text-align: center;}
#page-box a {color: #fff;}
#page-box:hover {background: #606060;}
#page-box .box-entry {top: 5em; bottom: auto;}
.hotline-intro {font-size: 1.75em;}
.hotline-number {font-size: 2.5em; line-height: 1.75em;}
.hotline-address,
.hotline-address_2 {font-size: 1.25em; font-weight: 100;}
#page-box-burst {
  background: url(_/img/BFY_400SAFE_logoT.png);
  background-size: 316px 136px;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#donate-box {
  background: #5ac1a4; color: white;
}
#donate-box-piggy {
  background: url(_/img/piggy.png);
  background-size: 110px 103px;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 103px;
}
#donate-box:hover {background-color: #606060;}
#donate-box .box-entry {bottom:2em;}

#home-message-box {background: #eb9023;}
#home-message-box:hover {background-color: #606060  !important;}
#home-message-box .box-entry a {color: #fff; text-decoration: none;}
#home-message-box div {
 position: absolute;
 left: 0;
 top: 0;
}
/* #home-message-box .box-entry {font-size: .9em;}
#home-message-box .sub-nav-title {font-size: 2.5em; font-weight: 700; letter-spacing: -1px;} */
#home-message-box-bg {
  background: url(_/img/boy_mom_bkgrnd.png);
  background-size: 650px 240px;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

#social-box {background: #94c93e; padding: 0;}
#social-box a.social-link {float: left; display: block; width: 50%; height: 118.5px;}
#social-box a.social-link:hover {background-color: #606060;}
#youtube-link {background: url(_/img/youtube.png) no-repeat center center; border-right: 3px solid white; border-bottom: 3px solid white;}
#twitter-link {background: url(_/img/twitter.png) no-repeat center center; border-bottom: 3px solid white;}
#linkedin-link {background: url(_/img/linkedin.png) no-repeat center center; border-right: 3px solid white;}
#facebook-link {background: url(_/img/facebook.png) no-repeat center center;}

#blog-box {background: #5ac1a4;}
#blog-box:hover {background: #606060;}

#news-box {background: #eb9023;}
#news-box:hover {background: #606060;}

#event-box {background: #ea264f;}
#event-box:hover {background: #606060;}

#donate-box,
#blog-box,
#news-box,
#event-box {line-height: 1.5em}
#donate-box .sub-nav-title,
#blog-box .sub-nav-title,
#news-box .sub-nav-title,
#event-box .sub-nav-title {font-size: 4em;}
#home-message-box .sub-nav-title {font-size: 1.5em;}
.youtube .play {
	display: block;
	width: 100%;
	height: 211px;
	background: url(_/img/play.png) no-repeat center center;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
.youtube:hover .play {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}

#get-involved-box {background: #94c93e; text-align: right;}
#get-involved-box:hover {background: #606060;}
#get-involved-box .sub-nav-title {font-size: 4em;}

/* Pages */
.page .sub-page-title {font-size: 2em;}
.page .entry {padding: 2em 0 3em;}
.page-title {float: left; padding: 0 .33em; font-size: 3em; color: #a3a3a3;}
.page-content {float: right; padding: 0 1em;}
nav.sub-nav .active {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=25);
	-moz-opacity: 0.25;
	-khtml-opacity: 0.25;
	opacity: 0.25;
}

.page .sub-nav .box-entry {position: absolute; left: 0; bottom: 0; padding: 1em; width: 100%; height: 98px; background: rgba(0,0,0,.5);}
.page .sub-nav a:hover .box-entry {background: #1e1e1e;}

#leadership-list {margin: 1em 0; list-style: none;}
#leadership-list li {margin-bottom: 1em; padding-bottom: .33em; border-bottom: 1px solid #efefef;}
#leadership-list li img.wp-post-image {float: left; margin: 0 1em 1em 0;}

.entry ul,
.entry ol {margin-left: 2em;}
.entry ul {list-style: disc;}

.entry iframe {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	margin-top: 1em;
	padding: 1.5em 1.5em 2em;
	background: #efefef;}

/* Archive */
.archive article {margin: 3px 0 0 3px; padding: 1em; background: #efefef;}
.archive article h2 {color: #1e1e1e;}

.archive .box-entry h2 {margin: 0; font-size: 5em; font-weight: 400; line-height: 1em;}
.archive.tag .box-entry h2 {font-size: 3em;}

.meta {margin-bottom: 1em;}

#sidebar {padding: 1em; margin-right: 3px;}

.tagcloud a {display: inline-block; margin-bottom: 3px; padding: 1px 6px; background: #efefef; border-radius: 10px; font-size: 1em !important;}

.navigation {float: left; margin: 3px; width: 635px; text-align: center;}

#footer {margin: 1em auto; padding: 0 1em; color: #a3a3a3;}

.mobile {display: none;}

/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */


@media screen and (max-width: 600px) {

	.mobile {display: block !important;}
	.desktop {display: none !important;}

}

@media all and (orientation: portrait) {

}

@media all and (orientation: landscape) {

}