/* 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: 78px; height: 50px; 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; visibility: inherit;
transition: height 500ms; overflow: hidden;
background-position: right bottom; background-repeat: no-repeat; background-size: contain; -webkit-background-size: contain;
}

li.bold
{
	font-weight: bold;
}

#top.topHeaderSmall div.topHeader { height: 50px; }
#top.topHeaderSmall a.headerLogo { bottom: 16px; width: 41px; }
#top.topHeaderSmall a.headerText { height: 0px; }
div.topContent { position: relative; top: 0px; left: 0px; }

#menuSwitch
{
display: none; position: absolute; bottom: 16px; right: 0px; height: 12px; width: 16px;
cursor: pointer; -moz-user-select: none;
background-position: right -22px; background-repeat: no-repeat;
}


/* /header */

#topSpacer { height: 100px; }

/* max content width */
#wrapper,
div.topHeaderContent,
body div.qlWrapper div.qlButtonWrapper{
	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,
div.qlWrapper div.qlButtonWrapper.left-aligned{
	margin: 0px 22px;
	transition: left 1000ms;
}

@media only screen and (max-width: 1297px){
	#wrapper,
	div.topHeaderContent,
	body div.qlWrapper div.qlButtonWrapper{
		margin: 0px 33px;
		width: auto;
	}
	div.topbar-content{
		width: 100%;
		padding-right: 66px;
	}
}

@media only screen and (max-width: 1023px){
	#wrapper,
	div.topHeaderContent,
	body div.qlWrapper div.qlButtonWrapper{
		margin: 0px 22px;
	}
	div.topbar-content{
		padding-right: 44px;
	}
	#top { position: relative; } 
	div.topHeader { height: 50px; }
	div.topContent{ height: auto;}
	a.headerLogo { bottom: 16px; width: 41px; top: auto; }
	a.headerText { height: 0px; }
	#topSpacer { display: none; }
	#menuSwitch { display: block; }	
	#menuWrapper { display: none; }
	#menuWrapper.visible { display: block; }
}

@media only screen and (max-width: 767px){
	#wrapper,
	div.topHeaderContent,
	body div.qlWrapper div.qlButtonWrapper{
		margin: 0px 22px;
		width: 724px;
	}
}

div.qlButton { background-image: url(../images/quicklaunch_button.png)!important; }
#menuSwitch { background-image: url(../images/menu_toggle.png); }

@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {  
	div.qlButton { background-image: url(../images/quicklaunch_button_x2.png)!important; }
	#menuSwitch { background-position: right 1px!important; background-size: 16px auto; -webkit-background-size: 16px auto; }
}