/* -------------------------------------------------------------- 
   
   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

label       { font-weight: bold; }
fieldset    { padding: 0; margin: 0; border: none; }
legend      { font-weight: bold; font-size:1.2em; }
input, 
textarea, 
select      { color: #4A4A4A; }


input:-moz-placeholder { opacity: 1; }
input::-moz-placeholder { opacity: 1; }
select:-moz-placeholder { opacity: 1; }
select::-moz-placeholder { opacity: 1; }
textarea:-moz-placeholder { opacity: 1; }
textarea::-moz-placeholder { opacity: 1; }

/* Form List Resets
--------------------------------------------------- */
form ol, 
form ul {
  list-style: none;
  margin: 0; }
form li { position: relative; }

/* Error INPUT
--------------------------------------------------- */

input.error, textarea.error { 
   background: rgba(255,0,0,.1);
   color: #ff0000;
  -moz-box-shadow:    inset 0 0 0 4px rgba(255, 0, 0, 1) !important;
  -webkit-box-shadow: inset 0 0 0 4px rgba(255, 0, 0, 1) !important; 
  box-shadow:         inset 0 0 0 4px rgba(255, 0, 0, 1) !important; }

input.error:hover, textarea.error:hover { 
   background: white;
   color: #444;
  -moz-box-shadow:    inset 0 0 0 2px rgba(0, 0, 0, 0.65) !important;
  -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.65) !important;
  box-shadow:         inset 0 0 0 2px rgba(0, 0, 0, 0.65) !important; }

input.error:active, textarea.error:active { 
   background: white;
   color: #444;
  -moz-box-shadow:    inset 0 0 0 2px rgba(0, 0, 0, 0.45) !important;
  -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45) !important;
  box-shadow:         inset 0 0 0 2px rgba(0, 0, 0, 0.45) !important; }     

/* Error LABEL
--------------------------------------------------- */

form label { position: relative; }

input.error:after, strong.error { 
   background: #ff0000;
   padding: .25em .5em;
   display: block;
   white-space: nowrap;
   position: absolute;
   left: -.5em;
   top: -1.25em;
   z-index: 9999;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
   font-size: 60%;
   line-height: 10px;
   font-weight: 400;
   color: #fff;
   text-transform: uppercase; } 
strong.error:after { 
   height: 0;
   width: 0;
   margin-left: -6px;
   content: " ";
   position: absolute;
   left: 15px;
   top: 100%;
   border-color: rgba(255, 0, 0, 0);
   border: solid transparent;
   pointer-events: none;
   border-top-color: #ff0000;
   border-width: 6px;}

/* Generic Form Elements
--------------------------------------------------- */

#content form li.submit { 
  padding-top: 10px;
  text-align: left;
  display: block; }

#content form li { 
  margin: 0 0 7px;
  display: block;
  width: 100%;
  float: none; }

#content input[type=text], 
#content input[type=date],
#content select,
#content textarea[type=text],
#content textarea { 
   background: #fff;
   -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
   box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
   margin: 0 auto;
   padding: .5em .75em;    
   cursor: pointer; 
   font-size: 1em;
   line-height: 1;
   color: #4A4A4A;
   transition:         all .35s ease-in-out;    
   -webkit-transition: all .35s ease-in-out;  
   -moz-transition:    all .35s ease-in-out;  
   -o-transition:      all .35s ease-in-out;  
   -ms-transition:     all .35s ease-in-out; } 

#content input[type=text]:hover,
#content input[type=date]:hover,
#content select:hover,
#content textarea[type=text]:hover,
#content textarea:hover { 
  background: #eee; 
  color: #4A4A4A;
   -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
   box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }


/* ---- Placeholder Text Equalizer ---- */

#content input:-ms-input-placeholder            { color:  #4A4A4A; }
#content input::-webkit-input-placeholder       { color:  #4A4A4A; }
#content input:hover:-ms-input-placeholder      { color:  #4A4A4A; }
#content input:hover::-webkit-input-placeholder { color:  #4A4A4A; }     

