* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	padding:0;
	margin:0;
	font-family: 'Arial', sans-serif;
	font-size:14px;
	background: #AECFE9; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#4B87BC, #C4DFF3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#4B87BC, #C4DFF3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#4B87BC, #C4DFF3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#4B87BC, #C4DFF3); /* Standard syntax */
}

header {
	position: relative;
	text-align: center;
	height:160px;
	background:blue;
	border-bottom-left-radius: 20px; 
	border-bottom-right-radius: 20px; 
	background: #0A4A80; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0A4A80, #053869); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0A4A80, #053869); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0A4A80, #053869); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0A4A80, #053869); /* Standard syntax */
}
.logo_banner {
	margin:30px auto 0 auto;
	width:566px;
}
.logos {
	position: absolute;
	left:30px;
	top:30px;
	width:252px;
	height:127px;
}

.wrapper {
	width:100%;
	overflow: hidden;
}

.image_holder {
	display:none;
	width:70%;
	margin:40px 4% 40px 6%;
	float:left;
	padding:5px;
	border-radius:20px;
	box-shadow: 7px 7px 0 #9CB2C2;
	background-color: #FFFFFF;
	text-align: center;
}
.image_holder.active{
	display:block;
}
.image_holder img {
	width:100%;
}

.colour_controls {
	width:174px;
	float:left;
	margin-top:40px;
}
.pencil_holder {
	margin-top:30px;
	position: relative;
}
.pencil_holder img {
	position: absolute;
    top: 0;
    left: 0;
	width:164px;
	z-index: 4;
}
.colour {
	position: absolute;
    top: 7px;
    left: -1px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 12px solid #ED4D36;
    border-bottom: 5px solid transparent;
}
.pencil_colour {
	position: absolute;
    top: 0px;
    left: 28px;
    width: 120px;
    height: 23px;
    background-color: #ED4D36;
}
.pallette_holder {
	overflow: hidden;
	width:164px;
	border-radius:15px;
	background-color: #FFFFFF;	
	padding:10px;
	box-shadow: 7px 7px 0 #9CB2C2;
}
.pallette_holder .colour_block {
	width:44px;
	height:44px;
	float:left;
	margin:0 6px 6px 0;
	border-radius: 10px;
	box-shadow: inset 5px 5px 0 rgba(0,0,0,0.2);
}
.pallette_holder .colour_block:nth-of-type(3n) {
	margin:0;
}
.dpurple {background-color: #6C0092;}
.purple {background-color: #AA00AA}
.lpurple {background-color:#CCADD9}
.dblue {background-color:#2A3FAA}
.blue {background-color: #62B3FF}
.lblue {background-color:#C4DFF3}
.dteal {background-color:#008080 }
.teal {background-color:#46F8DF}
.lteal {background-color:#C0FCDB}
.dgreen {background-color:#5C8508}
.green {background-color:#2ABF55}
.lgreen {background-color:#CCCC33}
.orange {background-color:#FF8900}
.yellow {background-color:#FFD82D}
.lyellow {background-color:#FFFF85}
.dred {background-color:#B60000}
.red {background-color:#ED4D36}
.pink {background-color:#FF98AA}
.brown {background-color:#B26233}
.lpink {background-color:#E9B792}
.vlbrown {background-color:#DBC994}
.dbrown {background-color:#551F00}
.gbrown {background-color:#876E55}
.ybrown {background-color:#BD9E54}
.black {background-color:#000000}
.grey {background-color:#AAAAAA}
.white {background-color:#FFFFFF}

.full {
	position: fixed;
	top:0;left:0;
	width:100%;
	height:100%;
	display: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.controls {
	padding:20px;
	position: relative;
}
.controls a {
	display: block;
	position: absolute;
	top:-10px;
	width:53px;
	height:53px;
	color:#FFFFFF;
}
.controls button {
	
}
.controls a:after {
	position: absolute;
	bottom:-30px;
	left:-50%;
	text-align: center;
	width:200%;
}
.controls a img {
	width:53px;
}
.start_over {
	right:85px;
}
.start_over:after { content: "Start over"; }
.save {
	right:20px;
}
.save:after { content: "Save"; }
/*.email {
	right:150px;
}
.email:after { content: "Email"; }
.save {
	right:85px;
}
.save:after { content: "Save"; }
.print {
	right:20px;
}
.print:after { content: "Print"; } */

.picture_controls {
	width:160px;
	height:30px;
	position: absolute;
	left:40%;
	top:20px;
	margin-left:-80px;
	text-align: center;
	color:#FFFFFF;
	padding-top:7px;
}
.left img, .right img {
	width:30px;
}
.left, .right {
	width:30px;
	height:30px;
	vertical-align: middle;
	position: absolute;
	top:0;
	cursor: pointer;
}
.left {
	left:0;
}
.right {
	right:0;
}
footer {
	height:160px;
	padding-top:40px;
}
footer .controls {
	height:120px;
	border-top-left-radius: 20px; 
	border-top-right-radius: 20px; 
	width:91%;
	margin:0 auto;
	background: #0A4A80; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0A4A80, #053869); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0A4A80, #053869); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0A4A80, #053869); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0A4A80, #053869); /* Standard syntax */
}

@media screen and (max-width: 1024px) {
	header {
		height:100px;
	}
	.logos {
		top:9px;
		width:157px;
		height: auto
	}
	.logo_banner {
		width:450px;
		margin:2px 0 0 240px;
	}
	.image_holder {
		width:60%;
		margin-bottom:0;
	}
	.colour_controls {
		width:20%;
	}
	.pallette_holder, .pencil_holder img {
		width:135px;
	}
	.pallette_holder .colour_block {
		width:34px;
		height:34px;
	}
	.colour {
		top:5px;
	}
	.pencil_colour {
		width: 91px;
    	height: 19px;
	}

}