/* Information -------------------------------------

Version: 0.1.1

Include on: Tarpits.org Timeline

Notes: * before selector targets IE7.

Contains:
	=Buttons
	=Text Headers
	=Common Text
	=Content Containers & Modules
	=Rotator
	=Slides
----------------------------------------------------*/


/* =Buttons
----------------------------------------------------*/
.circleArrow {
	color: #fff;
	font-family: arial,helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
}
.circleArrow.next {
	float: right;
}
.circleArrow.next:hover {
	background-position: 100% -150px;
}
.circleArrow.prev {
	float: left;
}
.circleArrow.prev:hover {
	background-position: 0 -60px;
}


/* =Text Headers
----------------------------------------------------*/
/* ----- h1 ----- */
h1 {
	font-size: 32px;
	line-height: 1.1;
	margin-bottom: 42px;
	white-space: nowrap;
}
h1 span {
	display: block;
	font-size: 13px;
}
.invert h1 {
	margin-bottom: 26px;
}
.start h1 {
	border-bottom: 5px solid #333;
	font-size: 13px;
	margin: 22px 0 8px 0;
	padding-bottom: 15px;
}

/* ----- h2 ----- */
h2 {
	border-bottom: 1px solid #333;
	color: #c1cd23;
	font-size: 20px;
	line-height: 1.1;
	margin-bottom: 15px;
	padding-bottom: 8px;
	text-transform: uppercase;
}
h2 ~ h2 {
	display: none;
}
h2 span {
	color: #000;
	display: block;
	font-size: 12px;
	margin-top: 3px;
}
.start h2 {
	font-family: 'GraphicusDT-Bold';
	font-size: 43px;
	font-weight: normal;
	margin: 14px 0 20px 0;
	padding-bottom: 8px;
}
.invert h2 span {
	color: #fff;
}


/* =Common Text
----------------------------------------------------*/
.infoBlock p {
	font-weight: bold;
	line-height: 1.4;
}


/* =Nav : Timeline
----------------------------------------------------*/
#navTimeline {
	background-color: #000;
	margin: 0 -110px;
	overflow: hidden;
	padding: 0 110px;
}
#navTimeline a {
	border-bottom: 6px solid #000;
	border-right: 1px solid #4d4d4d;
	color: #7f7f7f;
	float: left;
	font-family: 'GraphicusDT-Bold';
	font-size: 11px;
	height: 32px;
	line-height: 1.4;
	padding: 15px 0 0 8px;
	text-decoration: none;
	text-transform: uppercase;
	width: 131px;
	/*-webkit-text-stroke: 1px transparent;*/
}
#navTimeline a:first-child {
	border-left: 1px solid #4d4d4d;
	width: 130px;
}
#navTimeline span {
	display: block;
	font-family: 'GraphicusDT-Regular';
	font-size: 9px;
	/*-webkit-text-stroke: 0;*/
}
#navTimeline a:hover {
	color: #fff;
}
#navTimeline a.on {
	background-color: #333;
	border-bottom-color: #f74c00;
	color: #fff;
}


/* =Content Containers & Modules
----------------------------------------------------*/
/* ----- Timeline ----- */
#timeline {
	margin: 0 auto 50px auto;
	position: relative;
	width: 980px;
}


/* =Rotator
----------------------------------------------------*/
.rotatorWrap {
	border-bottom: 1px solid #ccc;
	height: 602px;
	margin: 0 0 30px -110px;
}
/* ----- Rotator Arrow Nav ----- */
.arrowWrap {
	background: url("/sites/all/themes/tarpits/images/global/border-header.png") 0 -1px no-repeat; /* IE7&8 needs to recoginze space */
	height:45px;
	position: absolute;
	right: 110px;
	top: 45px;
	visibility: hidden;
	width: 95px;
	z-index: 10;
}
.rotatorArrow {
	margin: 0;
	top: 0;
}
.rotatorArrow.next {
	background-position: -225px 0;
	right: 0;
}
.rotatorArrow.prev {
	background-position: -90px 0;
	left: auto;
	right: 50px;
}
.start .btn {
	background: url("/sites/all/themes/tarpits/images/btn/circle-arrows-45.png") -225px 0 no-repeat;
	color: #f74c00;
	font-family: 'GraphicusDT-Bold';
	font-size: 20px;
	height: 45px;
	line-height: 50px;
	margin-bottom: 50px;
	text-indent: 55px;
	text-transform: uppercase;
	white-space: nowrap;
	width: 45px;
}
.start .btn:hover {
	background-position: -180px 0;
	background-position: -225px 0;
	text-decoration: none;
}


/* =Slides
----------------------------------------------------*/
.slide {
	background-color: #fff;
	height: 604px;
	width: 1200px;
}

/* ----- Info Block ----- */
.infoBlock {
	background-color: #fff;
	left: 110px;
	padding: 16px 18px 0 18px;
	position: absolute;
	top: 30px;
	width: 242px;
}
.infoBlock.invert {
	background-color: #000;
	color: #fff;
}
.start {
	height: 527px;
}
.start img {
	bottom: 0;
	position: absolute;
	left: 0;
}

/* ----- Img Block ----- */
.imgBlock {
	position: relative;
}
.imgBlock.positioned {
	margin-left: 388px;
	width: 702px;
}

/* ----- Rollover Note ----- */
.note {
	color: #7f7f7f;
	cursor: default;
	display: none;
	font-family: 'GraphicusDT-Bold';
	font-size: 9px;
	position: absolute;
	text-transform: uppercase;
}
.shaded .note {
	display: block;
}
.shaded:hover .note {
	display: none;
}

/* ----- Hidden Text ----- */
.hiddenText {
	display: none;
}
.imgBlock.positioned .hiddenText {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 1;
}

/* ----- Hover Text ----- */
.imgBlock.positioned p {
	font-family: 'GraphicusDT-Bold';
	font-size: 18px;
	margin-bottom: 0;
	padding: 0 110px;
}

/* ----- Menu Block ----- */
.menuBlock {
	margin-left: 576px;
	overflow: hidden;
	padding-top: 5px;
	width: 326px;
}
.menuBlock a {
	border: 1px solid #ccc;
	color: #7f7f7f;
	display: inline-block;
	float: left;
	font-size: 12px;
	font-weight: bold;
	padding: 13px;
	position: relative;
	text-align: center;
	width: 135px;
}
.menuBlock a.on {
	background-color: #333;
	border: 1px solid #222;
	color: #fff;
}
.menuBlock a:hover {
	text-decoration: none;
}
.menuBlock .arrow {
	background: url("/sites/all/themes/tarpits/images/icon/arrow-up.png") 0 0 no-repeat;
	display: none;
	height: 5px;
	left: 50%;
	margin-left: -5px;
	position: absolute;
	top: -5px;
	width: 9px;
}
.menuBlock a.on .arrow {
	display: block;
}

/* ----- Thumb Block ----- */
.thumbBlock {
	margin: 0 -8px 14px 0;
	overflow: hidden;
}
.thumbBlock a {
	float: left;
	margin-right: 8px;
	opacity: 0.5;
	padding-bottom: 8px;
	/* IE Opacity */	
	filter: alpha(opacity=50);
}
.thumbBlock a:hover,
.thumbBlock a.on {
	opacity: 1;
	/* IE Opacity */
	filter: alpha(opacity=100);
}
.thumbBlock a.on {
	background: url("/sites/all/themes/tarpits/images/timeline/thumb-marker.png") 0 100% no-repeat;
}