AVEF/imports/ui/layouts/Public.import.styl

//Needs to be outside the #publicBody because the dialog is created outside that element.
.donateList
	list-style-type: none
.donateLink
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
	font-weight: bold
	padding: 8px 8px 0 8px
	text-decoration: none
	color: #269

#publicBody
	position: relative
	max-width: 960px
	min-width: 250px
	margin: 0 auto

	#page
		background: #FDFDFD

		.topBar
			display: relative
			.logoLeft
				cursor: pointer
				z-index: 1
				display: inline-block
				height: 43px
				width: 41px
				background-image: url('/images/logo_v1.png')
				background-position: center center
				background-origin: content-box
				background-clip: content-box
				background-repeat: no-repeat
				background-size: cover
			.menuBar
				list-style-type:none
				margin: 15px 0 0 0
				padding: 0
				margin-right: 10px
				overflow:hidden
				display: inline-block
				float: right
				font-size: 16px
				li
					float: right
					a
						font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
						font-weight: bold
						padding: 8px 8px 0 8px
						text-decoration: none
						color: #269
					a:hover
						color: #5AD
					a:active
						color: #047
					a.active
						color: #777777
						cursor: default
					span.link
						font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
						font-weight: bold
						padding: 8px 8px 0 8px
						text-decoration: none
						color: #269
						cursor: pointer
					span.link
						color: #5AD
			.dropMenu
				display: none
				position: absolute
				width: 100%
				z-index: 9999
				background: #d8e3f6
				height: 104px
				margin: 0 0 10px 0
				padding-top: 2px
				color: white
				a
					display: block
					color: #226699
					font-family: Corbel, "Helvetica Neue", Helvetica, Arial, sans-serif
					font-size: 18px
					font-weight: 800
					line-height: 19px
					text-align: left
					text-decoration: none
					padding: 2px 0 2px 6px
					margin: 2px 0
				a:hover
					color: white
					background-color: #226699
				a:active
					color: #AAA
				p
					color: #DDF
					font-family: Georgia, serif
					font-size: 10px
					text-indent: 0
					text-wrap: none
					line-height: 10px
					margin: 0 0 2px 0
					padding: 0
				.leftMenu
					position: absolute
					left:0
					width: 50%
					div
						max-height: 30px
				.rightMenu
					position: absolute
					left:50%
					right:0
					div
						max-height: 30px

	.theKey
		color: #269
		margin-top: 2px
		margin-left: 4px
	.footer
		text-align: center
		padding-bottom: 40px
	.copyright
		float: left
		color: #777777
		letter-spacing: 1px
		overflow: visible
		white-space: nowrap
		text-transform: uppercase
		font-size: 10px
	.byline
		float: right
		color: #777777
		letter-spacing: 1px
		overflow: visible
		text-align: right
		text-transform: uppercase
		font-size: 10px

	// Some media settings for the MENU
	// Small Screens
	@media(max-width: 699px)
		.dropMenu
			visibility: visible
		.level1, .level2
			display: none
		#page
			#head
				height: 0
			#logo
				position: absolute
				right: 5px
				top: 0
				width: 40px
				height: 40px
				background: url(images/Logo_v1.png) no-repeat top center
				background-size: 40px 40px
				cursor: pointer
			.page
				margin: 0 auto
				padding: 6px 4px
				position: relative
			#menuBackground
				height: 20px
				max-width: 950px
				background: #FFF
			#menu
				height: 20px
				font-size: .8em
			#menu a
				margin: 0 0 0 5px
				text-decoration: none
				color: black
				line-height: 20px
				display: inline-block
				height: 20px
				border-bottom: 1px solid transparent
				/* Force the browser to include padding and border as part of the size of the block. */
				-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
				-moz-box-sizing: border-box    /* Firefox, other Gecko */
				box-sizing: border-box         /* Opera/IE 8+ */
			#menu a:hover
				opacity: .7
				color: black
				border-bottom: 1px solid red
	// Large Screens (MENU)
	@media(min-width: 700px)
		.dropMenu
			display: none
			visibility: hidden
		.barButton
			display: none
		#page
			#head
				background: url(images/header_v2.jpg) no-repeat top center
				background-size: contain
				max-width: 950px
				height: 171px
			#logo
				position: absolute
				right: 10px
				top: 10px
				width: 120px
				height: 120px
				background: url(images/Logo_v1.png) no-repeat top center
				background-size: 120px 120px
				cursor: pointer
			.page
				margin: 0 auto
				padding: 30px 20px
				position: relative
			#menuBackground
				height: 31px
				max-width: 950px
				background: #FFF
			#menu
				height: 30px
				margin-bottom: 1px
				font-size: 1em
			#menu.wide
				width: 199px
			#menu a
				margin: 0 0 0 16px
				text-decoration: none
				color: black
				line-height: 30px
				display: inline-block
				height: 30px
				border-bottom: 3px solid transparent
				/* Force the browser to include padding and border as part of the size of the block. */
				-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
				-moz-box-sizing: border-box    /* Firefox, other Gecko */
				box-sizing: border-box         /* Opera/IE 8+ */
			#menu a:hover
				opacity: 1
				color: black
				background: transparent
				border-bottom: 3px solid #a20010

		//Some settings for the FOOTER
	@media(max-width: 800px)
		.copyright
			font-size: 10px
		.byline
			float: left
			clear: both
			text-align: left
			font-size: 10px
		.footer
			font-size: 10px
			text-align: left
	@media(max-width: 600px)
		.copyright
			font-size: 8px
		.byline
			float: left
			clear: both
			text-align: left
			font-size: 8px
		.footer
			font-size: 8px
			text-align: left
	@media(max-width: 500px)
		.copyright
			font-size: 7px
		.byline
			float: left
			clear: both
			text-align: left
			font-size: 7px
		.footer
			font-size: 7px
			text-align: left