@import url(reset.css);

html {
    background: #fff url('images/flower-tile2.png');
    /*Sets default background colour for entire page*/

}

body {
    margin: 0 auto; /*centres the body in the viewport */
    padding: 0;
    border: 0;
    /* This removes the border around the viewport in old versions of IE */
    /* min-width:800px; Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    text-align: center;
    /*Setting this helps to ensure design stays centred in older browsers - use text-align left on inner elements to achieve left aligned text. */
    background: #fff;
    /*Sets default background colour for entire page*/
    word-wrap: break-word;
    max-width: 960px;
    color: #170c74;

}

/* ------------------ Fonts ------------------ */
body, .ui-widget {
    font-family: Helvetica, Arial, Verdana, sans-serif;

}

.nova-flat {
    font-family: 'Nova Flat', cursive;
}

input, textarea, select, a.button {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;

}

/* Some standard page settings - to be over-ridden where there are special requirements */

/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be a collapsible fieldset that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.element-hidden {
    display: none;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
    position: static !important;
    clip: auto;
}

strong {
    font-weight: bold;
}

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* IE7 */
*:first-child + html .clearfix {
    min-height: 1%;
}

a {
    color: #369;
    text-decoration: underline;
}

a:hover, a:active, a:focus {
    color: #00f;
}

a:visited {
    color: #800080;
}

h1, h2, h3 {
    margin: .8em 0 .2em 0;
    padding: 0;

}

p {
    margin: .4em 0 .8em 0;
    padding: 0;
}

img, iframe {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.0em 0 0.5em;
    font-weight: inherit;
}

h1 {
    font-size: 1.357em;
    color: #000;
}

h2 {
    font-size: 1.25em;

}

h3 {
    font-size: 1.15em;

}

h4 {
    font-size: 1.05em;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

tr.odd {
    background-color: #dddddd;
}

img {
    outline: 0;
}

code, pre, kbd, samp, var {
    padding: 0 0.4em;
    font-size: 0.77em;
    font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
}

code {
    background-color: #f2f2f2;
    background-color: rgba(40, 40, 0, 0.06);
}

pre code, pre kbd, pre samp, pre var, kbd kbd, kbd samp, code var {
    font-size: 100%;
    background-color: transparent;
}

pre code, pre samp, pre var {
    padding: 0;
}

.description code {
    font-size: 1em;
}

form {
    width: 60%;
    clear: both;
}

input, textarea {
    width: 100%;
}

kbd {
    background-color: #f2f2f2;
    border: 1px outset #575757;
    margin: 0 3px;
    color: #666;
    display: inline-block;
    padding: 0 6px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

pre {
    background-color: #f2f2f2;
    background-color: rgba(40, 40, 0, 0.06);
    margin: 10px 0;
    overflow: hidden;
    padding: 15px;
    white-space: pre-wrap;
}

/* ------------------ Table Styles ------------------ */
table {
    border: 0;
    border-spacing: 0;
    margin: 10px 0;
    width: 100%;
}

table table {
    font-size: 1em;
}

#footer-wrapper table {
    font-size: 1em;
}

table tbody tr th {
    vertical-align: top;
}

tr td, tr th {
    padding: 4px 9px;
    text-align: left; /* LTR */
}

#footer-wrapper tr td, #footer-wrapper tr th {
    border-color: #555;
    border-color: rgba(255, 255, 255, 0.18);
}

xtr.odd {
    background: #e4e4e4;
    background: rgba(0, 0, 0, 0.105);
}

table ul.links {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

table ul.links li {
    padding: 0 1em 0 0;
}

/* ------------------ List Styles ------------------ */
.block ol, .block ul {
    margin: 0;
    padding: 0 0 0.25em 1em; /* LTR ARE THESE NEEDED*/
}

.item-list .pager {
    /*???????????????*/
    font-size: 0.929em;
}

ul.menu li {
    /*???????????????*/
    margin: 0;
}

.item-list ul li {
    margin: 0;
    padding: 0.2em 0.5em 0 0; /* LTR */
}

/* Header styles */
#header {
    width: 100%;
    background: #0aa426 url('images/purple-header-back.png') no-repeat;
    min-height: 200px;

}

#logo {
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    top: 25px;
    z-index: 500;
    width: 10%
}

#name-and-slogan {
    float: left;
    position: relative;
    top: 0;
    left: 1.5625%;
    width: 90%
}

