/** if images css v1.0 **/

/** BASIC ================================================================= **/

body {
	margin: 0px;
	padding: 0px;
	font: 11px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
	margin-bottom: 50px;
}

p {
	font: 11px/15px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
}

h1 {
	font: 24px/25px Arial, Helivetica, Geneva, Verdana, Tahoma, sans-serif;
	letter-spacing: -1px;
	border-bottom: 1px solid #888888;
}

h2 {
	font: bold 16px/20px Arial, Helivetica, Geneva, Verdana, Tahoma, sans-serif;
	margin-bottom: 16px;
	margin-bottom: 8px;
}

td {
	margin: 0px;
	padding: 0px;
	font: 11px/13px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
}

table {
	border-collapse: collapse;
	padding: 0px;
}

.small {
	font: 10px/13px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
}

#breadcrumbs {
	display: block;
	font: 10px/10px Tahoma, Verdana, Arial, Helivetica, Geneva, sans-serif;
	padding: 0px;
	text-align: left;
	width: 760px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.tableLink, A.tableLink:link, A.tableLink:active, A.tableLink:visited {
	color: #000000;
	text-decoration: none;
}
	
A.tableLink:hover {
	text-decoration: underline;
	background: #EEEEFF;
}



/** PAGE HEADER =========================================================== **/
	
#header0 {
	width: 100%;
	background: #000000 url('../images/gray-back.gif') no-repeat bottom right;
}

#header1 {
	width: 760px;
}

	#header1 .logo {
		width: 140px;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

#header2 {
	width: 620px;
}

	#header2 .topNavBar {
		height: 74px;
		text-align: right;
		vertical-align: top;
		padding-top: 15px;
	}
	
	#header2 .topNavBarButton {
		margin-left: 8px;
		margin-right: 8px;
		border: 1px solid #6C6C6C;
	}

	#header2 .navBar {
		background: #606060;
	}
	
	#header2 .navBarButton {
		margin-left: 6px;
		margin-right: 6px;
	}

	#header2 .tooltipBar {
		background: #FFFFFF;
	}



/** FOOTER ================================================================ **/
	
#footer {
	width: 760px;
	margin-top: 50px;
}

	#footer td {
		font-size: 10px;
		line-height: 14px;
	}
	
#content {
	width: 760px;
	text-align: left;
	margin-top: 30px;
}

	#content .left {
		width: 180;
		padding-right: 20px;
		vertical-align: top;
	}
	
	#content .right {
		width: 580px;
		vertical-align: top;
	}
	
#navBlock {
}
	
	#navBlock .navLink {
		font: 11px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		display: block;
		color: #666666;
		text-decoration: none;
		padding: 3px;
	}
	
	#navBlock A:hover {
		font: 11px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		display: block;
		color: #666666;
		text-decoration: underline;
		padding: 3px;
	}


/** MAIN MENU ============================================================= **/

#mainMenu {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	background: #FDFDFD;
	border: 1px solid #CCCCCC;
}

	#mainMenu .iconCell {
		vertical-align: top;
		text-align: center;
		padding: 5px;
		width: 32px;
		height: 32px;
	}
	
	#mainMenu .menuCell {
		vertical-align: middle;
		text-align: left;
		padding: 5px;
	}

	#mainMenu .menuLink, A.menuLink:link, A.menuLink:active, A.menuLink:visited {
		display: block;
		color: #000000;
		margin-bottom: 4px;
		text-decoration: none;
		padding: 4px;
	}
	
	#mainMenu A.menuLink:hover {
		background: #EEEEFF;
	}

/** GENERIC TABLE ========================================================= **/

