html {
    background-color: #e6e6e6;
}

body {

    background:url("./bc2.png") fixed repeat;
}

div#blogTitle>h2{
    font-weight: 100;
}

img.avatar{
    height: 150px;
    width: 150px;
    
    border-radius: 75px;
    border: 3px solid white;
    position:fixed;
    top: 6%;
    left:4.5%;
}
img.avatar:hover{
    border:5px solid white;
    box-shadow: 0px 2px 6px gray;
}

/*div #header {
    margin-top: 20px;
    margin-left: 5%;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;
}
*/

div,table{
    -webkit-transition: all .5s ;
    /*color .5s, background .5s, height .5s ,left .5s ,right .5s ,border-radius .5s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;*/
    -moz-transition:    all .5s ;
    /*color .5s, background .5s, height .5s ,left .5s ,right .5s ,border-radius .5s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;*/
    -o-transition:      all .5s ;
    /*color .5s, background .5s, height .5s ,left .5s ,right .5s ,border-radius .5s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;*/
    -ms-transition:     all .5s ;
    /*color .5s, background .5s, height .5s ,left .5s ,right .5s ,border-radius .5s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;*/
    transition:         all .5s ;
    /*color .5s, background .5s, height .5s ,left .5s ,right .5s ,border-radius .5s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;*/
}

div #header {
    width: 25%;
    float: left;
    top:300px;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    /*z-index: 300;*/
}

div#main {
    width: 66.66666666%;
    float: left;
    position: relative;
    min-height: 1px;
    margin-top: 30px;
    padding-right: 15px;
    padding-left: 15px;
}


/*
 =============== navigator =================
=============== navigator =================
=============== navigator =================
*/
div #navigator {
    margin-top: 20px;
    padding: 20px;
    margin-left: 5%;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;
    border-radius: 0px 0px 40px 40px;
}

ul #navList{
    padding: 20px;
}

ul#navList>li {
    list-style-type:none;
}

ul#navList>li{
    border:0px solid #fff;
}


/*
 =============== navigator =================
=============== navigator =================
=============== navigator =================
*/


li>a.menu {
    padding: 1px;
    margin: 10px 0 ;
    border: 0px solid #fff;
    border-left-width: 3px;
    border-radius: 3px;
    /*border-left-color: #aa6708;*/
    
    font-size: 36px;
}

ul#navList>li:nth-child(1){
    border: 1px solid #fff;
    border-left-width: 3px;
    border-left-color: orange;
    font-size: 40px;
    
}

div#navigator>ul>li>a{
    color:black;
}



ul#navList>li:nth-child(1)>a{
    color:rgba(209, 86, 104, 0.92);
    
}
ul#navList>li:nth-child(2)>a{
    color: orange;
}

ul#navList>li:nth-child(3)>a{
    color: darkgreen;
}

ul#navList>li:nth-child(4)>a{
    color: darkblue;
}

li>a.menu:hover{
    border-left-color: rgba(209, 86, 104, 0.92);
}


#navList>li>a:hover{
    color:rgba(209, 86, 104, 0.92);
    background-color: #f2f2f2;
    font-size: +40px;
    text-decoration: none; 
}


/**
**
** =============== for article ===================
** =============== for article ===================
** =============== for article ===================
** =============== for article ===================
**
**
 * desired article
 */

div.day{

    width: 600px;
    max-height: 850px;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;

    margin-left: 3%;
    margin-top: 20px;
    padding: 10px;
    /*margin-left: 5%;*/
    right: 0%;
    background-color: #fff;
    box-shadow: 0px 2px 6px white;
    /*border: 2px  solid gray;*/
    border-radius: 15px 15px 15px 15px;
}

div.day>.postCon ,div.day>.postDesc{
    display: none;
}

div.postCon{
    font-weight: 100;
}

div.day>div{
    max-width: 200px;
    font-size: 20px;
    text-align:center; 
    margin:0 auto;
    /*left: 10px;*/
    /*left: 20px;*/

}

a:focus{
    text-decoration: none;
}

div.day>.postTitle>.postTitle2{
    border-left-color: rgba(209, 86, 104, 0.92);
    /*color:#aa6708;*/
}

div.day>.postTitle>.postTitle2:hover{
    border-left-color: #6f5499;
    color:#6f5499;
    margin: 19px;

}

div.day>div>.postTitle2{
    font-size: 28px;
    border: 3px  solid #fff;
    border-left-width: 7px;
    background-color:#f3f3f3;

}

