@charset "UTF-8";

/* import font libraries */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');

/* unify default browser css
 * Based on work by Eric Meyer:
 * http://meyerweb.com/eric/tools/css/reset/index.html
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}

:focus {
	outline:0;
}

body {
	background:#fff;
	line-height:1;
}

ol, ul {
	list-style:none;
}

table {
	border-collapse:separate;
	border-spacing:0;
}

caption, th, td {
	font-weight:normal;
	text-align:left;
}

a img {
	border:0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}

/* international quotes */

:lang(de) q {
	quotes:"„" "“" "‚" "‘";
}

:lang(en) q {
	quotes:"“" "”" "‘" "’";
}

:lang(fr) q {
	quotes:"«\002005" "\002005»" "‹\002005" "\002005›"; /* 1/4em space width between quotes */
}

:lang(es) q {
	quotes:"«" "»" "‹" "›"; /* opera compatiblity */
}

:lang(es) q {
	quotes:"«\00200a" "\00200a»" "‹\00200a" "\00200a›"; /* hair space width between quotes */
}

/* signavio template styles */

body {
	background:#eee;
	font:300 normal normal 15px/24px 'Open Sans', Tahoma, sans-serif;
	color:#555;
}
body.attachment {
    background-color: #fff;
}
a {
	color:#555;
}

a:hover,
a:active,
a:focus {
	color:#ad0f5b;
	text-decoration:underline;
}

hr {
	display:none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration:none;
}

h1,
.home section h2 {
	font-size:28px;
	font-weight:300;
	line-height:36px;
	margin:12px 0;
}

h2 {
	font-size:24px;
	line-height:24px;
}

h3 {
	font-size:24px;
	line-height:28x;
	margin:36px 0 12px;
}

p {
	margin:0 0 8px;
	font:300 normal normal 15px/24px 'Open Sans', Tahoma, sans-serif;
}

p strong {
	font-weight:600;
}

img {
	display:block;
}

section,
article > aside {
	margin:36px 72px;
	overflow:hidden;
	width:960px;
}

input {
	font:300 normal normal 15px/24px 'Open Sans', Tahoma, sans-serif;
	height:24px;
	margin:0 4px 4px 0;
	color:#7f7f7f;
	padding:8px 16px;
	border:none;
}

::selection {
	background-color:#00a7ac;
	color:#fff;
}

::-moz-selection {
	background-color:#00a7ac;
	color:#fff;
}

input[type=text] {
	color:#555;
}

input[type=text]:hover {
	background-color:#eee;
}

input[type=text]:focus {
	background-color:#555;
	color:#ad0f5b;
}

input[type=text]::-webkit-input-placeholder { color:#fff; font-weight:300; opacity:1; }
input[type=text]:-moz-placeholder { color:#fff; font-weight:300; opacity:1; } /* FF 18- */
input[type=text]::-moz-placeholder { color:#fff; font-weight:300; opacity:1; } /* FF 19+ */
input[type=text]:-ms-input-placeholder { color:#fff; font-weight:300; opacity:1; } /* IE 9+ */
input[type=text]::placeholder { color:#fff; font-weight:300; opacity:1; }

input[type=text]:focus::-webkit-input-placeholder { opacity:.5; }
input[type=text]:focus:-moz-placeholder { opacity:.5; } /* FF 18- */
input[type=text]:focus::-moz-placeholder { opacity:.5; } /* FF 19+ */
input[type=text]:focus:-ms-input-placeholder { opacity:.5; } /* IE 9+ */
input[type=text]:focus::placeholder { opacity:.5; }

input[type=submit],
button {
	cursor:pointer;
}

ol, ul {
	margin:8px 0 16px;
}

li {
	font-size:15px;
	line-height:24px;
}

article li strong {
	font-weight:600;
}

article ol li {
	margin:0 0 4px 32px;
	list-style:decimal outside none;
}

article ul > li {
	margin:0 0 4px 28px;
	padding-left:4px;
	list-style:square outside none;
}

#page {
	background:#fff;
	width:1104px;
	margin:0 auto;
	overflow:hidden;
}

#page article h2 {
	position:relative;
	background:#555;
	color:#fff;
	font-weight:300;
	line-height:24px;
	width:220px;
	margin:0 65px 8px 0;
	padding:12px 20px;
	display:block;
	float:left;
}

#page article h2::after {
	content:"";
    display:block;
    position:absolute;
    border-style:solid;
	border-width:24px 20px;
	border-color:transparent;
	border-left-color:#555;
    right:-40px;
    top:0;
}

#page section > h2.positive {
	background-color:#b8cc00;
}

#page section > h2.positive::after {
	border-left-color:#b8cc00;
}

