/* CSS */

BODY,
TABLE,
INPUT,
SELECT,
TEXTAREA,
HTML {
    font-size: 11px;
    font-family: Arial;
    margin: 0px;
    color: black;
    text-align: left;
}

a {
    text-decoration: none;
}

.hide {
    display: none;
}

#site {
    /*	width: 1000px;*/
    margin: 0px 5px;
    text-align: left;
    padding-top: 60px;
}

#header {
    position: fixed;
    top: 0px;
    height: 50px;
    display: block;
    /*	width: 1000px;*/
    width: 100%;
    z-index: 20;
    background: #F1F1F3 url();
    color: black;
    clear: both;
    border-bottom: 2px solid black;
    margin-bottom: 10px;
}

#header div.login {
    width: 150px;
    position: absolute;
    right: 0px;
}

#header div.login.loginForm {
    font-size: 18px;
}

#header div.login.login input {
    font-size: 18px;
}

#content {
    padding-top: 60px;
    clear: both;
    text-align: left;
    padding: 10px;
    position: relative;
    margin-bottom: 35px;
    /*	width: 980px;*/
}

#content_right {
    text-align: left;
    padding: 10px;
    position: absolute;
    width: 250px;
    top: 20px;
    left: 280;
    margin-left: 50%;
}

#footer {
    font-size: 10px;
    border-top: 1px dotted black;
    background: #F1F1F3 url();
    color: black;
    clear: both;
    padding: 3px 10px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#footer .box {
    color: gray;
    font-style: italic;
    float: right;
    border-left: 1px dotted gray;
    padding: 2px 5px;
}

table.bg tr:nth-child(odd) {
    background-color: #ffffff;
    /***/
}

table.bg tr.topLine td {
    border-top: 1px dashed black;
    /***/
}

table.bg td {
    border: 1px dotted lightgray;
	min-width: 100px;
    /***/
}

table.schedHeight td {
    /*    height: 30px !important; */
    width: 100px;
    /***/
    height: 25px;
    /***/
}

table.schedHeight span.dayDate {
    font-size: 10px !important;
}

table.schedHeight span.dayName {
    font-size: 14px !important;
    color: black !important;
}

table.schedHeight td:first-child {
    /*    height: 30px !important; */
    width: 25px;
}

th {
    background-color: #999999;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid black;
}

input.big,
select.big {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #E5E5E5;
    box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset;
    font-size: 20px;
    font-weight: 200;
    margin-bottom: 6px;
    margin-right: 6px;
    margin-top: 2px;
    outline: medium none;
    padding: 3px;
}

.big {
    font-size: 20px;
    font-weight: 200;
    margin-bottom: 6px;
    margin-right: 6px;
    margin-top: 2px;
    outline: medium none;
    padding: 3px;
}

select {
    font-size: 14px;
}

input.button {
    background-color: #DEEAF4;
    padding: 2px 5px;
    box-shadow: 0 1px 2px #111;
    -moz-box-shadow: 2px 2px 1px #999;
    -webkit-box-shadow: 2px 2px 1px #999;
    cursor: pointer;
    outline: medium none;
}

input.button.big {
    font-size: 20px;
    font-weight: 200;
    margin-bottom: 6px;
    margin-right: 6px;
    margin-top: 2px;
    outline: medium none;
    padding: 3px;
}

input {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #E5E5E5;
    box-shadow: 1px 1px 2px rgba(200, 200, 200, 0.2) inset;
    font-size: 14px;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 6px;
    margin-right: 6px;
    margin-top: 2px;
    outline: medium none;
    padding: 2px;
}

#menu {
    float: left;
    font-size: 14px;
    left: 200px;
    position: absolute;
    z-index: 100;
    width: auto;
}

#menu a {
    text-decoration: none;
    color: black;
}

#menu ul {
    list-style: none;
    display: block;
    width: auto;
    margin: 0px;
    padding: 3px;
}

#menu ul li {
    display: inline;
    float: left;
    width: auto;
    position: relative;
    padding: 3px 10px;
    cursor: pointer;
}

#menu ul li:hover {
    background-color: silver;
}

#menu ul li:hover ul {
    display: block;
}

#menu ul li ul {
    background-color: silver;
    position: absolute;
    left: 0px;
    margin: 0px;
    padding: 3px;
    float: left;
    display: none;
    text-align: left;
    z-index: 10;
}

#menu ul li ul li {
    font-size: 12px;
    display: list-item;
    float: none;
    margin: 3px;
    padding: 2px;
    width: 200px;
}

#menu ul li ul li:hover {
    background-color: #F1F1F3;
}

