body {
	margin: 0;
	padding: 0;
	background: #AAAAAA;
	/* transform: scale(1.1);
	transform-origin: 0 0;
	width: 90%; cancel out the scale to avoid horizontal scrolling */
}

#page {
	position: relative;
	min-width: 960px;
	max-width: 1200px;
	margin: 0 auto;
}

#login_as_user {
	padding: 1px 10px;
	max-width: 1100px;
	min-width: 960px;
	background: #FFFF00;
	font-family: Verdana, Arial, sans-serif;
}

#header {
	position: relative;
	height: 85px; /* was 75 */
	background: #333333;
}

#header_banner {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
#header_banner img {
	width: 78px;
	height: 78px;
}

#header_logo {
	padding: 19px 0 0 20px; /* top was 17, left was 30 */
	/* margin-left: 48px; this is only needed when we're showing the header_banner */
}

#search_field {
	position: absolute;
	right: 20px;
	top: 20px;
}
.require_login #search_field {
	display: none;
}
#search_field img {
	margin-top: 1px;
}
#search_string {
	width: 140px;
	height: 14px;
	padding: 2px;
	margin: 0 10px 0 0;
}

#login_menu {
	position: absolute;
	right: 20px;
	bottom: 0; /* this was 14, but now we're using padding under the menu items so we can show the selection pointer */
}

#navigation {
	/* we'll let this expand now to accomodate the login submenu: height: 12px; 28 - padding */
}

#main_menu, #account_menu {
	background: #D0D2D3;
	padding-left: 20px;
}
#main_menu .menu_item, #account_menu .menu_item {
	float: left;
	padding: 8px 0 7px 0; /* combined with a 13 font size, this equals a height of 28 */
	margin-right: 40px;
}
#account_menu .menu_item {
	margin-right: 30px;
}
#account_menu .menu_item.tighter {
	margin-right: 30px; /* this can remain the same at larger window sizes, but we'll override it in default_narrow.css for smaller window sizes */
}
#account_menu .menu_item.disabled a, #account_menu .menu_item.disabled a:hover {
	color: #888888;
}

#account_submenu {
	background: #FFFFFF;
	border-bottom: 1px solid #D0D2D3;
	position: relative;
}
#account_submenu_inner {
	margin: 0 20px 0 20px; /* this prevents the overflowing text from showing through the margin area */
	overflow: hidden;
}
#account_submenu_scrollable {
	width: 2000px; /* this prevents wrapping; instead, we'll measure the width of the items and add scroll buttons if needed */
}
#account_submenu .submenu_item {
	float: left;
	padding: 8px 0 7px 0; /* combined with a 13 font size, this equals a height of 28 */
	margin-right: 30px;
}
#account_submenu.repertoire .submenu_item {
	margin-right: 14px; /* we need tighter spacing in this sectino because we have so many items; 18 is small enough for english, but we need 14 for a few other languages like Spanish, French and Portuguese */
}
#account_submenu .submenu_divider {
	float: left;
	width: 1px;
	height: 15px;
	margin: 9px 15px 0 -14px;
	background: #D0D2D3;
}
#account_submenu.repertoire .submenu_divider {
	margin: 9px 9px 0 -8px; /* we need tighter spacing in this sectino because we have so many items */
}
#account_submenu_scroll_left, #account_submenu_scroll_right  {
	position: absolute;
	top: 8px;
}
#account_submenu_scroll_left {
	left: 7px;
}
#account_submenu_scroll_right {
	right: 7px;
}
#account_submenu_fade_left, #account_submenu_fade_right {
	position: absolute;
	top: 0;
	width: 30px;
	height: 28px;
	z-index: 100;
	pointer-events: none; /* this allows us to click through the overlay */
}
#account_submenu_fade_left {
	left: 20px; /* this should match the account_submenu_inner margin */
	background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0.5)); /* fade out over the content to show there is more available */
}
#account_submenu_fade_right {
	right: 20px; /* this should match the account_submenu_inner margin */
	background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0.5)); /* fade out over the content to show there is more available */
}

#login_menu .menu_item {
	float: left;
	padding-bottom: 14px; /* this allows us to display the pointer graphic below the selected item */
	margin-left: 20px;
}
#login_menu .menu_item.project_picker, #login_menu .menu_item.help_picker, #login_menu .menu_item.setup_checklist {
	padding-bottom: 0px; /* this avoids the space below the text from activating the hover popup */
	margin-bottom: 14px; /* this retains the same bottom spacing as the rest of the login menu items */
}

