/* CSS B2B */

/* ---------- 1.0 MISC ---------- */

* {
	padding:0;
	margin:0;
	border:0;
}
	
body {
	color:#4F4F4F;
	font: 0.8em "Arial", Verdana, Tahoma, Helvetica, Sans-Serif;
	background:#000;
	text-align:center;
}

#panel {
	position: relative;
	margin: 0 auto;
	width: 984px;
	text-align: left;
}

.endDiv {
	clear: both;
}

#content {
	background:#fff;
	float:left;
	margin-left:3px;
	width:560px;	
}

#content2 {
	background: url(images/bottom_left2.png) bottom left no-repeat;
	width:560px;	
}

#content3 {
	background: url(images/bottom_right2.png) bottom right no-repeat;
	width:560px;	
}

#content4 {
	padding: 25px 15px 15px 15px;
	width:530px;
	min-height:710px;
}

#home #content4 {
	padding-top: 15px;
}

#left {
	float: left;
	width: 256px;
}

#left2 {
	background: #fff url(images/topLeft.png) top left no-repeat;
	width:256px;
}

#left3 {
	background: url(images/bottom_left.png) bottom left no-repeat;
	width: 256px;
}

#left4 {
	padding:10px;
	width:236px;
}

#extraLeft {
	margin-top: 5px;
}

#extraLeft2 {
	padding:10px;
}

#right {
	float: right;
	width: 162px;
	
}

#right2 {
	background: #fff url(images/topRight.png) top right no-repeat;
	width: 162px;
}

#right3 {
	background: url(images/bottom_right.png) bottom right no-repeat;
	width: 162px;
}

#right4 {
	padding: 15px 10px;
	width: 142px;
}

#extraRight {
	margin-top: 10px;
}

.extraRight2 {
	padding: 0 10px 0 10px;
}

#copyright {
	margin: 10px 210px 10px 280px;
	text-align: center;
	color: #fff;
	font-family: "Arial";
	font-size: 0.8em;
}


/* ---------- 2.0 LEFT ---------- */

	/* ---------- 2.1 LOGO ---------- */
	
	#logo{
		width: 230px;
		height: 45px;
		font-weight: normal;
		font-size: 1.0em;
		line-height: 1.0em;
		text-indent: -2000em;
	}
		
	#logo h1 {
		width:230px;
		height: 45px;
	}
	
	#logo h1 a {
		width:230px;
		height: 45px;
		display:block;
		background: url(images/logo.jpg) no-repeat;
	}

	/* ---------- 2.2 MENU ---------- */
	
	#menu {
		width: 236px;
		margin-top: 30px;
	}
	
	#menu ul {
		list-style: none;
	}
	
	#menu ul li {
		display: block;
		width: 230px;
		height: 29px;
		margin-bottom: 2px;
		cursor:pointer;
	}
	
	#menu ul li a {
		display: block;
		width: 230px;
		height: 29px;
		text-indent: -2000em;
		font-size:1.0em;
		cursor:pointer;
	}
	
	#menu ul li.home a {
		background: url(images/menu_home.png) 0 0 no-repeat;
	}
	
	#menu ul li.howToOrder a {
		background: url(images/menu_order.png) 0 0 no-repeat;
	}
	
	#menu ul li.artwork a {
		background: url(images/menu_artwork.png) 0 0 no-repeat;
	}	
	
	#menu ul li.stationery a {
		background: url(images/menu_stationery.png) 0 0 no-repeat;
	}
	
	#menu ul li.business a {
		background: url(images/menu_business.png) 0 0 no-repeat;
	}	
	
	#menu ul li.leaflet a {
		background: url(images/menu_leaflet.png) 0 0 no-repeat;
	}	
	
	#menu ul li.poster a {
		background: url(images/menu_poster.png) 0 0 no-repeat;
	}
	
	#menu ul li.brochure a {
		background: url(images/menu_brochure.png) 0 0 no-repeat;
	}	

	#menu ul li.postcard a {
		background: url(images/menu_postcard.png) 0 0 no-repeat;
	}
	
	#menu ul li.invitation a {
		background: url(images/menu_invitation.png) 0 0 no-repeat;
	}
	
	#menu ul li.greeting a {
		background: url(images/menu_greeting.png) 0 0 no-repeat;
	}	
	
	#menu ul li.more a {
		background: url(images/menu_more.png) 0 0 no-repeat;
	}	
	
	#menu ul li.printBuyingGuide a {
		background: url(images/menu_print.png) 0 0 no-repeat;
	}	
	
	#menu ul li.contact a {
		background: url(images/menu_contact.png) 0 0 no-repeat;
	}	
	
	
	/* -------- 2.1 ---------- */
	
	#more ul {
		list-style: none;
	}
	
	#more ul li {
		display: block;
		width: 225px;
		height: 18px;
		margin-bottom: 10px;
	}
	
	#more ul li a {
		display: block;
		width: 225px;
		height: 18px;
		text-indent: -2000em;
		font-size: 1.0em;
	}

	#more ul li.filesAccepted {
		height: 47px;
	}
	
	#more ul li.filesAccepted a {
		height: 47px;
	}
	
	#more ul li.greatPrices a {
		background: url(images/great_price.png) 0 0 no-repeat;
	}
	
	#more ul li.freeDelivery a {
		background: url(images/free_delivery.png) 0 0 no-repeat;
	}
		
	#more ul li.freeProof a {
		background: url(images/free_proof.png) 0 0 no-repeat;
	}	
	
	#more ul li.fastTurnaround a {
		background: url(images/fast_turnaround.png) 0 0 no-repeat;
	}

	#more ul li.personalServices a {
		background: url(images/personal_service.png) 0 0 no-repeat;
	}		
	
	#more ul li.filesAccepted a {
		background: url(images/files_accepted.png) 0 0 no-repeat;
	}		
	
	
