/*
要素固定レイアウト
*/

BODY { 
background-color: #85c0ff;

} 
H1 { 
font-size: 110%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #ccccff;
border-width: thin; 
border-style: outset; 
border-color: #5f0f8f; 
width: 400px; 
} 
h2 { 
font-size: 101%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #cccccf;
border-width: thin; 
border-style: outset; 
border-color: #550f0f; 
width: 400px; 
} 
h3 { 
font-size: 99%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #fcfccf;
border-width: thin; 
border-style: outset; 
border-color: #fc8c88; 
width: 400px; 
} 
h4 { 
font-size: 99%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #cffcfc;
border-width: thin; 
border-style: outset; 
border-color: #888cfc; 
width: 140px; 
} 
h5 { 
font-size: 99%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #cffccf;
border-width: thin; 
border-style: outset; 
border-color: #888cfc; 
width: 190px; 
} 
h6 { 
font-size: 99%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #fcc0c0;
border-width: thin; 
border-style: outset; 
border-color: #fcccfc; 
width: 195px; 
} 
th { 
border: 2px #85c0ff groove; 
background-color: #cccfcf; 
margin-left: 2%; 
font-size: 81%; 
text-align: center; 
} 
li {
list-style-type : none;
}

/*
全体レイアウト
*/

div#head { 
width: 70%;
border-style: dashed;
border-color: #c5cffc;
margin-left: 180px;
background-color: #fcfcfc;
padding: 5px;
} 
div#main { 
width: 70%;
border-style: dotted;
border-color: #c5cffc;
margin-left: 180px;
background-color: #fcfcfc;
padding: 5px;
overflow:hidden;
} 
.info { 
margin: 2% 5%; 
font-size: 90%; 
padding: 15px;
text-indent: 0em; 
} 
.infopart{
padding-right : 5px;
padding-left : 5px;
border-right-style:ridge;
border-right-width:thin;
}
.infoend {
padding-left : 5px;
list-style-type : none;
}
div#menublock {
float: left;
margin:0 auto;
width: 170px;
top:20%;
left:0px;
}
div#sepmenublock {
margin-left: 130px;
position:fixed;
width: 80%;
top: 0px;
}

div#submenu {
float: right;
font-size:80%;
background-color:#fcfcfc;
border: dashed blue;
margin-right:20px;
}

div#main-footer {
clear: both;
}

.toptitlebox {
background: #fcfcfc url(http://meowandmeow.info/design/logo.jpg) no-repeat 100% 50%;
}

.toptitle {
font-size: 150%; 
margin-left: 5%; 
margin-right: 5%; 
color: #c8c8c8; 
border-width: medium; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: dashed; 
border-left-style: dashed; 
border-color: #c5cffc; 
background-color: #5558cc;

}

/*
個別レイアウト基本
*/

.message {
margin-left: 2%;
margin-right: 2%;  
font-size: 85%; 
text-indent: 1em; 
}
.n {
font-size: 90%; 
padding: 5px 10px;
margin: 1% 5%; 
}
.nut {
font-size: 90%; 
padding: 5px 10px;
margin: 2% 5%; 
}
.di { 
font-size: 90%; 
padding: 5px 10px;
border-style: groove; 
border-color: #00fc00; 
margin: 2% 5%; 
} 
.field {
font-size: 90%; 
padding: 5px 10px;
border-style: groove; 
border-color: #0000fc; 
margin: 2% 5%; 
}
.battle {
font-size: 90%; 
padding: 5px 10px;
border-style: groove; 
border-color: #fc0000; 
margin: 2% 5%; 
}
.get {
font-size: 90%; 
padding: 5px 10px;
border-style: groove; 
border-color: #fcfc00; 
margin: 2% 5%; 
}
.hol {
font-size: 90%; 
padding: 5px 10px;
border-style: groove; 
border-color: #fc00fc; 
margin: 2% 5%; 
}

.next{
font-size: 90%; 
padding: 5px 10px;
border-style: dashed; 
border-color: #00fc00; 
margin: 2% 5%; 
}


.tb { 
border: 3px #ccfccc double; 
background-color: #fcfcfc; 
width: 95%; 
margin-left: 2%; 
} 
.tb2 { 
margin-left: 5%; 
margin-right: 5%; 
} 
.tb3 { 
border: 1px #85c0ff solid; 
background-color: #fcfcfc; 
width: 95%; 
} 
.tb4 { 
width: 95%; 
} 
.td { 
border: 1px #85c0ff solid; 
font-size: 80%; 
} 
.td2 { 
font-size: 95%; 
padding-left: 10px; 
padding-right: 10px; 
padding-bottom: 10px; 
} 
.td3 { 
border: 1px #85c0ff solid; 
font-size: 105%; 
padding: 5px; 
width: 150px;
} 
.td4 { 
border: 1px #85c0ff solid; 
font-size: 80%; 
width: 100px;
} 

a.secretlink:link {
text-decoration : none;
color : #85c0ff;
}

