@import url("reset.css");
@import url("forms.css");
@import url("timeline.css");

img, div, input { behavior: url("../js/iepngfix.htc") }



body {	
	background: #E9EBF0 url(../images/bg-page.png) center top repeat-x;
	color:#012471;
	font-family: "Verdana", "Arial", sans-serif;
	font-size:12px;
	line-height:20px;
	text-align:center;
	margin: 0px;
}


div#header{
	float:left;
	display:inline;
	overflow:hidden;
	height:125px;
}

div.center-container {
	margin:0 auto;
	text-align:left;
	width:1000px;
}

div#columns-container{
	float: left;
	display: inline;
}

/*TYPOGRAPHY*/
	p{
		font-family: "Verdana", "Arial", sans-serif;
		font-size:12.2px;
		text-align:left;
		line-height:25px;
		margin-bottom:15px;
	}
	
	h1{color:#012471;font-size:18px; line-height:25px;margin-bottom:15px;}
	
	h3{font-size: 13px; font-weight: bolder; margin-top: 20px}
	
	ul {list-style: square; padding-left: 10px;margin-bottom: 10px; margin-top: -10px;}
		ul li{margin-bottom: 10px;}
	
	
	big{font-size: 15px; color: #012471;}
	
	a:link, a:visited{text-decoration: none;color:#0656cd;}
	
	a:hover{text-decoration: underline; }	

/*/TYPOGRAPHY*/

.content-bg{
	background: url(../images/bg-content.jpg) center 108px no-repeat;
}

.main-logo{
	width:82px;
	height:99px;
	text-indent:-5000px;
	overflow: hidden;
	background: url(../images/logo.jpg) no-repeat;
	float: left;
	margin: 15px 0 0 20px;
	display: inline-block;
	}

a.main-site{
	background: url(../images/main-site.jpg) no-repeat;
	width:175px;
	height:45px;
	display: inline;
	text-indent:-5000px;
	margin-top: 0;
	overflow: hidden;
	float: right;
	margin-right: 30px;
}

a.main-site:hover{background-position: -177px 0;}

/*tagline*/
#tagline {
	background:url(../images/tagline.jpg);
	width:338px;
	height:45px;
	margin:30px 0 0 65px;
	_margin:30px 0 0 45px;
	display:inline-block;
	float:left;
}

	/*MAIN MENU*/
	
ul#mainmenu{
	width: 800px;
	height: 30px;
	margin: 5px 30px 0 0;
	float: right;
	display: inline;
	background: url(../images/mm-hr.gif) repeat-x;
	padding-top: 15px;
}

ul#mainmenu li{display: inline;	height: 28px;float:left;}	

ul#mainmenu li a{
	text-transform: uppercase;
	color: #102B81;
	text-decoration: none;
	margin-right: 50px;
	font-size: 13px;
	padding-bottom: 2px;
}

	ul#mainmenu li a:hover{color: #000;}	
	
	

	


/*SEARCH*/
	ul#mainmenu li#search-bg{
		width: 178px;
		height: 28px;
		float: right;
		margin-top: -5px;
		display: inline;
		background: url(../images/bg-search.jpg) repeat-x;

	}
	
	ul#mainmenu li#search-bg input.search-input{border: none; background: transparent; float: left; width: 135px; margin: 7px 0 0 10px; font-size: 11.2px;letter-spacing: 0.2px;}

	ul#mainmenu li#search-bg input.search-btn{border: none; background: none; float: right; margin: 2px 0 0 0;}		
	
	
/*FOOTER*/	
#footer{
	width: 100%;
	height: 90px;
	background: url(../images/bg-footer.jpg) repeat-x;
	color: #fff;
	font-size: 10.5px;
	float: left;
	display: inline;
}
	
#footer a{color: #fff;text-decoration:none;}
#footer a:hover{text-decoration:underline;}	
	

#footer	.float-right, #footer address, #footer	.float-left{display:inline;margin: 0 30px 0 30px; line-height:15px;}

#footer	.float-left{float: left; clear:left;display:inline; width: 300px;}
#footer	.float-right, #footer address{float: right; clear:right; display: inline;text-align:right;width:450px;}	

