﻿/* v=9 */
/* 1.2.2.3 ============================= navigationPanel, (whole line of buttons)  ============================= */
#navigationPanel div, #navigationPanel a,#buttonsPanel_LeftPanel, .mtimejumpclass {
    display: inline-block;
    width: 15%;
    height: 2.8rem;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    cursor: pointer;
    font-size: x-large;
    vertical-align: top;
}
    #navigationPanel div img, #navigationPanel a img {
        height: 24px;
        margin-top: 6px;
    }
    #navigationPanel div.todayTitle {
        font-size: 1rem;
        width: 52%;
        line-height: 1.4rem;
    }
        #navigationPanel div.todayTitle h2{
            font-size: 0.8rem;
        }
        #navigationPanel div.todayTitle span { font-size: 0.8rem; }
.mtimejumpclass { position: relative; /*float: left;*/ width: 12%; font-size: 1rem; font-weight: bold; line-height: 1.4rem; }
div.mtimejumpclass p, a.mtimejumpclass p, div#todayButton p, div#m09Button p {
    margin: 1%;
    line-height: 1.1em;
    font-size: 0.6em;
    color: #555;
    font-weight: bold;
    margin-bottom: 0.3em;
}
div.mtimejumpclass p, a.mtimejumpclass p {
    padding-top: 6px;
}
#navigationPanelContent_m09Button p { margin: 0.5rem auto; line-height: 0.7em; font-size: 0.6em; font-weight: bold; }
#buttonsPanel_LeftPanel {
    width: 12%;
}
#todayButton, #m09Button { position: relative; /*float: right;*/ }
#gDateSelect, #hDateSelect { margin-top: 0.8rem; display: block; }
    #hDateSelect label, #gDateSelect label { display: block; }
#getHDateButton {
    display: block;
}  