/*
メインメニュー
*/
.menutitle{
font-weight: bold;
background-color: #0e0ee0;
color: #fcfcfc;
}
.menuh {
font-size: 101%; 
margin: 25px 7% 1%; 
color: #050505; 
background-color: #cccccf;
border-width: thin; 
border-style: outset; 
border-color: #550f0f; 
width: 400px; 
}
#menupart{
  position: relative;
  z-index: 100;
  width: 150px;
  margin: 0 0 20px 20px;
  padding: 10px 0;
  border: 3px solid #5588cc;
  border-radius: 0 0 3px 3px;
  font-size: 14px;
  background: #fff;
  color:#333;
}
#menupart li{
  list-style-type : none;
  margin: 0;
  padding: 0;
}
#menupart li a{
  position: relative;
  display: block;
  padding: 10px;

  line-height: 15px;
}
#menupart > li:hover > a{
  color: #888c08;
  font-weight: bold;
}
#menupart ul li a:hover{
  color:#888c08;
  text-decoration: underline;
}
#menupart > li:hover > a:after{
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 5px;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border-left-color: #aaa;
}
#menupart ul{
  display: none;
  position: absolute;
  top: -3px;
  right: -217px;
  width: 40%;
  margin: 0;
  padding: 10px;
  border: 3px solid #5588cc;
  border-radius: 0 0 3px 0;
  background: #fff;
}
#menupart li:hover ul{
  display: block;
}
#menupart ul.menu2{
  right: -510px;
  width: 500px;
}
#menupart ul.menu2 li{
  float: left;
  width: 250px;
}
#menupart ul h3{
  padding: 5px 5px 5px 15px;
  margin: 0;
  color:#888c08;
  font-size: 16px;
  font-weight: normal;
}
#menupart ul li a{
  padding: 8px 15px;
}
#pin {
  padding-left: 50px;
}

button.pin {
  padding: 0;
  border: none;
  background: transparent;
}

button.pin img {
  display: block;
}
button::-moz-focus-inner {
  padding: 0;
  border: none;
}
button:focus {
  outline: 1px dotted #000;
}

/*
個別メニュー
*/
.sepmenu, .sepmenubox {
  list-style: none;
  padding-left: 0;
  margin: 0;
	border-style: groove; 
}

.sepmenubox, .sepmenucon {
  -webkit-transition: 0.20s ease-in;
  -moz-transition: 0.20s ease-in;
  -ms-transition: 0.20s ease-in;
  -o-transition: 0.20s ease-in;
  transition: 0.20s ease-in;
}

.sepmenupart:hover + .sepmenubox, .sepmenubox:hover {
  display: block;
  z-index: 9999;
}

.sepmenu {
  color: #000000;
  background: #fcfcfc;
	width: 80%;
	margin:0 auto;
	font-size: 80%;
}
.sepmenu:after {
  content: "";
  clear: both;
  display: block;
}
.sepmenutitle {
  float: left;
  padding: 0.5em 0.8em;
}
.sepmenutop {
  float: left;
}
.sepmenutop:hover .sepmenupart {
  color: #5588cc;
}
.sepmenupart {
  padding: 0.5em 0.8em;
  cursor: default;
	border-left-style:ridge;
	border-left-width:thin;
}
.sepmenubox {
  display: none;
  z-index: -1;
  position: absolute;
  border-top: 1px solid #666;
  width: 10em;
  background: #fcfcfc;
  -webkit-box-shadow: 0 1px 4px -2px #666;
  -moz-box-shadow: 0 1px 4px -2px #666;
  box-shadow: 0 1px 4px -2px #666;
}
.sepmenucon {
  padding: 0.3em 0.5em;
  cursor: pointer;
}
.sepmenucon2 {
  padding: 0.3em 0.5em;
}
.sepmenucon2:hover {
  background: #ffffff;
  font-weight: bold;
}
.sepmenucon2 a:hover {
  color: #888c08;
}
.sepmenucon:hover {
  background: #f0f0f0;
}
.sepmenucon a:hover {
  color: #888c08;
  font-weight:bold;
}
.sepmenupart:hover {
  background: #fcfcfc;
}

.sepend{
	border-right-style:ridge;
	border-right-width:thin;
}

/*
サブメニュー用
*/
.submenutop {

}

.submenubox {
}

.submenucon {
padding-left:2px;
}


/*
ポップアップ
*/
.popuptext {
position: absolute;
display:none;
	font-size: 90%;
	color:#ffffff;
	background-color: #5f0f00;
text-decoration:none;
        border-top:#cfcfcf solid 2px;
	border-left:#fcfcfc solid 2px;
        filter: alpha(opacity=90);
margin-left: -1px;
margin-top: 15px;
width: 250px;
}
.popdummy {
text-decoration: none;
color: #000000;
cursor: text;
}

.popduplink {
text-decoration: none;
color: #000000;
cursor: text;
border-bottom : dotted 2px;
}
.pop A:HOVER {
	position:relative;
}

.pop{ margin-top : 3em;
}
a:hover .popuptext {
	display: block;

}


/*
ドラッグ
*/
#drop{
margin-left: 2%; 
margin-right: 10%; 
font-size: 85%; 
background-color: #fcfcfc; 
padding: 10px; 
border-style: groove; 
border-color: #00fc00; 
text-indent: 1em; 
-khtml-user-drag: element;
}

/*
ナビゲーション三角
*/
.triangle {
  display: inline-block;
  position: relative;
}
.triangle::before{
  content: "";
  display: inline-block;
  border: 4px solid transparent;
  border-left-color: #000;
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -4px;
}
.triangle a:hover {
 background-color: #247BA0;
 color:#222222; }

/*
画像風ボタン
*/
.myButton {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.myButton::before,
.myButton::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.myButton,
.myButton::before,
.myButton::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}