#new-animation-grid {
    position: absolute;
    width: 960px;
}

#new-animation-grid article {
    position: relative;
}

#grid-animation-wrapper {
	width: 960px;
	position: relative;
}

#grid-animation-wrapper article {
	position: relative;
}

#transitionPrevHolder {
	padding: 25px 50px 25px 0;
	position: absolute;
	display: block;
	height: 54px;
	top: 377px;
	left: 0;
	overflow: visible;
}
	#transitionPrevHolder:hover,
	#transitionPrevHolder.active {
		width: auto;
	}

#transitionNextHolder {
	padding: 25px 0 25px 50px;
	position: absolute;
	display: block;
	height: 54px;
	top: 377px;
	right: 0;
	overflow: visible;
}
	#transitionNextHolder:hover,
	#transitionNextHolder.active {
		width: auto !important;
	}
	.transitionButton {
		position: relative;
		display: block;
		height: 54px;
		width: 54px;
		cursor: pointer;
		opacity: 1;
		z-index: 250;
		background: transparent url('../images/transition-buttons.png') left top no-repeat;
		color: #fff;
		text-transform: uppercase;
		font: 1.4em/3 'dinregular', 'Arial Narrow', Arial, Helvetica, sans-serif;
		font-weight: bold;
		overflow: hidden;
	}
		.transitionButton:hover {
			/*opacity: 0.5;*/
		}
		#transitionNextButton {
			text-indent: -999px;
			background-position: right top;
		}
		#transitionNextHolder:hover #transitionNextButton,
		#transitionNextHolder.active #transitionNextButton,
		.active #transitionNextButton {
			display: block;
			background-position: right top;
		}
		#transitionNextHolder.hover .transitionButton,
		#transitionNextHolder:hover .transitionButton,
		#transitionNextHolder:focus .transitionButton,
		#transitionNextButton:hover,
		#transitionNextButton:focus {
			display: block;
			background-position: right bottom !important;
			width: auto !important;
			padding: 0 54px 0 15px;
			text-indent: 0;
			text-align: right;
			text-decoration: none;
		}
		#transitionPrevButton {
			text-indent: 999px;
			background-position: left top;
		}
		#transitionPrevHolder:hover #transitionPrevButton,
		#transitionPrevHolder.active #transitionPrevButton {
			display: block;
			background-position: left top;
		}
		#transitionPrevHolder.hover .transitionButton,
		#transitionPrevHolder:hover .transitionButton,
		#transitionPrevHolder:focus .transitionButton,
		#transitionPrevButton:hover,
		#transitionPrevButton:focus {
			display: block;
			background-position: left bottom !important;
			width: auto !important;
			padding: 0 15px 0 54px;
			text-indent: 0;
			text-decoration: none;
		}
		#transitionPrevHolder.forceHide,
		#transitionNextHolder.forceHide,
		#transitionNextButton.forceHide,
		#transitionPrevButton.forceHide {
			display: none !important;
		}
#touchOverlay {
	position: absolute;
	display: none;
	height: 167px;
	width: 183px;
	opacity: 1;
	z-index: 250;
	left: 388px;
	top: 300px;
	background: transparent url('../images/icon-swipe.png') left bottom no-repeat;
	overflow: hidden;
	text-indent: -500px;
}


/* Hide top nav sub elements during transitions */
body.transition-in-progress .transitionButton,
body.transition-in-progress #main-nav ul li p,
body.transition-in-progress #main-nav ul li div,
body.transition-in-progress #main-nav ul li ul,
body.transition-in-progress #main-nav ul li.active ul,
/*body.transition-in-progress #main-nav ul li:hover ul,
body.transition-in-progress #main-nav ul li:focus ul,
body.transition-in-progress #main-nav ul li:active ul,*/
body.transition-in-progress #main-nav ul li.active ul */*,
body.transition-in-progress #main-nav ul li:hover ul *,
body.transition-in-progress #main-nav ul li:focus ul *,
body.transition-in-progress #main-nav ul li:active ul *, */
body.transition-in-progress #sub-nav ul li p,
body.transition-in-progress #sub-nav ul li div,
body.transition-in-progress #sub-nav ul li ul,
body.transition-in-progress #sub-nav ul li.active ul,
/*body.transition-in-progress #sub-nav ul li:hover ul,
body.transition-in-progress #sub-nav ul li:focus ul,
body.transition-in-progress #sub-nav ul li:active ul,*/
body.transition-in-progress #sub-nav ul li.active ul */*,
body.transition-in-progress #sub-nav ul li:hover ul *,
body.transition-in-progress #sub-nav ul li:focus ul *,
body.transition-in-progress #sub-nav ul li:active ul * */{
	visibility: hidden !important;
	border: 1px solid red;
}
	



/* 1280px width styling - included here otherwise it won't work if a small page is expanded */
@media screen and (min-width: 1230px) {

	.test{  }

	#new-animation-grid {
	    width: 1200px;
	}

	#grid-animation-wrapper {
		width: 1200px;
	}

	#transitionPrevHolder {
		top: 477px;
	}
	#transitionNextHolder {
		top: 477px;
	}

	.transitionButton {
		font-size: 1.5em;
		line-height: 2.6;
	}

	#touchOverlay {
		left: 508px;
		top: 410px;
	}

}