.clear {
	clear:both;
}

.no-show {
	display:none;
}

.description h3 {
	margin-top:10px;
}

.row.space {
	margin-bottom: 6em;
}

.row.less-space {
	margin-bottom: 4em;
}

.half-row {
	float: left;
	width:48%;
	margin-right:0 4%;
}
.half-row:last-child {
	margin-right:0;
	margin-left:4%;
}

#page {
	margin: 3em 1em 0 5%;
}

/*
 * Banner & Title
 */
#banner {
	height:154px;
	overflow:hidden;
	border-bottom:thin solid #c3c3c3;
	background-image:url("/static/images/banner-tile.png");
}

#title {
	padding-left:15px;
}

#title h1 {
    font-size:8em;
    font-weight:bold;
    margin:0;
    margin-left:-0.07em;
    line-height:1;
    padding:0;
}

#title h3 {
    margin:0 0 1em -0.05em;
}

#example img {
    float:left;
    width:40%;
}

img#arrow {
    margin-top: 13%;
    width:20%;
}

/*
 * Footer
 */
#footer p {
    float:right;
    font-style:italic;
    margin:0.5em 2em;
}

#foot-banner {
	height:78px;
	overflow:hidden;
	border-top:thin solid #c3c3c3;
	background-image:url("/static/images/banner-tile.png");
}

/*
 * Upload part of site
 */

div#upload {
	margin-top: 4em;
}


img.button-img {
    padding: 0.5em;
    width: 75%;
}
#capture-image img {
    width : 85%;
    margin-top:1.2em;
    margin-bottom:1em;
}
div#from-web {
    margin-top:2em;
}
input#upload-web {
    float:left;
    text-align:center;
    margin-bottom:0.3em;
    width:80%;
    height:2.5em;
}
button#web-button {
    width:18%;
    margin-left:2%;
    height:2.5em;
}
button#web-button p {
    margin-top:5px;
}
p#upload-msg {
    width:80%;
    text-align:center;
}

#upload-image img {
    width : 75%;
    background-image: url(/static/images/fill.png);
    background-repeat: no-repeat;
    background-position: center 100%;
    background-clip: content-box;
    background-size: 40% 0%;
}

img#preview-image {
	width:auto;
	max-width:100%;
}

video#video {
	border: thin solid #c3c3c3;
	cursor:pointer;
}

.jcrop-holder img {
    background: white;
}


/*
 * Colors
 */

ul.colors {
	padding-left:0;
}
ul#pattern-colors {
    margin-left:7em;
}
ul.colors li {
	display:block;
	float:left;
	width:18%;
	border:thin solid #c3c3c3;
	margin-right:1%;
	margin-bottom:0.5em;
}
ul.colors div {
	height:3em;
	width:100%;
	border:none;
    cursor:pointer;
}


p.add-color {
	float:left;
	margin-top:1em;
	width:8em;
	text-align:center;
}

p.add-color:hover {
	cursor:pointer;
	text-decoration:underline;
	color:#334;
}

/*
 * Pattern Size
 */
form#size-form {
	margin-top:2.5%;
}

form#size-form label {
	width: 50%;
	font-weight:normal;
    margin-right:1%;
}

form#size-form input {
	display:inline;
	width:20%;
}
form#size-form p {
    text-align:left;
    width:100%;
}
}
input#pattern-width {
    width:45%
}
div#pattern-size {
	text-align:center;
	margin-top:5%;
	padding-top:10px;
}

/*
 * SVG containing Pattern
 */
svg text {
    dominant-baseline: central;
    text-anchor: middle;
    fill:#333;
}

svg {
    shape-rendering:crispEdges;
}



/*
 * Color Row
 */

button#symbols {
    float: left;
    height: 5.1em;
    width: 5em;
    margin-right: 1%;
}

#symbols img {
    width:100%;
}

p.select {
	margin:0;
	width:100%;
	text-align:center;
	background-color:#fff;
    height:2em;
	padding:0.2em;
	border-top:thin solid #c3c3c3;
	cursor: pointer;
}

p.select:hover {
	background-color:#dde;
	color:black;
}

p.select.selected {
	background-color:#333;
	color:#ddd;
}

/*
 * Save
 */
button#save-pattern, input#save-name, button#download-pattern {
	width:100%;
}

img#save {
	max-width:10em;
	padding:0.5em;
}

button#download-pattern {
    margin-top:2em;
}