/*
Registration/Login Form by html-form-guide.com
You can customize all the aspects of the form in this style sheet
*/

/* From main page */

#sampling fieldset
{
   width:430px;
   padding:20px 20px 20px 20px;
   border:1px solid #ccc;
   margin:20pt auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
}


#sampling fieldset.menu1
{
   width:430px;
   line-height:18px;
}


#sampling.groups fieldset
{
   width:430px;
}


#sampling.menu1 fieldset
{
   width:430px;
}


#sampling legend, #sampling h2
{
   font-family : Arial, sans-serif;
   font-size:1.3em;
   font-weight:bold;
   color:#333;
   text-align:center;
}

#sampling legend-adm, #sampling h2
{
   font-family : Arial, sans-serif;
   font-size:1.3em;
   font-weight:bold;
   padding-left: 15px;
   padding-right: 15px;
   color:#f00;
   background-color:#ddd;
   text-align:center;
}


#sampling label
{
   font-family : Arial, sans-serif;
   font-size:0.8em;
   font-weight:bold;
}

#sampling menu_item
{
   font-family : Arial, sans-serif;
   font-size:1.2em;
   font-weight:bold;
   padding-left: 40px;
}

#sampling input[type="text"], #sampling input[type="radio"], #sampling textarea,
#sampling input[type="password"]
{
  font-family : Arial, Verdana, sans-serif;
  font-size: 0.9em;
  line-height:140%;
  color : #000; 
  padding : 3px; 
  border : 1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

}

#sampling input[type="text"],
#sampling input[type="password"]
{
  height:18px;
  width:220px;
}

#sampling question, #sampling h2
{
   font-family : Arial, sans-serif;
   font-size:1.3em;
   font-weight:bold;
   color:#333;
   text-align:center;
}


 #sampling #scaptcha
{
  width:60px;
  height:18px;
}

#sampling input[type="submit"]
{
   width:100px;
   height:30px;
   padding-left:0px;
}

#sampling input[type=submit]:hover {
  background-color: #D6D6D6;
}

#sampling input[type="delete"]
{
   width:100px;
   height:30px;
   padding-left:0px;
}

#sampling input[type=delete]:hover {
  background-color: #C9420C;
}

#sampling textarea
{
  height:120px;
  width:425px;
}

#sampling input[type="text"]:focus,
#sampling textarea:focus
{
  color : #009;
  border : 1px solid #990000;
  background-color : #ffff99;
  font-weight:bold;
}

#sampling .container
{
   margin-top:8px;
   margin-bottom: 10px;
}


#sampling .submit_button
{
   margin-top:30px;
   margin-bottom: 10px;
}

#sampling .questionnaire_button
{
  display: inline;
  margin: auto;
  width: 30%;
//  border: 3px solid #73AD21;
  padding: 10px;
}

#sampling .error
{
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.8em;
   color: #900;
   background-color : #ffff00;
}

#sampling .warning
{
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.8em;
   color: navy;
   background-color : #ffff00;
}

#sampling .message
{
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.9em;
   color: blue;

}

#sampling .top_note
{
   // font-family: Verdana, Arial, sans-serif; 
   font-size: 1.0em;
//   font-weight:bold;
//   color: blue;

}

#sampling .center_note
{
   // font-family: Verdana, Arial, sans-serif; 
   font-size: 1.1em;
   text-align: center;
   font-weight:bold;
//   color: blue;

}

#sampling #sampling_password_errorloc
{
    clear:both;
}

#sampling  fieldset#antispam
{
   padding:2px;
   border-top:1px solid #EEE;
   border-left:0;
   border-right:0;
   border-bottom:0;
   width:350px;
}

#sampling fieldset#antispam legend
{
   font-family : Arial, sans-serif;
   font-size: 0.8em;
   font-weight:bold;
   color:#333;   
}

#sampling .short_explanation
{
   font-family : Arial, sans-serif;
   font-size: 0.8em;
   color:#333;   
}

#sampling .groups_header
{
   font-family : Arial, sans-serif;
   font-size: 0.95em;
   font-weight:bold;
   color:navy;   
}

#sampling .sampling
{
   font-family : Arial, sans-serif;
   font-size: 0.8em;
   color:#333;   
}

#sampling .manage_groups
{
   font-family : Arial, sans-serif;
   font-size: 0.8em;
   color:#333;   
}

/* spam_trap: This input is hidden. This field is here to trick the spam bots*/
#sampling .spmhidip
{
   display:none;
   width:10px;
   height:3px;
}
#sampling #sampling_crdiv
{
   font-family : Arial, sans-serif;
   font-size: 0.3em;
   opacity: .2;
   -moz-opacity: .2;
   filter: alpha(opacity=20);   
}
#sampling  #sampling_crdiv p
{
    display:none;
}

#sampling_content li
{
font-family : Arial, sans-serif;
padding-top:10px;
padding-bottom:10px;
text-align: center;
}
#sampling_content
{
    font-family : Arial, sans-serif;
    font-size: 0.9em;
    line-height: 150%
}

