/* CSS Document */
/* ============================================================================================================= */
/* CSS for Online Shop / View Basket / Checkout */
* {
	margin:0;
	padding:0;
}

/* breadcrumbs */
div.breadcrumbs {
	padding-top:4px;
	padding-bottom:5px;
}
div.breadcrumbs p {
	
}

/* ============================================================================================================= */
/* ======== ONLINE-SHOP ======= ONLINE-SHOP ======= ONLINE-SHOP ======= ONLINE-SHOP ======= ONLINE-SHOP ======== */
/* ============================================================================================================= */
/* Stage 1 & 2 & 3 - Display Main Category */
#MainCategory {
	width: 660px;
}
#MainCategory div.categoryrow {
	width: 660px;
}

#MainCategory div.categories {
	float:left;
	padding-bottom:15px;
	text-align:center;
	width:124px;
}
#MainCategory div.categories p {
	margin-bottom:12px;
}
#MainCategory div.categories a:link, #MainCategory div.categories a:visited {
	color:#000000;
	text-decoration:none;
}
#MainCategory div.categories a:hover, #MainCategory div.categories a:active {
	color:#000000;
	text-decoration:underline;
}


#MainCategory div.categories div.catImage {
	padding-bottom:6px;
}
#MainCategory div.categories div.catImage img {
	border:1px solid #000000;
}

#MainCategory div.spacer {
	float:left;
	width:8px;
} 


/* ===================================== */
/* Stage 5 - List Products */
#ListProducts {
	width: 660px;
}
#ListProducts div.productrow {
	width: 660px;
}


#ListProducts div.productdetails {
	float:left;
	padding-bottom:15px;
	text-align:center;
	width:124px;
}

#ListProducts div.spacer {
	float:left;
	width:8px;
} 


#ListProducts div.productdetails div.productImage {
	padding-bottom:6px;
}
#ListProducts div.productdetails div.productImage img {
	border:1px solid #000000;
}
#ListProducts div.productdetails div.packagenameLong {
	padding:0 10px 0 10px;
	width:114px;
}
#ListProducts div.productdetails div.packagenameShort {
	padding:0 2px 0 2px;
	width:120px;
}

#ListProducts div.productdetails p {
	line-height:1.25em;
	margin-bottom:12px;
}

#ListProducts div.productdetails p {
	line-height:1.25em;
	margin-bottom:12px;
}
#ListProducts div.productdetails a:link, #ListProducts div.productdetails a:visited {
	color:#000000;
	text-decoration:none;
}
#ListProducts div.productdetails a:hover, #ListProducts div.productdetails a:active {
	color:#000000;
	text-decoration:underline;
}

#ListProducts div.productdetails span.smaller {
	font-size:0.9em;
}

/* ===================================== */
/* Stage 5 - Display Product */
#DisplayProduct {
	padding-bottom:10px;
	width: 710px;
}

#DisplayProduct span.red {
	color:#b80000;
}

#DisplayProduct div.productDetails {
	float:left;
	margin-right:6px;
	width:370px;
}
#DisplayProduct div.displayRight {
	float:left;
	width:282px;
}

/* -- productDetails -- */
/* productSpec */
#DisplayProduct div.productDetails div.productSpec {
	padding-bottom:15px;
}

#DisplayProduct div.productDetails div.productSpec td.label {
	color:#4c4c4c;
	line-height:1.3em;
	padding:0 5px 8px 0;
	vertical-align:top;
	width:28%;
}

#DisplayProduct div.productDetails div.productSpec td.value {
	line-height:1.3em;
	padding:0 0px 8px 5px;
	vertical-align:top;
	width:72%;
}

/* productDescription */
#DisplayProduct div.productDetails div.productDescription {
	line-height:0.95em;
	padding-bottom:2px;
}


/* -- productImages -- */
#DisplayProduct div.productImages {
}
#DisplayProduct div.productImages div.mainImage {
	padding-top:0;
	text-align:center;
	width:282px;
}
#DisplayProduct div.productImages div.mainImage img {
	border:1px solid #000000;
	cursor:hand;
}

#DisplayProduct div.productImages div.smallerImages {
	padding-top:3px;
	width:282px;
}
#DisplayProduct div.smallerImages div.smallImage {
	float:right;
	text-align:center;
	width:92px;
}
#DisplayProduct div.smallerImages div.smallImage img  {
	border:1px solid #000000;
	cursor:hand;
}

#DisplayProduct div.smallerImages div.centreImage {
	padding:0 2px 0 2px;
}

