/*		
		Joe Hankin
		Marjo Distribution Ltd.
		
		Light Blue - #e5ecf9
		Dark Blue -  #9aa6ed
		Dark Red - #a70000
*/



* { 
	margin: 0; 
	padding: 0; 
	}

body { 
	font-family: arial; 
	font-size: 16px; 
	background: #ffffff url(http://images.marjosilver.co.uk/other/background.png) repeat-x top left; width: 100%; 
	}

img { 
	border: 0; 
	margin: 0; 
	padding: 0; 
	}
	
.clear_both { clear:both }



	/* TYPOGRAPHY */

h1 a	{ color: #a70000!important }

a,	
a:visited, 
a:active { 
	text-decoration: underline; 
	font-weight: normal; 
	color: #333333;
	outline: none; 
	}

a:hover { 
	text-decoration: none; 
	font-weight: normal; 
	color: #a70000; 
	}
	
p { 
	font-size: 16px; 
	font-family: arial; 
	color: #333333; 
	line-height: 22px; 
	margin: 20px 0 10px 0; 
	}

.head p,
.heading { 
	margin-top: 0; 
	margin-bottom: 0;
	margin-left: 10px; 
	font-family: georgia, arial; 
	font-size: 28px; 
	line-height: 40px; 
	font-weight: normal; 
	color: #a70000; 
	}

h1 						{ font-family: georgia, arial; font-size: 28px; line-height: 30px; font-weight: normal; font-style: italic; color: #a70000; margin-top: 0; margin-bottom: 0; }
h2 						{ font-family: arial; font-size: 24px; line-height: 26px; font-weight: normal; color: #333333; margin: 0; }
h3 						{ font-family: georgia, arial; font-size: 22px; line-height: 24px; font-weight: normal; color: #333333; margin: 0; }
h4 						{ font-family: arial; font-size: 14px; line-height: 16px; font-weight: bold; color: #333333; margin: 0; }
h5 						{ font-family: georgia, arial; font-size: 28px; line-height: 40px; font-weight: normal; color: #a70000; margin-top: 0; margin-bottom: 0; }
h6 						{ font-family: georgia, arial; font-size: 28px; line-height: 30px; font-weight: normal; color: #a70000; margin: 10px 0 0 0; }


	/* IMAGES */
	
.pictures-left {
	float: left;
	margin: 0 15px 0 0;
	padding: 0;
	border: 3px double #9aa6ed;	
	}


	/* STRUCTURE */

#mainbox			{ width: 948px; height: auto; border: 1px solid #9aa6ed; border-bottom: none; background: #ffffff; padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 0; }
#left-mainbox			{ float: left; width: 600px; height: auto; border: 0 none; background: #ffffff; padding: 10px; margin: 10px; }
.head 				{ width: 100%; height: 50px; padding: 0; margin: 0; border: none; border-bottom: 1px solid #9aa6ed; background: url(http://images.marjosilver.co.uk/other/header.png) repeat-x; }/* Header */

#upper-banner { 
	background: url(http://images.marjosilver.co.uk/banners/upper-banner-2.png) no-repeat; 
	border: 0 none; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: 5px; 
	width: 950px; 
	height: 75px; 
	}

#upper-banner ul { 
	float: left; 
	width: 120px; 
	height: 55px; 
	margin-left: 815px; 
	padding: 5px 0 5px 0;
	list-style-type: none; 
	}
	
#upper-banner ul li { 
	display: block; 
	text-align: right;
	height: 19px; 
	}
	
#upper-banner ul li a { 
	line-height: 14px; 
	font-size: 12px; 
	color: #bbbbbb;
	text-decoration: none;
	}
	
#upper-banner ul li a:hover { 
	line-height: 14px; 
	font-size: 12px; 
	color: #aaaaaa; 
	font-style: italic; 
	}
	
#dropdown { 
	width: 950px; 
	height: 21px;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: 0; 
	margin-top: 5px;
	list-style-type: none;
	position: relative;
	}
	#dropdown li { 
		float: left; 
		width: 149px;
		height: 20px;
		margin-left: 8px; 
		border: 1px solid #9aa6ed; 
		border-bottom: none; 
		}
		#dropdown li#nav-right { width: 151px; }
		#dropdown li#nav-left { 
			width: 151px; 
			margin: 0; 
			}
		#dropdown li a { 
			color: #222; 
			display: block;
			height: 20px; 
			padding-left: 8px;
			background: #ffffff; 
			text-decoration: none; 
			}
			#dropdown li a:hover { 
				color: #333333;
				background: #e5ecf9; 
				text-decoration: none; 
				}
			
	#dropdown ul {
		width: 175px;
		visibility: hidden;
		position: absolute;
		top: 21px;
		left: 153px;
		list-style-type: none;
		z-index: 100;
		}
		#dropdown ul li { width: 175px; }
		#dropdown ul li#nav-bottom { border-bottom: 1px solid #9aa6ed; }
		/* Footer */