#body {
	position: relative;
	background: #FFFFFF url(/images/templates/bg_sidebar.png) left repeat-y; /* the background image extends the sidebar background color to the bottom of the body */
}
#page.require_login #body {
	background-image: url(/images/templates/bg_sidebar_login.png);
}
#page.coming_soon #body {
	background-image: none;
}

/* we're floating the main and sidebar right so we can place the sidebar HTML in the template after the main script runs */
#main {
	position: relative;
	float: right;
	padding: 25px 20px;
	width: calc(100% - 280px); /* 240 sidebar width + 40 padding */
}
#page.coming_soon #main {
	padding: 0;
	width: 1024px;
}

#main_inner {
	position: relative;
}

#page.section_tutorials #main_inner, #page.section_support #main_inner, #page.section_misc #main_inner, #page.about_the_developer #main_inner, #page.help_wanted #main_inner, #page.user_reviews #main_inner, #page.promotions #main_inner, #page.history #main_inner {
	max-width: 720px; /* make the text-heavy pages easier to read */
}

#sidebar {
	float: right;
	padding: 25px 20px;
	width: 200px; /* 240 - 40 padding */
	background: #1B75BB;
	position: sticky;
	top: 0;
}
#page.home #sidebar, #page.section_tutorials #sidebar {
	position: relative;
}
#page.require_login #sidebar {
	background: #F6F6F6;
}
/*
.sidebar_login {
	/* this is div in the content fields for the admin pages that we'll use to move the filters over into the sidebar * /
	/* the proper approach would be to split those into separate content fields and place them into the real div, but then we'd also need to split up all the page scripts arbitrarily based on layout rather than function * /
	position: absolute;
	left: 0;
	padding: 0 21px;
	width: 200px; /* 240 - 40 padding * /
}
*/

#sidebar_menu_container {
	margin-bottom: -29px; /* cancel out the padding of the last menu item */
}

#sidebar_bottom_fade {
	/* we'll use this to indicate overflow scrolling in the phone template */
	display: none;
	width: 100%
	min-height: 29px;
	height: 29px;
}

.main_box {
	margin: 0 0 10px 0;
	padding: 10px 10px 1px 10px;
	background: #F6F6F6;
	border-radius: 10px;
}

.sidebar_box {
	margin: 0 -10px 10px -10px;
	padding: 10px 10px 1px 10px;
	background: #FFFFFF;
	border-radius: 10px;
}
.sidebar_box .button_update, .sidebar_box .button_delete {
	float: right;
	margin-top: -4px;
}

.tldr {
	width: 80%;
	padding: 18px 12px 4px 12px;
	margin-bottom: 14px;
	background: #FCF4BC;
	border-radius: 10px;
}

/*
.tldr {
	width: 80%;
	padding: 10px 0px 1px 10px;
	margin-bottom: 14px;
	border-left: 5px solid #F7E452;
}
*/

.callout {
	width: 198px; /* 246 - 48 padding */
	padding: 24px 24px 12px 24px;
	background: #F2F2F2;
	border-radius: 10px;
}
#page.coming_soon .callout {
	margin: 140px auto;
}

.callout_margin { /* we can use this even when we don't have a callout to prevent lines of text from getting too long */
	margin-right: 266px; /* 246 + 20 gutter */
}

#sidebar .callout {
	width: auto;
	padding: 22px 18px;
	background: #BCD9ED; /* was 99C6E4 */
}

.callout .action_icon {
	float: left;
	margin-top: 10px;
	margin-right: 8px;
}
.callout .action_text {
	font-weight: bold;
	color: #0071BC;
}
.callout .action_text a {
	color: #0071BC;
	text-decoration: none;
}
.callout .action_text a:hover {
	color: #99C6E4;
}

.content_margin {
	width: 560px;
}

.ui-datepicker-trigger {
	/* position the calendar icon over the date field */
	margin: 0 5px -1px -17px !important;
	width: 12px;
	height: 11px;
}
#sidebar .sidebar_box input.hasDatepicker {
	/* make these fields wide enough to contain a full date plus the calendar icon */
	width: 86px;
}
.ui-datepicker {
	/* resize the calendar popup */
	font-size: 75%;
}

