/*
THIS FILE CONTAINS JUST THE BASIC LAYOUT STYLING FOR YOU-ARE-ART.CO.UK
(TOGETHER WITH A FEW BACKGROUND REFERENCES)
Copyright (c) Eurologic IT Ltd for You Are Art
*/

/* 
----------------------------------------------------------------------------
POSITIONAL
---------------------------------------------------------------------------- 
*/
body { margin:0; padding:0; }
/* This contains ALL other divs - keeps the whole thing centered on the page and provides the drop-shadow background */
#container { width:992px; margin:4px auto; bottom:0; }
/* Have to split the banner left and right, to left-align the main YAA logo whilst right-aligning the main menu tabs */
#bannerLeft { top:0; height:72px; float:left; margin-left:9px; width:613px; vertical-align:bottom; }
#bannerRight { top:0; height:72px; float:left; margin:0; width:360px; vertical-align:bottom; }
#subMenu { height:24px; clear:both; margin:0 0 0 8px; width:960px; text-align:right; padding-right:14px; }
#oneCol { clear:both; width:950px; padding:10px 10px 10px 32px; }
/* ---------------------------------------------------------------------------------------
A WORD OF EXPLANATION - because the leftCol and rightCol divs are addressable in code
ie. they have runat="server" in their tags) ASP.net converts their IDs to qualified
IDs, eg.'ct100_leftCol'. This of course means the CSS code designed for #leftCol doesn't
bloody work any more. So these two divs (and only these two) are addressed by their class
rather than their ID.
--------------------------------------------------------------------------------------- */
/* The main columns - half page width each */
.leftCol { clear:both; float:left; width:475px; padding:0; margin-left:20px; }
.rightCol { float:left; width:450px; padding:0; margin-left:25px; }

/* 
----------------------------------------------------------------------------
COLOURS AND BACKGROUNDS
#F7E7C6 = YAA beige
---------------------------------------------------------------------------- 
*/
body { background-color: #94A3A8; }
#container { background:transparent url(../img/border_width2.gif) repeat-y; }
#bannerLeft { color:White; background:#F7E7C6 url(../img/bgmid.gif) repeat-X; }
#bannerRight { color:White; background-color:#F7E7C6; }
#subMenu { color:Brown; }

/* ---------------------------------------------------------------------------------------
LeftCol and RightCol have different meaning in the checkout process where they have to 
fit in with the surrounding tab images.
--------------------------------------------------------------------------------------- */
.leftCol-tabs {
	/* The main left column - half page width */
	clear:both;
	float:left;
	width:425px;
	padding:0;
	margin:10px 10px 10px 20px;
	/* We are trying not to use padding because of IE: padding:12px;*/
}

.rightCol-tabs {
	/* The main right column - half page width */
	float:left;
	width:425px;
	padding:0;
	margin:10px;
	/* We are trying not to use padding because of IE: padding:12px;*/
}

#sitemap { clear:both; margin:4px auto; width:972px; height:300px; }

#footer {
	/* Centered, full width */
	margin:4px auto 0 auto;
	width:972px;
	height:150px;
	text-align:center;
}

#footerlinks {
	/* Centered, full width */
	width:972px;
	height:32px;
	text-align:center;
	margin:4px auto 0 auto;
	border-bottom:solid 1px #222;
}

/* ----------------------------------------------------
           PORTRAIT ORDERING PAGE -- COMPLEX
   ---------------------------------------------------- */

/*
#OrderPortrait_Tabs {
	position:relative;
	top:10px; left:32px; height:80px; width:928px;
}
*/

.line-of-tabs { position:relative; top:10px; left:32px; height:80px; padding-top:2px; }
.line-of-tabs td { font-size:8pt; text-align:center; }

.tabs-3-1 { background:transparent url(../img/tabs/tabs-3-1.gif) no-repeat; }
.tabs-3-2 { background:transparent url(../img/tabs/tabs-3-2.gif) no-repeat; }
.tabs-3-3 { background:transparent url(../img/tabs/tabs-3-3.gif) no-repeat; }