#content textarea:-ms-input-placeholder            { color:  #4A4A4A; }
#content textarea::-webkit-input-placeholder       { color:  #4A4A4A; }
#content textarea:hover:-ms-input-placeholder      { color:  #4A4A4A; }
#content textarea:hover::-webkit-input-placeholder { color:  #4A4A4A; }      

#content input[type=text]:focus,
#content input[type=date]:focus,
#content select:focus,
#content textarea[type=text]:focus { 
  background: #F2F1E8 ;   
  color: #4A4A4A;
  cursor: text; 
  box-shadow:         inset 1px 1px 1px rgba(0, 0, 0, 0.35);       
  -moz-box-shadow:    inset 1px 1px 1px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35); }    

.contact #content input[type=text] { 
  }
  
#content textarea[type=text] { 
  height: 5em;
  width: 90%;  }
  
.organization-type {
   width: calc(100% - 4em); }
  
#organization_description {
  height: 5em;
  width: 90%;  }

#content option { 
  border-radius:         4px;
  -moz-border-radius:    4px; 
  -webkit-border-radius: 4px; }    

/* Generic Button
--------------------------------------------------- */

#content form button { 
   background: #f47321;
   padding: .5em 1em;
   display: inline-block;
   border: 0;
   cursor: pointer;
   font-size: 1.25em;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;  
   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out; }
#content form button:hover { 
  background: #49176d; 
  -moz-box-shadow:    0 1px 1px rgba(0,0,0,.15);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
  box-shadow:         0 1px 1px rgba(0,0,0,.15); }   
#content button:active { 
  background: #49176d;
  -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.35);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
  box-shadow:         inset 0 1px 1px rgba(0,0,0,.35); }  


/* Checkbox and Radio Buttons 
--------------------------------------------------- */
input[type=radio], input[type=checkbox] {
    border-radius: 1em;
    -webkit-appearance: button;
    border: double 1px #aaa;
    background-color: #eee;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    width: .5em;
    height: .5em;
    padding: .5em;
}

input[type=radio]:checked, input[type=checkbox]:checked {
    background-color:#f47320;
    border-left-color:#444;
    border-right-color:#444;
}

input[type=radio]:hover, input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #ddd;
}


/* Site Specific
--------------------------------------------------- */
form .row {
   margin-bottom: 1.5em; }
   
form .row ol, form .row ul {
   padding: .5em 2em;
   display: inline-block; }

ol.organization-contact { 
   display: flex; }
   
   ol.organization-contact li { 
      width: 50%;
      display: inline-block; }
      
ol.break {
   display: block;
   margin-bottom: 2rem !important; }
   
ol.half {
   width: 50%; }
   
ol.organization-type { 
   display: flex; }
   
   ol.organization-type li { 
      width: 33%;
      display: inline-block; }
      
   li.other { 
      width: 100%;
      display: block; }
      
      li.other input[type=text] {
         margin-left: .5em;
         width: 340px; }
      
   li.other .alt { 
      font-weight: 400;
      color: #aaa; }

.confirmation { 
   color: red;
   font-size: 80%; }

ol.signature-info {
   width: 50%; }
   
   ol.signature-info .signature {
      width: 100%;
   }
   ol.signature-info .date {
      width: 50%;
   }

.paragraph {
   width: 100%;
   height: 8rem; }

   
@media only screen and (max-width: 900px){
   form .row { margin-bottom: 1em; }
   form .row ol { padding: .35em 1em; }
   ol.organization-contact li, ol.organization-type li { width: calc(50% - 1em); padding: 0 .5em; }
   ol.organization-type li.other input[type=text] { width: 200px; }
   ol.signature-info { width: 75%; }
}

@media only screen and (max-width: 640px){
   form .row { margin-bottom: 2em; }
   form .row ol { padding: .25em 0em; }
   ol.organization-contact li, ol.organization-type li { width: 100%; padding: 0; }
   ol.organization-type li.other input[type=text] { width: 200px; display: block; margin: .25em 0 0 0 !important;}
   ol.signature-info { width: 100%; }
   ol.half { width: 100%; }
}

form#contact-form li { float: none; }