@charset "UTF-8";
/* CSS Document */
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html {
	width: 100%;
}

html,
body { 
  height: 100% !important;
  margin: 0;
  padding: 0;
}

body {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	font-size: 16px;
	padding: 0;
	color: #000;
	background-color: #ffffff;
}

h1, h2, h3 {
	color: #000000;
}

#homepage h1, #homePage h2 {
	margin: 0; 
	padding: 0; 
	text-align: center; 
	font: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'
}

.ui-header {
	padding-left:  0;
	padding-right: 0;
	margin-left: 0; 
	margin-right: 0;
	font-size: 2.5em;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.ui-header .ui-title {
	overflow: visible !important;
  	white-space: normal !important;
}

.ui-header h1, .ui-header h2 {
	color: #ffffff;
}

.ui-page {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0%;
	background-color: #ffffff;
}


.ui-content {
	padding-left: 0%;
	padding-right: 0%;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	/* border: 2px dashed #F40F53; */ 
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

/* row of book covers */
.colouring-book-covers {
	margin-left: 3%; 
	padding-left: 5%; 
	padding-right: 5%;
	padding-bottom: 2%;
	/* border: 1px dashed #000; %/
	width: 90%;
}

.colouring-book-cover {
	/*display: block;
	width: 100%;
	height: 100%;
	
	border: 1px dotted #000;
	overflow: hidden;
	*/
	
}

#logo {
	display: block;
	/* mobile first */
	background-image: url("../images/mobile/barbaros-hair-salon-new-logo.png");
	background-repeat: no-repeat;
	width: 180px;
	height: 32px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5%;
	margin-top: 0;
	/* border: 1px dashed #000; */
}

table#socialLinks {
	position: absolute; 
	top: 1%; 
	left: 80%; 
	display: block; 
	width: 20%; 
	float: right;
	border: 5px dashed #000;
}

/* keep image` display size small without losing resolution */
img#RnRlogo, img#motorhead-colouring-book, img#judas-priest-colouring-book { 
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
}

img#instagram-icon, img#facebook-icon {
	display: block;
	width: 30px; 
}

div#social-links a {
	outline: none;
	border: 0;
	text-decoration: none;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

#banner {
	display: block;
	top: 0;
	left: 0;
	height: 29%;
	width: 100%;
	/*  use larger banner to preserve clarity */
	background-image: url("../images/banner.jpg");
	background-repeat: repeat-x;
	background-position: center;
	background-size: contain;
	background-color: #5A5656;
	overflow: hidden;
	border: 2px dashed #000; 
}


div#rocknrollcolouring {
	outline: none;
	margin: 0;
	text-decoration: none;
}

div#social-links a {
	outline: none;
	border: 0;
	text-decoration: none;
	
}

div#facebook-logo { /* mobile screen */
	width: 30px;
	height: 30px;
	background-image: url(../images/mobile/facebook.jpg);
	background-repeat: no-repeat;
	overflow: hidden;
	border-radius: 10px;
}

div#twitter-logo { /* mobile screen */
	width: 30px;
	height: 30px;
	background-image: url(../images/mobile/twitter.png);
	background-repeat: no-repeat;
}

div#instagram-logo { /* mobile screen */
	width: 30px;
	height: 30px;
	background-image: url(../images/mobile/instagram.png);
	background-repeat: no-repeat;
}

div#sample-page-link {
	display: none; /* do not display on mobile phones (small screen) devices */
	font-size:  1.5em;
	text-align: center;
}



@media screen and (min-device-width: 400px) {
	/* style for desktop/laptop devices */
	div#instagram-logo {
		background-image: url(../images/instagram.png);
		background-repeat:  no-repeat;
		width: 120px;
		height: 120px;
	}
	
	div#twitter-logo {
		background-image: url(../images/twitter.png);
		background-repeat:  no-repeat;
		width: 120px;
		height: 120px;
	}
	
	div#facebook-logo {
		background-image: url(../images/facebook.png);
		background-repeat:  no-repeat;
		width: 120px;
		height: 120px;
		border-radius: 10px;
	}
	
	/* higher resolution image */
	#banner {
		background-image: url("../images/banner.jpg");
	}
	
	img#instagram-icon, img#facebook-icon {
		width: 20px;
		height: 20px;
	}
	
	/* add tests for wifi and printer (later) */
	div#sample-page-link {
		display: block;
		font-size:  1.5em;
		margin-left: 20%;
		width: 60%;
		text-align: center;
	}
	
}