/*  ----------------------------------------------
    core.css
    author: Regi E. (rellis@pushhere.com, Lead Dev)
    
    req/location
      styles/core.css
    ----------------------------------------------  */

/*  +TOC
    ----------------------------------------------   
    1. CORE
    2. LAYOUT
    3. MAIN NAVIGATION
    4. PAGES
    5. POSITION LISTING
    6. CITIES
    7. FOOTER
    ----------------------------------------------  */
    
    
/*  =CORE SELECTORS
    ----------------------------------------------  */
    body {
      margin: 0;
      padding: 0 10px;
      font-size: 100%;
      font-family: helvetica, arial, sans-serif;
      color: #000;
    }
    h1 {
      font-size: 138.5%;
      line-height: 1.5em;
    }
    h2 {
      font-size: 123.1%;
      line-height: 1.3em;
    }
    h3 {
      font-size: 108%;
      line-height: 1em;
    }
    h1, h2, h3 {
      margin: 0.5em 0;
    }
    h1, h2, h3, h4, h5, h6, strong {
      font-weight: bold;
      letter-spacing: -0.75px;
    }
    em {
      font-style: italic;
    }
    blockquote, ul, ol, dl {
      margin: 0.5em;
    }
    ol, ul, dl {
      margin-left: 1em;
      padding: 0;
      margin: 0 0 1em;
    }
    ol li {
      list-style: none;  
    }
    ul li {
      list-style: none;
    }
    p, fieldset, table {
      margin-bottom: 1em;
      line-height: 1.2em;
    }
    a:link, a:active, a:visited {
      text-decoration: none;
      outline: none;
      color: #000;
      padding: 2px 2px 0;
    }
    a:hover {
      background: #fff200;
    }
    .wai {
      text-indent: -9999px;
      position: absolute;
    }


/*  =LAYOUT SELECTORS
    ----------------------------------------------  */
    h1 {
      float: left;
      margin: 0;
    }
    h1 a {
      width: 145px;
      height: 70px;
      display: block;
      text-indent: -9999px;
      background: transparent url('../images/branding-logos.gif') -10px -197px no-repeat;
      padding: 0;
      
    }
    h1 a:hover {
      background: transparent url('../images/branding-logos.gif') -10px -197px no-repeat;
    }
    h2 {
      font-size: 1.8em;
      margin: 0;
      padding: 2px;
      line-height: 0.9em;
      width: 100%;
    }
    #site {
      width: 100%;
      overflow: hidden;
      padding: 10px 0;
    }
    #masthead {
      float: left;
      overflow: hidden;
      margin: 25px 10px;
    }


/*  =MAIN NAVIGATION SELECTORS
    ----------------------------------------------  */
    #mai-nav {
      margin: 0 40px 0 0;
    }
    #mai-nav > li {
      font-size: 1.8em;
      font-weight: bold;
    }
    #about #mai-nav > li.about a,
    #cities-listing #mai-nav > li.positions a,
    #position-listings #mai-nav > li.positions a,
    #position #mai-nav > li.positions a,
    #contact #mai-nav > li.contact a,
    #apply #mai-nav > li.contact a,
    .page .highlight {
      background-color: #fff200;
    }


/*  =PAGES SELECTORS
    ----------------------------------------------  */
    .page {
      margin: 23px 10px 0;
      overflow: hidden;
      float: left;
      width: 35em;
    }
    .page > h2 {
      margin: 5px 0 10px;
      font-size: 1.5em;
    }
    .page > h3,
    .page > p.title {
      font-size: 1.75em;
      font-weight: bold;
      margin: 0;
      padding: 2px 0;
    }
    .page > p.title {
      line-height: 1.1em;
    }
    .page > h4 {
      font-size: 1.5em;
      margin: 1em 0;
    }
    .page > p {
      font-size: 0.85em;
    }
    

/*  =_COMMON SELECTORS
    ----------------------------------------------  */
    .common h3, 
    .common h4,
    .common h5 {
      margin: 0 0 20px;
    }
    .common h4,
    .common h5 {
      font-size: 1.2em;     
    }
    .common p {
      margin: 0 0 10px;
      line-height: 1.3em;
    }  
    
    
