/* /is/css/basic.css ------------------------------------------------------------------------ basic.css of INTERSPORT Canada the css file contains the rules for: - Basic CSS Rules - header - navigation - content - footer Author: forzanigroup.ca Version: v 1.0 ------------------------------------------------------------------------ Color Guide A selection of the most used colors in this CSS. Intersport Logo darkblue #1e3296 Intersport Logo darkred #e60000 Background color footer #ebecee --------------------------------------------------------------------- */ /* Basic CSS Rules --------------------------------------------------------------------- */ body { background: #ffffff url(/img/UI/header_bg.gif) repeat-x; color: #333; margin: 0; padding: 0; font-family: Tahoma, Arial, Helvetica, sans-serif; } /* line-height was by default set to 14px?? line-height: 14px; */ div, form, input, select, textarea, ol, object, embed, ul, li { margin: 0; padding: 0; } object { display: block; } img { border: 0; padding: 0; } td, th { vertical-align: top; } a:link { color: #1e3296; text-decoration: underline; } a:visited { color: #1e3296; text-decoration: underline;} a:active { color: #e60000; text-decoration: underline; } a:hover { color: #e60000; text-decoration: underline; } a.arrow-link { position: absolute; bottom: 9px; left: 11px; font-size: 11px; padding-left: 12px; background: url(/img/UI/arrow_grey_trans.gif) 0px 4px no-repeat; text-decoration: none; } a.arrow-link:hover { background-image: url(/img/UI/arrow_red_trans.gif); } a.arrow-link.inverted, a.arrow-link.inverted:hover { background: url(/img/UI/arrow_white_trans.gif) 0px 4px no-repeat; color: #fff; } .center { text-align: center; } .left { text-align: right; } .right { text-align: right; } .clear { clear: both !important; } .bold { font-weight: bold; } .no_margin_right { margin-right: 0px !important; } .frame { width: 768px; border: 1px solid #d3d7db; padding: 10px; margin-top: 10px; } .spacer_h15 { display: block; width: 100%; height: 15px; } .w783 { width: 783px !important; margin: 0 !important; } .h420 { min-height: 420px; } /* Master Container for all Elements on the site --------------------------------------------------------------------- */ #container { background: url(/img/UI/container_bg.gif) repeat-y; margin: 0; padding: 0; font-family: Tahoma, Arial, Helvetica, sans-serif; } /* Header --------------------------------------------------------------------- */ #header { position: relative; height: 72px; width: 992px; background: url(/img/UI/header_bg.gif) repeat-x; } #identity { float: left; height: 72px; width: 408px; background: url(/img/UI/identity_bg.gif) right repeat-x; } #logo { width: 220px; padding-top: 5px; float: left; } #country { padding-top: 25px; float: left; } /* Header > Meta navigation (top navigation / search) --------------------------------------------------------------------- */ #top_navi { position: absolute; left: 418px; width: 392px; margin-top: 27px; } #top_navi a { background: url(/img/UI/btn/headerBtn-en.png) no-repeat; width: 109px; height: 0px; overflow: hidden; padding-top: 15px; float: left; } #top_navi.fr a { background: url(/img/UI/btn/headerBtn-fr.png) no-repeat; } #top_navi a.apparel { background-position: 0 0; } #top_navi a.apparel:hover { background-position: 0 -15px; } #top_navi a.footwear { width: 119px; background-position: -109px 0; } #top_navi a.footwear:hover { background-position: -109px -15px; } #top_navi a.equipment { background-position: -228px 0; } #top_navi a.equipment:hover { background-position: -228px -15px; } #search { position: absolute; right: 0; margin-top: 22px; } #search form { } #search_term { background: #5565b0; color: #fff; font-size: 11px; border: 1px solid #fff; width: 156px; padding: 2px 0 2px 2px; } #search_button { margin-bottom: -4px; } /* page body (left navigation, content area) --------------------------------------------------------------------- */ #body { float: left; width: 1024px; background: url(/img/UI/body_bg.gif) left bottom no-repeat; border-top: 13px solid #fff; } /* left navigation bar (navigation, language selection, product finder) --------------------------------------------------------------------- */ #navigation_bar { float: left; width: 192px; font-size: 11px; margin-right: 8px; } /* left navigation --------------------------------------------------------------------- */ #navigation { background: url(/img/UI/navigation_bg.gif) top no-repeat; width: 192px; padding: 13px 0 10px 0; float: left; } #navigation li { list-style-type: none; float: left; min-height: 23px; width: 100%; margin: 0 0 -1px 0; padding: 0; } #navigation li a { display: block; width: 189px; padding: 1px 0 1px 0; text-decoration: none; border-top: 1px solid #c8ced7; border-bottom: 1px solid #c8ced7; line-height: 19px; } #navigation li#home a { border-top: 1px solid #fff; } /* this is needed to avoid the boxmodel problem --------------------------------------------------------------------- */ #navigation li a span { display: block; margin: 0px 10px 0px 30px; } #navigation li a:link { background: #fff url(/img/UI/navigation_L1_bg.gif) 0 center no-repeat; color: #1e3296; } #navigation li a:visited { background: #fff url(/img/UI/navigation_L1_bg.gif) 0 center no-repeat; color: #1e3296; } #navigation li a:active { background: url(/img/UI/navigation_L1_hl_bg.gif) 0 center no-repeat; color: #e60000; } #navigation li a:hover { background: url(/img/UI/navigation_L1_hl_bg.gif) 0 center no-repeat; color: #e60000; } #navigation li.active a:link, #navigation li.active a:visited, #navigation li.active a:active, #navigation li.active a:hover { background: #1e3296 url(/img/UI/navigation_L1_active_bg.gif) 0 center no-repeat; color: #fff; border-bottom: 0; } /* Second navigation level --------------------------------------------------------------------- */ #navigation li ul { display: none; } #navigation li.active ul { display: block; margin-top: 8px; margin-bottom: 9px; float: left; } #navigation li.active ul li { min-height: 18px; } #navigation li.active ul li a { border: 0; line-height: 16px; } #navigation li.active ul li a:link { background: url(/img/UI/navigation_L2_bg.gif) 0 center no-repeat; color: #333; } #navigation li.active ul li a:visited { background: url(/img/UI/navigation_L2_bg.gif) 0 center no-repeat; color: #333; } #navigation li.active ul li a:active { background: url(/img/UI/navigation_L2_hl_bg.gif) 0 center no-repeat; color: #e60000; } #navigation li.active ul li a:hover { background: url(/img/UI/navigation_L2_hl_bg.gif) 0 center no-repeat; color: #e60000; } #navigation li.active ul li.active a:link, #navigation li.active ul li.active a:visited, #navigation li.active ul li.active a:active, #navigation li.active ul li.active a:hover { background: url(/img/UI/navigation_L2_bg.gif) 0 center no-repeat; color: #1e3296; font-weight: bold; } /* Third navigation level --------------------------------------------------------------------- */ #navigation li.active ul li ul { display: none; } #navigation li.active ul li.active ul { display: block; margin-top: 3px; margin-bottom: 8px; float: left; } #navigation li.active ul li.active ul li a { border: 0; line-height: 14px; } #navigation li.active ul li.active ul li a span { margin-left: 43px; } #navigation li.active ul li.active ul li a:link { background: url(/img/UI/navigation_L3_bg.gif) 0 center no-repeat; color: #333; font-weight: normal; } #navigation li.active ul li.active ul li a:visited { background: url(/img/UI/navigation_L3_bg.gif) 0 center no-repeat; color: #333; font-weight: normal; } #navigation li.active ul li.active ul li a:active { background: url(/img/UI/navigation_L3_hl_bg.gif) 0 center no-repeat; color: #e60000; font-weight: normal; } #navigation li.active ul li.active ul li a:hover { background: url(/img/UI/navigation_L3_hl_bg.gif) 0 center no-repeat; color: #e60000; font-weight: normal; } #navigation li.active ul li.active ul li.active a:link, #navigation li.active ul li.active ul li.active a:visited, #navigation li.active ul li.active ul li.active a:active, #navigation li.active ul li.active ul li.active a:hover { background: url(/img/UI/navigation_L3_bg.gif) 0 center no-repeat; color: #333; font-weight: bold; } /* Promo navigation buttons --------------------------------------------------------------------- */ #navigation_bar .promo-button { width: 188px; height: 180px; padding: 0 0 0 1px; float: left; } #navigation_bar .promo-button a { width: 188px; height: 0; padding-top: 180px; float: left; overflow: hidden; background-repeat: no-repeat; } #navigation_bar .promo-button a:hover { background-position: 0 -180px; } /* Breadcrumb --------------------------------------------------------------------- */ #breadcrumb { margin: 0 0 20px 0; padding: 0; color: #333; } #breadcrumb p { margin: 10px 0 0 0; padding: 0; font-size: 11px; line-height: 14px; } #breadcrumb p a { padding-left: 9px; padding-right: 9px; } #breadcrumb p a:link { background: url(/img/UI/arrow_grey_trans.gif) 0 4px no-repeat; color: #1e3296; text-decoration: none; } #breadcrumb p a:visited { background: url(/img/UI/arrow_grey_trans.gif) 0 4px no-repeat; color: #1e3296; text-decoration: none; } #breadcrumb p a:active { background: url(/img/UI/arrow_red_trans.gif) 0 4px no-repeat; color: #e60000; text-decoration: none; } #breadcrumb p a:hover { background: url(/img/UI/arrow_red_trans.gif) 0 4px no-repeat; color: #e60000; text-decoration: none; } /* Content --------------------------------------------------------------------- */ #content { position: relative; float: left; width: 590px; margin-right: 8px; } #content .grid3 { position: relative; float: left; width: 590px; margin-bottom: 10px; } #content .grid3 img { display: block; } #content .grid3 div { position: relative; float: left; width: 190px; height: 250px; margin-right: 10px; overflow: hidden; } #content .grid3 div:last-child { margin-right: 0; } #content .grid3 .teaser { height: 213px; width: 188px; border: 1px solid #d3d7db; } #content h1 { color: #1e3296; font-size: 22px; line-height: 22px; font-weight: normal; margin: 0; padding: 0 0 1px 10px; } /* #content h2 { color: #1e3296; font-size: 18px; line-height: 18px; font-weight: normal; margin: 0; padding: 0 0 1px 10px; } */ #content h3 { color: #1e3296; font-size: 11px; font-weight: bold; margin: 10px 10px -11px 10px; padding: 0 0 0 0; } #content p { color: #333; font-size: 11px; line-height: 14px; margin: 13px 10px 14px 10px; padding: 0 } #content ul, #content ol { color: #333; font-size: 11px; line-height: 14px; margin: 13px 10px 14px 10px; padding: 0; } #content ul li { line-height: 14px; list-style: none; margin: 0 0 5px 0; padding: 0 0 0 12px; background: url(/img/UI/content_bullet.gif) left 0.36em no-repeat; } #content ul li ul { padding-left: 0px; margin-left: 0px; } #content ul li ul li { font-weight: normal; background: url(/img/UI/arrow_black_trans.gif) left 0.36em no-repeat; } #content ul li a:link, #content ul li a:visited, #content ul li a:active, #content ul li a:hover { text-decoration: none; } #content ol li { line-height: 14px; list-style: lower-roman; margin: 0 0 5px 15px; padding: 0px; } /* content box (linked headline, text, border around the box) --------------------------------------------------------------------- */ .content_box { background: url(/img/UI/content_box_bg.gif) repeat-y; border: 1px solid #d3d7db; padding: 0 0 0 15px; margin: 5px 0 5px 0; clear: both; } .content_box h3 { margin: 5px 10px 5px 0 !important; } .content_box h3 a { padding-left: 12px; } .content_box h3 a:link { background: url(/img/UI/arrow_grey_trans.gif) 0 4px no-repeat; color: #1e3296; text-decoration: none; } .content_box h3 a:visited { background: url(/img/UI/arrow_grey_trans.gif) 0 4px no-repeat; color: #1e3296; text-decoration: none; } .content_box h3 a:active { background: url(/img/UI/arrow_red_trans.gif) 0 4px no-repeat; color: #e60000; text-decoration: none; } .content_box h3 a:hover { background: url(/img/UI/arrow_red_trans.gif) 0 4px no-repeat; color: #e60000; text-decoration: none; } .content_box p { } h3.emphase { width: 590px; height: 23px; overflow: hidden; margin: 5px 0 5px 0 !important; padding: 0; } h3.emphase span { background: url(/img/UI/emphase_bg.gif) left top no-repeat; display: block; cursor: default; color: #fff; font-size: 11px; line-height: 14px; padding: 4px 10px 5px 10px; } /* Sidebar --------------------------------------------------------------------- */ #sidebar { float: left; width: 190px; } #sidebar div { width: 190px; height: 250px; overflow: hidden; margin-bottom: 10px; } #sidebar a.promo50_100 { display: block; width: 190px; height: 0px; padding-top: 81px; overflow: hidden; background-repeat: no-repeat; background-position: top; } #sidebar a.promo50_100:hover { background-position: 0 -81px; } /* Footer --------------------------------------------------------------------- */ #footer { display: block; background: #ebecee; width: 100%; clear: both; border-top: 15px solid #fff; font-size: 11px; color: #9298a4; padding: 10px 0 11px 0; } #footer a { text-decoration: none; padding: 0 3px; } #footer a:link { color: #9298a4; } #footer a:visited { color: #9298a4; } #footer a:active { color: #e60000; } #footer a:hover { color: #e60000; } #footer ul li { display: inline; } #footer ul { margin: 0 0 0 12px; padding: 0; }