/* 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("product.css"); html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; padding-bottom: 10px; background-color: #dbe7ed; /* lt blue */ background-image: url("/images/mockup-1/bg-droplets.gif"); text-align: center; 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 gray 1px; margin-left: auto; margin-right: auto; /* display */ background-color: #ffffff; background-image: url("/images/mockup-1/content-gradient.jpg"); background-position: 0px 81px; background-repeat: repeat-x; 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 { height: 88px; background-image: url("/images/mockup-1/top-banner.jpg"); background-repeat: repeat-x; background-position: -0px; text-align: right; font-size: 14pt; color: #f93; } /* div#leftnav is a left sidebar alongside content */ #leftnav { float: left; padding-top: 10px; padding-left: 0px; width: 200px; /* display */ font-weight: bold; font-size: 90%; line-height: 1.3em; } /* div#content contains the page's main content. */ #content { float: left; width: 580px; padding-left: 15px; padding-right: 15px; padding-top: 15px; /* display */ text-align: justify; } /* div#footer is the footer section of the page */ #footer { width: 820px; padding-top: 10px; padding-bottom: 5px; clear: both; color: #666666; text-align: center; line-height: 1.2em; } #header img { padding-top: 10px; border: none; float: left; } #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; } div#subheader { margin: 0px; padding: 4px 5px 0px 8px; font-size: 80%; color: #dbe7ed; /* lt blue */ } div#subheader a, div#subheader a:hover, div#subheader a:visited, div#subheader a:link, div#subheader a:active { color: #dbe7ed; /* lt blue */ } #subheader a:hover { text-decoration: underline; } #leftnav h2 { margin-top: 20px; padding-left: 7px; font-size: 100%; color: #f9681e; border-bottom: solid #1a2980 2px; } #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 { color: #0000bb; font-size: 60%; padding-right: 5px; } div#search input { 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 */ background: url("/images/bullet.gif") no-repeat 1px .5em; } #rightside ul li { margin: 0px; padding: 0px; margin-left: 0px; padding-left: 10px; /* tbd: For IE this might need to be 0px */ background: url("/images/bullet.gif") no-repeat 1px .5em; } #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 { 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; }