/*
 * name: eci_enhance.css
 * created: 29/09/08
 * last modified: 01/10/08
 * purpose: to extend "all.css" where required for the additional development
 */

/* ************************************************************************* */
/*
 * colours used (from logo)
 * red: rgb(234,48,49)
 * orange: rgb(244,159,49)
 * yellow: rgb(244,233,45)
 * green: rgb(10,174,77)
 * blue: rgb(0,166,228)
 * purple: rgb(161,54,148)
 * pink: rgb(236,35,149)
 */
/* ************************************************************************* */

/* change colours based on the body class / by section and reference elements by drill down */
body.portraits h1, body.portraits h2, body.portraits h3, body.portraits #bookingForm fieldset legend{color:rgb(234,48,49);}
body.passport h1, body.passport h2, body.passport h3, body.passport #bookingForm fieldset legend{color:rgb(244,159,49);}
body.myPhotos h1, body.myPhotos h2, body.myPhotos h3, body.myPhotos #optionsForm fieldset legend{color:rgb(244,233,45);}
body.commercial h1, body.commercial h2, body.commercial h3{color:rgb(10,174,77);}
body.events h1, body.events h2, body.events h3, body.events #optionsForm fieldset legend, body.events dt{color:rgb(0,166,228);}
body.restoration h1, body.restoration h2, body.restoration h3{color:rgb(161,54,148);}
body.artRoom h1, body.artRoom h2, body.artRoom h3{color:rgb(236,35,149);}
body.contact h1, body.contact h2, body.contact h3{color:rgb(234,48,49);}

/*swpp logo on front page*/
#swpp
{
	float:right;
}
p.swpp
{

	padding-top:40px;
	float:left;
}

.swpp-box
{
	margin-top:10px;
}

p.best-of-all
{
	color:#ff0000;
}

p.address-tag
{
	padding-top:30px;
	clear:both;
}

/* submit buttons moved to the right on booking forms */
body.portraits #bookingForm fieldset .submit, body.passport #bookingForm fieldset .submit{margin-left:26em;}

/* price list jquery madness */
#priceList
{
	width:521px;
	background:rgb(65,0,0);
}

#priceList div.selected .title
{
	font-weight:bold;
	background:rgb(65,0,0);
	border-color:#aaa;
}

#priceList div div{padding:9px 5px 6px 13px;}

#priceList div.title
{
	border:1px solid #444;
	background-color:#222;
	padding:10px;
	cursor:pointer;
}

#priceList div div table
{
	border:1px solid #333;
	border-width:1px 0 0 1px;
	background:#111;
	width:501px;
	margin-bottom:6px;
}

#priceList div div table thead th
{
	border:1px solid #333;
	border-width:0 1px 1px 0;
	background:#111;
	padding:3px;
}

#priceList div div table thead th.cost{width:200px;}

#priceList div div table tbody td
{
	border:1px solid #333;
	border-width:0 1px 1px 0;
	background:#000;
	padding:6px;
}

/* contact us, book now etc buttons sitewide */
.contactUsButton, .bookNowButton
{
	display:block;
	width:110px;
	height:26px;
	line-height:26px;
	padding-left:32px;
	font-size:11px;
	font-weight:bold;
	margin:9px 0;
}

.contactUsButton{background:url('../images/contactButton_110px.png') center left no-repeat;}
.bookNowButton{background:url('../images/bookButton_110px.png') center left no-repeat;}

/* passport buttons */
.passportOffer
{
	display:block;
	float:left;
	width:199px;
	height:167px;
	margin:9px 24px 9px 0;
	overflow:hidden;
}

/* fancy radio buttons */
span.radio
{
	width:100px;
	height:48px;
	padding:0 5px 0 0;
	background:url('../images/radio.gif') no-repeat;
	display:block;
	margin-bottom:20px;
	margin-left:280px;
}