/* -- addBasket -- */
#DisplayProduct div.addBasket {
	display:none;
}


/* linkedProducts */
#DisplayProduct div.linkedProducts {
	padding-top:20px;
	padding-bottom:5px;
	width: 660px;
}

#DisplayProduct div.linkedProducts p.darkgrey {
	color:#4c4c4c;
	margin-bottom:10px;
}
#DisplayProduct div.linkedProducts td {
	padding:0 10px 5px 10px;
	text-align:center;
	vertical-align:top;
	width:122px;
}
#DisplayProduct div.linkedProducts img {
	border:1px solid #000000;
	margin-bottom:5px;
}

#Content #DisplayProduct div.linkedProducts a:link, #Content #DisplayProduct div.linkedProducts a:visited {
	color:#000000;
}
#Content #DisplayProduct div.linkedProducts a:hover, #Content #DisplayProduct div.linkedProducts a:active {
	color:#4c4c4c;
}



/* ============================================================================================================= */
/* ======== VIEW-BASKET ======= VIEW-BASKET ======= VIEW-BASKET ======= VIEW-BASKET ======= VIEW-BASKET ======== */
/* ============================================================================================================= */
/* Stage 1 - Display Items */
#ViewBasket {
	width: 710px;
}

#ViewBasket p.morespacing {
	line-height:1.3em;
}

#ViewBasket td {
	padding:5px 5px 1px 5px;
	vertical-align:top;
}
#ViewBasket td.description {
	padding-left:0;
	width:68%;
}
#ViewBasket td.priceeach {
	padding-right:15px;
	text-align:right;
	width:12%;
}
#ViewBasket td.quantity {
	padding-top:0px;
	padding-bottom:1px;
	text-align:center;
	width:8%;
}
#ViewBasket td.linevalue {
	text-align:right;
	width:12%;
}
#ViewBasket td.total {
	text-align:right;
}


#ViewBasket td.extrapadding {
	padding-top:5px;
}

#ViewBasket tr.heading td {
	font-weight:bold;
	padding-top:0;
	padding-bottom:8px;
}
#ViewBasket tr.heading td.headingextra {
	padding-top:14px;
}

#ViewBasket tr.total td {
	font-weight:bold;
	padding-top:12px;
}

#ViewBasket input.qty {
	padding-right:2px;
	text-align:right;
	width:24px;
}


#ViewBasket div.buttons {
	padding-top:20px;
	padding-bottom:18px;
	width: 710px;
}
#ViewBasket div.buttons div.spacer {
	float:left;
	width:393px;
}
div.buttons div.checkout {
	float:left;
	margin-right:5px;
	width:156px;
}
div.buttons div.update {
	float:left;
	width:156px;
}

/* ============================================================================================================= */
/* ======= CHECKOUT ======= CHECKOUT ======= CHECKOUT ======= CHECKOUT ======= CHECKOUT ======= CHECKOUT ======= */
/* ============================================================================================================= */
#Checkout {
	width: 710px;
}

#Checkout p.morespacing {
	line-height:1.3em;
}
#Checkout hr {
	color:#000;
	height:1px;
	margin-top:8px;
	margin-bottom:10px;
}

/* bottom page buttons */
#Checkout div.buttons {
	padding-top:20px;
	padding-bottom:8px;
	width: 710px;
}
#Checkout div.buttons div.spacer {
	float:left;
	width:485px;
}
div.buttons div.back {
	float:left;
	margin-right:5px;
	width:110px;
}
div.buttons div.back img.backbutton {
	cursor:hand;
}
div.buttons div.continue {
	float:left;
	width:110px;
}
#Checkout p.miniheading {
	margin-bottom:9px;
}


/* Stage 1 - Display Items */
#Checkout div.viewItems td {
	padding:5px 5px 5px 5px;
	vertical-align:top;
}
#Checkout div.viewItems td.description {
	padding-left:0;
	width:68%;
}
#Checkout div.viewItems td.priceeach {
	padding-right:15px;
	text-align:right;
	width:12%;
}
#Checkout div.viewItems td.quantity {
	padding-top:0px;
	padding-bottom:1px;
	text-align:center;
	width:8%;
}
#Checkout div.viewItems td.linevalue {
	text-align:right;
	width:12%;
}
#Checkout div.viewItems td.total {
	text-align:right;
}


#Checkout div.viewItems td.extrapadding {
	padding-top:5px;
}

#Checkout div.viewItems tr.heading td {
	font-weight:bold;
	padding-top:0;
	padding-bottom:8px;
}
#Checkout div.viewItems tr.heading td.headingextra {
	padding-top:14px;
}

