@import 'compass/css3'
//Header
body
	font-size: 100%	
	margin: 0 1% !important
	padding: 0 !important
#sub-sec-tmp
	visibility: hidden	
	position: absolute	
		
#sub-sec-4
	visibility: visible	
	position: relative
	@media only screen and (max-width: 800px)
		visibility: hidden
		position: absolute
$header-width: 74.6%
a
	color: #2b7fcf

.notify
	background: #ffff99 url(../images/notify.png) repeat-x
	font-family: Arial
	p.notification
		font-size: 14px
	
#header
	background: #fff
	max-width: 960px	

#secondaryHeader
	border-top: 0
	font-family: Arial, sans-serif
	max-width: 960px
	background: url(../images/secondaryheader.png) repeat-x
	.content-wrapper
		width: 100%
#logo img
	margin-top: 10px
	margin-bottom: 10px
.content-wrapper
	margin: auto
	position: relative
	width: 100%

#navTags
	background: url("../images/sprites.png") no-repeat scroll -50px -5px transparent

#navUsers
	background: url("../images/sprites.png") no-repeat scroll -125px -5px transparent

#navBadges 
	background: url("../images/sprites.png") no-repeat scroll -210px -5px transparent

#metaNav
	a
		color: #2b7fcf
		font-family: Arial
		font-size: 0.8em
		.on
			color: #000
			font-weight: bold
#userToolsNav 
	a
		color: #2b7fcf
		font-family: Arial
		font-size: 12px
		font-weight: bold
		text-decoration: none
		&:hover
			text-decoration: underline
#homeButton 
	background: url("../images/sprites.png") no-repeat scroll -5px -37px transparent
	border-right: 1px solid #6488c7
	&:hover
		background: url("../images/sprites.png") no-repeat scroll -50px -37px transparent
  
input[type="submit"]
	&.searchBtn
		background: url("../images/sprites.png") no-repeat scroll -98px -37px transparent
		border: #c9c9b5 1px solid
		color: #666666
		margin-top: 8px
		margin-right: 34px
		height: 39px
		+border-top-right-radius(4px)
		+border-bottom-right-radius(4px)
		&:hover
			background: url("../images/sprites.png") no-repeat scroll -146px -37px transparent
.searchBar-searchInput
	+border-top-left-radius(4px)
	+border-bottom-left-radius(4px)
	height: 35px
	margin-top: 2px
	border: #c9c9b5 1px solid
	*width: 280px !important /*IE fix*/
	*float: right
#searchBar 
	margin: 0
	margin-top: 6px
	.searchInput, .searchInputCancelable
		@extend .searchBar-searchInput
	input.searchInput
		width: 100%
		font-size: 1.4em
	.searchInputCancelable
		width: 316px
#searchBar .search-drop-menu, body.anon #searchBar
	margin-left: 0

.search-drop-menu
	width: 45%
	position: absolute
	top: 50px
	margin: 0 0 0 0
	.footer
		padding-top: 10px
	ul.empty
		height: 3px
		padding: 0
$searchBar-marginlef: 210px
body, 
	&.anon
		.search-drop-menu
			margin-left: 0
#searchBar
	.searchInput
		width: 100%
	.searchInputCancelable
		width: 100%
.cancelSearchBtn
	border: #c9c9b5 1px solid
	border-right: none
	height: 39px
	line-height: 39px
	margin: 8px 0 0 -39px
	padding: 0 10px
.scope-selector
	color: #fff
	font-size: 0.8em
	font-family: Arial
	&.on
		background: url("../images/navshadow.png") no-repeat scroll center bottom transparent
	&:hover		
		color: #fff

//tuanpa -css
#metaNav a#navUsers, #metaNav a#navTags, #metaNav a#navGroups
	color: #2b7fcf
#metaNav
	float: right
.sub-secondary
	float: left
#sub-sec-2
	margin-right: -49px
	width: 45%
	margin-left: 10px
#sub-sec-3
	margin-left: 0px
	input
		margin-right: 0px
#sub-sec-4, #sub-sec-tmp
	float: right
	width: 17%
	height: 55px
.sub-parent
	&:after
		content: " "
		clear: both
//950px
@media only screen and (max-width: 950px)
	body
		font-size: 85%	

//800px
@media only screen and (max-width: 800px)
	body
		font-size: 100%	
	#sub-sec-4
		visibility: hidden
		position: absolute
	#sub-sec-tmp
		visibility: visible
		position: relative
		float: right
		width: 40%
	#sub-sec-2
		margin-left: 0
		width: 100%
		.search-drop-menu
			top: 104px
			width: 100%
//650			
@media only screen and (max-width: 650px)
	.user-info
		display: none
//600px
@media only screen and (max-width: 600px)
	body
		font-size: 90%			
	#userToolsNav, #metaNav
		margin-right: 4%
	#logo img 
		margin-top: -10px
		margin-bottom: 0px
			
//500px
@media only screen and (max-width: 550px)
	body
		font-size: 85%
	#homeButton
		visibility: hidden
		position: absolute

@media only screen and (max-width: 550px)
	body
		font-size: 75%
	#sub-sec-tmp
		width: 45%
@media only screen and (max-width: 400px)
	body
		font-size: 70%
	#sub-sec-tmp
		width: 40%
	.scope-selector
		font-size: 0.7em