#page section > h2.negative {
	background-color:#c22f1e;
}

#page section > h2.negative::after {
	border-left-color:#c22f1e;
}

#page > header,
#page > footer {
	background:#555;
	overflow:hidden;
	font-size:13px;
	line-height:22px;
	padding:0 14px;
}

#page > header {
	padding:0;
	margin:0 0 64px;
}

#page > footer {
	background:#333;
}

#page > header a,
#page > footer a {
	color:#fff;
	text-decoration:none;
	display:block;
}

#page > header > nav {
	float:right;
}

#page > header > nav ul,
#page > footer > nav ul {
	margin:0;
}

#page > header > nav li,
#page > footer > nav li {
	float:left;
	font-size:13px;
	line-height:22px;
}

#page > header > nav li a,
#page > footer > nav li a {
	padding:14px 22px;
	display:block;
}

#page > header > nav li a:hover,
#page > footer > nav li a:hover {
	background:#7f7f7f;
}

#page > header .bpmnmg-logo {
	background:#555;
	padding:19px 48px 19px 72px;
	position:absolute;
}

#page > header .bpmnmg-logo::after {
	content:"";
	position:absolute;
	display:block;
	right:-20px;
	bottom:0;
	border-style:solid;
	border-width:0 0 30px 20px;
	border-color:transparent;
	border-left-color:#555;
}

#page > header .bpmnmg-logo a {
	background:url("../img/bpmnmg-header-logo.png") left top no-repeat;
	width:0;
	height:42px;
	padding:0 0 0 176px;
	overflow:hidden;
	position:relative;
}

#page > header .breadcrumb {
	color:#7f7f7f;
	margin:58px 0 0 325px;
	position:absolute;
	width:760px;
}

#page > header .breadcrumb a,
#page > header .breadcrumb span {
	border-left:1px solid #eee;
	color:#7f7f7f;
	display:block;
	float:left;
	padding:0 10px;
}

#page > header .breadcrumb a:hover,
#page > header .breadcrumb a:active {
	background-color:#eee;
	color:#555;
}

#page > header .breadcrumb a:first-child {
	border:none;
}

#page > footer ul.menu {
	position:relative;
	float:none;
	overflow:hidden;
}

#page > footer .submenu-languages,
#page > footer .menu-item-language a {
	float:left;
}

#page > footer ul.menu > li.menu-item-language {
	position:absolute;
	right:0;
}

#page > article > header {
	margin:48px 72px;
}

#page > article > header h1,
#wrap > section h2,
section.postlist h1 {
	border-bottom:1px solid #ccc;
	padding-bottom:12px;
	margin:0;
}

#page > article > header small {
	font-size:13px;
	line-height:22px;
	color:#7f7f7f;
	float:right;
	margin:4px 0;
}

#page > .hint {
	background:#c6e0f7;
	margin:24px 72px;
	font-size:13px;
	line-height:22px;
}

#page > .hint > span {
	padding:6px 20px 8px;
	display:inline-block;
}

#page > .hint span.title {
	position:relative;
	background:#61aef2;
	font-weight:bold;
	color:#fff;
}

#page > .hint span.title::after {
	content:"";
    display:block;
    position:absolute;
    border-style:solid;
	border-width:18px 12px;
	border-color:transparent;
	border-left-color:#61aef2;
    right:-24px;
    top:0;
}

#page > .hint span.message,
#page > .hint span.message a {
	color:#555;
}

/* dirty way instead of nth-child rules to keep IE7/8 compatibility */
#wrap {
	width:960px;
	overflow:hidden;
	margin:36px 72px;
}