#footer {
	clear: both;
	width: 100%;
	height: 255px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 0;
	padding: 20px 0 0 0;
	border-top: 1px solid #9aa6ed;
	text-align: center;
	background: #e5ecf9 url(http://images.marjosilver.co.uk/other/back.png) repeat;
	}
	#footer a {
		font-size: 12px;
		line-height: 14px;
		font-weight: normal;
		text-decoration: none;
		color: #555555;
		}
		#footer a:hover {
			text-decoration: underline;
			color: #333333;
			}
			#footer #copy {
				font-size: 12px;
				text-align: center;
				}
			

#footer ul { 
	list-style-type: none;
	padding-top: 5px; 
	}
	#footer ul li { 
		height: 19px;
		}

#footer-links-wrapper {
	width: 670px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

#left-footer-wrapper {
	float: left;
	width: 485px;
	height: 200px;
	}

#website-links {
	float: left;
	width: 150px;
	height: 75px;
	padding: 5px;
	background: transparent;
	text-align: left;
	}

#company-links {
	float: left;
	width: 150px;
	height: 75px;
	padding: 5px;
	background: transparent;
	text-align: left;
	}

#other-links {
	float: left;
	width: 150px;
	height: 75px;
	padding: 5px;
	background: transparent;
	text-align: left;
	}

#partners {
	clear: left;
	float: left;
	width: 155px;
	height: 90px;
	padding: 5px;
	margin: 10px 0 10px 0; 
	text-align: left;
	}

#address {
	float: left;
	width: 320px; 
	height: 90px; 
	margin: 15px 0 10px 0; 
	text-align: left;
	}
	#address p {
		font-size: 12px;
		line-height: 14px;
		font-weight: normal;
		text-decoration: none;
		text-align: left;
		margin: 3px 0 1px 0;
		color: #555555;
		}
		#address a {
			width: 128px; 
			height: 90px; 
			margin: 0 20px 0 0; 
			display: block;
			float: left;
			}
		
#jewellery-links {
	float: left;
	width: 180px;
	height: 200px;
	margin: 0;
	padding: 5px 0 5px 5px;
	background: transparent;
	border: 0 none;
	text-align: left;
	}/* Products Pages */

#brochure-main {
	width: 250px;
	margin: 10px 10px 20px 10px;
	padding: 250px 0 0 0;
	float: left;
	background: url('http://images.marjosilver.co.uk/other/brochure-thumb.jpg') no-repeat top right;
	text-align: center;
	cursor: pointer;
	}
	
	#brochure-main:hover,
	#brochure-main:hover a {
		background-position: top left;
		text-decoration: underline;
		font-weight: normal;
		font-size: 16px;
		}

#video-main {
	width: 250px;
	margin: 10px 10px 20px 10px;
	padding: 250px 0 0 0;
	float: left;
	background: url('http://images.marjosilver.co.uk/other/video-thumb.jpg') no-repeat top right;
	text-align: center;
	cursor: pointer;
	}
	
	#video-main:hover,
	#video-main:hover a {
		background-position: top left;
		text-decoration: underline;
		font-weight: normal;
		font-size: 16px;
		}

