/*===================================================================== * Filename: main.css * Template: oogle * Author: Jarel Remick - http://www.jremick.com * Date Created: 12/04/2008 * Media: Screen * * Description * ----------- * This style sheet is used for the single (right aligned) column, main (left aligned) column. * CSS Reset using "reset.css" from 960 framework package, derived from Eric Meyers. * Uses blueprint CSS as base starting point: http://www.blueprintcss.org/ =====================================================================*/ @import "reset.css"; @import "clears.css"; /* ===== GLOBAL ===== */ .center { margin: 0 auto; } .tcenter { text-align: center; } .clear { clear: both; } .fl { float: left; } img.fl { float: left; margin: 8px 8px 8px 0; } .fr { float: right; } img.fr { float: right; margin: 8px 0 8px 8px; } .ltc, .ltc2, .rtc, .rtc2, .lbc, .lbc2, .rbc, .rbc2 { position: absolute; width: 4px; height: 4px; } .ltc { top: -1px; left: -1px; background: url(../images/layout/left-corner-top.gif) no-repeat; } .rtc { top: -1px; right: -1px; background: url(../images/layout/right-corner-top.gif) no-repeat; } .lbc { bottom: -1px; left: -1px; background: url(../images/layout/left-corner-btm.gif) no-repeat; } .rbc { bottom: -1px; right: -1px; background: url(../images/layout/right-corner-btm.gif) no-repeat; } .ltc2 { top: -1px; left: -1px; background: url(../images/layout/left-corner-top2.gif) no-repeat; } .rtc2 { top: -1px; right: -1px; background: url(../images/layout/right-corner-top2.gif) no-repeat; } .lbc2 { bottom: -1px; left: -1px; background: url(../images/layout/left-corner-btm2.gif) no-repeat; } .rbc2 { bottom: -1px; right: -1px; background: url(../images/layout/right-corner-btm2.gif) no-repeat; } .gradient { background: url(../images/layout/grey-gradient-med.gif) repeat-x; } /* Top Link (at footer) */ a.top { position: absolute; top: -13px; left: 0; } a.top { width: 28px; height: 28px; background: url(../images/layout/top-icon.gif) no-repeat 0 -28px; } a.top:hover { background-position: 0 0; } /* Use this instead of html hr tag */ div.hr { width: 100%; height: 1px; background: #d5d5d5; } /* ===== LAYOUT ===== */ #wrapper { width: 950px; margin: 0 auto; } /* HEADER */ #header { width: inherit; height: 138px; position: relative; margin-bottom: 5px;} #header .advert { position: absolute; top: 20px; right: 15px; } #header .quick-access { position: absolute; bottom: 40px; right: 15px; } #header .logo { position: absolute; top: 10px; left: 15px; } /* NAVIGATION */ #nav { width: 950px; height: 38px; position: relative; top: 100px; background: url(../images/layout/nav-bg-repeat.gif) repeat-x; } #nav .left { width: 5px; height: inherit; position: absolute; left: 0; background: url(../images/layout/nav-left.gif) no-repeat; } #nav .right { width: 5px; height: inherit; position: absolute; right: 0; background: url(../images/layout/nav-right.gif) no-repeat; } #nav ul { height: inherit; list-style: none; } #nav ul li { width: 117px; height: 36px; float: left; } #nav ul li a { width: inherit; height: inherit; display: block; background: url(../images/layout/nav-bg.gif) no-repeat -352px 0; } #nav ul li a:hover { background-position: -234px 0; } #nav ul li a:active { background-position: -117px 0; } #nav ul li a.active { background-position: 0 0; } .search { height: 20px; width: 140px; position: absolute; top: 9px; right: 20px; z-index: 1; } .search { background: url(../images/layout/search-bg.gif) no-repeat 0 0; } .search input { height: 20px; width: 108px; background: none; border: none; margin-left: 20px; } /* MAIN CONTENT */ /* //augmente de 50px la page principale #mainContent { width: 650px; float: left; } */ #mainContent { width: 600px; float: left; } #mainContent ul { list-style-position: inside; } #mainContent .container { position: relative; margin-bottom: 10px; border: solid 1px #d5d5d5; background: #fff; } #mainContent .padContainer { padding: 10px; padding-bottom: 6px; } #mainContent .gradient { background: url(../images/layout/blue-gradient-large.jpg) repeat-x; } #mainContent .story { padding: 20px; padding-bottom: 0; } #mainContent .base, #mainContent .breadCrumbs { background: url(../images/layout/base-gradient.gif) repeat-x; height: 20px; padding: 0 20px; } #mainContent .base { border-top: solid 1px #d5d5d5; } #mainContent .breadCrumbs { border-bottom: solid 1px #d5d5d5; } /*#mainContent */ .category { height: 31px; position: relative; margin-bottom: 5px; padding: 0 20px; border: solid 1px #d5d5d5; background: url(../images/layout/category-bg.gif) repeat-x; } ol.showcase { list-style: none; margin: 0; } ol.showcase li { width: 133px; float: left; } ol.showcase li img { margin-bottom: 5px; } ol.showcase span { display: block; } #mainContent .gridContainer { width: 532px; margin: 0 auto; } #mainContent .gridContainer ul { margin-top: 8px; } #mainContent .gridContainer ul li { margin-bottom: 15px; } /* MAIN CONTENT TABS */ #mainTabs .tabContent { width: 598px; height: 184px; } #mainTabs .ui-tabs-hide { display: none; } #mainTabs .info { position: absolute; top: 35px; left: 20px; } #mainTabs .info ul { margin-left: 30px; } #mainTabs ul.nav { margin: 0; height: 16px; list-style: none; background: url(../images/layout/tab-bg-repeat.gif) repeat-x; } #mainTabs ul.nav li { height: inherit; width: 49px; float: left; } #mainTabs ul.nav li a { height: inherit; width: 49px; display: block; background: url(../images/layout/tab-bg.gif) no-repeat -148px 0; } #mainTabs ul.nav li a:hover { background-position: -98px 0; } #mainTabs ul.nav li a:active { background-position: -49px 0; } #mainTabs ul.nav .ui-tabs-selected a { background-position: 0 0; } #productTabs .ui-tabs-hide-p { display: none; } #productTabs .linksList { width: 158px; border: solid 1px #d5d5d5; position: relative; float: left; margin-bottom: 5px; } #productTabs .linksList { background: url(../images/layout/grey-gradient-med.gif) repeat-x; } #productTabs .linksList ul { list-style: none; margin: 7px 0; } #productTabs .linksList li a { display: block; padding: 0 10px; } #productTabs .linksList li a:hover, #productTabs .linksList .ui-tabs-selected-p a { font-weight: bold; font-size: 1.05em; } /* FOOTER */ #footer { width: inherit; position: relative; margin-top: 20px; padding-bottom: 15px; } #footer .nav { margin-left: 28px; } #footer ul { list-style: none; margin: 0; } #footer ul li { float: left; padding: 2px 7px; border-right: solid 1px #666; } #footer ul li.last { border: none; } /* ===== FONTS ===== Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ /* Global */ body { font-size: 75%; color: #222; background: #fff; font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; } .readmore { font-style: italic; padding-left: 8px; } /* NAVIGATION */ #nav ul { font-size: 1.2em; line-height: 38px; text-align: center; } #nav ul li a { color: #383838; text-decoration: none; } #nav ul li a:hover, #nav ul li a:active, #nav ul li a.active { color: #fff; } .search { line-height: 22px; } /* MAIN CONTENT */ #mainContent .story p { font-size: 1.15em; line-height: 1.3em; color: #666; } #mainContent .base, #mainContent .breadCrumbs { font-size: .85em; line-height: 23px; letter-spacing: .05em; color: #999; } #mainContent .breadCrumbs a { padding: 0 3px; } #mainContent .base .author { color: #666; } /*#mainContent*/ .page-head-alt .category h4 {text-align:left;} .page-head .category h4 {text-align:left;} .category h4 { font-size: 1.3em; line-height: 33px; color: #fff;} #mainContent ul { font-size: 1.05em; line-height: 1.3em; } ul.showcase { color: #666; line-height: 1.3em;} ul.showcase span { font-weight: bold; color: #000; } ul.showcase {width:100%;} /* MAIN CONTENT TABS */ #mainTabs { text-align: center; } #mainTabs noscript { font-size: 1em; line-height: 2em; color: red; } #mainTabs ul.nav a { text-align: center; font-size: .8em; line-height: 1.45em; color: #666; text-decoration: none; } #mainTabs ul.nav a:hover, #mainTabs ul.nav .ui-tabs-selected a { color: #fff; } #mainTabs .info { text-align: left; } #mainTabs .info ul { font-size: 1.1em; line-height: 1.5em; } #productTabs .linksList ul { line-height: 1.8em; font-size: 1.05em; } #productTabs .linksList ul a { color: #333; } #productTabs .linksList ul a:hover { color: #4185d2; text-decoration: none; } /* FOOTER */ #footer { color: #999; text-align: left; line-height: .8em; font-size: .9em; } /* Headings */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.5em; } h3 { font-size: 1.7em; line-height: 1; margin-bottom: .75em; } h4 { font-size: 1.3em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements */ p { margin: 0 0 1.5em; } p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } a { color: #4185d2; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre { margin: 1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /*** bass 2 ligne***/ dt { display:block; font-weight:bold; } ul,ol { list-style:none; } /* Misc classes */ .small { font-size: 1em; line-height: 1.3em; } .medium { font-size: 1.2em; line-height: 1.6em; } .large { font-size: 1.45em; line-height: 2em; } .hide { display: none; } .white { color: #fff; } .bright { color: #f4f4f4; } .quiet { color: #666; } .black { color: #000; } /*.highlight { background:#ff0; }*/ .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; }