@media screen and (max-width: 980px) 
{
    #hDateSelect label, #gDateSelect label {
        font-size:18px;
    }
    #getHDateButton {
        font-size: 18px;
    }
    #dateDiv .holidays{
        width: 65%;
    }
    .en #navigationPanel div img, .en #navigationPanel a img {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
}
.parashaTime {
    text-align: center;
}
tr.parasha td { color: Red; background-color: #F0F0FF; }
.timeColumn { width: 10%; }
#ttRightPanel, .ttLeftPanel { width: 100% !important; }
    #ttRightPanel table tr td { font-size: 1.4em; }
        #ttRightPanel table tr td img { height: 16px; margin-left: 0.2em; vertical-align: middle; }
.ttLeftPanel { margin: 2em 0; padding-bottom: 1em; }
.parasheInfo { border: 1px solid #66aadc; background-color: #EDF1F4; text-align: center; padding: 10px; }
    .parasheInfo div { width: 100%; color: #0072C6; font-size: large; font-weight: bold; margin: 0.5em 0; }
h2.timesTitle { color: #fff; background-color: #0072C6; font-size: 1.4em; text-align: center; padding: 0.2em 0; }
#nextParsha { color: Orange; }

.boxLowerDiv { margin: 20px 0; line-height: 22px; }
    .boxLowerDiv h2 { background-color: #f1f1f1; font-size: 1.2em; text-align: center; padding: 0.2em 0; margin-bottom: 10px; }
    .boxLowerDiv a { font-size: 15px; line-height: 22px; color: #333; padding: 0 2%; }
        .boxLowerDiv a:hover { color: Navy; text-decoration: underline; }
    .boxLowerDiv p { font-size: 15px; padding: 0 2%; }
/* ============================= advertizement ============================= */
#middleBanner .my_adslot {
    height: 250px;
}

/* ============================= CALENDAR ============================= */
#calendar { width: 100%; font-size: 0.5em; }
    #calendar table { width: 100%; }
        #calendar table td {height:55px; border: 1px solid #d4d4d4; /*width: 14%;*/ max-width: 0; color: #0072C6; }
            /*#calendar table td div.eventsExist { color: White; width: 100%; }
            #calendar table td div.eventExist { background-color: #763026; border: 1px solid; }
            #calendar table td div.eventExist { width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }*/
            #calendar table td div.eventExist { display: none; }
            #calendar table td.week { width: 10px; text-align: center; }
            #calendar table td.th {
                color: #fff;
                background-color:#0072C6;
                font-weight: bold;
                font-size: 1.5em;
                height: 1.5em;
                text-align: center;
                word-break: break-word;
                padding: 3px 2px;
            }
            #calendar table td.saturday { background-color: #EDF1F4; }
            #calendar table td.outOfMonthDate { color: #ccc; }
            #calendar table td.saturdayOutOfMonthDate { color: #ccc; background-color: #EDF1F4; }
            #calendar table td span { display: block; }
.calendar td.week { width: 40px; text-align: center; }
.editable { cursor: text; font-size: 10px; behavior: url(#default#userdata); }
.editable { width: 95%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .editable.editableShowInMobile { display: block;}

#dateDiv select, #dateDiv input { width: 32%; height: 2.2rem; line-height: 2.2rem; vertical-align: middle; border: 1px solid #000; padding: 0px; font-size: 1.2rem; margin-top: 1rem; }

/* ============================= Account + MobileDay ============================= */
@media screen and (min-width: 981px) {
    #mwrapper { position: inherit; margin: auto; width: 30%; border: 2px solid #000; }
}

#mwrapper { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: White; z-index: 2; opacity: 1; margin: 0px; width: 100%; padding:0.5rem; box-sizing:border-box; }
    #mwrapper .genericform { position: fixed; top: 0px; background-color: White; z-index: 2; opacity: 1; margin: 0px; width: 100%; }
    #mwrapper .typeSelector, #mwrapper .typeSelector div { width: 100%; }
        #mwrapper .typeSelector input { width: 85%; padding-right: 2%; padding-left: 0px; vertical-align: middle; }
            #mwrapper .typeSelector input[type="image"] { width: 9%; padding: 0.3rem 1%; height: 10%; }
    #mwrapper .eventCaption { text-align: center; display: block; margin: 12px auto; }
    #mwrapper .timesLink, #mwrapper .addLink { color: #999; font-size: 1.2rem; cursor: pointer;margin-bottom: 14px;}
    .saveAndClose {color: #999; font-size: 1.2rem; cursor: pointer;margin-bottom: 18px; text-align:right;width:100%;margin-top: -1px;text-align:center;}
    #mwrapper .timesLink { background-color:#f1f1f1;padding: 10px;box-sizing: border-box;color: #555; }
    #mwrapper div.editable { min-height: 3rem; background-color: #efefef; display: block; width: 100%; box-sizing: border-box; font-size: 1.2rem; line-height: 1.4rem; color: #000; cursor: text; }
.he #mwrapper div.editable {
    text-align: right;
}
.en #mwrapper div.editable {
    text-align: left;
}
        #mwrapper div.editable:hover, #mwrapper div.editable:focus { outline: 0; border: 1px solid #35a4ff; background-color: #fff; }
    .mobileDayLabelNone {color:#999;}

/* ============================= Account ============================= */

.formWrapper { display: inline-block; width: 100%; vertical-align: top; margin: auto; text-align: center; font-size: 0.65em; }
    .formWrapper center { display: block; }
    /*.formWrapper .textBoxDiv, .formWrapper .textBoxDivEmail { display: block; text-align: center; width: 100%; margin-bottom: 0.2em; }
        .formWrapper .textBoxDiv input, .formWrapper .textBoxDivEmail input { width: 96%; text-align: center; height: 1.5em; font-size: 1.5em; display: block; margin: 0 auto; padding: 4px; /*font-size: 0.6em;*/ /* }
        .formWrapper .textBoxDivEmail input { direction: ltr; }*/
    .formWrapper a /*, .formWrapper a:visited */ { font-size: 1.5rem; text-decoration: underline; color: #000; }
        .formWrapper a:hover { color: blue; }

#optioButton { display: none; }



/* ============================= help popup  ============================= */
#monthSelect { width: 36%; }
.yearTextBox { width: 30%; text-align: center; }
.showButton { width: 30%; }



.monthTitle { width: 46% !important; margin: auto; }
    .monthTitle span { font-size: 0.6em; }

.navigationHint { color: #999; font-size: 0.7rem; display: block; letter-spacing: 0px; margin: -6px auto; padding: 0px; }
.{ display: none; width: 20%; padding: 2%; float: left; }
/* ============================= CALENDAR ============================= */
.calenderbody { width: 100%; color: #0072C6; font-size: 1.2em; }
.yomtov { color: #FF8000; font-weight: bold; }
.roshhodesh { color: #7BBF6A; }
.personal { color: red; padding: 0.3em; }
.erev { color: #ffa64d; font-weight: bold; }
.erevzom { color: #ff1a1a; font-weight: bold; }
.zom { color: #E04006; font-weight: bold; }
.jerusalem { color: #FF8000; font-weight: bold; }
.holhamoed { color: #FF8000; font-weight: bold; }
.isruhag { color: #FF8000; font-weight: bold; }
.independence { font-weight: bold; color: Blue; }
.info { color: navy; }
.erevhag { color: #CC6633; }
.mozaeihag { color: #CC6644; }
.erevhanuka { color: #ffa64d; font-weight: bold; }
.hanuka { color: #FF8000; font-size: 1em; font-weight: bold; }
.purim { color: Red; }
.number { font-size: 2.5em; font-weight: bold; }
.specialday, .holiday { font-size: 1.2em; color: #FFA500; font-weight: bold; }
    .today {
        background-color: lightgray !important;
    }
.clockchange { color: Red; }
.noprint { background-color: #f1f1f1; }
.nobordernoprint { }
/* ============================= DAY TIMES DIV ============================= */
#dayTimesDiv { color: #0072C6; font-weight: bold; background-color: #F0F0FF; position: absolute; z-index: 100; width: 1px; height: 1px; overflow: hidden; padding: 2%; margin: 0px; border: 2px solid gray; border-radius: 0px; cursor: pointer; left: 0px; top: 0px; }
#timeTable { margin: 0 auto; width: 18em; }
#dayTimesDiv hr { border: 0; border-top: 1px solid #bbb; margin: 4px 0; height: 1px; }
.selected_day_header { font-size: medium; font-weight: bold; }

.sun { color: #000; font-family: MS Sans Serif; font-size: 8pt; }

/* ============================= TODAY ============================= */
#aboutTodayDiv { width: 94%; margin: 0; padding: 3%; }
    #aboutTodayDiv .header_flash_news { width: 94.5%; padding-right: 5%; height: 3em; border: 1px solid #DCDCDC; font-size: 1.2em; font-weight: bold; line-height: 3em; margin-bottom: 0.2em; }
#todayDayTimesDiv { background-color: #f0f0f0; width: 98%; font-size: 1.3em; margin: 1em 0; padding: 1%; }
#dateDiv { position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; text-align: center; background-color: Silver; padding: 20% 9%; }
.helpPopup { display: none; }


#titleDiv { width: 100%; }
    #titleDiv div { width: 33%; font-size: 0.6em; font-weight: bold; float: right; padding: 0px; margin: 0px; }
#titleRight { text-align: right; padding-right: 2px; }
#titleCenter { text-align: center; }
#titleLeft { text-align: left; }
#selectPlaceDiv { width: 100%; font-size: 1em; font-weight: bold; margin: 2em 0 0 0; }
    #selectPlaceDiv select { font-size: 1em; }
#todayDayTimesDiv table { width: 100%; margin: 0 auto; }
#timesSelectionDiv { width: 100%; border-bottom: 0.4em solid #000; height: 3em; margin: 1em 0; }
    #timesSelectionDiv div { width: 50%; float: right; text-align: center; vertical-align: middle; height: 3em; line-height: 3em; cursor: pointer; }
/*.editable { cursor: text; font-size: 12px; color: red; width: 100%; overflow: visible; behavior: url(#default#userdata); }*/
/*.editable { display: none; } we want to see comments in mobile */

.cellUpperArea { padding: 0px 2px; }

#AlotHashahar, #SunRise, #SunSet, #ZetHakochavim, #RabenuTam, #ZmanTalitVeTfilin, #SofZmanKriatShmaMagen, #SofZmanKriatShmaGra,
#SofZmanTfilaMagen, #SofZmanTfilaGra, #MidDay, #MinhaGedola, #MinhaKtana, #PlagHamincha, #DafYomi, #DafYomiYerushalmi { text-align: left; width: 5em; }


/* ============================= Login and Register ============================= */
#mainContent_Login1_password_label, #mainContent_Login1_email_label, #mainContent_register1_firstName_label, #mainContent_register1_lastName_label, #mainContent_register1_email_label, #mainContent_register1_password_label, #mainContent_register1_confirmPassword_label { font-size: 1.5rem; }
#content firstName labelDiv .label { display: block; }

/* ============================= PasswordForgotten.aspx ============================= */
#more { height: 100%; }
    #more h1, #more h3 { border-right: 1px solid #fff; color: #fff; line-height: 1.4em; vertical-align: top; padding: 0 0.2em 0 0; font-size: 1.1em; }
    #more h1 { font-size: 2.1em; padding: 0 2rem 0 0; }
    #more span { border-left: 1px solid #fff; display: inline-block; height: 1.4em; margin-top: 0.2em; }
        #more span.mhidden, #more span.slash { display: none; }
    #more a { display: none; }
    #more h1 a, #more h1 a:visited { color: #fff; display: inline; padding: 0 4px; }
        #more h1 a:hover, h1 a.selected { text-decoration: underline; }

#leftHeader { width: 10% ;}
#rightHeader { width: 10%;}
#middleHeader { width: 80% ;}

/* ============================= Message ============================= */
/*.boldMessage { display: none; width: 96%; padding: 6px 2%; background-color: Yellow; }
    .boldMessage a { font-weight: bold; }
        .boldMessage a:hover { text-decoration: underline; } not found */
@media print {
    .noPrint {
        display: none;
    }
}
/* ============================= AppointmentForm.ascx ============================= */
#mycontainer {
    font-size: 0;
    width: 100%;
}

    #mycontainer div {
        font-size: 16px;
        vertical-align: top;
        font-family: Arial;
        padding: 5px;
    }

        #mycontainer div label {
            font-size: 14px;
            vertical-align: middle;
        }

    #mycontainer input[type=radio], #mycontainer input[type=checkbox] {
        width: 32px;
        height: 32px;
        vertical-align: middle;
    }

    #mycontainer span {
        margin-top: 3px;
        display: block;
        font-weight: bold;
    }

#first {
    display: inline-block;
    height: 320px;
    width: 150px;
    padding-right: 7px;
}

#second {
    display: inline-block;
    width: 119px;
    line-height: 19px;
}

#third {
    display: inline-block;
    width: 189px;
}

/* =================== Dates panel =================== */
#datePanel {
    font-family: Arial;
    padding: 10px;
    line-height: 19px;
    font-size: 14px;
    background-color: #F1F1F1;
    border-color: #F1F1F1;
    text-align: center;
}

    #datePanel div a {
        color: #0066FF;
        font-size:14px;
    }

#todayDateDiv {
    font-weight: bold;
}

.normalFontWeight {
    font-weight: normal;
}

/* =================== Public Calendar =================== */

.publicCalMobile {
    display: inline-block;
    font-size: 0.9em;
    background-color: silver;
    color: #222;
    padding: 0 2em;
    font-weight: 900;
    height: 100%;
    float: left;
    line-height: 3rem;
    width: 20%;
}

.headerCenterMobilePublic {
    display: inline-block;
    width: 21%;
    line-height: 1rem;
    margin-top: 0.5rem;
}

#publicCalendarTitle input {
    position: absolute;
    left: 0;
    width: 4em;
    /*height: 2rem;*/
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    cursor: pointer;
    font-size: x-large;
}

#linkClientPopup {
    line-height: 3rem;
}

    #linkClientPopup label {
        width: 100%;
        vertical-align: middle;
        display: inline-block;
    }
    #linkClientPopup p {
        margin-top:3rem;
    }
    .he #linkClientPopup input[type=text] {
    width: 100%;
    float: left;
}

.en #linkClientPopup input[type=text] {
    float: right;
    width: 100%;
}

#popupTitle {
    text-align: center;
}

.labelCalName{
    font-size:1.5rem;
}

#publicColor {
    line-height: 0;
    width: 2.5em;
}

.he .aboutBoard { margin-right: 10%; }
.en .aboutBoard { margin-left: 10%; }
