/***
 * Menu buttons colours
 */

#menu-top li a
{
	background-color: #ddd;     /* Default gray      */
	background-color: #c9a821;  /* Christmas gold    */
	background-color: #f4797d;  /* Valentine red     */
	background-color: #f8ec62;  /* Spring yellow     */
	background-color: #faee72;  /* Spring yellow     */
	background-color: #d81424;  /* Mother's Day red  */
	background-color: #80c4f3;  /* Father's Day blue */
	background-color: #85cd48;  /* Summer green      */
	background-color: #ffa500;  /* Halloween orange  */
	background-color: #036d00;  /* Christmas green   */
	background-color: #b0b0b0;  /* Winter silver     */
	background-color: #d5d5d5;  /* 2020              */
}

#menu-top li a:hover,
#menu-top li.selected a,
#categories li.selected > a
{
	background-color: #aaa;
	background-color: #af8827;
	background-color: #d73238;
	background-color: #e8d800;
	background-color: #7400af;
	background-color: #5478ff;  /* Father's Day blue */
	background-color: #52b336;  /* Summer green      */
	background-color: #da5000;  /* Halloween orange  */
	background-color: #910000;  /* Christmas red     */
	background-color: #c9a821;  /* Winter gold       */
}


/***
 * Skeleton
 */

.mobile-only
{
	display: none
}

body
{
	width: 60.5em;
	margin: 1em auto;
	background-color: #f5f3f4;
	color: #000;
	font-family: Arial, sans-serif;
	font-size: 110%
}

#body-testing-top-left,
#body-testing-top-right,
#body-testing-bottom-left,
#body-testing-bottom-right
{
	position: fixed;
	margin: 0;
	padding: .125em;
	font-size: 100%;
	color: #b00;
	font-weight: normal
}

#body-testing-top-left
{
	top: 0;
	left: 0
}

#body-testing-top-right
{
	top: 0;
	right: 0;
}

#body-testing-bottom-left
{
	bottom: 0;
	left: 0
}

#body-testing-bottom-right
{
	bottom: 0;
	right: 0;
}

#left, #centre, #right
{
	float: left
}

#left
{
	width: 7.5em;
	position: relative
}

#centre
{
	width: 45em
}

#right
{
	width: 8.25em;
	position: relative;
	margin-left: -.33em
}

#bottom
{
	clear: left;
	margin-left: 15%;
	margin-right: 13%;
	overflow: hidden
}

img {
	border: none
}

.hidden
{
	display: none !important
}

.invisible
{
	visibility: hidden !important
}

/***
 * Default form styling
 */

input,
select,
textarea,
button
{
	font-size: 90%;
	border: 1px solid #666;
	padding: .2em;
	font-family:  Arial, sans-serif
}

button,
input[type=submit]
{
	background-color: #ddd
}


/***
 * Mobile header
 */

#mobile-header
{
	display: none
}


/***
 * Top menu
 */

#menu-top
{
	list-style-type: none;
	font-size: 90%;
	padding-left: 0;
	margin-top: 2em;
	margin-top: 1em;
	overflow: hidden;
	margin-left: 1.75em;
	margin-bottom: 1.33em
}

#menu-top li
{
	float: left
}

#menu-top li a
{
	display: block;
	width: 10.55em;
	width: 10.6em;
	margin-right: 1.33em;
	text-align: center;
	color: #000;
	text-decoration: none;
	font-size: 105%;
	font-size: 100%;
	font-weight: bold;
	padding: .55em 0;
	border-radius: .33em
}

#menu-top li.last a
{
	margin-right: 0
}

#menu-top li:last-child a
{
	margin-right: 0
}


/***
 * Left
 */

#categories
{
	list-style-type: none;
	margin-left: 0;
	padding-left: 0
}

/* Site name */

#categories #categoriesName
{
	margin-bottom: .5em
}

#categories #categoriesName a
{
	text-decoration: none;
	color: #000;
	font-size: 100%;
	padding: 0
}