#wrap > section {
	margin:24px 0;
	float:left;
}

#wrap > section > header {
	margin:0;
}

#wrap > section.conventions > header {
	margin:0 0 24px;
}

#wrap section > header h2,
section.postlist h1 {
	margin-bottom:16px;
}

#wrap section > header p,
#page article > header p,
#wrap > section.additonal-topics p {
	font-size:20px;
	line-height:28px;
}

#page article > header h1 + p {
	margin-top:16px;
}

#wrap > section.fields {
	width:975px;
	margin-right:57px; /* 72px-15px */
}

#wrap > section.fields li > a {
	text-decoration:none;
	color:#333;
	border-left:4px solid #eee;
	padding:4px 10px;
	display:block;
	transition-timing-function:ease;
	transition:border-color .5s;
}

#wrap > section.fields li > a:hover {
	border-color:#ad0f5b;
	transition:border-color 1s;
}

#wrap > section.fields li {
	border:1px solid transparent;
	margin:4px 0;
}

#wrap > section.fields li:hover {
	border-color:#eee;
}

#wrap > section.fields > header {
	width:960px;
}

#wrap > section.conventions {
	width:615px;
	margin-right:15px;
}

#wrap > section.tags {
	width:310px;
	margin-left:0;
}

#wrap > section.fields div.list-group:nth-of-type(3n+1) {
	clear:left;
}

#wrap > section.additonal-topics > div {
	float:left;
	width:635px;
}

#wrap > section.additonal-topics a.image {
	width:268px;
	padding:0 21px;
	margin:4px 15px 4px 0;
	float:left;
}

#overlay {
	position:absolute;
	top:0;
	background:#fff;
	/*width:100%;*/
	height:100%;
}

/* overlay body */
#overlay > div {
	background:#fff;
	position:relative;
	/*height:100%;*/
	overflow:auto;
}

/* overlay wrap */
#overlay > div > div {
	margin:96px 48px 0;
	overflow:auto;
}

#overlay nav {
	position:fixed;
	top:0;
	left:0;
	overflow:hidden;
	background:#555;
	width:100%;
}

#overlay nav a {
	float:left;
	display:block;
	padding:20px 24px;
	text-decoration:none;
	color:#fff;
}

#overlay nav a.bpmnmg-logo {
	background:url("../img/bpmnmg-header-logo.png") 12px 12px no-repeat;
	width:0;
	height:42px;
	padding:10px 190px 12px 24px;
	overflow:hidden;
	text-indent:-20em;
}

#overlay nav a.backlink {
	float:right;
}

#overlay nav a:hover {
	background-color:#333;
}

#overlay .attachment {
	width:auto;
	margin:0;
}

#overlay .attachment h2 {
	border-bottom:1px solid #ccc;
	margin:0 0 8px;
	padding-bottom:16px;
	width:960px;
}

#overlay .attachment p {
	width:960px;
}

#overlay .cropbox {
	margin-top:24px;
}

#overlay .cropbox img {

}

section.postlist {
	width:auto;
	margin:36px 0 0;
}

section.postlist h1,
section.postlist article {
	margin:0 72px;
}

section.postlist h1 + article {
	border-top:none;
}

section.postlist article {
	border-top:1px solid #ddd;
	padding-bottom:32px;
}

section.postlist article > div {
	width:635px;
}

section.postlist article > div > div {
	overflow:hidden;
	margin:8px 0;
}

section.postlist article h3 ~ p:last-of-type {
	margin-bottom:16px;
}

section.postlist article ul,
section.postlist article span.label {
	float:left;
	margin:0;
}

section.postlist article span.label {
	clear:left;
	font-weight:600;
	font-size:13px;
	padding:4px 0;
	min-width:100px;
}

section.postlist article ul {
	width:535px;
}

section.postlist article li {
	list-style:none;
	margin:0 0 4px 8px;
	padding:0;
	float:left;
}

section.postlist article li > a {
	display:block;
	background:#eee;
	padding:4px 12px;
	text-decoration:none;
}

section.postlist article li > a:hover {
	background:#ddd;
	color:inherit;
}