#name-and-slogan img {
    max-width: 100%;
}

#site-name:link, #site-name:visited {
    font-size: 3em;
    font-weight: normal;
    text-decoration: none;
    color: #000;
}

#site-name:hover {
    text-decoration: underline;
}

#site-slogan {
    font-size: 1.2em;
    font-weight: bold;
    color: #444;
}

#search-form {
    float: right;
    padding-top: 30px;
}

ul#primary {
    /*Main menu */
    float: left;
    width: 70%;
    xtop: 30px;
    xleft: 8.33333%;

    /* set width to 100% for menu bar to fill header */
}

#primary li {
    display: inline;
    background-image: url(images/whitedot.png);
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0.416666667%; /*5/1200 */
    padding-left: 20px;
    font-size: 1.5em;
}

#primary li a {
    color: #fff;
    text-decoration: none;
}

#primary li a:hover {
    text-decoration: underline;
}

#primary li.active {
    background-image: url(images/white-flower20.png);
    background-repeat: no-repeat;
    background-position: left center;

}

#primary li a.active, #primary li a.active:hover {
    font-weight: bold;
}

#primary li a span {
    display: block;
}

#utility {
    float: right;
    font-size: 1.25em;
    padding: 10px 1.5% 0 0;
}

#utility li {
    display: inline;
    padding-left: 5px;
}

#utility li a {
    color: #fff;
    text-decoration: none;
}

#utility li a:hover {
    text-decoration: underline;
}

#utility li a span {
    display: block;
}

.site-edit {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #999;
    margin: 5px 5px 5px 5px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    float: left;
    padding: 10px;
}

#search-form {
    float: right;
    padding: 1.66667% 1.66667% 0 0;
}

/* -------------Feature section------------
 * This styling would typically be used for a content area that sits above
 * the column layout. Delete if not required.
 * */
#featured {
    margin: 0;
    padding: 0;
    font-weight: bold;
    text-shadow: 2px 2px black;
    background: #fff;

}

.gifts-home #featured, .gift-child #featured, .christmas-box #featured {
    background: #000;
    max-width: 640px;
}

.cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 50%;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index: 800;
    height: 100%;
    cursor: pointer;
}

.cycle-prev {
    left: 0;
    background: url(images/prev.png) 5% 50% no-repeat;
}

.cycle-next {
    right: 0;
    background: url(images/next.png) 95% 50% no-repeat;
}

.flowers-home .cycle-prev, .valentines-day .cycle-prev {
    left: 0;
    background: url(images/prev-dark.png) 5% 50% no-repeat;
}

.flowers-home .cycle-next, .valentines-day .cycle-next {
    right: 0;
    background: url(images/next-dark.png) 95% 50% no-repeat;
}

.cycle-prev:hover, .cycle-next:hover {
    opacity: .85;
    filter: alpha(opacity = 85);
}

.disabled {
    opacity: .5;
    filter: alpha(opacity = 50);
}

#prev, #next {
    display: none;
}

a#prev:hover {
    position: relative;
    top: -90px;
    float: left;
    z-index: 200;
    text-decoration: none;
}

a#next:hover {
    position: relative;
    top: -90px;
    float: right;
    z-index: 200;
}



/* Fixed width styles */
.fixed {
    margin: 0 auto;

    /* you can use px, em or %  - this can also be used to shrink the size of the fixed area so the background shows at the margins*/
    max-width: 960px;
    /* set the min and max widths of the fixed area, if required */
    text-align: left;
}

/* column container */
/* Column calculations based on 1024px width 3 columns. Left and right column is 308px.
   Middle column is 408px. The details for each column are:
   Left column: left padding 20px, content 278px, right padding 10px
   Middle column: left padding 10px, content 388px, right padding 10px
   Right column: left padding 10px, content 278px, right padding 20px */
.colmask {
    position: relative; /* This fixes the IE7 overflow hidden bug */
    clear: both;
    float: left;
    width: 100%; /* width of whole page */
    overflow: hidden; /* This chops off any overhanging divs */
    margin: 0 auto;
    text-align: left;

}

/* common column settings */
.colright, .colmid, .colleft {
    float: left;
    width: 100%; /* width of page */
    position: relative;
}

.col1, .col2, .col3 {
    float: left;
    position: relative;
    padding: 0 0 20px 0;
    /* no left and right padding on columns, we just make them narrower instead
                    only padding top and bottom is included here, make it whatever value you need */
    overflow: hidden;
}
/*next 4 defs from ce*/

