/* ###########################################################################################

						CSS / CWSM.CSS
				
This is the central CSS file for all the CSS to style the CWS Markup code.
Only code that is specific to those styles should go here. If it overlaps with something else,
please leave it in main.css or flat.css.

##############################################################################################*/ 
.cwsm_btn{
	height: 20px;
	max-height: 20px !important;
	min-width: 20px;
	padding: 5px; padding-top: 8px;
	background-color: #eee;
	text-align: center;
	color: #666;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
}
.cwsm_btn.clrbtn{
	font-size: 0.5px !important;	
	padding: 0px !important;
}
.cwsm_btn:hover{
	background-color: #ddd;
	color: #333;
}
.cwsm_hide{
	display: none !important;
}
.cwsm_btn_bar{
	display: inline-block;
	font-size: 12px !important;
	width: 99%;
	/* top right bottom left */
	margin: 2px 0px -3px 0px !important;
}
.cwsm_panel_switch{
	display: block;
	font-size: 10px !important;
	margin: 0px !important;
}
.cwsm_panel_switch .cwsm_btn{
	background-color: #999;
	color: white;
	max-height: 15px !important;
	padding: 3px !important;
	padding-top: 3px !important;
}
.cwsm_panel_switch .cwsm_btn:hover{
	background-color: #ccc;
}

/* **************************************************** */

code, .code, table.code tr td{
	font-family: Courier New MS, monospace !important;
}
span.code, div.code{ display: inline-block; }
table.code tr td{
	font-size: 0.8em;
}

.code{
	display: inline;
	background-color: #eee;
	font-family: monospace;	
}

table.table_left th{
	text-align: left !important;
	font-weight: normal;
}
td.form{
	text-align: center;
	font-size: 1.2em;
}
td.none{
	background-color: white;
}
td.normal{
	background-color: #eee;
}
td.light{
	background-color: #efefef;
	color: #999;
}

/* Spoilers */
.spoil{
	background-color: #333;
	color: #333 !important;
	width: 95% !important;
}
.spoil font{
	color: inherit !important;
}
.spoil:hover font{
	color: auto !important;
}
.spoil:hover{
	background-color: inherit;
}

/*  RANT   */
.rant{
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 1.2em;
	color: #633;
	padding-left: 10px !important;
	padding-right: 10px !important;
	max-width: 85%;
	margin-top: 5px;
}

/*  Hide tag */
.hide_tag_top {
	background-color: #eee;
	border-left: 2px solid #eee;
	border-bottom: 1px solid #ccc;

	color: #999;
	padding: 5px;
	cursor: pointer;
	max-width: 90% !important; 
}
.hide_tag_btm {
	display: block;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 5px;
	max-width: calc(90% - 10px);
}

/* Article menus, quotes, etc */
.faux .quote, .quote, .article_menu{
	display: block;
	padding: 5px;
	width: 90%;
	background-color: #efefef;
	border-left: 3px solid #dcdcdc;
	white-space: pre-wrap;
	max-height: 400px;
	overflow-y: auto;
	margin: 10px;
	margin-left: 20px !important;
	margin-bottom: 0px !important;
	background-image: url('../ico/quote.png');
	background-repeat: no-repeat; background-position: right 20px top 2px;
}

.quote .gloss_block_container {
	white-space:normal;
}

.faux ul, ul.cwsmu, .faux ol, ol.cwsmu{
	margin-bottom: 0px !important;
	margin-top: 0px !important;
	padding-bottom: 0px !important;
	display: inline-block;
}

/* <block> */
.block{
	white-space: pre-wrap;
}

/* <gbl> */
.gloss_block{
	margin-right: 5px;
	text-align: left !important;
	display: inline-block;
}

/* Admin note CWSM stuff */
div.admin_note{
	width: 90%;
}
div.admin_note span{
	color: #090;
	display: inline-block;
	border: 1px dashed #090;
	padding: 10px;
}

/*  TLDR  */

.tldr{
	padding: 10px;
	border: 1px solid #f90;
	width: 95% !important;
}

/* Table colours */
/* cell colours */
td.green { background-color: #CFC; color: #060; }
td.blue { background-color: #CCF; color: #006; }
td.red { background-color: #FCC; color: #600; }
td.yellow { background-color: #FFC; color: #660; }
td.cyan { background-color: #CFF; color: #066; }
td.orange { background-color: #FC9; color: #854; }
td.purple { background-color: #FCF; color: #606; }
td.grey, td.gray, td.blank { color: #AAA; background-color: #AAA; }

th.green { background-color: #6C6; color: #030; }
th.blue { background-color: #66C; color: #003; }
th.red { background-color: #C66; color: #300; }
th.yellow { background-color: #CC6; color: #330; }
th.cyan { background-color: #6CC; color: #033; }
th.orange { background-color: #C63; color: #630; }
th.purple { background-color: #C6C; color: #303; }
th.grey, th.gray, th.blank { color: #AAA; background-color: #AAA; }


/* --------- TABLES ----------- */
table{
	border: 1px solid #AAA;
	border-bottom: none;
	border-right: none;

	margin: 5px;
	background-color: #F9F9F9;
	padding: 0px !important;

	border-spacing: 0px;
	border-collapse: separate;
}
td{	
	padding: 5px;
	background-color: #F9F9F9;
	border-bottom: 1px solid #AAA;
	border-right: 1px solid #AAA;
	min-width: 15px; 
}
th{
	display: table-cell;
	padding: 5px;
	font-weight: bold;

	background-color: #F0F0F0;
	border-bottom: 1px solid #AAA;
	border-right: 1px solid #AAA;
}