/* Site logo */

#categories #categoriesLogo
{
	margin-bottom: .85em
}

#categories #categoriesLogo a
{
	padding: 0
}

/* Categories */

#categories #categoriesDIY
{
	margin-top: 1em
}

#categories #categoriesDIY,
#categories #categoryDIY
{
	padding: 0
}

#categories #categoriesAbout
{
	margin-top: 1em
}

/* Links */

#categories > li a
{
	color: #000;
	text-decoration: none;
	font-size: 90%;
	display: inline-block;
	padding: .125em 0
}

#categories a:hover
{
	background-color: #ccc
}

#categories #categoriesLogo a:hover
{
	background-color: inherit
}

#categories ul.submenu a:hover
{
	background-color: #999
}

#categories > li.main
{
	padding: .2em 0
}

#categories > li.selected > a
{
	padding: .25em .4em;
	border-radius: .25em
}

/* Submenu (level 1) */

#categories > li > ul
{
	list-style-type: none;
	margin-bottom: .25em;
	padding-left: 0;
	margin-top: .25em;
	margin-left: .75em
}

#categories > li > ul:not(.submenu) > li > a
{
	margin: .1em 0;
	padding: .1em .2em;
	border-radius: .25em
}

/* Submenu (level 2) */

#categories > li > ul > li > ul > li
{
	margin-right: .75em
}

#categories > li > ul > li > ul > li > a
{
	background-color: #e4e4e4;
	margin: .125em;
	border-radius: .25em;
	padding: .175em .33em
}

/* :hover submenu (level 1) */

#categories > li > ul.submenu
{
	display: none;
	list-style-type: none;
	padding-left: 0;
	position: absolute;
	margin-left: 8.33em;
	margin-top: -1.5em;
	background-color: #e8e8e8;
	background-color: #fff;
	font-size: 90%;
	border: 1px solid #999;
	border-radius: .25em;
	white-space: nowrap;
	text-align: left
}

#categories > li:hover > ul.submenu
{
	display: block
}

#categories > li > ul.submenu > li
{
	padding: 0 .33em
}

#categories > li > ul.submenu > li:first-child
{
	padding-top: .125em
}

#categories > li > ul.submenu > li:last-child
{
	padding-bottom: .125em
}

#categories > li:hover > ul.submenu > li:hover
{
	background-color: #ccc
}

#categories > li:hover > ul.submenu > li:hover > a
{
	display: block;
	width: 100%;
	background-color: #ccc
}

/* Submenu (level 2) */

#categories > li > ul > li > ul
{
	list-style-type: none;
	font-size: 90%;
	padding-left: 1em
}

#categories > li > ul > li > ul > li.selected > a
{
	/*background-color: #ccc*/
}

/* :hover submenu (level 2) */

#categories > li > ul > li > ul.submenu
{
	display: none;
	list-style-type: none;
	padding-left: 0;
	position: absolute;
	margin-left: 5em;
	margin-top: -1.2em;
	background-color: #e8e8e8;
	background-color: #fff;
	border: 1px solid #999
}

#categories > li > ul > li:hover > ul.submenu
{
	/*display: block;*/
	font-size: 90%
}

#categories > li > ul > li:hover > ul.submenu > li
{
	padding: 0 .2em
}

#categories > li > ul > li:hover > ul.submenu > li:hover
{
	background-color: #999
}

/* Social media */

#socialMedia
{
	margin-top: 1.67em;
	margin-bottom: .25em
}

#socialMedia a
{
	display: block;
	margin-bottom: .33em;
	border-radius: .25em
}

#socialMedia img
{
	width: 33px;
	height: 33px
}


/***
 * Right
 */

ul#flags-top
{
	margin: 1.25em 0 0 0;
	padding: 0;
	list-style-type: none
}

ul#flags-top li
{
	display: inline
}

ul#flags-top li.first
{
	margin-right: .33em
}

ul#flags-top li img
{
	border-radius: .125em
}

