/* 
Copyright (c) Enigma Interactive 2004

SOM2
Project:		Modern Rugs
Filename:		layout_application.css
Description:	Model glue applications layout
     
History
ver date  		who     	comment
-----------------------------------------------------------------------------
2	09Jan08		CT			Added #deliveryContact
1	18Oct07		CT			Development updates

*/

/* delivery address */
#deliveryAddress {
	width:auto;
	float:left;
	display:block;
}
 
/* delivery contact */
#deliveryContact {
	width:auto;
	float:left;
	display:block;
}

.error_message,
.error_message a {
	position: relative;
	width: auto;
	/* float: left; */
	font-weight: bold;
	color: #E94342;
	margin-bottom: 5px;
}

.error_message a:hover {
	color: #FF7E00;
}

.success_message {
	position: relative;
	width: auto;
	float: left;
	font-weight: bold;
	margin-bottom: 5px;
}

/******************/
/* rug type start */
/******************/

.appContainer {
	width: 608px;
	float:left;
	height:auto;
	padding: 0px 0px 30px 12px;
	/* padding-bottom: 30px; */
}

.appWideContainer {
	width: 780px;
	float:left;
	height:auto;
	padding: 0px 0px 30px 12px;
	/* padding: 12px 0px 0px 12px;
	padding-bottom: 30px; */
}

.appContainer .underline_title {
	width: 608px;
	float:left;
	height:auto;
	border-bottom: 1px solid #53350E;
	padding-bottom: 1px;
	margin-bottom:2px;
}

.appWideContainer .title,
.appContainer .title {
	width: 608px;
	float:left;
	height:auto;
	margin-bottom: 10px;
}

.appContainer .underline_title h2,
.appWideContainer .title h1,
.appContainer .title h1 {
	width: 608px;
	font: normal 1.5em Century Gothic,verdana,arial,sans-serif;
	margin: 0px 0px 2px 0px;
}

.appWideContainer .title .header1,
.appContainer .title .header1 {	
	width: 608px;
	font: normal 1.5em Century Gothic,verdana,arial,sans-serif;
	margin: 0px 0px 2px 0px;
	color: #FF7E00;
}

.appContainer .underline_title h2 {
	font: normal 1.6em Trebuchet MS, Century Gothic,verdana,arial,sans-serif;
}

.appWideContainer .intro,
.appContainer .intro {
	width: 600px;
	float:left;
	height:auto;
	margin-bottom: 10px;
}


.appWideContainer .intro h3,
.appContainer .intro h3 {
	font-size: 1em;
	font-weight: bold;
	width: 50%;
	float: left;
}

.appWideContainer .row {
	width: 774px;
	float:left;
	height:auto;
	margin-bottom: 10px;
}

.appContainer .collection {
	width: 160px;
	height: auto;
	float: left;
	padding: 5px 18px;
	margin-bottom: 0px;
	overflow: hidden;
}

.appWideContainer .collection {
	width: 185px;
	float: left;
	margin-bottom: 10px;
	margin-right: 7px;
	overflow: hidden;
	border: 1px solid #AED5F4;
}

.appContainer .collection .image {
	width: 160px;
	height: 160px;
	float: left;
	overflow: hidden;
	margin-bottom: 5px;
}

.appContainer .collection .image img {
	width: 160px;
	height: 160px;
}

.appWideContainer .collection .row .image {
	position: relative;
	width: 160px;
	height: 160px;
	float: left;
	overflow: hidden;
	margin-bottom: 5px;
}

.appWideContainer .collection .row .image img {
	width: 160px;
	height: 160px;
}

.appWideContainer .collection .image .overlay {
	position: absolute;
	top: 0px;
	left: 0px;
}
 
.appContainer .collection .title {
	width: 160px;
	height: 15px;
	float: left;
	overflow: hidden;
	background: transparent url(/images/general/title_arrow.gif) no-repeat top left;
	padding-left: 15px;
	border: none;
	margin: 0px;
}

