/* Base */
body { background: #fff url(/images/base/bg2.png) repeat-x; margin:0 auto; overflow-x: hidden; }
form { font-family: Nunito; font-size: 0.8em; color: #264827; margin:0 auto; margin-top:0px; margin-bottom:0px; width:100%; line-height:1.4em; padding:0px; }
h1 { font-family: Nunito; font-size: 1.9em; color: #2D7D91; font-weight: normal; margin-top:0px; margin-bottom:20px; text-transform: capitalize; line-height:1.2em; padding-bottom:0px; border-bottom: solid 1px #eee; }
h2 { font-family: Nunito; font-size: 1.9em; color: #2D7D91; font-weight: normal; margin-top:0px; margin-bottom:20px; text-transform: capitalize; line-height:1.2em; padding-bottom:0px; border-bottom: solid 1px #eee; }
h3 { font-family: Nunito; font-size: 1.3em; color: #2D7D91; font-weight: normal; margin-top:4px; margin-bottom:12px; line-height:1.4em; font-weight:bold; }a:link, a:active, a:visited { text-decoration:underline; border:none; color: #fff;}
a:link, a:active, a:visited { color: #2D7D91; transition:0.25s; }
a:hover, a:active:hover, a:visited:hover { color: #3FAEC6; text-decoration:underline; border:none }
img { border:0; }
img:hover { border:0; }
input:focus { outline:none; }

/* Header */
#header { width: 100%; height: 97px; position: relative; }
#header .logo { position: absolute; top:20px; left:20px; }
#header .subtitle { position: absolute; right:20px; bottom:10px; color: #fff; }
#header a:link, #header a:active, #header a:visited { color: #fff; }
#header a:link:hover, #header a:active:hover, #header a:visited:hover { color: #FFF428; }

#main { padding: 30px 20px; }

/* Menu */
#menu { width:1020px; height:38px; position:relative; z-index:100; font-size:1.1em;  background: #000; margin-bottom:0px; font-family: Nunito; z-index:200; text-transform:uppercase; padding-left:20px; }
#menu ul {margin:0; padding:0; list-style-type: none; }
#menu li { float: left; display: inline; }
#menu li:hover { display: inline;}
#menu li a { padding: 11px 20px 10px 20px; display:block; color: #fff; text-decoration:none; transition:0.25s; }
#menu li a:hover { background: #2D7D91; color: #fff; text-decoration:none; transition:0.25s; }
#menu ul ul {  display: none; position: absolute; top: auto; left: auto; margin-left: -1px; width:150px; background:none; }
#menu li:hover ul { display: block; }
#menu li li a { width: 170px; color: #fff; margin-top: 0px; text-transform:uppercase; border-top:0; background: #000; padding:10px 20px; }
#menu li li a:hover {  background: #2D7D91; color: #fff; }
#menu li.menu3 li a { width:170px; }
#menu li.menu5 li a { width:170px; }

/* EMail Preview */
.item { float:left; width:125px; padding-top:8px; }
.value { float:left; width:calc(100% - 125px); }
.clear { clear:both; height:10px; }
.result { font-size:1.2em; font-weight:bold; }
.light { font-size:0.9em; color: #888; }

/* Status */
.scheduled { background: #73DB3F; }
.cancelled  { background: #ddd; }
.noshow  { background: #dd0000; }
.completed { background: #4E912A; }
.checkedin { background: #68CE58; }
.confirmed { background: #FFF200 }
.paid { background: #ffa500; }

/* Colours */
.green { background:#60CC4B; }
.amber{ background:#ffa500; }
.red { background: #dd0000; }

/* Dates */
.current { background: #73DB3F; }
.past  { background: #ddd; }
.future { background: #4E912A; }

/* Usage */
.usage { text-align:left; }
.usage .notused { width:16px; height:16px; border-right: solid 1px #fff; background: #ddd; display:inline-block; vertical-align:middle; }
.usage .used { width:16px; height:16px; border-right: solid 1px #fff; background: #377F91; display:inline-block; vertical-align:middle; }

.lightgrey { background: #f8f8f8; }
.lightamber { background: #FFF0D8; }
.lightgreen { background: #E5FFE0; }

/* Popup */
.popupbg { background: url(/images/base/popupbg.png); position: fixed; width:100%; height:100%; left:0px; top:0px; z-index:10000; }
.popup { position: relative; left:50%; top:50%; padding:20px; margin-left:-240px; margin-top:-290px; width:440px; height:540px; background:#fff; }
.popup .item { float:left; width:90px; margin-right:10px; padding-top:8px; }
.popup .value { float:left; width:calc(100% - 100px); }
.popup .item2 { float:left; margin-right:10px; padding-top:8px; }
.popup .value2 { float:left; }
.popup .item3 { float:left; width:110px; margin-right:10px; padding-top:8px; }
.popup .value3 { float:left; width:calc(100% -120px); }
.popup .clear { clear:both; height:8px; }
.popup .buttons { position: absolute; bottom:20px; left:20px; }
.popup .info { font-weight:600; color: #4BAAC1; margin-bottom:20px; padding:0px; text-align:left; font-size:1.2em; }
.popup table { margin-top:10px; }
.popup .titleheading { font-size:1.0em; }
.popup .titleheading td { padding: 8px 8px; }
.popup .copytable { height:230px; overflow-y:auto; margin-top:0px; }
.popup .copytable table { margin-top:0px; }
.popup h2 { background: #377F91; color: #fff; text-align:center; padding: 10px; margin-left:-20px; margin-top:-20px; width:calc(100%  + 20px); margin-bottom:30px; }

/* Vouchers */
.voucherpaid { background: #73DB3F; }
.voucherunpaid  { background: #FFA500; }
.voucherused  { background: #4E912A; }
.voucherexpired { background: #AAA; }
.voucherother { background: #EEE; }

/* Bookings */
.bookingnotcheckedin { background: #ddd; }
.bookingpaid  { background: #73DB3F; }
.bookingunpaid  { background: #FFA500; }

/* Calendar */
.cal { width:100%; }
.cal .left { width:160px; float:left; border-right: solid 1px #fff; }
.cal .right { width:calc(100% - 165px); float:left; overflow-x:auto; }
.cal .titleheading { height:60px; font-size:1.0em; }
.cal .titleheading td { }
.cal .lower { width:100%; text-align:left; min-width:990px; margin-left:0px; margin-top:-1px; }
.cal .lower .daily { width:141px; width:141px; float:left; margin-right:0px; }
.cal .lower .daily table { width:100%; }
.cal .fixedwidth { width:130px; }
.cal .lower .lessoncalendar:hover { background: #efefef; }
.cal .lower td { padding: 0px; }
.cal .lesson .classroom { position:absolute; top:5px; right:5px;  z-index:1000; }
.cal .lesson .classroom img { width:20px; transition:0.25s; }
.cal .lesson .classroom a:link { opacity:0.75; }
.cal .lesson .classroom  a:link:hover { opacity:1; }
.cal .room { position: relative; }
.cal .room .type { position: absolute; top:5px; right:5px; }
.cal .room .type img { width:20px; }

.key { text-align:left; margin-bottom:20px; padding:10px; background: #f4f4f4; display:inline-block; }
.key .blob { display: inline-block; vertical-align:middle; margin-right:5px; width:20px; height:20px; }
.key .name { display: inline-block; vertical-align:middle; margin-right:20px; min-width:80px }

.floatinglistitem { display:inline-block; vertical-align:middle; padding:5px 10px; border: solid 1px #ccc; border-radius:4px; margin-right:10px; margin-bottom:10px; transition:0.25s; }
.floatinglistitem:hover { background: #FFEDCE; cursor: pointer; }

.lessoncalendar { background:#f4f4f4; color: #888; transition:0.25s; }
.lessoncalendar td { padding: 10px 0px; }
.lessoncalendar a:link, .lessoncalendar a:active, .lessoncalendar a:visited { color: #fff; transition:0.25s; }
.lessoncalendar a:link:hover, .lessoncalendar a:active:hover, .lessoncalendar a:visited:hover { color: #FFFA00; }
.lessoncalendar td.date { background: #f8f8f8; transition:0.25s; }
.lessoncalendar td.date:hover { background: #e8e8e8; cursor: pointer; }
.lesson { position:relative;  }
.lesson .remove { position: absolute; bottom:5px; left:5px; opacity:0.8; transition:0.25s; z-index:100; height:18px; }
.lesson .remove:disabled { opacity:0.25; }
.lesson .remove:disabled:hover { opacity:0.25; }
.lesson .remove:hover { opacity:1.0; }
.lesson .book { position: absolute; bottom:5px; right:5px; transition:0.25s; opacity:0.8; z-index:100; height:18px; }
.lesson .book:hover { opacity:1.0; }
.lesson .viewbookings { position: absolute; bottom:5px; right:30px; transition:0.25s; opacity:0.8; z-index:100; height:18px; }
.lesson .viewbookings:hover { opacity:1.0; }
.lesson .splitlesson { position: absolute; bottom:5px; right:72px; transition:0.25s; opacity:0.8; z-index:100; height:18px; }
.lesson .splitlesson:hover { opacity:1.0; }
.lesson .book:disabled { opacity:0.25; }
.lesson .book:disabled:hover { opacity:0.25; }
.lesson .move { position: absolute; bottom:5px; right:50px; transition:0.25s; opacity:0.8; z-index:100; height:18px; }
.lesson .move:hover { opacity:1.0; }
.lesson .move:disabled { opacity:0.25; }
.lesson .move:disabled:hover { opacity:0.25; }
.lesson .label { z-index:50; position: relative; background: url(/images/base/label.png); padding:5px 10px; max-width:200px; }
.lesson .label a:link, .lesson .label a:active, .lesson .label a:visited { color: #222; font-weight:bold; transition:0.25s; }
.lesson .label a:link:hover, .lesson .label a:active:hover, .lesson .label a:visited:hover { color: #EF511C;  }
.lesson .tutor { position: absolute; top:5px; right:5px; font-size:0.9em; }
.lesson .booking { position: absolute; height:100%; top:0px; left:0px; margin-left:-1px; width:100%; background: #F0F402; border-left: solid 1px #fff; border-right: solid 1px #fff; z-index:0; transition:0.25s; color: #222; text-align:left; }
.lesson .booking:hover { cursor: pointer; filter:brightness(0.9); }
.lesson .booking.block { background: #0D67DD; color: #fff; }
.lesson .booking .name { top:0px; left:0px; text-transform:none; font-size:0.8em;  position: relative; padding:2px 4px; background: #222; color: #fff; display:inline-block; border-right:solid 1px #fff; border-bottom:solid 1px #fff;  }
.lesson .booking .name.block { background: #0D67DD; color: #fff; }
.lesson .num { bottom:3px; left:3px; text-transform:none; font-size:0.8em;  position: absolute; background: #222; width:18px; height:18px; border: solid 1px #fff; border-radius:50%; color: #fff; font-size:1.0em; line-height:1.5em; }
.lesson .num:hover { cursor: pointer; filter:brightness(1.2); }
.lesson .bookingpaid { position: absolute; height:100%; top:0px; left:0px; margin-left:-1px; width:100%; background: url(/images/base/paid.png); border-left: solid 1px #fff; border-right: solid 1px #fff; z-index:0; transition:0.25s; color: #fff; }
.lesson .bookingpaid:hover { cursor: pointer; color: #fff; opacity:0.75; }
.lesson .bookingpaid .name { top:2px; left:3px; text-transform:none; font-size:0.8em;  position: absolute; }
.lesson .booking2 { position: absolute; height:100%; top:0px; left:0px; width:100%; background:#ffa500; border-top: solid 1px #fff; border-bottom: solid 1px #fff; z-index:0; transition:0.25s; color: #fff; }
.lesson .booking2:hover { cursor: pointer; color: #fff; background: #D88900; }
.lesson .booking2 .name { top:2px; left:3px; text-transform:none; font-size:0.8em;  position: absolute; }
.lesson .booking2paid { position: absolute; height:100%; top:0px; left:0px; width:100%; background: #00cc00; border-top: solid 1px #fff; border-bottom: solid 1px #fff; z-index:0; transition:0.25s; color: #fff; }
.lesson .booking2paid:hover { cursor: pointer; color: #fff; background: #00bb00; }
.lesson .booking2paid .name { top:2px; left:3px; text-transform:none; font-size:0.8em;  position: absolute; }
td.room { background: #aaa; padding: 10px 5px; height:50px; color: #fff; }
td.date { background: #f8f8f8; padding: 10px 5px; height:50px; }
td.lesson { background: #52CE5C; padding: 10px 5px; height:50px; }
input[type="checkbox"] { width:1.2em; height:1.2em; }
.checkboxlist { background: #f8f8f8; padding:10px; }
.checkboxlist input[type="checkbox"] {  vertical-align:middle; width:1.3em; height:1.3em; margin-right:8px }
.checkboxlist input[type="checkbox"]+label {  vertical-align:bottom; }
.checkboxlist input[type="checkbox"]:disabled+label {  vertical-align:bottom; color: #aaa; }
.checkboxlist table td { width:200px; padding: 2px 0px; }
.checkboxlist2 { background: #f8f8f8; padding:10px; }
.checkboxlist2 input[type="checkbox"] {  vertical-align:middle; width:1.3em; height:1.3em; margin-right:8px }
.checkboxlist2 input[type="checkbox"]+label {  vertical-align:bottom; }
.checkboxlist2 input[type="checkbox"]:disabled+label {  vertical-align:bottom; color: #aaa; }
.checkboxlist2 table td { width:100px; padding: 2px 0px; }
.addbutton { opacity:0.5; transition:0.25s; height:20px; }
.addbutton:hover { opacity:1.0; }
.warning { color: #ff0000; font-weight:600; }
.extend { position: absolute; top:3px; right:3px; z-index:100; transition:0.25s; opacity:0; }
.extend:hover { cursor: pointer; opacity:1; }
.shorten { position: absolute; top:3px; left:3px; z-index:100; transition:0.25s; opacity:0; }
.shorten:hover { cursor: pointer; opacity:1; }
.later { position: absolute; top:3px; right:20px; z-index:100; transition:0.25s; opacity:0; }
.later:hover { cursor: pointer; opacity:1; }
.earlier { position: absolute; top:3px; left:20px; z-index:100; transition:0.25s; opacity:0; }
.earlier:hover { cursor: pointer; opacity:1; }
.closed { background: #444; color: #fff; }

.separator { width: 200px; border-top: solid 1px #d9c9a3; margin-top:5px; margin-bottom:3px;padding: 0px 10px; }
#footer { text-align: center; width: 950px; font-size: 1.0em; background-color:#758a2f; margin-top:0px; padding-bottom:8px; padding-top: 3px; border-top: solid 1px #566424; color: #fff;  }
#footer a { text-decoration:underline; border:none; color: #c7d593; }
#footer a:hover { color:#e0e9c1; text-decoration:underline; }

.blank { background-image: none; }
.balance { background: #57CC51; font-size:1.4em; font-weight:600; padding: 10px 10px; color: #fff; width:180px; margin-bottom:20px; border: solid 0px #fff; border-radius:3px; }
.balancenegative { float:left; margin-right:10px; background: #ffa500; font-size:1.4em; font-weight:600; padding: 10px 10px; color: #fff; width:180px; margin-bottom:20px; border: solid 0px #fff; border-radius:3px; }
.paybalance { float:left; margin-left:10px; }
.paybalance a:link, .paybalance a:active, .paybalance a:visited { display:block; background: #57CC51; font-size:1.4em; font-weight:600; padding: 10px 10px; color: #fff; width:180px; margin-bottom:20px; border: solid 0px #fff; border-radius:3px; transition:0.25s; text-align:center; text-decoration:none; }
.paybalance a:link:hover, .paybalance a:active:hover, .paybalance a:visited:hover { background: #439E3F; }

.requestsubmitted { background: #ffa500; }
.requestresponded { background: #57CC51; }
.requestcompleted { background: #57CC51; }
.requestcancelled { background: #ddd; }

.bulletindisplay { background: #57CC51; }
.bulletinarchive { background: #ffa500; }

/* Reports */
.reportline { background: #f8f8f8 url(/images/base/bullet.png) no-repeat; padding: 5px 10px 5px 30px; border-bottom: solid 1px #ddd; border-top: solid 1px #ddd; margin-top:-1px; transition:0.25s; background-position:5px 4px; }
.reportline:hover { background-color: #f1f1f1; }

.icon { margin: 5px 10px; }
.icon:disabled { opacity:0.25;  -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.text { font-family: Nunito; font-size: 1.0em; color: #222; padding:0; text-align:justify; margin-top:0; line-height:1.5em; }
.text a { text-decoration:underline; border:none; color: #222;}
.text a:hover { color: #53AD53; text-decoration:underline; border:none }
.input { font-family: Nunito; font-size:1.0em; color: #1e401e; margin-bottom:3px; margin-top:3px; padding: 3px 4px; border: solid 1px #aaa; border-radius:2px; }
.input:disabled { color: #888; background: #f4f4f4; }
.inputwarning { font-family: Nunito; font-size:1.0em; color: #1e401e; margin-bottom:3px; margin-top:3px; padding: 3px 4px; border: solid 1px #ffa500; border-radius:2px; background: #FFEFD3; }
.textinput { font-family: Nunito; font-size:1.0em; color: #1e401e; margin-bottom:3px; margin-top:3px; padding: 4px 4px 5px 4px; border: solid 1px #aaa; border-radius:2px; }
.textinput:disabled { color: #888; background: #f4f4f4; }
.listinput { font-family: Nunito; font-size:1.0em; color: #1e401e; margin-bottom:3px; margin-top:3px; padding: 2px 4px; border: solid 1px #aaa; border-radius:2px; }
.listinput:disabled { color: #aaa; }
input:focus { outline:none; }
.input3 { font-family: Nunito; font-size:1.0em; color: #1e401e; margin-bottom:3px; margin-top:3px; text-align:center; }
.input3:disabled { color: #aaa; }
.button { font-family: Nunito; font-size:1.0em; color: #1e401e; margin: 3px 5px; padding: 2px 9px; transition:0.25s; }
.button:hover { cursor: pointer; }
.button:disabled { opacity:0.5; }
.input2 { background: #377F91; border: solid 1px #377F91; border-radius:0px; color: #fff; font-family: Nunito, Arial; font-size:1.2em; padding: 6px 20px 7px 20px; font-weight:400;  transition:0.25s; border-radius:3px; margin:5px 0px; }
.input2:hover { cursor: pointer; background: #449EB5; border: solid 1px #449EB5; transition:0.25s; }
.input2:focus { outline:none; }
.input2:disabled { background: #ddd; border: solid 1px #ddd; }
.input2:disabled:hover { background: #ddd; border: solid 1px #ddd; cursor: default; }
.input3 { background: #377F91; border: solid 1px #377F91; border-radius:0px; color: #fff; font-family: Nunito, Arial; font-size:1.1em; padding: 4px 20px 4px 20px; font-weight:400;  transition:0.25s; border-radius:3px; }
.input3:hover { cursor: pointer; background: #449EB5; border: solid 1px #449EB5; transition:0.25s; }
.input3:focus { outline:none; }
.input3:disabled { background: #ddd; border: solid 1px #ddd; }
.input3:disabled:hover { background: #ddd; border: solid 1px #ddd; cursor: default; }
.input4 { background: #444; border: solid 1px #444; border-radius:0px; color: #fff; font-family: Nunito, Arial; font-size:1.2em; padding: 6px 20px 7px 20px; font-weight:400;  transition:0.25s; border-radius:3px; margin:5px 0px; }
.input4:hover { cursor: pointer; background: #555; border: solid 1px #555; transition:0.25s; }
.input4:focus { outline:none; }
.input5 { background: #6FC14F; border: solid 1px #6FC14F; border-radius:0px; color: #fff; font-family: Nunito, Arial; font-size:1.2em; padding: 2px 20px 3px 20px; font-weight:400;  transition:0.25s; border-radius:3px; margin:5px 0px;  }
.input5:hover { cursor: pointer; background: #528E3A; border: solid 1px #528E3A; transition:0.25s; }
.input5:focus { outline:none; }
.image { text-align: center; }
.logintitle { background: #444; font-family:Nunito; border: none; color:#fff; border-bottom: solid 10px #fff; font-size:1.4em; font-weight:normal; padding-top:20px; text-transform:uppercase; }
.emaillabel { background: #f4f4f4; color: #444; padding: 7px 10px; font-weight:400; width:360px; }

/* Statuses */
.active { background: #6ACE61; }
.disabled, .finished { background: #eee; }

/* E-Mails */
.emails { background: #ffe672; border: solid 1px #d3be5f; padding:10px; margin-top:20px; }
.availability { width:85%; border: none; padding:2px; }
.angelfish { font-family:Nunito; font-size:0.8em; margin-left:30px; color: #000000; }
.angelfish a { text-decoration: underline; color: #000000; }
.angelfish a:hover { text-decoration: underline; color: #007311; }
#updateprogress1 { color: #007311; }

/* Images */
.image { border:none; }
.noDecoration {border:none; }
.noDecoration a, .noDecoration a:active, .noDecoration a:visited { text-decoration:none; }
.noDecoration a:hover, .noDecoration a:active:hover, .noDecoration a:visited:hover { text-decoration:none; }

/* Tables */
.titleheading {height:26px; color: #fff; font-weight:normal; text-transform:none; font-size:1.2em; background:#444; line-height:1.4em; }
.titleheading td { padding: 10px 5px; }
.titleheading a {color:White; text-decoration: none; background:none;}
.titleheading a:hover {color:Silver; text-decoration: none; background:none;}
.notes { height:36px; color:#fff; font-weight:normal; background: #666; }
.notes td { padding:20px 5px; }
.notes a:link, .notes a:active, .notes a:visited { color: #fff; }
.notes a:link:hover, .notes a:active:hover, .notes a:visited:hover { color: #FFF249; }
.rowlight { transition:0.25s; background: #fff; }
.rowdark { transition:0.25s; background: #fff; }
.rowlight.highlight, .rowdark.highlight { background: #FFFBD8; }
.rowdark td { padding: 6px 4px; border-bottom: solid 1px #ddd;}
.rowlight td { padding: 6px 4px; border-bottom: solid 1px #ddd; }
.rowdark:hover { filter:brightness(0.95); }
.rowlight:hover { filter:brightness(0.95); }
.subrow { font-size:1.0em; background: #E8F2FF; }
.subrow td { padding: 6px 4px; border-bottom: solid 1px #ddd; }

.studentnotes { border: solid 1px #ccc; background: #f8f8f8; padding:20px; width:1128px; max-width:calc(100% - 42px); }
.studentnotes .note { margin-bottom:20px; }
.studentnotes .note p { margin-top:5px; }

/* AJAX Calendar */
.calendar .ajax__calendar_container { background: #d9d9d9; z-index:255; }
.calendar table { background: #fff; padding: 0; font-size: 0.9em; }
.calendar td { padding: 1px; }
.calendar .ajax__calendar_active { background: #018287; color: #fff; }
.calendar .ajax__calendar_other { background: #e9e9e9; color: #333; }
.calendar .ajax__calendar_day { margin: 1px; padding: 0; }
.calendar .ajax__calendar_day:hover { border: 1px solid #018287; margin: 0; }