#sampling_content h1
{
   font-family : Arial, sans-serif;
   font-size: 1.2em;
   font-weight:normal;
   color:#333;
   text-align: center;
}

#sampling_content h2
{
   font-family : Arial, sans-serif;
   font-size: 1.5em;
   font-weight:bold;
   color:#333;
}

#sampling_content h3
{
   font-family : Arial, sans-serif;
   font-size: 1.35em;
   font-weight:bold;
   color:#333;
   text-align: center;
}


/*  -------------------------------------
    Styling for Default Table
    -------------------------------------  */

#DefaultTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#DefaultTable td, #Default th {
    border: 1px solid #ddd;
    text-align: center;
}

#DefaultTable tr:nth-child(even){background-color: #f2f2f2;}

#DefaultTable tr:hover {background-color: #ddd;}

#DefaultTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  -------------------------------------
    Styling for Stop_or_Go Sampling Table
    -------------------------------------  */

#StopGoTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#StopGoTable td, #StopGo th {
    border: 1px solid #ddd;
    text-align: center;
}

#StopGoTable tr:nth-child(even){background-color: #f2f2f2;}

#StopGoTable tr:hover {background-color: #ddd;}

#StopGoTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  -----------------------------------------
    Styling for Stop_or_Go Evaluation Table
    -----------------------------------------  */

#StopGoEvalTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#StopGoEvalTable td, #StopGoEval th {
    border: 1px solid #ddd;
    text-align: center;
}

#StopGoEvalTable tr:nth-child(even){background-color: #f2f2f2;}

#StopGoEvalTable tr:hover {background-color: #ddd;}

#StopGoEvalTable input[type="text"]
{
  	height:18px;
  	width:60px;
    text-align: center;

}

#StopGoEvalTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  -------------------------------------
    Styling for Random Numbers Table
    -------------------------------------  */

#RandomNumbersTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#RandomNumbersTable td, #RandomNumbers th {
    border: 1px solid #ddd;
    text-align: center;
}

#RandomNumbersTable tr:nth-child(even){background-color: #f2f2f2;}

#RandomNumbersTable tr:hover {background-color: #ddd;}

#RandomNumbersTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  -------------------------------------
    Styling for Recipient List Table
    -------------------------------------  */

#RecipientListTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
}

#RecipientListTable td, #RecipientList th {
    border: 1px solid #ddd;
    text-align: center;
}

#RecipientListTable tr:nth-child(even){background-color: #f2f2f2;}

#RecipientListTable tr:hover {background-color: #ddd;}

#RecipientListTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  -------------------------------------
    Styling for Sampling Process Table
    -------------------------------------  */

#SamplingProcessTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#SamplingProcessTable td, #SamplingProcess th {
    border: 1px solid #ddd;
/*    text-align: center;*/
}

#SamplingProcessTable tr:nth-child(even){background-color: #f2f2f2;}

#SamplingProcessTable tr:hover {background-color: #ddd;}

#SamplingProcessTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}


/*  ------------------------------------------
    Styling for Sampling MUS Sample Edit Table
    ------------------------------------------  */

#MUSEditSampleTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#MUSEditSampleTable td, #MUSEditSample th {
    border: 1px solid #ddd;
    text-align: center;
}

#MUSEditSampleTable tr:nth-child(even){background-color: #f2f2f2;}

#MUSEditSampleTable tr:hover {background-color: #ddd;}

#MUSEditSampleTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/*  ------------------------------------------
    Styling for MUS EVAL Table
    ------------------------------------------  */

#MUSEvalSampleTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
/*    margin: auto; */
}

#MUSEvalSampleTable td, #MUSEvalSample th {
    border: 1px solid #ddd;
    text-align: left;
}

#MUSEvalSampleTable tr:nth-child(even){background-color: #f2f2f2;}

#MUSEvalSampleTable tr:hover {background-color: #ddd;}

#MUSEvalSampleTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    /* padding-left: 48px; */
    text-align: center;
    background-color: #064C8A;
    color: white;
}

/* ---------------------------
   END styling for the tables 
   --------------------------- */


body
{
	line-height: 1.6em;
}

#hor-minimalist-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#hor-minimalist-a th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
	color: #009;
}


#hor-minimalist-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#hor-minimalist-b th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#hor-minimalist-b td
{
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
	color: #009;
}


#ver-minimalist
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#ver-minimalist th
{
	padding: 8px 2px;
	font-weight: normal;
	font-size: 14px;
	border-bottom: 2px solid #6678b1;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #039;
}
#ver-minimalist td
{
	padding: 12px 2px 0px 2px;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
	color: #669;
}


#box-table-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 10px;
	width: 540px;
	text-align: left;
	border-collapse: collapse;
}
#box-table-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: navy;
}
#box-table-a td
{
	padding: 8px;
	background: #e8edff; 
	border-bottom: 1px solid #fff;
	color: navy;
	border-top: 1px solid transparent;
}
#box-table-a tr:hover td
{
	background: #d0dafd;
	color: #339;
}