.col1 {
    background: #ffffdd;
}

.home .col1 {
    background: #ffff00;

}

.col2, .col3 {
    background: #ffc720;
}

/* Full page settings */
.fullpage {
    background: #ffd; /* page background colour */
}

.fullpage .col1 {

    float: none;
}

.fullpage .col2 {
    clear: both;
    width: 100%;
}

.fullpage .col3 {
    clear: both;
    width: 100%;
}

/*General settings */

/* 2 column left menu settings */
/* 2 Column (left menu) settings */
.leftmenu {
    background: #ffffdd; /* right column background colour */
}

.leftmenu .colleft {
    right: 75%; /* right column width */
    background: #ffc720; /* left column background colour */
}

.leftmenu .col1 {
    width: 75%; /* right column content width */
    left: 100%; /* 100% plus left column left padding */

}

.leftmenu .col2 {
    width: 25%;
    /* left column content width (column width minus left and right padding) */
    left: 0%
    /* (right column left and right padding) plus (left column left padding) */
}

/* 2 Column (right menu) settings */
.rightmenu {
    background: #ffc720; /* right column background colour */
}

.rightmenu .colleft {
    right: 33.33333%; /* right column width */
    background: #ff0; /* left column background colour */
}

.rightmenu .col1 {
    width: 66.66667%; /* left column content width (left column width minus left and right padding) */
    left: 33.33333%; /* (right column width) plus (left column left padding) */
}

.rightmenu .col2 {
    width: 33.33333%; /* right column content width (right column width minus left and right padding) */
    left: 33.33333%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Full page settings */
.fullpage {
    background: #ffd; /* page background colour */
}

.fullpage .col1 {

    float: none;
}

#footer {
    clear: both;
    float: left;
    width: 100%;
    background: #0aa426 url('images/purple-footer-back.png') no-repeat bottom right;
    min-height: 200px;
    color: #fff;
}

#slogan {
    font-family: "Nova Flat", cursive;
    font-size: 1.25em;
    width: 62%;
    margin-left: 2.08333%;
    position: relative;
}

#copyright {
    position: relative;
    bottom: -60px;
    margin-left: 2.08333%;
    float: left;
}

#facebook {
    margin: 0;
    float: right;
    width: 30%;
    position: relative;
    top: 0;
}

#facebook img {
    float: left;
    max-width: 50%;
}

#follow {
    font-size: 1.45em;
    padding: 0 0 2.08333%;
    position: relative;
    top: 0;
    margin: 0 5px 0 95px;
}

#xfooter p {
    padding: 7px;
    margin: 0;
    color: #fff;

}

#footer a:link, #footer a:visited {
    text-decoration: none;
    color: #c9e4ff;
}

#footer a:hover, #footer a:active, #footer a:focus {
    text-decoration: underline;
    color: #c9e4ff;
}

/* ----------------- Content ------------------ */
#contentcol {
    /*There is no padding on col1, so this div provides padding for the actual content if required. */
    padding: 10px 5% 15px 5%;
}

h1#page-title {
    font-size: 2em;
    line-height: 1;
}

#page-title {
    color: #2939d0;
    font-family: "Nova Flat", cursive;
    margin: 0;
    padding: 0.5em 1.0em 0.5em 1.0em;
    background: url('images/flower25.png') no-repeat center left;
}

#contentcol h2, .jumpers-and-jazz-in-july-2014 #contentcol h3  {
    font-family: "Nova Flat", cursive;
    color: #2939d0;
}

.events #contentcol h3 {
    font-family: "Nova Flat", cursive;
}

#contentcol li {
    list-style: none;
    padding: 0 0 5px 20px;
    background: url('images/small_flower.png') no-repeat top left;
    text-decoration: none;
}

.coffee, .gifts {
    clear: left;
    float: left;
    width: 48%
}

.fine-food, .flowers {
    float: right;
    width: 48%;
}

.main-box h2 a {
    font-family: "Nova Flat", cursive;
    color: #2939d0;
    padding-left: 25px;
    background: url('images/white-centre16.png') no-repeat center left;
    text-decoration: none;
}

.main-box h2 a:hover {
    text-decoration: underline;
}

.contact-details {
    font-family: "Nova Flat", cursive;
    font-size: 1.5em;
    margin-left: 10%;
    color: #2939d0;
}