.products {
	width: 174px;
	height: 174px;
	margin: 10px;
	float: left;
	background: #ffffff;
	border: 3px double #9aa6ed;
	overflow: hidden;
	position: relative;
	}

.products a:hover {
	color: #ffffff;
	text-decoration: none;
	}

.products img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	}

.cover {
	float: left;
	position: absolute;
	padding: 5px;
	background: transparent url(http://images.marjosilver.co.uk/other/sample-fade.png) repeat top left;
	height: 164px;
	width: 164px;
	top: 140px;
	left: 0; 	
	}
	.cover:hover {
		cursor: pointer;
		}
 	
.cover h3 {
	width: 164px;
	color: #ffffff;
	}

.cover p {
	width: 164px;
	font-size: 12px;
	line-height: 14px;
	color: #ffffff;
	}

.cover a {
	color: #ffffff!important;
	text-decoration: underline!important;
	}
	.cover a:hover {
		color: #ffffff!important;
		text-decoration: underline!important;
		}

#samples-wrapper {
	float: left;
	width: 100%;
	margin: 15px 10px 0 0;
	padding: 0;
	}
	#samples-wrapper a { 
		float: left;
		border: 3px double #9aa6ed;
		margin-right: 30px;
		margin-bottom: 30px;
		}
		
#product-list { 
	list-style-type: none;
	padding-left: 10px;
	}		/* Sidebars */
		
#right-mainbox	{ 
	float: left; 
	width: 268px; 
	border: 0 none; 
	background: #ffffff; 
	padding: 10px; 
	margin: 10px; 
	}



	/* FREE ACCOUNT */

#free-account { 
	float: left; 
	width: 248px; 
	height: 115px; 
	margin: 10px 0 10px 0; 
	padding: 10px; 
	border: 1px solid #9aa6ed; 
	text-align: center; 
	}
	
#free-account h3 { 
	font-family: georgia, arial; 
	font-size: 22px; 
	line-height: 24px; 
	font-weight: normal; 
	color: #a70000; 
	margin: 0; 
	}
	
#free-account p	{ 
	font-family: arial; 
	font-size: 15px; 
	line-height: 16px; 
	margin: 5px 0 0 0; 
	}



	/* NEWS FEED */

#news-wrapper {
	height: 210px; 
	width: 268px; 
	margin: 10px 0 10px 0; 
	border: 1px solid #9aa6ed;
	}

#news-wrapper ul {
	list-style-image: url(http://images.marjosilver.co.uk/other/list-icon.png);
	width: 90%;
	height: 154px;
	padding-left: 10%;
	padding-top: 5px;
	}
	#news-wrapper ul li {
		float: left;
		width: 100%;
		padding-top: 5px;
		}
		#news-wrapper ul li.more-info { 
			padding-top: 20px; 
			list-style-image: none;
			list-style-type: none;
			}
			#news-wrapper ul li a {
				display: block;
				font-size: 14px;
				}
	

	/* TESTIMONIALS */

#right-mainbox #quotes-top { 
	width: 268px; 
	height: 38px; 
	position: relative; 
	float: left; 
	padding: 0; 
	margin: 10px 0 0 0; 
	background-color: #eeeeee; 
	border: 1px solid #9aa6ed; 
	border-bottom: none; 
	}
	
#right-mainbox #quotes-top p.heading 	{ margin-left: 10px; }

#right-mainbox #speech-top { 
	position: absolute; 
	top: 35px; 
	left: -8px; 
	background: url(http://images.marjosilver.co.uk/other/top-speech-marks.png) no-repeat; 
	height: 15px; 
	width: 19px; 
	}

#right-mainbox #testimonials { 
	float: left; 
	padding: 10px; 
	margin: 0; 
	background-color: #eeeeee; 
	border-left: 1px solid #9aa6ed; 
	border-right: 1px solid #9aa6ed; 
	width: 248px; 
	height: auto; 
	}
	