/* Display login or username */

#user-top
{
	display: inline-block;
	vertical-align: top;
	margin-top: 0;
	margin-bottom: 1.5em
}

#user-top-login
{
	font-size: 80%
}

/* Top search form */

#searchForm
{
	border: 1px solid #666;
	border-radius: .33em;
	overflow: hidden;
	background-color: #fff;
	margin-right: 1.25em
}

#searchForm input
{
	float: left;
	color: #000;
	width: 5em;
	border-width: 0;
	padding: .33em
}

#searchForm div
{
	float: right;
	font-size: 125%;
	transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-o-transform: rotate(315deg)
}

#searchForm div:hover
{
	cursor: pointer
}

#searchForm input[type=submit]
{
	height: 30px;
	width: 17px;
	background: url(../images/buttons/magnifier.png);
	border-width: 0;
	cursor: pointer;
	padding: 0 .25em;
	margin-left: .5em;
	background-color: #fff
}

/* Labels on right column */

#filter-labels-top
{
	font-size: 90%;
	margin-top: 1em;
	width: 75%
}

/* Rounded corners for everyone!  \o/ */
#filter-labels-top *
{
	border-radius: .25em
}

#filter-labels-top ul
{
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	overflow: hidden;
	margin-bottom: 1.75em
}

#filter-labels-top ul:last-child
{
	margin-bottom: 0
}

#filter-labels-top ul li
{
	float: left
}

#filter-labels-top ul.color li
{
	width: 1.51em;
	height: 1.51em
}

#filter-labels-top a
{
	color: #000;
	background-color: none
}

#filter-labels-top ul li span
{
	margin: 4px !important
}

#filter-labels-top ul li.selected span
{
	border: 3px solid #777 !important;
	margin: 2px !important
}

#filter-labels-top ul.color span
{
	border-color: #000
}

#filter-labels-top ul.color li.selected span
{
	border-color: #000 !important
}

#filter-labels-top ul.size li:hover span,
#filter-labels-top ul.gender li:hover img,
#filter-labels-top ul.theme li:hover span
{
	background-color: #ccc
}

#filter-labels-top ul.color li:hover span
{
	opacity: .5
}

#filter-labels-top ul.color span
{
	display: block;
	width: 14px;
	height: 14px;
	border: 1px solid #000;
	border-radius: 50%
}

#filter-labels-top ul.size span
{
	display: inline-block;
	background-color: #e4e4e4;
	padding: .15em;
	margin: 0 .1em
}

#filter-labels-top ul.gender li
{
	background-color: #e4e4e4;
	margin: 0 .2em .2em .2em;
}

#filter-labels-top ul li.selected
{
	border-width: 3px;
	margin-top: 0
}

#filter-labels-top ul.gender img
{
	padding: .2em .2em 0 .2em
}

#filter-labels-top ul.theme li
{
	margin-bottom: .5em
}

#filter-labels-top ul.theme li a span
{
	display: inline-block;
	background-color: #e4e4e4;
	padding: .15em;
	margin: 0 .1em !important
}


/***
 * Overlay default styling
 */

div.overlay
{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	background: url(../images/misc/opaque.png);
	text-align: center;
	z-index: 10
}

div.overlay > div.draggable
{
	display: inline-block;
	position: relative;
	text-align: left;
	margin: 4em auto 0 auto;
	border: 1px solid #000;
	border-radius: .5em;
	cursor: move
}

div.overlay .overlayClose
{
	float: right;
	position: relative;
	left: -2em
}

div.overlay .overlayClose img
{
	width: 18px;
	height: 18px;
	padding: .5em
}

div.overlay div.overlayInner
{
	position: static;
	background-color: #fff;
	border-radius: .5em;
	padding: 0 1em;
	cursor: default;
	overflow: hidden
}


/***
 * Help boxes
 */ 

