@charset "utf-8";
/* CSS Document */

body {

	font-family: 'Catamaran', sans-serif;
	color:#333;
	font-size:20px;
	margin:0px;
	/*overflow-y:scroll;*/ /* breaks the scrolling on the page list when dragging pages */

}

input {

	font-family: 'Catamaran', sans-serif;

}

h2 {

	font-size:3em;
	margin-bottom: 15px;
	margin-top: 20px;
	line-height:1em;

}

.top-margin {

	height:185px;

}

.top-banner {

	position:fixed; top:0; left:0; width:100%; z-index:9999;

}

.top-banner-nav {

	float:right; margin-top:20px; font-size:25px; text-align: right;

}

.flex-container {

	display:flex;
  	justify-content: center;
	max-width:1263px;
	flex-wrap: wrap;

}

.product-container {

	flex:1; background-color:#ededed; margin:20px 10px 30px 10px; border-radius:10px; padding:25px 20px 20px 20px; text-align: center; position: relative; cursor: pointer;

}

.product-name {

	background-color:#444; padding:10px; border-radius:5px; font-weight: bold; color:#fff; margin-bottom: 20px; font-size:20px;

}

.main-container {

	margin: 0px auto; max-width:1263px; margin-top: 40px; padding:0px 20px 0px 20px;

}

.create-your-own {

	-webkit-box-shadow:inset 0 0 0 4px rgba(0,0,0,0.1);
	box-shadow:inset 0 0 0 4px rgba(0,0,0,0.1);
	background-color:#87dd58;

}

.personalised .product-name, .create-your-own .product-name {

	background-color:#49ad11;

}

.product-image {

	-webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.1); box-shadow: 0 0 4px 1px rgba(0,0,0,0.1); max-width:225px;

}

.editable-icon {

	position: absolute;
	top:-19px;
	left:0;
	right:0;
	text-align: center;

}

.product-link {

	text-decoration: none;
	color:#fff;

}

