/*  Table of Contents
==============================================================


  Table Of Contents:

  1. General Page Layout Styles

  2. Accessibility Menu Layout Styles

  3. Site brand (Header) Layout Styles
     3a. Site Logo
     3b. Site Tagline

  4. Navigation Layout Styles
     4a. Primary Navigation
     4b. Secondary Navigation
     4c. Pagnation / Breadcrumbs

  5. Page Content Layout Styles
     5a. Feature Content
     5b. Primary Content
     5c. Secondary Content

  6. Legal (Footer) Layout Styles




#sample-declaration {

	display:;
	position:; left:; right:;
	float:;
	clear:;

	width:; height;
	margin:; padding;
	border:;
	color:; background:;

	font:;
	text-decoration:;
	text-align:; vertical-align:;
	list-style:;
	white-space:;

	}


------------------------------------------------------------*/

	/* Global Heading Styles */

	#brand h1, #content h1, #nav h1,
	#brand h2, #content h2, #nav h2,
	#brand h3, #content h3, #nav h3,
	#brand h4, #content h4, #nav h4,
	#brand h5, #content h5, #nav h5,
	#brand h6, #content h6, #nav h6 {
		font-family: 'trebuchet ms', arial, helvetica, sans-serif;
		margin: 0 0 1em 0; padding: 0;
		}

	#content h1 {
		font-size: 167%;
		padding-bottom: 0; margin: 0 0 20px 0;
		color: #0550c5;
		}

	#content h1.plain {
		font-size: 167%;
		padding-bottom: 0;
		margin: 0 0 1em 0;
		color: #0550c5; background: none;
		}

	h2 {
		font-size: 152%;
		}

	h3 {
		font-size: 136%;
		}

	h4 {
		font-size: 122%;
		}

	h5 {
		font-size: 107%;
		}

	h6 {
		font-size: 100%;
		}


	/* Global Content Styles */


	blockquote {
		background: #fff url(../../img/gbl/bg-quote.gif) 20px 20px no-repeat; color: #333;
		padding: 20px 20px 5px 65px;
		border: 1px solid #ccc;
		background: url(../../img/gbl/bg-quote-open.gif) no-repeat 10px -15px;
		}

	blockquote.pullquote {
		background: #fff;
		padding: 10px 0 0 0;
		width: 25%;
		float: left;
		margin: 0 20px 0.5em 0;
		font-size: 136%;
		color: #555;
		border: 2px solid #ccc; border-right: 0; border-left: 0;
		text-align: center;
		}

	blockquote.pullquote.alt {
		float: right;
		margin: 0 0 0 20px;
		}

		blockquote.pullquote .prewrap {
			height: 50px;
			background: url(../../img/gbl/bg-quote-open.gif) no-repeat center -30px;
			}

		blockquote.pullquote .postwrap {
			height: 45px;
			background: url(../../img/gbl/bg-quote-close.gif) no-repeat center -25px;
			}

	.highlight {
		background: #FFF8AF;
		}

	p.highlight {
		background: #FFF8AF;
		border: 1px solid #EFE9A4;
		padding: 20px;
		}

	div.highlight {
		background: #FFF8AF;
		border: 1px solid #CFC98E;
		padding: 15px 15px 5px 15px; margin: 0 0 1em 0;
		}

	.important {
		background: #ffcccc;
		}

	p.important {
		background: #ffcccc;
		border: 1px solid #e3b2b2;
		padding: 20px;
		}

	div.important {
		background: #ffcccc;
		border: 1px solid #e3b2b2;
		padding: 20px 20px 0 20px; margin: 0 0 1em 0;
		}

	.note {
		background: #6699cc url(../../img/gbl/bg-note.gif) no-repeat 0 0; color: #fff;
		padding: 10px 10px 10px 20px;
		border-bottom: 2px solid #ccc;
		}

	.footnote {
		font-size: 85%;
		color: #666;
		}

	.byline {
		text-align: right;
		}


	/* Global Image Styles */


	.floated {
		float: left;
		margin: 0 20px .75em 0;
		}

	.floated.alt {
		float: right;
		margin: 0 0 .75em 20px;
		}

	.caption {
		display: block;
		border: 1px solid #ccc;
		text-align: center;
		padding: 5px;
		background: #fff;
		}

	.caption img {
		float: none;
		border: none;
		}

	.caption span {
		padding: 5px 0 0 0;
		display: block;
		color: #666;
		}


/*  ## Page
==============================================================

  Used for general page styles and backgounds. It is possible
  to add 2 background images to the XHTML document by adding
  background to both the HTML and BODY tags.

------------------------------------------------------------*/


