/**
 * Administration panel
 *
 * @package Cotonti
 * @copyright (c) Cotonti Team
 * @license https://github.com/Cotonti/Cotonti/blob/master/License.txt
 */

@import url('helpers.css');
@import url('fb-buttons.css');

/* 1. Elements
-------------------------------------------------- */

body						{ font-family: 'Helvetica', sans-serif; font-size: .9375rem; position: relative; }
	body:before		{ content: ''; height: 134px; background: #a4b6c8; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: block; position: absolute; top: 24px; right: 0; left: 0; }
	body:after		{ content: ''; height: 148px; background: #4f789f; display: block; position: absolute; top: 18px; right: 0; left: 0; z-index: -1; }

a								{ color:#172973; text-decoration: none; }
	a:hover				{ text-decoration: underline; }

ul    										{ padding-left: 0; margin: 0; list-style: none; }
	ul.std									{ padding-left: 1.5rem; list-style: disc; }
	ul.std > li 						{ margin-bottom: .25rem; }
	ul.std > li:last-child	{ margin-bottom: 0; }

	ul.cfg 								{ overflow: hidden; }
	ul.cfg > li 					{ width: 25%; float: left; }
	ul.cfg > li > a				{ padding: .5rem; display: block; }
	ul.cfg > li > a:hover { text-decoration: none; background: #DDD; }

p		{ line-height: 1.5; margin: 0 0 1rem; }


/* 2. Structure
-------------------------------------------------- */

.body { width: 1200px; margin: 0 auto; position: relative; }
.body.message { text-align: center; padding: 2rem 0; width: 30%; }
ul#yesno { padding: .5rem 0 0; }
ul#yesno > li {
	margin: 0 5px;
	width: 6rem;
	display: inline-block;
}
ul#yesno > li > a {
	color: #fff;
	font-weight: 700;
	padding: .25rem 0;
	border-radius: 3px;
	display: block;
	opacity: .85;
	transition: opacity 0.1s ease-in-out;
	text-decoration: none;
	text-align: center;
}
ul#yesno > li > a:hover,
ul#yesno > li > a:active {
	opacity: 1;
}
a#confirmYes { background: rgb(25,135,84); border: 1px solid rgb(5,27,17); }
a#confirmNo { background: rgb(220, 53, 69); border: 1px solid rgb(44, 11, 14); }

div#user												{ margin-bottom: 1rem; padding: 0 1px 1px 1px; background: rgb(153,153,153); background: linear-gradient(0deg, rgba(153,153,153,1) 0%, rgba(255,255,255,0) 100%); border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }
	div#user > ul									{ background: #fff; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; overflow: hidden; }
	div#user > ul > li						{ font-size: .875rem; line-height: 2rem; padding: 0 1rem; float: left; }
	div#user > ul > li:last-child	{ text-align: right; float: none; overflow: hidden; }

#nav														{ margin-bottom: 1rem; }
	#nav > li											{ width: 16.6666%; padding: 0 1rem; float: left; }
	#nav > li > a									{ color: #3b3b3b; text-align: center; padding: .25rem; background: #fff; border: 1px solid; border-radius: 6px; box-shadow: 0 0 8px #888; display: block; opacity: .5; }
	#nav > li > a:hover						{ text-decoration: none; opacity: .85; }
	#nav > li > a.sel							{ opacity: 1; }
	#nav > li > a > figure				{ margin: 0; padding: .625rem 0; }
	#nav > li > a > figure > img	{ height: auto; max-width: 100%; }
	#nav > li > a > span					{ font-size: .75rem; padding: .125rem 0; background: #ddd; border-radius: 4px; display: block; }

#breadcrumbs					{ margin: 0 0 .5rem; padding: 1px 1px 0;  background: rgb(153,153,153); background: linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(255,255,255,0) 100%); border-top-right-radius: 6px; border-top-left-radius: 6px; }
	#breadcrumbs > div	{ line-height: 2rem; padding: 0 1rem; background: #fff; border-top-right-radius: 6px; border-top-left-radius: 6px; }
	#breadcrumbs a			{ font-weight:bold; }

#main { padding: 0 1rem; }

#footer	{ padding: 2rem 0; background: #4f789f; }
#footer p { text-align: center; margin: 0; }
#footer p > a { color: #fff; }

main {  }
main.aside { margin-right: 1rem; width: calc((100% - 1rem) * .65); float: left; min-height: 1px }
aside { width: calc((100% - 1rem) * .35); float: left; }

.block { line-height: 1.25; margin: 0 0 1rem; background: #f6f6f6; border-radius: 3px; overflow: hidden; }
.block > h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: .5rem 1rem;
	background: #ddd;
	border-bottom: 1px solid #fff;
}
.block  h3 { padding: .3rem 1rem; font-size: 1.22rem; margin-bottom: 13px}
.block > div.wrapper { padding: .5rem 1rem 1rem; }

/* 3. Headings
-------------------------------------------------- */

h1, h2, h3, h4, h5, h6	{ font-weight: 400; margin: 0; padding: 0; }
h1		{ color: #000; font-size: 1.5rem; margin: 1rem 1rem 1.5rem 1rem; padding-bottom: 2px; border-bottom: 1px solid; }
h2		{ font-size: 1.25rem; margin: 0 0 .5rem; }

/* 4. Misc
-------------------------------------------------- */

/*.odd	{ background-color:#fff!important; }
.even	{ background-color:#f1f1f1!important; }
*/

div.alert { line-height: 1.3; margin: 0 0 1rem; padding: .75rem; border: 1px solid; border-radius: 3px; }
div.error { color: #d8000c; background: #ffebe8; }
div.warning { color: #9f6000; background: #fff9d7; }
div.done,
div.help { color: rgb(8,121,144); background: rgb(207,244,252); }
div.alert h4 { font-weight: 700; margin: 0 0 .5rem; }
div.alert p	{ margin: 0; }

.jqmWindow > .alert {
	margin: 0;
}

.highlight_green	{ color:#205000; background-color:#befea8; }
.highlight_red		{ color:#d8000c; background-color:#feebe8; }

.extension.missing			{ color:#ac5866; }
.extension.notinstalled	{ color:#ac5866; }
.extension.partrunning	{ color:#a78731; }
.extension.paused				{ color:#5882ac; }
.extension.present			{ color:#739e48; }
.extension.running			{ color:#739e48; }

/* 6. Tables
-------------------------------------------------- */
table { width: 100%; }
table td { vertical-align: top; }

table.cells {  }
table.cells td { padding: .75rem .75rem; border: 1px solid #ccc; }
table.cells tr:hover { background: #edeff4; }
table.cells th { text-align: center; padding: .25rem; background: #eee; border: 1px solid #ccc; vertical-align: middle; }

td.start figure		{ margin: 0 .75rem 0 0; float: left; }
td.start div		{ overflow: hidden; }
td.start div a		{ font-weight: 700; display: block; }
td.start div p		{ margin: 0; }

td.action			{ text-align: center; vertical-align: middle; }
td.action a			{ margin: 0 2px 0 0; }
td.centerall 		{ text-align: center; vertical-align: middle; }

td.group_begin		{ color: #4f789f; border: none!important; }
td.group_end		{ font-size: 0; padding: 0!important; border: none!important; }

/**
 * For backward compatibility. Will be removed in the future
 * Use th instead
 */
table.cells .coltop		{ text-align:center; line-height:1.4em; vertical-align:middle; font-size:.9em; background-color:#EDEFF4!important; color:#000;}
table.cells .coltop img	{ vertical-align:middle; }

/* 7. Forms
-------------------------------------------------- */
form {  }
input, select, textarea/*, button*/	{ font-size: .8125rem; }
input, select/*, button*/ { padding: .125rem; }

textarea { resize: both; }

#saveconfig input[type=text],
#saveconfig textarea { width:98%; }

input[type=text], textarea	{ width: 100%; max-width: 100%; }
textarea { min-height: 40px; }

.filter input[type=text]	{ width: 200px; }

/* 8. Polls
-------------------------------------------------- */

.bar_front 	{ background: #ffae00; height: .5rem; }
.bar_back 	{ background: #fff; border: 1px solid #333; }
.polloptiondiv {
	display: flex;
	margin-bottom: 10px;
}
.polloptiondiv input[type="text"] {
	margin-right: 10px;
}

/* 9. User Images
-------------------------------------------------- */

input[name=userimg_width],
input[name=userimg_height] { width: 100px; }

/* 10. Pagination
-------------------------------------------------- */

p.pagination-info	{ text-align: center; margin: 1rem 0 0; }

.paging				{ margin:10px 0 20px 0; text-align:center; font-size:.9em; }
.paging img		{ vertical-align:-3px; }
.paging span	{ border:1px dashed #7f7772; padding:2px 8px; margin:1px; }

.pagenav_prev, .pagenav_next, .pagenav_first, .pagenav_last, .pagenav_pages, .pagenav_current { padding:2px 6px; margin:1px; border:1px dashed #7f7772; }
.pagenav_prev a, .pagenav_next a, .pagenav_first a, .pagenav_last a, .pagenav_pages a	{ color:#555; }
.pagenav_current		{ font-weight:bold; color:#fff; background:none!important; border:none!important; }
.pagenav_current a	{ color:#555; }
.pagenav_small			{ text-align:right; font-size:.9em; }

.spaced				{ margin:0 8px; }

/* 11. Modal box
-------------------------------------------------- */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */

.jqmWindow {
	display: none;

	position: fixed;
	top: 50%;
	left: 50%;

	overflow: auto;

	background-color: #EEE;
	color: #333;
	border: 3px solid white;
	padding: 7px;
	text-align: center;
}

.jqmWindow h4 {
	border-bottom: 1px dotted #b0c4de;
	font-size: 14px;
	margin: 0 0 7px 0;
	padding: 0 0 5px 0;
	text-align: left;
	color: #3E606F;
}

.jqmWindow p {
	margin: 15px 0 0 0;
}

.jqmWindow p:first-of-type {
	margin-top: 0;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
	position: absolute;
	top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
