@import url(reset.css);

html {
    background: #fea;
    /*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: #ccc;
    /*Sets default background colour for entire page*/

    max-width: 960px;
    /*Set for fixed max-width for entire site - remove if not necessary. */

}

/* ------------------ Fonts ------------------ */
body {
    font-family: 'Open Sans', Verdana, sans-serif;
    color: #a00;

}

#header, #footer, #skip-link, ul.links, .item-list .pager, table, .breadcrumb {
    font-family: Verdana, Arial, sans-serif;
}

input, textarea, select, a.button {
    font-family: 'Open Sans', Verdana, sans-serif;
    color: #a00;
}

/* 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;
}

/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.xclearfix: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 {
    max-width: 100%;
    outline: 0;
    height: auto;
}

ul {
    padding: 0 0 7px 20px;
    margin: 0;
    list-style-type: disc;
}

li {
    list-style: disc;
}

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

h1 {
    font-size: 2em;
   font-weight: bold;
}

h2 {
    font-size: 1.25em;
    font-weight: bold;
    color: #a00;
    xtext-shadow: 1px 1px 1px #a00;
}

h3 {
    font-size: 1.15em;
    font-weight: bold;
}

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

del {
    text-decoration: line-through;
}

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

/* ------------------ Code Styles ------------------ */

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;
}

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;
    font-size: 0.857em;
    margin: 10px 0;
    width: 100%;
}

table table {
    font-size: 1em;
}

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

table tr th {
    background: #fc0;

    border-bottom-style: none;
}

table tr th, table tr th a, table tr th a:hover {
    color: #a00;
    font-weight: bold;
}

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

tr td, tr th {
    padding: 4px 9px;
    border: 1px solid #fff;
    text-align: left; /* LTR */
}

tr.odd {
    background: antiquewhite;

}

tr, tr.even {
    background: antiquewhite;

}

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

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

/* ------------------ List Styles ------------------ */

/* Header styles */
#header {
    width: 100%;
    xborder-bottom: 2px solid #292929;
    background-image: url('images/sunburst_header.gif');
    background-size: 100%;
    xoverflow: hidden;
    max-height: 200px;
}


#logo {

    padding: 0;
    position: relative;
    top: 25px;
    z-index: 500;



}

#logo img {

}



#name-and-slogan {
    padding: 1.66666666667% 1.66666666667% 0.666666667% 0.833333333333%;
}

#site-name:link, #site-name:visited {
    font-size: 2.5em;
    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;
}

#header ul {
    /*Main menu */
    clear: left;
    float: left;
    list-style: none;
    margin: 0.416666667%;
    padding: 0;
    width: 100%;

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

#header ul li {
    display: inline;
    list-style: none;
    margin: 0.416666667%; /*5/1200 */
    padding: 0;
}

#header ul li a {
    display: block;
    float: left;
    margin: 0.416666667%; /*5/1200 */
    padding: 0.25% 0.833333333333%;
    text-align: center;
    background: #eee;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    text-decoration: none;
    position: relative;
    line-height: 1.3em;
    font-size: 1.0em;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#header ul li a:hover {
    background: #fff;
    background: rgba(255, 255, 255, 1.0);
    color: #000;
}

#header ul li a.active, #header ul li a.active:hover {
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, 1.0);
    font-weight: bold;
}

#header ul 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;
    font-size: 0.9em;
    text-shadow: 2px 2px black;
    xborder-bottom: 2px black groove;
    xwidth: 480px;
    xmax-width: 100%;
    zoom: 1;

    xposition: relative;
    opacity: 0.99;
    z-index: 1;



}





/*This seems to be important for slide resizing in IE8 */
.slide {
    width: 100%;
    zoom: 1;

}
/* Slide text block styles */
.ckslide-textblock {

    padding: 5px 1.041666667% 5px 1.041666667%;
    background: #656565;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    xbottom: -80px;

}

.ckslide-textblock a, .ckslide-textblock a.hover, .ckslide-textblock p {
    color: white;
    padding: 0px 10px;
}

.cycle-slideshow {
    overflow:hidden;
    position: relative;
    zoom: 1;
}


/* General slide control styles */
.ckslide-controls {
    position: absolute;
    bottom: 10px;
    left: 3%;
    xfloat: right;
    xheight: 0px; /*stops the div retaining space in the layout where it would be without positioning. */
    z-index: 600;
    overflow: hidden;
    zoom: 1;
    xdisplay: inline;

}

.xckslide-controls img {
    xfloat: left;
    display: inline;
}

.xckslide-controls span {
    display: inline;
    *display: inline;
    zoom: 1;
    list-style: none;
    padding-left: 5px;
}


/* slide pager */
.ckslide-pager {
    clear: both;
    xwidth: 100%;
    z-index: 500;
    xposition: relative;
    xbottom: -10px;
    xoverflow: hidden;
    xfloat: right;
    padding-right: 2%;

}

.ckslide-pager span {
    font-family: arial;
    font-size: 50px;
    width: 16px;
    height: 5px;
    display: inline;
    color: #fc0;
    cursor: pointer;
    padding: 0 5px;
    line-height: 0.4em;
}

.ckslide-pager span.cycle-pager-active {
    color: #fea;
}

.ckslide-pager > * {
    cursor: pointer;
}
/* Slide previous/next styles */
.cycle-prev, .cycle-next {
    position: absolute;
    top: 0;
    width: 50%;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index: 800;
    height: 70%;
    cursor: pointer;
}

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

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

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

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


/* 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 */
#ckrow1 {
    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;
    overflow: hidden;
    /* 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 */

}

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

.leftmenu .colleft {
    right: 66%; /* right column width */
    xbackground: #ccc; /* left column background colour */
}

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

}

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




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