#phone {
    font-size: 1.16667em;
}

.page-image #contentcol .content {
    float: left;
    width: 73%;
}

dl.images {
    float: right;
    width: 25%;
}

dl.images img {
    border: 3px black solid;
}

.flowers-home img {
    border: 0 !important;
}

.fine-food-home dl.images img {
    border: 0;
}

.wine-beer-and-spirits  #contentcol .content {
    float: none;
    width: 100%;
}

.wine-beer-and-spirits dl.images {
    float: none;
    width: 100%;
}

.images dd {
    font-size: smaller;
    padding-bottom: 15px;
}

.about-us #contentcol img, .contact-us #contentcol img {
    float: right;
    border: 3px black solid;
}

.ckpage #featured {
    border: 3px solid black;
    margin-bottom: 20px;
}

img.align_right {
    float: right;
    padding-left: 5%;
}

.about-us #contentcol img, .contact-us #contentcol img {
    margin: 0 0 20px 5%;
}


/* ------------------ Menu summary ----------------- */

.menu_summary th {
    display: none;
}

td.variation {
    padding: 4px 0 4px 29px;
}

td p {
    margin: 0;
}

td.price, td.qualifier {
    text-align: right;
    vertical-align: top;
}

p.description {
    font-size: smaller;
}

p.header {
    font-size: larger;
    color: #2939d0;
}

/* ------------------ Sidebars ----------------- */
/*li#wrap_name, li#wrap_email, l1#wrap_category, li#wrap_subject, li#wrap_message {*/
#contact-form li {
    list-style: none;
    padding: 0 20px 10px;
    background: url('images/small_flower.png') no-repeat top left;
    text-decoration: none;
}

li#wrap_submit {
    background: none;
}

/* ------------------ Sidebars ----------------- */

.sideblock {
    padding: 0;
}

.sideblock h2, .sideblock h3, .sideblock h2 a {
    color: #2939d0;
    font-family: "Nova Flat", cursive;
    padding: 4.5%;
    font-size: 1.25em;
    text-decoration: none;

}

.sideblock h2 a:hover {
    text-decoration: underline;
}

.home .sideblock h2, .home .sideblock h2 a {
    font-size: 1.33333em;
    font-weight: bolder;
    font-family: "Nova Flat", cursive;
    color: #2939d0;
    text-decoration: none;
}

.home .sideblock h2 a:hover {
    text-decoration: underline;
}

.sideblock .content {
    padding: 5px;
}

.sideblock .content ul {
    margin-left: 5%;
}

.sideblock li {
    padding: 0 5% 5px 20px;
    background: url('images/small_flower.png') no-repeat top left;
}

.home .sideblock ul li {
    margin-left: 10%;
}

.sideblock ul li a, .xsideblock ul li a:visited, .xsideblock ul li a:link {
    list-style: none;
    text-decoration: none;
    color: #2939d0;
}

.sideblock ul li a:hover {
    text-decoration: underline;
}

div.facebook {
    padding-bottom: 10%;
}

.facebook h2 {
    padding-bottom: 0;
    margin-bottom: 0;
}

.facebook p, .program h3 {
    padding-left: 10%;
    color: #2939d0;
}

.program h3 {
    margin-top: 0;
    padding-top: 0;
}

.program h2 {
    margin-bottom: 0;
}

.program p  {
    margin-bottom: 3px;
    margin-top: 0px;
}

.facebook ul li a {
    background: none;
    padding: 0;
    color: #170c74;
}

.sideblock .content ul li ul li {

    border-bottom: none;
    list-style: none;
    padding-top: 5px;
}

a.more {
    float: right;
    font-size: smaller;
    color: #2939d0;
    text-decoration: none;
    margin-right: 5%;
}

a.more:hover {
    text-decoration: underline;
}

/* Home page styles */
.home .title {
    display: none;

}

.home #contentcol {
    padding-top: 10px;
}

.home img.transparent-banner {
	background: #ff0;
}

.christmas-box {
   
    display: block;
    font-size: larger;
    color: #fff;
    background-color: #0aa426;
    padding: 10px;
    margin: 0 auto;
    border-color: #2939d0;
    border-style: solid;
    border-width: 5px;


}

.christmas-box h2 {
    text-align: center;
    color: #fff!important;
    font-size: x-large;
}

