/* ----------------------------------------------------------------------- march,2010 path:/recipe2010/styles.css ----------------------------------------------------------------------- */ /* Basic CSS */ @import url(/css/common/style.css); @import url(/css/common/navi.css); @import url(/css/common/text.css); /* Dynamic CSS */ @import url(/css/dynamic/dynamic-style.css); /* Hack CSS */ @import url(/css/hack/ie7.css); @import url(/css/hack/ie6.css); h2,h3{font-family:"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", Osaka, sans-serif;} p, dl, dt, dd, div, li, ul, img{margin:0; padding:0; color:#600;} img{vertical-align:bottom;} /* Main Header */ #recipe-main2 {margin: 0 19px; background:url(images/dotLing-gray.gif) repeat-x top left; padding-top:20px;} #recipe-top {height:112px; left:0; overflow:hidden; position:relative; top:0; z-index:100;} #recipe-top h1 { background:url(images/recipe-top-head.gif) no-repeat top left; left:19px; line-height:0; overflow:hidden; position:absolute; text-indent:-9999px; top:15px; width:370px; height:28px; } #recipe-top p{ background:url(/life/images/health-top-text.gif) repeat-y top left; color:#CC0000; font-weight:bold; left:19px; padding:5px 0 5px 15px; position:absolute; top:43px; width:600px; font-family:"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", Osaka, sans-serif; } #recipe-top .historyBack{text-indent:-9999px; width:51px; height:25px; position:absolute; top:10px; left:605px; background:none; } #recipe-top .historyBack a{display:block; width:51px; height:25px; background:url(images/back_btn.gif) no-repeat 0 -25px; overflow:hidden;} #recipe-top .historyBack a:hover{background-position:0 0;} #recipe-inner{width:595px; border:15px solid #f4f0e6; padding:15px; margin:0 auto; margin-bottom:10px;} /* ----------------------------------------------------------------------- Top Page ----------------------------------------------------------------------- */ /* Advantage */ #advantage {width:595px; background:url(images/advantage_bg.gif) repeat-y top left; _height:100px;} #advantage h2 {width:595px; height:36px; background:url(images/advantage_title.gif) no-repeat top left; text-indent:-9999px; margin-bottom:13px;} #advantage ul {margin:0; padding:0;} #advantage li {width:331px; height:15px; background-repeat:no-repeat; text-indent:-9999px; margin-left:9px;} #advantage #li-01 {background-image:url(images/advantage_list01.gif); margin-bottom:9px;} #advantage #li-02 {background-image:url(images/advantage_list02.gif); margin-bottom:4px;} #advantage .foot {background:url(images/advantage_foot.gif) no-repeat bottom left; width:595px; height:9px; content:"";} /* PickUp */ #pickup {margin-bottom:14px;} #pickupWrapper {width:595px;} #pickup .box {width:290px; background:url(images/dotLine_red.gif) top left; padding:1px 1px 3px 1px; margin:14px 0 0 0;} #pickup .left {float:left;} #pickup .right {float:right;} #pickup .box .inner {padding:9px 11px 11px 9px; background-color:#fff;} #pickup .box a img {border:1px solid #ccc;} #pickup .box dl {margin-bottom:10px; width:270px; _position:relative;} /* #pickup .box dt {width:130px; float:left;} #pickup .box dd {padding:10px 0 0 143px; _padding:0!important; font-weight:bold; font-size:13px; _position:absolute; _top:10px; _left:143px;} */ #pickup .box dt {widdth:130px; float:left;} #pickup .box dd {width:127px; float:right; font-size:13px; font-weight:bold; padding-top:10px;} #pickup .box ul {width:270px; height:49px; display:block;} #pickup .box li {float:left; margin-right:2px;} #pickup .box .last {float:right; margin-right:0;} #pickup .box li img {border:none;} #pickup .break {clear:both;} /* Search Procucts */ #searchProducts {width:593px; background:url(images/dotLine_red.gif) repeat top left; padding:1px 3px 3px 1px; margin:0 0 14px 0;} #searchProducts .inner {width:100%; background-color:#fff;} #searchProducts h2 {width:580px; height:20px; text-indent:-9999px; line-height:1; background:url(images/searchProducts_ttl.gif) no-repeat 14px 7px; padding:7px 0 8px 14px;} #searchProducts .list {background:url(images/dotLine_red.gif) repeat-x top left; padding:6px 0 0 0;} #searchProducts .list ul{width:277px; margin-bottom:7px; _margin-bottom:0!important; _overflow:hidden; _padding-bottom:0!important;} *:first-child+html #searchProducts .list ul{margin-bottom:0; padding-bottom:0; overflow:hidden;} #searchProducts .list #p_left{float:left; padding-left:15px;} #searchProducts .list #p_right{float:right; padding-right:15px;} #searchProducts .list li{width:277px; background:url(images/dotLine_red.gif) repeat-x top left; padding:9px 0 6px 0;} #searchProducts .first{background:none!important; } /* #searchProducts .even{float:right;} #searchProducts .odd{float:left; clear:both;} #searchProducts .first{background:none!important; } */ /* Search Genre */ #searchGenre {width:593px; background:url(images/dotLine_red.gif) repeat top left; padding:1px 3px 3px 1px; margin:0 0 14px 0;} #searchGenre .inner {width:100%; background-color:#fff;} #searchGenre h2 {width:580px; height:20px; text-indent:-9999px; line-height:1; background:url(images/ttl_searchGenre.gif) no-repeat 14px 7px; padding:7px 0 8px 14px;} #searchGenre .list {background:url(images/dotLine_red.gif) repeat-x top left; padding:6px 15px 0 15px;} #searchGenre .section {background:url(images/dotLine_red.gif) repeat-x bottom left; padding:6px 0 9px 0;} #searchGenre ul .last {background:none!important; margin:0; padding-bottom:0!important;} #searchGenre h3 {width:57px; height:15px; display:block; text-indent:-9999px; float:left; background-position:top left; background-repeat:no-repeat; line-height:1; font-size:1px; margin:0!important;} #menu-01 {background-image:url(images/searchGenre_ttl01.gif);} #menu-02 {background-image:url(images/searchGenre_ttl02.gif);} #menu-03 {background-image:url(images/searchGenre_ttl03.gif);} #menu-04 {background-image:url(images/searchGenre_ttl04.gif);} #searchGenre ul {float:right; display:block; width:420px;} #searchGenre li {display:block; padding-right:15px; float:left; width:125px;} #searchGenre .last{background:none;} #searchGenre .last ul{padding-right:0; padding-bottom:5px;} #searchGenre .first ul{padding-top:5px;} /* ----------------------------------------------------------------------- Archives ----------------------------------------------------------------------- */ #archives h2 {border-bottom:1px solid #cc0000; text-indent:-9999px; font-size:1px; height:27px; line-height:1;} #archives #ttl_searchProducts {background:url(images/ttl_searchProducts.gif) no-repeat top left; width:595px;} #archives #ttl_searchGenre {background:url(images/ttl_searchGenre.gif) no-repeat top left; width:595px;} #archives h3 {font-size:20px; font-weight:bold; color:#c00; line-height:1; margin:0!important; padding:0!important; width:380px; line-height:1.3;} #archives form{margin:0!important; padding:0!important;} #archives select{margin:0!important; padding:0!important; width:210px;font-size:9px;margin-top:2px;} #archives .searchGenre .inner h3{float:right; width:519px!important; display:block; line-height:2;} #archives .searchGenre .inner p{float:left; width:62px; display:block;} #archives .searchGenre .inner img{vertical-align:bottom;} /* Category Head */ #category-head {position:relative; background:url(images/dotLine_red.gif) repeat-x bottom left; width:596px; padding:14px 0 15px 0; margin-bottom:14px;} #category-head select {position:absolute; top:15px; right:0;} .searchGenre select{top:25px!important;} /* Voice */ #voice {background-color:#f9f7f2; width:596px; color:#600; margin-bottom:14px;} #voice h4 {background:url(images/ttl_voice.gif) no-repeat top left; width:99px; height:21px; text-indent:-9999px; line-height:1; margin:2px 0 8px 0;} #voice p {margin-bottom:13px;} #voice a img {border:1px solid #ccc; margin-bottom:3px;} #voice a {display:inline;} #voiceHead, #voiceFoot {height:8px; overflow:hidden; content:""; zoom:1; display:block;} #voiceHead {background:url(images/archives_voiceHead.gif) no-repeat top left;} #voiceFoot {background:url(images/archives_voiceFoot.gif) no-repeat bottom left;} #voiceContent {padding:9px 15px;} #voiceContent .left {float:left; width:130px;} #voiceContent .right{float:right; width:415px;} #voiceContent h3 {line-height:1;} /* Recipe Table */ #recipeTable {background:url(images/dotLine_red.gif) repeat top left; width:596px;} #recipeTable th, #recipeTable td {background-color:#fff; padding:9px; color:#600;} #recipeTable th {color:#c00; text-align:center;} #recipeTable #t_menu {width:260px;} #recipeTable #t_time {width:88px;} #recipeTable #t_energy {width:78px;} #recipeTable #t_genre {width:130px;} #recipeTable .time, #recipeTable .energy {text-align:center;} #recipeTable .menu h4 {margin:0;} #recipeTable .menu img {margin:0 10px 0 0; border:1px solid #ccc;} #recipeTable .genre {font-weight:bold;} /* #recipeTable dl{display:block; min-height:56px;} #recipeTable dt, #recipeTable dd{display: table-cell; vertical-align: middle; margin: 0; min-height:56px; float:none;} #recipeTable dd{font-weight:bold;} #recipeTable .genre a{display:block;} #archives #footer-lineup h2{height:114px!important;}*/ #recipeTable .td_img{width:80px; padding:0;} #recipeTable .td_ttl{width:150px; padding:0; font-weight:bold;} /* ----------------------------------------------------------------------- Entry ----------------------------------------------------------------------- */ #entry h3{text-indent:-9999px; overflow:hidden; height:21px; border-bottom:1px solid #c00; width:100%; background-position:top left; background-repeat:no-repeat; margin:0 0 12px 0;} #ttl_time{background-image:url(images/ttl_d_time.gif);} #ttl_energy{background-image:url(images/ttl_d_energy.gif); margin-top:18px!important;} #ttl_energy2{background-image:url(images/ttl_d_energy_num.gif); margin-top:18px!important;} #ttl_material{background-image:url(images/ttl_d_material.gif);} #ttl_howto{background-image:url(images/ttl_d_howto.gif);} /* category-head */ #entry #category-head {padding-top:0; position:relative;} #entry #category-head h2 {font-size:24px; font-weight:bold; color:#c00; width:320px; line-height:1.2; margin-bottom:5px;} #entry #category-head p {font-weight:bold; width:320px;} #entry #category-head img {border:none;} #entry #category-head li {border:none; position:absolute;} #entry #category-head #print{top:7px; right:118px;} #entry #category-head #pdf {top:8px; right:0;} /* entry-main */ #entry #entry-main{width:596px; margin-bottom:14px;} #entry #entry-main img{border:1px solid #ccc;} #entry #entry-main .left{float:left;} #entry #entry-main .right{float:right; width:332px;} /* recipe-material */ #entry #recipe-material {width:596px;} #entry #recipe-material p{font-size:13px; font-weight:bold; padding-bottom:5px;} #entry #recipe-material ul{background-color:#f9f7f2; padding:10px 15px 7px 15px; margin-bottom:14px; display:block;} #entry #recipe-material li{background:url(images/dotLine_brown.gif) repeat-x top left; width:277px; padding:8px 0 5px 0; overflow:hidden; zoom:0;} #entry #recipe-material .even{float:left; margin-left:10px;} #entry #recipe-material .odd{float:left; clear:both;} #entry #recipe-material .first{background:none!important; } #entry #recipe-material li ul{font-weight:normal; margin-bottom:0; padding:0; margin:0;} #entry #recipe-material li ul li{background:none; width:auto; padding:0 0 0 15px; background:url(images/materialLine_base.gif) repeat-y top left; } #entry #recipe-material li ul li.last{background:url(images/materialLine_bottom.gif) no-repeat 0 0;} #recipe-howto ul, ol, li { zoom: normal; } #recipe-howto{width:596px;} #recipe-howto ul{list-style:none; margin-bottom:14px;} #recipe-howto li{list-style-type:inherit; display:list-item; background:url(images/dotLine_red.gif) repeat-x bottom left; padding:3px 0 8px 20px; zoom: normal; text-indent:-13px;} /* memo */ #recipe-memo{width:566px; background-color:#f9f7f2; padding:15px; margin-bottom:14px;} /* recipe-foot */ #entry #recipe-foot{width:596px;} #entry #recipe-foot .box{width:596px; background:url(images/recipefoot_bg.gif) repeat top left; font-size:13px; margin-bottom:10px;} #entry #recipe-foot .odd{float:left; clear:left;} #entry #recipe-foot .even{float:left;} #entry #recipe-foot img {border:1px solid #ccc;} #entry #recipe-foot p {display:block;} #entry #recipe-foot .p_img {width:92px; float:left; padding:10px;} #entry #recipe-foot .p_txt {font-weight:bold; padding:13px 10px 10px 0;} /* Utilities -------------------------------------------------------------- */ #sidelink dd ul:after, #pickupWrapper:after, #pickup .box dl:after, #pickup .box ul:after, #searchProducts .list:after, .section:after, #searchGenre ul:after, #voiceContent:after, #entry #entry-main:after, #entry #recipe-material ul:after, #entry #recipe-foot:after, #entry #recipe-foot .box:after, #archives .searchGenre .inner.inner:after, #recipeTable dl:after { content: ""; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } #sidelink dd ul, #pickupWrapper, #pickup .box dl, #pickup .box ul, #searchProducts .list, .section, #searchGenre ul, #voiceContent, #entry #entry-main, #entry #recipe-material ul, #entry #recipe-foot, #entry #recipe-foot .box, #archives .searchGenre .inner .inner, #recipeTable dl { zoom: 1; } div.login_head{ height:7px !important; _margin-bottom:0; } div.login_head img{ vertical-align:top !important; } /*#sidelink*/ #sidelink {} #sidelink dt { color:#c00; font-size:16px; font-weight: bold; display: block; float: none; border-left: 5px solid #c00 ; padding:3px 0 3px 5px; } #sidelink dd { border-left: 5px solid #fcc ; padding:3px 0 3px 5px; } #sidelink dd ul {padding-top: 0.5em;} #sidelink dd li { width: 50%; float: left; margin-bottom: 0.5em; } #sidelink dd li strong { font-weight: normal; }