section.postlist a.further-reading {
	white-space:nowrap;
}

footer.paging {
	height:48px;
	background:#eee;
	overflow:hidden;
	padding:0;
}

footer.paging a {
	text-decoration:none;
	font-size:18px;
	font-weight:300;
	line-height:24px;
	display:block;
	text-align:left;
	padding:12px 40px;
	width:288px;
}

footer.paging a.nextpost {
	float:left;
	background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA2IDEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM1NTU1NTUiIGQ9Ik01LjA2NCwwLjg4NkwwLjI3OSw1LjY3MUMwLjE5MSw1Ljc1OCwwLjE0Myw1Ljg3NywwLjE0Myw2czAuMDQ5LDAuMjQyLDAuMTM3LDAuMzI5bDQuNzg1LDQuNzg1DQoJYzAuMTgyLDAuMTgyLDAuNDc2LDAuMTgyLDAuNjU2LDBjMC4xODItMC4xODEsMC4xODItMC40NzUsMC0wLjY1NkwxLjI2NSw2bDQuNDU2LTQuNDU3YzAuMTgyLTAuMTgyLDAuMTgyLTAuNDc2LDAtMC42NTcNCglDNS42MzEsMC43OTUsNS41MTIsMC43NSw1LjM5MywwLjc1UzUuMTU0LDAuNzk1LDUuMDY0LDAuODg2eiIvPg0KPC9zdmc+DQo=") 40px 18px no-repeat transparent;
	padding-left:64px;
	width:264px;
}

footer.paging a.home {
	float:left;
	text-align:center;
	margin-left:368px;
}

footer.paging a.nextpost + a.home {
	margin-left:0;
}

footer.paging a.prevpost {
	float:right;
	text-align:right;
	background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA2IDEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM1NTU1NTUiIGQ9Ik0wLjYwNywwLjc1Yy0wLjExOSwwLTAuMjM4LDAuMDQ1LTAuMzI5LDAuMTM2Yy0wLjE4MiwwLjE4MS0wLjE4MiwwLjQ3NiwwLDAuNjU3TDQuNzM1LDZsLTQuNDU3LDQuNDU3DQoJYy0wLjE4MiwwLjE4Mi0wLjE4MiwwLjQ3NiwwLDAuNjU2YzAuMTgxLDAuMTgyLDAuNDc2LDAuMTgyLDAuNjU3LDBsNC43ODUtNC43ODVDNS44MDksNi4yNDIsNS44NTcsNi4xMjMsNS44NTcsNg0KCVM1LjgwOSw1Ljc1OCw1LjcyMSw1LjY3MUwwLjkzNiwwLjg4NkMwLjg0NSwwLjc5NSwwLjcyNywwLjc1LDAuNjA3LDAuNzV6Ii8+DQo8L3N2Zz4NCg==") 320px 18px no-repeat transparent;
	padding-right:64px;
	width:264px;
}

footer.paging a:hover {
	background-color:#ddd;
	color:inherit;
}

footer.paging a:active,
footer.paging a:focus {
	background-color:#ad0f5b;
	color:#fff;
}

footer.paging a.prevpost:active,
footer.paging a.prevpost:focus {
	background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA2IDEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0wLjYwNywwLjc1Yy0wLjExOSwwLTAuMjM4LDAuMDQ1LTAuMzI5LDAuMTM2Yy0wLjE4MiwwLjE4MS0wLjE4MiwwLjQ3NiwwLDAuNjU3TDQuNzM1LDZsLTQuNDU3LDQuNDU3DQoJYy0wLjE4MiwwLjE4Mi0wLjE4MiwwLjQ3NiwwLDAuNjU2YzAuMTgxLDAuMTgyLDAuNDc2LDAuMTgyLDAuNjU3LDBsNC43ODUtNC43ODVDNS44MDksNi4yNDIsNS44NTcsNi4xMjMsNS44NTcsNg0KCVM1LjgwOSw1Ljc1OCw1LjcyMSw1LjY3MUwwLjkzNiwwLjg4NkMwLjg0NSwwLjc5NSwwLjcyNywwLjc1LDAuNjA3LDAuNzV6Ii8+DQo8L3N2Zz4NCg==");
}

