/* It is the Html area around the form Not the form itself  */
#Customer_wrapper 
{
    margin-top:   25px;			
    margin-left:  auto;
    margin-right: auto;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-right:    0px;
    
   border: 2px solid red;
}
/****************************   Customer  FORM  to input data   **************/
#Customer 
{
    width: 470px;
    
    margin-top:   30px;			
    margin-left:  200px;
   
    padding-top: 20px;
    
    border: 1px solid blue;
}
/****************   Web form paragraph ************************/
/************  Change space between field boxes by modifying margins ***************/
/*************************   Labels  **************************/
#Customer .c_label, .title_label, .fname_label, .lname_label,.country_label, .City_label,.email_label, .tel_label, 
.Address1_label, .Address2_label, .post_label,  .company_label,.submit_text,
.bank_label, .paypal_label , .payment_label, .bank_label, .info_label, .Yes_label, .No_label
{
    float:              left;
    width:              150px;
    
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1em;
    font-weight: normal;
    text-align:  right;

    margin-top:          px;
    margin-right:        20px;
    margin-left:        0px;

    padding:            10px;
    padding-bottom:      px;
    padding-left:       0px;

    border: 1px  solid  violet;
}
#Customer .submit_text
{
    float:            left;
    width: 300px;
    margin-top:          20px;
    margin-left:        250px;
    
    border: 1px solid red;
}
#Customer .country_label
{
      
}
#Customer .City_label
{
}
#Customer .Address1_label
{
     
}#Customer .Address2_label 
{

}
#Customer .company_label 
{
     
}
#Customer .fname_label 
{      
}
/* Note 34.15 right margin */
#Customer .bank_label
{  
    width:  100px;
    
    margin-left:       100px;
    margin-right:     0px;

    border: px  solid  violet; 
}
/* note thers is a 34.15 margin to the left */

#Customer .paypal_label
{   
    width:  100px;  
    /* MOVES THE    CIRCLES to the right */
    margin-left:       30px;
    /* Moves  circles in between the Lables
    Moves circles to the left 
    */
    margin-right:      -100px;
    
    border: px  solid  violet;
}
#Customer .payment_label
{ 
   width:  250px; 
    font-size: 1.2em;  
}
#Customer .info_label
{
    width:  250px;  
    font-size: 1.2em; 
    
    margin-top: px;
    margin-bottom: px;
    
}
#Customer .Yes_label
{  
   width:  50px;
   margin-left:       220px; 
   margin-right:      0px;
   
   border: px  solid  violet; 
}
#Customer .No_label
{ 
   width:  50px; 
   
       /* MOVES THE    CIRCLES to the right */
    margin-left:       80px;
    /* Moves  circles in between the Lables
    Moves circles to the left 
    */
    margin-right:      -100px;
   
   
   border: px  solid  violet; 
}

#Customer .blank_label
{  
    width:  150px;
    font-size: 1.6em;
    color: whitesmoke;    
}
/************  Input Boxes  ******************/
#c_title, #c_Fname, #c_Lname, #c_Email, #c_City, #c_Country, #c_Postal, #c_Tel, #c_fax, #c_Subject,
#c_Company, #c_Address1, #c_Address2
{   
    float:              left;
    width:              250px;

    font-family:"Lucida Console", Monaco, monospace;
    font-size: 1em;

    margin-top:          0px;
    margin-right:        0px;
    margin-left:         0px;
    padding-top:         0px;   
    
    border: px  solid  teal;
    background-color:  yellow;

}
#c_title
{
    width: 80px; 
} 
#c_Postal
{
    width: 100px; 
} 
#c_Company, #c_Address1, #c_Address2 
{  
    width: 250px;
    margin-left:    px;      
}
#c_Address2
{ 
    width: 250px; 
    margin-left:    px;   
}
#c_City
{ 
   margin-left:     px;  
}
#c_Country 
{ 
    margin-left:    px;
}
#c_Email
{
     margin-left:   px;  
}
/***********************          Input Boxes Focus    **************************/
#c_id:focus,
#c_name:focus,
#c_email:focus,
#c_to:focus,
#c_subject:focus,
#c_message:focus,
#c_submit:focus,
#c_reset:focus,
#c_refer:focus
{
    background-color: #FDD041;
}
/*************************   Label  TexyArea **************************/
#Customer .c_label_message 
{
    float: left;
    width: 100px;
    
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1em;
    font-weight: normal;
    text-align:  center;

    margin-top: 10px;
    margin-left: 180px;

    padding: 0px;
    padding-bottom:  0px;

    clear: left;

    border: px  solid salmon;
}
#Customer textarea
{
    width:          400px;
    height:         200px;
    
    font-family:"Lucida Console", Monaco, monospace;
    font-size: 1.3em;			
    text-align:  left;	

    margin: auto;
    margin-right: 20px;			
    margin-left:  20px;
    margin-top:   0px;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     0px;
    padding-right:    0px;
     
    border: 1px solid  windowtext;
}
/*********               Customer_wrapper   Header        *******************/
#Customer_wrapper h1
{
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    color:  black;
    font-size: 1em;
    font-style: italic;
    text-align: center;	

    margin-top:   10px;			
    margin-left:  30px;
    margin-right: 340px;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     0px;
    padding-right:    0px;
    
    border: 1px solid tan;
}
#Customer_wrapper h2
{
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    color:  navy;
    font-size: 4em;			
    text-align: center;	

    margin-top:   10px;			
    margin-left:  20px;
    margin-right: 20px;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     0px;
    padding-right:    0px;
    
    border: 0px solid tan;
}
/****************   Customer_wrapper  paragraph ************************/
#Customer_wrapper p
{   
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    color:    midnightblue;
    font-size: 0.8em;			
    text-align: center;	

    margin-top:   10px;	
    margin-bottom: 5px;
    margin-left:  0px;
    margin-right: 0px;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     0px;
    padding-right:    0px;
    
    border: px solid black;
}
/******** Customer_wrapper             ***************/
#Customer_wrapper .c_confirm
{
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    color:    midnightblue;
    font-size: 3em;			
    text-align: center;	

    margin-top:   0px;			
    margin-left:  0px;
    margin-right: 0px;

    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     0px;
    padding-right:    0px;
    
    border: 0px solid violet;

}

