
/* header */
#top { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 20; background-color: #FFFFFF; }
div.topHeader { position: relative; top: 0px; left: 0px; height: 100px; z-index: 22; transition: height 500ms; }
div.topHeaderContent { position: relative; top: 0px; left: 0px; height: 100%; }

a.headerLogo
{ 
display: block; position: absolute; top: auto; bottom: 25px; left: 0px; width: 150px; height: 45px; overflow: hidden; visibility: inherit;
transition: bottom 500ms, width 500ms;
background-position: 0px bottom; background-repeat: no-repeat; background-size: 100% auto; -webkit-background-size: 100% auto;
}

a.headerText
{
display: block; position: absolute; bottom: 25px; right: 0px; top: auto; width: 290px; height: 17px; overflow: hidden; visibility: inherit;
transition: height 500ms; overflow: hidden; 
background-position: right bottom; background-repeat: no-repeat; background-size: auto 100%; -webkit-background-size: auto 100%;
}

#top.topHeaderSmall div.topHeader { height: 50px; }
#top.topHeaderSmall a.headerLogo { bottom: 10px; width: 80px; }
#top.topHeaderSmall a.headerText { height: 0px; }

/* /header */

#topSpacer { height: 100px; }

/* max content width */
#wrapper,
div.topHeaderContent{
	width: 1214px;
	margin: 0px auto;
}
/* left aligned content and header in case we have toggled our preview area */
#wrapper.left-aligned,
.topHeaderContent.left-aligned,
.topContent.left-aligned{
	margin: 0px 22px;
	transition: left 1000ms;
}

@media only screen and (max-width: 1297px){
	#wrapper,
	div.topHeaderContent{
		margin: 0px 33px;
		width: auto;
	}
	div.topbar-content{
		width: 100%;
		padding-right: 66px;
	}
}

@media only screen and (max-width: 1023px){
	#wrapper,
	div.topHeaderContent{
		margin: 0px 22px;
	}
	div.topbar-content{
		padding-right: 44px;
	}
	#top { position: relative; } 
	div.topHeader { height: 50px; }
	a.headerLogo { bottom: 10px; width: 80px; }
	a.headerText { height: 0px; }
	#topSpacer { display: none; }
}

@media only screen and (max-width: 767px){
	#wrapper,
	div.topHeaderContent{
		margin: 0px 22px;
		width: 724px;
	}
}