.tabs-4-1 { background:transparent url(../img/tabs/tabs-4-1.gif) no-repeat; }
.tabs-4-2 { background:transparent url(../img/tabs/tabs-4-2.gif) no-repeat; }
.tabs-4-3 { background:transparent url(../img/tabs/tabs-4-3.gif) no-repeat; }
.tabs-4-4 { background:transparent url(../img/tabs/tabs-4-4.gif) no-repeat; }

.tabs-5-1 { background:transparent url(../img/tabs/tabs-5-1.gif) no-repeat; }
.tabs-5-2 { background:transparent url(../img/tabs/tabs-5-2.gif) no-repeat; }
.tabs-5-3 { background:transparent url(../img/tabs/tabs-5-3.gif) no-repeat; }
.tabs-5-4 { background:transparent url(../img/tabs/tabs-5-4.gif) no-repeat; }
.tabs-5-5 { background:transparent url(../img/tabs/tabs-5-5.gif) no-repeat; }

.tabs-6-1 { background:transparent url(../img/tabs/tabs-6-1.gif) no-repeat; }
.tabs-6-2 { background:transparent url(../img/tabs/tabs-6-2.gif) no-repeat; }
.tabs-6-3 { background:transparent url(../img/tabs/tabs-6-3.gif) no-repeat; }
.tabs-6-4 { background:transparent url(../img/tabs/tabs-6-4.gif) no-repeat; }
.tabs-6-5 { background:transparent url(../img/tabs/tabs-6-5.gif) no-repeat; }
.tabs-6-6 { background:transparent url(../img/tabs/tabs-6-6.gif) no-repeat; }

#OrderPortrait_TabsN {
	background:transparent url(../img/tabs/tabsn.gif) no-repeat;
	width:928px;
	height:12px;
	position:relative;
	margin:0 0 0 32px; 
	padding:0;
	clear:both;
}

#OrderPortrait_TabsM {
	background:#eee url(../img/tabs/tabsm.gif) repeat-Y;
	width:928px;
	position:relative;
	margin:0 0 0 32px; 
	padding:0;
	clear:both;
}

#OrderPortrait_TabsB {
	background:#eee url(../img/tabs/tabsb.gif) no-repeat;
	width:928px;
	position:relative;
	margin:0 0 0 0px; 
	padding-bottom:8px; 
	clear:both;
}

#content-footer {
	clear:both; 
	padding:0 0 0 32px;
	margin:-34px 0 0 32px;
	background:#eee url(../img/tabs/tabsm.gif) repeat-Y;
	height:28px; 
	padding-top:4px;
	width:896px;
	text-align:center;
	color:#999;
	font-size:12pt;
	font-weight:bold;
	border-bottom:solid 2px #999;
}

#OrderPortrait_TabsF 
{
	margin:0 0 0 32px; 
	padding:0;
	background:transparent url(../img/tabs/tabsf.gif) no-repeat;
	height:72px;
	width:928px;
	text-align:center;
	color:#666;
	font-size:12pt;
	font-weight:bold;
}
/*

* html #OrderPortrait_TabsF { left:0px; }

*/

#OrderPortrait_Frame {
	position:relative;
	top:10px; left:32px; width:928px;
	background-color:Yellow; /*#E9E9E9;*/
	border:solid 1px gray;
}

#OrderPortrait1_grid {
	position:relative;
	top:30px; left:30px; width:380px; height:560px;
	padding:10px 5px 5px 10px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step0.gif) no-repeat;
}

#OrderPortrait1_step1 {
	position:absolute;
	top:10px; left:430px; width:205px; height:151px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step1.gif) no-repeat;
	padding:32px 0 0 28px;
	font-size:8pt;
}

#OrderPortrait1_step1 td { font-size:8pt; }

