/* Whiteley Village 07/09/07 - Stu Lanham */


/* ------- audio only content ------- */

.audio
{
    display: none;
}

@media aural  
{
    body 
    {  
        voice-family: female;
    }
    .audio
    {
        display: inline;
        voice-family: male;
    }
}

/* -------  typography ------- */

body
{
	font: 75% arial;
	color: #666666;
	margin-top: 15px;
	background: #48303D url(../images/bg-new.gif) top center repeat-y; /* Purple */
}

a {color: #666;}
a:hover {color: #644456;}
a:visited {color: #000000;}

a img {border: 0px;}

.blue-nav {color: #644456;}
.pink-highlight {color: #000000; text-decoration: underline;}

/* -------  main layout ------- */

#wrapper
{
	width: 776px;
	margin: auto;
}
#main-content-wrapper
{
	width: 760px;
	float: left;
	background: url(../images/main-bg.gif);
	margin:0 7px 0 8px;
}

#topnav
{
    width: 776px;
    float: left;
    display: inline;
    margin-top: -240px; /* +40px added for topnav height */
    /*background-color: #fff;*/
}

#topnav h2
{
    text-indent: -3000px;
    width: 776px;
    height: 22px;
    margin: 0 0px 5px 0px;
    padding: 0px;
    float: right;
    display: inline;
    background: transparent url(../images/open-7-days-h2.gif) top right no-repeat ;
}

#topnav ol
{
    float: right;
    display: inline;
    list-style-type: none;
    margin: 0px;
    margin-right: 10px;
    padding: 0px;
}

#topnav li
{
    display: inline;
    margin-left: 12px;
    /*padding-left: 12px;*/
    padding-left: 0;
    /*background: url(../images/main-arrow-up.gif) no-repeat left;*/
}

#topnav li a
{
    color: #000; /* Black */
    font-weight:bold;
    text-decoration: none;
    font-family: Verdana;
    font-size: 0.9em;
}

#topnav li a:hover
{
    color: #000000;
    text-decoration: underline;
}

#topnav li a:visited
{
    color: #333333;
}

#topnav li.on
{
    /*background-image: url(../images/main-arrow-select.gif);*/
    color: #644456;
}
#topnav li.on a
{
    text-decoration: underline;
    color: #80576D; /* New Light Purple */
}

#header
{
    width: 776px;
    /*background: #fff;*/
    float:left;
    display: inline;
    margin-top: 35px;
}

#header img
{
    float: right;
    margin-right:8px;
}

#header h1
{
    text-indent: -3000px;
    width: 360px;
    height: 198px;
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline;
    background: transparent url(../images/home-header-h1.gif) no-repeat left;
    
    display: none;
}

#left-main
{
    margin-top: 10px;
    width: 360px;
    background: #fff;
    float: left;
    margin-bottom: 50px;
    margin-left:9px;
}

#left-home-copy
{
    width: 100%;
    float: left;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

#left-home-copy p
{
    padding: 10px 0 8px 0;
    margin: 0px;
}

#left-main-60man
{
    float: right;
    margin: -115px -50px 0 0;
    
    display: none;
}
#left-main-60man2
{
    display: none;
}
#offers-ql a
{
    width: 175px;
    height: 133px;
    border: 1px #999 solid;
    margin: 10px 6px 15px 0;
    float: left;
    background-image: url(../images/retailer-offers.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    display: inline;
}

#offers-ql a:hover
{
    background-image: url(../images/retailler-offers-ov.jpg);
}

#whatsOn-ql a
{
    width: 175px;
    height: 133px;
    border: 1px #999 solid;
    margin-top: 10px;
    float: left;
    display: inline;
    background-image: url(../images/whats-on.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}

#whatsOn-ql a:hover
{
    background-image: url(../images/whats-on-ov.jpg);
}

#stores-ql a
{
    width: 175px;
    height: 133px;
    border: 1px #999 solid;
    margin: 0 5px 30px 0;
    float: left;
    display: inline;
    background-image: url(../images/stores.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}

#stores-ql a:hover
{
    background-image: url(../images/stores-ov.jpg);
}

#directions-ql a
{
    width: 175px;
    height: 133px;
    border: 1px #999 solid;
    float: left;
    display: block;
    background-image: url(../images/directions.gif);
    background-position: bottom;
    background-repeat: no-repeat;
}

#directions-ql a:hover
{
    float: left;
    display: block;
    background-image: url(../images/directions-ov.gif);
    background-position: bottom;
    background-repeat: no-repeat;
}

#right-main
{
    margin-top: 10px;
    width: 400px;
    background: #fff;
    float: right;
    _margin: -20px;
}

#right-main h3
{
    text-indent: -3000px;
    width: 330px;
    height: 25px;
    float: left;
    display: inline;
    background: url(../images/welcome-h3.gif) no-repeat left;
    margin: 20px 0 0 25px;
}

#right-main h4
{
    text-indent: -3000px;
    width: 400px;
    height: 14px;
    float: left;
    display: inline;
    background: url(../images/week-days-h4.gif) no-repeat right;
    margin: -45px 0 0 0;
    margin-left:-8px;
    padding: 0;
    /*border:1px solid red;*/
}

#right-main ul
{
    float: left;
	list-style: none;
	margin: 10px 10px 10px 25px;
    padding: 0px; 
}

#right-main ul li
{
    float: left;
    padding: 0 10px 0 15px;
    margin-bottom: 10px;
	background: url(../images/main-bullet.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#latest-news
{
    width: 352px;
    height: 50px;
    margin: 10px 0 0 25px;
    background: #E0DADD;
    clear: left;
    text-align: center;
    border-top: 1px solid #BBADB4;
    border-bottom: 1px solid #BBADB4;
    padding: 10px 0 15px 0;
}

#latest-news p
{
    margin: 0px;
    padding: 0px;
    color: #BBADB4;
}

#store-logos
{
    width: 352px;
    margin: 15px 0 15px 25px;
    clear: left;
    text-align: center;
}

/* -------  footer ------- */

#footer
{
    margin: 0;
    padding: 0;
    background: #E0DADD; /* light purple */
    float: left;
    display: inline;
    border-top: 10px solid white;
}

#footer ul
{
    float: left;
    width: 776px;
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#footer li
{
    float: left;
    
    display: inline;
    list-style: none;
    padding: 5px 0 6px 0;
    margin: 0 10px 0 10px;
}

#footer li a
{
    color: #000;
    font-size: 0.9em;
    font-family: Verdana;
    text-decoration: none;
}

#footer li a:hover
{
    color: #000000;
    text-decoration: underline;
}

#footer li a:visited
{
    color: #000;
}

/* -------  internal pages ------- */

#header-internal
{
    width: 776px;
    background: #fff;
    float: left;
    display: inline;
    margin-top: 35px;
}

#header-internal img
{
    float: right;
    height: 190px;
    margin-right: 8px;
}

#header-internal h1
{
    text-indent: -3000px;
    width: 360px;
    height: 198px;
    _height: 190px; /* IE 6 */
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline;
/*    background: #FCB131 url(../images/internal-h1.gif) no-repeat top left; */
    
    /* update for 2008 headers */
    display: none;
}

#right-main-internal
{
    margin-top: 10px;
    width: 400px;
    background: #fff;
    float: right;
    display:inline;
}

#right-main-internal h4
{
    text-indent: -3000px;
    width: 400px;
    height: 14px;
    float: left;
    display: inline;
    background: url(../images/week-days-h4.gif) no-repeat right;
    margin: 0 0 20px 0;
    padding: 0px; 
}

#right-main-internal p
{
    margin: 10px 10px 10px 15px;
    /*border: 1px solid red;*/
}

.banner-man
{
    float: right;
    margin: 0 0 7px 7px;
}

/* -------  whats on ------- */

#whats-on
{
    width: 360px;
    background-color: #E0DADD;
    float: left;
   /* margin-top: -8px;*/
}

#whats-on h4
{
    width: 350px; /* 10px padding */
    background-color: #644456;
    float: left;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0px;
    padding: 5px 0 5px 10px;
    _padding: 10px 0 5px 10px;
}
#whats-on h5
{
    width: 350px; /* 10px padding */
    float: left;
    font-size: 0.85em;
    margin: 0px;
    padding: 5px 0 5px 10px;
}
#whats-on p
{
    width: 340px; /* 20px padding */
    float: left;
    margin: 0px;
    padding: 0 10px 10px 10px;
}

/* -------  retailer offers ------- */

#offers
{
    width: 360px;
    background-color: #E0DADD;
    float: left;
/*    margin-top: -31px;*/
}

#offers h4
{
    width: 350px; /* 10px padding */
    background-color: #644456;
    float: left;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0px;
    padding: 5px 0 5px 10px;
    _padding: 10px 0 5px 10px;
}
#offers p
{
    width: 340px; /* 20px padding */
    float: left;
    margin: 0px;
    padding: 10px;
}
#offer-list
{
    margin: 5px 0 10px 15px;  
}

#mini-nav
{
    padding: 3px 15px 5px 10px;
    text-align: center; 
}

.mini-nav a
{
    color: #644456;
    margin: 4px;
    font-weight: bold;
}

#mini-nav a:hover
{
    color: #fff;
    margin: 4px;
    font-weight: bold;
}

#employment
{
    width: 360px;
    background-color: #E0DADD;
    float: left;
    display: inline;
    /*margin-top: -31px;*/
}

#employment h4
{
    width: 350px; /* 10px padding */
    background-color: #644456;
    float: left;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0px;
    padding: 5px 0 5px 10px;
    _padding: 10px 0 5px 10px;
}

.employment-table
{
    float: left;    
}

table
{
    width: 360px;
}

th, td
{
    padding: 5px 15px 5px 10px;
    width: 50%;
}

/* -------  stores ------- */

#map-main
{
    width: 768px;
    background: #fff;
    float: left;
    display:inline;
    margin-top: -8px;
    margin-left:8px;
}

#map-main a img
{
    border: 0px;
}

#map-main h4
{
    text-indent: -3000px;
    width: 400px;
    height: 14px;
    float: left;
    display: inline;
    background: url(../images/week-days-h4.gif) no-repeat right;
    margin: 0 0 10px 0;
    padding: 0px; 
}

#map-index
{
    width: 776px;
    float: left;
    display: inline;
    padding-bottom: 20px;
    /*background-color: #E0DADD;*/
}

table#store-list
{
    width: 776px
}

table#store-list td
{
    width: 155px; /* +35px */
    padding-left: 35px
}

.store-nos {color: #644456; font-size: 0.9em; font-weight: bold; float: left; }
.store-name {color: #000000; font-size: 0.8em; font-weight: bold;}
.store-tel {color: #644456; font-size: 0.8em;}

/* -------  contact ------- */

#contact-left
{
    width: 360px;
    background-color: #E0DADD;
    float: left;
    /*margin-top: -8px;*/
}

#contact-left p
{
    margin: 10px;
}

/* ---- directions ----- */
#sat-nav
{
    margin: 0 10px 10px 10px;
}

/* ---- build amendments - updates resulting from the code wire-up ----- */

/* homepage news ticker */
.newsItemOff { display: none; }   /* hidden article */
.newsItemOn  { display: block; }  /* visible article */

/* store colour key things */
.color
{
    float: left;
    width: 6px;
    height: 6px;
    margin: 1px 0 0 1px;
    border: 1px solid black;
} 

div#store-list
{
    width: 776px;
    margin-top: 1em;
    float: left;
}

div#store-list .store
{
    width: 155px;
    padding: 0 0 10px 35px;
    float: left;
    margin: 0 0 10px 0;
    border-bottom: 1px dotted #F5A4C7;
}
div#store-list .store-colors
{
    float: left;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

.side ul
{
    float: left;
    width: 360px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.side ul li
{
    width: 345px;
    float: left;
    padding: 10px 10px 5px 5px;
    border-bottom: 1px solid #BBADB4; /* here it is */
}
.side ul li a
{
    float: left;
    display: inline;
    width: 340px;
    margin: 5px 0 1px 0;
    padding: 5px 10px;
    text-decoration: none;
}
.side ul li a:hover
{
    /*background-color: #FFFBF5;*/
}

.side .primary
{
    font-weight: bold;
    text-decoration: underline;
}

.side .secondary
{    
}

.side .tertiary
{
    color: #644456;
    font-size: smaller;
}

.side .category a
{
    padding: 15px 10px;
    text-decoration: underline;
}

/* links within employment */
#employment a span.primary { color: #666; }
#employment a span.secondary { color: #666; }
#employment a span.tertiary { color: #666 } /* Grey */


/* links within whats-on */
#whats-on a span.primary { color: #666; } /* Grey */
#whats-on a span.secondary { color: #666; } /* Grey */
#whats-on a span.tertiary { color: #666 } /* Grey */

/* links within offers */
#offers a span.primary { color: #666; }
#offers a span.secondary { color: #666; }
#offers a span.tertiary { color: #666 }


#test
{
    width: 776px;
    background: red;
    float: left;
    display: inline;
}