/* ---------- 3.0 HELP ---------- */

#help {
	width: 499px;
	height: 53px;
	position:relative;
	margin:0 auto;
	left:40px;
	background: url(images/help.png) 50% 100% no-repeat;
}	
	
	
/* ---------- 4.0 CONTENT ---------- */
	
	#content {
		line-height:1.5em;
		position:relative;
	}

	#content h2 {
		color: #0096DB;
		margin-bottom:0.5em;
		font-size:2em;
		font-family:"Helvetica",Arial,Verdana, sans-serif;
	}
	
	#content h3 {
		color: #0096DB;
		margin-bottom:0;
		font-size:1.3em;
	}
	
	#content h4 {
		color: #0096DB;
		margin-bottom:0.1em;
		font-size:1.1em;
	}
	
	#content .payAttention {
		color:#E4449D;
		font-weight:bold;
		margin-bottom:10px;
	}
	
	#content p {
		margin: 0 0 20px 0;
	}
	
	#content ul, #content ol {
		margin: 0 0 10px 19px;
	}
	
	#content li {
		margin: 0 0 8px 0;
	}
	
	#content a {
		color:#0096DB;
		text-decoration:underline;
	}
	
	#content a:hover {
		text-decoration:none;
	}
	
	#content .clickOn {
		font-family:"Verdana", Arial ;
		font-size:0.8em;
		text-align:center;
		margin:10px 0 0 0;
		line-height:1%;
	}
	
	#yellow #content h2, #yellow #content h3, #yellow #content h4, #yellow #content a {
		color:#F5B332;
	}

	/* ---------- 4.1 home page ---------- */
	#content ul.homePage {
		list-style: none;
		margin:5px 0 0 0;
	}
	
	#content ul.homePage li {
		float: left;
		width: 170px;
		height: 132px;
		margin:10px 10px 0 0;
	}
	
	#content ul.homePage li a {
		display: block;
		width: 170px;
		height: 132px;
		text-indent: -2000em;
	}

	#content ul.homePage li.stationery a {
		background: url(images/stationery.png) 0 0 no-repeat;
	}
	
	#content ul.homePage li.business a {
		background: url(images/businessCards.png) 0 0 no-repeat;
	}
	
	#content ul.homePage li.leaflet a {
		background: url(images/leaflet.png) 0 0 no-repeat;
	}	
	
	#content ul.homePage li.leaflet, #content ul.homePage li.postcard, #content ul.homePage li.additionalServices {
		margin-right: 0px;
	}
	
	#content ul.homePage li.brochure a {
		background: url(images/brochures.png) 0 0 no-repeat;
	}	

	#content ul.homePage li.poster a {
		background: url(images/poster.png) 0 0 no-repeat;
	}

	#content ul.homePage li.postcard a {
		background: url(images/postcard.png) 0 0 no-repeat;
	}
	
	#content ul.homePage li.invitation a {
		background: url(images/invitation.png) 0 0 no-repeat;
	}
	
	#content ul.homePage li.greeting a {
		background: url(images/greeting.png) 0 0 no-repeat;
	}	

	#content ul.homePage li.additionalServices a {
		background: url(images/additional_services.png) 0 0 no-repeat;
	}
	
	#content img.services {
		margin-top: 20px;
	}
	
	#content img.help {
		margin-top: 10px;
	}
	
	/* ---------- 4.2 Print ---------- */
	
	#print {
		font-size: 0.95em;
		line-height:1.5em;
	}
	
	#print .priceTable {
		margin-bottom:50px;
	}
	
	#print table {
		border-collapse: collapse;
		width: 100%;
		font-size: 0.9em;
		margin: 10px 0 3px 0;
		line-height:1.3em;
	}
	
	#print td, #print th {
		padding: 2px;
		text-align: center;
	}
	
	#print th.size, #print th.firstSize {
		text-align: left;
		padding-left: 8px;
		width: 140px;
	}
	
	#print th.firstSize {
		border-top: 1px solid #fff;
	}
	
	#print th.front {
		width: 50px;
	}
	
	#print tr.numbers {
		color: #fff;
	}
	
	#print #blue tr.numbers {
		background-color: #0c7ec9;
	}
	
	#print #orange tr.numbers {
		background-color: #f08e26;
	}
	
	#print #purple tr.numbers {
		background-color: #d90077;
	}
	
	#print #blue tr.even {
		background-color: #d8eaf2;
	}
	
	#print #blue tr.even td, #print #purple tr.even td, #print #orange tr.even td {
		border-top: 1px solid #fff;
	}
	
	#print #blue tr.odd td {
		border-top: 1px solid #d8eaf2;
	}
	
	#print tr {
		height: 3em;
	}

	#print #orange tr.even {
		background-color: #f2e9d8;
	}
	
	#print #orange tr.odd td {
		border-top: 1px solid #f2e9d8;
		height: 3em;
	}
	
	#print #purple tr.even {
		background-color: #f2d8e3;
	}	
	
	#print #purple tr.odd td {
		border-top: 1px solid #f2d8e3;
		height: 3em;
	}
	
	#print h2 {
		text-transform: uppercase;
		margin: 1.5em 0 0.4em 0;
	}
	
	#blue h2, #blue .clickOn {
		color: #0c7ec9;
	}
	
	#orange h2, #orange .clickOn {
		color: #f08e26;
	}
	
	#purple h2, #purple .clickOn {
		color: #d90077;
	}
	
	#print td a {
		display:block;
		padding:5px 1px;
		color:#4F4F4F;
		text-decoration:none;
	}
	
	#print td a:hover {
		padding:4px 0;
		display:block;
	}
	
	#blue td a:hover {
		border:1px dashed #0c7ec9;
	}
	
	#orange td a:hover {
		border:1px dashed #f08e26;
	}
	
	#purple td a:hover {
		border:1px dashed #d90077;
	}



		/* ---------- 4.2.1 Print Colour Key ---------- */	

		#ask {
			background: url(images/ask.png) 0 100% no-repeat;
			width:530px;
			margin-bottom:30px;
		}
		
		#colourKey {
			width: 310px;
			float: right;
		}
		
		#colourKey th {
			text-align: left;
			padding-left: 5px;	
		}
		
		#colourKey td.caption {
			text-align: left;
			width: 240px;
		}
		
		#blue #colourKey th {
			background-color:#d8eaf2;
			color: #0c7ec9;
		}
		
		#blue #colourKey table {
			border: 1px solid #d8eaf2;
		}

		#purple #colourKey th {
			background-color:#f2d8e3;
			color: #d90077;
		}
		
		#purple #colourKey table {
			border: 1px solid #f2d8e3;
		}
		
		#orange #colourKey th {
			background-color: #f2e9d8;
			color: #f08e26;
		}
		
		#orange #colourKey table {
			border: 1px solid #f2e9d8;
		}		

	/* ---------- 4.2 Choose service ---------- */
	
	#service {
		margin: 0 0 20px 0;
	}
	
	#service h2 {
		font-size: 1.6em;
		font-family: "Arial";
		text-transform: uppercase;
		margin: 24px 0 4px 0;
	}

	#service h3 {
		font-size: 1.4em;
		font-family: "Arial";
		text-transform: uppercase;
		margin: 0;
	}

	#service table {
		border: solid 1px #d8eaf2;
		padding: 3px 10px;
		margin-top: 22px;
		margin-bottom: 20px;
	}

	#service table tr {
		height: 3em;
	}

	#service select {
		padding: 2px 4px;
		width: 200px;
		border: solid 1px #ccc;
	}
	
	#service table th {
		width: 150px;
	}

	#service #price {
		color: #e98900;
		font-weight: bold;
	}
	
	#service input.button {
		display: block;
		width: 143px;
		height: 41px;
		padding: 0;
		margin: 0;
		border: 0;
		background: url(images/next_bt.png) bottom left no-repeat;
		font-weight: normal;
		font-size: 1.0em;
		line-height: 1.0em;
		text-indent: -2000em;
		cursor: pointer;
	}

	/* ---------- 4.3 Article ---------- */
	
	.article .section {
		display:none;
	}
	
	.article table {
		margin-bottom: 15px;
	}
	
	#article table th {
		width: 100px;
		border-right: 1px solid #000;
	}
	
	.article table tr {
		height: 1.5em;
		margin: 5px 0;
	}

	.article table td {
		padding: 0px 3px 0px 15px; 
	}
	
		/* ---------- 4.3.1 Anchors List ---------- */
		
		.anchorList {
			position:absolute;
			z-index:10;
			margin-top:25px;
			top:-25px;
			left:365px;
			width:180px;
		}
		
		.anchorList dd,.anchorList dt {
			list-style:none;
			margin:0 !important;
			width:180px;
		}
		
		.anchorList dd a, .anchorList dt a  {
			background:#FFAD1F;
			display:block;
			padding:1px 15px;
			border-bottom:1px solid #f5b332;
			color:#fff !important;
			font-weight:normal !important;
			text-decoration:none !important;
			font-size:0.9em;
			width:150px;
			text-transform:lowercase;
		}
		
		.anchorList dt a {
			background:#FFB93F;
			padding:7px 10px 5px 10px;
			width:160px;
			text-transform:uppercase;
			font-weight:bold !important;
		}
		
		.article .anchorList dd a, #orange .anchorList dd a {
			background:#FFB93F;
			border-bottom:1px solid #F19127;
		}
		
		.article .anchorList dt a, #orange .anchorList dt a  {
			background:#f19127;
			border-bottom:1px solid #f5b332;
		}
		
		#blue .anchorList dd a {
			background:#379FDF;
			border-bottom:1px solid #0C7EC9;
		}
		
		#blue .anchorList dt a {
			background:#0C7EC9;
			border-bottom:1px solid #0C7EC9;
		}
		
		#purple .anchorList dd a {
			background:#DF53A1;
			border-bottom:1px solid #D90077;
		}
		
		#purple .anchorList dt a {
			background:#D90077;
			border-bottom:1px solid #D90077;
		}

		.anchorList dd a span{
			font-size:1.6em;
			position:relative;
			top:1px;
		}
		
		.article .anchorList dd a:hover, article .anchorList dt a:hover, #orange .anchorList dd a:hover, #orange .anchorList dt a:hover {
			background:#FFAD1F;
		}
		
		#blue .anchorList dd a:hover, #blue .anchorList dt a:hover {
			background:#0D8FDF;
		}
		
		#purple .anchorList dd a:hover, #purple .anchorList dt a:hover {
			background:#D90077
		}
		
		
		
		

	
	/* ---------- 4.4 Provide details ---------- */
	#provideDetails {
		margin: 0 0 40px 0;
	}

	#provideDetails th {
		width: 110px;
	}
	
	#provideDetails table.summary {
		padding: 5px;
		border: solid 1px #d8eaf2;
		font-size: 0.85em;
		margin-bottom:20px;
	}
	
	#provideDetails .sendDetails{
		margin-bottom:20px;
	}
	
	#provideDetails table tr {
		height: 2em;
	}
	
	#provideDetails input {
		width: 250px;
		padding: 3px 8px;
		color: #0c7ec9;
		border: 1px solid #d8eaf2;
	}
	
	
	#provideDetails input.button, #provideDetails input.buttonOrder {
		display: block;
		width: 143px;
		height: 41px;
		padding: 0;
		margin: 0;
		border: 0;
		background: url(images/next_bt.png) bottom left no-repeat;
		text-indent: -2000em;
		cursor: pointer;
	}
	
	#provideDetails input.buttonOrder {
		background: url(images/order_bt.png) bottom left no-repeat;
	}	

	#provideDetails ul.messages {
		margin: 2px 0 10px 0;
		padding:10px 15px;
		color: #DA007A;
		list-style: none;
		border:2px solid #DA007A;
	}
	
	/* ---------- 4.5 Upload Artwork ---------- */	
	#uploadArtwork {
		margin: 0 0 30px 0;
	}
	
	#uploadArtwork form {
		margin: 0 0 30px 0;
	}
	
	#uploadArtwork table {
		border-collapse: collapse;
		width: 100%;
		margin: 20px 0 20px 0;
	}
	
	#uploadArtwork table th {
		width: 70px;
		padding: 5px;
	}
	
	#uploadArtwork table td {
		margin: 0 10px;
		text-align: center;
		height: 3em;
	}	
	
	#uploadArtwork table td.message {
		height: 1.5em;
		font-size: 0.95em;
		vertical-align: top;
		color:#DA007A;
	}
	
	#uploadArtwork table tr.title {
		background-color: #0096DB;
		color: #fff;
	}	
	
	#uploadArtwork table tr.even {
		background-color: #DFF5FF;
	}
		
	#uploadArtwork input.button {
		display: block;
		width: 213px;
		height: 41px;
		padding: 0;
		margin: 0;
		border: 0;
		background: url(images/uploadfiles_bt.png) bottom left no-repeat;
		text-indent: -2000em;
		cursor: pointer;
	}

	#uploadArtwork input.order {
		display: block;
		width: 143px;
		height: 41px;
		padding: 0;
		margin: 0;
		border: 0;
		background: url(images/order_bt.png) bottom left no-repeat;
		text-indent: -2000em;
		cursor: pointer;
	}

	#uploadArtwork ul {
		color: #DA007A;
	}


