@charset "UTF-8";

/* Master Tracker CSS */

body {font-family: futura-pt, sans-serif;
font-weight: 300; font-style: normal;}
header {background:#45474d; height:70px;}
header figure.logo {float:left; display:block; width:auto; margin:25px 0 0 0}
header aside {float:right; display: block}
header .button {padding:7px 15px; border: 1px solid #f16521}
header aside a {margin: 16px 0 0 10px}
header .button:hover {background: #45474d; border:1px solid #45474d}
header .button.outline:hover {background: none; border: 1px solid #fff}
.mobile-logo {display: none}

.info-icn {display: inline-block; float:right; width: 18px; position: relative; top: 7px;}

.debug {
  font-family: Consolas, monaco, monospace !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: 400 !important;
	line-height: 20px !important;
  margin: 0px 0px 0px 0px;
}

/* Banner */

.banner {position: relative; -webkit-font-smoothing:antialiased;}
.overlay-text {width: 100%; height:100%; position:absolute;}
.banner article {padding: 9% 0 0 0}
.banner h1 {font-family: 'quadonregular'; font-size:44px; opacity:1; line-height:44px; color:#fff;  text-shadow: 0 1px 0px rgba(255, 255, 255, .2), 0 -1px 0px rgba(0, 0, 0, 0.3); opacity: .8}
.banner .small {font-weight: 500; color:#fff; font-size:13px; display:block}
.banner .button {margin: 40px 0 10px 0;}


/* Buttons */

.button {background:#f16521; color:#fff; font-family: futura-pt, sans-serif;
font-style: normal; font-weight: 900; display: inline-block; border:0; font-size:14px;
text-transform:uppercase; border-radius:30px; padding:13px 40px; text-align:center;
text-decoration:none; -webkit-font-smoothing:antialiased; transition: background-color 0.5s ease;}

.button.sml {padding: 8px 10px; font-size:11px;}

.button.no-rnd {border-radius: 5px; width: 100%; padding:13px 0; font-size:12px;}
.button.no-rnd:hover {background:#45474d}

.button.outline {border: 1px solid #fff; background: transparent;}
.button.outline.dark {background:#45474d}


/* Highlights on Homepage */

.highlights {background:#fff; position:relative; padding:40px 0 35px 0; -webkit-font-smoothing:antialiased;}
.highlights ul {display: block; overflow:hidden; margin:0; padding:0; list-style:none}
.highlights li {color:#45474d; display:block; float:left; width:20%; text-transform:uppercase; font-family: futura-pt, sans-serif;
 font-style: normal; font-weight: 700; font-size:16px;}

/* Introduction on Homepage */

.intro {background:#45474d; display:block; position:relative; -webkit-font-smoothing:antialiased;}
.intro figure {float:left;}
.intro article {float:left; text-align:right; color:#fff; padding:9% 0; text-align: right; }
.intro h2 {font-family: futura-pt, sans-serif;font-size:36px; line-height:36px; margin:35px 0 }
.intro p {font-family: futura-pt, sans-serif;font-style: normal; font-weight: 300; font-size:18px; line-height:25px; margin-bottom:30px; max-width: 70%; float: right}
.intro strong {font-weight: 700}
.intro article img {width: 130px; float:right; display:block;}
.intro .button.outline {border: 1px solid #f16521}
.intro .button {padding: 10px 35px}

.email{font-family: "proxima-nova-soft",sans-serif; font-style: normal; font-weight: 400; font-size:17px; line-height:25px; margin-bottom:30px; color:#FFFFFF; -webkit-font-smoothing:antialiased;}
.preview {position:absolute; top:80px; left:0}
.preview img {max-width: 914px;}


/* Benefits on Homepage */

.benefits {background:#fff; position:relative; display:block; -webkit-font-smoothing:antialiased;}
.benefits article {padding: 7% 0}
.benefits h3 {font-family: futura-pt, sans-serif;font-size:36px; line-height:36px; color:#45474d; font-weight: 700; margin-bottom: 15px;}
.benefits p {font-family: futura-pt, sans-serif;font-style: normal; font-weight: 400; font-size:17px; line-height:25px; color:#807c7c; margin-bottom:30px;}
.benefits ul {list-style:none; margin:0; padding:0; float:left; margin-right:30px;}
.benefits li {display: block; font-weight:400; font-family: futura-pt, sans-serif;font-style: normal; font-size: 18px; line-height:35px;}
.benefits i.check {margin-right:10px; display:inline-block; width:12px; height:12px; background:url(../img/check.gif) no-repeat; background-size:contain;}
.benefits .button {margin: 30px 0 0 0}
.benefits .chef {position: absolute; bottom:0; right:0}
.benefits .ranz-logo {max-width: 100px; position: absolute; top: 50px; right: 0px}
.benefits .ranz-logo:before {content: 'Endorsed by'; display: block; text-transform: uppercase; text-align: center; font-family: futura-pt, sans-serif;font-style: normal; font-weight: 900; color: #807c7c; letter-spacing: 1px; font-size: 11px}


/* General */

.a-center {text-align:center}
.a-left {text-align:left}
.a-right {text-align:right}
.a-justify {text-align:justify}

.dark-bg {background:#36393f;}
.dark-bg-pic {background:#36393f url(../img/bg-dark.jpg) no-repeat;}
.sdw {box-shadow: 0 2px 8px rgba(0,0,0,0.07);}
.dots {border: 0; background: url(../img/dots.gif) repeat-x; height:2px;}

.content {}
.copy {padding: 45px 30px 30px 45px}
.copy p {font-family: "proxima-nova-soft",sans-serif; font-style: normal; font-weight: 300; font-size:13px; line-height:21px; color:#555; margin:7px 0; padding:7px 0}
.copy h2 {font-family: "brandon-grotesque",sans-serif; text-transform:uppercase; font-weight: 700; border-bottom: 1px solid #ddd; margin:20px 0; padding-bottom:10px; font-size:17px; line-height:24px;}
.copy a {color:#f16521;}
.copy ul {list-style: none}
.copy li {font-size:13px; line-height:21px; color:#555;}
.copy li:before {
font-family: 'FontAwesome';
content: '\f138';
margin:0 5px 0 -15px;
color: #36393f;
}

.banner-pres {display: block; background:#eee; position:relative; min-height:200px;}
.banner-pres .overlay-text {text-align:center; position:absolute; width:100%; padding:8% 0; color:#fff;}
.banner-pres h6 {text-transform: uppercase; font-weight:700; font-size:15px; color:#f16521; padding-bottom:7px; font-family: 'brandon-grotesque'; }
.banner-pres h1 {font-family: 'quadonregular'; font-size:30px; line-height:36px; color:#fff}
.banner-pres p {-webkit-font-smoothing:antialiased; font-family: "proxima-nova-soft",sans-serif; font-style: normal; font-weight: 300; font-size:17px; line-height:25px; padding:15px 0; max-width:650px; margin:0 auto;}
.banner-pres a {color:#fff}

.grey-bg {background:#eee;}
.grey-bg article {padding: 50px 50px 40px 50px; text-align:center}
.grey-bg h2 {font-family: 'quadonregular'; font-size:24px; color:#f16521; margin-bottom:7px;}
.grey-bg p {-webkit-font-smoothing:antialiased; font-family: "proxima-nova-soft",sans-serif; font-style: normal; font-weight: 300; font-size:16px; line-height:25px; max-width:750px; margin:0 auto; margin-bottom:10px;}
.grey-bg a {color:#45474d;}
.grey-bg a.button {color:#fff; margin:15px 0 0 0}

.contact-form {max-width: 700px; margin:0 auto; padding:45px 0}

.plans-page {padding: 45px 30px 30px 45px}
#pricing-plans {max-width: 900px; margin:0 auto}
.plan {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  height: 300px;
  padding: 25px 30px;
  position: relative;
  width: 28%;
}
.plan.starter {
  border: 1px solid #dddddd;
  border-right: 0;
  border-radius: 6px 0 0 6px;
}

.plan.premium {
  border: 1px solid #dddddd;
}

.plan.included {
  border: 1px solid #dddddd;
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.plan.free {
  background: #f4f4f4;
  border: 1px solid #dddddd;
  border-left: 0;
  border-radius: 0 6px 6px 0;
  color: #999999;
  height: 270px;
  margin-top: 15px;
  width: 16%;
}

.plan h2 {font-family: 'quadonregular'; font-size:24px; margin-bottom:10px;}
.plan h3 {color: #f36c00; margin: -5px 0 15px; font-size:34px; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500;}
.plan h3.soon {font-size:20px; text-transform:uppercase; margin-top:5px;}
.plan sup {color: #999999; font-size: 12px; font-family: 'proxima-nova-soft'; font-weight:300}
.plan p {font-size: 15px; color:#999999}
.plan strong {color: #444; font-size:16px;}
.plan ul {list-style:none; margin:10px 0; padding:0; font-size: 15px; color:#999999}
.plan ul li {display: block; padding:2px 0}
.plan.free h3 {color:#999999}
.plan .small {font-size: 14px;}
.gst {color:#999; font-size:13px; padding:10px 0;}

.trial-highlight {display: block; overflow:hidden; max-width: 900px; margin:30px auto 20px; text-align:center;}
.trial-highlight p {font-family: 'quadonregular'; font-size:24px; color:#444}
.trial-highlight p a {color:#999}
.trial-highlight .button {margin: 20px 0}

.bt {border-top: 1px solid #ddd;}
.bb {border-bottom: 1px solid #ddd;}
.grid-list {padding: 60px 0}
.grid-list h3 {font-family: 'quadonregular'; font-size:24px; margin-bottom:30px;}
.grid-wrapper {display: block; overflow:hidden;}
.grid-list p {font-size: 15px; color:#999999; margin:3px 0; padding:0; display:block; overflow:hidden}
.grid-list i {margin-top: 4px }
.grid-list i.check {margin-right:15px; display:inline-block; width:16px; height:14px; background:url(../img/check.gif) no-repeat; float:left;}

/* Footer */

footer {background:#45474d; display:block; overflow:hidden; font-family: futura-pt, sans-serif; font-style: normal; font-weight: 400; padding:50px 0 30px 0; position:relative; -webkit-font-smoothing:antialiased;}
footer h4 {color:#fff; font-size:12px; font-weight:700; letter-spacing: 1px; text-transform:uppercase}
footer nav ul li {display: block; float:left;}
footer nav li a {color:#9c9da0; text-transform:uppercase; font-size:15px; text-decoration:none; display:block; padding:10px 20px 20px 0}
footer nav li a:hover {color:#f16521}
footer .logo-footer img {width: 130px; float:right; display:block; margin-bottom:15px;}
footer .copyright {text-align:right; font-family: futura-pt, sans-serif; font-style: normal; font-weight: 400; font-size:13px; color:#9c9da0; }
footer .copyright a {color:#9c9da0; display: inline-block; padding-left:15px; text-decoration:none}

/* Changes */

.dashboard .btn-left {position: relative;}
.dashboard .calDrop.opened {box-shadow: 0px 0px 8px #0003;}

@media screen and (min-width: 200px) and (max-width: 850px) {
input {-webkit-appearance: none;}
.wrapper-wide {width: 95%}
.wrapper {width: 95%}
.dashboard {padding: 20px;}
.account-nav .inner {max-width:100%}
.db-right {width:100% !important}
.btn-right {position: relative}
.btn-right .button {width: 42%; display:inline-block; margin:5px 0}
.btn-left {position: relative}
.highlights {display:none}
header {text-align:center}
header figure.logo {float:none; width:160px; margin:25px auto 0}
header aside {float:none; margin-bottom:25px;}
header {height: auto; display: block; overflow: hidden;}
.info-icn {display:none}
header .button {
    background: #45474d;
    border: 2px solid #45474d;
}
header .button.outline {background:none}
footer {text-align:center}
footer nav ul li {float:none; display:inline-block}
footer nav li a {padding:3px}
.logo-footer {display:none}
footer .copyright {text-align:center; display:block; margin:10px 0}
footer h4 {margin-bottom: 10px;}
.hgroup {padding: 20px 0; min-height:inherit}
.data-table, .graphs canvas, .graph-inner {display:none}
aside.sidebar {padding:0}
.table-hide {display:none}
.input-daterange .button {margin-top: 10px;}

.banner article {display:none}
.preview {position: relative; margin:30px 0; top:auto}
.intro article img {width:150px; margin:0 auto; float:none}
.intro article {text-align:center; padding:0px 0 50px 0}
.intro h2 {font-size: 20px; line-height:26px; text-align:center}
.intro p {font-size: 15px;}
.grey-bg h2 {font-size:16px;}
.banner-pres h1 {font-size:20px; line-height:20px; margin:0 20px;}
.banner-pres .overlay-text {
    text-align: center;
    position: relative;
    width: 100%;
    padding: 40px 0;
    color: #fff;
    background: #45474d;
}

.plan {width:100%}
.plans-page {padding:15px;}
.plan.starter {border-right: 1px solid #dddddd;}
.plan.included {border-left: 1px solid #dddddd;}
.plan.free {width:100%; border-left: 1px solid #dddddd;}
.grey-bg article {padding: 25px 15px}
.banner-pres p {margin:0 20px;}
.copy {padding: 15px;}
.mobile-logo {display: block}
.desktop-logo {display: none}
.benefits .chef {position: relative}
.benefits li {font-size: 13px;}
}




@media screen and (min-width: 995px) and (max-width: 1080px) {

.wrapper {width: 90%}
.banner article {padding: 5% 0 0 0}
.banner-pres .overlay-text {text-align:center; position:absolute; width:100%; padding:3% 0; color:#fff;}
.banner .button {margin: 20px 0 10px 0}
.banner h1 {font-size: 38px; line-height:36px;}
.highlights li {font-size: 12px;}
.intro article img {width: 150px}
.intro h2 {font-size: 24px; margin-bottom: 20px; line-height: 24px}
.intro p {font-size:14px; line-height: 18px;}
.preview {width: 58.333333333333336% !important; top:90px}
footer nav li a {padding: 10px 10px 20px 0; font-size: 10px;}
.grid-list i {}
	.account-nav.col-2 {width: 20% !important}
.db-right.col-10 {width: 80% !important; float: right}
.account-nav h2 {font-size: 11px;}
.account-nav h1 {font-size: 14px;}
.account-nav li a {font-size: 12px !important; padding: 8px 10px !important}
.account-nav nav > ul > li {margin-bottom: 0 !important}
.account-nav nav hr {margin:10px 0;}
.account-nav nav > ul > li > a.active {background: #e3e7eb url(../img/active.gif) 92% 9px no-repeat;}

.btn-right {
    position: relative;
    right: 0 !important;
    top: 0 !important;
    margin-bottom: 20px;
    margin-top: 20px; left: 0
}
#print_roster {overflow:scroll;}
.general-info-wrapper {width: 100% !important}
.plain {margin:5px 0 !important;}

.data-table {padding:15px;}

    .staff-table a {font-size: 12px;}




}


@media screen and (min-width: 1100px) and (max-width: 1300px) {

.wrapper {width: 95%}
.banner article {padding: 5% 0 0 0}
.banner-pres .overlay-text {text-align:center; position:absolute; width:100%; padding:5% 0; color:#fff;}

	}

@media screen and (min-width: 1310px) and (max-width: 1500px) {

.wrapper {width: 95%}
.banner article {padding: 5% 0 0 0}
.banner-pres .overlay-text {text-align:center; position:absolute; width:100%; padding:5% 0; color:#fff;}
.account-nav.col-2 {width: 15% !important}
.db-right.col-10 {width: 85% !important;}
.account-nav h2 {font-size: 11px;}
.account-nav h1 {font-size: 14px;}
.account-nav li a {font-size: 12px !important; padding: 8px 10px !important}
.account-nav nav > ul > li {margin-bottom: 0 !important}
.account-nav nav hr {margin:10px 0;}
.account-nav nav > ul > li > a.active {background: #e3e7eb url(../img/active.gif) 92% 9px no-repeat;}
.data-table {padding:15px;}
.weekly-roster .plain {margin:0;}

#print_roster {overflow:scroll;}
.benefits li {font-size: 13px;}
}


@media screen and (max-width:450px) {

  .benefits .ranz-logo {bottom:280px; top:auto;}
  .benefits .ranz-logo img {width:80px;}

  .ui-dialog .ui-dialog-titlebar-close {width:60px !important;}

}

.general-info-wrapper {}


.hide { display: none; }


/* END CSS */