div.day>div.postTitle{
    margin-top: 15px;
    margin-left: 10px;
    padding: 10px;
    max-width: 300px;
    /*width: 100%;*/
    /*font-size: 35px;*/
}

div.day>div.postTitle>a{
    font-size: 1em;
}

div.day>div:nth-child(2){
    /*margin-top: 25px;*/
    
}
div.day>div.postTitle:nth-child(2) >a{
    color:green;
}

div.day>div.postTitle:nth-child(8) >a{
    color:orange;
}


div.day>div.postTitle:nth-child(14) >a{
    color:black;
}



div.day>div.postTitle{
    float: left;
}


.day>div.dayTitle{
    font-size: 12px;
    text-align: left;
    color: gray;
    /*left: -10px;*/
    position:absolute;

}

.day>div.postSeparator{
    width: 0%;
}


/**

**
================== article animal ===============
** =============== for article ===================
** =============== for article ===================
** =============== for article ===================
*/

div.day:hover{

    -webkit-transition: color .5s,box-shadow .5s ,border .5s , background .5s, height .5s ,left .5s ,right .5s ,border-width .5s,border-radius 1s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;
    -moz-transition:    color .5s,box-shadow .5s ,border .5s , background .5s, height .5s ,left .5s ,right .5s ,border-width .5s,border-radius 1s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;
    -o-transition:      color .5s,box-shadow .5s ,border .5s , background .5s, height .5s ,left .5s ,right .5s ,border-width .5s,border-radius 1s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;
    -ms-transition:     color .5s,box-shadow .5s ,border .5s , background .5s, height .5s ,left .5s ,right .5s ,border-width .5s,border-radius 1s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;
    transition:         color .5s,box-shadow .5s ,border .5s , background .5s, height .5s ,left .5s ,right .5s ,border-width .5s,border-radius 1s ,display .5s,top .5s ,margin .5s ,padding .5s,width .5s ,color .5s ,text-align .5s, position .5s;

    /*position: absolute;*/
    width: 100%;
    /*left: 100px;*/
    top:-10px;
    height: 100%;
    z-index: 1000;
    box-shadow: 0px 2px 6px gray;

    border-radius: 0 0 35px 35px;
    border:0.5px solid white;
    /*border-top-width:8px;*/
    /*border-top-color:#2a6496;*/
    border-bottom-width: 18px;
    border-bottom-color:#2a6496;
}

div.day:hover> .postTitle{
    text-align: left;
    float: none;

}

div.day:hover> .postTitle>a{
    /*text-align: left;*/
    /*float: none;*/
    font-size: 25px;

}

div.day:hover>div{
    max-width: 100%;
}
div.day:hover> .postCon{
    display: block;
    margin-top: -5px;
}

div.day:hover > .postDesc{
    display: block;
    font-size: 13px;

}

div.day:hover > .postSeparator{

    -webkit-transition: color .8s,box-shadow .8s ,border .8s , background .8s, height .8s ,left .8s ,right .8s ,border-radius .8s ,display .8s,top .8s ,margin .8s ,padding .8s,width 3.2s ;
    -moz-transition:    color .8s,box-shadow .8s ,border .8s , background .8s, height .8s ,left .8s ,right .8s ,border-radius .8s ,display .8s,top .8s ,margin .8s ,padding .8s,width 3.2s ;
    -o-transition:      color .8s,box-shadow .8s ,border .8s , background .8s, height .8s ,left .8s ,right .8s ,border-radius .8s ,display .8s,top .8s ,margin .8s ,padding .8s,width 3.2s ;
    -ms-transition:     color .8s,box-shadow .8s ,border .8s , background .8s, height .8s ,left .8s ,right .8s ,border-radius .8s ,display .8s,top .8s ,margin .8s ,padding .8s,width 3.2s ;
    transition:         color .8s,box-shadow .8s ,border .8s , background .8s, height .8s ,left .8s ,right .8s ,border-radius .8s ,display .8s,top .8s ,margin .8s ,padding .8s,width 3.2s ;



    height: 1px;
    background-color: gray;
    left: 10px;
    width: 60%;
    margin-bottom: 7px;
    margin-left: -11px
}



/*
** =============== for article ===================
** =============== for article ===================
** =============== for article ===================
** =============== for article ===================
**
**
*/




div#main>div#sideBar>div#sideBarMain>div.newsItem {
    position: fixed;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;
    width: 200px;
    top:-9%;
    left: 3%;
    border:3px solid #fff;
    border-bottom-color: rgba(0, 0, 84, 0.6);
    border-bottom-width: 5px;
    /*padding-bottom: 35px;*/
    /*border-radius: 0 0 80px 80px;*/

}

