@charset "UTF-8"; /*---------------------------------------------------------- THIS IS THE MAIN STYLESHEET FOR STUCTURAL AND LAYOUT CHANGES What this stylesheet **IS** for: 1) The main styles relating to the major sections of the site for example the header div or the primary navigation.  2)If you are setting the default styles for  section for example #header a or #column_1 p then it would go in here What this stylesheet is **NOT** for: 1) If you were adding styles to p or a tags that were outside these section default styles then they would go in the style_type.css file for example -------------------------------------------------------*/ /*CHANGE LOG - Anytime this stylesheet is changed please add in a descriptive comment here together with the date*/ /*------------------------------------------------------- [TABLE OF CONTENTS] (**PLEASE NOTE the although sometimes the order of the HTML element in a page may be in the same  as the TOC below a lot of times it may differ for example #image_container and primary naviagtion usually go within the header structrually within the HTML but dont have to depending on the structure of the site) 0.0 IMPORTS 0.1 Reset 0.2 Form 1.0 BODY 1.1. Wrapper / #wrapper 1.2. Container / #container 2.0 HEADER / #header  2.1 Primary Navigation / #navigation_primary 2.2 Container for the main page image / #image_container 2.3 Secondary Navigation / #navigation_secondary 2.4 Local Navigation / #navigation_local 3.0 CONTENT / #content 3.1. Column 1 / #column_1 3.2. Column 2 / #column_2 3.3. Column 3 / #column_3 4.0 FOOTER/ #footer 5.0 MISCELLANEOUS (Please update this ) 5.1 - Miscellaneous - Sidebox 5.2 - Miscellaneous - Defaults styles 6.0 TABLES (Default styles and any others you want to add) 7.0 RECYCLE BIN (old CSS or disable CSS for testing) -------------------------------------------------------*/ /* 0.0 - IMPORTS*/ /* 1.0 - BODY ------------------------------------------------------------*/ body { background-color: #232221; background-image: url(repeat_body.jpg); background-repeat: repeat; background-position: 0px 0px; } #wrapper { width: 960px; margin-right: auto; margin-left: auto; position: relative; } /* 1.2 - Body / Container ------------------------------------------------------------*/ #container { width: 960px; position: relative; background-repeat: no-repeat; background-position: 0px 0px; font-family: Arial, Helvetica, sans-serif; background-image: url(10px_border.jpg); margin-right: auto; margin-left: auto; background-color: #FFF; } /* 2.0 - HEADER ------------------------------------------------------------*/ #header { background-image: url(1px_repeat.jpg); background-repeat: repeat-x; background-position: 0px 0px; height: 130px; width: 960px; position: relative; } #logo a { padding-left: 30px; background-image: url(barbour_logo.jpg); background-repeat: no-repeat; background-position: 30px 0px; display: block; width: 351px; float: left; height: 53px; margin-top: 44px; } #logo span { display: none; } #shepwood { float: left; height: 81px; width: 184px; background-image: url(shepwood_logo.jpg); background-position: 0px 0px; margin-top: 29px; margin-left: 365px; } #shepwood span { display: none; } #navigation_primary { position: relative; width: 960px; height: 30px; background-image: url(1px_nav_repeat.jpg); background-repeat: repeat-x; background-position: 0px 0px; } /* 2.1 - Header / Primary Navigation ------------------------------------------------------------*/ #navigation_primary ul { list-style-type: none; padding-left: 30px; font-size: 13px; line-height: 30px; text-transform: uppercase; font-weight: bold; color: #f8f8f4; font-family: Arial, Helvetica, sans-serif; width: 642px; float: left; } #navigation_primary li { float: left; padding-right: 12px; } #navigation_primary a { color: #f8f8f4; text-decoration: none; } #navigation_primary a:hover { color: #232221; text-decoration: none; } /* 2.2 - Header / Image Container ------------------------------------------------------------*/ #image_container { width: 930px; position: relative; height: 300px; padding: 15px; } #content { width: 930px; position: relative; padding-right: 15px; padding-bottom: 30px; padding-left: 15px; } #featureBox { position: relative; width: 930px; height: 249px; float: left; } /* 3.0 - Content / Feature Boxes ------------------------------------------------------------*/ #featureBox span { display: none; } .menswear a { background-image: url(menswear.jpg); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; height: 249px; width: 225px; margin-right: 10px; } .ladieswear a { background-image: url(ladieswear.jpg); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; height: 249px; width: 225px; margin-right: 10px; } .childrenswear a { background-image: url(childrenswear.jpg); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; height: 249px; width: 225px; margin-right: 10px; } .accessories a { background-image: url(accessories.jpg); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; height: 249px; width: 225px; } .menswear a:hover, .ladieswear a:hover, .childrenswear a:hover, .accessories a:hover { background-position: 0px -249px; } .offers a { border: 1px solid #d4d2cf; background-image: url(special_offers.jpg); background-repeat: no-repeat; background-position: 0px 0px; float: left; height: 118px; width: 288px; text-align: right; } #column_1 { float: left; width: 680px; margin-right: 10px; padding-left: 15px; margin-top: 30px; } #column_1 .rule { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #daddd4; margin-bottom: 10px; padding-bottom: 20px; } #column_1 .postage { color: #caa85e; font-weight: bold; font-size: 13px; line-height: 16px; } #column_1 h1 { font-size: 24px; line-height: 30px; margin-bottom: 20px; color: #28221c; } #column_1 p { font-size: 14px; line-height: 20px; margin-bottom: 10px; color: #232221; } #column_1 a { color: #de8735; font-style: italic; font-weight: bold; text-transform: uppercase; text-decoration: none; font-size: 12px; } #column_1 a:hover { color: #28221c; } #column_2 { float: left; width: 225px; margin-top: 30px; } #featureShop { float: left; width: 195px; background-color: #b4bba9; padding: 15px; } #featureShop .help { font-size: 20px; margin-bottom: 20px; } #featureShop span { color: #FFF; font-weight: bold; font-size: 28px; display: block; margin-top: 8px; } #featureShop p { color: #f8f8f4; font-size: 14px; line-height: 20px; margin-bottom: 10px; } #featureShop .address { font-size: 11px; font-weight: normal; margin-top: 0px; } #footer { width: 930px; position: relative; background-color: #232221; padding: 15px; } #footer .left { float: left; height: 240px; width: 228px; background-color: #000000; background-image: url(contact_details_bg.jpg); background-repeat: no-repeat; background-position: 0px 0px; padding-left: 30px; padding-top: 20px; padding-right: 20px; } #footer .left h2 { color: #ea973a; font-size: 12px; text-transform: uppercase; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #452d12; padding-bottom: 6px; margin-bottom: 6px; } #footer .left p { color: #d1cdc3; font-weight: bold; font-size: 14px; line-height: 16px; margin-bottom: 10px; } #footer .left span { font-size: 12px; text-transform: uppercase; color: #ea973a; } #footer .left strong { color: #FFFFFF; font-size: 32px; display: block; margin-top: 10px; } #footer  .twitter a { display: block; font-size: 12px; text-transform: uppercase; text-decoration: none; color: #ea973a; line-height: 36px; } #footer .twitter a:hover { text-decoration: underline; } #footer .twitter { padding-top: 10px; } #footer .twitter img { float: left; margin-right: 10px; } #footer .right { background-image: url(footer_links.jpg); background-repeat: no-repeat; background-position: 0px 0px; height: 220px; float: left; width: 642px; padding: 20px; } .linkBox { float: left; width: 178px; } .linkBox  a, .linkBoxEnd a  { color: #FFFFFF; text-decoration: none; } .linkBox a:hover, .linkBoxEnd a:hover { text-decoration: none; color: #caa85e; } .linkBox h2, .linkBoxEnd h2  { font-size: 12px; color: #caa85e; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #514836; margin-bottom: 10px; padding-bottom: 6px; } .linkBoxEnd { float: left; width: 218px; } .linkBox  ul, .linkBoxEnd  ul  { list-style-type: none; font-size: 11px; line-height: 20px; color: #FFFFFF; } .copyright { float: left; width: 960px; color: #b5bcaa; font-size: 11px; font-family: Arial, Helvetica, sans-serif; margin-top: 20px; text-align: center; line-height: 20px; } .copyright a { text-decoration: none; color: #b5bcaa; font-weight: bold; } .copyright a:hover { text-decoration: none; color: #FFF; } /* 7.0 - Search Facility ------------------------------------------------------------*/ fieldset.search { width: 258px; float: left; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } .search input, .search button { border: none; float: left; } .search input.box { color: #232221; font-size: 11px; width: 178px; height: 18px; margin-right: 10px; background-image: url(search_field.jpg); background-repeat: no-repeat; padding-right: 0px; padding-bottom: 0px; padding-left: 4px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; background-position: 0px 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 4px; margin-top: 4px; } .search input.box:focus { outline: none; } .search button.btn { width: 66px; height: 22px; cursor: pointer; background-image: url(search.jpg); background-repeat: no-repeat; background-position: 0px 0px; text-indent: -9999px; background-color: #232221; margin-top: 4px; } .search button.btn:hover { background-position: 0px -22px; } /* 8.0 - Shop ------------------------------------------------------------*/ .table-format td { font-size:1.2em; padding:3px; } .mini-cart, .mini-search { font-size:1.2em; line-height:1.5em; padding:5px; }	 .mini-search { text-align:center; } .mini-search .text-input { width:150px; }