body {
background-color: white;
background-image: url(/images/grapes.gif);
color: black;
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, san-serif;
font-size: 0.83em;
text-align: center; /* work around bug in ie5.x preventing margins from centering boxes (CSS Anthol p.322) */
}

a {
text-decoration: none;
color: blue;
}

/*-----*/

div#developmentflag {
text-align: center;
font-size: 1.2em;
color: black;
background-color: white;
border: 2px solid red;
}

/*-----*/

/* Centred container width 768px that contains all its floats,
 and no padding. */

.main {
clear: both;
width: 768px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}

/*-----*/

/* Header */

/* (Used with .main) Web page header */

#header {
background-color: white;
margin-bottom: 5px;
}

/* Winefella logo */
#winefellalogo {
float: left;
width: 360px;
margin: 0;
background-color: white;
padding: 0;
}

/* Additional properties of header text */
#headertext {
float: right;
width: 408px;
color: #990134; /* winey colour */
background-color: white;
background-image: url(/images/header_grapes.gif);
background-position: right;
background-repeat: no-repeat;
font-size: 1.5em;
font-weight: bold;
font-style: italic;
padding: 0 0 16px 0;
margin: 0;
line-height: 120px;
}

/*-----*/

/* Breadcrumbs */

ul#breadcrumbs {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0.83em;
clear: left;
}
#breadcrumbs li {
float: left;
margin: 0;
padding: 0 0.4em 0 0;
}
#breadcrumbs li:before {
content: "> ";
}
#breadcrumbs li:first-child:before {
content: " "; /* chrome needs a space to work properly */
}
#breadcrumbs a {
color: blue;
text-decoration: none;
}
#breadcrumbs a:hover {
text-decoration: underline;
}

/*-----*/

/* Navigation list. Create as a series of floated elements.
 Use together with .main class.
*/

#navigation {
background-color: #990134; /* winey */
text-align: left;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}

#navigation li {
float: left;
margin: 0;
padding: 0.1em 0;
height: 2.8em;
border-right: 1px solid white;
overflow: hidden;
background-position: 4px 50%;
background-repeat: no-repeat;
zoom: 1;
}
#navigation li#li_services {
background-image: url(/images/navbuttons/services.gif);
}
#navigation li#li_services:hover {
background-image: url(/images/navbuttons/services_ro.gif);
}
#navigation li#li_products {
background-image: url(/images/navbuttons/products.gif);
}
#navigation li#li_products:hover {
background-image: url(/images/navbuttons/products_ro.gif);
}
#navigation li#li_contact {
background-image: url(/images/navbuttons/contact.gif);
}
#navigation li#li_contact:hover {
background-image: url(/images/navbuttons/contact_ro.gif);
}
#navigation li#li_media {
background-image: url(/images/navbuttons/media.gif);
}
#navigation li#li_media:hover {
background-image: url(/images/navbuttons/media_ro.gif);
}
#navigation li#li_home {
background-image: url(/images/navbuttons/home.gif);
}
#navigation li#li_home:hover {
background-image: url(/images/navbuttons/home_ro.gif);
}
#navigation a {
float: left;
padding: 0 1em 0 3em;
margin: 0;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 1em; /* Needed in IE>=6 otherwise nav bar doesn't display links for Text Size Larger. */
}

#navigation a#services, #navigation a#home {
width: 6em;
padding-top: 0.8em;
}
#navigation a#contact,#navigation a#media{
width: 5em;
}
#navigation a#products {
width: 6em;
padding-left: 4em;
padding-right: 2em;
}
#navigation a#services:hover {
    text-decoration: underline;
}
#navigation a#products:hover {
    text-decoration: underline;
}
#navigation a#contact:hover {
    text-decoration: underline;
}
#navigation a#media:hover {
    text-decoration: underline;
}
#navigation a#home:hover {
    text-decoration: underline;
}

/*-----*/

/* "About Wine Fella" and similar sections in other pages. Use together
 with .main class. */

.infosection {
border-bottom: 0.5em solid white;
text-align: left;
}

.infosection h1 {
float: left;
width: 764px;
padding: 4px 2px 4px 2px;
margin: 0.5em 0 0 0;
background-color: #999900; /* greeny */
font-size: 1em;
color: white;
}

.infosectioncontents {
clear: left;
background-color: white;
}

.infosectioncontents p, .infosectioncontents img {
font-size: 1em;
padding: 0.5em 0.3em 0 0.3em;
margin: 0;
color: black;
}

/*------*/

/* News section in home page */

/* Use with .main class */
#news_section {
margin-top: 10px;
background-color: white;
text-align: left;
}

#newlabels {
float: left;
width: 381px;
background-color: white;
margin: 0 0 10px 0;
}

#newlabels ul {
list-style: none;
padding: 0;
margin: 0;
height: 240px;
}

#newlabels li {
float: left;
width: 49%;
padding: 0;
text-align: center;
}

#news_happenings, #join_mailing_list {
float: right;
width: 382px;
background-color: white;
margin: 0 0 0.25em 0;
}

#news_section h1 {
background-color: #999900; /* greeny */
color: white;
padding: 0.3em;
margin: 0;
font-size: 1em;
}

#news_section h2 {
background-color: white;
color: black;
padding: 0.3em;
margin: 0.3em 0 0 0;
font-size: 1em;
}

#news_section p {
padding: 0.3em;
margin: 0;
}

