/* $GLOBAL
========== */
html { font-size: 62.5%; /* For using rem sizes */ }
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px; font-size: 1.5rem;
line-height: 1.5;
padding-top: 10px;
background: url(../img/header-border.png) 0 0 repeat-x #fff;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-weight: normal;
margin: 0 0 20px 0;
}
h4, h5, h6 { margin-bottom: 10px; }
h1 { font-size: 30px; font-size: 3.0rem; }
h2 { font-size: 27px; font-size: 2.7rem; }
h3 { font-size: 24px; font-size: 2.4rem; }
h4 { font-size: 21px; font-size: 2.1rem; }
h5 { font-size: 18px; font-size: 1.8rem; }
h6 { font-size: 15px; font-size: 1.5rem; }
/* Responsive images */
.max-img { max-width: 100%; height: auto; }
em { }
strong { color: inherit; }
p { margin: 0 0 20px 0; }
p.bigger { font-size: 15px; font-size: 1.5rem; }
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
.more-bottom { margin-bottom: 40px !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.hidden { display: none !important; }
/* ====== media object ====== */
.media { margin: 10px; }
.media, .bd { overflow: hidden; _overflow: visible; zoom: 1; }
.media .img { float: left; margin-right: 10px; }
.media .img img { display: block; }
.media .imgExt { float: right; margin-left: 10px; }
/* Responsive videos */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* $COLOURS
========== */
/* Default */
.area.bg.default {
background: #e6e6e5;
}
/* About */
.area.fg.about { color: #8fc7bb; }
.area.bg.about { background-color: #8fc7bb; }
.area.border.about { border-color: #8fc7bb; }
.area.about:disabled {background-color: #f4f4f4; }
.area.gradient.about {
background: #8fc7bb; /* Old browsers */
}
.area.gradient.about:disabled {
background: #f4f4f4; /* Old browsers */
}
.area.gradient.about.step_2 {
background: #be97be; /* Old browsers */
}
.area.gradient.about.step_3 {
background: #caa1ca; /* Old browsers */
}
.area.gradient.about.step_4 {
background: #d2abd2; /* Old browsers */
}
.area.gradient.about.step_5 {
background: #dcb5dc; /* Old browsers */
}
.area.gradient.about.step_6 {
background: #e6bfe6; /* Old browsers */
}
.area.gradient.about.step_7 {
background: #f0c9f0; /* Old browsers */
}
.area.gradient.about.step_8 {
background: #fad3fa; /* Old browsers */
}
/* My Support */
.area.fg.support { color: #6b559f; }
.area.bg.support { background-color: #6b559f; }
.area.border.support { border-color: #6b559f; }
/*.area.gradient.support {
background: #d74f00;
}*/
/* Time */
.area.fg.time { color: #ffcc00; }
.area.bg.time { background-color: #ffcc00; }
.area.border.time { border-color: #ffcc00; }
.area.gradient.time {
background: #ffd700;
}
/* Changin Work */
.area.fg.work { color: #cc3300; }
.area.bg.work { background-color: #cc3300; }
.area.border.work { border-color: #cc3300; }
.area.gradient.work {
background: #d74f00;
}
.area.gradient.work_expense {
background: #7baee1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
.area.gradient.work_income {
background: #ff9140; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
/* Activities */
.area.fg.activity { color: #8cc865; }
.area.bg.activity { background-color: #8cc865; }
.area.border.activity { border-color: #8cc865; }
.area.fg.activity.lighter { color: #cce599; }
.area.bg.activity.lighter { background-color: #cce599; }
.area.gradient.activity {
background: #8cc865; /* Old browsers */
}
/* Social */
.area.fg.social { color: #6699cc; }
.area.bg.social { background-color: #6699cc; }
.area.border.social { border-color: #6699cc; }
.area.gradient.social {
background: #8db4d9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
}
/* Food */
.area.fg.food { color: #5ba9dd; }
.area.bg.food { background-color: #5ba9dd; }
.area.border.food { border-color: #5ba9dd; }
.area.food:disabled {background-color: #f4f4f4; }
.area.gradient.food {
background: #5ba9dd; /* Old browsers */
}
/* dietassess */
.area.fg.dietassess { color: #e86955; }
.area.bg.dietassess { background-color: #e86955; }
.area.border.dietassess { border-color: #e86955; }
.area.dietassess:disabled {background-color: #f4f4f4; }
.area.gradient.dietassess {
background: #e86955; /* Old browsers */
}
/* Planner */
.area.fg.planner { color: #dde56e; }
.area.bg.planner { background-color: #dde56e; }
.area.border.planner { border-color: #dde56e; }
.planner_action {
margin-bottom: 20px;
}
.planner_action .button {
width: 280px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: middle;
}
.planner_unscheduled_box {
width: 260px;
min-height: 40px;
border: 4px solid #000;
border-radius: 4px;
padding: 0 20px;
background-color: #fff;
position: relative;
}
.planner_unscheduled_box.empty {
visibility: hidden;
}
.planner_unscheduled_box h5 {
font-size: 16px;
font-size: 1.6rem;
color: #272727;
font-weight: bold;
margin-top: 10px;
}
.planner_unscheduled_box h5 span {
line-height: 1.2;
display: block;
}
.planner_unscheduled_box ul {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.planner_unscheduled_box ul li {
list-style: none;
margin: 0 0 7px 0;
display:block;
border-bottom: 1px solid #f1f1f1;
padding: 0 0 7px 0;
}
.planner_unscheduled_box li .event_title {
font-weight: bold;
font-size: 12px;
font-size: 1.2rem;
width: 60%;
float: left;
display: block;
}
.planner_unscheduled_box li .event_details {
font-size: 12px;
font-size: 1.2rem;
float: left;
display: block;
width: 40%;
}
.planner_unscheduled_box li .event_title_wide {
font-weight: bold;
font-size: 12px;
font-size: 1.2rem;
float: left;
display: block;
width: 100%;
}
.planner_unscheduled_box li a {
color: #000;
}
.planner_unscheduled_box li .event_details {
font-size: 12px;
font-size: 1.2rem;
float: left;
display: block;
width: 100%;
}
/* Standard */
.area.fall-from-header {
margin: 0 10px;
padding: 10px 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.area.bg.standard {
background-color: #f4f4f4;
}
/* Good */
.area.bg.good {
background-color: #abd64d;
}
.area.gradient.good {
background: #abd64d; /* Old browsers */
}
.area.border.good {
border-color: #abd64d;
}
/* Okay */
.area.bg.okay {
background-color: #f29100;
}
.area.border.okay {
border-color: #f29100;
}
/* Poor */
.area.bg.poor {
background-color: #e20613;
}
.area.border.poor {
border-color: #e20613;
}
.area.rounded-header {
margin: 0 0 0 0;
border-radius: 10px;
padding: 10px 25px;
}
/* roundel colours */
.roundel.level-low {
color: #cc3300;
border-color: #cc3300;
}
.score-key .roundel.small .roundel-filler.level-low {
background: #cc3300;
}
.roundel.level-medium {
color: #ffcc00;
border-color: #ffcc00;
}
.score-key .roundel.small .roundel-filler.level-medium {
background: #ffcc00;
}
.roundel.level-high {
color: #add65c;
border-color: #add65c;
}
.score-key .roundel.small .roundel-filler.level-high {
background: #add65c;
}
.border-narrow {
border: 2px solid;
}
/* $BUTTONS
========== */
a.button,
.button {
position: relative;
margin: 0 5px 0 0;
padding: 0 8px;
display: inline-block;
color: #fff;
border: 0;
outline: 0;
background-color: #000;
font-weight: bold;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
text-transform: none;
font-family: Verdana, Helvetica, Sans-serif;
letter-spacing: 0;
/* Default: medium */
font-size: 14px; font-size: 1.4rem;
line-height: 30px;
height: 30px;
padding: 0 15px;
-moz-box-sizing: content-box; /* or `border-box` */
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
/* Shift the margin to the other side for right-aligned buttons */
.button.right { margin: 0 0 0 5px; }
.button.float-right { float: right; }
/* Sizes */
.button.small {
font-size: 12px; font-size: 1.4rem;
line-height: 30px;
height: 30px;
padding: 0 16px;
}
.button.medium {
font-size: 16px; font-size: 1.6rem;
line-height: 40px;
height: 40px;
padding: 0 20px;
font-weight: bold;
margin-bottom: 10px;
}
.button.big {
font-size: 18px; font-size: 1.8rem;
line-height: 50px;
height: 50px;
padding: 0 25px;
font-weight: bold;
}
.button.wide {
width: 245px;
}
.button.wide.has-next {
width: 210px;
}
.button.tall {
height: 100px;
line-height: 100px;
vertical-align: middle;
}
.button.square {
font-size: 15px; font-size: 1.5rem;
line-height: 30px;
height: 30px;
padding: 0;
width: 30px;
text-align: center;
border-radius: 10px;
}
.button.square.round {
border-radius: 15px;
border: 0;
}
/* Colours */
.button.primary {
background-color: #009900;
color: #272727;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/assets/pie/PIE.htc);
}
.button.secondary {
background-color: #ccc;
color: #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/assets/pie/PIE.htc);
}
.button.small.primary,
.button.small.secondary {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(/assets/pie/PIE.htc);
}
.button.empty { background: transparent; color: #000; border-radius: 10px; behavior: url(/assets/pie/PIE.htc); }
.button.empty:hover { background: transparent; color: #333; border-radius: 10px; behavior: url(/assets/pie/PIE.htc); }
.button.white { background-color: #fff; color: #333; border-radius: 10px; behavior: url(/assets/pie/PIE.htc); }
.button.light, .gradient.light, .module-header__title.light { color: #fff; }
.button.dark { color: #272727; }
.button:hover { background-color: #000; color: #fff; }
.button.focused { background-color: #333; color: #fff; }
/* Next buttons need an arrow and more right padding */
.button.has-icon,
.button.has-next,
.button.has-plus,
.button.has-down,
.button.has-flip { padding-right: 60px; }
.button.has-prev { padding-left: 60px; }
.button .next,
.button .plus,
.button .down,
.button .icon,
.button .flip,
.button .prev {
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 50%;
margin-top: -10px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
}
.button .plus {
width: 40px;
height: 100%;
right: 0;
top: 0;
margin-top: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.button .flip {
width: 30px;
right: 10px;
}
.button .prev {
right: 0px;
left: 20px;
}
/* Next image in buttons. Just add: */
.button .next { background-image: url(../img/btn-next.png); }
.button .down { background-image: url(../img/btn-down.png); }
.button .plus { background-image: url(../img/btn-plus.png); }
.button .flip-next { background-image: url(../img/btn-flip-next.png); }
.button .flip-prev { background-image: url(../img/btn-flip-prev.png); }
.button .prev { background-image: url(../img/btn-prev.png); }
/* "Try this" button */
.button.try,
.button.later {
padding-left: 0;
padding-right: 50px;
background: transparent;
color: #000;
}
.button.try .icon,
.button.later .icon {
display: block;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
margin: 0;
background-image: url(../img/btn-tick.png);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 5px;
behavior: url(/assets/pie/PIE.htc);
}
.button.is-saved {
color: #999;
}
.button.is-saved:hover {
color: #999;
}
.button.mentor span {
width: 100%;
height: 100%;
min-height: 20px;
display: block;
background-image: url(../img/btn-mentor-next.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}
.button.mentor_sound {
margin: 0;
width: 32px;
}
.button.mentor_sound_wide {
margin: 0;
width: 132px;
}
.button.mentor_next, .button.mentor_prev {
margin: 0;
width: 20px;
}
.button.mentor_next span { background-image: url(../img/btn-mentor-skip_next.png); }
.button.mentor_prev span { background-image: url(../img/btn-mentor-skip_back.png); }
.button.mentor_pageto span { background-image: none; }
.button.mentor_sound span { background-image: url(../img/btn-mentor-play.png); }
.button.mentor_sound.pause span { background-image: url(../img/btn-mentor-pause.png); }
.button.calendar {
padding-right: 60px;
}
.button.calendar .plus {
display: block;
width: 40px;
height: 100%;
position: absolute;
border-radius: 0 10px 10px 0;
right: 0;
top: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
behavior: url(/assets/pie/PIE.htc);
}
/* $STRUCTURE
========== */
/* $HEADER
---------- */
.page-header {
padding-top: 30px;
margin-bottom: 0px;
position: relative;
z-index: 1;
overflow: visible;
}
.page-header .info {
text-align: right;
}
.page-header .info .links .sep {
margin: 0 10px;
}
.header-links a {
font-weight: bold;
text-decoration: none;
color: #818180;
}
.header-links .user-logout { color: #818180; }
.header-links .user-logout:hover { color: #000; }
.header-links .orientation {
color: #8fc7bb;
padding-right: 40px;
background-image: url(/assets/img/orientation/nav-icon.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
.header-links .orientation:hover {
color: #000;
background-image: url(/assets/img/orientation/nav-icon2.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
.header-links .settings {
color: #8fc7bb;
}
.header-links .settings:hover {
color: #000;
}
.header-links .admin {
color: #8fc7bb;
}
.header-links .admin:hover {
color: #000;
}
.header-links .user-account {
background: #faf9fa;
border: 1px solid #a8a7a7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/assets/pie/PIE.htc);
color: #818180;
box-shadow: 0px 2px 10px 1px rgba(168, 167, 167, 0.6);
-moz-box-shadow: 0px 2px 10px 1px rgba(168, 167, 167, 0.6);
-webkit-box-shadow: 0px 2px 10px 1px rgba(168, 167, 167, 0.6);
}
.header-links .user-account:hover { color: #000; }
.menu {
margin-top: 20px;
margin-bottom: 20px;
}
/* $FOOTER
---------- */
.footer {
margin-top: 40px;
}
.footer .call {
border-bottom: 1px solid #c2c2c2;
margin-bottom: 20px;
}
/* $BOX (or box-like rows)
---------- */
.box {
padding: 15px;
/* -webkit-box-shadow: 0px 4px 18px 0px #dbdbdb;
box-shadow: 0px 4px 18px 0px #dbdbdb; */
}
.light {
background: #f2f2f2;
}
.with-shadow {
-webkit-box-shadow: 0px 4px 18px 0px #dbdbdb;
box-shadow: 0px 4px 18px 0px #dbdbdb;
}
/* $HR
---------- */
hr {
height: 2px;
background: #e3e3e3;
border: 0;
}
/* $GOTO
---------- */
.goto {
position: relative;
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 30px 0;
min-height: 160px;
text-decoration: none;
box-sizing: border-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(/assets/pie/PIE.htc);
border: 2px solid;
}
.goto .arrow {
position: absolute;
top: 50%;
right: 20px;
margin-top: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 66px;
height: 66px;
}
.goto.work .arrow { background-image: url(../img/goto/work.png); }
.goto.time .arrow { background-image: url(../img/goto/time.png); }
.goto.activity .arrow { background-image: url(../img/goto/activity.png); }
.goto.food .arrow { background-image: url(../img/goto/food.png); }
.goto.social .arrow { background-image: url(../img/goto/social.png); }
.goto.planner .arrow { background-image: url(../img/goto/planner.png); }
.goto_title {
display: block;
font-size: 22px; font-size: 2.2rem;
font-weight: bold;
color: #fff;
margin-bottom: 10px;
padding: 10px 15px 10px 15px;
}
.goto_text {
display: block;
color: #272727;
font-size: 14px; font-size: 1.4rem;
font-weight: normal;
line-height: 1.3;
padding: 10px 105px 25px 15px;
}
/* $MENTOR
---------- */
.mentor_box,
.module-header {
margin-bottom: 20px;
}
.mentor_box_inner,
.module-header__inner {
background: #f4f4f4;
padding: 15px 0;
}
.mentor_box_title,
.module-header__title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
padding: 5px 15px;
margin: 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
behavior: url(/assets/pie/PIE.htc);
}
.mentor_box_content p,
.module-header__text p {
font-size: 18px; font-size: 1.8rem;
line-height: 1.5;
margin-left: 15px;
}
.mentor_box_image img {
width: 130px;
height: 130px;
border: 0px solid #dbdbd9;
}
.mentor_text_list {
list-style: none;
margin: 0 0 0 15px;
padding: 0;
}
.mentor_text_item {
display: none;
font-size: 18px; font-size: 1.8rem;
line-height: 1.5;
}
.mentor_text_item.is-on { display: block; }
.mentor_box_pages {
text-align: right;
vertical-align: middle;
}
.mentor_box_pages .button.mentor_pageto.current {
background: #818181;
cursor: default;
}
/* $FLASH
========== */
/* Main container */
.flash {
margin-bottom: 20px;
}
.flash .alert {
background: #eee;
padding: 10px;
font-size: 14px; font-size: 1.4rem;
border: 1px solid #ddd;
}
.flash .alert.error { color: darkred; }
.flash .alert.success { color: darkgreen; }
/* $NAV
========== */
.nav.inline li {
display: inline;
list-style-type: none;
margin-right: 20px;
}
.nav.primary {
list-style-type: none;
border: 0;
width: 100%;
margin: 15px 0 0 0;
padding: 0;
overflow: visible;
display: table;
border-collapse: collapse;
border-width: 0;
}
.nav.primary li {
display: table-cell;
text-align: center;
background: #fff;
border-right: 3px solid #fff;
padding-bottom: 5px;
width: 14%;
position: relative;
}
.nav.primary li a {
color: #818180;
font-weight: bold;
font-size: 13px;
padding: 8px 0;
text-decoration: none;
display: block;
background: #fff;
border-style: solid;
border-width: 5px 0 0 0;
border-color: #fff;
}
.nav.primary li .area:hover,
.nav.primary li .area.on {
color: #000;
border-style: solid;
border-width: 5px 0 0 0;
}
.nav.primary li .area.about:hover, .nav.primary li .area.about.on { border-color: #8fc7bb; }
.nav.primary li .area.time:hover, .nav.primary li .area.time.on { border-color: #ffcc00; }
.nav.primary li .area.work:hover, .nav.primary li .area.work.on { border-color: #cc3300; }
.nav.primary li .area.activity:hover, .nav.primary li .area.activity.on { border-color: #8cc865; }
.nav.primary li .area.social:hover, .nav.primary li .area.social.on { border-color: #6699cc; }
.nav.primary li .area.food:hover, .nav.primary li .area.food.on { border-color: #5ba9dd; }
.nav.primary li .area.planner:hover, .nav.primary li .area.planner.on { border-color: #dde56e; }
.nav.primary li .area.dietassess:hover, .nav.primary li .area.dietassess.on { border-color: #e86955; }
.nav.primary li .area.support:hover, .nav.primary li .area.support.on { border-color: #6b559f; }
.footer-wrapper {
border-top: 3px solid #e1e0e1;
background: #faf9fa;
padding: 25px 0;
margin-top: 40px;
}
.nav.footer {
margin: 0;
padding: 0;
}
.nav.footer li {
padding: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
}
.nav.footer li:last-child {
border-right-width: 0;
}
.nav.footer li a {
color: #000;
text-decoration: none;
}
.nav.footer li .sep {
margin: 0 5px;
}
/* SUBNAV
========= */
.nav.primary li ul {
position: absolute;
z-index: 999;
padding: 0px;
display: none;
padding-top: 5px;
-webkit-box-shadow: 0px 5px 7px 1px rgba(138,138,138,0.56);
-moz-box-shadow: 0px 5px 7px 1px rgba(138,138,138,0.56);
box-shadow: 0px 5px 7px 1px rgba(138,138,138,0.56);
}
.nav.primary li.area:hover ul {
display: block;
}
.nav.primary li ul li {
display: block;
width: auto;
border-width: 0px 0px 1px 0px;
border-style: solid;
padding-bottom: 0px;
}
.nav.primary li ul li a {
padding: 10px 5px;
background: transparent;
border:none;
}
.nav.primary li ul li a:hover {
color: #fff;
}
.nav.primary li.area.about ul li:hover { background: : #8fc7bb; }
.nav.primary li.area.time ul li:hover { background: #ffcc00; }
.nav.primary li.area.work ul li:hover { background: #cc3300; }
.nav.primary li.area.activity ul li:hover { background: #8cc865; }
.nav.primary li.area.social ul li:hover { background: #6699cc; }
.nav.primary li.area.food ul li:hover { background: #5ba9dd; }
.nav.primary li.area.planner ul li:hover { background: #dde56e; }
.nav.primary li.area.support ul li:hover { background: #6b559f; }
.nav.primary li.area.about ul li { color: #8fc7bb; border-color: #8fc7bb;}
.nav.primary li.area.time ul li { color: #ffcc00; border-color: #ffcc00;}
.nav.primary li.area.work ul li { color: #cc3300; border-color: #cc3300;}
.nav.primary li.area.activity ul li { color: #8cc865; border-color: #8cc865;}
.nav.primary li.area.social ul li { color: #6699cc; border-color: #6699cc;}
.nav.primary li.area.food ul li { color: #5ba9dd; border-color: #5ba9dd;}
.nav.primary li.area.planner ul li { color: #dde56e; border-color: #dde56e;}
.nav.primary li.area.support ul li { color: #6b559f; border-color: #6b559f;}
/* $FORMS
========== */
.light .text-input {
padding: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
border: 0;
display: block;
margin: 0 0 10px 0;
}
.choice {
margin: 10px 0;
text-align: right;
}
.choice.choice-2 :first-child {
float: left;
}
form label {
display: block;
margin-bottom: 0.5rem;
}
form label.question {
font-weight: bold;
}
/*form input[type=text], form input[type=email], form input[type=password], form select {
width: 99%;
}*/
form .inline-input > * {
width: auto;
}
form .error {
color: #f00;
font-weight: normal;
/*margin: 5px 0; */
}
/* Jamie's button:
.button {
-webkit-appearance: none;
background: #000;
border: none;
color: #fff;
display: inline-block;
font-size: 1.2rem;
font-weight: bold;
padding: 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
*/
.form .row {
margin-bottom: 20px;
}
.form .question {
font-size: 16px; font-size: 1.6rem;
line-height: 1.4;
font-weight: bold;
}
.form .text-input {
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #818180;
border: 1px solid #ccc;
background-color: #f8f8f8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 10px;
position: relative;
*behavior: url(/assets/css/boxsizing.htc);
/* These break things, like dropdowns getting closed... no rounded edges for text inputs for oldIE then!: */
/* behavior: url(/assets/pie/PIE.htc);
-pie-watch-ancestors: 1;
-pie-lazy-init:true;
-pie-poll:false; */
}
.form .text-input.white { background-color: #fff; }
.form .text-input.medium {
padding: 8px;
font-size: 16px; font-size: 1.6rem;
}
.form .text-input.big {
padding: 10px;
font-size: 21px; font-size: 2.1rem;
}
.form .text-input.large {
padding: 10px;
font-size: 42px; font-size: 4.2rem;
color: #272727;
font-weight: bold;
border: 0;
}
.spinner.ui-spinner-input {
padding: 10px;
margin: 0;
max-width: 350px;
min-width: 150px;
min-height: 42px;
font-size: 42px; font-size: 4.2rem;
color: #272727;
font-weight: bold;
border: 0;
}
.form .dropdown {
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #818180;
border: 1px solid #ccc;
background-color: #f8f8f8;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.form .dropdown.big {
padding: 10px;
background-color: #f8f8f8;
color: #959595;
font-weight: bold;
border: 0;
}
.form .text-input:focus {
outline: 0;
}
.form .radio,
.form .radios > label {
margin-bottom: 10px;
position: relative;
padding: 0 0 0 20px;
}
.form .radio input,
.form .radios > label > input {
position: absolute;
top: 2px;
left: 0;
}
.question_grid .question_header th:first-child { border-radius: 10px 0 0 0; }
.question_grid .question_header th:last-child { border-radius: 0 10px 0 0; }
.question_grid .answer_label {
width: 115px;
font-size: 18px; font-size: 1.8rem;
text-align: center;
color: #fff;
padding: 10px 0;
}
.question_grid .question_title {
padding: 20px 20px 20px 30px;
font-size: 18px; font-size: 1.8rem;
color: #272727;
vertical-align: top;
}
.question_unknown {
margin-top: 10px;
}
.question_unknown_title {
display: inline;
margin-left: 10px;
}
.question_grid .question_input {
padding: 20px 0 0 0;
text-align: center;
vertical-align: top;
}
ol#review-questions {
font-weight: normal;
list-style-position: inside;
padding-left: 0;
}
ol#review-questions li {
margin-bottom: 20px;
border-bottom: 1px solid #d7d7d7;
padding-bottom: 20px;
margin-top: 20px;
}
.review_answer {
font-weight: bold;
padding-right: 10px;
font-size: 1.2em;
padding-top: 2px;
float: left;
display: block;
}
/* $HOME
========== */
.home_content {
display: block;
padding-top: 70px;
text-align: center;
}
.homelogo_box {
width: 340px;
margin: 0 auto;
}
.home_logo {
display: block;
margin-bottom: 15px;
}
.tagline {
text-align: center;
font-size: 23px; font-size: 2.3rem;
color: #b0b0b0;
font-weight: bold;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 20px;
}
.login_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
}
.login_box, .new_user {
width: 328px;
float: left;
text-align: center;
margin-bottom: 20px;
padding: 0 20px;
border-right: 2px solid #eee;
}
.login_box .row {
text-align: left;
}
.page-home .sign-up-text {
float: left;
margin: 0;
}
.page-home .sign-up-button {
float: right;
margin: 0;
padding: 12px 0;
}
.signup_box {
width: 328px;
float: right;
padding: 0 20px;
}
.signup_box p {
text-align: left;
}
.login_icon,
.login_icon span {
display: block;
float: left;
width: 40px;
height: 40px;
margin: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius: 5px;
}
.login_icon span {
float: none;
}
.login_icon .icon-user { background-image: url(../img/btn-user.png); }
.login_icon .icon-pass { background-image: url(../img/btn-pass.png); }
.login_box .input {
margin: 0 0 20px 0;
text-align: right;
}
.login_box .text-input.medium {
height: 40px;
max-height: 40px;
font-size: 13px; font-size: 1.3rem;
font-weight: bold;
width: 260px;
}
.login_box .button.medium, .new_user .button {
width: 260px;
padding: 0;
font-size: 18px; font-size: 1.8rem;
}
.login_forgotten {
text-align: right;
}
.login_forgotten a {
font-size: 14px; font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
}
.page-home .register {
text-align: center;
}
.new_user_text {
color: #d6d3d3;
font-size: 14px; font-size: 1.4rem;
font-weight: bold;
}
/* $SLIDERS
*
* Global stuff for sliders
*
========== */
/* UL to hold slider rows */
.sliders {
list-style: none;
padding: 20px;
margin: 0;
background: #f5f5f5; /* To eee */
background: #f5f5f5;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
behavior: url(/assets/pie/PIE.htc);
}
/* Each row of slider name, slider bar, input etc */
.slider_item {
border-bottom: 1px solid #e3e3e3;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
display: block;
}
.slider_item:last-child {
border-bottom: 0;
}
/* Caption/heading of each item */
.slider_item_name {
font-size: 17px; font-size: 1.7rem;
color: #272727;
font-weight: bold;
display: block;
margin: 0 0 10px 0;
}
/* Hidden description div */
.slider_item_description {
display: none;
}
/* Wrapper for total input box. Floats next to slide */
.slider_item_total {
position: relative;
width: 70px;
margin-right: 20px;
float: left;
}
.slider_item_total > input.numeric {
width: 40px;
text-align: center;
font-size: 15px; font-size: 1.5rem;
font-weight: bold;
color: #272727;
border: 1px solid #d3d3d3;
display: block;
padding: 10px 0;
line-height: 1;
}
.slider_item_total > span {
color: #c4c4c4;
font-size: 12px; font-size: 1.2rem;
font-weight: bold;
}
.slider_container {
float: left;
width: 390px;
line-height: 36px;
vertical-align: middle;
}
.slider_note {
float: left;
width: 390px;
text-align: left;
vertical-align: middle;
}
/* jQuery UI slider customisation. What an adventure! */
/* Main horizontal slider area */
.ui-slider-horizontal {
height: 9px; /* main height the coloured bit should be */
border: 0;
background: #e6e6e6; /* Main BG colour */
padding: 5px; /* Padding - so the background can be seen */
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
behavior: url(/assets/pie/PIE.htc);
-webkit-box-shadow: inset 0px 5px 5px 0px rgba(207,206,206,1);
-moz-box-shadow: inset 0px 5px 5px 0px rgba(207,206,206,1);
box-shadow: inset 0px 5px 5px 0px rgba(207,206,206,1);
width: 250px; /* Specify a width to ensure it stays where it should be. Should probably be a percentage? */
margin: 0 10px; /* Margins to allow for buttons */
top: -3px; /* Move it up a bit. Hack seemingly needed for "line-height vertical-align middle" stuff */
}
/* The handle that slides. background-image needs to be set explicitly elsewhere */
.ui-slider-horizontal .ui-slider-handle {
cursor: pointer;
color: #000;
padding: 0;
margin: 0;
border: 0;
text-shadow: 0;
text-decoration: none;
width: 36px;
height: 36px;
top: -7px; /* Positioning */
margin-left: -18px; /* Positioning */
display: block;
background: transparent;
}
/* Coloured bar for the range */
.ui-slider-horizontal .ui-slider-range {
height: 8px;
margin: 5px;
}
/* [-] and [+] buttons either side */
.slider_button {
width: 24px;
height: 24px;
background-repeat: no-repeat;
overflow: hidden;
text-indent: -999px;
}
.slider_button.down { background-position: 0 0; }
.slider_button.up { background-position: -25px 0; }
/* $WORK
========== */
.graphs_bg {
padding: 15px 0;
background: #f4f4f4;
}
.graphs_container {
margin: 10px 0;
text-align: center;
width: 100%;
}
.graphs_container > * {
display: inline-block;
height: 400px;
margin: 0 10px;
width: 28%;
}
#graph_summary {
width: 800px;
margin: 0 auto;
height: 300px;
}
/* Finance entry stuff */
/* Custom touching columns for parents & categories */
.finance_left,
.finance_right {
display:inline;
float: left;
position: relative;
margin: 0;
}
.finance_left {
margin-left: 10px;
width: 400px;
}
.finance_right {
width: 540px;
}
/* Left side parents */
.finance_parents {
list-style: none;
margin: 0;
padding: 0;
}
.finance_parent {
padding: 30px 30px 20px 30px;
border-right: 5px solid #fff;
background: #fff;
}
/* Alternating BG colours */
.finance_parent.fp0 { background-color: #f4f4f4; }
.finance_parent.fp1 { background-color: #f8f8f8; }
/* Active */
.finance_parent.has-data:hover,
.finance_parent.is-selected { background-color: #cde9ff; cursor: pointer; }
.parent_title {
display: inline;
width: 180px;
float: left;
color: #272727;
font-weight: bold;
font-size: 14px; font-size: 1.4rem;
}
.parent_total {
display: inline;
width: 110px;
float: left;
margin-left: 30px;
}
/* Finance slider customisation */
.finance_entry .sliders {
padding: 20px 20px 0 20px;
background: #f7f7f7;
-webkit-border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
border-radius: 0 0 10px 0;
behavior: url(/assets/pie/PIE.htc);
}
/* Each LI for a slider "category" */
.finance_entry .slider_item {
border: 0;
padding-bottom: 45px;
border: 0;
}
.finance_entry .slider_item_total { width: 120px; }
.finance_entry .slider_container { width: 360px; }
.finance_entry .ui-slider-horizontal { width: 220px; }
.finance_entry .slider_item_total > span { color: #272727; }
.finance_entry .slider_item_total > input.numeric {
width: 80px;
display: inline;
text-align: right;
line-height: 1;
padding: 5px;
}
.finance_entry .slider_item_description {
display: block;
margin-top: 30px;
font-size: 11px; font-size: 1.1rem;
line-height: 1.3;
}
/* Finance slider customisation on Graphs page */
.finance_update .tabs .button span { font-weight: normal; }
.finance_update .slider_item_total { width: 90px; }
.finance_update .slider_container { width: 310px; }
.finance_update .ui-slider-horizontal { width: 180px; }
.finance_update .slider_item_total > input.numeric {
width: 60px;
display: inline;
text-align: right;
line-height: 1;
padding: 5px;
}
/* $TIME / $WORK (??)
========== */
.slider_wrap {
text-align: center;
vertical-align: middle;
width: 100%;
}
.slider_button {
cursor: pointer;
display: inline-block;
margin: 0 10px;
}
/* $TIME
========== */
.time_entry {
position: relative;
}
.time_entry .graph {
height: 400px;
width: 400px;
}
.time_entry .graph_wrapper {
position: absolute;
bottom: 60px;
}
.time_entry .graph_wrapper.graph_wrapper-small {
width: 320px;
height: 320px;
}
.time_entry .graph_wrapper.graph_wrapper-small .graph {
width: 320px;
height: 320px;
margin: 0 auto;
}
.time_entry .graph_wrapper.graph_wrapper-stacked {
position: relative;
bottom: auto;
margin: 0 auto 20px auto;
}
.time_entry .choice {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
margin-top: 20px;
}
.time_entry #graph {
}
/* Pie segment text should be bold */
.time_entry .graph g text,
.dashboard_content .graph g text {
font-weight: bold;
}
.time_entry .tabs {
border: 0;
list-style: none;
margin: 0;
padding-left: 0;
width: 100%;
background: #f3f3f3;
}
.time_entry.graphs .tabs {
border-top: none;
float: left;
}
.time_entry.graphs .tabs.key {
float: right;
}
.time_entry .tabs li {
padding: 15px;
position: relative;
}
.time_entry.graphs .tabs li {
border-bottom: 1px solid #ccc;
border-left: none;
border-right: 1px solid #ccc;
padding: 15px;
position: relative;
}
.time_entry.graphs .tabs.key li {
border-bottom: none;
border-right: none;
}
.time_entry .tabs li a {
text-decoration: none;
}
.time_entry .tabs li .slider_container {
}
/*.time_entry .total {
font-size: 1.3rem;
font-weight: bold;
position: absolute;
right: 10px;
top: 13px;
}*/
/* .time_entry .total input {
font-size: 1.3rem;
font-weight: bold;
width: 30px;
} */
.time_entry.graphs .tab {
display: none;
float: right;
padding: 20px;
width: 45%;
}
.graphs_container.pies > * {
height: 300px;
width: 400px;
}
.graph_titles {
margin: 0 0 10px;
text-align: center;
width: 100%;
}
.graph_titles > * {
display: inline-block;
margin: 0 10px;
text-align: center;
width: 400px;
}
/*
$PLANNER
Main time planner grid
---------- */
.time_planner {
width: 100%;
}
/* Plan week table */
.plan_calendar {
width: 100%;
border-collapse: separate;
}
/* Time column heading */
.plan_timespan td {
font-size: 13px; font-size: 1.3rem;
font-weight: bold;
color: #272727;
text-align: center;
padding: 5px 0;
}
/* rows for each day */
.plan_day { }
.plan_day td, .plan_day th {
border: 1px solid #fff;
box-sizing: border-box;
}
/* day heading */
.plan_day th {
width: 150px;
background: #ffd300;
text-align: right;
padding: 0 10px 0 0;
font-size: 14px; font-size: 1.4rem;
}
.plan_calendar.planner .plan_day th {
background: #dde56e;
color: #818180;
}
.plan_calendar tbody tr:first-child th { border-radius: 10px 10px 0 0; behavior: url(/assets/pie/PIE.htc); }
.plan_calendar tbody tr:last-child th { border-radius: 0 0 10px 10px; behavior: url(/assets/pie/PIE.htc); }
.plan_calendar, .plan_remaining {
margin: 0 0 20px 0;
}
.plan_calendar td .blank {
width: 100%;
height: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(/assets/pie/PIE.htc);
}
/* Hour blocks in the main planner */
.plan_calendar .hour_block {
width: 100%;
height: 100%;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(/assets/pie/PIE.htc);
background-image: url(../img/time/remove.png);
background-position: -100% -100%;
background-repeat: no-repeat;
cursor: default;
}
.hour_block.has_time:hover {
background-position: 50% 50%;
cursor: pointer;
}
.plan_calendar .tr1 td .hour_block { background-color: #eceaea; }
.plan_calendar .tr0 td .hour_block { background-color: #f5f3f3; }
.block_holder {
width: 100%;
height: 100%;
display: block;
}
.block {
border: 1px solid #333;
}
/* Time planner specific block styles */
.page-time.page-planner .plan_day td {
border-left: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
}
.page-time.page-planner .plan_calendar .hour_block {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 57px;
}
.page-time.page-planner .plan_calendar .hour_block.has_time.left_end {
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
margin-left: 3px;
width: 54px;
}
.page-time.page-planner .plan_calendar .hour_block.has_time.right_end {
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: 3px;
width: 54px;
}
.page-time.page-planner .plan_calendar .hour_block.has_time.left_end.right_end {
width: 51px;
}
/* Time remaining blocks to drag on to planner */
.time_buckets {
list-style: none;
margin: 0;
padding: 0;
margin-left: -35px;
}
.time_bucket {
width: 75px;
height: 120px;
float: left;
display: block;
margin-left: 35px;
text-align: center;
}
.time_bucket_hours {
display: block;
margin: 0 auto 10px auto;
width: 54px;
height: 54px;
line-height: 54px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px; font-size: 1.4rem;
color: #272727;
font-weight: bold;
background-image: url(../img/time/clock-face.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}
.time_bucket_hours.tc_1 {
background-image: url(../img/time/tc-icon-work.png);
}
.time_bucket_hours.tc_2 {
background-image: url(../img/time/tc-icon-hobbies.png);
}
.time_bucket_hours.tc_3 {
background-image: url(../img/time/tc-icon-care.png);
}
.time_bucket_hours.tc_4 {
background-image: url(../img/time/tc-icon-free-time.png);
}
.time_bucket_hours.tc_5 {
background-image: url(../img/time/tc-icon-physical-activity.png);
}
.time_bucket_hours.tc_6 {
background-image: url(../img/time/tc-icon-social.png);
}
.time_bucket_hours.tc_7 {
background-image: url(../img/time/tc-icon-household.png);
}
.time_bucket.selected_brush .time_bucket_hours {
border: 3px solid #000;
}
.time_bucket_name {
display: block;
margin: 0 auto;
font-size: 12px; font-size: 1.2rem;
color: #000;
font-weight: bold;
word-wrap: break-word;
}
.plan_remaining .block {
display: inline-block;
margin: 5px;
}
.graph_wrapper {
width: 400px;
height: 400px;
position: relative;
}
/* Bit of text centred in the middle of the pie chart */
.pie_hole_text {
width: 100%;
text-align: center;
background: transparent;
font-size: 30px;
visibility: hidden;
}
.pie_hole_text > p {
margin: 0 auto;
font-weight: bold;
max-width: 50%;
}
.pie_hole_text > p > span {
display: block;
}
/* Time top changes */
.time_changes,
.time_change {
padding: 0;
list-style: none;
margin-top: 0;
margin-bottom: 0;
}
/* Very top change */
.time_change.is-top {
margin: 0 0 45px 0;
color: #272727;
}
.time_change.is-top .time_change_title {
font-size: 32px; font-size: 3.2rem;
font-weight: bold;
margin: 0 0 20px 0;
}
.time_change.is-top .time_change_comment {
font-size: 24px; font-size: 2.4rem;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.2;
}
/* Other changes */
.time_change.is-other {
margin: 0 0 5px 0;
padding: 0 0 0px 0;
}
.time_change.is-other .time_change_title {
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
margin: 60px 0 15px 0;
}
.time_change.is-other .time_change_comment {
font-size: 14px; font-size: 1.4rem;
font-weight: normal;
line-height: 1.3;
}
.time_change.is-other .time_change_title.change_simplified {
margin: 0;
}
/* Icon to the left of each change title & description (variations below) */
.time_diff_icon {
background-position: 0 0;
background-repeat: no-repeat;
}
.time_diff_icon.size-large { background-image: url(../img/time/diff-large.png); width: 67px; height: 67px; margin: 0 0 10px 0; }
.time_diff_icon.size-small { background-image: url(../img/time/diff-small.png); width: 40px; height: 40px; margin: 0 0 20px 0; }
.time_diff_icon.size-large.type-increase { background-position: 0 0; }
.time_diff_icon.size-large.type-decrease { background-position: 0 -67px; }
.time_diff_icon.size-small.type-increase { background-position: 0 0; }
.time_diff_icon.size-small.type-decrease { background-position: 0 -40px; }
.time_diff_word {
color: #8e8c8c;
font-size: 16px; font-size: 1.6rem;
font-weight: bold;
}
/* Callout */
.callout {
background: transparent;
position: relative;
}
.callout_inner {
border: 5px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 15px 30px;
margin-left: 12px;
background: #fff;
}
.callout_title {
font-size: 20px; font-size: 2rem;
font-weight: bold;
margin: 0 0 15px 0;
}
.callout_text {
font-size: 15px; font-size: 1.5rem;
color: #000;
line-height: 1.5;
}
.callout_arrow {
position: absolute;
top: 50%;
left: 0;
margin-top: -13px;
background: url(../img/callout/arrow.png) 0 0 no-repeat;
width: 17px;
height: 26px;
}
.callout_arrow.food { background: url(../img/callout/food-arrow.png) 0 0 no-repeat; }
.callout_arrow.activity { background: url(../img/callout/arrow-activity.png) 0 0 no-repeat; }
.callout_arrow.social { background: url(../img/callout/arrow-social.png) 0 0 no-repeat; }
/* Jquery UI tooltip with arrow */
body .ui-tooltip.tooltip_inner {
border: 5px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tooltip_arrow {
position: absolute;
bottom: 0;
left: 50%;
margin-bottom: -17px;
margin-left: -13px;
background: url(../img/callout/arrow-down.png) 0 0 no-repeat;
width: 26px;
height: 17px;
}
.ui-tooltip.time .tooltip_arrow { background: url(../img/callout/arrow-down-time.png) 0 0 no-repeat; }
.ui-tooltip.work .tooltip_arrow { background: url(../img/callout/arrow-down-work.png) 0 0 no-repeat; }
.ui-tooltip.activity .tooltip_arrow { background: url(../img/callout/arrow-down-activity.png) 0 0 no-repeat; }
.ui-tooltip.social .tooltip_arrow { background: url(../img/callout/arrow-down-social.png) 0 0 no-repeat; }
.ui-tooltip.food .tooltip_arrow { background: url(../img/callout/arrow-down-food.png) 0 0 no-repeat; }
.ui-tooltip.planner .tooltip_arrow { background: url(../img/callout/arrow-down-planner.png) 0 0 no-repeat; }
/* .hover_box {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.hover_box .content {
background: #f4f4f4;
border-radius: 0 0 10px 10px;
padding: 10px;
} */
/* $SUMMARY
========== */
.summary_title {
border-top: 2px solid #dedede;
border-bottom: 2px solid #dedede;
padding: 10px 0 0 0;
margin-bottom:10px;
}
.summary_title h4 {
font-weight: bold;
font-size: 16px;
font-size: 1.6rem;
}
.summary_diff_icon {
background-position: 0 0;
background-repeat: no-repeat;
}
.summary_diff_icon.size-small { background-image: url(../img/generic/diff-small.png); width: 40px; height: 30px; margin: -8px 0 0 0; }
.summary_diff_icon.size-small.type-increase { background-position: 0 0; }
.summary_diff_icon.size-small.type-decrease { background-position: 0 -40px; }
.summary {
border: 1px solid #ccc;
font-size: 1.5rem;
margin-bottom: 2rem;
padding: 20px;
}
.summary .summary-current {
float: left;
width: 45%;
}
.summary .summary-retired {
float: right;
width: 45%;
}
.todo {
float: left;
border: 1px solid #ccc;
margin: 3% 0 0 3%;
width: 40%;
}
.hints {
border: 1px solid #ccc;
font-size: 1.5rem;
margin-bottom: 2rem;
padding: 20px;
}
.hints ol {
list-style-type: upper-alpha;
margin-left: 20px;
padding: 0 0 0 20px;
}
.hints li {
margin-bottom: 10px;
}
/* $ACTIVITY
========== */
.activity-planner .tabs {
list-style: none;
margin: 0 0 10px 0;
padding-left: 0;
border: 0;
float: none;
margin-bottom: -1px;
text-align: left;
width: 100%;
}
.activity-planner .tabs li {
padding: 0;
position: relative;
display: inline;
font-size: 14px; font-size: 1.4rem;
}
.activity-planner .tabs li.active a {
background: #f2f2f2;
}
.activity-planner .tabs li a {
display: inline-block;
padding: 10px 0;
width: 30%;
text-align: center;
text-decoration: none;
color: #000;
}
.activity-planner .tabs li a {
}
.activity-planner .tab {
background: #f2f2f2;
padding: 15px;
}
.activity-planner .week {
width: 100%;
border-collapse: collapse;
}
.activity-planner .week th,
.activity-planner .week td {
padding: 4px;
}
.activity-planner .week .weekday {
width: 100px;
text-align: right;
}
.activity-planner .week .block_holder {
background: #fff;
width: 25px;
height: 25px;
}
.activity-planner .week .block {
border: 0;
width: auto;
height: auto;
overflow: hidden;
}
.activity-planner .week .block.has-activity {
width: 100%;
height: 100%;
background: rgb(255, 255, 204);
border: 1px solid #000;
}
/* $STEPS
---------- */
/* Block containing form inputs for step/time entry */
.step_entry {
background: #f6f6f6; /* Old browsers */
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
behavior: url(/assets/pie/PIE.htc);
padding-bottom: 20px;
}
/* An individual grid column for the time entry label & input */
.steps_day {
text-align: center;
padding: 0;
}
.steps_day label {
color: #c6c2c1;
font-weight: bold;
font-size: 13px; font-size: 1.3rem;
display: block;
margin: 0 0 5px 0;
}
.steps_day .text-input {
width: 60px;
text-align: center;
margin: auto;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
.steps_total label {
color: #272727;
}
.steps_total .text-input {
width: 70px;
border-width: 2px;
border-color: #acd64c;
padding: 5px 0;
}
.steps_describe label {
margin-right: 40px;
display: inline;
font-weight: bold;
color: #c5c1c0;
}
/* $SCORE
---------- */
.step_score_level {
list-style: none;
padding: 0 0 0 50px;
background-position: 0 0;
background-repeat: no-repeat;
margin: 0 0 30px 0;
}
.step_score_level .level_title { font-weight: bold; margin: 0 0 5px 0; }
.step_score_level.level_1 { background-image: url(../img/activity/icon-level-1.png); }
.step_score_level.level_2 { background-image: url(../img/activity/icon-level-2.png); }
.step_score_level.level_3 { background-image: url(../img/activity/icon-level-3.png); }
.step_score_level.level_1 .level_title { color: #d65c35; } /* poor */
.step_score_level.level_2 .level_title { color: #ffcc00; } /* average */
.step_score_level.level_3 .level_title { color: #acd55b; } /* awesome */
.step_score_level > p {
font-size: 14px; font-size: 1.4rem;
}
/* $GOALS
---------- */
.goal_entry {
background: #f4f4f4;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
behavior: url(/assets/pie/PIE.htc);
}
.goal_list {
padding: 0;
margin: 0 0 0 -20px;
list-style: none;
}
.goal {
margin: 0 0 20px 20px;
background: transparent;
width: 95%;
display: table;
/* float: left; */
height: 42px;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #dedede;
}
.goal_info {
display: table-row;
background: #f8f8f8;
/* width: 380px; */
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* float: left; */
}
.goal_info:not(.contains_custom) {
cursor: pointer;
}
.goal_icon {
width: 56px;
height: 100%;
text-align: center;
margin-right: 20px;
display: table-cell;
position: relative;
}
.goal_icon > img {
border: 0;
vertical-align: middle;
top: 50%;
position: absolute;
left: 50%;
margin-left: -13px;
margin-top: -12px;
display: none;
}
.goal.is-checked .goal_icon > img {
display: block;
}
.goal + .goal_extra {
/*display: none;*/
margin: -10px 0 20px 20px;
display: none;
/*outline: 1px solid blue;*/
position: relative;
padding-left: 66px; /* icon + title's padding of 10px */
width: 95%; /* to match info above */
border: 0;
/*background: #f8f8f8;*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.goal.is-checked + .goal_extra {
display: block;
}
.goal_title {
display: table-cell;
font-size: 16px; font-size: 1.6rem;
color: #818180;
font-weight: bold;
height: 40px;
line-height: 25px;
padding: 0;
border: 0;
background: inherit;
outline: 0;
padding-left: 10px;
vertical-align: middle;
}
.goal_title.goal_custom {
width: 300px;
max-width: 70%;
}
.goal_input > input[type=radio],
.goal_input > input[type=checkbox] {
/*visibility: hidden;
float: right;
width: 40px;
height: 44px;
line-height: 44px;
vertical-align: middle;
display: none;*/
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.goal.long, .goal.type-healthier-heart {
width: 100%;
}
.goal.long .goal_info, .goal.type-healthier-heart .goal_info {
width: 840px;
}
/* $SMALL GOAL
---------- */
.goal_list.is-small {
margin: 0;
}
.goal_list.is-small .goal {
margin: 0 0 10px 0;
width: 100%;
height: 30px;
}
.goal_list.is-small .goal_info {
width: 240px;
}
.goal_list.is-small .goal_icon {
width: 34px;
height: 30px;
margin-right: 10px;
}
.goal_list.is-small .goal_icon > img {
width: 34px;
height: auto;
margin-left: -17px;
margin-top: -12px;
}
.goal_list.is-small .goal_title {
font-size: 13px; font-size: 1.3rem;
height: 30px;
line-height: 30px;
}
.goal .goal_icon {
background: #cdcccc;
}
/* Activity goals */
.page-activity .goal.is-checked .goal_icon {
background: #8cc865;
color: white;
padding-top: 7px;
font-weight: bold;
font-size: 1.2em;
}
.page-activity .goal.is-checked .goal_title {
color: #8cc865;
}
/* Food goals */
.page-food .goal.is-checked .goal_icon {
color: #ff6633;
/*
background: #ff814f;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjUxMjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff814f 0%, #ff5125 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff814f), color-stop(100%,#ff5125));
background: -webkit-linear-gradient(top, #ff814f 0%,#ff5125 100%);
background: -o-linear-gradient(top, #ff814f 0%,#ff5125 100%);
background: -ms-linear-gradient(top, #ff814f 0%,#ff5125 100%);
background: linear-gradient(to bottom, #ff814f 0%,#ff5125 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff814f', endColorstr='#ff5125',GradientType=0 );
*/
}
.page-food .goal.is-checked .goal_title {
color: #5ba9dd;
}
.page-food .goal.is-checked .goal_icon.motivator {
background: #5ba9dd;
color: white;
padding-top: 7px;
font-weight: bold;
font-size: 1.2em;
}
/* $ACTIVITIES-TYPES
---------- */
.search_filter {
background: #f4f4f4;
border-radius: 0 0 10px 10px;
}
/* $BARRIERS
---------- */
.barrier_inner {
padding: 20px;
display: none;
border-bottom: 2px solid #e3e3e3;
}
.barrier_intro {
font-size: 18px; font-size: 1.8rem;
color: #272727;
font-weight: bold;
margin: 0 0 40px 0;
}
.barrier_list {
margin: 0;
padding: 0;
list-style: none;
}
.barrier {
margin: 0 0 20px 0;
}
.barrier label {
font-size: 16px; font-size: 1.6rem;
color: #272727;
font-weight: bold;
}
.solutions {
margin: 30px 0;
display: none;
}
.solution_title {
color: #fff;
}
.solution_list {
background-color: #f4f4f4;
padding: 20px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
behavior: url(/assets/pie/PIE.htc);
list-style: none;
}
.solution { margin: 0 0 20px 0; }
.solution label { color: #989593; }
.solution.is-selected label { /* color: #8cc865; */ }
.page-targets {
}
.page-targets .steps-summary-input label {
}
.page-targets .steps-summary-input input {
width: 230px;
}
.steps-target {
padding: 30px 0 0 0;
}
.steps-target > .row {
margin-left: 15px;
margin-right: 15px;
}
.steps-target label {
font-size: 21px; font-size: 2.1rem;
font-weight: normal;
}
.steps-target .text-input.big {
width: 150px;
text-align: right;
}
.steps-target p {
margin: 0 0 10px 0;
line-height: 1.4;
}
.activity-items {
padding-left: 0;
padding-right: 0;
}
.activity-items .item {
margin: 5px 10px;
display: inline;
float: left;
position: relative;
}
.activity-items .item .title {
font-size: 20px; font-size: 2rem;
width: 320px;
line-height: 30px;
height: 30px;
margin: 8px 5px 8px 0;
padding-left: 10px;
float: left;
display: block;
vertical-align: middle;
background: #fff;
}
.activity-items .item input {
float: left;
margin: 17px 12px;
}
.activity-items .item .icon-wrapper {
width: 50px;
height: 50px;
position: relative;
float: left;
background-color: #aaa;
}
.activity-items .item .icon {
width: 38px;
height: 38px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -19px;
margin-left: -19px;
background-image: url(../img/activity/types.png);
background-position: 0 0;
background-repeat: no-repeat;
}
.activity-items .type-weight .icon { background-position: 0 0; }
.activity-items .type-bones .icon { background-position: -40px 0; }
.activity-items .type-fitter .icon { background-position: 0 -40px; }
.activity-items .type-meet .icon { background-position: -40px -40px; }
.activity-items .type-heart .icon { background-position: 0 -80px; }
.activity-items .type-social .icon { background-position: -40px -80px; }
.activity-items .type-cholesterol .icon { background-position: 0 -120px; }
.activity-items .type-stress .icon { background-position: -40px -120px; }
.activity-items .type-bloodpressure .icon { background-position: 0 -160px; }
.activity-items .type-happier .icon { background-position: -40px -160px; }
.activity-items .type-clothes .icon { background-position: 0 -200px; }
.activity-items .type-energised .icon { background-position: -40px -200px; }
.activity-items .type-good .icon { background-position: 0 -240px; }
.activity-items .type-diabetes .icon { background-position: -40px -240px; }
.activity-items .type-stronger .icon { background-position: 0 -280px; }
.activity-items .type-pain .icon { background-position: -40px -280px; }
.activity-items .type-balance .icon { background-position: 0 -320px; }
.activity-items .block {
border: none;
width: 150px;
}
.activity-items .block .item {
padding: 10px;
border-radius: 10px;
}
.activity-choices .block {
display: inline-block;
min-width: 180px;
min-height: 30px;
margin: 5px;
border: none;
}
.activity-choices .item {
padding: 5px;
border-radius: 10px;
text-align: center;
font-weight: bold;
cursor: move;
}
/*
.activity-choices .item .icon {
width: 38px;
height: 38px;
display: inline-block;
position: absolute;
top: 50%;
left: 6px;
margin-top: 6px;
background-image: url(../img/activity/choices.png);
background-position: 0 0;
background-repeat: no-repeat;
}
.activity-choices .choice-swimming .icon { background-position: 0 0; }
.activity-choices .choice-gym .icon { background-position: 0 -76px; }
.activity-choices .choice-exercise .icon { background-position: 0 -76px; }
.activity-choices .choice-golf .icon { background-position: 0 -38px; }
.activity-choices .choice-croquet .icon { background-position: 0 0; }
.activity-choices .choice-football .icon { background-position: 0 -38px; }
.activity-choices .choice-netball .icon { background-position: 0 -38px; }
.activity-choices .choice-badminton .icon { background-position: 0 -38px; }
*/
.activity-interest-box {
width: 280px;
height: 280px;
margin: 30px 0;
float: left;
border: dashed 5px;
border-radius: 30px;
background-position: 0 0;
background-repeat: no-repeat;
}
.activity-interest-box.hovering {
background-position: 0 -290px;
}
.activity-interest-box.want-to-try { background-image: url(../img/activity/bin-bg-want.png); margin-right: 45px; }
.activity-interest-box.maybe-try { background-image: url(../img/activity/bin-bg-maybe.png); margin-right: 45px; }
.activity-interest-box.bin-it { background-image: url(../img/activity/bin-bg-bin.png); }
.activity-interest-box .block_holder {
width: 100%;
height: 100%;
}
.activity-chossen-box {
width: 280px;
height: 280px;
margin: 30px 0;
float: left;
}
.activity-chossen-box.want-to-try { margin-right: 45px; }
.activity-chossen-box.maybe-try { margin-right: 45px; }
.activity-chossen-box h5 {
padding: 5px 10px 15px 10px;
border-radius: 10px;
text-align: center;
vertical-align: middle;
color: #666;
background: #f4f4f4;
}
.activity-chossen-box h5 .expand {
float: right;
border-radius: 10px;
height:35px;
width: 35px;
margin: -5px -10px -15px -10px;
z-index: -900;
background-image: url(../img/activity/arrow-down.png);
background-position: 7px 10px;
background-repeat: no-repeat;
}
.activity-chossen-box ul {
border-radius: 10px;
margin-top: -20px;
padding: 10px 5px 10px 5px;
background: #fafafa;
}
.activity-chossen-box ul li {
list-style: none;
padding: 5px 10px 3px 20px;
border-bottom: 2px solid #eee;
font-weight: bold;
}
.activity-chossen-box.good ul li { color: #abd64d; }
.activity-chossen-box.okay ul li { color: #f29100; }
.activity-chossen-box.poor ul li { color: #e20613; }
.activity-chossen-box ul li .remove {
width: 20px;
height: 20px;
float: right;
cursor: pointer;
}
.choice-goals {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.choice-goals td,
.choice-goals th {
border: 1px solid #ccc;
padding: 10px 5px;
text-align: center;
}
.choice-goals td {
border-top-width: 1px;
border-bottom-width: 1px;
}
.choice-goals thead th { }
.activity-action {
margin-bottom: 20px;
}
.activity-action .item {
width: 180px;
float: left;
margin-right: 15px;
}
.activity-action .fields-group {
display: inline-block;
}
.activity-action .control-expand {
margin-right: 20px;
}
.activity-action .control-expand .arrow-out {
margin-right: -40px;
margin-left: 15px;
}
.activity-action .control-expand:hover {
background-color: #e4e4e4;
color: #000;
}
.activity-action .control-expand.focused {
background-color: #e4e4e4;
color: #000;
}
.activity-action>.detail {
position: relative;
}
.action-fields {
position: absolute;
top: 30px;
left: 0px;
width: 180px;
min-height: 50px;
z-index: 999;
}
.action-fields.tab-boxes {
top: 30px;
left: 110px;
}
.tab-bar {
}
.tab-bar span {
display: block;
width: 110px;
border-top: solid 1px #eee;
margin-right: -4px;
text-align: center;
font-size: 14px;
font-size: 1.4rem;
}
.tab-bar span.selected {
background: #000;
color: #fff;
}
.action-fields .when-week {
padding: 10px 5px;
text-align: center;
}
.action-fields .when-week label {
display: inline;
}
.action-fields .when-day {
padding: 10px 5px;
text-align: left;
}
.action-fields .when-day input {
display: inline;
margin: 0 10px;
}
.action-fields .when-day label {
display: inline;
margin-right: 10px;
}
.action-fields .when-time {
padding: 10px 5px;
text-align: center;
}
.action-fields .when-time option {
width: 200px;
}
/* $PLANNED planned activities on the summary page
---------- */
.planned_activity {
height: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f4f4f4;
margin-bottom: 20px;
}
.planned_activity.col1 { background-color: #e5fee1; }
.planned_activity.col2 { background-color: #fde1e0; }
.planned_activity.col3 { background-color: #e1fef8; }
.planned_activity.col4 { background-color: #fffce4; }
.planned_activity_content,
.planned_activity_content > li {
display: block;
list-style: none;
padding: 0;
margin: 15px;
}
.planned_activity_content > li {
margin: 0 0 20px 0;
}
.planned_activity_label {
font-size: 16px; font-size: 1.6rem;
font-weight: bold;
color: #272727;
margin-right: 20px;
}
.planned_activity_data {
font-size: 20px; font-size: 2rem;
font-family: "Comic Sans MS";
font-weight: normal;
color: #272727;
border-bottom: 2px solid #8e8b88;
}
/* $SOCIAL
========== */
.social_field {
width: 660px;
height: 660px;
position: relative;
margin: 0 auto;
}
.social_field .me {
width: 130px;
height: 130px;
position: absolute;
left: 265px;
top: 265px;
border-radius: 50%;
border: 3px solid #999;
text-align: center;
}
.social_field .me .inner {
vertical-align: middle;
min-width: 130px;
min-height: 130px;
max-height: 130px;
padding-top: 35px;
}
.social_field .social_group {
width: 130px;
height: 130px;
position: absolute;
border-radius: 50%;
border: 3px solid #999;
text-align: center;
behavior: url(/assets/pie/PIE.htc);
}
.social_field .social_group .inner {
vertical-align: middle;
min-width: 130px;
min-height: 130px;
padding-top: 35px;
}
.social_field .tick {
width: 40px;
height: 40px;
top: 0;
left: 0;
position: relative;
margin: 0 auto;
border-radius: 10px;
border: 0;
background: #999;
}
.social_field label {
padding: 0 5px;
font-weight: bold;
color: #999;
}
.social_list {
list-style: none;
padding: 20px;
margin: 0;
background: #f5f5f5; /* To eee */
background: #f5f5f5;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.dashboard_pane .social_list {
padding: 5px;
margin-bottom: 20px;
}
.dashboard_pane .social.module-header__title {
font-size: 13px;
font-size: 1.3rem;
}
/* Each row of slider name, slider bar, input etc */
.social_list .person {
padding: 0 0 10px 0;
margin: 0 0 10px 0;
display: block;
position: relative;
}
.dashboard_pane .social_list .person {
padding: 0;
margin-bottom: 5px;
}
.social_list .person img.remove_person {
float: right;
cursor: pointer;
}
.social_list .text-input.medium {
width: 300px;
max-width: 70%;
padding: 5px 10px;
font-size: 13px; font-size: 1.3rem;
}
.social_list .add_person {
width: 20px;
height: 20px;
margin: 0 auto;
border-radius: 5px;
border: 0;
position: absolute;
padding: 3px 3px;
right: 0;
cursor: pointer;
}
.social_list .person:last-child {
border-bottom: 0;
}
/* social colours */
/* Range generated from http://www.bretttolbert.com/projects/colorscale/, divide gimp sat & val values by 10 before inputting */
.social_field .me.active {border-color: #6699cc;}
.social_field .me.active .tick {background: #6699cc;}
.social_field .me.active label {color: #6699cc;}
.social_field .disabled { border-color: #ddd;}
.social_field .disabled .tick {background: #ddd;}
.social_field .disabled label{color: #ddd;}
.social_field .social_group.active:hover, .social_field .social_group.disabled:hover { /* border-color: #888; */}
.social_field .active:hover .inner .tick, .social_field .social_group.disabled:hover .inner .tick { /* background: #666; */}
.social_field .active:hover .inner label, .social_field .social_group.disabled:hover .inner label {color: #666;}
.social_field .social_group.active {border-color: #6699cc;}
.social_field .social_group.active .tick {background: #6699cc;}
.social_field .social_group.active label {color: #6699cc;}
/* $SEARCH
---------- */
.new-person-link {
font-weight: bold;
color: #6194c8;
cursor: pointer;
padding-right: 20px;
background-position: right center;
background-repeat: no-repeat;
}
.new-person-link.closed {
background-image: url(../img/social/expand-right.png);
}
.new-person-link.opened {
background-image: url(../img/social/expand-down.png);
}
.search_groups {
border-bottom: 10px solid #6194c8;
}
.social_group_list,
.social_group {
list-style: none;
margin: 0;
padding: 0;
}
.social_group {
display: inline;
margin-right: 10px;
}
.social_group > a {
display: inline-block;
background: #6699cc;
padding: 10px 20px 5px 20px;
font-size: 16px; font-size: 1.6rem;
font-weight: bold;
background: #f4f4f4;
color: #a1a1a0;
text-decoration: none;
border-radius: 10px 10px 0 0;
}
.social_group .is-selected,
.social_group a:hover {
background: #6194c8;
color: #272727;
}
.page-relationships #graph_0 {
width: 940px;
height: 540px;
}
/* $CASE_STUDIES
---------- */
.case_study {
background: #f4f4f4;
}
/* $SUMMARY
---------- */
.social_work_interest {
/* the list */
padding-left: 20px;
}
.social_work_interest_item {
/* the list bullet */
font-weight: bold;
font-size: 25px;
vertical-align: middle;
}
.social_work_interest_item span {
/* text after the list bullet */
color: #000; /* bullet point used module colour, so set text to black */
font-size: 13px; font-size: 1.3rem;
vertical-align: middle;
}
.social_work_interest_item .social_work_response {
color: #666;
}
/* $RESOURCES
*
* List of links near end of module
========== */
.resource {
margin-bottom: 35px;
border-top: 2px solid #e3e3e3;
padding: 25px 0 0 40px;
}
.resource:first-child {
border-top: 0;
}
.resource .meta .button {
margin-right: 30px;
}
.resource_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
margin-top: 10px;
}
.resource_description {
font-size: 17px; font-size: 1.7rem;
color: #272727;
font-weight: normal;
line-height: 1.3;
letter-spacing: -1px;
}
.resource.is-default .button.later.unsaved .text { color: #969695; }
.resource.is-default .button.later.unsaved .icon { background-color: #969695; }
/* $FOOD
========== */
.guidance-list {
/*
height: 265px;
overflow-y: scroll;
*/
}
.food_reason_row {
background: #f4f4f4;
}
.food_reason_row p {
padding: 5px;
}
.food_suggestion_row {
padding-top: 5px 10px 0 10px;
}
.food_suggestion_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
margin: 0 0 20px 20px;
}
.guidance-list h3 {
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 5px;
}
a.button.food-learn-link {
margin: 0;
}
/* Icon to the left of each guidance title & description (pinced from .time_diff_icon, could combine the styles?) */
.food_diff_icon {
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
}
.food_diff_icon.size-large { background-image: url(../img/food/diff-large.png); width: 67px; height: 67px; margin: 0 0 10px 0; }
.food_diff_icon.size-small { background-image: url(../img/food/diff-32-light.png); width: 32px; height: 32px; margin: 0 0 10px 0; }
.food_diff_icon.size-large.type-increase { background-position: 0 0; }
.food_diff_icon.size-large.type-decrease { background-position: 0 -67px; }
.food_diff_icon.size-small.type-increase { background-position: 0 0; }
.food_diff_icon.size-small.type-decrease { background-position: 0 -33px; }
.food_diff_word {
color: #8e8c8c;
font-size: 16px; font-size: 1.6rem;
font-weight: bold;
}
.food-action {
margin-bottom: 20px;
}
.food-action .item {
width: 180px;
float: left;
margin-right: 15px;
}
.food-action .fields-group {
display: inline-block;
}
.food-action .control-expand {
margin-right: 20px;
}
.food-action .control-expand .arrow-out {
margin-right: -20px;
margin-left: 5px;
}
.food-action .control-expand:hover {
background-color: #e4e4e4;
color: #000;
}
.food-action .control-expand.focused {
background-color: #e4e4e4;
color: #000;
}
.food-action>.detail {
position: relative;
}
/* Extra or overriding .action-fields styles added for food */
.action-column {
width: 160px;
float: left;
}
.food-action .fields-group .action-fields {
position: relative;
left: 150px;
top: -20px;
}
.food-action .fields-group .control-expand {
width: 100px;
}
.food_meal_description {
font-size: 14px; font-size: 1.4rem;
}
/* Food meal rows, and rating stars */
.meal_rating {
float: right;
margin-top: 10px;
margin-right: 160px;
text-align: right;
}
.rate_stars {
margin-bottom: 5px;
}
.rate_stars .star {
padding: 10px;
margin-right: 0px;
background: url(/assets/img/generic/star-empty.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
}
.rate_stars .star.filled {
background: url(/assets/img/generic/star-filled.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}
.rate_label {
margin-left: 4px;
font-weight: bold;
font-size: 14px;
font-size: 1.4rem;
}
.food-icon {
margin-bottom: 42px;
}
.food-icon img {
width: 40px;
padding: 3px;
}
.food-icon-meal {
margin-bottom: 10px;
margin-top: 10px;
}
.food-icon-meal img {
width: 60px;
padding: 3px;
}
ul#sample-menus a {
color: #000;
border-bottom: 1px solid #5ba9dd;
text-decoration: none;
font-size: 1.2em;
}
/* $BARRIERS
---------- */
.food_barrier {
margin-bottom: 10px;
border-top: 2px solid #e3e3e3;
padding: 25px 0 0 0;
}
.food_barrier:first-child {
border-top: 0;
}
.food_barrier_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
margin-top: 10px;
}
.food_barrier_faq {
display: none;
font-size: 17px; font-size: 1.7rem;
color: #272727;
font-weight: normal;
line-height: 1.3;
letter-spacing: -1px;
}
/* $MEALS
---------- */
.header_title_expandable {
padding-right: 60px;
position:relative;
cursor: pointer;
}
.header_title_expandable span {
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 50%;
margin-top: -10px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: transparent;
}
.header_title_expandable .plus { background-image: url(../img/btn-plus.png); }
.header_title_expandable .down { background-image: url(../img/btn-down.png); }
/* Food Summary */
.food_changes,
.food_change {
padding: 0;
list-style: none;
margin-top: 0;
margin-bottom: 0;
}
/* Very top change */
.food_change.is-top {
margin: 0 0 45px 0;
color: #272727;
}
.food_change.is-top .food_change_title {
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
margin: 60px 0 15px 0;
}
.food_change.is-top .food_change_comment {
font-size: 24px; font-size: 2.4rem;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.2;
}
/* Other changes */
.food_change.is-other {
}
.food_change .food_change_title {
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
margin: 60px 0 15px 0;
}
.food_change.is-other .food_change_comment {
font-size: 14px; font-size: 1.4rem;
font-weight: normal;
line-height: 1.3;
}
.food_change .food_diff_icon {
position: relative;
}
.food_change ul {
padding-left: 20px;
}
.food_change ul li {
padding-bottom: 10px;
list-style-type: disc;
}
/* $SEARCH
*
* Common styles for Search/Filter on food/activities/social
*
========== */
.search_table {
width: 100%;
border: 0;
margin: 20px 0 0 0;
}
.search_table td {
text-align: center;
vertical-align: middle;
}
.search_inputs td {
border-bottom: 2px solid #e9e9e9;
padding: 10px 0;
min-width: 125px;
}
.search_captions td {
padding: 10px 0 0 0;
min-width: 125px;
}
.search_caption {
font-weight: bold;
font-size: 18px; font-size: 1.8rem;
margin: 0 0 10px 0;
color: #c1c1c1;
}
.search_inputs .search_caption {
margin: 0;
}
td.search_caption_td {
vertical-align: bottom;
text-align: left;
border-bottom: 2px solid #e9e9e9;
}
.search_caption_td .search_caption {
}
.search_text {
background: url(../img/search-icon.png) 95% 50% no-repeat #fff;
line-height: 40px;
height: 40px;
margin: 0 20px 0 0;
font-size: 14px; font-size: 1.4rem;
padding: 0 46px 0 20px;
border: 1px solid #e9e9e9;
border-radius: 10px;
outline: 0;
float: left;
box-shadow: inset 0px 2px 10px 2px #e9e9e9;
-moz-box-shadow: inset 0px 2px 10px 2px #e9e9e9;
-webkit-box-shadow: inset 0px 2px 10px 2px #e9e9e9;
}
/* $RESULTS
---------- */
.search_result {
border-top: 1px solid #e3e3e3;
padding-top: 30px;
padding-bottom: 30px;
}
.result_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
margin-top: 10px;
}
.result_description {
font-size: 17px; font-size: 1.7rem;
color: #272727;
font-weight: normal;
line-height: 1.3;
letter-spacing: -1px;
}
.result_image > img {
width: 100px;
height: 100px;
max-width: 100%;
border: 5px solid #9f9f9e;
box-sizing: border-box;
behavior: url(/assets/pie/PIE.htc);
border-radius: 55px;
}
.result_image.small > img {
width: 70px;
height: 70px;
max-width: 100%;
border-radius: 35px;
behavior: url(/assets/pie/PIE.htc);
border-width: 4px;
}
/* Default state - no selections. no colours. */
.search_result.is-default .result_image > img {
}
.search_result.is-default .result_title,
.search_result.is-default .result_description {
color: #969695;
}
.search_result.is-selected .result_image > img {
filter: none;
-webkit-filter: grayscale(0);
border-color: initial;
}
.search_result.is-default .button.try .text { color: #969695; }
.search_result.is-default .button.try .icon { background-color: #969695; }
/* $IMAGES
========== */
.page_image {
margin-bottom: 10px;
}
.page_image > img {
width: 400px;
border-radius: 10px;
behavior: url(/assets/pie/PIE.htc);
}
/* $SEARCH
*
* Common styles for Search/Filter on food/activities/social
*
========== */
.search_table {
width: 100%;
border: 0;
margin: 20px 0 0 0;
}
.search_table td {
text-align: center;
vertical-align: middle;
}
.search_inputs td {
border-bottom: 2px solid #e9e9e9;
padding: 10px 0;
}
.search_captions td {
padding: 10px 0 0 0;
}
.search_caption {
font-weight: bold;
font-size: 18px; font-size: 1.8rem;
margin: 0 0 10px 0;
color: #c1c1c1;
}
td.search_caption_td {
vertical-align: bottom;
text-align: left;
border-bottom: 2px solid #e9e9e9;
}
.search_caption_td .search_caption {
}
.search_text {
background: url(../img/search-icon.png) 95% 50% no-repeat #fff;
line-height: 40px;
height: 40px;
margin: 0 20px 0 0;
font-size: 14px; font-size: 1.4rem;
padding: 0 46px 0 20px;
border: 1px solid #e9e9e9;
border-radius: 10px;
outline: 0;
float: left;
box-shadow: inset 0px 2px 10px 2px #e9e9e9;
-moz-box-shadow: inset 0px 2px 10px 2px #e9e9e9;
-webkit-box-shadow: inset 0px 2px 10px 2px #e9e9e9;
}
.food_filter {
padding-bottom: 20px;
}
.food.search_input.dropdown {
width: 100%;
max-width: 100%;
float: right;
}
/* $RESULTS
---------- */
.search_result {
border-top: 1px solid #e3e3e3;
padding-top: 30px;
padding-bottom: 30px;
}
.result_title {
font-size: 18px; font-size: 1.8rem;
font-weight: bold;
margin-top: 10px;
}
.result_description {
font-size: 17px; font-size: 1.7rem;
color: #272727;
font-weight: normal;
line-height: 1.3;
letter-spacing: -1px;
}
.result_image > img {
width: 100px;
height: 100px;
max-width: 100%;
border: 5px solid #9f9f9e;
box-sizing: border-box;
border-radius: 55px;
behavior: url(/assets/pie/PIE.htc);
}
/* $REGISTRATION
========== */
.icon-block.medium {
width: 30px;
height: 30px;
border-radius: 5px;
text-align: center;
vertical-align: middle;
}
.valid_icon {
display: block;
width: 41px;
height: 41px;
background: url(../img/form-validate-home.png) 0 0 no-repeat transparent;
text-indent: -999px;
}
.valid_icon.food {
background: url(../img/form-validate-food.png) 0 0 no-repeat transparent;
}
.valid_icon.activity {
background: url(../img/form-validate-activity.png) 0 0 no-repeat transparent;
}
.valid_icon-error { background-position: 0 0; }
.valid_icon-success, .valid_icon-success.food, .valid_icon-success.activity { background-position: 0 -42px; }
/* $MENTORS
---------- */
.mentor_image_large {
border: 2px solid #272727;
display: block;
margin: 0 0 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
height: auto;
cursor: pointer;
}
.mentor_bio {
text-align: center;
margin-bottom: 30px;
}
.mentor_name {
font-size: 16px; font-size: 1.6rem;
color: #272727;
font-weight: bold;
display: block;
margin: 0 0 10px 0;
text-align: left;
}
.mentor_name input {
margin: 0 20px 0 0;
}
.mentor_block {
margin-bottom: -10px;
text-align: center;
}
/* $QUESTIONNAIRE
========== */
.questionset {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
border: 2px solid #e3e3e3;
border-width: 2px 0;
}
.questionset .question {
min-height: 225px;
list-style: 0;
margin: 0;
padding: 45px 20px 55px 20px;
}
.question_summary {
font-weight: normal;
line-height: 1.3;
font-size: 17px; font-size: 1.7rem;
margin: 0 0 40px 0;
}
.question_title {
color: #272727;
font-size: 17px; font-size: 1.7rem;
font-weight: bold;
margin: 0 0 10px 0;
}
.question_subheading {
color: #818180;
font-size: 13px; font-size: 1.3rem;
font-weight: normal;
margin: 0 0 10px 0;
}
.question_response {
padding: 50px 0 0 0;
}
.question_response label {
line-height: 30px;
}
.question_response input[type="radio"] {
margin-right: 10px;
}
.progress_step {
width: 40px;
height: 50px;
display: inline;
float: left;
position: relative;
border-right: 1px solid #eaeaea;
}
.progress_step .step_tick {
width: 40px;
height: 50px;
margin: 0;
text-align: center;
vertical-align:middle;
}
.progress_step.incomplete a, .progress_step.current a {
display: none;
}
.progress_step.complete a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
}
.progress_step:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.progress_step:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 0;
}
.progress_step .step_here {
margin: 10px 10px;
border-radius: 3px;
text-align: center;
}
.progress_step.complete {
background-image: url(/assets/img/generic/tick-light.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: rgb(91,169,221);
}
.page-activity .progress_step.complete {
background-color: #8cc865;
}
.progress_step.complete.current {
background-image: url(/assets/img/generic/tick-light.png) !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
}
.progress_step.complete .step_here {
display: none;
}
.progress_step.current {
background: #c5c5c5 !important;
}
.progress_step.incomplete {
background: #f4f4f4 !important;
}
.progress_step.incomplete .step_here {
display: none;
}
/* $SCORES and Roundels
========== */
.score-display {
width: 500px;
height: 300px;
position: relative;
}
.score-display .roundel.large {
width: 250px;
height: 250px;
line-height: 250px;
position: absolute;
border: 8px solid;
-webkit-border-radius: 133px; /* (width/2) + border */
-moz-border-radius: 133px; /* (width/2) + border */
border-radius: 133px; /* (width/2) + border */
behavior: url(/assets/pie/PIE.htc);
text-align: center;
background: #fff;
}
.score-display .score-prev.roundel.large {
width: 200px;
height: 200px;
line-height: 200px;
left: 0;
top: 25px;
z-index: 0;
}
.score-display .score-yours.roundel.large {
position: absolute;
left: 150px;
top: 0;
z-index: 0;
}
.score-display .score-next.roundel.large {
width: 200px;
height: 200px;
line-height: 200px;
left: 350px;
top: 25px;
}
.score-display .roundel.large label {
line-height: 200px; /* match height of containing roundel */
vertical-align: middle;
font-size: 110px;
font-size: 11.0rem;
font-weight: bold;
}
.score-display .score-prev.roundel.large label, .score-display .score-next.roundel.large label {
line-height: 200px; /* match height of containing roundel */
font-size: 88px;
font-size: 7.7rem;
}
.score-display.score-steps .roundel.large label {
font-size: 45px; font-size: 4.5rem;
}
.score-key {
height: 50px;
text-align: center;
}
.score-key > div {
margin: 0 auto;
}
.score-key .roundel.small {
width: 30px;
height: 30px;
margin: 0 5px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
behavior: url(/assets/pie/PIE.htc);
border: 3px solid;
float: left;
}
.score-key .roundel.small .roundel-filler {
width: 20px;
height: 20px;
margin: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/assets/pie/PIE.htc);
background: black;
}
.score-title {
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
margin: 5px auto;
text-align: center;
}
/* $SMALL SCORE
---------- */
.score-display.is-small {
width: 200px;
height: 110px;
margin-left: 15px;
position: relative;
}
.score-display.is-small .roundel.large {
width: 100px;
height: 100px;
line-height: 100px;
position: absolute;
border: 8px solid;
-webkit-border-radius: 58px; /* (width/2) + border */
-moz-border-radius: 58px; /* (width/2) + border */
border-radius: 58px; /* (width/2) + border */
behavior: url(/assets/pie/PIE.htc);
text-align: center;
background: #fff;
}
.score-display.is-small .score-prev.roundel.large {
width: 75px;
height: 75px;
line-height: 75px;
left: 0;
top: 15px;
z-index: 5;
}
.score-display.is-small .score-yours.roundel.large {
position: absolute;
left: 50px;
top: 0;
z-index: 10;
}
.score-display.is-small .score-next.roundel.large {
width: 75px;
height: 75px;
line-height: 75px;
left: 125px;
top: 15px;
}
.score-display.is-small .roundel.large label {
line-height: 75px; /* match height of containing roundel */
vertical-align: middle;
font-size: 14px;
font-size: 1.4rem;
font-weight: bold;
}
.score-display.is-small .score-prev.roundel.large label,
.score-display.is-small .score-next.roundel.large label {
line-height: 75px; /* match height of containing roundel */
font-size: 13px;
font-size: 1.3rem;
}
.score-display.is-small.score-steps .roundel.large label {
font-size: 18px; font-size: 1.8rem;
}
.score-key.is-small .roundel.small {
width: 20px;
height: 20px;
margin: 0 5px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
behavior: url(/assets/pie/PIE.htc);
border: 3px solid;
float: left;
}
.score-key.is-small .roundel.small .roundel-filler {
width: 14px;
height: 14px;
margin: 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
behavior: url(/assets/pie/PIE.htc);
}
/* $Squarals (like roundels but square)
========== */
.squarel_parent {
text-align: center;
margin: 5px; auto;
}
.squarel.medium {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 5px;
}
/* $PLANNER-WIDGET
========== */
.widget_mask {
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=0.7);
}
.planner_widget {
width: 960px;
border-radius: 5px;
border: 1px solid #aaa;
background: #fff;
z-index: 200;
}
.planner_tab {
width: 300px;
display: block;
border-width: 0;
padding: 10px;
float: left;
}
.planner_table {
display: table;
width: 100%;
}
.planner_table .planner_tab {
display: table-cell;
float: none;
padding:20px;
}
.planner_table .planner_tab:nth-of-type(2) {
background-color: #f6f6f6;
}
.tabs-save.planner_tab {
clear: both;
float: none;
width: 100%;
text-align: center;
border-top: 1px solid #f6f6f6f6;
padding: 20px 0 0 0;
}
.planner_tab#tabs-when {
min-height: 280px;
}
.planner_tab .text-input {
width: 100%;
}
.widget-validation-message {
color: #c90000;
font-weight: bold;
vertical-align: middle;
line-height: 55px;
}
.planner_week_list {
list-style: none;
margin: 0;
padding: 0;
}
.planner_week_list > li {
margin: 0 0 10px 0;
font-size: 14px; font-size: 1.4rem;
font-weight: bold;
color: #999998;
}
.planner_week_list input {
margin-right: 5px;
}
.tabs_share p {
padding: 20px 20px 0 20px;
margin: 0;
}
.tabs_share p.message {
font-weight: bold;
}
.tabs_share .addthis_toolbox {
padding: 20px;
}
/* $DASHBOARD
========== */
.dashboard_wrapper {
background: #f9f9f7;
padding: 30px 0;
margin-bottom: 50px;
-moz-box-shadow: inset 0 8px 8px -8px #C6C6C4 , inset 0 -8px 8px -8px #C6C6C4 ;
-webkit-box-shadow: inset 0 8px 8px -8px #C6C6C4 , inset 0 -8px 8px -8px #C6C6C4 ;
box-shadow: inset 0 8px 8px -8px #C6C6C4 , inset 0 -8px 8px -8px #C6C6C4 ;
behavior: url(/assets/pie/PIE.htc);
}
.dashboard_pane {
border: 4px solid #000;
border-radius: 4px;
height: 340px;
padding: 0 20px;
background-color: #fff;
position: relative;
}
.dashboard_pane > hr {
position: absolute;
top: 55px;
background-color: #f1f1f1;
width: 100%;
left: 0;
margin: 0;
}
.dashboard_title {
display: table;
margin: 0 0 10px 0;
}
.dashboard_title > h5 {
display: table-cell;
padding: 0;
margin: 0;
height: 55px;
line-height: 55px;
vertical-align: middle;
font-size: 16px; font-size: 1.6rem;
color: #272727;
font-weight: bold;
position: relative;
}
.dashboard_title > h5 span {
line-height: 1.2;
display: block;
}
.dashboard_footer {
text-align: right;
position: absolute;
bottom: 20px;
right: 25px;
}
.notification-count {
float: right;
position: relative;
top: 10px;
left: 10px;
height: 20px;
width: 20px;
z-index: 999;
border-radius: 50;
border-radius: 50%;
border: 3px solid #fff;
background: #f00;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 18px;
vertical-align: center;
}
.row.work_countdown {
width: 252px;
margin: auto;
text-align: center;
}
.cal_flipper_container {
display: inline-block;
text-align: center;
}
.cal_flipper {
position: relative;
z-index: 10;
color: #fff;
text-align: center;
vertical-align: middle;
}
.cal_flipper_line {
position: absolute;
z-index: -10;
top: 40px; /* container height + 10(png height is 20px) divide by 2 */
background-image: url(../img/generic/cal-flipper-line.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 100px;
height: 20px;
}
.cal_flipper span {
z-index: 999;
}
.cal_flipper.large {
width: 100px;
height: 100px;
line-height: 95px;
background-position: 50px 0;
border-radius: 10px;
margin: 0 10px 10px 0;
font-weight: bold;
font-size: 55px;
font-size: 5.5rem;
}
.work_dashboard_chart {
margin-top: -30px;
}
.area.bg.gradient .dashboard_title h5 span {
color: #fff;
}
.dashboard_goto {
position:relative;
display: block;
width: 100%;
max-width: 100%;
min-height: 160px;
text-decoration: none;
}
.dashboard_goto .arrow {
position: absolute;
top: 50%;
right: 50%;
margin-top: 0;
margin-right: -45px;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 110px;
height: 110px;
}
.dashboard_goto.work .arrow { background-image: url(../img/goto/work-large.png); }
/* $ORIENTATION
---------- */
.orientation_pane {
border: 4px solid #000;
border-radius: 4px;
height: 400px;
padding: 0 20px;
background-color: #fff;
position: relative;
}
.orientation_pane > hr {
position: absolute;
top: 55px;
background-color: #f1f1f1;
width: 100%;
left: 0;
margin: 0;
}
.orientation_title {
display: table;
margin: 0 0 10px 0;
}
.orientation_title > h5 {
display: table-cell;
padding: 0;
margin: 0;
height: 55px;
line-height: 55px;
vertical-align: middle;
font-size: 20px; font-size: 2rem;
color: #272727;
font-weight: bold;
position: relative;
}
.orientation_title > h5 span {
line-height: 1.2;
display: block;
}
.orientation_content {
font-size: 18px; font-size: 1.8rem;
}
.orientation-carousel {
height: 410px;
}
.orientation-item {
width: 368px;
height: 410px;
}
.page-home.page-orientation .dashboard_nav li a {
margin: 0 5px;
font-size: 10px;
}
/* $ACTIVITY
---------- */
.activity_item {
margin: 0 0 10px 0;
}
.activity_item .activity_title {
width: 160px;
font-size: 13px; font-size: 1.3rem;
}
.activity_item .activity_title:hover {
color: inherit;
cursor: default;
}
.button.is-icon {
padding: 0 8px;
}
.button.is-icon > img {
vertical-align: middle;
margin-top: -2px;
}
.activity-icon {
float: right;
padding-top: 11px;
margin-right: 150px;
color: #969695;
}
.activity-icon img {
width: 20px;
vertical-align: bottom;
margin-right: 10px;
}
/* $TIME
---------- */
.time_planner_options .planner_option {
text-align: center;
}
.time_planner_options .planner_option h6 {
font-weight: bold;
}
.time_planner_options .planner_option p {
text-align: left;
}
.time_change_list,
.time_change_item {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.time_change_list {
padding-top: 10px;
}
.time_change_item {
display: block;
margin: 0 0 20px 0;
line-height: 24px;
vertical-align: middle;
}
.time_change_icon {
background-image: url(../img/time/diff-mini.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: block;
float: left;
}
.time_change_icon.type-decrease { background-position: 0 -24px; }
.time_change_text {
margin-left: 15px;
font-size: 16px; font-size: 1.6rem;
font-weight: bold;
}
/* Links to show events from this week/next week */
.time_week_options {
position: absolute;
right: 10px;
top: 15px;
height: 34px;
line-height: 34px;
vertical-align: middle;
}
.time_week_option {
display: block;
float: left;
width: 40px;
line-height: 17px;
font-size: 12px; font-size: 1.2rem;
font-weight: bold;
color: #dcdcdc;
text-decoration: none;
padding: 0 10px;
}
.time_week_option.is-active {
color: #272727;
}
.time_week_sep {
width: 2px;
height: 34px;
line-height: 34px;
display: block;
float: left;
}
/* A list of days in the week where events could be on */
.time_week {
display: none;
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.time_week_day {
list-style: none;
margin: 0 0 7px 0;
display: block;
border-bottom: 1px solid #f1f1f1;
padding: 0 0 7px 0;
}
.time_week_dayname {
font-weight: bold;
font-size: 12px; font-size: 1.2rem;
width: 40%;
float: left;
display: block;
}
.time_week_event {
font-size: 12px; font-size: 1.2rem;
float: left;
display: block;
width: 60%;
}
/* Social dashboard */
.social_item {
margin: 0 0 10px 0;
}
.social_item .social_title {
width: 220px;
font-size: 13px; font-size: 1.3rem;
cursor: pointer;
}
.social_item .social_title a {
color: #000;
text-decoration: none;
}
.social_item .social_title:hover {
color: inherit;
cursor: default;
}
/* Work non-paid interests */
.dashboard_content .social_work_interest {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
}
.dashboard_content .social_work_interest_item {
list-style: none;
margin: 0 0 7px 0;
display: block;
border-bottom: 1px solid #f1f1f1;
padding: 0 0 7px 0;
font-size: 12px; font-size: 1.2rem;
font-weight: normal;
}
.dashboard_content .social_work_interest_item span {
font-weight: bold;
font-size: 90%;
}
/* $NAV
---------- */
.dashboard_nav_wrapper {
-moz-box-shadow: inset 0 8px 8px -8px #C6C6C4 , inset 0 -8px 8px -8px #C6C6C4 ;
-webkit-box-shadow: inset 0 8px 8px -8px #C6C6C4 , inset 0 -8px 8px -8px #C6C6C4 ;
box-shadow: inset 0 -16px 16px -16px #C6C6C4 ;
}
/* */
.dashboard_nav {
list-style-type: none;
border: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
border-collapse: collapse;
border-width: 0;
}
.dashboard_nav li {
display: table-cell;
text-align: center;
border: 0;
padding: 0;
width: 10%;
position: relative;
vertical-align: bottom;
}
.dashboard_nav li a {
margin: 0 20px;
color: #272727;
font-weight: bold;
font-size: 16px;
padding: 20px 0;
text-decoration: none;
display: block;
background: #fff;
border: 0;
border-radius: 10px 10px 0 0;
}
/* $BSMSELECT
========== */
.bsmContainer {
/* container that surrounds entire bsmSelect widget */
}
.bsmSelect {
/* the newly created regular 'select' */
display: inline;
}
.bsmOptionDisabled {
/* disabled options in new select */
color: #999;
}
.bsmHighlight {
/* the highlight span */
float: right;
padding: 0;
margin: 0 0 0 1em;
}
.bsmList {
/* html list that contains selected items */
margin: 0.25em 0 1em 0;
position: relative;
display: block;
padding-left: 0;
list-style: none;
}
.bsmListItem {
/* li item from the html list above */
position: relative;
margin-left: 0;
padding-left: 0;
list-style: none;
background: #fff;
border: 1px solid #bbb;
width: auto;
margin: 0 0 -1px 0;
line-height: 1em;
}
.bsmListItem:hover {
background-color: #e5e5e5;
}
.bsmListItemLabel {
/* this is a span that surrounds the text in the item, except for the remove link */
padding: 5px;
display: block;
}
.bsmListSortable .bsmListItemLabel {
cursor: move;
}
.bsmListItemRemove {
/* the remove link in each list item */
position: absolute;
right: 0;
top: 0;
padding: 5px;
text-decoration: none;
color: #ff0000;
}
.bsmScrollWorkaround {
/* Fix a bug when the 'html' element has an overflow set to either 'scroll' or 'auto' on FF. */
padding-bottom: 1px;
overflow: auto;
}
.trophies-list {
list-style: none;
}
.trophies-list li {
font-size: 1.2em;
margin-bottom: 20px;
}
.trophies-list li img {
height: 100px;
float: left;
}
.trophies-list li p {
float: left;
text-align: left;
padding: 20px;
}
/***** Screen Smaller than 1199px *****/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
}
/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/***** Mobile (portrait 300px) *****/
@media only screen and (min-width:481px) and (max-width: 767px) {
}
/***** Mobile (landscape 420px) *****/
@media only screen and (max-width: 480px) {
}
/***** stat graphs *****/
.ct-label.ct-vertical.ct-start {
line-height: 0;
font-size: 1rem;
}
/* chart 1 */
#chart1 .ct-series-a .ct-line, #chart1 .ct-series-a .ct-point {
stroke: #5ba9dd;
}
#chart1 .ct-series-a .ct-label {
color: #5ba9dd;
font-size: 1rem;
font-weight: bold;
fill:#5ba9dd;
}
/* Use this selector to override the line style on a given series */
#chart1 .ct-series-b .ct-line {
/* Set the colour of this series line */
stroke: #dde56e;
/* Control the thikness of your lines */
stroke-width: 0px;
/* Create a dashed line with a pattern */
stroke-dasharray: 10px 20px;
}
#chart1 .ct-series-b .ct-point {
/* Colour of your points */
stroke: #dde56e;
/* Size of your points */
stroke-width: 10px;
}
#chart1 .ct-series-b .ct-label {
color: #dde56e;
font-size: 1rem;
font-weight: bold;
fill:#dde56e;
}
#chart1 .ct-series-1:before {
background-color: #5ba9dd;
border-color: #5ba9dd;
}
#chart1 .ct-series-0:before {
background-color: #dde56e;
border-color: #dde56e;
border-radius: 50px;
height: 6px;
width: 6px;
top: 6px;
}
/* chart 2 */
#chart2 .ct-series-a .ct-line, #chart2 .ct-series-a .ct-point {
stroke: #f4c63d;
}
#chart2 .ct-series-a .ct-label {
color: #f4c63d;
font-size: 1rem;
font-weight: bold;
fill:#f4c63d;
}
/* Use this selector to override the line style on a given series */
#chart2 .ct-series-c .ct-line {
/* Set the colour of this series line */
stroke: #629541;
/* Create a dashed line with a pattern*/
stroke-dasharray: 10px 20px;
stroke-width: 0px;
}
#chart2 .ct-series-c .ct-point {
/* Colour of your points */
stroke: #629541;
/* Size of your points */
stroke-width: 10px;
}
#chart2 .ct-series-c .ct-label {
color: #629541;
font-size: 1rem;
font-weight: bold;
fill:#629541;
}
/* Use this selector to override the line style on a given series */
#chart2 .ct-series-b .ct-line {
/* Set the colour of this series line */
stroke: #8cc865;
/* Create a dashed line with a pattern
stroke-dasharray: 10px 20px; */
}
#chart2 .ct-series-b .ct-point {
/* Colour of your points */
stroke: #8cc865;
/* Size of your points */
stroke-width: 10px;
}
#chart2 .ct-series-b .ct-label {
color: #8cc865;
font-size: 1rem;
font-weight: bold;
fill:#8cc865;
}
/* Use this selector to override the line style on a given series */
#chart2 .ct-series-d .ct-line {
/* Set the colour of this series line */
stroke: #e3ae11;
/* Create a dashed line with a pattern */
stroke-dasharray: 10px 20px;
stroke-width: 0px;
}
#chart2 .ct-series-d .ct-point {
/* Colour of your points */
stroke: #e3ae11;
/* Size of your points */
stroke-width: 10px;
}
#chart2 .ct-series-d .ct-label {
color: #e3ae11;
font-size: 1rem;
font-weight: bold;
fill:#e3ae11;
}
/* Use this selector to override the line style on a given series */
#chart2 .ct-series-e .ct-line {
/* Set the colour of this series line */
stroke: #000000;
}
#chart2 .ct-series-e .ct-point {
/* Colour of your points */
stroke: #000000;
/* Size of your points */
stroke-width: 10px;
}
#chart2 .ct-series-e .ct-label {
color: #000000;
font-size: 1rem;
font-weight: bold;
fill:#000000;
}
#chart2 .ct-series-0:before {
background-color: #8cc865;
border-color: #8cc865;
}
#chart2 .ct-series-1:before {
background-color: #f4c63d;
border-color: #f4c63d;
}
#chart2 .ct-series-2:before {
/* background-color: #629541; */
border-color: #629541;
background-color: #629541;
border-radius: 50px;
height: 6px;
width: 6px;
top: 6px;
}
#chart2 .ct-series-3:before {
border-color: #e3ae11;
background-color: #e3ae11;
border-radius: 50px;
height: 6px;
width: 6px;
top: 6px;
}
#chart2 .ct-series-4:before {
background-color: #000000;
border-color: #000000;
}
.ct-legend {
position: relative;
z-index: 10;
list-style: none;
text-align: center;
}
.ct-legend li {
position: relative;
padding-left: 23px;
margin-bottom: 3px;
display: inline-block;
padding-right: 20px;
}
.ct-legend li:before {
width: 12px;
height: 0px;
position: absolute;
left: 0;
top:9px;
content: '';
border: 3px solid transparent;
border-radius: 2px;
}
.ct-legend li.inactive:before {
background: transparent;
}
.ct-legend li.inactive.ct-legend-inside {
position: absolute;
top: 0;
right: 0;
}
.chartist-tooltip {
position: absolute;
display: inline-block;
opacity: 0;
min-width: 5em;
max-width: 200px;
padding: .5em;
background: #F4C63D;
color: #453D3F;
font-family: Oxygen,Helvetica,Arial,sans-serif;
font-weight: 700;
text-align: center;
pointer-events: none;
z-index: 999;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
transition: opacity .2s linear; }
.chartist-tooltip:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -15px;
border: 15px solid transparent;
border-top-color: #F4C63D; }
.chartist-tooltip.tooltip-show {
opacity: 1; }
.ct-area, .ct-line {
pointer-events: none;
}
.ct-series-c .ct-area.ct-threshold-area-0 {
fill: #add65c !important;
}
.ct-series-c .ct-area.ct-threshold-area-1 {
fill: #ffcc00 !important;;
}
.ct-series-c .ct-area.ct-threshold-area-below, .ct-series-c .ct-area.ct-threshold-below {
fill: #cc3300 !important;
}