.copyright, #footer-menu{width: 400px; display:inline; margin-top: 20px; font-size:12px; margin-bottom:8px;}
#footer-menu li{display: inline;}

#footer-menu{float:right;margin-right:30px;text-align: right;}
.copyright{float:left; margin-left:30px;}
	
/*COLUMNS*/
	
	.primary-col, .secondary-col, .tertiary-col, .primary-col-2, .secondary-col-2{
		display: inline;
		margin-top:30px;
		float:left;
		margin-bottom: 20px;
	}
	
	.secondary-col{width:220px; margin-left:33px;}
	.primary-col{width:410px; margin-left:40px;}
	.tertiary-col{width:220px; margin-left:30px;margin-top: 60px;}
	.primary-col-2{width:630px; margin-left:45px;}
	.secondary-col-2{width:220px; margin-left:40px;margin-top: 60px;}

	#top-bar{width:930px;height:31px;margin:10px 0 0px 33px;background:#ddd;}
	

/*TOP BAR*/

	.star-bar{background:url('../images/bg-star-bar.jpg') no-repeat;}

	.star-bar, .db-bar, #top-bar{
		display: inline;
		margin-top: 0px;
		float:left;
		margin-top:20px;
		width:940px;
		height:31px;
		margin-left:29px;
		margin-bottom: 0px;
		line-height:100%;
	}


	.db-bar{list-style: none;padding: 0px;list-style:none;}
	.db-bar li{display: block; text-indent: -5000px; float:left;padding:0px; margin: 0px;}
	.db-bar li a{display:block; text-indent: -5000px;width: 110px;height:31px;padding:0px;margin:0px;}	
		
		
		

	
	.db-bar-80s{background: url('../images/db-80s.jpg') right 0 no-repeat;}
	.db-bar-90s{background: url('../images/db-90s.jpg') right 0 no-repeat;}	
	.db-bar-00s{background: url('../images/db-00s.jpg') right 0 no-repeat;}	
	.db-bar-10s{background: url('../images/db-10s.jpg') right 0 no-repeat;}	
	

	/*80s*/
		.db-bar-80s a.db-li-80s{background: url('../images/db-80s.jpg') no-repeat; width: 584px;}
	
		.db-bar-80s a.db-li-90s{background: url('../images/db-80s.jpg') -584px 0 no-repeat; width: 121px;}
			.db-bar-80s	a.db-li-90s:hover{background-position:-584px -31px;}
	
		.db-bar-80s a.db-li-00s{background: url('../images/db-80s.jpg') -705px 0 no-repeat; width: 117px;}
			.db-bar-80s	a.db-li-00s:hover{background-position:-705px -31px;}
			
		.db-bar-80s a.db-li-10s{background: url('../images/db-80s.jpg') right 0 no-repeat; width: 118px;}
			.db-bar-80s	a.db-li-10s:hover{background-position:right -31px;}

	/*90s*/		
		.db-bar-90s a.db-li-80s{background: url('../images/db-90s.jpg') 0 0 no-repeat; width:117px;}
			.db-bar-90s	a.db-li-80s:hover{background-position:0px -31px;}

		.db-bar-90s a.db-li-90s{background: url('../images/db-90s.jpg') -117px 0 no-repeat; width: 587px;}	

		.db-bar-90s a.db-li-00s{background: url('../images/db-90s.jpg') -705px 0 no-repeat; width: 117px;}
			.db-bar-90s a.db-li-00s:hover{background-position:-705px -31px;}
			
		.db-bar-90s a.db-li-10s{background: url('../images/db-90s.jpg') right 0 no-repeat; width: 119px;}
			.db-bar-90s a.db-li-10s:hover{background-position:right -31px;}

	/*00s*/		
		.db-bar-00s a.db-li-80s{background: url('../images/db-00s.jpg') 0 0 no-repeat; width: 117px;}
			.db-bar-00s	a.db-li-80s:hover{background-position:0px -31px;}

		.db-bar-00s a.db-li-90s{background: url('../images/db-00s.jpg') -117px 0 no-repeat; width: 118px}
			.db-bar-00s a.db-li-90s:hover{background-position:-117px -31px;}

		.db-bar-00s a.db-li-00s{background: url('../images/db-00s.jpg') -235px 0 no-repeat; width: 587px;}
		
		.db-bar-00s a.db-li-10s{background: url('../images/db-00s.jpg') right 0 no-repeat; width: 118px}
			.db-bar-00s a.db-li-10s:hover{background-position:right -31px;}
			
	/*10s*/		
		.db-bar-10s a.db-li-80s{background: url('../images/db-10s.jpg') 0 0 no-repeat; width: 117px;}
			.db-bar-10s	a.db-li-80s:hover{background-position:0px -31px;}

		.db-bar-10s a.db-li-90s{background: url('../images/db-10s.jpg') -117px 0 no-repeat; width: 118px}
			.db-bar-10s a.db-li-90s:hover{background-position:-117px -31px;}

		.db-bar-10s a.db-li-00s{background: url('../images/db-10s.jpg') -235px 0 no-repeat; width: 118px;}
			.db-bar-10s	a.db-li-00s:hover{background-position:-235px -31px;}
		
		.db-bar-10s a.db-li-10s{background: url('../images/db-10s.jpg') right 0 no-repeat; width: 587px}

	

	
		.flash-header{
				display: inline;
				margin-top: 0px;
				float:left;
				margin-top:20px;
				width:940px;
				height:225px;
				margin-left:29px;
				margin-bottom: 0px;
				line-height:100%;		
				background: url(../images/30-header.jpg) center center no-repeat;
			}
	

	