#Checkout div.viewItems tr.total td {
	font-weight:bold;
	padding-top:12px;
}




/* Stage 2 - Get Details */
#Checkout div.getDetails {
	padding-bottom:8px;
}
#Checkout div.personalDetails {
	border-right:1px dashed #000;
	float:left;
	padding:5px 18px 0 0;
	width: 335px;
}
#Checkout div.deliveryDetails {
	float:left;
	padding:5px 0 0 18px;
	width: 335px;
}

div.personalDetails div.label p, div.deliveryDetails div.label p {
	margin-bottom:0px;
}





div.deliveryDetails div.acceptterms {
	margin-top:22px;
	width:335px;
}
div.acceptterms div.label {
	float:right;
	padding-top:2px;
	width:307px;
}
div.acceptterms div.label p {
	line-height:1.4em;
}
div.acceptterms div.value {
	float:right;
	padding:0;
	margin:0;
	text-align:left;
	width:28px;
}


/* ---- termsconditions ---- */
#Checkout div.termsconditions {
	padding-bottom:10px;
} 
div.termsconditions h2 {
	font-size:0.85em;
	margin-bottom:15px;
}
div.termsconditions ol {
	margin-left:30px;
}
div.termsconditions li {
	font-size:0.75em;
	line-height:1.3em;
	padding-bottom:7px;
}







/* Stage 3 - Get Payment */
#Checkout div.getPayment {
/*	width: 335px;*/
	margin-top: 10px;
}
div.getPayment div.label p {
	margin-bottom:1px;
}

div.getPayment div.paymentLeft {
	float:left;
	padding:5px 18px 0 0;
	width: 335px;
}
div.getPayment div.paymentRight {
	border-left:1px dashed #000;
	float:left;
	padding:5px 0 0 18px;
	width: 335px;
}

/* paymentMethod */
div.paymentmethod {
	width: 335px;
}
div.paymentmethod div.label {
	width: 335px;
}
div.paymentmethod div.value {
	margin-top: 1px;
	width: 335px;
}
div.paymentmethod div.value select {
	width: 335px;
}

/* cardType */
div.getPayment div.cardType {
	margin-top: 1px;
	width: 335px;
}
div.getPayment div.cardType div.label {
	width: 335px;
}
div.getPayment div.cardType select {
	margin-top: 1px;
	width: 335px;
}
/* cardName */
div.getPayment div.cardName {
	float:left;
	margin-top: 5px;
	padding-right:5px;
	width: 175px;
}
div.getPayment div.cardName div.label {
	width: 175px;
}
div.getPayment div.cardName div.value {
	margin-top: 1px;
	width: 175px;
}
div.getPayment div.cardName input {
	width: 171px;
}
/* cardNumber */
div.getPayment div.cardNumber {
	float:left;
	margin-top: 5px;
	width: 155px;
}
div.getPayment div.cardNumber div.label {
	width: 155px;
}
div.getPayment div.cardNumber div.value {
	margin-top: 1px;
	width: 155px;
}
div.getPayment div.cardNumber input {
	width: 151px;
}
/* cardDatesIssueCVC */
div.getPayment div.cardDatesIssueCVC {
	float:left;
	margin-top: 5px;
	width: 225px;
}
/* cardStart */
#Checkout div.getPayment div.cardStart {
/*	margin-top: 5px;*/
	padding-right:5px;
	float:left;
	width: 110px;
}
#Checkout div.getPayment div.cardStart div.label {
	width: 110px;
}
#Checkout div.getPayment div.cardStart div.value {
	margin-top: 1px;
	width: 110px;
}
#Checkout div.getPayment div.cardStart select {
	font-size: 10px;
}
/* cardExpiry */
#Checkout div.getPayment div.cardExpiry {
/*	margin-top: 5px;*/
	float:left;
	width: 110px;
}
#Checkout div.getPayment div.cardExpiry div.label {
	width: 110px;
}
#Checkout div.getPayment div.cardExpiry div.value {
	margin-top: 1px;
	width: 110px;
}
#Checkout div.getPayment div.cardExpiry select {
	font-size: 10px;
}


