/**
 * Author: Sean Colombo
  * Date: 20060719
  *
  * This contains the style for the guest and user portions of Motive Suggest.
  * Admin style can be found in motive_suggest_admin.css
 **/

/**
 * Shared values (colors, sizes, the page's widths), used throughout this file
 * and motive_suggest_admin.css instead of repeating the numbers, so a restyle
 * changes them here. The look itself hasn't been redesigned yet.
 **/
:root{
	--msug-font: tahoma, verdana, sans-serif;
	--msug-font-size: 12px;
	--msug-text: #000;
	--msug-link: #00f;
	--msug-border: #000;
	--msug-row-alt: #acf; /* every other row of a table */
	--msug-page-width: 1024px; /* the widest the page gets; narrower screens get all of theirs */
	--msug-sidebar-width: 220px;
	--msug-gap: 9px;
	--msug-msg-width: 400px; /* message boxes */
}

body{
	margin-top: 0px;
	padding-top: 0px;
	font-family: var(--msug-font);
	font-size: var(--msug-font-size);
	color: var(--msug-text);
	background-color: #fff;
}
img{margin-bottom: -2px;}
a img {border: 0px;}
a, a:visited, a:active{color:var(--msug-link);}
/* Nothing (a long link, a wide table) makes the page wider than the screen. */
img, select, textarea, input{max-width:100%;}
/* ...except inside tables, where it would make a column too narrow for its
   icons (a cell counts a max-width:100% image as taking no room). */
table img{max-width:none;}

h2{margin:0px;}
h3{margin:0px;}
ol{margin:0px;}
* html ol{margin-left:30px;}
ul{margin:0px;}
* html ul{margin-left:30px;}
form{margin:0px;}
td{vertical-align:top;}
table{border-spacing:0px;border-collapse:collapse;margin:0;}

fieldset.validationOnly{margin: 0px;padding: 0px;border: 0px;float:none;}
fieldset.validationOnly_left{margin: 0px;padding: 0px;border: 0px;float:left;} /* NOTE: Not used yet, TODO: If this isn't used and I'm done making things valid... delete it */
.nowrap{white-space: nowrap !important;}

noscript{
	width:100%;
	text-align:center;
	margin: 0;
}
noscript p{
	margin: 0 auto;
	background-color: #ff8;
}

div.footer{
	font-size: 11px;
	text-align:center;
	border-top: 1px #000 solid;
}
span.msug_opts{
	font-variant: small-caps;
}

/**
 * Below is for the three-box model which has 1 on top-left,
  * 2 on below that and 3 on the right (templates/msug_threeBoxes.tpl).
  * Up to --msug-page-width wide; narrower screens get all of their width,
  * and phones one column (see the end of this file).
  */
div.msug_box1, div.msug_box2, div.msug_box{
	border: 1px var(--msug-border) solid;
	min-height:100px;
	margin-bottom:var(--msug-gap);
	overflow-wrap:break-word;
}
/* A sidebar box a page left empty isn't shown (the template has no space
   around its placeholder, so an empty one really is :empty). */
div.msug_box1:empty, div.msug_box2:empty{
	display:none;
}
div.msug_box3{
	min-height:500px;
	border: 1px var(--msug-border) solid;
	overflow-x:auto; /* a table wider than the screen scrolls, rather than widening the page */
}
/* Sets Minimum-width across browsers...
for now it's just static
div.msug_box3_min{width:460px;}
div.msug_box3_max{width:100%;}
* html div.msug_box3_min{width: 500px;}
div.msug_box3_min, div.msug_box3_max{
	height:0px;
	background-color: transparent;
	margin:0px;
	padding:0px;
}
* html div.msug_box3_min, * html div.msug_box3_max{
	margin-bottom: -14px;
}
*/

#msug_content, #msug_footerRow{
	max-width: var(--msug-page-width);
	margin: var(--msug-gap) auto 0 auto;
	padding: 0 var(--msug-gap);
	box-sizing: border-box;
}
#msug_content{
	display: flex;
	align-items: flex-start;
	gap: var(--msug-gap);
}
#msug_left{
	flex: 0 0 var(--msug-sidebar-width);
	width: var(--msug-sidebar-width);
}
#msug_right{
	flex: 1 1 auto;
	min-width: 0; /* lets wide content scroll in its box instead of stretching the column */
}
#msug_footerRow{
	margin-top: 0;
}


input.redBorder{
	border: 2px #f33 solid;
}

