@charset "UTF-8";
/* CSS Document */

body {
	font: 13px/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 5px;
	padding-left: 5px;
	
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
	list-style: none;
}

a img { 
	border: none;
	
}

a:link {
	color:#000000;
	text-decoration: underline;
	 
}


a:hover a:active, a:focus{
	color: #666666;
	text-decoration: none;
	outline: 0;
	border: 0;
}

#container {
	max-width:1100px;
	min-width:1060px;
	margin: 0 auto;
	background-color:#ffffff;
	font-size:11px;
	overflow-x: hidden;
	 
}


/* header */

#header {
	width:100%;
	max-width:1100px;
	min-width:1060px;
	margin: 0 auto;
	position:fixed;
	top: 0;
	background-color:#FFF; /* #e6f3f0 */
	z-index: 1;
}

#logo{
	font: 30px Lucida Sans Unicode, Lucida Grande, sans-serif;
	float:right;
	color:#FE0835;
	line-height:110%;
	padding: 4px 3px 2px 0;
	font-weight: bold;
	text-decoration: none;
	
	
}


.shopnav {
	color:#FFFFFF;
	float:left;
	padding: 0 2px 2px 1px;
	margin: 0px 3px 4px 3px;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	
}

.shopnav a:link{
	color:#FFFFFF;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}

.shopnav a:visited{
	color:#FFFFFF;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
}


.shopnav a:hover {
	color: #FFFFFF;
	font-size: 14px;
	font-weight:bolder;
	text-decoration:none;

}


/* content area */

#content {
	max-width:1090px;
	min-width:1060px;
	min-height:600px;
	margin-top: 100px;
	padding: 5px;
	z-index: 1;
	font-size:11px;
}

.subshopnav {
	min-width:1000px;
	font-size: 15px;
	font-weight:bold;
	color: #404040;
	padding: 5px;
	margin-bottom: 20px;
	background-color: #FFFFFF;
	border: #404040 thin solid;
	text-decoration:none;

}

.subshopnav a:link, a:visited{
	color: #404040;
	text-decoration:none;
}

.subshopnav a:hover {
	color:#000;
	
}

#content p {
	font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;

}



#content table {
	border: #CCC solid thin;
	border-left:#CCC solid thin;
	border-right:none;
	border-bottom:none;
	margin-bottom: 15px;
}

#content td {
	border-right: #CCC solid thin;
	border-bottom: #CCC solid thin;
	font-size:12px;
	
}


.caption {
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height: normal;
	padding: 2px 4px;
	width:auto;	

}

.caption:first-line{
	font-weight:bold;
	font-family: Verdana, Geneva, sans-serif;
}


.img {
	padding: 6px;
	width: 250px;
}

.snap img{
	width: 80px;
	height: 121px;
	border: 0;
	
}

a.anchor {
	position:relative;
	top:-120px;
	text-decoration:none;

}

.normal {
	font-weight:normal;

}

.big {
	font-size:16px;
	font-weight:bold;
}

.big2 {
	font-size:25px;
	font-weight:bold;
}

.colour {
	color:#FE0835;
	font-size:11px;

}


a.colour {
	color: #FE0835;
	font-size:11px;
	text-decoration:underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.outers {
	color:#FFFFFF;
	text-align:center;
	float:right;
	padding: 1px;
	background-color:#FE0835;
	

}



.randombox{
	width: 350px;
	display:inline;
	background-color:#fff;
	padding: 5px;
	margin-bottom:30px;
	

	
	
	
}
.thumbnailbox {
	width:100%;
	height: 180px;
	overflow-x:auto;
	overflow-y:hidden;
	white-space: nowrap;
}

.thumbnailbox img {
	width:200px;
	margin:2px;
	
	
	
}


/* scroller  */

#scroller {
	width: 9000px;
	overflow-y:hidden;
	overflow:auto;
}

.work {
	padding:3px;
	vertical-align:middle;
	cursor:pointer;
	float:left;
	font: 13px/1.4 Verdana, Arial, Helvetica, sans-serif;
}

.work p {
	padding-left: 5px;
}

#scroller img {
	padding:3px;
	display: inline-block;
	vertical-align:middle;
	cursor:pointer;
	clear:both;
}
.color {
	color: #D70D0D;
}


/* footer */

#footer {
	padding: 5px;
	clear:both;
	background-color:#E6F3F0;
	font-size: 11px;
}

#footer p {
	font-size: 11px;
	
}



/* other styles */

.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    text-align:justify;
	float: right;
	clear: right;

}

.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    text-align:justify;
	float: left;
	clear: left;
	
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*tooltip*/

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #EDEDED;
    border-radius: 5px;
    color:#353535;
	font-size:10px;
    content: attr(title);
    right: 0%;
    padding: 5px 15px;
    position: absolute;
    bottom: -380px;
    width: 220px;
	z-index:98;
	text-decoration:none;
}


/*projmarmalade*/

#marm a img { display:none; }

#marm a:hover img { display:block; position: absolute; top: 280px; left:600px}

.marmalade img {
	width: 160px;
}

#circle {
	height: 15px;
	width: 15px;
	float:right;
	background-color: #F00;
	border-radius: 50%;
	margin-top: 2px;
	margin-right:70px
	
}

#circle2 {
	height: 15px;
	width: 15px;

	background-color: #F00;
	border-radius: 50%;
	margin-top: 2px;

}

#circlereserve {
	height: 15px;
	width: 15px;
	float:right;
	background-color: #03F;
	border-radius: 50%;
	margin-top: 2px;
	margin-right:70px
	
}

#circlereserve2 {
	height: 15px;
	width: 15px;

	background-color: #03F;
	border-radius: 50%;
	margin-top: 2px;
	
}

.imagebox {
	width: 220px;
	padding: 5px;
	margin-right:200px;
	margin-left: 900px;
	margin-bottom: 100px;		
}



hr {
background-color:#CCC;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;

}

mark {
  background-color: #A3FFC6
 
}
 
 

/* test styles */

#categories {
	float:left;
	clear:both;
	padding-left: 3px;
	margin-bottom: 7px;
	
	
}

#categories ul {
	margin:0;
	padding:0;
	list-style:none;
	display: block;
		
}

#categories ul li {
	display: block;
	position: relative;
	float: left;
	margin: 0 3px;
	color:#FE0835;
	
	
	
}

#categories ul li a {
	display: block;
	position: relative;
	float: left;
	text-decoration:none;
	color:#FE0835;
	
	
	
}

#categories li ul li a {
	display:block;
	padding:0 5px;
	margin-bottom: 2px;
	width:10em;
	text-decoration: none;
	background: #FE0835;
	color: #fff;
	zoom: 1;
	
}

#categories li ul {
	display:none;
	z-index:3;

}

#categories li:hover ul {
	display:block;
	position: absolute;
	z-index:3;
}