/* cardIssueCVC */
/* cardIssue */
div.getPayment div.cardIssue {
	float: left;
	margin-top:7px;
	padding-right:5px;
	width: 110px;
}
div.getPayment div.cardIssue div.label {
	width: 110px;
}
div.getPayment div.cardIssue div.value {
	width: 50px; 
}
div.getPayment div.cardIssue input {
	width: 50px; 
}
/* cardCVC */
div.getPayment div.cardCVC {
	float: left;
	margin-top:7px;
	width: 110px; 
}
div.getPayment div.cardCVC div.label {
	width: 110px;
}
div.getPayment div.cardCVC div.value {
	width: 50px; 
}
div.getPayment div.cardCVC input {
	width: 50px; 
}
/* cvcGraphic */
div.getPayment div.cvcGraphic {
	margin-top: 12px;
	text-align:right;
	width:107px;
}
div.getPayment div.cvcGraphic img {
/*	margin-left: 10px;*/
}

/* ============================================================================================================= */
/* ======== ONLINE-PACKAGES ======== ONLINE-PACKAGES ======== ONLINE-PACKAGES ======== ONLINE-PACKAGES ========= */
/* ============================================================================================================= */
/* Stage 1 & 2 - Display Main Category */
#PackageCategory {
	width: 660px;
}
#PackageCategory div.categoryrow {
	width: 660px;
}

#PackageCategory div.categories {
	float:left;
	padding-bottom:15px;
	text-align:center;
	width:230px;
/*	width:134px; */
}
#PackageCategory div.categories p {
	margin-bottom:12px;
}
#PackageCategory div.categories a:link, #PackageCategory div.categories a:visited {
	color:#000000;
	text-decoration:none;
}
#PackageCategory div.categories a:hover, #PackageCategory div.categories a:active {
	color:#000000;
	text-decoration:underline;
}


#PackageCategory div.categories div.catImage {
	padding-bottom:6px;
}
#PackageCategory div.categories div.catImage img {
	border:1px solid #000000;
}

#PackageCategory div.spacer {
	float:left;
	width:10px;
} 




/* Stage 3 - Display Package */
#DisplayPackage {
	padding-bottom:10px;
	width: 660px;
}

#DisplayPackage span.red {
	color:#b80000;
}

#DisplayPackage div.productDetails {
	float:left;
	margin-right:6px;
	width:370px;
}
#DisplayPackage div.displayRight {
	float:left;
	width:282px;
}



/* -- productDetails -- */
/* productSpec */
#DisplayPackage div.productDetails div.productSpec {
	padding-bottom:15px;
}
#DisplayPackage div.productDetails div.productSpec td.label {
	color:#4c4c4c;
	line-height:1.3em;
	padding:0 5px 8px 0;
	vertical-align:top;
	width:30%;
}

#DisplayPackage div.productDetails div.productSpec td.value {
	line-height:1.3em;
	padding:0 0px 8px 5px;
	vertical-align:top;
	width:70%;
}


#DisplayPackage div.productDetails div.productSpec td.toppadding {
	padding-top:2px;
}
#DisplayPackage div.productDetails div.productSpec td.productitems {
	line-height:1.55em;
}

/* productDescription */
#DisplayPackage div.productDetails div.productDescription {
	line-height:0.95em;
	padding-bottom:2px;
}


/* -- productImages -- */
#DisplayPackage div.productImages {
	width:282px;
}

#DisplayPackage div.productImages div.mainImage {
	padding-top:3px;
	text-align:center;
	width:282px;
}
#DisplayPackage div.productImages div.mainImage img {
	border:1px solid #000000;
	cursor:hand;
}

#DisplayPackage div.productImages div.smallerImages {
	padding-top:3px;
	width:282px;
}
#DisplayPackage div.smallerImages div.smallImage {
	float:right;
	text-align:center;
	width:92px;
}
#DisplayPackage div.smallerImages div.smallImage img  {
	border:1px solid #000000;
	cursor:hand;
}

#DisplayPackage div.smallerImages div.centreImage {
	padding:0 2px 0 2px;
}

/* -- addBasket -- */
#DisplayPackage div.addBasket {
	display:none;
}



/* linkedProducts */
#DisplayPackage div.linkedProducts {
	padding-top:20px;
	padding-bottom:5px;
	width: 660px;
}

#DisplayPackage  div.linkedProducts p.darkgrey {
	color:#4c4c4c;
	margin-bottom:10px;
}

#DisplayPackage div.linkedProducts td {
	padding:0 10px 5px 10px;
	text-align:center;
	vertical-align:top;
	width:122px;
}
#DisplayPackage div.linkedProducts img {
	border:1px solid #000000;
	margin-bottom:5px;
}


#Content #DisplayPackage a:link, #Content #DisplayPackage a:visited {
	color:#000000;
}
#Content #DisplayPackage a:hover, #Content #DisplayPackage a:active {
	color:#4c4c4c;
}



