Quark.css

/**
 * Quark default styles
 */
body {
	font-family: FontAwesome, 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 16px;
}

h1 {
	margin: 25px 0 15px 0;
	font-size: 24px;
	font-weight: 300;
	line-height: 26px;
}

h2 {
	margin: 5px 0 5px 0;
	font-size: 20px;
	font-weight: 300;
	line-height: 22px;
}

h3 {
	margin: 2px 0 2px 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 20px;
}

h4 {
	margin: 2px 0 2px 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 18px;
}

h5 {
	margin: 2px 0 2px 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
}

h6 {
	margin: 2px 0 2px 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 14px;
}


/**
 * .quark-input and .quark-button are base controls
 */
.quark-input, .quark-button {
	font-family: FontAwesome, 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: rgb(150, 150, 150);
	text-decoration: none;
}

.quark-input, .quark-button.block {
	border: 1px solid rgb(230, 230, 230);
	border-radius: 3px;
	padding: 10px 12px;
}

textarea.quark-input { }

select.quark-input {
	padding: 7px 0 7px 7px;
	width: 176px;
	height: 36px;
}

button.quark-button {
	background: none;
	border: none;
}

.quark-button.block {
	white-space: nowrap;
}

.quark-button:hover {
	color: rgb(0, 0, 0);
	cursor: pointer;
}

.quark-button.block:hover {
	background: rgb(230, 230, 230);
}

.quark-input {
	display: inline-block;
	width: 180px;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.quark-input-labeled {
	display: inline-block;
	padding: 5px 10px;
	margin: 0;
	border: 1px solid rgb(230,230,230);
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.quark-input-labeled span {
	display: block;
	font-size: 8px;
	line-height: 8px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 3px 0 5px 0;
}

.quark-input-labeled input {
	display: block;
	width: 100%;
	font-size: 14px;
	line-height: 18px;
	border: none;
	padding: 0;
	font-family: FontAwesome,'Open Sans',sans-serif;
	color: rgb(150,150,150);
}

.quark-input-labeled input:focus {
	outline: none;
}

.quark-link {
	color: rgba(0,0,0,0);
	text-decoration: none;
	cursor: pointer;
}

.quark-link.underlined {
	font-size: inherit;
	color: rgb(150, 150, 150);
	text-decoration: underline;
}

.quark-link.underlined:hover {
	color: rgb(0, 0, 0);
}

.quark-button-group {
	padding: 2px 2px 2px 20px;
}

.quark-button-group .group-name {
	margin: 0 0 0 -15px;
}


/**
 * .quark-message represent short notifications from system
 */
.quark-message {
	font-family: FontAwesome, 'Open Sans', sans-serif;
	font-size: 12px;
	line-height: 12px;

	padding: 10px;
	margin: 3px 1px;

	border-radius: 5px;
}

.quark-message:before {
	vertical-align: middle;
	display: inline-block;
	margin-right: 10px;
	font-size: 14px;
}

.quark-message .content {
	padding: 0;
	margin: 0;
	vertical-align: middle;
	display: inline-block;
}

.quark-message.info {
	background: rgba(205,217,255,0.3);
	/*border: 1px solid #CDD9FF;*/
}

.quark-message.info:before {
	color: #A7BCFF;
}

.quark-message.warn {
	background: rgba(211,190,2,0.3);
	/*border: 1px solid rgb(211, 190, 2);*/
}

.quark-message.warn:before {
	color: rgb(211, 190, 2);
}

.quark-message.fatal {
	background: rgba(255,153,96,0.3);
	/*border: 1px solid #ff9960;*/
}

.quark-message.fatal:before {
	color: #ff9960;
}

.quark-message.question {
	background: rgba(230,230,230,0.3);
	/*border: 1px solid rgb(230, 230, 230);*/
}

.quark-message.ok {
	background: rgba(1,165,1,0.3);
	/*border: 1px solid rgb(1, 165, 1);*/
}

.quark-message.ok:before {
	color: rgb(1, 165, 1);
}

.quark-message.hidden {
	display: none;
}


/**
 * .quark-document useful for code snippets or other text output
 */
.quark-document {
	font-family: Consolas, 'Anonymous Pro', monospace;
	font-size: 12px;

	padding: 10px;
	margin: 5px 0;

	border-radius: 3px;
	border: 1px solid rgb(230, 230, 230);
}


/**
 * .quark-table nice look of tables
 */
.quark-table {
	border-collapse: collapse;
}

.quark-table thead {
	background: rgb(180, 255, 125);
}

.quark-table td {
	padding: 10px;
}

.quark-table .quark-table-section {
	background: rgb(240,240,240);
}


/**
 * Social network buttons
 */
.quark-button.social {
	font-size: 20px;
	line-height: 20px;
	padding: 10px;
	color: rgb(255,255,255);
	display: inline-block;
	width: 20px;
	text-align: center;
}

.quark-button.social:hover {
	color: rgb(255,255,255);
}