/* CSS for fluid 2-col layout Issues: Borders on the left of the content div, or on the right of the leftnav. */ /* NEW TWO-COL LAYOUT */ @import url("price.css"); @import url("cart.css"); html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; padding-bottom: 10px; /* background-color: #fff; /\*#dbe7ed; lt blue *\/ */ /* background-image: url("/images/gradient.gif"); */ /* background-repeat: repeat-x; */ font-size: 11pt; line-height: 1.4em; font-family: sans-serif; } /* * div#container is the only child of * * It's children are: header, leftnav, content, footer */ #container { width: 820px; margin: 0px; margin-top: 10px; /* border: solid black 1px; */ margin-left: 80px; /* display */ background-color: #fff; text-align: left; font-family: verdana, arial, sans-serif; font-size: 90%; /* Not part of tutorial max-width: 56em; min-width: 30em; */ } /* div#header is the header section of the page */ #header { background: url("/images/klaus/header.jpg") no-repeat; /* background-image: url("/images/mockup-1/top-banner.jpg"); */ /* background-repeat: repeat-x; */ /* background-position: -0px; */ height: 240px; /* matches header height */ /* background-color: orange; */ font-size: 140%; color: #000; } /* div#leftnav is a left sidebar alongside content */ #leftnav { float: left; margin-top: 50px; margin-bottom: 20px; border: solid #000 1px; padding-left: 0px; width: 200px; /* matches left nav space-out */ /* display */ font-weight: bold; font-size: 90%; line-height: 1.3em; } /* div#content contains the page's main content. */ #content { top: -30px; float: left; width: 580px; padding-left: 15px; padding-right: 15px; padding-top: 15px; margin-bottom: 50px; /* display */ text-align: justify; } /* div#footer is the footer section of the page */ #footer { background-color: #102844; height: 100px; width: 760px; padding-top: 10px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; clear: both; color: #fff; text-align: center; font-size: 90%; line-height: 1.2em; } #header img { border: none; } #header ul { display: block; float: left; margin-top: 5px; margin-left: 0px; padding: 0px; padding-bottom: 5px; font-size: 10pt; font-weight: bold; } #header li { display: inline; margin: 0px; padding-left: .8em; padding-right: .8em; } #header div#logo { margin-top: 0px; padding-top: 0px; float: left; height: 240px; /* matches header height */ width: 80px; } #header div#title { margin-left: 200px; /* matches left nav space-out */ /* width: 500px; */ /* margin: 20px; */ /* margin-left: 250px; */ /* border-top: solid #666 2px; */ /* border-bottom: solid #666 2px; */ /* padding-top: 10px; */ /* padding-bottom: 10px; */ /* color: #000; */ font-size: 100%; font-family: verdana, arial, sans-serif; text-align: center; } #header div#title p { font-size: 70%; padding: 0px; margin: 0px; font-weight: bold; } div#subheader { margin: 0px; margin-left: 250px; padding: 0px; font-size: 80%; color: #333; /* lt blue */ } div#subheader a, div#subheader a:hover, div#subheader a:visited, div#subheader a:link, div#subheader a:active { color: #333; } #subheader a:hover { text-decoration: underline; } #leftnav h2 { margin-top: 20px; padding-bottom: 0.25em; font-size: 110%; text-align: center; text-decoration: underline; color: #000; } #rightnav { margin-top: 60px; font-size: 90%; } #rightnav h2 { margin-top: 20px; border-bottom: solid #1a2980 2px; font-size: 110%; color: #f9681e; text-align: left; } h1, h2, h3, h4, h5, h6 { /* color: #1a2960; */ padding: 0px; margin: 0px; } h1 { font-size: 140%; } h2 { font-size: 120%; } #content h1 { margin-bottom: 10px; font-size: 160%; text-align: left; line-height: 1em; } #content div.iteminfo { position: relative; top: -5px; margin-top: 0px; padding-top: 0px; font-size: 95%; } #content table { width: 100%; margin-bottom: 7px; } #content #rightside { float: right; font-size: 80%; line-height: 1.2em; padding-left: 10px; margin-bottom: 20px; text-align: left; } #content img#prod_image { margin: 5px 5px 5px 0px; } #content img#cat_image { margin: 30px 5px 5px 0px; } a, a:link, a:visited, a:hover, a:active { color: black; text-decoration: none; } #content a, #content a:link, #content a:visited, #content a:hover, #content a:active { color: #b52700; /* darker orange */ text-decoration: none; } #header a:link, #header a:visited, #header a:hover, #header a:active, #header a { color: #333333; text-decoration: none; font-weight: bold; } #header a:hover { text-decoration: underline; color: #f5671e; /* orange */ } #leftnav a:hover, #rightnav a:hover, #content a:hover { color: #f5671e; /* orange */ } div#search form { padding: 3px; text-align: center; font-size: 100%; padding-right: 5px; } div#search h2 { border: none; } div#search input { border: solid #000 1px; font-size: 80%; } div#search table tr td { text-align: right; } #leftnav ul, #rightside ul { margin: 0px; padding: 3px; list-style: none; } #leftnav ul li { margin: 0px; padding: 0px; padding-bottom: 3px; margin-left: 0px; padding-left: 10px; /* tbd: For IE this might need to be 0px */ } #rightside ul li { margin: 0px; padding: 0px; margin-left: 0px; padding-left: 10px; /* tbd: For IE this might need to be 0px */ } #content ul { text-align: left; } /* * Content table styling. */ #content table.tableasset { border: solid #666 1px; } #content table tr td { text-align: left; /* tbd: smaller table asset font */ } #content table tr.oddrow { background-color: #dbe7ed; /* lt blue */ } #content form#login, #content h2, .hilitebox { background-color: #eeeef7; padding: 2px; border: solid black 1px; } #content h2 { background-color: transparent; border: none; border-top: solid #000 1px; margin-top: 10px; clear: right; } #content #rightside h2 { background-color: transparent; border: none; } #content form#login { float: right; padding: 0px 10px 0px 10px; margin: 0 10px; } .hilitebox { text-align: center; clear: right; }