/*SKIP TO LINKS*/	
ul#skip-to-list li a{height:0px;width:0px;float:left;position:absolute;display:block; overflow:hidden;}
ul#skip-to-list li,ul#skip-to-list{position:absolute; list-style: none; padding: 0px;}

ul#skip-to-list li a:focus{display:block; width:940px; height:auto;overflow:visible;border:2px solid yellow; background: yellow;color:#11288E;text-decoration:none;padding: 10px;text-align:center;font-size:20px; margin: 0 0 0 30px;}


/*HOME WELCOME*/

#home-welcome-container {
	margin:15px 0 10px 0;
	display:block;
	width: 100%;
	height: 155px;
}
	#home-welcome-text {
		margin:0 0 0 30px;
		float:left;
		width:638px;
		height:155px;
		background:url(../images/home-welcome-text.jpg) no-repeat center center;
		text-indent: -10000px;
		display: inline;
	}
	#home-memories-button {
		margin-left:0px;
		float:left;
		width:292px;
		height:161px;
		display: inline;
	}



/*HOME BANNER*/
#home-banner{
	clear:both;
	margin:0 0 0 30px;
	width:936px;
	height:212px;
	background:url(../images/home-banner.jpg) no-repeat center center;
}



/*HOME BUTTONS*/	

ul.home-buttons{
	height: 186px;
	width:950px;
	margin: 20px 0 30px 26px;
	float: left;
	display: inline;
	padding: 0px;
	list-style: none;
}

ul.home-buttons li,ul.home-buttons li a{height: 130px; width: 235px;display: inline;float: left; margin: 0px;padding:0px; text-indent:-5000px; background:url(../images/decade-menu-home-transparent.png) no-repeat;}

ul.home-buttons li.home-80s, ul.home-buttons li.home-80s a {background-position: 0 -133px;}
	ul.home-buttons li.home-80s a:hover{background-position: 0 0;}
	
ul.home-buttons li.home-90s, ul.home-buttons li.home-90s a {background-position: -237px -133px}
	ul.home-buttons li.home-90s a:hover{background-position: -237px 0;}

ul.home-buttons li.home-00s, ul.home-buttons li.home-00s a {background-position: -472px -133px;}
	ul.home-buttons li.home-00s a:hover{background-position: -472px 0;}
	
