.main-contents
{
    margin-top:320px;
    width:100%;
}


.side-bar
{
    clear: left;
    float: left;
    width: 246px;
    height:100%;
    padding:0px 10px 10px 10px;
   
}

.side-calender
{
    background-color:white;
    border:0px solid red;
    width:230px;
    height:320px;
    text-align:center;
    padding:10px 5px 5px 5px;

}
.side-calender img
{
    width:200px;

}
.side-booklist
{
    background-color:white;
    border:0px solid gray;
    width:230px;
    height:420px;
    text-align:center;

}

.main-menu
{
    float: left;
    width: 100%;
    margin:0;
    padding: 10px 0px 10px 0px;
    text-align:center;
}
.menu-item
{

}

.next-box
{
    border:1px solid #3cb371 ;
    padding:8px;
}
pre {
   white-space: pre-wrap ;
}

table td
{
   border:1px solid gray;
   padding:5px;
   text-align:center;
}

/* for Tablet */
@media screen and (max-width: 768px)
{
    .main-contents
    {
        margin-top:70px;
    }
    #main-contents
    {
        margin-top:70px;
    }
    pre {
	    white-space: pre-wrap ;
    }
    .side-bar 
    {
        display: inline-block;
        width:100%;
	text-align:center;
    }
    .side-calender
    {
        width:100%;
	text-align:center;
    }
    .main-menu {
        display: inline-block;
        width:100%;
    }
    .side-booklist
    {
        height:20px;
    }
}

/* for Smart */
@media screen and (max-width: 479px)
{
    .main-contents
    {
        margin-top:70px;
    }
    #main-contents
    {
        margin-top:70px;
    }
    pre {
	    white-space: pre-wrap ;
    }
    .side-bar 
    {
        display: inline-block;
        width:100%;
	text-align:center;
    }
    .side-calender
    {
        width:100%;
	text-align:center;
    }

    .main-menu {
        display: inline-block;
        width:100%;
    }
    .side-booklist
    {
        height:20px;
    }

}