/* Begin CSS Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }  
table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; outline: 0; font-size: 100%; vertical-align: top; } 

/* the following is to override the ajax which seems to disable the strong tags*/
strong { font-weight: bold; }

/* the following is to override the ajax which seems to disable the strong tags*/
em { font-style:oblique; }

table th {font-weight:normal;text-align:left; font-size:8pt; padding: 3px 8px;}

html { overflow-y: scroll; }

a { color: #152963; }

* { margin: 0; padding: 0; font-family: Tahoma, Verdana; } 

body  {  -webkit-text-size-adjust: none; background-color: #E9EBEF; text-align: center; font-size:9pt;}

#wrapper { margin: 0 auto; overflow:hidden; }

#bluebg { width:90%; max-width:1000px; margin: 0 auto; background-color: #0F1E48; }

#header { position: relative; margin: 0 auto; padding: 0; width: 100%; height: 104px; }
 
#navbar { height: 23px; width: 100%; background-color: #B28600; }
#navbarshadow { width: 100%; height: 20px; background-image: url(../img/dropshadow.gif); background-repeat: repeat-x; }

#headerwrapper { padding: 0; margin: 0 auto; display:relative; width:100%; z-index: 99; position: absolute; top: 0; left: 0;  }
#innerheader { padding: 0 5px; margin:0 auto; width:95%; height: 104px; max-width:990px; background-image: url(../img/teamsters_logo.png); background-repeat: no-repeat; }

.gold { color:#FFFFFF; line-height: 23px; vertical-align: middle;}
.gold a {color:#FFFFFF; font-size:10pt; font-weight:bold; text-decoration:none; }

#content { padding: 5px 0; margin: 5px auto; float:left; display:relative; width:100%; }

#inner { padding: 5px 5px; margin:0 auto; background-color:#FFFFFF; width:95%; max-width:990px; }

#title { margin: 0px auto; overflow: hidden; background-color: #B28600; color:#FFFFFF; font-weight: bold; padding: 2px 5px; font-size:10pt; width:95%; max-width:990px; }

.paybutton { text-align:left;}

#btnGreen{
  background-color:#28bd4f;
  border-color: #28bd4f;
  color:#ffffff;
  /* width:70%; */
  padding:5px;
  margin:10px;
  font-weight:600;
}

#btnYellow{
  background-color:#e3c530;
  border-color:#e3c530;
  color:#ffffff;
  /* width:70%; */
  padding:5px;
  margin:10px;
  font-weight:600;
}

#btnRed{
  background-color:#B73033;
  border-color:#B73033;
  color:#ffffff;
  /* width:70%; */
  padding:5px;
  margin:10px;
  font-weight:600;
}

#readyGreen{
  background-color:#28bd4f;
  border-color: #28bd4f;
  width:10px !important;
  height:10px !important; 
}

#readyYellow{
  background-color:#e3c530;
  border-color:#e3c530;
  width:10px !important;
  height:10px !important;
}

#readyRed{
  background-color:#B73033;
  border-color: #B73033;
  width:10px !important;
  height:10px !important;
}

#readyBlack{
  background-color:#000;
  border-color: #000;
  width:10px !important;
  height:10px !important;
}

.greyButton { color:#FFFFFF; padding:2px 5px; font-weight:bold; border: 1px solid #7B839B;  /* KS 5/28/2015 - was 2 5 0 5 --changed to match redbutton*/
  /* fallback */
  background-color:#7B839B;
  background: url(../img/grey_gradient.gif) repeat-x; 

 /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B3B8C6), to(#7B839B));
   background-color:#7B839B;
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #B3B8C6, #7B839B); 
   background-color:#7B839B;   
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B; 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B;
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B;   
} 

.LogoutButton { color:#FFFFFF; height: 23px; width: 100px; font-weight:bold; border: 1px solid #7B839B; 
  /* fallback */
  background-color:#7B839B;
  background: url(../img/grey_gradient.gif) repeat-x; 
 /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B3B8C6), to(#7B839B));
   background-color:#7B839B;
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #B3B8C6, #7B839B); 
   background-color:#7B839B;   
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B; 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B;
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #B3B8C6, #7B839B);
   background-color:#7B839B;   
} 

