/* 
Anne Lewis Strategies
Base mobile responsive CSS for standard Salsa petition-style action form.

Developed by Todd Plants <todd@annelewisllc.com>.
*/

/* Twitter Bootstrap button styles. */

@import url("//annelewisllc.s3.amazonaws.com/assets/salsa/responsive_petition_action/css_lib/twitter.bootstrap.buttons.css");

/* Basic content display.  */

html {
	-webkit-font-smoothing: antialiased;
}

#salsa.actions {
	width: auto;
	max-width: 79em; /* 1 52em wide column, 1 25em wide column, 2em gutter */
	clear: both;
	font-size: inherit;
	line-height: inherit;
	margin: auto;
	padding: 0;	
	padding-right: 27em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color:#93be2c !important;
	text-decoration:none !important;
}

a:visited {
	color:#93be2c !important;
}

a:hover {
	color:#aeda47 !important;
}

#mainForm > #salsa.actions {
	padding-right: 0;
}


#salsa.actions #info-page {
	width: 100%;
	float: left;
}

#salsa.actions #info-page h1 {
	float: right;
	width: 100%;
}

#salsa.actions .petitionContent {
	display: none;
}

#salsa.actions #mainForm {
	width: 25em;
	margin: 1em -27em 0 2em;
	float: right;
}

#salsa.actions #mainForm .addressSearch, 
#salsa.actions #mainForm .signpage, 
#salsa.actions #mainForm .contentSet {
	display: block;
	float: none;
}

#salsa.actions #mainForm br {
	display: none;
}

/* Base form widgets. */

::-webkit-input-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -webkit-transition: color 0.3s; transition: color 0.3s; /* WebKit */ }
:-moz-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -moz-transition: color 0.3s; transition: color 0.3s; /* Firefox 4 to 18 */ }
::-moz-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -moz-transition: color 0.3s; transition: color 0.3s; /* Firefox 19+ */ }
:-ms-input-placeholder { color: inherit; opacity: 1; font-weight: normal !important; -ms-transition: color 0.3s; transition: color 0.3s; /* Internet Explorer 10+ */ }
.placeholdersjs { color: inherit; opacity: 1; font-weight: normal !important; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; /* Internet Explorer 10+ */ }


:focus::-webkit-input-placeholder { color: rgb(80%, 80%, 80%); /* WebKit */ }
:focus:-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 4 to 18 */ }
:focus::-moz-placeholder { color: rgb(80%, 80%, 80%); /* Firefox 19+ */ }
:focus:-ms-input-placeholder { color: rgb(80%, 80%, 80%); /* Internet Explorer 10+ */ }
.placeholdersjs:focus { color: rgb(80%, 80%, 80%); /* Internet Explorer 10+ */ }

#salsa.actions label {
	display: block;
	width: 100%;
	clear: both;
}

#salsa.actions input, 
#salsa.actions select, 
#salsa.actions textarea {
	font-family: inherit;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#salsa.actions .formRow input, 
#salsa.actions .formRow select,
#salsa.actions .formRow textarea {
    border: 1px solid #BBBBBB;
    display: inline;
    height: 1.75em;
    min-height: 30px;
	font-size: 1.25em;
    line-height: 1.25em;
    margin: 0.25em 0 0.5em 0;
    padding: 0.25em 0.5em;
    width: 100%;	
}

#salsa.actions .formRow textarea {
	height: 7em;
	font-weight: normal;
}

#salsa.actions input[type="hidden"] {
	display: none !important; /* Addresses Firefox bug that sometimes shows hidden fields. */
}

#salsa.actions input.salsa_zip {
	width: 30%;
	min-width: 7em;
	max-width: 10em;
}

#salsa.actions label.checkbox-label {
	display: inline-block;
	font-weight: bold;
	margin-right: 0.5em;
	min-width: 8em;
	vertical-align: top;
	width: 70% !important;
}

#salsa.actions .formRow input[type="checkbox"] {
	border: 0 none !important;
	margin-top: 0;
	padding: 0;
	width: 20% !important;
	float: left;
	box-shadow: none;
	height: 1em;
	min-height: 25px;
} 

