PetitTetonMeteor/imports/ui/layouts/Body.import.styl

//#layoutBody
//	width: 100%
//	height: 100%
//	//display: table  //Firefox does not like this - no idea why.  Not required apparently.
//	margin: 0
//	padding: 0
//	border: 0
//	overflow: hidden

#mainBody
	//position: relative
	//display: flex;
	//flex-flow: row;
	//display: inline-block  // Requried by Firefox for absolute positioning.
	margin: 0
	padding: 0
	border: 0
	height: 100%
	width: 100%

	nav.leftSidebarContainer
		z-index:999
		position: fixed
		top: 0
		width: 220px
		padding: 0
		height: 100%
		border: 0
		vertical-align: top
		text-align: left
		background-color: #90b272   //Old browsers
		background: -moz-linear-gradient(-180deg, #90b272 0%, #4d7727 100%)  //FF3.6-15
		background: -webkit-linear-gradient(-180deg, #90b272 0%,#4d7727 100%)  //Chrome10-25,Safari5.1-6
		background: linear-gradient(180deg, #90b272 0%,#4d7727 100%)  //W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
		font-size: 14px
		font-weight: 700
		overflow: visible
		margin: 0 0 0 -220px
		-webkit-transition: .5s ease-in
		-moz-transition: .5s ease-in
		-o-transition: .5s ease-in
		-ms-transition: .5s ease-in
		transition: .5s ease-in
		.leftSidebarMenuButton
			position: absolute
			right: -30px
			-webkit-transition: .5s ease-in
			-moz-transition: .5s ease-in
			-o-transition: .5s ease-in
			-ms-transition: .5s ease-in
			transition: .5s ease-in
			-webkit-border-top-right-radius: 5px
			-webkit-border-bottom-right-radius: 5px
			-moz-border-radius-topright: 5px
			-moz-border-radius-bottomright: 5px
			border-top-right-radius: 5px
			border-bottom-right-radius: 5px
			color: black
			font-size: 20px
			line-height: 20px
			font-weight: 900
			text-align: center
			text-decoration: none
			width: 30px
			height: 30px
			padding: 5px 0
			background-color: #90b272
			display: block
			border-top: 1px solid #494
			border-right: 1px solid #494
			border-bottom: 1px solid #494
		.leftSidebarMenuButton:hover
			color: rgba(150,0,0,.5)
	nav.generalSidebar
		.leftSidebarMenuButton
			top: 10px
	nav.graphsSidebar
		.leftSidebarMenuButton
			top: 50px
	nav.settingsSidebar
		.leftSidebarMenuButton
			top: 90px
	nav.menuHide .leftSidebarMenuButton
		right: 60px
	nav.menuShow
		margin: 0
	nav.menuShow .leftSidebarMenuButton
		right: -15px
		-webkit-transform: rotate(45deg) !important
		-moz-transform: rotate(45deg) !important
		-o-transform: rotate(45deg) !important
		-ms-transform: rotate(45deg) !important
		transform: rotate(45deg) !important
		-moz-border-radius-bottomright: 0
		//border-top-right-radius: 0
		border-bottom-right-radius: 0
		border-bottom: 0
	.leftSidebar
		flex: 0 0 auto
		display: flex
		flex-flow: column
		justify-content: flex-start
		align-items: flex-start
		align-content: stretch
		height: 100%
		//position: absolute
		border: 0
		vertical-align: top
		padding: 0
		text-align: left
		//top: 0px
		//left: 0px
		//bottom: 0px
		width: 220px
		//Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D
		background-color: #90b272   //Old browsers
		background: -moz-linear-gradient(-180deg, #90b272 0%, #4d7727 100%)  //FF3.6-15
		background: -webkit-linear-gradient(-180deg, #90b272 0%,#4d7727 100%)  //Chrome10-25,Safari5.1-6
		background: linear-gradient(180deg, #90b272 0%,#4d7727 100%)  //W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
		font-size: 14px
		font-weight: 700
		overflow: hidden

		.logoArea
			flex: 0 0 auto
			width: 100%
			.signOut
				position: absolute
				left: 10px
				top: 10px
				color: white
				cursor: pointer
			.signOut:hover
				color: #BBB
			.signOut:active
				color: black
			.logo
				text-align: center
				margin-top: 20px
				img:hover
					//-webkit-animation: neon6_drop 1.5s ease-in-out infinite alternate;
					//-moz-animation: neon6_drop 1.5s ease-in-out infinite alternate;
					animation: neon6_drop 1.5s ease-in-out infinite alternate;
		.menuArea
			flex: 1 1 auto
			width: 100%
			ul
				padding: 20px 0 0 0
				margin: 0
				list-style: none
				li:first-child
					border-top: 1px solid #e4e5e7
				li
					border-bottom: 1px solid #e4e5e7
					color: #96a2ae
					text-transform: uppercase
					display: block
					a
						color: black
						padding: 10px 20px
						cursor: pointer
						text-decoration: none
						display: block
						.tag
							padding: .3em .6em
							margin-top: -.2em
							font-size: .8em
							color: #ddd
							white-space: nowrap
							vertical-align: baseline
							border-radius: .5em
							border: 1px solid #000000
							float: right
						.subMenu
							background-color: #999
							padding: .3em .6em
							margin-top: -.2em
							font-size: .8em
							color: #fff
							white-space: nowrap
							vertical-align: baseline
							border-radius: .5em
							border: 1px solid #000000
							float: right
						.subMenu.active
							background-color: #333
				li:hover
					// Note: neon6 is defined in effects.import.styl
					background-color: #666
					-webkit-animation: neon6 1.5s ease-in-out infinite alternate
					-moz-animation: neon6 1.5s ease-in-out infinite alternate
					animation: neon6 1.5s ease-in-out infinite alternate
					.subMenu
						// Note: neon6 is defined in effects.import.styl
						background-color: #999
						-webkit-animation: neon7 1.5s ease-in-out infinite alternate
						-moz-animation: neon7 1.5s ease-in-out infinite alternate
						animation: neon7 1.5s ease-in-out infinite alternate
				li.active
					background-color: #333
					> a
						color: #96a2ae
				li.active:hover
					background-color: #333
					> a
						color: white
		.footer
			flex: 0 0 auto
			width: 100%
			font-size: 9px
			text-align: center

	.contentBody
		flex: 1 1 1px
		padding: 10px 20px
		-webkit-box-shadow: inset 4px 2px 10px -3px rgba(168,165,168,1)
		-moz-box-shadow: inset 4px 2px 10px -3px rgba(168,165,168,1)
		box-shadow: inset 8px 0px 10px -3px rgba(168,165,168,1)
		overflow: hidden