style.css

/*

styles for both admin settings and shortcode page

*/

h1 small {
	color: #999;
	margin: 1em;
	font-size:0.65em;
}
.h3 {
	font-size: 1.3em;
	margin: 1em 0;
}
.container {
	width:100%;
	max-width: 700px;
	margin:35px 0;
	clear:both;
	min-height:50px;
}

.container label {
	width:30%;
}

.container .label {
	line-height: 2.4em;
	font-weight: bold;
	width:30%;
	font-size:1.1em;
}

.container input {
	float:right;
	margin:0;
}

.container input[type="text"] {
	width:70%;
	padding:7px 12px;
	box-sizing:border-box;
}

.input-group {
	width:70%;
	float:right;
}
.input-group .full-width {
	width:100%;
}
.input-group textarea {
	height:7em;
	padding:0.5em 1em;
}

.helptext {
	margin: 0;
	padding: 0.2em 0;
	clear:both;
	color:#666;
}

.helptext p.description {
	font-size:14px;
	line-height: 1.618;
	letter-spacing: -0.001em;
	word-spacing: 0.01em;
	margin:0.5em 0 0;
}

.flex, 
.examples {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.flex > label {
	flex: 0 1 200px;
}
.flex > input {
	flex: 1 1 400px;
}

.examples .list-item {
	flex: 1 1 250px;
}

p {
	vertical-align: top;
	word-wrap: break-word;
}

.list-item {
	width: 250px;
	display:inline-block;
	vertical-align: top;
	padding:15px;
}

.list-item p {
	font-size:1.2em;
}

@media screen and (max-width: 770px) {
	.input-group {
		float:none;
	}
}