@CHARSET "ISO-8859-1";
/*
 * HOME PAGE CSS
 *
*/
.clearThis {
   clear: both;
}
#contact_page_main_header {
    text-align: center;
    font-size: 40px;
    font-style: italic;
}
#contact_main_buttons_container {
	margin-left: auto;
	margin-right: auto;
//	background-color: green;
	
	//white-space: nowrap;
	//display: inline-block;
	//text-align: center;
	//float: left;
	//word-wrap: break-word;
	
	//width: 80%;
	
}
.contact_action_button {
	//float: left;
	font-size: 20px;
}
.contact_buttons_form {
	
  // margin-right: 5px;
  //display: inline;
  
  // float: left;
   text-align: center;
//   background-color: yellow;
  // width: 25%
}
#list_of_contacts_container {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	background-color: wheat;
	list-style-type: none;
}
.displayContactColorToggleOn {
	//background-color: #dddddd;
	background-color: #ff9999;
	background-color: #ffcc66;
}
#displayListHeader {
	text-align: center;
}
.displayListUnorderedList li{
	list-style-type: none;
	display: block;
	//float: left;
}
.displayContactCellHeader {
width: 15%;
text-align: left;
//margin-right: 20px;
float: left;
display: block;	
font-weight: bold;
word-wrap: break-word;	
}
.displayContactCellHeaderAddress {
width: 25%;
text-align: left;
//margin-right: 20px;
float: left;
display: block;	
font-weight: bold;
word-wrap: break-word;	
}
.displayContactCellHeaderEmail {
width: 25%;
text-align: left;
//margin-right: 20px;
float: left;
display: block;		
font-weight: bold;
word-wrap: break-word;
}
.displayContactCell {
//width: 15%;	
text-align: left;
//margin-right: 20px;
//float: left;
//display: block;
word-wrap: break-word;	
}
.displayContactCellEmail {
width: 25%;	
text-align: left;
//margin-left: 20px;
float: left;
display: block;	
word-wrap: break-word;
}
.displayContactCellAddress {
//margin-left: 15px;
//width: 25%;
//text-align: left;
//margin-right: 20px;
//float: left;
//display: block;

}

/* contact register page */
#contact_general_information {
   display: block;
   float: right; 
   text-align: left;
   width: 20%;
   /*background-color: green;*/
}
#contact_entry_form_container {
   margin-left: auto;
   margin-right: auto;
   background-color: green;
   width: 100%; /* be sure to keep under 70%, otherwise stacking occurs
                  when you expand browser to the right*/
}
#contact_entry_form {
   display: inline-block;
   float: left;
   width: 60%; /* be sure to keep under 70%, otherwise stacking occurs
                  when you expand browser to the right*/
   margin-left: 10%;
  
}
.contact_entry_label {

   text-align: left;
   display: block;
   float: left;
   width: 130px;
   border: none;
   label:after { color: red; content: '* '; display:inline};
}
.contact_entry_input {

   border-style: ridge;
   border-width: 2px;
   border-color: LightPink;

   display: block; 
   float: left;
   text-align: left;
  // width: 160px;
   width: 180px;
}
 
.contact_entry_input_select { /* for birthday, country,etc */

   /* I commented out borders here, because  they get their own borders here
   border-style: ridge;
   border-width: 2px;
   border-color: LightPink;
   */

   display: block; 
   float: left;
   text-align: left;
   width: 180px;
}


#country {
   border-style: ridge;
   border-width: 2px;
   border-color: LightPink;
  //display: block; 
  //float: left;
 // width: 160px;
 // text-align: left;
}
.contact_entry_error {
   border: none;
   margin-left: 5px;
   display: block; 
   float: left;
   width: 20%; 
   color: red;
}

.contact_entry_error_server {
  // border-style:solid;
   //border-width:2px;
   //border-color: maroon;
   border: none;
   margin-left: 10px;
   float: left;
  // width: 20%;
   color: Maroon; 
}
.contact_entry_create_button {
   float: left;
   margin-left: 20%;

}


/* CONTACT REGISTRATION COMPLETE */
.contact_registration_complete {
margin-left: 10%;
margin-right: 10%;
margin-bottom: 30px;
text-align: left;

}


.col-xs-5ths {
    width: 20%;
    float: left;
    display: inline-block;
}
@media (min-width: 768px) {
.col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}