/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 5px 0px 20px 0px;
  box-sizing: border-box; 
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }
 /* For devices smaller than 420px */
 @media (max-width: 420px) {
  
  .container {
    width: 95%;
    padding: 0; }
}
 /* For devices smaller than 550px */
 @media (max-width: 550px) {
  
  .container {
    width: 95%;
    padding: 2px; }
}
/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 90%;
    }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 90%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; 
  height:100%;
  }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #252525; 
  position: relative; 
  min-height: 100%;
  background:#FCFCFC;   }
/* mobile*/
@media (max-width: 420px) 
{
    h1, h2, h3, h4, h5, h6 
    {
        font-size:90%;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300; }
    
body {
  font-size: 1.2em; 
  line-height: 1.2;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #252525; 
  position: relative; 
  min-height: 100%;
  background:#FCFCFC;   }
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.8rem; line-height: 1;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #22528c; }
a:hover {
  color: #22528c; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
   }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #a0265c;
  border-color: #a0265c; 
  }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #771c44;
  border-color: #771c44; }
  /* for search button and possibly others to differentiate */
.button.button-green,
button.button-green,
input[type="submit"].button-green,
input[type="reset"].button-green,
input[type="button"].button-green {
  color: #FFF;
  background-color: #5EA127;
  border-color: #5EA127; }
.button.button-green:hover,
button.button-green:hover,
input[type="submit"].button-green:hover,
input[type="reset"].button-green:hover,
input[type="button"].button-green:hover,
.button.button-green:focus,
button.button-green:focus,
input[type="submit"].button-green:focus,
input[type="reset"].button-green:focus,
input[type="button"].button-green:focus {
  color: #FFF;
  background-color: #46781D ;
  border-color: #46781D; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1.5px solid #bebcbc;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
  .Required input[type="email"],
  .Required input[type="number"],
  .Required input[type="search"],
  .Required input[type="text"],
  .Required input[type="tel"],
  .Required input[type="url"],
  .Required input[type="password"],
  .Required textarea,
  .Required select {
  background-color: #fff;
  border: 1.5px solid #CC0000;
  }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
   display: inline;
      /*margin-left: .2rem;*/
  font-weight:bold; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right:.9rem;
  transform: scale(1.3);

   }
label > .label-body {
  display: inline-block;
  /*margin-left: .9rem;*/
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: inside;
  margin-left:15px;
  }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gridview table
{
    border: 1px solid #D1D1D1;
    overflow: auto;
    line-height: 1em;
    width: 100%;
    padding-right: 10px;
    background-color:#FFF;
}
@media (max-width: 420px) {
    .gridview table
    {
    border: 0;
    overflow: auto;
    line-height: 3em;
    width: 98%;
    background-color:#FFF;
    font-size:110%;
    }
 .gridview tr:first-child th {
     line-height:1em;
    font-size:85%;
    font-weight: bold !important;
    background: #F7F7F7 !important;
}
    .gridview table tr{
        border-bottom:1px solid #dbdbdb;
    background-color:#e4e4e4;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+95,ffffff+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 95%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 95%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 95%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
}

table
{
    overflow: auto;
    width: 100%;
    padding-right: 10px;
}
th, td
{
    padding: 12px 15px;
    text-align: left;
}
tr th
{
    border: 0;
    font-weight: normal;
}
tr td
{
    border: 0;
}
tr:first-child th
{
    padding: 5px 15px;
    font-weight: bold !important;
    background: #EEECEB !important;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
 @media (max-width: 420px) {
    /* For mobile phones: */
   /*.u-pull-right {
  float: left; }*/
}
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* Act168 Public styles */

.center
{
    text-align:center;
}
/* toggle 'pursuant to ' on access code and instructions page to match paper form */
.subtitle:before {
    content:'under ';
}
.bold
{
    font-weight:bold;
}
.underline
{
    text-decoration:underline;
}
.hidden
{
    display:none;
}
.attention
{
    color:red;
    font-weight:bold;
    width:80%;
    font-size:85%;
    margin:0 auto;
    padding:10px 0px;
}
/* for required form fields */
.required:after
{
    content:" *";
    color:#d80000;
    font-weight:bold;
    font-size:150%;
    line-height:1rem;
}
.header
{
    background:#275EA1;
    color:#ffffff;
    padding:1%;
}
@media (max-width: 550px) {
    /* For mobile phones: */
  .header {
        font-size:85%;
        padding:2px 0px;
        margin:0;
    }
}
.main
{
    margin-top:1%;
}
/* used on access code page to center intro paragraph since for readability, also used on employer vetting questions */
.center-content
{
    width:60%;
    margin:0 auto;

}
@media (max-width: 768px) {
    /* For mobile phones: */
  .center-content {
        width: 100%;
    }
}
/* reduce padding in radio button list table column */
.applicant-questions td ,.employer-questions td  {
    padding: 1px !important;
}
.employer-entry, .applicant-questions ,.employer-questions,.emp-questions-box  {
    border:1px solid #CCC;
    padding:2%;
    border-radius:4px;
}
/* line up radio button list to applicant question */
table.radio-button-list {
	margin-top:2rem;
	margin-left:2rem;
}
.explanation-text
{
    background-color:#EEECEB;
    padding:.4rem;
}
/*.sections
{
    color:#275EA1;
    font-size:120%;
}*/

.no-applicable-emp
{
    margin-top:.5em;
}
.validation
{
    font-size:80%;
}
.validation-summary
{
    font-weight:bold;
    font-size:90%;
    background:#fdfdaf;
}
.validation-summary ul
{
  margin-top:5px;
  font-weight:normal;
      line-height:1em;
      list-style:none;
       margin-left:20px !important;
}
#BodyContent_pnlApplicant
{
    overflow:hidden !important;
}
#BodyContent_pnlEmployer
{
    overflow:hidden !important;
}
#BodyContent_chkNoApplicableEmployment
{
    	margin-left:.6%;
}
#BodyContent_chkEmployerQuestion4{
	margin-left:.6%;
	margin-right:.5rem;
	margin-bottom:-.2rem;
}
span.expand-collapse > .button,
button,
input[type="button"] {
  background-color :#275EA1;
  color:#FFF;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  border:0;
   }

span.message-to-applicant, span.message-to-employer
{
  display:inline-block;
  background:#fdfdaf;
  margin-bottom:2%;
  color:#252525;
  padding:1%;
}
.popup-control 
{
    position:absolute;
	width:300px;
	background:#F8F8F8;
	font-size:85%;	
	padding:10px 10px 10px 15px;
	border:1px solid #CCC !important;
	border-radius:6px;
	margin-left:-180px;
	margin-top:50px;
}
.close-popup-x img
{
    position:absolute;
    top:5px !important;
    right:5px;
}
.cursor-hand
{
    cursor:pointer;
}
input[type="radio"]{
	margin-bottom:0;
}
/*modal popups*/
.modal-dialog-links .button:hover
{
    font-weight:normal;
}
.modalBackground
{
    background:#124465;
    filter: alpha(opacity=50);
    opacity:0.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.modalPopup
{
    width:500px;
	position:relative;
	margin:0 auto;
	background:#FFF;
	border-radius:6px;
}
.modal-header
{
    background:#124465;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.modal-header h5
{
    color:#FFF;
    padding:3px 0px 3px;
    font-size:2rem;
    margin-bottom:0;
    text-align:center;
}
.modal-header .modal-close{
	border:0;
	padding:5px;
	position:absolute;
	top:6px;
	right:6px;
	z-index:1000;
	margin-bottom:0;
	margin-top:0;
	line-height:13px;
	height:20px;
	vertical-align:middle;
	background: #1e70a6;
}
.modalPopup-inner
{
    border:1px solid #C6C0BC;
    border-top:0;
    padding:20px;
}
.modalPopup-inner .button
{
    background:#70a61e;
    text-align:center !important;
}
/*EmployerSearchPage*/
.increase-font{
    font-size:120%;
}
.gridview{
    padding:10px 0px;
}
.nav-buttons{
    padding:20px 0px;
}
/*radio inputs on employer vetting questions*/
#BodyContent_pnlEmployerQuestionsInner td {
    padding:3px 0px !important;
}
::-webkit-input-placeholder {
   color:#BDBDBD;
}

:-moz-placeholder { /* Firefox 18- */
   color:#BDBDBD;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#BDBDBD;  
}

:-ms-input-placeholder {  
   color:#BDBDBD;  
}
/*Applicant page - fix alignment of SS# on lower resolutions due to long text in label*/
@media (max-width:1113px){
    #BodyContent_lblLastFourSSN, #BodyContent_lblApplicantFirstName, #BodyContent_lblApplicantMiddleName, #BodyContent_lblApplicantLastName,#BodyContent_lblDOB,                  #BodyContent_lblPPID{
        font-size:75%;
    }    
}
@media (max-width:850px){
    #BodyContent_lblLastFourSSN{
        font-size:70%;
    }    
}
/*Session timeout popup*/
.new-dialog-bg{
    position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#CCC;
	opacity:.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter:alpha(opacity=50);
	z-index:100;
}
.ui-dialog {
	overflow: hidden;
	position: fixed;
	top:50%;
	left:50%;
	outline: 0;
    border:2px solid #275EA1;
    background:#FFFFFF !important;
    border-radius:4px;
    z-index:200;
}
.ui-dialog .ui-dialog-titlebar {
	position: relative;
	background-color:#275EA1 !important;
	height:27px;
}
.ui-dialog .ui-dialog-titlebar button {
    background:transparent;
    color:#FFF;
    border:0;
    font-weight:bold;
}
.ui-dialog .ui-dialog-title {
    color:#FFF;
    height:27px;
	float: left;
	width:100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align:center;
	font-weight:bold;
	vertical-align:middle;
}
/* hide the close button - since it's not needed.*/
.no-close .ui-dialog-titlebar-close {
  display: none;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding-top: 3px;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-content p {
    position:relative !important;
    width:280px !important;
    line-height:1.6em;
    text-align:center;
    margin: 0 auto;
}
.ui-dialog .ui-dialog-content p:last-child {
    margin-top:15px;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align:center !important;
	border-width: 0 0 0 0;
	background-image: none;
	margin-top:20px;
}
.ui-dialog .ui-dialog-buttonpane button {
	color: #FFF;
    background-color: #5EA127;
    border-color: #5EA127; 
}
.ui-dialog .ui-dialog-buttonpane button:hover {
	color: #FFF;
    background-color: #5EA127;
    border-color: #5EA127; 
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
    text-align:center !important;
}