/* CSS Document */

/* Holiday France Direct - CSS document | Strangecorp */
/* Jim Rixon | Senior Developer | Strange Corporation */

/* --- DEFAULT STYLING --- */
body * {
	/* --- CLEARS DEFAULT MARGIN & PADDING FOR ALL CHILD ELEMENTS --- */
	margin: 0;
	padding: 0;
	}
	
body {
	background: url(/images/structural/bg_sunflower.gif) top center no-repeat;
	background-color: #fff; /* --- DEFAULT BACKGROUND COLOUR --- */
	color: #6a6a6a; /* --- DEFAULT FOREGROUND (TEXT) COLOUR --- */
			
	font-family: Arial, Helvetica, sans-serif; /* --- DEFAULT FONT FAMILY --- */
	font-size: 62.5%; /* --- RESIZE BASE FONT SIZE (1em = 10px) --- */
	
	margin: 0;
	padding: 0;
	}
	
h1 {
	font-size: 1.6em;
	margin: 0 0 16px 0;
	}
	
h2 {
	font-size: 1.4em;
	margin: 0 0 16px 0;
	}
	
h3 {
	font-size: 1.4em;
	font-weight: normal;
	margin: 0 0 8px 0;
	}

h4 {
	font-size: 1.2em;
	margin: 0 0 8px 0;
	}

p {
	font-size: 1.2em;
	margin: 0 0 8px 0;
	}

hr {
	height: 0px;
	border: none;
	border-top: 1px solid #f00;
	margin: 16px 0;
	}
	
a {
	text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
		}

a img {
	border: 0; /* --- CLEAR DEFAULT BORDER ON LINKED IMAGES --- */
	}

/* --- CUSTOM CLASSES --- */		
.clearboth {
	clear: both;
	}
	
.fleft {
	float: left;
	}
	
.fright {
	float: right;
	}

.alignright {
	display: block;
	width: 100%;
	text-align: right;
	}
	
.alignleft {
	display: block;
	width: 100%;
	text-align: left;
	}
	