#box-table-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: center;
	border-collapse: collapse;
	border-top: 7px solid #9baff1;
	border-bottom: 7px solid #9baff1;
}
#box-table-b th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #e8edff;
	border-right: 1px solid #9baff1;
	border-left: 1px solid #9baff1;
	color: #039;
}
#box-table-b td
{
	padding: 8px;
	background: #e8edff; 
	border-right: 1px solid #aabcfe;
	border-left: 1px solid #aabcfe;
	color: #669;
}


#hor-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#hor-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 10px 8px;
	color: #039;
}
#hor-zebra td
{
	padding: 8px;
	color: #669;
}
#hor-zebra .odd
{
	background: #e8edff; 
}


#ver-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#ver-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #039;
}
#ver-zebra td
{
	padding: 8px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #669;
}
.vzebra-odd
{
	background: #eff2ff;
}
.vzebra-even
{
	background: #e8edff;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
{
	background: #d0dafd;
	border-bottom: 1px solid #c8d4fd;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
{
	background: #dce4ff;
	border-bottom: 1px solid #d6dfff;
}


#one-column-emphasis
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#one-column-emphasis th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	color: #039;
}
#one-column-emphasis td
{
	padding: 10px 15px;
	color: #669;
	border-top: 1px solid #e8edff;
}
.oce-first
{
	background: #d0dafd;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
	color: #339;
	background: #eff2ff;
}


#newspaper-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#newspaper-a th
{
	padding: 12px 17px 12px 17px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
	border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
	padding: 7px 17px 7px 17px;
	color: #669;
}
#newspaper-a tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#newspaper-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#newspaper-b th
{
	padding: 15px 10px 10px 10px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
}
#newspaper-b tbody
{
	background: #e8edff;
}
#newspaper-b td
{
	padding: 10px;
	color: #669;
	border-top: 1px dashed #fff;
}
#newspaper-b tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#newspaper-c
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #6cf;
}
#newspaper-c th
{
	padding: 20px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	text-transform: uppercase;
	border-right: 1px solid #0865c2;
	border-top: 1px solid #0865c2;
	border-left: 1px solid #0865c2;
	border-bottom: 1px solid #fff;
}
#newspaper-c td
{
	padding: 10px 20px;
	color: #669;
	border-right: 1px dashed #6cf;
}


#rounded-corner
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
#rounded-corner thead th.rounded-q4
{
	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
#rounded-corner th
{
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}
#rounded-corner td
{
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
	background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
	background: #d0dafd;
}


#background-image
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/blurry.jpg') 330px 59px no-repeat;
}
#background-image th
{
	padding: 12px;
	font-weight: normal;
	font-size: 14px;
	color: #339;
}
#background-image td
{
	padding: 9px 12px;
	color: #669;
	border-top: 1px solid #fff;
}
#background-image tfoot td
{
	font-size: 11px;
}
#background-image tbody td
{
	background: url('table-images/back.png');
}
* html #background-image tbody td
{
	/* 
	   ----------------------------
		PUT THIS ON IE6 ONLY STYLE 
		AS THE RULE INVALIDATES
		YOUR STYLESHEET
	   ----------------------------
	*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
	background: none;
}	
#background-image tbody tr:hover td
{
	color: #339;
	background: none;
}


#gradient-style
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#gradient-style th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe url('table-images/gradhead.png') repeat-x;
	border-top: 2px solid #d3ddff;
	border-bottom: 1px solid #fff;
	color: #039;
}
#gradient-style td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid #fff;
	background: #e8edff url('table-images/gradback.png') repeat-x;
}
#gradient-style tfoot tr td
{
	background: #e8edff;
	font-size: 12px;
	color: #99c;
}
#gradient-style tbody tr:hover td
{
	background: #d0dafd url('table-images/gradhover.png') repeat-x;
	color: #339;
}


#pattern-style-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/pattern.png');
}
#pattern-style-a thead tr
{
	background: url('table-images/pattern-head.png');
}
#pattern-style-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #039;
}
#pattern-style-a td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#pattern-style-a tbody tr:hover td
{
	color: #339;
	background: #fff;
}


#pattern-style-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	background: url('table-images/patternb.png');
}
#pattern-style-b thead tr
{
	background: url('table-images/patternb-head.png');
}
#pattern-style-b th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	border-bottom: 1px solid #fff;
	color: #039;
}
#pattern-style-b td
{
	padding: 8px; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#pattern-style-b tbody tr:hover td
{
	color: #339;
	background: #cdcdee;
}


/* ----------------- */
/*       Modal       */
/* ----------------- */

 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: grey;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 12px 16px;
    background-color: navy;
    font-size: 26px;
    font-weight: bold;
    color:whitesmoke;
    
}

.modal-body {
	padding: 2px 16px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: whitesmoke;
}


.modal-footer {
    padding: 2px 16px;
    background-color: navy;
    color: white;
}