/*
 * color palette:
 *
 * green-light:#59eaa1;
 * green-dark:#46b77f;
 * green-text:#2f8f5e;
 * blue-light:#84d3e3;
 * blue-dark:#3ba1b6;
 * blue-text:#098da9;
 * pink:#a000ff;
 */

/*
 * prettier links
 *
 * defines:
 * - links (blue/violet)
 */
a:link,
a:visited
{
	color:#098da9;
	font-weight:bold;
	text-decoration:none;
}

a:hover
{
	color:#a000ff;
	font-weight:bold;
	text-decoration:none;
}

code
{
	font-family:monospace;
	font-size:inherit;
	color:#444444;
}
/*	font-weight:600; */

hr
{
	color:SkyBlue;
	border-style:solid;
	border-width:1px;
}

p.footnote
{
  font-size:0.5em;
}

img.preview_image
{
	max-width:256px;
}

img.preview_image_3_4
{
	max-width:192px;
}

img.preview_image_half
{
	max-width:192px;
}

/*
 * table for the title bar
 *
 * defines:
 * - the table
 * - table data for 2 rows:
 *   - 1st: 1 column (multi-column)
 *   - 2nd: max 5 columns, 1st empty, last with special corner
 * - links (gray)
 */
table.title_bar
{
	width:100%;
	border-spacing:4px;
	text-align:center;

	background-color:pink;
	background-color:#59eaa1;
	background-image:url("green_box.png");
	background-position:bottom;
	background-repeat:repeat-x;
	border-radius:5px;
	border-top-left-radius:11px;
	border-bottom-right-radius:11px;
}

table.title_bar > tbody > tr > td
{
}

table.title_bar > tbody > tr:nth-child(1) > td:nth-child(1)
{
	padding:0px;

	padding-top:20px;
	padding-bottom:20px;
	color:White;
	font-size:2em;
	font-weight:bold;
}

table.title_bar > tbody > tr:nth-child(2) > td:nth-child(2),
table.title_bar > tbody > tr:nth-child(2) > td:nth-child(3),
table.title_bar > tbody > tr:nth-child(2) > td:nth-child(4),
table.title_bar > tbody > tr:nth-child(2) > td:nth-child(5)
{
	color:White;
	width:130px;
	padding:0px;
	border-style:solid;
	border-width:1px;
	border-radius:5px;
	vertical-align:middle;
}

table.title_bar > tbody > tr:nth-child(2) > td:last-child
{
	border-bottom-right-radius:9px;
}

/* use the whole td as the link: "display:block;" */
table.title_bar a:link,
table.title_bar a:visited
{
	display:block;
	color:white;
	font-weight:normal;
	text-decoration:none;
}

table.title_bar a:hover
{
	display:block;
	color:#dddddd;
	font-weight:normal;
	text-decoration:none;
}

/*
 * table for a link with icon
 *
 * defines:
 * - the table
 * - table data
 */
table.icon_link_table
{
	width:90%;
	border-spacing:0px;

	margin-left:5%;
	margin-right:5%;
}

table.icon_link_table > tbody > tr > td
{
	text-align:center;
	vertical-align:middle;
}

table.icon_link_table > tbody > tr > td img
{
	vertical-align:middle;
	width:32px;
}

/*
 * table for the page header
 *
 * defines:
 * - the table
 * - table data for 3 columns
 */
table.page_header
{
	width:100%;
	border-spacing:4px;
	text-align:center;
}

table.page_header > tbody > tr > td:nth-child(1)
{
	width:20%;
}

table.page_header > tbody > tr > td:nth-child(2)
{
	width:60%;
}

table.page_header > tbody > tr > td:nth-child(2) > hr
{
	color:SkyBlue;
	border-style:solid;
	border-width:1px;
	width:50%;
}

table.page_header > tbody > tr > td:nth-child(2) > p
{
	font-size:0.95em;
}

table.page_header > tbody > tr > td:nth-child(3)
{
	width:20%;
}

/*
 * table for links to plug-ins and tools
 *
 * defines:
 * - the table
 * - table heads and data
 * - links (gray)
 */
