/* HVGC Main stylesheet

If modifying anything in NavMenu, don't forget to modify the gallery stylesheet screen.css 
The blog stylesheet also duplicates NavMenu, Content and ColourBar but has its own side bar
*/
BODY {
	margin:0;
	background-image: url(images/bannerbg.gif);
	background-repeat: repeat-x;
	font-family: Arial, Verdana, sans-serif;
	font-size:1em;
}
H2 {
	margin-left:5px;
	padding: 0 0 0 0;
	color: #0000FF;
	font-size: 130%;
	font-weight: normal;
	background-color: transparent;
	margin-top: 4px;
	margin-bottom: 0px;
}
UL {
	margin-left:3em;
	list-style-image:url(images/bullet.gif);
	}	
LI.PDF {
	list-style-image:url(images/pdf.gif);
	}
OL { 
	/*padding-left:expression((body.clientWidth-500)/2);*/
	}
P {
	padding:0 5px 0 5px;
	}
ADDRESS {
	font-size:130%;
	}
BLOCKQUOTE {
	background-color: #FFFFE0;
	clear:both;
	}
HR {
	clear:both;
	}
.ColourBar {
	width:100%;
	height:22px;
	text-align: center;
	font-weight: bold;
	line-height:22px;
	/* everything from here on is for the table-layout subsidiary colour bars (doesn't affect DIVs)*/
	padding:0;
	border-collapse:collapse;
	vertical-align:top;
	}
.Icon {
	width:21px;
	height:18px;
	border-width: 0px;
	vertical-align: bottom;
}

#CanvasHeadSingleColumn {
	width:800px;
	margin:auto;
}
#CanvasSingleColumn {
	width:800px;
	margin:auto;
}
#topMenu {
	font-weight:bold;
	font-size:1.1em;
	color: #ffffff;
	line-height:0.9em;
	top:0px;
	left:0px;
	margin:0 0 5px 0;
	position:relative;
	padding:2px 2px 5px 2px;
	z-index:100;
	}
#topMenu li {
	display:inline;
	padding-right:20px;
}
#topMenu li:hover {
	color:yellow;
}
#topMenu A {
	color: #ffffff;
	text-decoration:none;
	cursor: pointer;
	}
#topMenu A:hover {
	color: yellow;
	}
.subMenu  {
	font-weight:bold;
	font-size:1.1em;
	color: #ffffff;
	position:absolute;
	top:0;
	left:-1000px;
	margin:0 5px 5px 5px;
	padding:5px;
	background-image: url(images/bannerbg.gif);
	background-repeat: repeat-x;
	z-index:101;
	}
.subMenu ul {
	margin:5px;
	padding:5px;
	}
.subMenu  li{
	text-decoration:none;
	list-style-image:none;
	list-style-type:none;
	padding:5px;
	}
.subMenu li:hover {
	color:yellow;
}
.subMenu  a{
	color: #ffffff;
	text-decoration:none;
	cursor: pointer;
	}
.subMenu a:hover {
	color: yellow;
	}
.youcando {
	font-weight:bold;
	padding: 5px 0 0 0;
	margin-left:5px;
	}
.Tbox {
	top:0px;
	left:0px;
	}
.Bbox {
	bottom:0px;
	left:0px;
	}
.TLxDelete {
	position: absolute;
	top:0px;
	left:0px;
	}
.TRxDelete {
	top:0px;
	right:0px;
	}
.BL {
	bottom:0px;
	left:0px;
	}
.BR {
	position: absolute;
	bottom:0px;
	right:0px;
	}
.ragged {
	float: left; 
	clear: left; 
	margin: 0 0.5em 0 0;
	}

#WeatherBelowSideBar {
	position: absolute;
	top:450px;
	right:10px;
	width:180px;
	text-align:center;
	}


#PrevNext {
	margin:auto;
	white-space:nowrap;
	clear:both;
	}	
#PrevNext IMG{
	border:none;
	vertical-align:middle;
	}
#PrevNext .Prev {
	float:left;
	border:1px solid #C0C0C0;
	padding:2px;
	}
#PrevNext .Next {
	float:right;
	border:1px solid #C0C0C0;
	padding:2px;
	}

#Footer {
	text-align:center;
	padding-bottom:1em;
	clear:both;
	}
/* for driving directions on map page */
.Directions {
	color: #483D8B;
	width:100%;
	border:thin solid black;
	background-color: #F5F5F5;
}
P.Dir {
	margin: 0.5em;
	padding:0;
}
/* for main gift voucher entry form*/
.OrderForm {
	color: #483D8B;
	}
FIELDSET {
	border:thin solid #FF9600;
	margin:0.5em;
	padding:0.5em;
	}
DIV.OrderForm {
	clear: both;
	width:100%;
	border:thin solid black;
	background-color: #F5F5F5;
	}
.AddressBlock {
	border-collapse: collapse;
	}
.LabelImg {
	vertical-align: middle;
	}
TABLE.OrderForm { 
	width:100%;
	}
TH.OrderForm {
	width:30%; 
	vertical-align:top;
	font-size:small;
	text-align:right;
	font-weight:normal;
	}
H2.OrderForm {
	text-align:center;
	width:100%;
	display:block;
	}
.OrderNote {
	color: #D2691E;
	font-weight:normal;
	text-align:left;
	margin-top:0;
	padding-top:0;
	}
.OrderNoteErr {
	color: #D2691E;
	font-weight: bold;
	}
#FullPage {
	margin:2em;
	margin-left:170px;
	}
#FullPage .ColourBar {
	background-color: #FF9600;
	}
.BigButton {
	font-size:large;
}
/* for intermediate subheadings*/
H4 {
	padding-bottom:0;
	margin-bottom:0;
}
/* Tooltips styles */
.tooltip {
	border-bottom: 1px dotted #000000; 
	color: #000000; 
	outline: none;
	cursor: help; 
	text-decoration: none;
	position: relative;
}
.tooltip span{
	display: block;
	margin-left: -999em;
	position: absolute;
	width: 450px;
}
.tooltip:hover span {
	border-radius: 5px 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	color: #000000;
	position: absolute; 
	left: 1em; top: 2em;
	z-index: 99;
	margin-left: 0; 
}
.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; 
	font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.tooltipinfo { 
	padding: 0.5em 0.8em 0.8em 2em;
	background: #F0F0F0;
	border: 1px solid #2BB0D7;
}
.safety {
	width: 80%;
	margin: auto;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
	background: #FAEBD7;
}
.modalMsg {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	background-color: rgba(0,0,0,0.5);
}
@media screen and (min-width: 400px) {
.modalMsgDialog  {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
}
}
@media screen and (max-width: 400px) {
.modalMsgDialog  {
	width: 90vw;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
}
}
.modalMsgClose {
	background-color: transparent;
	color: #000000;
	line-height: 25px;
	position: absolute;
	right: 30px;
	text-align: center;
	top: 5px;
	width: 24px;
	text-decoration: underline;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}