.fullpage .col1 {

    float: none;
}

/* ------------------ Footer Styles ------------------ */
#footer {
    clear: both;
    xfloat: left;
    width: 100%;
    background-image: url('images/sunburst_footer.gif');
    background-size: 100%;


}

#footer p {
    padding: 25px;
    margin: 0;
    text-align: center;
    color: #a00;

}

#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;
}

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


#page-title {
    font-size: 300%;
    color: #d4aa00;
    text-shadow: 2px 1px 2px #a00;
    margin: 0;
    xpadding: 0.5em 0 0.2em 0px;
}

#phone {
    font-family: 'Playfair Display', serif;
    font-size: 300%;
    color: #d4aa00;
    text-shadow: 2px 1px 2px #a00;
    padding: 0;
    margin: 0;
}

#servicing {
    font-family: 'Playfair Display', serif;
    font-size: 200%;
    color: #d4aa00;
    text-shadow: 2px 1px 2px #a00;
    padding: 5% 0;
    margin: 0;
}

/*Navigation */
#navigation li {
    list-style: none;
}

.gwl {
    xfont-family: 'Playfair Display', serif;
    font-size: larger;
    font-weight: bold;
}


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

.sideblock {
    margin: 0;
    padding: 0;
}

.sideblock h2, .sideblock h2 a {
    margin: 0 0 0.5em;
    padding: 5px 0px 5px 5px;
    font-size: 1em;
    font-weight: bolder;
    color: white;
    background: #666;
}

.sideblock .content {
    padding: 5px 3.472%;
}

.sideblock .content ul {
    font-size: 0.914em;
    line-height: 1.4;
    padding-left: 5px;
}

.sideblock .content ul li {
    list-style: none;
    padding-top: 5px;
    list-style: none;
}

.sideblock .content ul li ul li {

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

}

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

}

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

/*Page specific styles */
/* Contact page */
.contact-us li {
    list-style: none;
}

input, textarea, select {
    max-width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#contact-form {
    padding-bottom: 20px;
}

.contact-us li.Inputfield, .test-contact li.Inputfield {
    display: none;
    padding-top: 15px;
}

.contact-us p.description {
    font-size: 0.9em;
}

#ui-datepicker-div {
    background: #a00;
}

.ui-datepicker-header a{
    display: none;
}

#wrap_category {
    display: block;
}

.InputfieldStateRequired label:after {
    content: "*";
    color: red;
}

label.InputfieldHeader {
    font-weight: bold;

    font-family: 'Playfair Display', serif;

}

.InputfieldHeaderHidden span {
    display: none;
}

.contact-us dt {
    font-weight: bold;
    xfloat: left;
    padding-right: 1em;
    font-family: 'Playfair Display', serif;

}

.contact-us dd {
    padding: 0 0 10px 5%;
}

/* Gallery */
.pager {
    xfloat: left;
    margin: 0 auto;
    xtext-align: center;
    overflow: auto;
    max-height: 250px;
    max-width: 960px;
    margin: 2% 0 5% 0;

}

.cycle-slideshow {
    xfloat: right;
    margin: 0 auto;
    text-align: center;
}

.inline-header {
    display: inline;
}


.photo-gallery #contentcol .content {
    background: black;
}

.photo-gallery #ckrow1 {
    text-align: center;
}

.xphoto-gallery #page-title {
    margin-left: 20%;
    display: inline-block;

}

.photo-gallery .center {
    padding: 0 3%;
}

.photo-gallery .center a:link, .photo-gallery .center a:visited {
    color: #fff6d5;
    font-size: larger;
}

#gallery-nav:link, #gallery-nav:visited {
    float: left;
    margin: 4% 0 2% 5%;
    font-family: 'Playfair Display', serif;
    color: #a00;
}

#selectedPicture {
    padding-top: 2%;
    xdisplay: block;
    xmargin: 0 auto;
}



#prev-next {
    float: right;
}

#thumb-page img {
    border: 2px solid black;
}

#thumb-page img.pager-active {
    border: 2px solid #fff6d5;
}

#filter-gallery {
    float: right;
    margin: 4% 5% 2% 0;
}

img.align_right {
    float: right;
    padding: 0 0 10px 10px;
}

.http404 #ckrow1 {
    padding-top: 20px;
}

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


    /* 2 column  settings
       These always linearise in order 1-2
    */

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

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

    .leftmenu .col1 {
        clear: both;
        width: 92%; /* right column content width */
        background: #fff6d5;
        xright: 100%; /* 100% plus left column left padding */
    }

    .leftmenu .col2 {
        clear: both;
        width: 100%;
        background: #fea; /* 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) */
        text-align: center;
    }




    #phone {

        font-size: 200%;
        color: #d4aa00;
        text-shadow: 1px 1px 1px #a00;
        padding: 0;
        margin: 0;
    }

    #servicing {
        font-family: 'Playfair Display', serif;
        font-size: 150%;
        color: #d4aa00;
        text-shadow: 1px 1px 1px #a00;
        padding: 5% 0;
        margin: 0;
    }

}

@media screen and (min-width: 481px) and (max-width: 800px) {

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

    .leftmenu .colleft {
        right: 50%; /* right column width */
        xbackground: #ccc; /* left column background colour */
    }

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

    }

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

    #phone {

        font-size: 200%;
        color: #d4aa00;
        text-shadow: 1px 1px 1px #a00;
        padding: 0;
        margin: 0;
    }

    #servicing {
        font-family: 'Playfair Display', serif;
        font-size: 150%;
        color: #d4aa00;
        text-shadow: 1px 1px 1px #a00;
        padding: 5% 0;
        margin: 0;
    }
}