/*
   CIS233DA, Spring Semester with Mrs. Cridebring
   Final Project Website

   Style Sheet for www.PsychicChamber.com 
   Credit Card Payment page 
  
   Filename: paymentstyles.css

*/

/* ======================================
   Base Global Styles Until Media Queries
   ======================================
*/

body  {
    max-width: 820px;
    margin: auto;
  }

/* Credit Card Payment Form */

h1, label  {
   color: #de9b17; /* Yellow-gold */
   text-align: center;
   width: auto;
}

legend {
  color: #de9b17; /* Yellow-gold */
  font-weight: bold;
  text-align: center;
  width: auto;
} 

p  {
  color: #de9b17; /* Yellow-gold */
  font-size: .7em;
}

/* ================
     Flex Styles
   ================
*/

#h1_text  {
    display: block;
}

#wrapper > section > h1 {
    text-align: center;
}

.time_box  {
    justify-content: center;
    display: flex;
}

.billing_box   {
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
}

.billing_box > label {
    min-width: 173px;
}

.cardinfo > label {
   min-width: 183px;
} 

/* Form Layout Styles */

fieldset {
    border: 1px solid #ce8d38; /* Carmel color */ 
 }
 
 legend {
    background-color: #de9b17; /* Carmel color */
    color: #120100;
    font-size: 0.9em;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 8px;
    width: 100%;
 }
 
 
 /* Input and Label Styles */
 
 label {
    display: block;
    float: left;
    clear: left;
    font-size: 0.9em;
    margin-bottom: 2px;
    margin-right: 10px;
    width: 180px;
    text-align: left;
 }
 
 form#payment input, form#payment select {
    display: block;
    float: left;
 }
 
 /* Radio Button Styles */
 
 input[type='radio'] {
    width: auto;
 }
 
 input  {
    margin-bottom: 6px;
 }
 
 /* Submit Button Styles */
 
 #formButtons  {
    display: flex;
    justify-content: center;
 }
    
 input[type='submit'] {
    background: #ecaa20;
    color: #120100;
    font-family: Ariel, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    display: inline;
    margin: 5px auto;
 }
 
 input[type='reset']  {
    background: #ad6034;
    color: #120100;
    font-family: Ariel, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    display: inline;
    margin: 5px auto;
 }
   
/* ============================================
   Tablet and Desktop Styles: 321px and greater 
   ============================================
*/
@media only screen and (min-width: 321px)  {
 
   /*section  {
      width: 80%;
      max-width: 419px;
      margin: auto;
   }*/