/*.......................................Main Areas ............................................................................*/ body { margin: 0; padding: 0; background:#ffffff; color: #333333; font-size:1em; font-family:Tahoma, Arial, Helvetica, sans-serif; text-align: center; } /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults and text align center - centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ #container { width: 960px; margin: 0px auto; padding: 0px 0px 0px 0px; background:#ffffff; text-align: left; } /* the auto margins (in conjunction with a width) center the page and the text align left overrides the text-align: center on the body element. */ /*.......................................Headings and links common throughout the site ............................................................................*/ h1 { margin:0px; padding: 20px 0px 10px 0px; color:#658A8B; font-size:2em; font-family:Tahoma, Arial, Helvetica, sans-serif; text-align:center; } h2 {margin: 0px; padding:20px 0px 20px 0px; color:#000000; font-size:1em; text-align:center; } .red {color:#CC0000} h3 {font-size:1em; text-align:left; font-weight:bold; } h4 {font-style:italic} h5 {font-size:0.9em; font-style:italic; text-align:center} a {color:#223a78; text-decoration:underline} a:hover {color:#7091b0; text-decoration:none} /*.......................................Header ............................................................................*/ #header {width: 900px; height: 120px; margin-top:0px; margin-left:30px; background-image:url(../MainImages/Navigation/banner.jpg);} /*.......................................Main Navigation bars top and bottom ............................................................................*/ .navbar { width:900px; height:40px; margin: 0px 0px 0px 30px; padding:0px; position:relative; background:url(../MainImages/Navigation/navbar.jpg); font-size:16px; list-style:none; } .navbar ul {margin: 0px ; padding: 0px; list-style:none; } .navbar li {float:left; } .navbar a { height:40px; line-height:30px; padding: 0px 13px 0px 13px; display:block; float:left; background: url(../MainImages/Navigation/button.jpg) left; text-decoration:none; color:#000000; } /*if you add more tabs or change the names then the padding for .navbar a will need to be adjusted to fit them all in and possibly the font size for the navbar*/ /*to set the hover state on the normal links*/ .navbar li:hover a {background: url(../MainImages/Navigation/button_hover.jpg); cursor:pointer; color:#FFFFFF } /*sets the unique images for the Home tab and the Basket Tab*/ .navbar li.Home a { padding-left:27px; background:url(../MainImages/Navigation/home_button.jpg); } .navbar li.Home a:hover{background:url(../MainImages/Navigation/home_button_hover.jpg) } .navbar li.Basket a {padding-left:42px; background:url(../MainImages/Navigation/basket_button.jpg); } .navbar li.Basket a:hover {background:url(../MainImages/Navigation/basket_button_hover.jpg)} /*sets the unique images for the Home tab and the Basket Tab when you are currently on a Home page or on a Basket page*/ #Home .navbar li.Home a {background:url(../MainImages/Navigation/home_button_select.jpg);} #Home .navbar li.Home a:hover {background:url(../MainImages/Navigation/home_button_hover.jpg); } #Basket .navbar li.Basket a {background:url(../MainImages/Navigation/basket_button_select.jpg);} #Basket .navbar li.Basket a:hover {background:url(../MainImages/Navigation/basket_button_hover.jpg); } /*sets the images to identify which main category the page is in; the categories for the page are set using the template properties on the body tag if you add additional tabs then they need to be added here as well*/ #BritishNotes .navbar li.BritishNotes a, #WorldNotes .navbar li.WorldNotes a, #BankNoteSets .navbar li.BankNoteSets a, #ContactUs .navbar li.ContactUs a, #Terms .navbar li.Terms a, #Postage .navbar li.Postage a {background:url(../MainImages/Navigation/button_select.jpg); color:#000000;} /*to set the hover states if you add additional tabs then they need to be added here as well*/ #BritishNotes .navbar li.BritishNotes:hover a, #WorldNotes .navbar li.WorldNotes:hover a, #BankNoteSets .navbar li.BankNoteSets:hover a, #ContactUs .navbar li.ContactUs:hover a, #Terms .navbar li.Terms:hover a, #Postage .navbar li.Postage:hover a {background:url(../MainImages/Navigation/button_hover.jpg); cursor:pointer; color:#FFFFFF} /*...........................................Bottom Navigation Bar.......................................................................*/ #bottomnav { width:900px; margin: 0; padding: 0px; list-style:none; font-size:0.8em; background:#c0d3cd} /*the font size here is set in ems to allow the text to increase in size*/ #bottomnav ul {margin:0px auto; padding:0} #bottomnav li {margin:0; padding:0.8em 10px; line-height:3em; display:inline; background:#c0d3cd; border-left: #FFFFFF 2px solid; border-right: #666666 1px solid; } #bottomnav a {color:#000000; text-decoration:none; cursor:pointer; } /*to set the hover states*/ #bottomnav a:hover{ text-decoration:underline;} /*.......................................Main Content areas ............................................................................*/ #mainContent { margin: 0px 30px 50px 30px ; padding: 0px ; position:relative; } /*the margins take the main content area down from 960px to 900px*/ /*Home page*/ #menu { margin:0px; padding:0px 0px 0px 50px; } /*the right padding takes the area down to 800px, if you change this you will need to change the size of the pictures*/ #menu img {width:auto; padding:0; border:none} .menublocks { margin-bottom:20px; margin-right:20px; float:left; } /*NOTE THIS REQUIRES THE IMAGE WIDTHS + INNER 20px MARGINS TO ADD TO 800PX eg for one picture width=800px; for 2 pictures width=(800-20)/2=390px each; for 3 pictures width=(800-2x20px)/3=253px each*/ /*Sets the appearance for the countrylists on the main world page*/ #countrylist {margin:0px; padding:0px} #countrylist ul {width:900px; margin:0px 0px 20px 0px; padding:10px 0px; background:#cfddd8; float:left;} #countrylist li {width:210px; margin:2px 5px; padding:5px 1px; float:left; list-style:none; background:#E2EBE8; border-top:2px #ffffff solid; border-right:1px #666666 solid; border-bottom: 1px #666666 solid; border-left:2px #ffffff solid; font-size:0.9em; text-align:center;} /*to get 900px across with 4 blocks 210px+10px margin+2px padding+3px border=225px for each block; the 2px left and bottom border gives a shading effect*/ #countrylist a{display: block; text-decoration:none; color:#000000 } /*to set the hover states*/ #countrylist li:hover {background:#658A8B; cursor:pointer} #countrylist li:hover a{ color:#FFFFFF;} /*allows for a smaller font size to be chosen for longer names - apply to the a tag eg a class=small href*/ .small {font-size:0.8em} /*Sets the appearance for the bulleted lists on the main terms and postages page*/ #Terms .inset li {margin:10px 0px 10px 30px; padding: 0px 0px 0px 20px} .creditcards {width:600px; margin:auto} .creditcards img {height:40px;} .paypal {width:500px; margin:auto; background:#ffffff; padding-bottom:10px} .paypal p{ font-size:small; padding: 0px 10px; font-style:italic; text-align:left} .paypal img {height:40px; float:left; margin-right:20px} #Home #footer table td, #Home #footer table tr { background:#ffffff} #Home #footer table {width:500px} .online {float:left; } .online img {float:left; margin:5px 20px 5px 0px; width:120px} /*.......................................Forms, Input buttons and Fieldsets ............................................................................*/ #notes {width: 900px; margin-bottom:20px } #notes input {margin:0px 0px 10px 20px} #notes img {padding:20px 20px; float:right; border:none} .item {width: 898px; margin-bottom:20px; float:left; border: 1px #CCCCCC ridge; background:#E2EBE8; } .item:hover { background:#A8C2B8; color:#FFFFFF} .item p {margin:20px 0px 20px 20px; } .subitem { width:898px; position:relative; padding:5px 0px } .subitem input { width:auto; float:left;} .subitem p{width: 730px; margin:0px 20px 0px 0px; padding:0px 0px 10px 0px; float:right; font-size:0.9em; /*font-style:italic*/ } #linkwebsites {margin:0px 50px 20px 50px; padding:0px 70px; font-size:1.1em; text-align:center; } #linkwebsites input {width: 300px; height:40px; margin:0px 15px 0px 15px; float:left; font-size:16px; } .singlebuttonlink {margin:auto; padding:0; font-size:1.1em; text-align:center} .singlebuttonlink input {width: auto; height:40px; padding: 0px 30px; font-size:16px} .pagelink {width:900px; height:50px; } .nextpage input {float:right} .previouspage input {float:left} .line{ border-bottom: 1px solid #999999; margin-bottom: 10px; margin-top:4px; clear:right; padding: 0px } /*.......................................Tables ............................................................................*/ /*Sets the parameters on the album page*/ #Home table {width:900px; padding:5px 0px; } #Home table th {width:400px; border-top:5px #FFFFFF solid; border-bottom:5px #FFFFFF solid; background:#CFDDD8} #Home table td {border-top:5px #FFFFFF solid; border-bottom:5px #FFFFFF solid; background:#CFDDD8; } #Home table tr {background:#CFDDD8} #Home table td.price {width:160px; font-style:italic; font-weight:bold; font-size:0.9em} #Home table input {width:165px; margin-top:5px; margin-bottom:0px;} #Home table td.wallets input {width: 400px} #Home form {margin:0px; padding:0px; white-space:normal} /*This is necessary to remove the default parameters in Windows Explorer on the form tag*/ /*.......................................Footer ............................................................................*/ #footer {margin:0px 30px 0px 30px; padding: 0; text-align:center; color:#000000; } #address {width:500px; margin: 2em auto; } #address h1 {padding:20px} #address p {margin:0; padding:0; text-align:center; font-size:0.9em; color:#000000; } #address h3{ text-align:center} #logos img {border:none; margin:0; padding:0} #logos a {text-decoration:none} #logos p{margin: 10px 0px 0px 0px; padding:0; font-size:10px; font-style:italic; } /*.......................................Miscellaneous ............................................................................*/ /*Floats....................*/ .fltrt { float: right; margin-right:20px; } /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ .fltrtnomargin {float:right; padding-left: 20px} .fltlft { float: left;margin-right: 8px;} /* this class can be used to float an element left in your page */ .clearfloat {clear:both; height:0; font-size: 1px; line-height: 0px;} /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ /*text types....................*/ .hidden { visibility:hidden} /*.collapse {visibility:collapse} */ .italic { font-style:italic} .center {text-align:center} .inset {margin-left:30px} .bold {font-weight:bold} .h4header {font-style:italic; font-weight:bold; margin-right:1.2em} .reditalic {font-style:italic; color:#CC0000}