#genericTable {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}
	
	#genericTable .leftColumn {
		width: 25%;
		vertical-align: top;
		text-align: left;
		padding-right: 20px;
	}
	
	#genericTable .rightColumn {
		width: 75%;
		vertical-align: top;
		text-align: left;
	}

	#genericTable .headCell {
		vertical-align: top;
		text-align: left;
		border-bottom: 1px solid #BBBBBB;
		padding: 5px;
	}

	#genericTable .contentCell {
		vertical-align: top;
		text-align: left;
		padding: 5px;
	}
	
	#genericTable .contentCellRed {
		vertical-align: top;
		text-align: left;
		padding: 5px;
		color: #EE0000;
	}
	
	#genericTable .contentCellGreen {
		vertical-align: top;
		text-align: left;
		padding: 5px;
		color: #00AA00;
	}
	
	#genericTable .headCellR {
		vertical-align: top;
		text-align: right;
		border-bottom: 1px solid #BBBBBB;
		padding: 5px;
	}

	#genericTable .contentCellR {
		vertical-align: top;
		text-align: right;
		padding: 5px;
	}
	
	#genericTable .contentCellC {
		vertical-align: top;
		text-align: center;
		padding: 5px;
	}
	
	#genericTable .contentCellIncomplete {
		vertical-align: top;
		text-align: center;
		padding: 3px;
		background: #FF7218;
	}
	
	#genericTable .rowOdd {
		background: #F5F5F5;
	}

	#genericTable .rowEven {
	}

/** FORMS TABLE =========================================================== **/

#formTable {
}

	#formTable .label {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 10px;
		vertical-align: middle;
		text-align: left;
	}

	#formTable .field {
		padding-top: 5px;
		padding-bottom: 5px;
		vertical-align: middle;
		text-align: left;
	}
	
	#formTable .smallLabel {
		font: bold 10px/11px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		padding-top: 5px;
		padding-bottom: 15px;
		padding-right: 10px;
		vertical-align: top;
		text-align: left;
		color: #666666;
	}

	#formTable .content {
		font: 11px/14px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		padding-top: 5px;
		padding-bottom: 5px;
		vertical-align: top;
		text-align: left;
	}



/** TWO COLUMN TABLE ====================================================== **/
	
#twoColumnTable {
}

	#twoColumnTable .left {
		vertical-align: top;
		width: 500px;
	}
	
	#twoColumnTable .right {
		vertical-align: top;
		width: 230px;
		padding-left: 30px;
	}



/** GENERIC TABS ========================================================== **/
	
#genericTabs {
	width: 762px;
	border-bottom: 2px solid #888888;
}

	#genericTabs .tabs {
		text-align: right;
		vertical-align: bottom;
		padding-right: 10px;
	}
	


/** SEARCH PANE =========================================================== **/

#searchToolbar {
	width: 760px;
}

	#searchToolbar .tabs {
		text-align: right;
		vertical-align: bottom;
		padding-right: 10px;
	}
	
	#searchToolbar .search {
		border: 1px solid #8E8E8E;
		border-top: 2px solid #8E8E8E;
		background: #EEEEEE;
	}
	
	#searchToolbar .filter {
		border: 1px solid #8E8E8E;
		border-top: 1px solid #FFFFFF;
		background: #EEEEEE;
	}

#toggleFilter {
	width: 760px;
	text-align: right;
	vertical-align: top;
}

	#toggleFilter img {
		margin-right: 10px;
	}

.check {
}

.searchTable {
	margin: 8px;
	width: 744px;
}

.filterTable {
	margin: 8px;
	width: 744px;
}

#dominantColour {
	border: 1px solid #666666;
	background: #FFFFFF;
	width: 32px;
	height: 32px;
}

.spectrum {
	border: 1px solid #666666;
	height: 32px;
}

.fieldLabel {
	vertical-align: middle;
	font-size:10px;
	line-height: 10px;
}

.dropDown {
	font: 11px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
}

.textInput {
	font: 11px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
}



/** PAGE COUNTER AND UTILITY FUNCTIONS ==================================== **/

#counterHeader {
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	width: 760px;
	margin-top: 15px;
	margin-bottom: 25px;
}

	#counterHeader td {
		padding-top: 3px;
		padding-bottom: 3px;
	}
	
	#counterHeader .titleImage {
		margin-top: 4px;
		margin-bottom: 0px;
	}
	
	#counterHeader .buttonImage {
		margin-left: 5px;
	}