.redButton { color:#FFFFFF; padding:2px 5px; font-weight:bold; border: 1px solid #B73033; margin:0;
  /* fallback */
  background-color:#B73033;
  background: url(../img/red_gradient.gif) repeat-x; 
 /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C96063), to(#B73033));
   background-color:#B73033;
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #C96063, #B73033); 
   background-color:#B73033;
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #C96063 , #B73033);
   background-color:#B73033; 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #C96063 , #B73033);
   background-color:#B73033;
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #C96063 , #B73033);
   background-color:#B73033;   
} 

/* list/input tables */
table.header {margin:auto; width:100%; font-size:10pt;}
 table.header td {color:#C6C3C6; font-size:10pt; padding:0 5px; text-align:left;}
  table.header a {color:#FFFFFF; font-weight:bold;}

table.input {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; width: 100%; border-width: 1px; border-style: solid; border-color: #9C9A7A; color: #4D4D4D;}
table.outer {width:100%; font-family: Tahoma, Verdana,  sans-serif; padding:0;}
table.outer td {padding:1px 3px;}
table.input tr {vertical-align:text-bottom;}
table.outer tr {vertical-align:top;}
table.input td {padding:3px 8px;}
.zebra { background-color: #EBEBE5; }

/* used in iu_profile - picked label width */
div.input {text-align:left; margin: 5px 5px; font-family: Tahoma, Verdana,  sans-serif;  border-width: 1px; border-style: solid; border-color: #9C9A7A;  font-size:10pt; color: #4D4D4D;}
div.inputline {padding:5px 3px;}
label {width:125px; font-weight:bold; padding:3px; display: inline-block;}
widelabel {width:300px; font-weight:bold; padding:3px; display: inline-block;}

input, select, textarea, option {font-family: Tahoma, Verdana, sans-serif; padding-left:3px; color:#4D4D4D; border:1px; border-style:solid; border-color:#9C9A7A; font-size:10pt;} 
input.shortfield {width:15%;}
*:focus {background-color: #E9EBEF;} 
/*input[type=text] {width:100%;}*/

/* skip row for vertical padding */
.skip {padding:0px; font-size:2px;}

.section { padding:5px;font-weight:normal; font-size:10pt; color: #152963; 
  background-color:#EBEBE5;
  background: url(../img/beige_gradient.gif) repeat-x; 
 /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3E9 ), to(#E1E1D7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #F3F3E9 , #E1E1D7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #F3F3E9  , #E1E1D7);
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #F3F3E9  , #E1E1D7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #F3F3E9  , #E1E1D7);
} 
.section a {font-weight:normal; color:#B73033; text-decoration:underline; font-size:80%; text-transform:uppercase;}


.tabsection {font-weight:normal; font-size:8pt; color: #4D4D4D; 
  background-color:#EBEBE5;
  background: url(../img/beige_gradient.gif) repeat-x; 
 /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3E9 ), to(#E1E1D7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #F3F3E9 , #E1E1D7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #F3F3E9  , #E1E1D7);
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #F3F3E9  , #E1E1D7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #F3F3E9  , #E1E1D7);
} 

table.sOuter {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; width: 100%; background:#FFFFFF;  border: 1px solid #9C9A7A; color:#4D4D4D;}
table.list {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; width: 100%;  border: 1px solid #9C9A7A; color: #4D4D4D;}
table.list tr {vertical-align:top;}
table.list th { font-weight: normal; font-size:8pt; color: #4D4D4D;  text-align: left; padding: 3px 8px; vertical-align:top;}
table.list th a { font-weight: normal; font-size:8pt; color: #4D4D4D; border: 0px; text-decoration:none; }
table.list select {font-family: Tahoma, Verdana, sans-serif; font-size:9pt; padding-left:3px;} 
table.list td {padding:3px 4px; }  /* KS 8/27/2014 - changed from 8px to 4px -not sure why it was 8 3/4 is same as titles class */
table.print {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; width: 100%;  color:#4D4D4D;}
/* KS 8/6/13 - reminder do not add a table.list a -it will override .section a - use bluelink */
/*
 table.menu {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; float:left; font-size:8pt; border: 1px solid #C7C9D0; padding-bottom:10px; width:100%;}
 table.menu a {text-decoration:none; color:#4D4D4D;}
 table.menu td {padding:5px;}
*/

table.ratio {margin: 5px auto; font-family: Tahoma, Verdana,  sans-serif; width: 100%;  border: 1px solid #9C9A7A; color:#4D4D4D;}
table.ratio th {text-align:right; padding:5px 2px; background-color: #9C9A7A; color:#FFFFFF; font-weight:bold;}
.tdratio {padding:4px; border:1px solid #9C9A7A;}

/* used in industry report only */
.total {border-bottom:1px solid #9C9A7A; border-right:1px solid #9C9A7A; text-align:right; padding:4px;}
.industry {padding:4px; border-width:0px 0px 1px 0px; border-style:solid; border-color: #9C9A7A;}
.company {border-top:1px solid #9C9A7A; border-bottom:1px solid #9C9A7A; padding:4px;}
/* {border-width:1px 0px 1px 0px; border-style:solid; border-color: #9C9A7A;} */
.worktype {border-bottom:1px solid #9C9A7A; padding:4px; text-align:right;}
.rptHeader {font-size:12pt; color:#4D4D4D; text-align:left; font-weight:bold;}

/* .listHeader {background-color:#9C9A7A; color:#FFFFFF; font-weight:bold;} */

.menu {float:left; width:31%; margin:1%; font-family: Tahoma, Verdana,  sans-serif; float:left; font-size:8pt; border: 1px solid #9C9A7A; padding-bottom:10px; background-color:#FFFFFF;}
li {padding:5px 10px;list-style-type: none; text-align:left;}
li a {text-decoration:none; color:#4D4D4D;}

/*added by GR to make form mobile friendly*/
.form {float:left; width:100%; margin:0px 0px; font-family: Tahoma, Verdana,  sans-serif; float:left; font-size:8pt; border: 1px solid #9C9A7A; padding-bottom:10px; background-color:#FFFFFF;}
.formlabel{padding:3px 8px;}
.formelement{padding:3px 8px;}

tr.greyrow {background: #F3F3E9;} /* Used for From/To adress boxes */


.grey1 { background: none repeat scroll 0 0 #F3F3E9;vertical-align:text-top;}
.grey0 { background: #FFFFFF;vertical-align:text-top;}

.greyPrint1 { background: none repeat scroll 0 0 #ededed;vertical-align:text-top;}
.greyPrint0 { background: #FFFFFF;vertical-align:text-top;}

/* JO safe 
  .hrclass {color:#9C9A7A; background-color:#9C9A7A; height:1px; border:1px dotted #9C9A7A;  margin: 1px 0;  }
*/

.hrclass {
    border:1px dotted #7B839B;
    border-style:none none dotted none;
    color:#FFF;
    background:#FFF;
    margin:5px 0;
} 

.blue { color:#152963; font-size:10pt; font-weight:normal;}
.grey { color:#4D4D4D; font-size:10pt; font-weight:normal;}
.ltgrey { color:#B3B8C6; font-size:10pt; font-weight:normal;}
.red { color:#B73033; font-size:9pt; font-weight:normal;}
.redsmall { color:#B73033; font-size:8pt; font-weight:normal;}
.redlink {font-weight:normal; color:#B73033; text-decoration:underline; font-size:9pt;}
.bluelink { color: #152963; font-weight:bold;}  /* blue link -used in list table */
.white {color:#FFFFFF; font-size:10pt; font-weight:normal;}
.instruct {font-size:7pt; font-style:italic;}
.avail {font-size:7pt; color:#4D4D4D;} /* used on iu_availability page - resizes depending on browser*/
.email {color:#0033CC;}
.green {color:#396939;}  /* used on ol_clearwork.cfm */

/* title is blue on gradient -outside of table border - input table has title with gradient inside table border*/
.title {background: url(../img/beige_gradient.gif) repeat-x; text-align:left; font-weight:bold; color:#152963;}
table.list .titles { font-size:8pt; color: #4D4D4D;  background-color:#FFFFFF; text-align: left; padding: 3px 4px; vertical-align:baseline;}  /* KS 10/31/2013 - changed padding from 3px 8px to 3px 4px (4px matches tablesorter) */
table.print .titles { font-size:8pt; color: #4D4D4D;  background-color:#FFFFFF; text-align: left; padding: 3px; vertical-align:baseline;}
/* Each table needs a specific class to override the padding on td (on the input page, top/bottom padding is 1px */

/* table.list .section { background: url(../img/gradient.gif) repeat-x; font-weight:bold; padding:5px; font-size:10pt; color: #105173;} */
/* used in iu_bol_status for calculated fields */
.noinput {border:none; text-align:right; color:#4D4D4D; font-weight:bold; font-size:8pt; background-color: transparent;}
.notmobile {text-align:center;}
.showMobile { display: inline-block; float:left; text-align:center; font-weight:bold; word-wrap:break-word; }

/* administrator labor availability view */
table.men {margin: 0px auto; font-family: Tahoma, Verdana,  sans-serif; padding:0; width:100%; font-family: Tahoma, Verdana, sans-serif; font-size:9pt; background-color:#E2E4EA; color: #4D4D4D;}
table.men td {padding:3px 0 3px 1px; border-bottom: 1px solid #9C9A7A; }
table.men a {color:#4D4D4D;}
.listmen {background-color:#7B839B; color:#FFFFFF; font-weight: bold;}

/* KS 10/28/2013 - added to make availability & work history tabs have the correct border color */
.x-tabs-wrap {border-color:#9C9A7A; }
.x-tabs-body {border-color:#9C9A7A;}

/* Reminder - media queries should address screen sizes from largest to smallest 
    Added min width 501 above min width 800 because over 500 was overriding over 800
*/

  #col1, #col2, #col3, #col4 {
    margin:5px 3px;
    display:block;
    width:100%;
    padding:5px;  
  }

@media print 
  { 
    .hrclass {color:#7B839B; background-color:#7B839B; height:1px; border-top:1px dotted #7B839B;  margin: 1px 0;  }
  }
 @media all and (min-width:800px){
        /* styles for browsers larger than 800px; */
  input[type=text] {width:70%;}
  input.shortfield {width:15%;}
  select {width:50%;}
  textarea {width:50%;}
  #col1, #col2, #col3, #col4 {
    margin:5px 3px;
    display:block;
    width:100%;
    padding:5px;    
  }
  #leftCol {
    display:block;
    float:left;
    width:55%;
    margin:5px; 0px;
  }
  #rightCol {
    display:block;
    float:right;
    width:40%;
    margin:5px; 0px;
  }


 } /* min-width 800 */  

/* tablet size */
 @media all and (max-width:500px) {  
 #leftCol {
    display:block;
    float:left;
    width:55%;
    
  }
  #rightCol {
    display:block;
    float:right;
    width:40%;
    
  }

  body { background-color: #0F1E48; }

  #bluebg { width:100%;}
  #header { height: 57px; }
  #innerheader { background-image: url(../img/teamsters_mobile_logo.png); background-size: 58px 57px; background-repeat: no-repeat; height: 57xpx; width: auto; padding:0; }
  input[type=text] {width:50%;} 
  textarea {width:50%;}
  .notmobile {display:none;}
  #col1, #col2 {
    margin:1px 3px;
  }
  #col3, #col4 {
    margin:10px 3px;
  }    
#leftCol {
    display:block;
    float:left;
    width:100%;
}

#rightCol {
    display:block;
    float:left;
    width:100%;
}

#readyMsg{
  text-align: center !important;
}

/* KS 7/31/2015 - if on a tablet - hide the member info */
.hideRow {display:none;}
.paybutton { text-align:right;}


} /* tablet */

/* iphone size */
@media all and (max-width:320px) {
  body { background-color: #0F1E48; }
  #bluebg { width:100%;}
  table.input td {padding:2px;}
  .menu {float:none; min-width:250px;}
  #wrapper {max-width:320px;}
  .greyButton {padding:2px 2px; }
  .redButton {padding:2px 2px; }
  table.list td {padding:10px 1px;}
  input[type=text] {width:90%;}  /* iu_profile page - makes input fields drop below labels */
  .avail {font-size:5pt;}
  textarea {width:50%;}
  .notmobile {display:none;}
  #username {display:none;}
  #col1, #col2 {
    margin:1px 3px;
  }
  #col3, #col4 {
    margin:10px 3px;
  }    
  #rightCol {
    display:block;
    float:left;
    width:100%;
}
#leftCol {
    display:block;
    float:left;
    width:100%;
}

#btnGreen{
  width:80%;
  margin-bottom:10px;
}

#btnYellow{
  width:80%;
  margin-bottom:10px;
}

#btnRed{
  width:80%;
  padding-bottom:10px;
}



/* KS 7/31/2015 - if on a phone - hide the member info */
.hideRow {display:none;}
.paybutton { text-align:right;}

 } /* @media 320 */

/* needed for footable pagination */
.pagination ul > li {
    display: inline;
}

.pagination-centered {
    text-align: center;