@import url(reset.css); 

/* --------------------------------------------------------------------------------
 * HTML
 * -------------------------------------------------------------------------------- */ 
body {
	font: 62.5%/1.5 Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
	color: #231f1f;
	background: #6666ff url(../images/global/bg_body.jpg) no-repeat 0 0;
}

div {position:relative}

p {
	padding: 0 0 15px 0;
	font-size: 1.2em;
}

a:link,a:visited {
	color: #231f1f;
}

a:hover {
	color: #666;
}


/* --------------------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------------------- */ 
#wrap {
	margin: 0 auto;
	width: 960px;
}

#header {
	width: 949px;
	height: 69px;
	padding-top: 28px;
	background: url(../images/global/bg_header.jpg) no-repeat 100% 0;
}

#content {
	width: 720px;
	margin-left: 229px;
	padding-bottom: 15px;
	min-height: 429px;
	background: #a8deff url(../images/global/bg_content2.jpg) no-repeat 100% 0;
}

.content-box {
	margin-left: 30px;
	margin-right: 30px;
	padding-top: 15px;
}

#footer {
	width: 960px;
	height: 79px;
	background: url(../images/global/bg_footer.jpg) no-repeat 100% 0;
}

/*--- header ---*/
span#logo {
	display: block;
	width: 70px;
	height: 70px;
	text-indent: -9999em;
	background: url(../images/global/gr_logo_yha.jpg) no-repeat;
	position: absolute;
	top: 21px;
	left: 138px;
	z-index: 1100;
}

span#logo a {
	display: block;
	width: 70px;
	height: 70px;
}

/*--- Nav ---*/
ul#main-nav {
	margin-left: 247px;
	height: 58px;
}

ul#main-nav li {
	display: inline;
	height: 58px;
}

ul#main-nav li a, ul#main-nav li a:visited {
	display: block;
	float: left;
	height: 58px;
	line-height: 58px;
	padding: 0 10px;
	font-size: 1.3em;
	color: #fff;
	text-decoration: none;
}

ul#main-nav li a:hover
{
	background: #3ca7e8 url(../images/global/bg_nav_hover.jpg) repeat-x;
}

/* current page */
body#index ul#main-nav li.menu-home a,
body#history ul#main-nav li.menu-history a,
body#stories ul#main-nav li.menu-stories a,
body#win ul#main-nav li.menu-win a,
body#celebrations ul#main-nav li.menu-celebrations a,
body#gallery ul#main-nav li.menu-gallery a
{
	background: #3ca7e8 url(../images/global/bg_nav_current.jpg) repeat-x;
}

	
/* --------------------------------------------------------------------------------
 * Headers
 * -------------------------------------------------------------------------------- */ 
h1 {
	display: block;
	width: 166px;
	height: 158px;
	text-indent: -9999em;
	background: url(../images/global/hd_100years.jpg) no-repeat;
	position: absolute;
	top: 119px;
	left: 44px;
	z-index: 1200;
}

h2 {
	font-size: 26px;
	font-weight: bold;
	color: #231f1f;
	letter-spacing: -1px;
}

h3 {
	font-size: 1.8em;
	font-weight: bold;
	color: #231f1f;	
}

h2.closes-soon {
	font-size: 18px;
	width: 470px;
	margin: 10px 0;
	padding: 5px 0;
	text-align: center;
	background: #ff851b;
	border: 1px solid #7f0c00;
	color: #7f0c00;
	line-height: normal;
}

/* --------------------------------------------------------------------------------
 * Content
 * -------------------------------------------------------------------------------- */ 
#content p {
	color: #231f1f;
}

ul.list-A {}
ul.list-A li {
	padding-left: 15px;
	padding-bottom: 10px;
	font-size: 1.2em;
	background: url(../images/global/li_blue_dot.gif) no-repeat 0 7px;
}

ul.list-A li ul li {
	font-size: 1.1em!important;
}


.breakout-box {
	padding: 10px 20px;
	border: 1px solid #fff;
	background: #75c6f8;
}
	

/* --------------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------------- */ 
#footer ul {
	margin-left: 247px;
	padding-top: 11px;
}

#footer ul li {
	height: 58px;
	line-height: 58px;
	display: block;
	float: left;
	color: #51b8b5;
	font-size: 1.1em;
}

li.footer-copyright {
}

#footer ul li a {
	color: #b1dfdd;
	text-decoration: none;
}

#footer ul li a:hover {
	text-decoration: underline;
}

span#logo-hih {
	display: block;
	width: 82px;
	height: 79px;
	text-indent: -9999em;
	background: url(../images/global/gr_logo_hih.jpg) no-repeat;
	position: absolute;
	top: 0px;
	right: 11px;
	z-index: 1100;
}

span#logo-hih a {
	display: block;
	width: 82px;
	height: 79px;
}


/* --------------------------------------------------------------------------------
 * Page specific
 * -------------------------------------------------------------------------------- */ 
/*--- Home - index ---*/

body#index #content {
	background: #a8deff url(../images/global/bg_content.jpg) no-repeat 100% 0;
}

body#index .content-box {
	margin-left: 188px;
	padding-top: 29px;
	width: 353px;
}

body#index h2 {
	display: block;
	width: 336px;
	height: 119px;
	padding-bottom: 10px; 
	text-indent: -9999em;
	background: url(../images/homepage/hd_celebrating100_years.jpg) no-repeat;
}

body#index #content p {
	width: 320px;
	padding-bottom: 25px;
	font-size: 1.6em;
	line-height: normal;
}