#salsa.actions #submitDiv {
	clear: both;
	width: 100%;
	font-size: 1em;
	margin-top: 1em;
}

/* Error handling. */

#salsa.actions .error {
	background: #fbe3e4 !important;
	border: 1px solid #fbc2c4 !important;
	color: #d12f19 !important;
	padding: 0.5em 1em !important;
	margin: 1em auto !important;
	font-size: 1em !important;
	font-weight: normal !important;
	text-align: left !important;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#salsa.actions #errorMessage .error {
	padding: 0px !important;
	display: block !important;
	margin: 0.25em auto !important;
	background: none !important;
	border: 0 !important;	
}

#salsa.actions .activeSession, 
#salsa.actions #additionalInfoMessage,
#salsa.actions #supporter {
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
	padding: 0.5em;
	margin: 0 0 1em 0;
	clear: both;
	display: block;
}

#salsa.actions #supporter span {
	margin: 1em 0;
	display: block;
}

#salsa.actions #supporter span:first-child {
	margin-top: 0;
}

#salsa.actions #supporter span:last-child {
	margin-bottom: 0;
}

#salsa.actions #supporter span#profile {
	display: none;
}


#salsa.actions #emailValidationErrorId {
	color: #d12f19;
	margin: -0.25em 0 0.5em 0;
	text-align: right;
	display: block;
}

#salsa.actions #emailValidationErrorId .required {
	color: #d12f19;	
}

/* Use with placeholders.js to tweak display of input placeholders on older browsers. */

.removeBold {
	font-weight: normal !important;
}

.full_width_container {
	width:100%;
}

.single_column {
	border-radius:0px !important;
	-moz-border-radius:0px !important;
	-webkit-border-radius:0px !important;
	background:rgba(86, 86, 91, 0.75) !important;
	max-width:435px;
	padding: 40px 50px !important;
	min-height:550px;
}

#salsa.actions #info-page h1 {
	color:white !important;
	font-size:35px !important;
	line-height:36px !important;
	text-transform:uppercase;
	position:relative;
	text-align:center !important;
	display:block;
	margin:0 auto;
	letter-spacing:.1em;
	font-family: 'Gotham Cond SSm A','Gotham Cond SSm B';
	font-weight: bold !important;
	float:none !important;
}

#salsa.actions #info-page h1:after {
	content:'';
	width:170px;
	height: 4px;
	background:#97c628;
	position:absolute;
	left:0;
	right:0;
	bottom: -40px;
	margin: 35px auto;
}

#salsa.actions #info-page #description {
	float:none !important;
	width:100% !important;
	display:block;
}

#info-page {
	color: #d6d6e2;
	font-size: 17px;
	line-height: 26px;
	text-align: center;
	font-family: "pt-serif",sans-serif;
	margin-top: 23px !important;
}

.single_column p {
	color:#d6d6e2;
	font-size:17px;
	line-height:26px;
	text-align:center;
	font-family: "pt-serif",sans-serif;
	margin-top: 23px !important;
}

#mainContainer {
	background:url('https://secure.wideeyeclient.com/safe/salsa/elephant-bg.jpg');
	background-size: cover;
	background-position: 50% 100%;
	position:relative;
	border-top:35px solid #20202a;
	background-attachment: fixed;
}

#branding {
	position:fixed;
	width:126px;
	top:59px;
	right:24px;
}

#branding img {
	width:100%;
}

#footer {
	display:none;
}

#footer_content {
	width: 100%;
	background: #20202a;
	padding-top: 65px;
	padding-bottom: 85px;
	color: #56565b;
	font-size: 14px;
	line-height: 21px;
	text-align: center;
	font-family: "pt-serif",sans-serif;
}

#legal p span {
  margin-bottom: 15px;
  font-size: 10px;
  border: 3px solid rgba(86,86,91,0.25);
  padding: 13px 30px;
  display: inline-block;
  margin: 0px auto;
  letter-spacing: 0.1em;
  color: #56565b;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Gotham SSm A','Gotham SSm B';
}