/* center the table inside the td: "margin:0 auto;" */
table.other_plugins
{
	margin:0 auto;
	border-spacing:4px;
}

table.other_plugins > tbody > tr > th
{
	color:White;
	text-align:right;
	padding:3px;
	padding-left:7px;
	padding-right:7px;

	background-color:pink;
	background-color:#84d3e3;
	background-image:url("blue_box_small.png");
	background-position:top;
	background-repeat:repeat-x;
	border-radius:3px;
	border-top-left-radius:5px;
}

table.other_plugins > tbody > tr > td
{
	text-align:right;
	padding-left:7px;
	padding-right:7px;

	border-color:gray;
	border-style:solid;
	border-width:1px;
	border-radius:3px;
}

table.other_plugins > tbody > tr:last-child > td
{
	border-bottom-right-radius:5px;
}

/* use the whole td as the link: "display:block;" */
table.other_plugins a:link,
table.other_plugins a:visited
{
	display:block;
	color:gray;
	font-weight:normal;
	text-decoration:none;
}

table.other_plugins a:hover
{
	display:block;
	color:#444444;
	font-weight:normal;
	text-decoration:none;
}

/*
 * table for features
 *
 * defines:
 * - the table
 * - table heads and data
 * - unorder list
 */
table.features
{
	max-width:1200px;
	border-spacing:4px;
}

table.features > thead > tr > th
{
	background-color:pink;
	background-color:#84d3e3;
	background-image:url("blue_box.png");
	background-position:bottom;
	background-repeat:repeat-x;
	border-radius:5px;
	border-top-left-radius:11px;
	border-bottom-right-radius:11px;

	padding-top:16px;
	padding-bottom:16px;
	color:White;
	font-family:sans-serif;
	font-size:1.5em;
}

table.features > tbody > tr > td
{
	padding:7px;
	padding-top:10px;
	vertical-align:top;

	font-family:serif;
}

table.features > tbody > tr > td > h3
{
	margin-top:5px;
	margin-bottom:5px;
	font-size:1.2em;
}

table.features > tbody > tr > td > ul
{
	margin-top:0.5em;
	margin-bottom:1em;
	padding-left:30px;
	padding-right:20px;
}

table.features > tbody > tr > td > ul > li
{
	font-size:1em;
}

table.features > tbody > tr > td > ul > li > ul > li
{
	font-size:0.95em;
}

/*
table.features > tbody > tr > td > ul > li > code
{
	font-size:1.1em;
	color:#666666;
}
*/

/*
 * table for menu structure
 *
 * defines:
 * - the table
 * - table heads and data
 * - headings and horizontal rules
 * - 'pre' for code
 */
table.menu_structure
{
	width:100%;
	border-spacing:4px;
}

table.menu_structure > thead > tr > th
{
	background-color:pink;
	background-color:#84d3e3;
	background-image:url("blue_box.png");
	background-position:bottom;
	background-repeat:repeat-x;
	border-radius:5px;

	padding-top:16px;
	padding-bottom:16px;
	color:White;
	font-family:sans-serif;
	font-size:1.5em;
}

table.menu_structure > thead > tr > th:first-child
{
	border-top-left-radius:11px;
}

table.menu_structure > thead > tr > th:last-child
{
	border-bottom-right-radius:11px;
}

table.menu_structure > tbody > tr > td
{
	padding:5px;
	padding-top:15px;
	border-bottom-style:solid;
	border-bottom-width:3px;
	border-bottom-color:SkyBlue;
	vertical-align:top;

	font-family:serif;
}

table.menu_structure > tbody > tr > td:first-child img
{
	margin-bottom:16px;
}

table.menu_structure > tbody > tr > td > h3:first-of-type,
table.img_float_table > tbody > tr > td > h3:first-of-type
{
	margin-top:0px;
}

table.menu_structure > tbody > tr > td > h3,
table.img_float_table > tbody > tr > td > h3
{
	color:#2d9460;
}

table.menu_structure > tbody > tr > td > h4,
table.img_float_table > tbody > tr > td > h4
{
	font-size:1.1em;
	margin-top:13px;
	margin-bottom:13px;
}

