/* Stylesheet for /justinbieber */

/* TYPOGRAPHY   
////////////////////////////////////////////////////////////////////////////////////////// */

.angelina{ font-family: 'AngelinaRegular'!important; }
h1, h2, h3{ font-family: 'LeagueGothicRegular',sans-serif; text-transform: uppercase;  }
.section p{ font: 16px/25px Georgia, serif; color: #525252; }
.section p a{ color: #0e70e3; text-decoration: underline; }


/* STRUCTURE & GENERAL   
////////////////////////////////////////////////////////////////////////////////////////// */

#container{ width: auto; max-width: 100%; }
.section{ width: 924px; margin: 0 auto; }
.video{ border: 6px solid #fff; }
.text{ font-size: 30px; line-height: 28px; float: left; }


/* SECTIONS   
////////////////////////////////////////////////////////////////////////////////////////// */

/* Intro 
-------------------------------------------------------------------------------------------*/
#intro{ margin: 45px auto 35px; }
#intro h1{ font-size: 67px; line-height: 41px; color: #4b4b4b; margin: 30px 0 15px; }
#intro.section h1 .angelina{ color: #02aeef; font-size: 69px; text-transform: none; position: relative; top: -10px; left: 10px; }

.social{ margin-bottom: 15px; }
.fb_iframe_widget,
#___plusone_0,
.twitter-share-button{ float: left !important; }

/* blue email box */
#email-box{ 
	width: 526px; float: left; margin: 0 20px 20px 0; padding: 0 0 10px 0; position: relative;
	background: #3f93f5;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjM2Y5M2Y1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjNTA5Y2Y1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNmOTNmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background: -moz-linear-gradient(-51deg,  #3f93f5 0%, #509cf5 46%, #3f93f5 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3f93f5), color-stop(46%,#509cf5), color-stop(100%,#3f93f5)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-51deg,  #3f93f5 0%,#509cf5 46%,#3f93f5 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-51deg,  #3f93f5 0%,#509cf5 46%,#3f93f5 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-51deg,  #3f93f5 0%,#509cf5 46%,#3f93f5 100%); /* IE10+ */background: linear-gradient(-51deg,  #3f93f5 0%,#509cf5 46%,#3f93f5 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f93f5', endColorstr='#3f93f5',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	border: 1px solid #0662d0; border-color: #0276fa #0662d0 #0850a4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	box-shadow:inset 1px 1px 1px rgba(255,255,255,.5);-webkit-box-shadow:inset -1px 1px 1px rgba(255,255,255,.5);-moz-box-shadow:inset -1px 1px 1px rgba(255,255,255,.5);
	text-align: center; }
	.ie9 #email-box{ filter: none; }
	.ie7 #email-box{ margin-top: 10px; padding-bottom: 20px; }
#email-box h2{ color: #fff; font: 51px/55px 'LeagueGothicRegular', sans-serif; text-transform: uppercase; margin: 20px 20px 0px;  text-shadow: -1px 1px 1px rgba(0,0,0,.5); }
#email-box form{ position: relative; width: 220px; margin: 10px 20px 20px; }
	.ie7 #email-box form{ }
#email-box #donate-form{ margin-left:25px; }
	.ie7 #email-box  #donate-form{ }
#email-box form p{ margin: 0 0 5px; }

input[type=text]{ 
	padding: 12px 15px; width: 185px; height: 30px; margin-top: 15px;
	background: #edf3f9; 
	font: 22px/30px Georgia, serif; color: #a7a9ac; text-transform: none;
	border: 1px solid #707070; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
	box-shadow:inset 0px 1px 2px rgba(0,0,0,.7); -webkit-box-shadow:inset 0px 1px 2px rgba(0,0,0,.7);-moz-box-shadow:inset 0px 1px 2px rgba(0,0,0,.7); 
	-webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; -o-transition: 0.1s linear all; transition: 0.1s linear all; 
	-webkit-appearance: textfield; -webkit-rtl-ordering: visual;}
	.ie7 #email-box #email_input,
	.ie7 #email-box #donation_input{ padding-left: 0; padding-right: 0; }

input[type=text]::-webkit-input-placeholder{ color: #eee; position: relative; padding: 0; }

input[type=text]:focus{ 
	outline: none; outline-offset: 0;  
	box-shadow: inset 0px 1px 2px rgba(0,0,0,.7), 0px 1px 20px rgba(255,255,255,.7); -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,.7), 0px 1px 20px rgba(255,255,255,.7);-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.7), 0px 0px 20px rgba(255,255,255,.7);
	background: #fff; }
.btn{
	position: relative; 
	margin-top: 14px;  padding: 19px 0;display: inline-block; width: 100%;
	background-color: #599338;
	background-repeat: no-repeat;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70ba48), color-stop(25%, #70ba48), to(#599338));
	background-image: -webkit-linear-gradient(#70ba48, #70ba48 25%, #599338);
	background-image: -moz-linear-gradient(top, #70ba48, #70ba48 25%, #599338);
	background-image: -ms-linear-gradient(#70ba48, #70ba48 25%, #599338);
	background-image: -o-linear-gradient(#70ba48, #70ba48 25%, #599338);
	background-image: linear-gradient(#70ba48, #70ba48 25%, #599338);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70ba48', endColorstr='#599338', GradientType=0);
	border: 1px solid #346e5b;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	font: 14px NovecentowideDemiBold, sans-serif; color: #f4f4f4; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.41);
	-webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; -o-transition: 0.1s linear all; transition: 0.1s linear all;} 
	.ie7 #email-box .btn, .ie7 #email-form .btn{ border: 0; width: 186px; height: 60px}
.btn::-moz-focus-inner{ border : 0px; outline: none; }
.btn:focus,
.btn:hover{ outline: none; background-position: 0 -10px; outline: none; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60a03d', endColorstr='#599338', GradientType=0); }
.btn:active{ top: 1px; }

#donation_input, #email_input{ text-align: center; }
#donate-btn, #pledge-btn{ width: 100%;}

#email-box p{ color: #fff; font-size: 20px; line-height: 20px; }
#donate18{ background: url(images/donate18.png) center center no-repeat; height: 45px; width: 204px; text-indent: -9999px; text-align: left; position: relative; left: -10px; margin-top: 10px; }
#pledge{ background: url(images/pledge.png) center center no-repeat; height: 45px; width: 204px; text-indent: -9999px; text-align: left; position: relative; left: 24px; }

#OR{ position: absolute; bottom: 30px; left: 264px; height: 122px; width: 20px; border-left: 1px solid #4683c9; }
#OR span{ font: italic 17px Georgia, serif; color: #4470a3; background: #4a99f5; padding: 2px; position: relative; top: 50px; left: -10px; }
	.ie8 #OR span, .ie7 #OR span, .ie6 #OR span{ background: #3f93f5; } 

hr.dark-light{ border: none; border-top: 1px solid #3d78bc; border-bottom: 1px solid #76b0f4; background: #76b0f4; color: #76b0f4; height: 0; margin: 15px 35px; width: auto; }
	.ie7 hr.dark-light{ width: 100%; }

/* letter */
#intro .text{ width: 375px; margin-top: -4px;}
#intro .text p{ margin-bottom: 10px; }
#intro.section .text .angelina{ font-size: 55px; line-height: 90px; }
#justin-pin{ float: left; width: 150px; height: 150px; margin: 0px 15px 10px -75px; position: relative; }
#intro.section .angelina{ font-size: 45px; line-height: 50px;}

/* Learn-Progress 
-------------------------------------------------------------------------------------------*/
.learn-progress{ 
	background: #4495f5; color: #fff; 
	border-top: 1px solid #7d7879; border-bottom: 1px solid #7d7879; 
	box-shadow:inset 0px 1px 1px rgba(255,255,255,.5);-webkit-box-shadow:inset -0px 1px 1px rgba(255,255,255,.5);-moz-box-shadow:inset 0px 1px 1px rgba(255,255,255,.5);
	margin-bottom: 70px; }
.learn-progress .inside{ margin: 50px auto 55px; }
	.ie7 .learn-progress .inside{ padding: 50px 0 55px; }
.learn-progress h2{ font-size: 45px; line-height: 48px; color: #fff; margin-bottom: 20px; text-shadow: -1px 1px 1px rgba(0,0,0,.5); }

/* Learn-Progress: Learn */
.learn-progress .learn{ width: 525px; float: left; margin-right: 37px; position: relative; }
.learn-progress .learn .video{ height: 288px; }
.learn-progress .learn #arrow{ display: block; width: 40px; height: 64px; background: url('images/arrow.png') center center no-repeat; position:absolute; top: 20px; left: -50px; text-indent: -9999px; }

/* Learn-Progress: Progress */
.learn-progress .progress{ float: left; width: 360px; }
#grey-inset{ 
	background: #f5f1f1; color: #4f9cf5; font-family: 'LeagueGothicRegular',sans-serif; text-transform: uppercase; 
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #3165a0; 
	margin-bottom: 14px; 
	box-shadow:inset 0px 0px 5px rgba(0,0,0,.7), -1px 1px 1px rgba(255,255,255,.5); -webkit-box-shadow:inset 0px 0px 5px rgba(0,0,0,.7),-1px 1px 1px rgba(255,255,255,.5);-moz-box-shadow:inset 0px 0px 5px rgba(0,0,0,.7),-1px 1px 1px rgba(255,255,255,.5); }
.row{ margin: 0; padding: 20px 0px 18px 60px; }
#progress-pledges{ border-bottom: 1px solid #ccc; background: url('images/cupcake.gif') 10px 11px no-repeat;}
#progress-money{ background: url('images/cup.gif') 10px center no-repeat;}
.progress-numbers{ font-size: 60px; line-height: 56px; float: left; margin-right: 10px; }
	.ie7 .learn-progress .text{ font-size: 22px; }

.learn-progress .progress p{ color: #fff; margin-bottom: 10px; }
.learn-progress .progress .donate-button{ display: block; width: 362px; height:53px; background: url('images/donate.png') center top no-repeat; text-indent: -9999px; border: 0; padding: 0; }
.learn-progress .progress .donate-button:hover{ background-position: center bottom; cursor: pointer}

#email-form{ position: relative; }
.learn-progress #email_input2{ padding: 15px 100px 15px 15px; font: 22px/30px Georgia, serif; color: #a7a9ac; text-transform: none; width: 244px; height: 30px; margin-top: 0;  }
.btn#go{ position: absolute; right: 8px; top: 8px; margin: 0; width: 66px; height: 47px; line-height: 47px; padding: 0; }
.ie7 .btn#go{ height: 47px; width: 66px; }



/* Facts 
-------------------------------------------------------------------------------------------*/
#facts{ margin-bottom: 92px; }
#facts h3{ font-size: 35px; line-height: 40px; color: #0270e3; }
#facts .half{ width: 400px; padding:0 49px 0 0; border-right: 1px solid #dadada; float: left; }
#facts .half .text{ min-height: 135px; }
#facts .half p{ margin-bottom: 14px; }
#facts .half.last{ width: 440px; padding:0; border-right: 0; margin-left: 30px; }
#facts .half.last img{ background: red; width: 155px; height: 120px; margin-right: 20px; }
#facts .half.last .text{ float: left; width: 260px; }
#facts .half.last .text p{ font-size: 14px; }

/* Videos 
-------------------------------------------------------------------------------------------*/
#videos{ text-align: center; margin-bottom: 50px; }
#videos h2{ font-size: 48px; line-height: 55px; color: #0270e3; background: url('images/double-stripe.gif') center center repeat-x; }
#videos h2 span{ background: #fff; padding: 0 10px; }

.third{ width: 292px; margin: 40px 6px 0; border-right: 1px solid #dadada; padding-right: 6px; }
.third.last{ border: 0; margin: 40px 0 0; }
.third h3{ font-size: 30px; line-height: 30px; color: #0270e3; }
.third p{ margin: 10px 20px; }

#videos .video{ display: block; width: 220px; height: 148px; margin: 0 auto 25px; text-indent: -9999px; }
#videos #video-1{ background:url('images/video-1.jpg'); }
#videos #video-2{ background:url('images/video-2.jpg'); }
#videos #video-3{ background:url('images/video-3.jpg'); }

.jerrycan{ position: relative; display: block; }
.jerrycan hr{ position: absolute; width: 100%; background: #dadada; border-color: #dadada; border: 0; top: 12px; padding: 0; margin: 0; }
.jerrycan span{ background: #fff url('images/jerry-can-small.gif') center center no-repeat; height: 24px; width: 44px; display: block; text-indent: -9999px; margin: 0 auto; position: relative; }

/* Footer 
-------------------------------------------------------------------------------------------*/
#footer_container{ font-size: 12px; } 
#footer_jerrycan { background-image: url("images/footer_blog.png"); }
.dotted_line { border-right: 1px dotted #979797;}
.address,
.address a{ color: #5e5e5e; text-align: center;}