div#main>div#sideBar>div#sideBarMain>div.newsItem>h3 {
    font-weight: 400;
    font-style:bold;
    color: rgba(209, 86, 104, 0.92);
    font-size: 18px;
    border:2px solid #fff;
    border-left-color: #000;
    border-left-width: 4px;
    width:100%;
    height: 13%;
}


div#main>div#sideBar>div#sideBarMain>div.newsItem:hover {
    height: 13em;
    top:0px;
    width: 33.333333%;
    left: 9em;
    /*border-radius:0 ;*/
}






/*div#main>div#sideBar>div#sideBarMain>div.newsItem>h3:hover {
    height: 7em;
    top:10px;
    width: 33.333333%;
    border-radius:0 ;
}*/


div#main>div#sideBar>div#sideBarMain>div#blog-calendar>table#blogCalendar {
    position: fixed;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;
    width: 16.333333%;
    left: -9%;
    border:6px solid #fff;
    border-right-width: 7px;
    border-right-color: rgba(0, 0, 84, 0.6);
    
}

div#main>div#sideBar>div#sideBarMain>div#blog-calendar>table#blogCalendar:hover{
    height: 10em;
    left: 20px;
    z-index: 200;
}




div#header:hover{
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition:1s;
    -ms-transition:1s;

    transition: 1s;
    /*left: 10em;*/
    z-index: 20000;
    transform: rotate(7deg) ;
}



div#navigator{
    height: 32em;
}

div#header:hover>#navigator{
    /*border-right-width: 8px;
    border-bottom-color:#2a6496; */

}

div#navigator:hover{
    -moz-transition: 14s;
    -o-transition: 14s;
    -webkit-transition:14s;
    -ms-transition:14s;
    transition: 14s;

    border:.1px solid #2a6496;
    border-bottom-width: 188px;
    border-bottom-color:#2a6496; 

    border-right-width: 8px;
    border-bottom-color:#2a6496; 

    /*height: 400px;*/
}


div#header:hover{
    transition: 4s;
    -moz-transition: 4s;
    -o-transition: 4s;
    -webkit-transition:4s;
    -ms-transition:4s;
    top:252px;
}

#navigator:hover>ul>li{
    transition: 3s;
    -moz-transition: 3s;
    -o-transition: 3s;
    -webkit-transition:3s;
    -ms-transition:3s;
    border:0px solid #fff;
    border-bottom-width: 1px;
    border-bottom-color:#2a6496;
}

div.topicListFooter{
    position: fixed;
    width: 16.666666%;
    /*right: 0%;*/
    bottom: 0%;
    padding: 5px;
    /*background-color: #fff;*/
    /*box-shadow: 0px 2px 6px gray;*/

}
div.topicListFooter>div>a{
    /*position: fixed;*/
    width: 16.666666%;
    right: 0%;
    padding: 10px;
    margin: 10px;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;

}


div#leftcontentcontainer{
    position: fixed;
    /*float: left;*/
    right: 0%;
    width: 125px;
}
div.mySearch,
div.catListEssay,
div.catListLink,
div.catListComment,
div.catListTag,
div.catListTitle,
div.catListView,
div.catListPostArchive,
div.catListArticleArchive,
div.catListPostCategory,
div.catListNoteBook,
div.catListImageCategory,
div.catListFeedback{
    position: relative;
    float: left;
    height: 60px;
    right: 0%;
    background-color: #fff;
    box-shadow: 0px 2px 6px gray;
    /*color:#fff;*/
    width: 125px;
}



h3.catListTitle{
    border:6px solid #fff;
    border-left-width: 7px;
    border-left-color: black;
    font-size: 20px;   
}
/*
div#leftcontentcontainer>div:hover{
    display: block;
}*/

div.mySearch>ul,
div.mySearch>div{
    display: none;
}
div.catListEssay>ul,
div.catListEssay>div{
    display: none;
}
div.catListLink>ul,
div.catListLink>div{
    display: none;
}
div.catListComment>ul,
div.catListComment>div{
    display: none;
}
div.catListTag>ul,
div.catListTag>div{
    display: none;
}
div.catListTitle>ul,
div.catListTitle>div{
    display: none;
}
div.catListView>ul,
div.catListView>div{
    display: none;
}
div.catListPostArchive>ul,
div.catListPostArchive>div{
    display: none;
}
div.catListArticleArchive>ul,
div.catListArticleArchive>div{
    display: none;
}
div.catListPostCategory>ul,
div.catListPostCategory>div{
    display: none;
}
div.catListNoteBook>ul,
div.catListNoteBook>div{
    display: none;
}
div.catListImageCategor>ul,
div.catListImageCategor>div{
    /*position: absolute;*/
    display: none;
}
div.catListFeedback>ul,
div.catListFeedback>div{
    display: none;
}

