/* ########  READ  ME  ########## */
/* This is a demonstration ONLY and not a functioning version */
/* This has been created to give an impression ONLY of how the existing Compare The Brands web site can be modified to add menus for mobile phones and tablets.  It is also intended to show how it can gracefully transition to smaller viewports for mobile and to grow larger to fit on high-definition screens.  This has been done using responsive design and @media screen sizes.  We need to support the smallest viewport size: 320. The JQuery use has only been added to make the demonstration function.  Take any parts you wish for your own use, but you may need to program your own code to fit into your existing framework.  The CSS used isn't exactly like the CSS used on the live site, so please keep this in mind. */


/**********************************
START OF MOBILE AND TABLET CHANGES
----------------------------------
This is for changes to the viewport
initially LESS THAN 960px
***********************************/

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

/* Hides the product placement section from the right
and stops it floating.  Also positions is centrally */

.outfit {
display: none;
float: none;
margin: 0% auto;
}

/* Makes the wrapper take up full width */

.wrapper {
  float: none !important;
  margin: 0% auto !important;
  width: 100%;
}

/* Hides menus and buttons which are for desktop only */

.main_menu,
.sub_menu,
.mobilemenu .title .logo,
.shelf_left,
.shelf_right {
	display: none;
}

/* displays selected buttons and mobile menus */

.exit-mannequin,
.menu-mannequin,
.mobilemenu,
.grid {
	display: block;
}

/* Changes containers to allow side scroll
on mobile devices and tablets */

.product-list,
.brand-atoz,
.retail-atoz {
	position: static;
	width: 100%;
	overflow: auto;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	margin: 0px;
}

/* Adds the grid icon to the product shelves */

.tray ul li a.grid {
	display: block;
	width: 24px;
	height: 24px;
}

/* Changes the silver bar style for mobile */

.product_sub_menu {
  box-shadow: 0 -20px 15px 0 #939393 inset,0 2px 5px 2px #939393 inset,0 2px 2px #fff !important;
  border: 0px;
}

/* Stops the product information from scrolling and allows it to expand fully */

.product-description {
	overflow: hidden;
	margin: 5px 5px 5px 0px;
}

/* The following three product styles are repeated in another viewport size.  This needed to be done to stop the other viewport size from interfering */

.product-picture {
	float: left;
	width: 200px;
	margin: 0px 5px 5px 0px;
}

.product-picture img {
	display: block;
	margin: 0px auto;
}

.product-social {
	overflow: auto;
	margin: 0px auto;
	text-align: center;
}

/* Center the social icons on the product information screen. */
.icons-area {
display: block;
text-align: center;
margin: 0px auto;
}

/* Formatting of retailer and brand in silver bar on product information screen. */
.menu-retailer {
	float: left;
	margin-left: 0px;
}

.menu-brand {
	overflow: hidden;
	margin-right: 0px;
}

/* Resize and re-position of background sprites for smaller brand/retail and grid icons. */
.retail_icon, .brand_icon { background-position: -0px -420px !important; background-size: 84px !important; }
.retail_select { background-position: -0px -518px !important; background-size: 84px !important; }
.brand_select { background-position: -1px -469px !important; background-size: 84px !important; }

/* Smaller icons for tablet */
.retail_icon,
.brand_icon {
	width: 40px !important;
	height: 40px !important;
	margin: 5px !important;
}

.retail_select,
.brand_select {
	float: right;
	width: 40px !important;
	height: 40px !important;
	margin: 5px !important;
}

/* Making the name area smaller */
.retail_name,
.brand_name {
	display: inline-block;
	height: 19px;
	margin: 0px;
 	padding: 16px 0 15px 0 !important;
	color: #00e;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
}

}


/**********************************
START OF DESKTOP SPECIFIC CHANGES
----------------------------------
This is for changes to the viewport
initially MORE THAN 960px
***********************************/


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

/* Forces the product collection area (or mannequin as it was called) to the right hand side and fixes it in place so it is always there when scrolling up and down the shelves. */

.outfit {
margin: 0% 20px;
position: fixed;
top: 0px;
right: 0px;
display: block;
float: right;
}

/* displays the desktop blue and silver bar */

.main_menu,
.sub_menu {
	display: block;
}

/* hides mobile menus */

.mobilemenu,
.product-mobilemenu {
	display: none;
}

/* Makes the product information blue bar bigger and like the desktop version. */

.product-mobilemenu {
  height: 69px !important;
  padding: 0;
  font-family: Helvetica;
  font-size: 1.2em !important;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 -1px 2px rgba(0,0,0,1);
  border-radius: 6px;
  border: solid 2px #666a80;
  background-repeat: repeat-x;
  background-position: left center;
  background-color: #b7b7e3;
  box-shadow: 0 -32px 12px 0 #7b86d6 inset;
}

