body { /* New body bg. */
    background: #86caed url(/images/unav/body-bg.png) repeat-x 0 0;
}

#inner-wrapper.show-grid { /* Used to show the grid on the inner-wrapper through JS. The hide/show grid button in the developer kit adds/removes this class. (specified by id to save IE6 the multiple class issue) */
    background: #86CAED url(/images/css/web_grid_tile.jpg) repeat-y scroll center top;
}

.page-wrapper { /* Wraps the page to drop in a gradient background image. This is because some browsers can't render backgrounds on both html and body tags. */
    clear: both;
    float: left;
    height: 100%;
    width: 100%;
}

#page-wrapper {
    background:transparent url(/images/unav/html-bg.png) repeat-x 0 bottom;
}

#body-wrapper {
    background: #fff url(/images/unav/body-bg.png) repeat-x 0 top;
}

.header { /* the header of the page. This contains the universal nav. */
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background: #A0D5F1 url(/images/unav/header-bg.png) repeat-x 0 -1px;
    clear: both;
    float: left;
    margin: 0 0 10px 0;
    position: relative;
    width: 970px;
}

.header-inner { /* Inside wrapper for header. */
	clear: both;
	float: left;
    padding: 0 10px;
    width: 950px;
}

.user { /* User information containing "Logged in as: USER". */
    background: url(/images/unav/login.png) no-repeat 0 0;
    font-size: 12px;
    margin: 5px 0 0 0;
    min-height: 23px;
    padding: 6px 0 0 34px;
    white-space: nowrap;
}

.user a { /* Link to manage account. */
	color: #000;
	text-decoration: none;
}

.user-actions a { /* Contains links such as MANAGE ACCOUNT and LOGOUT. */
    color: #666666;
    float: left;
    font-size: 10px;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
}

.user-actions li { /* List style for user actions. Adding a bullet image to separate them. */
    background: url(/images/unav/bullet.png) no-repeat right center;
    float: left;
    margin-bottom: 5px;
    margin-right: 10px;
    padding-right: 12.5px;
}

.user-actions li.last { /* Removing the bullet image for the last list item. */
    background: none;
    margin-right: 0;
    padding-right: 0;
}

.logo { /* */
    margin: 10px 0 0 0;
}

.search-form {
	float: left;
 margin: 15px 0 0 0;
}

.search-form fieldset {
    background: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.search-form legend {
    display: none;
}

.search-form select/*, option */ { /* GB 06/03/09 Not sure if this is needed anywhere but it makes ff2 select fields VERY wide */
    background: #fff;
    color: #075983;
    float: left;
}

.search-form select {
	margin:  5px 0 0 0;
}

.search-form .text {
	float: left;
	margin: 0 5px;
    width: 200px;
}

.search-form .submit {
	clear: none;
	float: left;
    font-size: 11px;
    margin: 5px 0 0 0;
}

.search-form .search-label {
    background: url(/images/unav/search.png) no-repeat 0 0;
    display: block;
    float: left;
    height: 31px;
    margin: 0 5px 0 0;
    text-indent: -999em;
    width: 87px;
}

.powered-by {
	color: #085983;
	float: left;
	font-size: 10px;
	margin: 23px 0 0 10px;
	text-transform: uppercase;	
}

.footer-wrapper { /* This wraps the entire footer. This is to allow for a 100% width gradient to be applied around the fixed width footer area. */
    background: #86caed url(/images/unav/footer-wrapper-bg.png) repeat-x 0 top;
    clear: both;
    float: left;
    width: 100%;
}

.footer { /* Much like the .inner-wrapper class, except this has a width of 970px. It contains the footer of the page. */
    clear: both;
    float: left;
    position: relative;
    width: 970px;
}

.footer-inner { /* Inside wrapper div for the footer, to apply background and rounded corners. Includes everything in the footer bar the copyright. */
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-radius: 5px;
    background: #A0D5F1 url(/images/unav/inner-footer-bg.png) repeat-x 0 0;
    clear: both;
    float: left;
    margin: 0 0 10px 0;
    padding: 11px 10px 0 10px; /* 11px padding-top aligns the basket in the correct place. */
    position: relative;
    width: 950px;
}

.footer a { /* Overriding default anchor tag styles for the footer. */
    color: #333333;
    text-decoration: none;
}

.site-navigation { /* In the footer, this contains links to the different sections of the site -- Book Packs, Education, We Are Writers etc. */
    clear: both;
    float: left;
    padding: 10px 10px 20px 0;
    width: 950px;
}

.side-navigation { /* Side navigation for links in the footer. "About", "Contact" etc. */
    clear: none;
    float: left;
    font-size: 13px;
    margin: 0 0 0 10px;
    position: relative;
}

.site-areas { /* This is a wrapper div for the main areas of Scholastic within site-navigation.  */
    border-right: 1px solid #86CAED;
    padding-right: 10px;
}

.nav-item { /* Navigation item in .site-areas. It contains links to the different main areas of the Scholastic site -- Scholastic Shop, Magazines etc. */
    border-bottom: 1px solid #86CAED;
    height: 55px;
    padding: 10px 0;
}

.nav-item p { /* Overriding paragraph styles for .nav-item. */
    font-size: 13px;
    margin: 0;
}

.nav-item h3 { /* Overriding h3 styles for .nav-item. */
    font-size: 14px;
    font-weight: bold;
}

.site-areas .last .nav-item { /* Last is applied to the site-group div, which contains a set of 3 sites within site-areas. .last is the last group of sites, which each have their borders reset by this. */
    border: 0;
}

.copyright { /* Paragraph tag containing copyright information. Found in the .footer. */
    font-size: 12px;
}

.inner-wrapper { /* Adding rounded corners and a background colour to inner-wrapper. */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #fff;
}

#inner-wrapper {
	padding-top: 10px;	
}