a.bt-history {
	display: block;
	width: 321px;
	height: 31px;
	margin-bottom: 20px;
	text-indent: -9999em;
	background: url(../images/homepage/bt_learn_more.gif) no-repeat;
	background-position: 0 0;
}

a:hover.bt-history {
	background-position: 0 -100px;
}

a.bt-win {
	display: block;
	width: 159px;
	height: 145px;
	text-indent: -9999em;
	background: url(../images/global/bt_win100days.jpg) no-repeat;
	background-position: 0 0;
	position: absolute;
	top: 10px;
	right: 15px;
}

a:hover.bt-win {
	background: url(../images/global/rp_win100days.jpg) no-repeat;
}

.promo-win {
	float: right;
	display: block;
	width: 159px;
	height: 145px;
	text-indent: -9999em;
	background: url(../images/global/bt_win100days.jpg) no-repeat;
	background-position: 0 0;
}


a.bt-stories {
	display: block;
	width: 159px;
	height: 171px;
	text-indent: -9999em;
	background: url(../images/global/bt_100stories.jpg) no-repeat;
	background-position: 0 0;
	position: absolute;
	top: 169px;
	right: 15px;
}

a:hover.bt-stories {
	background: url(../images/global/rp_100stories.jpg) no-repeat;
}

.promo-stories {
	float: right;
	display: block;
	width: 159px;
	height: 171px;
	text-indent: -9999em;
	background: url(../images/global/bt_100stories.jpg) no-repeat;
	background-position: 0 0;
}

/*--- History ---*/
.timeline-iframe {
	border:2px solid #40b1f6;
	margin-bottom: 15px;
}

body#timeline {
	width: 6510px;
	background: #a8ddfd none;
}

#nav-timeline {
	height: 235px;
	background: url(../images/history/bg_timeline.jpg) repeat-x 0 0;
}

#nav-timeline li {
	float: left;
	width: 195px;
	height: 235px;
	padding-left: 15px;
	background: url(../images/history/border_line.jpg) no-repeat 100% 0;
}

#nav-timeline li.picture {
	width: 385px;
}

#nav-timeline li.picture span.pic  {
	float: right;
	display: block;
	width: 180px;
	height: 180px;
	padding: 10px 10px 0 0;
}

#nav-timeline li span.year  {
	display: block;
	width: 180px;
	height: 71px;
	padding-top: 20px;
	text-indent: -9999em;
	background-repeat: no-repeat;
	background-position: 0 100%;
}

#nav-timeline p {
	width: 170px;
	padding: 20px 0 15px 10px;
	line-height: normal;
	font-size: 1.2em;
	color: #231f1f;
}

#nav-timeline li.y1909 span.year  { background-image: url(../images/history/hd_1909.gif); }
#nav-timeline li.y1912 span.year  { background-image: url(../images/history/hd_1912.gif); }
#nav-timeline li.y1919 span.year  { background-image: url(../images/history/hd_1919.gif); }
#nav-timeline li.y1939 span.year  { background-image: url(../images/history/hd_1939.gif); }
#nav-timeline li.y1943 span.year  { background-image: url(../images/history/hd_1943.gif); }
#nav-timeline li.y1947 span.year  { background-image: url(../images/history/hd_1947.gif); }
#nav-timeline li.y1948 span.year  { background-image: url(../images/history/hd_1948.gif); }
#nav-timeline li.y1950 span.year  { background-image: url(../images/history/hd_1950.gif); }
#nav-timeline li.y1951 span.year  { background-image: url(../images/history/hd_1951.gif); }
#nav-timeline li.y1962 span.year  { background-image: url(../images/history/hd_1962.gif); }
#nav-timeline li.y1968 span.year  { background-image: url(../images/history/hd_1968.gif); }
#nav-timeline li.y1970 span.year  { background-image: url(../images/history/hd_1970.gif); }
#nav-timeline li.y1976 span.year  { background-image: url(../images/history/hd_1976.gif); }
#nav-timeline li.y1995 span.year  { background-image: url(../images/history/hd_1995.gif); }
#nav-timeline li.y1997 span.year  { background-image: url(../images/history/hd_1997.gif); }
#nav-timeline li.y2000 span.year  { background-image: url(../images/history/hd_2000.gif); }
#nav-timeline li.y2004 span.year  { background-image: url(../images/history/hd_2004.gif); }
#nav-timeline li.y2005 span.year  { background-image: url(../images/history/hd_2005.gif); }
#nav-timeline li.y2007 span.year  { background-image: url(../images/history/hd_2007.gif); }
#nav-timeline li.y2008 span.year  { background-image: url(../images/history/hd_2008.gif); }
#nav-timeline li.y2009 span.year  { background-image: url(../images/history/hd_2009.gif); }

/* --------------------------------------------------------------------------------
 * Form
 * -------------------------------------------------------------------------------- */ 
label {
	display: block;
	font-size: 1.2em;
}

input#email {
	font-family: Arial, Helvetica, sans-serif;
	width: 450px;
	padding: 5px;
	font-size: 1.9em;
}

button {
	margin-top: 5px;
	display: block;
	background: #3fadf1 url(../images/global/bg_nav_hover.jpg) repeat-x scroll 0 0;
	border: 1px solid #3fadf1;
	color: #fff;
	font-size: 100%;
	padding: 3px 10px;
}

/* --------------------------------------------------------------------------------
 * Extras
 * -------------------------------------------------------------------------------- */ 
.clearer {
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height:0;
}

.left	{ float: left; }
.right	{ float: right; }
.col 	{ width: 430px; }
.bug	{ border: 1px solid red; }

.warning {
	text-align: center;
	background: #fff0a5;
	color: #b64926!important;
	padding: 2px 5px;
	font-weight: bold;
}


