/* GLOBAL SETTINGS */

	html, body { font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif; color: #424242; } 
	/* Padding/margin resets and width/height 100% are in main_top.css */
	h1,h2,h3,h4,h5,h6 { font-family: "Oswald",Arial,Helvetica,sans-serif; font-weight: 300; margin: 0px; padding: 0px; font-feature-settings: "kern"; text-rendering: optimizelegibility; }
	b,strong { font-weight: bold; }
	.trumbowyg-editor { padding-top: 10px !important; }
	.trumbowyg-editor p { margin: 0px; padding: 0px 0px 1em 0px; }
	
/* MASTHEAD */
	
	#masthead_top {
		width: 100%;
		height: 69px;
		position: fixed;
		left: 0px;
		top: 0px;
		background-color: #424242;
		padding: 20px 20px 20px 20px;
		z-index: 9999;
		}
	.masthead_logo {
		width: 134px;
		height: 49px;
		/*background: transparent url("images/beansprout_sprites.png") no-repeat -185px 0px;*/
		background: transparent url("images/masthead_logo.svg") no-repeat 0px 0px;
		background-size: 134px 49px;
		position: absolute;
		top: 10px;
		left: 11px;
		}
	#masthead_iconbar {
		width: 100%;
		/*height: 39px;*/
		height: 44px;
		position: fixed;
		left: 0px;
		top: 69px;
		background-color: #afbd21;
		padding: 0px 10px;
		z-index: 9998;
		}
	#masthead_iconbar a { text-decoration: none !important; color: inherit !important; }
	#masthead_bean {
		width: 63px;
		height: 24px;
		position: absolute;
		right: 20px;
		top: 33px;
		opacity: 0.2;
    	filter: alpha(opacity=20); /* For IE8 and earlier */
		}
	#masthead_bean:hover {
		opacity: 1.0;
    	filter: alpha(opacity=100); /* For IE8 and earlier */
		}
	
	.top_gap { /* hold open space behind masthead */
		width: 100%;
		height: 108px;
		height: 112px;
		}
		
/* STICKY FOOTER */

	#sticky_footer {
		width: 100%;
		height: 44px;
		position: fixed;
		left: 0px;
		bottom: 0px;
		background-color: #424242;
		padding: 0px 20px 0px 20px;
		color: #FFF;
		}
	#sticky_footer a { text-decoration: none !important; color: inherit !important; }
	.footer_top {
		float: right;
		}

/* LOGIN PAGE */

	#page_login .masthead_bean { display: none; }
	#page_login #masthead_top {
		height: 96px;
		}
	#page_login #masthead_iconbar {
		height: 10px;
		top: 96px
		}
	#page_login .masthead_logo {
		width: 185px;
		height: 68px;
		background-size: 185px 68px;
		top: 18px;
		left: 10px;
		/*background-position: 0px 0px;*/
		}
	#page_login .top_gap {
		height: 106px;
		}
	#login_content {
		padding: 20px;
		}
	
	/*
	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
		#page_login .masthead_logo {
			background: transparent url("images/masthead_logo.svg") no-repeat 0px 0px;
			background-size: 185px 68px;
			}
	}
	*/

/* LOGIN FORM */
	
	.loginform {
		padding: 0px 20px 20px 20px;
		}
	.loginform .form_label {
		font: normal normal 300 18px/18px "Oswald",Arial,Helvetica,sans-serif; 
		margin-bottom: 10px;
		}
	.loginform .password_label {
		margin-top: 10px;
		}
	.loginform input {
		width: 100%;
		border: 1px solid #d9d9d9;
		padding: 10px;
		font-size: 24px;
		line-height: 24px;
		}
	.loginform input:focus {
		background-color: #f5f5f5;
		}
	.loginform .input_submit {
		margin-top: 20px;
		font: normal normal 300 27px/27px "Oswald",Arial,Helvetica,sans-serif;
		text-transform: uppercase;
		background-color: #afbd21;
		color: #FFF;
		padding: 12px 20px 15px 20px;
		}

/* CONTAINERS */
		
	#admin_forms { /* Main body area where forms appear */
		/* ADDING TOP_GAP MADE THIS UNNECESSARY
		position: absolute;
		width: 100%;
		top: 108px;
		*/
		padding: 20px;
		max-width: 100%;
		}

