/* Style CSS */
#frame	{
	position:relative;
	width:720px; height:540px;
	margin:30px auto;
}


.homecell	{
	width:240px; height:180px;
	position:absolute; top:0px; left:240px;
	z-index:0;
	transition: all 2s;
	transition-timing-function: ease;
	overflow:hidden;
}
.homecell:hover	{
	width:300px; height:575px;
	position:absolute; top:-15px; left:210px;
	z-index:1;
}
#home	{
	background-image: url("../Images/phcafe2_b.jpg");
	background-color: #fdb;
	background-repeat: no-repeat;
	background-position: top center;
	font-size:180%;
}
#home:hover	{
	font-size:100%;
}
/*#home p {text-align:left;}*/
#homepop	{
	position:absolute; top:180px; left:0px;
	padding: 8px 25px;
}
#homepop div {margin-top:0.8em;}

#homebox {
	width:250px; height:575px;
	margin: 15px auto;
	background-image: url("Images/phcafe2_b.jpg");
	background-repeat: no-repeat;
	background-position: top center;	
}

.aboutcell	{
	width:250px; height:180px;
	position:absolute; top:180px; left:240px;
	z-index:0;
	background-color: #fdb;
	transition: all 2s;
	transition-timing-function: ease;
	overflow:visible;
/*	overflow:hidden;*/
	text-align: center;
}
.aboutcell:hover	{
	width:300px; height:420px; /*420px;*/
	position:absolute; top:140px; left:210px;
	z-index:1;
}
#aboutlogo, #aboutpop, #aboutlink {position:absolute;}

#aboutbox {
	margin:auto;
	text-align: center;
}
#aboutbox div {
	width:50%;
	margin:auto;
	text-align: center;
}

#aboutlogo {
	width:180px;
	top: 50px; left:50%;
	transform: translateX(-55%);
}
.aboutcell:hover #aboutlogo {width: 640px; top:-10%;}
#aboutboxlogo {width:640px;}

svg.define {display:none}
svg.logo {
	width:100%;
	stroke: none;
	fill: white;
	filter: drop-shadow(0.5em 0.5em 0.5em black);
}

#aboutpop, #aboutlink {opacity: 0;}
.aboutcell:hover #aboutpop, .aboutcell:hover #aboutlink {opacity: 1;}
#aboutboxinfo,
#aboutpop	{
	font-size: small;
	top:150px; left:0px;
	padding: 0px 25px;
	line-height: 1.4em;
}
.aboutcell:hover #aboutpop {top:240px;}
#aboutboxlink,
#aboutlink {
	text-align: left;
	font-size: small;
	width: 200px;
	line-height: 1.2em;
}
#aboutboxlink {
	margin: 0 auto;
	display: block;
	position: absolute;
	border: 1px solid red;
	width: 200px;
	text-align: left;
}
#aboutlink {
	top: 280px;
	left: 65px;	
}
.aboutcell:hover #aboutlink {top:320px;}

.floatleft	{
	float: left;
	margin-right: 5px;
}
.clearboth	{
	clear: both;
}

/*
form	{
	position:absolute; top:260px; left:0px;
	padding:0px 25px;
}
input,textarea	{
	width:240px;
}
*/

#foot	{
	width:720px; height:20px;
	font-size:small;
	font-weight:lighter;
	text-align:center;
	padding-top:5px;
	position:absolute; top:540px; left:0px;
	z-index:0;
}

.cell	{
	position:absolute; width:240px; height:180px;
	background-color: white;
	z-index:0;
	transition: all 1s;
	transition-timing-function: ease;
	overflow:hidden;
}
.cell:hover	{
	width:432px; height:324px;
	z-index:1;
}
.cell img {
	width:100%;
	position:absolute;
	top:0; left:0;
/*	transform: translateX(-50%);*/
}

#c00, #c01, #c02, #l0, #r0 {top:0;}
#c00:hover, #c01:hover, #c02:hover, #l0:hover, #r0:hover {top:-15px;}
#c10, #c11, #c12, #l1, #r1 {top:180px;}
#c10:hover, #c11:hover, #c12:hover, #l1:hover, #r1:hover {top:116px;}
#c20, #c21, #c22, #l2, #r2 {top:360px;}
#c20:hover, #c21:hover, #c22:hover, #l2:hover, #r2:hover {top:252px;}
#c00, #c10, #c20 {left:0;}
#c00:hover, #c10:hover, #c20:hover {left:-96px;}
#c01, #c11, #c21 {left:240px;}
#c01:hover, #c11:hover, #c21:hover {left:144px;}
#c02, #c12, #c22 {right:0;}
#c02:hover, #c12:hover, #c22:hover {right:-96px;}
#l0, #l1, #l2 {left:-240px;}
#l0:hover, #l1:hover, #l2:hover {left:-336px;}
#r0, #r1, #r2 {right:-240px;}
#r0:hover, #r1:hover, #r2:hover {right:-336px;}