/* styles for mobile header */
#mobile-header {margin:0; padding:0; height: 50px; display:none; }

#mobile-header #logo { margin:0 25% 0 25%; width: 50%; }
#mobile-header #logo img{ max-width: 95%; display: block; vertical-align: middle; margin-left: auto; margin-right: auto; }

#mobile-header #menu-button { max-width: 25%; padding:0; margin:0; float: left; }
#mobile-header #menu-button a { margin:5px 0 0 0; display:block; padding: 10px; background: #f1f1f1; border-radius:10px; }

#mobile-header #login-button { max-width: 25%; padding:0; margin:0; float: right; }
#mobile-header #login-button a { margin:5px 0 0 0; display:block; padding: 10px; background: #f1f1f1; border-radius:10px; }

/* show the header if less than 600px */
@media screen and (max-width: 600px) { 
    #mobile-header{
		display:block;
	}
}

/* styles for the mobile menu itself */
#mobile-menu { background: #f1f1f1; display:none; clear:both; margin:0; padding: 10px; }
#mobile-menu ul { margin:0; padding:0; width: 100%; list-style:none; }
#mobile-menu li { margin:0 0 0; padding:0; width: 100%; background: #6b7fb2; }
#mobile-menu li.section { font-weight: bold; margin:0 0 5px 0; padding:5px; width: 100%; background: none; background-repeat: no-repeat; background-position: center right; box-sizing: border-box; }
#mobile-menu a { margin:0 0 5px 0; display:block; width: 100%; padding: 10px; color: #fff; font-size: 14px; box-sizing: border-box; border-radius: 2px;}
#mobile-menu a:hover{ background: #00447c; }
#mobile-menu a.selected{ background: #00447c;  }

#mobile-menu span.down { padding: 0 22px 0 0; line-height: 14px; background-image: url(/images/arrow_down.gif); background-repeat: no-repeat; background-position: center right;  }

/* styles for the general use mobile menu buttons */
#mobile-menu span.home { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/house.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.post-job { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/pencil.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.how-it-works { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/cog.png); background-repeat: no-repeat; background-position: center left; }
#mobile-menu span.trade-start { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/wrench.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.find-trades { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/magnifier.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.questions-to-trades { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/comment_add.png); background-repeat: no-repeat; background-position: center left; }
#mobile-menu span.help { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/help.png); background-repeat: no-repeat; background-position: center left; }
#mobile-menu span.login { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/lock.png); background-repeat: no-repeat; background-position: center left; }

/* styles for the trades */
#mobile-menu span.dashboard { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/application_cascade.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.available-leads { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/page_white_stack.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.interested-leads { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/page_go.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.shortlisted-jobs { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/accept.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.customer-feedback { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/comments.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.my-profile { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/user_suit.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.my-trades { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/folder_wrench.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.working-area { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/map.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.contact-details { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/phone.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.references { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/user_comment.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.homeowner-questions { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/note_edit.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.job-alerts { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/email_go.png); background-repeat: no-repeat; background-position: center left;  }
#mobile-menu span.logout{ padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/door_out.png); background-repeat: no-repeat; background-position: center left;  }

/* styles for the homeowners */
#mobile-menu span.my-jobs { padding: 0 0 0 22px; line-height: 14px; background-image: url(/images/icons/page_white_stack.png); background-repeat: no-repeat; background-position: center left;  }