/* Style for the message boxes on the site */
div.msug_msg, div.msug_err, div.msug_success{
	margin: 2px auto 5px auto;
	max-width:var(--msug-msg-width);
	font-size:120%;
	overflow-wrap:break-word;
}
* html div.msug_msg, * html div.msug_err, * html div.msug_success{
	margin: 2px -404px 5px 71px;
	display:block;
	width: 396px;
}

div.msug_msg{
	background-color:#ffc;
	border: 2px #ff5 solid;
}
div.msug_err{
	background-color:#fcc;
	border: 2px #f55 solid;
}
div.msug_success{
	background-color:#cfc;
	border: 2px #5e5 solid;
}

/* Why someone can't vote on a members-only board, and how to join (msug_communityGateMessage()). */
div.msug_communityGate{
	margin: 8px 2px;
	padding: 6px;
	background-color:#ffc;
	border: 2px #ff5 solid;
}

select.catFilter{
	width:100%;
	box-sizing:border-box;
}

/* Tablesorter style - BEGIN */
	.largeHeaders, table.sugTable th {
		background: 
			#e9e9da
			url('img/green_arrows.gif')
			no-repeat
			center left;
		color: #333;
		/*padding: 5px;
		padding-left: 25px;*/
		text-align: left;
	}
	.largeHeaders{
		cursor: pointer;	
	}
	table.sugTable th a{ /* For non-javascript implementation */
		color:#333;
		text-decoration:none;
	}


	.sortUp {
		background-color: #4f4 !important;
		/*.background:
			#e9e900 
			url('img/green_decending.gif')		
			no-repeat
			center left;*/
	}

	.sortDown {
		background-color: #44f !important;
		/*background:
			#e9e900 

			url('img/green_acending.gif')
			no-repeat
			center left;*/
	}
/* Tablesorter style - END */

/* The information/instructions on the suggestions page */
div.infoDiv{
	background-color:#eee;
	border: 1px #333 solid;
	width: 95%;
	margin: 2px auto;
}

/* THE MAIN SUGGESTIONS TABLE */
table.sugTable{
	width:100%;
	text-align:center;
}
table.sugTable th{
	background-color:#f0f0f0;
	border: 1px #000 solid;
}
table.sugTable tr.odd td{
	background-color:var(--msug-row-alt);
}
table.sugTable td{
	border: 1px #000 solid;
}
table.sugTable th.wide{
	width:100%;
}
table.sugTable td.sugName{
	text-align:left;
}
table.sugTable td.category{
	text-align:left;
}

/* TODO: FIX OR REMOVE THIS */
* html table.sugTable th.wide{
	width:10px;
}

div.msug_hiddenSugInfo{
	display:none;
}
span.msug_faded{
	color: #808080;
}

div.msug_sugInfo_smallTip{
	color:#808080;
	font-variant:small-caps;
	border-bottom:1px #808080 solid;
}

#sorting, #filtering{
	position: absolute;
	width: 100%;
	height: 100%;
	left:0px;
	top:0px;
	text-align: center;
	display: none;
	margin:0px;
	padding:0px;
}
#sorting div, #filtering div {
	border: 1px solid #000;
	padding:10px;
	margin: auto;
	text-align: center;
	/*width: 300px;*/
	width: 725px;
	max-width: calc(100% - 40px);
	box-sizing: border-box;
	top:200px;
	position: relative;
	background-color: #ffa;
	color: #333;
	font-weight: bold;
}

.msug_overRow{
	background-color: #f00 !important;
}

.msug_filterMsg{
	margin: 0 auto;
	width:100%;
	font-weight:normal;
	background-color:#fff !important;
	text-align:center !important;
}


/* Style for the suggestion-submitting graybox */
#grayBox{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left:0px;
	top:0px;
	text-align: center;
	margin:0px;
	padding:0px;
	background-image: url(./msug_images/darkGrayBox.png);
}
* html #grayBox{
	background-color: #333;
	back\ground-color: transparent;
	background-image:url(./msug_images/darkGrayBox.gif);
	/*background-image: url(./msug_images/trans.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./msug_images/darkGrayBox.png", sizingMethod="scale");*/
}
#grayBoxContent{
	border: 1px solid #000;
	padding:0px;
	margin: auto;
	text-align: center;
	width: 450px;
	max-width: calc(100% - 20px);
	box-sizing: border-box;
	top:200px;
	position: relative;
	background-color: #ffa;
	color: #333;
	font-weight: bold;
}
#grayBoxHeader{
	margin:0;
	padding:0;
	background-color:#3333ff;
	/*background-color:#fff;*/
	height: 24px;
	width:100%;
	text-align:right;
}
#msug_addSugForm{
	margin: 0;
	padding:10px;
}

