/*@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);*/
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
	font-family: Dadhand;
	src: url('../fonts/Dadhand.ttf');
	src: local('Dadhand'), url('../fonts/Dadhand.ttf') format("truetype");
}

* {box-sizing:border-box; -webkit-box-sizing:border-box; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {margin:0; overflow:hidden !important; font-family:'Source Sans Pro', sans-serif; font-smoothing:antialiased;-webkit-font-smoothing:antialiased; background-color:#FFF;}

/* Fix input Zoom in iOS9 PhoneGap app / May only be needed until Phonegap updates this issue? */
html, body {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position:absolute !important;
}

/*
*:not(html) {
	-webkit-transform: translate3d(0, 0, 0);
}
*/

.clear {clear:both;}
.drawerings {font-family:Dadhand;}

.online_ad_supported {position:absolute; bottom:-31px; right:0; font-size:0.6em; color:#111; text-transform:uppercase;}
	.online_ad_supported.ads_disabled {bottom:-16px; right:6px; font-size:0.75em;}

.button:active {opacity:0.5;}

input[type="text"], input[type="tel"], textarea {user-select:initial; -webkit-user-select:initial;}
input, select, textarea {-webkit-appearance:none; border-radius:0;}
input.sel_all {user-select:initial !important; -webkit-user-select:initial !important;}

#disable-overlay {position:absolute; z-index:-1; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out, background-color 200ms ease-out; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}
	#disable-overlay.enabled {pointer-events:auto; opacity:0.7;}
		#disable-overlay.enabled.menu {z-index:98;}
		#disable-overlay.enabled.modal {z-index:999;}

#modal {display:none; position:absolute; z-index:1000; margin:auto; width:250px; top:0; right:0; bottom:0; left:0;}
	#modal #modal_wrap {}
	#modal #modal_content {overflow:hidden; background-color:#FFF; padding:10px; border-radius:3px; -webkit-border-radius:3px;}
#modal h1 {position:relative; z-index:1; margin:0 0 5px; padding:0; text-align:center; font-size:20pt; font-family:Dadhand; font-weight:normal; color:#3592dd;}
	#modal h1 .fa {position:absolute; z-index:-1; top:0; right:0; font-size:9em; color:#E4F1FC;}
		#modal h1 .fa-spinner {display:inline-block;}
	#modal p {position:relative; z-index:1; margin:10px 0;}
		#modal p:first-of-type {margin:0 0 5px;}
	#modal a {position:relative; z-index:1; float:left; width:50%; height:50px; line-height:50px; margin-top:10px; text-align:center; color:#FFF; background-color:#227CC5; opacity:0.85; border-radius:3px 0 0 3px; -webkit-border-radius:3px 0 0 3px;}
		#modal a.fullwidth {width:100%; border:none; margin-top:5px; border-radius:3px; -webkit-border-radius:3px;}
			#modal p a.fullwidth {height:25px; line-height:25px; font-size:0.8em; margin:10px 0 -5px 0; border-radius:3px; -webkit-border-radius:3px;}
	#modal a:last-of-type {background-color:#3592dd; border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0;}
	#modal input[type="text"], #modal textarea {border:none; background-color:#EFEFEF; width:100%; padding:10px; font-size:18px; opacity:0.8; border:1px solid #DDD; font:inherit;}
	#modal #mbutton1:active, #modal #mbutton2:active {opacity:0.9;}

#modal.loading {width:175px; height:50px; line-height:50px;}
#modal.loading h1 .fa {font-size:initial; position:static; color:#999;}
#modal.loading h1 {margin:-10px;}
#modal.loading p, #modal.loading a {display:none !important;}

.hwrapper {position:absolute; z-index:30; top:0; width:100%; height:45px; line-height:45px; color:#767676; background-color:#333;}
	#header {position:relative;}
	#header span.lmenu {position:absolute; width:50px; font-size:18px; text-align:center; left:0; top:0; color:#FFF;}
		#lmenuicon span, #lbackicon span {font-family:dadhand; font-size:0.6em; position:absolute; left:40px;}
		#rtogallery span, #ruser span, #rusers span {font-family:dadhand; font-size:0.6em; position:absolute; right:40px;}
	#header span.rmenu {position:absolute; width:50px; font-size:18px; text-align:center; right:0; top:0; color:#FFF;}
		#header span.lmenu, #header span.rmenu {opacity:0; -webkit-transition: opacity 200ms linear; pointer-events: none;}
			#header span.lmenu.active, #header span.rmenu.active {opacity:1; z-index:1; pointer-events: auto;}
			#header span.lmenu.active:active, #header span.rmenu.active:active {background-color:#444; opacity:0.9;}
				#header #ruser.rmenu, #header #rusers.rmenu {}
	#header h1 {position:relative; top:-3px; font-weight:normal; color:#FFF; margin:0; font-size:22px; text-align:center; letter-spacing:2px; text-transform:uppercase;}
		#header h1 span {position:absolute; right:0; bottom:-16px; left:0; font-size:0.7em; color:#BBB;}

#nav {position:absolute; z-index:100; top:0; max-height:100%; width:275px; background:transparent; overflow-y:scroll; -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 200ms ease-out; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translate3d(-275px, 0, 0);}
	#nav.open {-webkit-transform: translate3d(0, 0, 0);}
#nav ul {list-style:none; margin:0; padding:0;}
	#nav ul li {position:relative; height:45px; line-height:45px; font-size:16px; padding:0 15px; color:#444; background-color:#FFF; border-bottom:solid 1px #E7E7E7;}
		#nav ul li:first-child {height:35px; line-height:35px; color:#FFF; background-color:#3592dd; text-align:center;}
		#nav ul li:first-child .fa {margin-right:0;}
	#nav ul li.rate_apple, #nav ul li.rate_android {display:none;}
	#nav ul li.twolines {font-size:0.8em; line-height:16px; padding:5px 0 0 45px;}
		#nav ul li.twolines .fa {position:absolute; font-size:1.6em; line-height:40px; left:14px; margin-top:-1px;}
	#nav ul li input {border:none;}
		#nav ul li input[type="text"], #nav ul li input[type="tel"], #nav ul li input[type="checkbox"], #nav ul li select {background-color:#EEE; text-align:center; border:none; border-left:1px solid #ddd; position:absolute; right:1px; width:75px; height:100%; font-size:14px;}
			#nav ul li input[type="checkbox"] {margin:0; background:#FF0000;}
				#nav ul li input[type="checkbox"]:checked {background:#31D033;}
					#nav ul li #show_guides_label {position:absolute; right:0; width:75px; text-align:center; color:#FFF; font-size:0.8em; pointer-events:none;}
			#nav ul li .sel_arrow {display:none; position:absolute; width:75px; top:0; right:1px; line-height:44px;}
				#nav ul li .sel_arrow span {z-index:1; position:absolute; background-color:#777; color:#FFF; font-size:9px;}
					#nav ul li .sel_arrow span .fa {width:auto; margin:0;}
						#nav ul li .sel_arrow span:first-child {left:0;}
							#nav ul li .sel_arrow span:first-child .fa {padding:0 5px 0 3px;}
						#nav ul li .sel_arrow span:last-child {right:0}
							#nav ul li .sel_arrow span:last-child .fa {padding:0 3px 0 5px;}
			#nav ul li select {text-indent:40%;}
			#nav ul li input[type="button"] {background-color:#3592dd; color:#FFF; height:100%; width:150px; width:calc(100% - 95px); font-size:16px; margin-left:10px;}
				#nav ul li input[type="button"]:active {opacity:0.9;}
	#nav ul li .fa {width:20px; text-align:center; margin-right:5px;}
	#nav ul li small {font-size:8pt; font-style:italic;}
	#nav ul li a {text-decoration:none; color:#444;}

#nav ul li.timeline_label {height:30px; line-height:30px;}
#nav ul li.timeline {padding:7px 14px;}
	#nav ul li.timeline canvas {width:100%;}
	#nav ul li.timeline #playback_track {border-right:#FF0000 solid 2px; width:0; height:30px; position:relative; top:-48px;}

#inkpot {display:inline-block; background-color:#F2F2F2; width:130px; height:20px; position:relative; font-size:9px; font-family:Arial, Helvetica, sans-serif; float:right; margin-top:8px;}
	#inkpot #inkpot_wrap {position:relative; top:5px;}
		#inkpot #inkpot_wrap .i0 {position:absolute; left:5%;}
		#inkpot #inkpot_wrap .i25 {position:absolute; left:25%;}
		#inkpot #inkpot_wrap .i50 {position:absolute; left:50%;}
		#inkpot #inkpot_wrap .i75 {position:absolute; left:75%;}
	#inkpot_inner {background-color:#000; width:100%; height:20px;}

canvas#draw {position:absolute; top:0; right:0; bottom:0; left:0; z-index:10; width:initial; max-width:100%; height:initial; max-height:100%; padding:5px; margin:auto; -webkit-tap-highlight-color:transparent /*Supress canvas selection with longpress plugin activated */;}
canvas#draw.zoomed {max-height:200%; max-width:200%; margin: 0}

#colorpicker {position:absolute; top: 0; bottom: 0; right: 0; left: 0; z-index:20; opacity:0;  pointer-events:none; -webkit-transition: opacity 200ms ease-in-out; margin:auto;}
	#colorpicker.show {opacity:1; pointer-events:all;}
	#colorpicker .colorwell-selected {border:1px dashed #F9FF00;}
.farbtastic-solid {margin: auto; top: 0; bottom: 0; right: 0; left: 0; position: absolute;}

#pages {position:absolute; width:100%; height:100%; overflow:hidden;}

.content {position:absolute; top:45px; z-index:10; width:100%; height:100%; height:calc(100% - 45px); background-color:#FFF; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transition: -webkit-transform 200ms ease-in-out;}

#drawer .content {height:75%; bottom:100px; margin:auto; height:calc(100% - 145px); overflow:hidden !important;} /*height:75%; bottom:100px; margin:auto; = calc graceful degrade with portrait/landscape support */
	#drawer .content h1 {width:100%; text-align:center; font-weight:normal; font-size:14px; background-color:#3592dd; color:#FFF; margin:0;}
.toolbox {position:absolute; z-index:10; width:100%; bottom:0;}
.toolbox #zoom {position:absolute; left:0; top:-35px; width:50px; height:35px; line-height:35px; text-align:center; font-size:0.8em; background-color:#3592dd; color:#FFF; border-radius:0 3px 0 0; -webkit-border-radius:0 3px 0 0;}
	.toolbox #zoom:active {opacity:0.9;}
.toolbox #save {position:absolute; right:0; top:-40px; width:70px; height:40px; line-height:40px; text-align:center; font-size:28px; background-color:#4a9ee2; color:#FFF; border-radius:3px 0 0 0; -webkit-border-radius:3px 0 0 0;}
	.toolbox #save:active {opacity:0.9;}
.toolbox #rainbow {position:absolute; left:0; top:-35px; height:35px; line-height:35px; text-align:center; font-size:0.8em; background-color:#3592dd; color:#FFF; border-radius:0 3px 0 0; -webkit-border-radius:0 3px 0 0; padding: 0 5px;}
	.toolbox #rainbow:active {opacity:0.9;}
.toolbox .colors {float:left; width:50%;}
	.toolbox .colors .color_code {position:absolute; right:2px; bottom:-18px; font-size:0.7em; opacity:0.6; text-transform:uppercase;}
.toolbox .actions {float:right; width:50%;}
.toolbox input, .toolbox .colorwell {position:relative; width:100%; border:none; text-align:center; font-size:16px; height:50px; line-height:50px; padding:0;}
	.toolbox .colorwell .fa {margin-right:10px;}
	.toolbox .colorwell span .fa {display:none; position:absolute; right:0; line-height:50px;}
		.toolbox .colorwell-selected span .fa {display:inline-block;}
.toolbox input[type="button"] {background-color:#47A3ED; color:#FFF;}
	.toolbox input[type="button"]:first-child {background-color:#3592dd;}
		.toolbox input[type="button"]:active {opacity:0.9;}

.toolbox .cactions {display:none; float:right; width:50%;}
	.toolbox .cactions #ok {height:100px; line-height:100px; text-transform:uppercase;}

#gallery.page {position:absolute; -webkit-transform: translate3d(100%, 0, 0); -webkit-transition: -webkit-transform 200ms ease-in-out;}
	#gallery.page.active {-webkit-transform: translate3d(0,0,0);}
#gallery h1 {width:100%; text-align:center; font-weight:normal; font-size:16px; background-color:#3592dd; color:#FFF; margin:0; line-height:40px;}
#gallery.profile h1 {background-color:#DB7B48;}
	#gallery.profile .paging a.gallery_page {background-color:#E89700;}
#gallery.myprofile h1 {background-color:#24C3D0;}
	#gallery.myprofile .paging a.gallery_page {background-color:#35D0DD;}

#gallery.profile .gallery_back {position:absolute; top:0; left:0; width:50px; text-align:center; color:#FFF; line-height:52px; font-family:'Source Sans Pro', sans-serif;}

#gallery .glist {display:inline-block; width:50%; text-align:center; font-size:1em; padding-bottom:20px; border-bottom:1px dotted #EFEBEB;}
	#gallery .glist h3 {font-weight:normal; font-size:1em; margin:25px 0 0 0; overflow:hidden;}
		#gallery.full .glist {width:100%;}
			#gallery.full .glist h3 {font-size:1.5em;}
		#gallery.grid .glist {width:33%; width:calc(33% + 1px); font-size:0.8em;}
			#gallery.grid .glist h3 {font-size:1em;}
			#gallery.grid .glist .share, #gallery.grid .glist .watch_button {width:60%;}
				#gallery.grid .glist .share {margin-top:5px;}
				#gallery.grid .glist .watch_button {margin:0; margin-top:3px;}
	#gallery .glist img {width:100%; max-width:600px; padding:5px;}
	#gallery .glist .lowres {position:absolute; left:5px; bottom:-2px; font-size:0.55em; width:100%; text-align:center; opacity:0.6;}
	#gallery .glist .drawerings {overflow:hidden;}
		#gallery .glist .drawerings .time {font-size:0.6em; font-style:italic; display:block;}
			#gallery .glist .drawerings .time .fa {font-size:1.5em; margin-left:5px;}
				#gallery .glist .drawerings .time .fav .fa {font-size:2em;}
	#gallery .paging {text-align:center;}
	#gallery .paging span {margin-top:10px; display:inline-block;}
	#gallery .paging a.gallery_page {position:absolute; background-color:#47A3ED; color:#FFF; padding:10px 0; width:105px; font-size:0.8em;}
		#gallery .paging a.gallery_page:active {opacity:0.9;}
		#gallery .paging a.gallery_page .fa {position:relative; top:-1px; font-size:0.7em;}
	#gallery .paging a.gallery_page.gright {right:0; border-radius:0 0 0 3px; -webkit-border-radius:0 0 0 3px;}
		#gallery .paging a.gallery_page.gright .fa {left:2px;}
	#gallery .paging a.gallery_page.gleft {left:0; border-radius:0 0 3px 0; -webkit-border-radius:0 0 3px 0;}
		#gallery .paging a.gallery_page.gleft .fa {right:2px;}
	#gallery .paging a.gallery_page.gleft.switch_view {font-size:0.7em; padding:8px 0;}

	#gallery .loading {position:absolute; top:50%; width:100%; font-size:1.2em; -webkit-transform: translate3d(0,-50%,0);}
		#gallery .loading h3 {}
			#gallery .loading h3 .fa {}

	#gallery .dloading {position:relative; -webkit-transform: translate3d(0, 0, 0);}
		#gallery .dloading .fa {position:absolute; z-index:-1; top:49%; left:0; right:0; margin:0 auto; text-align:center; width:100%;}


.share_check {font-size:1.1em; text-align:left; margin:10px 0 -5px;}
	.share_check input[type="checkbox"] {-webkit-appearance:checkbox; width:22pt; height:22pt; margin:0 10px 0 0; vertical-align:middle;}
		.share_check input[type="checkbox"]:checked {background-color:#31D033;}
.share {background-color:#7FA1F5; color:#FFF; display:inline-block; padding:4px 10px 2px; border-radius:3px; -webkit-border-radius:3px;}
.share_modal div.share_button {float:left; width:calc(33% - 20px); margin:10px; text-align:center;}
	.share_modal div.share_button span {display:block; text-align:center; font-size:0.8em; margin-top:-5px; color:#717171;}
	.share_modal div.share_button .fa {position:relative; font-size:66px;}
		.share_modal div.share_button .fa.share_inactive {opacity:0.2;}
			.share_modal div.share_button .fa.share_inactive::after {content: "*"; position:absolute; font-size:0.4em; top:0; right:-10px;}
	.share_modal .fa-facebook-square {color:#3A5795;}
	.share_modal .fa-twitter-square {color:#28A8E0;}
	.share_modal .fa-google-plus-square{color:#D34231;}
	.share_modal .fa-mobile {}
	.share_modal .fa-envelope-square {color:#27ADB9; /*content: "Email";*/}

.watch_button {display:inline-block; margin-left:5px; background-color:#2FC3EF; color:#FFF; padding:4px 10px 2px; margin-top:5px; border-radius:3px; -webkit-border-radius:3px;}
	.fav {color:#ec8383; font-size:0.9em; padding:10px 5px 5px 0; opacity:0.4;}
		.unfav {opacity:0.8;}

.gallery_type{
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	line-height:40px;
	text-align: center;
	color: #FFF;
	font-family: 'Source Sans Pro', sans-serif;
	background-color:#2E7EBE;
}
.gallery_type:active{background-color:#408AC5; z-index:1;}




/* iOS only */
body#ios.v7 .hwrapper, body#ios.v8 .hwrapper, body#ios.v9 .hwrapper, body#ios.v10 .hwrapper, body#ios.v11 .hwrapper, body#ios.v12 .hwrapper, body#ios.v13 .hwrapper, body#ios.v14 .hwrapper, body#ios.v15 .hwrapper {padding-top:20px; height:65px;}
body#ios.v7 #nav, body#ios.v8 #nav, body#ios.v9 #nav, body#ios.v10 #nav, body#ios.v11 #nav, body#ios.v12 #nav, body#ios.v13 #nav, body#ios.v14 #nav, body#ios.v15 #nav {top:20px; max-height:calc(100% - 20px);}
body#ios.v7 .content, body#ios.v8 .content, body#ios.v9 .content, body#ios.v10 .content, body#ios.v11 .content, body#ios.v12 .content, body#ios.v13 .content, body#ios.v14 .content, body#ios.v15 .content {top:65px; height:calc(100% - 65px);}
body#ios.v7 #drawer .content, body#ios.v8 #drawer .content, body#ios.v9 #drawer .content, body#ios.v10 #drawer .content, body#ios.v11 #drawer .content, body#ios.v12 #drawer .content, body#ios.v13 #drawer .content, body#ios.v14 #drawer .content, body#ios.v15 #drawer .content {height:calc(100% - 165px);}
body#ios #nav ul li.rate_apple {display:list-item;}

/* Android only */
body#android #modal {top:-25%;}
body#android #nav ul li.rate_android {display:list-item;}

/* Windows only */
/*body#win*/

/* Non-phonegap builds only */
body#non-gap .content {overflow-y:auto;}


/* Smaller/Mobile devices Landscape (iPhone <= 6+ etc.) */
@media only screen and (max-height: 414px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1){
#drawer .content {width:calc(100% - 150px); height:calc(100% - 45px); bottom:0;}
	body#ios.v7 #drawer .content, body#ios.v8 #drawer .content, body#ios.v9 #drawer .content, body#ios.v10 #drawer .content, body#ios.v11 #drawer .content, body#ios.v12 #drawer .content, body#ios.v13 #drawer .content, body#ios.v14 #drawer .content, body#ios.v15 #drawer .content {height:calc(100% - 65px);}
.toolbox {width:150px; right:0;}
	.toolbox .colors {width:100%;}
	.toolbox .actions {width:100%;}
	.toolbox .cactions {width:100%;}
#gallery .glist img {max-width:300px;}
}