.help
{
	border: 1px solid #000;
	border-radius: .25em;
	position: absolute;
	margin-left: -1px;
	margin-top: -1px;
	background-color: #eee;
	min-width: 10em;
	max-width: 15em;
	padding: 0 .5em;
	font-size: 90%
}

.help p.close
{
	float: right;
	margin-top: .25em;
	margin-left: .5em;
	margin-right: -.5em
}

.help p.close button
{
	height: 15px;
	width: 15px;
	border-width: 0;
	margin-right: .33em;
	background-image: url(../images/buttons/small/remove.png)
}

.help p
{
	margin: .5em 0
}

.help p:last-child
{
	margin-bottom: .5em
}


/***
 * [overlay] Edit Product
 */

/* General overlay layout */

#overlayEdit {
	overflow: auto
}

#overlayEdit h2 {
	color: #666;
	font-weight: normal;
	font-size: 133%;
	text-align: center
}

#overlayEdit h2 span.overlayEdit-title {
	font-weight: bold
}

#overlayEdit iframe {
	display: none
}

/* Language bar */

#overlayEdit ul#myProducts-language {
	list-style-type: none;
	padding-left: 0;
	font-size: 90%;
	margin-bottom: 0
}

#overlayEdit ul#myProducts-language li {
	float: left;
	background-color: #ddf;
	margin-right: -1px;
	z-index: 9
}

#overlayEdit ul#myProducts-language li:last-child {
	margin-right: 0
}

#overlayEdit ul#myProducts-language li a.selected {
	background-color: #aaf;
	border-bottom-color: #aaf !important
}

#overlayEdit ul#myProducts-language li a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: .15em .75em;
	border: 1px solid #000
}

/* Edit product form */

#overlayEdit form {
	float: left;
	clear: left;
	border: 1px solid #000;
	padding: 0 1em;
	margin-top: -1px;
	margin-bottom: 1em
}

#overlayEdit div#modify-left {
	float: left;
	margin-top: 1.5em;
	margin-right: 2em
}

#overlayEdit textarea.modify-description {
	width: 16.5em;
	width: 265px;
	height: 12em;
	margin-top: 0
}

#overlayEdit label {
	float: left;
	width: 7.5em;
	font-size: 90%
}

#overlayEdit .modify-sale-label {
	width: 3em
}

#overlayEdit input.modify-name {
	width: 17.5em
}

#overlayEdit select {
	width: 14.5em !important
}

#overlayEdit option.caption {
	font-style: italic;
	text-align: right
}

#overlayEdit input.modify-price_1,
 input.modify-sale_1 {
	width: 2.5em;
	text-align: right
}

#overlayEdit input.modify-price_2,
#overlayEdit input.modify-sale_2 {
	width: 1.33em
}

#overlayEdit .modify-priceOptions {
	margin-left: 6.5em
}

#overlayEdit .modify-priceOptions input {
	float: left;
	clear: left;
	margin-right: 1em;
	margin-bottom: .75em
}

#overlayEdit .modify-priceOptions label {
	font-size: 90%
}

/* Description items */

p.modify-descItem {
	margin: .5em 0
}

p.modify-descItem textarea {
	width: 16.5em;
	height: 2.3em
}

/* Labels */

div.myProducts-labels {
	float: left;
	clear: right;
	width: 16em;
	font-size: 85%;
	margin-top: 1.75em
}

div.myProducts-labels div {
	float: left
}

div.myProducts-labels p {
	margin: 1em 0 .5em 0;
	font-weight: bold
}

div.myProducts-labels ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
	margin-top: .33em
}

div.myProducts-labels ul li {
	clear: left
}

div.myProducts-labels input {
	width: 1.5em !important;
	float: left;
	border-width: 0;
	margin-right: .5em
}

div.myProducts-labels button {
	width: 1.5em;
	float: left;
	margin-right: .5em;
	border: 1px solid #000;
	margin-top: -1px;
	height: 1.7em;
	background-color: #fff
}

button.checked {
	background-color: #7c7 !important
}


/***
 * Main contact form
 */

