body {margin:0; padding: 0; font-family: Interstate,'Liberation Sans',Helvetica,Arial,sans-serif; background: #231f20 url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr_spot.png?itok=k95T7aAW') 30% 30% no-repeat; background-attachment: fixed;}
#intro {width: 100%; height: 80%; color: #fff;}
#intro .rhlogo {text-decoration: none; float: left; margin-left: 2%; padding-bottom: 10%; padding-top: 2%;}
#intro .timeline-start {width: 100%; padding-bottom: 30%; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/timeline-bg-2.png?itok=qI5DUXR5') 32% bottom repeat-y;}
/*#intro h1 {font-size: 4em; padding: 0; margin: 0; text-align: center; background: transparent url('/10yearsofrhel/img/rhel10yr_title.png') center top no-repeat; text-indent: -9999px; height: 237px; width: 663px; margin-left: 16%;}*/
#intro h1 {font-size: 4em; padding: 0; margin: 0; text-align: center; text-indent: -9999px; height: 237px; width: 100%;}
#intro h1 span.ten {background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr_titleb.png?itok=Y-8ieyGY') right center no-repeat; text-indent: -9999px; height: 237px; width: 34%; margin-left: -12px; float: left;}
#intro h1 span.therest {background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr_title2.png?itok=pKEX-5l_') left center no-repeat; text-indent: -9999px; height: 237px; width: 66%; float: left;}
#intro p {width: 50%; padding-left: 34%;}
#intro span.purple {color: #564979;}
#intro .dot {float: left; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/dot.png?itok=zgFcubJy') center center no-repeat; width: 16px; height: 16px; position: relative; left: 31.55%; margin-top: -8px; padding: 0;}
#intro .dot span {display: none; height: 1%;}
#intro a {text-decoration: none;}
#intro a img {border: none;}
#outro {width: 100%; height: 80%; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr-timeline-out.png?itok=f8f_Yvxx') 32% top no-repeat; color: #fff; padding-top: 20%; padding-bottom: 20%;}
#outro h1 {font-size: 4em; padding-top: 30%; margin: 0;}
#outro p {width: 50%; margin-left: 25%;}
#outro span.purple {color: #564979;}
#outro a {text-decoration: none;}
#outro a img {border: none;}
#bgwrap {width: 100%; height: 100%;margin:0; padding: 0;}
#timewrap {/*background: #231f20 url('/10yearsofrhel/img/rhel10yr_spot.png') 32% 32% no-repeat; background-attachment: fixed;*/ color: #333; margin:0; padding: 0;}
/*#timewrap {background: #000 url(/g/chrome/bkgrnd_greydots.png) 30% 30% repeat; background-attachment: fixed; color: #333; margin:0; padding: 0;}*/
#overwrap {width: 100%; height: 20%; z-index: 20; margin:0; padding: 0;}
#overwrap .panel {width: 100%; height: 100%; margin:0; padding: 0; color: #000; overflow: hidden;}
#overwrap .panel div {background: #eee; opacity: .9; width: 90%; height: 100%; margin:0; padding: 0 5%; color: #000; overflow: hidden;}
#overwrap .graph {width: 100%; height: 100%; margin:0; padding: 0; color: #000; overflow: hidden;}
#overwrap .graph div {background: #eee; opacity: .9; width: 90%; height: 100%; margin:0; padding: 0 5%; color: #000; overflow: hidden;}
/*.fixed {position: fixed; bottom: 0; left: 0; }*/
#overwrap h2 {font-size: 1.2em; padding-bottom: 0; margin-bottom: 0;}
#overwrap h2.button {text-indent: -9999px; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/control-panel.png?itok=DxG9SmSi') center center no-repeat; width: 48px; height: 48px; margin-left: 2%;}
#overwrap .graph h2.button {text-indent: -9999px; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/control-panel.png?itok=DxG9SmSi') center center no-repeat; width: 48px; height: 48px; margin-left: 82%;}
#overwrap h2+p {padding: 0; margin-top: 0;}
#mainline {width: 100%; margin: 0 auto; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/timeline-bg-2.png?itok=qI5DUXR5') 32% top repeat-y}
.year {color: #fff; width: 100%; margin-top: 10%;}
/*.year .tick {background: transparent url('/10yearsofrhel/img/tick.png') 32% center no-repeat; position: relative;}*/
.year .tick {background: white; width: 1.05%; height: .5%; position: relative; left: 31.55%;}
.year .tick span {display: none; height: 1%;}
/*.year .dot {float: left; background: transparent url('/10yearsofrhel/img/dot.png') center center no-repeat; width: 2.1%; height: 2.1%; position: relative; left: 31.05%; min-width: 16px;}*/
.year .dot {float: left; background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/dot.png?itok=zgFcubJy') center center no-repeat; width: 16px; height: 16px; position: relative; left: 31.55%;}
.year .dot span {display: none; height: 1%;}
.year a {text-decoration: none; display: block;}
.year a+a {margin-top: .8em;}
.year h2 {text-align: center; font-size: 150%; font-weight: bold; text-shadow: .05em .05em .1em #000; background: #564979 url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr_off.png?itok=0KqIKslD') center center no-repeat; border: 2px solid #fff; width: 10%; margin-left: 27%; float: left;}
.year h2.innerzone {background-image: url('https://www.redhat.com/cms/private/styles/max_size/s3private/rhel10yr_inner_0.png?itok=eGoemqlv');}
.year h2.outerzone {background-image: url('https://www.redhat.com/en/system/files/styles/max_size/s3private/rhel10yr_outer.png?itok=5ekUAKoP');}
.year h2+h3 {float: left; margin-left: 1%}
.year div {}
.year div.left {width: 29.8%; margin-left: 0; padding: 1%; margin-right: .2%; float: left;}
.year div.right {width: 65.8%; margin-left: .2%; padding: 1%; float: left;}
.year .dark {background: #666;}
.year .dark {background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/dark-bg-80p.png?itok=cZv_478r') top left repeat;}
.year .dark a {color: #999;}
.year .light {background-color: #eee;}
.year .light {background: transparent url('https://www.redhat.com/en/system/files/styles/max_size/s3private/dark-bg-70p.png?itok=XGp6aF5d') top left repeat;}
.year .light a {color: #999;}
.year .dark a:hover {color: white;}
.jan, .feb, .mar, .apr, .may, .jun, .jul, .aug, .sep, .oct, .nov, .dec {overflow: hidden; padding: 0;}
/*.year .dot + .left {margin-left: -2.1%;}*/
.year .dot + .left {margin-left: -16px;}
#navigate {margin: 0; padding: 0; float: left; margin-right: 10px; list-style-type: none;}
#navigate li {float: left; margin-right: 10px; list-style-type: none;}
#navigate li a {color: #333; text-decoration: none;}
#navigate li a:hover {border-bottom: 1px solid #333;}
#navigate li a.hilite {color: #c00;}

.more a {text-decoration: none; font-size: 1.2em; color: #c00;}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
	zoom: 1;
}