/* MENU */
	
	/* GREEN ICON BAR */
	.menubar_item {
		float: left;
		width: 100px;
		padding: 9px 10px;
		font: normal normal 300 14px/14px "Oswald", Arial, Helvetica, sans-serif;
		color: #FFF;
		text-transform: uppercase;
		cursor: pointer;
		}
	.menubar_signout {
		float: right;
		}
	.menu_icon {
		float: left;
		width: 26px;
		height: 26px;
		}
	.icon_label {
		float: left;
		padding: 6px 0px 0px 6px;
		}
	
	/* ACTUAL SIDEBAR MENU */
	#menu {
		display: none;
		/* ADDING TOP_GAP MADE THIS UNNECESSARY
		position: absolute;
		top: 108px;
		left: 0px;
		width: 100%;
		*/
		padding: 0px;
		font: normal normal 300 14px/14px "Oswald", Arial, Helvetica, sans-serif;
		color: #FFF;
		z-index: 999;
		}
	#menu a { color: inherit !important; text-decoration: none !important; }
	.section_title, .subitem, .section_subtitle {
		font-size: 22px;
		line-height: 22px;
		background-color: #686868;
		padding: 10px 20px 12px 19px;
		border-top: 1px solid #FFF;
		}
	.section_title .toggle {
		float: right;
		font-size: 14px;
		text-transform: uppercase;
		color: rgba(255,255,255,0.5);
		padding-top: 4px;
		cursor: pointer;
		}
	.subitem, .section_subtitle {
		background-color: #f0f0f0;
		color: #424242;
		font-size: 16px;
		line-height: 16px;
		}
	.section_subtitle {
		background-color: #a4a4a4;
		color: #FFF;
		font-size: 18px;
		line-height: 18px;
		}
	.subitem .mb { float: right; margin-left: 10px; } /* Menu Button */
	.collapsotron { padding: 0px; border-top: 0px none transparent; } /* Leave this last so it overrides Section Titles */
	.collapsotron a, .collapsotron a:visited {
		display: block;
		font-size: 14px;
		line-height: 14px;
		padding: 9px 10px;
		width: 100%;
		text-align: center;
		background-color: #424242;
		}
		
/* WELCOME SCREEN */
		
	.welcome_header {
		line-height: 1.05em;
		}
	.welcome_subheader {
		font-size: 1.4em;
		line-height: 1.1em;
		color: #999;
		margin-top: 5px;
		}
	.welcome_warning { /* Hiding for now. FIXME later */
		background-color: #e13535;
		padding: 20px;
		color: #FFF;
		margin-top: 15px;
		}
	.welcome_warning h3 {
		font-size: 28px;
		line-height: 32px;
		}
	.welcome_warning a {
		color: inherit !important;
		font-weight: bold;
		text-decoration: underline;
		}
	
	.welcome {
		font-size: 36px;
		line-height: 40px;
		}
	
	.welcome_instruction, .welcome_error {
		font-size: 27px;
		line-height: 30px;
		margin-top: 10px;
		color: #afbd21;
		}
	.welcome_error {
		color: #e33d3d;
		}
		
