source: branches/version-2_12-multilang/html/user_data/packages/default_en/css/common.css @ 22176

@charset "utf-8";

/************************************************
 共通設定
************************************************ */
body {
    color: #666;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 75%;
    background-color: #f5f5f5;
}

select {
    border: solid 1px #ccc;
}

/*写真*/
.picture {
    border: 1px solid #ccc;
}


/* ==============================================
 フレーム
=============================================== */
/* 全体を包括 */
.frame_outer {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* コンテンツ */
#container {
    margin: 0 auto;
    padding: 0 0 30px 0;
    width: 980px;
    background: #fff;
    text-align: left;
}


/* ==============================================
 カラム指定
=============================================== */
/* ヘッダーとフッターの上下
[注意]ブロック移動時はbloc.css内で調整が必要 */
#topcolumn,
#bottomcolumn,
#footerbottomcolumn {
    margin: 0 auto;
    padding: 15px;
    width: 950px;
    background: #fff;
    text-align: left;
}

/* 中央カラム */
.main_column {
    padding: 10px 0 20px;
}

/* サイドカラム */
#leftcolumn {
    float: left;
    width: 20%;
}
#rightcolumn {
    float: right;
    width: 20%;
}

/* 1カラム設定 */
#one_maincolumn {
    margin: 0 auto;
    width: 80%;
}

/* 2カラム設定 (メイン部が左) */
#two_maincolumn_left {
    padding-left: 1.5%;
    float: left;
    width: 78%;
}

/* 2カラム設定 (メイン部が右) */
#two_maincolumn_right {
    padding-right: 1.5%;
    width: 78%;
    float: right;
}

/* 3カラム設定 */
#three_maincolumn {
    padding-left: 0.5%;
    width: 59%;
    float: left;
}

/* 下層コンテンツ */
#undercolumn {
    width: 100%;
    margin: 0 0 30px 0;
}


/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}

/* リンク指定
----------------------------------------------- */
a:link,
a:visited {
    color: #39c;
    text-decoration: none;
}
a:link:hover,
a[href]:hover {
    color: #f60;
    text-decoration: underline;
}


/* フォント
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}
.sale_price {
    color: #f00;
}
.normal_price {
    font-size: 0.917em;
}
.point {
    color: #f00;
    font-weight: bold;
}
.user_name {
    font-weight: bold;
}
.recommend_level {
    color: #ecbd00;
}

.attention {
    color: #f00;
}
.attentionSt {
    color: #f00;
    font-weight: bold;
}
.st {
    font-weight: bold;
}
.mini {
    font-size: 0.917em;
}


/* 行揃え
----------------------------------------------- */
.alignC {
    text-align: center;
}
.alignR {
    text-align: right;
}
.alignL {
    text-align: left;
}
.pricetd em {
    font-weight: bold;
}


/* フォーム
----------------------------------------------- */
input[type='text'],
input[type='password'],
.select {
    border: solid 1px #ccc;
    padding: 2px;
}

.box40 {
    width: 40px;
}
.box60 {
    width: 60px;
}
.box100 {
    width: 100px;
}
.box120 {
    width: 120px;
}
.box140 {
    width: 140px;
}
.box145 {
    width: 145px;
}
.box150 {
    width: 150px;
}
.box240 {
    width: 240px;
}
.box300 {
    width: 300px;
}
.box320 {
    width: 320px;
}
.box350 {
    width: 350px;
}
.box380 {
    width: 380px;
}

/* フォームが縦に重なり合う場合に併用する余白 */
.top {
    margin-bottom: 5px;
}

.ng_top {
    margin-bottom: 0 !important;
}


/* タイトル
----------------------------------------------- */
h2.title {
    margin-bottom: 10px;
    padding: 8px;
    border-top: solid 1px #ebeced;
    color: #f60;
    background: url("../img/background/bg_tit_sub_01.jpg") repeat-x left bottom;
    background-color: #fef3d8;
    font-size: 170%;
}