/*  =CITIES SELECTORS
    ----------------------------------------------  */
    #cities-listing .cities {
      width: 40em;
      overflow: hidden;
      margin: 0;
    }
    #cities-listing .cities .city {
      font-size: 1.4em;
      font-weight: bold;
      margin: 5px 10px 10px 0;
      float: left;
      width: 180px;
    }
    #cities-listing .cities .city > a {
      background-color: #fff200;
      padding: 5px 5px 2px;
    }
    #cities-listing p.warning,
    #position-listings p.warning,
    #position p.warning,
    #position-listings ul .warning  {
      margin: 10px 0;
      background-color: #fff200;
      font-size: 1.3em;
      font-weight: bold;
      padding: 5px 5px 2px;
      float: left;
      clear: both;
    }
    #position p.warning {
      background-color: transparent;
      font-size: 1.3em !important;
    }
    #position-listings ul .warning,
    #position-listings ul.cars .warning {
      padding: 2px 5px;
    }
    #position-listings ul .warning {
      background-color: #fff200;
    }
    #position-listings ul.cars .warning {
      background-color: #6CCEF5;
      
    }
    
    
/*  =POSITION LISTING SELECTORS
    ----------------------------------------------  */
    #position-listings .page > h3 {
      margin-bottom: 15px;
    }
    #position-listings .page > h4 {
      margin: 0 0 10px;
      font-size: 1.3em;
      letter-spacing: -0.75px;
      padding: 2px 5px;
    }
    #position-listings .page > h4.title-bags {
      background-color: #fff200;
      width: 50px;
    }
    #position-listings .page > h4.title-cars {
      background-color: #6CCEF5;
      width: 45px;
    }
    #position-listings .page ul li {
      font-size: 1.3em;
      font-weight: bold;
      margin-bottom: 5px;
    }
    #position-listings .page ul {
      overflow: hidden;
    }
    #position-listings .page ul.cars li a:hover {
      background-color: #6CCEF5;
    }


/*  =POSITION DETAILS SELECTORS
    ----------------------------------------------  */
    #position .page > h3 a,
    #position #postion-recipient p a {
      margin-bottom: 0;
      background-color: #fff200;
    }
    #position .page > h3.cars a,
    #position #postion-recipient.cars  p a {
      margin-bottom: 0;
      background-color: #6CCEF5;
    }
    #position .page > p#meta {
      margin: 5px 0 10px;
      font-weight: bold;
    }
    #position .page > p#meta.cars a:hover {
      background-color: #6CCEF5;
    }
    #position .page > h4,
    #position .page > p {
      margin: 20px 0 10px;
      font-size: 1.3em;
    }
    #position .page > p {
      font-size: 0.9em;
      margin-top: 0;
      padding: 0;
    }
    #position .page ul {
      overflow: hidden;
    }
    #position .page ul li {
      font-size: 0.9em;
      font-weight: bold;    
    }
    #position #postion-recipient {
      float: left;
      clear: both;
    }
    #position #postion-recipient p {
      font-weight: bold;
      margin: 0;
    }
    #position #postion-status {
      font-size: 1.3em;
      float: left;
      clear: both;
      margin: 20px 0;
    }
    #position #postion-status p {
      margin: 0;
    }
    #position #postion-status p a {
      background: #eeeeee none repeat scroll 0 0;
      border: 1px solid #dddddd;
      padding: 5px;
      padding: 5px 10px;
      display: block;
    }
    #position #postion-status p a:hover {
      background: #fff200 none repeat scroll 0 0;
    }
    #position #postion-status.cars p a {
      background-color: #eeeeee;  
    }
    #position #postion-status.cars p a:hover {
      background-color: #6CCEF5;  
    }