.appWideContainer .collection .title {
	width: 158px;
	height: 10px;
	float: left;
	overflow: hidden;
	border: none;
	padding: 0px 12px 5px 12px;
	text-align: center;
}

.appWideContainer .collection .row {
	width: 160px;
	height: auto;
	float: left;
	overflow: hidden;
	padding: 0px 10px 0px 10px;
	margin-bottom: 2px;
}

.appWideContainer .collection .button {
	width: 176px;
	height: auto;
	float: left;
	text-align: right;
	overflow: hidden;
	padding: 0px 4px 0px 4px;
	margin-bottom: 2px;
}

.appWideContainer .collection .title a,
.appContainer .collection .title a {
	font-weight: bold;
}

.appWideContainer .linkRow,
.appContainer .linkRow {
	width: 572px;
	float:left;
	height:auto;
	margin-bottom: 10px;
}

.appWideContainer .intro .link,
.appContainer .intro .link {
	width: auto;
	float: right;
	/* background-color: #FF7E00; */
	padding: 1px 0px 3px 0px;
}

.appWideContainer .linkRow .right_end,
.appContainer .linkRow .right_end {
	width: 6px;
	height: 17px;
	float: right;
	background-image: url(/images/general/orange_rh_end.gif);
}

.appWideContainer .linkRow .left_end,
.appContainer .linkRow .left_end {
	width: 6px;
	height: 17px;
	float: right;
	background-image: url(/images/general/orange_lh_end.gif);
}

.appWideContainer .linkRow .link a,
.appContainer .linkRow .link a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.appContainer .left_column {
	width: 190px;
	height: auto;
	float: left;
	overflow: hidden;
}

.appContainer .left_column .row {
	margin-top:12px;
	margin-bottom: 10px;
	width: 180px;
	height: auto;
	float: left;
}

.appContainer .row {
	width:100%;
	float:left;	
}

.appContainer .row h2 {
	font: normal 1.3em Century Gothic,verdana,arial,sans-serif;
	margin: 0px 0px 2px 0px;
	font-weight: bold;
}

.appContainer .left_column .button {
	width: 160px;
	height: auto;
	float: left;
	margin-bottom: 3px;
}

.appContainer .left_column .variant {
	position: relative;
	width: auto;
	height: 50px;
	float: left;
	margin-bottom: 10px;
	font-size:0.9em;
}

.appContainer .left_column .variant .left {
	width: 30px;
	height: auto;
	float: left;
	margin-right: 5px;
}

.appContainer .left_column .variant .middle {
	width: 110px;
	height: auto;
	float: left;
	margin-right: 5px;
	overflow: hidden;
}

.appContainer .left_column .variant .right {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 20px;
	height: 20px;
	float: right;
}

.appContainer .left_column .newVariant {
	position: relative;
	width: auto;
	margin-bottom: 10px;
	font-size:0.9em;
}

.appContainer .left_column .fixedTextSize {
	font-size: 10px;
}

.appContainer .left_column .newVariant .floatLeft {
	float: left;
	display: block;
}


.appContainer .left_column .newVariant .itemLeft {	
	width: 110px;
	margin-right: 5px;
	overflow: hidden;	
	height: 60px;
}

.appContainer .left_column .newVariant .itemMiddle {	
	width: 30px;
	margin-right: 5px;
	height: 60px;
}

.appContainer .left_column .newVariant .itemRight {	
	width: 30px;
	margin-right: 5px;	
	height: 60px;
}

.appContainer .left_column .favWhatIs { 
	position: relative;
	overflow: hidden;	
	width: 185px;
	text-align: right;
	display: block;
}

/*
.appContainer .left_column .newVariant .right {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 20px;
	height: 20px;
	float: right;
}
*/


.appContainer .right_column {
	width: 402px;
	height: auto;
	float: left;
	overflow: hidden;
}