/* definition lists for package prices */
dl.packagePrices{font-size:11px; line-height:30px;}
dl.packagePrices dt{display:block; background:#222; padding-left:9px; font-weight:bold;}
dl.packagePrices dd{margin-left:10px;}

/* sitewide adverts */

/* All adverts */
.standard-advert{margin-bottom:18px;}
.standard-advert img{padding:0 35px;}

/* left advert */
.leftAdvert
{
	width:160px;
	height:202px;
	display:block;
	margin:0;
}

/* right advert, yeh, the big one */
.rightAdvert
{
	display:block;
	/*float:left;*/
	width:230px;
	height:348px;
}

/* small right advert */
.smallRightAdvert
{
	width:160px;
	height:202px;
	display:block;
	/*margin:140px 0 0 0;*/
	margin:315px 0 0 0;
}

/* grid view for myphotos home page */
ul.gridView{margin:0; padding:0; list-style-type:none;}
ul.gridView li{float:left; margin:0; padding:0;}
ul.gridView li a{display:block;	width:163px; height:94px; margin:0 4px 10px 7px;}
ul.gridView li a:hover{}


/* white background for my photos section so rework the following... */
.myPhotosPages .images-box .main-image{border-bottom:0; padding:0;}
.myPhotosPages .content{background:#fff; display:block;}
.myPhotosPages .content .myPhotosContent{float:left; display:block; width:309px;}
.myPhotosPages .content .myPhotosContent .miniHeader{background:#eee; padding:6px 6px 6px 18px; display:block; width:274px;}
.myPhotosPages .content .myPhotosContent .miniHeader h1{padding:0; margin:0; font-size:16px; text-transform:uppercase; text-align:left;}
.myPhotosPages .content .myPhotosContent h3{background:#000; font-size:14px; text-transform:uppercase; padding:3px 3px 3px 18px; display:inline;}
.myPhotosPages .content .myPhotosContent p{padding:9px 18px; color:#222; line-height:18px;}
.myPhotosPages .content .myPhotosContent ul li{color:#222; font-size:12px;}
.myPhotosPages .content .myPhotosContent .miniHeader p{padding:0; color:#eee; font-size:12px; line-height:18px; text-align:left;}
.myPhotosPages .content .myPhotosContent p.extraInfo{margin-top:36px; color:#666; font-size:11px;}
.myPhotosPages .content .myPhotosContent p.extraInfo strong{text-transform:uppercase;}

.myPhotosPages .content .productOptionBar
{
	float:right;
	display:block;
	width:177px;
	padding:6px 18px;
	border-left:1px dotted #ccc;
	color:#444;
}

.myPhotosPages .content .productOptionBar ul{padding:0; margin:0; list-style-type:none;}
.myPhotosPages .content .productOptionBar ul li{margin-bottom:18px;}

/* my photos colouring of visual aides */
/* brown */
.myPhotosPages .content .myPhotosContent .mp_brown{background:rgb(200, 172, 139); color:#222;}
.myPhotosPages .content .myPhotosContent .mp_brown h1, .myPhotosPages .content .myPhotosContent .mp_brown p{color:#222;}
/* blue */
.myPhotosPages .content .myPhotosContent .mp_blue{background:rgb(132, 174, 208);}
/* black */
.myPhotosPages .content .myPhotosContent .mp_black{background:rgb(34, 30, 31);}
/* dark blue */
.myPhotosPages .content .myPhotosContent .mp_dkblue{background:rgb(1, 83, 127);}
/* red */
.myPhotosPages .content .myPhotosContent .mp_red{background:rgb(207, 34, 41);}
/* yel */
.myPhotosPages .content .myPhotosContent .mp_yel{background:rgb(247, 186, 19); color:#222;}
.myPhotosPages .content .myPhotosContent .mp_yel h1, .myPhotosPages .content .myPhotosContent .mp_yel p{color:#222;}

/* forms on myphoto pages */
.myPhotosPages .content .myPhotosContent fieldset{border:0; margin:18px 0;}
.myPhotosPages .content .myPhotosContent legend{display:none;}
.myPhotosPages .content .myPhotosContent label{color:#222; width:150px;}

.myPhotosPages .content .myPhotosContent form fieldset label
{
	float:left;
	width:120px;
	margin:0 0 8px 10px;
	padding:0 14px 2px 2px;
	font-size:80%;
	text-align:right;
	border-bottom:1px dotted #ccc;
}

.myPhotosPages .content .myPhotosContent input.radio, .myPhotosPages .content .myPhotosContent input.checkbox
{
	padding:2px;
	margin:0 30px;
	margin-bottom:20px;
	text-align:left;
	font-size:80%;
	overflow:hidden;
}

.myPhotosPages .content .myPhotosContent form fieldset label.longest
{
	width:220px;
}

.myPhotosPages .content .myPhotosContent input.shortest
{
	padding:2px;
	margin:0 5px;
	margin-bottom:20px;
	text-align:left;
	font-size:80%;
	overflow:hidden;
}

.takeNote
{
	display:block;
	padding:9px;
	margin-bottom:9px;
	font-size:11px;
	font-weight:bold;
	background:#eee;
	color:#777;
	border:1px solid #ccc;
	text-align:left;
}

/* buy now buttons for digital prints */
.digiBuyButton
{
	float:left;
	display:block;
	width:124px;
	height:48px;
	margin:9px 0 0 18px;
}

/* upload progress indicator */
.uploadingMessage
{
	padding:9px;
	background:#fff;
	color:#333;
	font-weight:bold;
}

.uploadingMessage img{float:left; margin-right:24px;}

/* hiding elements hidden by jQuery to kill the flash of content */
.js .uploadingMessage, .js fieldset.frameddp, .js fieldset.acrylic, .js fieldset.fotocube, .js fieldset.galleryp, .js #pack5Options{display:none;}


/* gift voucher form alts */
form.giftVoucher fieldset{border:1px solid #555; margin:18px 18px 18px 0;}
form.giftVoucher fieldset legend{padding:4px; margin-bottom:18px; color:#eee;}
form.giftVoucher fieldset label{padding-right:36px;}
form.giftVoucher fieldset select{width:106px;}

/* general clearing */
.clearing
{
	clear:both;
	height:24px;
	display:block;
}