@import "/css/base.css";
@import "/css/form.css";
@import "/css/icons.css";
@import "/css/tooltip.css";

/* = Static = */

hr {border: none; height: 1px; margin: 1em 0; background-color: #747474;}
abbr.help {font-size: 0.8em;}
p.submit_row {text-align: center; padding: 1em 0;}
p.submit_row span {display: block; display: inline-block; direction: rtl;}
p.submit_row input {direction: ltr;}
p.post_submit_row {text-align: center; padding: 1em 0; line-height:16px; vertical-align: middle;}
p.post_submit_row span {display:inline-block;height:16px;width:16px;}
p.error_message {font-weight: bold; color: #FF0000; border: 1px solid #FF0000; padding: 8px; text-align: center;}
p.redirect_message {padding: 10px 0;}
div.terms_of_use {max-height: 300px; margin: 1em 0; padding-right: 0.5em; overflow: auto;}
div.indent p {padding-left: 25px;}
div.top_banner {font-weight: bold; color: #FFF; background: #FF0000; padding: 8px; text-align: center;}
div.top_banner a {color: #FFF;}
div#login_banner {padding: 6px; text-align: center; line-height: 1.5em;}

.addthis_toolbox a {display: inline-block; vertical-align: middle;}
.addthis_toolbox span {vertical-align: middle;}

div#login_shade {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.60;
}

div#login_wrap
{
	position: fixed;
	top: 0; left: 0; bottom: 0; right: 0;
	margin: auto;
	background: #FFF; color: #000;
	width: 300px; height: 250px;
	padding: 30px;
}

div#login_wrap a.forgot_password {font-size: 11px;}
div#login_wrap h1 {margin: 0 0 15px 0; color: #000;}
div#login_wrap p.button_row {margin: 1em 0 0 0;}
div#login_wrap p.password_row {margin-bottom: 0.4em;}
div#login_wrap p.redirect_row {margin: 0;}
div#login_close a {color: #000; text-decoration: none; float: right; margin: -15px -15px 0 0;}
div#login_fields{margin: 0 auto; width: 260px;}

table.mreg {width: 100%;}
table.mreg tr.mreg_head th {border-bottom: 1px solid #1B5C6E;}
table.mreg tr.mreg_add td {border-top: 1px solid #1B5C6E;}
table.mreg th {color: #1B5C6E; border: 0; padding: 0.2em 0.5em;}
table.mreg tr.mreg_row:hover td {background: rgba(0, 0, 0, 0.07);}
table.mreg td {border: 0;}
table.mreg td.mreg_deleted {color: #AAA; text-decoration: line-through;}
table.mreg tr.mreg_add td {padding-top: 7px}

div#cp_banner {
	background: #FFF;
	padding: 5px 0 5px 0;
	text-align: center;
	font-size: 0;
	display: block !important;
}

div#cp_banner a, div#cp_banner img {
	display: inline !important;
}

div#cp_banner, div#cp_banner a, div#cp_banner img {
	visibility: visible !important;
	width: auto !important;
	height: auto !important;
	position: static !important;
	text-indent: 0 !important;
}

div.info_block label
{
	display: -moz-inline-box; display: inline-block; vertical-align: top;
	font-weight: bold;
	width: 180px;
}

div.info_block span
{
	display: -moz-inline-box; display: inline-block; vertical-align: top;
	width: 400px;
}

.field_vert div, .field_vert button {display: inline-block; vertical-align: middle;}
#_gw_display {vertical-align: middle; padding: 0 25px 0 0; font-size: 16px; color: #000;}

/* = Facebook = */

.fb-comments, .fb-comments iframe[style], .fb-like, .fb-like iframe[style] {width: 100% !important;}

.shade {
	position: fixed;
	top: 0%; left: 0%;
	width: 100%; height: 100%;
	background: #000;
	z-index:1001;
	opacity: 0.8;
	filter: alpha(opacity=80);
	overflow:hidden;
}
 
.lightboxmaster {
	border-radius: 10px;
	position: fixed; 
	width: 550px; height: 260px;
	margin: 0 0 0 -275px;
	top: 150px; left: 50%;
	z-index:1002;
	border: 5px solid #273775;
	overflow: hidden;
	background: #FFF;
	color: #000;
	filter: alpha(opacity=100);
}

.lightboxcontent {
	padding: 10px 0 0;
	z-index:1003;
	overflow:hidden;
	text-align:center;
	font-family: Arial, Sans-serif;
}

.lightbox1 {font-size: 22px;}
.lightbox2 {font-size: 16px; font-style: italic;}

.lightboxtop {
	padding: 20px 0 10px;
	background: #D7D7D7;
	z-index:1003;
	overflow:hidden;
	font-family: Arial, Sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 24px;
}

.lightboxclose {
	position:absolute;
	left: 95%; top: 9px;
	background-color:gray;
	padding: 0 5px;
	font-size: 16px;
}

.closebtn {
	display: block;
	text-decoration:none;
	color:#FFF;
}

/* = Design Tab: Easy = */

html {
	background-color: #EBE5D9;
	background-image: none;
	background-position: top left;
	background-repeat: repeat-x;
	background-attachment: scroll;
}

body {
	font: normal normal 14pt Georgia;
	color: #747474;
	text-decoration: none;
	margin: 0 0 0 0;
}

h1 {
	font: normal normal 36pt Georgia;
	color: #000000;
	text-decoration: none;
}

h2, p.total {
	font: normal normal 26pt Georgia;
	color: #1B5C6E;
	text-decoration: none;
}

a {color: #229aac;}

p.total {margin: 2em 0;}

div.form_wrap {
	margin: 0 auto;
	width: 514px;
}

div.form_body {
	background-color: #fff;
	padding: 0 0 0 0;
}

div.header {
	text-indent: -5000px;
	height: 80px;
	background-image: url(/uploads/form_headers/6c3cd4cc264ebbc69cd6c329a5f9bcf2.png);
	background-repeat: no-repeat;
}

label.label {width: 180px; display: -moz-inline-box; display: inline-block; vertical-align: top;}
label.label_payment {width: 180px; display: -moz-inline-box; display: inline-block; vertical-align: top;}
label.label_total {width: 180px; display: -moz-inline-box; display: inline-block; vertical-align: top;}
div.label {padding-left: 180px; margin-bottom: 1em;}

.signature_widget{
	margin:auto;width:615px;height:154px;
}
.signature_widget input[type=button]{
	position:relative !important;text-align: center !important;top: 0px !important;
}

.share-facebook{
  background: #3b5998;
  background: -moz-linear-gradient(#3b5998, #2d4373);
  background: -o-linear-gradient(#3b5998, #2d4373);
  background: -webkit-linear-gradient(#3b5998, #2d4373);
  background: linear-gradient(#3b5998, #2d4373);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom:10px;
  color:#FFF;text-decoration:none;
  display:inline-block;padding:5px;
  border:solid #2D4373 1px;
  width:45%;height:32px;
  text-align:center;line-height:32px;
}
.share-twitter{
  background: #00a0d1;
  background: -moz-linear-gradient(#00a0d1, #00799e);
  background: -o-linear-gradient(#00a0d1, #00799e);
  background: -webkit-linear-gradient(#00a0d1, #00799e);
  background: linear-gradient(#00a0d1, #00799e);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom:10px;
  color:#FFF;text-decoration:none;
  display:inline-block;padding:5px;
  border:solid #008CB7 1px;
  width:45%;height:32px;
  text-align:center;line-height:32px;
}

/* = Design Tab: Advanced = */

/*General*/
body {
 font-family: Georgia;
 font-size: 16px !important;
 color:#747474;
 line-height: 1.42em;
}

h1,h2 {
 margin: 0;
 padding: 0;
 color:#1B5C6E;
 font-family: Georgia;
}
h1 {
 font-size:2em;
 margin-bottom: 1em;
}
h2 {
 font-weight: normal;
 font-size:1.625em;
 margin-bottom: 1em;
}
label, input, select {
 font-size: 8pt;
 text-align:right; 
 margin-right: 10px;
 font-family: Arial;
}
input, select {text-align:left}
input[type="text"], input[type="password"],select {
 font-size: 9pt;
 border: 1px solid #C7C7C7;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -moz-box-shadow: 0px 5px 5px #EEE;
 -webkit-box-shadow: 0px 5px 5px #EEE;
 box-shadow: 0px 5px 5px #EEE;
}

hr {background: #E1DEDB}
.required {color: red;}

.month-exp {
 width: 35%;
 margin-left: 195px;
 font-size: 0.68em;
}

.fof-exp {
 width: 40%;
 margin-left: 190px;
 font-size: 0.875em;
}

/*Wrapper*/
body {background: transparent url(https://focusonthefamily.webconnex.com/uploads/wysiwyg/6139/images/body_bg.jpg) repeat-x}
div.form_wrap {width: 1019px;}
div.form_body {
position: relative;
margin-bottom: -12px;
}

/*Overrides */
span.mw-donation-options {
 background: transparent url(/uploads/wysiwyg/6139/images/dl-highlight.png) no-repeat 0 122px;
 padding-left: 10px;
}
label.mw-donation-highlight {color: #FFF;}
span.field_vert {line-height: 1.2em}
p.total {
 margin: 0 0 0 58px;
 font-weight: bold;
 font-family: Arial;
 font-size: 1em;
}
p.total label {
 text-align:left;
 color: #000; 
 margin-left: 0;
 width: auto;
 font-size: 1em;
}
p.total span { 
 color: #5DA314;
 font-size: 1em;
}
p.submit_row {
 text-align:left;
 margin-left: 195px;
 background: transparent url(/uploads/wysiwyg/6139/images/icon_secure.png) no-repeat 50% 0;
}
.button-explain {
 margin: -33px 0 0 195px;
 font-size: 0.6875em;
 width: 223px;
 font-family: Arial;
}
p.submit_row input.button_forward {
 background: #4EC0CB url(/uploads/wysiwyg/6139/images/give-button-2.jpg) no-repeat;
 width: 223px;
 height: 54px;	
 position: relative;
 top: -10px;
 border: none;
 cursor: pointer;
 cursor: hand;
 color: #FFF;
 font-size: 1.375em;
 text-transform: uppercase;
 font-family: Arial;
 text-shadow: 0 1px #1f6f7a;
 text-align: center;
 font-weight: bold;
}

label.hide_field, .mobile-only, .hide_field {display: none;}

/*Intro*/
.mw-intro-container {
 background: #FFF;
 width: 90%;
 padding: 3% 5%;
}
.mw-intro-container p {
 font-size: 1.075em;
 line-height:1.2em;
}
.mw-intro-container .mw-intro-text {
 width: 60%;
 float: left;
}
.mw-intro-container .mw-youtube {
 width: 33%;
 float: right;
}


div.mw-form {
    margin-left: 170px;
}

div.fotfseals {
 width: 33%;
 right:0;
 position:absolute;
}

/*Outro*/
div.mw-outro {
 margin: 0 0 1em 20px;
 font-size: 0.875em;
 padding-bottom: 1em;
}
.uds-left {
 width: 30%;
 float: left;
 zoom: 1;
 position: relative;
}
div.uds-container {
 width: 63%;
 float: right;
 margin-right: 3%;
 zoom: 1;
 position: relative;
 font-size: 1em;
}
.mw-outro h4 {
 font-size: 1.25em;
 font-weight: normal;
 margin-bottom: 0.5em;
 color: #000;
}
.mw-outro strong {color: #000}
.mw-outro .uds-container strong {color: #747474}
a.pdf {
 background: transparent url(/uploads/wysiwyg/6139/images/icon_pdf.jpg) no-repeat;
 padding-left: 40px;
 display: block;
}
.mw-outro .other-ways {
 float:left;
 width: 29%;
 margin-right: 5%;
 zoom: 1;
 position: relative;
}
.mw-outro ul.other-ways {
 margin: 0;
 padding:0;
 list-style:none;
}
ul.other-ways li {
 list-style:none;
 margin-bottom: 0.5em;
}
/*Pop-Up*/
.display-product {
 position: absolute;
 top: 81px;
 z-index: 10;
 padding: 30px;
 width: 919px;
 zoom: 1;
} 

div.mw-pop {
 position: absolute;
 top: 81px;
 left: 27%;
 z-index: 10;
 padding: 30px;
 width: 550px;
 zoom: 1;
 background: #F4F4F4;
}
div.mw-pop h3 {
 font-size: 1em;
 color: #0B3F4D;
 font-weight: normal;
}
div.eightfifty {
 width: 353px;
 height: 203px;
 background: transparent url(/uploads/wysiwyg/6139/images/pop_87fifty.jpg) no-repeat;
 color: #000;
 position: relative;
 float: left;
}
div.eightfifty p {
 position: absolute;
 top: 129px;
 left: 40px;
 font-size: 0.9375em;
 width: 245px;
}
div.mw-chart {
 float: right;
 width: 192px;
}
span.chart-indi {
 clear: left;
 display: block;
 float: left;
 height: 10px;
 margin: 0.3em 10px 0 0;
 width: 10px;
}
div.seals {
 clear: both;
}
p.cccc-explain {
 float:right;
 width:57%;
 margin:20px 50px 0 0;
}
ul#sixp {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul#sixp li {
 list-style: none;
 margin-bottom: 1em;
 padding-left: 40px;
 background: transparent url(/uploads/wysiwyg/6139/images/pop_numbers-6.png) no-repeat;
}
#sixp li.two {background-position:0 -195px}
#sixp li.three {background-position:0 -395px}
#sixp li.four {background-position:0 -594px}
#sixp li.five {background-position:0 -796px}
#sixp li.six {background-position:0 -994px}

#shade, #fotf_shade {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3000px;
 background: #000;
 background: rgba(0, 0, 0, 0.8);
}

#fotf_overlay  {
 position:relative;
 margin: 0px auto;
 margin-top: 230px;
 display:block;
}
#fotf_overlay img {
 position:relative;
 margin: 0px auto;
 display:block;
}

/*Confirmation Screen*/
.mw-confirm {
  font-size: 1.125em;
  line-height: 1.3em;
  margin: 0 50px 15px 50px;
  position: relative;
  top: 50px;
  padding-bottom: 50px;
}
.holds-fb {
 position: relative;
 top: 17px;
}
.holds-tw {
 position: relative;
 top: 5px;
}


/*Premium Settings*/
.mw-hidden-testing {visibility:hidden; height: 0;}
#mw_holds_premiums {
 position: relative;
}
#mw_holds_premiums input {
 float: left;
 height: 95px;
 margin-right: 10px;
 position: relative;
 clear: both;
}
#mw_holds_premiums label {
padding: 10px 140px 0 0;
height: 75px;
display: block;
float: right;
clear: right;
width: 150px;
text-align: left;
line-height:1.6em;
background-repeat: no-repeat;
background-position: 100% 0;
}

#mw_holds_premiums label.premium_label_1 {background-image: url(/uploads/wysiwyg/4067/images/AdventuresinOdyssey_4.png)}
#mw_holds_premiums input.premium_input_1 {top: -20px}
	
#mw_holds_premiums label.premium_label_2 {background-image: url(/uploads/wysiwyg/6139/images/21073-irreplaceable-choose.png)}
#mw_holds_premiums input.premium_input_2 {top: -20px}

#mw_holds_premiums label.premium_label_3 {background-image: url(/uploads/wysiwyg/4067/images/BestofBroadcast_4.png)}
#mw_holds_premiums input.premium_input_3 {top: -20px}

#mw_holds_premiums input.premium_input_4 {top: -28px}

#mw_holds_premiums.premium_selector_off label {background-position: 100% -147px}
.premium_selector_off label {color: #858585}

.premium-hide {
display:none;
}

/*Memorial and Honor Tool Tip*/
#memorial-tooltip {
 background: transparent url(/uploads/wysiwyg/6139/images/memorial-tooltip.png) no-repeat;
 width: 352px;
 height: 132px;
 position: absolute;
 right: 0;
 bottom: 10px;
 color: #FFF;
}
#memorial-tooltip p {
 font-size: 12px;
 line-height: 1.5em;
 margin: 20px 0 0 20px;
 padding: 0;
 width: 80%;
}
#memorial-tooltip a.close {
 font-family: Arial;
 color: #FFF;
 text-decoration: none;
 position: absolute;
 right: 13px;
 top: 10px;
}


@media only screen and (max-width: 660px), only screen and (max-device-width: 660px) {
	.mobile-only {display: block}
	.mobile-hide {display: none}
	.mw-intro-container {margin-bottom: 0 !important} 
	h1 {clear: right;}
	div.header {
	 height: 215px;
	 background: transparent url(https://focusonthefamily.webconnex.com//uploads/wysiwyg/6139/images/mobile-header-5.jpg) no-repeat;
	}
	div.form_wrap {
	 background: #FFF;
	 width: 100%;
	}
	div.form_body {
	 width: 90%;
	 margin: 0;
	 padding: 4%;
	 left: 1%;
	 top: -100px;
	 margin-bottom: -100px;
	}
	div.mw-form {margin-left:0}
	label.label {
		text-align: left;
		display: inline;
	}
	p.submit_row {background: none}
	p.total, p.submit_row, .button-explain  {margin-left: 0}
	.step-img {width: 80%}
	.month-exp {width: 100%;margin-left:0;font-size: 0.8em}
        .fof-exp {width: 100%;margin-left:0;font-size: 0.8em}
	.mw-intro-container .mw-intro-text,
	.mw-intro-container .mw-intro-seals,
	.uds-left, 
	div.uds-container,
	div.eightfifty,div.mw-chart, .mw-outro .other-ways {
 	 width: 100%;
 	 float: none;
	}
         .mw-intro-container .mw-youtube {
           width: 100%;
           float:none;
           margin-left: -15px;
           }
        div.fotfseals {right:0;
           position: relative;
           width:100%;}
	div.uds-container {font-size: 0.8em}
	div.eightfifty {margin-bottom: 1em}
	div.mw-pop {
	 top:710px;
	 left: 0;
	 width: 90%;
	 padding: 5%;
	}
	ul#sixp {font-size: 0.8em}
	p.cccc-explain {
 	 float:none;
 	 width:100%;
 	 margin: 1em 0;
	}
	#memorial-tooltip {
	 width: 95%;
	}
	#memorial-tooltip p {font-size:11px;width:80%}
	.mw-confirm {margin-left: 0; margin-right:0;}
    #mw_holds_premiums {
  left: 0;
  line-height: 2em;
 }
 #mw_holds_premiums input {
  height: auto;
  position: static !important;
  margin: 2px 10px 0 0;
 }
 #mw_holds_premiums label {
  padding: 0;
  height: auto;
  background: none !important;
  width: 85%;
 }
 #mw_holds_premiums label.premium_label_1,
 #mw_holds_premiums label.premium_label_2,
 #mw_holds_premiums label.premium_label_3 {background-image: none}
}