.appContainer .right_column .row {
	width:400px;
	height:37px;
	margin:0;
	padding:0;
}

.appContainer .right_column .row .text {
	width: 200px;
	height: 37px;
	float: left;
	font-weight:bold;
	margin:0;
	padding:22px 0px 0px 0px;
}

.appContainer .right_column .row .videoURL {
	width: 154px;
	height: 37px;
	float: right;
	text-align:right;
	margin:0;
	padding:0;
}

.appContainer .right_column .below {
	height:47px;
	margin-top:10px;
}

.appContainer .right_column .belowHigher {
	height: 80px;
}

.appContainer .right_column .thumbnails {
	width: 400px;
	height: auto;
	float: left;
	margin-bottom: 10px;
}

.appContainer .right_column .thumbnails .thumbnail {
	position: relative;
	width: 124px;
	height: 124px;
	margin-right: 12px;
	float: left;
	overflow: hidden;
	margin-bottom: 5px;
}

.appContainer .right_column .thumbnails .thumbnail img {
	width: 124px;
	height: 124px;
	
}

.appContainer .right_column .thumbnails .thumbnail .overlay {
	position: absolute;
	top: 0px;
	left: 0px;
}


.appContainer .right_column .image {
	position: relative;
	width: 400px;
	height: 370px;
	height: auto;
	float: left;
}

.appContainer .right_column .image img {
	width: 400px;
	height: 370px;
}

.appContainer .right_column .image .overlay {
	position: absolute;
	top: 0px;
	left: 0px;
}

.appWideContainer .searchinput {
	font-size: 0.9em;
}

.appWideContainer .searchstyle {
	width:140px;
}

.appWideContainer .searchmaterial {
	width:120px;
}

.appWideContainer .searchcolour {
	width:120px;
}

.appWideContainer .searchprice {
	width:100px;
}

.appWideContainer .searchsize {
	width:155px;
}

/****************/
/* rug type end */
/****************/

/*****************************/
/* product popup boxes start */
/*****************************/

.popup_container {
	position:relative;        /* establish a popup-relative positioning context */
	padding:0;
	border:0;
	height:0px;                                  /* the popup's overall height */
	width:502px;         /* we always want our popup to fill the available space */
	margin:0;
}

.popupbox {
	position: absolute;
	margin:0;
	top:0px;              /* place us just up underneath the top-level images */
	left:3px;       /* left-align our drop-down to the previous button border */
	height:auto;      /* the drop-down height will be determiend by line count */
	width:502px;
	background:#99CCFF;
	display: none;
}

.popupinner {
	position: relative;
	margin:0;
	top:-4px;              /* place us just up underneath the top-level images */
	left:-4px;       /* left-align our drop-down to the previous button border */
	height:auto;      /* the drop-down height will be determiend by line count */
	width:500px;
	background:#fff;
	border: 1px solid #53350E;
	font-size: 0.9em;
	float: left;
}

.popupbox .title {
	background: #53350E;
	position: relative;
	width:490px;
	height:20px;
	float:left;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	padding: 5px;
}

.popupbox .body {
	position: relative;
	width:480px;
	height:auto;
	float:left;
	padding: 10px;
}
.popupbox .closeButton {
	width: 460px;
	float: left;
	height: auto;
	color: #004646;
	padding: 10px;
}

.popupbox .closeButton {
	text-align: right;
	padding: 0px 10px 3px 10px;
}

/***************************/
/* product popup boxes end */
/***************************/


/*************************/
/* account section start */
/*************************/

#siteMain .account_tab {
	height: 36px;
	width: auto;
	float: left;
}

#siteMain .blue_panel_account {
	width: 578px;
	float: left;
	padding: 10px 10px 5px 10px;
	background: #AED5F3 url(/res/customer/images/panel_bottom.gif) no-repeat bottom right;
}

#siteMain .blue_panel_account .button {
	text-align:right;
	margin-top: 20px;
	width: 578px;
	float: left;
}