footer.paging a.nextpost:active,
footer.paging a.nextpost:focus {
	background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA2IDEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik01LjA2NCwwLjg4NkwwLjI3OSw1LjY3MUMwLjE5MSw1Ljc1OCwwLjE0Myw1Ljg3NywwLjE0Myw2czAuMDQ5LDAuMjQyLDAuMTM3LDAuMzI5bDQuNzg1LDQuNzg1DQoJYzAuMTgyLDAuMTgyLDAuNDc2LDAuMTgyLDAuNjU2LDBjMC4xODItMC4xODEsMC4xODItMC40NzUsMC0wLjY1NkwxLjI2NSw2bDQuNDU2LTQuNDU3YzAuMTgyLTAuMTgyLDAuMTgyLTAuNDc2LDAtMC42NTcNCglDNS42MzEsMC43OTUsNS41MTIsMC43NSw1LjM5MywwLjc1UzUuMTU0LDAuNzk1LDUuMDY0LDAuODg2eiIvPg0KPC9zdmc+DQo=");
}

div.list-group.fields {
	width:294px;
	float:left;
	margin:36px 31px 12px 0;
	position:relative;
	padding:0 0 24px;
	border-bottom:1px solid #eee;
	min-height:254px;
}

div.list-group.fields h3 {
	margin:0;
}

div.list-group.fields h3 > a {
	background:#ad0f5b;
	width:254px;
	height:24px;
	padding:12px 20px;
	color:#fff;
	display:block;
	text-decoration:none;
}

div.list-group.fields h3 > a:hover {
	background-color:#333;
}

div.list-group.fields > a.archive-link {
	padding:1px;
	background:#eee;
	position:absolute;
	right:-1px;
	bottom:-1px;
	text-decoration:none;
	color:#7f7f7f;
}

div.list-group.fields > a.archive-link span {
	font-size:20px;
	line-height:20px;
	background:#fff;
	display:block;
	padding:4px 11px 6px;
}

div.list-group.fields > a.archive-link:hover {
	background:#ddd;
	color:#555;
}

div.list-group.fields > a.archive-link span:hover {
	background:#eee;
}

div.list-group.fields > a.archive-link::after {
	border-color:transparent transparent transparent #eee;
    border-style:solid;
    border-width:16px;
    content:"";
    display:block;
    position:absolute;
    right:-32px;
    top:0;
}

div.list-group.fields > a.archive-link span::after {
	border-color:transparent transparent transparent #fff;
    border-style:solid;
    border-width:15px 16px;
    content:"";
    display:block;
    position:absolute;
    right:-31px;
    top:1px;
	z-index:1;
}

div.list-group.fields > a.archive-link:hover::after {
	border-color:transparent transparent transparent #ddd;
}

div.list-group.fields > a.archive-link span:hover::after {
	border-color:transparent transparent transparent #eee;
}

div.list-group.tags {
	font-size:13px;
	line-height:24px;
}

div.list-group.tags > a {
	text-decoration:none;
}

div.list-group.tags > a:hover {
	text-decoration:underline;
}

div.content-group {
	float:left;
	width:635px;
	font-size:20px;
	line-height:28px;
	min-height:48px;
}

div.content-group.purpose {
	background:#eee;
	padding:20px 24px;
	width:587px;
}

div.content-group.purpose p {
	font-size:20px;
	line-height:28px;
}

div.content-group.description h3:first-child,
div.content-group.custom h3:first-child {
	margin-top:8px;
}

div.content-group .imgbin {
	float:left;
	background:#eee;
	margin:0 0 15px 0;
	padding:10px;
	width:290px;
	position:relative;
	margin-left:15px;
	text-decoration:none;
}

div.content-group a.imgbin:hover {
	background-color:#ccc;
	color:inherit;
}

div.content-group.positive a.imgbin:hover {
	background-color:#dbe680;
}

div.content-group.negative a.imgbin:hover {
	background-color:#de8e85;
}

/* dirty way with negative margin instead of nth-child rules to keep IE7/8 compatibility */
div.content-group.positive,
div.content-group.negative {
	margin-left:-15px;
	width:650px;
}