/* Makes the product information silver bar bigger and like the desktop version. */

.product_sub_menu {
  background-color: #fff;
  box-shadow: 0 -30px 15px 0 #939393 inset,0 2px 5px 2px #939393 inset,0 2px 2px #fff;
  height: 69px !important;
  padding: 0;
  border-radius: 6px;
  border: solid 2px #666a80;
}

/* Makes the product information menu bar links bigger for desktop */

.product-mobilemenu .title,
.product-mobilemenu .title ul li,
.product-mobilemenu .title ul li a,
.menubutton,
.menubutton ul,
.menu-prodcancel {
	height: 69px !important;
}

/* Makes the product information cancel bar bigger for desktop */

.prodcancel {
	margin: 4px 1% 5px 1% !important;
	background-size: 318px !important;
	width: 60px !important;
	height: 60px !important;
	background-position: -256px 0px !important;
}

/* hides the mannequin button from the mobile menu */

.menu-mannequin {
display: none;
}

/* gives 360px space for the product collection to drop in to along with its margins */

.wrapper {
  right: 360px !important;
}

/* This turns a row of products into a letterbox view so only 3 products can be seen at any one time.  THIS IS ONLY FOR MY DEMO TO MIMIK HAVING 3 PRODUCTS.  Please continue to use your method of reloading images in 3 spaces using AJAX. */

.product-list {
	position: absolute;
	width: 420px;
	left: 50%;
	margin: 0px 0px 0px -210px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

/* remove the grid icon from the shelf */

.tray ul li a.grid {
	display: none;
}

/* container of product details and allowing it to flow down the page and give some margin. */

.product-description {
	overflow: hidden;
	margin: 5px 5px 5px 0px;

}

/* same as the product picture in the previous @media for formatting */

.product-picture {
	float: left;
	width: 200px;
	margin: 0px 5px 5px 0px;
}

.product-picture img {
	display: block;
	margin: 0px auto;
}

.product-social {
	overflow: auto;
	margin: 0px auto;
	text-align: center;
}

/* Center the social icons on the product information screen. Same as previous @media */

.icons-area {
display: block;
text-align: center;
margin: 0px auto;
}

/* Setting the size of the checkout top row for desktop. */

.checkout-menu {
  height: 58px !important;
  padding: 0;
  font-family: Helvetica;
  font-size: 1em !important;
  font-weight: bold;
  color: #000;
}

}


/**********************************
CONTINUATION OF TABLET AND LANDSCAPE MOBILE
SPECIFIC CHANGES
----------------------------------
This is for changes to the viewport
initially LESS THAN OR EQUAL TO 440px
***********************************/

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

/* Hide the text header in the mobile blue bar menu */

.mobilemenu .title h1 {
display: none;
}

/* Replace the text header in the mobile blue bar menu with the logo */

.mobilemenu .title .logo {
	display: block !important;
	width: 40px;
	height: 40px;
	margin: 5px 1%;
}

/* Allow the silver bar for retailer and brands to go on to two lines, and remove some detail */

.product_sub_menu {
	height: auto !important;
	overflow: hidden !important;
	box-shadow: 0 0px 15px 0 #939393 inset,0 2px 5px 2px #939393 inset,0 2px 2px #fff !important;
	border: 0px;
}

/* allow the retail and brand bars to go on to two lines */

.menu-retailer,
.menu-brand {
	float: none !important;
	width: 100% !important;
	margin: 0px !important;
}

/* Add a border to the bottom of the retailer bar*/

.menu-retailer{
	border-bottom: 4px solid #CCCCCC;
}

/* center the product picture and buy now buttons */

.product-picture {
	float: none;
	margin: 0px auto;
}

/* put the product description area */

.product-description {
	margin: 5px 0px 5px 0px !important;
	position: static;
}

/* Allowing the product description to show fully beneath the picture and adding some margin. */

.product-description .desc {
   max-height: none !important;
   margin: 5px;
}

}

/**********************************
CONTINUATION OF TABLET AND LANDSCAPE MOBILE
SPECIFIC CHANGES
----------------------------------
This is for changes to the viewport
initially MORE THAN 440px BUT LESS
THAN OR EQUAL TO 550px
***********************************/

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

/* Allow the social icons to expand to full width*/

ul.stars_area,
ul.icons_area,
ul.avg_stars_area {
	width: 100% !important;
}

/* set the suggestions and alternatives buttons to go on two rows */

.product_info_header li {
width: 49% !important;
}
.product_info_header li:nth-child(even) {
margin: 5px 0px 0px 0px;
width: 50% !important;
}