/**** Note: Inheritance Cascading  technique being used
/**********************  Button ************************/
/*
 font-family:"Lucida Console", Monaco, monospace;
    font-size: 1em;
    color:  black;

    margin-left:        157px;
    padding-right:      15px;
    padding-left:       15px;

    background-color:    whitesmoke;
*/
#c_submit, #c_reset
{
  font-family:"Lucida Console", Monaco, monospace;
    font-size: 1em;
    text-transform: uppercase;
    color:  black;
      
    background-color:            powderblue;
    line-height:                 100%;
    
    margin-top:    10px;
    
    padding-top:                 10px;
    padding-bottom:              10px;
    padding-right:      10px;
    padding-left:       10px;
    
    margin-left:        250px;          
    border:    seashell outset 5px;
    /*
      skyblue 
      silver
    */ 
}
#u_submit
{
  font-family:"Lucida Console", Monaco, monospace;
    font-size: 1em;
    color:  black;
      
    background-color:            powderblue;
    line-height:                 100%;
    
    margin-top:    0px;
    
    padding-top:                 0px;
    padding-bottom:              0px;
    padding-right:      0px;
    padding-left:       0px;
    
    margin-left:        0px;          
    border:   3px  seashell outset ;
    /*
      skyblue 
      silver
    */ 
}
/**********************  Button ************************/
#c_reset{
    margin-left:    50px;
}
/**********************  Radio Button ************************/

/* Formating lables and Circles use the following combination */

/* Note 34.15 right margin 
#Customer .bank_label
{  
    margin-left:       102.45px;
    margin-right:       px;
    width:  100px;
    
    border: 1px  solid  violet; 
}
/* note thers is a 34.15 margin to the left 

#Customer .paypal_label
{   
    width:  50px;  
    margin-left:       51.25px;
    margin-right:       px;
    
    border: 1px  solid  violet;
}
*/
.regular-radio {
   -webkit-appearance: none;
 
    background-color: yellow;    /*Inner circle */ 
    border: 1px solid red;       /* Outer circle */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    /* Chnages the distance btween Outer & innner circles */
    padding: 9px;
    /*     
       changes the Distance between circles         
        -ve    
       And places the circles btween labels
    it moves the left circle to the left
  
    */
    margin-right:  110px;
    margin-left:  0px;
    /*Alters the shape of circle to square */
    border-radius: 9px;
    display: inline-block;
    position: relative;
}
/* Alters the inner circle */
.regular-radio:checked:after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: 4px;
    background: red; /* Inner circle */
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow: 0px;
    left: 4px;
    font-size: 16px;
       
}
/*******************   Yes No Radio ********************/

.yesNo-radio {
    -webkit-appearance: none;
    /*
       background-color: #fafaf;  
    border: 1px solid #cacece;
    */
    background-color: yellow;    /*Inner circle */ 
    border: 1px solid red;       /* Outer circle */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 
              inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    /* Chnages the distance btween Outer & innner circles */
    padding: 9px;
    /*     
       changes the Distance between circles         
        -ve    
       And places the circles btween labels
    it moves the left circle to the left
    +ve does not work
    */
    margin-right: 0px;
    
    border-radius: 9px;
    display: inline-block;
    position: relative;
}
 
.yesNo-radio:checked:after {
 
     content: '';
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: 4px;
    background: red; /* Inner circle */
    box-shadow: inset 0px  0px  0px   0px           #ea982e;
    /*                x     y   Blur  Spread Value   Color */
    text-shadow: 0px;
    left: 4px;
    font-size: 16px;   
}
 
.yesNo-radio:checked {
/*
  background-color: #e9ecee;
    color: #99a1a7;
    border: 1px solid #adb8c0;
*/
    background-color: yellow;  /* Outer circle */
    color:  #99a1a7;
    border: 1px solid red;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
 
.yesNo-radio:active, .yesNo-radio:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
 
 
.big-radio {
    padding: 16px;
}
 
.big-radio:checked:after {
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
}
#yesNo_radio 
{
    width:  20px;
    margin-left: -20px;   
}