#uq-contact h2
{
	font-size: 133%;
	font-weight: normal;
	color: #666
}

#uq-contact fieldset
{
	border-width: 0;
	font-size: 80%
}

#uq-contact p
{
	margin-bottom: 0
}

#uq-contact label
{
	display: inline-block;
	width: 5em;
	vertical-align: top;
	font-size: 125%
}

#uq-contact input[type=text],
#uq-contact textarea
{
	font-family: sans-serif;
	font-size: 110%;
	width: 17.5em
}

#uq-contact textarea
{
	height: 6em
}

#uq-contact input[type=submit]
{
	margin-left: 5em;
	margin-top: .75em;
	margin-bottom: .33em;
	font-size: 125%
}

#uq-contact input[type=submit]:hover
{
	background-color: #ccc;
	cursor: pointer
}


/***
 * [overlay] Login
 */

#overlayLogin h2 { color: #666; font-weight: normal; font-size: 133% }
#overlayLogin form { width: 20em; margin-top: -1.5em; font-size: 90%; }
#overlayLogin form fieldset { width: 25em; border: none }
#overlayLogin form fieldset legend { display: none }
#overlayLogin form label    { width: 7em; float: left }


/***
 * [overlay] Uniq Colours Messages
 */

#uniqMessage { position: fixed; left: 0; top: 0; width: 10em; height: 7em; background: url(../images/misc/opaque.png); z-index: 10 }
#uniqMessage > div { margin: 5em auto; width: 20em; background-color: #fff; padding: 0 1em; color: #333; overflow: hidden; border: 1px solid #000; border-radius: .33em }
#uniqMessage p { font-size: 90% }
#uniqMessage p:first-child { margin-top: 1.5em }
#uniqMessage button { margin-top: .25em; margin-bottom: 1.25em; margin-right: 1em; padding: .33em .67em; background-color: #c9a821; border-radius: 5em; cursor: pointer }
#uniqMessage button:hover { background-color: #e3be25 }
#uniqMessage button#uniqMessage-btn-Ok { width: 3em; color: #000 }
/* Cancel button */
#uniqMessage button#uniqMessage-btn-cancel { float: right; color: #000 }
/* Show Shopping Cart button */
#uniqMessage button#uniqMessage-btn-shoppingCart { float: right; color: #000 }


/***
 * [overlay] Change URL
 */

#overlayChangeURL { z-index: 100 !important }
#overlayChangeURL h2 { color: #666; font-weight: normal; font-size: 133% }
#overlayChangeURL p { font-size: 90% }
#overlayChangeURL button { margin-right: .5em }


/***
 * [overlay] Related Products
 */

#overlayRelatedProducts .overlayInner { width: 25em }
#overlayRelatedProducts h2 { color: #666; font-weight: normal; font-size: 133% }
#overlayRelatedProducts h3 { color: #666; font-weight: normal; font-size: 115%; margin-top: 2em }
#overlayRelatedProducts p { font-size: 90% }
#overlayRelatedProducts input[type=submit] { margin-left: .5em }
#overlayRelatedProducts ul { clear: left; overflow: hidden; list-style-type: none; margin-left: 0; padding-left: 0 }
#overlayRelatedProducts ul li { float: left; margin-right: .5em }
#overlayRelatedProducts ul img { border: 1px solid #999 !important }
#overlayRelatedProducts p { margin-top: -1em }


/***
 * [overlay] Links
 */

#overlayLinks h2 { color: #666; font-weight: normal; font-size: 133% }
#overlayLinks h3 { color: #666; font-weight: normal; font-size: 115%; margin-top: 2em }
#overlayLinks p { font-size: 90% }
#overlayLinks ul { clear: left; overflow: hidden; list-style-type: none; margin-left: 0; padding-left: 0; margin-bottom: 0.5em; font-size: 90% }
#overlayLinks ul li { margin-left: 1em }
#overlayLinks ul img { border-width: 0 !important; margin-right: .5em }
#overlayLinks ul a { text-decoration: none }
#overlayLinks form { margin-top: 1.5em }
#overlayLinks label { float: left; width: 6.5em }
#overlayLinks input[type=submit] { margin: 1em 0 }
#overlayLinks p#linksListEmpty { margin-left: 1em; color: #666 }