#right-mainbox #testimonials p { 
	font-size: 14px; 
	line-height: 18px; 
	margin: 0 0 10px 0; 
	padding: 0; 
	}
	
#right-mainbox #testimonials span { 
	font-size: 14px; 
	line-height: 16px; 
	margin: 10px 0 0 0; 
	padding: 0; 
	font-weight: bold; 
	}
	
#right-mainbox #speech-bottom { 
	position: absolute; 
	bottom: 35px; 
	right: 29px; 
	background: url(http://images.marjosilver.co.uk/other/bottom-speech-marks.png) no-repeat; 
	height: 15px; 
	width: 19px; 
	}
	
#right-mainbox #quotes-bottom { 
	position: relative; 
	float: left; 
	padding: 0; 
	margin: 0; 
	background: url(http://images.marjosilver.co.uk/other/testimonial-bottom-sidebar.png) no-repeat; 
	background-color: #ffffff; 
	border: none; 
	width: 270px; 
	height: 30px; 
	}

	/* TRADE FAIRS */

#trade-fairs { 
	float: left;
	padding: 0; 
	margin: 10px 0 0 0; 
	background: #fff; 
	border: 1px solid #9aa6ed; 
	width: 268px; 
	height: 400px; 
	}


	/* BJA */

#bja { 
	width: 268px; 
	height: 127px; 
	float: left; 
	padding: 0; 
	margin: 10px 0 0 0; 
	background: url(http://images.marjosilver.co.uk/other/bja.png) no-repeat; 
	background-color: #ffffff; 
	border: 1px solid #9aa6ed; 
	}
	
#bja p { 
	font-family: arial; 
	font-size: 15px; 
	line-height: 17px; 
	margin: 10px 5px 10px 120px; 
	font-weight: normal; 
	}
	
#bja a { 
	font-weight: bold; 
	text-decoration: none; 
	color: #333333; 
	}

#bja a:hover { 
	font-weight: bold; 
	text-decoration: none; 
	color: #a70000; 
	}/* Forms */

