/************************** Site-wide Reset Styles ***************************/
/* Do not change any of these styles */
html,body,p,ul,ol,li,a,h1,h2,h3,h4,h5,h6,table,tbody,tfoot,thead,th,form{margin:0;padding:0;border:0;outline:0;}
/* The clear class is used to correct the flow of the layout after using a
* floated element ("float: left" in stylesheets or "align=left" on tables and
* imgs). Usually, floating an element takes it out of the 'flow' of the
* document, meaning that any containers or following elements will ignore the
* size and shape of the floated element, causing ugly overlapping content and
* missing backgrounds. The clear class forces the containing element to
* correct its height for its contents even if it's floated. It should be used
* by specified the clear class on any elements that contain a floated
* elements that you wish to clear.
* E.g.,
*
*
Content
*
*
) as it requires no extra html markup just for
* styling purposes, and it is also the only known method that works in all
* cases across all modern browsers. */
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;/*triggers hasLayout in IE*/}
/****************************** General Styles *******************************/
body, table, h1, h2, h3, h4, h5, h6 {
/* Set this to the desired default website font */
font-family: Arial, Helvetica, sans-serif;
/* Set this to the desired default website font size */
font-size: 12px;
color: #494949;
}
/* Do not set font-size or font-family on the p tag or any other general tags
* other than #Body (see Layout Styles) as this will cause problems when trying
* to set styles on container elements later on. Site wide font settings should
* be specified on the body tag, or if you require a different font style
* somewhere on the site, add the different font styles to a class or id on the
* containing element. */
p {
/* !important is required on margin to override a style on the container */
margin: 10px 0 17px 0;
line-height: 120%;
}
ol {
margin: 10px 0 17px 30px;
list-style-type: decimal;
}
ul {
margin: 10px 0 17px 30px;
list-style-type: disc;
}
a {
color: #b64b17;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
h1 {
color: #b64b17;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px 0;
padding: 8px 0 0 0;
font-size: 28px;
font-weight: normal;
}
h2 {
color: #494949;
margin: 5px 0;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
}
/******************************* Layout Styles *******************************/
body {
text-align: center; /* Centers the website in IE */
/* Causes long words that are too wide for its container to break mid-word
* and wrap onto the next line */
word-wrap: break-word;
}
.pageCenter {
/* Centers the website in all browsers except IE and cancels out the
* text-align: center specified on #Body */
margin: 0 auto;
text-align: left;
/* Total width of the website. This must be specified in order to center
* the website. This should NEVER be more than 996px or you will get
* scrollbars on 1024x768 resolution screens. If your design measures
* wider than this, go and ask your designer about it */
width: 959px;
}
#header {
background: url(images/header.jpg) top left repeat-x;
border-bottom: 9px solid #ffffff;
}
#headerSwish {
background: url(images/header-swish.png) top right no-repeat;
position: relative;
}
#header h1 {
float: left;
margin: 28px 0 9px 0;
padding: 0;
/* Image replacement technique
* Use the following to replace the site title with a premade image
* This is useful for non-standard fonts, and is the kindest way to
* replace the text with an image for search engines, without using
* javascript
* The height and width must match that of the image */
background: url(images/toowong-inn-and-suites.png) top left no-repeat;
text-indent: -9999px;
width: 138px;
height: 135px;
}
#menu {
position: absolute;
bottom: 0px;
right: 0px;
}
#page {
background: url(images/page.jpg) top left repeat-x #ffffff;
}
#contentWrapper {
padding: 17px 0 48px 0;
}
#footer {
background: url(images/footer.jpg) top left repeat-x #10515c;
padding: 72px 0 25px 0;
}
#footer, #footer a {
font-size: 11px;
color: #ffffff;
}
/***************************** HOME PAGE STYLES **************************/
#homeText {
float: left;
width: 286px;
margin-right: 20px;
}
#homeBannerWrapper {
float: left;
width: 653px;
}
#homeBanner {
padding: 10px;
background: #ffffff;
border: 1px solid #d1d1d1;
}
.homeButtonWrapper {
width: 236px;
display: block;
float: left;
margin: 18px 5px 0 0;
background: #ffffff;
text-decoration: none;
color: #494949;
}
.homeButtonWrapper:hover {
text-decoration: none;
background: #d9d6c5;
}
.homeButton {
padding: 5px;
border: 1px solid #cbcbcb;
height: 250px;
_height: 262px;
}
.homeButton h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #ffffff;
font-weight: normal;
line-height: 48px;
padding: 0 0 0 15px;
text-transform: none;
margin: 0;
}
.buttonText {
padding: 16px 15px 0 15px;
font-size: 10px;
}
.buttonText b {
font-size: 11px;
}
.buttonText ul {
margin: 0 0 0 15px;
}
#rooms .buttonText {
background: url(images/foxtel.jpg) bottom right no-repeat;
}
.customertext {
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #b64b17;
}
.customer {
float: left;
width: 300px;
height: 80px;
padding: 20px;
}
#marqueecontainer{
background-color: white;
border: 0 solid orange;
height: 60px;
margin: 20px 0 10px;
overflow: hidden;
position: relative;
width: 200px;
}
/**************************** BUTTON STYLES **************************/
.navButton {
padding: 5px;
border: 1px solid #cbcbcb;
margin-top: 5px;
background: #ffffff;
display: block;
text-decoration: none;
}
.navButton:hover {
text-decoration: none;
background: #d9d6c5;
}
.navButton h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #ffffff;
font-weight: normal;
line-height: 48px;
padding: 0 0 0 15px;
text-transform: none;
margin: 0;
}
#rooms h2 {
background: url(images/h-rooms-at-toowong-inn.jpg) top left repeat-x;
}
#reservation h2 {
background: url(images/h-make-a-reservation.jpg) top left repeat-x;
}
#carhire h2 {
background: url(images/h-car-hire.jpg) top left repeat-x;
}
#location h2 {
background: url(images/h-brisbane-location.jpg) top left repeat-x;
}
/***************************** SUB PAGE STYLES ******************************/
#pageBanner {
padding: 10px;
background: #ffffff;
border: 1px solid #d1d1d1;
}
#pageContent {
float: left;
width: 704px;
margin-right: 20px;
padding: 30px 0 0 0;
}
#rightCol {
float: left;
width: 235px;
}
.imageBox {
text-align: center;
border: 1px solid #cbcbcb;
margin: 0 0 10px 0;
padding: 5px;
background: #ffffff;
display: inline-block;
text-decoration: none;
}
a.imageBox:hover {
text-decoration: none;
background: #d9d6c5;
}