ul.home-buttons li.home-10s, ul.home-buttons li.home-10s a {background-position: -707px -133px;}
	ul.home-buttons li.home-10s a:hover{background-position: -707px 0;}




	/*SUB MENU*/	

	ul.sub-menu{
		width: 100%;
		margin: 0px;
		float: left;
		margin-bottom: 50px;
		margin-top: 40px;
	}

	ul.sub-menu li,ul.sub-menu li a{height: 60px; width: 230px;display: inline;float: left; margin: 0px;padding:0px; text-indent:-5000px;}
	ul.sub-menu li a{background:url(../images/sub-menu.jpg) no-repeat;}
	
	ul.sub-menu-celebrations li a{background:url(../images/sub-menu-celebrations.jpg) no-repeat;}

	ul.sub-menu li.sub-80s a {background-position: 0 -7px;}
		ul.sub-menu li.sub-80s a:hover{background-position: -230px -7px;}

	ul.sub-menu li.sub-90s a {background-position: 0 -84px; margin-top: -2px;}
		ul.sub-menu li.sub-90s a:hover{background-position: -230px -84px;}

	ul.sub-menu li.sub-00s a {background-position: 0 -167px; margin-top: 2px; height: 65px;}
		ul.sub-menu li.sub-00s a:hover{background-position: -230px -167px;}
		
	ul.sub-menu li.sub-10s a {background-position: 0 -250px; margin-top: 5px; height: 65px;}
		ul.sub-menu li.sub-10s a:hover{background-position: -230px -250px;}


/*YOUR MEMORIES*/

a.your-memories-btn{
	display: inline;
	float: left;
	width: 215px;
	height: 57px;
	padding-top: 53px;
	background: url("../images/your-memories-btn.jpg") 3px 3px no-repeat;
	text-align: center;
	text-decoration: none;
	line-height: 15px;
	color:#021347;
}

a.your-memories-btn:hover{background-position: -237px 3px;}

/*PICTURE FRAMES*/

.frame-outer{float: left;display: inline; width: 231px; height:216px; margin-bottom: -10px;}

.frame-inner{overflow: hidden; width:208px;height:184px; margin: 10px 0 0 10px; z-index:1; position: absolute;}
.frame-inner img{width: 100%;}

.pic-frame-2{width: 231px;height: 216px;background: url('../images/pic-frame-2.png'); z-index:2; position: absolute;}
.pic-frame-1{width: 231px;height: 216px;background: url('../images/pic-frame-1.png'); z-index:2; position: absolute;}


/*MEMORIES SLIDER*/
ul#memories-slider .frame-outer{margin-bottom: 10px;}

ul#memories-slider h3 a{
	font-size: 14px;
	float: left;
	line-height: 15px;
	text-decoration: none;
	margin-top: 0px;
	display: block;
	text-align: center;
	border-bottom: 4px dotted #bbb;
	height: 50px;
	font-style:italic;
	color:#777;
}

ul#memories-slider h3 a:hover{color:#021347;	border-bottom: 4px dotted #021347;}


#memories-slider{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 230px; /*Width of Carousel Viewer itself*/
	height: 300px; /*Height should enough to fit largest content's height*/
	padding: 0px;
	margin: 0px;
}

#memories-slider .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

#memories-slider .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	height: 300px;
	width: 230px;
	padding: 0px;
	margin: 0px;
	
}

/*TITLE REPLACEMENT*/

h1.title-the-1980s, h1.title-the-1990s, h1.title-the-2000s, h1.title-the-2010s,
h2.title-80s-stories, h2.title-90s-stories, h2.title-00s-stories, h2.title-10s-stories, 
h2.title-80s-memories, h2.title-90s-memories, h2.title-00s-memories, h2.title-10s-memories,
h2.title-80s-timeline, h2.title-90s-timeline, h2.title-00s-timeline, h2.title-10s-timeline
	{
		text-indent: -5000px;
		height: 25px;
		width: 100%;
		float: left;
		display: inline;
		overflow: hidden;
	}


h1.title-the-1980s{background: url(../images/80s-titles-bg.png) no-repeat;}
h2.title-80s-memories{background: url(../images/80s-titles-bg.png) 0 -70px no-repeat;}
h2.title-80s-timeline{background: url(../images/80s-titles-bg.png) 0 -30px no-repeat;}
h2.title-80s-stories{background: url(../images/80s-titles-bg.png) 0 -103px no-repeat;}