/* puts review section into one above the other, bars at the top */

#review_bar_rating {
	float: none;
	width: 98% !important;
	margin: 5px 1% 5px 1% !important;
}

#review_star_rating {
	width: 98% !important;
	margin: 5px 1% 5px 1% !important;
}

.totalreview {
	line-height: normal !important;
	font-weight: bold;
	display: inline-block;
}

p.fivestar {
	float: right;
	display: inline;
	width: auto !important;
}

/* CHECKOUT SECTION*/

/* Changes font size for checkout table text */

.checkout table{
font: 0.7em Verdana,Geneva,sans-serif !important;
color: #000;
}

/* makes the margin smaller on the menu bar */

.checkout-menu {
	overflow: hidden;
	margin: 0px 0px 10px 0px;
}

/* Makes the collection name input box smaller */

.checkout-menu input[type=text] {
  padding: 8px !important;
  font: 0.8em Verdana,Geneva,sans-serif !important;
  margin: 4px 0px !important;
  width: 110px !important;
}

/* The next lines are responsible for making the checkout menu smaller so it takes up less space on mobiles and tablets. */


.checkout-menu ul {
	height: 40px !important;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.checkout-menu ul li {
	height: 40px !important;
	margin: 0px 0px !important;
	padding: 0px !important;
}

.oic58_save {
	height: 40px !important;
	width: 40px !important;
	background-size: 80px !important;
	background-position: -42px -120px !important;
	margin: 0px;
	}

.checkoutcancel{
	margin: 0 2px !important;
	background-size: 210px !important;
	width: 40px !important;
	height: 40px !important;
	background-position: -168px 0px !important;
}

.oic50_collectionshare {
margin: 0 2px !important;
width: 40px !important;
height: 40px !important;
background-size: 70px !important;
background-position: -33px -101px !important;
}

.oic50_checkoutclear {
margin: 0 2px 0 5px !important;
width: 40px !important;
height: 40px !important;
background-size: 100px !important;
background-position: 1px -206px !important;
}

/* Making the buttons smaller */

table .outfitsave_itemrow .ot_btn_blue {
  width: 50px !important;
  font-size: 0.7em !important;
}
.ot_btn_blue {
  border-radius: 6px 6px 6px 6px !important;
  padding: 3px 3px !important;
}

.outfitsave_itemprice{
	width: 50px !important;
}

/* CHECKOUT END */



}

/**********************************
THE FOLLOWING @MEDIA STYLES ARE ONLY
TO DEMONSTRATE HOW 4, 5 and 6 PRODUCTS
WOULD LOOK AS THE VIEWPORT GOES PAST
1100, 1240 and 1440 PIXELS
AGAIN, YOU CAN ACHIEVE THIS USING YOUR
EXISTING AJAX AND NOT USING THE METHOD
THIS DEMO IS USING.
***********************************/



/*####### 4 Products #######*/

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

.product-list {
	position: absolute;
	width: 560px;
	left: 50%;
	margin: 0px 0px 0px -280px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

}

/*####### 5 Products #######*/

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

.product-list {
	position: absolute;
	width: 700px;
	left: 50%;
	margin: 0px 0px 0px -350px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

}

/*####### 6 Products #######*/

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

.product-list {
	position: absolute;
	width: 840px;
	left: 50%;
	margin: 0px 0px 0px -420px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

}


/*####### CENTERED #######*/
/* THE MAXIMUM VIEWPORT SIZE WILL BE 1500px
ANYTHING AFTER THAT WILL BE MARGIN EITHER SIDE
KEEPING THE PROJECT IN THE MIDDLE */

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

/* setting the outside containder to 1500 and centering */
.container {
	width: 1500px;
	margin: 0px auto;

}

/* bring the product collection area inside the container and margins so it is centralised with the rest of the project*/

.outfit {
	display: inline-block;
	float: right;
	right: inherit;
	margin: 0% 0% 0% 1180px;
}

/* set the size of the shelving areas to be fixed to 1180 */

.wrapper {
	display: inline-block;
	width: 1180px;
}

}


/**********************************
CHANGE TO BE MADE IF IN DESKTOP MODE
AND THERE ISN'T ENOUGH VERTICAL SPACE
TO SEE THE PRODUCT COLLECTION AREA.
IN THIS CASE WE MAKE IT SCROLL WITH
EVERYTHING ELSE RATHER THAN BEING
FIXED IN PLACE
----------------------------------
This is for changes to the viewport
where the height is less than 640px
and the with is 960 or more.
***********************************/

@media screen and (max-height: 639px) and (min-width:960px) {

.outfit {
	position: absolute;
}

.outfit img {
	position: inherit;
}



}