select, input, textarea { border: 1px solid #333333; }
select:focus, input:focus, textarea:focus { border: 1px dotted #333333; }

input.submit {
	background-color: #ccc;
	width: 150px;
	text-align: center;
	color: black;
	font-weight: bold;
	}
	input.submit:hover {
		cursor: pointer;
		background-color: white;
		}/* Buttons */

#advert p span.small-button {
	float: left;
	padding-bottom: 8px;
}

button.small-button {
    font: bold 14px Helvetica, Arial, sans-serif;
    height: 24px;
    margin-top: -1px;
}

button.small-button span {
    height: 22px;
}
    button.small-button span strong {
        padding: 0 11px 0 0;
        line-height: 23px;
        *line-height: 21px; /* IE specific line-height fix */
        height: 22px;
    } 
    button.small-button span.green {
    	color: #fff;
        padding-left: 11px;
        background: #F0F0F0 url(http://images.marjosilver.co.uk/buttons/green-button-left-small.png) left top no-repeat;
    }
    button.small-button span.blue {
    	color: #fff;
        padding-left: 11px;
        background: #F0F0F0 url(http://images.marjosilver.co.uk/buttons/blue-button-left-small.png) left top no-repeat;
    }


/* Big button */

span.button a { 
    height: 50px;
    font: bold 18px/32px Helvetica, Arial, sans-serif;
    text-decoration: none;
    float: left;
    display: block;
    overflow: hidden;
    padding: 0;
}
    span.button a span {
        display: block;
        white-space: nowrap;
        padding: 5px 12px 5px 0;
        line-height: 40px;
        cursor: pointer;
    }

/* Small button */

span.small-button a {
	height: 22px;
	font: bold 13px/21px Helvetica, Arial, sans-serif;
	text-decoration: none;
    float: left;
    display: block;
    overflow: hidden;
    padding: 0;
}
	span.small-button a span {
		display: block;
        white-space: nowrap;
		padding: 0px 11px 0 0;
        line-height: 24px;    
        cursor: pointer;
	}
	
	* html span.small-button a span {
        line-height: 22px;
    }

/* Green */

span.button a.green { 
	color: #FFFFFF; 
	padding: 0 0 0 12px;
	margin-left: 165px;
	margin-top: 15px; 
	background: #87C80A url(http://images.marjosilver.co.uk/buttons/green-button-left-large2.png) left top no-repeat; 
}
span.button a.green:hover { 
	padding: 0 0 0 12px; 
	background: #87C80A url(http://images.marjosilver.co.uk/buttons/green-button-left-large2.png) 0 -50px no-repeat; 
}
span.button a.green span { 
	background: #87C80A url(http://images.marjosilver.co.uk/buttons/green-button-right-large2.png) right top no-repeat; 
}
span.button a.green:hover span {
	background: #87C80A url(http://images.marjosilver.co.uk/buttons/green-button-right-large2.png) right -50px no-repeat;
}

/* Green small */

span.small-button a.green {
    color: #fff;
	background:  #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-left-small.png) left top no-repeat;
	padding-left: 11px;
}

span.small-button a.green:hover {
    color: #fff;
	background:  #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-left-small.png) left -22px no-repeat;
	padding-left: 11px;
}

span.small-button a.green:active {
    color: #fff;
	background:  #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-left-small.png) left -44px no-repeat;
	padding-left: 11px;
}

span.small-button a.green span {
	background: #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-right-small.png) right top no-repeat;
}

span.small-button a.green:hover span {
	background: #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-right-small.png) right -22px no-repeat;
}

span.small-button a.green:active span {
	background: #8ac519 url(http://images.marjosilver.co.uk/buttons/green-button-right-small.png) right -44px no-repeat;
}


/* Blue */

span.button a.blue {
    color: #FFFFFF;
    padding: 0 0 0 40px;
    background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-left-large.png) left top no-repeat;
}
span.button a.blue:hover {
    padding: 0 0 0 40px;
    background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-left-large.png) 0 -32px no-repeat;
}
    span.button a.blue span {
        background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-right-large.png) right top no-repeat;
    }
    span.button a.blue:hover span {
        background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-right-large.png) right -32px no-repeat;
    }

/* Blue small */

span.small-button a.blue {
	background:  #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-left-small.png) left top no-repeat;
	padding-left: 11px;
	margin-left: 165px;
	margin-top: 15px; 
    color: #FFFFFF;
}

span.small-button a.blue:hover {
	background:  #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-left-small.png) left -22px no-repeat;
	padding-left: 11px;
}

span.small-button a.blue span {
	background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-right-small.png) right top no-repeat;
}

span.small-button a.blue:hover span {
	background: #42B2F5 url(http://images.marjosilver.co.uk/buttons/blue-button-right-small.png) right -22px no-repeat;
}

/* Yellow */

span.button a.yellow {
	color: #545454;
    padding: 0 0 0 12px;
    margin-top: 15px;
    margin-left: 38px;
    background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-left2.png) left top no-repeat;
}
span.button a.yellow:hover {
    padding: 0 0 0 12px;
    background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-left2.png) left -50px no-repeat;
}
	span.button a.yellow span {
	    background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-right2.png) right top no-repeat;
	}
	span.button a.yellow:hover span {
	    background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-right2.png) right -50px no-repeat;
	}

/* Yellow small */

span.small-button a.yellow {
    background:  #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-left-small.png) left top no-repeat;
	padding-left: 11px;
	margin-left: 6px;
	margin-top: 15px; 
    color: #FFFFFF;	
    }

span.small-button a.yellow:hover {
	background:  #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-left-small.png) left -22px no-repeat;
	padding-left: 11px;
}

span.small-button a.yellow span {
	background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-right-small.png) right top no-repeat;
}

span.small-button a.yellow:hover span {
	background: #FFCD00 url(http://images.marjosilver.co.uk/buttons/yellow-button-right-small.png) right -22px no-repeat;
}