h1.title-the-1990s{background: url(../images/90s-titles-bg.png) no-repeat;}
h2.title-90s-memories{background: url(../images/90s-titles-bg.png) 0 -70px no-repeat;}
h2.title-90s-timeline{background: url(../images/90s-titles-bg.png) 0 -30px no-repeat;}

h1.title-the-2000s{background: url(../images/00s-titles-bg.png) no-repeat;}
h2.title-00s-memories{background: url(../images/00s-titles-bg.png) 0 -70px no-repeat;}
h2.title-00s-timeline{background: url(../images/00s-titles-bg.png) 0 -30px no-repeat;}

h1.title-the-2010s{background: url(../images/10s-titles-bg.png) no-repeat;}
h2.title-10s-memories{background: url(../images/10s-titles-bg.png) 0 -70px no-repeat;}
h2.title-10s-timeline{background: url(../images/10s-titles-bg.png) 0 -30px no-repeat;}




h2.title-80s-memories,h2.title-90s-memories,h2.title-00s-memories,h2.title-10s-memories{margin: -30px 0 10px 0;width: 170px; float: left;display: inline;}

h2.title-80s-timeline,h2.title-90s-timeline,h2.title-00s-timeline,h2.title-10s-timeline{margin: -30px 0 10px 28px;}




ul.memories-slider-btn{width:35px; height: 17px; float: right;display: inline;overflow: hidden; margin: -27px 0 0 0 ;list-style: none; padding: none;}

ul.memories-slider-btn li{display: inline; margin-bottom: 0px; padding: 0px;}

ul.memories-slider-btn a{text-indent: -5000px;float: left; width: 15px; height: 15px; background: url(../images/slide-btn.png) no-repeat;}

ul.memories-slider-btn li.prev-btn, ul.memories-slider-btn li.prev-btn a{}
ul.memories-slider-btn li.prev-btn a:hover{background-position: left bottom;}
ul.memories-slider-btn li.next-btn, ul.memories-slider-btn li.next-btn a{float: right; background-position: top right;}
ul.memories-slider-btn li.next-btn a:hover{background-position: right bottom;}




/*OTHER STORIES MENU*/

ul.other-stories-list{list-style: none; padding: 0px;}


ul.other-stories-list li a{
	float: left;
	display: inline;
	width: 100%;
	padding: 10px 0;
	color:#999;
	border-bottom: 2px dotted #bbb;
	line-height: 15px;
	text-decoration: none;
}

ul.other-stories-list li a:hover{
	border-bottom: 2px dotted #021347;
	color:#021347;
}


.contact-details address, .contact-details p{
	text-align: right;
	margin: 0px;
	padding: 0px;
	line-height: 18px;
	font-size: 11.2px
}

.contact-details address{margin-bottom: 10px}

.contact-details strong{font-weight: bolder}


/*TOOLTIP PAGE*/

.qtip-content h1{font-size: 12px; color: #777; margin-bottom: 0px;}

.qtip-content p{line-height: 18px;}

.qtip-content img{float: left; margin: 5px 15px 15px 0;border: 1px solid #ccc; padding: 3px}

#tooltip .close{}

/*YOUR MEMORIES PAGE*/

	.single-col{
		float: left;
		margin: 15px 0 30px 28px;
		width: 940px;
	}
	
	.single-col h1{margin-left: 10px;}	


	.single-col hr{width: 850px; margin: 20px 0 20px 50px; height:4px; background: #C6C7CB;color: #C6C7CB;	border: none;}
	

	.big-quote{
		width:650px;
		margin-top: 30px;
		margin-bottom: 50px;
		margin-left:140px;
		background: url(../images/quote-close.png) bottom right no-repeat;	
	}

			.big-quote-open{background: url(../images/quote-open.png) top left no-repeat;height: 33px;width: 100%;}
		
			.big-quote blockquote{width: 550px;margin: 0 0 0 50px;font-size: 15px;line-height: 24px;font-style: italic;}
		
			.big-quote cite{float: right;margin-right:70px;}
		
		
		.small-quote{
			border: 0px solid red;
			float: left;
			margin: 30px 0 20px 60px;
			width: 390px;
			display: inline;
			
		}
		
		
		.small-quote cite{float: right;margin-right: 10px}