ChrisFah
14.10.2007, 17:11
Hallo an alle!
Ich hoffe mit meinem kleinen Problemchen wieder auf kompetente Hilfe zu treffen :-)
Ich habe ein gratis template, das sich einfach an der max. Breite des Explorers ausrnichtet. Ich möchte jedoch die maximale breite des Shops (linke Boxen+Main Content+rechte Boxen) fixieren. Also wenn kleiner, soll der Shop kleiner werden, ab einer gewissen Breite des Fensters soll die Shopbreite fix bleiben.
Danke im voraus, Chris
Anbei die Stylesheet.css aus meinem template:
/ default common settings /
body {
background:white url('img/gradientlightblue.png') repeat-x fixed center bottom; color: black;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.7em;
padding: 0;
line-height: 1.5em; / change this value to 1.25em to reset default /
margin-bottom: 1em; / give room at bottom of page /
cursor: default; / remove text I cursor when mouse is over text /
margin-left:0; margin-right:0; margin-top:0
}
html body {
margin-right: 1px; / IE 5.5 and 6.0 star-hack to remove horizontal scrollbar if possible /
}
a:link, a:viisted {
color: black; / remove standard blue of hyperlinks /
text-decoration: none; / remove underline /
}
a:hover, a:focus { / mouseover and keyboard tab styles /
color: blue;
text-decoration: underline;
}
a img {
border: none; / remove thick blue border of images within links /
text-decoration: none; / remove underline of image links /
}
hr {
height: 1px;
overflow: hidden;
background-color: blue; / give horizontal rulers a standard color /
color: blue;
border: 0px solid blue;
}
abbr, acronym {
cursor: help;
border-bottom: none; / remove dotted underline on quickinfo helps /
}
tr.odd th, tr.odd td {
background-color: white;
}
tr.even th, tr.even td {
background-color: #ccccff; / lightblue /
}
/ generic classes /
.accessibility {
visibility: hidden; / hidden content only for screen readers etc. /
display: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.noUnderline, a.noUnderline {
text-decoration: none !important;
}
a:hover .underlinehover {
text-decoration: underline !important;
}
.noBorder {
border: none;
}
.verticalMiddle {
vertical-align: middle;
}
small, .small {
font-size: 0.85em;
line-height: 1.3em;
}
big, .big {
font-size: 1.4em;
}
select { / restore 9x style = disable xp themeability /
border: 2px inset darkgrey;
}
th { / table header cells /
text-align: left;
}
.content_heading {
font-weight: bold;
font-size: 1.15em;
}
.errorbox {
color: red;
border: 1px solid red;
border-left-width: 4px;
padding: 2px;
padding-left: 5px;
margin-bottom: 1.5em;
background-color: #FFCC99; / very light red /
}
.requiredField {
color: red;
}
/ wholepage /
div#wholepage {
padding-top: 12.5em;
}
/ head /
div#head {
width:98%;
padding: 10px;
text-align: right;
height: 11em;
background-color: white;
poistion: fixed;
top: 0;
left: 0;
z-index: 1000;
}
html div#head { / IE6 hack /
poistion: absolute;
}
div#head div#headlogo {
float: left;
}
div#head div.box {
float: right;
width: 400px;
margin-right: 0;
}
div#head div.box_top {
background: none; / hide the default background in the head /
}
/ navbar on top /
div#navbartop {
poistion: absolute;
width: 98%;
bottom: 0;
left: 0px;
height: 2.5em;
color: blue;
margin: 0;
background-color: #A7D1E5; / medium blue /
background-image: url('img/gradientblue.png');
background-repeat: repeat-x; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
html div#navbartop {
width: 100%;
}
div#navbartop div { / left and right links in navbar /
padding-top: 4px; / vertically centered /
}
div#navbartop div#navtrail { / breadcrumb navigation /
float: left; / allow linkbox on the right to float right /
}
div#navbartop div#navbarlinks { / links on the right side of the bar /
text-align: right;
float: right;
}
div#navbartop a:link, div#navbartop a:viisted { / links in the bar /
color: blue;
}
div#navbargradient {
poistion: fixed;
z-index: 1001;
top: 12.5em;
left: 0;
height: 20px;
width: 100%;
overflow: hidden;
background-image: url('img/gradientwhitetrans.png');
background-repeat: repeat-x
}
html div#navbargradient { / IE6 hack /
display: none; / IE6 doesn't know transparent pngs /
}
/ box properties /
div#left div.box, div#right div.box {
margin-bottom: 1.5em;
}
div.box_top { / header of boxes, containing box title /
font-weight: bold;
font-size: 1.1em;
margin-bottom: 0.25em;
background-color: #FFDD1F; / yellow /
background-image: url('img/gradientyellow.png');
background-repeat: repeat-x;
padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px
}
div.box_content { / content part of boxes /
border: 0px solid black; / black is default color, overwritten below for each box /
padding: 5px;
}
div.box_content_inner { / inner formerly shadowed area /
border: 2px dotted black; / black is default color, overwritten below for each box /
border-color: inherit;
padding: 5px;
}
div.box ul { / item/link list /
margin: 0;
padding: 0;
}
div.box li { / item in list /
margin: 0;
padding: 0;
margin-left: 20px;
padding-left: -5px;
list-style-type: none;
}
div.box li.main { / main item in list /
list-style-image: url('img/arrowminiblue.gif');
}
div.box li.active a {
text-decoration: underline;
}
div.box li.mainactive { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}
div.box li.mainactive a {
text-decoration: underline;
}
div.box li.main:hover { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}
div.box input[type=image] { / submit images, like arrows /
vertical-align: middle;
}
/ left side /
div#left {
width: 17em;
poistion: absolute;
left: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}
div#left div.box_top, div#right div.box_top {
border-left:1px solid #ffcc00; border-right:1px solid #ffcc00; border-top:1px solid #ffcc00; border-bottom:0px solid #ffcc00;
}
div#left div.box_content, div#right div.box_content {
border-left:1px solid #91C6DF; border-right:1px solid #91C6DF; border-top:0px solid #91C6DF; border-bottom:1px solid #91C6DF; margin-top:-0.27em;
background-color: white;
background-image: url('img/gradientlightbluesmall.png');
background-repeat: repeat-x;
background-poistion: center bottom;
}
html div#left { / IE 6 hack /
poistion: static;
float:left;
margin-left: 10px;
}
/ right side /
div#right {
width: 13.6em;
poistion: absolute;
right: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}
/ box specific /
div#box_login input#input_loginbox_email {
width: 95%; / so it won't go over the right page border /
}
div#box_login input#input_loginbox_pwd {
width: 5.6em; / so the login button will go right of it /
}
div#box_newsletter input#input_newsletter_email {
width: 95%; / so it won't go over the right page border /
}
/ main content /
div#content {
margin: 1.3em 15.5em 0em 19.5em;
min-height: 145em;
}
/ IE 5.5 hack because IE doesn't know to deal with min-height /
html div#content {
height: 145em;
}
div#content div.box_top { / boxes in main content area /
font-size: 1.25em;
padding-bottom: 0.35em;
}
div#content div.box_content {
border-width: 0; / no border for boxes in main content area /
}
div#content div.box_content div.box_top { / box-in-box /
font-size: 1.1em;
border-bottom-width: 2px;
}
/ bottom boxes auto-added outside the template /
div.copyright2 {
margin: 0em 15.5em 0em 19.5em;
margin-top: 1em;
border-top: 1px solid #3330BB;
text-align: center;
color: #3330BB;
}
div.copyright2 a:link, div.copyright2 a:viisted {
color: #3330BB;
}
div.copyright2 a:hover, div.copyright2 a:focus {
color: blue;
text-decoration: underline;
}
div.copyright {
padding: 0em 15.5em 0em 19.5em;
text-align: center;
color: #6361D6;
}
div.copyright a:link, div.copyright a:viisted {
color: #6361D6;
}
div.copyright a:hover, div.copyright a:focus {
color: blue;
text-decoration: underline;
}
div.parseTime {
margin: 0em 15.5em 0em 19.5em;
text-align: center;
color: gray;
}
/ page specific /
/ main_content.html = index.php /
span.greetUser {
color: blue;
font-weight: bold;
}
div.products_overview_item { / a single product box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin:0 1em 2em 0; / give room /
width: 25.1em;
height: 13em;
}
div.products_overview_item img.product_image { / thumbs in these boxes /
float: left;
}
/ product_listing /
div#modbox_product_listing table {
border-collapse: collapse;
}
div#modbox_product_listing td {
border: 0px solid grey;
border-top-width: 1px;
}
a.pageResults {
color: #0000ff;
text-decoration: underline;
}
a.pageResults:hover {
color: #0000ff; / blue /
background-color: #ffff33; / lightyellow /
}
/ category_listing /
div.categories_item { / a single category box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}
html div.products_overview_item { / IE6 hack /
height: 12em;
}
/ shopping_cart.html = shopping_cart.php /
div#modbox_order_details table {
border-collapse: collapse;
}
div#modbox_order_details th {
border-bottom: 1px solid grey;
}
div#modbox_order_details td {
border-color: grey;
border-width: 0 1px 1px 0;
}
div#modbox_order_details td th { / product attributes /
border: 0px solid black !important;
}
/ advanced_search /
div#modbox_advanced_search th, div#modbox_advanced_search td {
vertical-align: top;
}
/ reviews.php /
div#modbox_reviews div.productsImage {
float: left;
}
/ product_reviews.php /
div#modbox_product_reviews tr.odd td {
background-color: white;
}
div#modbox_product_reviews tr.even td {
background-color: #ccccff; / lightblue /
}
/ product_reviews_info.php /
/ products_new.php /
div#modbox_products_new table {
border-collapse: collapse;
}
div#modbox_products_new td {
border: 0px solid grey;
border-top-width: 1px;
}
/ product_info.php /
div#modbox_product_info div.submodule {
padding: 1em 0;
border-bottom: 1px solid lightgrey;
}
div.cross_selling_item { / a single product box in a cross-selling overview /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}
/ specials.php /
/ istemap.html = media/content/istemap.php /
/ account.php /
/ account_edit.php /
/ ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++ /
.boxText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.boxTextBG {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #f1f1f1;
}
.boxTextBGII {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #FFCC99;
}
.boxTextPrice {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #FF0000;
}
.errorBox {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
font-weight: bold;
background-color: #ffb3b5;
}
.gvBox {
font-family : Verdana, Arial, sans-serif;
font-size : 14px;
font-weight: bold;
border-color: #FFFFFF;
border: 1px solid;
background-color: #ffb3b5;
}
.stockWarning {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #cc0033;
}
.productsNotifications {
background-color: #f2fff7;
}
.orderEdit {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #70d250;
text-decoration: underline;
}
img{
border:0px none;
}
FORM {
display: inline;
}
TR.header {
background-color: #ffffff;
}
TR.headerNavigation {
background: #F6F6F6;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
background-color: #F6F6F6;
}
A.headerNavigation {
color: #000000;
}
A.headerNavigation:hover {
color: #000000;
}
TD.conditions {
background-color: #FFCCCC;
}
A.confirmationEdit {
color: #009933;
font-style: italic;
}
A.confirmationEdit:hover {
color: #009933;
font-style: italic;
text-decoration: underline;
}
TR.headerError {
background-color: #ff0000;
}
TR.headerMessage {
background-color: #00CC33;
}
.moduleHeading {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: bold;
padding-bottom: 10px;
}
TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}
TR.headerInfo {
background: #00ff00;
}
TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}
TR.footer {
background: #bbc3d3;
}
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #F6F6F6;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
}
.infoBox {
}
.infoBoxContents {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.infoBoxNotice {
background: #FF8E90;
}
.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.infoBoxHeading {
font-weight:bold;
height:17px;
color: #000000;
}
TD.infoBoxHeading_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: white;
height:17px;
color: #000000;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
border-right: 4px solid;
background: white;
border-color: white;
}
TD.infoBox_right, SPAN.infoBox_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: white;
}
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f8f8f9;
}
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #f8f8f9;
}
TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #b6b7cb;
border-spacing: 1px;
}
.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color: #FFFFFF;
font-weight: bold;
}
TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
TR.subBar {
background: #f4f7fd;
}
TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}
TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}
TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
TEXTAREA {
/ width: 100%; /
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
SPAN.underline {
text-decoration: underline;
}
TABLE.formArea {
background: #f1f1f1;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
}
TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productOldPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
text-decoration: line-through;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productDiscountPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-weight: bold;
}
.smallHeading {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: Black;
}
.moduleRow {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
background-color: #E6E6E6;
border: 1px solid;
border-color: #E6E6E6;
}
.moduleRowOver {
background-color: #D7E9F7;
border: 1px solid;
border-color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
.moduleRowSelected { background-color: #E9F4FC; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
/ istewide font classes /
/ Note: heading<Number> equals <font size="Number"> /
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }
/ Sitemap Tables /
.istemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF;
background-color: #666666;
padding-top: 2px; padding-bottom: 2px;}
.istemap_heading a {color:#FFFFFF;}
.istemap_heading a:hover {color:#CCCCCC; text-decoration:none;}
.istemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background-color: #E6E6E6; padding: 2px 2px;}
.istemap_sub a {color:#000000;}
.istemap_sub a:hover {color:#999999; text-decoration:none;}
/ message box /
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
/ input requirement /
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
.tableShop {
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #b6b7cb;
}
.navLeft {
border-right: 1px solid #b6b7cb;
background-image: url('img/bg_left_column.jpg');
width: 185px; border-left-color:#b6b7cb; border-top-color:#b6b7cb; border-bottom-color:#b6b7cb
}
.navRight {
border-color: #666666;
border-top-width: 4px;
border-top-style: solid;
border-left-width: 4px;
border-left-style: solid;
background-color: #E6E6E6;
width: 185px;
}
.contentsTopics {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.tableListingI {
background-color: #eeeeee;
}
.tableListingII {
background-color: #d0d0d0;
}
.tableBody {
padding: 5px;
}
.poweredby {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
}
.onepxwidth {
width: 1px;
}
A.Menu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
background-color: #2B3744;
}
A.Menu:hover {
color: #00ffff;
text-decoration: underline;
}
TR.headerMenu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
/ background-color: #2B3744; /
}
TR.headerMenu:hover {
color: #0000ff;
text-decoration: underline;
}
.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;}
}
Ich hoffe mit meinem kleinen Problemchen wieder auf kompetente Hilfe zu treffen :-)
Ich habe ein gratis template, das sich einfach an der max. Breite des Explorers ausrnichtet. Ich möchte jedoch die maximale breite des Shops (linke Boxen+Main Content+rechte Boxen) fixieren. Also wenn kleiner, soll der Shop kleiner werden, ab einer gewissen Breite des Fensters soll die Shopbreite fix bleiben.
Danke im voraus, Chris
Anbei die Stylesheet.css aus meinem template:
/ default common settings /
body {
background:white url('img/gradientlightblue.png') repeat-x fixed center bottom; color: black;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.7em;
padding: 0;
line-height: 1.5em; / change this value to 1.25em to reset default /
margin-bottom: 1em; / give room at bottom of page /
cursor: default; / remove text I cursor when mouse is over text /
margin-left:0; margin-right:0; margin-top:0
}
html body {
margin-right: 1px; / IE 5.5 and 6.0 star-hack to remove horizontal scrollbar if possible /
}
a:link, a:viisted {
color: black; / remove standard blue of hyperlinks /
text-decoration: none; / remove underline /
}
a:hover, a:focus { / mouseover and keyboard tab styles /
color: blue;
text-decoration: underline;
}
a img {
border: none; / remove thick blue border of images within links /
text-decoration: none; / remove underline of image links /
}
hr {
height: 1px;
overflow: hidden;
background-color: blue; / give horizontal rulers a standard color /
color: blue;
border: 0px solid blue;
}
abbr, acronym {
cursor: help;
border-bottom: none; / remove dotted underline on quickinfo helps /
}
tr.odd th, tr.odd td {
background-color: white;
}
tr.even th, tr.even td {
background-color: #ccccff; / lightblue /
}
/ generic classes /
.accessibility {
visibility: hidden; / hidden content only for screen readers etc. /
display: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.noUnderline, a.noUnderline {
text-decoration: none !important;
}
a:hover .underlinehover {
text-decoration: underline !important;
}
.noBorder {
border: none;
}
.verticalMiddle {
vertical-align: middle;
}
small, .small {
font-size: 0.85em;
line-height: 1.3em;
}
big, .big {
font-size: 1.4em;
}
select { / restore 9x style = disable xp themeability /
border: 2px inset darkgrey;
}
th { / table header cells /
text-align: left;
}
.content_heading {
font-weight: bold;
font-size: 1.15em;
}
.errorbox {
color: red;
border: 1px solid red;
border-left-width: 4px;
padding: 2px;
padding-left: 5px;
margin-bottom: 1.5em;
background-color: #FFCC99; / very light red /
}
.requiredField {
color: red;
}
/ wholepage /
div#wholepage {
padding-top: 12.5em;
}
/ head /
div#head {
width:98%;
padding: 10px;
text-align: right;
height: 11em;
background-color: white;
poistion: fixed;
top: 0;
left: 0;
z-index: 1000;
}
html div#head { / IE6 hack /
poistion: absolute;
}
div#head div#headlogo {
float: left;
}
div#head div.box {
float: right;
width: 400px;
margin-right: 0;
}
div#head div.box_top {
background: none; / hide the default background in the head /
}
/ navbar on top /
div#navbartop {
poistion: absolute;
width: 98%;
bottom: 0;
left: 0px;
height: 2.5em;
color: blue;
margin: 0;
background-color: #A7D1E5; / medium blue /
background-image: url('img/gradientblue.png');
background-repeat: repeat-x; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0
}
html div#navbartop {
width: 100%;
}
div#navbartop div { / left and right links in navbar /
padding-top: 4px; / vertically centered /
}
div#navbartop div#navtrail { / breadcrumb navigation /
float: left; / allow linkbox on the right to float right /
}
div#navbartop div#navbarlinks { / links on the right side of the bar /
text-align: right;
float: right;
}
div#navbartop a:link, div#navbartop a:viisted { / links in the bar /
color: blue;
}
div#navbargradient {
poistion: fixed;
z-index: 1001;
top: 12.5em;
left: 0;
height: 20px;
width: 100%;
overflow: hidden;
background-image: url('img/gradientwhitetrans.png');
background-repeat: repeat-x
}
html div#navbargradient { / IE6 hack /
display: none; / IE6 doesn't know transparent pngs /
}
/ box properties /
div#left div.box, div#right div.box {
margin-bottom: 1.5em;
}
div.box_top { / header of boxes, containing box title /
font-weight: bold;
font-size: 1.1em;
margin-bottom: 0.25em;
background-color: #FFDD1F; / yellow /
background-image: url('img/gradientyellow.png');
background-repeat: repeat-x;
padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px
}
div.box_content { / content part of boxes /
border: 0px solid black; / black is default color, overwritten below for each box /
padding: 5px;
}
div.box_content_inner { / inner formerly shadowed area /
border: 2px dotted black; / black is default color, overwritten below for each box /
border-color: inherit;
padding: 5px;
}
div.box ul { / item/link list /
margin: 0;
padding: 0;
}
div.box li { / item in list /
margin: 0;
padding: 0;
margin-left: 20px;
padding-left: -5px;
list-style-type: none;
}
div.box li.main { / main item in list /
list-style-image: url('img/arrowminiblue.gif');
}
div.box li.active a {
text-decoration: underline;
}
div.box li.mainactive { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}
div.box li.mainactive a {
text-decoration: underline;
}
div.box li.main:hover { / active main item in list /
list-style-image: url('img/arrowminiyellow.gif');
}
div.box input[type=image] { / submit images, like arrows /
vertical-align: middle;
}
/ left side /
div#left {
width: 17em;
poistion: absolute;
left: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}
div#left div.box_top, div#right div.box_top {
border-left:1px solid #ffcc00; border-right:1px solid #ffcc00; border-top:1px solid #ffcc00; border-bottom:0px solid #ffcc00;
}
div#left div.box_content, div#right div.box_content {
border-left:1px solid #91C6DF; border-right:1px solid #91C6DF; border-top:0px solid #91C6DF; border-bottom:1px solid #91C6DF; margin-top:-0.27em;
background-color: white;
background-image: url('img/gradientlightbluesmall.png');
background-repeat: repeat-x;
background-poistion: center bottom;
}
html div#left { / IE 6 hack /
poistion: static;
float:left;
margin-left: 10px;
}
/ right side /
div#right {
width: 13.6em;
poistion: absolute;
right: 10px;
padding-top: 1px;
padding-bottom: 5em;
margin-top: 1.3em;
}
/ box specific /
div#box_login input#input_loginbox_email {
width: 95%; / so it won't go over the right page border /
}
div#box_login input#input_loginbox_pwd {
width: 5.6em; / so the login button will go right of it /
}
div#box_newsletter input#input_newsletter_email {
width: 95%; / so it won't go over the right page border /
}
/ main content /
div#content {
margin: 1.3em 15.5em 0em 19.5em;
min-height: 145em;
}
/ IE 5.5 hack because IE doesn't know to deal with min-height /
html div#content {
height: 145em;
}
div#content div.box_top { / boxes in main content area /
font-size: 1.25em;
padding-bottom: 0.35em;
}
div#content div.box_content {
border-width: 0; / no border for boxes in main content area /
}
div#content div.box_content div.box_top { / box-in-box /
font-size: 1.1em;
border-bottom-width: 2px;
}
/ bottom boxes auto-added outside the template /
div.copyright2 {
margin: 0em 15.5em 0em 19.5em;
margin-top: 1em;
border-top: 1px solid #3330BB;
text-align: center;
color: #3330BB;
}
div.copyright2 a:link, div.copyright2 a:viisted {
color: #3330BB;
}
div.copyright2 a:hover, div.copyright2 a:focus {
color: blue;
text-decoration: underline;
}
div.copyright {
padding: 0em 15.5em 0em 19.5em;
text-align: center;
color: #6361D6;
}
div.copyright a:link, div.copyright a:viisted {
color: #6361D6;
}
div.copyright a:hover, div.copyright a:focus {
color: blue;
text-decoration: underline;
}
div.parseTime {
margin: 0em 15.5em 0em 19.5em;
text-align: center;
color: gray;
}
/ page specific /
/ main_content.html = index.php /
span.greetUser {
color: blue;
font-weight: bold;
}
div.products_overview_item { / a single product box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin:0 1em 2em 0; / give room /
width: 25.1em;
height: 13em;
}
div.products_overview_item img.product_image { / thumbs in these boxes /
float: left;
}
/ product_listing /
div#modbox_product_listing table {
border-collapse: collapse;
}
div#modbox_product_listing td {
border: 0px solid grey;
border-top-width: 1px;
}
a.pageResults {
color: #0000ff;
text-decoration: underline;
}
a.pageResults:hover {
color: #0000ff; / blue /
background-color: #ffff33; / lightyellow /
}
/ category_listing /
div.categories_item { / a single category box in an overview, e.g. the home page /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}
html div.products_overview_item { / IE6 hack /
height: 12em;
}
/ shopping_cart.html = shopping_cart.php /
div#modbox_order_details table {
border-collapse: collapse;
}
div#modbox_order_details th {
border-bottom: 1px solid grey;
}
div#modbox_order_details td {
border-color: grey;
border-width: 0 1px 1px 0;
}
div#modbox_order_details td th { / product attributes /
border: 0px solid black !important;
}
/ advanced_search /
div#modbox_advanced_search th, div#modbox_advanced_search td {
vertical-align: top;
}
/ reviews.php /
div#modbox_reviews div.productsImage {
float: left;
}
/ product_reviews.php /
div#modbox_product_reviews tr.odd td {
background-color: white;
}
div#modbox_product_reviews tr.even td {
background-color: #ccccff; / lightblue /
}
/ product_reviews_info.php /
/ products_new.php /
div#modbox_products_new table {
border-collapse: collapse;
}
div#modbox_products_new td {
border: 0px solid grey;
border-top-width: 1px;
}
/ product_info.php /
div#modbox_product_info div.submodule {
padding: 1em 0;
border-bottom: 1px solid lightgrey;
}
div.cross_selling_item { / a single product box in a cross-selling overview /
float: left; / display the next box right of this one, if possible /
margin: 0.5em 1em 2em 0; / give room /
width: 17em;
min-height: 12em;
}
/ specials.php /
/ istemap.html = media/content/istemap.php /
/ account.php /
/ account_edit.php /
/ ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++ /
.boxText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.boxTextBG {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #f1f1f1;
}
.boxTextBGII {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background-color: #FFCC99;
}
.boxTextPrice {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #FF0000;
}
.errorBox {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
font-weight: bold;
background-color: #ffb3b5;
}
.gvBox {
font-family : Verdana, Arial, sans-serif;
font-size : 14px;
font-weight: bold;
border-color: #FFFFFF;
border: 1px solid;
background-color: #ffb3b5;
}
.stockWarning {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #cc0033;
}
.productsNotifications {
background-color: #f2fff7;
}
.orderEdit {
font-family : Verdana, Arial, sans-serif;
font-size : 10px;
color: #70d250;
text-decoration: underline;
}
img{
border:0px none;
}
FORM {
display: inline;
}
TR.header {
background-color: #ffffff;
}
TR.headerNavigation {
background: #F6F6F6;
}
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
background-color: #F6F6F6;
}
A.headerNavigation {
color: #000000;
}
A.headerNavigation:hover {
color: #000000;
}
TD.conditions {
background-color: #FFCCCC;
}
A.confirmationEdit {
color: #009933;
font-style: italic;
}
A.confirmationEdit:hover {
color: #009933;
font-style: italic;
text-decoration: underline;
}
TR.headerError {
background-color: #ff0000;
}
TR.headerMessage {
background-color: #00CC33;
}
.moduleHeading {
font-family: Verdana, Arial, sans-serif;
font-size: small;
font-weight: bold;
padding-bottom: 10px;
}
TD.headerError {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}
TR.headerInfo {
background: #00ff00;
}
TD.headerInfo {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
background: #00ff00;
color: #ffffff;
font-weight: bold;
text-align: center;
}
TR.footer {
background: #bbc3d3;
}
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #F6F6F6;
color: #000000;
font-weight : bold;
border-bottom: 1px solid;
border-color: #b6b7cb;
}
.infoBox {
}
.infoBoxContents {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.infoBoxNotice {
background: #FF8E90;
}
.infoBoxNoticeContents {
background: #FFE6E6;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.infoBoxHeading {
font-weight:bold;
height:17px;
color: #000000;
}
TD.infoBoxHeading_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: white;
height:17px;
color: #000000;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
border-right: 4px solid;
background: white;
border-color: white;
}
TD.infoBox_right, SPAN.infoBox_right {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: white;
}
TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
background: #f8f8f9;
}
TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
background: #f8f8f9;
}
TABLE.productListing {
border: 1px;
border-style: solid;
border-color: #b6b7cb;
border-spacing: 1px;
}
.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color: #FFFFFF;
font-weight: bold;
}
TD.productListing-data {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.pageHeading, DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
TR.subBar {
background: #f4f7fd;
}
TD.subBar {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
}
TD.main, P.main {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
TD.smallText, SPAN.smallText, P.smallText {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
TD.accountCategory {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #aabbdd;
}
TD.fieldKey {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
TD.fieldValue {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
TD.tableHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.newItemInCart {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #ff0000;
}
CHECKBOX, INPUT, RADIO, SELECT {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
TEXTAREA {
/ width: 100%; /
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
SPAN.underline {
text-decoration: underline;
}
TABLE.formArea {
background: #f1f1f1;
border-color: #cccccc;
border-style: solid;
border-width: 1px;
}
TD.formAreaTitle {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
SPAN.markProductOutOfStock {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #c76170;
font-weight: bold;
}
SPAN.productSpecialPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productOldPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
text-decoration: line-through;
}
SPAN.errorText {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
}
SPAN.productDiscountPrice {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-weight: bold;
}
.smallHeading {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: Black;
}
.moduleRow {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
background-color: #E6E6E6;
border: 1px solid;
border-color: #E6E6E6;
}
.moduleRowOver {
background-color: #D7E9F7;
border: 1px solid;
border-color: #ffffff;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
}
.moduleRowSelected { background-color: #E9F4FC; }
.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
/ istewide font classes /
/ Note: heading<Number> equals <font size="Number"> /
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }
/ Sitemap Tables /
.istemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF;
background-color: #666666;
padding-top: 2px; padding-bottom: 2px;}
.istemap_heading a {color:#FFFFFF;}
.istemap_heading a:hover {color:#CCCCCC; text-decoration:none;}
.istemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background-color: #E6E6E6; padding: 2px 2px;}
.istemap_sub a {color:#000000;}
.istemap_sub a:hover {color:#999999; text-decoration:none;}
/ message box /
.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }
/ input requirement /
.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }
.tableShop {
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #b6b7cb;
}
.navLeft {
border-right: 1px solid #b6b7cb;
background-image: url('img/bg_left_column.jpg');
width: 185px; border-left-color:#b6b7cb; border-top-color:#b6b7cb; border-bottom-color:#b6b7cb
}
.navRight {
border-color: #666666;
border-top-width: 4px;
border-top-style: solid;
border-left-width: 4px;
border-left-style: solid;
background-color: #E6E6E6;
width: 185px;
}
.contentsTopics {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.tableListingI {
background-color: #eeeeee;
}
.tableListingII {
background-color: #d0d0d0;
}
.tableBody {
padding: 5px;
}
.poweredby {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
}
.onepxwidth {
width: 1px;
}
A.Menu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
background-color: #2B3744;
}
A.Menu:hover {
color: #00ffff;
text-decoration: underline;
}
TR.headerMenu {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ffffff;
font-weight : bold;
/ border-bottom: 1px solid; /
/ border-color: #b6b7cb; /
/ background-color: #2B3744; /
}
TR.headerMenu:hover {
color: #0000ff;
text-decoration: underline;
}
.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;}
}