
/* Just for positioning the menu correctly */
#menu {
	width: 520px;
	/* top: 25px;
	left: -25px; */
	clear:both;
	float: right;
	margin-top: 5px;
	margin-right: 85px;
	position: relative;
	font-family: Georgia, "open-sans", 'Meiryo UI','メイリオ'; /*Arial, */
}

.center-circle{
	position: absolute;/*position: absolute;*/
	content:  " ";
	width: 130px;
	height: 130px;
	margin: 0px auto;
	top: 85px;
	left: 85px;
	background-color: #97777D;
	border-radius: 300px;
	-o-border-radius: 300px;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	z-index: 2;
}

/* We're using overflow: hidden; so we need to create a fake shadow */
.faux-shadow {
	position: absolute;/*position: absolute;*/
	content:  " ";
	width: 150px;
	height: 150px;
	margin: 0px auto;
	top: 75px;
	left: 75px;
	
	box-shadow: 0 0 50px rgba(0,0,0,0.3);
	border-radius: 300px;
	-o-border-radius: 300px;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	z-index: 1;
}
#menu h2{
	position: relative;
	top: -20px;
	left: 0px;
	margin:  20px 0 0 -12px;
	width: 275px;
	text-align: center;
}
#menu img {
	text-align: center;
	padding: 0;
	width: auto;
	margin: 5px 60px;
}
.imgbox{
	width: 255px;
	height: auto;
	clear: both;
}
/* The styling of the menu items container div */
#menu-items {
	width: 300px;
	height:300px;
	border-radius: 250px;
	-o-border-radius: 250px;
	background: #aaa;
	position: absolute;/*position: absolute;*/
	top: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

/* I separated the pieces of the menu into two divs, top and bottom. */
#menu-items .top, #menu-items .bottom {
	width: 100%;
	float: left;
	z-index: 3;
	height: 50%;
} 

#menu-items .bottom {
	top: 50%;
}

/* The middle div is largely to fix a bug where the content would exceed the 
   border radius when overflow: hidden; was set */
   
#menu-items .middle {
	height: 100%;
	white-space: nowrap;
}

/* Styling the background pieces. These containers don't do anything, they are 
   just for design */
   
#menu-items .middle .bg-piece {/*###########2 smaller item round parts################*/
	width: 33.3%;
	height: 100%;
	text-align: center;
	display: inline-block !important;
	background: #ffc9d2;
	font-size: 2.5em;
	position: absolute;/*position: absolute;*/
	display: block;
}

/* It was important to make sure all the background pieces were in the correct
   position and this required a little bit of experimenting. The code below 
   makes sure everything is positioned in the correct order */
   
#menu-items .middle > div .bg-piece:nth-of-type(2) {
	position: absolute;/*position: absolute;*/
	width: 0;
	height: 0;
}
#menu-items .middle .bottom .bg-piece:nth-of-type(2):after, #menu-items .middle .top .bg-piece:nth-of-type(2):after {  
	content: " ";
	position: absolute;/*position: absolute;*/
	border-color: transparent transparent #ffd8df transparent;
	border-width: 148px;
	border-style: solid;
	top: -142px;
	left: 0px;
	z-index: 4;
}

#menu-items .middle .top .bg-piece:nth-of-type(2):after { /*top middle click position*/
	border-color: #ffd8df transparent transparent transparent;
	top: -5px;
	left: 0;
}

#menu-items .middle .top .bg-piece:nth-of-type(1) { 
	box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}

#menu-items .middle .top .bg-piece:nth-of-type(3) { 
	box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1), inset -7px -161px 72px rgba(0, 0, 0, 0.1);
}

#menu-items .middle > div .bg-piece:nth-of-type(1) {
	width: 50%;
	box-shadow: inset -125px 0 36px -35px rgba(0, 0, 0, 0.1);
}

#menu-items .middle > div .bg-piece:nth-of-type(3) {
	width: 50%;
	right: 0;
	box-shadow: inset 125px 0 36px -35px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------ */

/* The labels are what contain the icons */
#menu-items label {
	position: absolute;/*position: absolute;*/
	z-index: 999;
	font-size: 0.8em;
	border-radius: 5px;
	-o-border-radius: 5px;
	cursor: pointer;
	text-shadow: 1px 1px 0 rgba(166,11,33,0.1);
	padding-bottom: 25px;
	
}

/* On hover I thought they looked nice with a little blue glow! */
#menu-items label:hover {
	text-shadow: 0 0 15px #A60B21;
}

/* The is the info boxes, these appear when the menu item is selected */
#menu .info {  /* this is the pop up title menu box*/
	opacity: 0;
	position: absolute; /*<---Cannot take out this! WIthout this, the 2,3,4,5,6th menu will be showing all the way down when clicekd.*/
	/* right: 400px;
	top: 10px; */
	margin: 10px 0 -50px 310px;
	/*display: inline-block;*/
	background-color: #d2d2d2;
	padding: 10px;
	color: #CE376C; /*#A60B21 #8B014F*/
	width: 255px;
	height: 260px;
	font: normal normal 1.5em Georgia;
	background: #eee;
	border: 1px solid #ddd;
	font-weight: bold;
	border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: inset 0px 40px 200px -30px rgba(255, 255, 255, 1), 0px 0px 20px rgba(0, 0, 0, 0.1);
}