html {
	}


	body {
		background: #fff url(/img/gbl/bg-body.gif) repeat-y center;
		}


		#page {
			width: 960px;
			position: relative;
			background:;
			margin: 0 auto;
			}

			#page-wrap {
				}


/*  ## Accessibility Menu (Usualy Hidden)
==============================================================

  These styles control the display the "skip to content" and
  "Skip to Navigation" Links. These links are normaly hidden
  from Web browsers.

------------------------------------------------------------*/


#accessibility {
	display: none;
	}


	#nav-skipto-content {
		}


	#nav-skipto-navigation {
		}


/*  ## Site brand (Header)
==============================================================

  These style control the header styles (Logo, tagline). To
  add a linked logo, use image replacement technique to
  replace the h3's a tag.

------------------------------------------------------------*/


#brand {
	background: #ffffff url(/img/gbl/bg-brand.png) no-repeat; color: #fff;
	position: relative;
	height: 94px;
	}

	#brand-wrap {
		}

		#brand-logo a {
			display: block;
			width: 374px; height: 82px;
			background: url(/img/gbl/Logo_HarbourLiving_wTag_Colour_trans_374x82.png) no-repeat;
			text-indent: -999em;
			position: absolute;
			top: 6px; left: 20px;
			}

			#brand-logo h3 {
				margin: 0; padding: 0;
				}

				#brand-logo h3 a {
					text-decoration: none;
					color: #111;
					}

		#brand-tagline {
			position: absolute;
			left: -999em;
			}

			#brand-tagline p {
				margin: 0; padding: 0;
				}

		#brand-push {
			width: 488px;
			position: absolute;
			right: 20px; top: 25px;
			}


/*  ## Navigation
==============================================================

  This space is reserved for styles that control the
  navigation of the site. #nav-site is normally the top
  nav, #nav-secondary is often the "side" navigation.
  Main navigation links must have individual IDs on the LI tag
  to facilitate image-replacement techniques.

------------------------------------------------------------*/


