/*

BASE TEMPLATE LAYOUT

*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}



body{
	display:block;
	margin:0;
	background:#4d4d4d;
	/padding-bottom:50px;
	box-shadow: inset 0 0 100px 20px rgba(0,0,0,0.3);

	font-family:PT Sans;

	text-align:center;
	font-size: 16px;
	font-weight:normal;
	line-height:1.5em;
}

h2{
	text-align:center;
	font-family:PT Serif;
	font-size:1.6em;
	color:#9e9e9e;
	padding:20px;
}


a{
	color:inherit;
	text-decoration:underline;
	cursor:pointer;
}
a:hover{
	color:#777;
}
a.silent-link{
	text-decoration:none;
}
a[silent]{
	text-decoration:none;
}

li{
	padding:10px;
	margin-left:20px;
	list-style:disc;
	list-style-position: outside;
}

input, textarea, select{
	margin: 10px;
	padding:5px 10px;
	font-family: PT Sans;
	font-size: inherit;
	outline:none;
	color:inherit;
	background:transparent;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius:5px;
}
input:focus,
textarea:focus{
	box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
}

input[type=checkbox]{
	vertical-align:middle;
	/* Double-sized Checkboxes */
	-ms-transform: scale(1.5); /* IE */
	-moz-transform: scale(1.5); /* FF */
	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-o-transform: scale(1.5); /* Opera */
	padding: 15px;
	margin:10px;
}
input[type=checkbox]:before {
	/*
	/position: absolute;
	top: -5px;
	left: 0;
	display:inline-block;
	vertical-align:middle;
	width:30px;
	height:30px;
	background:red;*/
}
input[type=checkbox]:checked:before {/* <-- style its checked state..with a ticked icon */
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

.input-div{
	width:100%; padding:15px; margin:5px; border:1px solid rgba(0,0,0,0.1); border-radius:5px; outline:none;
}



button{
	cursor:pointer;

	padding:5px 15px;
	color:#555;
	border-radius:3px;
	border:1px solid rgba(0,0,0,0.4);

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,e0e0e0+100 */
	background: #f7f7f7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7f7f7 0%, #e0e0e0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f7f7f7 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f7f7f7 0%,#e0e0e0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f7f7f7 0%,#e0e0e0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f7f7f7 0%,#e0e0e0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */



	background: #fafafa;
background: -moz-linear-gradient(top, #fafafa 0%, #f3f3f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f3f3f3));
background: -webkit-linear-gradient(top, #fafafa 0%,#f3f3f3 100%);
background: -o-linear-gradient(top, #fafafa 0%,#f3f3f3 100%);
background: -ms-linear-gradient(top, #fafafa 0%,#f3f3f3 100%);
background: linear-gradient(to bottom, #fafafa 0%,#f3f3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f3f3f3',GradientType=0 );



}
button:hover{
	#color:#333;
	#border:1px solid rgba(0,0,0,0.7);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,e8e8e8+100 */
	background: #fcfcfc; /* Old browsers */
	background: -moz-linear-gradient(top,  #fcfcfc 0%, #e8e8e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fcfcfc 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fcfcfc 0%,#e8e8e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fcfcfc 0%,#e8e8e8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fcfcfc 0%,#e8e8e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */


	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */


}
button:active{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e0e0+0,f7f7f7+100 */
	background: #e0e0e0; /* Old browsers */
	background: -moz-linear-gradient(top,  #e0e0e0 0%, #f7f7f7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e0e0e0 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e0e0e0 0%,#f7f7f7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e0e0e0 0%,#f7f7f7 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e0e0e0 0%,#f7f7f7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */




}







/*

Useful components:

*/


.loading-icon{
	width:100%;
	text-align:center;
	display:inline-block;
	font-family:PT Sans; font-size:16px; font-style:oblique; color:#333;
	padding:30px;
	/*
	NB: use like so:

	<span class='loading-icon'><img src='assets/img/ajax-loader.gif'></span>

	*/
}

.disabled{
	opacity:0.3;
}
.btn-active{
	background:#222222;
	color:white;
}



/* Bookends, to make buttons look classy. */


.bookend-left{
	display:inline-block;
	background: url('../img/bookend2 left.png');
	height:20px;
	width:66px;
	vertical-align:middle;
	margin-right:5px;
}
.bookend-right{
	display:inline-block;
	background: url('../img/bookend2 right.png');
	height:20px;
	width:66px;
	vertical-align:middle;
	margin-left:5px;
}
.bookend2-left{
	display:inline-block;
	background: url('../img/bookend left.png');
	height:68px;
	width:70px;
	vertical-align:middle;
	margin-right:5px;
}
.bookend2-right{
	display:inline-block;
	background: url('../img/bookend right.png');
	height:68px;
	width:70px;
	vertical-align:middle;
	margin-left:5px;
}
.bookend3-left{
	display:inline-block;
	background: url('../img/bookend3 left.png');
	height:23px;
	width:76px;
	vertical-align:middle;
	margin-right:5px;
}
.bookend3-right{
	display:inline-block;
	background: url('../img/bookend3 right.png');
	height:23px;
	width:76px;
	vertical-align:middle;
	margin-left:5px;
}
.bookend4-left{
	display:inline-block;
	background: url('../img/bookend4 left.png');
	height:68px;
	width:70px;
	vertical-align:middle;
	margin-right:5px;
}
.bookend4-right{
	display:inline-block;
	background: url('../img/bookend4 right.png');
	height:68px;
	width:70px;
	vertical-align:middle;
	margin-left:5px;
}



.tagline-text{
	font-size:1.1em;
	font-family:PT Serif;
	font-style:oblique;
	line-height:1.5em;
}

.banner-text{
	font-size:1.4em; font-style:oblique; color:#bebebe;
	line-height:1.2;
	font-weight:normal;
}
.banner-text-big{
	font-size:1.4em;
	line-height:1.2;
	font-size:2em; color:#333;
	font-weight:normal;
}
.banner-primary{
	font-family: PT Sans;
	font-weight: bold;
	font-size: 1.3em;
	line-height:1.2;
	margin: 20px 0;
}
.banner-secondary{
	line-height:1.2;
	font-size:1.5em;
	color:#cecece
}

.prompt-text{
	display:none; font-size:0.7em; color:#999; font-family:PT Sans;
}
.photo{
	box-shadow: 0 10px 10px -10px rgba(0,0,0,0.7);
	border:1px solid rgba(0,0,0,0.1);
}



/* layout tags: */
[full]{
	display:inline-block; width:80%; min-width:300px; margin:0; padding:0; vertical-align:middle;
}
[half]{
	display:inline-block; width:45%; min-width:300px; margin:0; padding:0; vertical-align:middle;
}
[two-thirds]{
	display:inline-block; width:55%; min-width:300px; margin:0; padding:0; vertical-align:middle;
}
[third]{
	display:inline-block; width:25%; min-width:300px; margin:0; padding:0; vertical-align:middle;
}



/* Dialog popups: */

.popup{
	display:inline-block;
	background:#f9f9f9;
	border:1px solid rgba(0,0,0,0.1);
	border-radius:5px;
	box-shadow: 0 2px 50px 0px rgba(0,0,0,0.09);
	z-index:1000000;
	padding:40px;
	margin:20px;
}
.popup-content{
	width:80%;
	min-width:300px;
	max-width:600px;
	display:inline-block;
	text-align:left;
}
.popup-content .center{
	text-align:center;
	padding:5px;
}
.mask{
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	z-index:2000000;
	background: rgba(249,249,249,0.86);
}


/* Breadcrumb stages: */

.breadcrumb{
	width:30px; height:30px; border-radius:15px;
	margin:0 20px;
	background:#333;
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}
.breadcrumb:hover{
	background:#555;
}
.breadcrumb.active{
	width:44px; height:44px; border-radius:22px;
	background:white;
	border:7px solid #333;
	margin:0 13px;
}
.breadcrumb.active:hover{
	background:white;
	border:7px solid #555;
}
.breadcrumbs{
	text-align:center;
	margin-top:30px;
	margin-bottom:30px;
}
.breadcrumb-line{
	height:0; width:100%;
	border-top: 4px solid #333;
	z-index:-1;
	margin-bottom:-24px;
}




/* CSS arrows, for the use of.  */

.flyout-arrow-left {
	position:absolute;
	pointer-events:none;
	left:-10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;

	border-right:10px solid #555;
}

.flyout-arrow-bottom {
	position:absolute;
	pointer-events:none;
	bottom:-10px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;

	border-top:10px solid #555;
}
.flyout-arrow-left *,
.flyout-arrow-bottom *
{pointer-events:none;}





/* The Menu bar used by all apps */

.app-menu-bar{
	position: fixed; /* we actually get smoother animation using 'fixed' with JS to set the position */
	margin-bottom: 30px;
	left: 0;
	right: 0;
	z-index:99999;
}
.app-menu{
	width:100%;
	text-align: left;
	padding: 15px;
	background: rgba(249,249,249,0.9);
	border: 1px solid rgba(0,0,0,0.2);
}
.app-menu-bar .right{
	float:right
}
.app-menu-bar .left{
	float:left
}
.app-alert-bar{
	width:100%;
	text-align: left;
	padding: 5px 15px;
	background: rgba(0,0,0,0.6);
	border: 1px solid rgba(0,0,0,0.2);
	color:white;
	text-shadow: 0 0 5px white;
	display:none;
	cursor:pointer;
}
.app-alert-bar.error{
	background: rgba(249,0,0,0.9);
	border: 1px solid rgba(50,0,0,0.2);
}
.app-alert-bar:hover{
	background: rgba(50,50,50,0.6);
}
.app-alert-bar.error:hover{
	background: rgba(255,50,50,0.9);
}


/* Settings panel, used by all apps that want to use it */

.app-settings{
	position: fixed;
	min-width: 300px;
	right: 0;
	background:rgba(249,249,249,0.9);
	border: 1px solid rgba(0,0,0,0.2);
	//padding: 10px;
	bottom: 0;
	top: 0;
	display:none;
	z-index:999;
	overflow-y:auto;
}
.app-settings-content{
	position:relative;
}

.settings-panel{
	text-align:left;
	border: 1px solid rgba(0,0,0,0.2);
	border-left: none; border-right: none; border-bottom:none;
	padding:20px;
}
.settings-panel h3{
	margin:5px -5px;
	font-size:1.2em;
	color:#888;
	font-weight:normal;
}
.settings-bottom{
	background:rgba(249,249,249,0.9);
	border: 1px solid rgba(0,0,0,0.2);
	border-left: none; border-right: none; border-bottom:0;
	padding:20px;
	/position:absolute;
	bottom:0; left:0; right:0;

}










/* Splash image+text for apps */

.app-splash{
	text-align:center;
	padding: 20px;
}
.app-splash img{
	display:inline-block;
	vertical-align:middle;
	padding:5px;
}
.app-splash-text{
	display:inline-block;
	vertical-align:middle;
	text-align:left;
	color:#555;
}
.app-splash-title{
	font-family:PT Sans;
	font-size:2em;
	padding:5px;
}
.app-splash-subtitle{
	font-family:PT Sans;
	font-size:1em;
	padding:5px;
	padding-top:0;
}









/*

Stuff which will probably turn out to be common to many pages:

*/


.help-spiel{
	text-align:left;
	padding: 20px 0;
	display:inline-block;
	width:60%;
	min-width:300px;
}
.help-spiel .call-to-action{
	text-align:center;
	font-style:oblique;
	color:black;
	font-size:1.1em;
}
.call-to-action button{
	width:50%;
	max-width:200px;
}

.helper-text{
	opacity:0.7; font-size:0.8em;
}



.author-pic{
	width:299px; height:299px; border-radius:151px;
	border:solid 1px rgba(0,0,0,0.2);
	background:url('../img/default_user.png');
	margin:30px 0;
	display:inline-block;
}
.author-name{
	font-family:PT Serif;
	font-size:1.8em;
	text-decoration:none;
	color:#808080;
	display:block;
	padding-bottom:25px;
}
.author-icon-small{
	width:59px; height:59px; border-radius:31px;
	border:solid 1px rgba(0,0,0,0.2);
	background:url('../img/default_user.png');
	background-size: 100%;
	margin:5px;
	display:inline-block;
}












/*

@media Queries:

These have to go at the bottom else the other bits try to overwrite them.

Tried to make it as intuitive and non-intrusive as possible. Sizes are 'wide', 'narrow' and 'mobile'

Give something the class 'wide' and it's only visible on a wide screen.
Give it 'wide narrow' and it shows up for everyone but mobile.
(You don't need to use 'wide narrow mobile' because that's the same as giving nothing at all.)

Otherthing I do automatically is adjust button and input sizes, so the users don't
have a hard time sticking their fat podgy fingers on thier tiny little screens.

*/

@media screen and (min-width:1024px){

	/* hide special elements */
	.narrow:not(.wide){ display:none; }
	.mobile:not(.wide){ display:none; }

	.popup{min-width: 500px;}
}

@media screen and (min-width:450px) and (max-width:1024px){

	/* hide special elements */
	.wide:not(.narrow){ display:none }
	.mobile:not(.narrow){ display:none; }

	/* we also want to make buttons finger-friendly */
	input, button, textarea, select{
		padding-top:10px; padding-bottom:10px;
	}

	.popup{min-width: 500px;}
}

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

	/* hide special elements */
	.wide:not(.mobile){ display:none }
	.narrow:not(.mobile){ display:none }

	/* we also want to make buttons finger-friendly */
	input, button, textarea, select{
		padding-top:15px; padding-bottom:15px;
	}

	.popup{
		margin:0;
	}
}