.appContainer .blue_panel_account .basketTable {
	width: 598px;
	float:left;
	margin:0px;
}

.appContainer .blue_panel_account .basketImage {
	width: auto;
	padding: 2px;
	overflow: hidden;
	background-color: #AED5F3;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.appContainer .blue_panel_account .basketColumn {
	width: auto;
	padding: 5px;
	/* overflow: hidden; */
	background-color: #AED5F3;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.appContainer .blue_panel_account .basketPrice {
	width: auto;
	padding: 5px;
	/* overflow: hidden; */
	text-align:right;
	background-color: #AED5F3;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

/***********************/
/* account section end */
/***********************/

/************************
	Invoice Start
************************/

	div.invoice {font-size: 0.9em; width: 98%; float:left; border: 1px solid #333333; background: white; overflow: hidden;color:#333333;}
	div.invoice a {color:#333333;}
	div.invoice .header {width:100%;padding:10px;}
	div.invoice .header h2 {color:#333333;}
	div.invoice .body {padding: 10px;}
	div.invoice .footer {width: 50%; float: left; padding-bottom: 1em;}
	div.invoice .invoiceDetails, div.invoice .orderDetails {width: 100%;}
	
	div.invoice .invoiceDetails td {vertical-align: top;width: 33%;color:#333333;}
	div.invoice .invoiceDetails .title {width: 45%;	float: left; clear: left; margin: 0;}
	div.invoice .invoiceDetails .details {width: 50%; float: left;}
	
	div.invoice .orderDetails th,
	div.invoice .orderDetails td {vertical-align: top; text-align: center; padding-top: 0.5em; padding-bottom: 0.5em;color:#333333;}
	div.invoice .orderDetails th {border: 2px solid #333333; border-left: 0; border-right: 0;}
	div.invoice .orderDetails .col1 {text-align:left; width: 15%; font-weight: bold;}
	div.invoice .orderDetails .col2 {width: 40%; text-align: left;}
	div.invoice .orderDetails .col3 {width: 15%;}
	div.invoice .orderDetails .col4 {width: 15%;text-align:right;}
	div.invoice .orderDetails .col5 {width: 10%;}
	div.invoice .orderDetails .col6 {width: 15%;text-align:right;}
	div.invoice .orderDetails th .details {font-weight: normal;}
	div.invoice .orderDetails td.deliveryDetails {text-align: left;}
	div.invoice .orderDetails tr.orderTotal td {border: 2px solid #333333; border-left: 0; border-right: 0;}
	div.invoice .orderDetails tr.orderTotal td.orderTotal {text-align: right;}

/************************
	Invoice End
************************/
#siteMain .small_panel_container {
	width: 293px;
	float: left;
}

#siteMain .small_blue_panel_top {
	width: 293px;
	height: 16px;
	float: left;
	background: #AED5F3 url(/res/customer/images/small_panel_top.gif) no-repeat top left;
}

#siteMain .small_blue_panel {
	width: 273px;
	float: left;
	padding: 10px;
	height: 160px;
	background-color: #AED5F3;
}

#siteMain .small_blue_panel_bottom {
	width: 293px;
	height: 16px;
	float: left;
	background: #AED5F3 url(/res/customer/images/small_panel_bottom.gif) no-repeat top left;
}

.wide_search_box {
	width: 720px;
	float: left;
	padding: 0px 10px;
	margin: 0px;
	background-color: #aed5f3;
}

.wide_search_box_top {
	width: 740px;
	height: 9px;
	float: left;
	background: #ffffff url(/images/general/search_box_top.gif) no-repeat top left;
	margin: 0px;
}

.wide_search_box_bottom {
	width: 740px;
	height: 9px;
	float: left;
	margin: 0px 0px 10px 0px;
	background: #ffffff url(/images/general/search_box_bottom.gif) no-repeat top left;
}