/*-----*/

/* Images that appear in the Exclusive labels section on the home page.
 It is assumed they use the small-size labels. */

#newlabels img {
padding: 10px;
}

/*-----*/

/* Wine tasting image */

#winetasting_img {
float: right;
margin: 2px 2px 2px 4px;
}

/*-----*/

/* Intro to product catalogue page (overrides .infosection h1) */

h1.productintrohead {
background-color: white;
color: #990134; /* winey colour */
font-size: 1.5em;
font-variant: small-caps;
}

/*-----*/

/* Intro to list of countries (overrides .infosection h1) */

/* Use with .main class */
.winesbycountry {
margin-top: 10px;
text-align: left;
background-color: white;
}

.winesbycountry h1 {
padding: 2px 0 0 4px;
margin: 0;
font-size: 1.2em;
}

.winesbycountry a {
color: white;
}

ul#countrylist {
list-style: none;
margin: 0;
padding: 0;
font-size: 1em;
}

#countrylist li {
float: left;
padding: 10px 20px;
margin: 0;
}

#countrylist img {
display: block;
border-width: 0;
}

#countrylist a:link, #countrylist a:visited {
color: black;
text-decoration: underline;
}

.winesbycountry table {
clear: left;
border-collapse: collapse;
border-top: 2px solid black;
border-bottom: 2px solid black;
margin: 0 0 5px 1px;
table-layout: fixed;
}

.winesbycountry caption {
color: white;
min-height: 33px;
background-color: #990134; /* winey */
background-position: 4px 50%;
background-repeat: no-repeat;
font-size: 1.5em;
margin: 0 0 0 -1px; /* Fudge to get the caption the same width as the main table (which has a border) */
padding: 4px 0;
}

.alttable caption {
background-color: #999900; /* greeny */
}
#au_table caption{background-image: url(/images/flags/au_46x33.gif);}
#cl_table caption{background-image: url(/images/flags/cl_46x33.gif);}
#fr_table caption{background-image: url(/images/flags/fr_46x33.gif);}
#it_table caption{background-image: url(/images/flags/it_46x33.gif);}
#nz_table caption{background-image: url(/images/flags/nz_46x33.gif);}
#za_table caption{background-image: url(/images/flags/za_46x33.gif);}
#us_table caption{background-image: url(/images/flags/us_46x33.gif);}

.winesbycountry tr {
background-color: white;
}

/* If we apply attributes to a tr, in IE they must be applied to the td
   elements inside it (see winefellaIE.css). */
tr.first_in_section {
}

tr.altrow {
background-color: #DCE7A9; /* yellowy green background for alternate rows */
}

.winesbycountry th {
background-color: #666; /* grey */
color: white;
padding: 4px;
border: 1px solid #666; /* Fudge to get the heading line the same width as the main table (which has a border) */
text-align: left;
}

th.label, td.label {
width: 25%;
}
th.name, td.name {
width: 25%;
}
th.taste, td.taste {
width: auto;
}

.winesbycountry td {
padding: 4px;
border: 1px solid black;
}

td.label {
background-color: white;
text-align: center;
}

td.withimage {
}

.label p {
font-weight: bold;
padding: 0;
margin: 0;
}

td.name {
font-size: 0.85em;
}

td.taste {
font-size: 0.85em;
}

.taste ul {
list-style: none;
margin: 0;
padding: 0;
}

.taste li {
margin: 0;
padding: 0;
}

img.winetypeicon {
  float: right;
}

.winecode {
font-size: 0.9em;
}

/*-----*/

/* Classes/ids for services page. */

.servicetype {
width: 768px;
margin: 0 auto;
background-color: white;
}

.servicetype h2 {
text-align: center;
color: white;
background-color: #990134; /* winey */
font-size: 1.5em;
font-variant: small-caps;
}

.servicetype p {
text-align: left;
padding: 0 10px 10px 10px;
}

.servicedetails {
float: left;
background-color: white;
padding: 0 10px;
}

#weddings .servicedetails {
width: 47%;
}

#corp .servicedetails {
width: 30%;
}

.servicedetails h3 {
font-weight: normal;
background-color: #999900; /* greeney */
color: white;
margin: 0;
}

.servicedetails p {
font-size: 1em;
padding: 0.5em;
margin: 0;
}

#weddings #weddingconsignment {
clear: both;
}

p.servicedetailsend {
clear: both;
padding-top: 4px;
}
span.winefella {
font-weight: bold;
color: #990134; /* winey */
}

/*-----*/

/* Contacts */

#contact {
padding-bottom: 0.5em;
}

#contact_address {
font-size: 0.8em;
}

/*-----*/

div#prefixed {
float: left;
}
#prefixed a:link,#nonprefixed a:visited {
color: blue;
}

/*-----*/

div#admin {
float: right;
}

/*-----*/

/* Copyright at bottom. Font-size is absolute, as copyright bar doesn't work well with huge base font-size. Use with .main class. */

#copyright {
position: relative;
color: white;
background-color: #444;
font-size: 11px;
padding: 0.2em 0;
text-align: center;
}

/*-----*/

/* Last modified date */

#lastmod {
position: absolute;
right: 0;
color: white;
font-size: 0.83em;
}

/*-----*/

div#FatalExceptionSorry { 
width: 768px;
margin: 0 auto 0 auto;
padding: 1em 0;
color: red;
background-color: white;
font-size: 1em;
}