/* --- STRUCTURAL / LAYOUT DIVS --- */
#pagewrapper {
	width: 995px;
	margin: 0 auto;
	}
	
	/* --- HEADER --- */	
	#header {
		position: relative;
		}
	
		#header a#hfdlogo {
			float: left;
			width: 128px;
			padding: 20px 40px;
			}
		
		#header #banneradvertising {
			float: left;
			margin: 40px 0 0 0;
			}
		
		
		/* --- HEADER | UTILITY NAVIGATION --- */	
		#header #utilitynavigation {
			background: url(/images/navigation/utilitynav_right.gif) bottom right no-repeat;
			position: absolute;
			display: block;
			top: 0;
			right: 0;
			
			filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;
			}
			
			#header #utilitynavigation ul {
				background: url(/images/navigation/utilitynav_left.gif) bottom left no-repeat;
				height: 3em;
				line-height: 3em;
				padding: 0 8px;
				}
			
			#header #utilitynavigation ul li {
				display: inline;
				padding-right: 8px;
				margin-right: 8px;
				border-right: 1px solid #bbb;
			
				font-size: 1.1em;
				}
			
			#header #utilitynavigation ul li.last {
				border-right: 0;
				padding-right: 0;	
				margin-right: 0;			
				}
				
			#header #utilitynavigation ul li a {
				color: #666;
				}
		
		
		/* --- HEADER | PRIMARY NAVIGATION --- */	
		#header #primarynavigation {
			background: url(/images/navigation/primarynav_left.gif) top left no-repeat;
			clear: both;
			height: 3.7em;
			}
		
		#header #primarynavigation ul {
			background: url(/images/navigation/primarynav_right.gif) top right no-repeat;
			float: left;
			height: 3.7em;
			overflow: hidden;
			padding-left: 10px;
			}
			
			#header #primarynavigation ul li {
				display: block;
				float: left;
				margin: 0;
				padding: 0;
				border-right: 1px solid #6291c0;
				}
				
			#header #primarynavigation ul li a {
				display: block;
				background: url(/images/navigation/primarynav_bg.gif) top no-repeat;
				font-size: 1.1em;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 3.7em;
				height: 3.7em;
				padding: 0 8px;	
				}
				
				#header #primarynavigation ul li.last {
					padding-right: 10px;
					border-right: none;
					}
					
				#header #primarynavigation ul li a {
					color: #fff;
					}
					
				#header #primarynavigation ul li a:hover {
					background: #6291c0;
					}
	
			/* --- HEADER | PRIMARY NAVIGATION - SPECIAL TAB --- */	
			#header #primarynavigation ul.special {
				float: right;
				background: url(/images/navigation/specialnav_left.gif) top left no-repeat;
				margin: 0;
				padding-left: 10px;
				}
				
				#header #primarynavigation ul.special li {
					background: url(/images/navigation/specialnav_right.gif) top right no-repeat;
					border-right: 0;
					}
				
				#header #primarynavigation ul.special li a {
					background: none; 
					margin-right: 11px;
					padding: 0 8px;
					}
					
				#header #primarynavigation ul.special li a:hover {
					background: #e55c00;
					}
	
	
	/* --- LEFT-HAND COLUMN --- */		
	#lefthandcolumn {
		clear: both;
		float: left;
		width: 220px;
		margin-bottom: 20px;
		}
		
		#lefthandcolumn.whiteshadow {
			background: url(/images/structural/shad_centercolumn.gif) top repeat-x;
			padding-bottom: 10px;
			}
					
	
		/* --- LEFT-HAND COLUMN | BROWSE BY LISTS --- */	
		#lefthandcolumn .browseby h2 {
			margin: 16px 16px 8px 16px;
			font-size: 1.2em;
			color: #ff6600;
			}
			
		#lefthandcolumn .browseby ul {
			margin: 0 16px;
			padding: 0;
			list-style-type: none;
			}
			
			#lefthandcolumn .browseby ul li {
				background: url(/images/navigation/list_bullet_leftnav.gif) 0 6px no-repeat;
				font-size: 1.2em;
				line-height: 1.5em;
				padding-left: 12px;
				}
			
			#lefthandcolumn .browseby ul li a {
				color: #010101;
				}
			
				#lefthandcolumn .browseby ul li ul {
					margin: 0;
					}
			
				#lefthandcolumn .browseby ul li ul li {
					font-size: inherit;
					}
					
				#lefthandcolumn .browseby ul li ul li a {
					color: #5b5b5b;
					}
					
					#lefthandcolumn .browseby ul li ul li ul li {
						font-size: inherit;
						}
						
					#lefthandcolumn .browseby ul li ul li ul li a {
						color: #5b5b5b;
						}
						
				#lefthandcolumn .browseby li#active a {
					color: #010101;
					font-weight: bold;
					font-style: italic;
					}
	
	/* --- MAIN CONTENT WRAPPER --- */			
	.contentwrapper {
		float: left;
		}
		
		.contentwrapper .contentcolumn {
			float: left;
			padding: 8px;
			}
		
		.contentwrapper.twocolumns {
			}
			
			.contentwrapper.twocolumns .contentcolumn {
				background: none;
				width: 504px;
				}
			
			.contentwrapper.twocolumns .righthandcolumn {
				background: none;
				float: left;							
				width: 255px;
				overflow: hidden;
				}
			
			.contentwrapper.twocolumns .contentcolumn.whiteshadow {
				background: url(/images/structural/shad_centercolumn.gif) repeat-x;
				padding-top: 16px;	
				}
				
			.contentwrapper.twocolumns .righthandcolumn.whiteshadow {
				background: url(/images/structural/shad_centercolumn.gif) repeat-x;	
				background-color: #fff;			
				}	
				
			.contentwrapper.twocolumns .righthandcolumn.blueshadow {			
				background: url(/images/structural/shad_bluecolumn.gif) top repeat-x;
				}
			
		.contentwrapper.onecolumn {
			}
			
			.contentwrapper.onecolumn .contentcolumn {
				width: 759px;		
				}
				
			.contentwrapper.onecolumn .contentcolumn.whiteshadow {
				background: url(/images/structural/shad_centercolumn.gif) repeat-x;
				background-color: #fff;	
				}
	
	/* --- MAIN CONTENT | BREADCRUMBS --- */
		.contentwrapper .contentcolumn .breadcrumbs {
			padding: 8px;
			border-bottom: 1px dotted #cdcdcd;
			}
			
			.contentwrapper .contentcolumn .breadcrumbs p {
				font-size: 1.1em;
				color: #9b9b9b;
				}
				
			.contentwrapper .contentcolumn .breadcrumbs p a {
				color: #9b9b9b;
				}
	
	/* --- MAIN CONTENT MAILING LIST --- */
	.contentwrapper .contentcolumn #mailing_list {
		
		}
		
		.contentwrapper .contentcolumn #mailing_list form {
			padding: 20px;
			background-color: #D8ECFF ;
			width: 464px;
			overflow: hidden;
			margin: 20px 0;
			}
		
		.contentwrapper .contentcolumn #mailing_list form h2 {
			padding-left: 0;
			}
			
		.contentwrapper .contentcolumn #mailing_list form label {
			float: left;
			font-size: 1.2em;
			width: 200px;
			display: block;
			}
			
			.contentwrapper .contentcolumn #mailing_list form label.radio {
				float: left;
				width: 400px;
				margin: 5px 0 5px 5px;
				padding: 0;
				}
		
		.contentwrapper .contentcolumn #mailing_list form input,
		.contentwrapper .contentcolumn #mailing_list form select {
			float: left;
			margin: 0 0 5px 0;
			padding: 1px;
			}
		
		.contentwrapper .contentcolumn #mailing_list form input.radio {
			float: left;
			clear: left;
			width: auto;
			margin: 5px 0;
			}
			
		.contentwrapper .contentcolumn #mailing_list form textarea {
			clear: both;
			float: none;
			display: block;
			margin: 10px 0;
			padding: 5px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 1.1em;
			width: 440px;
			}
			
		.contentwrapper .contentcolumn #mailing_list form input.submitbutton {
			margin: 0;
			}
			
		.contentwrapper .contentcolumn #mailing_list form p {
			clear: both;
			text-align: left;
			margin: 0;
			padding: 10px 0 0 0;
			}
			
		.contentwrapper .contentcolumn #mailing_list form p a {
			color: #6291C0;
			text-decoration: underline;
			}
			
		.contentwrapper .contentcolumn #mailing_list b {
			float: left;		
			}
			
		.contentwrapper .contentcolumn #mailing_list span.required {
			color: red;
			font-size: 1.6em;
			font-weight: bold;
			}
		
		
	.contentwrapper .contentcolumn #mailing_list #mailing_errors {
		
		}
		
		.contentwrapper .contentcolumn #mailing_list #mailing_errors p {
			color: red;
			}
			
		.contentwrapper .contentcolumn #mailing_list #mailing_errors ul {
			margin: 0 20px;
			padding: 0 10px;
			}
			
			.contentwrapper .contentcolumn #mailing_list #mailing_errors ul li {
				background: none;
				list-style-type: square;
				line-height: normal;
				color: red;
				padding-left: 0px;
				}
		
			
	/* --- NEW CONTENT FORMATTING --- */				
	.contentwrapper .contentcolumn .formattedcontent {
		}
		
		.contentwrapper .contentcolumn .formattedcontent h1 {
			color: #ff6600;
			padding: 0 8px;
			margin: 0 0 16px 0;
			}
			
		.contentwrapper .contentcolumn .formattedcontent h2 {
			padding: 0 8px;
			}
			
		.contentwrapper .contentcolumn .formattedcontent h3 {
			font-size: 1.2em;
			font-weight: bold;
			color: #ff6600;
			padding: 0 8px;
			margin: 16px 0 8px 0;
			}
		
		.contentwrapper .contentcolumn .formattedcontent h4 {
			font-size: 1.2em;
			font-weight: bold;
			padding: 0 8px;
			margin: 16px 0 8px 0;
			text-transform: uppercase;
			}
			
		.contentwrapper .contentcolumn .formattedcontent p {
			padding: 0 8px 0 8px;			
			margin: 8px 0 16px 0;
			}
		
		.contentwrapper .contentcolumn .formattedcontent a {
			color: #6291c0;
			text-decoration: underline;
			}
		
		.contentwrapper .contentcolumn .formattedcontent hr {
			height: 5px;
			border-top: 5px solid #d8ecff;
			margin: 8px 0;
			padding: 0;
			}
			
		.contentwrapper .contentcolumn .formattedcontent ul {
			margin: 0;
			list-style-type: none;
			}
			
			.contentwrapper .contentcolumn .formattedcontent ul li {
				background: url(/images/navigation/list_bullet_generic.gif) 0 4px no-repeat;
				font-size: 1.1em;
				line-height: 1.4em;
				padding-left: 10px;
				}
		
		.contentwrapper .contentcolumn .formattedcontent table {
			margin: 8px;
			width: auto;
			}
			
			.contentwrapper .contentcolumn .formattedcontent table th {
				text-align: left;
				font-size: 1.2em;
				font-weight: bold;
				vertical-align: top;
				padding: 2px 4px;
				}
				
			.contentwrapper .contentcolumn .formattedcontent table td {				
				font-size: 1.2em;
				vertical-align: top;
				padding: 2px 4px;
				}
		
	
	/* --- NEW CONTENT FORMATTING | GALLERY IMAGE --- */	
	.contentwrapper .contentcolumn .formattedcontent a.galleryimage {
		background-color: #d8ecff;
		padding: 10px;
		margin: 0;
		}	
		
		.contentwrapper .contentcolumn .formattedcontent a.galleryimage.fleft {
			margin: 0 0 10px 8px;
			}
			
		.contentwrapper .contentcolumn .formattedcontent a.galleryimage.fright {
			margin: 0 -8px 10px 0px;
			}	
	
	/* --- RIGHT-HAND COLUMN --- */
	.contentwrapper.twocolumns .righthandcolumn {
		}
		
	
	/* --- RIGHT-HAND COLUMN | SPECIAL OFFER PANEL --- */	
	.contentwrapper.twocolumns .righthandcolumn .specialoffer {
		background: url(/images/structural/specialoffer_bottom.gif) bottom no-repeat;
		background-color: #fff;
		margin: 8px 0;
		overflow: hidden;
		width: 100%;
		}
		
	.contentwrapper.twocolumns .righthandcolumn .specialoffer h3 {
		background: url(/images/structural/specialoffer_top.gif) top no-repeat;		
		padding: 16px 16px 0 16px;
		color: #ed1c24;
		font-size: 2.3em;
		}
		
		.contentwrapper.twocolumns .righthandcolumn .specialoffer h3 span {
			font-size: 140%;
			}
			
		.contentwrapper.twocolumns .righthandcolumn .specialoffer p {
			padding: 0 16px 0 16px;
			font-size: 1.1em;
			line-height: 1.4em;
			}
			
		.contentwrapper.twocolumns .righthandcolumn .specialoffer p.button {
			background: url(/images/navigation/button2_left.gif) left no-repeat;
			background-color: #da0911;
			float: right;
			margin: 0 16px 16px 16px;
			padding: 0;
			font-size: 1.2em;
			width: 93px;
			}
			
			.contentwrapper.twocolumns .righthandcolumn .specialoffer p.button a {
				background: url(/images/navigation/button2_right.gif) right no-repeat;
				display: block;
				line-height: 27px;
				height: 27px;
				color: #fff;
				padding: 0 10px;
				text-align: left;
				}
	
	/* --- RIGHT-HAND COLUMN | STANDARD FEATURE PANEL --- */
	.contentwrapper.twocolumns .righthandcolumn .standardfeature {
		background-color: #fff;
		clear: both;
		margin: 8px 0;
		border-top: 6px solid #d8ecff;
		padding: 16px 0 0 0;				
		overflow: hidden;
		width: 100%;
		}
		
		.contentwrapper.twocolumns .righthandcolumn .standardfeature.notopborder {
			border-top: none;
			border-bottom: 6px solid #d8ecff;
			}
		
		.contentwrapper.twocolumns .righthandcolumn .standardfeature .rightside {
			width: 93px;	
			float: right;	
			margin: 0 0 16px 8px;	
			}
		
		.contentwrapper.twocolumns .righthandcolumn .standardfeature h3 {
			font-size: 2.2em;
			line-height: 1em;
			color: #89c5ff;
			}
		
		.contentwrapper.twocolumns .righthandcolumn .standardfeature p {
			font-size: 1.1em;
			margin: 0;
			padding: 0;
			}
			
		.contentwrapper.twocolumns .righthandcolumn .standardfeature p.button {
			background: url(/images/navigation/button1_left.gif) left no-repeat;
			background-color: #89c5ff;
			line-height: 27px;
			display: block;
			margin: 8px 0 0 0;
			font-size: 1.2em;
			}
			
			.contentwrapper.twocolumns .righthandcolumn .standardfeature p.button a {
				background: url(/images/navigation/button1_right.gif) right no-repeat;
				display: block;
				line-height: 27px;
				width: 73px;
				padding: 0 10px;
				color: #fff;
				}
	
	
	/* --- FOOTER --- */			
	#footer {
		clear: both;
		background: url(/images/structural/footer_bg.gif) repeat-x;
		background-color: #97cbff;
		height: 4.3em;
		margin: 16px 0;
		}
		
		#footer p {
			background: url(/images/structural/footer_left.gif) left no-repeat;
			display: block;
			float: left;
			height: 3.6em;
			line-height: 3.6em;
			padding: 0 0 0 20px;
			color: #fff;
			}
			
		#footer ul {
			background: url(/images/structural/footer_right.gif) right no-repeat;
			display: block;
			float: right;
			height: 4.3em;
			line-height: 4.3em;
			padding: 0 20px 0 0;
			}
			
			#footer ul li {
				display: inline;
				padding-right: 8px;
				border-right: 1px solid #c7e3ff;
				margin-right: 8px;
				font-size: 1.1em;
				}
			
			#footer ul li.last {
				padding-right: 0px;
				border-right: none;
				}
				
			#footer ul li a {
				color: #fff;
				}