@charset "utf-8";
/*
* Navigation
* Copyright (c) getstage.com
*/


/* NAVIGATION *******************************************************/
.subnavi li{
width: 161px !important;
height: 34px!important;
border:none!important;
background-color: rgb(54, 54, 54)!important;
background: -webkit-linear-gradient(top, #000)!important; /* Chrome 10+, Safari 5.1+ */
background: -moz-linear-gradient(top, #000, #000)!important;    /* 3.6+ */
background: -ms-linear-gradient(top, #000, #000)!important;     /* 10+ */
background: -o-linear-gradient(top, #000, #000)!important;     /* 11.1+ */
background: linear-gradient(to bottom, #000, #000)!important;   /* Standard */
}

.subnavi li:hover {
width: 161px !important;
height: 34px!important;
border:none!important;
background-image:none!important;
background-color: #313131!important;
background: -webkit-linear-gradient(top, #313131)!important; /* Chrome 10+, Safari 5.1+ */
background: -moz-linear-gradient(top, #313131, #313131)!important;    /* 3.6+ */
background: -ms-linear-gradient(top, #313131, #313131)!important;     /* 10+ */
background: -o-linear-gradient(top, #313131, #313131)!important;      /* 11.1+ */
background: linear-gradient(to bottom, #313131, #313131)!important;   /* Standard */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(#313131, #313131), color-stop(0.5, #313131), color-stop(0.51, #313131), color-stop(1, #313131));
}
.subnavi li:active {
width: 161px !important;
height: 34px!important;
border:none!important;
background-color: #313131!important;
background: -webkit-linear-gradient(top, #313131)!important; /* Chrome 10+, Safari 5.1+ */
background: -moz-linear-gradient(top, #313131, #313131)!important;    /* 3.6+ */
background: -ms-linear-gradient(top, #313131, #313131)!important;     /* 10+ */
background: -o-linear-gradient(top, #313131, #313131)!important;      /* 11.1+ */
background: linear-gradient(to bottom, #313131, #313131)!important;   /* Standard */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(#313131, #313131), color-stop(0.5, #313131), color-stop(0.51, #313131), color-stop(1, #313131));
}

#navi { clear:both; margin:0 auto!important; padding:0; width:982px; }
#gsNav { margin:0px auto; list-style:none; clear:both; /* Lucinda Grande is the font used on the website from Apple. */ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:12px!important; /* Apply a subtle text-shadow to the text */ text-shadow: 0 -1px 3px #202020; /* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; }
#gsNav li { float:left; border-right:1px solid #393939; border-left:1px solid #272727; width:161px !important; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595959), color-stop(4%, #3F3F3F), color-stop(96%, #272727), color-stop(100%, black)); background: -moz-linear-gradient(top, #595959 0%, #3F3F3F 4%, #272727 96%, black 100%); background: -ms-linear-gradient(top, #595959 0%, #3F3F3F 4%, #272727 96%, black 100%); background: -o-linear-gradient(top, #595959 0%, #3F3F3F 4%, #272727 96%, black 100%); background: linear-gradient(top, #595959 0%, #3F3F3F 4%, #272727 96%, black 100%); }
/*#gsNav  li:not(:last-child):hover {*/
#gsNav li:hover { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% ); background-color:#383838; /* Fallback */ /* We use the inset of the box shadow to create a subtle inner glow when hovering */ -moz-box-shadow: inset 0 0 5px 5px #535353; -webkit-box-shadow: inset 0 0 5px 5px #535353; box-shadow: inset 0 0 5px 5px #535353; }
/*#gsNav  li:not(:last-child):active {*/
#gsNav li:active { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #000000 100% ); background-color:#383838; /* Fallback */ -moz-box-shadow: inset 0 1px 2px 2px #000; -webkit-box-shadow: inset 0 1px 2px 2px #000; box-shadow: inset 0 1px 2px 2px #000; }

#gsNav li p { display:block; float:left; width:161px!important; height:34px; }
/*#gsNav  li:not(:last-child):hover {*/
#gsNav li p:hover { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% ); background-color:#383838; /* Fallback */ /* We use the inset of the box shadow to create a subtle inner glow when hovering */ -moz-box-shadow: inset 0 0 5px 5px #535353; -webkit-box-shadow: inset 0 0 5px 5px #535353; box-shadow: inset 0 0 5px 5px #535353; }
/*#gsNav  li:not(:last-child):active {*/
#gsNav li p:active { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #000000 100% ); background-color:#383838; /* Fallback */ -moz-box-shadow: inset 0 1px 2px 2px #000; -webkit-box-shadow: inset 0 1px 2px 2px #000; box-shadow: inset 0 1px 2px 2px #000; }
#gsNav li a { color:#FFF!important; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }
#gsNav li a:hover { color:#FFF!important; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; text-decoration:none!important; }
#gsNav li p { color:#FFF!important; text-decoration:none!important; text-align:center!important; display:block!important; line-height:34px!important; outline:none!important; }
#gsNav li p:hover { color:#FFF!important; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; text-decoration:none!important; }
/* Styling of the search field */
#gsNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /* We use the CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */ background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D)); background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%); background-repeat: no-repeat; background-color:#6E6E6E; /* Fallback */ -moz-box-shadow: inset 0 2px 1px 1px #363636; -webkit-box-shadow: inset 0 2px 1px 1px #363636; box-shadow: inset 0 2px 1px 1px #363636; }
/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
#gsNav li:first-child { /*
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    */ border-left:none; }
/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
#gsNav li:first-child a img { vertical-align:middle; margin-top:-2px; }
#gsNav li:last-child { /*
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    */ border-right:none;/* The width of the last menu item (search bar) is bigger than the others */ /*width:124px;*/
}
#navi,
#gsNav { width:986px¥9; *width:986px;
_width:986px; }
#gsNav li { width: 164px¥9;/* IE8 and below */ *border-right:none; /* IE7 and below */_border-right:none; /* IE6 */ }
#gsNav:not(:target) { border-right:none¥9; /* IE9 */ }




/* プルダウン用　 */
#gsNav { margin: 0; padding: 0; list-style: none; }
#gsNav li { display: block; position: relative; float: left; }
#gsNav li ul { display: none; }
#gsNav ul li a { display: block; }
#gsNav ul li a:hover { }
#gsNav li:hover ul { display: block; position: absolute;margin-top:34px; }
#gsNav li:hover li:hover a { background: #404040; }
#gsNav li:hover li a:hover { background: #404040; color:white; }