deep_process_style.css

/* Design for top level elements */

process {
    margin: 25px;
	background-color: white;
	width: auto;
	font-family: "Arial", sans-serif;
}

*:before {
    font-weight: bold;
}

process>name:before {
    content: "Process: ";
}

process>name {
    display: block;
}

version:before {
	content: "Version: ";
	color: black;
}

process>version {
    display: block;
    font-weight: bold;
    color: red;
}


author:before {
	content: "Contact:";
	font-weight: bold;
}

author {
	top: 10px;
	display: block;
	margin-bottom: 10px;
}

author>name {
	display: block;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
}

author>email {
	display: block;
	padding-left: 10px;
}

description:before {
	content: "Process description: ";
	font-weight: bold;
	display: block;
}

description {
	display: block;
	border: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom-width: 2px;
	border-top-width: 2px;
	border-style: solid;
	border-color: lightgrey;
	white-space: pre;
}


inputs:before {
	content: "Input files";
	font-weight: bold;
}

inputs {
	margin-top: 10px;
	display: block;
}

filetype:before {
	content: "File";
	display: block;
}
filetype {
	position: relative;
	left: 20px;
	display: block;
}

identifier:before {
	content: "Identifier: ";
	font-family: "Arial", sans-serif;
}

identifier, format, quantity, comment {
	display: block;
	position: relative;
	left: 25px;
}

identifier, command_line {
    font-family: "Courier New", Monospace;
}

format:before {
	content: "File format: ";
}

quantity:before {
	content: "Quantity: ";
}

comment:before {
	content: "Comment: ";
}

references:before {
	content: "Reference files";
}

references {
	margin-top: 10px;
	display: block;
	background-color: #F0F0F0;
	padding-top: 10px;
	padding-bottom: 10px;
}

outputs:before {
	content: "Output files";
	font-weight: bold;
}
outputs {
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
}
software:before {
    content: "Process Steps";
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

software {
    display: block;
    padding-top: 10px;
    border: 0px;
	border-top-width: 2px;
	border-style: solid;
	border-color: lightgrey;
    counter-reset: subsection;
    padding-bottom: 10px;
}

tool>name:before {
    counter-increment: subsection;
    content: "Step " counter(subsection) ": ";
}

tool>name {
    position: relative;
    margin-left: 15px;
    padding: 5px;
    border-style: solid;
    border-width: 2px;
    border-color: #47D147;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
}

tool>version:before {
    content: "Software version:  ";
}

tool>version {
    display: block;
    margin-left: 25px;
    margin-top: 10px;
}

command_line {
    display: block;
    position: relative;
    left: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

command_line:hover {
    background-color: lightgrey;
}

loop:before {
    content: "Loop: ";
}

loop {
    display: block;
    margin-left: 25px;

}

tool>comment {
    margin-bottom: 10px;
	padding-top: 5px;
    padding-bottom: 5px;
    white-space: pre-line;
}

tool>comment:hover {
    background-color: powderblue;
}