/********************
	Common classes and styles
*********************/

.nobreak {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.clear {
	clear: both;
}

body {
	font-family: "Arial", sans-serif;
	background-color: #ddd;
}

/********************
	Header
*********************/

#header {
	width: 100%;
	height: 150px;
	background: #8b0104 url('../img/header.jpg') scroll no-repeat top left;
	color: white;
	overflow: hidden;
}

#header a {
	color: white;
}

#logo {
	position: absolute;
	top: 15px;
	left: 180px;
	height: 71px;
	width: 371px;
	font-size: 80px;
	background: #8b0104 url('../img/floralcraft-logo.png') scroll no-repeat top left;
	text-indent: -5000px;
}

#loftus-contact-info,
#stokesley-contact-info {
	position: absolute;
	left: 600px;
	height: 80px;
	width: 400px;
	font-size: 30px;
	line-height: 30px;
	font-weight: bold;
}

.address {
	font-size: 16px;
	line-height: 16px;
	font-weight: normal;
}

#loftus-contact-info {	
	top: 8px;
}

#stokesley-contact-info {
	top: 64px;
}

#header #admin-controls {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #8b0104;
	font-size: 10px;
}

#header #search {
	position: absolute;
	top: 115px;
	right: 10px;
}

#header #search * {
	float: left;
}

#header #search .input input,
#header #search .submit input {
	font-size: 14px;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 2px;
}
#header #search .input input {
	width: 200px;
	margin-right: 8px;
	margin-top: 1px;
}

/********************
	Main menu
*********************/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#main-menu {
	position: absolute;
	top: 118px;
	left: 150px;
	z-index: 100;
}

#main-menu ul {
	width: 745px;
	height: 32px;
	position: relative;
	font-size: 16px;
}

#main-menu ul ul {
	width: 120px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#main-menu li {
	float:left;
	width:130px;
	position:relative;
	margin-right: 10px;
}

#main-menu li li {
	width:150px;
}

/* style the links for the top level */
#main-menu a,
#main-menu a:visited {
	display:block;
	width:130px;
	height:32px;
	line-height:32px;
	text-align: center;
	background: #681b1d url('../img/menu-tab-inactive.png') no-repeat scroll top left;
	color: white;
}

/* style the second level background */
#main-menu ul ul a,
#main-menu ul ul a:visited {
}

/* style the second level hover */
#main-menu ul ul a:hover {
	background: #c5595c !important;
	font-weight: bold;
}
#main-menu ul ul :hover > a {
	background: #c5595c !important;
	font-weight: bold;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#main-menu ul ul {
	visibility:hidden;
	position:absolute;
	height:auto;
	top:32px;
	left: -3px;
	width: 480px;
	background: transparent url('../img/drop-down.png') no-repeat scroll bottom left;
/*	border: 3px solid #8b0104;*/
	border-top: 0;
	color: black;
	padding: 16px 19px 19px 19px;
}

/* style the second level links */
#main-menu ul ul a,
#main-menu ul ul a:visited {
	height:auto;
	line-height: 32px;
	padding: 0;
	width:130px;
	color: black;
	background: #c5595c;
	text-align: left;
}

/* style the top level hover */
#main-menu a:hover,
#main-menu ul ul a:hover {
	background: #c5595c url('../img/menu-tab-active.png') no-repeat scroll top left;
	color: black;
	font-weight: bold;
}
#main-menu :hover > a,
#main-menu ul ul :hover > a {
	background: #c5595c url('../img/menu-tab-active.png') no-repeat scroll top left;
	color: black;
	font-weight: bold;
}

/* make the second level visible when hover on first level list OR link */
#main-menu ul li:hover ul,
#main-menu ul a:hover ul {
	visibility:visible;
}

/********************
	Left and right nav bars
*********************/

.colleft,
.colmask {
	background-color: white;
	padding-bottom: 15px;
}

