﻿html {
	overflow-y: scroll;
	max-width: 100%;
    overflow-x: hidden;
}
body {
	margin:0;
	background:#c2c2c2;
	font: normal 12px/18px 'Helvetica', Arial, sans-serif;

	/*Prevent text selection*/
	-webkit-touch-callout: none;
	-webkit-user-select: none; /* Webkit */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE 10  */
	
	/* Currently not supported in Opera but will be soon */
	-o-user-select: none;
	user-select: none;  
}

#container {
	/*width: 90%;
	margin: 0 auto;*/
	margin: 0 0px 0 0;
	position:relative;
	background:#E8E8E8;
	height:1920px;	
}


#catHouse {
	margin-right:170px;
	background:black;
	overflow:hidden;
	cursor:none;
}

#stampPreview {
 	cursor: none;
 	position: absolute;
 	display: none;
 	top: 0;
 	left: 0;
 	z-index: 10000;
}

#controlPanel {
	background-color:#dfdfdf;
	float:right;
	width:170px;
	padding:0;
	margin:0 0 0 -17px;
	position:absolute;
}

#stamp_controls, #background_controls {
	background:#c2c2c2;
	margin:0 0px;
	padding: 0 0px;
}

#collage_controls {
	background:#dfdfdf;
	margin:0 0px;
}

#reset_controls {
	background:#dfdfdf;
	margin:0 0px;
}

#color_gallery, #cat_gallery, #collage_gallery, #reset_buttons, #go_home, #previewImg {
	width:100%;
	height:auto;
	padding-left:12px;
	padding-bottom:10px;
}

#transform_buttons {
	width:100%;
	height:auto;
	padding-left:12px;
	padding-bottom:0;
}


#color_gallery {
	padding-top:0px;
	padding-bottom:10px;}

#go_home {
	padding:10px 0 10px 0;
	text-align:center;
}

#previewImg {
	margin: auto;
	width:100%;
	height:auto;
	margin-top:10px;
}

#catPreview {
	height: 210px;
}

h1 {
	text-align:center;
	font-size:140%;
	padding:10px 0 ;
	margin:0;
	color:#2c2c2c;
}

/*size slider details*/

.slider_holder {
	margin: 0px 10px 0 12px;	
}

#size_slider, #collage_slider, #rotate_slider {
	margin-right:10px;
	margin-bottom:10px;
	position:relative;
	height:30px;
}

#rotate_slider {
	margin-right:10px;
	margin-bottom:10px;
	position:relative;
	height:40px;
}

.size_label, .count_label {
	text-align:center;
	margin:0;
	padding:0px;
}

.rotate_label {
	text-align:center;
	margin:0;
	padding:5px 0 0px 0px;
}

button {
	border: 1px solid gray;
	
}

.slide_value {
	position: absolute;	
	margin:0;
	left:0;
}

.slide {
	position: absolute;
	height:8px;
	width:146px;
	background-color:black;
	/*top:30px;*/
	top:6px;
}

.grip {
	/*top:25px;*/
	position: absolute;	
	background-color:red;
	padding:0px 0 0 0;
	height:16px;
	top:2px;
	left:-5px;
	width:10px;
}

#size_slider .grip {
	left:53px;
}

#rotate_slider .grip {
	left:68px;
}

#collage_slider .grip {
	left:83px;
}

.min_val p {
	position: absolute;	
	left:0px;
	top:20px;
	bottom:5px;
	margin:0;
}

.max_val p {
	position: absolute;	
	left:125px;
	top:18px;
	margin:0;
}

.divider {
	width:100%;
	height:1px;
	background-image:url('images/divider.png');
	margin:0px;
}

#go_home a {
	text-decoration:none;
	color:#f01419;
}

.color_button {
	margin-right:5px;
	margin-bottom:5px;
	width:25px;
	height:25px;
}

.cat_button, .collage_button {
	margin-right:7px;
	margin-bottom:5px;
	width:44px;
	height:44px;
	background-color:white;
	background-size:cover;
}

.active_button {
	-moz-box-shadow: 0 0 2px 2px yellow;
	-webkit-box-shadow: 0 0 2px 2px yellow;
	box-shadow: 0 0 2px 2px yellow;
}

.collage_button_wide {
	width:146px;
	height:44px;
	margin-bottom:13px;
}

#clearCanvas, #undoButton {
	width:70px;
	background:white;
	margin:0px 0 5px 0;
}


#flip_vertical, #flip_horizontal {
	width:145px;
	background:white;
	margin:0px 0 5px 0;
}

/*#addCat {
	width:150px;
	background:#FFFF00;
	border: 1px solid #CC9900;
	margin:0px 0 5px 0;
}*/

#cat_collage {
	background-image:url('images/cat_collage_wide.png');
}

#orange_collage {
	background-image:url('images/orange_collage.png');
}

#blue_collage {
	background-image:url('images/blue0.png');
}

#purple_collage {
	background-image:url('images/purple0.png');
}

#green_collage {
	background-image:url('images/green0.png');
}
#yellow_collage {
	background-image:url('images/yellow0.png');
}
#red_collage {
	background-image:url('images/red0.png');
}

#red_button {
	background-color:red;
}
#orange_button {
	background-color:orange;
}
#yellow_button {
	background-color:yellow;
}
#green_button {
	background-color:green;
}
#blue_button {
	background-color:blue;
}
#purple_button {
	background-color:purple;
}
#pink_button {
	background-color:pink;
}
#black_button {
	background-color:black;
}
#gray_button {
	background-color:gray;
}
#white_button {
	background-color:white;
}

#cat_button0 {
	background-image:url('images/cat_button0.png');
}

#cat_button1 {
	background-image:url('images/cat_button1.png');
}

#cat_button2 {
	background-image:url('images/cat_button2.png');
}
#cat_button3 {
	background-image:url('images/cat_button3.png');
}
#cat_button4 {
	background-image:url('images/cat_button4.png');
}
#cat_button5 {
	background-image:url('images/cat_button5.png');
}
#cat_button6 {
	background-image:url('images/cat_button6.png');
}
#cat_button7 {
	background-image:url('images/cat_button7.png');
}
#cat_button8 {
	background-image:url('images/cat_button8.png');
}
#cat_button9 {
	background-image:url('images/cat_button9.png');
}


