#pnlMenu
{
    border:0px solid gray;
    margin-top:60px;
}
#pnlCalender
{
    border:1px solid red;
    margin-top:0px;
    margin-bottom:60px;
}

.calender-data
{
    display: inline-block;
    padding: 8px 8px 8px 8px;
    width:100%;
    border:0px solid red;
}
 
#lib-select
{
    margin-top:10px;
    width: 100%;
    padding: 10px 5px 15px 5px;
    border: 1px solid #c0c0c0;
}

#calender-main
{
    margin: 40px auto 0px auto;
    width: 600px;
    height: 440px;
}
#schedule-main
{
    margin: 40px auto 0px auto;
    width: 600px;
}


/* for PC */
@media screen and (min-width: 768px)
{

}


/* for Tablet */
@media screen and (max-width: 768px)
{
}



/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next
{
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    text-indent: -8000px;
}
/* // image replacement */

/* Easy Slider */

#slider ul, #slider li, #slider2 ul, #slider2 li
{
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0px solid Green;
    text-align: center;
}
#slider li, #slider2 li
{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: inline-block;
    border: 0px solid Green;
    text-align: center;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev
{
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next
{
    left: 696px;
}
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a
{
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a
{
    background: url(../images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls
{
    margin: 1em 0;
    padding: 0;
    margin-left: 10px;
    height: 28px;
}
ol#controls li
{
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}
ol#controls li a
{
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}
ol#controls li.current a
{
    background: #5DC9E1;
    color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus
{
    outline: none;
}

.noselect
{
    color:#ffffff;
    background-color:#ffffff;
}

#Calender
{
    margin: 10px;
    display: inline-block;
    border: 0px dashed #ccc;

}
#Calender tr
{
}
#Calender td
{
    border: 1px solid #c0c0c0;
    padding: 3px;
    background-color:#ffffff;
}
#Calender td.select
{
    border: 1px solid #c0c0c0;
    padding: 3px;
    background-color: #f1d4de;
}
#Calender span.select
{
    border: 1px solid #c0c0c0;
    color: #ffffff;
}
#Calender th
{
    text-align: center;
}

#Calender td.lest-marc
{
    text-align: left;
    font-size: 10pt;
    border: 1px solid #c0c0c0;
    background-color:white;
}

#Calender td.noday
{
    background-color: #f3f3f3;
}

#Schedule
{
    margin: 10px;
    display: inline-block;
    border: 0px dashed #ccc;
}

#Schedule td
{
    border: 1px solid #c0c0c0;
    padding: 3px;
}

#Schedule td div.days
{
    width: 70px;
    overflow: visible;
}
#Schedule td div.comment
{
    width: 390px;
    overflow: visible;
}
.view1-head
{
   position: relative;
   height: 35px;
   background-color: #3070f0;
   font-size:12pt;
   color: white;
   width: 100%;
   padding: 5px 5px 5px 5px;
   display: inline-block;
   text-align: center;
   margin-bottom:10px;
}
.view1-head .acount
{
    width:110px;
    position: absolute;
    right:24px;
    top:5px;
    font-size:9pt;
    vertical-align:middle;
}


/* // Easy Slider */
.monthbtn
{
    width: 230px;
    height: 34px;
    background-color: #eeeeee;
    border: 1px solid gray;
    cursor: pointer;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;    
    
}
.monthbtn:hover
{
    background-color:#00549c;
    color:White;
}
.monthbtn:active
{
    background-color:#AAAAAA;
    color:White;
}
#btnBefore1:focus
{
    background-color: #ccffcc;
}
#btnBefore2:focus
{
    background-color: #ccffcc;
}
#btnNext1:focus
{
    background-color: #ccffcc;
}
#btnNext2:focus
{
    background-color: #ccffcc;
}

.calmonth
{
    padding:0px 5px 0px 5px ;
    font-size:12pt;

}

.event-nomal
{
    color: black;
}
.event-strength1
{
    font-weight: bold;
    color: black;
}
.event-strength2
{
    font-weight: bold;
    color: Blue;
}
.event-strength3
{
    font-weight: bold;
    color: Red;
}
.event-data
{
    padding-left: 5px;
    color: black;
}
.head-sun
{
    color: Orange;
    display: inline-block;
}
.head-sat
{
    color: Blue;
    display: inline-block;
}
.head-non
{
    color: Black;
    display: inline-block;
}
.cal-sun
{
    color: Orange;
    width: 22px;
    height: 22px;
    display: inline-block;
}
.cal-hol
{
    color: Red;
    width: 22px;
    height: 22px;
    display: inline-block;
}
.cal-sat
{
    color: Blue;
    width: 22px;
    height: 22px;
    display: inline-block;
}
.cal-non
{
    color: Black;
    width: 22px;
    height: 22px;
    display: inline-block;
}
.cal-today
{
    color: blueviolet;
    font-weight:bold;
    width: 22px;
    height: 22px;
    display: inline-block;
}
.sch-sun
{
    color: Orange;
    width: 10px;
    display: inline-block;
}
.sch-hol
{
    color: Red;
    width: 10px;
    display: inline-block;
}
.sch-sat
{
    color: Blue;
    width: 60px;
    display: inline-block;
}
.sch-non
{
    color: Black;
    width: 60px;
    display: inline-block;
}
.nowbox
{
    padding: 5px;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    border-color: #000000;
    background-color: lightblue;
}


/* for Smart */
@media screen and (max-width: 479px)
{

    #calender-main
    {
        margin: 20px auto 0px auto;
        width: 350px;
        height: 340px;
        border: 0px solid red;
    }
    #schedule-main
    {
        margin: 40px auto 0px auto;
        width: 350px;
    }

    .cal-sun
    {
        color: Orange;
        width: 40px;
        height: 40px;
        display: inline-block;
    }
    .cal-hol
    {
        color: Red;
        width: 40px;
        height: 40px;
        display: inline-block;
    }
    .cal-sat
    {
        color: Blue;
        width: 40px;
        height: 40px;
        display: inline-block;
    }
    .cal-today
    {
        color: blueviolet;
        font-weight:bold;
        width: 40px;
        height: 40px;
        display: inline-block;
    }
    .cal-non
    {
        color: Black;
        width: 40px;
        height: 40px;
        display: inline-block;
    }
    #Schedule td div.comment
    {
        width: 240px;
        overflow: visible;
        text-align: left;
    }
    .monthbtn
    {
        width: 130px;
        height: 34px;
        background-color: #eeeeee;
        border: 1px solid gray;
        cursor: pointer;
    }
    .view1-head .acount
    {
        width:110px;
        position: absolute;
        right:8px;
        top:5px;
        font-size:9pt;
        vertical-align:middle;
    }

}