/** FOUR-COLUMN THUMBNAIL TABLE (image search) ============================ **/
	
#thumbsTable {
	margin-bottom: 25px;
}

	#thumbsTable .thumbCell {
		width: 160px;
		text-align: left;
		vertical-align: top;
	}
	
	#thumbsTable .spacer {
		width: 40px;
	}
	
	#thumbsTable #thumbnail {
		width: 160px;
		height: 160px;
		border-collapse: collapse;
		margin-bottom: 5px;
	}
	
		#thumbsTable #thumbnail td {
			vertical-align: bottom;
		}

	#thumbsTable .dataCell {
		width: 160px;
		text-align: left;
		vertical-align: top;
		display: block;
	}
	
	#thumbsTable p {
		font: 10px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	
	#thumbsTable .thumbIcons {
		margin-top: 10px;
		marign-bottom: 10px;
	}	

#thumbIconBlock {
	float: right;
	display: block;
	width: 47px;
}



/** TWO-COLUMN THUMBNAIL TABLE ============================================ **/
	
#thumbsTwoTable {
	width: 760px;
	margin-bottom: 15px;
	border-bottom: 1px solid #DDDDDD;
}

	#thumbsTwoTable td {
		text-align: left;
		vertical-align: top;
	}
	
	#thumbsTwoTable .thumbCell {
		width: 160px;
		padding-right: 10px;
		padding-bottom: 15px;
	}
	
	#thumbsTwoTable .dataCell {
		width: 200px;
		padding-bottom: 15px;
	}
	
	#thumbsTwoTable p {
		font: 10px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		margin-top: 5px;
		margin-bottom: 10px;
	}



/** PANE ================================================================== **/
	
#paneTable {
	width: 760px;
}

	#paneTable .tabs {
		text-align: right;
		vertical-align: bottom;
		padding-right: 10px;
	}
	
	#paneTable .pane {
		border: 1px solid #8E8E8E;
		border-top: 2px solid #8E8E8E;
		background: #EEEEEE;
	}
	
	#paneTable .pane2 {
		border: 1px solid #8E8E8E;
		border-top: 1px solid #FFFFFF;
		background: #EEEEEE;
	}
	
#paneToolbar {
	margin: 8px;
	width: 744px;
}

	#paneToolbar .titleImage {
		margin-bottom: 5px;
	}
	
	#paneToolbar .buttonImage {
		margin-left: 5px;
	}

#paneFrame {
	border: 1px solid #8E8E8E;
	border-top: 1px solid #FFFFFF;
	background: #EEEEEE;
	padding: 8px;
}

#paneTabs {
	width: 762px;
	border-bottom: 1px solid #888888;
}

	#paneTabs .tabs {
		text-align: right;
		vertical-align: bottom;
		padding-right: 10px;
	}



/** VERTICAL MENU ========================================================= **/
	
#verticalMenu {
	width: 100%;
}

	#verticalMenu .heading {
		border: 1px solid #8E8E8E;
		background: #666666;
		padding: 2px 6px 4px 6px;
		color: #FFFFFF;
		font-size: 10px;
		font-weight: bold;
	}

	#verticalMenu .pane {
		border: 1px solid #8E8E8E;
		border-top: 1px solid #8E8E8E;
		background: #EEEEEE;
		padding: 3px;
	}
	
	#verticalMenu .verticalLink, A.verticalLink:link, A.verticalLink:visited, A.verticalLink:active {
		color: #000000;
		display: block;
		padding: 3px 6px 3px 6px;
		text-decoration: none;
	}
	
	#verticalMenu A.verticalLink:hover {
		color: #000000;
		background: #FFFFFF;
		padding: 2px 5px 2px 5px;
		border: 1px solid #888888;
	}
	
	#verticalMenu .verticalLinkActive, A.verticalLinkActive:link, A.verticalLinkActive:visited, A.verticalLinkActive:active {
		color: #FFFFFF;
		background: #E43337;
		display: block;
		padding: 2px 5px 2px 5px;
		text-decoration: none;
		border: 1px solid #8A1F21;
	}
	
	#verticalMenu A.verticalLinkActive:hover {
		color: #000000;
		background: #FFFFFF;
	}