.main-navigation {
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 10px;
    clear: both;
    float: left;
    margin: 0 0 20px 0;
    padding: 5px 5px;
    width: 939px;
	background: #bce2f5 url(/images/unav/secondary-nav-bg.png) repeat-x 0 0;
	border-left: 1px solid #a7d1e6;
}

.main-navigation li { /* Floating the main navigation items. */
    float: left;
}

.main-navigation li a { /* Overriding default anchor styles for main-navigation. */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #085983;
    float: left;
    font-size: 14px;
    font-weight: bold;
    line-height: 100%;
    margin: 0 5px 0 0;
    padding: 4px 10px;
    text-decoration: none;
}

.main-navigation li.active a, .main-navigation li a:hover  { /* Overriding default anchor styles for main-navigation. */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #085983;
    color: #fff;
}

#content { /* Wrapper for the main content of the page. */
    margin: 0 0 10px 0;
    min-height: 250px;
}

.top-link { /* This is a link attached to the bottom of the universal footer. It has an internal link back to #header. If JS is enabled, this will be a smooth scrolling effect. */
    background: url(/images/unav/top.png) no-repeat 0 0;
    bottom: -12px;
    clear: both;
    float: left;
    height: 44px;
    position: absolute;
    right: 10px;
    text-indent: -999em;
    width: 58px;
}

.no-overflow { /* A useful generic class to ensure that the overflow of the element is set to hidden. */
    overflow: hidden;
}

.basket { /* Basket widget in the header and the footer. */
	-moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background: #fff;
    clear: none;
    float:right;
    /* height: 50px; GB: doesn't need this */
    left: 10px;
    min-width: 240px;
    padding: 5px 0;
    position: relative;
    text-align: center;
    top: 2px; /* GB: brings below horizontal line on all browsers */
    margin-bottom: 2px; /* makes up for the above */
}

.basket a { /* Anchor tag style for basket widget; clears floats, by floating itself. */
 	clear: both;
    cursor: pointer; /* Just IE6? */
 	float: left;
    text-decoration: none;
    width: 100%;
}

.basket a:hover { /* Stopping hover effects for basket links. */
	text-decoration: none;
}

.empty { /* This is applied to an anchor tag within a basket of class empty. An empty basket contains text to promote the Scholastic shop. */
	background: #fff url(/images/unav/bag.png) no-repeat 10px 5px;
	min-width: 195px; /* Overwriting min-width from above. */
	padding: 5px 0 5px 45px;
	width: 195px; /* 240px basket width minus 45px padding. */	
}

.both { /* This is an anchor tag with links to both commission shop and scholastic shop ("both" shops). */
    background: #fff url(/images/unav/bag.png) no-repeat 10px 5px;
}

.single { /* This is an anchor tag within a basket that has a link to a single shop. */
    background: #fff url(/images/unav/bag.png) no-repeat 10px 15px;
}

.empty span { /* An empty basket has text explaining about the shops. This is text replaced. */
    background: #fff url(/images/unav/basket-empty.png) no-repeat 0 center;
    height: 41px;
    text-indent: -999em;
    width: 184px;
}