.christmas-box img {
    display: block;
    margin: 0 auto;
}

.christmas-box p {
    text-align: center;
}

.inner-box {
	border: dashed #e70101;
	background-color: #ffd;
}

.christmas-box a:link, #christmas-box a:visited {
    color: #fff;
}

.christmas-box a:hover {
    color: #2939d0;
}

.buy-local img {
    margin: 0 auto;
    display: block;
    padding-top: 10px;
}

.valentines-day #contentcol em {
    font-family: "Nova Flat", cursive;
    font-style: italic;
    color: #e70101;
}

/*Responsive styles 
 * 
 * 
 * 
 * */
@media screen and (max-width: 600px) {

    /* 2 column left menu settings */
    /* 2 Column (left menu) settings */
    .leftmenu {
        background: #ffd; /* right column background colour */
    }

    .leftmenu .colleft {
        right: 100%;
    }

    .leftmenu .col1 {
        clear: both;
        width: 100%; /* right column content width */
        background: #ffd;
        left: 100%;
    }

    .leftmenu .col2 {
        clear: both;
        width: 100%;
        background: #ffc720; /* left column background colour */
        /* left column content width (column width minus left and right padding) */
        left: 100%;
        /* (right column left and right padding) plus (left column left padding) */
    }

    /* 2 Column (right menu) settings */
    .rightmenu {
        background: #ffc720; /* right column background colour */
    }

    .rightmenu .col1 {
        clear: both;
        background: #ff0;
        width: 100%; /* left column content width (left column width minus left and right padding) */
    }

    .rightmenu .col2 {
        clear: both;
        width: 100%; /* right column content width (right column width minus left and right padding) */

    }

    .fullpage .col1 {
        background: #ffd;
    }

    #logo {
        width: 15%;
    }

    #name-and-slogan {
        max-width: 80%;
    }

    #primary li {
        display: block;
    }

    #header {
        background: #4939d0;
        min-height: 150px;
    }

    #footer {
        background: #0aa426;
    }

    #copyright {
        clear: left;
        position: static;
        bottom: -60px;
        margin-left: 2.08333%;
        float: none;
    }

    #facebook {
        clear: left;
        margin: 0;
        float: none;
        width: 100%;
        padding: 2.08333%;
        position: static;

    }

    #follow {
        width: 100%;
        color: #ffffff;
    }

    form {
        width: 90%;

    }

    .mobile-exclude, .home #primary {
        display: none;
    }

    .main-box {
        clear: both;
        float: none;
        width: 100%;
        border-bottom: 1px groove #000;
    }

    .main-box h2:after, .home .sideblock h2:after {
        content: "  >>";
        color: #000;
    }

    .home .sideblock h2 {
        font-size: 1.0em;
        padding: 0 5%;
    }

    .page-image #contentcol .content {
        float: none;
        width: auto;
    }

    #slogan {
        width: 90%;
    }

}

@media screen and (min-width: 601px) {

    /* 2 column left menu settings */
    /* 2 Column (left menu) settings */
    .leftmenu {
        background: #ffffdd; /* right column background colour */
    }

    .leftmenu .colleft {
        right: 75%; /* right column width */
        background: #ffc720; /* left column background colour */
    }

    .leftmenu .col1 {
        width: 75%; /* right column content width */
        left: 100%; /* 100% plus left column left padding */

    }

    .leftmenu .col2 {
        width: 25%;
        /* left column content width (column width minus left and right padding) */
        left: 0%
        /* (right column left and right padding) plus (left column left padding) */
    }

    /* 2 Column (right menu) settings */
    .rightmenu {
        background: #ffc720; /* right column background colour */
    }

    .rightmenu .colleft {
        right: 33.33333%; /* right column width */
        background: #ff0; /* left column background colour */
    }

    .rightmenu .col1 {
        width: 66.66667%; /* left column content width (left column width minus left and right padding) */
        left: 33.33333%; /* (right column width) plus (left column left padding) */
    }

    .rightmenu .col2 {
        width: 33.33333%; /* right column content width (right column width minus left and right padding) */
        left: 33.33333%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
    }

    /* Full page settings */
    .fullpage {
        background: #ffd; /* page background colour */
    }

    .fullpage .col1 {

        float: none;
    }

}

@media screen and (max-width: 900px) {

    /* 3 Column settings */

    #header {
        overflow: hidden;
    }

    #facebook {
        width: 35%;
    }

}