/* 
 * Monthly Hybrid Form 
 * 6/2/2015
 * CSS modeled on /truenorth/alt/css/landing_page.css
 */


/* donation buttons */

#four_sections {
  position: relative;
  width: 486px;
  height: 275px;
  clear: both;
  padding-top: 19px;
}

.four_sections_rows {
  position: relative;
  width: 486px;
  height: 137px;
}

.donate_btn {
  float: left;
  width: 232px;
  height: 116px;
  display: inline;
}

.donate_btn a  {
	float: left;
	width: 232px;
	height: 116px;
	text-indent: -9999px;
	color: #666;
	display: block;
}

.donate_btn a.radio {
	width: 232px;
	height: 116px;
}

/* generic search text four buttons */
.donate_btn a#one_search, a#two_search, a#three_search, a#four_search {
	background: url(../images/landing_page/btn/default-b.jpg) no-repeat top center;
	text-indent:0;
}

.donate_btn a#one_search.hover, a#two_search.hover, a#three_search.hover, a#four_search.hover {
	background: url(../images/landing_page/btn/default-b.jpg) no-repeat center center;
}

.donate_btn a#one_search.inactive, a#two_search.inactive, a#three_search.inactive, a#four_search.inactive {
	background: url(../images/landing_page/btn/default-b.jpg) no-repeat top center;
}

.donate_btn a#one_search.active, a#two_search.active, a#three_search.active, a#four_search.active {
	background: url(../images/landing_page/btn/default-b.jpg) no-repeat bottom center;
}

/* search (text) landing pages */
.donate_btn_header {
	font-size: 15px;
	padding: 10px 0 0 50px;
	font-weight: bold;
	color: white;
	letter-spacing:1px;
}

.donate_btn_header_small {
	font-size: 12px;
}

.donate_btn_copy {
	width: 190px;
	font-size: 13px;
	padding: 8px 0 0 3px;
}

.donate_btn_copy_inner_four_lines {
	padding-top: 2px;
}

.donate_btn_copy_inner_three_lines {
	padding-top: 8px;
}

.donate_btn_img {
	float:left;
	margin-top: -2px;
	height: 73px;
}

.donate_btn_right_col {
	margin: 0em 0em 0em 23px;
}

/* other amount radio button */

.btn {
float: left;
width: 17px;
height: 17px;
}

input.radio_btn {
width: 17px;
height: 17px;
}

.btn a  {
float: left;
width: 100px;
height: 17px;
text-indent: -9999px;
color: #666;
display: block;
}

.btn a#five {
width: 17px;
height: 17px;
margin: 14px 0em 0em 0em;
background: url(../images/landing_page/btn/button-b.jpg) no-repeat top center;
}

.btn a#five.inactive{
background: url(../images/landing_page/btn/button-b.jpg) no-repeat top center;
}

.btn a#five.active {
background: url(../images/landing_page/btn/button-b.jpg) no-repeat bottom center;
}

/* other amount input field */

#other_section {
float: left;
width: 255px;
height: 55px;
display: inline;
}

#other_section input#other_gift_amount { 
width: 101px;
height: 26px;
border: 0px;
text-indent: 2px;
font: normal 12px/26px Arial, Helvetica, 'Trebuchet MS', verdana, sans-serif;
color: #666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dbdbdb;
margin: 10px 0em 0em 10px;
}

/* header */

#data_form h3 {
  float: left;
  width: 500px;
  height:39px;
  margin: 0em;
  font: normal normal 26px 'freight-sans-pro';
  color: #3c3c3c;
  text-align: left;
  overflow: hidden;
  display: inline;
  padding-top:20px;
  letter-spacing:1.1px;
}


/* left side box */

.box, 
.box_header, .box_main, .box_footer,
img.box_divider {
position: relative;
width: 320px;
}

.box_header { 
height: 11px;
}

.box_main {
/* min-height: 250px; */
height: auto !important;
/* _height: auto !important; */
/* height: 250px; */
background: url(../images/landing_page/box_bg.png) 0px 0px repeat-y;
overflow: hidden;
width:320px;
}

* html .box_main { 
height: 250px;
}

html>body .box_main {
height:auto;
}

.box_main h3 {
float: left;
width: 360px;
height: 60px;
margin: 0em 0em 0em 4px;
font: normal normal 14px/28px Arial, Helvetica, 'Trebuchet MS', verdana, sans-serif;
color: #3c3c3c;
text-align: left;
overflow: hidden;
display: inline;
}

/* "Become a Monthly Field Partner" left-side box header */
.box_main_header_text {
	font-size:15px; 
	font-weight:bold; 
	letter-spacing:2px; 
	line-height:24px; 
	margin: 5px 0px 20px 0px;
	padding: 0em 22px;
}

.box_main img.your_donation_header {
float: left;
width: 360px;
height: 60px;
margin: 0em;
border: none;
}

.box_main p {
	font: normal normal 16px/20px 'freight-sans-pro';
	padding: 0em 22px;
	margin:  0em 0em 20px 0em;
	color: #3c3c3c;
}

.box_main_small_text {
	font: normal normal 14px/18px 'freight-sans-pro' !important;
}

.box_main_last {
	margin-bottom: 5px !important;
}

.box_main_image {
	padding: 5px 0px 5px 20px;
}

.img_caption {
	clear:both;
	font: normal normal 11px 'freight-sans-pro' !important;
	margin:  0em 0em 10px 0em !important;
}

.box_footer { 
	height: 29px;
}

/* form body */

.medium_text {
	font-size: 16px;
}

/* Make a one-time donation instead link */ 

#data_form ul#right_side {
  float: left;
  width: 230px;
  height: 47px;
  color: #1c8de5;
  display: inline;
  margin: 0;
  padding: 0;
  font: 16px 'freight-sans-pro';
}

#data_form ul#right_side li {
  float: left;
  line-height: 47px;
  display: inline;
}

#data_form ul li a {
  color: #1c8de5;
  /* margin: 0em 0em 0em 155px; */
  text-decoration: none;
}

.arrow-right {
  float: left;
  width: 0;
  height: 0;
  margin: 19px 0em 0em 9px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #1c8de5;
  text-indent: -999em;
}

.seals_image {
	padding-left: 20px;
}


/* responsiveness */
/*
@media screen and (max-width: 640px) {
	
  .header, #footer_wrapper {
    visibility: hidden;
	display:none;
  }

  #left_side {
    visibility: hidden;
	display:none;
  }
  
  #onetime_right_side {
  	float:left;
  }
  
	.content {
	  width: 650px;
	  padding: 20px 5px;
	}

	.main {
		min-width: 0;
	}

}
*/

/* responsiveness 
 * http://stephen.io/mediaqueries/#iPhone
 * iPhone 6
 * */
/*
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
{
	
  .header, #footer_wrapper {
    visibility: hidden;
	display:none;
  }

  #left_side {
    visibility: hidden;
	display:none;
  }
  
  #onetime_right_side {
  	float:left;
	width: auto;
  }
  
	.content {
	  width: auto;
	  padding: 20px 5px;
	}

	.main {
		min-width: 0;
	}

	#four_sections {
		width: auto;
	}
}
*/

/* /monthly hybrid form */
