/* Flower section */
.menu_item2 {
	display: block;
	border: solid 1px #999;
	border-radius: 8px;
	height: 50px;
	margin:  4px;
	background-color: white;
	padding: 8px;
	padding-top: 18px;
	line-height: 1.4em;
}

#flower {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#words{
	display: block;
	width: 100%;
	max- width: 240px;
	float: left;
}
        .names { display: block; height: 200px; width: 80%; overflow: scroll; float: left;
            border: 1px solid #999; margin-top: 0px; }
        .nAndF{display: block; position: relative; top: 0px;  width: 45%;
            float: left;  margin: 0 auto; text-align: center;}
        .inside_nAndF{ width: 100%; margin: 0 auto; }
        a { text-decoration: none;}

        .title01{color:red; font-size: 1.6em; position: relative; top: 8px; left: 8px;}
        .title02{ font-size: 0.85em; color: red; font-weight: bold; margin-bottom: 0px; }
        li {font-size: 0.85em;}
        .sBox{ display: block; width: 48%; float: left; margin: 1%;}
        #datePicker {display: block; position: relative; margin-left: 200px; }
        .DP {float: left; position: relative; margin: 20px auto; text-align: center; width: 50%; }


/* end of Flower*/
#topBar { width: 70%;}
#coverImage { width: 100%; }
/*
.cImage {
    display: inline-block;
    margin-top: 40px;
    width: 30%;
}
*/

.tContents {
    position: relative;
    margin-left: 27%;
    width: 70%;
    display: block;
    height: auto;
    padding: 12px;
/*
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 0px 6px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 0px 6px rgba(50, 50, 50, 0.5);
*/
}

.insideC {
    display: block;
    position: relative;
    width: 90%;
    margin-left: 10%;
    margin-bottom: 10px;
}
p.thisMonthTitle {
            font-size: 20px;
            color: #999;
            line-height: 1.5em;
            margin: 0px;
        }
p.title2 {
    font-size: 18px ;
    color: #C30;
    line-height: 1.2em;
    border-bottom: solid 1px #C30;
    margin-bottom: 4px;
    margin-top: 8px;
    width: 100%;
}

p.title3 {
    font-size: 22px ;
    line-height: 1.2em;
    margin: 4px;
}

.belong {
	font-size: 12px;
}

.cGenre {
	background-color: #390;
	color: white;
	font-size: 14px;
	font-weight: bold;
	padding: 4px;
	text-align: center;
	width: 8em;
}
.cBody {
	line-height: 1.8em;
	margin-left: 3em;
	color: #666;
}
.cCaption {
	color: #666;
	font-size: 11px;
}

#colorEast{ float: left; width: 65%;}
#colorWest{ float: left; width: 30%; padding: 1px;}
#cColor01 {width: 100%; margin-top: 20px;}
#color02 {width: 95%;}

#menu_icon {float: right;}
#top_logo { margin-top: 10px;}

#date1, #date2, #date3 {font-size: 14px;}



/* menu */
.menu_pane {
	display: none;

	background-color: #CCC;
	width: 200px;
	margin: 0 auto;
	z-index: 999;
	position: absolute;
	top: 0px;
	right: 10px;
}
.upArrow {display: block; position: relative; top: -15px; left: 156px;}
.menu_item {
	display: block;
	border: solid 1px #999;
	border-radius: 8px;
	height: 50px;
	margin: 4px;
	background-color: white;
	padding: 8px;
	line-height: 1em;
}
  ._order {
            cursor: pointer;

                text-align: center;
    display: block;
    width: 300px;
    height: 32px;
    position: relative;
    margin: 10px;
    border: solid 1px #999;
    border-radius: 6px;
    font-size: 0.85em;
    padding-top: 12px;

    background: #e9e9ce; /* Old browsers */
    background: -moz-linear-gradient(top,  #e9e9e9 0%, #fcfff4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e9e9e9 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e9e9e9 0%,#fcfff4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e9e9e9 0%,#fcfff4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e9e9e9 0%,#fcfff4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */

        }
.goArrow{color: orange;}

/* Responsive part */

/* Smartphones (portrait) 320 ----------- */
@media only screen
and (max-width : 520px) {
    .sideContainer{display: none;}
    .cImage {float: none; }
    .contentContainer{margin-right: 0px;}
    #header_north{display: none;}
    .tContents{margin-left: 0px; width: 95%;}
    ._again { width: 95%;}
    .moreItem { width: 95%;}
    div.moreInfo { width: 48%;}

    #colorWest{float: none; width: 90%;}
    #colorEast{float: none; width: 90%; }
	.DD { width: 90%; float: none;}
	.nAndF { width: 90%;}
	.names { display: block; height: 200px; overflow: scroll; width: 70%;
            border: 1px solid #999; margin-top: 0px; }
	.names li {margin-left: 0px; padding-left: 0px; }

}

/* Middium  ----------- */
@media only screen
and (min-width : 520px) {
    .sideContainer{display: block;}
    .cImage {float: left; }
 /*   .contentContainer{margin-right: 130px;}*/
    #header_west{display: none;}
    #header_east{width: 50%;}
    ._again { width: 95%;}
    .moreItem { width: 45%;}
    #colorWest{float: none; width: 90%; }
    #colorEast{float: none; width: 90%; }
	#cColor01 {width: 40%;}
/*	#sGenre {width: 33%;}
	#sAuthor {width: 33%;}
	#sSearch { float: none; width: 100%;}*/
}
@media only screen
and (min-width : 900px) {
    .sideContainer{display: block;}
    .cImage {float: left; }
 /*   .contentContainer{margin-right: 130px;}*/
    /*#header_west{display: block;}
    #header_east{width: 25%;}*/
    ._again { width: 32%;}
    .moreItem { width: 22%;}
    /*.footerBox {width: 31%;}*/
    #colorWest{float: left; width: 30%; }
    #colorEast{float: left; width: 65%; }
	#cColor01 {width: 100%;}
}

.responsive{ max-width: 100%; height: auto;}