.cal h1 { width:fit-contents; margin:0 auto; cursor:default; }
.blue  { background:#DDF; border-color:#D0D0FF; }
.red   { background:#FDD; border-color:#FFD0D0; }
@media handheld, screen and (max-width:850px) {
    .cal { position:relative; top:-1px; background:#FFF; width:100%; }
    .cal.open   { position:fixed; top:0; }
    .cal h1 { text-indent:0; text-align:center; }
    .cal h1 span    {
        top:4px;
        font-size:75%;
        border:1px solid #999;
        width:1.1em;
        text-align:center;
        border-radius:1em;
        cursor:pointer;
        position:absolute;
        right:.3em;
        font-family:sans-serif;
        font-weight:normal;
        color:#900;
        display:none;
    }
    .cal.open h1 span   { display:inline-block; }
    .cal.open h1 em { display:none; }
    .cal h1 span:hover  { background:#EEE; }
    .cal h1 em  {
        display:block;
        font-size:12px;
        font-style:normal;
        color:#009;
        position:relative;
        top:-5px;
        cursor:pointer;
    }
    .cal em, .cal > h2  { display:none; }
    .cal > div.grid  {
        height:580px;
        overflow-x:hidden;
        overflow-y:scroll;
        border-top:1px solid #000;
        display:none;
    }
    .cal.open > div.grid    { display:block; }
    .cal > div > div   {
        display:block;
        border-top:1px solid #000;
        position:relative;
        height:300px;
    }
    .cal > div > div.out   {
        display:none;
    }
    .cal > div > div.first   { border-top:0; }
    .cal > div > div.today   { background:#FFFBDD; }
    .cal > div > div h3    {
        position:absolute;
        top:0;
        left:0;
        transform-origin:150px 151px;
        transform:rotate(-90deg);
        background:#EEEE;
        width:300px;
        text-align:center;
        line-height:40px;
        margin:0;
        height:40px;
        font-size:18px;
        font-weight:normal;
        letter-spacing:1px;
        border-bottom:1px solid #666;
    }
    .cal > div > div div    {
        position:relative;
        top: 10px;
        margin: 0 0 10px 47px;
        line-height: 3ex;
        border-radius: 20px;
        width: max-content;
        max-width: 89%;
        font-size: 18px;
        line-height: 22px;
        overflow: hidden;
    }
    .cal > div > div div a {
        color:#000;
        text-decoration:none;
        display:inline-block;
        padding:2px 8px 0;
        max-width:100%;
        overflow:hidden;
        max-height:20px;
    }
    .cal > div > div div.open a { overflow:visible; }
    .cal > div > div div.blue a.short {
        display:none;
    }
}
@media only screen and (min-width:850.01px) {
    body    { overflow:auto !important; }
    .cal, .cal .grid	{
    	width:841px;
    	margin:0 auto;
    }
    .cal, .cal > *  { text-indent:0; }
    .cal h1	{ text-align:center; }
    .cal h1 span, .cal h1 em    { display:none; }
    .cal h2, .cal h2 div	{
    	height:25px;
    	line-height:25px;
    }
    .cal h2	{
    	position:relative;
    	border-right:1px solid #000;
    	overflow:hidden;
    	margin:4px 0 0 0;
    }
    .cal h2 span	{
    	display:inline-block;
    	font-size:22px;
    	border-left:1px solid #000;
    	text-align:center;
    	position:absolute;
    	bottom:0;
    	overflow:hidden;
    }
    .cal h2 span:nth-child(7n+1)	{ left:0; }
    .cal h2 span:nth-child(7n+2)	{ left:120px; }
    .cal h2 span:nth-child(7n+3)	{ left:240px; }
    .cal h2 span:nth-child(7n+4)	{ left:360px; }
    .cal h2 span:nth-child(7n+5)	{ left:480px; }
    .cal h2 span:nth-child(7n+6)	{ left:600px; }
    .cal h2 span:nth-child(7n)		{ left:720px; }
    .cal h2 span, .cal .grid > div	{
    	width:119px;
    }
    .cal h3 { display:none; }
    .cal .grid	{
    	height:541px;
    	border:1px solid #000;
    	border-width:0 0 1px 1px;
    }
    .cal .grid em	{
    	display:inline-block;
    	font-size:18px;
    	border:1px solid #000;
    	border-width:0 1px 1px 0;
    	width:25px;
    	text-align:center;
    	border-bottom-right-radius:8px;
    	font-style:normal;
    	float:left;
    }
    .cal .grid > div	{
    	height:89px;
    	border:1px solid #000;
    	border-width:1px 1px 0 0;
    	float:left;
    	overflow:hidden;
    }
    .cal .grid > div div	{
    	display:inline-block;
    	width:fit-content;
    	border:1px solid transparent;
    	border-radius:8px;
    	margin:3px 0 2px 2px;
    	padding:1px 4px 0;
    	font:13px sans-serif;
    	max-width:85%;
    }
    .cal .grid > div div a  { color:#000; text-decoration:none; }
    .cal .grid > div div span, .cal .grid > div .blue a	{ display:none; }
    .cal .grid > div .blue a.short  { display:inline; }
}