/* A little arrow for the menu boxes */
#menu .info:after {
	position: absolute;
	content: " ";
	top: -23px;
	left: 130px;
	border-color: #A60B21 transparent transparent transparent; /* #f3f3f3 is whitish/grayish color*/
	border-width: 10px;
	border-style: solid;
}

/* A border for the arrow! */
#menu .info:before {
	position: absolute;
	content: " ";
	top: -22px;
	left: 130px;
	border-color: #ddd transparent transparent transparent; /* #ddd is blueish color*/
	border-width: 10px;
	border-style: solid;	
}

/* Hide the radio and checkboxes */
#menu input[type='checkbox'], input[type='radio'] { display: none; }

/* Position the icons correctly */
#menu-items .top .ss-sweets {top: 87px; left: 34px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center; opacity: 0.9;}
#menu-items .top .ss-bread {  top: 84px; left: 230px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center;} /*Before changing Yeast Bread to Bread, it was  top: 87px; left: 215px; */
#menu-items .top .ss-basic { top: 26px; left: 120px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center;}/*Before changing Basic/Japanese to Basic/Kiso,it was top: 26px; left: 106px; */
#menu-items .bottom .ss-yomiuri {  top: 173px; left: 29px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center;}
#menu-items .bottom .ss-miso {  top: 173px; left: 235px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center;}
#menu-items .bottom .ss-advanced { top: 232px; left: 85px; background: url(../img/roundmenu-heart-icon.gif) no-repeat bottom center;}/*Before changing Advanced to Advanced/Omotenashi,it was top: 232px; left: 121px;; */

/* The below code rotates the menu items to the correct position
   when each is clicked. */
#info-sweets:checked ~ #menu-items, #menu-items .top .ss-bread { 
	-webkit-transform: rotateZ(66deg); 
	-moz-transform: rotateZ(66deg); 
	-ms-transform: rotateZ(66deg); 
	-o-transform: rotateZ(66deg); 
	transform: rotateZ(66deg); 
}


#info-bread:checked ~ #menu-items, #menu-items .top .ss-sweets { 
	-webkit-transform: rotateZ(-66deg); 
	-moz-transform: rotateZ(-66deg); 
	-ms-transform: rotateZ(-66deg); 
	-o-transform: rotateZ(-66deg); 
	transform: rotateZ(-66deg); 
}

#info-yomiuri:checked ~ #menu-items, #menu-items .bottom .ss-miso { 
	-webkit-transform: rotateZ(114deg); 
	-moz-transform: rotateZ(114deg); 
	-ms-transform: rotateZ(114deg); 
	-o-transform: rotateZ(114deg);	 
	transform: rotateZ(114deg); 
}

#info-miso:checked ~ #menu-items, #menu-items .bottom .ss-yomiuri { 
	-webkit-transform: rotateZ(-114deg); 
	-moz-transform: rotateZ(-114deg); 
	-ms-transform: rotateZ(-114deg); 
	-o-transform: rotateZ(-114deg); 
	transform: rotateZ(-114deg); 
}

#info-advanced:checked ~ #menu-items, #menu-items .bottom .ss-advanced { 
	-webkit-transform: rotateZ(180deg); 
	-moz-transform: rotateZ(180deg); 
	-ms-transform: rotateZ(180deg); 
	-o-transform: rotateZ(180deg); 
	transform: rotateZ(180deg); 
}

/* --------------------------------------------------------------- */

/* Highlight the selected item */
#info-sweets:checked ~ #menu-items .ss-sweets,
#info-bread:checked ~ #menu-items .ss-bread,
#info-yomiuri:checked ~ #menu-items .ss-yomiuri,
#info-miso:checked ~ #menu-items .ss-miso,
#info-advanced:checked ~ #menu-items .ss-advanced,
#info-basic:checked ~ #menu-items .ss-basic { 
	text-shadow: 0 0 15px #3facf2;
	color: #24434f;
}

/* Make opacity of the info boxes 1 when they are clicked on */
#info-sweets:checked ~ .sweets-info,
#info-bread:checked ~ .bread-info,
#info-yomiuri:checked ~ .yomiuri-info,
#info-miso:checked ~ .miso-info,
#info-advanced:checked ~ .advanced-info,
#info-basic:checked ~ .basic-info {
	opacity: 1;
	font-size: 84%;
	font-family: "Georgia";
	position: relative;
	right: 0px;
	top: -5px;
	z-index: 999; /*Dont take this! This is the only way to enable layers of yomi-info and info-box and their linkings to work properly*/
}

.arrow{
	z-index: 4;
	/*background-color: yellow;*/
	cursor: pointer;
	border-radius: 10px;
	-o-border-radius: 10px;
	text-align: center;
	margin-top: -15px;
	font-family: "open-sans",'Meiryo UI','メイリオ','小塚ゴシックPro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'ＭＳ Ｐゴシック',sans-serif; 
	/*position: static;*/
}
.menuBoxTop{
	width: auto;
	height: 220px;
	font-family: "open-sans",'Meiryo UI','メイリオ','小塚ゴシックPro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'ＭＳ Ｐゴシック',sans-serif; 
}
.menuBoxTop h2{
	position: absolute;
	top: 100px;
}

#menu #test a{
	text-decoration: blink;
}