/* Talland Bay Beach Cafe Site - Designed and Built by www.abrowndesign.com */ /* BODY STYLE * this definition will affect both the block e.g. margin, padding, * and some styles will be inherited by the tags inside e.g. font, background; */ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #607272; padding: 0; margin: 0; } /* BLOCK STYLES * this definition will remove all margins and padding from the default blocks */ h1, h2, h3, h4, h5, h6, p { padding: 0; margin: 0; } /* LINK STYLES * these style definitions affect all links, unless explicitly overridden */ a { color: #ffffff; text-decoration: none; font-weight: bold; } a:hover { color: #D9DBB6; } /* LAYOUT * these styles determine the size and location of the page elements */ #container { /* Centres content on screen */ margin: 0 auto; width: 800px; } #page { width: 800px; background-color: #EEF2F3; } #leftcol { float: left; width: 215px; /* margin-right: 10px; if we want a margin */ } #rightcol { float: left; width: 585px; margin: 0; padding: 0; } /* MENU STYLES */ /* Here we use an unordered list for the menu, switching off * list-styles (bullet points) and resetting margins & padding. */ #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { float: left; padding: 0; background-color: #99BBC4; } #menu a { height: 30px; display: block; text-indent: -9000px; overflow: hidden; } /* Use the background-image property to specify the graphic we want * to display for each menu item. */ #menu_home a { background: url(images/BUThome.gif) 0 0 no-repeat; width: 73px; } #menu_food a { background: url(images/BUTmenu.gif) 0 0 no-repeat; width: 73px; } #menu_shop a { background: url(images/BUTshop.gif) 0 0 no-repeat; width: 71px; } #menu_todo a { background: url(images/BUTtodo.gif) 0 0 no-repeat; width: 141px; } #menu_location a { background: url(images/BUTlocation.gif) 0 0 no-repeat; width: 227px; } /* By defining the :hover property for the links, we can create * rollovers, without one line of javascript. */ #menu_home a:hover, #menu_home.selected a { background: url(images/BUThomeOV.gif) 0 0 no-repeat; } #menu_food a:hover, #menu_food.selected a { background: url(images/BUTmenuOV.gif) 0 0 no-repeat; } #menu_shop a:hover, #menu_shop.selected a { background: url(images/BUTshopOV.gif) 0 0 no-repeat; } #menu_todo a:hover, #menu_todo.selected a { background: url(images/BUTtodoOV.gif) 0 0 no-repeat; } #menu_location a:hover, #menu_location.selected a { background: url(images/BUTlocationOV.gif) 0 0 no-repeat; } /*Left Column Content*/ #logo { background: url(images/TallandLogo.gif) 0 0 no-repeat; /* define image url */ height: 242px; /* define image size */ width: 215px; text-indent: -9000px; /* move original text of the page */ overflow: hidden; /* and make sure it's hidden */ padding: 0; margin: 0; } .smlimage { margin: 25px; } /*Right Column Content*/ #mainimage { } #pagetitle { float: left; clear: both; margin: 20px 20px 0 20px; font-weight: bold; } #content { float: left; clear: both; margin: 20px; width: 540px; } #content span { align: center; } /*FOOTER*/ #footer { clear:both; text-align: right; padding: 10px 10px; background-color: #99BBC4; color: #ffffff; font-weight: bold; }