#nav {
	}

	#nav-wrap {
		}

		#nav-primary {
			background: transparent url(/img/gbl/bg-nav.gif) no-repeat;
			width: 745px; height: 86px;
			}

			#nav-primary-wrap {
				}

				#nav-primary ul {
					display: inline; /* IE 6 */
					margin: 0 0 0 25px; padding: 0;
					list-style: none;
					width: 100%;
					float: left;
					}

					#nav-primary li {
						margin: 0 10px 0 0; padding: 0 0 0 10px;
						float: left;
						letter-spacing:0;
						}

						#nav-primary a {
							border-top: none;
							float: left;
							text-decoration: none;
							overflow: hidden;
							color:#fff;
							font-size:11px;
							font-family:Verdana, Geneva, sans-serif;
							text-decoration:none;
		
							display:block;
							line-height:2.6em;
							
							}

						#nav-primary a:hover {
							}

						#nav-primary .current a {
							}

						#nav-home a {
							color:#970000;
							width:78px;
							height:28px;
							text-align:center;
							background: url(/img/gbl/nav-home.gif) no-repeat;
							
							}

						#nav-week a {
							display: block;
							width: 78px; height: 28px;
							background: url(/img/gbl/nav-week.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-music a {
							display: block;
							width: 108px; height: 28px;
							background: url(/img/gbl/nav-music.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-arts a {
							display: block;
							width: 136px; height: 28px;
							background: url(/img/gbl/nav-arts.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-sports a {
							display: block;
							width: 125px; height: 28px;
							background: url(/img/gbl/nav-sports.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-festivals a {
							display: block;
							width: 67px; height: 28px;
							background: url(/img/gbl/nav-festivals.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-else a {
							display: block;
							width: 113px; height: 28px;
							background: url(/img/gbl/nav-else.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-family a {
							display: block;
							width: 101px; height: 28px;
							background: url(/img/gbl/nav-family.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-free a {
							display: block;
							width: 86px; height: 28px;
							background: url(/img/gbl/nav-free.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-movies a {
							display: block;
							width: 104px; height: 28px;
							background: url(/img/gbl/nav-movie.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-resources a {
							display: block;
							width: 145px; height: 28px;
							background: url(/img/gbl/nav-community.gif) no-repeat;
							text-indent: -999em;
							}

						#nav-submit a {
							display: block;
							width: 125px; height: 28px;
							background: url(/img/gbl/nav-submit.gif) no-repeat;
							text-indent: -999em;
							}

					#nav-primary p.breadcrumbs {
						padding: 2px 39px; margin: 0;
						height: 23px; overflow: hidden;
						color: #234d80;
						}

					#nav-primary p.breadcrumbs a {
						border: none; color: #234d80;
						float: none; display: inline;
						}

		#nav-secondary {
			float: left;
			width: 120px;
			background: #5680b3;
			border-top: 5px solid #fff;
			overflow: hidden;
			}

			#nav-secondary-wrap {
				padding: 10px;
				}
			
			#content-secondary h6 {
				color: #fff;
				margin: 0 0 5px 0;
				}
				 
				#nav-secondary ul {
					margin: 0 0 1em 1.25em; padding: 0;
					color: #fff;
					list-style: square;
					}

					#nav-secondary li {
						margin: 0 0 3px 0; padding: 0;
						}

						#nav-secondary li a {
							color: #fff;
							text-decoration: none;
							font-size: 85%;
							}

					#nav-secondary h5 a {
						color: #ffff66;
						}

					#section-spl {
						position: relative;
						left: -10px; top: -10px;
						height: 290px; width: 120px;
						background: url(/img/gbl/spl-ph.jpg) no-repeat;
						}

		.nav-category {
			margin: 0 0 1.5em 0;
			}

		#content .nav-category ul {
				margin: 0; padding: 0;
				}

		#content .nav-category li {
				float: left;
				width: 33%;
				list-style: none;
				margin: 0 0 1px 0; padding: 0;
				background: #f5f5f5;
				font-size: 85%;
				}

		#content .nav-category .count {
			margin: 2px;
			}

		#content .nav-category li a {
				float: left;
				margin: 0; padding: 2px 0 2px 14px;
				background: url(../../img/gbl/bullet.gif) no-repeat 0 center;
				color: #CC6633; text-decoration: none;
				}

		#content .nav-category li a:hover {
				color: #ff8432;
			}

	.pagination {
		padding: 3px 0; margin: 5px 0 5px 0;
		border: 1px solid #ccc;
		border-right: 0; border-left: 0;
		font-size: 10px;
		clear: both;
		}

		.breadcrumbs {
			}

	.hl-nav {
		border: 1px solid #ccc;
		border-left: none; border-right: none;
		padding: 2px 0;
		text-align: center;
		}

		.hl-nav a {
			color: #999;
			margin: 8px;
			font-weight: bold;
			text-decoration: none;
			letter-spacing: -1px;
			font-size: 13px;
			}

		.hl-nav a:hover {
			color: #666;
			}

/*  ## Page Content
==============================================================

  This space is reserved for styles that control the layout of
  the content areas of the site. #content-feature is reserved
  for a Flash slideshow or a call-to-action graphic.

------------------------------------------------------------*/


#content {
	}

	#content-wrap {
		}

		#content-feature {
			}

			#content-feature-wrap {
				}

				#content-feature p {
					}

		#content-primary {
			width: 625px;
			float: left;
			background: #fff url(/img/gbl/bg-content-top.gif) no-repeat right 0;
			overflow: hidden;
			}

			#content-primary-wrap {
				padding: 20px 30px 25px 25px;
				}

		#content-secondary {
			width: 214px; background: #fff url(/img/gbl/bg-content-secondary.gif) repeat-x;
			float: left;
			margin-top: -86px;
			position: relative;
			min-height: 500px;
			}

			#content-secondary-wrap {
				padding: 15px;
				}


/*  ## Legal Information (Footer)
==============================================================

  These styles are used for the footer: Copyright notice, etc.

------------------------------------------------------------*/
#content ul {
	padding: 0 0 0 1.5em;
	}

#legal {
	font-size: 77%;
	background: #fff;
	}

	#legal-wrap {
		padding: 10px; color: #666;
		border-top: 1px solid #999;
		}

		#legal p {
			margin: 0; padding: 0;
			}
			
		#legal a {
			color: #666;
			text-decoration: none;
			}
.event {
	width: 100%;
	float: left;
	padding: 0 0 15px 0; margin: 0 0 10px 0;
	position: relative;
	left: 0;
	}
	
.event.normal {
	padding: 5px 0 15px 0;
	}
		.event .category {
			width: 93px;
			float: left;
			margin: 0 15px 0 0;
			}

			.event .thumb {
				width: 95px; height: 95px;
				float: left;
				margin: 0 10px 0 5px;
				}

		.event .detail {
			float: left;
			width: 430px;
			}

		.event .detail .date {
			color: #ff6600;
			display: block;
			margin: 0;
			font-size: 11px;
			}

		.event .detail .city {
		    font-weight: bold;
			display: block;
			margin: 0 0 5px 0;
			font-size: 11px;
			}

		.featured {
			}

			#content .featured .date {
				color: #5781AF;
				}





/* FORMS */

#area-select {
	width: 100%;
	}