table.menu_structure > tbody > tr > td > hr,
table.img_float_table > tbody > tr > td > hr
{
	color:SkyBlue;
	border-style:solid;
	border-width:1px;
}

table.menu_structure pre
{
	margin-left:10px;
}

/*
 * table with text on the left and images on the right,
 * split : text 85 - img 15
 *
 * defines:
 * - the table
 * - table data for 2 columns
 * - images
 */
table.img_float_table
{
	width:100%;
	border-spacing:0px;
}

table.img_float_table > tbody > tr > td:first-child
{
	width:80%;
	padding:0px;
	padding-right:5px;
	vertical-align:top;
}

table.img_float_table > tbody > tr > td:last-child
{
	width:20%;
	padding:0px;
	padding-left:5px;
	text-align:left;
}

table.img_float_table > tbody > tr > td img
{
}

/*
 * table with some room between the cells
 */
table.nice_table
{
	border-spacing:7px;
}

/*
 * highlighting for various syntax categories:
 * - comment
 * - cursor (cursor_ins and cursor_nrm)
 * - identifier
 * - jumptag (not yellow as Vim uses, since the yellow background looks really bold)
 * - keyword
 * - preproc
 * - string
 * - tag
 * - type
 * - visual (to represent visual mode)
 *
 * Usage:
 * Place the word within a span:
 *   <span class="type">double</span>
 * There are two variants of the cursor class. "cursor_ins" for an insert-mode cursor,
 * use a bar "|" inside the span:
 *   <span class="cursor_ins">|</span>
 * And "cursor_nrm" for a normal-mode cursor, use any character inside the span,
 * including spaces:
 *   <span class="cursor_nrm">a</span>
 */
span.comment
{
	color:Blue;
}
span.cursor_ins
{
	color:Red;
}
span.cursor_nrm
{
	background-color:Red;
}
span.identifier
{
	color:DarkCyan;
}
span.jumptag
{
	background-color:PaleGoldenRod;
}
span.keyword
{
	color:Brown;
	font-weight:bold;
}
span.visual
{
	background-color:LightGray;
}
span.preproc
{
	color:Purple;
}
span.string
{
	color:Magenta;
	background-color:#eeeeee;
}
span.tag
{
	color:SlateBlue;
	background-color:#e8e8e8;
}
span.type
{
	color:SeaGreen;
	font-weight:bold;
}

/*
 * plug-in "badge", for the plug-in list on the main page
 *
 * defines:
 * - 'div' for the container
 * - 'div' for the header badge
 * - 'div' and link table for the plug-in badges
 */
div.container
{
	overflow:hidden;
}

div.header_badge
{
	float:left;
	width:500px;
	height:55px;
	margin:5px;

	background-color:pink;
	background-color:#84d3e3;
	background-image:url("blue_box.png");
	background-position:bottom;
	background-repeat:repeat-x;
	border-radius:5px;
	border-top-left-radius:11px;
	border-bottom-right-radius:11px;

	text-align:center;
	color:White;
}

div.header_badge > div
{
	padding-top:14px;

	font-family:sans-serif;
	font-size:23px;
	font-weight:bold;
}

div.plugin_badge
{
	float:left;
	width:250px;
	height:55px;
	margin:5px;
}

table.badge_link_table
{
	width:100%;
	height:50px;
	border-spacing:0px;
}

table.badge_link_table > tbody > tr > td:nth-child(1)
{
	text-align:center;
	vertical-align:middle;
	width:30%;
}

table.badge_link_table > tbody > tr > td:nth-child(2)
{
	padding-left:7px;
	text-align:left;
	vertical-align:middle;
	width:70%;
}

/*
 * news items
 *
 * defines:
 * - 'div' for front page news
 * - 'div' for news
 */

div.front_page_news,
div.news
{
	max-width:1000px;

	margin-left:12px;
}

div.front_page_news > h3,
div.news > h3
{
	margin-top:20px;
	margin-bottom:5px;
	font-size:1.2em;
}

div.front_page_news > i:first-of-type,
div.news > i:first-of-type
{
	font-size:0.9em;
}

div.front_page_news > p,
div.news > p
{
}

div.news > a:hover
{
	color:black;
}

div.news > a:target
{
	color:#a000ff;
}