#one_maincolumn .sub_area h3,
#two_maincolumn_right .sub_area h3,
#two_maincolumn_left .sub_area h3,
#three_maincolumn .sub_area h3,
#undercolumn_login .login_area h3,
#undercolumn_shopping h3,
#mypagecolumn h3,
#undercolumn_cart h3 {
    margin: 0 0 10px 0;
    padding: 5px 0 10px;
    color: #f60;
    background: url("../img/background/line_01.gif") repeat-x left bottom;
    font-size: 1.05em;
}

div#undercolumn_login .login_area h4 {
    padding-left: 15px;
    background: url("../img/icon/ico_arrow_05.gif") no-repeat left;
}


/* ==============================================
 ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#header_wrap {
    border-top: solid 3px #f90;
    min-height: 82px;
    background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0;
}
#header {
    margin: auto;
    width: 980px;
}
#logo_area {
    padding-left: 10px;
    float: left;
    width: 390px;
    text-align: left;
}
#header_utility {
    float: right;
    width: 580px;
}

#errorHeader {
    color: #F00;
    font-weight: bold;
    font-size: 12px;
    background-color: #FEB;
    text-align: center;
    padding: 5px;
}

/* ロゴ
----------------------------------------------- */
#site_description {
    font-size: 0.917em;
}
#logo_area h1 {
    width: 378px;
    height: 33px;
}
#logo_area h1 span {
    display: none; /* テキストロゴ非表示 */
}


/* ヘッダーナビ
----------------------------------------------- */
div#header_navi {
    float: right;
}
div#header_navi ul {
    padding-top: 17px;
}
div#header_navi ul li {
    float: left;
    margin-bottom: 4px;
}
div#header_navi ul li:hover {
    opacity: 0.75;
    filter:alpha(opacity=75);
}
div#header_navi ul li:active {
    opacity: 1;
    filter:alpha(opacity=100);
}
div#header_navi ul li a {
    display: inline-block;
    font-weight: bold;
    color: #fff;
    padding: 8px 20px 8px 40px;
    text-decoration: none !important;
}
div#header_navi ul li.mypage {
    border-right: 1px solid #e9efb6;
    border-radius: 4px 0 0 0;
background: #C5D709; /* Old browsers */
background: -moz-linear-gradient(top,  #C5D709 0%, #8CA710 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* IE10+ */
background: linear-gradient(to bottom,  #C5D709 0%,#8CA710 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.mypage:active {
background: #8CA710; /* Old browsers */
background: -moz-linear-gradient(top,  #8CA710 0%, #87A010 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8CA710 0%,#87A010 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.mypage a {
    background: url(../img/button/header_arrow02.png) 20px center no-repeat;
    text-shadow: 1px 1px 1px #8c9f0c;
}
div#header_navi ul li.entry {
    border-right: 1px solid #e9efb6;
    border-left: 1px solid #a3b610;
background: #C5D709; /* Old browsers */
background: -moz-linear-gradient(top,  #C5D709 0%, #8CA710 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #C5D709 0%,#8CA710 100%); /* IE10+ */
background: linear-gradient(to bottom,  #C5D709 0%,#8CA710 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5D709', endColorstr='#8CA710',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.entry:active {
    border-right: 1px solid #e9efb6;
    border-left: 1px solid #a3b610;
background: #8CA710; /* Old browsers */
background: -moz-linear-gradient(top,  #8CA710 0%, #87A010 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8CA710 0%,#87A010 100%); /* IE10+ */
background: linear-gradient(to bottom,  #8CA710 0%,#87A010 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CA710', endColorstr='#87A010',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.entry a {
    background: url(../img/button/header_arrow02.png) 20px center no-repeat;
    text-shadow: 1px 1px 1px #8c9f0c;
}

div#header_navi ul li.view_basket {
    border-left: 1px solid #D96700;
    border-radius: 0 4px 0 0;
background: #f90; /* Old browsers */
background: -moz-linear-gradient(top,  #f90 0%, #E86800 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #f90 0%,#E86800 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f90 0%,#E86800 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f90 0%,#E86800 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f90 0%,#E86800 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f90', endColorstr='#E86800',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.view_basket:active {
    border-left: 1px solid #D96700;
    border-radius: 0 4px 0 0;
background: #E86800; /* Old browsers */
background: -moz-linear-gradient(top,  #E86800 0%, ##E36600 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #E86800 0%,##E36600 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #E86800 0%,##E36600 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #E86800 0%,##E36600 100%); /* IE10+ */
background: linear-gradient(to bottom,  #E86800 0%,##E36600 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E86800', endColorstr='##E36600',GradientType=0 ); /* IE6-9 */
}
div#header_navi ul li.view_basket a {
    position: relative;
    padding-left: 50px;
    text-shadow: 1px 1px 1px #d96f00;
}
div#header_navi ul li.view_basket a img {
    position: absolute;
    left: 18px; top: -5px;
}


/* ==============================================
 フッター
=============================================== */
#footer_wrap {
    margin: 0 auto;
    width: 980px;
    height: 80px;
    background: #fff;
}
#footer {
    margin: auto;
    padding-top: 10px;
    border-top: solid 1px #ccc;
    width: 950px;
}
#pagetop {
    width: 210px;
    float: right;
    text-align: right;
}
#copyright {
    width: 740px;
    float: left;
    text-align: left;
    font-size: 97%;
}


/* ==============================================
 パーツ
=============================================== */
/* ボタン
----------------------------------------------- */
.btn_area {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

.btn_area li {
    padding-right: 10px;
    display: inline;
    vertical-align: bottom;
}

/* 完了メッセージ
----------------------------------------------- */
div#complete_area {
    margin-bottom: 20px;
}
div#complete_area .message,
div#undercolumn_entry .message {
    margin-bottom: 20px;
    line-height: 150%;
    font-weight: bold;
    font-size: 1.05em;
}
div#complete_area .shop_information {
    margin-top: 40px;
    padding: 20px 0 0 0;
    border-top: solid 1px #ccc;
}
div#complete_area .shop_information .name {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 140%;
}