.mini-search {
	background: url(/img/gbl/mini-search-base.gif) no-repeat 0 bottom;
	padding: 0 0 10px 0;
	}

	.mini-search form {
		margin: 0; padding: 5px 10px;
		}

		#content .mini-search .mini-search-ttl {
			margin: 0; padding: 0;
			height: 10px; width: 184px;
			background: url(/img/gbl/mini-search-top.gif) no-repeat;
			text-indent: -999em;
			}

		.mini-search input {
			vertical-align: middle;
			}

		.mini-search input.textbox {
			width: 122px;
			border: none;
			}

		#content .mini-search a {
			color: #fff;
			font-weight: bold;
			}

/* Calendar */

div.mini-calendar {
    margin: 10px 0 10px 0;
	background: #fff;
	border: 1px solid #fff;
	}

.mini-calendar a {
    text-decoration: none;
	color: #234C80;
	}

.mini-calendar a:hover {
	color: #5680B3;
	}

.mini-calendar table {
    width: 100%;
	border-collapse: collapse;
	}

.mini-calendar caption.title {
    font-weight: bold;
	background: #234C80; color: #fff;
	text-transform: uppercase;
	padding: 5px;
	}

	.mini-calendar caption.title a {
		color: #f7941d; font-weight: bold;
		padding: 3px;
	}

.mini-calendar th.dayofweek {
	border-bottom: 1px solid #ccc;
	padding: 4px;
	background: #eee;
	color: #234C80;
	}

.mini-calendar td {
	padding: 3px;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	}

.mini-calendar td.lastofweek {
	border: none;
	}

#event-stats {
	border: 2px solid #ccc; border-left: none; border-right: none;
	padding: 15px 0 15px 0; margin: 0 0 15px 0;
	}

#event-stats td {
	padding: 15px 0 15px 0;
	}

#event-date {
	border-bottom: 2px solid #AAC8EA;
	margin: 0 0 1em 0; padding: 0 0 5px 0;
	}

#content-primary .ad {
	padding: 18px;
	clear: both;
	background: url(/img/gbl/ad-label-h.gif) no-repeat bottom right;
	position: relative;
	}

#content-secondary .ad {
	background: transparent url(/img/gbl/ad-label.gif) no-repeat;
	padding: 12px; margin: 0 0 10px 0;
	}

.full-banner {
	padding: 10px;
	text-align: center;
	}

.advanced-search {
	padding: 0 10px; margin: 0;
	color: #94B9E5; font-size: 85%;
	}

	.advanced-search a {
		color: #94B9E5;
		}

.readmore {
    font-weight: bold;
    text-decoration: none;
	color: #DF7800;
	position: absolute;
	right: 15px; bottom: 10px;
	font-size: 12px;
	}

.intro {
	padding-right: 10px;
	}

	/* Featured Events Title Colors */

	#content .event h6 {
		margin: 0; padding: 0;
		font-size: 100%;
		color: #0033cc;
		background: #fff;
		}

	#content .event h6 a {
			color: #0033cc;
			text-decoration: none;
			}

	#content .event.featured h4, #content .event.featured h4 a {
			color: #fff;
			}

	#content .no-img .detail {
			width: auto;
			padding: 0 5px 5px 5px;
			}

	#content .event.no-img {
		width: 100%;
		}

	#content .event.featured h4 {
			padding: 2px 5px; margin: 0 0 5px 0;
			background: #53BFBF;
			}

	#content .featured.sports-recreation h4 {
			background: #437F07;
			}

	#content .featured.concerts-music h4 {
			background: #663399;
			}

	#content .featured.arts-entertainment h4 {
			background: #BF0000;
			}

	#content .featured.festivals h4 {
			background: #003366;
			}

	#content .event.normal h6 {
		background: #fff;
		}

#content .event.alt h6 {
		background: #f5f5f5 !important;
		}

#content .event h4 {
	font-size: 100%;
	}

.bold-option {
    font-weight: bold;
	}

.detail {
	width: 225px;
	}

*html .event.alt {
	margin: 0;
	}

#event-main {
	padding-right: 10px;
	}
	
.next-date {
	font-weight: bold;
	}
	
.today {
	background: #FBFE6F;
	}

table td {
	font-size: 12px;
	}
	
#overlay-content {
    width:665px;
	height:260px;
	background:url('/img/gbl/newsletter-bg.gif') no-repeat;
	/*border:3px solid #7b9cc4;*/
	}
	
	#overlay-content ul {
	    padding:0;
		margin:0;
		position:absolute;
		top:110px;
		left:245px;
		width:410px;
		}
		
		#overlay-content ul li {
		    color:#0068e2;
			list-style:none;
			display:block;
			text-align:left;
			margin:0 0 5px 0;
			}
			
			#overlay-content ul li a {
			    color:#3685e2;
				text-decoration:none;
				display:inline;
				letter-spacing:-1px;
				font-size:14px;
				font-weight:bold;
				}
				
				#overlay-content ul li a:hover {
				    color:#649bdb;
					}