.basket .heading { /* This is the basket heading. It will contain information about the type of basket a user has (Scholastic Shop, Commission Shop etc). */
    color: #FF9513;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 0 5px 0;
    display: block;
    text-align: center;
}

.basket .basket-inner { /* An inner wrapper for the basket div, for padding. */
    clear: both;
    float: left;
}

.both .basket-inner, .single .basket-inner { /* Overwriting default basket-inner style. */
	padding: 0 10px;
	width: 220px;
}

.basket .first-item, .basket .second-item { /* First and second items in the basket are the contains for two sections inside this "basket" div. The first item contains "SHOPPING BASKET" when you have a single basket, or the name of a particular store when you have both. This is just a way to separate the two divs out using the same class name. */
    color: #999999;
    float: left;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    width: 110px;
    display: block;
}

.basket .first-item { /* Specific styling for first item -- reduces the width to add padding and a border. */
    border-right: 1px solid #B4E0F7;
    padding-right: 5px;
    margin-right: 5px;
    text-align: right;
    width: 109px;
}

.basket .second-item { /* Aligns the text of the second item to the left. */
    text-align: left;
}

.basket span { /* Text within a basket is bold and each span is used as a container by making it a block-level. */
    font-weight: bold;
}

.basket .items {
    color: #666666;
    display: block;
    font-size: 12px;
    text-transform: none;
}

.basket .cost {
    color: #333333;
    font-size: 13px;
}

.single .first-item { /* This applies to the text "Shopping Basket", as it is the first item in a "single" basket. */
    color: #333333;
    float: left;
    font-size: 10px;
    font-weight: bold;
    line-height: 110%;
    margin-right: 10px;
    padding: 0 5px 0 35px;
    text-align: left;
    text-shadow: #999999 1px 1px 0;
    text-transform: uppercase;
    width: 54px;
}

.single .second-item { /* Overriding .second-item for single basket. This contains the basket contents. */
	min-width:115px; /* IE6 width: 115px; */
    width: auto;
}

.both .first-item { /* .both shops .first-item contains a name of a shop. */
	width: 104px;
}

.both .second-item {
	width: 105px;
}

.footer .basket {
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    left: 0;
}

.single .basket-inner {
    width: auto;
}

.single a {
    min-width: 240px;
    width: auto;
}

.explore-button { /* This button opens the explore menu. It's position is left: 50%, with margin-left: -(width/2). This centers the button in the middle of the page. */
    background: url(http://www.scholastic.co.uk/images/unav/explore.png) 0 0;
    clear: both;
    display: none;
    float: left;
    height: 29px;
    left: 50%;
    margin-left: -43.5px;
    position: absolute;
    text-indent: -999em;
    top: 15px;
    width: 87px;
}

.explore-wrapper { /* If we attach this to the .header (grid-based header wrapper), then the contents of explore-wrapper are cut off, as it is bigger than the calcualted height of .header. Thus, .explore-wrapper is added to #wrapper and positioned in the center of the screen. 50% left - margin of half the width of the element (970 / 2 = 485px). This places the explore-wrapper in the center of the screen, even for IE6. */
    background: url(/images/unav/explore-arrow.png) no-repeat center top;
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -485px;
    width: 970px;
    z-index: 2;
}

.explore { /* The explore menu. Contains the site navigation from the footer. jQuery AJAX load of the footer navigation. */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #434343;
    clear: both;
    color: #fff;
    float: left;
    margin-top: 10px;
    opacity: 0.97;
    padding: 10px;
    position: relative;
    width: 950px;
}

.explore .loading { /* Paragraph tag containing the word "LOADING". This is so the user knows that content is being generated. */
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.explore a { /* Overriding default link styles. */
    color: #fff;
    text-decoration: none;
}

#close-explore { /* Close button for the "Explore" tab. This is an absolutely position link with a close icon. */
    background: url(/images/unav/close-explore.png) no-repeat 0 0;
    height: 15px;
    position: absolute;
    right: 5px;
    text-indent: -999em;
    top: 15px;
    width: 16px;
    z-index: 5;
}

.explore .nav-item { /* Overriding .footer .nav-item styles. Changing the blue border to white. */
    border-bottom: 1px solid #000;
}

.explore .site-navigation { /* Adding extra padding to the site-navigation imported from the footer. */
    padding: 10px 0;
}

.explore .site-areas { /* Adds a border to seperate the site navigation from the side links in the explore menu. */
    border-right: 1px solid #000;
}

.explore .side-navigation { /* Side navigation within the explore popup. */
    font-size: 13px;
}