/*##########################*/
/*######  GLOBAL CSS  ######*/
/*##########################*/


body {
	margin: 0px;
	padding: 0px;
	border: 0px;
}

a {
	text-decoration: none;
}

/* Product display area with demonstration background, please ignore this background */

.outfit {
width: 320px;
height: 640px;
background-image: url('../images/mannequin-background.png');
background-repeat: no-repeat;
}

/* hidden exit button for Product display area */

.outfit .exit-mannequin {
	position: relative;
	top: 0px;
	left: 280px;
	display: none;
}

.outfit .exit-mannequin a{
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	background-position: -170px 0px;
}

/* Formats boxes for the Product display area */

.templateplacement_box {
	margin: 0px;
	padding: 0px;
	position: relative;
}

/* Sets the shelving area container */

.wrapper {
  float: right;
  margin: 0px auto;
  position: absolute;
  left: 0px;
  right: 320px;
}

/* sets main menu bar formatting */

.main_menu {
  height: 69px;
  padding: 0;
  font-family: Helvetica;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 -1px 2px rgba(0,0,0,1);
  border-radius: 6px;
  border: solid 2px #666a80;
  background-repeat: repeat-x;
  background-position: left center;
  background-color: #b7b7e3;
  box-shadow: 0 -32px 12px 0 #7b86d6 inset;
}

/* Allows the bar to expand and contract whilst keeping the space available to 100% and allowing buttons to be spaced equally in the blue menu bar and silver menu bar */

.main_menu ul,
.sub_menu ul,
.product-mobilemenu ul {
  margin: 0 -2px 0 -2px;
  padding: 0;
  list-style-type: none;
  width: 100%;
}

/* Buttons are 25% across to fit 4 */

.main_menu ul li {
	float: left;
	width: 25%;
	height: 69px;
	margin: 0% -4px 0% 0%;
	padding: 0;
	border-right: 4px solid #7a7bd4;
}

.main_menu ul li.nav_end {
	border: 0px;
	margin: 0%;
}