#OrderPortrait1_step2 {
	position:absolute;
	top:130px; left:430px; width:150px; height:110px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step2.gif) no-repeat;
	padding:32px 0 0 28px;
	font-size:8pt;
}

#OrderPortrait1_step3 {
	position:absolute;
	top:250px; left:430px; width:150px; height:110px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step3.gif) no-repeat;
	padding:32px 0 0 28px;
	font-size:8pt;
}

#OrderPortrait1_step4 {
	position:absolute;
	top:370px; left:430px; width:150px; height:110px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step4.gif) no-repeat;
	padding:32px 0 0 28px;
	font-size:8pt;
}

#OrderPortrait1_step5 {
	position:absolute;
	top:490px; left:430px; width:150px; height:110px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step5.gif) no-repeat;
	padding:32px 0 0 28px;
	font-size:8pt;
}

#OrderPortrait1_step6 {
	position:absolute;
	top:10px; left:592px; width:285px; height:450px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step6.gif) no-repeat;
	padding:32px 12px 12px 36px;
	text-align:left;
	line-height:1.2em;
}
#OrderPortrait1_step6 p { 
	font-weight:normal; 
	padding:0; 
	margin:0 0 5px 10px; 
}

#OrderPortrait1_step7 {
	position:absolute;
	top:350px; left:592px; width:306px; height:150px;
	background:transparent url(../img/backgrounds/OrderPortrait1_step7.gif) no-repeat;
	text-align:left;
	padding:28px 12px 12px 36px;
}

#OrderPortrait1_step7 p { padding:0.25em 0; margin:0; }

#OrderPortrait1_step8 {
	position:absolute;
	top:490px; left:592px; width:276px; height:150px;
	text-align:left;
	line-height:1.25em;
	padding:2px 12px 2px 36px;
	font-weight:bold;
}

#OrderPortrait1_step9 {
	position:absolute;
	top:386px; left:592px; width:322px; height:240px;
	background-color:White;
	border:solid 1px gray;
}

.OrderPortraitTable {
	border:solid 1px #203040;
	border-collapse:collapse;
	margin-left:12px;
}

.OrderPortraitTable td, .OrderPortraitTable th {
	text-align:center;margin:0; padding:0; font-size:80%;
	border:solid 1px #708090;
}

#OrderPortrait2_1 {
	position:relative;
	top:10px; left:10px;
	width:420px; padding:15px; /* remember - whatever gets added as padding must come off the width */
	background-color:White;
	border:solid 1px gray;
	margin-bottom:40px;
}

#OrderPortrait2_2 {
	position:absolute;
	top:10px; left:470px;
	width:440px; padding:2px; /* remember - whatever gets added as padding must come off the width */
	background-color:White;
	border:solid 1px gray;
}

#OrderPortrait3_1 {
	position:relative;
	top:10px; left:10px;
	width:380px; padding:15px; /* remember - whatever gets added as padding must come off the width */
	background-color:White;
	border:solid 1px gray;
	margin-bottom:40px;
	float:left;
}

#OrderPortrait3_2 {
	/*position:absolute;*/
	float:left;
	margin:10px 0 0 20px;
	/*top:10px; left:430px;*/
	width:480px; padding:2px; /* remember - whatever gets added as padding must come off the width */
	background-color:White;
	border:solid 1px gray;
}

#OrderPortrait4_1 {
	position:relative;
	float:left;
	top:0px; left:10px;
	width:450px;
	padding:5px; /* remember - whatever gets added as padding must come off the width */
}

#OrderPortrait4_2 {
	float:left;
	width:400px; 
	padding:5px 8px 8px 32px; /* remember - whatever gets added as padding must come off the width */
}

#mini-basket { background-color:#ffe; border:dotted 2px #E0E0E0; margin:12px; width:450px; }
#mini-basket td { vertical-align:top; line-height:1.0em; padding:3px; }

ul { padding:0; margin-left:24px; }