div.content-group .imgbin,
div.content-group .imgbin > div {
	width:290px;
}

div.content-group .imgbin > div {
	display:table-cell;
	vertical-align:middle;
	height:230px;
	background:#fff;
}

div.content-group .imgbin > div > img {
	margin:9px auto;
}

div.content-group .imgbin p {
	font-size:13px;
	line-height:18px;
	font-weight:600;
	margin:0;
	padding:15px 5px 5px;
}

div.content-group .imgbin.double,
div.content-group .imgbin.double > div:last-child {
	width:615px;
}

div.content-group .imgbin.double > div {
	width:480px;
}

div.content-group .imgbin.double p {
	width:115px;
	position:absolute;
	right:10px;
	top:0;
}

div.content-group.negative .imgbin,
div.content-group.negative .imgbin > div + p {
	background:#f5b7b0;
}

div.content-group .imgbin > div.hint {
	position:absolute;
	top:0;
	left:0;
	font-size:24px;
	line-height:36px;
	padding:10px 20px 10px 56px;
	height:36px;
	width:auto;
}

div.content-group .imgbin .hint.error {
	background:url("../img/icon-negative.png") 10px 10px no-repeat #f5b7b0;
	color:#c22f1e;
}

div.content-group.conventions {
	margin-bottom:36px;
}

div.content-group.conventions ul,
div.list-group.conventions ul {
	margin:0 0 0 -15px;
	width:650px;
	overflow:hidden;
}

div.content-group.conventions li,
div.list-group.conventions li {
	float:left;
    list-style:none;
    margin:0 0 0 15px;
    padding:0;
}

div.content-group.conventions li a,
div.list-group.conventions li a {
	background-color:#eee;
	display:block;
	padding:12px 24px;
	font-size:20px;
	line-height:24px;
	text-decoration:none;
	color:#4a4a4a;
	width:262px;
}

div.content-group.conventions li a:hover,
div.list-group.conventions li a:hover {
	background-color:#ccc;
}

div.content-group.related ul {
	margin:0;
}

div.content-group.related li {
	list-style:none;
	margin:0 0 16px;
	padding:0;
	border:1px solid transparent;
}

div.content-group.related li:hover {
	border-color:#eee;
}

div.content-group.related li h3 {
	font-size:20px;
	line-height:28px;
	margin:0 0 4px;
}

div.content-group.related li a {
	text-decoration:none;
	border-left:4px solid #eee;
	display:block;
	padding:4px 10px;
	transition-timing-function:ease;
	transition:border-color .5s;
}

div.content-group.related li a:hover {
	border-color:#ad0f5b;
	transition:border-color 1s;
}

div.content-group.related li p {
	font-size:13px;
	line-height:18px;
}

.search-bar {
	float:right;
	padding:9px;
	position:relative;
	display:none;
}

.search-bar:hover {
	background:#7f7f7f;
}

.search-bar input {
	font-size:13px;
	line-height:18px;
	font-weight:600;
	height:18px;
}

.search-bar input[type="text"] {
	background:#555;
	padding:6px 12px 8px;
	color:#fff;
	margin:0;
	width:64px;
	margin-right:32px;
	transition-timing-function:ease;
	transition:width 1s, background-color 1s;
}

.search-bar input[type="text"]:hover,
.search-bar input[type="text"]:focus {
	background-color:#333;
}

.search-bar input[type="text"]:focus {
	width:308px;
	transition:width .5s, background-color .5s;
}

.search-bar input[type="submit"],
.search-bar input[type="reset"] {
	background:url("../img/icon-sprite-input.png") left bottom no-repeat #555;
	width:32px;
	height:32px;
	padding:0;
	text-indent:-12em;
	overflow:hidden;
	position:absolute;
	right:5px;
	top:9px;
	border:4px solid #555;
}

.search-bar input[type="reset"] {
	background-position:left top;
	display:none;
}

.search-bar input[type="text"]:focus + input[type="submit"],
.search-bar input[type="text"]:focus + input[type="reset"] {
	background-color:#333;
	border-color:#333;
}