.main_menu ul li a{
	display: table-cell;
	width: 25%;
	height: 69px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

/* setting up the mobile menu bars */

.mobilemenu,
.product-mobilemenu {
	height: 50px;
	background-color: #B7B7E3;
	box-shadow: 0px -32px 12px 0px #7B86D6 inset;
	font-family: Helvetica;
	font-size: 0.9em;
	font-weight: bold;
	color: #FFF;
	text-shadow: 0px -1px 2px #000;
	border-radius: 6px;
	padding: 0%;
}

/* Adding variable space for the mobile menu title */

.mobilemenu .title,
.product-mobilemenu .title {
	position: absolute;
	left: 0px;
	right: 170px;
	height: 50px;
}

/* mobile menu company icon */

.product-mobilemenu .title ul li {
	float: left;
	height: 50px;
	margin: 0% -4px 0% 0%;
	padding: 0;
	border-right: 4px solid #7a7bd4;
}

.product-mobilemenu .title ul li a{
	display: table-cell;
	height: 50px;
	margin: 0px;
	padding: 0px 20px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

/* mobile menu title */

.mobilemenu .title h1 {
	margin: 13px 3% 0px 3%;
	font-size: 1.2em;
}

.mobilemenu .title p{
	margin: 13px 3% 0px 3%;
	font-size: 1.2em;
}

/* setting container space for mobile menu icons */

.mobilemenu .menubutton,
.product-mobilemenu .menubutton {
	float: right;
	width: 160px;
	height: 50px;
	margin: 0px 10px 0px 0px;
}

.mobilemenu .menubutton ul,
.product-mobilemenu  .menubutton ul{
	height: 50px;
	list-style-type: none;
	margin: auto 0% auto 0%;
	padding: 0%;
}

.mobilemenu .menubutton ul li,
.product-mobilemenu .menubutton ul li {
	float: right;
	margin: 0% 3%;
}

.mobilemenu .menubutton ul li a,
.product-mobilemenu .menubutton ul li a {
	display: block;
	width: 40px;
	height: 40px;
	margin: 5px 1%;
	text-shadow: none;
	font-weight: bold;
}

/* setting sprite usage for mobile icons at 25% of the sprite original size for increased clarity on high resolution devices */

.mannequin,
.search,
.mainmenu,
.logo,
.prodcancel,
.exit-mannequin a,
.checkoutcancel {
  background-image: url('../images/menu-sprite-x4.png');
  background-repeat: no-repeat;
  background-size: 210px;
}

/* Background positions calculated to 25% */
.search { background-position: -43px 0px; }
.mainmenu { background-position: -85px 0px; }
.logo { background-position: -128px 0px; }
.prodcancel { background-position: -171px 0px; }


/* Setting position to allow text for the mobile button which opens the product display section or mannequin area. Whilst in mobile we should set a number for how many products are in there so people know there is something to see if they click the icon */

.mannequin {
	background-position: 0px 0px;
	width: 16px !important;
	height: 17px !important;
	padding: 6px 9px 17px 15px;
	text-align: center;
}

/* Formatting the silver sub-menu bar and again allowing the buttons to expand or contract to fit the space that is available to them. */

.sub_menu {
  background-color: #fff;
  box-shadow: 0 -30px 15px 0 #939393 inset,0 2px 5px 2px #939393 inset,0 2px 2px #fff;
  height: 69px;
  padding: 0;
  border-radius: 6px;
  border: solid 2px #666a80;
}

.sub_menu ul li {
	float: left;
	width: 12.5%;
	height: 69px;
	margin: 0% -4px 0% 0%;
	padding: 0;
	border-right: 4px solid rgba(0,0,0,.15);
}

.sub_menu ul li.subnav_end {
	border: 0px;
	margin: 0%;
}

.sub_menu ul li a{
	display: block;
	width: 69px;
	height: 69px;
	margin: 0px auto;
	padding: 0px;
	color: #fff;
}

/* background for sub menu buttons using the existing sprite */

.sub_menu .oic75 {
  background-clip: padding-box;
  background-image: url(../images/icons_75_75_sprite.png);
  background-repeat: no-repeat;
}

/* positions of all buttons using this sprite */

.sub_menu .oic75_randomiser { background-position: -1px -525px; }
.sub_menu .oic75_autofill { background-position: -76px -525px; }
.sub_menu .oic75_filter_wardrobe { background-position: -1px 0px; }
.sub_menu .oic75_filter_likes { background-position: -76px -78px; }
.sub_menu .oic75_filter_loves { background-position: -1px -153px; }
.sub_menu .oic75_filter_favs { background-position: -75px -151px; }
.sub_menu .oic75_filter_recent { background-position: -1px -228px; }
.sub_menu .oic75_refresh { background-position: -76px -228px; }

/* Formatting for the mobile search and menu section */

.menu-options,
.search-options {
  display: none;
  padding: 0;
  font-family: Helvetica;
  font-size: 1.2em;
  font-weight: bold;
  color: #000;
  margin-bottom: 30px;
}

.menu-options ul,
.search-options ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  background-color: #CCC;
}

.menu-options > ul > li,
.search-options > ul > li {
	display: block;
	margin: 0% 0% 0% 0%;
	padding: 5px 2% 5px 2%;
	border-bottom: solid 2px #CCC;
	background-color: #EEE;
	color: #000;
}

.menu-options > ul > li:hover,
.search-options > ul > li:hover {
	border-bottom: solid 2px #CCC;
	background-color: #DDF;
	color: #000;
}

.sub-menu-options {
	margin: 0;
	padding: 0;
}

.sub-menu-options li {
	display: block;
	width: 86%;
	margin: 0% 0% 0% 10%;
	padding: 5px 2% 5px 2%;
	border-bottom: solid 2px #CCC;
	background-color: #FFF;
	color: #888;
	font-size: 1em;
	font-weight: 100;
}

.sub-menu-options li:hover {
	background-color: #0009FF;
	color: #FFF;
	font-size: 1em;
	font-weight: 100;
}

.sub-menu-options li.selected {
	border-bottom: solid 2px #000;
	background-color: #888;
	color: #FFF;
	font-size: 1em;
	font-weight: 100;
}

/* formatting for the side-scrolling a-z buttons for mobile */

.brand-atoz,
.retail-atoz {
	height: 60px;
}

.brand-atoz > ul,
.retail-atoz > ul {
	float: left;
	height: 35px;
	list-style-type: none;
	margin: 5px 0px;
	padding: 0;
}

.brand-atoz > ul > li,
.retail-atoz > ul > li {
	display: inline-block;
	width: 30px;
	height: 25px;
	margin: 0% 5px;
	padding: 5px;
	border-bottom: solid 2px #CCC;
	background-color: #FFF;
	color: #888;
	font-size: 1em;
	font-weight: 100;
	text-align: center;
}

.search-filters > ul {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #FFF;
	border-bottom: solid 2px #CCC;
}

.search-filters > ul > li  {
	float: left;
	display: inline-block;
	margin: 5px;
	padding: 2px;
	background-color: #FFF;
	color: #888;
	font-size: 0.8em;
	font-weight: 100;
}

/* formatting for tags which appear when filters have been added.  These tags represent the filters and can be clicked on to remove the tag and filter. */

.search-filters > ul > li.filtag  {
	cursor: pointer;
	float: left;
	display: none;
	margin: 5px 2px;
	padding: 1px 20px 1px 4px;
	background-color: #EEE;
	border: solid 2px #CCC;
	color: #888;
	font-size: 0.8em;
	font-weight: 100;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	background-image: url(../images/tag-close.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 100% 50%;
}

.filtag {
	display: none;
}

/* container for keyword search and resulting input box and buttons */

.keyword-container {
text-align: center;
}

input[type=text]#keyword-search  {
  display: inline-block;
  margin: 5px auto;
  border: 1px solid #dadada;
  color: #858585;
  font-size: 1em;
  outline: 0 none;
  padding: 15px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 1px 1px 3px #e5e5e5 inset;
  font: 100% Verdana,Geneva,sans-serif;
  margin: 4px 0px;
  width: 200px;
}

.ot_submit {
   border: 0px;
}

.keyword-container button {
	margin: 20px;
}


/* Button formatting which appears at the bottom of the menus to remove the menu */

.menu-hide {
	width: 150px;
	margin: 0px auto;
	padding: 5px;
	font-family: Helvetica;
	font-size: 1em;
	font-weight: bold;
	color: #000;
	text-align: center;
	border-top: 0px;
	border-left: solid 2px #CCC;
	border-right: solid 2px #CCC;
	border-bottom: solid 2px #CCC;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: #B8B8B8;
}

/* Shelf formatting for products */

.shelves {
	width: 100%;
	margin: 0%;
	padding: 0%;
}

.shelf {
	height: 140px;
}

.product-list,
.shelf_left,
.shelf_right {
	height: 140px;
}

/* setting up space for products on shelves */

.product-list ul {
	height: 140px;
	list-style-type: none;
	margin: auto 0% auto 0%;
	padding: 0%;
	white-space: nowrap
}

.product-list ul li {
	display: inline-block;
	margin: 0% 10px 0% 0%;
}

.product-list ul li a{
	display: block;
	width: 130px;
	height: 130px;
	margin: 5px 0%;
}

.product-list ul li a img{
	width: 130px;
	height: 130px;
}

/* Shelf left and right button areas for desktop */

.shelf_left {
	float: left;
	width: 75px;
	margin: 0px 0px 0px 10px;
}

.shelf_right {
	float: right;
	width: 75px;
	margin: 0px 10px 0px 0px;
}

/* Setting up icons for desktop shelves using existing sprite */

.oic58 {
  width: 58px;
  height: 58px;
  cursor: pointer;
  background-image: url(../images/icons_58_58_sprite.png);
  background-repeat: no-repeat;
  margin: 6px auto;
}

.oic58_arrow_left { background-position: 0px 0px; }
.oic58_grid { background-position: 0px -580px; }
.oic58_arrow_right { background-position: -58px 0px; }
.oic58_randomiser { background-position: -58px -116px; }
.oic58_save { background-position: -58px -174px; margin: 0px; }

/* Shelf trays fitting below the shelves; setting them up in a mobile style for easier viewing on those devices. */

.tray {
	width: 100%;
	background-color: #0005c0;
	box-shadow: 0px -16px 12px 0px #000088 inset;
	font-family: Helvetica;
	font-size: 0.8em;
	font-weight: 100;
	color: #FFF;
	border-radius: 6px;
	margin: 0%;
	padding: 0%;
}

/* setting small icons for the left and right */

.tray ul {
	height: 30px;
	list-style-type: none;
	margin: auto 0% auto 0%;
	padding: 0%;
}

.tray ul li {
	display: inline-block;
	height: 24px;
	margin: 3px 2%;
	padding: 0px;
}

.tray ul li.traygrid,
.tray ul li.traysearch {
	width: 24px;
	min-width: 24px;
	max-width: 10%;
}

.tray ul li a.shelf-search {
	display: block;
	width: 24px;
	height: 24px;
}

.tray ul li.traygrid {
	float: right;
}

.tray ul li.traysearch {
	float: left;
}

/* Setting so that the information on what the shelf contains will be in the middle */

.tray ul li.trayinfo {
	text-align: center;
	vertical-align: middle;
	margin: 3px auto;
	position: absolute;
	left: 12%;
	right: 12%;
}

.tray ul li.trayinfo p{
	margin: 5px 0px;
	color: #FFF;
	vertical-align: middle;
}

.tray a{
	color: #FFF;
}

/* Grid and search icons at 25% size of the actual sprite to be clearer on mobile devices. */

.grid, .shelf-search {
  background-image: url('../images/tray-sprite-x4.png');
  background-repeat: no-repeat;
  background-size: 49px;
}

.grid { background-position: 0px 0px; }
.shelf-search { background-position: -25px 0px; }

/* hide the product information and checkout areas by default */

.product-information,
.checkout {
	display: none;
}

/* setting silver bar styling for mobile as default here.  This contains the retailer and brand buttons. */

.product_sub_menu {
  height: 50px;
  background-color: #fff;
  box-shadow: 0 -32px 12px 0 #939393 inset,0 2px 5px 2px #939393 inset,0 2px 2px #fff;
  padding: 0;
  border-radius: 6px;
  font: 1em Helvetica;
}

/* Puts retailer and brand side by side*/

.menu-retailer {
	float: left;
	width: 50%;
	margin: 0% -4px 0% -2px;
	padding: 0;
	border-right: 4px solid rgba(0,0,0,.15);
	text-align: center;
}

.menu-brand {
	width: 50%;
	text-align: center;
	overflow: hidden;
	margin-right: -2px;
}

.retail_icon, .brand_icon { background-position: -0px -580px; }
.retail_select { background-position: -0px -713px; }
.brand_select { background-position: -0px -645px; }

.retail_icon,
.brand_icon {
	float: left;
	width: 58px;
	height: 58px;
	margin: 5px 0px 6px 5px;
}

.retail_name,
.brand_name {
	display: inline-block;
	height: 19px;
	margin: 0px;
 	padding: 25px 0;
	color: #00e;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
}

.retail_select,
.brand_select {
	float: right;
	width: 58px;
	height: 69px;
	height: 58px;
	margin: 5px 0px 6px 0px;
}

/* More information button */

.prod-more-info {
	display: block;
background: linear-gradient(180deg,#6666c2 30%,#9595e6 70%) repeat scroll 0 0 transparent;
  background-color: #b7b7e3;
  box-shadow: 0 4px 4px #4b4b90 inset,0 -10px 15px #9595e6 inset,0 0 2px #000;
  border-radius: 15px 15px 15px 15px;
  color: #fff;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0px auto;
  padding: 8px 10px;
  text-align: center;
  width: 180px;
}

.dem_c1 {
  margin: 5px;
  color: #00e;
  font: 1.2em verdana;
  text-align: center;
}

.product-description span {
  color: #020000;
}

.product-description .err {
  color: #f00 !important;
}

.product-description .desc {
  font: 1em verdana;
  overflow: auto;
  max-height: 85px;
}

/* Setting sprite up for social and rating buttons */

.oic50 {
  background-image: url(../images/icons_50_50_sprite.png);
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

ul.icons_area,
ul.stars_area,
ul.avg_stars_area {
	list-style-type: none;
	text-align: center;
	vertical-align: middle;
	margin: 0px auto;
	padding: 0px;
	width: 70%;
}

.icons_area li {
	float: left;
	width: 25%;
	margin: 0px;
	padding: 0px;
}

li .oic50 {
  margin: 0 auto;
  display: inline-block;
}

.icons_area p {
  margin: 0px auto;
  padding: 0;
  text-align: center;
  font: 1em Verdana,Geneva,sans-serif;
  display: block;
}

.oic50_like { background-position: -50px 0; }
.oic50_love { background-position: 0 -50px; }
.oic50_addwardrobe { background-position: 0 -100px; }
.oic50_share { background-position: -50px -147px; }
.oic50_trash { background-position: 8px -202px; }
.oic58_ratingoff { background-position: -8px -243px; }



ul.horlistlft, ul.horlist, ul.horlistrgt {
	list-style-type: none;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.stars_area li,
.avg_stars_area li {
	float: left;
	width: 20%;
}

.stars_area li i,
.avg_stars_area li i {
	display: block;
	width: 40px;
}

.rating_star {
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-image: url(../images/icons_58_58_sprite.png);
  background-repeat: no-repeat;
  margin: 5px auto;
}

/* Making sure the buttons stay below the information if there is a lot of information */

.product-alternative{
overflow: auto;
clear: both;
}

/* Setting up product information buttons */

.product_info_header {
	overflow: hidden;
	list-style-type: none;
	margin: auto 0% auto 0%;
	padding: 0%;
}

.product_info_header li {
box-sizing: border-box;
  padding: 10px;
  display: inline-block;
  float: left;
  border-radius: 8px 8px 0 0;
  width: 24%;
  margin: 5px 1% 0px 0px;
  font: 1em verdana;
  font-weight: bold;
  background-color: #fff;
  background-image: none;
  box-shadow: 0 -14px 9px 0 #939393 inset,0 3px 5px 2px #939393 inset,0 2px 2px #fff;
  cursor: pointer;
  text-align: center;
  }

.select_product_info {
  color: #fff;
  background-color: #babab7 !important;
  background-image: none !important;
  box-shadow: 0 -14px 9px 0 #939393 inset,0 3px 5px 2px #939393 inset,0 2px 2px #fff;
  cursor: auto;
}

.product_more_info .select_product_info {
  color: #fff;
  background-color: #babab7 !important;
  background-image: none !important;
  box-shadow: 0 -14px 9px 0 #939393 inset,0 3px 5px 2px #939393 inset,0 2px 2px #fff;
  cursor: auto;
}

/* adding a bottom margin so the products can be seen easily */

#product_more_info_content {
	overflow: hidden;
	margin-bottom: 2em;
}

/* Hide the containers of the buttons not selected yet */

#alternative,
#review,
#offer {
	display: none;
	color: #363636;
	font: 0.8em Verdana,Geneva,sans-serif;
}

#review_bar_rating {
	float: left;
	width: 50%;
}

#review_bar_rating table {
	margin: 0px auto;
}