.ui-timepicker-div .ui-widget-header {
	margin-bottom: 8px;
}
.ui-timepicker-div dl {
	text-align: left;
}
.ui-timepicker-div dl dt {
	height: 25px; margin-bottom: -25px;
}
.ui-timepicker-div dl dd {
	margin: 0 10px 10px 85px;
}
.ui-timepicker-div td {
	font-size: 90%;
}
.ui-tpicker-grid-label {
	background: none; border: none; margin: 0; padding: 0;
}
.ui-timepicker-rtl {
	direction: rtl;
}
.ui-timepicker-rtl dl {
	text-align: right;
}
.ui-timepicker-rtl dl dd {
	margin: 0 85px 10px 10px;
}

/* tinyMCE editor (outside its iframe) */
.tox-tbtn {
	height: auto !important;
	margin-top: -3px !important;
	margin-bottom: -3px !important;
}

#feedback {
	/* we can use this if we move the feedback into main_inner: */
	/*margin: -26px -34px 26px -34px;*/
	/*margin-bottom: 26px;*/
	/* this makes one line of feedback just cover part of the top padding without moving the content after it; multiple lines of feedback will push the content down as needed */
	margin-bottom: -22px;
	position: relative;
	z-index: 50;
}

#tip_banner {
}

#alert_banner {
	/* this appears in the main content area, so needs different margins than the feedback box */
	margin-top: -5px;
	border-radius: 10px;
}

#footer {
	padding: 10px 0;
	text-align: center;
	background: #333333;
}

/* hide everything but the content and expand the content to full-screen if we add the "fullscreen" class to the body tag */
body.fullscreen {
	background: #FFFFFF;
}
body.fullscreen #page {
	width: auto;
	min-width: unset;
	max-width: unset;
	margin: 0;
}
body.fullscreen #page.require_login #body {
	background: #FFFFFF;
}
body.fullscreen #header, body.fullscreen #navigation, body.fullscreen #sidebar, body.fullscreen #footer {
	display: none;
}
body.fullscreen #main {
	float: none;
	padding: 10px;
	width: auto;
}
a.fullscreen_button {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-image: url(/images/templates/icon_fullscreen_expand.png);
	background-size: 20px 20px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	opacity: .75;
}
body.fullscreen a.fullscreen_button {
	background-image: url(/images/templates/icon_fullscreen_contract.png);
}
#save_buttons_2 {
	display: none;
}
body.fullscreen #save_buttons_2 {
	display: block;
}

#modal_background {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3000px; /* we'll give this a better setting when we display the div */
	/* background-image: url(/images/templates/bg_modal.gif); */
	background: rgba(0, 0, 0, .6); /* CSS3; IE alternative is in the IE tweaks file */
	text-align: center;
}

#modal_box_centerer {
	/* thanks: http://www.pmob.co.uk/pob/centred-float.htm */
	float: right;
	position: relative;
	left: -50%;
}

#modal_box {
	position: relative;
	display: block;
	float: left;
	left: 50%;
	margin: 100px auto 0 auto;
	padding: 10px;
	text-align: left;
	border: 2px solid #ACACAC;
	background: #FFFFFF;
}

#modal_close {
	text-align: right;
	padding: 5px; /* using padding instead of margin, plus a background color, avoids a clear gap under the button */
	background: #FFFFFF;
}

/* toast - position it at the bottom and in the middle of the screen */
/* thanks https://www.w3schools.com/howto/howto_js_snackbar.asp */
#toast_wrapper {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px; /* half the width */
	position: fixed;
	left: 50%; /* centered */
	bottom: 30px;
	z-index: 1;
	padding: 16px;
	border-radius: 10px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #FFFFFF;
	background-color: #333333;
}

#toast_wrapper.toast_show {
	visibility: visible;
	/* Add animation: Take 0.5 seconds to fade in and out the toast. 
	However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

#closed_for_maintenance_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	z-index: 100;
}

#closed_for_maintenance {
	margin: 300px auto 0 auto;
	padding: 20px;
	width: 300px;
	height: auto;
	background: #1B75BB;
	font-family: Arial, sans-serif;
	font-size: 16px;
	color: #EEEEEE;
}