/*  =APPLY SELECTORS
    ----------------------------------------------  */
    #apply .page > h3 {
      margin-bottom: 10px;
      width: 100%
    }
    #apply form {
      width: 35em;
      overflow: hidden;
    }
    #apply form div {
      float: left;
      overflow: hidden;
      clear: both;
      width: 100%;
    }
    #apply form h3 {
      font-size: 0.9em;
      color: #444;
      margin: 15px 0 10px;
      float: left;
      padding-bottom: 5px;
      border-bottom: 1px dotted #444;
      width: 100%;
    }
    #apply .page form h4 {
      float: left;
      width: 100%;
      font-size: 0.8em;
      color: #444;
      margin: 10px 5px 5px;
    }
    #apply .page form h4 span {
      font-weight: bold;
      color: #ff0000;
    }
    #apply .error-notice input,
    #apply .error-notice textarea {
     border: 4px solid #fff200;
    }
    #apply label span {
      color: #FF3300;
      font-size: 1.5em;
    }
    #apply form p {
      margin: 0;
      position: relative;
      float: left;
      overflow: hidden;
      padding: 5px;
    }
    #apply form .notice {
      padding: 0;
      color: #FF3300;
      margin: 0 0 20px;
    }
    #apply form input,
    #apply form textarea {
      width: 98.5%;
    }
    #apply form input {
      margin-right: 5px;
    }
    #apply form p label {
      font-size: 0.65em;
      text-transform: uppercase;
      margin-bottom: 5px;
      font-weight: bold;
      margin-bottom: 2px;
      color: #444;
    }
    #apply form p {
      width: 217px;
    }
    #apply form .phone-number {
      width: 30%;
    }
    #apply form .city {
      width: 190px;
    }
    #apply form .state {
      width: 30%;
    }
    #apply form .wide {
      width: 98.9%;
    }
    #apply form select {
      width: 100%;  
    }
    #apply form .zip {
      width: 30.5%;  
    }
    #apply #conviction,
    #apply .info, {
      width: 98.8%;
    }
    #apply form button {
      float: left;
      margin: 20px 0;
    }
    #apply #conviction #id_conviction_answer {
      margin-top: 10px;
    }
    #apply #conviction #id_conviction {
      margin: 20px 0;
    }


/*  =APPLY:Personal
    ----------------------------------------------  */
    #personal-info #first,
    #personal-info #last {
      width: 120px;
    }
    #personal-info #suffix {
      width: 96px;
    }
    #personal-info #street-address,
    #personal-info #street-address-two {
      width: 100%;
    }
    #personal-info #city,
    #personal-info #zip-code {
      width: 45%;
    }


/*  =APPLY:FORM CONTAINERS: OVERRIDE
    ----------------------------------------------  */
    form #position-info p,
    form #wom-info p,
    form #ed-info p,
    form #employment-history p,
    form #references-info p,
    form #identification p,
    form #license-info p {
      width: 48.2%;
    }
    
    form #license-info p {
      margin-right: 7px;
    }


/*  =CONTACT SELECTORS
    ----------------------------------------------  */
    #contact .highlight {
      float: left;
    }
    #contact address {
      margin: 10px 0 0;
      clear: both;
      border-bottom: 1px solid #CCCCCC;
      padding-bottom: 15px;
    }
    #contact address span {
      display: block;
      font-size: 1.5em;
      font-weight: bold;
      font-style: normal;
      margin: 0;
    }
    #contact form {
      width: 30em;
      font-size: 0.85em;
      font-weight: bold;
    }
    #contact form label {
      display: block;
    }
    #contact form input {
      padding: 2px 0;
      height: 15px;
      width: 250px;
      border: 1px solid #999;
      font-size: 12px;
      font-weight: normal;
      line-height: 15px;
      margin: 3px 0 10px;
      padding: 2px;
    }
    #contact form textarea {
      border: 1px solid #999;        
    }
    #contact button,
    #apply button {
      border: 1px solid #999;
      font-size: 0.85em;
      font-weight: bold;
      line-height: 15px;
      margin: 3px 0 10px;
      padding: 5px 7px;
      cursor: default;
    }
    #contact button:hover {
      background: #fff200;
    }
    #contact .notice {
      margin: 10px 0;
      color: #ff3300;
      width: 50%;
    }
    #drivers-license {
      width: 255px !important;
    }
    
    
/*  =FOOTER SELECTORS
    ----------------------------------------------  */
    #footer {
      position: absolute;
      font-size: 0.9em;
      bottom: 0;
      right: 0;
      font-weight: bold;
      width: 285px;
    }
    #footer p {
      margin: 0;
      padding: 10px;
      position: relative;
      width: 115px;
      overflow: auto;
    }
    #footer p a {
      background: transparent url('../images/branding-logos.gif') 0 -340px no-repeat;
      display: block;
      width: 85px;
      text-indent: -9999px;
      padding: 10px 0;
      position: absolute;
      top: 0;
      right: 0;
    }
    #apply #footer {
      position: relative;
      float: right;
      margin-right: -10px;
    }
    a.btn {
      background: #EEEEEE;
      border: 1px solid #DDDDDD;
      display: block;
      float: left;
      height: auto;
      margin: 5px 0 0;
      padding: 5px;
      position: relative;
      text-decoration: none;
      width: auto;
    }
    a.btn:hover {
      background: #FFF200;
    }