#review_star_rating {
	overflow: hidden;
	margin-left: 10px;
}

/* Setting the review bar ratings up */

.rating_bar {
  height: 20px;
  width: 181px;
  margin: 0 auto;
  background-color: #fff !important;
  box-shadow: 0 -7px 6px 0 #bab6b6 inset,0 5px 5px 1px #bab6b6 inset,0 7px 18px #fff;
  border-radius: 34px;
  border: 2px solid #e6db47;
}

ul.avg_stars_area {
	margin: 0px !important;
}

.rating_bar_progress {
  height: 20px;
  overflow: hidden;
}

.totalreview {
	vertical-align: middle;
	line-height: 50px;
	font-weight: bold;
	display: inline-block;
}

p.fivestar {
	margin: 0px;
	width: 70%;
	text-align: center;
	clear: left;
}

p#customer_review {
  color: #00e !important;
}

#offer {
text-align: center;
}

/* Setting up the checkout area */

.checkout {
font: 1em Verdana,Geneva,sans-serif;
color: #000;
}

.checkout-menu {
	overflow: hidden;
	margin: 0px 0px 15px 0px;
}

.checkout-menu p{
	display: inline-block;
}

.oic58_save {
	float: left;
}

/* Setting the list of products in the checkout to be full width */

.checkout-list {
	width: 100%;
}