/* Tipsy
----------------------------------------------- */
.tipsy {
    padding: 5px;
    font-size: 10px;
    position: absolute;
    z-index: 100000;
}
.tipsy-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
}
.tipsy-inner {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.tipsy-arrow {
    position: absolute;
    background: url('../img/ajax/tipsy.gif') no-repeat top left;
    width: 9px;
    height: 5px;
}
.tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
}
.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
}
.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right;
}
.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px;
}


/* button CSS
----------------------------------------------- */

/* ----- button size */

.side_column .btn button {
    width: 85%;
    padding: 5px;
}

.side_column .btn a {
    width: 79%;
    display: inline-block;
    padding: 7px 5px;
    margin: 0 auto;
}

.main_column .cart_area a,
.main_column .review_btn a {
    width: 150px;
}

.main_column .btn_area button,
#window_area .btn_area button {
    min-width: 140px;
}
.main_column a.bt01,.main_column a.bt02,.main_column a.bt03,.main_column a.bt04 {
    display: inline-block;
    padding: 7px 10px;
    min-width: 130px;
}
.main_column .btn_area a.bt_wide,
.main_column .btn_area button.bt_wide {
    min-width: 220px;
}

/* ----- button white */
.bt01 {
    text-align: center;
    padding: 6px 10px;
    color: #666 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #fff inset;
    text-shadow: 1px 1px 1px #fff;
    cursor: pointer;
background: #fbfbfb; /* Old browsers */
background: -moz-linear-gradient(top,  #fbfbfb 0%, #e6e6e6 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fbfbfb 0%,#e6e6e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fbfbfb 0%,#e6e6e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}
.bt01:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */

.bt01:hover {
    opacity: 0.75;
    filter:alpha(opacity=75);
    text-decoration: none !important;
}
.bt01:active {
    opacity: 1;
    filter:alpha(opacity=100);
    text-decoration: none !important;
background: #e6e6e6; /* Old browsers */
background: -moz-linear-gradient(top,  #e6e6e6 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6e6e6 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e6e6e6 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
.bt01:active:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */

.bt01:disabled,.bt01:disabled:hover,.bt01:disabled:active {
    opacity: 1;
    filter:alpha(opacity=100);
    cursor: default;
background: #e9e9e9; /* Old browsers */
background: -moz-linear-gradient(top,  #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e9e9e9 0%,#c4c4c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
}
.bt01:disabled:not(:target),.bt01:disabled:hover:not(:target),.bt01:disabled:active:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */

.favorite_btn span.bt01,.favorite_btn span.bt01:hover,.favorite_btn span.bt01:active {
    opacity: 1;
    filter:alpha(opacity=100);
    display: inline-block;
    min-width: 150px;
    cursor: default;
background: #e9e9e9; /* Old browsers */
background: -moz-linear-gradient(top,  #e9e9e9 0%, #c4c4c4 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e9e9e9 0%,#c4c4c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e9e9e9 0%,#c4c4c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
}

.main_column .cart_area .favorite_btn .bt01,
.main_column .review_btn .bt01,
.main_column .addbtn .bt01,
.main_column .add_multiple .bt01,
.zipimg .bt01 {
    padding: 4px 10px !important;
}

/* ----- button green */
.bt02 {
    text-align: center;
    padding: 6px 10px;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #67770B;
    cursor: pointer;
background: #c0d209; /* Old browsers */
background: -moz-linear-gradient(top,  #c0d209 0%, #91ab10 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c0d209 0%,#91ab10 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c0d209 0%,#91ab10 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0d209', endColorstr='#91ab10',GradientType=0 ); /* IE6-9 */
}
.bt02:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */

.bt02:hover {
    opacity: 0.75;
    filter:alpha(opacity=75);
    text-decoration: none !important;
}
.bt02:active {
    opacity: 1;
    filter:alpha(opacity=100);
    text-decoration: none !important;
background: #91ab10; /* Old browsers */
background: -moz-linear-gradient(top,  #91ab10 0%, #7B9210 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #91ab10 0%,#7B9210 100%); /* IE10+ */
background: linear-gradient(to bottom,  #91ab10 0%,#7B9210 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91ab10', endColorstr='#7B9210',GradientType=0 ); /* IE6-9 */
}
.bt02:active:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */


/* ----- button orange */
.bt03 {
    text-align: center;
    padding: 6px 10px;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #A83D09;
    cursor: pointer;
background: #fd9748; /* Old browsers */
background: -moz-linear-gradient(top,  #fd9748 0%, #de4402 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fd9748 0%,#de4402 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fd9748 0%,#de4402 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9748', endColorstr='#de4402',GradientType=0 ); /* IE6-9 */
}
.bt03:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */


.bt03:hover {
    opacity: 0.75;
    filter:alpha(opacity=75);
    text-decoration: none !important;
}
.bt03:active {
    opacity: 1;
    filter:alpha(opacity=100);
    text-decoration: none !important;
background: #de4402; /* Old browsers */
background: -moz-linear-gradient(top,  #de4402 0%, #dd4200 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #de4402 0%,#dd4200 100%); /* IE10+ */
background: linear-gradient(to bottom,  #de4402 0%,#dd4200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4402', endColorstr='#dd4200',GradientType=0 ); /* IE6-9 */
}
.bt03:active:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */


/* ----- button gray */
.bt04 {
    text-align: center;
    padding: 6px 10px;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #707070;
    cursor: pointer;
background: #a9a9a9; /* Old browsers */
background: -moz-linear-gradient(top,  #a9a9a9 0%, #767676 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a9a9a9 0%,#767676 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a9a9a9 0%,#767676 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#767676',GradientType=0 ); /* IE6-9 */
}
.bt04:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */

.bt04:hover {
    opacity: 0.75;
    filter:alpha(opacity=75);
    text-decoration: none !important;
}
.bt04:active {
    opacity: 1;
    filter:alpha(opacity=100);
    text-decoration: none !important;
background: #767676; /* Old browsers */
background: -moz-linear-gradient(top,  #767676 0%, #707070 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #767676 0%,#707070 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #767676 0%,#707070 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #767676 0%,#707070 100%); /* IE10+ */
background: linear-gradient(to bottom,  #767676 0%,#707070 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#707070',GradientType=0 ); /* IE6-9 */
}
.bt04:active:not(:target){
    filter: none;
}/* for IE9 gradient & border-radius */