/* ---------- 5.0 RIGHT ---------- */

#right2 a.seeMore  {
	display: block;
	width: 87px;
	height: 14px;
	text-indent: -2000em;
	margin: 15px 0 15px 50px;
	background: url(images/SeeMore.png) 0 0 no-repeat;
}


#right2 a.howToOrder  {
	display: block;
	width: 140px;
	height: 16px;
	text-indent: -2000em;
	background: url(images/howToOrder.png) 0 0 no-repeat;
}



	/* ---------- 5.1 Steps ---------- */

	#steps ul li {
		display: block;
		width: 140px;
		height: 40px;
	}
	
	#steps ul li a {
		display: block;
		width: 140px;
		height: 40px;
		text-indent: -2000em;
	}
	
	#steps ul li.chooseProduct a {
		background: url(images/chooseProduct.png) 0 0 no-repeat;
	}
	#steps ul li.selectOptions a {
		background: url(images/selectOptions.png) 0 0 no-repeat;
	}
	#steps ul li.chooseService a {
		background: url(images/chooseService.png) 0 0 no-repeat;
	}
	#steps ul li.provideDetails a {
		background: url(images/provideDetails.png) 0 0 no-repeat;
	}
	
	#steps ul li.uploadArtwork {
		height: 38px;
	}
	
	#steps ul li.uploadArtwork a {
		background: url(images/uploadArtwork.png) 0 0 no-repeat;
		height: 38px;
	}	
	
	
	/* ---------- 5.1 Subscribes ---------- */
	
	#extraRight {
		color: #fff;
		font-size: 0.8em;
		font-family: "Arial";
	}
	
	#extraRight p {
		margin: 3px 0 3px 0;
	}
	
	#extraRight h2 {
		display: block;
		width: 108px;
		height: 18px;
		margin: 15px 0 8px 0;
		background: url(images/subscribe.png) 0 0 no-repeat;
		text-indent: -2000em;
	}
	
	#extraRight ul {
		margin-left: 10px;
	}		
	
	#extraRight a.download {
		display: block;
		margin: 10px 0 0 0;
		width: 100px;
		height: 26px;
		background: url(images/download.png) 0 0 no-repeat;
		text-indent: -2000em;
	}