/* Checkout name of collection box*/

.checkout-menu input[type=text] {
  border: 1px solid #dadada;
  color: #858585;
  font-size: 1em;
  outline: 0 none;
  padding: 15px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 1px 1px 3px #e5e5e5 inset;
  font: 100% Verdana,Geneva,sans-serif;
  margin: 4px 0px;
  width: 200px;
}

/*checkout links and cancellation bar */

.checkout-menu ul {
	height: 58px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.checkout-menu ul li {
	display: inline-block;
	height: 58px;
	margin: 0px 2%;
	padding: 0px;
	vertical-align: middle;
}

.menu-checkoutsave,
.menu-checkoutshare,
.menu-checkoutclear {
float: left;
}

.menu-checkoutcancel{
float: right;
}

/*cancel checkout button*/

.checkoutcancel{
	display: block;
	margin: 0;
	background-size: 318px;
	width: 58px;
	height: 58px;
	background-position: -255px 0px;
}

/* share collection */

.oic50_collectionshare {
margin: 4px 0px 4px 0px;
width: 50px;
height: 50px;
background: url(../images/icons_50_50_sprite.png);
background-repeat: no-repeat;
background-position: -50px -147px;
cursor: pointer;
}

/* clear collection, using trashcan instead of button to be more mobile friendly and create more space to work with for the input box */
.oic50_checkoutclear {
margin: 4px 0px 4px 0px;
width: 50px;
height: 50px;
background: url(../images/icons_50_50_sprite.png);
background-repeat: no-repeat;
background-size: 136px;
background-position: 2px -282px;
}

.price p{
	margin: 0px;
}

.rgt {
text-align: right;
}

.err {
	color: #F00;
}

.bld {
	font-weight: bold;
}

/* buy now button, now smaller */

table .outfitsave_itemrow .ot_btn_blue {
  display: block;
  width: 70px;
  font-size: 0.8em;
  white-space: pre;
  margin: 0 !important;
}
.ot_btn_blue {
  border-radius: 15px 15px 15px 15px;
  color: #fff;
  font-family: Verdana;
  font-weight: bold;
  padding: 8px 10px;
  text-align: center;
  background: linear-gradient(180deg,#6666c2 30%,#9595e6 70%) repeat scroll 0 0 transparent;
  background-color: #b7b7e3;
  box-shadow: 0 4px 4px #4b4b90 inset,0 -10px 15px #9595e6 inset,0 0 2px #000;
}

.outfitsave_itemprice{
	width: 115px;
}