/********************************************************* * * index.css * ********************************************************/ /********************************************************* * * CSS style guide %= topmenu * ********************************************************* %= Master %= Reset %= Global %= Links %= Header %= logo %= ads %= navigation %= Content %= article %= cols %= products %= Footer %= menu %= address %= aaaaa ********************************************************/ /********************************************************* * * %= Master * ********************************************************/ /* %= Reset -------------------------------------------------------*/ html, body, div, span, button, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; margin:0; outline:0; padding:0; vertical-align:baseline;} :focus{outline:0;} body{background:white; color:black; line-height:1.0em;} ol, ul{list-style:none;} table{border-collapse:collapse; border-spacing:0;} caption, th, td{text-align:left; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after{content:"";} /* %= Global -------------------------------------------------------*/ html, input, select, textarea{font-size:100%;} body{background:#111; color:#333; font:0.625em/1em Verdana, Helvetica, Arial, sans-serif; text-align:center;} button{background:none; cursor:pointer;} .inner{margin:0 auto; text-align:left; width:760px;} /* %= Links -------------------------------------------------------*/ a img {border:0;} a:link,a:visited{color:#ec1010; text-decoration:underline;} a:hover{color:#ec1010; text-decoration:none;} a:active{} /********************************************************* * * %= Header * ********************************************************/ #header{background:url(img/bg_header.jpg) repeat-x #000; border-bottom:2px solid #fff;} /* %= logo -------------------------------------------------------*/ #logo{background:url(img/proteinemusculation.png) no-repeat; float:left; height:51px; margin:20px 0 0 0; text-indent:-4000px; width:145px;} /* %= ads -------------------------------------------------------*/ #ads{border:1px solid #999; float:right; margin:20px 0 0 0;} /* %= navigation -------------------------------------------------------*/ #navigation{clear:both; padding:16px 0 3px 0;} #navigation li{display:inline; float:left; margin:0 3px 4px 0;} .ie6 #navigation{margin-bottom:6px;} #navigation li a{background:url(img/bt_left.png) no-repeat top left; color:#fff; cursor:pointer; float:left; font-size:1.2em; font-weight:bold; padding:0 0 0 5px; text-decoration:none;} #navigation li a span{background:url(img/bt_right.png) no-repeat top right; float:left; height:24px; line-height:24px; padding:0 15px 0 9px;} #navigation li a:hover{background-position:0 -24px; color:#fff;} #navigation li a:hover span{background-position:100% -24px;} #navigation li.selected a{background-position:0 -48px;} #navigation li.selected a span{background-position:100% -48px;} /********************************************************* * * %= Content * ********************************************************/ #content{background:url(img/bg_content.jpg) repeat-x #fff; padding:15px 0;} #content .maincontent{padding:0 0 20px 0;} /* %= article -------------------------------------------------------*/ #content .article{} #content .article h1, #content .article .title{background:url(img/bg_block_header.png) repeat-x; color:#fff; font-size:1.4em; height:23px; padding:10px 10px 0 10px;} #content .article h1 b, #content .article h1 strong{font-weight:bold;} #content .article .content{background:#fff; border-style:solid; border-color:#ddd; border-width:0 1px 1px 1px; padding:10px;} #content .article .content img{margin:0 20px 10px 0;} #content .article .content p{color:#666; font-size:1.1em; line-height:1.6em;} #content .article .content b, #content .content strong{color:#333; font-weight:bold;} /* %= cols -------------------------------------------------------*/ #content .left{float:left; width:370px;} #content .right{float:right; width:370px;} /* %= products -------------------------------------------------------*/ #content .product{margin:20px 0 0 0;} #content .product .header{background:url(img/bg_block_header.png) repeat-x; color:#fff; font-size:1.4em; font-weight:bold; height:23px; padding:10px 10px 0 10px;} #content .product .header .title{float:left;} #content .product .header .title a{color:#fff; text-decoration:none;} #content .product .header .title a:hover{text-decoration:underline;} #content .product .header .pack{float:right;} #content .product .content{background:url(img/bg_product_infos.png) repeat-x; border-style:solid; border-color:#ddd; border-width:0 1px 1px 1px;} #content .product .content .img{background:#fff; float:left; overflow:hidden; padding:10px 0; text-align:center; width:170px;} #content .product .content .infos{ float:left; padding:10px 5px; width:188px;} #content .product .content .infos h2{color:#e40505; font-size:1.8em; line-height:1.0em; font-weight:bold; margin:0 0 10px 0;} #content .product .content .infos h2 a{text-decoration:none;} #content .product .content .infos h2 a:hover{text-decoration:underline;} #content .product .content .infos ul{color:#666; font-size:1.1em; line-height:1.1em; margin:0 0 10px 0;} #content .product .content .infos ul li{background:url(img/puce.png) no-repeat 0 4px; padding:0 0 6px 10px;} #content .product .content .description{clear:both; color:#666; font-size:1.1em; line-height:1.3em; padding:0 10px 10px 10px;} /********************************************************* * * %= Footer * ********************************************************/ #footer{background:url(img/bg_footer.jpg) repeat-x #111; font-size:1.1em; padding:20px 0 100px 0;} /* %= menu -------------------------------------------------------*/ #footer .inner ul{margin:10px 80px; text-align:center;} #footer .inner ul li{color:#999; display:inline; line-height:2.0em;} #footer .inner ul li a{color:#fff; text-decoration:none;} #footer .inner ul li a:hover{text-decoration:underline;} /* %= keywords -------------------------------------------------------*/ #footer .inner .keywords{border-top:1px solid #666;} #footer .inner .keywords{margin:0; padding:0 100px;} /* %= address -------------------------------------------------------*/ #footer .inner div{border-top:1px solid #666; color:#fff; padding:10px 0 0 0; text-align:center;} #footer .inner div a{color:#fff;} /********************************************************* * * %= Divers * ********************************************************/ /* Clearfix -------------------------------------------------------*/ .clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height:1%;} .clearfix {display:block;} /* End hide from IE-mac */