#menu ul li ul li.separator {
    height: 2px;
    padding: 0px;
    background-color: #F1F1F3;
}

.infobar {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px dotted gray;
    width: 100%;
    margin-bottom: 10px;
    clear: both;
}

#live-search {
    position: relative;
}

#userSearch {
    position: absolute;
    left: 10px;
    top: 5px;
}

#live-search-found {
    position: absolute;
    top: 50px;
    border: 1px solid black;
    background-color: #FCFBDB;
    padding: 5px;
    display: none;
    width: 700px;
    height: 600px;
    overflow: auto;
    z-index: 90;
}

div.userSearchBox {
    height: 80px;
    width: 680px;
    margin-bottom: 5px;
    position: relative;
    display: block;
    float: left;
    padding: 5px;
}

div.directFound div.userSearchBox {
    background-color: #65B43D !important;
}

div#live-search-found div.userSearchBox {
    border-bottom: 1px dashed black;
}

div.userSearchBox div.nav {
    width: 40px;
    height: 60px;
    float: left;
    vertical-align: middle;
}

div.userSearchBox div.thumb {
    width: 70px;
    height: 70px;
    float: left;
}

div.userSearchBox div.thumb img {
    border: 1px solid black;
    width: 70px;
    height: 70px;
}

div.userSearchBox div.name {
    position: absolute;
    left: 120px;
    top: 5px;
    font-size: 18px;
    font-weight: bold;
}

div.userSearchBox div.id {
    position: absolute;
    left: 120px;
    top: 30px;
    font-size: 12px;
}

div.userSearchBox div.email {
    position: absolute;
    left: 120px;
    top: 45px;
    font-size: 12px;
}

div.userSearchBox div.birthday {
    position: absolute;
    left: 120px;
    top: 60px;
    font-size: 12px;
}

div.userSearchBox div.phone {
    position: absolute;
    right: 0px;
    top: 5px;
    font-size: 14px;
    font-weight: bold;
    width: 200px;
    text-align: left;
}

div.userSearchBox div.traffic {
    position: absolute;
    right: 0px;
    top: 30px;
    font-size: 12px;
    width: 200px;
    text-align: left;
}

div.userSearchBox div.bonus {
    position: absolute;
    right: 0px;
    top: 45px;
    font-size: 12px;
    width: 200px;
    text-align: left;
}

div.userSearchBox div.lastlogin {
    position: absolute;
    right: 0px;
    top: 60px;
    font-size: 12px;
    width: 200px;
    text-align: left;
}

div.userSearchBox div.clickBox {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    cursor: pointer;
}

div.userSearchBox div.login {
    left: 720px;
    position: absolute;
    top: -10px;
    z-index: 1;
    cursor: pointer;
}

div.userSearchBox div.login img {
    height: 130px;
    width: 130px;
}

div.buttonMenu {
    position: absolute;
    right: 0px;
    float: right;
    display: block;
    font-size: 12px;
    font-weight: normal;
    clear: both;
    height: 20px;
}

div.buttonMenu.top {
    bottom: 0px;
}

div.buttonMenu.bottom {
    top: 5px;
}

div.buttonMenu span {
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid black;
    background-color: #c0c0c0;
    color: black;
    margin: 2px;
    cursor: pointer;
}

div.buttonMenu span.button:hover {
    background-color: gray;
}

div.buttonMenu span.button a {
    color: black;
}

#actual-user-row {
    display: block;
    border: 1px solid black;
    background-color: #d9e4e6;
    width: 700px;
    height: 100px;
}

.msgbox_info,
.msgbox_alert {
    background-image: url(../images/messagebox_info.png);
    background-position: 5 5;
    background-color: #FFFFE0;
    border: 1px solid black;
    background-position: top left;
    background-repeat: no-repeat;
    min-height: 50px;
    margin: 5px;
    font-family: Verdana;
    font-size: 11px;
    padding: 5px 5px 5px 60px;
    color: black;
    clear: both;
}

.msgbox_alert {
    background-color: #FFE4E1;
    background-image: url(../images/messagebox_alert.png);
}

div#selBox {
    position: absolute;
    right: 0px;
    top: 20px;
    width: 250px;
    height: 500px;
    overflow: auto;
}

.scrollBox {
    height: 300px;
    width: 900px;
    overflow: auto;
    background-color: #eaffff;
    border: 1px solid black;
    padding: 5px;
    clear: both;
    position: relative;
}

div#itemTypeList {
    display: block;
    clear: both;
    width: 920px;
}

div.itemType {
    background-color: #CCFF99;
    border: 1px solid black;
    display: block;
    float: left;
    height: 50px;
    margin: 2px;
    padding: 5px;
    position: relative;
    width: 450px;
    cursor: pointer;
}