/***
 * [overlay] Videos
 */

#overlayVideos { overflow: auto }
#overlayVideos h2 { color: #666; font-weight: normal; font-size: 133% }
#overlayVideos h3 { color: #666; font-weight: normal; font-size: 115%; margin-top: 2em }
#overlayVideos p { font-size: 90% }
#overlayVideos ul { clear: left; overflow: hidden; list-style-type: none; margin-left: 0; padding-left: 0; margin-bottom: .5em; font-size: 90% }
#overlayVideos ul li { margin-left: 0; margin-bottom: 1em; overflow: hidden }
#overlayVideos ul img { border-width: 0 !important; margin-right: .5em }
#overlayVideos ul a { text-decoration: none; margin-left: 1em }
#overlayVideos ul embed { float: left; clear: left }
#overlayVideos form { margin-top: 1.5em }
#overlayVideos label { float: left; width: 6.5em }
#overlayVideos #videoURL { width: 35em }
#overlayVideos #videoWidth { width: 2.5em; text-align: center }
#overlayVideos #videoHeight { width: 2.5em; text-align: center }
#overlayVideos textarea { width: 35em; height: 8em }
#overlayVideos input[type=submit] { margin: 1em 0 }
#overlayVideos p#videosListEmpty { margin-left: 1em; color: #666 }


/***
 * [overlay] Photo Manager
 */

#overlayPhoto form { width: 100% }
#overlayPhoto ol { list-style-type: none; margin: 1em .5em 0 .5em; padding-left: 0; text-align: center }
#overlayPhoto ol li { float: left; margin-bottom: 1em }
#overlayPhoto ol li p strong { font-weight: normal; font-size: 115%; color: #666 }
#overlayPhoto ol li div { float: left; height: 150px; margin: 0 1em 1em 1em; overflow: hidden; transition: transform .3s }
#overlayPhoto ol li div.empty { width: 113px; height: 90px; color: #666; padding-top: 60px; border: 1px solid #000; cursor: pointer }
#overlayPhoto ol li img { margin: 0 !important; border: 1px solid #000; cursor: move }
#overlayPhoto ol li .rotation-90deg  { transform: rotate(90deg); border-width: 0 !important }
#overlayPhoto ol li .rotation-180deg { transform: rotate(180deg) }
#overlayPhoto ol li .rotation-270deg { transform: rotate(270deg) }
#overlayPhoto ol li .rotation-90deg img  { border-width: 0; padding: 0 1px }
#overlayPhoto ol li .rotation-180deg img { border-width: 0; padding: 0 1px }
#overlayPhoto ol li .rotation-270deg img { border-width: 0; padding: 0 1px }
#overlayPhoto ol li label { border: 1px solid #000; font-size: 90%; padding: .33em; background-color: #ddd; cursor: pointer }
#overlayPhoto ol li button { cursor: pointer }
#overlayPhoto iframe { display: none }
#overlayPhoto #progressBarBorder { border: 1px solid #000; display: none; margin-bottom: 1em !important }
#overlayPhoto #progressBar { width: 0; background-color: #55a }


/***
 * [overlay] Reject product
 */

#overlayReject { color: #333 }
#overlayReject h2 { font-size: 110% }
#overlayReject p { font-size: 90% }
#overlayReject textarea { width: 20em; height: 8em }

#overlayReject button
{
	margin-top: .25em;
	margin-right: 1em;
	margin-bottom: .25em;
	padding: .33em .67em;
	background-color: #c9a821;
	border-radius: 5em;
	font-size: 100%
}

#overlayReject button:hover
{
	background-color: #e3be25;
	cursor: pointer
}