/* Nav block titles */
#left-nav h3,
#right-nav h3 {
	margin-top: 15px;
	padding: 0 16px;
	color: white;
	font-size: 16px;
	line-height: 28px;
	height: 28px;
	font-weight: bold;
	overflow: hidden;
}
#left-nav h3 {
	background: #8b0104 url('../img/left-block-header.png') no-repeat scroll top left;
}
#right-nav h3 {
	background: #8b0104 url('../img/right-block-header.png') no-repeat scroll top left;
}
#left-nav h3 a,
#right-nav h3 a {
	color: white;
	text-decoration: none;
}
#left-nav h3 a:hover, 
#right-nav h3 a:hover {
	color: white;
	text-decoration: none;
}

/* Nav blocks */
#left-nav div,
#right-nav div {
	background-color: #eee;
	border: 1px solid #ccc;
	border-top: 0;
	padding-bottom: 8px;
	font-size: 16px;
}

/* Nav block links */
#left-nav div a,
#right-nav div a {
	color: black;
	text-decoration: none;
}
#left-nav div a {
	text-decoration: none;
}
#right-nav div a {
	text-decoration: underline;
}
#left-nav div a:hover {
	color: black;
	font-weight: bold;
}
#right-nav div a:hover {
	color: black;
	text-decoration: underline;
}

/* Nav block elements */
#left-nav div p,
#right-nav div p,
#left-nav div ul,
#right-nav div ul,
#left-nav div ol,
#right-nav div ol,
#left-nav div dl,
#right-nav div dl {
	padding: 16px 16px 0 16px;
	line-height: 20px;
}
#left-nav div .first,
#right-nav div .first {
	padding-top: 8px;
}
#left-nav div > :first-child,
#right-nav div > :first-child {
	padding-top: 8px;
}

/* Give list items a bit more room */
#left-nav div li,
#right-nav div li {
	margin-top: 2px;
}

/* Use ol as bulleted list */
#left-nav div ol,
#right-nav div ol {
	list-style-type: square;
}
#left-nav div ol li,
#right-nav div ol li {
	margin-left: 16px;
}

/* Basket items */
#right-nav dt {
	width: 200px;
	height: 24px;
	overflow: hidden;
	display: block;
}
#right-nav dd {
	text-align: right;
	margin-top: -24px;
}

/********************
	Footer
*********************/

#footer {
	padding: 15px 0 0 0;
	border-top: 1px solid #aaa;
	background-color: #ddd;
	color: #333;
}

#footer a {
	color: #333;
	text-decoration: underline;
}

#footer small {
	padding: 0 16px;
	font-size: 10px;
}

#footer div {
	padding: 16px;
	float: left;
	width: 30%;
	font-size: 16px;
	line-height: 20px;
}


#footer li a {
	text-decoration: none;
}

#footer div a:hover {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

#footer h4 {
	color: #8b0104;
}

#footer li {
	margin-top: 2px;
}

/********************
	Content
*********************/

#content {
	padding-top: 15px;
	font-size: 16px;
	line-height: 20px;
}

/* Headers */
#content h1 {
	font-size: 30px;
	font-weight: bold;
	color: #8b0104;
	line-height: 30px;
	margin-bottom: 20px;
}

#content h2 {
	margin-top: 20px;
	margin-bottom: 4px;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	color: #8b0104;
}

#content p {
	margin-bottom: 20px;
}

#content a {
	color: black;
	text-decoration: underline;
}

/* Definitions have the definition to the right of the title */
#content dl {
	margin-bottom: 20px;
}
#content dt {
	font-weight: bold;
	width: 200px;
	margin-top: 2px;
}
#content dd {
	margin-top: -20px;
	margin-left: 200px;
}

/* Notices and Errors */
#content div.message {
	clear: both;
	background-color: #a1c4df;
	border: 1px solid #5b819b;
	font-weight: bold;
	padding: 8px 16px;
	margin-bottom: 16px;
}

/********************
	Product/category listing
*********************/

.listing-block {
	float: left;
	width: 100%;
	padding-bottom: 20px;
}

#content .product-thumb,
#content .category-thumb {
	float: left;
	position: relative;
	margin: 0 15px 15px 0;
	width: 210px;
	height: 210px;
	background: white url('../img/product-block-inactive.png') no-repeat scroll top left;
	overflow: hidden;
	text-align: center;
	color: #8b0104;
	cursor: pointer;
	text-decoration: none;
}

#content .product-thumb:hover,
#content .category-thumb:hover {
	background-image: url('../img/product-block-active.png');
}