/* FORMS - THIS IS GOING TO SUCK */

	/* BROWSE FORMS */
	
	#browse_table { /* This holds everything on browse pages */
		width: 100%;
		border-bottom: 3px solid #EEE;
		}
		
	/* Make table cells act like DIVs on mobile - this is voodoo */
	#browse_table tr, #form_table tr { display: table; width: 100%; }
	#browse_table td, #form_table td { display: table-row; }
	/* Don't show column headers on mobile */
	.line_head_row, .line_head { display: none !important; visibility: hidden !important; }
		
	#browse_table a { color: inherit !important; text-decoration: none !important; }
	#browse_table .title, #form_table .title {
		font: normal normal 300 36px/36px "Oswald", Arial, Helvetica, sans-serif;
		}
	#browse_table .subtitle { /* This contains the + ADD NEW button */ 
		padding-top: 10px;
		font: normal normal 600 20px/22px "Oswald", Arial, Helvetica, sans-serif;
		color: #afbd21;
		}
	#browse_table .subtitle_row { margin-top: 10px; } /* MOBILE ONLY - for TR as DIV */
	#browse_table .subtitle a {  /* MOBILE ONLY - for TR as DIV */
		display: block; 
		width: 100%; 
		color: #FFF !important; 
		text-align: center; 
		background-color: #afbd21; 
		padding: 10px; 
		margin-bottom: 10px;
		cursor: pointer;
		} 
	#browse_table .line_head {
		font-weight: 700;
		padding: 6px 10px 3px 10px;
		white-space: nowrap;
		text-align: left;
		font-size: .75em;
		}
	#browse_table line_head a {
		text-align: left;
		}
	#browse_table tr:nth-child(1n+4) { /* MOBILE ONLY - this has to be put on TR when making them act like divs */
		border-top: 1px solid #EEE; 
		padding: 10px 0px 10px 0px; 
		margin-top: 10px; 
		}
	#browse_table tr:nth-child(1n+4) .report_field { 
		border-top: 1px solid #EEE;
		padding: 2px 10px 6px 10px; 
		}
	
	#browse_table .browse_thumb {
		max-width: 80px;
		max-width: 100%;
		border: solid 0px #00FF00;
		margin: 0px auto;
		}

	#browse_table .center_thumb { width: 100%; text-align: center; position: relative; }
	#browse_table .thumbnail { display: block; width: 100%; }
	#browse_table .thumbnail .thumb_zoom { display: none; }

	#browse_table .report_field { font-size: 24px; line-height: 24px; } /* Make bigger for mobile */
	#browse_table .report_field a { display: block; padding: 8px 0px; }
	
	/* TOGGLES have been changed to SVG for magic_link but NOT for magic_cycle yet (line 881 browser.php) */
	
	#browse_table .report_field .toggler { display: block; width: auto !important; text-align: center; padding: 0px 0px 10px 0px; }
		.toggle_active, .toggle_inactive { margin-left: 0px; }
	
	#browse_table .report_field .formbutton.edit, #browse_table .report_field .ajax_delete {
		font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif;
		position: relative;
		top: 2px;
		cursor: pointer;
		width: 100%;
		border: 1px solid #adadad;
		background-color: #e1e1e1;
		color: #686868;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 0px 10px;
		height: 50px;
		}
	#browse_table .report_field .ajax_delete {
		cursor: pointer;
		text-align: center;
		text-transform: capitalize;
		line-height: 1em;
		padding-top: 12px;
		}
	#browse_table .report_field .formbutton.edit:hover {
		background-color: #afbd21;
		color: #FFF;
		} 
	#browse_table .report_field .ajax_delete:hover {
		background-color: #ee3224;
		color: #FFF;
		}
	#browse_table .report_field .date_today { color: #afbd21; }
	#browse_table .report_field .date_yesterday { color: #ff9600; }
	#browse_table .report_field .date_tomorrow { color: #ff9600; }
	#browse_table .report_field .rml { padding-top: 4px; } /* Multi-line items ... concatenating multiple values and showing in one col */
	#browse_table .report_field .rml.detail { font-size: 14px; line-height: 18px; }
	
	.browse_icon { height: 30px; margin: 4px auto 0px auto !important; }
	
	/* INLINE EDIT FIELDS */
	
	.inline_edit { 
		display: block;
		cursor: text; 
		text-decoration: none; 
		__white-space: nowrap; 
		padding: 10px 0px;
		}
	.inline_edit input { width: 100%; position: relative; top: 2px; }
	.inline_edit input:focus { 
		font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif;
		font-size: 18px;
		line-height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		}
	
	/* FILTERS */
	
	#hide_filters, .line_filter_wrapper { display: none; } /* #browse_table .line_filter_row */
	.line_filter_row { /* TR containing all of the filters */
		__background-color: #0F0;
		}
	.line_filter, .line_filter_wrapper {  }
	.filter_results_by, .filter_records_matched {
		display: block;
		text-align: center;
		padding: 10px 0px;
		clear: both;
		}
	.filter_results_by { padding-top: 0px; }
	.filter_label { 
		display: block; 
		float: left; 
		width: 25%;
		text-align: right;
		padding: 5px 15px 0px 0px; 
		} /* Label for every filter */
	#limiter input, #limiter select { 
		float: left; 
		width: 75%;
		padding: 10px;
		box-sizing: border-box; 
		} /* Input for every filter */
	.filter_line_wrapper { /* wrapper around each set of label and filter to allow padding, etc as needed */
		display: block;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		margin-bottom: 10px;
		overflow: auto;
		}
	.form_filterbuttons { /* Actual filter/limiter form (not just the button) ... ID is #limiter */
		
		}
	.button_filter, .button_removefilter, .button_export, .submit { /* Submit button for filter/limiter form. Is on an INPUT. */
		font: normal normal 300 16px/16px "Source Sans Pro",Arial,Helvetica,sans-serif;
		cursor: pointer;
		width: 100% !important;
		border: 1px solid #adadad;
		background-color: #e1e1e1;
		color: #686868;
		padding: 10px 10px 11px 10px;
		margin-top: 20px;
		display: block;
		}
	.button_filter { clear: both; }
	.form_removefilterbutton { /* Form for Remove Filter button */
		
		}
	.button_removefilter, .button_export { /* Submit button for Remove Filter form. Is on an INPUT. */
		width: 48% !important;
		margin: 10px 4% 0px 0px;
		float: left;
		}
	.form_exportbutton { /* Form for Export to Spreadsheet button. Also has class .line_filter */
		
		}
	.button_export { /* Submit button for Export to Spreadsheet form. Is on an INPUT. */
		margin-right: 0px;
		}
	.button_filter:hover, .button_removefilter:hover, .button_export:hover { background-color: #CCC; }
	
/* EDIT PAGES */

	#admin_forms * { max-width: 100%; box-sizing: border-box; }
	#form_table { width: 100%; } /* This holds everything on edit pages */
	#form_table * { __outline: 1px solid #0F0;  } /* Kill this later ... just to see how things are behaving */
	.quick_links_wrapper {
		__background-color: #0F0;
		padding: 10px 0px;
		}
	.quick_links_header {
		text-align: left;
		color: #afbd21;
		}
	.quick_links_wrapper a {
		/*display: list-item;
		margin-left: 22px;
		padding-left: 5px;*/
		display: block;
		width: 100%;
		text-align: center;
		background-color: #afbd21;
		padding: 8px;
		margin-top: 10px;
		text-decoration: none;
		color: #FFF;
		}
	.divider { padding: 0px .75em; color: rgba(0,0,0,0.25); display: none; }
	.section_divider { /* This is the TD */
		
		}
	.section_divider_inner { /* This is an extra DIV container inside SECTION_DIVIDER */
		font-family: "Oswald",Arial,Helvetica,sans-serif; 
		font-weight: 600;
		font-size: 24px;
		line-height: 26px;
		padding-top: 20px;
		}
	.step_number { color: #afbd21; }
	.step_of { display: none; }
	.step_divider { padding: 0px .25em; color: rgba(0,0,0,0.20); font-weight: 300; }
	.step_extras { display: block; font-weight: 300; margin: 3px 0px 10px 0px; }
	
	.section_instructions { /* Inside the SECTION_DESCRIPTION SIMPLE TD */
		font-size: 16px;
		line-height: 18px;
		padding: 10px 0px;
		font-style: italic;
		color: #b3b3b3;
		}
	.section_instructions strong {
		font-weight: 700;
		}
	.section_description { padding-bottom: 5px; }
	.section_subdivider_inner { /* This is an extra DIV container inside SECTION_DIVIDER */
		font-family: "Oswald",Arial,Helvetica,sans-serif; 
		font-weight: 600;
		font-size: 18px;
		line-height: 20px;
		padding-top: 20px;
		}
	.section_subdivider_first .section_subdivider_inner {
		padding-top: 0px;
		}
	#form_table .line_title {
		
		}
	#form_table .required {
		font-weight: 700;
		}
	#form_table .line_input input, #form_table .line_input textarea, #form_table .line_input select { 
		width: 100%; 
		border: 1px solid #b3b3b3;
		padding: 5px 10px;
		font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif; 
		color: #424242;
		margin-bottom: 10px;
		}
	#active, #loaner { width: auto !important; }
	#form_table .line_input textarea {
		height: 300px;
		}
	#form_table .line_input textarea.short {
		height: 100px;
		}
	#form_table .line_input textarea#short_description { height: 200px; }
	#form_table .line_input select { width: auto; }
	.submit:hover {
		background-color: #afbd21;
		color: #FFF !important;
		}
	.label { padding-bottom: 5px; }
	.label_icon { float: left; cursor: pointer; font-size: .85em; margin: 8px 5px 0px 0px; }
	.label_help { padding: 0px 20px 20px 20px; font-size: 14px; line-height: 20px; font-style: italic; }
	.label_help strong { font-weight: 700 !important; }

	.arrow_select_photo { display: none; } /* FIXME */
	.remove_image { color: #ee3224; padding: 5px 0px; }
	.remove_checkbox { display: inline !important; width: 1em !important; height: 1em !important; margin: 0px 0px 0px 10px; position: relative; top: 4px; }
	
	.checkbox_group_col { vertical-align: top; padding: 11px 10px 10px 0px; }
	.beansprout_checkbox { 
		width: 1em !important; 
		height: 1em !important; 
		margin-right: 4px !important; 
		float: left !important;
		clear: left !important;
		}
	.checkbox_label { 
		display: block; 
		margin-top: -7px; 
		float: left;
		}
	.line_input_icon { margin: 0px 10px 0px 0px; }
	
	/* SPECIAL SECTIONS */
	
	.section_icon { float: right; color: rgba(175,189,33,0.50); cursor: pointer; font-size: .8em; margin-top: 5px; }
	.section_icon:hover { color: rgba(175,189,33,1.0); }
	.section_hidden_description { /* screw it. go back and make these work later */
		background: rgba(175,189,33,0.25) url("images/bkg_hidden_help.svg") no-repeat 20px 0px;
		padding: 25px 20px 20px 20px;
		margin-top: 20px;
		}
	.section_help_header {
		font-weight: 600;
		font-size: 18px;
		line-height: 26px;
		margin-top: .5em;
		}
	.section_hidden_description p {
		margin-top: .5em;
		margin-bottom: 0px;
		}
	#section_maincontent { /* This is the slide-out description for the Main Content (first) section */
		
		}
	.hidden_element { display: none; }
	
	/* VARIANTS - 
		image_colhead/variant_cell_pic
		caption_colhead/variant_cell_caption
		alt_colhead/variant_cell_alt
		primary_colhead/variant_cell_primary
		sortorder_colhead/variant_cell_sortorder
		delete_colhead/variant_cell_delete 
	*/
	
	#photoVariantsTable { 
		width: 100%; 
		font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif;
		}
	#photoVariantsTable tr { display: table-row; width: auto; }
	#photoVariantsTable td { display: table-cell; }
	#photoVariantsTable td, #photoVariantsTable th { padding: 2px 5px; }
	#photoVariantsTable th { padding-top: 6px; font-weight: 400; }
	/* Hide two columns for mobile */
	th.alt_colhead, td.variant_cell_alt, th.primary_colhead, td.variant_cell_primary { display: none !important; }
	/* Reduce width of sortorder column */
	th.sortorder_colhead, td.variant_cell_sortorder { width: 4em; }
	th.primary_colhead, td.variant_cell_primary, th.delete_colhead, td.variant_cell_delete { width: 4.5em; }
	.variant_add { cursor: pointer; }
	.variant_addvariantpic { border: 0px none transparent; cursor: pointer; } /* ADD Photo Icon */
	.variant_cell_pic { 
		vertical-align: top;
		position: relative;
		}
	.variant_mini { height: 42px; }
	#form_table .line_input input, #form_table .line_input textarea, #form_table .line_input select { 
		width: 100%; 
		border: 1px solid #b3b3b3;
		padding: 5px 10px;
		font: normal normal 300 18px/30px "Source Sans Pro",Arial,Helvetica,sans-serif; 
		color: #424242;
		margin-bottom: 10px;
		}
	.cycler img {
		height: 19px !important;
		}
	
	/* SUCCESS PAGE */
	
	.success_options {
		margin-top: 20px;
		}
	.success_options a {
		text-decoration: none;
		color: #afbd21;
		font-weight: 700;
		}

	.jsclass body .randomcontent { /*Do NOT remove! CSS to hide random contents in JS enabled browsers*/
		display: none;
		}
	.clear { clear: both; }

	
	/* HIDE ON MOBILE @ 719px OR LESS */
	@media only screen and (max-width: 719px) { .m_hide { display: none !important; visibility: hidden !important; } }