/* CSS Document */

a:link { color: #990000; }
a:visited { color: #008000; }
a:hover { color: #ff0000; background-color:#ffff00; }

body { color: #000000; font-family: arial, helvetica, sans-serif; font-size: 0.8em; background-color: #cc9999; margin: 0; }
/* all declarations cascade through entire body */

div#adandpagecontainer { position: relative; width: 900px; padding: 0; margin: 0 auto; background-color: #cc9999; text-align: center; }

div#newpage { display: inline; float: left; clear: left; position: relative; width: 750px; padding: 0.5em; margin: 2px auto; background-color: #ffffcc; text-align: center; border: 1px solid #000000; }

#page { position: relative; width: 750px; padding: 0.5em; margin: 2px auto; background-color: #ffffcc; text-align: center; border: 1px solid #000000; } 

/* Width problems occur when using divs. Check catalogue pages for width if page width is changed. */

table#maintable { width: 100%; margin: 0; text-align: left; } 
/* give variable height to a page depending on other elements but needs to load the entire table before it is seen o screen */

/* TOP postition: absolute so containers stay where they are put. The float command could be used as an alternative but is implemented badly in some browsers meaning, it doesn't always work */ 
#headerleft { width: 25%; text-align: center; } 
#header { width: 75%; margin: 0.5em; padding: 0.5em; } 
/* header is an id as only one instance per page */

#headerlogoimage { width: 87px; height: 100px; margin: 0 0 0.5em 0; }
#headerfiller { display: inline; width: 75%; margin: 0; padding: 0; }

div#topnavigation { position: absolute; top: -10px; left: 307px; width: 450px; height: 5em; padding: 0; margin: 0.5em 0 0 0.5em; text-align: right; } 

/* only one instance per page */

div#topnavigation ul { margin: 0; padding: 0.5em; line-height: 30px; background-color: transparent; }

div#topnavigation li { display: inline; margin: 0; padding: 2px; list-style-type: none; background-color: transparent; }
/* display: inline creates a row.  ul and list are used instead of divs so it makes sence on screen without css  */ 

div#breadcrumb { position: absolute; top: 90px; left: 200px; width: 550px; padding: 0; margin: 0; text-align: right; } 


/* MIDDLE LEFT TO RIGHT */

td.navigationcolumn { width: 25%; border-top: 1px solid #000000; border-bottom: 1px solid #000000;border-left: 1px solid #000000;  background-color: #ffffff; margin: 0; text-align: center; vertical-align: top; }

ul.navigation { padding: 0; margin: 0; width: 90%; margin: 0.5em 0.65em; }
	
ul.navigation li { list-style-type: none; text-align: left; font-weight: bold; }
/* relates to all li within ul class="navigation" */

ul.navigation li.listheading { padding: 1em 0; text-align: center; }
ul.navigation li.firstlinkinleftlist { padding: 1em 0 0 0; }
ul.navigation a { font-weight: normal; text-decoration: none; margin: 0; padding: 0 0.5em 0 0.5em; border-top: 1px solid; display: block; padding-left: 1em; background-color: #ffffff; }
/* relates to all a within ul class="navigation" */

ul.navigation a:hover { color: #ff0000; background-color: #ffff00; }
	
td.middle3column { width: 50%; border: 1px solid #000000; background-color: #ffffff; padding: 1em;}

td.middle2column { width: 75%; border: 1px solid #000000; background-color: #ffffff; padding: 1em 2em; vertical-align: top; }

/* TOURISM ARTICLE PAGES */

/* Images */
img.imagelefttexttotheright { float: left; margin: 1em 1em 1em 0; }
img.imagefloatright { float: right; margin: 1em; }
div.imageandtextcontainer { width: 500px; padding: 0; margin: 0 0 16px 0; clear: both; }
div.spacer { padding: 0; margin: 0; clear: both; }
/* 200px image */
div.imagewithtextunder { display: inline; float: left; width: 220px; }
img.imagefloatleft { display: block; float: left; border: 4px solid #999999; }
p.textunderimage { display: block; float: left; padding: 0; margin: 0 0 16px 0; width: 200px; }
p.textnoimage { clear: both; }
.textrightofimage { display: inline; vertical-align: top; }

/* 300px image */
div.image300widewithtextunder { display: inline; float: left; width: 320px; }
img.image300wide { float: left; margin: 0 8px 0 0; border: 4px solid #999999;}
p.textunderimage300wide { display: block; float: left; padding: 0; margin: 0 0 16px 0; width: 300px; }

/* any width centered image */
.centered { margin: 0 auto; text-align: center; }
img.bordered { margin: 0; padding: 0; border: 4px solid #999999;}

/* additonal padding and margins */
.textcontainerextrapaddingtopandbottom { clear: both; padding: 8px 0 16px 0; } /* this container can be used to add padding when a text section is between two image containers. So, image and text above, this container, image and text below. */ 

p.navgationtopofreviews { padding: 0 0 4px 0; margin: 0; }

/* CATALOGUE PAGES */

table#cataloguemaintable { background-color: #ffffff; text-align: center; vertical-align: top; padding: 0; margin: 0 -1em; }

table#cataloguemaintable td { padding: 8px; width: 50%; text-align: center; vertical-align: top; }

.feedbackform { border: 1px solid #000000; background-color: #ffffcc; padding: 1em; margin-top: 1em; }

/* REVIEW PAGES */

p.navgationtopofreviews { padding: 0 0 4px 0; margin: 0; font-weight: bold; }

/* IMAGES */ 

.restaurantratingimg { padding: 4px; margin: 0 1em 0 0; vertical-align: middle; border: 1px solid #000000; width: 60px; height: 10px; } 

/* Contact Us Feedback Form */

input.submitbutton { margin-top: 8px; margin-right: 90px; width: 15em; font-weight: bold; }
legend.formstyle { font-weight: bold; }

/* BOTTOM */

#footer { width: 100%; height: 50px; padding: 0.5em; margin: 0.5em; text-align: left; }

/* Global */

h1 { font-size: 1.25em; padding: 0.5em 0 0 0; }
h2, h3, h4, h5, h6 { font-size: 1.12em; padding: 1em 0 0 0; margin: 0; }
span.highlight { font-weight: bold; }

p.restaurantreveiw { border-bottom: 1px solid #000000; padding-bottom: 1em; margin-bottom: 2em;}
p.bigger { margin: 0; font-family : arial, helvetica, sans-serif; font-weight : normal; font-size :1.25em; color :#000000; }
p.bigbolder { margin: 0; font-family : arial, helvetica, sans-serif; font-weight : bold; font-size :1.25em; color :#000000; }
p.bolder { display: inline; font-weight : bold; }
p.gototopofpage { width: 520px; text-align: right; }

li.spacebetweenitems { margin: 0 0 1em 0; padding: 0; }
div.spacer { margin: 0; padding: 0; clear: both; }

/* Adverts */
div#leftadverts { display: inline; float: left; vertical-align: top; clear: right; padding: 0; margin: 2px 0.5em; }

/* Small hotel search */
div.smallwidthhotelsearch { width: 118px; border: 1px solid #000000; text-align: center; margin: 0 auto; padding 0; background-color: #ffcc00; }