/* A vote that's being saved (msug_sugTable.js). */
span.msug_saving{
	color:#666;
	font-size:80%;
	font-style:italic;
}

/* The hosted service's front page (includes/hsug_landing.php). */
div.hsug_landing{
	max-width:720px;
	margin:0 auto;
	padding:10px var(--msug-gap) 20px var(--msug-gap);
	line-height:1.5;
}
div.hsug_landingHero{
	text-align:center;
	padding:30px 20px;
	margin-bottom:20px;
	background-color:#eef4ff;
	border:1px solid #acf;
}
div.hsug_landingHero h1{
	margin:0 0 15px 0;
	font-size:2em;
	line-height:1.2;
}
div.hsug_landingHero p{
	font-size:1.15em;
	margin:0 0 20px 0;
}
a.hsug_landingCta, a.hsug_landingCta:visited{
	display:inline-block;
	padding:10px 24px;
	background-color:#24c;
	color:#fff;
	font-weight:bold;
	font-size:1.1em;
	text-decoration:none;
	border-radius:4px;
}
a.hsug_landingCta:hover{background-color:#13a;}
ol.hsug_landingSteps li{margin-bottom:8px;}
p.hsug_landingCtaRow{text-align:center; margin:25px 0;}
p.hsug_landingFinePrint{
	color:#555;
	font-size:0.9em;
	text-align:center;
}

/* Suggestion status (msug_sugStatusLabel()): a badge next to planned and in
   progress suggestions, and on the board's done & declined list. */
span.msug_status{
	display:inline-block;
	padding:0 5px;
	border-radius:3px;
	font-size:0.8em;
	font-weight:bold;
	white-space:nowrap;
	background-color:#ddd;
	color:#333;
}
span.msug_status_planned{background-color:#cdf; color:#124;}
span.msug_status_inProgress{background-color:#fe9; color:#430;}
span.msug_status_done{background-color:#cfc; color:#141;}
span.msug_status_declined{background-color:#eee; color:#555;}
div.msug_closedSugs{margin-top:15px;}
div.msug_closedSugs ul{margin-top:5px;}
div.msug_closedSugs li{margin-bottom:4px;}
/* Admin's suggestion table: done and declined rows, whose voting has closed. */
tr.msug_closedSug td{color:#777;}
/**
 * Phones and other narrow screens: one column (the sidebar boxes above the
 * main box), larger text and tap targets, and form fields at 16px so iOS
 * doesn't zoom in when one is tapped.
 **/
@media (max-width: 720px){
	:root{
		--msug-font-size: 15px;
		--msug-gap: 8px;
	}
	#msug_content{
		flex-direction: column;
		align-items: stretch;
	}
	#msug_left{
		flex: none;
		width: auto;
	}
	/* Admin pages: the tabs and their content first, the sidebar's links
	   and statistics after (templates/msug_admin.tpl). */
	#msug_content.msug_mainFirst #msug_right{
		order: -1;
	}
	textarea{
		box-sizing: border-box;
	}
	/* Form fields in a table (eg: reviewing a member's suggestion) fill
	   their cell, rather than their fixed size pushing past the screen. */
	div.msug_box3 td input[type='text'], div.msug_box3 td textarea{
		width: 100%;
		box-sizing: border-box;
		min-width: 3em;
	}
	div.msug_box1, div.msug_box2, div.msug_box{
		min-height: 0;
		padding: 4px;
	}
	div.msug_box3{
		min-height: 0;
		padding: 4px;
	}
	input, select, textarea, button{
		font-size: 16px;
	}
	input[type='submit'], input[type='button'], button{
		padding: 6px 12px;
	}
	/* The category filter list: a few rows are enough on a phone. */
	select.catFilter{
		max-height: 8em;
	}
	/* The suggestions table fits a phone without scrolling sideways, so the
	   vote buttons stay on screen: no "Added" date, and just the category's
	   icon (its name is the icon's tooltip). */
	#msug_sugTable tr > :first-child:not(.msug_filterMsg){
		display: none;
	}
	#msug_sugTable td.category{
		font-size: 0;
	}
	/* Voting: bigger targets for a finger. */
	table.sugTable td, table.sugTable th{
		padding: 6px 4px;
	}
	#msug_sugTable td:nth-last-child(-n+2) img{ /* the for/against buttons, always the last two cells */
		width: 24px;
		height: 24px;
	}
	/* "Mouse over a suggestion" has no mouse to go with it on a phone. */
	#msug_sugInfo_box{
		display: none;
	}
	#sorting div, #filtering div, #grayBoxContent{
		top: 80px;
	}
	div.hsug_landingHero h1{
		font-size: 1.6em;
	}
}