/*
=======================================
web fonts
=======================================
*/

/*
* Firefox, and Firefox-derived browsers like SeaMonkey, have a very
* strict "file uri origin" (file:///) policy by default. To have it to
* behave just as other browsers, set security.fileuri.strict_origin_policy
* to FALSE in about:config.
*/

/*
-----------------------------
BP Maria
-----------------------------
*/

@font-face
{
	font-family: 'bpmaria';
	src: url('../../fonts/bp_maria/bpmaria.woff') format('woff');        
	font-style: normal;
	font-weight: 400;
}

/*
-----------------------------
BP Typewrite Damaged
-----------------------------
*/

@font-face
{
	font-family: 'BPtypewriteDamaged';
	src: url('../../fonts/bp_typewrite/BPtypewriteDamaged.woff') format('woff');
	font-style: normal;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

/*
Italic
-----------------------------
*/

@font-face
{
	font-family: 'BPtypewriteDamaged';
	src: url('../../fonts/bp_typewrite/BPtypewriteDamagedItalic.woff') format('woff');
	font-style: italic;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

/*
Underscored
-----------------------------
*/

@font-face
{
	font-family: 'BPtypewriteDamagedUnderscored';
	src: url('../../fonts/bp_typewrite/BPtypewriteDamagedUnderscored.woff') format('woff');
	font-style: normal;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

/*
Italic underscored
-----------------------------
*/

@font-face
{
	font-family: 'BPtypewriteDamagedUnderscored';
	src: url('../../fonts/bp_typewrite/BPtypewriteDamagedUnderscoredItalic.woff') format('woff');
	font-style: italic;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

/*
-----------------------------
Roboto
-----------------------------
*/

/*
Regular
-----------------------------
*/

@font-face
{
	font-family: 'Roboto';
	src: url('../../fonts/roboto/roboto-regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}

/*
Medium
-----------------------------
*/

@font-face
{
	font-family: 'Roboto';
	src: url('../../fonts/roboto/roboto-medium.ttf') format('truetype');
	font-weight: 500;
	text-rendering: optimizeLegibility;
}




/*
* Styling for lostletters.gr
*
* This stylesheet is ownership of lostletters.gr and may not
* be used without written permission.
*/

/*
=======================================
common font styling

Not all font styling is here. Only the one that's more frequently used. Some of these rules are later overriden so they need to be before everything else.
=======================================
*/

.link a:link, .link a:link:visited, textarea, input[type="submit"], .letter, #filters, #filters dl, #submit fieldset.orientation dl, span.button-outer, #font-selector li.handwritten a:link, #font-selector li.handwritten a:visited, fieldset.terms, .tips h3
{
	font-family: bpmaria;
	font-size: 35px;
}

#pagination a:link, #pagination ul, .handwritten a:link, .handwritten a:visited
{
	font-family: bpmaria;
	font-size: 40px;
}

/*
=======================================
papers - the paper-like background that some boxes have

Some of these rules are later overriden so they need to be before everything else.
=======================================
*/

/*
-----------------------------
common paper
-----------------------------
*/

span.button-outer, .letter, #filters, #choices-list-outer dl, textarea, input[type="text"], fieldset.terms
{
	line-height: 1.7rem;
	color: rgba(0,0,0,0.85);
	border: 0.01rem solid #d2d2d2;
	
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.07), 0 0 0.3rem rgba(0,0,0,0.1);
	
	background: linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.60rem;
	background: -webkit-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.60rem;
	background: -moz-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.60rem;
	background: -ms-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.60rem;
	-ms-background-size: 100% 1.7rem;
	-moz-background-size: 100% 1.7rem;
	-webkit-background-size: 100% 1.7rem;
	background-size: 100% 1.7rem;
}

::-moz-selection
{
	background: rgb(50,50,50);
	color: white;
}

::selection
{
	background: rgb(50,50,50);
	color: white;
}

/*
-----------------------------
'pagination' paper
-----------------------------
*/

#pagination ul
{
	color: rgba(0,0,0,0.5);	
	border: 0.01rem solid #d2d2d2;
	
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.07), 0 0 0.3rem rgba(0,0,0,0.1);
	
	background: linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.20rem;
	background: -webkit-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.20rem;
	background: -moz-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.20rem;
	background: -ms-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.20rem;
	-ms-background-size: 100% 1.7rem;
	-moz-background-size: 100% 1.7rem;
	-webkit-background-size: 100% 1.7rem;
	background-size: 100% 1.7rem;
}

#pagination ::-moz-selection
{
	background: rgb(50,50,50);
	color: white;
}

/*
-----------------------------
'orientation' paper
-----------------------------
*/

#submit fieldset.orientation dl
{
	color: rgba(0,0,0,0.6);
	line-height: 1.7rem;
	
	border: 0.01rem solid #d2d2d2;
	
	box-shadow: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.07), 0 0 0.3rem rgba(0,0,0,0.1);
	
	background: linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.40rem;
	background: -webkit-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.40rem;
	background: -moz-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.40rem; 
	background: -ms-linear-gradient(top, #d9eaf3 0.1rem, #fff 0.1rem) 0 -1.40rem;
	-ms-background-size: 100% 1.7rem;
	-moz-background-size: 100% 1.7rem;
	-webkit-background-size: 100% 1.7rem;
	background-size: 100% 1.7rem;
}

/*
=======================================
base
=======================================
*/

/*
* This doesn't seem to be necessary but I'll leave it
* here till I make sure.
*/
/*
html
{
	position: relative;
	width: 100%;
	height: 100%;
}
*/

body
{
	font-size: 17px;
	margin: auto;
	max-width: 50rem;
	padding: 0 0.5rem 0 0.5rem;
	
	font-family: BPtypewriteDamaged, monospace;
	line-height: 1.6rem;
	font-size: 17px;
	color: white;
	
	/*
	* html is also height 100% that's why I can do this.
	*
	* h1 causes a margin 'bleed' that gives a top margin to body.
	* Here, we compensate for that.
	*/
	
	min-height: calc(100% - 2rem);
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

p, h1, h2, h3 { text-align: center; }

h1, h2, h3 { font-weight: normal; }

h1 { font-size: 1.7rem; }

h2 { margin: 4rem 0 4rem 0; font-size: 1.4rem; }

a:link, a:visited { color: rgba(0,0,200,0.85); text-decoration: none; }

a:link:hover, a:visited:hover { color: rgba(0,0,255,1); }

ul
{
	list-style-type: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

ul li
{
	display: inline;
	margin: 0 0.5rem 0 0.5rem;
	padding: 0;
}

/*
-----------------------------
all forms
-----------------------------
*/

input, textarea
{
	/*
	* WebKit highlights an active input box and textarea,
	* which we don't want.
	*/
	outline: none;
	
	/*
	* Can't find where I've set a border, which makes it
	* necessary to disable it here. Oh well.
	*/
	border: none; 
}

label, legend
{
	display: none;
}

fieldset
{
	padding: 0;
	border: none;
}

textarea, input[type="text"]
{
	width: 100%;
	margin: 1rem 0 1rem 0;
	box-sizing: border-box;
	
	/*
	* Scrolls the background along with the text but wont
	* work on Firefox due to a bug:
	*
	* https://bugzilla.mozilla.org/show_bug.cgi?id=483446
	*/
	background-attachment: local;
}

textarea
{
	height: 17rem;
	padding: 0.60rem;
	
	/*
	* IE has a scrollbar even if there is no content and
	* this makes it vanish. Also, resize:vertical requires
	* 'overflow:' to be something else than 'visible' which
	* is the default
	*/
	overflow: auto;
	
	/*
	* I'm experimenting with adding transition to all element
	* but this makes resizing textareas lag, so I disable
	* transitions for textarea.
	*/
	transition: none;
	
	/*
	* Only allow vertical resizing so as not to make the layout ugly.
	*/
	resize: vertical; 
}

input[type="text"]
{
	padding: 0.6rem 0.55rem 0.3rem 0.55rem;
	
	font-family: monospace;
	font-size: 1rem;
}

input[type="submit"]
{
	margin: 1rem auto 0 auto;
	display: inline;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba(0,0,200,0.85);
	line-height: 1.7rem; /* CHECK: Can I make this more common? */
}

input[type="submit"]:hover
{
	color: rgb(0,0,255);
}

/*
* This field in forms is a spambot trap so we don't
* show it to the user
*/
form .name
{
	display: none;
}

/*
the submit button
-----------------------------
*/

fieldset.button
{
	display: block;
	text-align: center;
	margin-top: 2rem;
}

span.button-outer
{
	display: inline;
	text-align: center;
	color: rgba(0,0,200,0.85);
	padding: 0.2rem 1rem 0rem 1rem;
}

fieldset.button input
{
	display: inline;
	text-align: center;
}

fieldset.button span.before:before
{
	content: '[';
}

fieldset.button span.after:after
{
	content: ']';
}

/* in the submit form, there is a space above */
fieldset.button.space
{
	/*
	* For some reason I don't know, margin doesn't work.
	*/
	
	padding-top: 3rem;
}

/*
=======================================
emphasis - Visual seperation of text layed on an image.

All stuff on emphasis are collected here. So, for example, 'h1 .emphasis' is here.
=======================================
*/

.emphasis
{
	padding: 0.33rem;
	/* margin-top: 1rem; */ /* Seems unnecessary. */
	line-height: 1.8em;
}


/*
-----------------------------
The colors for emphasis are shared in places that emphasis isn't applied as class. So I've gathered them all here. It's a breach of etiquette but it's very convinient.
-----------------------------
*/

.emphasis, #footer ul
{
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	
	color: white;
	
	/* The following 3 lines make it translucent. */
	box-shadow: 0.3rem 0.3rem 0.5rem rgba(0,0,0,0.3);
	background: rgba(0,0,0,0.8); /* This used to be plain black. */
	line-height: 1.8em;
}

/*
Selection
-----------------------------
*/

.emphasis::selection
{
	background: rgba(255,255,255,0.9);
	color: black;
}

/*
* To catch links, for Firefox, you've got to add a space between the class and
* the pseudo-class. But having a space will not catch plain text so you got to
* include that too. What a mess!
*/

.emphasis::-moz-selection,
.emphasis ::-moz-selection,
#footer::-moz-selection,
#footer ::-moz-selection
{
	background: rgba(255,255,255,0.9);
	color: black;
}

/*
* For some idiotic reason, I can't group two ::selection in the same declaration.
*/

.emphasis ::selection
{
	background: rgba(255,255,255,0.9);
	color: black;
}

#footer ::selection
{
	background: rgba(255,255,255,0.9);
	color: black;
}

/*
-----------------------------
for links
-----------------------------
*/

.emphasis a:link, .emphasis a:visited
{
	color: white;
	font-family: BPtypewriteDamagedUnderscored;
	font-size: 1.05rem;
}

h1 .emphasis a:link, h1 .emphasis a:visited
{
	font-size: 1.7rem;
	font-family: BPtypewriteDamaged;
}

/*
-----------------------------
for error
-----------------------------
*/

.emphasis em.error
{
	background: rgba(240,140,140,0.4);
	color: rgba(255,200,200,0.8);
}

/*
-----------------------------
for single page
-----------------------------
*/

#single-message-link .emphasis
{
	padding: 0.3rem;
}

#single-message-link .emphasis a:link, #single-message-link .emphasis a:visited
{
	font-size: 1.25rem;
}

.agreement .emphasis,
.agreement .emphasis a:link,
.agreement .emphasis a:visited
{
	background: white;
	color: black;
}

/*
* To catch links, for Firefox, you've got to add a space between the class and
* the pseudo-class. But having a space will not catch plain text so you got to
* include that too. What a mess!
*/

.agreement .emphasis::-moz-selection,
.agreement .emphasis ::-moz-selection,
.agreement .emphasis a:link::-moz-selection,
.agreement .emphasis a:link ::-moz-selection,
.agreement .emphasis a:visited::-moz-selection,
.agreement .emphasis a:visited ::-moz-selection
{
	background-color: black;
	color: white;
}

/*
=======================================
single - a single message page

Used in intro, agreement, and maintenance page.
=======================================
*/

body#single
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

#single-message
{
	padding: 1rem;
	text-align: center;
}

#single-message-link
{
	margin-top: 3rem;
}

/*
=======================================
nav
=======================================
*/

#nav
{
	margin: 2rem 0 0 0;
	text-align: center;
}

/*
=======================================
letter
=======================================
*/

.letter
{
	position: relative;
	margin: 1.5rem 0 1.5rem 0;
	padding: 0.55rem 1rem 1.55rem 42px;
}

/*
* The double red vertical line.
*/
.letter::before
{
	content: '';
	position: absolute;
	width: 4px;
	top: 0;
	left: 30px;
	bottom: 0;
	
	border: 0.1rem solid;
	border-color: transparent #efe4e4;
}

/*
* I've set text-align to center for all paragraphs, so
* for letter paragraphs, I need to set it to left.
*/
.letter p
{
	text-align: left;
	margin: 0;
	text-indent: 2rem;
}

.head
{
	margin: 0 0 1.7rem 0;
	text-align: center;
	color: rgba(0,0,120,0.8);
}

/*
-----------------------------
social media share buttons
-----------------------------
*/

.letter ul.share
{
	text-indent: 0;
	text-align: center;
	margin-top: 1.3rem;
	color: rgba(0,0,0,0.7);
}

.share li img
{
	max-width: 1.7rem;
	max-height: 1.7rem;
}

/*
-----------------------------
letter link

I only have one .link, and it's inside .letter.
-----------------------------
*/

.link
{
	display: block;
	margin: 1.7rem 0 0 0;
	
	text-transform: lowercase;
	text-indent: 0;
	text-align: right;
}

.link a:link:after
{
	content: ' —->';
	white-space: nowrap;
}

.link a:link:before
{
	content: '...';
}

/*
=======================================
pagination
=======================================
*/

#pagination
{
	border: none;
	margin: 2.5rem 0 3.4rem 0;
	text-align: center;
}

#pagination ul
{
	display: inline;
	text-align: center;
	margin: 0;
	padding: 0.4rem 1.55rem 0.3rem 1.55rem;
	line-height: 1rem;
	color: rgba(0,0,0,0.5);
}

#pagination li
{
	display: inline;
	margin: 0 0.5rem 0 0.5rem;
}

/*
=======================================
filters
=======================================
*/

#filters
{
	position: relative;
	padding: 0.55rem 0.5rem 0.4rem 0.5rem;
	max-width: 15rem;
	margin: auto;
	text-indent: -1.04rem;
	padding-left: 1.04rem;
	text-align: center;
}

#filters a:link:before
{
	content: '-> ';
	margin-left: 0.5rem;
}

#choices
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding: 1rem;
	opacity: 0;
	
	background: rgba(0,0,0,0.65);
	transition: opacity 0.5s linear;
	pointer-events: none;
}

#choices:target
{
	opacity: 1;
	transition: opacity 0.22s linear;
	pointer-events: auto;
}

#choices-list-outer
{
	/*
	* #fullscreen covers the whole background so we need the
	* dl to have a higher z-index to stand on "top" of it.
	* It's a bit strange that Firefox doesn't require this
	* while Chrome does.
	*/
	z-index: 2;
	
	text-align: left;
	position: absolute;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	margin: 0;
	text-indent: 0;
	padding: 0;
}

#choices-list-outer dl
{
	color: rgba(0,0,0,0.6);
	padding: 0.65rem 1rem 1.65rem 2rem;
	margin: 0;
}

#choices dt { margin: 1.7rem 0 0 0; }
#choices dt:first-child { margin: 0; }
#choices dd { margin: 0 0 0 0.5rem; }
#choices .mistake { margin: 1.7rem 0 0 0.5rem; }
#choices a:link:before { content: '-> '; opacity: 0; transition: all 0.2s ease; }
#choices a:link:hover:before { opacity: 1; transition: all 0.2s ease; }

/*
* The clickable background outside the filters box that
* makes the filters box vanish.
*/
#fullscreen
{
	position: fixed;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	
	/*
	* Theoritically useless because I remove the 'content'
	* with the next rule, but in practice the user sees a
	* glimpse of the arrow I placed with 'content' earlier.
	* So I leave it there.
	*/
	text-indent: -9999rem;
}

/*
* To nullify the 'content' I place earlier.
*/
#fullscreen:before, #fullscreen:after { content: ''; }

/*
=======================================
font selector
=======================================
*/

#font-selector
{
	margin: 6rem auto -5rem auto;
	padding: 0.3rem;
	/* max-width: 25rem; */ /* It looks better without this. */
	text-align: center;
}

#font-selector ul
{
	display: inline;
	color: rgba(255,255,255,0.7);
	-padding: 0.5rem 1rem 0.5rem 1rem;
}

#font-selector li
{
	display: inline;
	line-height: 1rem;
	margin: 0;
}

#font-selector li.description
{
	font-style: italic;
	font-size: 1.1rem;
}

#font-selector li.description:before /* NOTE: I could use use first-child */
{
	content: '(';
}

#font-selector li.handwritten a:link, #font-selector li.handwritten a:visited
{
	color: white;
}

#font-selector li.handwritten:after
{
	content: ' ή ';
	font-family: BPtypewriteDamaged;
	font-size: 1.1rem;
	font-style: italic;
}

#font-selector li.plain a:link, #font-selector li.plain a:visited
{
	font-family: BPtypewriteDamaged;
	font-size: 1.25rem;
	color: white;
}

#font-selector li.plain:after /* NOTE: I could last-child */
{
	content: ';)';
	font-size: 1.25rem;
}

/*
=======================================
footer
=======================================
*/

#footer
{
	margin: 7rem 0 1.5rem 0;
	padding: 0;
	text-align: center;
}

#footer ul
{
	padding: 0.3rem;
	display: inline;
}

#footer ul li
{
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#footer ul li:last-child
{
	margin-right: 0;
}

#footer ul li:first-child
{
	margin-left: 0;
}

#footer a:link, #footer a:visited
{
	font-family: BPtypewriteDamagedUnderscored;
	font-size: 1.05rem;
}

#footer a:link, #footer a:visited
{
	color: white;
	
}

/*
=======================================
form: submit
=======================================
*/

#submit fieldset.orientation
{
	/*
	* For Chrome Mobile. TODO2026: why not remove this if it's not doing anything?
	*/
	
	/* width: 100%; */
}

#submit fieldset.orientation label
{
	/*
	* Necessary because I've set them to display:none
	* in all forms.
	*/
	display: inline;
	color: rgba(0,0,200,0.85);
}

#submit fieldset.orientation dl
{
	margin-top: 3rem;
	text-indent: 0;
	padding: 0.65rem 1rem 0.65rem 2rem;
}

#submit fieldset.orientation dt.second
{
	margin-top: 1.7rem;
}

#submit fieldset.orientation dd
{
	margin: 0;
}

fieldset.terms
{
	text-align: center;
	padding: 0.5rem 0rem 0rem 0rem;
	color: rgba(0,0,0,0.6);
	width: 10em;
	margin: auto;
}

fieldset.terms.space
{
	margin-top: 2rem;
}

fieldset.terms label
{
	display: inline;
}

/*
-----------------------------
radio buttons

This is the only place that radio buttons exist so I'll not add specificity to them.
-----------------------------
*/

input[type="radio"]
{
	display: none;
}

input[type="radio"]:not(:checked) + label:before
{
	content: '-> ';
	opacity: 0;
	transition: all 0.2s ease;
}

input[type="radio"]:checked + label:before
{
	content: '-> ';
	opacity: 1;
	transition: all 0.2s linear;
	color: rgba(0,0,200,0.85);
}

/*
-----------------------------
checkboxes

This is the only place that checkboxes exist so I'll not add specificity to them. The span classes they use however, need specificity.
-----------------------------
*/

input[type="checkbox"]
{
	display: none;
}

input[type="checkbox"] + label span.parenthesis-begin:after
{
	content: '(';
}

input[type="checkbox"] + label span.parenthesis-end:before
{
	content: ')';
}

input[type="checkbox"]:not(:checked) + label span.tick:before
{
	content: 'x';
	opacity: 0;
	transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label span.tick:before
{
	content: 'x';
	opacity: 1;
	transition: all 0.2s linear;
	color: rgba(0,0,150,0.85);
}

/*
-----------------------------
incubator-specific styles
-----------------------------
*/

/* The incubator submit page requires some more space from the H1 title. */
.incubator-spacer
{
	margin-top: 7rem;
}

.photo-set
{
	padding: 2rem;
	display: flex;
	justify-content: center;
	align-items: center; /* using flex without this will cause the pictures to squeeze */
}

.photo-set img
{
	display: block;
	box-shadow: 0 0 0.2rem black;
	border: 7px solid white;
}

/*
* Pictures are presented as one-set or two-set and this sets the width.
*/

.set1 img { width: 95%; }

.set2 img { width: 45%; margin: 0.5rem; }

/*
* Each picture has its own rotation and some have custom margins as well.
*/

.tree { rotate: -2.5deg; margin: 2vh 0 2vh 0; }

.touch8 { rotate: -7deg; }

.couch { rotate: -1.2deg; }

.morning { rotate: -2.1deg; }
.bite, { rotate: -2.5deg; margin: 2vh 0 2vh 0; }

/* we need the additional specificity because earlier we use '.set1 img' */
img.books { rotate: 2.4deg; width: 60%; }

.hunger, { rotate: 0.8deg; margin: 2vh 0 2vh 0; }

.ship { rotate: 1.2deg; margin: 2vh 0 2vh 0; }

.kiss2 { rotate: 1.7deg; }

.senses { rotate: -1.7deg; }

.hands { rotate: 3deg; }

/* we need the additional specificity because earlier we use '.set1 img' */
img.liberation { width: 60%; rotate: -1.2deg; }

.under { rotate: 2.1deg; margin: 2vh 0 2vh 0; }

.sensual { rotate: -1.7deg }

.sitting1 { rotate: -1.7deg; }

.playful { rotate: 1.2deg }

.sex1 { rotate: 2.2deg; }

.sex2 { rotate: -1.6deg }

.sex3 { rotate: 1.2deg; }

.sex4 { rotate: 2.4deg } 

/*
=======================================
misc
=======================================
*/

.notice
{
	margin-top: 5rem;
}

.tips p
{
	margin: 1.7rem;
	text-indent: 0;
}

/*
* This gives me the capacity to add more H3.
*/
.tips h3
{
	margin: 0;
	padding-top: 1.7rem;
}

.tips h3.first
{
	padding-top: 1.7rem;
}


/*
===============================
terms page
===============================
*/

html#terms::before
{
	background: white;
}

html#terms h3
{
	font-weight: medium;
	text-align: left;
}

html#terms p
{
	text-align: left;
}

html#terms #content
{
	color: rgba(0,0,0,0.8);
	font-family: roboto,calibri,"gill sans",helvetica,sans-serif;;
}

html#terms #content ::-moz-selection
{
	background: rgb(50,50,50);
	color: white;
}

html#terms h3
{
	font-weight: 500;
	margin-top: 3rem;
}

html#terms #content a:link, body#terms #content a:visited
{
	/* color: rgb(50,30,250); */
	color: black;
	font-weight: 500;
	
	font-family: inherit;
	text-decoration: underline;
	font-size: 1rem;
}

html#terms p.central
{
	font-weight: 500;
	text-align: center;
	font-size: 1.2rem;
}




/*
=======================================
responsive rules
=======================================
*/

@media screen and (max-width: 35rem), screen and (max-height: 27rem)
{
	.head .orientation, .head .date
	{
		display: inline;
	}
	
	.head .orientation:after
	{
		content: ', ';
	}

	/*
	* When page width is too small it's a luxury to have so many numbers
	* in pagination. So I only show first, last, next and previous.
	*/
	
	#pagination li.luxury
	{
		display: none;
	}
	
	/*
	* Reduce the margin on top. Space is limited, lets save some.
	*/
	
	#nav
	{
		margin-top: 1rem;
	}
	
	/*
	* If the window height is too small the filters choices will need to scroll.
	*
	* TODO: I also need the body to lose it's scrollbar but can only be achieved
	* with JS:
	*
	* https://stackoverflow.com/questions/14858220/css-target-body-on-inputfocus
	*/
	
	#choices-list-outer
	{
		bottom: 0.1rem;
		left: 0.1rem;
		right: 0.1rem;
		overflow-y: auto;
	}
	
	/*
	* When page width is too small it's a luxury to have so many numbers
	* in pagination. So I only show first, last, next and previous. The luxury
	* class is added to every other item in the pagination list.
	*/
	
	#pagination li.luxury
	{
		display: none;
	}
	
	.tips p
	{
		margin: 1.7rem 0 1.7rem 0;
	}
}

@media screen and (max-width: 25rem)
{	
	fieldset.terms
	{
		width: auto;
	}
	
	#choices dl
	{
		padding-bottom: 0;
		padding-left: 0.3rem;
		padding-right: 0.3rem;
	}
	
	#choices dl a:link:hover, div#choices dl a:visited:hover
	{
		color: black;
	}

	#choices dl a:link:before
	{
		content: '';
	}
	
	#choices dl dd
	{
		margin: 0;
	}
	
	#choices dd a:link:after
	{
		content: ', ';
	}
	
	#choices dd.last a:link:after
	{
		content: '';
	}
}

/*
-----------------------------
the background images
-----------------------------
*/

/*
* Since this is the default size, I can place that in bg.css. But I like it better in here.
*/

@media screen and (min-width: 0px), screen and (min-height: 0px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r800.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r800.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r800.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r800.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r800.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r800.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r800.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r800.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r800.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r800.jpg"); }
}

@media screen and (min-width: 1024px), screen and (min-height: 1024px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r1024.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r1024.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r1024.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r1024.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r1024.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r1024.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r1024.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r1024.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r1024.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r1024.jpg"); }
}

@media screen and (min-width: 1280px), screen and (min-height: 1280px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r1280.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r1280.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r1280.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r1280.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r1280.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r1280.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r1280.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r1280.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r1280.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r1280.jpg"); }
}

@media screen and (min-width: 1440px), screen and (min-height: 1440px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r1440.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r1440.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r1440.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r1440.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r1440.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r1440.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r1440.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r1440.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r1440.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r1440.jpg"); }
}

@media screen and (min-width: 1600px), screen and (min-height: 1600px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r1600.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r1600.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r1600.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r1600.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r1600.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r1600.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r1600.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r1600.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r1600.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r1600.jpg"); }
}

@media screen and (min-width: 2000px), screen and (min-height: 2000px)
{
	html.typewritter:before
	{ background-image: url("../../images/typewritter_r2000.jpg"); }

	html.ermou_letter:before
	{ background-image: url("../../images/20111113_153119_7254_r2000.jpg"); }

	html.ermou_sunset:before
	{ background-image: url("../../images/20111204_173422_7410_r2000.jpg"); }

	html.pireas_isap:before
	{ background-image: url("../../images/20111226_170949_7723_r2000.jpg"); }

	html.beer:before
	{ background-image: url("../../images/20081116_040613_5824_r2000.jpg"); }

	html.woman_back:before
	{ background-image: url("../../images/20111113_184526_7292_r2000.jpg"); }

	/*
	* It's essentially another person's photo and an identifiable face, so it's
	* already excluded from the list of backgrounds in config.php.
	*/
	/*
	html.woman_floor:before
	{ background-image: url("../../images/20120311_162921_9117_r2000.jpg"); }
	*/

	html.belly:before
	{ background-image: url("../../images/20151018_210950_4497_r2000.jpg"); }

	html.keyboard:before
	{ background-image: url("../../images/20071229_173712_1831_r2000.jpg"); }

	html.hidden:before
	{ background-image: url("../../images/20141122_002848_3591_r2000.jpg"); }
}

/*
* These styles are for pictures that show up on submit.php while the site is in
* incubation mode.
*
* When the viewport goes very small, the pics don't look good when one is next
* to the other because they become too small. So instead we place then one
* under the other, and for most of them with some negative margin on top and
* left or right --which looks really nice, butter than the desktop version.
*
* The incubator mode (and everything about it) where added in 2026.
*/

@media screen and (max-width: 52rem) /* 50rem is the width of body{} as set in desktop.css but in the tests I do with browsers on my desktop it's 52rem. */
{
	.photo-set
	{
		display: block;
	}

	.set1 img
	{
		margin: auto;
	}

	.set2 img
	{
		width: 55%;
		margin: auto;
	}
	
	img.touch8 /* we need the additional specificity because earlier we use '.set1 img' */
	{
		margin-top: -1.5rem;
		margin-left: 1.5rem;
	}
	
	img.bite /* we need the additional specificity because earlier we use '.set1 img' */
	{
		margin-top: -1.5rem;
		margin-left: 1.5rem;
	}
	
	img.books /* we need the additional specificity because earlier we use '.set1 img' */
	{
		rotate: 1.2deg;
	}
	
	img.sex2
	{
		margin-top: -1.5rem;
		margin-left: 1.5rem;
	}
	
	img.sex4
	{
		margin-top: -1.5rem;
		margin-right: 1.5rem;
	}
}




/*
=======================================
Backgrounds
=======================================
*/

/*
* I'm breaching etiquette by having part of the html styles here, but these are
* only necessary for the fixed backgrounds and I wanted them seperate.
*/

html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

html:before
{
	content: '';
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	z-index: -1;
	
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-position: center bottom;
	background-attachment: fixed;
	background-size: cover;
	background-color: rgba(0,0,0,0.65);
}

/*
-----------------------------
Typewritter
-----------------------------
*/

html.typewritter:before
{
	opacity: 0.6;
	/* background-image: url("../../images/typewritter.jpg"); */
}

html.typewritter
{
	background-color: black;
}

/*
-----------------------------
Ermou letter
-----------------------------
*/

html.ermou_letter:before
{
	opacity: 0.8;
	/* background-image: url("../../images/20111113_153119_7254.jpg"); */
}

html.ermou_letter
{
	background: rgba(255,250,250,0.5);
}

/*
-----------------------------
Ermou sunset (best so far)
-----------------------------
*/

html.ermou_sunset:before
{
	opacity: 0.8;
	/* background-image: url("../../images/20111204_173422_7410.jpg"); */
}

html.ermou_sunset
{
	background-color: white;
}

/*
-----------------------------
Pireas ISAP (quite good)
-----------------------------
*/

html.pireas_isap:before
{
	opacity: 0.8;
	/* background-image: url("../../images/20111226_170949_7723.jpg"); */
}

html.pireas_isap
{
	background: white;
}

/*
-----------------------------
Beer (good)
-----------------------------
*/

html.beer:before
{
	opacity: 0.4;
	/* background-image: url("../../images/20081116_040613_5824.jpg"); */
}

html.beer
{
	background-color: gray;
}

/*
-----------------------------
Woman back (good)
-----------------------------
*/

html.woman_back:before
{
	opacity: 0.65;
	/* background-image: url("../../images/20111113_184526_7292.jpg"); */
}

html.woman_back
{
	background-color: white;
}

/*
-----------------------------
Woman floor (good)

It's essentially the photo of another person and an identifiable face, so in config.php it's excluded from the list.
-----------------------------
*/

html.woman_floor:before
{
	opacity: 0.7;
	/* background-image: url("../../images/20120311_162921_9117.jpg"); */
}

html.woman_floor
{
	background-color: white;
}

/*
-----------------------------
Belly (good)
-----------------------------
*/

html.belly:before
{
	opacity: 0.8;
	/* background-image: url("../../images/20151018_210950_4497.jpg"); */
}

html.belly
{
	background-color: white;
}

/*
-----------------------------
Keyboard (ok)
-----------------------------
*/

html.keyboard:before
{
	opacity: 0.7;
	/* background-image: url("../../images/20071229_173712_1831.jpg"); */
}

html.keyboard
{
	background-color: white;
}

/*
-----------------------------
Hidden (ok)
-----------------------------
*/

html.hidden:before
{
	opacity: 0.7;
	/* background-image: url("../../images/20141122_002848_3591.jpg"); */
}

html.hidden
{
	background-color: rgba(0,0,0,0.1);
}




/*
=======================================
overrides
=======================================
*/


/*
* This is my attempt to place footer at the bottom of the page, even if the
* content is not enough to do that. It's not working right now!
*/
/*
html
{
	position: relative;
}

body
{
	position: relative;
	padding-bottom: 15rem;
}

#font-selector, #footer
{
	position: absolute;
}

#font-selector
{
	bottom: 10.5rem;
	width: calc(100% - 1.5rem);
}

#footer
{
	bottom: 0;
	width: calc(100% - 1rem);
}
*/