/* Gday Chef Stylesheet Created by Anagramme October 2006 */ body{margin: 0; padding: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif;} form{margin: 0; padding: 0;} /* ************************************************************* Left Navigation For Cooking Store ************************************************************* */ #leftColumn{width: 170px; padding:0; float: left; text-align: left;} #leftNav{float: left; margin: 10px 0 20px 0; padding: 0; width: 170px; background: url(../images/bg_leftNav.jpg) top right repeat-y;} #leftNav img{ float: left; clear: both;} #leftNav h2{padding: 0 0 0 10px; margin: 0; font-size: 70%; background: url(../images/icon_arrowOrange.gif) 0 10px no-repeat; font-weight: normal; text-transform: capitalize; line-height: 250%; border-bottom: 1px dotted #ccc; clear: both;} #leftNav h2 a{color: #666; text-decoration: none; padding: 0; display: block;} #leftNav a.active{color: #FF6600; font-style: italic;} #leftNav h2 a:hover{color: #FF6600;} #leftNav h3{padding: 0 0 0 15px; margin: 0 0 0 10px; font-size: 70%; text-transform: capitalize; background: url(../images/icon_circle.gif) 0 8px no-repeat; font-weight: normal; line-height: 180%;} #leftNav h3 a{color: #000; display: block; text-decoration: none;} #leftNav h3 a:hover{color: #FF6600; text-decoration: none} /* SLIDING MENU FOR THE CATEGORIES *************************** */ #leftNav ul{ width: 100%; margin: 0; padding: 0; list-style: none; clear: both;} #leftNav li{color: #666; text-decoration: none; display: block; padding: 0 0 0 10px; margin-left: 0; font-size: 70%; background: url(../images/icon_arrowOrange.gif) 0 10px no-repeat; font-weight: normal; text-transform: capitalize; line-height: 250%; border-bottom: 1px dotted #ccc; clear: both;} #leftNav li a{ color: #666; text-decoration: none; clear: both;} #leftNav li a:hover{ color: #FF6600; text-decoration: none;} /* SUB NAVIGATION ************ */ #leftNav ul ul{ margin: 0 0 0 -18px; padding-bottom: 10px;} #leftNav li li{color: #000; display: block; text-decoration: none; padding: 0 0 0 30px; margin: 0; font-size: 100%; text-transform: capitalize; background: url(../images/icon_circle.gif) 20px 8px no-repeat; font-weight: normal; line-height: 180%; border-bottom: none;} #leftNav li li a{color: #666;} #leftNav ul ul ul{ margin: 10px 0 0 0px;} #leftNav li li li{font-size: 100%;} #leftNav .subnode{ clear: both;} /* DHTML SPECIFIC CSS FOR SLIDING MENU *************************** */ #dhtmlgoodies_tree li{list-style-type:none; } #dhtmlgoodies_topNodes{ } #dhtmlgoodies_topNodes ul{display:none;} #dhtmlgoodies_tree .tree_link{ } #dhtmlgoodies_tree img{ display: none;} #dhtmlgoodies_tree a{ } .activeNodeLink{ } /* SEARCH BOX *************************** */ #searchLeft{ width: 170px; background: url(../images/bg_search_leftNav.jpg) 0 0 no-repeat; height: 70px; clear: both; padding: 10px 0 0 0;} #searchLeft h2{ border-bottom: none; color: #666; line-height: normal; padding: 0 0 2px 10px; margin: 0; font-size: 70%; background: url(../images/icon_arrowOrange.gif) 0 3px no-repeat; font-weight: normal; text-transform: capitalize; line-height: normal;} #searchLeft select{ font-size: 70%; color: #666;} #searchLeft .submit{ background: url(../images/btn_go.gif) 0 2px no-repeat; border: 0; width: 20px; height: 22px; cursor: pointer; width: 35px} /* ************************************************************* Advanced Search ************************************************************* */ .advancedSearchBlock{width: 470px; display: inline; text-align: left; margin-bottom: 10px;background-color: #FFFBFB; border: 1px dashed #FFCACA; height: auto; float:left;} .advancedSearchBlock .title{ padding: 5px 20px;background-color: #FFFBFB; border-bottom:1px dashed #FFCACA;font-size: 100%; color:#666; text-transform: capitalize; width:495px; display:block; margin-bottom:5px; font-weight:bold;} .advancedSearchBlock p {padding:0 20px;} .advancedSearchBlock p label{width: 170px; float: left; font-weight:bold;} /* ************************************************************* Cooking Store Product List + Product Detail Page ************************************************************* */ /* ************************************************************* FRIEDA - BUY PAGE ************************************************************* */ .productList{ float: left; width: 480px; margin: 0 0 15px 10px; padding: 20px 0 0 0; border-top: 1px solid #FF99FF;} .productList .img{ float: left; clear: none; display: block; margin: 0 20px 20px 0;} .productList h2{ float: left; width: 315px; clear: none; display: inline; margin: 0 0 5px 0; padding: 0; font-size: 90%;} .productList p{ float: left; width: 315px; margin: 5px 0 0 0;} /* #productListWrap{width: 100%; float: right;} .productList{width: 145px; float: left; margin: 0 0 15px 15px; display: inline;} .productList img{float: left; clear: both;} .productList .productText{ width: 145px; padding: 0; background-color: #F7F7F7; border-left: 1px dotted #ccc; border-right: 1px dotted #ccc; border-bottom: 1px dotted #ccc; float: left; clear: both;} #productListWrap .productList h2{font-size: 90%; margin: 20px 0 10px 0; padding: 0; clear: both; height: auto; color:#663399; float: left;} .productList h2 a{color: #663399; display: block; padding: 0; text-decoration: none;} .productList h2 a:hover{color: #FF3399;} .productList p{color: #999999; font-size: 70%; margin: 0; padding: 0; line-height: 130%; float: left; clear: both;} .productList dl{width: 183px; margin: 0; padding: 0;} .productList dt{width: 88px; float: left; padding: 0; margin: 0 0 0 10px; text-align: left; font-size: 90%; color: #669900; font-weight: bold; display: inline;} .productList dd{width: 70px; float: right; padding: 0; margin: 0 10px 0 0; text-align: right; font-size: 70%; color: #666; display: inline;} .productList dd span{font-size: 110%; text-decoration: line-through; } */ #productDetailLeft{ float: left; width: 260px; margin: 10px 0 0 0;} #productDetailLeft .mainPic{ border: 1px solid #ccc;} #productDetailLeft .thumb{ border: 1px solid #ccc; margin: 0 0 0 1px;} #productDetailBody{ float: left; width: 310px; margin: 10px 0 0 0;} #productDetailBody h2{ color: #FF6600; font-size: 95%; font-style: italic; margin: 0 0 10px 0; padding: 0;} #productDetailBody h3{ color: #669900; margin: 0; padding: 0; font-size: 80%;} #productDetailBody p{ color: #666; font-size: 70%; margin: 0 0 15px 0; padding: 0; line-height: 160%;} #productDetailBody p a{ color: #FF6600;} #productDetailBody p a:hover{ color: #669900;} #productDetailBody .intro{ font-size: 80%; font-weight: normal; font-style: italic; line-height: 160%;} #productDetailBody ul{ list-style-type: none; margin: 5px 0 10px 10px; padding: 0;} #productDetailBody li{ font-size: 70%; color: #666; line-height: 180%; background: url(../images/icon_arrowOrange.gif) 0 7px no-repeat; padding: 0 0 0 15px; margin: 0;} .footnote{color: #999999; margin: 0; padding: 0;} #productDetailRight{ float: right; width: 200px; text-align: right;} #addOptions{ width: 190px; background: url(../images/bg_productDetailOptions.jpg) 0 0 repeat-y; text-align: left; float: right; margin: 0 0 20px 0;} #addOptions img{float: left; clear: both;} #addOptions h2{ color: #FF6600; font-size: 80%; background: url(../images/icon_clip.gif) 0 0 no-repeat; font-weight: normal; padding: 0 0 0 20px; margin: 0 0 8px 25px; clear: both;} #addOptions h3{ color: #669900; font-size: 150%; text-align: right; clear: both; padding: 0 0 0 0; margin: 0 30px 0 0;} #addOptions h3 span{color: #000000; text-transform: uppercase; font-size: 40%; clear: both; font-weight: normal; display: block;} #addOptions h4{ color: #FF6600; font-size: 70%; text-align: right; font-weight: normal; clear: both; padding: 0; margin: 0 30px 0 0; text-decoration: none;} #addOptions h4 span{text-transform: uppercase; font-size: 160%; text-decoration: line-through; font-weight: bold;} #addOptions form{margin: 0 0 0 25px; padding: 0;} #addOptions select {color: #999999; font-size: 70%; margin: 7px 0 0 0; width: 135px;} #addOptions input{color: #999999; font-size: 70%; margin: 0; float: left; display: inline; width: 105px;} #addOptions span.bookingDate{float: left; margin: 0 0 0 5px;} #addOptions p{ font-size: 60%; color: #999999; margin: 0 30px 10px 0; padding: 0; text-align: right; float: right; clear: both; display: inline; width: 140px;} #addOptions .date{ font-size: 60%; color: #999999; float: left; clear: none; margin: 7px 0 0 5px;} #addOptions .dateInput{ margin-top: 7px;} #addOptions .submit{ background: url(../images/btn_addToCart.jpg) 0 0 no-repeat; width: 115px; border: none; height: 35px; width: 115px; cursor: pointer; float: right; margin: 0 25px 0 0;} #addOptions #alertBox{ width: 140px; margin-left: 19px; padding: 5px; display: inline;} #addOptions #alertBox a{ color: #FF6600;} .btnMoreInfo{ float: right; margin: 0 25px 0 0;} /* ************************************************************* Product Detail ************************************************************* */ #productImage{width: 430px; float: left;} #productImage img{border: 1px solid #E9B460; float: left;} #productDetail{width: 340px; float: left;} #productDetail h1{font-size: 130%; color: #996600; font-weight: normal; margin: 0 0 10px 0; padding: 0;} #productDetail h2{font-size: 110%; color: #CC9900; font-weight: normal; margin: 0; padding: 0;} #productDetail p{font-size: 70%; color: #996600; line-height: 150%; margin: 0 0 5px 0;} #productDetail span{color: #CC9900;} #productDetail .dottedLine{border-bottom: 1px dotted #CC9900; margin-bottom: 20px;} #extraImages{ float: left; margin: 0 0 20px 0;} #extraImages h2{font-size: 70%; color: #996600; font-weight: normal; margin: 10px 0 5px 0; padding: 0;} #extraImages img{margin: 2px 0 0 2px;} #mightAlsoLike{width: 770px; clear: both; margin: 60px 0 30px 0;} #mightAlsoLike h2{font-size: 70%; color: #996600; font-weight: normal; margin: 0 0 5px 0; padding: 0;} #mightAlsoLike img{border: 1px solid #E9B460; float: left; margin: 0 0 30px 30px; display: inline;} /* ************************************************************* Page Navigation ************************************************************* */ #pageNav {width: auto; padding: 0; margin: 0 0 0 0; float: right; position:relative; } #pageNav ul{width: auto; padding: 0; margin: 0; list-style-type: none; display: inline;} #pageNav li{padding: 0 0 10px 0; margin: 0; float: left; font-size: 70%; text-transform: capitalize; color: #FF6600;} #pageNav li a{text-decoration: none; color: #000;} #pageNav li a:hover{text-decoration: none; border-bottom: 1px solid #666; color: #FF6600;} #pageNav .left{padding: 2px 10px 0 13px; background: url(images/icon_arrowLeft.gif) 0 4px no-repeat;} #pageNav .brandsList{padding: 2px 10px 0 13px;} #pageNav .right{padding: 2px 13px 0 10px; background: url(images/icon_arrowRight.gif) right 4px no-repeat;} #pageNav select{padding: 0; margin: 0; font: 90% Arial, Helvetica, sans-serif;} /* ************************************************************* ACCOUNT ************************************************************* */ #account{margin: 10px 0 20px 20px; text-align: left; width: 470px; float: left; text-align: left; display: inline;} #account h1 a{ float: right; font-size: 55%; font-style: normal; letter-spacing: normal; color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 3px no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 0 0 0 0;} #account p a{ color: #FF6600; text-decoration: underline;} #account p a:hover{ color: #669900; text-decoration: underline; border: none;} #account .text{width: 250px; color: #666;} #account textarea{width: 250px; font-size: 100%; color: #666; font-family: Arial, Helvetica, sans-serif;} #account p label{width: 170px; float: left; } #account input, #account select{ font-size: 80%; color: #666;} #account #reset{float: right; margin-right: 30px;} #account dl{font-size: 75%; clear: both; padding: 0 0 30px 0; color:#333333;} #account dt{float: left; width: 150px; margin: 0 0 5px 0; padding: 0;} #account dd{float: left; width: 110px; margin: 0 10px 5px 0; padding: 0;} #account dd span{float: right;} #account .accountTable {width:100%; border:1px solid #E1E1E1; color:#333; } #account .accountTable td{font-size:75%; border:1px thin #FFF;} #account .accountTable th.grey {font-size:75%; background-color:#666; color:#FFFFFF;height:36px; text-transform:uppercase;} #account .accountTable td{ background-color:#F5F5F5;padding:5px; } /* #errorList, #account ul, .bodyList ul{font-size: 70%; color: #663399;} #errorList, #account ul, .bodyList ul{line-height: 180%;} #errorList a, #account a, .bodyList a{color: #000; text-decoration: none;} #errorList a:hover, #account a:hover, .bodyList a:hover{color: #FF0000; border-bottom: 1px solid #FF0000;} */ #account ul { list-style: none; margin: 0; padding: 0;} #account li{padding: 0 0 0 20px; margin: 0; height: 2em; background: url(../images/icon_accountList.gif) 0 5px no-repeat; color: #666;} #account .footnote{ font-size: 70%;} /* ************************************************************* ACCOUNT LOGIN ************************************************************* */ #accountList { width: 175px; padding: 0 0 0 0; margin: 0; float: left; display: inline;} #accountList h2{ font-size: 120%; color: #660099; margin: 12px 0 10px 0; display: inline; float: left; padding: 0; font-weight: normal;} #accountList a{ color: #660099; text-decoration: none;} #accountList a:hover{ color: #FF0099; text-decoration: underline;} #accountList ul{width: 190px; clear: both; padding: 0; margin: 0;} #mainContent #accountList li, #accountList li{font-size: 75%; line-height: 200%; padding: 0 0 0 30px; list-style: none;} #mainContent #accountList .orders, #accountList .orders{ background: url(../images/icons/icon_orders.gif) 3px 3px no-repeat;} #mainContent #accountList .pass, #accountList .pass{ background: url(../images/icons/icon_pass.gif) 0 3px no-repeat;} #mainContent #accountList .param, #accountList .param{ background: url(../images/icons/icon_param.gif) 0 3px no-repeat;} #mainContent #accountList .logout, #accountList .logout{ background: url(../images/icons/icon_adminLogout.gif) 0 3px no-repeat;} #mainContent #accountList .admin, #accountList .admin{ background: url(../images/icons/icon_admin.gif) 0 3px no-repeat; padding-left: 35px; font-size: 80%; margin-top: 15px;} #mainContent #accountList .admin a, #accountList .admin a{ font-weight: bold;} /* Login Area ************************ #deliveryAdd, #billingAdd{width: 235px; height:165px; display: inline; text-align: left; margin-bottom: 10px;} #deliveryAdd h2, #billingAdd h2{padding: 0; margin: 0 0 10px 0; font-size: 100%; text-transform: capitalize; color: #FF0000; width: auto;} #deliveryAdd h2 a, #billingAdd h2 a{font-weight: normal; text-decoration: none; margin-left: 10px; color: #000; text-transform: uppercase; font-size: 70%;} #deliveryAdd h2 a:hover, #billingAdd h2 a:hover{text-decoration: underline;} #loginBlock, #loginNewBlock{width: 340px; display: inline; text-align: left; margin-bottom: 10px; } #loginNewBlock{height: 160px; float: left; padding: 20px; background: url(../images/bg_loginNewBlock.gif) 0 0 no-repeat;} #loginBlock{ background-color: #FFECEC; float: right; height: 160px; padding: 20px; background: url(../images/bg_loginBlock.gif) 0 0 no-repeat;} #loginBlock h2, #loginNewBlock h2{padding: 0; margin: 0 0 10px 0; font-size: 100%; text-transform: capitalize; width: auto;} #loginNewBlock h2{color: #FF9900;} #loginBlock h2{color: #669900;} #loginBlock .text{width: 200px;} #loginBlock p, #loginNewBlock p{ font-size: 70%; color: #666; padding: 0 0 5px 0; margin: 0; line-height: 170%;} #loginBlock p label{width: 120px; float: left; clear: both;} #loginBlock p a{text-decoration:none; font-size:80%; color: #FF6600; border-bottom: 1px dashed #FF6600; font-weight:bold;} #loginBlock p a:hover{ color: #669900; border-bottom: 1px dashed #669900;} .columnBlock,.adressBlock{ float: left; border: 1px solid #E1E1E1; width: 210px; padding: 2px 0 0 10px; display: inline; text-align: left; margin: 0 10px 10px 0; height: 200px;} .adressBlock{ background-color:#F2F2F2;} .adressBlock p a{ color: #fff; text-decoration: none;} .columnBlock h2{padding: 0; margin: 0 0 10px 0; font-size: 100%; text-transform: capitalize; color: #FF0000; width: auto;} .columnBlock .btnBack{font-size: 70%} .columnBlock .btnContinue2{font-size: 70%;} .columnBlock p, .adressBlock p { color:#333; font-size:75%;} .columnBlock .moduleRow{ background-color:#FFF;padding:5px;text-transform:uppercase; color:#333;height:140px;} .columnBlock .moduleRowSelected{background-color:#F4F4F4; font-weight:bold; text-transform:uppercase; color:#333; padding:5px;height:140px;} .columnBlock .moduleRowOver{ background-color:#F4F4F4;padding:5px;text-transform:uppercase;color:#333;height:140px;} #deliveryAdd{border: 1px solid #FFCACA; float: left; padding: 0 20px 0 20px;} #billingAdd { background-color: #FFECEC; border: 1px solid #FFCACA; float: right; padding: 0 20px 0 20px;} #checkout {margin: 10px 0 0 0; clear: both; float: right;} #checkout ul{list-style: none; padding: 0; margin: 0;} #checkout li{float: left; display: inline; padding: 0; margin: 0 0 0 10px; height: 2em;} #orderHistory dl{font-size: 75%; clear: both; padding: 0 0 20px 0; border-bottom: 1px dashed #fff; overflow: auto;} #orderHistory dt{float: left; width: 100px; margin: 0 0 5px 0; padding: 0; font-weight: bold;} #orderHistory dd{float: left; width: 120px; margin: 0 0 5px 0; padding: 0;} */ /* ************************************************************* =Cart - Shopping Cart Process - Checkout, Create Account, Login ************************************************************* */ #bodyContent, #orderHistory, #searchResults{margin: 0 0 20px 0; text-align: left; width: 470px; float: left; text-align: left; display: inline;} #shoppingCart, #orderConf, #shipping{margin: 0 0 20px 0; text-align: left; width: 770px; float: left; text-align: left;} /* #orderConf h1, #bodyContent h1, #account h1, #shipping h1, #orderHistory h1, #searchResults h1{font-size: 130%; margin: 0 0 10px 0; background: url(../images/icon_accountTitle.gif) 0 2px no-repeat; padding: 0 0 0 25px; clear: both; color: #669900; font-weight: normal;} #shoppingCart h1{font-size: 130%; text-transform: capitalize; margin: 10px 0 10px 0; background: url(../images/icon_basketEmpty.gif) 0 4px no-repeat; padding: 0 0 0 25px; clear: both; color: #669900;} #orderConf p, #bodyContent p, #account p, #shipping p, #orderHistory p, #searchResults p{line-height: 170%; font-size: 75%; color: #666;} */ #orderConf h2, #bodyContent h2, #account h2, #shipping h2{font-size: 90%; margin: 20px 0 10px 0; padding: 0; clear: both; color: #FF6600;} #orderConf h2 a, #bodyContent h2 a, #account h2 a, #shipping h2 a{font-size: 70%; font-weight: normal; text-transform: uppercase; text-decoration: none;} #bodyContent .moduleRowSelected{background-color:#FFCD82; font-weight:bold; text-transform:uppercase;} #bodyContent .moduleRow{ background-color:#FFD99F;padding:5px;text-transform:uppercase; color:#333;} #bodyContent .moduleRowSelected{background-color:#FF9900; font-weight:bold; text-transform:uppercase; color:#FFFFFF; padding:5px;} #bodyContent .moduleRowOver{ background-color:#FF9900;padding:5px;text-transform:uppercase;color:#FFFFFF;} .markProductOutOfStock { background-color:#FF6600; padding:3px 10px; font-size:130%; font-weight:bold; color:#FFF; font-weight:bold; } /* Out of stock*/ #outofStock{width:100%; clear:both; margin-top: 10px;} #outofStock h1{padding: 5px 0 0 0; margin: 0 0 10px 0; font-size: 110%; color: #FF0000;} #outofStock p{font-size: 80%; color: #333; font-style: italic; margin: 0; padding: 0;} #outofStock span{ background-color:#FF6600; padding:3px 10px; font-size:130%; font-weight:bold; color:#FFF; font-weight:bold; font-style: normal;} /* ************************************************************* CONTENT PAGES - Catering, Cooking Classes, Services, Recipes ************************************************************* */ #contentBlock{width: 370px; float: left; margin: 0 0 10px 20px; padding: 0; display: inline;} #contentBlock h1{font-size: 100%; margin: 10px 0 10px 0; padding: 0; font-weight:bold; color: #FF6600;} #contentBlock h1 span{font-size: 65%; text-transform:capitalize; float: right; padding: 8px 10px 0 0;} #contentBlock h2{font-size: 85%; margin: 0 0 5px 0; padding: 0; font-weight:bold; clear: both; color: #660099; text-transform: none;float: left;} /* took float: left; our of above h2 - note just in case there's a problem. */ #contentBlock h2 span{font-size: 80%; float: right; padding: 2px 0 0 10px; margin: 0; color: #660099;} #contentBlock h2 a{text-decoration: none; color: #660099; border-bottom: 1px dashed #660099;} #contentBlock h2 a:hover{border-bottom: 1px solid #669900; color: #669900;} #contentBlock h3{font-size: 70%; float: right; padding: 0; margin: 0; color: #660099;} #contentBlock p{ clear: both; font-size: 70%; font-weight: normal; line-height: 180%; color: #666; margin-bottom: 20px;} #contentBlock p a{color: #FF6600;} #contentBlock p a:hover{color: #669900;} #contentBlock .intro{ font-size: 80%; font-weight: normal; font-style: italic; line-height: 180%; color: #669900; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC;} #contentBlock ul{list-style-type: none; margin: 0 0 20px 10px; padding: 0; clear: left;} #contentBlock ul li{margin:0; padding: 0 0 0 15px; background: url(../images/icon_arrowOrange.gif) 0 6px no-repeat; font-size: 70%; color: #666; line-height: 180%;} #contentBlock ol li{margin:0; padding: 0; font-size: 70%; color: #666; line-height: 180%;} #contentBlock li a{color: #FF6600; text-decoration: none;} #contentBlock li a:hover{color: #fff; text-decoration: none; background-color: #FF6600;} #contentBlock #catering li{background: url(../images/icon_arrowOrange.gif) 0 9px no-repeat; line-height: 220%;} /* CATERING MENUS */ #catering dl{clear: both; margin: 10px 0 10px 0; padding: 0; float: left; clear: both;} #catering dt, #catering dd{ padding: 0; font-size: 70%; width: 100%;} #catering dt{color: #000; float: left; clear: both; width: 140px; margin: 0 0 8px 0;} #catering dd{color: #666; width: auto; margin: 0 0 8px 0;} #catering dt a {color: #666;} #catering dt a:hover {color: #fff; text-decoration: none; background-color: #FF6600;} /* POPUP WINDOW MENUS */ #contentBlock h4{font-size: 75%; font-weight: normal; clear: both; padding: 0; margin: 0; color: #FF6600; width: 100%;} #contentBlock h5{font-size: 70%; font-weight: normal; clear: both; padding: 0; margin: 0; color: #000; text-transform: uppercase; text-decoration: underline; width: 100%;} #contentBlock p.notice{ color: #000; font-size: 65%; width: 100%; padding: 0; margin: 0 0 10px 0;} #menuLogo { float: left; width: 200px; margin: 0 0 20px 0;} #menuLinks { float: right; width: auto; text-align: right;} #menuLinks .printMenu{background: url(../images/icon_print.gif) 3px 3px no-repeat; } #menuLinks .closeMenu{background: url(../images/icons/icon_logout.gif) 0 4px no-repeat; } #menuLinks ul{margin: 0 0 0 0; padding: 0; list-style: none;} #menuLinks li{font-size: 70%; padding: 0 0 0 17px; line-height: 180%;} #menuLinks li a{ color: #666; text-decoration: none; text-transform: uppercase;} #menuLinks li a:hover{color: #FF6600; text-decoration: underline; background: none;} .menuList dl{clear: both; margin: 0 0 10px 0; padding: 0; float: left; clear: both; width: 370px;} .menuList dt, .menuList dd{ padding: 0; font-size: 70%; color: #666; width: 100%;} .menuList dt{ float: left; clear: both; width: 180px; margin: 0 0 8px 0;} .menuList dd{width: 155px; margin: 0 0 8px 0; float: left;} .menuList dd.menuPrice{ width: 30px;} /* #menuList dt a {color: #666;} #menuList dt a:hover {color: #fff; text-decoration: none; background-color: #FF6600;} */ /* GOURMET BBQ PAGE */ .bbqPic{ float: right; margin: 0 0 20px 0;} #contentBlock a.gourmetLink {font-size: 80%; padding: 0; margin: 2px 0 0 30px; color: #FF6600; border-bottom: none;} #contentBlock a:hover.gourmetLink {color: #669900; border-bottom: none;} /* Right Hand Column */ #rightHandColumn{width: 170px; float: right; margin: 0 0 20px 0; padding: 0; text-align: left;} /* Promo Blocks */ #promoBlock, #promoBlock2{ width: 170px; background: url(../images/bg_productDetailOptions.jpg) 0 0 repeat-y; text-align: left; overflow: auto; float: left; margin: 0 0 20px 0;} #promoBlock img, #promoBlock2 img{float: left; clear: both;} #promoBlock h2{ color: #FF3300; font-size: 80%; font-weight: normal; padding: 0 0 0 20px; margin: 0 0 8px 10px; clear: both; background: url(../images/icon_benefits.gif) 0 0 no-repeat;} #promoBlock, #promoBlock2{ width: 170px; float: left; background: #FFFBE8 url(../images/bg_introPromo.gif) 0 0 repeat-y; margin: 0 0 10px 0;} #promoBlock img, #promoBlock2 img{ float: left; clear: both;} #promoBlock p, #promoBlock2 p{color: #FF3300; font-size: 70%; margin: 0 10px 0 10px; padding: 0; clear: both; line-height: 170%;} #promoBlock ul{margin: 0 0 0 10px; padding: 0; list-style: none;} #promoBlock li{font-size: 70%; color: #FF6600; line-height: 180%; background: url(../images/icon_thumb.gif) 0 3px no-repeat; padding: 0 0 0 20px; margin: 0;} /* Pictures on Right Hand Side in Catering Area */ #productShots{ width: 190px; text-align: left; float: right; margin: 0;} #productShots img { margin: 0 0 20px 0;} /* Book Online */ #bookOnline{background-color: #FFF7E1; border: 1px solid #FF9900; padding: 10px;} #bookOnline h2{ font-size:80%; color: #FF3300; padding: 0; margin: 0;} #bookOnline p{color: #FF3300; padding: 0; margin: 0;} #bookOnline p a{color: #FF3300; border-bottom: 1px dashed #FF3300; text-decoration: none;} #bookOnline p a:hover{border-bottom: 1px solid #FF3300;} #mainNav ul{ margin: 0; padding: 0; list-style: none;} #mainNav li{ display: inline; margin: 0; padding: 0;} #mainNav a{color: #666; text-decoration: none; padding: 0; display: block; padding: 0 0 0 10px; margin: 0 1px 0 0; font-size: 70%; background: url(../images/icon_arrowOrange.gif) 0 10px no-repeat; font-weight: normal; text-transform: capitalize; line-height: 250%; border-bottom: 1px solid #eee; clear: both;} #mainNav a:hover{color: #FF6600;} #mainNav a.active{color: #FF6600; font-style: italic;} #mainNav .noBorder{ border-bottom: none;} #testimonial{width: auto; padding: 10px; background-color: #FFFBE1; border: 1px dashed #FFCC00;} #testimonial p {color: #000000; padding: 0; margin: 0; line-height: 180%;} #testimonial .footnote{ color: #FF6600; font-weight: bold;} #testimonial h2{ color:#FF6600; margin: 0; padding: 0;} /* ************************************************************* BASKET - TABLE ************************************************************* */ .datatable{width:770px;} .datatable2{width:100%;} .searchTable{width:400px;} .datatable, .datatable2, .searchTable{ float:left; border:1px solid #FFF; color:#333333;} .datatable th, .datatable2 th, .datatable td.total, .searchTable td.total{font-size:75%; background-color:#FFF; color: #669900; } .datatable td, .datatable2 td, .searchTable td{ padding:5px; font-size: 75%; color: #000;} .datatable2 td a , .searchTable td a { text-decoration:none; color: #000;} .datatable2 td a:hover, .searchTable td a:hover{ text-decoration:none; color: #FF6600;} .datatable2 input, .searchTable input{width:50px;} .datatable2 .bg{ background-color: #ebebeb;} .datatable2 .bg2{ background-color: #f8f8f8;} .subTotal, .total{-size: 80%; color: #669900;} .price {color: #FF6600; font-weight: bold; font-size: 100%; text-transform: uppercase;} /* Checkout =Process */ #checkoutProcess{text-align: center; margin: 0 0 10px 0; clear: both; padding: 0; width: 768px;} #checkoutProcess ul{height: 30px; padding: 0; margin: 0; border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; list-style-type: none;} #checkoutProcess li{height: 25px; float: left; width: 127px; text-align: center; padding: 5px 0 0 0; margin: 0; color: #666666; font-size: 80%;} #checkoutProcess span{font-size: 150%; font-weight: normal; font-weight: bold; margin-right: 5px;} #checkoutProcess a{ color: #fff; text-decoration: none;} #checkoutProcess a:hover{ font-weight: bold;} #checkoutProcess .completed{background-color: #ccc; color: #fff; border-right: 1px solid #fff;} #checkoutProcess .active{background-color: #FF9900; color: #fff;} #checkoutProcess .notActive{border-right: 1px solid #ccc;} /* ************************************************************* SHIPPING INFORMATION ************************************************************* */ #shippingInformation {} #shippingInformation h2{font-size: 90%; font-weight:normal; margin: 0; padding: 0; clear: both; color: #669900;} #shippingInformation h2 a{font-size: 70%; font-weight: normal; text-transform: uppercase; text-decoration: none;} #shippingInformation .moduleRowSelected{font-weight:bold; text-transform:uppercase;} #shippingInformation .moduleRow{ padding:5px;text-transform:uppercase; color:#333;} #shippingInformation .moduleRowSelected{font-weight:bold; text-transform:uppercase; color:#333; padding:5px;} #shippingInformation .moduleRowOver{ padding:5px;text-transform:uppercase;color:#666; cursor:pointer; } #shippingInformation p{font-size: 75%; color: #555; padding: 0; line-height: 160%;} #shippingInformation p a{color: #000; text-decoration: none; border-bottom: 1px dashed #000;} #shippingInformation p a:hover{color: #555; text-decoration: none; border-bottom: 1px dashed #555;} /* ************************************************************* tellAFriend ************************************************************* */ #tellAFriend{width: 460px; margin-left:10px;} #tellAFriend h1{background: url(images/icon_titleCategory.gif) 0 0 no-repeat; padding: 5px 0 0 35px; margin: 0 0 10px 10px; font-size: 130%; color: #FF0000; display: inline; float: left; width: auto;} #tellAFriend h2{padding: 5px 0 0 15px; margin: 20px 0 10px 0; font-size: 100%; text-transform: capitalize; color: #000;} #tellAFriend fieldset{margin-bottom: 20px; font-size: 70%;} #tellAFriend legend{ color: #FF0000; font-size: 100%; margin: 0;} #tellAFriend label{width: 200px; float: left; marging-right: 0.5em; padding: 0; display: block;} /* ************************************************************* BUTTONS ************************************************************* */ .btnContinue { background: url(../images/btn_continue.gif) 0 0 no-repeat; width: 103px; height: 33px; display: block;} /* ************************************************************* SITEMAP ************************************************************* */ #sitemap { margin: 0 0 20px 20px; float: left;} #sitemap h2{ font-size: 80%; font-weight: normal; background: url(../images/icons/icon_greenArrowBullet.gif) 0 10px no-repeat; padding: 0 0 0 15px; margin: 10px 0 0 0;} #sitemap h2 a{color: #666; border-bottom: none; line-height: 200%;} #sitemap p{margin: 0 0 0 15px; padding: 0; line-height: 180%;} #sitemap p a{background: url(../images/icon_circle.gif) 0 4px no-repeat; padding: 0 0 0 15px; text-decoration: none; color: #000;} /* ************************************************************* Footer ************************************************************* */ #footer{width: 770px; float: left; margin-bottom: 0; background: url(../images/bg_footer.gif) 0 0 repeat-x; text-align: center;} #newsletter {float: left; width: 350px; margin: 0 0 10px 0;} #newsletter img{float: left;} #newsletter .submit{background: url(../images/btn_signUp.gif) 0 0 no-repeat; border: 0; width: 20px; height: 20px; cursor: pointer; width: 60px;} #newsletter form {margin: 5px; padding: 0; float: left;} #newsletter input{ font-size: 75%; color: #666666;} #footerContact {float: right; width: 365px; text-align: right; border-left: 1px solid #D5DEB1; height: 89px;} #footerMainNav ul, #footerSubNav ul{margin: 0; list-style: none; clear: both; width: 770px; text-align: center; padding: 0; margin: 0;} #footerMainNav ul{ border-bottom: 1px solid #ccc;} #footerMainNav li{margin: 0 15px 0 0; padding: 0 0 0 10px; display: inline; font-size: 75%; border-left: 1px solid #666; color: #666;line-height: 250%;} #footerMainNav li a{color: #666; text-decoration: none;} #footerMainNav li a:hover{color: #FF6600; text-decoration: underline;} #footerSubNav { margin: 0 0 10px 0;} #footerSubNav li{margin: 0 15px 0 0; padding: 0 0 0 15px; display: inline; font-size: 65%; border-left: 1px solid #999; color: #999; line-height: 250%;} #footerSubNav li a{color: #999; text-decoration: none;} #footerSubNav li a:hover{color: #FF6600; text-decoration: underline;} #footerSubNav a.staffLogin{color: #FF6600} #footerSubNav a.staffLogin:hover{color: #669900;} #footerSubNav .noBorder, #footerMainNav .noBorder{border-left: 0;} /* ************************************************************* Miscellaneous ************************************************************* */ .lineSpace{width: 100%; height: 1px; margin-bottom: 20px; border-bottom: 1px dotted #cccccc; clear: both; font-size: 0%;} .clearSpace{ float: left; clear: both; width: 200px; font-size: 0; height: 20px;} #noBG{background-image: none;} hr {border: none 0; border-top: 1px dotted #CCC; width: 100%; height: 1px; margin: 0 0 20px 0; clear: both;} /* ************************************************************* ALERT BOX ************************************************************* */ #alertBox{background-color: #FFF4FF; border: 1px dashed #FF6699; color: #663399; padding: 5px 10px; margin: 10px 0 20px 0; text-align: left; float: left; clear: both; width: 430px;} /* #mainContent #alertBox, #account #alertBox{width: 430px; } #mainContent2 #alertBox{width: 748px;} */ #alertBox h2{ margin: 0; padding: 0; font-size: 80%; font-weight: bold; color: #FF3300; border: none;} #bodyWrap #alertBox p{color: #000; font-size: 70%; padding: 0; margin: 0; line-height: 180%; clear: none; float: left; width: 100%;} #alertBox table{border-collapse: collapse; width: 70%; margin: 15px 0 0 15px; border:1px solid #999999;} #alertBox td, #alertBox th{ height: 3em; padding: 5px; border: none; background: none;} #alertBox th{background-color:#fff; color:#333;} #alertBox td{background-color:#FFF; color:#333;} #alertBox th a{color:#333; text-decoration:none;} #alertBoxError{border: 1px solid #FFF; padding: 10px 0; margin: 10px 0 20px 0; background-color: #CA0211; width: 99%; text-align: left; float: left; color:#FFF;} #alertBoxError p{ color: #FFF; font-size:75%;padding: 0; margin: 0 0 0 10px; line-height: 180%; clear: none; width: auto;} #alertBoxError h2{ margin: 0 0 0 10px; padding: 0; font-size: 80%; font-weight: bold; color: #FFF; border: none;} .error{ color:#FF0000; font-weight:700; font-size:90%; text-decoration:blink;} /* Product Detail Alert Box */ #mainContent2 .productInfo #alertBox{width: 330px;} /* NOT SURE IF USED ANYMORE .alertBox{ padding: 10px; background-color: #FFF7D5; border: 1px dashed #FF9900; color: #000000; margin: 0 0 20px 0;} #contentBlock .alertBox h2{ color: #FF6600; padding: 0; margin: 0;} #contentBlock .alertBox p{ color: #000; padding: 0; margin: 0;} */ /**************************************************************/ #contactForm fieldset{border: 1px dotted #bbb; margin: 0 0; padding: 20px 0 20px 20px;} #contactForm legend{font-size: 90%; color: #669900; margin: 10px 0 10px 0; padding: 0 10px; font-weight:bold; text-transform: capitalize; background-color: #fff;} #contactForm p{ margin: 2px 0; height: auto; float: left; width: 400px; color: #000; font-size: 70%;} #contactForm p label{float: left; width: 100px;} #contactForm input{float: left;} #contactForm .text{border: 1px solid #ccc; font-size: 90%; color: #663399; padding: 3px; width: 250px;} #contactForm select{border: 1px solid #ccc; font-size: 90%; color: #663399;} #contactForm textarea{border: 1px solid #ccc; font: 100% Arial, Helvetica, sans-serif; color: #666; padding: 3px; width: 250px;} #contactForm .submit{ background: url(../images/btn_send.gif) 0 0 no-repeat; width: 89px; height: 33px; border: none; cursor: pointer;} #contactForm .smallTxt{font-size: 80%; text-transform: lowercase; width: 350px;} /*----------------------------Suggest Styles--------------------------*/ .suggest_link {background-color: #FFFFFF; padding: 2px 6px 2px 6px;} .suggest_link_over {background-color: #3366CC; padding: 2px 6px 2px 6px;} #search_suggest {position: absolute; background-color: #FFFFFF; text-align: left; border: 1px dashed #CCC;} /*----------------------------End Suggest Styles------------------------*/ /**************************************************************/ #contact{width: 450px; float: left; margin: 0; padding: 0 0 10px 0;} #contact p{font-size: 75%;} #contact h2{padding: 0; margin: 0 0 10px 0; font-size: 100%; text-align:left; text-transform: capitalize; width: auto;color: #FF9900;} #contact .productName{font-size: 75%;color:#669900; font-style:italic;} #contact fieldset{border: 1px dotted #bbb; margin: 0 0; padding: 0 0 0 20px;} #contact legend{font-size: 90%; color: #669900; margin: 10px 0 10px 0; padding: 0 10px; font-weight:bold; text-transform: capitalize; background-color: #fff;} #contact span{color: #666; text-transform: lowercase; font-style: italic;} #contact p{color: #666;} #contact p label{float: left; width: 120px;} #contact input{border: 1px solid #bbb; font-size: 90%; color: #336699; padding: 3px; text-align: left;} #contact select{border: 1px solid #bbb; font-size: 90%; color: #336699;} #contact textarea{border: 1px solid #bbb; font: 100% Arial, Helvetica, sans-serif; color: #336699; padding: 3px;} #contact .btn{font-size: 70%; text-transform: uppercase; background-color: #eee;} #contact .btn:active{border: 1px solid #336699; background-color: #fff;} #contact .btn:hover{border: 1px solid #003366;} #contact .smallTxt{font-size: 80%; text-transform: lowercase; width: 350px;} /* ************************************************************* CHECKOUT / BASKET ************************************************************* */ #mainContent table, #mainContent2 table{ float: left; font-size: 70%; color: #000; width: 100%; margin: 10px 0 20px 0; border: 1px solid #ccc; border-collapse: collapse;} #mainContent th, #mainContent2 th {font-weight: bold; height: 3em; background: #fff url(../images/bg/th_bg.jpg) 0 0 repeat-x; padding: 0 5px 0 5px; font-size: 100%;} #mainContent2 td{ color: #000; padding: 5px; border: 1px solid #ccc;} #mainContent2 tr a{ color: #FF3300; text-decoration: underline;} #mainContent2 tr a:hover{ color: #FF9428; text-decoration: underline;} #mainContent2 td img{ padding: 0 3px 0 0;} #mainContent2 .bg{ background-color: #ebebeb;} #mainContent2 .bg2{ background-color: #f8f8f8;} #mainContent2 .end{ background: url(../images/bg/table_line.gif) 0px 5px repeat-x; height: 10px;} #mainContent2 .end td{ border: none;} #panierOptions{ float: left; width: 350px;} #security{ float: left; width: 350px; clear: left;} /* border: 1px solid #ccc; background-color: #fff; */ #security2{ float: right; width: 350px; clear: left;} #security p, #security2 p{ font-size: 70%; line-height: 140%; width: 100%;} #panierTotal{ float: right; width: 350px; margin-bottom: 20px; clear: both;} .livraisonOption select { font-size: 60%; width: 100%; margin: 0 0 2px 0;} .ht, .htPrice{ font-weight: bold;} .livraison, .ht, .frais, .tva{ background-color: #FEE8FF; font-size: 80%;} .ht { font-weight: bold;} .livraisonOption, .htPrice, .fraisPrice, .tvaPrice{ background-color: #fff; font-size: 100%; padding: 3px;} .frais, .fraisPrice{ color: #FF0099;} .htPrice{ color: #000;} .tva, .tvaPrice{} .total, .totalPrice{ color: #fff; font-size: 90%; font-weight: bold; padding: 3px; background-color: #F17CC9;} .totalPrice {color: #fff; font-size: 110%; background-color: #EC4AB4; font-weight: bold ;} .delete{ font-size: 70%; text-decoration: none; font-weight: normal;} /* CHECKOUT BUTTONS */ .checkoutButtons{float: right; text-align: right; margin: 10px 0 0 0; padding: 0; width: 100%;} .btn_checkout{ float: right; margin: 0; padding: 0;} #bodyMain a.continue { color: #000; background:url(../images/icons/icon_arrow-box.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; } #bodyMain a.continue:hover{ color: #FF6600;} #bodyMain a.return{ color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none;} #bodyMain a.return:hover{ color: #E34000;} #bodyMain .checkoutButtons a.continue, #bodyMain .checkoutButtons a.return{font-size: 70%; margin: 10px 25px 0 0; float: right;} /* LOGIN + JOIN */ #login, #join{ margin: 0 0 30px 0; float: left; width: 100%; clear: both;} /* #login h2, #join h2{ font-size: 150%; color: #FF9900; font-weight: normal; padding: 0 0 10px 0; margin: 0 0 20px 0; float: left; width: 100%; letter-spacing: -0.05em; background: url(../images/bg/title_lines.gif) bottom left repeat-x; font-style: italic;} */ #join p, #login p{ width: 100%;} #bodyBlock a.button{ border-bottom: none;} #bodyBlock a.button:hover{ border-bottom: none;} /* Form not used anymore #login form .text { width: 250px; font-size: 90%; height:15px; border:1px solid #CCCCCC;} #login form .loginText { width: 150px; font-size: 90%; height:15px; border:1px solid #CCCCCC;} #login form label{ width: 160px; float: left} #login form textarea { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;} #login form .submit { background: url(../images/buttons/btn_envoyer.gif) 0 0 no-repeat; border: none; width: 100px; height: 25px; cursor: pointer; margin: 0;} #login form .submit:hover{background: url(../images/buttons/btn_envoyer.gif) 1px 1px no-repeat;} #login form .forgot { line-height: 120%; margin: 5px 0 0 0; font-size: 65%;} #login p a{ color: #999999;} #login .validate { background: url(../images/buttons/btn_validerDemande.gif) 0 0 no-repeat; width: 212px; height: 25px; cursor: pointer; border: none;} #login .validate:hover{background: url(../images/buttons/btn_validerDemande.gif) 1px 1px no-repeat;} */ /* ************************************************************* DELIVERY AND BILLING BLOCKS ************************************************************* */ #deliveryAdd{ margin-right: 10px;} #deliveryAdd, #billingAdd{width: 230px; height:auto; padding: 0 0 5px 0; display: inline; text-align: left; margin: 0 0 10px 0; float: left;} /* #billingAdd { background-color: #fff; border: 1px solid #ccc; float: left;} #deliveryAdd{background-color: #f5f5f5; border: 1px solid #ccc; float: right;} */ #deliveryAdd h2, #billingAdd h2{font-size: 85%; font-weight: bold; color: #660099; padding: 0; clear: both; margin: 0 0 10px 0;} #deliveryAdd h2 a{font-weight: normal; text-decoration: none; margin-left: 10px; color: #660099; text-transform: uppercase; font-size: 70%;} #deliveryAdd h2 a:hover, #billingAdd h2 a:hover{text-decoration: underline;} /*FORM */ #bodyMain #deliveryAdd form, #bodyMain #billingAdd form { clear: both; margin: 0; float: left;} #bodyMain #deliveryAdd p, #bodyMain #billingAdd p{width: 345px; line-height: 150%; margin: 0 0 3px 0; display: inline; float: left; padding: 0; font-size: 70%; clear: both;} #deliveryAdd p a, #billingAdd p a{ color: #FF6600;} #deliveryAdd legend,#billingAdd legend{ color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;} #deliveryAdd label,#billingAdd label{ width: 100px; float: left;} #deliveryAdd .submit,#billingAdd .submit{ margin: 0 0 10px 0;} #deliveryAdd .reset,#billingAdd .reset{ margin: 10px 10px 10px 0;} #deliveryAdd p.footnote,#billingAdd p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;} #deliveryAdd .text, #billingAdd .text{ width: 205px; font-size: 110%; padding: 2px; border:1px solid #CCCCCC;} #deliveryAdd form textarea,#billingAdd form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 290px; height: 100px;} #paymentList { float: left; width: 350px;} #bodyMain #paymentList ul{ list-style: none; margin: 0 0 10px 0; padding: 0; float: left; clear: both;} #bodyMain #paymentList li{ background: none; margin: 0; padding: 0; color: #666666; font-size: 75%; color: #663399; line-height: 200%;} #bodyMain #paymentList textarea{ width: 350px; font: 100% Arial, Helvetica, sans-serif;} #bodyMain #confirmComments{ float: left; width: 440px; background: #fff; clear: both; padding: 10px;} #bodyMain #confirmComments h2{ float: left; margin: 0 10px 0 0; padding: 0; font-size: 80%; color: #000; text-transform: none; font-weight: bold; clear: none; width: auto;} #bodyMain #confirmComments p{ float: left; margin: 0; padding: 0; clear: none; width: 330px;} /* don't think this is used now #checkout h3{background-position: 0 2px; margin: 15px 0 5px 0; display: inline; font-size: 90%;} #checkout p {font-size:70%; margin: 0 0 10px 0; padding: 0; line-height: 160%; float: left; width: 700px;} #checkout .text { width: 250px; font-size: 90%; height:15px; border:1px solid #CCCCCC;} #checkout label{ width: 100px; float: left; clear: none;} #checkout input{ float: left; clear: none;} #checkout { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;} #checkout span{ float: left; clear: none; background-color: #CCCCCC;} /* /* ************************************************************* PROCESSING PAGE - USED FOR PAYPAL ************************************************************* */ #processingWrap{ width: 420px; height: auto; left: 50%; top: 50%; margin: -105px 0 0 -210px; position: absolute; background: url(../images/shape/shape_loadingBar_bg.gif) 0 0 repeat-y; } #processingBody{ width: 355px; float: left; margin: 0 0 0 15px; padding: 10px 15px 0 20px; display: inline;} #processingBody h1{ float: left; display: inline; clear: both; margin: 5px 0 5px 0; padding: 0; font-size: 120%; font-weight: bold; color: #663399; display: inline;} #processingBody p{ float: left; margin: 0 0 0 0; padding: 0; width: 340px; font-size: 75%; clear: both; display: inline; line-height: 160%;} #processingBody img{ float: left; clear: both;} #processingBody .bar{ margin: 10px 0 0 0;} /* ************************************************************* OLD Trunki Stylesheet developed by Jared Telling - Anagram Web Solutions March 2006 ************************************************************* */ html{height: 100%;} body{height: 100%;} * html #wrap{height: 100%;} body, #faq, #oops{background: url(../images/bgStripe.gif) 0 3px repeat-x #fff; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #663399;} #news{background: url(../images/bgStripe_news.gif) 0 6px repeat-x #fff; color: #FF0000;} #test{background: url(../images/bgStripe_test.gif) 0 6px repeat-x #fff; color: #003399;} #res{background: url(../images/bgStripe_res.gif) 0 6px repeat-x #fff; color: #006600;} #press{background: url(../images/bgStripe_fun.gif) 0 6px repeat-x #fff; color: #663399;} #fun{background: url(../images/bgStripe_news.gif) 0 6px repeat-x #fff; color: #FF0000;} #about{background: url(../images/bgStripe_about.gif) 0 6px repeat-x #fff; color: #CC0000;} #trunkiStory{background: none;} /* ************************************************************* =Wrap - Used to Centre Page in the centre ************************************************************* */ #wrap{position: relative; min-height: 100%; width: 900px;} /* ************************************************************* Content area ************************************************************* */ #contentArea{position: relative; float: left; width: 510px; padding-bottom: 130px;} #awards{float: right; margin: 10px 20px 0 0; display: inline;} #flags{float: left; width: 35px; margin: 208px 0 0 0;} #flags img{ margin: 0 0 5px 0;} #mainPic{float: left; margin-top: 20px; width: 330px;} /* Picture of child on left */ #mainPic h1{ font-size: 90%; margin: 0; color: #0099FF; padding: 20px 20px 0 30px;} #mainPic h2{ font-size: 80%; margin: 0; color: #660099; font-weight: bold; padding: 5px 0 0 30px;} #myAccount{float: right; padding: 0; margin: 5px 10px 0 0; width: 500px; font-size: 70%; color: #999999; display: inline; text-align: right;} #myAccount a{color: #999999;} #myAccount .greetUser a{ color:#FF3399; } #myAccount .greetUser2 { color:#FF3399; } #header{float: left; width: 520px; margin: 0 0 10px 0; display: inline; text-align: right; height: auto;} #header .logo{float: left; margin: 0 0 0 10px; display: inline;} #header img{ margin: 15px 0 0 10px;} #nav{float: left; width: 500px; padding-left: 10px;} #nav img{margin-left: 2px;} /* ************************************************************* =links - Company Links e.g. Privacy, Press etc.. ************************************************************* */ #companyLinks{width: 100px; float: left; margin: 365px 0 0 0;} #companyLinks ul{margin: 0; padding: 0; list-style-type: none; font-size: 70%; color: #999999;} #companyLinks li{margin: 0; padding: 0; line-height: 140%; text-transform: capitalize;} #companyLinks li a{color: #999; text-decoration: none;} #companyLinks li a:hover{color: #999; border-bottom: 1px solid #999;} #pressList img{ float: left; margin: 0 14px 15px 0; display: inline;} .btn_press{border-bottom: none; margin: 10px 0 0 50px; float: right;} #news hr { clear: both;} /* ************************************************************* Content =Body - Information, Text etc ************************************************************* */ /* Used to create the rounded box */ #bodyWrap, #bodyWrap #faq{float: left; width: 502px; background: #F9D3FA;} #news #bodyWrap{background: #FEF7ED;} #fun #bodyWrap{background: #FEF7ED;} #test #bodyWrap{background: #F2FBFF;} #res #bodyWrap{background: #E8F2C4;} #press #bodyWrap{background: #FEF4FF;} #about #bodyWrap{background: #FFF5F0;} #fun #bodyWrap p a, #news #bodyWrap p a{color: #FF6600; text-decoration: none; border-bottom: 1px dashed #FF6600; font-weight: bold;} #fun #bodyWrap p a:hover, #news #bodyWrap p a:hover{color: #FF0000; border-bottom: 1px solid #FF0000;} #res #bodyWrap a{color: #663399; text-decoration: none; border-bottom: 1px dashed #663399; font-weight: bold;} #res #bodyWrap a:hover{color: #006600; border-bottom: 1px solid #006600; font-weight: bold;} #about #bodyWrap p a{color: #FF0000; text-decoration: none; border-bottom: 1px dashed #FF0000; font-weight: bold;} #about #bodyWrap p a:hover{color: #CC0000; border-bottom: 1px solid #CC0000; font-weight: bold;} #bodyWrap p a{color: #FF0099; text-decoration: none; border-bottom: 1px dashed #FF0099;} #bodyWrap p a:hover{color: #663399; border-bottom: 1px solid #663399;} /* Used to create the rounded box */ #bodyBlock, #bodyBlock #faq{width: 498px; background: url(../images/bodyBlockBG.jpg) no-repeat top left #F9D3FA; border-left: 2px solid #FF99FF; border-right: 2px solid #FF99FF; clear: both; float: left;} #news #bodyBlock{background: url(../images/bodyBlockBG_news.jpg) no-repeat top left #FEF7ED; border-left: 2px solid #F98F00; border-right: 2px solid #F98F00;} #test #bodyBlock{background: url(../images/bodyBlockBG_test.jpg) no-repeat top left #F2FBFF; border-left: 2px solid #00ADEF; border-right: 2px solid #00ADEF;} #res #bodyBlock{background: url(../images/bodyBlockBG_res.jpg) no-repeat top left #F7FBEA; border-left: 2px solid #A1BF34; border-right: 2px solid #A1BF34 ;} #fun #bodyBlock{background: url(../images/bodyBlockBG_news.jpg) no-repeat top left #FEF7ED; border-left: 2px solid #F98F00; border-right: 2px solid #F98F00;} #press #bodyBlock{background: url(../images/bodyBlockBG_fun.jpg) no-repeat top left #FEF4FF; border-left: 2px solid #DA39FD; border-right: 2px solid #DA39FD;} #about #bodyBlock{background: url(../images/bodyBlockBG_about.jpg) no-repeat top left #FFF5F0; border-left: 2px solid #FE6216; border-right: 2px solid #FE6216;} /* Testimonials Page */ .testImg{margin-left: 20px;} /* FUN Page */ #fun .blue h2, #fun .green h2, #fun .purple h2, #fun .pink h2{font-size: 100%; margin: 20px 0 0 0; padding: 10px 0 20px 50px; clear: both; height: auto;} #fun p.pdf{ background: url(../images/icons/pdficon.gif) 0 0 no-repeat; padding: 0 0 0 30px; height: 30px; margin: 0;} .blue{color: #003399;} .blue h2 { background: url(../images/icons/icon_stamp_blue.gif) 0 0 no-repeat;} .green {color: #669900;} .green h2 { background: url(../images/icons/icon_stamp_green.gif) 0 0 no-repeat;} .purple {color: #6633ff;} .purple h2 { background: url(../images/icons/icon_stamp_purple.gif) 0 0 no-repeat;} .pink {color: #FF0099;} .pink h2 { background: url(../images/icons/icon_stamp_pink.gif) 0 0 no-repeat;} /* Left Column */ #bodyBlock #colLeft{float: left; width: 265px; margin: 0 15px; display: inline;} #bodyBlock #colLeft p a{ color: #663399; border-bottom: 1px dashed #663399;} #bodyBlock #colLeft p a:hover{ color: #FF399C; border-bottom: 1px dashed #FF399C;} #bodyBlock p{font-size: 70%; line-height: 160%; margin: 0 0 10px 0;} /* Right Column */ #bodyBlock #colRight{float: left; display: inline; width: 200px;} /* List items under picture of Trunki */ #bodyBlock #colRight ul{list-style: none; font-size: 100%; font-weight: bold; padding: 0; margin: 10px 0 0 20px;} #bodyBlock #colRight li{background: url(../images/btn_bullet.gif) 0 3px no-repeat; padding: 5px 0 0 30px; margin: 0;} #bodyBlock #colRight li a{color: #663399; text-decoration: none; border-bottom: 1px dashed #663399;} #bodyBlock #colRight li a:hover{color: #663399; border-bottom: 1px solid #663399;} #flash-homepage{margin: 0 0 20px 0; width: 180px; position: relative; z-index: 1;} #flash-homepage p{ font-size: 60%; margin: 3px 0 0 0; width: 180px; text-align: center;} #flash-homepage p a{ color: #666; border-bottom: none;} #bodyBlock #colRight .trunkiHomepage{ float: left; width: 200px; clear: both; height: auto; margin: 0 0 12px 0;} #bodyBlock #colRight .trunkiHomepage img{ float: left;} #bodyBlock #colRight .trunkiHomepage p{ float: left; margin: 0 0 4px 10px; padding: 0 0 0 0; width: 90px;} /* Heading Title */ h1{font-size: 100%; margin: 0 0 10px 0; padding: 0; font-weight:bold; line-height: 130%;} #bodyMain h3{font-size: 75%; font-weight: normal; margin: 0 0 10px 0; padding: 0 0 10px 0; line-height: 130%;} #bodyMain h3 a{ color: #663399; text-decoration: none;} #bodyMain h3 a:hover{ text-decoration: underline;} /* Magmatic Logo */ .magmaticLogo{margin-top: 30px;} /* Homepage */ #colLeft h3{font-size: 80%; margin: 10px 0 10px 0; padding: 0; font-weight:bold; clear: both;} /* ************************************************************* =Tour - Trunki Tour block and popup ************************************************************* */ .trunkiTour {float:right; width:185px; height:68px; text-align:center; background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat 0 0px; margin: 20px 10px 0 0;} a.trunkiTour:link, a.trunkiTour:visited, a.trunkiTour:active {text-decoration:none; background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat 0 0px;} a.trunkiTour:hover {background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat -185px 0px;} /* ************************************************************* PASSPORT PAGE ************************************************************* */ #passport table{ float: left; font-size: 70%; color: #663399; width: 100%; margin: 10px 0 20px 0;} #passport th {font-weight: bold; height: 2em; padding: 5px 0 0 10px; text-align: left; background-color: #FCE8FD;} #passport td{ color: #663399; padding: 8px 0 8px 10px; border-top: 1px solid #F7C2F8; } #passport tr a{ color: #663399; text-decoration: none;} #passport tr a:hover{ color: #CC6600; text-decoration: underline;} #passport .bg{ background-color: #F7C2F8;} #passport .bg2{ background-color: #FCE8FD;} #passportThankyou {width: 520px; height: 260px; text-align: center; margin: -180px 0 0 -260px; position:absolute; left: 50%; top: 50%; background: url(../images/trunki-passport-medium.gif) 0 0 no-repeat; padding: 0 0 0 0;} #passportThankyou p { float: right; width: auto; padding: 0 0 0 0; margin: 0 0 10px 0; clear: both; width: 250px; text-align: left; color: #660099; font-size: 80%; font-weight: bold;} /* ************************************************************* =Cart - Shopping Cart Process - Checkout, Create Account, Login ************************************************************* */ /* Used on pages where no columns are needed */ #productListing{margin: 0 0 0 20px;} #productListing form{margin: 0; padding: 0; clear: both;} .product{padding: 0; margin: 10px 10px 0 0; width: 145px; float: right; text-align: left; display: inline;} .product h2{margin: 0; padding: 10px 0; font-size: 90%;} .noBorder{ border-bottom: none;} #buyNow{ float: left; width: 260px; margin: 20px 0 20px 10px; text-align: left; display: inline; color: #663399;} #buyNow p{font-size: 90%; margin: 0; padding: 0 0 0 5px; line-height: 120%; display: inline; float: left; font-weight: bold;} #buyNow p a{color: #FF399C; text-decoration: none; margin-top: 5px; border-bottom: 1px dashed #FF399C;} #buyNow p a:hover{color: #663399; border-bottom: 1px solid #663399;} #bodyMain .contentList{float: left; width: auto; margin: 0 0 20px 0; text-align: left; display: inline; color: #663399;} #bodyMain .contentList h2{font-size: 90%; margin: 0; padding: 0; float: left; clear: none; width: 360px;} #bodyMain .contentList p{font-size: 70%; margin: 0; padding: 0; line-height: 160%; clear: none; float: left; width: 360px;} #bodyMain .contentList p a{color: #663399; text-decoration: none; margin-top: 5px; border-bottom: 1px dashed #663399;} #bodyMain .contentList p a:hover{color: #663399; border-bottom: 1px solid #663399;} #bodyMain .contentList img{ float: left; margin: 0 20px 10px 0;} #newsletter{ float: left; width: 250px; margin: 0 0 0 10px; text-align: left; display: inline; color: #0099FF;} #newsletter form{margin: 0; padding: 0;} #newsletter p{font-size: 70%; margin: 0; padding: 0; line-height: 140%;} #newsletter input{border: 1px solid #00ADEF; vertical-align: middle; font: 70% Arial, Helvetica, sans-serif; color: #0099FF; padding: 2px;} #newsletter .btn{border: 0;} #newsletter a, #newsletter img{ float: left;} #friend{float: left; width: 230px; margin: 0; text-align: right; display: inline; color: #FF3300;} .columnBlock{width: 200px; margin: 0 10px 0 10px; padding: 10px; float: left; display: inline;} .columnBlock .text{width: 100px;} .columnBlock p label{width: 80px; float: left;} .columnBlock a{ text-decoration:none; font-size:80%; color: #663399; border-bottom:1px dashed #663399; font-weight:bold;} #createAccount, #shipping, #bodyMain{margin: 0 20px;} #createAccount h2, #shipping h2, #bodyMain h2{font-size: 90%; margin: 30px 0 10px 0; padding: 0; clear: both;} #createAccount h2 a, #shipping h2 a, #bodyMain h2 a{font-size: 70%; font-weight: normal; text-transform: uppercase; text-decoration: none;} #createAccount .text{width: 100px;} #createAccount p label{width: 150px; float: left;} #createAccount #reset{float: right; margin-right: 30px;} #checkout {margin: 10px 0 0 0; clear: both; float: right;} #checkout ul{list-style: none; padding: 0; margin: 0;} #checkout li{float: left; display: inline; padding: 0; margin: 0 0 0 10px; height: 2em;} #subMenu{float: right;} #subMenu ul{list-style: none; padding: 0; margin: 0;} #subMenu li{float: left; display: inline; padding: 0; margin: 0 10px 0 0; height: 2em; font-size: 65%; text-transform: uppercase;} #bodyMain ul{} #bodyMain li{margin: 0 0 5px 0;} #accountInfo dl{font-size: 75%; clear: both; padding: 0 0 30px 0} #accountInfo dt{float: left; width: 100px; margin: 0 0 5px 0; padding: 0;} #accountInfo dd{float: left; width: 160px; margin: 0 10px 5px 0; padding: 0;} #accountInfo dd span{float: right;} #errorList, #accountInfo ul, .bodyList ul{font-size: 70%; color: #663399;} #errorList a, #accountInfo a, .bodyList a{ color: #663399; text-decoration: none; border-bottom: 1px dashed #663399;} #errorList a:hover, #accountInfo a:hover, .bodyList a:hover{color: #663399; border-bottom: 1px solid #663399;} #orderHistory dl{font-size: 75%; clear: both; padding: 0 0 20px 0; border-bottom: 1px dashed #fff; overflow: auto;} #orderHistory dt{float: left; width: 100px; margin: 0 0 5px 0; padding: 0; font-weight: bold;} #orderHistory dd{float: left; width: 120px; margin: 0 0 5px 0; padding: 0;} /* ************************************************************* =Buttons ************************************************************* */ .btnContinue2, .btnDelete, .btnContinue, .btnChngAdd, .btnSubmit, .btnReset, .btnCreateAcc, .btnSignIn, .btnCheckout, .btnUpdate, .btnBack{height: 20px; font-size: 70%; color: #fff; text-decoration: none; display: block; text-transform: uppercase; cursor: pointer;} a.btnContinue2, a.btnDelete, a.btnContinue, a.btnChngAdd, a.btnSubmit, a.btnReset, a.btnCreateAcc, a.btnSignIn , a.btnCheckout, a.btnUpdate, a.btnBack {border-bottom:none; color:#FFFFFF;} .btnCheckout{width: 75px; background: url(../images/buttons/btn_checkout.gif) 0 0 no-repeat; padding: 4px 0 0 25px;} .btnBack, .columnBlock .btnBack{width: 52px; background: url(../images/buttons/btn_back.gif) 0 0 no-repeat; padding: 4px 0 0 23px;} .columnBlock .btnBack{font-size: 70%} .btnChngAdd{width: 150px; background: url(../images/buttons/btn_chngAdd.gif) 0 0 no-repeat; padding: 4px 0 0 25px;} .btnDelete{width: 60px; background: url(../images/buttons/btn_delete.gif) 0 0 no-repeat; padding: 4px 0 0 23px;} .btnContinue2, .columnBlock .btnContinue2{width: 95px; background: url(../images/buttons/btn_continue.gif) 0 0 no-repeat; padding: 4px 0 0 23px;} .columnBlock .btnContinue2{font-size: 70%;} .btnUpdate, .btnContinue, .btnSubmit, .btnReset, .btnCreateAcc, .btnSignIn{height: 22px; margin: 0; padding: 0 0 2px 23px; border: none; text-align: left; font-family: Arial, Helvetica, sans-serif;} .btnSignIn{width: 80px; background: url(../images/buttons/btn_signin.gif) 0 0 no-repeat;} .btnCreateAcc{width: 150px; background: url(../images/buttons/btn_createAcc.gif) 0 0 no-repeat;} .btnReset{width: 80px; background: url(../images/buttons/btn_update.gif) 0 0 no-repeat;} .btnSubmit, #contact .btnSubmit{width: 90px; background: url(../images/buttons/btn_submit.gif) 0 0 no-repeat; margin-left: 130px; border: none;} .btnContinue{width: 95px; background: url(../images/buttons/btn_continue.gif) 0 0 no-repeat;} .btnUpdate{width: 90px; background: url(../images/buttons/btn_update.gif) 0 0 no-repeat;} /* ************************************************************* =Table Data ************************************************************* */ table.dataTable {margin:0; padding:0; width:100%; border:0;} table.dataTable tr {padding:10px;} table.dataTable th {font-size:70%;} table.dataTable td { margin:0; font-weight:bold; text-align:middle; vertical-align:middle; padding:12px 0 12px 5px; border:1px solid #FFFFFF;font-size: 80%; background: #FEE8FF;} table.dataTable td .priceTotalCost{font-size:120%;color:#66c;font-weight:bold;} table.dataTable td .totalCost{font-size:120%;font-weight:bold;} table.dataTable td.centered {text-align:center;padding:12px 10px 12px 10px;} table.dataTable td.right{text-align:right;padding:12px 10px 12px 0;} table.dataTable td .product a { font-weight:bold;color:#000; text-decoration:none; text-transform:uppercase;} table.dataTable td .product a:hover { color:#666; } table.dataTable td a { font-weight: bold; color:#663399; text-transform:uppercase;} table.dataTable td a:hover{ color: #FF0099;} /* ************************************************************* =Trunki Story ************************************************************* */ #storyWrap{width: 600px; margin: 0 auto; padding-top: 20px;} #storyWrap #leftColumnStory{width: 250px; margin-right: 30px; float: left;} #storyWrap #rightColumnStory{width: 300px; float: right; margin-right: 20px; text-align: right;} #storyWrap #leftColumnStory h1{margin: 0 0 30px 0;} #storyWrap p{font: 75% Arial, Helvetica, sans-serif; color: #0066FF; line-height: 170%;} #storyWrap p a{font-family: Arial, Helvetica, sans-serif; color: #FF399C; text-transform: uppercase;} /* ************************************************************* =TV As seen on TV ************************************************************* */ #seenOnTV{width: 300px; margin: 0 0 0 20px; padding-top: 20px;} #seenOnTV p{font-size: 70%;} #seenOnTV ul{ padding: 0 0 20px 0; margin: 0; list-style-type: none;} #seenOnTV li {font-size: 70%; color: #FF399C; text-transform: uppercase; float: left; width: 100px;} #seenOnTV li a{color: #FF399C;} #seenOnTV .line{margin: 0 20px 0 0; padding: 0; height: 20px; border-bottom: 1px solid #ccc; width: 300px; clear: both;} /* ************************************************************* =SITEMAP ************************************************************* */ #siteMap li{ font-size: 70%; } #siteMap li a{ color: #663399;} #siteMap li a:hover{ color: #FF399C;} /* ************************************************************* =GENERAL STYLES ************************************************************* */ #bodyMain a.btn, #bodyMain a.btn:hover, #account a.btn, #account a.btn:hover{ border: none;} /* ************************************************************* =Footer ************************************************************* */ #footer{position: relative; margin-top: -123px; width: 100%; background: url(../images/footer.jpg) no-repeat; height: 123px; clear: both;} .clear{clear: both;} #contact fieldset{ border: 1px solid #FF99FF; margin-top:20px; padding:10px; width:400px; height:auto; overflow:auto;} #contact legend{ font: 80% Verdana, Arial, Helvetica, sans-serif; color: #FF399C; font-weight: bold; display: block; width: 160px; text-transform:uppercase; } #contact form p{ clear:both; margin:0; padding:0; padding-top:5px;vertical-align:top;} #contact p a{ color: #551A8B; font-weight:bold; text-transform:uppercase; text-decoration:none; } #contact label{ float:left; width:200px; text-align: left;} #contact input{ margin-left:10px; width:180px; background-color:#fff; vertical-align:top;} #contact input.txt{ color:#00008B; background-image:url(../images/bg_input.gif); background-repeat:repeat; border:1px inset #00008b;width:200px; margin-top:5px;} #contact textarea{ margin-left:10px; width:180px;} #contact textarea.txt{ color:#00008B; background-image:url(../images/bg_input.gif); background-repeat:repeat; border:1px inset #00008b;width:200px; margin-top:5px;} #contact select { margin-left:10px;color:#000000;width:180px;} #alert{ border:1px solid #FF99FF; width:auto; padding:5px; background-color:#FFF; color:#FF0066; font-size:70%; font-weight:bold; } .line{margin: 0 0 20px 0; padding: 0; height: 10px; border-bottom: 1px dashed #FF99FF; width: 100%; clear: both;} .imgSpace { margin: 0 10px 20px 0;}