div.mySearch:hover,
div.catListEssay:hover,
div.catListLink:hover,
div.catListComment:hover,
div.catListTag:hover,
div.catListTitle:hover,
div.catListView:hover,
div.catListPostArchive:hover,
div.catListArticleArchive:hover,
div.catListPostCategory:hover,
div.catListNoteBook:hover,
div.catListImageCategory:hover,
div.catListFeedback:hover
/*div#leftcontentcontainer>div>div>div*/
{
    /*transition-duration:1.5s ;
    -webkit-transition-duration:1.5s ;
    -moz-transition-duration: 1.5s;
    -o-transition-duration:1.5s;*/
    /*display: block;*/

    width: 400px;
    /*width: 50%;*/
    right: 0%;
    left: -230px;
    top:10%;
    height: 100%;
    z-index: 100;
}

div.catListComment:hover {
    top:-30em;
    height: 40em;
    padding:10px;
    left:-300px
}

div#leftcontentcontainer>div>div>div:hover>div,
div#leftcontentcontainer>div>div>div:hover>ul{
    display: block;
}

div.catListComment:hover>div,
div.catListComment:hover>ul{
    display: block;
}

div.catListFeedback:hover>div,
div.catListFeedback:hover>ul{
    display: block;
}

div.catListView:hover>div,
div.catListView:hover>ul{
    display: block;
}

div.mySearch:hover>ul,
div.mySearch:hover>div{
    display: block;
}


/*
div.catListEssay:hover>div,
div.catListEssay:hover>ul{
    display: block;
}

div.catListLink:hover>div,
div.catListLink:hover>ul{
    display: block;
}
div.catListComment:hover>div,
div.catListComment:hover>ul{
    display: block;
}
div.catListTag:hover>div,
div.catListTag:hover>ul{
    display: block;
}
div.catListTitle:hover>div,
div.catListTitle:hover>ul
{
    display: block;
}
div.catListView:hover>div,
div.catListView:hover>ul{
    display: block;
}
div.catListPostArchive:hover>div,
div.catListPostArchive:hover>ul{
    display: block;
}
div.catListArticleArchive:hover>div,
div.catListArticleArchive:hover>ul{
    display: block;
}
div.catListPostCategory:hover>div,
div.catListPostCategory:hover>ul{
    display: block;
}
div.catListNoteBook:hover>div,
div.catListNoteBook:hover>ul{
    display: block;
}
div.catListImageCategory:hover>div,
div.catListImageCategory:hover>ul{
    display: block;
}

*/
.catListPostArchive{
    z-index: -10;
    height: 50px;
    /*top:10px;*/
}

.catListEssay{
    /*top: 30px;*/
    z-index: 1;
}

.catListLink{
    /*top:50px;*/
}

.catListNoteBook{
    /*top:70px;*/
    z-index: 2;
}

.catListTag{
    /*top:90px;*/
    z-index: 3;
}

.catListPostCategory{
    /*top:110px;*/
    z-index: 4;
}

.catListPostArchive{
    /*top:130px;*/
    z-index: 5
}

.catListArticleArchive{
    /*top:150px;*/
    z-index: 5;
}

.catListImageCategory{
    /*top:170px;*/
    z-index: 6;
}

.mySearch{
    /*position: fixed;*/
    /*left: -700px;*/
    /*top:190px;*/
    /*bottom: 0px;*/
    /*top:190px;*/
    /*z-index: 7;*/
}

.catListComment{
    /*top:210px;*/
    z-index: 8;
    /*width: 37%;*/
}

.catListView{

    z-index: 10;
}

.catListFeedback{
    z-index: 11;
}



.catListTitle>a>img{
    border :1px solid gray;
    border-radius: 16px 16px 16px 16px;
    width: 32px;
}

/*
============  footer ================
============  footer ================
============  footer ================
============  footer ================
*/

div #footer {
    background-color: #e6e6e6;
    position: fixed;
    bottom: 0%;
    font-size: 12px;
    font-family: monospace;
    font-weight: 100;
    color: black;
}