a { color:#0088cc; text-decoration: none;}

a:hover{ text-decoration: underline; }

input[type=text],input[type=number],input[type=email],input[type=password],textarea,select {

	border:1px solid #ccc;
	padding:10px;
	border-radius:5px;
	font-family: 'Catamaran', sans-serif;
	color:#333;
	font-size:20px;
	margin-bottom:15px;
	box-sizing: border-box;
	min-width:150px;

}

input[type=submit],input[type=button],button {

	border:0px;
	padding:11px;
	border-radius:5px;
	background-color:#e83692;
	color:#fff;
	font-family: 'Catamaran', sans-serif;
	font-size:18px;
	box-sizing: border-box;
	cursor:pointer;
	min-width:150px;

}

input[type=submit]:hover,input[type=button]:hover,button:hover {

	background-color:#f747a2;
	-webkit-box-shadow: 0 0 5px 0 rgba(255, 117, 177, 0.7);
	box-shadow: 0 0 5px 0 rgba(255, 117, 177, 0.7);

}

.green-button {

	background-color: #51ba00 !important;

}

.green-button:hover {

	box-shadow:none !important;
	-webkit-box-shadow:none !important;
	opacity:0.8;

}

.red-button {

	background-color: #f44259 !important;

}

.red-button:hover {

	box-shadow:none !important;
	-webkit-box-shadow:none !important;
	opacity:0.8;

}

.enlarge-button {

	background-color:#51ba00;
	padding:10px;
	border-radius:5px;
	color:#fff;
	text-align: center;
	margin-bottom: 20px;
	cursor: pointer;

}

.box {

    padding:20px;
    background-color:#eee;
    border-radius:5px;

}

.hr {

	border-top:1px dotted #ccc;
	margin-top:20px;
	margin-bottom: 20px;
	clear:both;

}

.data-table tr:nth-child(odd) {background: #fff !important}
.data-table tr:nth-child(even) {background: #eee !important}
.data-table tr:nth-child(odd):hover {background: #e3e3e3 !important}
.data-table tr:nth-child(even):hover {background: #e3e3e3 !important}
.data-table th { padding:5px; text-indent:5px; }
.data-table { border-collapse:collapse !important; }
.data-table { border:1px solid #c3c3c3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; }

.data-table td {

	padding:7px;
	color:#444;
	border-bottom:1px solid #cdcdcd;
	border-left:1px solid #cdcdcd;
	font-size:18px;

}

.pages-counter {

	background-color:#333;
	padding:20px;
	border-radius:5px;
	color:#fff;
	font-size:24px;
	margin: 0 auto;
	text-align: center;
	display: inline-block;
	margin-bottom: 20px;

}

#contentLeft ul {

	margin: 0;
	padding:0;
	width:100%;

}

#contentLeft li {

	list-style: none;
	width:100%;
	margin:0;
	padding:0;

}

.page-number {

	text-align:center; background:#ddd; color:#333; cursor:move;

}

.page { border:1px solid rgba(0,0,0,0); }

.page:nth-child(odd) td {background-color: #fff !important}
.page:nth-child(even) td {background-color: #eee !important}

.data-table td {background-color: transparent !important}
.data-table td:hover {background-color: #ddd !important}

.data-table { border:0px; }

.data-table td { border:0px; }

.data-table { margin-bottom: 10px; }

.page-number {

	margin:0 auto;
	margin-bottom: 10px;

}

.page-number-container {

	text-align:center; width:30px;

}

.pages-list-button {

	box-sizing: border-box;
	margin-right:10px;
	width:calc(33% - 10px);
	margin-bottom: 5px;

}

.selected {

    border:1px dotted rgba(0,0,0,0.5);

}

.nu-selection-box {
	border: 1px dotted #BBB;
	background: rgba(0, 0, 0, 0.04);
}

.selected-pages {

	position: fixed; bottom:20px; left:20px; padding:10px; background-color: #333; color:#fff; display: none;

}

.selected-pages a {

	color:#fff; text-decoration: underline;

}

.step-number {

	width:25px; height:25px; padding:5px; text-align: center; border-radius:50px; background-color:#e83692; font-size:20px; color:#fff; display:inline-block; margin-right: 10px; margin-bottom:10px; line-height:25px;

}

.please-wait {

	display:none; margin-top:10px;

}

.option-info {

	font-size:14px;
	color:#888;
	font-family:'Arial', sans-serif;

}

.final-step-container {

	marign:0 auto; padding:20px; background-color:#d2ebff; border-radius:10px; clear:both; display:inline-block; margin-top:5px;

}

.checkout-box {

	border-radius:10px; background-color:#fff; padding:20px; margin-top: 15px;

}

.alert {

	padding:10px; border-radius:5px; background:#b5e8ff; margin-bottom:30px; font-size:18px; text-align:left; border:1px solid rgba(0,0,0,0.1);

}

.sign-up-container {

	min-width:50%; float:left;

}

.login-container {

	min-width:50%; float:left;

}

.nav-item {

	padding-right:20px;
	border-right:2px solid #ccc;
	margin-right:20px;
	display:inline-block;

}

.nav-item:first-child a {

	font-weight:bold;
	/*-moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	font-size:26px;
	display:inline-block;*/

}

.nav-item:last-child{

	padding-right:0px;
	border-right:0px;
	margin-right:0px;

}

.nav-container {

	background-color:#eee;
	padding:20px;
	font-size:24px;
	margin: 0 auto;
	text-align: center;

}

.simple-logo {

	display:none;

}

.logo {

	max-width:90%;
	float:left;

}

.planners-logo {

	margin-top: 20px; max-width:90%; float:right;

}

.options-bar {

	padding: 10px; background-color: rgba(220, 220, 220, 0.9); border-radius: 5px; margin-bottom:40px; clear:both

}

.rearrange-pages-note {

	float:right; text-align: right;

}

.email-overlay {z-index:1000000;position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,0.75);}
.email-overlay .enter-email-box {background:#fff;border-radius:20px;width:700px;max-width:90%;text-align:center;margin:0 auto;display:block;float:none;margin-top:40vh;padding:2em 1em;box-sizing:border-box;}
.email-overlay .enter-email-box span.signup_header {text-align:center;margin-top:0;margin-bottom:.5em;font-size:35px;}
.email-overlay .enter-email-box input {display:inline-block;}
.email-overlay .enter-email-box.signup_overlay {margin-top:20vh;}
.email-overlay.signup_overlay_hidden {display:none;}

@media only screen and (max-width: 750px) {

	.top-margin {

		height:0px;

	}

	.top-banner {

		position: relative;

	}

	.top-banner-nav {

		float:none; margin-top:10px; font-size:22px; text-align: center;

	}

	.rearrange-pages-note {

		float:none; text-align: left; margin-top: 0px !important;

	}

	.options-bar {

		margin-bottom:20px;

	}

	.main-container {

		margin-top:20px;

	}

	h2 {

		font-size:2em;
		margin-bottom: 10px !important;

	}

	.simple-logo {

		display:block;
		margin:10px auto;
		max-width:90%;
		margin-top:20px;

	}

	.logo {

		display:none;

	}

	.planners-logo {

		display:none;

	}

	.nav-container {

		padding:10px;

	}

	.nav-item {

		padding-right:0px;
		border-right:0px;
		margin-right:0px;
		padding-bottom:5px;
		border-bottom:1px solid #ccc;
		margin-bottom:5px;
		font-size:18px;
		display:block;

	}

	.nav-item:last-child{

		padding-bottom:0px;
		border-bottom:0px;
		margin-bottom:0px;

	}

	.login-container {

		margin-top:20px;
		border-top:1px dotted #ccc;
		padding-top: 30px;

	}

	.login-container, .sign-up-container {

		min-width:100%;
		float:none;
		text-align: center;

	}

	.login-container table, .sign-up-container table {

		margin:0 auto;

	}

	.email-overlay .enter-email-box {margin-top:20vh;}
	.email-overlay .enter-email-box form {margin-bottom:1em;}
	.email-overlay .enter-email-box h1 {text-align:center;margin-top:0;margin-bottom:.5em;font-size:25px;line-height:1.25em;}

}