#content .product-thumb div,
#content .category-thumb div {
    height:210px;
    width:210px;
    text-align:center;
    line-height:210px;
	font-size:210px;
	position: absolute;
	top: -10px;
	left: 0;
}
#content .product-thumb > div,
#content .category-thumb > div {
	font-size:1px;
	top: 0;
}

#content .product-thumb img.thumb,
#content .category-thumb img.thumb {
	vertical-align: middle;
}

#content .product-thumb h3,
#content .category-thumb h3 {
	margin: 15px 8px 0 8px;
	display: block;
	height: 20px;
	overflow: hidden;
	color: #8b0104;
}

#content .product-thumb .price {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 210px;
	font-weight: bold;
	font-size: 24px;
	color: #8b0104;
    text-align:center;
}

#content .product-thumb:hover h3,
#content .category-thumb:hover h3,
#content .product-thumb:hover .price {
	color: #0a255e;
}


/********************
	Product view
*********************/

#product-view #photos {
	float: left;
}

#product-view #photos .thumb {
	margin: 0 16px 16px 0;
}

#product-view .price {
	clear: both;
	font-weight: bold;
	font-size: 30px;
	color: #8b0104;
	padding-right: 16px;
}

#product-view h2 {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 8px;
	margin-top: 30px;
	color: #8b0104;
}

#product-view h3 {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 4px;
}

#product-view .tags {
	font-size: 10px;
	line-height: 14px;
}

#product-view {
	padding-bottom: 32px;
}

/********************
	Colour chooser
*********************/

#colour_chooser li {
	display: block;
	float: left;
	width: 200px;
	height: 250px;
	margin: 16px 0 0 16px;
	overflow: hidden;
}

#colour_chooser li.disabled {
	visibility: none;
}

#colour_chooser > li.disabled {
	visibility: show;
	opacity: 0.1;
}

#colour_chooser li h4 {
	text-align: center;
	font-size: 16px;
	margin: 0 0 8px 0;
}

#colour_chooser li img {
	display: block;
	width: 200px;
	height: 200px;
}

#TB_ajaxContent {
	position: relative;
}

/********************
	Tables
*********************/

#content table {
	margin-bottom: 20px;
}

#content table td, #content table th {
	border: 1px solid #ccc;
	padding: 8px;
	text-align: left;
}

#content table th {
	color: #444444;
	background-color:#eee;
}

#content table p {
	padding: 0;
	margin: 0;
}

/********************
	Forms
*********************/

#content form {
	clear: both;
	margin-right: 20px;
	padding: 0;
	width: 80%;
}
#content form div {
	clear: both;
	margin-bottom: 1em;
	padding: .5em;
	vertical-align: text-top;
}
#content form div.input {
	color: #444;
}
#content form div.required {
	color: #333;
	font-weight: bold;
}
#content form div.submit {
	border: 0;
	clear: both;
	margin-top: 10px;
}
#content label {
	display: block;
	font-size: 14px;
	font-weight: bold;
	padding-right: 20px;
	padding-bottom: 4px;
}
#content input, #content textarea {
	clear: both;
	font-size: 14px;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 2px;
	width: 100%;
}
#content select {
	clear: both;
	font-size: 14px;
	vertical-align: text-bottom;
}
#content select[multiple=multiple] {
	width: 100%;
}
#content option {
	font-size: 14px;
	padding: 0 3px;
}
#content input[type=checkbox] {
	clear: left;
	float: left;
	margin: 0px 6px 7px 2px;
	width: auto;
}
#content input[type=radio] {
	float:left;
	width:auto;
	margin: 0 3px 7px 0;
}
#content div.radio label {
	margin: 0 0 6px 20px;
}
#content input[type=submit] {
	display: inline;
	font-size: 110%;
	padding: 2px 5px;
	width: auto;
	vertical-align: bottom;
}

#content form .error-message {
	color: red;
	font-weight: bold;
}

#content form small {
	font-size: 10px;
	line-height: 10px;
}

/********************
	Lists
*********************/

/* Use ol as bulleted list */
#content ul {
	list-style-type: square;
}
#content ul li {
	margin-left: 16px;
}