input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input.text, textarea, select, input.blockInput {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  color: #56565b !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  border: 0px solid rgba(8, 37, 108, 0.25) !important;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border:none !important;
  border-color:transparent !important;
  border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  -webkit-font-smoothing: antialiased;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  padding: 0.5em;
  background: rgba(235, 235, 244, 0.9);
  width: 100% !important;
  line-height: 37px;
  outline:none !important;
  margin-top: 5px !important;
  margin-bottom: 13px !important;
  font-family: 'Gotham SSm A','Gotham SSm B' !important;
  letter-spacing: -0.02em !important;
  padding-left:5px !important;
}

input:focus, input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
  outline: none;
  border: 0px solid transparent !important;
}

.salsa label, .salsa legend {
  font-size: 12px !important;
  color: white !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  font-family: 'Gotham SSm A','Gotham SSm B' !important;
}

.salsa span.required {
  color: #FF9304 !important;
  font-weight: normal !important;
  font-size: 20px !important;
  line-height: 10px !important;
  margin-left: 5px;
  position: relative;
  top: 5px;
}

.submit, input[type=submit] {
  background: #ec471c;
  background: -moz-linear-gradient(top, #ec471c 0%, #ec471c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ec471c), color-stop(100%,#ec471c));
  background: -webkit-linear-gradient(top, #ec471c 0%,#ec471c 100%);
  background: -o-linear-gradient(top, #ec471c 0%,#ec471c 100%);
  background: -ms-linear-gradient(top, #ec471c 0%,#ec471c 100%);
  background: linear-gradient(to bottom, #ec471c 0%,#ec471c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec471c', endColorstr='#ec471c',GradientType=0 );
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  border: 0px !important;
  cursor: pointer;
  padding: 0.5em 0em;
  width: 100%;
  -webkit-appearance: none;
  margin-top: 0.5em;
  color: #20202a !important;
  text-shadow:none !important;
  font-size: 16px !important;
  background: #97c628;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  font-family: 'Gotham SSm A','Gotham SSm B' !important;
  padding: 19px 25px !important;
  text-transform:uppercase;
  outline:none !important;
}

.submit:hover, input[type=submit]:hover, .submit:focus, input[type=submit]:focus {
	background:#aeda47 !important;
}
.submit:active, input[type=submit]:active {
	background:#aeda47 !important;
}

.salsa .formRow {
  padding-left: 0px !important;
}

#salsa.actions #mainForm {
  border-left: 0px solid transparent !important;
  float: none !important;
  display: block;
  margin: 40px 0 0 0% !important;
  padding-left: 0% !important;
  width: 100% !important;
}

#salsa.actions label {
	display:block !important;
}

::-webkit-input-placeholder {
   color: transparent !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: transparent !important;  
}

:-ms-input-placeholder {  
   color: transparent !important;  
}

#salsa.actions .formRow input, #salsa.actions .formRow select, #salsa.actions .formRow textarea {
  display: inline;
  height: auto !important;
  min-height: 30px;
  line-height: 37px;
  margin: 0.25em 0 0.5em 0;
  padding: 0.25em 0.5em;
  height:auto;
  font-size: 18px !important;
  font-weight: 400 !important;
}

#salsa.actions .formRow select {
	height:46px !important;
}

/* Small Screens */

@media only screen and (max-width: 48em) {

	#salsa.actions {
		padding-right: 0;
		width: 40em;
		max-width: 100%;
	}

	#salsa.actions #mainForm {
		width: 100%;
		margin: 1em auto;
		float: none;
	}
	
	#salsa.actions .formRow {
		width: 100%;
		overflow-x: hidden; /* Addresses terrifying WebKit bug. https://github.com/annelewisllc/als_salsa_responsive_contrib/issues/1 */
		overflow-y: visible;
	}

	.hide-on-small-screens {
		display: none !important;
	}

}

@media only screen and (max-width: 590px) {
	#branding {
		display:none;
	}
	.single_column {
		padding:40px 25px !important;
	}
}