div.teacherSelect {
    background-color: silver;
    border: 1px solid black;
    display: block;
    float: left;
    height: 16px;
    margin: 2px;
    padding: 3px;
    position: relative;
    width: 120px;
    font-size: 11px;
    cursor: pointer;
}

div.itemType.nomoney {
    background-color: #FF9999;
}

div.itemType div.title {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 18px;
    font-weight: bold;
}

div.itemType div.vatta {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 10px;
    font-weight: bold;
}

div.itemType div.comment {
    position: absolute;
    left: 10px;
    top: 30px;
    font-size: 10px;
}

div.itemType div.price {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
}

div.itemType div.price small {
    font-size: 10px;
}

div.setClock,
div.setTeacher {
    background: none repeat scroll 0 0 #ffcab0;
    border: 1px solid black;
    font-size: 20px;
    line-height: 1;
    margin: 2px;
    padding: 3px;
    width: 20px;
    float: left;
    text-align: center;
    cursor: pointer;
}

div.setTeacher {
    width: 200px;
}

#searchStr {
    color: gray;
    font-style: italic;
}

.itemGroupTitle {
    width: 580px;
    display: block;
    clear: both;
    padding: 2px 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: blue;
    color: white;
    border: 1px solid black;
    cursor: pointer;
    margin-top: 10px;
}

.itemGroup {
    display: none;
    clear: both;
}

.yellow {
    background-color: #FFFF99 !important;
}

.orange {
    background-color: #FFCC66 !important;
}

.gray {
    color: #888888 !important;
}

.graybg {
    background-color: #e2e2e2 !important;
}

.red {
    background-color: #FF9999 !important;
}

.green {
    background-color: #65B43D !important;
}

#workarea {
    display: none;
}

.clickMe {
    cursor: pointer;
    /*text-decoration: underline;
*/
    font-weight: bold;
}

div.lessonbox {
    cursor: pointer;
    border: 1px black solid;
    /*	background-color: #FFCC66; */
    padding: 5px;
}

td.dayWeekend {
    background-color: #9f9e9e;
}

td.lessonbox {
    border: 1px lightgrey dotted !important;
    background-color: #FFCC66;
    padding: 10px;
}

td.privatebox {
    border: 1px lightgrey dotted !important;
    background-color: #aff5ff;
    padding: 10px;
}

td.lessonbox div.lessonbox,
td.privatebox div.lessonbox {
    cursor: pointer;
    border: 0px none;
    /*	background-color: #FFCC66; */
    padding: 0px;
}

td.lesstype--1 {
    background-color: #AFF5FF;
    color: gray;
}

.lessonbox .lessonType {
    display: none;
}

.lessonbox .time {
    float: right;
    /*	margin-right: 5px;*/
}

.lessonbox .title {
    font-size: 14px;
    font-weight: unset;
    /*	font-style: italic;*/
}

.lessonbox .members {
    font-size: 80%;
    font-weight: normal;
    font-style: italic;
}

.lessonbox .lessonComment {
    display: none;
    position: fixed;
    width: 150px;
    background-color: #808080;
    color: #FFF;
    font-weight: normal;
    font-style: normal;
    padding: 5px;
    z-index: 100;
    border-radius: 5px;
}

.w50 {
    width: 50px !important;
}

.w100 {
    width: 100px !important;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w300 {
    width: 300px !important;
}

.w400 {
    width: 400px !important;
}

.ar {
    text-align: right !important;
}

.ac {
    text-align: center !important;
}

.goBack {
    margin: 5px;
    padding: 2px 5px;
    font-variant: small-caps;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    clear: both;
    display: table;
    font-size: 14px;
}

.goBack a {
    text-decoration: none;
}

.goBack:hover {
    background-color: silver;
}

.disabled {
    background-color: gray !important;
    cursor: move;
}

.disabled .comment {
    color: lightgrey;
}

#AdminPurchase {
    background-color: #FF3333;
    color: white;
    padding: 10px;
    font-size: 18px;
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 200px;
    height: 80px;
    border: 2px white solid;
}

.firstCol {
    border-left: 2px dashed black !important;
    /***/
}


td.fluctmembers span.date {
    font-weight: bold;
    color: blue;
    font-size: 120%;
}

td.fluctmembers span.new {
    color: green;
    font-weight: bold;    
}

td.fluctmembers span.missing {
    background-color: lightcoral;
}


.filterBox {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    font-size: 85%;
    padding: 5px;
    margin: 5px;
}

.filterBox input {
    font-size: 90%;
    line-height: 85%;
}