* {margin:0; padding:0; border:0; color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.95em;} body {text-align:center;} #wholePageContentHolder {width:780px; margin:40px auto 10px auto; text-align:left;} #header {float:left; width:780px; height:130px;} #topLinks {float:left; width:780px; text-align:right; font-size:0.8em; font-weight:bold;} #topLinks a:hover {color:#333333;} #logo {float:left; margin-top:10px; display:inline;} #menu {float:left; width:780px; height:20px; margin-top:20px; display:inline; background-image:url(../images/layout/icon-box-bg.gif); background-repeat:repeat-x; background-position:bottom;} #menu table {background-color:#FFFFFF;} #menu table td {text-align:center; padding:0px;} #menu table a {font-size:1.2em;} #menu table a:hover {color:#333333;} #iconBox {float:right; width:53px; text-align:right; height:60px; margin-top:-20px; display:none;}/* When adding the icons, change to display:inline; There's a 150px wide image called "Copy of icons.gif" with the other logos on. Use that one once permission is granted. Remember to change the width of #menu to 723px if using one fair trade logo, or 630px if the other one(s) too and increase the width of this box back to 150px.*/ #topBox {float:left; width:774px; border:1px solid #E3E3E3; padding:3px; clear:both; margin-top:-5px; display:inline;} #shopContentLeft {float:left; border:1px solid #E3E3E3; width:268px; margin:3px 0px 3px 0px; padding-top:15px;} #shopContentLeft h1 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.15em; line-height:150%;} #shopContentLeft h2 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.1em; line-height:150%;} #shopContentLeft p {margin:0px 10px 15px 10px; line-height:150%;} #shopContentLeft div.hr {width:258px; height:0px; border-top:1px solid #E3E3E3; margin:0px 0px 15px 5px;} #shopContentRight {float:right; width:510px; margin-top:3px;} .boxOneThird {float:left; width:165px; margin:0px 0px 3px 3px; border:1px solid #E3E3E3;} .boxOneThird h1 {width:159px; margin:3px; background-color:#A2354A; color:#FFFFFF; text-align:center; height:20px; padding-top:3px;} .boxOneThird div.productThumb {width:167px; text-align:center;} .boxOneThird div.bottomLink { width:154px; background-image:url(../images/layout/bottom-link-bg.gif); background-position:left; background-repeat:no-repeat; height:20px; text-align:right; font-weight:bold; padding-right:5px; padding-top:2px; margin-bottom:3px; margin-left:3px;} .boxOneThird div.bottomLink a {color:#FFFFFF;} .boxOneThird div.bottomLink a:hover {color:#A2354A;} .boxTwoThirds {float:right; width:337px; margin:0px 0px 3px 3px; } .boxTwoThirds h1 {width:311px; margin:3px; height:20px; padding-top:3px; margin:0px 20px 15px 20px;} .boxTwoThirds p {width:311px; margin:3px; height:120px; padding-top:3px; margin:0px 20px 15px 20px; line-height:150%;} .boxTwoThirds div.bottomLink { width:324px; background-color:#999999; height:20px; text-align:right; font-weight:bold; padding-right:5px; padding-top:2px; margin-bottom:3px; margin-left:3px;} .boxTwoThirds p.productOutOfStock {text-align:center; color:#FFFFFF; margin-top:-2px;} #shopContentRight h1.productTitle {font-size:0.9em; margin-top:5px;} #textContentLeft {float:left; border:1px solid #E3E3E3; width:460px; margin:3px 0px 3px 0px; padding-top:15px;} #textContentLeft h1 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.15em; line-height:150%;} #textContentLeft h2 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.1em; line-height:150%;} #textContentLeft h3 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1em; line-height:150%; font-style:italic; font-weight:normal;} #textContentLeft p {margin:0px 10px 15px 10px; line-height:150%; line-height:150%;} #textContentLeft div.hr {width:450px; height:0px; border-top:1px solid #E3E3E3; margin:0px 0px 15px 5px;} #textContentRight {float:right; width:318px; margin-top:3px;} .boxImage {float:left; width:315px; margin:0px 0px 3px 3px; border:1px solid #E3E3E3;} .boxImage img {margin:3px;} #textContentRight h1 {font-size:0.9em; margin-top:5px;} #textContentFull {float:left; border:1px solid #E3E3E3; width:780px; margin:3px 0px 3px 0px; padding-top:15px;} #textContentFull h1 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.15em; line-height:150%;} #textContentFull h2 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1.1em; line-height:150%;} #textContentFull h3 {color:#A2354A; margin:0px 10px 15px 10px; font-size:1em; line-height:150%; font-style:italic; font-weight:normal;} #textContentFull p {margin:0px 10px 15px 10px; line-height:150%; line-height:150%;} #textContentFull div.hr {width:450px; height:0px; border-top:1px solid #E3E3E3; margin:0px 0px 15px 5px;} input {border:1px solid #E3E3E3;} textarea {border:1px solid #E3E3E3;} .boxTwoThirds div.bottomLink input.qty {margin-bottom:3px; position:static; top:0px;} /*All browsers will use these values unless told otherwise*/ .boxTwoThirds div.bottomLink select.option {margin-bottom:3px; margin-right:10px; font-weight:normal; position:static; top:0px;} /*All browsers will use these values unless told otherwise*/ @media screen and (-webkit-min-device-pixel-ratio:0) {/*Safari uses the values inside this block instead of the one above*/ .boxTwoThirds div.bottomLink input.qty {/*position:relative; top:-3px;*/} /*removed this hack, but keeping it here for future reference*/ .boxTwoThirds div.bottomLink select.option {/*position:relative; top:-4px;*/} } /*Hack for safari and chrome. Only those two browsers support the pseudo-class of :nth-of-type()*/ body:nth-of-type(1) .safChromeHack{margin-top:0px !important;} /*Hack for safari and chrome. Only those two browsers support the pseudo-class of :nth-of-type()*/ table.basketTable { width:700px; margin-left:40px;} table.basketTable tr.titleBar td {font-weight:bold; padding-bottom:5px;} table.basketTable tr td {text-align:center;} table.basketTable tr.dark td {background-color:#E2E2E2;} #footer {float:left; width:780px; border:1px solid #E3E3E3; font-size:0.8em;} #footerLeft { float:left; margin:5px 0px 5px 10px;} #footerRight { float:right; margin:5px 10px 5px 0px;} #footer a {text-decoration:none;} #footer a:hover {text-decoration:underline; color:#333333;} #subFooter {float:left; width:770px; font-size:0.8em; margin:10px 0px 10px 0px;} #subFooter #subFooterLeft {width:385px; float:left;} #subFooter #subFooterRight {width:385px; float:left; text-align:right;} a {text-decoration:none;} a:hover {text-decoration:underline;} .centered {text-align:center;}