/** SHOPPING BASKET ======================================================= **/

#basketTable {
	width: 760px;
	margin-bottom: 15px;
	border-bottom: 1px solid #DDDDDD;
}

	#basketTable td {
		text-align: left;
		vertical-align: top;
	}
	
	#basketTable .thumbCell {
		width: 160px;
		padding-right: 10px;
		padding-bottom: 15px;
	}
	
	#basketTable .dataCell {
	}
	
	#basketTable .optionsCell {
		width: 300px;
	}
	
	#basketTable p {
		font: 10px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		margin-top: 5px;
		margin-bottom: 10px;
	}

#optionsTable {
	width: 300px;
}
	
	#optionsTable td {
		font: 10px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
		text-align: left;
		vertical-align: middle;
		padding: 3px;
	}
	
	#optionsTable .radio {
		width: 10px;
	}
	
	#optionsTable .size {
		width: 230px;
	}
	
	#optionsTable .price {
		width: 60px;
		text-align: right;
	}

#basketHeader {
	border-bottom: 1px solid #BBBBBB;
	width: 760px;
	margin-top: 10px;
	margin-bottom: 15px;
}

	#basketHeader td {
		padding-top: 5px;
		padding-bottom: 5px;
	}

#basketSummary {
	width: 760px;
}

	#basketSummary .left {
		width: 460px;
		vertical-align: top;
	}
	
	#basketSummary .right {
		width: 300px;
		vertical-align: top;
	}

#basketTotals {
	width: 300px;
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
}

	#basketTotals td {
		padding-top: 5px;
		padding-bottom: 5px;
		border-top: 1px solid #DDDDDD;
	}

	#basketTotals .price {
		text-align: right;
	}



/** EXTRAS ================================================================ **/
	
.lightboxNote {
	font: 10px/12px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
	padding: 4px;
	background: #FFFFEE;
	border: 1px solid #EEEEAA;
	margin-top: 10px;
}

.pageNote {
	display: block;
	font: 11px/13px Verdana, Tahoma, Arial, Helivetica, Geneva, sans-serif;
	padding: 6px;
	background: #FFFFEE;
	border: 1px solid #CCCC88;
	margin-top: 15px;
	margin-bottom: 15px;
}

.required {
	font-weight: bold;
	color: #FF0000;
}

.imgIncomplete {
	border: 3px solid #FF7218;
}


/** MESSAGES ============================================================== **/

#messageList {
	display: block;
	height: 160px;
	width: 760px;
	overflow: auto;
	border: 1px solid #888888;
}

#messageListTable {
	width: 740px;
}

	#messageListTable .headCell {
		vertical-align: middle;
		text-align: left;
		padding: 5px;
	}

	#messageListTable .contentCell {
		vertical-align: middle;
		text-align: left;
		padding: 3px 5px 3px 5px;
	}
	
	#messageListTable .contentCellUnread {
		vertical-align: middle;
		text-align: left;
		padding: 3px 5px 3px 5px;
		font-weight: bold;
	}
	
	#messageListTable .rowOdd {
		background: #F5F5F5;
	}

	#messageListTable .rowEven {
	}
	
	#messageListTable .messageLink, A.messageLink:link, A.messageLink:active, A.messageLink:visited {
		color: #000000;
		text-decoration: none;
	}
	
	#messageListTable A.messageLink:hover {
		text-decoration: underline;
		background: #EEEEFF;
	}
	
	#messageListTable .messageLinkUnread, A.messageLinkUnread:link, A.messageLinkUnread:active, A.messageLinkUnread:visited {
		color: #000000;
		text-decoration: none;
		font-weight: bold;
	}
	
	#messageListTable A.messageLinkUnread:hover {
		text-decoration: underline;
		background: #EEEEFF;
	}
	
#messageBody {
	display: block;
	height: 350px;
	width: 760px;
	border: 1px solid #888888;
}